@grantbii/design-system 1.2.0 → 1.3.0

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

@@ -2,9 +2,9 @@ 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,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,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, 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 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/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":";AAAA,OAAO,EAIL,WAAW,EACX,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAWzC,MAAM,KAAK,GAAG,CAAC,EACb,MAAM,EACN,OAAO,EACP,MAAM,EACN,KAAK,EACL,MAAM,EACN,aAAa,GACF,EAAE,EAAE,CACf,YAAY,CACV,KAAC,OAAO,cACN,MAAC,WAAW,cAAS,KAAK,aAAW,MAAM,aACxC,MAAM,CAAC,CAAC,CAAC,KAAC,WAAW,cAAE,MAAM,GAAe,CAAC,CAAC,CAAC,mBAAK,EAErD,KAAC,SAAS,cAAE,OAAO,GAAa,EAEhC,MAAC,WAAW,eACV,KAAC,YAAY,IAAC,OAAO,EAAE,aAAa,GAAI,EACvC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,mBAAK,IACZ,IACF,GACN,EACV,QAAQ,CAAC,IAAI,CACd,CAAC;AAEJ,eAAe,KAAK,CAAC;AAErB,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,EAAE;IAC3B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC1C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,SAAS,CAAC;IAC3C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,UAAU,EAAE,CAAC;IACf,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,YAAY,EAAE,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO;QACL,SAAS;QACT,SAAS;QACT,UAAU;KACX,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;sBACJ,MAAM,CAAC,QAAQ,CAAC,OAAO;;;;;;;;;;;;;;CAc5C,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAuC;;;;sBAI/C,MAAM,CAAC,IAAI,CAAC,KAAK;;;;;oBAKnB,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;;;;;;;;qBAWlC,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;;aAK3C,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM;cACrB,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO;;;;CAIrC,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;6BAKD,MAAM,CAAC,OAAO,CAAC,KAAK;CAChD,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;CAgB3B,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAM7B,CAAC;AAMF,MAAM,YAAY,GAAG,CAAC,EAAE,OAAO,EAAqB,EAAE,EAAE,CAAC,CACvD,KAAC,MAAM,IACL,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,EACrC,KAAK,EAAE,MAAM,CAAC,UAAU,CAAC,SAAS,GAClC,CACH,CAAC","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,5 +1,4 @@
 export { default as Badges } from "./Badges";
-export { default as Dropdown, type DropdownProps } from "./Dropdown";
 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,5 +1,4 @@
 export { default as Badges } from "./Badges";
-export { default as Dropdown } from "./Dropdown";
 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,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,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 Badges } from \"./Badges\";\nexport { 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.2.0",
+  "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"]}