= (props) => {\n const modalProps: ModalProps = {\n scrollBehavior: \"outside\",\n autoFocus: true,\n trapFocus: true,\n returnFocusOnClose: true,\n blockScrollOnMount: true,\n allowPinchZoom: false,\n motionPreset: \"scale\",\n lockFocusAcrossFrames: true,\n ...props,\n }\n\n const {\n portalProps,\n children,\n autoFocus,\n trapFocus,\n initialFocusRef,\n finalFocusRef,\n returnFocusOnClose,\n blockScrollOnMount,\n allowPinchZoom,\n preserveScrollBarGap,\n motionPreset,\n lockFocusAcrossFrames,\n onCloseComplete,\n } = modalProps\n\n const styles = useMultiStyleConfig(\"Modal\", modalProps)\n const modal = useModal(modalProps)\n\n const context = {\n ...modal,\n autoFocus,\n trapFocus,\n initialFocusRef,\n finalFocusRef,\n returnFocusOnClose,\n blockScrollOnMount,\n allowPinchZoom,\n preserveScrollBarGap,\n motionPreset,\n lockFocusAcrossFrames,\n }\n\n return (\n \n \n \n {context.isOpen && {children}}\n \n \n \n )\n}\n\nModal.displayName = \"Modal\"\n","import type { Target, TargetAndTransition, Transition } from \"framer-motion\"\n\nexport type TransitionProperties = {\n /**\n * Custom `transition` definition for `enter` and `exit`\n */\n transition?: TransitionConfig\n /**\n * Custom `transitionEnd` definition for `enter` and `exit`\n */\n transitionEnd?: TransitionEndConfig\n /**\n * Custom `delay` definition for `enter` and `exit`\n */\n delay?: number | DelayConfig\n}\n\ntype TargetResolver = (\n props: P & TransitionProperties,\n) => TargetAndTransition\n\ntype Variant
= TargetAndTransition | TargetResolver
\n\nexport type Variants
= {\n enter: Variant
\n exit: Variant
\n initial?: Variant
\n}\n\ntype WithMotionState
= Partial>\n\nexport type TransitionConfig = WithMotionState\n\nexport type TransitionEndConfig = WithMotionState\n\nexport type DelayConfig = WithMotionState\n\nexport const TRANSITION_EASINGS = {\n ease: [0.25, 0.1, 0.25, 1],\n easeIn: [0.4, 0, 1, 1],\n easeOut: [0, 0, 0.2, 1],\n easeInOut: [0.4, 0, 0.2, 1],\n} as const\n\nexport const TRANSITION_VARIANTS = {\n scale: {\n enter: { scale: 1 },\n exit: { scale: 0.95 },\n },\n fade: {\n enter: { opacity: 1 },\n exit: { opacity: 0 },\n },\n pushLeft: {\n enter: { x: \"100%\" },\n exit: { x: \"-30%\" },\n },\n pushRight: {\n enter: { x: \"-100%\" },\n exit: { x: \"30%\" },\n },\n pushUp: {\n enter: { y: \"100%\" },\n exit: { y: \"-30%\" },\n },\n pushDown: {\n enter: { y: \"-100%\" },\n exit: { y: \"30%\" },\n },\n slideLeft: {\n position: { left: 0, top: 0, bottom: 0, width: \"100%\" },\n enter: { x: 0, y: 0 },\n exit: { x: \"-100%\", y: 0 },\n },\n slideRight: {\n position: { right: 0, top: 0, bottom: 0, width: \"100%\" },\n enter: { x: 0, y: 0 },\n exit: { x: \"100%\", y: 0 },\n },\n slideUp: {\n position: { top: 0, left: 0, right: 0, maxWidth: \"100vw\" },\n enter: { x: 0, y: 0 },\n exit: { x: 0, y: \"-100%\" },\n },\n slideDown: {\n position: { bottom: 0, left: 0, right: 0, maxWidth: \"100vw\" },\n enter: { x: 0, y: 0 },\n exit: { x: 0, y: \"100%\" },\n },\n}\n\nexport type SlideDirection = \"top\" | \"left\" | \"bottom\" | \"right\"\n\nexport function getSlideTransition(options?: { direction?: SlideDirection }) {\n const side = options?.direction ?? \"right\"\n switch (side) {\n case \"right\":\n return TRANSITION_VARIANTS.slideRight\n case \"left\":\n return TRANSITION_VARIANTS.slideLeft\n case \"bottom\":\n return TRANSITION_VARIANTS.slideDown\n case \"top\":\n return TRANSITION_VARIANTS.slideUp\n default:\n return TRANSITION_VARIANTS.slideRight\n }\n}\n\nexport const TRANSITION_DEFAULTS = {\n enter: {\n duration: 0.2,\n ease: TRANSITION_EASINGS.easeOut,\n },\n exit: {\n duration: 0.1,\n ease: TRANSITION_EASINGS.easeIn,\n },\n} as const\n\nexport type WithTransitionConfig = Omit &\n TransitionProperties & {\n /**\n * If `true`, the element will unmount when `in={false}` and animation is done\n */\n unmountOnExit?: boolean\n /**\n * Show the component; triggers when enter or exit states\n */\n in?: boolean\n }\n\nexport const withDelay = {\n enter: (\n transition: Transition,\n delay?: number | DelayConfig,\n ): Transition & { delay: number | undefined } => ({\n ...transition,\n delay: typeof delay === \"number\" ? delay : delay?.[\"enter\"],\n }),\n exit: (\n transition: Transition,\n delay?: number | DelayConfig,\n ): Transition & { delay: number | undefined } => ({\n ...transition,\n delay: typeof delay === \"number\" ? delay : delay?.[\"exit\"],\n }),\n}\n","import { cx } from \"@chakra-ui/shared-utils\"\nimport {\n AnimatePresence,\n HTMLMotionProps,\n motion,\n Variants as _Variants,\n} from \"framer-motion\"\nimport { forwardRef } from \"react\"\nimport {\n TRANSITION_DEFAULTS,\n Variants,\n withDelay,\n WithTransitionConfig,\n} from \"./transition-utils\"\n\nexport interface FadeProps\n extends WithTransitionConfig> {}\n\nconst variants: Variants = {\n enter: ({ transition, transitionEnd, delay } = {}) => ({\n opacity: 1,\n transition:\n transition?.enter ?? withDelay.enter(TRANSITION_DEFAULTS.enter, delay),\n transitionEnd: transitionEnd?.enter,\n }),\n exit: ({ transition, transitionEnd, delay } = {}) => ({\n opacity: 0,\n transition:\n transition?.exit ?? withDelay.exit(TRANSITION_DEFAULTS.exit, delay),\n transitionEnd: transitionEnd?.exit,\n }),\n}\n\nexport const fadeConfig: HTMLMotionProps<\"div\"> = {\n initial: \"exit\",\n animate: \"enter\",\n exit: \"exit\",\n variants: variants as _Variants,\n}\n\nexport const Fade = forwardRef(function Fade(\n props,\n ref,\n) {\n const {\n unmountOnExit,\n in: isOpen,\n className,\n transition,\n transitionEnd,\n delay,\n ...rest\n } = props\n\n const animate = isOpen || unmountOnExit ? \"enter\" : \"exit\"\n const show = unmountOnExit ? isOpen && unmountOnExit : true\n\n const custom = { transition, transitionEnd, delay }\n\n return (\n \n {show && (\n \n )}\n \n )\n})\n\nFade.displayName = \"Fade\"\n","import { cx } from \"@chakra-ui/shared-utils\"\nimport {\n chakra,\n ChakraProps,\n SystemStyleObject,\n forwardRef,\n} from \"@chakra-ui/system\"\nimport { fadeConfig } from \"@chakra-ui/transition\"\nimport { motion, HTMLMotionProps } from \"framer-motion\"\n\nimport { useModalStyles, useModalContext } from \"./modal\"\n\nconst MotionDiv = chakra(motion.div)\n\nexport interface ModalOverlayProps\n extends Omit, \"color\" | \"transition\">,\n ChakraProps {\n children?: React.ReactNode\n motionProps?: HTMLMotionProps<\"div\">\n}\n\n/**\n * ModalOverlay renders a backdrop behind the modal. It is\n * also used as a wrapper for the modal content for better positioning.\n *\n * @see Docs https://chakra-ui.com/modal\n */\nexport const ModalOverlay = forwardRef(\n (props, ref) => {\n const { className, transition, motionProps: _motionProps, ...rest } = props\n const _className = cx(\"chakra-modal__overlay\", className)\n\n const styles = useModalStyles()\n const overlayStyle: SystemStyleObject = {\n pos: \"fixed\",\n left: \"0\",\n top: \"0\",\n w: \"100vw\",\n h: \"100vh\",\n ...styles.overlay,\n }\n\n const { motionPreset } = useModalContext()\n const defaultMotionProps: HTMLMotionProps<\"div\"> =\n motionPreset === \"none\" ? {} : fadeConfig\n\n const motionProps: any = _motionProps || defaultMotionProps\n\n return (\n \n )\n },\n)\n\nModalOverlay.displayName = \"ModalOverlay\"\n","import { cx } from \"@chakra-ui/shared-utils\"\nimport {\n AnimatePresence,\n HTMLMotionProps,\n motion,\n Variants as _Variants,\n} from \"framer-motion\"\nimport { forwardRef } from \"react\"\nimport {\n TRANSITION_DEFAULTS,\n Variants,\n withDelay,\n WithTransitionConfig,\n} from \"./transition-utils\"\n\ninterface SlideFadeOptions {\n /**\n * The offset on the horizontal or `x` axis\n * @default 0\n */\n offsetX?: string | number\n /**\n * The offset on the vertical or `y` axis\n * @default 8\n */\n offsetY?: string | number\n /**\n * If `true`, the element will be transitioned back to the offset when it leaves.\n * Otherwise, it'll only fade out\n * @default true\n */\n reverse?: boolean\n}\n\nconst variants: Variants = {\n initial: ({ offsetX, offsetY, transition, transitionEnd, delay }) => ({\n opacity: 0,\n x: offsetX,\n y: offsetY,\n transition:\n transition?.exit ?? withDelay.exit(TRANSITION_DEFAULTS.exit, delay),\n transitionEnd: transitionEnd?.exit,\n }),\n enter: ({ transition, transitionEnd, delay }) => ({\n opacity: 1,\n x: 0,\n y: 0,\n transition:\n transition?.enter ?? withDelay.enter(TRANSITION_DEFAULTS.enter, delay),\n transitionEnd: transitionEnd?.enter,\n }),\n exit: ({ offsetY, offsetX, transition, transitionEnd, reverse, delay }) => {\n const offset = { x: offsetX, y: offsetY }\n return {\n opacity: 0,\n transition:\n transition?.exit ?? withDelay.exit(TRANSITION_DEFAULTS.exit, delay),\n ...(reverse\n ? { ...offset, transitionEnd: transitionEnd?.exit }\n : { transitionEnd: { ...offset, ...transitionEnd?.exit } }),\n }\n },\n}\n\nexport const slideFadeConfig: HTMLMotionProps<\"div\"> = {\n initial: \"initial\",\n animate: \"enter\",\n exit: \"exit\",\n variants: variants as _Variants,\n}\n\nexport interface SlideFadeProps\n extends SlideFadeOptions,\n WithTransitionConfig