@grantbii/design-system 1.16.1 → 1.18.0

package/core/archive/LinkButton.d.ts

@@ -1,12 +1,12 @@
 import type { AnchorHTMLAttributes, ComponentType, DetailedHTMLProps, HTMLAttributeAnchorTarget, ReactNode } from "react";
-import { Icons } from "../atoms";
+import { SystemIcon } from "../atoms";
 type LinkButtonProps = {
     label: ReactNode;
     href: string;
     disabled?: boolean;
     target?: HTMLAttributeAnchorTarget;
-    LeftIcon?: ComponentType<Icons.IconProps>;
-    RightIcon?: ComponentType<Icons.IconProps>;
+    LeftIcon?: ComponentType<SystemIcon.IconProps>;
+    RightIcon?: ComponentType<SystemIcon.IconProps>;
     underline?: boolean;
     backgroundColor?: string;
     borderColor?: string;

package/core/archive/LinkButton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "next/link";
-import { Icons } from "../atoms";
+import { SystemIcon } from "../atoms";
 import { BaseButton } from "../shared";
 /**
  * A link that looks like a button

package/core/archive/LinkButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkButton.js","sourceRoot":"","sources":["../../../core/archive/LinkButton.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAQ7B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAmBvC;;GAEG;AACH,MAAM,UAAU,GAAG,CAAC,EAClB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,SAAS,EACT,eAAe,EACf,WAAW,EACX,KAAK,EACL,KAAK,EACL,QAAQ,EACR,MAAM,GAAG,QAAQ,EACjB,GAAG,SAAS,EACI,EAAE,EAAE;IACpB,MAAM,YAAY,GAAG;QACnB,KAAK;QACL,QAAQ;QACR,SAAS;QACT,SAAS;QACT,eAAe;QACf,WAAW;QACX,KAAK;QACL,KAAK;KACN,CAAC;IAEF,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,KAAC,OAAO,OAAK,YAAY,GAAI,CAC9B,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,OAAK,SAAS,EAAE,MAAM,EAAE,MAAM,YACjC,KAAC,OAAO,OAAK,YAAY,GAAI,GACxB,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC;AAa1B,MAAM,OAAO,GAAG,CAAC,EACf,KAAK,EACL,QAAQ,EACR,SAAS,EACT,SAAS,EACT,eAAe,EACf,WAAW,EACX,KAAK,EACL,KAAK,GACQ,EAAE,EAAE,CAAC,CAClB,MAAC,UAAU,kBACG,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,IAC/C,CACd,CAAC","sourcesContent":["import Link from \"next/link\";\nimport type {\n  AnchorHTMLAttributes,\n  ComponentType,\n  DetailedHTMLProps,\n  HTMLAttributeAnchorTarget,\n  ReactNode,\n} from \"react\";\nimport { Icons } from \"../atoms\";\nimport { BaseButton } from \"../shared\";\n\ntype LinkButtonProps = {\n  label: ReactNode;\n  href: string;\n  disabled?: boolean;\n  target?: HTMLAttributeAnchorTarget;\n  LeftIcon?: ComponentType<Icons.IconProps>;\n  RightIcon?: ComponentType<Icons.IconProps>;\n  underline?: boolean;\n  backgroundColor?: string;\n  borderColor?: string;\n  color?: string;\n  width?: string;\n} & DetailedHTMLProps<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  HTMLAnchorElement\n>;\n\n/**\n * A link that looks like a button\n */\nconst LinkButton = ({\n  label,\n  LeftIcon,\n  RightIcon,\n  underline,\n  backgroundColor,\n  borderColor,\n  color,\n  width,\n  disabled,\n  target = \"_blank\",\n  ...linkProps\n}: LinkButtonProps) => {\n  const contentProps = {\n    label,\n    LeftIcon,\n    RightIcon,\n    underline,\n    backgroundColor,\n    borderColor,\n    color,\n    width,\n  };\n\n  return disabled ? (\n    <Content {...contentProps} />\n  ) : (\n    <Link {...linkProps} target={target}>\n      <Content {...contentProps} />\n    </Link>\n  );\n};\n\nexport default LinkButton;\n\ntype ContentProps = {\n  label: ReactNode;\n  LeftIcon?: ComponentType<Icons.IconProps>;\n  RightIcon?: ComponentType<Icons.IconProps>;\n  underline?: boolean;\n  backgroundColor?: string;\n  borderColor?: string;\n  color?: string;\n  width?: string;\n};\n\nconst Content = ({\n  label,\n  LeftIcon,\n  RightIcon,\n  underline,\n  backgroundColor,\n  borderColor,\n  color,\n  width,\n}: ContentProps) => (\n  <BaseButton\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  </BaseButton>\n);\n"]}
+{"version":3,"file":"LinkButton.js","sourceRoot":"","sources":["../../../core/archive/LinkButton.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAQ7B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAmBvC;;GAEG;AACH,MAAM,UAAU,GAAG,CAAC,EAClB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,SAAS,EACT,eAAe,EACf,WAAW,EACX,KAAK,EACL,KAAK,EACL,QAAQ,EACR,MAAM,GAAG,QAAQ,EACjB,GAAG,SAAS,EACI,EAAE,EAAE;IACpB,MAAM,YAAY,GAAG;QACnB,KAAK;QACL,QAAQ;QACR,SAAS;QACT,SAAS;QACT,eAAe;QACf,WAAW;QACX,KAAK;QACL,KAAK;KACN,CAAC;IAEF,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,KAAC,OAAO,OAAK,YAAY,GAAI,CAC9B,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,OAAK,SAAS,EAAE,MAAM,EAAE,MAAM,YACjC,KAAC,OAAO,OAAK,YAAY,GAAI,GACxB,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC;AAa1B,MAAM,OAAO,GAAG,CAAC,EACf,KAAK,EACL,QAAQ,EACR,SAAS,EACT,SAAS,EACT,eAAe,EACf,WAAW,EACX,KAAK,EACL,KAAK,GACQ,EAAE,EAAE,CAAC,CAClB,MAAC,UAAU,kBACG,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,IAC/C,CACd,CAAC","sourcesContent":["import Link from \"next/link\";\nimport type {\n  AnchorHTMLAttributes,\n  ComponentType,\n  DetailedHTMLProps,\n  HTMLAttributeAnchorTarget,\n  ReactNode,\n} from \"react\";\nimport { SystemIcon } from \"../atoms\";\nimport { BaseButton } from \"../shared\";\n\ntype LinkButtonProps = {\n  label: ReactNode;\n  href: string;\n  disabled?: boolean;\n  target?: HTMLAttributeAnchorTarget;\n  LeftIcon?: ComponentType<SystemIcon.IconProps>;\n  RightIcon?: ComponentType<SystemIcon.IconProps>;\n  underline?: boolean;\n  backgroundColor?: string;\n  borderColor?: string;\n  color?: string;\n  width?: string;\n} & DetailedHTMLProps<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  HTMLAnchorElement\n>;\n\n/**\n * A link that looks like a button\n */\nconst LinkButton = ({\n  label,\n  LeftIcon,\n  RightIcon,\n  underline,\n  backgroundColor,\n  borderColor,\n  color,\n  width,\n  disabled,\n  target = \"_blank\",\n  ...linkProps\n}: LinkButtonProps) => {\n  const contentProps = {\n    label,\n    LeftIcon,\n    RightIcon,\n    underline,\n    backgroundColor,\n    borderColor,\n    color,\n    width,\n  };\n\n  return disabled ? (\n    <Content {...contentProps} />\n  ) : (\n    <Link {...linkProps} target={target}>\n      <Content {...contentProps} />\n    </Link>\n  );\n};\n\nexport default LinkButton;\n\ntype ContentProps = {\n  label: ReactNode;\n  LeftIcon?: ComponentType<SystemIcon.IconProps>;\n  RightIcon?: ComponentType<SystemIcon.IconProps>;\n  underline?: boolean;\n  backgroundColor?: string;\n  borderColor?: string;\n  color?: string;\n  width?: string;\n};\n\nconst Content = ({\n  label,\n  LeftIcon,\n  RightIcon,\n  underline,\n  backgroundColor,\n  borderColor,\n  color,\n  width,\n}: ContentProps) => (\n  <BaseButton\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  </BaseButton>\n);\n"]}

package/core/archive/LocationIcon.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Location } from "@grantbii/ui-core/location/enums";
-import { Flags, Icons } from "../atoms";
+import { Flags, SystemIcon } from "../atoms";
 const LocationIcon = ({ location, width }) => {
     if (location === Location.OTHERS || location === Location.UNKNOWN) {
-        return _jsx(Icons.GlobeIcon, { size: width });
+        return _jsx(SystemIcon.GlobeIcon, { size: width });
     }
     else {
         const Flag = LOCATION_FLAG_MAP[location] ?? Flags.EU;

package/core/archive/LocationIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"LocationIcon.js","sourceRoot":"","sources":["../../../core/archive/LocationIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAE5D,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAOxC,MAAM,YAAY,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAqB,EAAe,EAAE;IAC3E,IAAI,QAAQ,KAAK,QAAQ,CAAC,MAAM,IAAI,QAAQ,KAAK,QAAQ,CAAC,OAAO,EAAE,CAAC;QAClE,OAAO,KAAC,KAAK,CAAC,SAAS,IAAC,IAAI,EAAE,KAAK,GAAI,CAAC;IAC1C,CAAC;SAAM,CAAC;QACN,MAAM,IAAI,GAAG,iBAAiB,CAAC,QAAQ,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC;QACrD,OAAO,KAAC,IAAI,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC;IAChC,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAE5B,MAAM,iBAAiB,GAEnB;IACF,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,KAAK,CAAC,EAAE;IAC9B,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,KAAK,CAAC,EAAE;IAC9B,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,EAAE;IAC7B,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,EAAE;IAChC,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE;IAC1B,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE;IAC1B,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,EAAE;IACnC,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,EAAE;IAClC,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE;IAC3B,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,EAAE;CAC7B,CAAC","sourcesContent":["import { Location } from \"@grantbii/ui-core/location/enums\";\nimport type { JSX } from \"react\";\nimport { Flags, Icons } from \"../atoms\";\n\ntype LocationIconProps = {\n  location: Location;\n  width?: string | number;\n};\n\nconst LocationIcon = ({ location, width }: LocationIconProps): JSX.Element => {\n  if (location === Location.OTHERS || location === Location.UNKNOWN) {\n    return <Icons.GlobeIcon size={width} />;\n  } else {\n    const Flag = LOCATION_FLAG_MAP[location] ?? Flags.EU;\n    return <Flag width={width} />;\n  }\n};\n\nexport default LocationIcon;\n\nconst LOCATION_FLAG_MAP: {\n  [location in Location]: Flags.FlagComponent;\n} = {\n  [Location.SINGAPORE]: Flags.SG,\n  [Location.HONG_KONG]: Flags.HK,\n  [Location.MALAYSIA]: Flags.MY,\n  [Location.SOUTH_KOREA]: Flags.KR,\n  [Location.JAPAN]: Flags.JP,\n  [Location.CHINA]: Flags.CN,\n  [Location.UNITED_KINGDOM]: Flags.GB,\n  [Location.UNITED_STATES]: Flags.US,\n  [Location.OTHERS]: Flags.EU,\n  [Location.UNKNOWN]: Flags.EU,\n};\n"]}
+{"version":3,"file":"LocationIcon.js","sourceRoot":"","sources":["../../../core/archive/LocationIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAE5D,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAO7C,MAAM,YAAY,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAqB,EAAe,EAAE;IAC3E,IAAI,QAAQ,KAAK,QAAQ,CAAC,MAAM,IAAI,QAAQ,KAAK,QAAQ,CAAC,OAAO,EAAE,CAAC;QAClE,OAAO,KAAC,UAAU,CAAC,SAAS,IAAC,IAAI,EAAE,KAAK,GAAI,CAAC;IAC/C,CAAC;SAAM,CAAC;QACN,MAAM,IAAI,GAAG,iBAAiB,CAAC,QAAQ,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC;QACrD,OAAO,KAAC,IAAI,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC;IAChC,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAE5B,MAAM,iBAAiB,GAEnB;IACF,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,KAAK,CAAC,EAAE;IAC9B,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,KAAK,CAAC,EAAE;IAC9B,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,EAAE;IAC7B,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,EAAE;IAChC,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE;IAC1B,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE;IAC1B,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,EAAE;IACnC,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,EAAE;IAClC,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE;IAC3B,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,EAAE;CAC7B,CAAC","sourcesContent":["import { Location } from \"@grantbii/ui-core/location/enums\";\nimport type { JSX } from \"react\";\nimport { Flags, SystemIcon } from \"../atoms\";\n\ntype LocationIconProps = {\n  location: Location;\n  width?: string | number;\n};\n\nconst LocationIcon = ({ location, width }: LocationIconProps): JSX.Element => {\n  if (location === Location.OTHERS || location === Location.UNKNOWN) {\n    return <SystemIcon.GlobeIcon size={width} />;\n  } else {\n    const Flag = LOCATION_FLAG_MAP[location] ?? Flags.EU;\n    return <Flag width={width} />;\n  }\n};\n\nexport default LocationIcon;\n\nconst LOCATION_FLAG_MAP: {\n  [location in Location]: Flags.FlagComponent;\n} = {\n  [Location.SINGAPORE]: Flags.SG,\n  [Location.HONG_KONG]: Flags.HK,\n  [Location.MALAYSIA]: Flags.MY,\n  [Location.SOUTH_KOREA]: Flags.KR,\n  [Location.JAPAN]: Flags.JP,\n  [Location.CHINA]: Flags.CN,\n  [Location.UNITED_KINGDOM]: Flags.GB,\n  [Location.UNITED_STATES]: Flags.US,\n  [Location.OTHERS]: Flags.EU,\n  [Location.UNKNOWN]: Flags.EU,\n};\n"]}

package/core/atoms/Typography.d.ts

@@ -1,10 +1,34 @@
 import type { ScreenSize } from "../types";
-type FontSizes = {
-    [screenSize in ScreenSize]: string;
+type FontWeight = 400 | 500 | 700;
+type ResponsiveValue = Record<ScreenSize, string>;
+export declare const family: {
+    satoshi: string;
 };
-export declare const TITLE_FONT_SIZES: FontSizes;
-export declare const HEADER_FONT_SIZES: FontSizes;
-export declare const SUBHEADER_FONT_SIZES: FontSizes;
-export declare const BODY_FONT_SIZES: FontSizes;
-export declare const HELPER_FONT_SIZES: FontSizes;
+export declare const weight: {
+    [label: string]: FontWeight;
+};
+export type TextStyle = {
+    fontFamily: string;
+    fontWeight: FontWeight;
+    fontSize: ResponsiveValue;
+    lineHeight: ResponsiveValue;
+};
+export declare const heading1: TextStyle;
+export declare const heading2: TextStyle;
+export declare const heading3: TextStyle;
+export declare const subheading1Bold: TextStyle;
+export declare const subheading1Medium: TextStyle;
+export declare const subheading1Regular: TextStyle;
+export declare const subheading2Bold: TextStyle;
+export declare const subheading2Medium: TextStyle;
+export declare const subheading2Regular: TextStyle;
+export declare const bodyPrimaryBold: TextStyle;
+export declare const bodyPrimaryMedium: TextStyle;
+export declare const bodyPrimaryRegular: TextStyle;
+export declare const bodySecondaryBold: TextStyle;
+export declare const bodySecondaryMedium: TextStyle;
+export declare const bodySecondaryRegular: TextStyle;
+export declare const captionBold: TextStyle;
+export declare const captionMedium: TextStyle;
+export declare const captionRegular: TextStyle;
 export {};

package/core/atoms/Typography.js

@@ -1,21 +1,41 @@
-export const TITLE_FONT_SIZES = {
-    small: "22px",
-    large: "24px",
+const responsivePx = (desktopPx, mobilePx) => ({
+    small: `${mobilePx}px`,
+    large: `${desktopPx}px`,
+});
+const fixedPx = (px) => ({
+    small: `${px}px`,
+    large: `${px}px`,
+});
+export const family = {
+    satoshi: "Satoshi",
 };
-export const HEADER_FONT_SIZES = {
-    small: "20px",
-    large: "22px",
-};
-export const SUBHEADER_FONT_SIZES = {
-    small: "18px",
-    large: "20px",
-};
-export const BODY_FONT_SIZES = {
-    small: "14px",
-    large: "16px",
-};
-export const HELPER_FONT_SIZES = {
-    small: "12px",
-    large: "14px",
+export const weight = {
+    regular: 400,
+    medium: 500,
+    bold: 700,
 };
+const textStyle = (fontWeight, desktopFontSize, lineHeight, mobileFontSize = desktopFontSize - 2) => ({
+    fontFamily: family.satoshi,
+    fontWeight,
+    fontSize: responsivePx(desktopFontSize, mobileFontSize),
+    lineHeight: fixedPx(lineHeight),
+});
+export const heading1 = textStyle(weight.bold, 32, 43);
+export const heading2 = textStyle(weight.bold, 28, 38);
+export const heading3 = textStyle(weight.bold, 24, 32);
+export const subheading1Bold = textStyle(weight.bold, 20, 27);
+export const subheading1Medium = textStyle(weight.medium, 20, 27);
+export const subheading1Regular = textStyle(weight.regular, 20, 27);
+export const subheading2Bold = textStyle(weight.bold, 18, 24);
+export const subheading2Medium = textStyle(weight.medium, 18, 24);
+export const subheading2Regular = textStyle(weight.regular, 18, 24);
+export const bodyPrimaryBold = textStyle(weight.bold, 16, 22);
+export const bodyPrimaryMedium = textStyle(weight.medium, 16, 22);
+export const bodyPrimaryRegular = textStyle(weight.regular, 16, 22);
+export const bodySecondaryBold = textStyle(weight.bold, 14, 19);
+export const bodySecondaryMedium = textStyle(weight.medium, 14, 19);
+export const bodySecondaryRegular = textStyle(weight.regular, 14, 19);
+export const captionBold = textStyle(weight.bold, 12, 16, 12);
+export const captionMedium = textStyle(weight.medium, 12, 16, 12);
+export const captionRegular = textStyle(weight.regular, 12, 16, 12);
 //# sourceMappingURL=Typography.js.map

package/core/atoms/Typography.js.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../core/atoms/Typography.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,gBAAgB,GAAc;IACzC,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,MAAM;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAc;IAC1C,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,MAAM;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAc;IAC7C,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,MAAM;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAc;IACxC,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,MAAM;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAc;IAC1C,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,MAAM;CACd,CAAC","sourcesContent":["import type { ScreenSize } from \"../types\";\n\ntype FontSizes = { [screenSize in ScreenSize]: string };\n\nexport const TITLE_FONT_SIZES: FontSizes = {\n  small: \"22px\",\n  large: \"24px\",\n};\n\nexport const HEADER_FONT_SIZES: FontSizes = {\n  small: \"20px\",\n  large: \"22px\",\n};\n\nexport const SUBHEADER_FONT_SIZES: FontSizes = {\n  small: \"18px\",\n  large: \"20px\",\n};\n\nexport const BODY_FONT_SIZES: FontSizes = {\n  small: \"14px\",\n  large: \"16px\",\n};\n\nexport const HELPER_FONT_SIZES: FontSizes = {\n  small: \"12px\",\n  large: \"14px\",\n};\n"]}
+{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../core/atoms/Typography.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ScreenSize } from \"../types\";\n\ntype FontWeight = 400 | 500 | 700;\ntype ResponsiveValue = Record<ScreenSize, string>;\n\nconst responsivePx = (desktopPx: number, mobilePx: number): ResponsiveValue =>\n  ({\n    small: `${mobilePx}px`,\n    large: `${desktopPx}px`,\n  }) as const;\n\nconst fixedPx = (px: number): ResponsiveValue =>\n  ({\n    small: `${px}px`,\n    large: `${px}px`,\n  }) as const;\n\nexport const family = {\n  satoshi: \"Satoshi\",\n};\n\nexport const weight: { [label: string]: FontWeight } = {\n  regular: 400,\n  medium: 500,\n  bold: 700,\n};\n\nexport type TextStyle = {\n  fontFamily: string;\n  fontWeight: FontWeight;\n  fontSize: ResponsiveValue;\n  lineHeight: ResponsiveValue;\n};\n\nconst textStyle = (\n  fontWeight: FontWeight,\n  desktopFontSize: number,\n  lineHeight: number,\n  mobileFontSize: number = desktopFontSize - 2,\n): TextStyle => ({\n  fontFamily: family.satoshi,\n  fontWeight,\n  fontSize: responsivePx(desktopFontSize, mobileFontSize),\n  lineHeight: fixedPx(lineHeight),\n});\n\nexport const heading1 = textStyle(weight.bold, 32, 43);\nexport const heading2 = textStyle(weight.bold, 28, 38);\nexport const heading3 = textStyle(weight.bold, 24, 32);\n\nexport const subheading1Bold = textStyle(weight.bold, 20, 27);\nexport const subheading1Medium = textStyle(weight.medium, 20, 27);\nexport const subheading1Regular = textStyle(weight.regular, 20, 27);\n\nexport const subheading2Bold = textStyle(weight.bold, 18, 24);\nexport const subheading2Medium = textStyle(weight.medium, 18, 24);\nexport const subheading2Regular = textStyle(weight.regular, 18, 24);\n\nexport const bodyPrimaryBold = textStyle(weight.bold, 16, 22);\nexport const bodyPrimaryMedium = textStyle(weight.medium, 16, 22);\nexport const bodyPrimaryRegular = textStyle(weight.regular, 16, 22);\n\nexport const bodySecondaryBold = textStyle(weight.bold, 14, 19);\nexport const bodySecondaryMedium = textStyle(weight.medium, 14, 19);\nexport const bodySecondaryRegular = textStyle(weight.regular, 14, 19);\n\nexport const captionBold = textStyle(weight.bold, 12, 16, 12);\nexport const captionMedium = textStyle(weight.medium, 12, 16, 12);\nexport const captionRegular = textStyle(weight.regular, 12, 16, 12);\n"]}

package/core/atoms/index.d.ts

@@ -3,6 +3,6 @@ export * as Color from "./Color";
 export * as Loaders from "./Loader";
 export * as Responsive from "./Responsive";
 export * as Flags from "./RichIcon";
-export * as Icons from "./SystemIcon";
+export * as SystemIcon from "./SystemIcon";
 export * as Spacing from "./Spacing";
 export * as Typography from "./Typography";

package/core/atoms/index.js

@@ -3,7 +3,7 @@ export * as Color from "./Color";
 export * as Loaders from "./Loader";
 export * as Responsive from "./Responsive";
 export * as Flags from "./RichIcon";
-export * as Icons from "./SystemIcon";
+export * as SystemIcon from "./SystemIcon";
 export * as Spacing from "./Spacing";
 export * as Typography from "./Typography";
 //# sourceMappingURL=index.js.map

package/core/atoms/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,OAAO,KAAK,OAAO,MAAM,UAAU,CAAC;AACpC,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,KAAK,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,cAAc,CAAC;AACtC,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AACrC,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC","sourcesContent":["export { default as BrandLogo } from \"./BrandLogo\";\nexport * as Color from \"./Color\";\nexport * as Loaders from \"./Loader\";\nexport * as Responsive from \"./Responsive\";\nexport * as Flags from \"./RichIcon\";\nexport * as Icons from \"./SystemIcon\";\nexport * as Spacing from \"./Spacing\";\nexport * as Typography from \"./Typography\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,OAAO,KAAK,OAAO,MAAM,UAAU,CAAC;AACpC,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,KAAK,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AACrC,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC","sourcesContent":["export { default as BrandLogo } from \"./BrandLogo\";\nexport * as Color from \"./Color\";\nexport * as Loaders from \"./Loader\";\nexport * as Responsive from \"./Responsive\";\nexport * as Flags from \"./RichIcon\";\nexport * as SystemIcon from \"./SystemIcon\";\nexport * as Spacing from \"./Spacing\";\nexport * as Typography from \"./Typography\";\n"]}

package/core/global/GlobalStyle.js

@@ -1,6 +1,6 @@
 import { createGlobalStyle } from "styled-components";
 import "../assets/fonts/satoshi/css/satoshi.css";
-import { Color } from "../atoms";
+import { Color, Typography } from "../atoms";
 const GlobalStyle = createGlobalStyle `
   html,
   body {
@@ -8,9 +8,9 @@ const GlobalStyle = createGlobalStyle `
   }
 
   body {
-    color: ${Color.typography.blackHigh};
     background: ${Color.neutral.white};
-    font-family: Satoshi;
+    color: ${Color.typography.blackHigh};
+    font-family: ${Typography.family.satoshi};
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }

package/core/global/GlobalStyle.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalStyle.js","sourceRoot":"","sources":["../../../core/global/GlobalStyle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,yCAAyC,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,WAAW,GAAG,iBAAiB,CAAA;;;;;;;aAOxB,KAAK,CAAC,UAAU,CAAC,SAAS;kBACrB,KAAK,CAAC,OAAO,CAAC,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDpC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { createGlobalStyle } from \"styled-components\";\nimport \"../assets/fonts/satoshi/css/satoshi.css\";\nimport { Color } from \"../atoms\";\n\nconst GlobalStyle = createGlobalStyle`\n  html,\n  body {\n    max-width: 100vw;\n  }\n\n  body {\n    color: ${Color.typography.blackHigh};\n    background: ${Color.neutral.white};\n    font-family: Satoshi;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n\n  button,\n  fieldset,\n  textarea {\n    all: unset;\n  }\n\n  * {\n    box-sizing: border-box;\n    padding: 0;\n    margin: 0;\n  }\n\n  a {\n    color: inherit;\n    text-decoration: none;\n  }\n\n  button:hover {\n    cursor: pointer;\n  }\n\n  button:disabled {\n    cursor: not-allowed;\n  }\n\n  li {\n    list-style-position: inside;\n  }\n\n  li * {\n    vertical-align: middle;\n  }\n\n  /* number textfield in Chrome, Safari, Edge, Opera */\n  input::-webkit-outer-spin-button,\n  input::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  /* number textfield in Firefox */\n  input[type=\"number\"] {\n    -moz-appearance: textfield;\n    appearance: textfield;\n  }\n`;\n\nexport default GlobalStyle;\n"]}
+{"version":3,"file":"GlobalStyle.js","sourceRoot":"","sources":["../../../core/global/GlobalStyle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,yCAAyC,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,WAAW,GAAG,iBAAiB,CAAA;;;;;;;kBAOnB,KAAK,CAAC,OAAO,CAAC,KAAK;aACxB,KAAK,CAAC,UAAU,CAAC,SAAS;mBACpB,UAAU,CAAC,MAAM,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkD3C,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { createGlobalStyle } from \"styled-components\";\nimport \"../assets/fonts/satoshi/css/satoshi.css\";\nimport { Color, Typography } from \"../atoms\";\n\nconst GlobalStyle = createGlobalStyle`\n  html,\n  body {\n    max-width: 100vw;\n  }\n\n  body {\n    background: ${Color.neutral.white};\n    color: ${Color.typography.blackHigh};\n    font-family: ${Typography.family.satoshi};\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n\n  button,\n  fieldset,\n  textarea {\n    all: unset;\n  }\n\n  * {\n    box-sizing: border-box;\n    padding: 0;\n    margin: 0;\n  }\n\n  a {\n    color: inherit;\n    text-decoration: none;\n  }\n\n  button:hover {\n    cursor: pointer;\n  }\n\n  button:disabled {\n    cursor: not-allowed;\n  }\n\n  li {\n    list-style-position: inside;\n  }\n\n  li * {\n    vertical-align: middle;\n  }\n\n  /* number textfield in Chrome, Safari, Edge, Opera */\n  input::-webkit-outer-spin-button,\n  input::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  /* number textfield in Firefox */\n  input[type=\"number\"] {\n    -moz-appearance: textfield;\n    appearance: textfield;\n  }\n`;\n\nexport default GlobalStyle;\n"]}

package/core/integrations/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./fragments";
+export * from "./typography";
 export * from "./mappings";
 export { default as StyledComponentsRegistry } from "./registry";

package/core/integrations/index.js

@@ -1,4 +1,4 @@
-export * from "./fragments";
+export * from "./typography";
 export * from "./mappings";
 export { default as StyledComponentsRegistry } from "./registry";
 //# sourceMappingURL=index.js.map

package/core/integrations/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/integrations/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export * from \"./fragments\";\nexport * from \"./mappings\";\nexport { default as StyledComponentsRegistry } from \"./registry\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/integrations/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export * from \"./typography\";\nexport * from \"./mappings\";\nexport { default as StyledComponentsRegistry } from \"./registry\";\n"]}

package/core/integrations/typography.d.ts

@@ -0,0 +1,2 @@
+import type { TextStyle } from "../atoms/Typography";
+export declare const applyTypography: (style: TextStyle) => import("styled-components").RuleSet<object>;

package/core/integrations/typography.js

@@ -0,0 +1,17 @@
+import { css } from "styled-components";
+import { WIDTH_BREAKPOINTS } from "../atoms/Responsive";
+export const applyTypography = (style) => css `
+  font-family: ${style.fontFamily};
+  font-weight: ${style.fontWeight};
+
+  @media (width < ${WIDTH_BREAKPOINTS.laptop}) {
+    font-size: ${style.fontSize.small};
+    line-height: ${style.lineHeight.small};
+  }
+
+  @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {
+    font-size: ${style.fontSize.large};
+    line-height: ${style.lineHeight.large};
+  }
+`;
+//# sourceMappingURL=typography.js.map

package/core/integrations/typography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.js","sourceRoot":"","sources":["../../../core/integrations/typography.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAGxD,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAgB,EAAE,EAAE,CAAC,GAAG,CAAA;iBACvC,KAAK,CAAC,UAAU;iBAChB,KAAK,CAAC,UAAU;;oBAEb,iBAAiB,CAAC,MAAM;iBAC3B,KAAK,CAAC,QAAQ,CAAC,KAAK;mBAClB,KAAK,CAAC,UAAU,CAAC,KAAK;;;qBAGpB,iBAAiB,CAAC,MAAM;iBAC5B,KAAK,CAAC,QAAQ,CAAC,KAAK;mBAClB,KAAK,CAAC,UAAU,CAAC,KAAK;;CAExC,CAAC","sourcesContent":["import { css } from \"styled-components\";\nimport { WIDTH_BREAKPOINTS } from \"../atoms/Responsive\";\nimport type { TextStyle } from \"../atoms/Typography\";\n\nexport const applyTypography = (style: TextStyle) => css`\n  font-family: ${style.fontFamily};\n  font-weight: ${style.fontWeight};\n\n  @media (width < ${WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${style.fontSize.small};\n    line-height: ${style.lineHeight.small};\n  }\n\n  @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${style.fontSize.large};\n    line-height: ${style.lineHeight.large};\n  }\n`;\n"]}

package/core/molecules/Badge.d.ts

@@ -1,10 +1,10 @@
 import type { ComponentType, MouseEventHandler, ReactNode } from "react";
-import { Icons } from "../atoms";
+import { SystemIcon } from "../atoms";
 export type BadgeProps = {
     label: ReactNode;
-    Icon?: ComponentType<Icons.IconProps>;
+    Icon?: ComponentType<SystemIcon.IconProps>;
     iconSize?: string | number;
-    iconWeight?: Icons.IconWeight;
+    iconWeight?: SystemIcon.IconWeight;
     onClick?: MouseEventHandler<HTMLDivElement>;
     onClickClose?: MouseEventHandler<HTMLButtonElement>;
     labelWidthPixels?: number;

package/core/molecules/Badge.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
-import { Color, Icons, Responsive } from "../atoms";
-import { HelperFontSize } from "../integrations";
+import { Color, SystemIcon, Responsive, Typography } from "../atoms";
+import { applyTypography } from "../integrations";
 const Badge = ({ label, Icon, iconSize = 20, iconWeight = "regular", onClick, onClickClose, labelWidthPixels, backgroundColor, color, }) => (_jsxs(BaseBadge, { onClick: onClick, "$clickable": !!onClick, "$backgroundColor": backgroundColor, "$color": color, children: [_jsxs(BadgeContent, { "$closeable": !!onClickClose, "$widthPixels": labelWidthPixels, children: [Icon ? (_jsx(IconContainer, { children: _jsx(Icon, { color: color, size: iconSize, weight: iconWeight }) })) : (_jsx(_Fragment, {})), _jsx(BadgeLabel, { children: label })] }), onClickClose ? _jsx(CloseButton, { onClick: onClickClose }) : _jsx(_Fragment, {})] }));
 export default Badge;
 const BaseBadge = styled.div `
@@ -47,11 +47,9 @@ const BadgeLabel = styled.div `
   white-space: nowrap;
   text-overflow: ellipsis;
 
-  font-weight: 500;
-
-  ${HelperFontSize}
+  ${applyTypography(Typography.bodySecondaryMedium)}
 `;
-const CloseButton = ({ onClick }) => (_jsx(BaseCloseButton, { type: "button", onClick: onClick, children: _jsx(Icons.XIcon, { size: 12 }) }));
+const CloseButton = ({ onClick }) => (_jsx(BaseCloseButton, { type: "button", onClick: onClick, children: _jsx(SystemIcon.XIcon, { size: 12 }) }));
 const BaseCloseButton = styled.button `
   display: flex;
   flex-direction: column;

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,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACpD,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,KAAK,CAAC,UAAU,CAAC,SAAS,EAAE,EAAE,EAAE,CAAC,MAAM;sBACxC,CAAC,EAAE,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,EAAE,CACjE,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 { Color, Icons, Responsive } from \"../atoms\";\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 = Color.typography.blackHigh }) => $color};\n  background-color: ${({ $backgroundColor = Color.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"]}
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../core/molecules/Badge.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAclD,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,KAAK,CAAC,UAAU,CAAC,SAAS,EAAE,EAAE,EAAE,CAAC,MAAM;sBACxC,CAAC,EAAE,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,EAAE,CACjE,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;;;;;IAKzB,eAAe,CAAC,UAAU,CAAC,mBAAmB,CAAC;CAClD,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,UAAU,CAAC,KAAK,IAAC,IAAI,EAAE,EAAE,GAAI,GACd,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, SystemIcon, Responsive, Typography } from \"../atoms\";\nimport { applyTypography } from \"../integrations\";\n\nexport type BadgeProps = {\n  label: ReactNode;\n  Icon?: ComponentType<SystemIcon.IconProps>;\n  iconSize?: string | number;\n  iconWeight?: SystemIcon.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 = Color.typography.blackHigh }) => $color};\n  background-color: ${({ $backgroundColor = Color.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  ${applyTypography(Typography.bodySecondaryMedium)}\n`;\n\ntype CloseButtonProps = {\n  onClick: MouseEventHandler<HTMLButtonElement>;\n};\n\nconst CloseButton = ({ onClick }: CloseButtonProps) => (\n  <BaseCloseButton type=\"button\" onClick={onClick}>\n    <SystemIcon.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/molecules/Button.d.ts

@@ -1,9 +1,9 @@
 import type { ButtonHTMLAttributes, DetailedHTMLProps, ReactNode } from "react";
-import { Icons } from "../atoms";
+import { SystemIcon } from "../atoms";
 type ButtonProps = {
     label: ReactNode;
-    LeftIcon?: Icons.Icon;
-    RightIcon?: Icons.Icon;
+    LeftIcon?: SystemIcon.Icon;
+    RightIcon?: SystemIcon.Icon;
     underline?: boolean;
     backgroundColor?: string;
     borderColor?: string;

package/core/molecules/Button.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
-import { Icons } from "../atoms";
+import { SystemIcon } from "../atoms";
 import { BaseButton as ButtonContent } from "../shared";
 const Button = ({ label, LeftIcon, RightIcon, underline, backgroundColor, borderColor, color, width, type = "button", ...buttonProps }) => (_jsx(BaseButton, { ...buttonProps, type: type, "$width": width, children: _jsxs(ButtonContent, { "$underline": underline, "$backgroundColor": backgroundColor, "$borderColor": borderColor, "$color": color, "$width": width, children: [LeftIcon ? _jsx(LeftIcon, { color: color, size: 20 }) : _jsx(_Fragment, {}), label, RightIcon ? _jsx(RightIcon, { color: color, size: 20 }) : _jsx(_Fragment, {})] }) }));
 export default Button;

package/core/molecules/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../core/molecules/Button.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,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 \"../atoms\";\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"]}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../core/molecules/Button.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,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 { SystemIcon } from \"../atoms\";\nimport { BaseButton as ButtonContent } from \"../shared\";\n\ntype ButtonProps = {\n  label: ReactNode;\n  LeftIcon?: SystemIcon.Icon;\n  RightIcon?: SystemIcon.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/molecules/PageLoader.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { MoonLoader, PacmanLoader } from "react-spinners";
 import styled from "styled-components";
-import { Color } from "../atoms";
-import { HelperFontSize } from "../integrations";
+import { Color, Spacing, Typography } from "../atoms";
+import { applyTypography } from "../integrations";
 /**
  * The animation to show when loading the whole page
  */
@@ -23,6 +23,10 @@ const Text = styled.div `
   flex-direction: column;
   align-items: center;
   gap: 8px;
+
+  margin: 0px ${Spacing.px32};
+
+  text-align: center;
 `;
 const LoadingText = styled.p `
   font-weight: 500;
@@ -30,6 +34,6 @@ const LoadingText = styled.p `
 const Tip = styled.p `
   color: ${Color.typography.blackMedium};
 
-  ${HelperFontSize}
+  ${applyTypography(Typography.bodySecondaryRegular)}
 `;
 //# sourceMappingURL=PageLoader.js.map

package/core/molecules/PageLoader.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageLoader.js","sourceRoot":"","sources":["../../../core/molecules/PageLoader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAQjD;;GAEG;AACH,MAAM,UAAU,GAAG,CAAC,EAClB,WAAW,EACX,GAAG,EACH,MAAM,GAAG,KAAK,EACd,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,EAC1B,IAAI,EACJ,GAAG,WAAW,EACE,EAAE,EAAE,CAAC,CACrB,MAAC,UAAU,eACR,MAAM,CAAC,CAAC,CAAC,CACR,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAM,WAAW,GAAI,CACxE,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAM,WAAW,GAAI,CACtE,EAEA,WAAW,IAAI,GAAG,CAAC,CAAC,CAAC,CACpB,MAAC,IAAI,eACF,WAAW,CAAC,CAAC,CAAC,KAAC,WAAW,cAAE,WAAW,GAAe,CAAC,CAAC,CAAC,mBAAK,EAC9D,GAAG,CAAC,CAAC,CAAC,KAAC,GAAG,cAAE,GAAG,GAAO,CAAC,CAAC,CAAC,mBAAK,IAC1B,CACR,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACU,CACd,CAAC;AAEF,eAAe,UAAU,CAAC;AAE1B,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;CAS5B,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKtB,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAAA;;CAE3B,CAAC;AAEF,MAAM,GAAG,GAAG,MAAM,CAAC,CAAC,CAAA;WACT,KAAK,CAAC,UAAU,CAAC,WAAW;;IAEnC,cAAc;CACjB,CAAC","sourcesContent":["import { MoonLoader, PacmanLoader } from \"react-spinners\";\nimport type { LoaderSizeMarginProps } from \"react-spinners/helpers/props\";\nimport styled from \"styled-components\";\nimport { Color } from \"../atoms\";\nimport { HelperFontSize } from \"../integrations\";\n\ntype PageLoaderProps = {\n  pacman?: boolean;\n  loadingText?: string;\n  tip?: string;\n} & LoaderSizeMarginProps;\n\n/**\n * The animation to show when loading the whole page\n */\nconst PageLoader = ({\n  loadingText,\n  tip,\n  pacman = false,\n  color = Color.accent.blue1,\n  size,\n  ...restOfProps\n}: PageLoaderProps) => (\n  <Background>\n    {pacman ? (\n      <PacmanLoader color={color} size={size ? size : 20} {...restOfProps} />\n    ) : (\n      <MoonLoader color={color} size={size ? size : 32} {...restOfProps} />\n    )}\n\n    {loadingText || tip ? (\n      <Text>\n        {loadingText ? <LoadingText>{loadingText}</LoadingText> : <></>}\n        {tip ? <Tip>{tip}</Tip> : <></>}\n      </Text>\n    ) : (\n      <></>\n    )}\n  </Background>\n);\n\nexport default PageLoader;\n\nconst Background = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 20px;\n\n  width: 100%;\n  height: 100%;\n`;\n\nconst Text = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n`;\n\nconst LoadingText = styled.p`\n  font-weight: 500;\n`;\n\nconst Tip = styled.p`\n  color: ${Color.typography.blackMedium};\n\n  ${HelperFontSize}\n`;\n"]}
+{"version":3,"file":"PageLoader.js","sourceRoot":"","sources":["../../../core/molecules/PageLoader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAQlD;;GAEG;AACH,MAAM,UAAU,GAAG,CAAC,EAClB,WAAW,EACX,GAAG,EACH,MAAM,GAAG,KAAK,EACd,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,EAC1B,IAAI,EACJ,GAAG,WAAW,EACE,EAAE,EAAE,CAAC,CACrB,MAAC,UAAU,eACR,MAAM,CAAC,CAAC,CAAC,CACR,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAM,WAAW,GAAI,CACxE,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAM,WAAW,GAAI,CACtE,EAEA,WAAW,IAAI,GAAG,CAAC,CAAC,CAAC,CACpB,MAAC,IAAI,eACF,WAAW,CAAC,CAAC,CAAC,KAAC,WAAW,cAAE,WAAW,GAAe,CAAC,CAAC,CAAC,mBAAK,EAC9D,GAAG,CAAC,CAAC,CAAC,KAAC,GAAG,cAAE,GAAG,GAAO,CAAC,CAAC,CAAC,mBAAK,IAC1B,CACR,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACU,CACd,CAAC;AAEF,eAAe,UAAU,CAAC;AAE1B,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;CAS5B,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;gBAMP,OAAO,CAAC,IAAI;;;CAG3B,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAAA;;CAE3B,CAAC;AAEF,MAAM,GAAG,GAAG,MAAM,CAAC,CAAC,CAAA;WACT,KAAK,CAAC,UAAU,CAAC,WAAW;;IAEnC,eAAe,CAAC,UAAU,CAAC,oBAAoB,CAAC;CACnD,CAAC","sourcesContent":["import { MoonLoader, PacmanLoader } from \"react-spinners\";\nimport type { LoaderSizeMarginProps } from \"react-spinners/helpers/props\";\nimport styled from \"styled-components\";\nimport { Color, Spacing, Typography } from \"../atoms\";\nimport { applyTypography } from \"../integrations\";\n\ntype PageLoaderProps = {\n  pacman?: boolean;\n  loadingText?: string;\n  tip?: string;\n} & LoaderSizeMarginProps;\n\n/**\n * The animation to show when loading the whole page\n */\nconst PageLoader = ({\n  loadingText,\n  tip,\n  pacman = false,\n  color = Color.accent.blue1,\n  size,\n  ...restOfProps\n}: PageLoaderProps) => (\n  <Background>\n    {pacman ? (\n      <PacmanLoader color={color} size={size ? size : 20} {...restOfProps} />\n    ) : (\n      <MoonLoader color={color} size={size ? size : 32} {...restOfProps} />\n    )}\n\n    {loadingText || tip ? (\n      <Text>\n        {loadingText ? <LoadingText>{loadingText}</LoadingText> : <></>}\n        {tip ? <Tip>{tip}</Tip> : <></>}\n      </Text>\n    ) : (\n      <></>\n    )}\n  </Background>\n);\n\nexport default PageLoader;\n\nconst Background = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 20px;\n\n  width: 100%;\n  height: 100%;\n`;\n\nconst Text = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n\n  margin: 0px ${Spacing.px32};\n\n  text-align: center;\n`;\n\nconst LoadingText = styled.p`\n  font-weight: 500;\n`;\n\nconst Tip = styled.p`\n  color: ${Color.typography.blackMedium};\n\n  ${applyTypography(Typography.bodySecondaryRegular)}\n`;\n"]}

package/core/organisms/FileDrop.js

@@ -3,8 +3,8 @@ import { useState } from "react";
 import { useDropzone } from "react-dropzone";
 import styled from "styled-components";
 import Badges from "../archive/Badges";
-import { Color, Icons } from "../atoms";
-import { BodyFontSize, HelperFontSize } from "../integrations";
+import { Color, SystemIcon, Typography } from "../atoms";
+import { applyTypography } from "../integrations";
 import { FILE_TYPE_ICON_MAP } from "../shared";
 const DEFAULT_MAX_FILE_SIZE_MB = 5;
 const DEFAULT_MAX_FILES = 5;
@@ -41,7 +41,7 @@ const Dropzone = styled.div `
     cursor: ${({ $reachedMaxUploads }) => $reachedMaxUploads ? "not-allowed" : "pointer"};
   }
 `;
-const DropzoneContent = ({ maxFiles, maxSizeMB }) => (_jsxs(BaseDropzoneContent, { children: [_jsx(Icons.FileDashedIcon, { weight: "thin", size: 48, color: Color.neutral.grey1 }), _jsxs(AllDropzoneText, { children: [_jsx(DropzoneText, { children: `Drop up to ${maxFiles} files here (up to ${maxSizeMB}MB each)` }), _jsx(DropzoneSubtitle, { "$isHighlighted": true, children: "or click to browse with your file explorer" }), _jsx(DropzoneSubtitle, { children: "Accepted file formats: pdf, png, jpg" })] })] }));
+const DropzoneContent = ({ maxFiles, maxSizeMB }) => (_jsxs(BaseDropzoneContent, { children: [_jsx(SystemIcon.FileDashedIcon, { weight: "thin", size: 48, color: Color.neutral.grey1 }), _jsxs(AllDropzoneText, { children: [_jsx(DropzoneText, { children: `Drop up to ${maxFiles} files here (up to ${maxSizeMB}MB each)` }), _jsx(DropzoneSubtitle, { "$isHighlighted": true, children: "or click to browse with your file explorer" }), _jsx(DropzoneSubtitle, { children: "Accepted file formats: pdf, png, jpg" })] })] }));
 const BaseDropzoneContent = styled.div `
   display: flex;
   flex-direction: column;
@@ -56,18 +56,14 @@ const AllDropzoneText = styled.div `
 const DropzoneText = styled.p `
   text-align: center;
 
-  font-weight: 500;
-
-  ${BodyFontSize}
+  ${applyTypography(Typography.bodyPrimaryMedium)}
 `;
 const DropzoneSubtitle = styled.p `
   text-align: center;
 
-  font-weight: 400;
-
   color: ${({ $isHighlighted = false }) => $isHighlighted ? Color.accent.yellow1 : Color.typography.blackLow};
 
-  ${HelperFontSize}
+  ${applyTypography(Typography.bodySecondaryRegular)}
 `;
 const ErrorMessage = styled.p `
   color: ${Color.accent.red1};
@@ -76,7 +72,7 @@ const UploadedFiles = ({ uploadedFiles, removeFile }) => {
     const fileBadgesProps = uploadedFiles.map(({ name: fileName, type: fileType }) => ({
         label: getFileNameWithoutExtension(fileName),
         onClickClose: () => removeFile(fileName),
-        Icon: FILE_TYPE_ICON_MAP[fileType] ?? Icons.FileIcon,
+        Icon: FILE_TYPE_ICON_MAP[fileType] ?? SystemIcon.FileIcon,
     }));
     return _jsx(Badges, { allBadgeProps: fileBadgesProps, vertical: true });
 };

package/core/organisms/FileDrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileDrop.js","sourceRoot":"","sources":["../../../core/organisms/FileDrop.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from \"react\";\nimport { useDropzone } from \"react-dropzone\";\nimport styled from \"styled-components\";\nimport Badges from \"../archive/Badges\";\nimport { Color, Icons } from \"../atoms\";\nimport { BodyFontSize, HelperFontSize } from \"../integrations\";\nimport { FILE_TYPE_ICON_MAP } from \"../shared\";\n\nconst DEFAULT_MAX_FILE_SIZE_MB = 5;\nconst DEFAULT_MAX_FILES = 5;\n\ntype FileDropzoneProps = {\n  uploadedFiles: File[];\n  uploadFiles: (acceptedFiles: File[]) => void;\n  removeFile: (fileName: string) => void;\n  errorMessage?: string;\n  maxFiles?: number;\n  maxSizeMB?: number;\n};\n\nconst FileDrop = ({\n  uploadedFiles,\n  uploadFiles,\n  removeFile,\n  errorMessage,\n  maxFiles = DEFAULT_MAX_FILES,\n  maxSizeMB = DEFAULT_MAX_FILE_SIZE_MB,\n}: FileDropzoneProps) => {\n  const reachedMaxUploads = uploadedFiles.length >= maxFiles;\n\n  const { getInputProps, getRootProps } = useDropzone({\n    onDrop: uploadFiles,\n    accept: {\n      \"application/pdf\": [\".pdf\"],\n      \"image/jpeg\": [\".jpeg\", \".jpg\"],\n      \"image/png\": [\".png\"],\n    },\n    disabled: reachedMaxUploads,\n    noClick: reachedMaxUploads,\n    noDrag: reachedMaxUploads,\n    multiple: true,\n  });\n\n  return (\n    <BaseFileDrop>\n      <Dropzone\n        {...getRootProps()}\n        $reachedMaxUploads={reachedMaxUploads}\n        $hasError={!!errorMessage}\n      >\n        <input {...getInputProps()} type=\"file\" />\n        <DropzoneContent maxFiles={maxFiles} maxSizeMB={maxSizeMB} />\n      </Dropzone>\n\n      {errorMessage ? <ErrorMessage>{errorMessage}</ErrorMessage> : <></>}\n\n      <UploadedFiles uploadedFiles={uploadedFiles} removeFile={removeFile} />\n    </BaseFileDrop>\n  );\n};\n\nexport default FileDrop;\n\nconst BaseFileDrop = styled.div`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n`;\n\nconst Dropzone = styled.div<{\n  $reachedMaxUploads: boolean;\n  $hasError: boolean;\n}>`\n  padding: 40px;\n  border-radius: 8px;\n  border: 1px solid\n    ${({ $hasError }) => ($hasError ? Color.accent.red1 : Color.neutral.grey3)};\n\n  &:hover {\n    cursor: ${({ $reachedMaxUploads }) =>\n      $reachedMaxUploads ? \"not-allowed\" : \"pointer\"};\n  }\n`;\n\ntype DropzoneContentProps = {\n  maxFiles: number;\n  maxSizeMB: number;\n};\n\nconst DropzoneContent = ({ maxFiles, maxSizeMB }: DropzoneContentProps) => (\n  <BaseDropzoneContent>\n    <Icons.FileDashedIcon weight=\"thin\" size={48} color={Color.neutral.grey1} />\n    <AllDropzoneText>\n      <DropzoneText>\n        {`Drop up to ${maxFiles} files here (up to ${maxSizeMB}MB each)`}\n      </DropzoneText>\n\n      <DropzoneSubtitle $isHighlighted>\n        or click to browse with your file explorer\n      </DropzoneSubtitle>\n\n      <DropzoneSubtitle>Accepted file formats: pdf, png, jpg</DropzoneSubtitle>\n    </AllDropzoneText>\n  </BaseDropzoneContent>\n);\n\nconst BaseDropzoneContent = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  align-items: center;\n`;\n\nconst AllDropzoneText = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n`;\n\nconst DropzoneText = styled.p`\n  text-align: center;\n\n  font-weight: 500;\n\n  ${BodyFontSize}\n`;\n\nconst DropzoneSubtitle = styled.p<{ $isHighlighted?: boolean }>`\n  text-align: center;\n\n  font-weight: 400;\n\n  color: ${({ $isHighlighted = false }) =>\n    $isHighlighted ? Color.accent.yellow1 : Color.typography.blackLow};\n\n  ${HelperFontSize}\n`;\n\nconst ErrorMessage = styled.p`\n  color: ${Color.accent.red1};\n`;\n\ntype UploadedFilesProps = {\n  uploadedFiles: File[];\n  removeFile: (fileName: string) => void;\n};\n\nconst UploadedFiles = ({ uploadedFiles, removeFile }: UploadedFilesProps) => {\n  const fileBadgesProps = uploadedFiles.map(\n    ({ name: fileName, type: fileType }) => ({\n      label: getFileNameWithoutExtension(fileName),\n      onClickClose: () => removeFile(fileName),\n      Icon: FILE_TYPE_ICON_MAP[fileType] ?? Icons.FileIcon,\n    }),\n  );\n\n  return <Badges allBadgeProps={fileBadgesProps} vertical />;\n};\n\nexport const useFileDrop = (\n  initialFiles: File[] = [],\n  maxFiles: number = DEFAULT_MAX_FILES,\n  maxSizeMB: number = DEFAULT_MAX_FILE_SIZE_MB,\n) => {\n  const [files, setFiles] = useState<File[]>(() => initialFiles);\n  const [errorMessage, setErrorMessage] = useState<string | undefined>();\n\n  const uploadFiles = (acceptedFiles: File[]) => {\n    if (files.length + acceptedFiles.length > maxFiles) {\n      setErrorMessage(() => `Maximum upload limit is ${maxFiles} files`);\n    } else if (anyFileTooLarge(acceptedFiles, maxSizeMB)) {\n      setErrorMessage(() => `Maximum file size is ${maxSizeMB}MB`);\n    } else {\n      setErrorMessage(() => undefined);\n      setFiles((previousFiles) =>\n        combineFilesWithoutDuplicates(previousFiles, acceptedFiles),\n      );\n    }\n  };\n\n  const removeFile = (fileName: string) => {\n    setErrorMessage(() => undefined);\n    setFiles((previousFiles) => filterFilesByName(previousFiles, fileName));\n  };\n\n  return {\n    files,\n    uploadFiles,\n    removeFile,\n    errorMessage,\n  };\n};\n\nconst anyFileTooLarge = (files: File[], maxSizeMB: number): boolean =>\n  files.some((file) => file.size > convertMegabytesToBytes(maxSizeMB));\n\nconst convertMegabytesToBytes = (megabytes: number): number =>\n  megabytes * 1024 * 1024;\n\nconst combineFilesWithoutDuplicates = (\n  oldFiles: File[],\n  newFiles: File[],\n): File[] => {\n  const newFileNames = newFiles.map((file) => file.name);\n  const keptOldFiles = oldFiles.filter(\n    (oldFile) => !newFileNames.includes(oldFile.name),\n  );\n\n  return [...keptOldFiles, ...newFiles];\n};\n\nconst filterFilesByName = (files: File[], fileName: string): File[] =>\n  files.filter((file) => file.name !== fileName);\n\nconst getFileNameWithoutExtension = (fileName: string): string =>\n  fileName.substring(0, fileName.lastIndexOf(\".\"));\n"]}
+{"version":3,"file":"FileDrop.js","sourceRoot":"","sources":["../../../core/organisms/FileDrop.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from \"react\";\nimport { useDropzone } from \"react-dropzone\";\nimport styled from \"styled-components\";\nimport Badges from \"../archive/Badges\";\nimport { Color, SystemIcon, Typography } from \"../atoms\";\nimport { applyTypography } from \"../integrations\";\nimport { FILE_TYPE_ICON_MAP } from \"../shared\";\n\nconst DEFAULT_MAX_FILE_SIZE_MB = 5;\nconst DEFAULT_MAX_FILES = 5;\n\ntype FileDropzoneProps = {\n  uploadedFiles: File[];\n  uploadFiles: (acceptedFiles: File[]) => void;\n  removeFile: (fileName: string) => void;\n  errorMessage?: string;\n  maxFiles?: number;\n  maxSizeMB?: number;\n};\n\nconst FileDrop = ({\n  uploadedFiles,\n  uploadFiles,\n  removeFile,\n  errorMessage,\n  maxFiles = DEFAULT_MAX_FILES,\n  maxSizeMB = DEFAULT_MAX_FILE_SIZE_MB,\n}: FileDropzoneProps) => {\n  const reachedMaxUploads = uploadedFiles.length >= maxFiles;\n\n  const { getInputProps, getRootProps } = useDropzone({\n    onDrop: uploadFiles,\n    accept: {\n      \"application/pdf\": [\".pdf\"],\n      \"image/jpeg\": [\".jpeg\", \".jpg\"],\n      \"image/png\": [\".png\"],\n    },\n    disabled: reachedMaxUploads,\n    noClick: reachedMaxUploads,\n    noDrag: reachedMaxUploads,\n    multiple: true,\n  });\n\n  return (\n    <BaseFileDrop>\n      <Dropzone\n        {...getRootProps()}\n        $reachedMaxUploads={reachedMaxUploads}\n        $hasError={!!errorMessage}\n      >\n        <input {...getInputProps()} type=\"file\" />\n        <DropzoneContent maxFiles={maxFiles} maxSizeMB={maxSizeMB} />\n      </Dropzone>\n\n      {errorMessage ? <ErrorMessage>{errorMessage}</ErrorMessage> : <></>}\n\n      <UploadedFiles uploadedFiles={uploadedFiles} removeFile={removeFile} />\n    </BaseFileDrop>\n  );\n};\n\nexport default FileDrop;\n\nconst BaseFileDrop = styled.div`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n`;\n\nconst Dropzone = styled.div<{\n  $reachedMaxUploads: boolean;\n  $hasError: boolean;\n}>`\n  padding: 40px;\n  border-radius: 8px;\n  border: 1px solid\n    ${({ $hasError }) => ($hasError ? Color.accent.red1 : Color.neutral.grey3)};\n\n  &:hover {\n    cursor: ${({ $reachedMaxUploads }) =>\n      $reachedMaxUploads ? \"not-allowed\" : \"pointer\"};\n  }\n`;\n\ntype DropzoneContentProps = {\n  maxFiles: number;\n  maxSizeMB: number;\n};\n\nconst DropzoneContent = ({ maxFiles, maxSizeMB }: DropzoneContentProps) => (\n  <BaseDropzoneContent>\n    <SystemIcon.FileDashedIcon\n      weight=\"thin\"\n      size={48}\n      color={Color.neutral.grey1}\n    />\n    <AllDropzoneText>\n      <DropzoneText>\n        {`Drop up to ${maxFiles} files here (up to ${maxSizeMB}MB each)`}\n      </DropzoneText>\n\n      <DropzoneSubtitle $isHighlighted>\n        or click to browse with your file explorer\n      </DropzoneSubtitle>\n\n      <DropzoneSubtitle>Accepted file formats: pdf, png, jpg</DropzoneSubtitle>\n    </AllDropzoneText>\n  </BaseDropzoneContent>\n);\n\nconst BaseDropzoneContent = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  align-items: center;\n`;\n\nconst AllDropzoneText = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n`;\n\nconst DropzoneText = styled.p`\n  text-align: center;\n\n  ${applyTypography(Typography.bodyPrimaryMedium)}\n`;\n\nconst DropzoneSubtitle = styled.p<{ $isHighlighted?: boolean }>`\n  text-align: center;\n\n  color: ${({ $isHighlighted = false }) =>\n    $isHighlighted ? Color.accent.yellow1 : Color.typography.blackLow};\n\n  ${applyTypography(Typography.bodySecondaryRegular)}\n`;\n\nconst ErrorMessage = styled.p`\n  color: ${Color.accent.red1};\n`;\n\ntype UploadedFilesProps = {\n  uploadedFiles: File[];\n  removeFile: (fileName: string) => void;\n};\n\nconst UploadedFiles = ({ uploadedFiles, removeFile }: UploadedFilesProps) => {\n  const fileBadgesProps = uploadedFiles.map(\n    ({ name: fileName, type: fileType }) => ({\n      label: getFileNameWithoutExtension(fileName),\n      onClickClose: () => removeFile(fileName),\n      Icon: FILE_TYPE_ICON_MAP[fileType] ?? SystemIcon.FileIcon,\n    }),\n  );\n\n  return <Badges allBadgeProps={fileBadgesProps} vertical />;\n};\n\nexport const useFileDrop = (\n  initialFiles: File[] = [],\n  maxFiles: number = DEFAULT_MAX_FILES,\n  maxSizeMB: number = DEFAULT_MAX_FILE_SIZE_MB,\n) => {\n  const [files, setFiles] = useState<File[]>(() => initialFiles);\n  const [errorMessage, setErrorMessage] = useState<string | undefined>();\n\n  const uploadFiles = (acceptedFiles: File[]) => {\n    if (files.length + acceptedFiles.length > maxFiles) {\n      setErrorMessage(() => `Maximum upload limit is ${maxFiles} files`);\n    } else if (anyFileTooLarge(acceptedFiles, maxSizeMB)) {\n      setErrorMessage(() => `Maximum file size is ${maxSizeMB}MB`);\n    } else {\n      setErrorMessage(() => undefined);\n      setFiles((previousFiles) =>\n        combineFilesWithoutDuplicates(previousFiles, acceptedFiles),\n      );\n    }\n  };\n\n  const removeFile = (fileName: string) => {\n    setErrorMessage(() => undefined);\n    setFiles((previousFiles) => filterFilesByName(previousFiles, fileName));\n  };\n\n  return {\n    files,\n    uploadFiles,\n    removeFile,\n    errorMessage,\n  };\n};\n\nconst anyFileTooLarge = (files: File[], maxSizeMB: number): boolean =>\n  files.some((file) => file.size > convertMegabytesToBytes(maxSizeMB));\n\nconst convertMegabytesToBytes = (megabytes: number): number =>\n  megabytes * 1024 * 1024;\n\nconst combineFilesWithoutDuplicates = (\n  oldFiles: File[],\n  newFiles: File[],\n): File[] => {\n  const newFileNames = newFiles.map((file) => file.name);\n  const keptOldFiles = oldFiles.filter(\n    (oldFile) => !newFileNames.includes(oldFile.name),\n  );\n\n  return [...keptOldFiles, ...newFiles];\n};\n\nconst filterFilesByName = (files: File[], fileName: string): File[] =>\n  files.filter((file) => file.name !== fileName);\n\nconst getFileNameWithoutExtension = (fileName: string): string =>\n  fileName.substring(0, fileName.lastIndexOf(\".\"));\n"]}

package/core/organisms/GrantMatch/ActiveQueryFiles.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
-import { Color, Icons } from "../../atoms";
+import { Color, SystemIcon } from "../../atoms";
 import { Badge, Button } from "../../molecules";
 import { FILE_TYPE_ICON_MAP } from "../../shared";
 import { useGrantMatchContext } from "./context";
@@ -20,7 +20,7 @@ const FileBadges = () => {
         };
         updateActiveQuery(newQuery);
     };
-    return (_jsx(BaseFileBadges, { children: activeQuery.files.map((file) => (_jsx(Badge, { label: file.name.substring(0, file.name.lastIndexOf(".")), Icon: FILE_TYPE_ICON_MAP[file.type] ?? Icons.FileIcon, onClickClose: () => removeActiveQueryFile(file.name), labelWidthPixels: 160 }, file.name))) }));
+    return (_jsx(BaseFileBadges, { children: activeQuery.files.map((file) => (_jsx(Badge, { label: file.name.substring(0, file.name.lastIndexOf(".")), Icon: FILE_TYPE_ICON_MAP[file.type] ?? SystemIcon.FileIcon, onClickClose: () => removeActiveQueryFile(file.name), labelWidthPixels: 160 }, file.name))) }));
 };
 const BaseFileBadges = styled.div `
   display: flex;

package/core/organisms/GrantMatch/ActiveQueryFiles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActiveQueryFiles.js","sourceRoot":"","sources":["../../../../core/organisms/GrantMatch/ActiveQueryFiles.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AAEjD,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,CAC7B,MAAC,eAAe,eACd,KAAC,UAAU,KAAG,EACd,KAAC,gBAAgB,KAAG,IACJ,CACnB,CAAC;AAEF,eAAe,gBAAgB,CAAC;AAEhC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIjC,CAAC;AAEF,MAAM,UAAU,GAAG,GAAG,EAAE;IACtB,MAAM,EAAE,WAAW,EAAE,iBAAiB,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAElE,MAAM,qBAAqB,GAAG,CAAC,QAAgB,EAAE,EAAE;QACjD,MAAM,QAAQ,GAAG;YACf,KAAK,EAAE,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC;YACjE,IAAI,EAAE,WAAW,CAAC,IAAI;SACvB,CAAC;QAEF,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,cAAc,cACZ,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC/B,KAAC,KAAK,IAEJ,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,EACzD,IAAI,EAAE,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,QAAQ,EACrD,YAAY,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,EACpD,gBAAgB,EAAE,GAAG,IAJhB,IAAI,CAAC,IAAI,CAKd,CACH,CAAC,GACa,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;CAiBhC,CAAC;AAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE;IAC5B,MAAM,EAAE,WAAW,EAAE,iBAAiB,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAElE,OAAO,CACL,KAAC,MAAM,IACL,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,CAAC,IAAI,EAAE,CAAC,EACvE,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EACnC,SAAS,SACT,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import styled from \"styled-components\";\nimport { Color, Icons } from \"../../atoms\";\nimport { Badge, Button } from \"../../molecules\";\nimport { FILE_TYPE_ICON_MAP } from \"../../shared\";\nimport { useGrantMatchContext } from \"./context\";\n\nconst ActiveQueryFiles = () => (\n  <BaseActiveFiles>\n    <FileBadges />\n    <ResetFilesButton />\n  </BaseActiveFiles>\n);\n\nexport default ActiveQueryFiles;\n\nconst BaseActiveFiles = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n`;\n\nconst FileBadges = () => {\n  const { activeQuery, updateActiveQuery } = useGrantMatchContext();\n\n  const removeActiveQueryFile = (fileName: string) => {\n    const newQuery = {\n      files: activeQuery.files.filter((file) => file.name !== fileName),\n      text: activeQuery.text,\n    };\n\n    updateActiveQuery(newQuery);\n  };\n\n  return (\n    <BaseFileBadges>\n      {activeQuery.files.map((file) => (\n        <Badge\n          key={file.name}\n          label={file.name.substring(0, file.name.lastIndexOf(\".\"))}\n          Icon={FILE_TYPE_ICON_MAP[file.type] ?? Icons.FileIcon}\n          onClickClose={() => removeActiveQueryFile(file.name)}\n          labelWidthPixels={160}\n        />\n      ))}\n    </BaseFileBadges>\n  );\n};\n\nconst BaseFileBadges = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 8px;\n\n  width: 100%;\n\n  overflow-x: auto;\n\n  /* hide scrollbar but still allow for scrolling */\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  ::-webkit-scrollbar {\n    display: none;\n  }\n\n  /* TODO: fade effect on overflow-x */\n`;\n\nconst ResetFilesButton = () => {\n  const { activeQuery, updateActiveQuery } = useGrantMatchContext();\n\n  return (\n    <Button\n      label=\"Reset\"\n      onClick={() => updateActiveQuery({ files: [], text: activeQuery.text })}\n      color={Color.typography.blackMedium}\n      underline\n    />\n  );\n};\n"]}
+{"version":3,"file":"ActiveQueryFiles.js","sourceRoot":"","sources":["../../../../core/organisms/GrantMatch/ActiveQueryFiles.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AAEjD,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,CAC7B,MAAC,eAAe,eACd,KAAC,UAAU,KAAG,EACd,KAAC,gBAAgB,KAAG,IACJ,CACnB,CAAC;AAEF,eAAe,gBAAgB,CAAC;AAEhC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIjC,CAAC;AAEF,MAAM,UAAU,GAAG,GAAG,EAAE;IACtB,MAAM,EAAE,WAAW,EAAE,iBAAiB,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAElE,MAAM,qBAAqB,GAAG,CAAC,QAAgB,EAAE,EAAE;QACjD,MAAM,QAAQ,GAAG;YACf,KAAK,EAAE,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC;YACjE,IAAI,EAAE,WAAW,CAAC,IAAI;SACvB,CAAC;QAEF,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,cAAc,cACZ,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC/B,KAAC,KAAK,IAEJ,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,EACzD,IAAI,EAAE,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,UAAU,CAAC,QAAQ,EAC1D,YAAY,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,EACpD,gBAAgB,EAAE,GAAG,IAJhB,IAAI,CAAC,IAAI,CAKd,CACH,CAAC,GACa,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;CAiBhC,CAAC;AAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE;IAC5B,MAAM,EAAE,WAAW,EAAE,iBAAiB,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAElE,OAAO,CACL,KAAC,MAAM,IACL,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,CAAC,IAAI,EAAE,CAAC,EACvE,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EACnC,SAAS,SACT,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import styled from \"styled-components\";\nimport { Color, SystemIcon } from \"../../atoms\";\nimport { Badge, Button } from \"../../molecules\";\nimport { FILE_TYPE_ICON_MAP } from \"../../shared\";\nimport { useGrantMatchContext } from \"./context\";\n\nconst ActiveQueryFiles = () => (\n  <BaseActiveFiles>\n    <FileBadges />\n    <ResetFilesButton />\n  </BaseActiveFiles>\n);\n\nexport default ActiveQueryFiles;\n\nconst BaseActiveFiles = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n`;\n\nconst FileBadges = () => {\n  const { activeQuery, updateActiveQuery } = useGrantMatchContext();\n\n  const removeActiveQueryFile = (fileName: string) => {\n    const newQuery = {\n      files: activeQuery.files.filter((file) => file.name !== fileName),\n      text: activeQuery.text,\n    };\n\n    updateActiveQuery(newQuery);\n  };\n\n  return (\n    <BaseFileBadges>\n      {activeQuery.files.map((file) => (\n        <Badge\n          key={file.name}\n          label={file.name.substring(0, file.name.lastIndexOf(\".\"))}\n          Icon={FILE_TYPE_ICON_MAP[file.type] ?? SystemIcon.FileIcon}\n          onClickClose={() => removeActiveQueryFile(file.name)}\n          labelWidthPixels={160}\n        />\n      ))}\n    </BaseFileBadges>\n  );\n};\n\nconst BaseFileBadges = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 8px;\n\n  width: 100%;\n\n  overflow-x: auto;\n\n  /* hide scrollbar but still allow for scrolling */\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  ::-webkit-scrollbar {\n    display: none;\n  }\n\n  /* TODO: fade effect on overflow-x */\n`;\n\nconst ResetFilesButton = () => {\n  const { activeQuery, updateActiveQuery } = useGrantMatchContext();\n\n  return (\n    <Button\n      label=\"Reset\"\n      onClick={() => updateActiveQuery({ files: [], text: activeQuery.text })}\n      color={Color.typography.blackMedium}\n      underline\n    />\n  );\n};\n"]}