{"version":3,"sources":["webpack:///./src/icons/CloseIcon.tsx","webpack:///./src/components/Modal/Modal.tsx"],"names":["CloseIcon","React","props","svgRef","width","height","viewBox","focusable","ref","fill","fillRule","d","noop","modalVariants","show","opacity","transition","type","duration","hide","Modal","isOpen","onDismiss","noLogo","children","title","actions","t","useDictionary","modalHeaderId","useId","useState","shouldRender","setShouldRender","initialFocus","css","div","animate","initial","onAnimationComplete","onAnimationStart","variants","sx","px","rem","py","display","flexDirection","maxHeight","backgroundColor","Colors","BorderGrey","aria-labelledby","PureWhite","boxShadow","maxWidth","minWidth","pt","pb","variant","ButtonVariant","Flat","onClick","aria-label","position","right","top","animateIn","mb","id","TextVariant","H3","as","justifyContent","mt","borderTop","borderTopColor","map","index","label","href","variation","submitting","data-primary","key","undefined","mr"],"mappings":"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","file":"static/scripts/3-1cb57981c2e0be699d4a.js","sourcesContent":["/*\n GENERATED FILE - DO NOT MODIFY\n Any changes will be overwritten when `yarn svgs` is executed.\n \n Generated from: assets/close.svg\n If you need to make changes the attributes, modify the original .svg file.\n \n If you need to modify the file further, consider copying this generated file to a new location,\n or into the component that uses it. If you do this, it might make sense to remove the original .svg file, \n or it could be regenerated the next time SVGs are generated.\n*/\nimport * as React from 'react';\nconst CloseIcon = React.forwardRef(\n  (props: React.SVGProps<SVGSVGElement>, svgRef: any) => (\n    <svg\n      width={40}\n      height={40}\n      viewBox=\"0 0 40 40\"\n      focusable={false}\n      ref={svgRef}\n      {...props}\n    >\n      <g fill=\"#757676\" fillRule=\"evenodd\">\n        <path d=\"M10.808 27.778l16.97-16.97 1.414 1.414-16.97 16.97z\" />\n        <path d=\"M10.808 12.222l1.414-1.414 16.97 16.97-1.414 1.414z\" />\n      </g>\n    </svg>\n  ),\n);\nexport default CloseIcon;\n","import React, { ReactNode, useState } from 'react';\nimport {\n  Dialog,\n  DialogBackdrop,\n  DialogContent,\n  Heading,\n} from '@charlietango/ui';\nimport useId from '@charlietango/use-id';\nimport { rem } from 'polished';\n\nimport { useDictionary } from '../../hooks/useDictionary';\nimport CloseIcon from '../../icons/CloseIcon';\nimport { ButtonVariant } from '../../styles/buttons';\nimport { Colors } from '../../styles/colors';\nimport { TextVariant } from '../../styles/typography';\nimport { motion } from '../../utils/motion';\nimport Button from '../Button/Button';\nimport Logo from '../Logo/Logo';\n\nexport type ModalAction = {\n  label: string;\n  href?: string;\n  onClick?: () => void;\n  variation: ButtonVariant;\n  submitting?: boolean;\n};\n\nexport type ModalProps = {\n  title?: string;\n  children?: ReactNode | ReactNode[];\n  actions?: ModalAction[];\n  isOpen?: boolean;\n  onDismiss?: () => void;\n  noLogo?: boolean;\n};\n\nconst noop = () => {};\n\nconst modalVariants = {\n  show: {\n    opacity: 1,\n    transition: {\n      type: 'tween',\n      duration: 0.3,\n    },\n  },\n  hide: {\n    opacity: 0,\n    transition: {\n      type: 'tween',\n      duration: 0.3,\n    },\n  },\n};\n\nfunction Modal({\n  isOpen,\n  onDismiss,\n  noLogo,\n  children,\n  title,\n  actions,\n}: ModalProps) {\n  const { t } = useDictionary();\n  const modalHeaderId = useId('modal-header');\n\n  // Normally we would use `<AnimatePresence>` from ../../utils/motion for handling if we should render.\n  // But, for some reason this creates an obscure error on some iPhones, that breaks the animation early\n  // leaving us in a faded state.\n  const [shouldRender, setShouldRender] = useState(isOpen);\n\n  // If the modal isn't open, and it shouldn't render, just return `null`\n  if (!isOpen && !shouldRender) return null;\n\n  return (\n    <Dialog\n      isOpen\n      onDismiss={onDismiss || noop}\n      initialFocus={'[data-primary=\"true\"]'}\n      css={{\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n        zIndex: 1,\n      }}\n    >\n      <motion.div\n        animate={isOpen ? 'show' : 'hide'}\n        initial=\"hide\"\n        onAnimationComplete={() => {\n          setShouldRender(isOpen);\n        }}\n        onAnimationStart={() => {\n          setShouldRender(true);\n        }}\n        variants={modalVariants}\n        sx={{\n          px: [4, rem(72), 0],\n          py: 4,\n          display: 'flex',\n          flexDirection: 'column',\n          maxHeight: '100%',\n        }}\n      >\n        <DialogBackdrop\n          sx={{ backgroundColor: Colors.BorderGrey, opacity: 0.7 }}\n        />\n        <DialogContent\n          aria-labelledby={modalHeaderId}\n          sx={{\n            backgroundColor: Colors.PureWhite,\n            boxShadow: '0 5px 18px 0 rgba(0, 0, 0, 0.05)',\n            maxWidth: 625,\n            minWidth: [null, 500],\n            pt: 9,\n            pb: 6,\n            px: [5, 9],\n          }}\n        >\n          {onDismiss ? (\n            <Button\n              variant={ButtonVariant.Flat}\n              onClick={onDismiss}\n              aria-label={t('modal.closeDialog')}\n              sx={{\n                width: 'auto',\n                position: 'absolute',\n                right: 0,\n                top: 0,\n              }}\n            >\n              <CloseIcon />\n            </Button>\n          ) : null}\n          <div>\n            {!noLogo ? <Logo animateIn sx={{ mb: 4 }} /> : null}\n            {title && (\n              <Heading\n                sx={{ mb: 4 }}\n                id={modalHeaderId}\n                variant={TextVariant.H3}\n                // Modals er essentially new pages, so dialog title should be a h1\n                as=\"h1\"\n              >\n                {title}\n              </Heading>\n            )}\n            {children}\n            <div\n              sx={{\n                display: 'flex',\n                justifyContent: 'flex-end',\n                mt: actions ? [9] : rem(80),\n                borderTop: actions ? ['none', '1px solid'] : 'none',\n                borderTopColor: ['none', Colors.BorderGrey],\n                pt: actions ? 6 : 0,\n              }}\n            >\n              {actions && (\n                <div\n                  sx={{\n                    width: ['100%', 'auto'],\n                    display: 'flex',\n                    flexDirection: ['column', 'row-reverse'],\n                    justifyContent: 'flex-end',\n                  }}\n                >\n                  {actions.map(\n                    (\n                      { label, onClick, href, variation, submitting },\n                      index,\n                    ) => (\n                      <Button\n                        data-primary={index === 0}\n                        key={label + index}\n                        onClick={onClick}\n                        href={href}\n                        variant={variation}\n                        submitting={submitting}\n                        sx={{\n                          width: ['100%', 'auto'],\n                          minWidth: 130,\n                          mt: index !== 0 ? [3, 0] : undefined,\n                          mr: index !== 0 ? [undefined, 2] : undefined,\n                        }}\n                      >\n                        {label}\n                      </Button>\n                    ),\n                  )}\n                </div>\n              )}\n            </div>\n          </div>\n        </DialogContent>\n      </motion.div>\n    </Dialog>\n  );\n}\n\nexport default Modal;\n"],"sourceRoot":""}