@grantbii/design-system 1.15.0 → 1.16.1

package/core/atoms/Spacing.d.ts

@@ -1,12 +1,12 @@
-export declare const FOUR_PIXELS = "4px";
-export declare const EIGHT_PIXELS = "8px";
-export declare const TWELVE_PIXELS = "12px";
-export declare const SIXTEEN_PIXELS = "16px";
-export declare const TWENTY_PIXELS = "20px";
-export declare const TWENTY_FOUR_PIXELS = "24px";
-export declare const THIRTY_TWO_PIXELS = "32px";
-export declare const FORTY_PIXELS = "40px";
-export declare const FORTY_EIGHT_PIXELS = "48px";
-export declare const SIXTY_FOUR_PIXELS = "64px";
-export declare const EIGHTY_EIGHT_PIXELS = "88px";
-export declare const ONE_HUNDRED_PIXELS = "100px";
+export declare const px4 = "4px";
+export declare const px8 = "8px";
+export declare const px12 = "12px";
+export declare const px16 = "16px";
+export declare const px20 = "20px";
+export declare const px24 = "24px";
+export declare const px32 = "32px";
+export declare const px40 = "40px";
+export declare const px48 = "48px";
+export declare const px64 = "64px";
+export declare const px88 = "88px";
+export declare const px100 = "100px";

package/core/atoms/Spacing.js

@@ -1,13 +1,13 @@
-export const FOUR_PIXELS = "4px";
-export const EIGHT_PIXELS = "8px";
-export const TWELVE_PIXELS = "12px";
-export const SIXTEEN_PIXELS = "16px";
-export const TWENTY_PIXELS = "20px";
-export const TWENTY_FOUR_PIXELS = "24px";
-export const THIRTY_TWO_PIXELS = "32px";
-export const FORTY_PIXELS = "40px";
-export const FORTY_EIGHT_PIXELS = "48px";
-export const SIXTY_FOUR_PIXELS = "64px";
-export const EIGHTY_EIGHT_PIXELS = "88px";
-export const ONE_HUNDRED_PIXELS = "100px";
+export const px4 = "4px";
+export const px8 = "8px";
+export const px12 = "12px";
+export const px16 = "16px";
+export const px20 = "20px";
+export const px24 = "24px";
+export const px32 = "32px";
+export const px40 = "40px";
+export const px48 = "48px";
+export const px64 = "64px";
+export const px88 = "88px";
+export const px100 = "100px";
 //# sourceMappingURL=Spacing.js.map

package/core/atoms/Spacing.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spacing.js","sourceRoot":"","sources":["../../../core/atoms/Spacing.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC;AACjC,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,CAAC;AAClC,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC;AACpC,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC;AACrC,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC;AACpC,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC;AACzC,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC;AACxC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC;AACnC,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC;AACzC,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC;AACxC,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC;AAC1C,MAAM,CAAC,MAAM,kBAAkB,GAAG,OAAO,CAAC","sourcesContent":["export const FOUR_PIXELS = \"4px\";\nexport const EIGHT_PIXELS = \"8px\";\nexport const TWELVE_PIXELS = \"12px\";\nexport const SIXTEEN_PIXELS = \"16px\";\nexport const TWENTY_PIXELS = \"20px\";\nexport const TWENTY_FOUR_PIXELS = \"24px\";\nexport const THIRTY_TWO_PIXELS = \"32px\";\nexport const FORTY_PIXELS = \"40px\";\nexport const FORTY_EIGHT_PIXELS = \"48px\";\nexport const SIXTY_FOUR_PIXELS = \"64px\";\nexport const EIGHTY_EIGHT_PIXELS = \"88px\";\nexport const ONE_HUNDRED_PIXELS = \"100px\";\n"]}
+{"version":3,"file":"Spacing.js","sourceRoot":"","sources":["../../../core/atoms/Spacing.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,GAAG,GAAG,KAAK,CAAC;AACzB,MAAM,CAAC,MAAM,GAAG,GAAG,KAAK,CAAC;AACzB,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC;AAC3B,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC;AAC3B,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC;AAC3B,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC;AAC3B,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC;AAC3B,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC;AAC3B,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC;AAC3B,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC;AAC3B,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC;AAC3B,MAAM,CAAC,MAAM,KAAK,GAAG,OAAO,CAAC","sourcesContent":["export const px4 = \"4px\";\nexport const px8 = \"8px\";\nexport const px12 = \"12px\";\nexport const px16 = \"16px\";\nexport const px20 = \"20px\";\nexport const px24 = \"24px\";\nexport const px32 = \"32px\";\nexport const px40 = \"40px\";\nexport const px48 = \"48px\";\nexport const px64 = \"64px\";\nexport const px88 = \"88px\";\nexport const px100 = \"100px\";\n"]}

package/core/atoms/index.d.ts

@@ -1,7 +1,6 @@
 export { default as BrandLogo } from "./BrandLogo";
 export * as Color from "./Color";
 export * as Loaders from "./Loader";
-export { default as Overlay } from "./Overlay";
 export * as Responsive from "./Responsive";
 export * as Flags from "./RichIcon";
 export * as Icons from "./SystemIcon";

package/core/atoms/index.js

@@ -1,7 +1,6 @@
 export { default as BrandLogo } from "./BrandLogo";
 export * as Color from "./Color";
 export * as Loaders from "./Loader";
-export { default as Overlay } from "./Overlay";
 export * as Responsive from "./Responsive";
 export * as Flags from "./RichIcon";
 export * as Icons from "./SystemIcon";

package/core/atoms/index.js.map

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

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

@@ -15,7 +15,7 @@ const Overlay = styled.div `
   width: 100vw;
   height: 100vh;
 
-  background-color: "#13131366";
+  background-color: ${Color.neutral.black}80;
 `;
 export default Overlay;
 //# sourceMappingURL=Overlay.js.map

package/core/molecules/Overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overlay.js","sourceRoot":"","sources":["../../../core/molecules/Overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAA8B;;;;qBAInC,CAAC,EAAE,cAAc,GAAG,KAAK,EAAE,EAAE,EAAE,CAChD,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ;iBACvB,CAAC,EAAE,cAAc,GAAG,KAAK,EAAE,EAAE,EAAE,CAC5C,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ;;;;;;;;;;sBAUlB,KAAK,CAAC,OAAO,CAAC,KAAK;CACxC,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import styled from \"styled-components\";\nimport { Color } from \"../atoms\";\n\nconst Overlay = styled.div<{ $centerContent?: boolean }>`\n  display: flex;\n  flex-direction: column;\n\n  justify-content: ${({ $centerContent = false }) =>\n    $centerContent ? \"center\" : \"normal\"};\n  align-items: ${({ $centerContent = false }) =>\n    $centerContent ? \"center\" : \"normal\"};\n\n  z-index: 9999;\n  position: fixed;\n  top: 0px;\n  left: 0px;\n\n  width: 100vw;\n  height: 100vh;\n\n  background-color: ${Color.neutral.black}80;\n`;\n\nexport default Overlay;\n"]}

package/core/molecules/index.d.ts

@@ -2,6 +2,7 @@ export { default as Badge, type BadgeProps } from "./Badge";
 export { default as Button } from "./Button";
 export { default as Checkbox } from "./Checkbox";
 export { default as Input } from "./Input";
+export { default as Overlay } from "./Overlay";
 export { default as PageLoader } from "./PageLoader";
 export { default as RadioButton } from "./RadioButton";
 export { default as Textarea } from "./Textarea";

package/core/molecules/index.js

@@ -2,6 +2,7 @@ export { default as Badge } from "./Badge";
 export { default as Button } from "./Button";
 export { default as Checkbox } from "./Checkbox";
 export { default as Input } from "./Input";
+export { default as Overlay } from "./Overlay";
 export { default as PageLoader } from "./PageLoader";
 export { default as RadioButton } from "./RadioButton";
 export { default as Textarea } from "./Textarea";

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,KAAK,EAAmB,MAAM,SAAS,CAAC;AAC5D,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,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 Button } from \"./Button\";\nexport { default as Checkbox } from \"./Checkbox\";\nexport { default as Input } from \"./Input\";\nexport { default as PageLoader } from \"./PageLoader\";\nexport { default as RadioButton } from \"./RadioButton\";\nexport { default as Textarea } from \"./Textarea\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/molecules/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAmB,MAAM,SAAS,CAAC;AAC5D,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,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,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 Button } from \"./Button\";\nexport { default as Checkbox } from \"./Checkbox\";\nexport { default as Input } from \"./Input\";\nexport { default as Overlay } from \"./Overlay\";\nexport { default as PageLoader } from \"./PageLoader\";\nexport { default as RadioButton } from \"./RadioButton\";\nexport { default as Textarea } from \"./Textarea\";\n"]}

package/core/organisms/Modal.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useCallback, useState, } from "react";
 import { createPortal } from "react-dom";
 import styled from "styled-components";
-import { Color, Overlay, Responsive } from "../atoms";
-import { Button } from "../molecules";
+import { Color, Responsive } from "../atoms";
+import { Button, Overlay } from "../molecules";
 const Modal = ({ header, content, footer, width, height, onClickClose, closeText, }) => createPortal(_jsx(Overlay, { "$centerContent": true, children: _jsxs(ModalWindow, { "$width": width, "$height": height, children: [header ? _jsx(ModalHeader, { children: header }) : _jsx(_Fragment, {}), _jsx(ModalBody, { children: content }), onClickClose || footer ? (_jsxs(ModalFooter, { children: [onClickClose ? (_jsx(CloseButton, { onClick: onClickClose, closeText: closeText })) : (_jsx(_Fragment, {})), footer ? footer : _jsx(_Fragment, {})] })) : (_jsx(_Fragment, {}))] }) }), document.body);
 export default Modal;
 export const useModal = () => {

package/core/organisms/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../core/organisms/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 { createPortal } from \"react-dom\";\nimport styled from \"styled-components\";\nimport { Color, Overlay, Responsive } from \"../atoms\";\nimport { Button } from \"../molecules\";\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 $centerContent>\n      <ModalWindow $width={width} $height={height}>\n        {header ? <ModalHeader>{header}</ModalHeader> : <></>}\n\n        <ModalBody>{content}</ModalBody>\n\n        {onClickClose || footer ? (\n          <ModalFooter>\n            {onClickClose ? (\n              <CloseButton onClick={onClickClose} closeText={closeText} />\n            ) : (\n              <></>\n            )}\n\n            {footer ? footer : <></>}\n          </ModalFooter>\n        ) : (\n          <></>\n        )}\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 ModalWindow = styled.div<{ $width?: string; $height?: string }>`\n  display: flex;\n  flex-direction: column;\n\n  background-color: ${Color.neutral.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  margin-bottom: 12px;\n\n  border-bottom: 1px solid ${Color.neutral.grey3};\n`;\n\nconst ModalBody = styled.div`\n  display: flex;\n  flex-direction: column;\n\n  height: 100%;\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={Color.neutral.grey3}\n    color={Color.typography.blackHigh}\n  />\n);\n"]}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../core/organisms/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAIL,WAAW,EACX,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAY/C,MAAM,KAAK,GAAG,CAAC,EACb,MAAM,EACN,OAAO,EACP,MAAM,EACN,KAAK,EACL,MAAM,EACN,YAAY,EACZ,SAAS,GACE,EAAE,EAAE,CACf,YAAY,CACV,KAAC,OAAO,sCACN,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,EAE/B,YAAY,IAAI,MAAM,CAAC,CAAC,CAAC,CACxB,MAAC,WAAW,eACT,YAAY,CAAC,CAAC,CAAC,CACd,KAAC,WAAW,IAAC,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,GAAI,CAC7D,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,EAEA,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,mBAAK,IACZ,CACf,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACW,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,WAAW,GAAG,MAAM,CAAC,GAAG,CAAuC;;;;sBAI/C,KAAK,CAAC,OAAO,CAAC,KAAK;;;;;oBAKrB,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;;;;;;;6BAOD,KAAK,CAAC,OAAO,CAAC,KAAK;CAC/C,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;CAe3B,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAM7B,CAAC;AAOF,MAAM,WAAW,GAAG,CAAC,EAAE,OAAO,EAAE,SAAS,GAAG,OAAO,EAAoB,EAAE,EAAE,CAAC,CAC1E,KAAC,MAAM,IACL,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,EACpC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,SAAS,GACjC,CACH,CAAC","sourcesContent":["import {\n  type JSX,\n  type MouseEventHandler,\n  type ReactNode,\n  useCallback,\n  useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport styled from \"styled-components\";\nimport { Color, Responsive } from \"../atoms\";\nimport { Button, Overlay } from \"../molecules\";\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 $centerContent>\n      <ModalWindow $width={width} $height={height}>\n        {header ? <ModalHeader>{header}</ModalHeader> : <></>}\n\n        <ModalBody>{content}</ModalBody>\n\n        {onClickClose || footer ? (\n          <ModalFooter>\n            {onClickClose ? (\n              <CloseButton onClick={onClickClose} closeText={closeText} />\n            ) : (\n              <></>\n            )}\n\n            {footer ? footer : <></>}\n          </ModalFooter>\n        ) : (\n          <></>\n        )}\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 ModalWindow = styled.div<{ $width?: string; $height?: string }>`\n  display: flex;\n  flex-direction: column;\n\n  background-color: ${Color.neutral.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  margin-bottom: 12px;\n\n  border-bottom: 1px solid ${Color.neutral.grey3};\n`;\n\nconst ModalBody = styled.div`\n  display: flex;\n  flex-direction: column;\n\n  height: 100%;\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={Color.neutral.grey3}\n    color={Color.typography.blackHigh}\n  />\n);\n"]}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@grantbii/design-system",
   "author": "Grantbii",
   "license": "UNLICENSED",
-  "version": "1.15.0",
+  "version": "1.16.1",
   "description": "Grantbii's Design System",
   "homepage": "https://design.grantbii.com",
   "repository": {
@@ -34,13 +34,13 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "5.1.2",
-    "@grantbii/ui-core": "1.8.4",
+    "@grantbii/ui-core": "1.8.5",
     "@storybook/addon-a11y": "10.3.5",
     "@storybook/addon-docs": "10.3.5",
     "@storybook/addon-onboarding": "10.3.5",
     "@storybook/addon-vitest": "10.3.5",
     "@storybook/nextjs-vite": "10.3.5",
-    "@types/node": "22.18.0",
+    "@types/node": "22.19.17",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
     "@vitest/browser": "4.1.4",
@@ -52,14 +52,14 @@
     "eslint-plugin-storybook": "10.3.5",
     "husky": "9.1.7",
     "lint-staged": "16.4.0",
-    "next": "16.2.3",
+    "next": "16.2.4",
     "playwright": "1.59.1",
     "prettier": "3.8.3",
     "react": "19.2.5",
     "react-dom": "19.2.5",
     "storybook": "10.3.5",
     "styled-components": "6.4.0",
-    "typescript": "6.0.2",
+    "typescript": "6.0.3",
     "vitest": "4.1.4"
   },
   "lint-staged": {

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

@@ -1,6 +1,6 @@
 import { Overlay } from "@/.";
 const meta = {
-    title: "Atoms/Overlay",
+    title: "Molecules/Overlay",
     component: Overlay,
     tags: ["autodocs"],
 };

package/stories/molecules/Overlay.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overlay.stories.js","sourceRoot":"","sources":["../../../stories/molecules/Overlay.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAG9B,MAAM,IAAI,GAAyB;IACjC,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,OAAO;IAClB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE;CAC9B,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAU;IACpC,IAAI,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,cAAc,EAAE,IAAI,EAAE;CACpD,CAAC","sourcesContent":["import { Overlay } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nconst meta: Meta<typeof Overlay> = {\n  title: \"Molecules/Overlay\",\n  component: Overlay,\n  tags: [\"autodocs\"],\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n  args: { children: \"Content\" },\n};\n\nexport const CenteredContent: Story = {\n  args: { children: \"Content\", $centerContent: true },\n};\n"]}