{"version":3,"file":"index-dc8695b1.js","sources":["../../src/components/IconButton/index.tsx","../../src/icons/Close.tsx","../../src/components/Transition/index.tsx","../../src/components/Modal/index.tsx"],"sourcesContent":["import { useMemo, ReactNode } from 'react';\nimport clsx from 'clsx';\n\nimport { Button } from 'components/Button';\n\ntype Props = {\n  label: string;\n  showPlaceholder?: boolean;\n  component: <T>(props: T) => JSX.Element;\n  children: ReactNode;\n  className: string;\n};\n\n// Enhancement: Provide placeholder function, so that developer can decide the logic.\nfunction IconButton(props: Props) {\n  const { label, showPlaceholder = false, component: Component = Button, children, className, ...restProps } = props;\n\n  const placeholderText = useMemo(() => {\n    if (!showPlaceholder) return '';\n\n    return label\n      .split(' ')\n      .map((w) => w[0])\n      .join('')\n      .substring(0, 2)\n      .trim();\n  }, [label, showPlaceholder]);\n\n  return (\n    <Component\n      className={clsx(\n        'relative after:absolute after:top-1/2 after:left-1/2 after:h-[45px] after:min-w-[45px] after:w-full after:-translate-x-1/2 after:-translate-y-1/2',\n        className\n      )}\n      aria-label={label}\n      {...restProps}\n    >\n      {children}\n      {showPlaceholder ? placeholderText : null}\n    </Component>\n  );\n}\n\nexport { IconButton };\n","import IconProps from './IconProps';\n\nfunction Close(props: IconProps) {\n  const { width = 17, height = 17, ariaLabel} = props;\n\n  return (\n    <svg width={width} height={height} viewBox=\"0 0 17 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-label={ariaLabel}>\n      <path d=\"M1.0625 16L16.2147 1\" stroke=\"#555250\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      <path d=\"M16.2147 16L1.0625 1\" stroke=\"#555250\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\nexport default Close;\n","import { Transition, animated } from '@react-spring/web';\n\n// Enhancement: Add typescript support and try to re-use some pieces for each animation type\nfunction TransitionCustom(props) {\n  const { children, className, ElementProps, ...rest } = props;\n\n  return (\n    <Transition {...rest}>\n      {(style, isOpen) => {\n        return (\n          isOpen && (\n            <animated.div className={className} style={style} {...ElementProps}>\n              {children}\n            </animated.div>\n          )\n        );\n      }}\n    </Transition>\n  );\n}\n\nfunction TransitionUp(props) {\n  return (\n    <TransitionCustom\n      {...props}\n      from={{ opacity: 0, transform: `translateY(100%)` }}\n      enter={{ opacity: 1, transform: 'translateY(0px)' }}\n      leave={{ opacity: 0, transform: `translateY(100%)` }}\n    />\n  );\n}\n\nfunction TransitionDown(props) {\n  return (\n    <TransitionCustom\n      {...props}\n      from={{ opacity: 0, transform: `translateY(-100%)` }}\n      enter={{ opacity: 1, transform: 'translateY(0px)' }}\n      leave={{ opacity: 0, transform: `translateY(-100%)` }}\n    />\n  );\n}\n\nfunction TransitionLeft(props) {\n  return (\n    <TransitionCustom\n      {...props}\n      from={{ opacity: 0, transform: `translateX(-100%)` }}\n      enter={{ opacity: 1, transform: 'translateX(0px)' }}\n      leave={{ opacity: 0, transform: `translateX(-100%)` }}\n    />\n  );\n}\n\nfunction TransitionRight(props) {\n  return (\n    <TransitionCustom\n      {...props}\n      from={{ opacity: 0, transform: `translateX(100%)` }}\n      enter={{ opacity: 1, transform: 'translateX(0px)' }}\n      leave={{ opacity: 0, transform: `translateX(100%)` }}\n    />\n  );\n}\n\nfunction TransitionFade(props) {\n  return <TransitionCustom {...props} from={{ opacity: 0 }} enter={{ opacity: 1 }} leave={{ opacity: 0 }} />;\n}\n\nfunction TransitionUpDownNoFade(props) {\n  return (\n    <TransitionCustom\n      {...props}\n      from={{ transform: `translateY(100%)` }}\n      enter={{ transform: `translateY(0%)` }}\n      leave={{ transform: `translateY(100%)` }}\n    />\n  );\n}\n\nexport { TransitionCustom, TransitionUp, TransitionDown, TransitionLeft, TransitionRight, TransitionFade, TransitionUpDownNoFade };\n","import { ReactNode, ElementType } from 'react';\nimport clsx from 'clsx';\nimport { FocusTrap } from 'libs/focus-trap';\n\nimport { TransitionFade } from 'components/Transition';\n\ninterface ModalProps {\n  className?: string;\n  show: boolean;\n  fullScreen?: boolean;\n  showBackdrop?: boolean;\n  onClose?: () => void;\n  TransitionComponent?: ElementType;\n  FocusTrapProps?: Record<string, unknown>;\n  children?: ReactNode | string;\n}\n\ninterface NoTransitionProps {\n  items: boolean;\n  ElementProps?: Record<string, unknown>;\n  children?: ReactNode | string;\n}\n\nfunction NoTransition(props: NoTransitionProps) {\n  const { items, children, ElementProps, ...restProps } = props;\n\n  return items ? (\n    <div className=\"absolute top-0 left-0 z-10 h-full w-full\" {...restProps}>\n      {children}\n    </div>\n  ) : null;\n}\n\nfunction Modal(props: ModalProps) {\n  const { className, show, fullScreen = false, showBackdrop = !fullScreen, onClose, TransitionComponent = NoTransition, FocusTrapProps = {}, children, ...restProps } = props;\n\n  const Component = TransitionComponent as ElementType;\n  const { className: lockClassName, ...restLockProps } = FocusTrapProps;\n\n  return (\n    <>\n      <TransitionFade\n        items={showBackdrop && show}\n        className=\"fixed top-0 left-0 h-full w-full bg-black/50\"\n        ElementProps={{ onClick: onClose, 'data-testid': 'modal-backdrop' }}\n      />\n      <Component\n        data-testid=\"modal\"\n        items={show}\n        className={clsx(\n          'fixed text-black',\n          !fullScreen && 'top-1/3 left-1/2 w-full max-w-[352px] -translate-y-1/3 -translate-x-1/2 p-6', // Modal Center\n          fullScreen && 'top-0 left-0 h-full w-full rounded-none rounded-t-lg',\n          className\n        )}\n        ElementProps={{ ...restProps }}\n      >\n        <FocusTrap className={clsx('flex flex-1 flex-col justify-center', lockClassName as string)} lockProps={{ ...restLockProps, 'data-testid': 'modal-focus-trap' }}>\n          {children}\n        </FocusTrap>\n      </Component>\n    </>\n  );\n}\n\nexport { Modal };\n"],"names":["useMemo","importShared","IconButton","props","label","showPlaceholder","Component","Button","children","className","restProps","placeholderText","w","jsxs","clsx","Close","width","height","ariaLabel","jsx","TransitionCustom","ElementProps","rest","Transition","style","isOpen","animated","TransitionUp","TransitionRight","TransitionFade","TransitionUpDownNoFade","NoTransition","items","Modal","show","fullScreen","showBackdrop","onClose","TransitionComponent","FocusTrapProps","lockClassName","restLockProps","Fragment","FocusTrap"],"mappings":"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"}