@grantbii/design-system 1.1.2 → 1.3.0

package/core/atoms/Badge.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentType, MouseEventHandler } from "react";
 import { Icons } from "../foundations";
-type BadgeProps = {
+export type BadgeProps = {
     text: string;
     Icon?: ComponentType<Icons.IconProps>;
     iconSize?: string | number;

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,IAAI,EACJ,IAAI,EACJ,QAAQ,GAAG,EAAE,EACb,UAAU,GAAG,SAAS,EACtB,YAAY,EACZ,eAAe,EACf,eAAe,EACf,KAAK,GACM,EAAE,EAAE,CAAC,CAChB,MAAC,SAAS,wBAAmB,eAAe,YAAU,KAAK,aACzD,MAAC,YAAY,oBAAe,CAAC,CAAC,YAAY,kBAAgB,eAAe,aACtE,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,IAAI,GAAa,IAChB,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 } from \"react\";\nimport styled from \"styled-components\";\nimport { Colors, Icons, Responsive, Typography } from \"../foundations\";\n\ntype BadgeProps = {\n  text: string;\n  Icon?: ComponentType<Icons.IconProps>;\n  iconSize?: string | number;\n  iconWeight?: Icons.IconWeight;\n  onClickClose?: MouseEventHandler<HTMLButtonElement>;\n  textWidthPixels?: number;\n  backgroundColor?: string;\n  color?: string;\n};\n\nconst Badge = ({\n  text,\n  Icon,\n  iconSize = 20,\n  iconWeight = \"regular\",\n  onClickClose,\n  textWidthPixels,\n  backgroundColor,\n  color,\n}: BadgeProps) => (\n  <BaseBadge $backgroundColor={backgroundColor} $color={color}>\n    <BadgeContent $isCloseable={!!onClickClose} $widthPixels={textWidthPixels}>\n      {Icon ? (\n        <IconContainer>\n          <Icon color={color} size={iconSize} weight={iconWeight} />\n        </IconContainer>\n      ) : (\n        <></>\n      )}\n      <BadgeText>{text}</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: 130px;\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,IAAI,EACJ,IAAI,EACJ,QAAQ,GAAG,EAAE,EACb,UAAU,GAAG,SAAS,EACtB,YAAY,EACZ,eAAe,EACf,eAAe,EACf,KAAK,GACM,EAAE,EAAE,CAAC,CAChB,MAAC,SAAS,wBAAmB,eAAe,YAAU,KAAK,aACzD,MAAC,YAAY,oBAAe,CAAC,CAAC,YAAY,kBAAgB,eAAe,aACtE,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,IAAI,GAAa,IAChB,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 } from \"react\";\nimport styled from \"styled-components\";\nimport { Colors, Icons, Responsive, Typography } from \"../foundations\";\n\nexport type BadgeProps = {\n  text: string;\n  Icon?: ComponentType<Icons.IconProps>;\n  iconSize?: string | number;\n  iconWeight?: Icons.IconWeight;\n  onClickClose?: MouseEventHandler<HTMLButtonElement>;\n  textWidthPixels?: number;\n  backgroundColor?: string;\n  color?: string;\n};\n\nconst Badge = ({\n  text,\n  Icon,\n  iconSize = 20,\n  iconWeight = \"regular\",\n  onClickClose,\n  textWidthPixels,\n  backgroundColor,\n  color,\n}: BadgeProps) => (\n  <BaseBadge $backgroundColor={backgroundColor} $color={color}>\n    <BadgeContent $isCloseable={!!onClickClose} $widthPixels={textWidthPixels}>\n      {Icon ? (\n        <IconContainer>\n          <Icon color={color} size={iconSize} weight={iconWeight} />\n        </IconContainer>\n      ) : (\n        <></>\n      )}\n      <BadgeText>{text}</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: 130px;\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"]}

package/core/{molecules → atoms}/Dropdown.js

@@ -1,6 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Select } from "../atoms";
-import {} from "../foundations";
+import styled from "styled-components";
+import { Colors } from "../foundations";
+import { InputValidation } from "./shared";
 const Dropdown = ({ options, defaultLabel, ...selectProps }) => (_jsxs(Select, { ...selectProps, children: [_jsx("option", { hidden: true, disabled: true, value: "", children: defaultLabel ? defaultLabel : "-" }), options.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value)))] }));
 export default Dropdown;
+const Select = styled.select `
+  padding: 12px 16px;
+  background-color: ${Colors.base.white};
+  border-radius: 6px;
+
+  ${InputValidation}
+`;
 //# sourceMappingURL=Dropdown.js.map

package/core/atoms/Dropdown.js.map

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

package/core/atoms/Input.d.ts

@@ -1,2 +1,8 @@
-declare const Input: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+import type { DetailedHTMLProps, InputHTMLAttributes } from "react";
+import { type Option } from "../foundations";
+type InputProps = {
+    datalistId?: string;
+    datalistOptions?: Option[];
+} & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+declare const Input: ({ datalistOptions, datalistId, ...inputProps }: InputProps) => import("react/jsx-runtime").JSX.Element;
 export default Input;

package/core/atoms/Input.js

@@ -1,12 +1,15 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
-import { InputValidation } from "./shared";
 import { Colors } from "../foundations";
-const Input = styled.input `
+import { InputValidation } from "./shared";
+const Input = ({ datalistOptions, datalistId, ...inputProps }) => (_jsxs(_Fragment, { children: [_jsx(BaseInput, { ...inputProps, list: datalistId }), datalistId && datalistOptions ? (_jsx(Datalist, { id: datalistId, options: datalistOptions })) : (_jsx(_Fragment, {}))] }));
+export default Input;
+const BaseInput = styled.input `
   padding: 12px 16px;
   background-color: ${Colors.base.white};
   border-radius: 6px;
 
   ${InputValidation}
 `;
-export default Input;
+const Datalist = ({ id, options }) => (_jsx("datalist", { id: id, children: options.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value))) }));
 //# sourceMappingURL=Input.js.map

package/core/atoms/Input.js.map

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

package/core/atoms/index.d.ts

@@ -1,10 +1,10 @@
-export { default as Badge } from "./Badge";
+export { default as Badge, type BadgeProps } from "./Badge";
 export { default as BrandLogo } from "./BrandLogo";
 export { default as Button } from "./Button";
 export { default as Checkbox } from "./Checkbox";
+export { default as Dropdown, type DropdownProps } from "./Dropdown";
 export { default as Input } from "./Input";
 export { default as LinkButton } from "./LinkButton";
 export { default as PageLoader } from "./PageLoader";
 export { default as RadioButton } from "./RadioButton";
-export { default as Select } from "./Select";
 export { default as Textarea } from "./Textarea";

package/core/atoms/index.js

@@ -2,10 +2,10 @@ export { default as Badge } from "./Badge";
 export { default as BrandLogo } from "./BrandLogo";
 export { default as Button } from "./Button";
 export { default as Checkbox } from "./Checkbox";
+export { default as Dropdown } from "./Dropdown";
 export { default as Input } from "./Input";
 export { default as LinkButton } from "./LinkButton";
 export { default as PageLoader } from "./PageLoader";
 export { default as RadioButton } from "./RadioButton";
-export { default as Select } from "./Select";
 export { default as Textarea } from "./Textarea";
 //# sourceMappingURL=index.js.map

package/core/atoms/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { default as Badge } from \"./Badge\";\nexport { default as BrandLogo } from \"./BrandLogo\";\nexport { default as Button } from \"./Button\";\nexport { default as Checkbox } from \"./Checkbox\";\nexport { default as Input } from \"./Input\";\nexport { default as LinkButton } from \"./LinkButton\";\nexport { default as PageLoader } from \"./PageLoader\";\nexport { default as RadioButton } from \"./RadioButton\";\nexport { default as Select } from \"./Select\";\nexport { default as Textarea } from \"./Textarea\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAmB,MAAM,SAAS,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAsB,MAAM,YAAY,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { default as Badge, type BadgeProps } from \"./Badge\";\nexport { default as BrandLogo } from \"./BrandLogo\";\nexport { default as Button } from \"./Button\";\nexport { default as Checkbox } from \"./Checkbox\";\nexport { default as Dropdown, type DropdownProps } from \"./Dropdown\";\nexport { default as Input } from \"./Input\";\nexport { default as LinkButton } from \"./LinkButton\";\nexport { default as PageLoader } from \"./PageLoader\";\nexport { default as RadioButton } from \"./RadioButton\";\nexport { default as Textarea } from \"./Textarea\";\n"]}

package/core/molecules/Badges.d.ts

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

package/core/molecules/Badges.js

@@ -0,0 +1,28 @@
+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}` }))) }));
+export default Badges;
+const BaseBadges = styled.div `
+  display: flex;
+  gap: 8px;
+
+  ${({ $isScrollable = false }) => $isScrollable
+    ? 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;
+        `}
+`;
+//# sourceMappingURL=Badges.js.map

package/core/molecules/Badges.js.map

@@ -0,0 +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"]}

package/core/molecules/Modal.d.ts

@@ -6,8 +6,9 @@ type ModalProps = {
     width?: string;
     height?: string;
     onClickCancel: MouseEventHandler<HTMLButtonElement>;
+    cancelText?: string;
 };
-declare const Modal: ({ header, content, footer, width, height, onClickCancel, }: ModalProps) => import("react").ReactPortal;
+declare const Modal: ({ header, content, footer, width, height, onClickCancel, cancelText, }: ModalProps) => import("react").ReactPortal;
 export default Modal;
 export declare const useModal: () => {
     showModal: boolean;

package/core/molecules/Modal.js

@@ -4,7 +4,7 @@ import styled from "styled-components";
 import { Button } from "../atoms";
 import { Colors, Responsive } from "../foundations";
 import { createPortal } from "react-dom";
-const Modal = ({ header, content, footer, width, height, onClickCancel, }) => createPortal(_jsx(Overlay, { children: _jsxs(ModalWindow, { "$width": width, "$height": height, children: [header ? _jsx(ModalHeader, { children: header }) : _jsx(_Fragment, {}), _jsx(ModalBody, { children: content }), _jsxs(ModalFooter, { children: [_jsx(CancelButton, { onClick: onClickCancel }), footer ? footer : _jsx(_Fragment, {})] })] }) }), document.body);
+const Modal = ({ header, content, footer, width, height, onClickCancel, cancelText, }) => createPortal(_jsx(Overlay, { children: _jsxs(ModalWindow, { "$width": width, "$height": height, children: [header ? _jsx(ModalHeader, { children: header }) : _jsx(_Fragment, {}), _jsx(ModalBody, { children: content }), _jsxs(ModalFooter, { children: [_jsx(CancelButton, { onClick: onClickCancel, cancelText: cancelText }), footer ? footer : _jsx(_Fragment, {})] })] }) }), document.body);
 export default Modal;
 export const useModal = () => {
     const [showModal, setShowModal] = useState(false);
@@ -106,5 +106,5 @@ const ModalFooter = styled.div `
 
   padding: 24px;
 `;
-const CancelButton = ({ onClick }) => (_jsx(Button, { text: "Cancel", onClick: onClick, backgroundColor: Colors.neutral.grey3, color: Colors.typography.blackHigh }));
+const CancelButton = ({ onClick, cancelText = "Cancel", }) => (_jsx(Button, { text: cancelText, 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  onClickCancel: MouseEventHandler<HTMLButtonElement>;\n};\n\nconst Modal = ({\n  header,\n  content,\n  footer,\n  width,\n  height,\n  onClickCancel,\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          <CancelButton onClick={onClickCancel} />\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: 6px;\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: 24px;\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: 24px;\n`;\n\ntype CancelButtonProps = {\n  onClick: MouseEventHandler<HTMLButtonElement>;\n};\n\nconst CancelButton = ({ onClick }: CancelButtonProps) => (\n  <Button\n    text=\"Cancel\"\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  onClickCancel: MouseEventHandler<HTMLButtonElement>;\n  cancelText?: string;\n};\n\nconst Modal = ({\n  header,\n  content,\n  footer,\n  width,\n  height,\n  onClickCancel,\n  cancelText,\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          <CancelButton onClick={onClickCancel} cancelText={cancelText} />\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: 6px;\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: 24px;\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: 24px;\n`;\n\ntype CancelButtonProps = {\n  onClick: MouseEventHandler<HTMLButtonElement>;\n  cancelText?: string;\n};\n\nconst CancelButton = ({\n  onClick,\n  cancelText = \"Cancel\",\n}: CancelButtonProps) => (\n  <Button\n    text={cancelText}\n    onClick={onClick}\n    backgroundColor={Colors.neutral.grey3}\n    color={Colors.typography.blackHigh}\n  />\n);\n"]}

package/core/molecules/RadioButtons.js

@@ -2,9 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import styled from "styled-components";
 import { RadioButton } from "../atoms";
-const RadioButtons = ({ name, options }) => {
-    return (_jsx(RadioGroup, { children: options.map(({ value, ...props }) => (_createElement(RadioButton, { ...props, key: `${name}-${value}`, value: value, name: name }))) }));
-};
+const RadioButtons = ({ name, options }) => (_jsx(RadioGroup, { children: options.map(({ value, ...props }) => (_createElement(RadioButton, { ...props, key: `${name}-${value}`, value: value, name: name }))) }));
 export default RadioButtons;
 const RadioGroup = styled.div `
   display: flex;

package/core/molecules/RadioButtons.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButtons.js","sourceRoot":"","sources":["../../../core/molecules/RadioButtons.tsx"],"names":[],"mappings":";;AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAWvC,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAoB,EAAE,EAAE;IAC3D,OAAO,CACL,KAAC,UAAU,cACR,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CACpC,eAAC,WAAW,OACN,KAAK,EACT,GAAG,EAAE,GAAG,IAAI,IAAI,KAAK,EAAE,EACvB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,GACV,CACH,CAAC,GACS,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAE5B,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAI5B,CAAC","sourcesContent":["import type { DetailedHTMLProps, InputHTMLAttributes } from \"react\";\nimport styled from \"styled-components\";\nimport { RadioButton } from \"../atoms\";\nimport type { Option } from \"../foundations\";\n\nexport type RadioOption = Option &\n  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;\n\ntype RadioButtonProps = {\n  name?: string;\n  options: RadioOption[];\n};\n\nconst RadioButtons = ({ name, options }: RadioButtonProps) => {\n  return (\n    <RadioGroup>\n      {options.map(({ value, ...props }) => (\n        <RadioButton\n          {...props}\n          key={`${name}-${value}`}\n          value={value}\n          name={name}\n        />\n      ))}\n    </RadioGroup>\n  );\n};\n\nexport default RadioButtons;\n\nconst RadioGroup = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 12px;\n`;\n"]}
+{"version":3,"file":"RadioButtons.js","sourceRoot":"","sources":["../../../core/molecules/RadioButtons.tsx"],"names":[],"mappings":";;AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAWvC,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAoB,EAAE,EAAE,CAAC,CAC5D,KAAC,UAAU,cACR,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CACpC,eAAC,WAAW,OACN,KAAK,EACT,GAAG,EAAE,GAAG,IAAI,IAAI,KAAK,EAAE,EACvB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,GACV,CACH,CAAC,GACS,CACd,CAAC;AAEF,eAAe,YAAY,CAAC;AAE5B,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAI5B,CAAC","sourcesContent":["import type { DetailedHTMLProps, InputHTMLAttributes } from \"react\";\nimport styled from \"styled-components\";\nimport { RadioButton } from \"../atoms\";\nimport type { Option } from \"../foundations\";\n\nexport type RadioOption = Option &\n  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;\n\ntype RadioButtonProps = {\n  name?: string;\n  options: RadioOption[];\n};\n\nconst RadioButtons = ({ name, options }: RadioButtonProps) => (\n  <RadioGroup>\n    {options.map(({ value, ...props }) => (\n      <RadioButton\n        {...props}\n        key={`${name}-${value}`}\n        value={value}\n        name={name}\n      />\n    ))}\n  </RadioGroup>\n);\n\nexport default RadioButtons;\n\nconst RadioGroup = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 12px;\n`;\n"]}

package/core/molecules/index.d.ts

@@ -1,4 +1,4 @@
-export { default as Dropdown, type DropdownProps } from "./Dropdown";
+export { default as Badges } from "./Badges";
 export { default as FileDrop, useFileDrop } from "./FileDrop";
 export { default as Modal, useModal } from "./Modal";
 export { default as RadioButtons, type RadioOption } from "./RadioButtons";

package/core/molecules/index.js

@@ -1,4 +1,4 @@
-export { default as Dropdown } from "./Dropdown";
+export { default as Badges } from "./Badges";
 export { default as FileDrop, useFileDrop } from "./FileDrop";
 export { default as Modal, useModal } from "./Modal";
 export { default as RadioButtons } from "./RadioButtons";

package/core/molecules/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/molecules/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAsB,MAAM,YAAY,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAoB,MAAM,gBAAgB,CAAC","sourcesContent":["export { default as Dropdown, type DropdownProps } from \"./Dropdown\";\nexport { default as FileDrop, useFileDrop } from \"./FileDrop\";\nexport { default as Modal, useModal } from \"./Modal\";\nexport { default as RadioButtons, type RadioOption } from \"./RadioButtons\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/molecules/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAoB,MAAM,gBAAgB,CAAC","sourcesContent":["export { default as Badges } from \"./Badges\";\nexport { default as FileDrop, useFileDrop } from \"./FileDrop\";\nexport { default as Modal, useModal } from \"./Modal\";\nexport { default as RadioButtons, type RadioOption } from \"./RadioButtons\";\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grantbii/design-system",
-  "version": "1.1.2",
+  "version": "1.3.0",
   "description": "Grantbii's Design System",
   "homepage": "https://design.grantbii.com",
   "repository": {
@@ -20,39 +20,39 @@
   },
   "dependencies": {
     "@grantbii/ui-core": "1.0.0",
-    "@phosphor-icons/react": "^2.1.10",
-    "country-flag-icons": "^1.5.19",
-    "next": "^15.5.2",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "react-dropzone": "^14.3.8",
-    "react-spinners": "^0.17.0",
-    "styled-components": "^6.1.19"
+    "@phosphor-icons/react": "2.1.10",
+    "country-flag-icons": "1.5.20",
+    "next": "15.5.3",
+    "react": "19.1.1",
+    "react-dom": "19.1.1",
+    "react-dropzone": "14.3.8",
+    "react-spinners": "0.17.0",
+    "styled-components": "6.1.19"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.1.1",
-    "@eslint/js": "^9.35.0",
-    "@next/eslint-plugin-next": "^15.5.2",
-    "@storybook/addon-a11y": "^9.1.5",
-    "@storybook/addon-docs": "^9.1.5",
-    "@storybook/addon-onboarding": "^9.1.5",
-    "@storybook/addon-vitest": "^9.1.5",
-    "@storybook/nextjs-vite": "^9.1.5",
-    "@types/node": "^22.18.0",
-    "@types/react": "^19.1.12",
-    "@types/react-dom": "^19.1.9",
-    "@vitest/browser": "^3.2.4",
-    "@vitest/coverage-v8": "^3.2.4",
-    "eslint": "^9.35.0",
-    "eslint-config-next": "15.5.2",
-    "eslint-plugin-storybook": "^9.1.5",
-    "husky": "^9.1.7",
-    "lint-staged": "^16.1.6",
-    "playwright": "^1.55.0",
-    "prettier": "^3.6.2",
-    "storybook": "^9.1.5",
-    "typescript": "^5.9.2",
-    "vitest": "^3.2.4"
+    "@chromatic-com/storybook": "4.1.1",
+    "@eslint/js": "9.35.0",
+    "@next/eslint-plugin-next": "15.5.3",
+    "@storybook/addon-a11y": "9.1.5",
+    "@storybook/addon-docs": "9.1.5",
+    "@storybook/addon-onboarding": "9.1.5",
+    "@storybook/addon-vitest": "9.1.5",
+    "@storybook/nextjs-vite": "9.1.5",
+    "@types/node": "22.18.0",
+    "@types/react": "19.1.12",
+    "@types/react-dom": "19.1.9",
+    "@vitest/browser": "3.2.4",
+    "@vitest/coverage-v8": "3.2.4",
+    "eslint": "9.35.0",
+    "eslint-config-next": "15.5.3",
+    "eslint-plugin-storybook": "9.1.5",
+    "husky": "9.1.7",
+    "lint-staged": "16.1.6",
+    "playwright": "1.55.0",
+    "prettier": "3.6.2",
+    "storybook": "9.1.5",
+    "typescript": "5.9.2",
+    "vitest": "3.2.4"
   },
   "lint-staged": {
     "**/*.{html,css,json,md,yaml}": [

package/stories/{molecules → atoms}/Dropdown.stories.js

@@ -21,7 +21,7 @@ const uncontrolledProps = {
     defaultValue: "",
 };
 const meta = {
-    title: "Molecules/Dropdown",
+    title: "Atoms/Dropdown",
     component: DropdownExample,
     tags: ["autodocs"],
     parameters: {

package/stories/atoms/Dropdown.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.stories.js","sourceRoot":"","sources":["../../../stories/atoms/Dropdown.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAsB,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAE3D,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAMjC,MAAM,eAAe,GAAG,CAAC,EAAE,UAAU,EAAgB,EAAE,EAAE;IACvD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAE/D,MAAM,eAAe,GAAkB;QACrC,GAAG,SAAS;QACZ,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;QACxD,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,eAAe,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;KAC1E,CAAC;IAEF,OAAO,KAAC,QAAQ,OAAK,CAAC,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB,CAAC,GAAI,CAAC;AAC9E,CAAC,CAAC;AAEF,MAAM,SAAS,GAAkB;IAC/B,OAAO,EAAE,gBAAgB,CAAC,IAAI,CAAC;IAC/B,YAAY,EAAE,wBAAwB;CACvC,CAAC;AAEF,MAAM,iBAAiB,GAAkB;IACvC,GAAG,SAAS;IACZ,YAAY,EAAE,EAAE;CACjB,CAAC;AAEF,MAAM,IAAI,GAAiC;IACzC,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,eAAe;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,UAAU,EAAE,IAAI;KACjB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,IAAI,EAAE;QACJ,UAAU,EAAE,KAAK;KAClB;CACF,CAAC","sourcesContent":["import { Dropdown, mapEnumToOptions, type DropdownProps } from \"@/.\";\nimport { Need } from \"@grantbii/ui-core/filter/enums\";\nimport { parseEnum } from \"@grantbii/ui-core/shared/enums\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport { useState } from \"react\";\n\ntype ExampleProps = {\n  controlled: boolean;\n};\n\nconst DropdownExample = ({ controlled }: ExampleProps) => {\n  const [selectedNeed, setSelectedNeed] = useState(Need.UNKNOWN);\n\n  const controlledProps: DropdownProps = {\n    ...baseProps,\n    value: selectedNeed === Need.UNKNOWN ? \"\" : selectedNeed,\n    onChange: (event) => setSelectedNeed(parseEnum(event.target.value, Need)),\n  };\n\n  return <Dropdown {...(controlled ? controlledProps : uncontrolledProps)} />;\n};\n\nconst baseProps: DropdownProps = {\n  options: mapEnumToOptions(Need),\n  defaultLabel: \"Select your grant need\",\n};\n\nconst uncontrolledProps: DropdownProps = {\n  ...baseProps,\n  defaultValue: \"\",\n};\n\nconst meta: Meta<typeof DropdownExample> = {\n  title: \"Atoms/Dropdown\",\n  component: DropdownExample,\n  tags: [\"autodocs\"],\n  parameters: {\n    layout: \"centered\",\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Controlled: Story = {\n  args: {\n    controlled: true,\n  },\n};\n\nexport const Uncontrolled: Story = {\n  args: {\n    controlled: false,\n  },\n};\n"]}

package/stories/atoms/Input.stories.d.ts

@@ -7,3 +7,4 @@ export declare const BasicInput: Story;
 export declare const NumericalField: Story;
 export declare const EmailField: Story;
 export declare const MinimumLength: Story;
+export declare const WithDatalist: Story;

package/stories/atoms/Input.stories.js

@@ -1,4 +1,5 @@
-import { Input } from "@/.";
+import { Input, mapEnumToOptions } from "@/.";
+import { SupportableCost } from "@grantbii/ui-core/grant/enums";
 const meta = {
     title: "Atoms/Input",
     component: Input,
@@ -20,4 +21,11 @@ export const EmailField = {
 export const MinimumLength = {
     args: { placeholder: "At least 10 characters", minLength: 10 },
 };
+export const WithDatalist = {
+    args: {
+        placeholder: "Enter a cost item",
+        datalistId: "supportable-cost-items",
+        datalistOptions: mapEnumToOptions(SupportableCost),
+    },
+};
 //# sourceMappingURL=Input.stories.js.map

package/stories/atoms/Input.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.stories.js","sourceRoot":"","sources":["../../../stories/atoms/Input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,CAAC;AAG5B,MAAM,IAAI,GAAuB;IAC/B,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,KAAK;IAChB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE,EAAE,WAAW,EAAE,WAAW,EAAE;CACnC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAU;IACnC,IAAI,EAAE,EAAE,WAAW,EAAE,cAAc,EAAE,IAAI,EAAE,QAAQ,EAAE;CACtD,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE,EAAE,WAAW,EAAE,kBAAkB,EAAE,IAAI,EAAE,OAAO,EAAE;CACzD,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAU;IAClC,IAAI,EAAE,EAAE,WAAW,EAAE,wBAAwB,EAAE,SAAS,EAAE,EAAE,EAAE;CAC/D,CAAC","sourcesContent":["import { Input } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nconst meta: Meta<typeof Input> = {\n  title: \"Atoms/Input\",\n  component: Input,\n  tags: [\"autodocs\"],\n  parameters: {\n    layout: \"centered\",\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const BasicInput: Story = {\n  args: { placeholder: \"Type here\" },\n};\n\nexport const NumericalField: Story = {\n  args: { placeholder: \"Numbers only\", type: \"number\" },\n};\n\nexport const EmailField: Story = {\n  args: { placeholder: \"Enter your email\", type: \"email\" },\n};\n\nexport const MinimumLength: Story = {\n  args: { placeholder: \"At least 10 characters\", minLength: 10 },\n};\n"]}
+{"version":3,"file":"Input.stories.js","sourceRoot":"","sources":["../../../stories/atoms/Input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAGhE,MAAM,IAAI,GAAuB;IAC/B,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,KAAK;IAChB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE,EAAE,WAAW,EAAE,WAAW,EAAE;CACnC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAU;IACnC,IAAI,EAAE,EAAE,WAAW,EAAE,cAAc,EAAE,IAAI,EAAE,QAAQ,EAAE;CACtD,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE,EAAE,WAAW,EAAE,kBAAkB,EAAE,IAAI,EAAE,OAAO,EAAE;CACzD,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAU;IAClC,IAAI,EAAE,EAAE,WAAW,EAAE,wBAAwB,EAAE,SAAS,EAAE,EAAE,EAAE;CAC/D,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,IAAI,EAAE;QACJ,WAAW,EAAE,mBAAmB;QAChC,UAAU,EAAE,wBAAwB;QACpC,eAAe,EAAE,gBAAgB,CAAC,eAAe,CAAC;KACnD;CACF,CAAC","sourcesContent":["import { Input, mapEnumToOptions } from \"@/.\";\nimport { SupportableCost } from \"@grantbii/ui-core/grant/enums\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nconst meta: Meta<typeof Input> = {\n  title: \"Atoms/Input\",\n  component: Input,\n  tags: [\"autodocs\"],\n  parameters: {\n    layout: \"centered\",\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const BasicInput: Story = {\n  args: { placeholder: \"Type here\" },\n};\n\nexport const NumericalField: Story = {\n  args: { placeholder: \"Numbers only\", type: \"number\" },\n};\n\nexport const EmailField: Story = {\n  args: { placeholder: \"Enter your email\", type: \"email\" },\n};\n\nexport const MinimumLength: Story = {\n  args: { placeholder: \"At least 10 characters\", minLength: 10 },\n};\n\nexport const WithDatalist: Story = {\n  args: {\n    placeholder: \"Enter a cost item\",\n    datalistId: \"supportable-cost-items\",\n    datalistOptions: mapEnumToOptions(SupportableCost),\n  },\n};\n"]}

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

@@ -0,0 +1,7 @@
+import { Badges } from "@/.";
+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;

package/stories/molecules/Badges.stories.js

@@ -0,0 +1,25 @@
+import { Badges, mapEnumToOptions } from "@/.";
+import { Objective } from "@grantbii/ui-core/grant/enums";
+const meta = {
+    title: "Molecules/Badges",
+    component: Badges,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+    },
+};
+export default meta;
+const allBadgeProps = mapEnumToOptions(Objective).map((option) => ({ text: option.label }));
+export const Scrollable = {
+    args: {
+        allBadgeProps,
+        isScrollable: true,
+    },
+};
+export const WrapAround = {
+    args: {
+        allBadgeProps,
+        isScrollable: false,
+    },
+};
+//# sourceMappingURL=Badges.stories.js.map

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

@@ -0,0 +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,GAAG,CACjE,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC,CACrC,CAAC;AAEF,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).map(\n  (option) => ({ text: option.label }),\n);\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"]}