@grantbii/design-system 1.29.0 → 3.0.3

package/README.md

@@ -35,6 +35,12 @@ The pages auto-update as you edit the files.
 
 ## Develop
 
+### Structure
+
+The actual UI components live in `core/`.
+
+Storybook stories live in `stories/`.
+
 ### Versioning
 
 Bump version number in `package.json`
@@ -55,10 +61,17 @@ cwebp -exact -lossless -progress your_image.png -o your_image.webp
 
 Bump version in `package.json`
 
-Check which files would be published with `npm publish --dry-run`
+Check which files would be published:
 
-The package is published to npm automatically with [GitHub Actions](.github/workflows/continuous-delivery.yaml).
+```bash
+npm run build
+cd dist/
+npm publish --dry-run
+```
 
-The corresponding documentation is published to GitHub pages automatically with [GitHub Actions](.github/workflows/continuous-delivery.yaml).
+When a commit is pushed to the `prod` branch, the GitHub Actions workflow `deploy-prod.yaml` will automatically:
 
-Once a commit has been made on the `prod` branch, a build would be triggered.
+- build the package with `npm run build`
+- publish the package to npm from `dist/`
+- build Storybook with `npm run build-storybook`
+- publish Storybook to GitHub Pages

package/core/archive/index.d.ts

@@ -1,4 +1,3 @@
 export { default as LocationIcon } from "./LocationIcon";
 export { default as RadioButtons, type RadioOption } from "./RadioButtons";
-export { default as TallyModal } from "./TallyModal";
 export { default as YesNoOptions } from "./YesNoOptions";

package/core/archive/index.js

@@ -1,5 +1,4 @@
 export { default as LocationIcon } from "./LocationIcon";
 export { default as RadioButtons } from "./RadioButtons";
-export { default as TallyModal } from "./TallyModal";
 export { default as YesNoOptions } from "./YesNoOptions";
 //# sourceMappingURL=index.js.map

package/core/archive/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/archive/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAoB,MAAM,gBAAgB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { default as LocationIcon } from \"./LocationIcon\";\nexport { default as RadioButtons, type RadioOption } from \"./RadioButtons\";\nexport { default as TallyModal } from \"./TallyModal\";\nexport { default as YesNoOptions } from \"./YesNoOptions\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/archive/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAoB,MAAM,gBAAgB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { default as LocationIcon } from \"./LocationIcon\";\nexport { default as RadioButtons, type RadioOption } from \"./RadioButtons\";\nexport { default as YesNoOptions } from \"./YesNoOptions\";\n"]}

package/core/molecules/Badge.js

@@ -44,17 +44,14 @@ const BaseBadge = styled.div `
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 10px;
+  gap: ${Spacing.px12};
 
   height: 26px;
   padding: 5px ${Spacing.px12};
-  border-radius: 100px;
-
-  font-size: 12px;
-  font-weight: ${Typography.weight.medium};
 
   color: ${(props) => props.$color};
   background-color: ${(props) => props.$defaultBackgroundColor};
+  border-radius: ${Spacing.px100};
 
   cursor: ${(props) => (props.$isClickable ? "pointer" : "auto")};
 
@@ -67,10 +64,10 @@ const BaseBadge = styled.div `
 const BadgeContent = styled.div `
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: ${Spacing.px4};
 
   width: ${({ $widthPixels }) => ($widthPixels ? `${$widthPixels}px` : "auto")};
-  max-width: ${({ $hasX: $closeable }) => $closeable ? "calc(100% - 20px)" : "auto"};
+  max-width: ${({ $hasX: $closeable }) => $closeable ? `calc(100% - ${Spacing.px20})` : "auto"};
 `;
 const IconContainer = styled.div `
   display: flex;
@@ -85,13 +82,13 @@ const BadgeLabel = styled.div `
   white-space: nowrap;
   text-overflow: ellipsis;
 
-  ${applyTypography(Typography.bodySecondaryMedium)}
+  ${applyTypography(Typography.captionMedium)}
 `;
 const XButton = ({ onClick }) => (_jsx(BaseCloseButton, { type: "button", onClick: onClick, children: _jsx(SystemIcon.XIcon, { color: Color.typography.blackMedium, size: 12 }) }));
 const BaseCloseButton = styled.button `
   display: flex;
   flex-direction: column;
 
-  min-width: 12px;
+  min-width: ${Spacing.px12};
 `;
 //# sourceMappingURL=Badge.js.map

package/core/molecules/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../core/molecules/Badge.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAgBlD,MAAM,KAAK,GAAG,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,GAAG,WAAW,EAAc,EAAE,EAAE;IACpE,MAAM,YAAY,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAChD,OAAO,KAAC,QAAQ,OAAK,YAAY,KAAM,WAAW,GAAI,CAAC;AACzD,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC;AAQrB,MAAM,iBAAiB,GAAqD;IAC1E,OAAO,EAAE;QACP,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,SAAS;QACjC,sBAAsB,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK;QAC1C,oBAAoB,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK;KACzC;IACD,OAAO,EAAE;QACP,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,SAAS;QACjC,sBAAsB,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAC3C,oBAAoB,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;KAC1C;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK;QACzB,sBAAsB,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK;QAC1C,oBAAoB,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK;KACzC;IACD,KAAK,EAAE;QACL,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM;QAC1B,sBAAsB,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM;QAC3C,oBAAoB,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM;KAC1C;IACD,MAAM,EAAE;QACN,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO;QAC3B,sBAAsB,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO;QAC5C,oBAAoB,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO;KAC3C;IACD,GAAG,EAAE;QACH,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI;QACxB,sBAAsB,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI;QACzC,oBAAoB,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI;KACxC;CACF,CAAC;AAIF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,KAAK,EACL,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,gBAAgB,EAChB,sBAAsB,EACtB,oBAAoB,GAAG,sBAAsB,EAC7C,KAAK,GACS,EAAE,EAAE,CAAC,CACnB,MAAC,SAAS,IACR,OAAO,EAAE,OAAO,kBACF,CAAC,CAAC,OAAO,6BACE,sBAAsB,2BACxB,oBAAoB,YACnC,KAAK,aAEb,MAAC,YAAY,aAAQ,CAAC,CAAC,QAAQ,kBAAgB,gBAAgB,aAC5D,IAAI,CAAC,CAAC,CAAC,CACN,KAAC,aAAa,cACZ,KAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI,GAClB,CACjB,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,EAED,KAAC,UAAU,cAAE,KAAK,GAAc,IACnB,EAEd,QAAQ,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,OAAO,EAAE,QAAQ,GAAI,CAAC,CAAC,CAAC,mBAAK,IACxC,CACb,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAK1B;;;;;;;iBAOe,OAAO,CAAC,IAAI;;;;iBAIZ,UAAU,CAAC,MAAM,CAAC,MAAM;;WAE9B,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM;sBACZ,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,uBAAuB;;YAElD,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;;;wBAGxC,CAAC,KAAK,EAAE,EAAE,CAC5B,KAAK,CAAC,YAAY;IAChB,CAAC,CAAC,KAAK,CAAC,qBAAqB;IAC7B,CAAC,CAAC,KAAK,CAAC,uBAAuB;;CAEtC,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,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE,CACrC,UAAU,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,MAAM;CAC5C,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;;;;;IAKzB,eAAe,CAAC,UAAU,CAAC,mBAAmB,CAAC;CAClD,CAAC;AAMF,MAAM,OAAO,GAAG,CAAC,EAAE,OAAO,EAAgB,EAAE,EAAE,CAAC,CAC7C,KAAC,eAAe,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,YAC7C,KAAC,UAAU,CAAC,KAAK,IAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,IAAI,EAAE,EAAE,GAAI,GACnD,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 { Color, Spacing, SystemIcon, Typography } from \"../atoms\";\nimport { applyTypography } from \"../integrations\";\n\ntype BadgeVariant = \"default\" | \"neutral\" | \"blue\" | \"green\" | \"yellow\" | \"red\";\n\ntype CustomBadgeProps = {\n  label: ReactNode;\n  Icon?: ComponentType<SystemIcon.IconProps>;\n  onClick?: MouseEventHandler<HTMLDivElement>;\n  onClickX?: MouseEventHandler<HTMLButtonElement>;\n  labelWidthPixels?: number;\n};\n\ntype BadgeProps = {\n  variant?: BadgeVariant;\n} & CustomBadgeProps;\n\nconst Badge = ({ variant = \"default\", ...restOfProps }: BadgeProps) => {\n  const variantProps = VARIANT_PROPS_MAP[variant];\n  return <RawBadge {...variantProps} {...restOfProps} />;\n};\n\nexport default Badge;\n\ntype VariantStyleProps = {\n  color: Color.DesignColor;\n  defaultBackgroundColor: Color.DesignColor;\n  hoverBackgroundColor?: Color.DesignColor;\n};\n\nconst VARIANT_PROPS_MAP: { [variant in BadgeVariant]: VariantStyleProps } = {\n  default: {\n    color: Color.typography.blackHigh,\n    defaultBackgroundColor: Color.accent.blue3,\n    hoverBackgroundColor: Color.accent.blue4,\n  },\n  neutral: {\n    color: Color.typography.blackHigh,\n    defaultBackgroundColor: Color.neutral.grey4,\n    hoverBackgroundColor: Color.neutral.grey3,\n  },\n  blue: {\n    color: Color.accent.blue1,\n    defaultBackgroundColor: Color.accent.blue3,\n    hoverBackgroundColor: Color.accent.blue4,\n  },\n  green: {\n    color: Color.accent.green1,\n    defaultBackgroundColor: Color.accent.green3,\n    hoverBackgroundColor: Color.accent.green4,\n  },\n  yellow: {\n    color: Color.accent.yellow1,\n    defaultBackgroundColor: Color.accent.yellow3,\n    hoverBackgroundColor: Color.accent.yellow4,\n  },\n  red: {\n    color: Color.accent.red1,\n    defaultBackgroundColor: Color.accent.red3,\n    hoverBackgroundColor: Color.accent.red4,\n  },\n};\n\ntype RawBadgeProps = CustomBadgeProps & VariantStyleProps;\n\nexport const RawBadge = ({\n  label,\n  Icon,\n  onClick,\n  onClickX,\n  labelWidthPixels,\n  defaultBackgroundColor,\n  hoverBackgroundColor = defaultBackgroundColor,\n  color,\n}: RawBadgeProps) => (\n  <BaseBadge\n    onClick={onClick}\n    $isClickable={!!onClick}\n    $defaultBackgroundColor={defaultBackgroundColor}\n    $hoverBackgroundColor={hoverBackgroundColor}\n    $color={color}\n  >\n    <BadgeContent $hasX={!!onClickX} $widthPixels={labelWidthPixels}>\n      {Icon ? (\n        <IconContainer>\n          <Icon color={color} size={12} />\n        </IconContainer>\n      ) : (\n        <></>\n      )}\n\n      <BadgeLabel>{label}</BadgeLabel>\n    </BadgeContent>\n\n    {onClickX ? <XButton onClick={onClickX} /> : <></>}\n  </BaseBadge>\n);\n\nconst BaseBadge = styled.div<{\n  $isClickable: boolean;\n  $defaultBackgroundColor: Color.DesignColor;\n  $hoverBackgroundColor: Color.DesignColor;\n  $color: Color.DesignColor;\n}>`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 10px;\n\n  height: 26px;\n  padding: 5px ${Spacing.px12};\n  border-radius: 100px;\n\n  font-size: 12px;\n  font-weight: ${Typography.weight.medium};\n\n  color: ${(props) => props.$color};\n  background-color: ${(props) => props.$defaultBackgroundColor};\n\n  cursor: ${(props) => (props.$isClickable ? \"pointer\" : \"auto\")};\n\n  &:hover {\n    background-color: ${(props) =>\n      props.$isClickable\n        ? props.$hoverBackgroundColor\n        : props.$defaultBackgroundColor};\n  }\n`;\n\nconst BadgeContent = styled.div<{\n  $hasX: 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: ${({ $hasX: $closeable }) =>\n    $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  ${applyTypography(Typography.bodySecondaryMedium)}\n`;\n\ntype XButtonProps = {\n  onClick: MouseEventHandler<HTMLButtonElement>;\n};\n\nconst XButton = ({ onClick }: XButtonProps) => (\n  <BaseCloseButton type=\"button\" onClick={onClick}>\n    <SystemIcon.XIcon color={Color.typography.blackMedium} size={12} />\n  </BaseCloseButton>\n);\n\nconst BaseCloseButton = styled.button`\n  display: flex;\n  flex-direction: column;\n\n  min-width: 12px;\n`;\n"]}
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../core/molecules/Badge.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ComponentType, MouseEventHandler, ReactNode } from \"react\";\nimport styled from \"styled-components\";\nimport { Color, Spacing, SystemIcon, Typography } from \"../atoms\";\nimport { applyTypography } from \"../integrations\";\n\ntype BadgeVariant = \"default\" | \"neutral\" | \"blue\" | \"green\" | \"yellow\" | \"red\";\n\ntype CustomBadgeProps = {\n  label: ReactNode;\n  Icon?: ComponentType<SystemIcon.IconProps>;\n  onClick?: MouseEventHandler<HTMLDivElement>;\n  onClickX?: MouseEventHandler<HTMLButtonElement>;\n  labelWidthPixels?: number;\n};\n\ntype BadgeProps = {\n  variant?: BadgeVariant;\n} & CustomBadgeProps;\n\nconst Badge = ({ variant = \"default\", ...restOfProps }: BadgeProps) => {\n  const variantProps = VARIANT_PROPS_MAP[variant];\n  return <RawBadge {...variantProps} {...restOfProps} />;\n};\n\nexport default Badge;\n\ntype VariantStyleProps = {\n  color: Color.DesignColor;\n  defaultBackgroundColor: Color.DesignColor;\n  hoverBackgroundColor?: Color.DesignColor;\n};\n\nconst VARIANT_PROPS_MAP: { [variant in BadgeVariant]: VariantStyleProps } = {\n  default: {\n    color: Color.typography.blackHigh,\n    defaultBackgroundColor: Color.accent.blue3,\n    hoverBackgroundColor: Color.accent.blue4,\n  },\n  neutral: {\n    color: Color.typography.blackHigh,\n    defaultBackgroundColor: Color.neutral.grey4,\n    hoverBackgroundColor: Color.neutral.grey3,\n  },\n  blue: {\n    color: Color.accent.blue1,\n    defaultBackgroundColor: Color.accent.blue3,\n    hoverBackgroundColor: Color.accent.blue4,\n  },\n  green: {\n    color: Color.accent.green1,\n    defaultBackgroundColor: Color.accent.green3,\n    hoverBackgroundColor: Color.accent.green4,\n  },\n  yellow: {\n    color: Color.accent.yellow1,\n    defaultBackgroundColor: Color.accent.yellow3,\n    hoverBackgroundColor: Color.accent.yellow4,\n  },\n  red: {\n    color: Color.accent.red1,\n    defaultBackgroundColor: Color.accent.red3,\n    hoverBackgroundColor: Color.accent.red4,\n  },\n};\n\ntype RawBadgeProps = CustomBadgeProps & VariantStyleProps;\n\nexport const RawBadge = ({\n  label,\n  Icon,\n  onClick,\n  onClickX,\n  labelWidthPixels,\n  defaultBackgroundColor,\n  hoverBackgroundColor = defaultBackgroundColor,\n  color,\n}: RawBadgeProps) => (\n  <BaseBadge\n    onClick={onClick}\n    $isClickable={!!onClick}\n    $defaultBackgroundColor={defaultBackgroundColor}\n    $hoverBackgroundColor={hoverBackgroundColor}\n    $color={color}\n  >\n    <BadgeContent $hasX={!!onClickX} $widthPixels={labelWidthPixels}>\n      {Icon ? (\n        <IconContainer>\n          <Icon color={color} size={12} />\n        </IconContainer>\n      ) : (\n        <></>\n      )}\n\n      <BadgeLabel>{label}</BadgeLabel>\n    </BadgeContent>\n\n    {onClickX ? <XButton onClick={onClickX} /> : <></>}\n  </BaseBadge>\n);\n\nconst BaseBadge = styled.div<{\n  $isClickable: boolean;\n  $defaultBackgroundColor: Color.DesignColor;\n  $hoverBackgroundColor: Color.DesignColor;\n  $color: Color.DesignColor;\n}>`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ${Spacing.px12};\n\n  height: 26px;\n  padding: 5px ${Spacing.px12};\n\n  color: ${(props) => props.$color};\n  background-color: ${(props) => props.$defaultBackgroundColor};\n  border-radius: ${Spacing.px100};\n\n  cursor: ${(props) => (props.$isClickable ? \"pointer\" : \"auto\")};\n\n  &:hover {\n    background-color: ${(props) =>\n      props.$isClickable\n        ? props.$hoverBackgroundColor\n        : props.$defaultBackgroundColor};\n  }\n`;\n\nconst BadgeContent = styled.div<{\n  $hasX: boolean;\n  $widthPixels?: number;\n}>`\n  display: flex;\n  align-items: center;\n  gap: ${Spacing.px4};\n\n  width: ${({ $widthPixels }) => ($widthPixels ? `${$widthPixels}px` : \"auto\")};\n  max-width: ${({ $hasX: $closeable }) =>\n    $closeable ? `calc(100% - ${Spacing.px20})` : \"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  ${applyTypography(Typography.captionMedium)}\n`;\n\ntype XButtonProps = {\n  onClick: MouseEventHandler<HTMLButtonElement>;\n};\n\nconst XButton = ({ onClick }: XButtonProps) => (\n  <BaseCloseButton type=\"button\" onClick={onClick}>\n    <SystemIcon.XIcon color={Color.typography.blackMedium} size={12} />\n  </BaseCloseButton>\n);\n\nconst BaseCloseButton = styled.button`\n  display: flex;\n  flex-direction: column;\n\n  min-width: ${Spacing.px12};\n`;\n"]}

package/core/molecules/Toast.d.ts

@@ -0,0 +1,20 @@
+import { type HTMLAttributes, type PropsWithChildren, type ReactNode } from "react";
+export type ToastVariant = "neutral" | "success" | "danger";
+export type ToastProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "title"> & {
+    title?: ReactNode;
+    message?: ReactNode;
+    variant?: ToastVariant;
+    action?: {
+        label: ReactNode;
+        onClick: () => void;
+    };
+    onClose?: () => void;
+};
+declare const Toast: ({ title, message, variant, action, onClose, ...props }: ToastProps) => import("react").JSX.Element;
+export default Toast;
+export type ToastOptions = ToastProps & {
+    dedupeKey?: string;
+    duration?: number;
+};
+export declare const ToastProvider: ({ children }: PropsWithChildren) => import("react").JSX.Element;
+export declare const useToast: () => (options: ToastOptions) => void;

package/core/molecules/Toast.js

@@ -0,0 +1,239 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useState, } from "react";
+import styled, { keyframes } from "styled-components";
+import { Color, Responsive, Spacing, SystemIcon, Typography } from "../atoms";
+import { applyTypography } from "../integrations";
+const toastVariants = {
+    neutral: {
+        iconBackground: Color.neutral.grey1,
+        border: Color.neutral.grey2,
+        background: Color.neutral.grey3,
+        Icon: null,
+    },
+    success: {
+        iconBackground: Color.accent.green1,
+        border: Color.accent.green2,
+        background: Color.accent.green4,
+        Icon: SystemIcon.CheckIcon,
+    },
+    danger: {
+        iconBackground: Color.accent.red1,
+        border: Color.accent.red2,
+        background: Color.accent.red4,
+        Icon: SystemIcon.XIcon,
+    },
+};
+const Toast = ({ title, message, variant = "neutral", action, onClose, ...props }) => {
+    const { iconBackground, border, background, Icon } = toastVariants[variant];
+    const isCompact = title == null && !action;
+    return (_jsxs(ToastContainer, { ...props, role: variant === "danger" ? "alert" : "status", "$border": border, "$background": background, "$compact": isCompact, children: [_jsxs(ToastLayout, { children: [_jsxs(ToastDetails, { children: [_jsx(ToastIconContainer, { "$background": iconBackground, children: Icon ? (_jsx(Icon, { color: Color.neutral.white, size: 14, weight: "bold" })) : (_jsx(SystemIcon.InfoIcon, { color: Color.neutral.white, size: 14, weight: "bold" })) }), _jsxs(ToastText, { children: [title != null && _jsx(Title, { children: title }), message != null && _jsx(Message, { children: message })] })] }), action && (_jsx(ActionButton, { type: "button", onClick: action.onClick, children: action.label }))] }), onClose && (_jsx(CloseButton, { type: "button", onClick: onClose, children: _jsx(SystemIcon.XIcon, { color: Color.typography.blackMedium, size: 18 }) }))] }));
+};
+export default Toast;
+const ToastContext = createContext(null);
+export const ToastProvider = ({ children }) => {
+    const [toasts, setToasts] = useState([]);
+    const dismissToast = useCallback((id) => setToasts((currentToasts) => currentToasts.filter((toast) => toast.id !== id)), []);
+    const showToast = useCallback((options) => setToasts((currentToasts) => {
+        const existingToastIndex = options.dedupeKey
+            ? currentToasts.findIndex((toast) => toast.dedupeKey === options.dedupeKey)
+            : -1;
+        const nextToast = existingToastIndex < 0
+            ? { ...options, id: crypto.randomUUID(), revision: 0 }
+            : {
+                ...currentToasts[existingToastIndex],
+                ...options,
+                revision: currentToasts[existingToastIndex].revision + 1,
+            };
+        return [
+            nextToast,
+            ...currentToasts.filter((_, toastIndex) => toastIndex !== existingToastIndex),
+        ].slice(0, 3);
+    }), []);
+    return (_jsxs(ToastContext.Provider, { value: showToast, children: [children, _jsx(Viewport, { "data-slot": "toast-viewport", "$stackDepth": Math.max(0, toasts.length - 1), children: toasts.map(({ id, revision, dedupeKey, duration = 8000, ...props }, index) => (_jsx(StackItem, { "data-pulse": revision > 0, "$index": index, children: _jsx(TimedToast, { ...props, id: id, duration: duration, dismiss: dismissToast }) }, `${dedupeKey ?? id}-${revision}`))) })] }));
+};
+export const useToast = () => {
+    const showToast = useContext(ToastContext);
+    if (!showToast)
+        throw new Error("useToast must be used within ToastProvider");
+    return showToast;
+};
+const TimedToast = ({ id, duration, dismiss, action, onClose, onMouseEnter, onMouseLeave, onFocus, onBlur, ...props }) => {
+    const [isTimerPaused, setIsTimerPaused] = useState(false);
+    useEffect(() => {
+        if (isTimerPaused)
+            return;
+        const timeoutId = window.setTimeout(() => dismiss(id), duration);
+        return () => window.clearTimeout(timeoutId);
+    }, [dismiss, duration, id, isTimerPaused]);
+    return (_jsx(Toast, { ...props, onMouseEnter: (event) => {
+            setIsTimerPaused(true);
+            onMouseEnter?.(event);
+        }, onMouseLeave: (event) => {
+            if (!event.currentTarget.contains(document.activeElement))
+                setIsTimerPaused(false);
+            onMouseLeave?.(event);
+        }, onFocus: (event) => {
+            setIsTimerPaused(true);
+            onFocus?.(event);
+        }, onBlur: (event) => {
+            if (!event.currentTarget.contains(event.relatedTarget) &&
+                !event.currentTarget.matches(":hover"))
+                setIsTimerPaused(false);
+            onBlur?.(event);
+        }, action: action && {
+            label: action.label,
+            onClick: () => {
+                dismiss(id);
+                action.onClick();
+            },
+        }, onClose: () => {
+            onClose?.();
+            dismiss(id);
+        } }));
+};
+const ToastContainer = styled.div `
+  display: flex;
+  align-items: center;
+  gap: ${Spacing.px16};
+
+  box-sizing: border-box;
+  width: ${({ $compact }) => ($compact ? "300px" : "400px")};
+  max-width: calc(100vw - ${Spacing.px40});
+  min-height: ${({ $compact }) => ($compact ? "44px" : "64px")};
+  padding: ${Spacing.px12};
+
+  background: ${({ $background }) => $background};
+  border: 1px solid ${({ $border }) => $border};
+  border-radius: ${Spacing.px8};
+`;
+const ToastLayout = styled.div `
+  display: flex;
+  align-items: flex-start;
+  gap: ${Spacing.px8};
+  flex: 1;
+
+  min-width: 0;
+`;
+const ToastDetails = styled.div `
+  display: flex;
+  align-items: flex-start;
+  gap: ${Spacing.px12};
+  flex: 1;
+
+  min-width: 0;
+`;
+const ToastIconContainer = styled.span `
+  display: grid;
+  place-items: center;
+  flex: 0 0 ${Spacing.px20};
+
+  height: ${Spacing.px20};
+
+  background: ${({ $background }) => $background};
+  border-radius: ${Spacing.px4};
+`;
+const ToastText = styled.div `
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+
+  min-width: 0;
+`;
+const Title = styled.div `
+  color: ${Color.typography.blackHigh};
+
+  ${applyTypography(Typography.bodySecondaryBold)}
+`;
+const Message = styled.div `
+  color: ${Color.typography.blackMedium};
+
+  ${applyTypography(Typography.bodySecondaryRegular)}
+`;
+const ActionButton = styled.button `
+  align-self: center;
+  flex: none;
+
+  box-sizing: border-box;
+  height: ${Spacing.px40};
+  padding: 10px 0;
+
+  color: ${Color.typography.blackHigh};
+  background: transparent;
+
+  text-decoration: underline;
+  white-space: nowrap;
+
+  cursor: pointer;
+
+  ${applyTypography(Typography.bodySecondaryMedium)}
+`;
+const CloseButton = styled.button `
+  display: grid;
+  place-items: center;
+  align-self: center;
+  flex: 0 0 ${Spacing.px24};
+
+  width: ${Spacing.px24};
+  height: ${Spacing.px24};
+
+  background: transparent;
+
+  cursor: pointer;
+`;
+const toastPulse = keyframes `
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.03); }
+`;
+const StackItem = styled.div `
+  grid-area: 1 / 1;
+  z-index: ${({ $index }) => 3 - $index};
+
+  transform: translate(
+    ${({ $index }) => `${-$index * 8}px`},
+    ${({ $index }) => `${-$index * 8}px`}
+  );
+  transition: transform 250ms ease-in-out;
+  pointer-events: ${({ $index }) => ($index === 0 ? "auto" : "none")};
+
+  ${({ $index }) => $index > 0 &&
+    `
+      > [role] > * {
+        visibility: hidden;
+      }
+    `}
+
+  &[data-pulse="true"] > [role] {
+    animation: ${toastPulse} 250ms ease-in-out;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+
+    &[data-pulse="true"] > [role] {
+      animation: none;
+    }
+  }
+`;
+const Viewport = styled.div `
+  display: grid;
+  padding: ${({ $stackDepth }) => `${$stackDepth * 8}px 0 0 ${$stackDepth * 8}px`};
+
+  z-index: 100;
+  position: fixed;
+  top: 25px;
+  right: ${Spacing.px20};
+  transition: padding 250ms ease-in-out;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+
+  @media (width < ${Responsive.widthBreakpoint.laptop}) {
+    top: auto;
+    right: 50%;
+    bottom: var(--toast-mobile-bottom-offset, ${Spacing.px88});
+    transform: translateX(50%);
+  }
+`;
+//# sourceMappingURL=Toast.js.map

package/core/molecules/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../../../core/molecules/Toast.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,aAAa,EAIb,WAAW,EACX,UAAU,EACV,SAAS,EACT,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAkBlD,MAAM,aAAa,GAAG;IACpB,OAAO,EAAE;QACP,cAAc,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QACnC,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAC3B,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAC/B,IAAI,EAAE,IAAI;KACX;IACD,OAAO,EAAE;QACP,cAAc,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM;QACnC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM;QAC3B,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM;QAC/B,IAAI,EAAE,UAAU,CAAC,SAAS;KAC3B;IACD,MAAM,EAAE;QACN,cAAc,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI;QACjC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI;QACzB,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI;QAC7B,IAAI,EAAE,UAAU,CAAC,KAAK;KACvB;CACO,CAAC;AAEX,MAAM,KAAK,GAAG,CAAC,EACb,KAAK,EACL,OAAO,EACP,OAAO,GAAG,SAAS,EACnB,MAAM,EACN,OAAO,EACP,GAAG,KAAK,EACG,EAAE,EAAE;IACf,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAC5E,MAAM,SAAS,GAAG,KAAK,IAAI,IAAI,IAAI,CAAC,MAAM,CAAC;IAE3C,OAAO,CACL,MAAC,cAAc,OACT,KAAK,EACT,IAAI,EAAE,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,aACtC,MAAM,iBACF,UAAU,cACb,SAAS,aAEnB,MAAC,WAAW,eACV,MAAC,YAAY,eACX,KAAC,kBAAkB,mBAAc,cAAc,YAC5C,IAAI,CAAC,CAAC,CAAC,CACN,KAAC,IAAI,IAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,EAAC,MAAM,GAAG,CAC7D,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,CAAC,QAAQ,IAClB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,EAC1B,IAAI,EAAE,EAAE,EACR,MAAM,EAAC,MAAM,GACb,CACH,GACkB,EACrB,MAAC,SAAS,eACP,KAAK,IAAI,IAAI,IAAI,KAAC,KAAK,cAAE,KAAK,GAAS,EACvC,OAAO,IAAI,IAAI,IAAI,KAAC,OAAO,cAAE,OAAO,GAAW,IACtC,IACC,EACd,MAAM,IAAI,CACT,KAAC,YAAY,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,MAAM,CAAC,OAAO,YAChD,MAAM,CAAC,KAAK,GACA,CAChB,IACW,EACb,OAAO,IAAI,CACV,KAAC,WAAW,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,YACzC,KAAC,UAAU,CAAC,KAAK,IAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,IAAI,EAAE,EAAE,GAAI,GACvD,CACf,IACc,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC;AASrB,MAAM,YAAY,GAAG,aAAa,CAChC,IAAI,CACL,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAqB,EAAE,EAAE;IAC/D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAc,EAAE,CAAC,CAAC;IACtD,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,EAAU,EAAE,EAAE,CACb,SAAS,CAAC,CAAC,aAAa,EAAE,EAAE,CAC1B,aAAa,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,CAAC,CACjD,EACH,EAAE,CACH,CAAC;IACF,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,OAAqB,EAAE,EAAE,CACxB,SAAS,CAAC,CAAC,aAAa,EAAE,EAAE;QAC1B,MAAM,kBAAkB,GAAG,OAAO,CAAC,SAAS;YAC1C,CAAC,CAAC,aAAa,CAAC,SAAS,CACrB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,SAAS,KAAK,OAAO,CAAC,SAAS,CACjD;YACH,CAAC,CAAC,CAAC,CAAC,CAAC;QACP,MAAM,SAAS,GACb,kBAAkB,GAAG,CAAC;YACpB,CAAC,CAAC,EAAE,GAAG,OAAO,EAAE,EAAE,EAAE,MAAM,CAAC,UAAU,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE;YACtD,CAAC,CAAC;gBACE,GAAG,aAAa,CAAC,kBAAkB,CAAC;gBACpC,GAAG,OAAO;gBACV,QAAQ,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC,QAAQ,GAAG,CAAC;aACzD,CAAC;QAER,OAAO;YACL,SAAS;YACT,GAAG,aAAa,CAAC,MAAM,CACrB,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,CAAC,UAAU,KAAK,kBAAkB,CACrD;SACF,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAChB,CAAC,CAAC,EACJ,EAAE,CACH,CAAC;IAEF,OAAO,CACL,MAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,SAAS,aACpC,QAAQ,EACT,KAAC,QAAQ,iBACG,gBAAgB,iBACb,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,YAE1C,MAAM,CAAC,GAAG,CACT,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,GAAG,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CACjE,KAAC,SAAS,kBAEI,QAAQ,GAAG,CAAC,YAChB,KAAK,YAEb,KAAC,UAAU,OACL,KAAK,EACT,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,YAAY,GACrB,IATG,GAAG,SAAS,IAAI,EAAE,IAAI,QAAQ,EAAE,CAU3B,CACb,CACF,GACQ,IACW,CACzB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,EAAE;IAC3B,MAAM,SAAS,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAC3C,IAAI,CAAC,SAAS;QAAE,MAAM,IAAI,KAAK,CAAC,4CAA4C,CAAC,CAAC;IAC9E,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,EAClB,EAAE,EACF,QAAQ,EACR,OAAO,EACP,MAAM,EACN,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,GAAG,KAAK,EACqD,EAAE,EAAE;IACjE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,aAAa;YAAE,OAAO;QAC1B,MAAM,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC;QACjE,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IAC9C,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,aAAa,CAAC,CAAC,CAAC;IAE3C,OAAO,CACL,KAAC,KAAK,OACA,KAAK,EACT,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE;YACtB,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACvB,YAAY,EAAE,CAAC,KAAK,CAAC,CAAC;QACxB,CAAC,EACD,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE;YACtB,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC;gBACvD,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAC1B,YAAY,EAAE,CAAC,KAAK,CAAC,CAAC;QACxB,CAAC,EACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACjB,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACvB,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC,EACD,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE;YAChB,IACE,CAAC,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC;gBAClD,CAAC,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,QAAQ,CAAC;gBAEtC,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAC1B,MAAM,EAAE,CAAC,KAAK,CAAC,CAAC;QAClB,CAAC,EACD,MAAM,EACJ,MAAM,IAAI;YACR,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,OAAO,EAAE,GAAG,EAAE;gBACZ,OAAO,CAAC,EAAE,CAAC,CAAC;gBACZ,MAAM,CAAC,OAAO,EAAE,CAAC;YACnB,CAAC;SACF,EAEH,OAAO,EAAE,GAAG,EAAE;YACZ,OAAO,EAAE,EAAE,CAAC;YACZ,OAAO,CAAC,EAAE,CAAC,CAAC;QACd,CAAC,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAI/B;;;SAGO,OAAO,CAAC,IAAI;;;WAGV,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;4BAC/B,OAAO,CAAC,IAAI;gBACxB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;aACjD,OAAO,CAAC,IAAI;;gBAET,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,WAAW;sBAC1B,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO;mBAC3B,OAAO,CAAC,GAAG;CAC7B,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;SAGrB,OAAO,CAAC,GAAG;;;;CAInB,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;;SAGtB,OAAO,CAAC,IAAI;;;;CAIpB,CAAC;AAEF,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAEpC;;;cAGY,OAAO,CAAC,IAAI;;YAEd,OAAO,CAAC,IAAI;;gBAER,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,WAAW;mBAC7B,OAAO,CAAC,GAAG;CAC7B,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAO3B,CAAC;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;WACb,KAAK,CAAC,UAAU,CAAC,SAAS;;IAEjC,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC;CAChD,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;WACf,KAAK,CAAC,UAAU,CAAC,WAAW;;IAEnC,eAAe,CAAC,UAAU,CAAC,oBAAoB,CAAC;CACnD,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;YAKtB,OAAO,CAAC,IAAI;;;WAGb,KAAK,CAAC,UAAU,CAAC,SAAS;;;;;;;;IAQjC,eAAe,CAAC,UAAU,CAAC,mBAAmB,CAAC;CAClD,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAA;;;;cAInB,OAAO,CAAC,IAAI;;WAEf,OAAO,CAAC,IAAI;YACX,OAAO,CAAC,IAAI;;;;;CAKvB,CAAC;AAEF,MAAM,UAAU,GAAG,SAAS,CAAA;;;CAG3B,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAoB;;aAEnC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,GAAG,MAAM;;;MAGjC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,IAAI;MAClC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,IAAI;;;oBAGpB,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;;IAEhE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CACf,MAAM,GAAG,CAAC;IACV;;;;KAIC;;;iBAGY,UAAU;;;;;;;;;;CAU1B,CAAC;AAEF,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAyB;;aAEvC,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAC7B,GAAG,WAAW,GAAG,CAAC,UAAU,WAAW,GAAG,CAAC,IAAI;;;;;WAKxC,OAAO,CAAC,IAAI;;;;;;;oBAOH,UAAU,CAAC,eAAe,CAAC,MAAM;;;gDAGL,OAAO,CAAC,IAAI;;;CAG3D,CAAC","sourcesContent":["import {\n  createContext,\n  type HTMLAttributes,\n  type PropsWithChildren,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useState,\n} from \"react\";\nimport styled, { keyframes } from \"styled-components\";\nimport { Color, Responsive, Spacing, SystemIcon, Typography } from \"../atoms\";\nimport { applyTypography } from \"../integrations\";\n\nexport type ToastVariant = \"neutral\" | \"success\" | \"danger\";\n\nexport type ToastProps = Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"children\" | \"title\"\n> & {\n  title?: ReactNode;\n  message?: ReactNode;\n  variant?: ToastVariant;\n  action?: {\n    label: ReactNode;\n    onClick: () => void;\n  };\n  onClose?: () => void;\n};\n\nconst toastVariants = {\n  neutral: {\n    iconBackground: Color.neutral.grey1,\n    border: Color.neutral.grey2,\n    background: Color.neutral.grey3,\n    Icon: null,\n  },\n  success: {\n    iconBackground: Color.accent.green1,\n    border: Color.accent.green2,\n    background: Color.accent.green4,\n    Icon: SystemIcon.CheckIcon,\n  },\n  danger: {\n    iconBackground: Color.accent.red1,\n    border: Color.accent.red2,\n    background: Color.accent.red4,\n    Icon: SystemIcon.XIcon,\n  },\n} as const;\n\nconst Toast = ({\n  title,\n  message,\n  variant = \"neutral\",\n  action,\n  onClose,\n  ...props\n}: ToastProps) => {\n  const { iconBackground, border, background, Icon } = toastVariants[variant];\n  const isCompact = title == null && !action;\n\n  return (\n    <ToastContainer\n      {...props}\n      role={variant === \"danger\" ? \"alert\" : \"status\"}\n      $border={border}\n      $background={background}\n      $compact={isCompact}\n    >\n      <ToastLayout>\n        <ToastDetails>\n          <ToastIconContainer $background={iconBackground}>\n            {Icon ? (\n              <Icon color={Color.neutral.white} size={14} weight=\"bold\" />\n            ) : (\n              <SystemIcon.InfoIcon\n                color={Color.neutral.white}\n                size={14}\n                weight=\"bold\"\n              />\n            )}\n          </ToastIconContainer>\n          <ToastText>\n            {title != null && <Title>{title}</Title>}\n            {message != null && <Message>{message}</Message>}\n          </ToastText>\n        </ToastDetails>\n        {action && (\n          <ActionButton type=\"button\" onClick={action.onClick}>\n            {action.label}\n          </ActionButton>\n        )}\n      </ToastLayout>\n      {onClose && (\n        <CloseButton type=\"button\" onClick={onClose}>\n          <SystemIcon.XIcon color={Color.typography.blackMedium} size={18} />\n        </CloseButton>\n      )}\n    </ToastContainer>\n  );\n};\n\nexport default Toast;\n\nexport type ToastOptions = ToastProps & {\n  dedupeKey?: string;\n  duration?: number;\n};\n\ntype ToastItem = ToastOptions & { id: string; revision: number };\n\nconst ToastContext = createContext<((options: ToastOptions) => void) | null>(\n  null,\n);\n\nexport const ToastProvider = ({ children }: PropsWithChildren) => {\n  const [toasts, setToasts] = useState<ToastItem[]>([]);\n  const dismissToast = useCallback(\n    (id: string) =>\n      setToasts((currentToasts) =>\n        currentToasts.filter((toast) => toast.id !== id),\n      ),\n    [],\n  );\n  const showToast = useCallback(\n    (options: ToastOptions) =>\n      setToasts((currentToasts) => {\n        const existingToastIndex = options.dedupeKey\n          ? currentToasts.findIndex(\n              (toast) => toast.dedupeKey === options.dedupeKey,\n            )\n          : -1;\n        const nextToast =\n          existingToastIndex < 0\n            ? { ...options, id: crypto.randomUUID(), revision: 0 }\n            : {\n                ...currentToasts[existingToastIndex],\n                ...options,\n                revision: currentToasts[existingToastIndex].revision + 1,\n              };\n\n        return [\n          nextToast,\n          ...currentToasts.filter(\n            (_, toastIndex) => toastIndex !== existingToastIndex,\n          ),\n        ].slice(0, 3);\n      }),\n    [],\n  );\n\n  return (\n    <ToastContext.Provider value={showToast}>\n      {children}\n      <Viewport\n        data-slot=\"toast-viewport\"\n        $stackDepth={Math.max(0, toasts.length - 1)}\n      >\n        {toasts.map(\n          ({ id, revision, dedupeKey, duration = 8000, ...props }, index) => (\n            <StackItem\n              key={`${dedupeKey ?? id}-${revision}`}\n              data-pulse={revision > 0}\n              $index={index}\n            >\n              <TimedToast\n                {...props}\n                id={id}\n                duration={duration}\n                dismiss={dismissToast}\n              />\n            </StackItem>\n          ),\n        )}\n      </Viewport>\n    </ToastContext.Provider>\n  );\n};\n\nexport const useToast = () => {\n  const showToast = useContext(ToastContext);\n  if (!showToast) throw new Error(\"useToast must be used within ToastProvider\");\n  return showToast;\n};\n\nconst TimedToast = ({\n  id,\n  duration,\n  dismiss,\n  action,\n  onClose,\n  onMouseEnter,\n  onMouseLeave,\n  onFocus,\n  onBlur,\n  ...props\n}: ToastOptions & { id: string; dismiss: (id: string) => void }) => {\n  const [isTimerPaused, setIsTimerPaused] = useState(false);\n\n  useEffect(() => {\n    if (isTimerPaused) return;\n    const timeoutId = window.setTimeout(() => dismiss(id), duration);\n    return () => window.clearTimeout(timeoutId);\n  }, [dismiss, duration, id, isTimerPaused]);\n\n  return (\n    <Toast\n      {...props}\n      onMouseEnter={(event) => {\n        setIsTimerPaused(true);\n        onMouseEnter?.(event);\n      }}\n      onMouseLeave={(event) => {\n        if (!event.currentTarget.contains(document.activeElement))\n          setIsTimerPaused(false);\n        onMouseLeave?.(event);\n      }}\n      onFocus={(event) => {\n        setIsTimerPaused(true);\n        onFocus?.(event);\n      }}\n      onBlur={(event) => {\n        if (\n          !event.currentTarget.contains(event.relatedTarget) &&\n          !event.currentTarget.matches(\":hover\")\n        )\n          setIsTimerPaused(false);\n        onBlur?.(event);\n      }}\n      action={\n        action && {\n          label: action.label,\n          onClick: () => {\n            dismiss(id);\n            action.onClick();\n          },\n        }\n      }\n      onClose={() => {\n        onClose?.();\n        dismiss(id);\n      }}\n    />\n  );\n};\n\nconst ToastContainer = styled.div<{\n  $border: Color.DesignColor;\n  $background: Color.DesignColor;\n  $compact: boolean;\n}>`\n  display: flex;\n  align-items: center;\n  gap: ${Spacing.px16};\n\n  box-sizing: border-box;\n  width: ${({ $compact }) => ($compact ? \"300px\" : \"400px\")};\n  max-width: calc(100vw - ${Spacing.px40});\n  min-height: ${({ $compact }) => ($compact ? \"44px\" : \"64px\")};\n  padding: ${Spacing.px12};\n\n  background: ${({ $background }) => $background};\n  border: 1px solid ${({ $border }) => $border};\n  border-radius: ${Spacing.px8};\n`;\n\nconst ToastLayout = styled.div`\n  display: flex;\n  align-items: flex-start;\n  gap: ${Spacing.px8};\n  flex: 1;\n\n  min-width: 0;\n`;\n\nconst ToastDetails = styled.div`\n  display: flex;\n  align-items: flex-start;\n  gap: ${Spacing.px12};\n  flex: 1;\n\n  min-width: 0;\n`;\n\nconst ToastIconContainer = styled.span<{\n  $background: Color.DesignColor;\n}>`\n  display: grid;\n  place-items: center;\n  flex: 0 0 ${Spacing.px20};\n\n  height: ${Spacing.px20};\n\n  background: ${({ $background }) => $background};\n  border-radius: ${Spacing.px4};\n`;\n\nconst ToastText = styled.div`\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  justify-content: center;\n\n  min-width: 0;\n`;\n\nconst Title = styled.div`\n  color: ${Color.typography.blackHigh};\n\n  ${applyTypography(Typography.bodySecondaryBold)}\n`;\n\nconst Message = styled.div`\n  color: ${Color.typography.blackMedium};\n\n  ${applyTypography(Typography.bodySecondaryRegular)}\n`;\n\nconst ActionButton = styled.button`\n  align-self: center;\n  flex: none;\n\n  box-sizing: border-box;\n  height: ${Spacing.px40};\n  padding: 10px 0;\n\n  color: ${Color.typography.blackHigh};\n  background: transparent;\n\n  text-decoration: underline;\n  white-space: nowrap;\n\n  cursor: pointer;\n\n  ${applyTypography(Typography.bodySecondaryMedium)}\n`;\n\nconst CloseButton = styled.button`\n  display: grid;\n  place-items: center;\n  align-self: center;\n  flex: 0 0 ${Spacing.px24};\n\n  width: ${Spacing.px24};\n  height: ${Spacing.px24};\n\n  background: transparent;\n\n  cursor: pointer;\n`;\n\nconst toastPulse = keyframes`\n  0%, 100% { transform: scale(1); }\n  50% { transform: scale(1.03); }\n`;\n\nconst StackItem = styled.div<{ $index: number }>`\n  grid-area: 1 / 1;\n  z-index: ${({ $index }) => 3 - $index};\n\n  transform: translate(\n    ${({ $index }) => `${-$index * 8}px`},\n    ${({ $index }) => `${-$index * 8}px`}\n  );\n  transition: transform 250ms ease-in-out;\n  pointer-events: ${({ $index }) => ($index === 0 ? \"auto\" : \"none\")};\n\n  ${({ $index }) =>\n    $index > 0 &&\n    `\n      > [role] > * {\n        visibility: hidden;\n      }\n    `}\n\n  &[data-pulse=\"true\"] > [role] {\n    animation: ${toastPulse} 250ms ease-in-out;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n\n    &[data-pulse=\"true\"] > [role] {\n      animation: none;\n    }\n  }\n`;\n\nconst Viewport = styled.div<{ $stackDepth: number }>`\n  display: grid;\n  padding: ${({ $stackDepth }) =>\n    `${$stackDepth * 8}px 0 0 ${$stackDepth * 8}px`};\n\n  z-index: 100;\n  position: fixed;\n  top: 25px;\n  right: ${Spacing.px20};\n  transition: padding 250ms ease-in-out;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n\n  @media (width < ${Responsive.widthBreakpoint.laptop}) {\n    top: auto;\n    right: 50%;\n    bottom: var(--toast-mobile-bottom-offset, ${Spacing.px88});\n    transform: translateX(50%);\n  }\n`;\n"]}

package/core/molecules/Tooltip.d.ts

@@ -0,0 +1,20 @@
+import { type HTMLAttributes, type PropsWithChildren, type ReactElement } from "react";
+export type TooltipSide = "top" | "right" | "bottom" | "left";
+export type TooltipProps = PropsWithChildren<{
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}>;
+declare const Tooltip: ({ children, open: isControlledOpen, defaultOpen, onOpenChange, }: TooltipProps) => import("react").JSX.Element;
+export default Tooltip;
+export type TooltipTriggerProps = {
+    children: ReactElement<{
+        "aria-describedby"?: string;
+    }>;
+};
+export declare const TooltipTrigger: ({ children }: TooltipTriggerProps) => import("react").JSX.Element;
+export type TooltipContentProps = PropsWithChildren<Omit<HTMLAttributes<HTMLDivElement>, "content"> & {
+    side?: TooltipSide;
+    sideOffset?: number;
+}>;
+export declare const TooltipContent: ({ children, side, sideOffset, ...props }: TooltipContentProps) => import("react").ReactPortal | null;

package/core/molecules/Tooltip.js

@@ -0,0 +1,182 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, createContext, useContext, useId, useLayoutEffect, useRef, useState, } from "react";
+import { createPortal } from "react-dom";
+import styled, { keyframes } from "styled-components";
+import { Color, Spacing, Typography } from "../atoms";
+import { applyTypography } from "../integrations";
+const TooltipContext = createContext(null);
+const useTooltip = () => {
+    const tooltipContext = useContext(TooltipContext);
+    if (!tooltipContext)
+        throw new Error("Tooltip components must be used within Tooltip");
+    return tooltipContext;
+};
+const Tooltip = ({ children, open: isControlledOpen, defaultOpen = false, onOpenChange, }) => {
+    const [isUncontrolledOpen, setIsUncontrolledOpen] = useState(defaultOpen);
+    const tooltipTriggerContainerRef = useRef(null);
+    const tooltipContentId = useId();
+    const isOpen = isControlledOpen ?? isUncontrolledOpen;
+    const setIsOpen = (nextIsOpen) => {
+        if (isControlledOpen === undefined)
+            setIsUncontrolledOpen(nextIsOpen);
+        onOpenChange?.(nextIsOpen);
+    };
+    return (_jsx(TooltipContext.Provider, { value: {
+            tooltipContentId,
+            isOpen,
+            setIsOpen,
+            tooltipTriggerContainerRef,
+        }, children: children }));
+};
+export default Tooltip;
+export const TooltipTrigger = ({ children }) => {
+    const { tooltipContentId, isOpen, setIsOpen, tooltipTriggerContainerRef } = useTooltip();
+    return (_jsx(TooltipTriggerContainer, { ref: tooltipTriggerContainerRef, "data-slot": "tooltip-trigger", onMouseEnter: () => setIsOpen(true), onMouseLeave: () => {
+            if (!tooltipTriggerContainerRef.current?.contains(document.activeElement))
+                setIsOpen(false);
+        }, onFocus: () => setIsOpen(true), onBlur: () => {
+            if (!tooltipTriggerContainerRef.current?.matches(":hover"))
+                setIsOpen(false);
+        }, onKeyDown: (event) => event.key === "Escape" && setIsOpen(false), children: cloneElement(children, {
+            "aria-describedby": isOpen
+                ? [children.props["aria-describedby"], tooltipContentId]
+                    .filter(Boolean)
+                    .join(" ")
+                : children.props["aria-describedby"],
+        }) }));
+};
+const tooltipSides = ["top", "right", "bottom", "left"];
+const oppositeTooltipSide = {
+    top: "bottom",
+    right: "left",
+    bottom: "top",
+    left: "right",
+};
+const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
+export const TooltipContent = ({ children, side = "top", sideOffset = 0, ...props }) => {
+    const { tooltipContentId, isOpen, tooltipTriggerContainerRef } = useTooltip();
+    const tooltipContentContainerRef = useRef(null);
+    const [tooltipPosition, setTooltipPosition] = useState();
+    useLayoutEffect(() => {
+        if (!isOpen)
+            return;
+        const updateTooltipPosition = () => {
+            const triggerContainerRect = tooltipTriggerContainerRef.current?.getBoundingClientRect();
+            const tooltipContentRect = tooltipContentContainerRef.current?.getBoundingClientRect();
+            if (!triggerContainerRect || !tooltipContentRect)
+                return;
+            const viewportPadding = 8;
+            const availableSpaceBySide = {
+                top: triggerContainerRect.top - viewportPadding,
+                right: window.innerWidth - triggerContainerRect.right - viewportPadding,
+                bottom: window.innerHeight - triggerContainerRect.bottom - viewportPadding,
+                left: triggerContainerRect.left - viewportPadding,
+            };
+            const oppositeSide = oppositeTooltipSide[side];
+            const resolvedSide = [
+                side,
+                oppositeSide,
+                ...tooltipSides.filter((candidateSide) => ![side, oppositeSide].includes(candidateSide)),
+            ].find((candidateSide) => availableSpaceBySide[candidateSide] >=
+                (candidateSide === "top" || candidateSide === "bottom"
+                    ? tooltipContentRect.height
+                    : tooltipContentRect.width) +
+                    sideOffset) ?? side;
+            let tooltipTop = triggerContainerRect.top +
+                (triggerContainerRect.height - tooltipContentRect.height) / 2;
+            let tooltipLeft = triggerContainerRect.left +
+                (triggerContainerRect.width - tooltipContentRect.width) / 2;
+            if (resolvedSide === "top")
+                tooltipTop =
+                    triggerContainerRect.top - tooltipContentRect.height - sideOffset;
+            if (resolvedSide === "right")
+                tooltipLeft = triggerContainerRect.right + sideOffset;
+            if (resolvedSide === "bottom")
+                tooltipTop = triggerContainerRect.bottom + sideOffset;
+            if (resolvedSide === "left")
+                tooltipLeft =
+                    triggerContainerRect.left - tooltipContentRect.width - sideOffset;
+            tooltipTop = clamp(tooltipTop, viewportPadding, window.innerHeight - tooltipContentRect.height - viewportPadding);
+            tooltipLeft = clamp(tooltipLeft, viewportPadding, window.innerWidth - tooltipContentRect.width - viewportPadding);
+            setTooltipPosition({
+                top: tooltipTop,
+                left: tooltipLeft,
+                side: resolvedSide,
+                arrowOffset: resolvedSide === "top" || resolvedSide === "bottom"
+                    ? clamp(triggerContainerRect.left +
+                        triggerContainerRect.width / 2 -
+                        tooltipLeft, 8, tooltipContentRect.width - 8)
+                    : clamp(triggerContainerRect.top +
+                        triggerContainerRect.height / 2 -
+                        tooltipTop, 8, tooltipContentRect.height - 8),
+            });
+        };
+        updateTooltipPosition();
+        window.addEventListener("resize", updateTooltipPosition);
+        window.addEventListener("scroll", updateTooltipPosition, true);
+        return () => {
+            window.removeEventListener("resize", updateTooltipPosition);
+            window.removeEventListener("scroll", updateTooltipPosition, true);
+        };
+    }, [children, isOpen, side, sideOffset, tooltipTriggerContainerRef]);
+    if (!isOpen || typeof document === "undefined")
+        return null;
+    return createPortal(_jsxs(TooltipContentContainer, { ...props, ref: tooltipContentContainerRef, id: tooltipContentId, role: "tooltip", "data-slot": "tooltip-content", "data-side": tooltipPosition?.side ?? side, "$visible": !!tooltipPosition, style: {
+            ...props.style,
+            top: tooltipPosition?.top ?? 0,
+            left: tooltipPosition?.left ?? 0,
+        }, children: [children, tooltipPosition && (_jsx(TooltipArrow, { "aria-hidden": true, "data-slot": "tooltip-arrow", "$side": tooltipPosition.side, "$offset": tooltipPosition.arrowOffset }))] }), document.body);
+};
+const tooltipFadeIn = keyframes `
+  from { opacity: 0; }
+  to { opacity: 1; }
+`;
+const TooltipTriggerContainer = styled.span `
+  display: inline-flex;
+`;
+const TooltipContentContainer = styled.div `
+  position: fixed;
+  z-index: 100;
+
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  box-sizing: border-box;
+  width: max-content;
+  max-width: min(320px, calc(100vw - ${Spacing.px16}));
+  padding: ${Spacing.px12};
+
+  color: ${Color.typography.whiteHigh};
+  background: ${Color.neutral.black};
+  border-radius: ${Spacing.px8};
+
+  text-align: center;
+  visibility: ${({ $visible }) => ($visible ? "visible" : "hidden")};
+  pointer-events: none;
+  animation: ${tooltipFadeIn} 120ms ease-out;
+
+  ${applyTypography(Typography.captionRegular)}
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+`;
+const TooltipArrow = styled.span `
+  position: absolute;
+  ${({ $side, $offset }) => {
+    if ($side === "top")
+        return `bottom: -${Spacing.px4}; left: ${$offset}px; transform: translateX(-50%) rotate(45deg);`;
+    if ($side === "right")
+        return `left: -${Spacing.px4}; top: ${$offset}px; transform: translateY(-50%) rotate(45deg);`;
+    if ($side === "bottom")
+        return `top: -${Spacing.px4}; left: ${$offset}px; transform: translateX(-50%) rotate(45deg);`;
+    return `right: -${Spacing.px4}; top: ${$offset}px; transform: translateY(-50%) rotate(45deg);`;
+}}
+
+  width: ${Spacing.px8};
+  height: ${Spacing.px8};
+
+  background: ${Color.neutral.black};
+`;
+//# sourceMappingURL=Tooltip.js.map