{"version":3,"sources":["../src/modal-content.tsx"],"sourcesContent":["import { cx } from \"@chakra-ui/shared-utils\"\nimport {\n  HTMLChakraProps,\n  chakra,\n  SystemStyleObject,\n  forwardRef,\n} from \"@chakra-ui/system\"\nimport { HTMLMotionProps } from \"framer-motion\"\n\nimport { useModalContext, useModalStyles } from \"./modal\"\nimport { ModalFocusScope } from \"./modal-focus\"\nimport { ModalTransition } from \"./modal-transition\"\n\nexport interface ModalContentProps extends HTMLChakraProps<\"section\"> {\n  /**\n   * The props to forward to the modal's content wrapper\n   */\n  containerProps?: HTMLChakraProps<\"div\">\n  /**\n   * The custom framer-motion transition to use for the modal\n   */\n  motionProps?: HTMLMotionProps<\"section\">\n}\n\n/**\n * ModalContent is used to group modal's content. It has all the\n * necessary `aria-*` properties to indicate that it is a modal\n */\nexport const ModalContent = forwardRef<ModalContentProps, \"section\">(\n  (props, ref) => {\n    const {\n      className,\n      children,\n      containerProps: rootProps,\n      motionProps,\n      ...rest\n    } = props\n\n    const { getDialogProps, getDialogContainerProps } = useModalContext()\n\n    const dialogProps = getDialogProps(rest, ref) as any\n    const containerProps = getDialogContainerProps(rootProps)\n\n    const _className = cx(\"chakra-modal__content\", className)\n\n    const styles = useModalStyles()\n\n    const dialogStyles: SystemStyleObject = {\n      display: \"flex\",\n      flexDirection: \"column\",\n      position: \"relative\",\n      width: \"100%\",\n      outline: 0,\n      ...styles.dialog,\n    }\n\n    const dialogContainerStyles: SystemStyleObject = {\n      display: \"flex\",\n      width: \"100vw\",\n      height: \"$100vh\",\n      position: \"fixed\",\n      left: 0,\n      top: 0,\n      ...styles.dialogContainer,\n    }\n\n    const { motionPreset } = useModalContext()\n\n    return (\n      <ModalFocusScope>\n        <chakra.div\n          {...containerProps}\n          className=\"chakra-modal__content-container\"\n          tabIndex={-1}\n          __css={dialogContainerStyles}\n        >\n          <ModalTransition\n            preset={motionPreset}\n            motionProps={motionProps}\n            className={_className}\n            {...dialogProps}\n            __css={dialogStyles}\n          >\n            {children}\n          </ModalTransition>\n        </chakra.div>\n      </ModalFocusScope>\n    )\n  },\n)\n\nModalContent.displayName = \"ModalContent\"\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAS,UAAU;AACnB;AAAA,EAEE;AAAA,EAEA;AAAA,OACK;AAsEG;AAhDH,IAAM,eAAe;AAAA,EAC1B,CAAC,OAAO,QAAQ;AACd,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAChB;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,EAAE,gBAAgB,wBAAwB,IAAI,gBAAgB;AAEpE,UAAM,cAAc,eAAe,MAAM,GAAG;AAC5C,UAAM,iBAAiB,wBAAwB,SAAS;AAExD,UAAM,aAAa,GAAG,yBAAyB,SAAS;AAExD,UAAM,SAAS,eAAe;AAE9B,UAAM,eAAkC;AAAA,MACtC,SAAS;AAAA,MACT,eAAe;AAAA,MACf,UAAU;AAAA,MACV,OAAO;AAAA,MACP,SAAS;AAAA,MACT,GAAG,OAAO;AAAA,IACZ;AAEA,UAAM,wBAA2C;AAAA,MAC/C,SAAS;AAAA,MACT,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,MAAM;AAAA,MACN,KAAK;AAAA,MACL,GAAG,OAAO;AAAA,IACZ;AAEA,UAAM,EAAE,aAAa,IAAI,gBAAgB;AAEzC,WACE,oBAAC,mBACC;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACE,GAAG;AAAA,QACJ,WAAU;AAAA,QACV,UAAU;AAAA,QACV,OAAO;AAAA,QAEP;AAAA,UAAC;AAAA;AAAA,YACC,QAAQ;AAAA,YACR;AAAA,YACA,WAAW;AAAA,YACV,GAAG;AAAA,YACJ,OAAO;AAAA,YAEN;AAAA;AAAA,QACH;AAAA;AAAA,IACF,GACF;AAAA,EAEJ;AACF;AAEA,aAAa,cAAc;","names":[]}