@grantbii/design-system 1.13.8 → 1.13.10

package/core/atoms/Badge.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../core/atoms/Badge.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAcjD,MAAM,KAAK,GAAG,CAAC,EACb,KAAK,EACL,IAAI,EACJ,QAAQ,GAAG,EAAE,EACb,UAAU,GAAG,SAAS,EACtB,OAAO,EACP,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,KAAK,GACM,EAAE,EAAE,CAAC,CAChB,MAAC,SAAS,IACR,OAAO,EAAE,OAAO,gBACJ,CAAC,CAAC,OAAO,sBACH,eAAe,YACzB,KAAK,aAEb,MAAC,YAAY,kBAAa,CAAC,CAAC,YAAY,kBAAgB,gBAAgB,aACrE,IAAI,CAAC,CAAC,CAAC,CACN,KAAC,aAAa,cACZ,KAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,GAAI,GAC5C,CACjB,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,EAED,KAAC,UAAU,cAAE,KAAK,GAAc,IACnB,EAEd,YAAY,CAAC,CAAC,CAAC,KAAC,WAAW,IAAC,OAAO,EAAE,YAAY,GAAI,CAAC,CAAC,CAAC,mBAAK,IACpD,CACb,CAAC;AAEF,eAAe,KAAK,CAAC;AAErB,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAI1B;;;;;;;;;WASS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,SAAS,EAAE,EAAE,EAAE,CAAC,MAAM;sBACzC,CAAC,EAAE,gBAAgB,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,EAAE,CAClE,gBAAgB;;oBAEA,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;qBAIlC,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;YAI5C,CAAC,EAAE,UAAU,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;CACxE,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAG7B;;;;;WAKS,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,YAAY,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;eAC/D,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,MAAM,CAAC;CAC7E,CAAC;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAiC;;;;WAItD,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS;eACjC,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS;eACrC,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS;CACnD,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;IAOzB,cAAc;CACjB,CAAC;AAMF,MAAM,WAAW,GAAG,CAAC,EAAE,OAAO,EAAoB,EAAE,EAAE,CAAC,CACrD,KAAC,eAAe,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,YAC7C,KAAC,KAAK,CAAC,KAAK,IAAC,IAAI,EAAE,EAAE,GAAI,GACT,CACnB,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;CAKpC,CAAC","sourcesContent":["import type { ComponentType, MouseEventHandler, ReactNode } from \"react\";\nimport styled from \"styled-components\";\nimport { Colors, Icons, Responsive } from \"../foundations\";\nimport { HelperFontSize } from \"../integrations\";\n\nexport type BadgeProps = {\n  label: ReactNode;\n  Icon?: ComponentType<Icons.IconProps>;\n  iconSize?: string | number;\n  iconWeight?: Icons.IconWeight;\n  onClick?: MouseEventHandler<HTMLDivElement>;\n  onClickClose?: MouseEventHandler<HTMLButtonElement>;\n  labelWidthPixels?: number;\n  backgroundColor?: string;\n  color?: string;\n};\n\nconst Badge = ({\n  label,\n  Icon,\n  iconSize = 20,\n  iconWeight = \"regular\",\n  onClick,\n  onClickClose,\n  labelWidthPixels,\n  backgroundColor,\n  color,\n}: BadgeProps) => (\n  <BaseBadge\n    onClick={onClick}\n    $clickable={!!onClick}\n    $backgroundColor={backgroundColor}\n    $color={color}\n  >\n    <BadgeContent $closeable={!!onClickClose} $widthPixels={labelWidthPixels}>\n      {Icon ? (\n        <IconContainer>\n          <Icon color={color} size={iconSize} weight={iconWeight} />\n        </IconContainer>\n      ) : (\n        <></>\n      )}\n\n      <BadgeLabel>{label}</BadgeLabel>\n    </BadgeContent>\n\n    {onClickClose ? <CloseButton onClick={onClickClose} /> : <></>}\n  </BaseBadge>\n);\n\nexport default Badge;\n\nconst BaseBadge = styled.div<{\n  $clickable?: boolean;\n  $backgroundColor?: string;\n  $color?: string;\n}>`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 10px;\n\n  padding: 5px 15px;\n  border-radius: 120px;\n\n  color: ${({ $color = Colors.typography.blackHigh }) => $color};\n  background-color: ${({ $backgroundColor = Colors.neutral.grey3 }) =>\n    $backgroundColor};\n\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    min-height: 27px;\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    min-height: 30px;\n  }\n\n  cursor: ${({ $clickable = false }) => ($clickable ? \"pointer\" : \"auto\")};\n`;\n\nconst BadgeContent = styled.div<{\n  $closeable: boolean;\n  $widthPixels?: number;\n}>`\n  display: flex;\n  align-items: center;\n  gap: 10px;\n\n  width: ${({ $widthPixels }) => ($widthPixels ? `${$widthPixels}px` : \"auto\")};\n  max-width: ${({ $closeable }) => ($closeable ? \"calc(100% - 20px)\" : \"auto\")};\n`;\n\nconst IconContainer = styled.div<{ $iconSize?: string | number }>`\n  display: flex;\n  flex-direction: column;\n\n  width: ${({ $iconSize = \"auto\" }) => $iconSize};\n  min-width: ${({ $iconSize = \"auto\" }) => $iconSize};\n  max-width: ${({ $iconSize = \"auto\" }) => $iconSize};\n`;\n\nconst BadgeLabel = styled.div`\n  overflow-x: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n\n  font-weight: 500;\n\n  ${HelperFontSize}\n`;\n\ntype CloseButtonProps = {\n  onClick: MouseEventHandler<HTMLButtonElement>;\n};\n\nconst CloseButton = ({ onClick }: CloseButtonProps) => (\n  <BaseCloseButton type=\"button\" onClick={onClick}>\n    <Icons.XIcon size={12} />\n  </BaseCloseButton>\n);\n\nconst BaseCloseButton = styled.button`\n  display: flex;\n  flex-direction: column;\n\n  min-width: 12px;\n`;\n"]}

package/core/atoms/Button.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../core/atoms/Button.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,UAAU,IAAI,aAAa,EAAE,MAAM,WAAW,CAAC;AAgBxD,MAAM,MAAM,GAAG,CAAC,EACd,KAAK,EACL,QAAQ,EACR,SAAS,EACT,SAAS,EACT,eAAe,EACf,WAAW,EACX,KAAK,EACL,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,GAAG,WAAW,EACF,EAAE,EAAE,CAAC,CACjB,KAAC,UAAU,OAAK,WAAW,EAAE,IAAI,EAAE,IAAI,YAAU,KAAK,YACpD,MAAC,aAAa,kBACA,SAAS,sBACH,eAAe,kBACnB,WAAW,YACjB,KAAK,YACL,KAAK,aAEZ,QAAQ,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,mBAAK,EACvD,KAAK,EACL,SAAS,CAAC,CAAC,CAAC,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,mBAAK,IAC5C,GACL,CACd,CAAC;AAEF,eAAe,MAAM,CAAC;AAEtB,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAqB;WAC1C,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM;CACzC,CAAC","sourcesContent":["import type { ButtonHTMLAttributes, DetailedHTMLProps, ReactNode } from \"react\";\nimport styled from \"styled-components\";\nimport { Icons } from \"../foundations\";\nimport { BaseButton as ButtonContent } from \"../shared\";\n\ntype ButtonProps = {\n  label: ReactNode;\n  LeftIcon?: Icons.Icon;\n  RightIcon?: Icons.Icon;\n  underline?: boolean;\n  backgroundColor?: string;\n  borderColor?: string;\n  color?: string;\n  width?: string;\n} & DetailedHTMLProps<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  HTMLButtonElement\n>;\n\nconst Button = ({\n  label,\n  LeftIcon,\n  RightIcon,\n  underline,\n  backgroundColor,\n  borderColor,\n  color,\n  width,\n  type = \"button\",\n  ...buttonProps\n}: ButtonProps) => (\n  <BaseButton {...buttonProps} type={type} $width={width}>\n    <ButtonContent\n      $underline={underline}\n      $backgroundColor={backgroundColor}\n      $borderColor={borderColor}\n      $color={color}\n      $width={width}\n    >\n      {LeftIcon ? <LeftIcon color={color} size={20} /> : <></>}\n      {label}\n      {RightIcon ? <RightIcon color={color} size={20} /> : <></>}\n    </ButtonContent>\n  </BaseButton>\n);\n\nexport default Button;\n\nconst BaseButton = styled.button<{ $width?: string }>`\n  width: ${({ $width = \"auto\" }) => $width};\n`;\n"]}

package/core/atoms/Checkbox.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../core/atoms/Checkbox.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAQ1C,MAAM,QAAQ,GAAG,CAAC,EAChB,EAAE,EACF,KAAK,EACL,WAAW,GAAG,KAAK,EACnB,GAAG,aAAa,EACF,EAAE,EAAE,CAAC,CACnB,MAAC,aAAa,eACX,KAAK,IAAI,WAAW,CAAC,CAAC,CAAC,KAAC,aAAa,IAAC,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC,CAAC,CAAC,mBAAK,EACvE,mBAAW,aAAa,EAAE,EAAE,EAAE,GAAG,EAAE,WAAW,EAAE,IAAI,EAAC,UAAU,GAAG,EACjE,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,KAAC,aAAa,IAAC,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC,CAAC,CAAC,mBAAK,IAC1D,CACjB,CAAC;AAEF,eAAe,QAAQ,CAAC;AAOxB,MAAM,aAAa,GAAG,CAAC,EAAE,EAAE,EAAE,KAAK,EAAsB,EAAE,EAAE,CAAC,CAC3D,gBAAO,OAAO,EAAE,GAAG,EAAE,WAAW,YAAG,KAAK,GAAS,CAClD,CAAC","sourcesContent":["import type { DetailedHTMLProps, InputHTMLAttributes, ReactNode } from \"react\";\nimport { LabelledInput } from \"../shared\";\n\ntype CheckboxProps = {\n  id: string;\n  label: ReactNode;\n  labelBefore?: boolean;\n} & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;\n\nconst Checkbox = ({\n  id,\n  label,\n  labelBefore = false,\n  ...checkboxProps\n}: CheckboxProps) => (\n  <LabelledInput>\n    {label && labelBefore ? <CheckboxLabel id={id} label={label} /> : <></>}\n    <input {...checkboxProps} id={`${id}-checkbox`} type=\"checkbox\" />\n    {label && !labelBefore ? <CheckboxLabel id={id} label={label} /> : <></>}\n  </LabelledInput>\n);\n\nexport default Checkbox;\n\ntype CheckboxLabelProps = {\n  id: string;\n  label: ReactNode;\n};\n\nconst CheckboxLabel = ({ id, label }: CheckboxLabelProps) => (\n  <label htmlFor={`${id}-checkbox`}>{label}</label>\n);\n"]}

package/core/atoms/Dropdown.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../core/atoms/Dropdown.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAe,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,eAAe,EAA6B,MAAM,WAAW,CAAC;AAUvE,MAAM,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,WAAW,EAAiB,EAAE,EAAE,CAAC,CAC7E,MAAC,MAAM,OAAK,WAAW,aACrB,iBAAQ,MAAM,QAAC,QAAQ,QAAC,KAAK,EAAC,EAAE,YAC7B,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,GAC3B,EAER,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,iBAA2B,KAAK,EAAE,MAAM,CAAC,KAAK,YAC3C,MAAM,CAAC,KAAK,IADF,MAAM,CAAC,KAAK,CAEhB,CACV,CAAC,IACK,CACV,CAAC;AAEF,eAAe,QAAQ,CAAC;AAExB,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAsB;;sBAE5B,MAAM,CAAC,IAAI,CAAC,KAAK;;;IAGnC,eAAe;CAClB,CAAC","sourcesContent":["import type { DetailedHTMLProps, SelectHTMLAttributes } from \"react\";\nimport styled from \"styled-components\";\nimport { Colors, type Option } from \"../foundations\";\nimport { InputValidation, type InputValidationProps } from \"../shared\";\n\nexport type DropdownProps = {\n  options: Option[];\n  defaultLabel?: string;\n} & DetailedHTMLProps<\n  SelectHTMLAttributes<HTMLSelectElement>,\n  HTMLSelectElement\n>;\n\nconst Dropdown = ({ options, defaultLabel, ...selectProps }: DropdownProps) => (\n  <Select {...selectProps}>\n    <option hidden disabled value=\"\">\n      {defaultLabel ? defaultLabel : \"-\"}\n    </option>\n\n    {options.map((option) => (\n      <option key={option.value} value={option.value}>\n        {option.label}\n      </option>\n    ))}\n  </Select>\n);\n\nexport default Dropdown;\n\nconst Select = styled.select<InputValidationProps>`\n  padding: 12px 16px;\n  background-color: ${Colors.base.white};\n  border-radius: 8px;\n\n  ${InputValidation}\n`;\n"]}

package/core/atoms/Input.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../core/atoms/Input.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAe,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,eAAe,EAA6B,MAAM,WAAW,CAAC;AAQvE,MAAM,KAAK,GAAG,CAAC,EAAE,eAAe,EAAE,UAAU,EAAE,GAAG,UAAU,EAAc,EAAE,EAAE,CAAC,CAC5E,8BACE,KAAC,SAAS,OAAK,UAAU,EAAE,IAAI,EAAE,UAAU,GAAI,EAE9C,UAAU,IAAI,eAAe,CAAC,CAAC,CAAC,CAC/B,KAAC,QAAQ,IAAC,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,GAAI,CACvD,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACA,CACJ,CAAC;AAEF,eAAe,KAAK,CAAC;AAErB,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAsB;;sBAE9B,MAAM,CAAC,IAAI,CAAC,KAAK;;;IAGnC,eAAe;CAClB,CAAC;AAOF,MAAM,QAAQ,GAAG,CAAC,EAAE,EAAE,EAAE,OAAO,EAAiB,EAAE,EAAE,CAAC,CACnD,mBAAU,EAAE,EAAE,EAAE,YACb,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,iBAA2B,KAAK,EAAE,MAAM,CAAC,KAAK,YAC3C,MAAM,CAAC,KAAK,IADF,MAAM,CAAC,KAAK,CAEhB,CACV,CAAC,GACO,CACZ,CAAC","sourcesContent":["import type { DetailedHTMLProps, InputHTMLAttributes } from \"react\";\nimport styled from \"styled-components\";\nimport { Colors, type Option } from \"../foundations\";\nimport { InputValidation, type InputValidationProps } from \"../shared\";\n\ntype InputProps = {\n  datalistId?: string;\n  datalistOptions?: Option[];\n} & InputValidationProps &\n  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;\n\nconst Input = ({ datalistOptions, datalistId, ...inputProps }: InputProps) => (\n  <>\n    <BaseInput {...inputProps} list={datalistId} />\n\n    {datalistId && datalistOptions ? (\n      <Datalist id={datalistId} options={datalistOptions} />\n    ) : (\n      <></>\n    )}\n  </>\n);\n\nexport default Input;\n\nconst BaseInput = styled.input<InputValidationProps>`\n  padding: 12px 16px;\n  background-color: ${Colors.base.white};\n  border-radius: 8px;\n\n  ${InputValidation}\n`;\n\ntype DatalistProps = {\n  id: string;\n  options: Option[];\n};\n\nconst Datalist = ({ id, options }: DatalistProps) => (\n  <datalist id={id}>\n    {options.map((option) => (\n      <option key={option.value} value={option.value}>\n        {option.label}\n      </option>\n    ))}\n  </datalist>\n);\n"]}

package/core/atoms/RadioButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"RadioButton.js","sourceRoot":"","sources":["../../../core/atoms/RadioButton.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAK1C,MAAM,WAAW,GAAG,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,gBAAgB,EAAoB,EAAE,EAAE,CAAC,CAC5E,MAAC,aAAa,eACZ,mBAAW,gBAAgB,EAAE,EAAE,EAAE,GAAG,EAAE,eAAe,EAAE,IAAI,EAAC,OAAO,GAAG,EACtE,gBAAO,OAAO,EAAE,GAAG,EAAE,eAAe,YAAG,KAAK,GAAS,IACvC,CACjB,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import type { DetailedHTMLProps, InputHTMLAttributes } from \"react\";\nimport type { Option } from \"../foundations\";\nimport { LabelledInput } from \"../shared\";\n\ntype RadioButtonProps = Option &\n  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;\n\nconst RadioButton = ({ id, label, ...radioButtonProps }: RadioButtonProps) => (\n  <LabelledInput>\n    <input {...radioButtonProps} id={`${id}-radio-button`} type=\"radio\" />\n    <label htmlFor={`${id}-radio-button`}>{label}</label>\n  </LabelledInput>\n);\n\nexport default RadioButton;\n"]}

package/core/atoms/Textarea.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../core/atoms/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAE,eAAe,EAA6B,MAAM,WAAW,CAAC;AAIvE,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAe;YACnC,CAAC,EAAE,aAAa,GAAG,GAAG,EAAE,EAAE,EAAE,CAAC,aAAa;;;sBAGhC,MAAM,CAAC,IAAI,CAAC,KAAK;;;IAGnC,eAAe;CAClB,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import styled from \"styled-components\";\nimport { Colors } from \"../foundations\";\nimport { InputValidation, type InputValidationProps } from \"../shared\";\n\ntype TextareaProps = { $heightPixels?: number } & InputValidationProps;\n\nconst Textarea = styled.textarea<TextareaProps>`\n  height: ${({ $heightPixels = 100 }) => $heightPixels}px;\n\n  padding: 12px 16px;\n  background-color: ${Colors.base.white};\n  border-radius: 8px;\n\n  ${InputValidation}\n`;\n\nexport default Textarea;\n"]}

package/core/molecules/Modal.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../core/molecules/Modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  type JSX,\n  type MouseEventHandler,\n  type ReactNode,\n  useCallback,\n  useState,\n} from \"react\";\nimport styled from \"styled-components\";\nimport { Button, Overlay } from \"../atoms\";\nimport { Colors, Responsive } from \"../foundations\";\nimport { createPortal } from \"react-dom\";\n\ntype ModalProps = {\n  header?: ReactNode;\n  content: JSX.Element;\n  footer?: ReactNode;\n  width?: string;\n  height?: string;\n  onClickClose?: MouseEventHandler<HTMLButtonElement>;\n  closeText?: string;\n};\n\nconst Modal = ({\n  header,\n  content,\n  footer,\n  width,\n  height,\n  onClickClose,\n  closeText,\n}: ModalProps) =>\n  createPortal(\n    <Overlay $centerContent>\n      <ModalWindow $width={width} $height={height}>\n        {header ? <ModalHeader>{header}</ModalHeader> : <></>}\n\n        <ModalBody>{content}</ModalBody>\n\n        {onClickClose || footer ? (\n          <ModalFooter>\n            {onClickClose ? (\n              <CloseButton onClick={onClickClose} closeText={closeText} />\n            ) : (\n              <></>\n            )}\n\n            {footer ? footer : <></>}\n          </ModalFooter>\n        ) : (\n          <></>\n        )}\n      </ModalWindow>\n    </Overlay>,\n    document.body,\n  );\n\nexport default Modal;\n\nexport const useModal = () => {\n  const [showModal, setShowModal] = useState(false);\n\n  const lockScroll = useCallback(() => {\n    document.body.style.overflow = \"hidden\";\n  }, []);\n\n  const unlockScroll = useCallback(() => {\n    document.body.style.overflow = \"initial\";\n  }, []);\n\n  const openModal = () => {\n    setShowModal(true);\n    lockScroll();\n  };\n\n  const closeModal = () => {\n    setShowModal(false);\n    unlockScroll();\n  };\n\n  return {\n    showModal,\n    openModal,\n    closeModal,\n  };\n};\n\nconst ModalWindow = styled.div<{ $width?: string; $height?: string }>`\n  display: flex;\n  flex-direction: column;\n\n  background-color: ${Colors.base.white};\n\n  min-height: 100px;\n  max-height: 100vh;\n\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    position: fixed;\n    bottom: 0px;\n    left: 0px;\n\n    width: 100%;\n    height: 100%;\n\n    border-radius: 0px;\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    position: static;\n    bottom: auto;\n    left: auto;\n\n    width: ${({ $width }) => $width};\n    height: ${({ $height }) => $height};\n\n    border-radius: 8px;\n  }\n`;\n\nconst ModalHeader = styled.div`\n  font-weight: 500;\n  font-size: 18px;\n\n  padding: 12px 20px;\n  margin-bottom: 12px;\n\n  border-bottom: 1px solid ${Colors.neutral.grey3};\n`;\n\nconst ModalBody = styled.div`\n  display: flex;\n  flex-direction: column;\n\n  height: 100%;\n  overflow-y: auto;\n\n  > * {\n    width: 100%;\n    height: 100%;\n    min-height: 100px;\n\n    padding: 2px 20px;\n    border: none;\n  }\n`;\n\nconst ModalFooter = styled.div`\n  display: flex;\n  justify-content: space-between;\n  gap: 12px;\n\n  padding: 16px 20px;\n`;\n\ntype CloseButtonProps = {\n  onClick: MouseEventHandler<HTMLButtonElement>;\n  closeText?: string;\n};\n\nconst CloseButton = ({ onClick, closeText = \"Close\" }: CloseButtonProps) => (\n  <Button\n    label={closeText}\n    onClick={onClick}\n    backgroundColor={Colors.neutral.grey3}\n    color={Colors.typography.blackHigh}\n  />\n);\n"]}

package/stories/molecules/Multiline.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Multiline.stories.js","sourceRoot":"","sources":["../../../stories/molecules/Multiline.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAG/B,MAAM,IAAI,GAA0B;IAClC,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,QAAQ;IACnB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,IAAI,EAAE,EAAE,WAAW,EAAE,WAAW,EAAE;CACnC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAU;IACnC,IAAI,EAAE,EAAE,WAAW,EAAE,qCAAqC,EAAE,SAAS,EAAE,EAAE,EAAE;CAC5E,CAAC","sourcesContent":["import { Textarea } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nconst meta: Meta<typeof Textarea> = {\n  title: \"Molecules/Multiline\",\n  component: Textarea,\n  tags: [\"autodocs\"],\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const BasicExample: Story = {\n  args: { placeholder: \"Type here\" },\n};\n\nexport const WithValidation: Story = {\n  args: { placeholder: \"Must be at least 10 characters long\", minLength: 10 },\n};\n"]}