@grantbii/design-system 1.4.10 → 1.5.0

package/core/atoms/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 { Colors, Icons, Responsive, Typography } from "../foundations";
-const Badge = ({ label, Icon, iconSize = 20, iconWeight = "regular", onClickClose, labelWidthPixels, backgroundColor, color, }) => (_jsxs(BaseBadge, { "$backgroundColor": backgroundColor, "$color": color, children: [_jsxs(BadgeContent, { "$isCloseable": !!onClickClose, "$widthPixels": labelWidthPixels, children: [Icon ? (_jsx(IconContainer, { children: _jsx(Icon, { color: color, size: iconSize, weight: iconWeight }) })) : (_jsx(_Fragment, {})), _jsx(BadgeText, { children: label })] }), onClickClose ? (_jsx(Button, { type: "button", onClick: onClickClose, children: _jsx(Icons.XIcon, { size: 12 }) })) : (_jsx(_Fragment, {}))] }));
+const Badge = ({ label, Icon, iconSize = 20, iconWeight = "regular", onClickClose, labelWidthPixels, backgroundColor, color, }) => (_jsxs(BaseBadge, { "$backgroundColor": backgroundColor, "$color": color, children: [_jsxs(BadgeContent, { "$isCloseable": !!onClickClose, "$widthPixels": labelWidthPixels, children: [Icon ? (_jsx(IconContainer, { children: _jsx(Icon, { color: color, size: iconSize, weight: iconWeight }) })) : (_jsx(_Fragment, {})), _jsx(BadgeLabel, { children: label })] }), onClickClose ? (_jsx(Button, { type: "button", onClick: onClickClose, children: _jsx(Icons.XIcon, { size: 12 }) })) : (_jsx(_Fragment, {}))] }));
 export default Badge;
 const BaseBadge = styled.div `
   display: flex;
@@ -31,7 +31,7 @@ const IconContainer = styled.div `
   min-width: ${({ $iconSize = "auto" }) => $iconSize};
   max-width: ${({ $iconSize = "auto" }) => $iconSize};
 `;
-const BadgeText = styled.p `
+const BadgeLabel = styled.div `
   overflow-x: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;

package/core/atoms/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../core/atoms/Badge.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAavE,MAAM,KAAK,GAAG,CAAC,EACb,KAAK,EACL,IAAI,EACJ,QAAQ,GAAG,EAAE,EACb,UAAU,GAAG,SAAS,EACtB,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,KAAK,GACM,EAAE,EAAE,CAAC,CAChB,MAAC,SAAS,wBAAmB,eAAe,YAAU,KAAK,aACzD,MAAC,YAAY,oBAAe,CAAC,CAAC,YAAY,kBAAgB,gBAAgB,aACvE,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,EACD,KAAC,SAAS,cAAE,KAAK,GAAa,IACjB,EAEd,YAAY,CAAC,CAAC,CAAC,CACd,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,YAAY,YACzC,KAAC,KAAK,CAAC,KAAK,IAAC,IAAI,EAAE,EAAE,GAAI,GAClB,CACV,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACS,CACb,CAAC;AAEF,eAAe,KAAK,CAAC;AAErB,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAgD;;;;;;;;;WASjE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,SAAS,EAAE,EAAE,EAAE,CAAC,MAAM;sBACzC,CAAC,EAAE,gBAAgB,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,EAAE,CAClE,gBAAgB;CACnB,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,YAAY,EAAE,EAAE,EAAE,CAChC,YAAY,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,MAAM;CAC9C,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,SAAS,GAAG,MAAM,CAAC,CAAC,CAAA;;;;;;;oBAON,UAAU,CAAC,iBAAiB,CAAC,MAAM;iBACtC,UAAU,CAAC,iBAAiB,CAAC,KAAK;;;qBAG9B,UAAU,CAAC,iBAAiB,CAAC,MAAM;iBACvC,UAAU,CAAC,iBAAiB,CAAC,GAAG;;CAEhD,CAAC;AAEF,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;CAK3B,CAAC","sourcesContent":["import type { ComponentType, MouseEventHandler, ReactNode } from \"react\";\nimport styled from \"styled-components\";\nimport { Colors, Icons, Responsive, Typography } from \"../foundations\";\n\nexport type BadgeProps = {\n  label: ReactNode;\n  Icon?: ComponentType<Icons.IconProps>;\n  iconSize?: string | number;\n  iconWeight?: Icons.IconWeight;\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  onClickClose,\n  labelWidthPixels,\n  backgroundColor,\n  color,\n}: BadgeProps) => (\n  <BaseBadge $backgroundColor={backgroundColor} $color={color}>\n    <BadgeContent $isCloseable={!!onClickClose} $widthPixels={labelWidthPixels}>\n      {Icon ? (\n        <IconContainer>\n          <Icon color={color} size={iconSize} weight={iconWeight} />\n        </IconContainer>\n      ) : (\n        <></>\n      )}\n      <BadgeText>{label}</BadgeText>\n    </BadgeContent>\n\n    {onClickClose ? (\n      <Button type=\"button\" onClick={onClickClose}>\n        <Icons.XIcon size={12} />\n      </Button>\n    ) : (\n      <></>\n    )}\n  </BaseBadge>\n);\n\nexport default Badge;\n\nconst BaseBadge = styled.div<{ $backgroundColor?: string; $color?: string }>`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 10px;\n\n  padding: 5px 16px;\n  border-radius: 120px;\n\n  color: ${({ $color = Colors.typography.blackHigh }) => $color};\n  background-color: ${({ $backgroundColor = Colors.neutral.grey3 }) =>\n    $backgroundColor};\n`;\n\nconst BadgeContent = styled.div<{\n  $isCloseable: 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: ${({ $isCloseable }) =>\n    $isCloseable ? \"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 BadgeText = styled.p`\n  overflow-x: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n\n  font-weight: 500;\n\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${Typography.HELPER_FONT_SIZES.small};\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${Typography.HELPER_FONT_SIZES.big};\n  }\n`;\n\nconst Button = styled.button`\n  display: flex;\n  flex-direction: column;\n\n  min-width: 12px;\n`;\n"]}
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../core/atoms/Badge.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAavE,MAAM,KAAK,GAAG,CAAC,EACb,KAAK,EACL,IAAI,EACJ,QAAQ,GAAG,EAAE,EACb,UAAU,GAAG,SAAS,EACtB,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,KAAK,GACM,EAAE,EAAE,CAAC,CAChB,MAAC,SAAS,wBAAmB,eAAe,YAAU,KAAK,aACzD,MAAC,YAAY,oBAAe,CAAC,CAAC,YAAY,kBAAgB,gBAAgB,aACvE,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,CACd,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,YAAY,YACzC,KAAC,KAAK,CAAC,KAAK,IAAC,IAAI,EAAE,EAAE,GAAI,GAClB,CACV,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACS,CACb,CAAC;AAEF,eAAe,KAAK,CAAC;AAErB,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAgD;;;;;;;;;WASjE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,SAAS,EAAE,EAAE,EAAE,CAAC,MAAM;sBACzC,CAAC,EAAE,gBAAgB,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,EAAE,CAClE,gBAAgB;CACnB,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,YAAY,EAAE,EAAE,EAAE,CAChC,YAAY,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,MAAM;CAC9C,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;;;;;;;oBAOT,UAAU,CAAC,iBAAiB,CAAC,MAAM;iBACtC,UAAU,CAAC,iBAAiB,CAAC,KAAK;;;qBAG9B,UAAU,CAAC,iBAAiB,CAAC,MAAM;iBACvC,UAAU,CAAC,iBAAiB,CAAC,GAAG;;CAEhD,CAAC;AAEF,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;CAK3B,CAAC","sourcesContent":["import type { ComponentType, MouseEventHandler, ReactNode } from \"react\";\nimport styled from \"styled-components\";\nimport { Colors, Icons, Responsive, Typography } from \"../foundations\";\n\nexport type BadgeProps = {\n  label: ReactNode;\n  Icon?: ComponentType<Icons.IconProps>;\n  iconSize?: string | number;\n  iconWeight?: Icons.IconWeight;\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  onClickClose,\n  labelWidthPixels,\n  backgroundColor,\n  color,\n}: BadgeProps) => (\n  <BaseBadge $backgroundColor={backgroundColor} $color={color}>\n    <BadgeContent $isCloseable={!!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 ? (\n      <Button type=\"button\" onClick={onClickClose}>\n        <Icons.XIcon size={12} />\n      </Button>\n    ) : (\n      <></>\n    )}\n  </BaseBadge>\n);\n\nexport default Badge;\n\nconst BaseBadge = styled.div<{ $backgroundColor?: string; $color?: string }>`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 10px;\n\n  padding: 5px 16px;\n  border-radius: 120px;\n\n  color: ${({ $color = Colors.typography.blackHigh }) => $color};\n  background-color: ${({ $backgroundColor = Colors.neutral.grey3 }) =>\n    $backgroundColor};\n`;\n\nconst BadgeContent = styled.div<{\n  $isCloseable: 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: ${({ $isCloseable }) =>\n    $isCloseable ? \"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  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${Typography.HELPER_FONT_SIZES.small};\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${Typography.HELPER_FONT_SIZES.big};\n  }\n`;\n\nconst Button = styled.button`\n  display: flex;\n  flex-direction: column;\n\n  min-width: 12px;\n`;\n"]}

package/core/atoms/Button.d.ts

@@ -1,14 +1,14 @@
-import type { ButtonHTMLAttributes, ComponentType, DetailedHTMLProps } from "react";
+import type { ButtonHTMLAttributes, DetailedHTMLProps, ReactNode } from "react";
 import { Icons } from "../foundations";
 type ButtonProps = {
-    text: string;
-    LeftIcon?: ComponentType<Icons.IconProps>;
-    RightIcon?: ComponentType<Icons.IconProps>;
+    label: ReactNode;
+    LeftIcon?: Icons.Icon;
+    RightIcon?: Icons.Icon;
     underline?: boolean;
     backgroundColor?: string;
     borderColor?: string;
     color?: string;
     width?: string;
 } & DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
-declare const Button: ({ text, LeftIcon, RightIcon, underline, backgroundColor, borderColor, color, width, type, ...buttonProps }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const Button: ({ label, LeftIcon, RightIcon, underline, backgroundColor, borderColor, color, width, type, ...buttonProps }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default Button;

package/core/atoms/Button.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import styled from "styled-components";
 import { Icons } from "../foundations";
 import { BaseButton as ButtonContent } from "./shared";
-const Button = ({ text, 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, {}), _jsx("p", { children: text }), RightIcon ? _jsx(RightIcon, { color: color, size: 20 }) : _jsx(_Fragment, {})] }) }));
+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;
 const BaseButton = styled.button `
   width: ${({ $width = "auto" }) => $width};

package/core/atoms/Button.js.map

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

package/core/molecules/Badges.d.ts

@@ -1,7 +1,8 @@
 import { type BadgeProps } from "../atoms";
 type BadgesProps = {
     allBadgeProps: BadgeProps[];
-    isScrollable?: boolean;
+    scrollable?: boolean;
+    vertical?: boolean;
 };
-declare const Badges: ({ allBadgeProps, isScrollable }: BadgesProps) => import("react/jsx-runtime").JSX.Element;
+declare const Badges: ({ allBadgeProps, scrollable, vertical }: BadgesProps) => import("react/jsx-runtime").JSX.Element;
 export default Badges;

package/core/molecules/Badges.js

@@ -2,27 +2,51 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import styled, { css } from "styled-components";
 import { Badge } from "../atoms";
-const Badges = ({ allBadgeProps, isScrollable }) => (_jsx(BaseBadges, { "$isScrollable": isScrollable, children: allBadgeProps.map((badgeProps, index) => (_createElement(Badge, { ...badgeProps, key: `badge-${index}` }))) }));
+const Badges = ({ allBadgeProps, scrollable, vertical }) => (_jsx(BaseBadges, { "$scrollable": scrollable, "$vertical": vertical, children: allBadgeProps.map((badgeProps, index) => (_createElement(Badge, { ...badgeProps, key: `badge-${index}` }))) }));
 export default Badges;
 const BaseBadges = styled.div `
   display: flex;
-  gap: 8px;
+  flex-direction: ${({ $vertical = false }) => ($vertical ? "column" : "row")};
+  gap: ${({ $vertical = false }) => ($vertical ? "4px" : "8px")};
 
-  ${({ $isScrollable = false }) => $isScrollable
-    ? css `
-          flex-wrap: nowrap;
-          overflow-x: auto;
+  ${({ $scrollable = false, $vertical = false }) => deriveCSS($scrollable, $vertical)}
+`;
+const deriveCSS = (scrollable, vertical) => {
+    if (vertical && scrollable) {
+        return ScrollableVerticalCSS;
+    }
+    else if (vertical) {
+        // vertical && unscrollable
+        return UnscrollableVerticalCSS;
+    }
+    else if (scrollable) {
+        // horizontal && scrollable
+        return ScrollableHorizontalCSS;
+    }
+    else {
+        // horizontal && unscrollable
+        return UnscrollableHorizontalCSS;
+    }
+};
+const ScrollableVerticalCSS = css `
+  overflow-y: auto;
+
+  height: 90px;
+`;
+const UnscrollableVerticalCSS = css ``;
+const ScrollableHorizontalCSS = css `
+  flex-wrap: nowrap;
+  overflow-x: auto;
 
-          /* hide scrollbar but still allow for scrolling */
-          -ms-overflow-style: none;
-          scrollbar-width: none;
-          ::-webkit-scrollbar {
-            display: none;
-          }
-        `
-    : css `
-          flex-wrap: wrap;
-          overflow-x: visible;
-        `}
+  /* hide scrollbar but still allow for scrolling */
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  ::-webkit-scrollbar {
+    display: none;
+  }
+`;
+const UnscrollableHorizontalCSS = css `
+  flex-wrap: wrap;
+  overflow-x: visible;
 `;
 //# sourceMappingURL=Badges.js.map

package/core/molecules/Badges.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badges.js","sourceRoot":"","sources":["../../../core/molecules/Badges.tsx"],"names":[],"mappings":";;AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAmB,MAAM,UAAU,CAAC;AAOlD,MAAM,MAAM,GAAG,CAAC,EAAE,aAAa,EAAE,YAAY,EAAe,EAAE,EAAE,CAAC,CAC/D,KAAC,UAAU,qBAAgB,YAAY,YACpC,aAAa,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,CAAC,CACxC,eAAC,KAAK,OAAK,UAAU,EAAE,GAAG,EAAE,SAAS,KAAK,EAAE,GAAI,CACjD,CAAC,GACS,CACd,CAAC;AAEF,eAAe,MAAM,CAAC;AAEtB,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAA6B;;;;IAItD,CAAC,EAAE,aAAa,GAAG,KAAK,EAAE,EAAE,EAAE,CAC9B,aAAa;IACX,CAAC,CAAC,GAAG,CAAA;;;;;;;;;;SAUF;IACH,CAAC,CAAC,GAAG,CAAA;;;SAGF;CACR,CAAC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Badge, type BadgeProps } from \"../atoms\";\n\ntype BadgesProps = {\n  allBadgeProps: BadgeProps[];\n  isScrollable?: boolean;\n};\n\nconst Badges = ({ allBadgeProps, isScrollable }: BadgesProps) => (\n  <BaseBadges $isScrollable={isScrollable}>\n    {allBadgeProps.map((badgeProps, index) => (\n      <Badge {...badgeProps} key={`badge-${index}`} />\n    ))}\n  </BaseBadges>\n);\n\nexport default Badges;\n\nconst BaseBadges = styled.div<{ $isScrollable?: boolean }>`\n  display: flex;\n  gap: 8px;\n\n  ${({ $isScrollable = false }) =>\n    $isScrollable\n      ? css`\n          flex-wrap: nowrap;\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      : css`\n          flex-wrap: wrap;\n          overflow-x: visible;\n        `}\n`;\n"]}
+{"version":3,"file":"Badges.js","sourceRoot":"","sources":["../../../core/molecules/Badges.tsx"],"names":[],"mappings":";;AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAgB,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAmB,MAAM,UAAU,CAAC;AAQlD,MAAM,MAAM,GAAG,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAe,EAAE,EAAE,CAAC,CACvE,KAAC,UAAU,mBAAc,UAAU,eAAa,QAAQ,YACrD,aAAa,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,CAAC,CACxC,eAAC,KAAK,OAAK,UAAU,EAAE,GAAG,EAAE,SAAS,KAAK,EAAE,GAAI,CACjD,CAAC,GACS,CACd,CAAC;AAEF,eAAe,MAAM,CAAC;AAEtB,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAgD;;oBAEzD,CAAC,EAAE,SAAS,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;SACpE,CAAC,EAAE,SAAS,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;;IAE3D,CAAC,EAAE,WAAW,GAAG,KAAK,EAAE,SAAS,GAAG,KAAK,EAAE,EAAE,EAAE,CAC/C,SAAS,CAAC,WAAW,EAAE,SAAS,CAAC;CACpC,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,UAAmB,EAAE,QAAiB,EAAW,EAAE;IACpE,IAAI,QAAQ,IAAI,UAAU,EAAE,CAAC;QAC3B,OAAO,qBAAqB,CAAC;IAC/B,CAAC;SAAM,IAAI,QAAQ,EAAE,CAAC;QACpB,2BAA2B;QAC3B,OAAO,uBAAuB,CAAC;IACjC,CAAC;SAAM,IAAI,UAAU,EAAE,CAAC;QACtB,2BAA2B;QAC3B,OAAO,uBAAuB,CAAC;IACjC,CAAC;SAAM,CAAC;QACN,6BAA6B;QAC7B,OAAO,yBAAyB,CAAC;IACnC,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;CAIhC,CAAC;AAEF,MAAM,uBAAuB,GAAG,GAAG,CAAA,EAAE,CAAC;AAEtC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;CAUlC,CAAC;AAEF,MAAM,yBAAyB,GAAG,GAAG,CAAA;;;CAGpC,CAAC","sourcesContent":["import styled, { css, type RuleSet } from \"styled-components\";\nimport { Badge, type BadgeProps } from \"../atoms\";\n\ntype BadgesProps = {\n  allBadgeProps: BadgeProps[];\n  scrollable?: boolean;\n  vertical?: boolean;\n};\n\nconst Badges = ({ allBadgeProps, scrollable, vertical }: BadgesProps) => (\n  <BaseBadges $scrollable={scrollable} $vertical={vertical}>\n    {allBadgeProps.map((badgeProps, index) => (\n      <Badge {...badgeProps} key={`badge-${index}`} />\n    ))}\n  </BaseBadges>\n);\n\nexport default Badges;\n\nconst BaseBadges = styled.div<{ $scrollable?: boolean; $vertical?: boolean }>`\n  display: flex;\n  flex-direction: ${({ $vertical = false }) => ($vertical ? \"column\" : \"row\")};\n  gap: ${({ $vertical = false }) => ($vertical ? \"4px\" : \"8px\")};\n\n  ${({ $scrollable = false, $vertical = false }) =>\n    deriveCSS($scrollable, $vertical)}\n`;\n\nconst deriveCSS = (scrollable: boolean, vertical: boolean): RuleSet => {\n  if (vertical && scrollable) {\n    return ScrollableVerticalCSS;\n  } else if (vertical) {\n    // vertical && unscrollable\n    return UnscrollableVerticalCSS;\n  } else if (scrollable) {\n    // horizontal && scrollable\n    return ScrollableHorizontalCSS;\n  } else {\n    // horizontal && unscrollable\n    return UnscrollableHorizontalCSS;\n  }\n};\n\nconst ScrollableVerticalCSS = css`\n  overflow-y: auto;\n\n  height: 90px;\n`;\n\nconst UnscrollableVerticalCSS = css``;\n\nconst ScrollableHorizontalCSS = css`\n  flex-wrap: nowrap;\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\nconst UnscrollableHorizontalCSS = css`\n  flex-wrap: wrap;\n  overflow-x: visible;\n`;\n"]}

package/core/molecules/FileDrop.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState } from "react";
 import { useDropzone } from "react-dropzone";
 import styled from "styled-components";
-import { Badge } from "../atoms";
-import { Colors, Icons, Responsive, Typography } from "../foundations";
 import { FILE_TYPE_ICON_MAP } from "../atoms/shared";
+import { Colors, Icons, Responsive, Typography } from "../foundations";
+import Badges from "./Badges";
 const DEFAULT_MAX_FILE_SIZE_MB = 5;
 const DEFAULT_MAX_FILES = 5;
 const FileDrop = ({ uploadedFiles, uploadFiles, removeFile, errorMessage, maxFiles = DEFAULT_MAX_FILES, maxSizeMB = DEFAULT_MAX_FILE_SIZE_MB, }) => {
@@ -83,12 +83,14 @@ const DropzoneSubtitle = styled.p `
 const ErrorMessage = styled.p `
   color: ${Colors.accent.red1};
 `;
-const UploadedFiles = ({ uploadedFiles, removeFile }) => (_jsx(BaseUploadedFiles, { children: uploadedFiles.map(({ name: fileName, type: fileType }) => (_jsx(Badge, { label: getFileNameWithoutExtension(fileName), onClickClose: () => removeFile(fileName), Icon: FILE_TYPE_ICON_MAP[fileType] ?? Icons.FileIcon }, fileName))) }));
-const BaseUploadedFiles = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-`;
+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,
+    }));
+    return _jsx(Badges, { allBadgeProps: fileBadgesProps, vertical: true });
+};
 export const useFileDrop = (initialFiles = [], maxFiles = DEFAULT_MAX_FILES, maxSizeMB = DEFAULT_MAX_FILE_SIZE_MB) => {
     const [files, setFiles] = useState(() => initialFiles);
     const [errorMessage, setErrorMessage] = useState();

package/core/molecules/FileDrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileDrop.js","sourceRoot":"","sources":["../../../core/molecules/FileDrop.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACvE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,wBAAwB,GAAG,CAAC,CAAC;AACnC,MAAM,iBAAiB,GAAG,CAAC,CAAC;AAW5B,MAAM,QAAQ,GAAG,CAAC,EAChB,aAAa,EACb,WAAW,EACX,UAAU,EACV,YAAY,EACZ,QAAQ,GAAG,iBAAiB,EAC5B,SAAS,GAAG,wBAAwB,GAClB,EAAE,EAAE;IACtB,MAAM,iBAAiB,GAAG,aAAa,CAAC,MAAM,IAAI,QAAQ,CAAC;IAE3D,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,GAAG,WAAW,CAAC;QAClD,MAAM,EAAE,WAAW;QACnB,MAAM,EAAE;YACN,iBAAiB,EAAE,CAAC,MAAM,CAAC;YAC3B,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;YAC/B,WAAW,EAAE,CAAC,MAAM,CAAC;SACtB;QACD,QAAQ,EAAE,iBAAiB;QAC3B,OAAO,EAAE,iBAAiB;QAC1B,MAAM,EAAE,iBAAiB;QACzB,QAAQ,EAAE,IAAI;KACf,CAAC,CAAC;IAEH,OAAO,CACL,MAAC,YAAY,eACX,MAAC,QAAQ,OACH,YAAY,EAAE,wBACE,iBAAiB,eAC1B,CAAC,CAAC,YAAY,aAEzB,mBAAW,aAAa,EAAE,EAAE,IAAI,EAAC,MAAM,GAAG,EAC1C,KAAC,eAAe,IAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,GAAI,IACpD,EAEV,YAAY,CAAC,CAAC,CAAC,KAAC,YAAY,cAAE,YAAY,GAAgB,CAAC,CAAC,CAAC,mBAAK,EAEnE,KAAC,aAAa,IAAC,aAAa,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,GAAI,IAC1D,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC;AAExB,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAK9B,CAAC;AAEF,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAGzB;;;;MAII,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAClB,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK;;;cAG7C,CAAC,EAAE,kBAAkB,EAAE,EAAE,EAAE,CACnC,kBAAkB,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS;;CAEnD,CAAC;AAOF,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAwB,EAAE,EAAE,CAAC,CACzE,MAAC,mBAAmB,eAClB,KAAC,KAAK,CAAC,cAAc,IACnB,MAAM,EAAC,MAAM,EACb,IAAI,EAAE,EAAE,EACR,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,GAC3B,EACF,MAAC,eAAe,eACd,KAAC,YAAY,cACV,cAAc,QAAQ,sBAAsB,SAAS,UAAU,GACnD,EAEf,KAAC,gBAAgB,qFAEE,EAEnB,KAAC,gBAAgB,uDAAwD,IACzD,IACE,CACvB,CAAC;AAEF,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKrC,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIjC,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,CAAC,CAAA;;;;;oBAKT,UAAU,CAAC,iBAAiB,CAAC,MAAM;iBACtC,UAAU,CAAC,eAAe,CAAC,KAAK;;;qBAG5B,UAAU,CAAC,iBAAiB,CAAC,MAAM;iBACvC,UAAU,CAAC,eAAe,CAAC,GAAG;;CAE9C,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,CAAC,CAA8B;;;;;WAKpD,CAAC,EAAE,cAAc,GAAG,KAAK,EAAE,EAAE,EAAE,CACtC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,QAAQ;;oBAEnD,UAAU,CAAC,iBAAiB,CAAC,MAAM;iBACtC,UAAU,CAAC,iBAAiB,CAAC,KAAK;;;qBAG9B,UAAU,CAAC,iBAAiB,CAAC,MAAM;iBACvC,UAAU,CAAC,iBAAiB,CAAC,GAAG;;CAEhD,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,CAAC,CAAA;WAClB,MAAM,CAAC,MAAM,CAAC,IAAI;CAC5B,CAAC;AAOF,MAAM,aAAa,GAAG,CAAC,EAAE,aAAa,EAAE,UAAU,EAAsB,EAAE,EAAE,CAAC,CAC3E,KAAC,iBAAiB,cACf,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CACzD,KAAC,KAAK,IAEJ,KAAK,EAAE,2BAA2B,CAAC,QAAQ,CAAC,EAC5C,YAAY,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,EACxC,IAAI,EAAE,kBAAkB,CAAC,QAAQ,CAAC,IAAI,KAAK,CAAC,QAAQ,IAH/C,QAAQ,CAIb,CACH,CAAC,GACgB,CACrB,CAAC;AAEF,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAInC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,eAAuB,EAAE,EACzB,WAAmB,iBAAiB,EACpC,YAAoB,wBAAwB,EAC5C,EAAE;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC;IAC/D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,EAAsB,CAAC;IAEvE,MAAM,WAAW,GAAG,CAAC,aAAqB,EAAE,EAAE;QAC5C,IAAI,KAAK,CAAC,MAAM,GAAG,aAAa,CAAC,MAAM,GAAG,QAAQ,EAAE,CAAC;YACnD,eAAe,CAAC,GAAG,EAAE,CAAC,2BAA2B,QAAQ,QAAQ,CAAC,CAAC;QACrE,CAAC;aAAM,IAAI,eAAe,CAAC,aAAa,EAAE,SAAS,CAAC,EAAE,CAAC;YACrD,eAAe,CAAC,GAAG,EAAE,CAAC,wBAAwB,SAAS,IAAI,CAAC,CAAC;QAC/D,CAAC;aAAM,CAAC;YACN,eAAe,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC;YACjC,QAAQ,CAAC,CAAC,aAAa,EAAE,EAAE,CACzB,6BAA6B,CAAC,aAAa,EAAE,aAAa,CAAC,CAC5D,CAAC;QACJ,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,QAAgB,EAAE,EAAE;QACtC,eAAe,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC;QACjC,QAAQ,CAAC,CAAC,aAAa,EAAE,EAAE,CAAC,iBAAiB,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC;IAC1E,CAAC,CAAC;IAEF,OAAO;QACL,KAAK;QACL,WAAW;QACX,UAAU;QACV,YAAY;KACb,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,KAAa,EAAE,SAAiB,EAAW,EAAE,CACpE,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,uBAAuB,CAAC,SAAS,CAAC,CAAC,CAAC;AAEvE,MAAM,uBAAuB,GAAG,CAAC,SAAiB,EAAU,EAAE,CAC5D,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1B,MAAM,6BAA6B,GAAG,CACpC,QAAgB,EAChB,QAAgB,EACR,EAAE;IACV,MAAM,YAAY,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACvD,MAAM,YAAY,GAAG,QAAQ,CAAC,MAAM,CAClC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAClD,CAAC;IAEF,OAAO,CAAC,GAAG,YAAY,EAAE,GAAG,QAAQ,CAAC,CAAC;AACxC,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAAG,CAAC,KAAa,EAAE,QAAgB,EAAU,EAAE,CACpE,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC;AAEjD,MAAM,2BAA2B,GAAG,CAAC,QAAgB,EAAU,EAAE,CAC/D,QAAQ,CAAC,SAAS,CAAC,CAAC,EAAE,QAAQ,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC","sourcesContent":["import { useState } from \"react\";\nimport { useDropzone } from \"react-dropzone\";\nimport styled from \"styled-components\";\nimport { Badge } from \"../atoms\";\nimport { Colors, Icons, Responsive, Typography } from \"../foundations\";\nimport { FILE_TYPE_ICON_MAP } from \"../atoms/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 }) =>\n      $hasError ? Colors.accent.red1 : Colors.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\n      weight=\"thin\"\n      size={48}\n      color={Colors.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  font-weight: 500;\n\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${Typography.BODY_FONT_SIZES.small};\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${Typography.BODY_FONT_SIZES.big};\n  }\n`;\n\nconst DropzoneSubtitle = styled.p<{ $isHighlighted?: boolean }>`\n  text-align: center;\n\n  font-weight: 400;\n\n  color: ${({ $isHighlighted = false }) =>\n    $isHighlighted ? Colors.accent.yellow1 : Colors.typography.blackLow};\n\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${Typography.HELPER_FONT_SIZES.small};\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${Typography.HELPER_FONT_SIZES.big};\n  }\n`;\n\nconst ErrorMessage = styled.p`\n  color: ${Colors.accent.red1};\n`;\n\ntype UploadedFilesProps = {\n  uploadedFiles: File[];\n  removeFile: (fileName: string) => void;\n};\n\nconst UploadedFiles = ({ uploadedFiles, removeFile }: UploadedFilesProps) => (\n  <BaseUploadedFiles>\n    {uploadedFiles.map(({ name: fileName, type: fileType }) => (\n      <Badge\n        key={fileName}\n        label={getFileNameWithoutExtension(fileName)}\n        onClickClose={() => removeFile(fileName)}\n        Icon={FILE_TYPE_ICON_MAP[fileType] ?? Icons.FileIcon}\n      />\n    ))}\n  </BaseUploadedFiles>\n);\n\nconst BaseUploadedFiles = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\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/molecules/FileDrop.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from \"react\";\nimport { useDropzone } from \"react-dropzone\";\nimport styled from \"styled-components\";\nimport { FILE_TYPE_ICON_MAP } from \"../atoms/shared\";\nimport { Colors, Icons, Responsive, Typography } from \"../foundations\";\nimport Badges from \"./Badges\";\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 }) =>\n      $hasError ? Colors.accent.red1 : Colors.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\n      weight=\"thin\"\n      size={48}\n      color={Colors.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  font-weight: 500;\n\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${Typography.BODY_FONT_SIZES.small};\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${Typography.BODY_FONT_SIZES.big};\n  }\n`;\n\nconst DropzoneSubtitle = styled.p<{ $isHighlighted?: boolean }>`\n  text-align: center;\n\n  font-weight: 400;\n\n  color: ${({ $isHighlighted = false }) =>\n    $isHighlighted ? Colors.accent.yellow1 : Colors.typography.blackLow};\n\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${Typography.HELPER_FONT_SIZES.small};\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${Typography.HELPER_FONT_SIZES.big};\n  }\n`;\n\nconst ErrorMessage = styled.p`\n  color: ${Colors.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"]}

package/core/molecules/Modal.js

@@ -79,7 +79,7 @@ const ModalHeader = styled.div `
   font-weight: 500;
   font-size: 18px;
 
-  padding: 12px 24px;
+  padding: 12px 20px;
   border-bottom: 1px solid ${Colors.neutral.grey3};
 `;
 const ModalBody = styled.div `
@@ -95,7 +95,7 @@ const ModalBody = styled.div `
     height: 100%;
     min-height: 100px;
 
-    padding: 2px 24px;
+    padding: 2px 20px;
     border: none;
   }
 `;
@@ -104,7 +104,7 @@ const ModalFooter = styled.div `
   justify-content: space-between;
   gap: 12px;
 
-  padding: 20px 24px;
+  padding: 16px 20px;
 `;
-const CloseButton = ({ onClick, closeText = "Close" }) => (_jsx(Button, { text: closeText, onClick: onClick, backgroundColor: Colors.neutral.grey3, color: Colors.typography.blackHigh }));
+const CloseButton = ({ onClick, closeText = "Close" }) => (_jsx(Button, { label: closeText, onClick: onClick, backgroundColor: Colors.neutral.grey3, color: Colors.typography.blackHigh }));
 //# sourceMappingURL=Modal.js.map

package/core/molecules/Modal.js.map

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

package/core/organisms/GrantMatch/ActiveQueryFiles.js

@@ -42,6 +42,6 @@ const BaseFileBadges = styled.div `
 `;
 const ResetFilesButton = () => {
     const { activeQuery, updateActiveQuery } = useGrantMatchContext();
-    return (_jsx(Button, { text: "Reset", onClick: () => updateActiveQuery({ files: [], text: activeQuery.text }), color: Colors.typography.blackMedium, underline: true }));
+    return (_jsx(Button, { label: "Reset", onClick: () => updateActiveQuery({ files: [], text: activeQuery.text }), color: Colors.typography.blackMedium, underline: true }));
 };
 //# sourceMappingURL=ActiveQueryFiles.js.map

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,MAAM,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,mBAAmB,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,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,CAAC,IAAI,EAAE,CAAC,EACvE,KAAK,EAAE,MAAM,CAAC,UAAU,CAAC,WAAW,EACpC,SAAS,SACT,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import styled from \"styled-components\";\nimport { Badge, Button } from \"../../atoms\";\nimport { FILE_TYPE_ICON_MAP } from \"../../atoms/shared\";\nimport { Colors, Icons } from \"../../foundations\";\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      text=\"Reset\"\n      onClick={() => updateActiveQuery({ files: [], text: activeQuery.text })}\n      color={Colors.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,MAAM,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,mBAAmB,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,MAAM,CAAC,UAAU,CAAC,WAAW,EACpC,SAAS,SACT,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import styled from \"styled-components\";\nimport { Badge, Button } from \"../../atoms\";\nimport { FILE_TYPE_ICON_MAP } from \"../../atoms/shared\";\nimport { Colors, Icons } from \"../../foundations\";\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={Colors.typography.blackMedium}\n      underline\n    />\n  );\n};\n"]}

package/core/organisms/GrantMatch/GrantMatchModal.js

@@ -59,6 +59,6 @@ const FindGrantsButton = ({ files, findGrantsCallback, }) => {
         updateActiveQuery({ files, text: queryText });
         closeModal();
     };
-    return (_jsx(Button, { text: "Find My Grants", onClick: onClick, backgroundColor: hasQuery ? Colors.accent.yellow1 : Colors.neutral.grey3, disabled: !hasQuery }));
+    return (_jsx(Button, { label: "Find My Grants", onClick: onClick, backgroundColor: hasQuery ? Colors.accent.yellow1 : Colors.neutral.grey3, disabled: !hasQuery }));
 };
 //# sourceMappingURL=GrantMatchModal.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"GrantMatchModal.js","sourceRoot":"","sources":["../../../../core/organisms/GrantMatch/GrantMatchModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import Image from \"next/image\";\nimport styled from \"styled-components\";\nimport grantMatchLogo from \"../../assets/logos/grant_match_logo.webp\";\nimport { Button, Textarea } from \"../../atoms\";\nimport { Colors } from \"../../foundations\";\nimport { FileDrop, Modal, useFileDrop } from \"../../molecules\";\nimport { useGrantMatchContext } from \"./context\";\n\ntype GrantMatchModalProps = {\n  findGrantsCallback?: () => void;\n  closeModalCallback?: () => void;\n};\n\nconst GrantMatchModal = ({\n  findGrantsCallback,\n  closeModalCallback,\n}: GrantMatchModalProps) => {\n  const { activeQuery, closeModal } = useGrantMatchContext();\n  const { files, uploadFiles, removeFile, errorMessage } = useFileDrop(\n    activeQuery.files,\n  );\n\n  const onClickClose = () => {\n    if (closeModalCallback) {\n      closeModalCallback();\n    }\n\n    closeModal();\n  };\n\n  return (\n    <Modal\n      header={<ModalHeader />}\n      content={\n        <ModalContent\n          files={files}\n          uploadFiles={uploadFiles}\n          removeFile={removeFile}\n          errorMessage={errorMessage}\n        />\n      }\n      footer={\n        <FindGrantsButton\n          files={files}\n          findGrantsCallback={findGrantsCallback}\n        />\n      }\n      onClickClose={onClickClose}\n      width=\"600px\"\n      height=\"560px\"\n    />\n  );\n};\n\nexport default GrantMatchModal;\n\nconst ModalHeader = () => (\n  <BaseModalHeader>\n    <GrantMatchLogo\n      src={grantMatchLogo}\n      alt=\"Grant Match\"\n      width={64}\n      height={64}\n    />\n    <p>Let us get you matched to the most suitable grant</p>\n  </BaseModalHeader>\n);\n\nconst BaseModalHeader = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 16px;\n`;\n\nconst GrantMatchLogo = styled(Image)`\n  width: 24px;\n  height: 24px;\n\n  box-shadow: 0px 0px 5px 5px #ffe2b680;\n  border-radius: 120px;\n`;\n\ntype ModalContentProps = {\n  files: File[];\n  uploadFiles: (acceptedFiles: File[]) => void;\n  removeFile: (fileName: string) => void;\n  errorMessage?: string;\n};\n\nconst ModalContent = ({\n  files,\n  uploadFiles,\n  removeFile,\n  errorMessage,\n}: ModalContentProps) => {\n  const { queryText, updateQueryText } = useGrantMatchContext();\n\n  return (\n    <BaseContent>\n      <ModalFileDrop>\n        <p>Upload Files (e.g. Project Plan, Proposal, Company Docs)</p>\n        <FileDrop\n          uploadedFiles={files}\n          uploadFiles={uploadFiles}\n          removeFile={removeFile}\n          errorMessage={errorMessage}\n        />\n      </ModalFileDrop>\n\n      <ModalQueryText>\n        <label htmlFor={QUERY_TEXTAREA_ID}>Tell us what you intend to do</label>\n        <Textarea\n          id={QUERY_TEXTAREA_ID}\n          value={queryText}\n          onChange={(event) => updateQueryText(event.target.value)}\n          placeholder=\"Give a summary of your project, specifying the key activities you will do & what you intend to achieve\"\n        />\n      </ModalQueryText>\n    </BaseContent>\n  );\n};\n\nconst QUERY_TEXTAREA_ID = \"query-textarea\";\n\nconst BaseContent = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n`;\n\nconst ModalFileDrop = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\nconst ModalQueryText = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\ntype FindGrantsButtonProps = {\n  files: File[];\n  findGrantsCallback?: () => void;\n};\n\nconst FindGrantsButton = ({\n  files,\n  findGrantsCallback,\n}: FindGrantsButtonProps) => {\n  const { updateActiveQuery, queryText, closeModal } = useGrantMatchContext();\n  const hasQuery = queryText.trim() !== \"\" || files.length > 0;\n\n  const onClick = () => {\n    if (findGrantsCallback) {\n      findGrantsCallback();\n    }\n\n    updateActiveQuery({ files, text: queryText });\n    closeModal();\n  };\n\n  return (\n    <Button\n      text=\"Find My Grants\"\n      onClick={onClick}\n      backgroundColor={hasQuery ? Colors.accent.yellow1 : Colors.neutral.grey3}\n      disabled={!hasQuery}\n    />\n  );\n};\n"]}
+{"version":3,"file":"GrantMatchModal.js","sourceRoot":"","sources":["../../../../core/organisms/GrantMatch/GrantMatchModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import Image from \"next/image\";\nimport styled from \"styled-components\";\nimport grantMatchLogo from \"../../assets/logos/grant_match_logo.webp\";\nimport { Button, Textarea } from \"../../atoms\";\nimport { Colors } from \"../../foundations\";\nimport { FileDrop, Modal, useFileDrop } from \"../../molecules\";\nimport { useGrantMatchContext } from \"./context\";\n\ntype GrantMatchModalProps = {\n  findGrantsCallback?: () => void;\n  closeModalCallback?: () => void;\n};\n\nconst GrantMatchModal = ({\n  findGrantsCallback,\n  closeModalCallback,\n}: GrantMatchModalProps) => {\n  const { activeQuery, closeModal } = useGrantMatchContext();\n  const { files, uploadFiles, removeFile, errorMessage } = useFileDrop(\n    activeQuery.files,\n  );\n\n  const onClickClose = () => {\n    if (closeModalCallback) {\n      closeModalCallback();\n    }\n\n    closeModal();\n  };\n\n  return (\n    <Modal\n      header={<ModalHeader />}\n      content={\n        <ModalContent\n          files={files}\n          uploadFiles={uploadFiles}\n          removeFile={removeFile}\n          errorMessage={errorMessage}\n        />\n      }\n      footer={\n        <FindGrantsButton\n          files={files}\n          findGrantsCallback={findGrantsCallback}\n        />\n      }\n      onClickClose={onClickClose}\n      width=\"600px\"\n      height=\"560px\"\n    />\n  );\n};\n\nexport default GrantMatchModal;\n\nconst ModalHeader = () => (\n  <BaseModalHeader>\n    <GrantMatchLogo\n      src={grantMatchLogo}\n      alt=\"Grant Match\"\n      width={64}\n      height={64}\n    />\n    <p>Let us get you matched to the most suitable grant</p>\n  </BaseModalHeader>\n);\n\nconst BaseModalHeader = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 16px;\n`;\n\nconst GrantMatchLogo = styled(Image)`\n  width: 24px;\n  height: 24px;\n\n  box-shadow: 0px 0px 5px 5px #ffe2b680;\n  border-radius: 120px;\n`;\n\ntype ModalContentProps = {\n  files: File[];\n  uploadFiles: (acceptedFiles: File[]) => void;\n  removeFile: (fileName: string) => void;\n  errorMessage?: string;\n};\n\nconst ModalContent = ({\n  files,\n  uploadFiles,\n  removeFile,\n  errorMessage,\n}: ModalContentProps) => {\n  const { queryText, updateQueryText } = useGrantMatchContext();\n\n  return (\n    <BaseContent>\n      <ModalFileDrop>\n        <p>Upload Files (e.g. Project Plan, Proposal, Company Docs)</p>\n        <FileDrop\n          uploadedFiles={files}\n          uploadFiles={uploadFiles}\n          removeFile={removeFile}\n          errorMessage={errorMessage}\n        />\n      </ModalFileDrop>\n\n      <ModalQueryText>\n        <label htmlFor={QUERY_TEXTAREA_ID}>Tell us what you intend to do</label>\n        <Textarea\n          id={QUERY_TEXTAREA_ID}\n          value={queryText}\n          onChange={(event) => updateQueryText(event.target.value)}\n          placeholder=\"Give a summary of your project, specifying the key activities you will do & what you intend to achieve\"\n        />\n      </ModalQueryText>\n    </BaseContent>\n  );\n};\n\nconst QUERY_TEXTAREA_ID = \"query-textarea\";\n\nconst BaseContent = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n`;\n\nconst ModalFileDrop = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\nconst ModalQueryText = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\ntype FindGrantsButtonProps = {\n  files: File[];\n  findGrantsCallback?: () => void;\n};\n\nconst FindGrantsButton = ({\n  files,\n  findGrantsCallback,\n}: FindGrantsButtonProps) => {\n  const { updateActiveQuery, queryText, closeModal } = useGrantMatchContext();\n  const hasQuery = queryText.trim() !== \"\" || files.length > 0;\n\n  const onClick = () => {\n    if (findGrantsCallback) {\n      findGrantsCallback();\n    }\n\n    updateActiveQuery({ files, text: queryText });\n    closeModal();\n  };\n\n  return (\n    <Button\n      label=\"Find My Grants\"\n      onClick={onClick}\n      backgroundColor={hasQuery ? Colors.accent.yellow1 : Colors.neutral.grey3}\n      disabled={!hasQuery}\n    />\n  );\n};\n"]}

package/core/templates/LoadingFailedSign.js

@@ -5,7 +5,7 @@ import styled from "styled-components";
 import loadFailLogo from "../assets/logos/load_fail_logo.webp";
 import { Button } from "../atoms";
 import { Colors, Responsive, Typography } from "../foundations";
-const LoadingFailedSign = ({ errorMessage = "Failed to load results", onClickReload, }) => (_jsxs(BaseLoadingFailedSign, { children: [_jsx(LoadingFailedImage, { src: loadFailLogo, width: 693, height: 641, alt: errorMessage }), _jsx(LoadingFailedText, { errorMessage: errorMessage }), onClickReload ? (_jsx(Button, { text: "Try Again", onClick: onClickReload, backgroundColor: Colors.base.white, borderColor: Colors.neutral.grey3, color: Colors.typography.blackHigh })) : (_jsx(_Fragment, {}))] }));
+const LoadingFailedSign = ({ errorMessage = "Failed to load results", onClickReload, }) => (_jsxs(BaseLoadingFailedSign, { children: [_jsx(LoadingFailedImage, { src: loadFailLogo, width: 693, height: 641, alt: errorMessage }), _jsx(LoadingFailedText, { errorMessage: errorMessage }), onClickReload ? (_jsx(Button, { label: "Try Again", onClick: onClickReload, backgroundColor: Colors.base.white, borderColor: Colors.neutral.grey3, color: Colors.typography.blackHigh })) : (_jsx(_Fragment, {}))] }));
 export default LoadingFailedSign;
 const BaseLoadingFailedSign = styled.div `
   display: flex;

package/core/templates/LoadingFailedSign.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingFailedSign.js","sourceRoot":"","sources":["../../../core/templates/LoadingFailedSign.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,YAAY,MAAM,qCAAqC,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAOhE,MAAM,iBAAiB,GAAG,CAAC,EACzB,YAAY,GAAG,wBAAwB,EACvC,aAAa,GACU,EAAE,EAAE,CAAC,CAC5B,MAAC,qBAAqB,eACpB,KAAC,kBAAkB,IACjB,GAAG,EAAE,YAAY,EACjB,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,GAAG,EACX,GAAG,EAAE,YAAY,GACjB,EAEF,KAAC,iBAAiB,IAAC,YAAY,EAAE,YAAY,GAAI,EAEhD,aAAa,CAAC,CAAC,CAAC,CACf,KAAC,MAAM,IACL,IAAI,EAAC,WAAW,EAChB,OAAO,EAAE,aAAa,EACtB,eAAe,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,EAClC,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,EACjC,KAAK,EAAE,MAAM,CAAC,UAAU,CAAC,SAAS,GAClC,CACH,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACqB,CACzB,CAAC;AAEF,eAAe,iBAAiB,CAAC;AAEjC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;sBAUlB,MAAM,CAAC,IAAI,CAAC,KAAK;;oBAEnB,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;;;;qBAOlC,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;wBAGhC,MAAM,CAAC,OAAO,CAAC,KAAK;;;CAG3C,CAAC;AAEF,MAAM,kBAAkB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;oBACpB,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;;qBAKlC,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;CAIvD,CAAC;AAMF,MAAM,iBAAiB,GAAG,CAAC,EAAE,YAAY,EAA0B,EAAE,EAAE,CAAC,CACtE,MAAC,qBAAqB,eACpB,KAAC,YAAY,cAAE,YAAY,GAAgB,EAC3C,MAAC,gBAAgB,mDACiB,cAAM,oBAAe,GAAG,EACxD,KAAC,gBAAgB,IAAC,IAAI,EAAC,6BAA6B,qCAEjC,IACF,IACG,CACzB,CAAC;AAEF,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOvC,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,CAAC,CAAA;;;oBAGT,UAAU,CAAC,iBAAiB,CAAC,MAAM;iBACtC,UAAU,CAAC,oBAAoB,CAAC,KAAK;;;qBAGjC,UAAU,CAAC,iBAAiB,CAAC,MAAM;iBACvC,UAAU,CAAC,oBAAoB,CAAC,GAAG;;CAEnD,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,CAAC,CAAA;;;oBAGb,UAAU,CAAC,iBAAiB,CAAC,MAAM;iBACtC,UAAU,CAAC,eAAe,CAAC,KAAK;;;qBAG5B,UAAU,CAAC,iBAAiB,CAAC,MAAM;iBACvC,UAAU,CAAC,eAAe,CAAC,GAAG;;CAE9C,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAEpC,CAAC","sourcesContent":["import Image from \"next/image\";\nimport Link from \"next/link\";\nimport type { MouseEventHandler } from \"react\";\nimport styled from \"styled-components\";\nimport loadFailLogo from \"../assets/logos/load_fail_logo.webp\";\nimport { Button } from \"../atoms\";\nimport { Colors, Responsive, Typography } from \"../foundations\";\n\ntype LoadingFailedSignProps = {\n  errorMessage?: string;\n  onClickReload?: MouseEventHandler<HTMLButtonElement>;\n};\n\nconst LoadingFailedSign = ({\n  errorMessage = \"Failed to load results\",\n  onClickReload,\n}: LoadingFailedSignProps) => (\n  <BaseLoadingFailedSign>\n    <LoadingFailedImage\n      src={loadFailLogo}\n      width={693}\n      height={641}\n      alt={errorMessage}\n    />\n\n    <LoadingFailedText errorMessage={errorMessage} />\n\n    {onClickReload ? (\n      <Button\n        text=\"Try Again\"\n        onClick={onClickReload}\n        backgroundColor={Colors.base.white}\n        borderColor={Colors.neutral.grey3}\n        color={Colors.typography.blackHigh}\n      />\n    ) : (\n      <></>\n    )}\n  </BaseLoadingFailedSign>\n);\n\nexport default LoadingFailedSign;\n\nconst BaseLoadingFailedSign = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n\n  width: 100%;\n  height: 100%;\n  padding: 24px;\n\n  background-color: ${Colors.base.white};\n\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    gap: 16px;\n\n    border: none;\n    border-radius: 0px;\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    gap: 24px;\n\n    border: 1px solid ${Colors.neutral.grey3};\n    border-radius: 12px;\n  }\n`;\n\nconst LoadingFailedImage = styled(Image)`\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    width: 151px;\n    height: 140px;\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    width: 173px;\n    height: 160px;\n  }\n`;\n\ntype LoadingFailedTextProps = {\n  errorMessage: string;\n};\n\nconst LoadingFailedText = ({ errorMessage }: LoadingFailedTextProps) => (\n  <BaseLoadingFailedText>\n    <ErrorMessage>{errorMessage}</ErrorMessage>\n    <ErrorDescription>\n      Please try again in a moment or <br /> contact us at{\" \"}\n      <SupportEmailLink href=\"mailto:support@grantbii.com\">\n        support@grantbii.com\n      </SupportEmailLink>\n    </ErrorDescription>\n  </BaseLoadingFailedText>\n);\n\nconst BaseLoadingFailedText = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n\n  text-align: center;\n`;\n\nconst ErrorMessage = styled.p`\n  font-weight: 700;\n\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${Typography.SUBHEADER_FONT_SIZES.small};\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${Typography.SUBHEADER_FONT_SIZES.big};\n  }\n`;\n\nconst ErrorDescription = styled.p`\n  font-weight: 400;\n\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${Typography.BODY_FONT_SIZES.small};\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${Typography.BODY_FONT_SIZES.big};\n  }\n`;\n\nconst SupportEmailLink = styled(Link)`\n  text-decoration: underline;\n`;\n"]}
+{"version":3,"file":"LoadingFailedSign.js","sourceRoot":"","sources":["../../../core/templates/LoadingFailedSign.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,YAAY,MAAM,qCAAqC,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAOhE,MAAM,iBAAiB,GAAG,CAAC,EACzB,YAAY,GAAG,wBAAwB,EACvC,aAAa,GACU,EAAE,EAAE,CAAC,CAC5B,MAAC,qBAAqB,eACpB,KAAC,kBAAkB,IACjB,GAAG,EAAE,YAAY,EACjB,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,GAAG,EACX,GAAG,EAAE,YAAY,GACjB,EAEF,KAAC,iBAAiB,IAAC,YAAY,EAAE,YAAY,GAAI,EAEhD,aAAa,CAAC,CAAC,CAAC,CACf,KAAC,MAAM,IACL,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,aAAa,EACtB,eAAe,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,EAClC,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,EACjC,KAAK,EAAE,MAAM,CAAC,UAAU,CAAC,SAAS,GAClC,CACH,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACqB,CACzB,CAAC;AAEF,eAAe,iBAAiB,CAAC;AAEjC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;sBAUlB,MAAM,CAAC,IAAI,CAAC,KAAK;;oBAEnB,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;;;;qBAOlC,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;wBAGhC,MAAM,CAAC,OAAO,CAAC,KAAK;;;CAG3C,CAAC;AAEF,MAAM,kBAAkB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;oBACpB,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;;qBAKlC,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;CAIvD,CAAC;AAMF,MAAM,iBAAiB,GAAG,CAAC,EAAE,YAAY,EAA0B,EAAE,EAAE,CAAC,CACtE,MAAC,qBAAqB,eACpB,KAAC,YAAY,cAAE,YAAY,GAAgB,EAC3C,MAAC,gBAAgB,mDACiB,cAAM,oBAAe,GAAG,EACxD,KAAC,gBAAgB,IAAC,IAAI,EAAC,6BAA6B,qCAEjC,IACF,IACG,CACzB,CAAC;AAEF,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOvC,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,CAAC,CAAA;;;oBAGT,UAAU,CAAC,iBAAiB,CAAC,MAAM;iBACtC,UAAU,CAAC,oBAAoB,CAAC,KAAK;;;qBAGjC,UAAU,CAAC,iBAAiB,CAAC,MAAM;iBACvC,UAAU,CAAC,oBAAoB,CAAC,GAAG;;CAEnD,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,CAAC,CAAA;;;oBAGb,UAAU,CAAC,iBAAiB,CAAC,MAAM;iBACtC,UAAU,CAAC,eAAe,CAAC,KAAK;;;qBAG5B,UAAU,CAAC,iBAAiB,CAAC,MAAM;iBACvC,UAAU,CAAC,eAAe,CAAC,GAAG;;CAE9C,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAEpC,CAAC","sourcesContent":["import Image from \"next/image\";\nimport Link from \"next/link\";\nimport type { MouseEventHandler } from \"react\";\nimport styled from \"styled-components\";\nimport loadFailLogo from \"../assets/logos/load_fail_logo.webp\";\nimport { Button } from \"../atoms\";\nimport { Colors, Responsive, Typography } from \"../foundations\";\n\ntype LoadingFailedSignProps = {\n  errorMessage?: string;\n  onClickReload?: MouseEventHandler<HTMLButtonElement>;\n};\n\nconst LoadingFailedSign = ({\n  errorMessage = \"Failed to load results\",\n  onClickReload,\n}: LoadingFailedSignProps) => (\n  <BaseLoadingFailedSign>\n    <LoadingFailedImage\n      src={loadFailLogo}\n      width={693}\n      height={641}\n      alt={errorMessage}\n    />\n\n    <LoadingFailedText errorMessage={errorMessage} />\n\n    {onClickReload ? (\n      <Button\n        label=\"Try Again\"\n        onClick={onClickReload}\n        backgroundColor={Colors.base.white}\n        borderColor={Colors.neutral.grey3}\n        color={Colors.typography.blackHigh}\n      />\n    ) : (\n      <></>\n    )}\n  </BaseLoadingFailedSign>\n);\n\nexport default LoadingFailedSign;\n\nconst BaseLoadingFailedSign = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n\n  width: 100%;\n  height: 100%;\n  padding: 24px;\n\n  background-color: ${Colors.base.white};\n\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    gap: 16px;\n\n    border: none;\n    border-radius: 0px;\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    gap: 24px;\n\n    border: 1px solid ${Colors.neutral.grey3};\n    border-radius: 12px;\n  }\n`;\n\nconst LoadingFailedImage = styled(Image)`\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    width: 151px;\n    height: 140px;\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    width: 173px;\n    height: 160px;\n  }\n`;\n\ntype LoadingFailedTextProps = {\n  errorMessage: string;\n};\n\nconst LoadingFailedText = ({ errorMessage }: LoadingFailedTextProps) => (\n  <BaseLoadingFailedText>\n    <ErrorMessage>{errorMessage}</ErrorMessage>\n    <ErrorDescription>\n      Please try again in a moment or <br /> contact us at{\" \"}\n      <SupportEmailLink href=\"mailto:support@grantbii.com\">\n        support@grantbii.com\n      </SupportEmailLink>\n    </ErrorDescription>\n  </BaseLoadingFailedText>\n);\n\nconst BaseLoadingFailedText = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n\n  text-align: center;\n`;\n\nconst ErrorMessage = styled.p`\n  font-weight: 700;\n\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${Typography.SUBHEADER_FONT_SIZES.small};\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${Typography.SUBHEADER_FONT_SIZES.big};\n  }\n`;\n\nconst ErrorDescription = styled.p`\n  font-weight: 400;\n\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${Typography.BODY_FONT_SIZES.small};\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${Typography.BODY_FONT_SIZES.big};\n  }\n`;\n\nconst SupportEmailLink = styled(Link)`\n  text-decoration: underline;\n`;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grantbii/design-system",
-  "version": "1.4.10",
+  "version": "1.5.0",
   "description": "Grantbii's Design System",
   "homepage": "https://design.grantbii.com",
   "repository": {

package/stories/atoms/Button.stories.d.ts

@@ -8,3 +8,4 @@ export declare const LeftIcon: Story;
 export declare const RightIcon: Story;
 export declare const BothIcons: Story;
 export declare const Underline: Story;
+export declare const GrantObjectivesFilter: Story;

package/stories/atoms/Button.stories.js

@@ -1,4 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Colors, Icons } from "@/.";
+import styled from "styled-components";
 const meta = {
     title: "Atoms/Button",
     component: Button,
@@ -9,7 +11,7 @@ const meta = {
 };
 export default meta;
 const baseArgs = {
-    text: "Button",
+    label: "Button",
     onClick: () => alert("You have clicked on the button."),
 };
 export const TextOnly = {
@@ -41,4 +43,20 @@ export const Underline = {
         color: Colors.typography.blackMedium,
     },
 };
+const Content = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  width: 200px;
+`;
+export const GrantObjectivesFilter = {
+    args: {
+        borderColor: Colors.neutral.grey3,
+        backgroundColor: Colors.base.white,
+        color: Colors.typography.blackMedium,
+        onClick: () => alert("You have clicked on the button."),
+        label: (_jsxs(Content, { children: [_jsx("p", { children: "Select grant objectives" }), _jsx(Icons.CaretRightIcon, { size: 20 })] })),
+    },
+};
 //# sourceMappingURL=Button.stories.js.map

package/stories/atoms/Button.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../../stories/atoms/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,CAAC;AAG5C,MAAM,IAAI,GAAwB;IAChC,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,MAAM;IACjB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG;IACf,IAAI,EAAE,QAAQ;IACd,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,iCAAiC,CAAC;CACxD,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE,QAAQ;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,QAAQ,EAAE,KAAK,CAAC,QAAQ;KACzB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,SAAS,EAAE,KAAK,CAAC,SAAS;KAC3B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,QAAQ,EAAE,KAAK,CAAC,eAAe;QAC/B,SAAS,EAAE,KAAK,CAAC,iBAAiB;KACnC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,SAAS,EAAE,IAAI;QACf,KAAK,EAAE,MAAM,CAAC,UAAU,CAAC,WAAW;KACrC;CACF,CAAC","sourcesContent":["import { Button, Colors, Icons } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nconst meta: Meta<typeof Button> = {\n  title: \"Atoms/Button\",\n  component: Button,\n  tags: [\"autodocs\"],\n  parameters: {\n    layout: \"centered\",\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst baseArgs = {\n  text: \"Button\",\n  onClick: () => alert(\"You have clicked on the button.\"),\n};\n\nexport const TextOnly: Story = {\n  args: baseArgs,\n};\n\nexport const LeftIcon: Story = {\n  args: {\n    ...baseArgs,\n    LeftIcon: Icons.PlusIcon,\n  },\n};\n\nexport const RightIcon: Story = {\n  args: {\n    ...baseArgs,\n    RightIcon: Icons.MinusIcon,\n  },\n};\n\nexport const BothIcons: Story = {\n  args: {\n    ...baseArgs,\n    LeftIcon: Icons.SmileyXEyesIcon,\n    RightIcon: Icons.SmileyMeltingIcon,\n  },\n};\n\nexport const Underline: Story = {\n  args: {\n    ...baseArgs,\n    underline: true,\n    color: Colors.typography.blackMedium,\n  },\n};\n"]}
+{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../../stories/atoms/Button.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,CAAC;AAE5C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,IAAI,GAAwB;IAChC,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,MAAM;IACjB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG;IACf,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,iCAAiC,CAAC;CACxD,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE,QAAQ;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,QAAQ,EAAE,KAAK,CAAC,QAAQ;KACzB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,SAAS,EAAE,KAAK,CAAC,SAAS;KAC3B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,QAAQ,EAAE,KAAK,CAAC,eAAe;QAC/B,SAAS,EAAE,KAAK,CAAC,iBAAiB;KACnC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,SAAS,EAAE,IAAI;QACf,KAAK,EAAE,MAAM,CAAC,UAAU,CAAC,WAAW;KACrC;CACF,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMzB,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAU;IAC1C,IAAI,EAAE;QACJ,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK;QACjC,eAAe,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK;QAClC,KAAK,EAAE,MAAM,CAAC,UAAU,CAAC,WAAW;QACpC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,iCAAiC,CAAC;QACvD,KAAK,EAAE,CACL,MAAC,OAAO,eACN,kDAA8B,EAC9B,KAAC,KAAK,CAAC,cAAc,IAAC,IAAI,EAAE,EAAE,GAAI,IAC1B,CACX;KACF;CACF,CAAC","sourcesContent":["import { Button, Colors, Icons } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport styled from \"styled-components\";\n\nconst meta: Meta<typeof Button> = {\n  title: \"Atoms/Button\",\n  component: Button,\n  tags: [\"autodocs\"],\n  parameters: {\n    layout: \"centered\",\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst baseArgs = {\n  label: \"Button\",\n  onClick: () => alert(\"You have clicked on the button.\"),\n};\n\nexport const TextOnly: Story = {\n  args: baseArgs,\n};\n\nexport const LeftIcon: Story = {\n  args: {\n    ...baseArgs,\n    LeftIcon: Icons.PlusIcon,\n  },\n};\n\nexport const RightIcon: Story = {\n  args: {\n    ...baseArgs,\n    RightIcon: Icons.MinusIcon,\n  },\n};\n\nexport const BothIcons: Story = {\n  args: {\n    ...baseArgs,\n    LeftIcon: Icons.SmileyXEyesIcon,\n    RightIcon: Icons.SmileyMeltingIcon,\n  },\n};\n\nexport const Underline: Story = {\n  args: {\n    ...baseArgs,\n    underline: true,\n    color: Colors.typography.blackMedium,\n  },\n};\n\nconst Content = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  width: 200px;\n`;\n\nexport const GrantObjectivesFilter: Story = {\n  args: {\n    borderColor: Colors.neutral.grey3,\n    backgroundColor: Colors.base.white,\n    color: Colors.typography.blackMedium,\n    onClick: () => alert(\"You have clicked on the button.\"),\n    label: (\n      <Content>\n        <p>Select grant objectives</p>\n        <Icons.CaretRightIcon size={20} />\n      </Content>\n    ),\n  },\n};\n"]}

package/stories/molecules/Badges.stories.d.ts

@@ -3,5 +3,7 @@ import type { Meta, StoryObj } from "@storybook/nextjs-vite";
 declare const meta: Meta<typeof Badges>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Scrollable: Story;
-export declare const WrapAround: Story;
+export declare const ScrollableVertical: Story;
+export declare const UnscrollableVertical: Story;
+export declare const ScrollableHorizontal: Story;
+export declare const UnscrollableHorizontal: Story;

package/stories/molecules/Badges.stories.js

@@ -10,16 +10,32 @@ const meta = {
 };
 export default meta;
 const allBadgeProps = mapEnumToOptions(Objective);
-export const Scrollable = {
+export const ScrollableVertical = {
     args: {
         allBadgeProps,
-        isScrollable: true,
+        scrollable: true,
+        vertical: true,
     },
 };
-export const WrapAround = {
+export const UnscrollableVertical = {
     args: {
         allBadgeProps,
-        isScrollable: false,
+        scrollable: false,
+        vertical: true,
+    },
+};
+export const ScrollableHorizontal = {
+    args: {
+        allBadgeProps,
+        scrollable: true,
+        vertical: false,
+    },
+};
+export const UnscrollableHorizontal = {
+    args: {
+        allBadgeProps,
+        scrollable: false,
+        vertical: false,
     },
 };
 //# sourceMappingURL=Badges.stories.js.map

package/stories/molecules/Badges.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badges.stories.js","sourceRoot":"","sources":["../../../stories/molecules/Badges.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAmB,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAG1D,MAAM,IAAI,GAAwB;IAChC,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,MAAM;IACjB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,aAAa,GAAiB,gBAAgB,CAAC,SAAS,CAAC,CAAC;AAEhE,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,aAAa;QACb,YAAY,EAAE,IAAI;KACnB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,aAAa;QACb,YAAY,EAAE,KAAK;KACpB;CACF,CAAC","sourcesContent":["import { Badges, mapEnumToOptions, type BadgeProps } from \"@/.\";\nimport { Objective } from \"@grantbii/ui-core/grant/enums\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nconst meta: Meta<typeof Badges> = {\n  title: \"Molecules/Badges\",\n  component: Badges,\n  tags: [\"autodocs\"],\n  parameters: {\n    layout: \"centered\",\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst allBadgeProps: BadgeProps[] = mapEnumToOptions(Objective);\n\nexport const Scrollable: Story = {\n  args: {\n    allBadgeProps,\n    isScrollable: true,\n  },\n};\n\nexport const WrapAround: Story = {\n  args: {\n    allBadgeProps,\n    isScrollable: false,\n  },\n};\n"]}
+{"version":3,"file":"Badges.stories.js","sourceRoot":"","sources":["../../../stories/molecules/Badges.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAmB,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAG1D,MAAM,IAAI,GAAwB;IAChC,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,MAAM;IACjB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,aAAa,GAAiB,gBAAgB,CAAC,SAAS,CAAC,CAAC;AAEhE,MAAM,CAAC,MAAM,kBAAkB,GAAU;IACvC,IAAI,EAAE;QACJ,aAAa;QACb,UAAU,EAAE,IAAI;QAChB,QAAQ,EAAE,IAAI;KACf;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAU;IACzC,IAAI,EAAE;QACJ,aAAa;QACb,UAAU,EAAE,KAAK;QACjB,QAAQ,EAAE,IAAI;KACf;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAU;IACzC,IAAI,EAAE;QACJ,aAAa;QACb,UAAU,EAAE,IAAI;QAChB,QAAQ,EAAE,KAAK;KAChB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAU;IAC3C,IAAI,EAAE;QACJ,aAAa;QACb,UAAU,EAAE,KAAK;QACjB,QAAQ,EAAE,KAAK;KAChB;CACF,CAAC","sourcesContent":["import { Badges, mapEnumToOptions, type BadgeProps } from \"@/.\";\nimport { Objective } from \"@grantbii/ui-core/grant/enums\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nconst meta: Meta<typeof Badges> = {\n  title: \"Molecules/Badges\",\n  component: Badges,\n  tags: [\"autodocs\"],\n  parameters: {\n    layout: \"centered\",\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst allBadgeProps: BadgeProps[] = mapEnumToOptions(Objective);\n\nexport const ScrollableVertical: Story = {\n  args: {\n    allBadgeProps,\n    scrollable: true,\n    vertical: true,\n  },\n};\n\nexport const UnscrollableVertical: Story = {\n  args: {\n    allBadgeProps,\n    scrollable: false,\n    vertical: true,\n  },\n};\n\nexport const ScrollableHorizontal: Story = {\n  args: {\n    allBadgeProps,\n    scrollable: true,\n    vertical: false,\n  },\n};\n\nexport const UnscrollableHorizontal: Story = {\n  args: {\n    allBadgeProps,\n    scrollable: false,\n    vertical: false,\n  },\n};\n"]}

package/stories/molecules/Modal.stories.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { Button, Modal, useModal } from "@/.";
 const ModalExample = (props) => {
     const { showModal, openModal, closeModal } = useModal();
-    return (_jsxs("div", { children: [_jsx(Button, { text: "Click to open modal", onClick: () => openModal() }), showModal ? (_jsx(Modal, { ...props, onClickClose: () => closeModal() })) : (_jsx(_Fragment, {}))] }));
+    return (_jsxs("div", { children: [_jsx(Button, { label: "Click to open modal", onClick: () => openModal() }), showModal ? (_jsx(Modal, { ...props, onClickClose: () => closeModal() })) : (_jsx(_Fragment, {}))] }));
 };
 const meta = {
     title: "Molecules/Modal",