@lifesg/react-design-system 1.0.0-alpha.2 → 1.0.0-alpha.21

package/link-list/link-list.styles.d.ts

@@ -5,13 +5,23 @@ interface ToggleStyleProps {
 export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ItemTitleDefault: import("styled-components").StyledComponent<"h3", any, import("../text").TextProps, never>;
 export declare const ItemTitleSmall: import("styled-components").StyledComponent<"p", any, import("../text").TextProps, never>;
-export declare const ItemIcon: import("styled-components").StyledComponent<({ type, ...props }: import("../icon").IconProps) => JSX.Element, any, {}, never>;
+export declare const ItemIcon: import("styled-components").StyledComponent<{
+    (props: import("react").SVGProps<SVGSVGElement>): JSX.Element;
+    displayName: string;
+}, any, {}, never>;
 export declare const Item: import("styled-components").StyledComponent<"a", any, {}, never>;
 export declare const ItemContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Description: import("styled-components").StyledComponent<"p", any, import("../text").TextProps, never>;
 export declare const Expandable: import("styled-components").StyledComponent<import("react-spring").AnimatedComponent<"div">, any, {}, never>;
 export declare const ExpandableChild: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ToggleButtonLabel: import("styled-components").StyledComponent<"h5", any, import("../text").TextProps, never>;
-export declare const ToggleButtonIcon: import("styled-components").StyledComponent<({ type, ...props }: import("../icon").IconProps) => JSX.Element, any, {}, never>;
+export declare const ViewMoreIcon: import("styled-components").StyledComponent<{
+    (props: import("react").SVGProps<SVGSVGElement>): JSX.Element;
+    displayName: string;
+}, any, {}, never>;
+export declare const ViewLessIcon: import("styled-components").StyledComponent<{
+    (props: import("react").SVGProps<SVGSVGElement>): JSX.Element;
+    displayName: string;
+}, any, {}, never>;
 export declare const ToggleButton: import("styled-components").StyledComponent<"button", any, ToggleStyleProps, never>;
 export {};

package/link-list/types.d.ts

@@ -16,5 +16,5 @@ export interface LinkListProps<T> {
     className?: string | undefined;
     "data-testid"?: string | undefined;
     /** Captures item clicks on a component level */
-    onItemClick?: (item: LinkListItemProps<T>, event: React.MouseEvent<HTMLAnchorElement>) => void | undefined;
+    onItemClick?: ((item: LinkListItemProps<T>, event: React.MouseEvent<HTMLAnchorElement>) => void) | undefined;
 }

package/masonry/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/spec/media-spec.ts","../../src/media/media.ts","../../src/masonry/masonry.style.tsx","../../src/masonry/masonry.tsx"],"sourcesContent":["import { MediaWidth } from \"../media/types\";\n\nexport const MediaWidths: MediaWidth = {\n    mobileS: 320,\n    mobileM: 375,\n    mobileL: 480,\n    tablet: 1199,\n    desktopM: 1399,\n    desktopL: 1999,\n    desktop4k: 3840,\n};\n","import { MediaWidths } from \"../spec/media-spec\";\nimport { MediaType, MediaWidth } from \"./types\";\n\n// =============================================================================\n// HELPER FUNCTION\n// =============================================================================\nconst getMediaQuerySpec = (type: \"max-width\" | \"min-width\") => {\n    return Object.keys(MediaWidths).reduce((accumulator, key) => {\n        const mediaWidth = MediaWidths[key as keyof MediaWidth];\n        accumulator[\n            key as keyof MediaType\n        ] = `@media screen and (${type}: ${mediaWidth}px)`;\n\n        return accumulator;\n    }, {} as MediaType);\n};\n\n// =============================================================================\n// EXPORTS\n// =============================================================================\nexport const MediaQuery = {\n    MaxWidth: getMediaQuerySpec(\"max-width\"),\n    MinWidth: getMediaQuerySpec(\"min-width\"),\n};\n","import styled, { css } from \"styled-components\";\nimport { MediaQuery } from \"../media\";\nimport { MasonryGridProps, MasonryTileProps } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\n\ntype GridStyleProps = Omit<MasonryGridProps, \"children\">;\ntype TileStyleProps = Omit<MasonryTileProps, \"children\">;\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const GridContainer = styled.div<GridStyleProps>`\n    margin-top: 2.5rem;\n    display: grid;\n    align-items: center;\n    width: 100%;\n\n    ${(props) => {\n        const { numOfCols } = props;\n        const colsToUse = numOfCols.lg || numOfCols.md;\n        const numOfSmCols = numOfCols.sm\n            ? numOfCols.sm <= 2\n                ? numOfCols.sm\n                : 2\n            : undefined;\n\n        const mdColsDefault = numOfCols.md || numOfCols.sm || 2;\n\n        return css`\n            grid-template-columns: repeat(${colsToUse || \"auto-fill\"}, 1fr);\n            gap: 2rem 2rem;\n            justify-items: stretch;\n\n            ${MediaQuery.MaxWidth.tablet} {\n                grid-template-columns: repeat(\n                    ${numOfCols.md || numOfCols.sm || \"auto-fill\"},\n                    minmax(calc(${100 / mdColsDefault}% - 2rem), 1fr)\n                );\n            }\n\n            ${MediaQuery.MaxWidth.mobileL} {\n                grid-template-columns: repeat(\n                    ${numOfSmCols || \"auto-fill\"},\n                    minmax(calc(${100 / (numOfSmCols || 1)}% - 2rem), 1fr)\n                );\n            }\n        `;\n    }}\n`;\n\nexport const TileContainer = styled.div<TileStyleProps>`\n    position: relative;\n    ${(props) => {\n        const { startLg, colsLg, startMd, colsMd, startSm, colsSm } = props;\n\n        return css`\n            grid-column: ${startLg || startMd || \"auto\"} / span\n                ${colsLg || colsMd || 1};\n\n            ${MediaQuery.MaxWidth.tablet} {\n                grid-column: ${startMd || startSm || \"auto\"} / span\n                    ${colsMd || colsSm || 1};\n            }\n\n            ${MediaQuery.MaxWidth.mobileL} {\n                grid-column: ${startSm || \"auto\"} / span ${colsSm || 1};\n            }\n        `;\n    }}\n`;\n","import React from \"react\";\nimport { GridContainer, TileContainer } from \"./masonry.style\";\nimport { MasonryGridProps, MasonryTileProps } from \"./types\";\n\n// =============================================================================\n// GRID\n// =============================================================================\nconst GridComponent = (\n    props: MasonryGridProps,\n    ref: React.Ref<HTMLDivElement>\n): JSX.Element => {\n    const { children, ...otherProps } = props;\n\n    return (\n        <GridContainer ref={ref} {...otherProps}>\n            {children}\n        </GridContainer>\n    );\n};\n\n// =============================================================================\n// TILE\n// =============================================================================\nconst TileComponent = (\n    props: MasonryTileProps,\n    ref: React.Ref<HTMLDivElement>\n): JSX.Element => {\n    const { children, ...otherProps } = props;\n\n    return (\n        <TileContainer ref={ref} {...otherProps}>\n            {children}\n        </TileContainer>\n    );\n};\n\n// =============================================================================\n// EXPORTABLE\n// =============================================================================\nexport const Masonry = {\n    Grid: React.forwardRef(GridComponent),\n    Tile: React.forwardRef(TileComponent),\n};\n"],"names":["MediaWidths","mobileS","mobileM","mobileL","tablet","desktopM","desktopL","desktop4k","getMediaQuerySpec","type","Object","keys","reduce","accumulator","key","mediaWidth","MediaQuery","GridContainer","styled","div","props","numOfCols","colsToUse","lg","md","numOfSmCols","sm","undefined","mdColsDefault","css","TileContainer","startLg","colsLg","startMd","colsMd","startSm","colsSm","Masonry","Grid","React","forwardRef","ref","children","otherProps","_jsx","Tile"],"mappings":"wGAEO,MAAMA,EAA0B,CACnCC,QAAS,IACTC,QAAS,IACTC,QAAS,IACTC,OAAQ,KACRC,SAAU,KACVC,SAAU,KACVC,UAAW,MCHTC,EAAqBC,GAChBC,OAAOC,KAAKX,GAAaY,QAAO,CAACC,EAAaC,KACjD,MAAMC,EAAaf,EAAYc,GAK/B,OAJAD,EACIC,GACA,sBAAsBL,MAASM,OAE5BF,IACR,IAMMG,EACCR,EAAkB,aCPnBS,GDQCT,EAAkB,aCRHU,EAAOC,GAAmB;;;;;;MAMhDC,IACC,MAAMC,UAAEA,GAAcD,EAChBE,EAAYD,EAAUE,IAAMF,EAAUG,GACtCC,EAAcJ,EAAUK,GACxBL,EAAUK,IAAM,EACZL,EAAUK,GACV,OACJC,EAEAC,EAAgBP,EAAUG,IAAMH,EAAUK,IAAM,EAEtD,OAAOG,CAAG;4CAC0BP,GAAa;;;;cAI3CN,EAAoBZ;;sBAEZiB,EAAUG,IAAMH,EAAUK,IAAM;kCACpB,IAAME;;;;cAI1BZ,EAAoBb;;sBAEZsB,GAAe;kCACH,KAAOA,GAAe;;;;GAO3CK,EAAgBZ,EAAOC,GAAmB;;MAEhDC,IACC,MAAMW,QAAEA,EAAOC,OAAEA,EAAMC,QAAEA,EAAOC,OAAEA,EAAMC,QAAEA,EAAOC,OAAEA,GAAWhB,EAE9D,OAAOS,CAAG;2BACSE,GAAWE,GAAW;kBAC/BD,GAAUE,GAAU;;cAExBlB,EAAoBZ;+BACH6B,GAAWE,GAAW;sBAC/BD,GAAUE,GAAU;;;cAG5BpB,EAAoBb;+BACHgC,GAAW,iBAAiBC,GAAU;;;EC7BxDC,EAAU,CACnBC,KAAMC,EAAMC,YAjCM,CAClBpB,EACAqB,KAEA,MAAMC,SAAEA,KAAaC,GAAevB,EAEpC,OACIwB,EAAC3B,EAAa,CAACwB,IAAKA,KAASE,EAAUD,SAClCA,OA0BTG,KAAMN,EAAMC,YAlBM,CAClBpB,EACAqB,KAEA,MAAMC,SAAEA,KAAaC,GAAevB,EAEpC,OACIwB,EAACd,EAAa,CAACW,IAAKA,KAASE,EAAUD,SAClCA"}
+{"version":3,"file":"index.js","sources":["../../src/spec/media-spec.ts","../../src/media/media.ts","../../src/masonry/masonry.style.tsx","../../src/masonry/masonry.tsx"],"sourcesContent":["import { MediaWidth } from \"../media/types\";\n\nexport const MediaWidths: MediaWidth = {\n    mobileS: 320,\n    mobileM: 375,\n    mobileL: 480,\n    tablet: 1199,\n    desktopM: 1399,\n    desktopL: 1999,\n    desktop4k: 3840,\n};\n","import { MediaWidths as MediaWidthsSpec } from \"../spec/media-spec\";\nimport { MediaType, MediaWidth } from \"./types\";\n\n// =============================================================================\n// HELPER FUNCTION\n// =============================================================================\nconst getMediaQuerySpec = (type: \"max-width\" | \"min-width\") => {\n    return Object.keys(MediaWidthsSpec).reduce((accumulator, key) => {\n        const mediaWidth = MediaWidthsSpec[key as keyof MediaWidth];\n        accumulator[\n            key as keyof MediaType\n        ] = `@media screen and (${type}: ${mediaWidth}px)`;\n\n        return accumulator;\n    }, {} as MediaType);\n};\n\n// =============================================================================\n// EXPORTS\n// =============================================================================\nexport const MediaQuery = {\n    MaxWidth: getMediaQuerySpec(\"max-width\"),\n    MinWidth: getMediaQuerySpec(\"min-width\"),\n};\n\nexport const MediaWidths = MediaWidthsSpec;\n","import styled, { css } from \"styled-components\";\nimport { MediaQuery } from \"../media\";\nimport { MasonryGridProps, MasonryTileProps } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\n\ntype GridStyleProps = Omit<MasonryGridProps, \"children\">;\ntype TileStyleProps = Omit<MasonryTileProps, \"children\">;\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const GridContainer = styled.div<GridStyleProps>`\n    margin-top: 2.5rem;\n    display: grid;\n    align-items: center;\n    width: 100%;\n\n    ${(props) => {\n        const { numOfCols } = props;\n        const colsToUse = numOfCols.lg || numOfCols.md;\n        const numOfSmCols = numOfCols.sm\n            ? numOfCols.sm <= 2\n                ? numOfCols.sm\n                : 2\n            : undefined;\n\n        const mdColsDefault = numOfCols.md || numOfCols.sm || 2;\n\n        return css`\n            grid-template-columns: repeat(${colsToUse || \"auto-fill\"}, 1fr);\n            gap: 2rem 2rem;\n            justify-items: stretch;\n\n            ${MediaQuery.MaxWidth.tablet} {\n                grid-template-columns: repeat(\n                    ${numOfCols.md || numOfCols.sm || \"auto-fill\"},\n                    minmax(calc(${100 / mdColsDefault}% - 2rem), 1fr)\n                );\n            }\n\n            ${MediaQuery.MaxWidth.mobileL} {\n                grid-template-columns: repeat(\n                    ${numOfSmCols || \"auto-fill\"},\n                    minmax(calc(${100 / (numOfSmCols || 1)}% - 2rem), 1fr)\n                );\n            }\n        `;\n    }}\n`;\n\nexport const TileContainer = styled.div<TileStyleProps>`\n    position: relative;\n    ${(props) => {\n        const { startLg, colsLg, startMd, colsMd, startSm, colsSm } = props;\n\n        return css`\n            grid-column: ${startLg || startMd || \"auto\"} / span\n                ${colsLg || colsMd || 1};\n\n            ${MediaQuery.MaxWidth.tablet} {\n                grid-column: ${startMd || startSm || \"auto\"} / span\n                    ${colsMd || colsSm || 1};\n            }\n\n            ${MediaQuery.MaxWidth.mobileL} {\n                grid-column: ${startSm || \"auto\"} / span ${colsSm || 1};\n            }\n        `;\n    }}\n`;\n","import React from \"react\";\nimport { GridContainer, TileContainer } from \"./masonry.style\";\nimport { MasonryGridProps, MasonryTileProps } from \"./types\";\n\n// =============================================================================\n// GRID\n// =============================================================================\nconst GridComponent = (\n    props: MasonryGridProps,\n    ref: React.Ref<HTMLDivElement>\n): JSX.Element => {\n    const { children, ...otherProps } = props;\n\n    return (\n        <GridContainer ref={ref} {...otherProps}>\n            {children}\n        </GridContainer>\n    );\n};\n\n// =============================================================================\n// TILE\n// =============================================================================\nconst TileComponent = (\n    props: MasonryTileProps,\n    ref: React.Ref<HTMLDivElement>\n): JSX.Element => {\n    const { children, ...otherProps } = props;\n\n    return (\n        <TileContainer ref={ref} {...otherProps}>\n            {children}\n        </TileContainer>\n    );\n};\n\n// =============================================================================\n// EXPORTABLE\n// =============================================================================\nexport const Masonry = {\n    Grid: React.forwardRef(GridComponent),\n    Tile: React.forwardRef(TileComponent),\n};\n"],"names":["MediaWidths","mobileS","mobileM","mobileL","tablet","desktopM","desktopL","desktop4k","getMediaQuerySpec","type","Object","keys","MediaWidthsSpec","reduce","accumulator","key","mediaWidth","MediaQuery","GridContainer","styled","div","props","numOfCols","colsToUse","lg","md","numOfSmCols","sm","undefined","mdColsDefault","css","TileContainer","startLg","colsLg","startMd","colsMd","startSm","colsSm","Masonry","Grid","React","forwardRef","ref","children","otherProps","_jsx","Tile"],"mappings":"wGAEO,MAAMA,EAA0B,CACnCC,QAAS,IACTC,QAAS,IACTC,QAAS,IACTC,OAAQ,KACRC,SAAU,KACVC,SAAU,KACVC,UAAW,MCHTC,EAAqBC,GAChBC,OAAOC,KAAKC,GAAiBC,QAAO,CAACC,EAAaC,KACrD,MAAMC,EAAaJ,EAAgBG,GAKnC,OAJAD,EACIC,GACA,sBAAsBN,MAASO,OAE5BF,CAAW,GACnB,CAAe,GAMTG,EACCT,EAAkB,aCPnBU,GDQCV,EAAkB,aCRHW,EAAOC,GAAmB;;;;;;MAMhDC,IACC,MAAMC,UAAEA,GAAcD,EAChBE,EAAYD,EAAUE,IAAMF,EAAUG,GACtCC,EAAcJ,EAAUK,GACxBL,EAAUK,IAAM,EACZL,EAAUK,GACV,OACJC,EAEAC,EAAgBP,EAAUG,IAAMH,EAAUK,IAAM,EAEtD,OAAOG,CAAG;4CAC0BP,GAAa;;;;cAI3CN,EAAoBb;;sBAEZkB,EAAUG,IAAMH,EAAUK,IAAM;kCACpB,IAAME;;;;cAI1BZ,EAAoBd;;sBAEZuB,GAAe;kCACH,KAAOA,GAAe;;;SAG/C;GAIIK,EAAgBZ,EAAOC,GAAmB;;MAEhDC,IACC,MAAMW,QAAEA,EAAOC,OAAEA,EAAMC,QAAEA,EAAOC,OAAEA,EAAMC,QAAEA,EAAOC,OAAEA,GAAWhB,EAE9D,OAAOS,CAAG;2BACSE,GAAWE,GAAW;kBAC/BD,GAAUE,GAAU;;cAExBlB,EAAoBb;+BACH8B,GAAWE,GAAW;sBAC/BD,GAAUE,GAAU;;;cAG5BpB,EAAoBd;+BACHiC,GAAW,iBAAiBC,GAAU;;SAE5D;EC/BIC,EAAU,CACnBC,KAAMC,EAAMC,YAjCM,CAClBpB,EACAqB,KAEA,MAAMC,SAAEA,KAAaC,GAAevB,EAEpC,OACIwB,EAAC3B,EAAa,CAACwB,IAAKA,KAASE,EAAUD,SAClCA,GAEP,IAwBFG,KAAMN,EAAMC,YAlBM,CAClBpB,EACAqB,KAEA,MAAMC,SAAEA,KAAaC,GAAevB,EAEpC,OACIwB,EAACd,EAAa,CAACW,IAAKA,KAASE,EAAUD,SAClCA,GAEP"}

package/masonry/masonry.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { MasonryGridProps, MasonryTileProps } from "./types";
 export declare const Masonry: {
-    Grid: React.ForwardRefExoticComponent<MasonryGridProps & React.RefAttributes<HTMLDivElement>>;
-    Tile: React.ForwardRefExoticComponent<MasonryTileProps & React.RefAttributes<HTMLDivElement>>;
+    Grid: (props: MasonryGridProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    Tile: (props: MasonryTileProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 };

package/masthead/index.d.ts

@@ -0,0 +1 @@
+export * from "./masthead";

package/masthead/index.js

@@ -0,0 +1,9 @@
+import{jsx as e}from"react/jsx-runtime";import{useEffect as t}from"react";import d from"styled-components";const s={mobileS:320,mobileM:375,mobileL:480,tablet:1199,desktopM:1399,desktopL:1999,desktop4k:3840},n=e=>Object.keys(s).reduce(((t,d)=>{const n=s[d];return t[d]=`@media screen and (${e}: ${n}px)`,t}),{}),m=n("max-width"),o=(n("min-width"),d.div`
+    background: hsl(0, 0%, 94%);
+    padding: 0 0.5rem;
+
+    ${m.mobileL} {
+        padding: 0;
+    }
+`),r=()=>{t((()=>{d()||s()}),[]);const d=()=>document.getElementById(i),s=()=>{if(!document.getElementById(i)){const e=document.createElement("script");e.id=i,e.type="module",e.src=c,document.head.appendChild(e)}};return e(o,{dangerouslySetInnerHTML:{__html:"<sgds-masthead></sgds-masthead>"}})},i="lifesg-ds-masthead-script",c="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component/Masthead/index.js";export{r as Masthead};
+//# sourceMappingURL=index.js.map

package/masthead/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/spec/media-spec.ts","../../src/media/media.ts","../../src/masthead/masthead.style.tsx","../../src/masthead/masthead.tsx"],"sourcesContent":["import { MediaWidth } from \"../media/types\";\n\nexport const MediaWidths: MediaWidth = {\n    mobileS: 320,\n    mobileM: 375,\n    mobileL: 480,\n    tablet: 1199,\n    desktopM: 1399,\n    desktopL: 1999,\n    desktop4k: 3840,\n};\n","import { MediaWidths as MediaWidthsSpec } from \"../spec/media-spec\";\nimport { MediaType, MediaWidth } from \"./types\";\n\n// =============================================================================\n// HELPER FUNCTION\n// =============================================================================\nconst getMediaQuerySpec = (type: \"max-width\" | \"min-width\") => {\n    return Object.keys(MediaWidthsSpec).reduce((accumulator, key) => {\n        const mediaWidth = MediaWidthsSpec[key as keyof MediaWidth];\n        accumulator[\n            key as keyof MediaType\n        ] = `@media screen and (${type}: ${mediaWidth}px)`;\n\n        return accumulator;\n    }, {} as MediaType);\n};\n\n// =============================================================================\n// EXPORTS\n// =============================================================================\nexport const MediaQuery = {\n    MaxWidth: getMediaQuerySpec(\"max-width\"),\n    MinWidth: getMediaQuerySpec(\"min-width\"),\n};\n\nexport const MediaWidths = MediaWidthsSpec;\n","import styled from \"styled-components\";\nimport { MediaQuery } from \"../media\";\n\nexport const Wrapper = styled.div`\n    background: hsl(0, 0%, 94%);\n    padding: 0 0.5rem;\n\n    ${MediaQuery.MaxWidth.mobileL} {\n        padding: 0;\n    }\n`;\n","import { useEffect } from \"react\";\nimport { Wrapper } from \"./masthead.style\";\n\nexport const Masthead = (): JSX.Element => {\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (!doAssetsExist()) {\n            addAssets();\n        }\n    }, []);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const doAssetsExist = () => {\n        return document.getElementById(SCRIPT_ID);\n    };\n\n    const addAssets = () => {\n        if (!document.getElementById(SCRIPT_ID)) {\n            const script = document.createElement(\"script\");\n            script.id = SCRIPT_ID;\n            script.type = \"module\";\n            script.src = SCRIPT_SRC;\n\n            document.head.appendChild(script);\n        }\n    };\n\n    const createContent = () => {\n        /**\n         * Note: Had to use this method because we had to create a\n         * custom type to handle Web Components (refer to this guide\n         * https://blog.devgenius.io/how-to-use-web-components-in-react-54c951399bfd)\n         * But we are having troubles exporting the custom type definition\n         * via rollup\n         */\n        return { __html: \"<sgds-masthead></sgds-masthead>\" };\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    return <Wrapper dangerouslySetInnerHTML={createContent()} />;\n};\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst SCRIPT_ID = \"lifesg-ds-masthead-script\";\nconst SCRIPT_SRC =\n    \"https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component/Masthead/index.js\";\n"],"names":["MediaWidths","mobileS","mobileM","mobileL","tablet","desktopM","desktopL","desktop4k","getMediaQuerySpec","type","Object","keys","MediaWidthsSpec","reduce","accumulator","key","mediaWidth","MediaQuery","Wrapper","styled","div","Masthead","useEffect","doAssetsExist","addAssets","document","getElementById","SCRIPT_ID","script","createElement","id","src","SCRIPT_SRC","head","appendChild","_jsx","dangerouslySetInnerHTML","__html"],"mappings":"2GAEO,MAAMA,EAA0B,CACnCC,QAAS,IACTC,QAAS,IACTC,QAAS,IACTC,OAAQ,KACRC,SAAU,KACVC,SAAU,KACVC,UAAW,MCHTC,EAAqBC,GAChBC,OAAOC,KAAKC,GAAiBC,QAAO,CAACC,EAAaC,KACrD,MAAMC,EAAaJ,EAAgBG,GAKnC,OAJAD,EACIC,GACA,sBAAsBN,MAASO,OAE5BF,CAAW,GACnB,CAAe,GAMTG,EACCT,EAAkB,aClBnBU,GDmBCV,EAAkB,aCnBTW,EAAOC,GAAG;;;;MAI3BH,EAAoBd;;;GCJbkB,EAAW,KAIpBC,GAAU,KACDC,KACDC,GACH,GACF,IAKH,MAAMD,EAAgB,IACXE,SAASC,eAAeC,GAG7BH,EAAY,KACd,IAAKC,SAASC,eAAeC,GAAY,CACrC,MAAMC,EAASH,SAASI,cAAc,UACtCD,EAAOE,GAAKH,EACZC,EAAOnB,KAAO,SACdmB,EAAOG,IAAMC,EAEbP,SAASQ,KAAKC,YAAYN,EAC7B,GAkBL,OAAOO,EAACjB,EAAQ,CAAAkB,wBAPL,CAAEC,OAAQ,oCAOuC,EAM1DV,EAAY,4BACZK,EACF"}

package/masthead/masthead.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Masthead: () => JSX.Element;

package/masthead/masthead.style.d.ts

@@ -0,0 +1 @@
+export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/masthead/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@lifesg/react-design-system/masthead",
+  "private": true,
+  "main": "../cjs/index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts"
+}

package/media/index.js

@@ -1,2 +1,2 @@
-const e={mobileS:320,mobileM:375,mobileL:480,tablet:1199,desktopM:1399,desktopL:1999,desktop4k:3840},t=t=>Object.keys(e).reduce(((d,i)=>{const o=e[i];return d[i]=`@media screen and (${t}: ${o}px)`,d}),{}),d={MaxWidth:t("max-width"),MinWidth:t("min-width")};export{d as MediaQuery};
+const e={mobileS:320,mobileM:375,mobileL:480,tablet:1199,desktopM:1399,desktopL:1999,desktop4k:3840},t=t=>Object.keys(e).reduce(((d,i)=>{const o=e[i];return d[i]=`@media screen and (${t}: ${o}px)`,d}),{}),d={MaxWidth:t("max-width"),MinWidth:t("min-width")},i=e;export{d as MediaQuery,i as MediaWidths};
 //# sourceMappingURL=index.js.map

package/media/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/spec/media-spec.ts","../../src/media/media.ts"],"sourcesContent":["import { MediaWidth } from \"../media/types\";\n\nexport const MediaWidths: MediaWidth = {\n    mobileS: 320,\n    mobileM: 375,\n    mobileL: 480,\n    tablet: 1199,\n    desktopM: 1399,\n    desktopL: 1999,\n    desktop4k: 3840,\n};\n","import { MediaWidths } from \"../spec/media-spec\";\nimport { MediaType, MediaWidth } from \"./types\";\n\n// =============================================================================\n// HELPER FUNCTION\n// =============================================================================\nconst getMediaQuerySpec = (type: \"max-width\" | \"min-width\") => {\n    return Object.keys(MediaWidths).reduce((accumulator, key) => {\n        const mediaWidth = MediaWidths[key as keyof MediaWidth];\n        accumulator[\n            key as keyof MediaType\n        ] = `@media screen and (${type}: ${mediaWidth}px)`;\n\n        return accumulator;\n    }, {} as MediaType);\n};\n\n// =============================================================================\n// EXPORTS\n// =============================================================================\nexport const MediaQuery = {\n    MaxWidth: getMediaQuerySpec(\"max-width\"),\n    MinWidth: getMediaQuerySpec(\"min-width\"),\n};\n"],"names":["MediaWidths","mobileS","mobileM","mobileL","tablet","desktopM","desktopL","desktop4k","getMediaQuerySpec","type","Object","keys","reduce","accumulator","key","mediaWidth","MediaQuery","MaxWidth","MinWidth"],"mappings":"AAEO,MAAMA,EAA0B,CACnCC,QAAS,IACTC,QAAS,IACTC,QAAS,IACTC,OAAQ,KACRC,SAAU,KACVC,SAAU,KACVC,UAAW,MCHTC,EAAqBC,GAChBC,OAAOC,KAAKX,GAAaY,QAAO,CAACC,EAAaC,KACjD,MAAMC,EAAaf,EAAYc,GAK/B,OAJAD,EACIC,GACA,sBAAsBL,MAASM,OAE5BF,IACR,IAMMG,EAAa,CACtBC,SAAUT,EAAkB,aAC5BU,SAAUV,EAAkB"}
+{"version":3,"file":"index.js","sources":["../../src/spec/media-spec.ts","../../src/media/media.ts"],"sourcesContent":["import { MediaWidth } from \"../media/types\";\n\nexport const MediaWidths: MediaWidth = {\n    mobileS: 320,\n    mobileM: 375,\n    mobileL: 480,\n    tablet: 1199,\n    desktopM: 1399,\n    desktopL: 1999,\n    desktop4k: 3840,\n};\n","import { MediaWidths as MediaWidthsSpec } from \"../spec/media-spec\";\nimport { MediaType, MediaWidth } from \"./types\";\n\n// =============================================================================\n// HELPER FUNCTION\n// =============================================================================\nconst getMediaQuerySpec = (type: \"max-width\" | \"min-width\") => {\n    return Object.keys(MediaWidthsSpec).reduce((accumulator, key) => {\n        const mediaWidth = MediaWidthsSpec[key as keyof MediaWidth];\n        accumulator[\n            key as keyof MediaType\n        ] = `@media screen and (${type}: ${mediaWidth}px)`;\n\n        return accumulator;\n    }, {} as MediaType);\n};\n\n// =============================================================================\n// EXPORTS\n// =============================================================================\nexport const MediaQuery = {\n    MaxWidth: getMediaQuerySpec(\"max-width\"),\n    MinWidth: getMediaQuerySpec(\"min-width\"),\n};\n\nexport const MediaWidths = MediaWidthsSpec;\n"],"names":["MediaWidths","mobileS","mobileM","mobileL","tablet","desktopM","desktopL","desktop4k","getMediaQuerySpec","type","Object","keys","MediaWidthsSpec","reduce","accumulator","key","mediaWidth","MediaQuery","MaxWidth","MinWidth"],"mappings":"AAEO,MAAMA,EAA0B,CACnCC,QAAS,IACTC,QAAS,IACTC,QAAS,IACTC,OAAQ,KACRC,SAAU,KACVC,SAAU,KACVC,UAAW,MCHTC,EAAqBC,GAChBC,OAAOC,KAAKC,GAAiBC,QAAO,CAACC,EAAaC,KACrD,MAAMC,EAAaJ,EAAgBG,GAKnC,OAJAD,EACIC,GACA,sBAAsBN,MAASO,OAE5BF,CAAW,GACnB,CAAe,GAMTG,EAAa,CACtBC,SAAUV,EAAkB,aAC5BW,SAAUX,EAAkB,cAGnBR,EAAcY"}

package/media/media.d.ts

@@ -1,5 +1,6 @@
-import { MediaType } from "./types";
+import { MediaType, MediaWidth } from "./types";
 export declare const MediaQuery: {
     MaxWidth: MediaType;
     MinWidth: MediaType;
 };
+export declare const MediaWidths: MediaWidth;

package/modal/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const Modal: (({ id, show, animationFrom, children, enableOverlayClick, rootComponentId, zIndex, onOverlayClick, ...otherProps }: import("./types").ModalProps) => JSX.Element) & {
+export declare const Modal: (({ id, show, animationFrom, children, enableOverlayClick, rootComponentId, zIndex, onOverlayClick, dismissKeyboardOnShow, ...otherProps }: import("./types").ModalProps) => JSX.Element) & {
     Box: ({ id, children, onClose, showCloseButton, ...otherProps }: import("./types").ModalBoxProps) => JSX.Element;
 };
 export * from "./types";

package/modal/index.js

@@ -1,4 +1,4 @@
-import{jsx as t,jsxs as e}from"react/jsx-runtime";import n,{useState as r,useRef as o,useEffect as i}from"react";import a from"react-dom";import c,{css as l}from"styled-components";const d=c.div`
+import t,{jsx as e,jsxs as n}from"react/jsx-runtime";import r,{useState as o,useRef as i,useEffect as a}from"react";import c from"react-dom";import l,{css as d}from"styled-components";const s=l.div`
     position: fixed;
     left: 0;
     top: 0;
@@ -7,12 +7,12 @@ import{jsx as t,jsxs as e}from"react/jsx-runtime";import n,{useState as r,useRef
     visibility: hidden;
     z-index: ${t=>t.zIndex||(t.$stacked?99999:99998)};
 
-    ${t=>{if(t.$show)return l`
+    ${t=>{if(t.$show)return d`
                 height: 100%;
                 width: 100vw;
                 visibility: visible;
             `}}
-`,s=c.div`
+`,u=l.div`
     position: absolute;
     left: 0;
     top: 0;
@@ -20,23 +20,23 @@ import{jsx as t,jsxs as e}from"react/jsx-runtime";import n,{useState as r,useRef
     backdrop-filter: ${t=>(t=>{let e="";return t&&(e+="blur(10px)"),e.length>0?e:"none"})(t.$backgroundBlur)};
     transition: opacity 200ms ease;
 
-    ${t=>{let e="";return t.$show?e+=l`
+    ${t=>{let e="";return t.$show?e+=d`
                 visibility: visible;
                 opacity: 1;
                 pointer-events: auto;
                 height: 100%;
                 width: 100vw;
-            `:e+=l`
+            `:e+=d`
                 visibility: hidden;
                 opacity: 0;
                 transition-delay: ${t.$disableTransition?"0ms":"400ms"};
                 pointer-events: none;
                 height: 0;
                 width: 0;
-            `,t.$disableTransition&&(e+=l`
+            `,t.$disableTransition&&(e+=d`
                 transition: none;
             `),e}}
-`,u=({show:e=!1,rootId:c,onOverlayClick:l,children:u,backgroundOpacity:v,backgroundBlur:f=!0,disableTransition:g=!1,enableOverlayClick:y=!1,zIndex:m,id:b})=>{const[F,w]=r(null),[_,B]=r(),C=o(),$=o(null),k=u&&n.cloneElement(u,{ref:$}),x=b?`lifesg-ds-overlay-root-${b}`:"lifesg-ds-overlay-root";i((()=>{if(e){const t=O();if(E(t),!t){const t=setTimeout((()=>{j("add")}),200);return()=>clearTimeout(t)}}else if(!C.current){const t=setTimeout((()=>{j("add")}),200);return()=>clearTimeout(t)}}),[e]),i((()=>{w(D());const t=O();return E(t),t||A(),()=>{j("remove")}}),[]);const E=t=>{C.current=t,B(t)},D=()=>document&&c?document.getElementById(c):document?document.body:null,O=()=>document.body.classList.contains(p),A=()=>{if(!document.getElementById(h)){const t=document.createElement("style");t.id=h;const e=document.documentElement.clientWidth,n=window.innerWidth-e;t.innerHTML=`\n\t\t\t\t.${p} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${n}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${p}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`,document.body.appendChild(t)}},j=t=>{const e=document.body.classList.contains(p);"add"!==t||e?"remove"===t&&e&&document.body.classList.remove(p):document.body.classList.add(p)},z=t=>{t.preventDefault();const e=$.current?.firstChild;e&&e.contains(t.target)||l&&y&&l()};return F?a.createPortal(t(d,{id:x,"data-testid":x,$show:e,zIndex:m,$stacked:_,children:u&&t(s,{"data-testid":"overlay-wrapper",$show:e,$backgroundOpacity:v||(_?.5:.8),$backgroundBlur:f,$disableTransition:g,$enableOverlayClick:y,onClick:z,children:k})}),F):null},h="lifesg-ds-overlay-stylesheet",p="lifesg-ds-overlay-open",v={mobileS:320,mobileM:375,mobileL:480,tablet:1199,desktopM:1399,desktopL:1999,desktop4k:3840},f=t=>Object.keys(v).reduce(((e,n)=>{const r=v[n];return e[n]=`@media screen and (${t}: ${r}px)`,e}),{}),g=f("max-width"),y=(f("min-width"),c.div`
+`,h=({show:t=!1,rootId:n,onOverlayClick:l,children:d,backgroundOpacity:h,backgroundBlur:f=!0,disableTransition:g=!1,enableOverlayClick:y=!1,zIndex:m,id:b})=>{const[F,w]=o(null),[_,B]=o(),C=i(),$=i(null),k=d&&r.cloneElement(d,{ref:$}),E=b?`lifesg-ds-overlay-root-${b}`:"lifesg-ds-overlay-root";a((()=>{if(t){const t=D();if(x(t),!t){const t=setTimeout((()=>{j("add")}),200);return()=>clearTimeout(t)}}else if(!C.current){const t=setTimeout((()=>{j("remove")}),200);return()=>clearTimeout(t)}}),[t]),a((()=>{w(O());const t=D();return x(t),t||A(),()=>{j("remove")}}),[]);const x=t=>{C.current=t,B(t)},O=()=>document&&n?document.getElementById(n):document?document.body:null,D=()=>document.body.classList.contains(v),A=()=>{if(!document.getElementById(p)){const t=document.createElement("style");t.id=p;const e=document.documentElement.clientWidth,n=window.innerWidth-e;t.innerHTML=`\n\t\t\t\t.${v} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${n}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${v}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`,document.body.appendChild(t)}},j=t=>{const e=document.body.classList.contains(v);"add"!==t||e?"remove"===t&&e&&document.body.classList.remove(v):document.body.classList.add(v)},L=t=>{t.preventDefault();const e=$.current?.firstChild;e&&e.contains(t.target)||l&&y&&l()};return F?c.createPortal(e(s,{id:E,"data-testid":E,$show:t,zIndex:m,$stacked:_,children:d&&e(u,{"data-testid":"overlay-wrapper",$show:t,$backgroundOpacity:h||(_?.5:.8),$backgroundBlur:f,$disableTransition:g,$enableOverlayClick:y,onClick:L,children:k})}),F):null},p="lifesg-ds-overlay-stylesheet",v="lifesg-ds-overlay-open",f={mobileS:320,mobileM:375,mobileL:480,tablet:1199,desktopM:1399,desktopL:1999,desktop4k:3840},g=t=>Object.keys(f).reduce(((e,n)=>{const r=f[n];return e[n]=`@media screen and (${t}: ${r}px)`,e}),{}),y=g("max-width"),m=(g("min-width"),l.div`
     position: relative;
     display: flex;
     justify-content: center;
@@ -46,31 +46,19 @@ import{jsx as t,jsxs as e}from"react/jsx-runtime";import n,{useState as r,useRef
     overflow: hidden;
     ${t=>{return e=t.show,n=t.animationFrom||"bottom",e?`\n\t\t\t${n}: 0;\n\t\t\topacity: 1;\n\t\t\ttransition: all 300ms cubic-bezier(0.21, 0.79, 0.53, 1);\n\t\t\ttransition-delay: 200ms;\n\t\t`:`\n\t\t${n}: -3%;\n\t\topacity: 0;\n\t\ttransition: all 300ms cubic-bezier(0.4, 0.34, 0.38, 1);\n\t`;var e,n}}
 
-    ${t=>t.verticalHeight?l`
-                ${g.mobileL} {
-                    height: calc(${t.verticalHeight}px * 100);
-                }
-            `:l`
-                ${g.mobileL} {
-                    height: calc(1vh * 100);
-                }
-            `}
-`);var m="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},b=Array.isArray,F="object"==typeof m&&m&&m.Object===Object&&m,w="object"==typeof self&&self&&self.Object===Object&&self,_=F||w||Function("return this")(),B=_.Symbol,C=B,$=Object.prototype,k=$.hasOwnProperty,x=$.toString,E=C?C.toStringTag:void 0;var D=function(t){var e=k.call(t,E),n=t[E];try{t[E]=void 0;var r=!0}catch(t){}var o=x.call(t);return r&&(e?t[E]=n:delete t[E]),o},O=Object.prototype.toString;var A=D,j=function(t){return O.call(t)},z=B?B.toStringTag:void 0;var L=function(t){return null==t?void 0===t?"[object Undefined]":"[object Null]":z&&z in Object(t)?A(t):j(t)};var T=L,I=function(t){return null!=t&&"object"==typeof t};var S=function(t){return"symbol"==typeof t||I(t)&&"[object Symbol]"==T(t)},V=b,P=S,R=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,N=/^\w*$/;var M=function(t,e){if(V(t))return!1;var n=typeof t;return!("number"!=n&&"symbol"!=n&&"boolean"!=n&&null!=t&&!P(t))||(N.test(t)||!R.test(t)||null!=e&&t in Object(e))};var G=function(t){var e=typeof t;return null!=t&&("object"==e||"function"==e)},H=L,W=G;var Z,U=function(t){if(!W(t))return!1;var e=H(t);return"[object Function]"==e||"[object GeneratorFunction]"==e||"[object AsyncFunction]"==e||"[object Proxy]"==e},q=_["__core-js_shared__"],J=(Z=/[^.]+$/.exec(q&&q.keys&&q.keys.IE_PROTO||""))?"Symbol(src)_1."+Z:"";var K=function(t){return!!J&&J in t},Q=Function.prototype.toString;var X=U,Y=K,tt=G,et=function(t){if(null!=t){try{return Q.call(t)}catch(t){}try{return t+""}catch(t){}}return""},nt=/^\[object .+?Constructor\]$/,rt=Function.prototype,ot=Object.prototype,it=rt.toString,at=ot.hasOwnProperty,ct=RegExp("^"+it.call(at).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");var lt=function(t){return!(!tt(t)||Y(t))&&(X(t)?ct:nt).test(et(t))},dt=function(t,e){return null==t?void 0:t[e]};var st=function(t,e){var n=dt(t,e);return lt(n)?n:void 0},ut=st(Object,"create"),ht=ut;var pt=function(){this.__data__=ht?ht(null):{},this.size=0};var vt=function(t){var e=this.has(t)&&delete this.__data__[t];return this.size-=e?1:0,e},ft=ut,gt=Object.prototype.hasOwnProperty;var yt=function(t){var e=this.__data__;if(ft){var n=e[t];return"__lodash_hash_undefined__"===n?void 0:n}return gt.call(e,t)?e[t]:void 0},mt=ut,bt=Object.prototype.hasOwnProperty;var Ft=ut;var wt=pt,_t=vt,Bt=yt,Ct=function(t){var e=this.__data__;return mt?void 0!==e[t]:bt.call(e,t)},$t=function(t,e){var n=this.__data__;return this.size+=this.has(t)?0:1,n[t]=Ft&&void 0===e?"__lodash_hash_undefined__":e,this};function kt(t){var e=-1,n=null==t?0:t.length;for(this.clear();++e<n;){var r=t[e];this.set(r[0],r[1])}}kt.prototype.clear=wt,kt.prototype.delete=_t,kt.prototype.get=Bt,kt.prototype.has=Ct,kt.prototype.set=$t;var xt=kt;var Et=function(){this.__data__=[],this.size=0};var Dt=function(t,e){return t===e||t!=t&&e!=e};var Ot=function(t,e){for(var n=t.length;n--;)if(Dt(t[n][0],e))return n;return-1},At=Ot,jt=Array.prototype.splice;var zt=Ot;var Lt=Ot;var Tt=Ot;var It=Et,St=function(t){var e=this.__data__,n=At(e,t);return!(n<0)&&(n==e.length-1?e.pop():jt.call(e,n,1),--this.size,!0)},Vt=function(t){var e=this.__data__,n=zt(e,t);return n<0?void 0:e[n][1]},Pt=function(t){return Lt(this.__data__,t)>-1},Rt=function(t,e){var n=this.__data__,r=Tt(n,t);return r<0?(++this.size,n.push([t,e])):n[r][1]=e,this};function Nt(t){var e=-1,n=null==t?0:t.length;for(this.clear();++e<n;){var r=t[e];this.set(r[0],r[1])}}Nt.prototype.clear=It,Nt.prototype.delete=St,Nt.prototype.get=Vt,Nt.prototype.has=Pt,Nt.prototype.set=Rt;var Mt=Nt,Gt=st(_,"Map"),Ht=xt,Wt=Mt,Zt=Gt;var Ut=function(t){var e=typeof t;return"string"==e||"number"==e||"symbol"==e||"boolean"==e?"__proto__"!==t:null===t};var qt=function(t,e){var n=t.__data__;return Ut(e)?n["string"==typeof e?"string":"hash"]:n.map},Jt=qt;var Kt=qt;var Qt=qt;var Xt=qt;var Yt=function(){this.size=0,this.__data__={hash:new Ht,map:new(Zt||Wt),string:new Ht}},te=function(t){var e=Jt(this,t).delete(t);return this.size-=e?1:0,e},ee=function(t){return Kt(this,t).get(t)},ne=function(t){return Qt(this,t).has(t)},re=function(t,e){var n=Xt(this,t),r=n.size;return n.set(t,e),this.size+=n.size==r?0:1,this};function oe(t){var e=-1,n=null==t?0:t.length;for(this.clear();++e<n;){var r=t[e];this.set(r[0],r[1])}}oe.prototype.clear=Yt,oe.prototype.delete=te,oe.prototype.get=ee,oe.prototype.has=ne,oe.prototype.set=re;var ie=oe;function ae(t,e){if("function"!=typeof t||null!=e&&"function"!=typeof e)throw new TypeError("Expected a function");var n=function(){var r=arguments,o=e?e.apply(this,r):r[0],i=n.cache;if(i.has(o))return i.get(o);var a=t.apply(this,r);return n.cache=i.set(o,a)||i,a};return n.cache=new(ae.Cache||ie),n}ae.Cache=ie;var ce=ae;var le=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g,de=/\\(\\)?/g,se=function(t){var e=ce(t,(function(t){return 500===n.size&&n.clear(),t})),n=e.cache;return e}((function(t){var e=[];return 46===t.charCodeAt(0)&&e.push(""),t.replace(le,(function(t,n,r,o){e.push(r?o.replace(de,"$1"):n||t)})),e}));var ue=function(t,e){for(var n=-1,r=null==t?0:t.length,o=Array(r);++n<r;)o[n]=e(t[n],n,t);return o},he=b,pe=S,ve=B?B.prototype:void 0,fe=ve?ve.toString:void 0;var ge=function t(e){if("string"==typeof e)return e;if(he(e))return ue(e,t)+"";if(pe(e))return fe?fe.call(e):"";var n=e+"";return"0"==n&&1/e==-Infinity?"-0":n},ye=ge;var me=b,be=M,Fe=se,we=function(t){return null==t?"":ye(t)};var _e=S;var Be=function(t,e){return me(t)?t:be(t,e)?[t]:Fe(we(t))},Ce=function(t){if("string"==typeof t||_e(t))return t;var e=t+"";return"0"==e&&1/t==-Infinity?"-0":e};var $e=function(t,e){for(var n=0,r=(e=Be(e,t)).length;null!=t&&n<r;)t=t[Ce(e[n++])];return n&&n==r?t:void 0};var ke=function(t,e,n){var r=null==t?void 0:$e(t,e);return void 0===r?n:r};const xe=(t,e,n)=>e?ke(n,e)||ke(t,e):n||t;var Ee;!function(t){t.colorScheme="colorScheme",t.layout="layout",t.textStyleScheme="textStyleScheme"}(Ee||(Ee={}));const De={collections:{base:{Brand:{1:"#EF413D",2:"#F26664",3:"#F58E8B",4:"#F9B5B2",5:"#FDDDD7",6:"#FFEEEA"},Primary:"#1C76D5",PrimaryDark:"#1869BF",Secondary:"#0056b3",Accent:{Dark:{1:"#465A88",2:"#556D99",3:"#8D8DBF"},Light:{1:"#57A9FF",2:"#81BFFF",3:"#BED7FF",4:"#E2ECFD",5:"#F6F8FF",6:"#FBFCFE"}},Neutral:{1:"#282828",2:"#424242",3:"#686868",4:"#A4A4A4",5:"#E0E4E5",6:"#ECEFEF",7:"#F8F8F8",8:"#FFFFFF"},Validation:{Green:{Text:"#097123",Icon:"#4FC029",Border:"#95D97F",Background:"#F9FDF8"},Orange:{Text:"#B34E00",Icon:"#FEAB10",Border:"#F9CB77",Background:"#FFFCF7",Badge:"#F57F17"},Red:{Text:"#C60000",Icon:"#C60000",Border:"#DD6666",Background:"#FDF7F7"}}},bookingsg:{Brand:{1:"#EF413D",2:"#F26664",3:"#F58E8B",4:"#F9B5B2",5:"#FDDDD7",6:"#FFEEEA"},Primary:"#6F4AB8",PrimaryDark:"#6443A6",Secondary:"#6443A6",Accent:{Dark:{1:"#355985",2:"#68819D",3:"#9AABBE"},Light:{1:"#9F82D9",2:"#B5A5D7",3:"#CEC3E4 ",4:"#E2DBEF",5:"#F2EFF8",6:"#F7F6FB"}},Neutral:{1:"#282828",2:"#424242",3:"#686868",4:"#A4A4A4",5:"#E0E4E5",6:"#ECEFEF",7:"#F8F8F8",8:"#FFFFFF"},Validation:{Green:{Text:"#097123",Icon:"#4FC029",Border:"#95D97F",Background:"#F9FDF8"},Orange:{Text:"#B34E00",Icon:"#FEAB10",Border:"#F9CB77",Background:"#FFFCF7",Badge:"#F57F17"},Red:{Text:"#C60000",Icon:"#C60000",Border:"#DD6666",Background:"#FDF7F7"}}}},defaultValue:"base"},Oe=t=>e=>{const n=e.theme,r=((t,e)=>{const n=e||t.defaultValue;return ke(t.collections,n)})(De,n[Ee.colorScheme]);return n.options&&n.options.color?xe(r,t,n.options.color):xe(r,t)},Ae=(Oe("Brand.1"),Oe("Brand.2"),Oe("Brand.3"),Oe("Brand.4"),Oe("Brand.5"),Oe("Brand.6"),Oe("Primary"),Oe("PrimaryDark"),Oe("Secondary"),{Light:{1:Oe("Accent.Light.1"),2:Oe("Accent.Light.2"),3:Oe("Accent.Light.3"),4:Oe("Accent.Light.4"),5:Oe("Accent.Light.5"),6:Oe("Accent.Light.6")},Dark:{1:Oe("Accent.Dark.1"),2:Oe("Accent.Dark.2"),3:Oe("Accent.Dark.3")}}),je={1:Oe("Neutral.1"),2:Oe("Neutral.2"),3:Oe("Neutral.3"),4:Oe("Neutral.4"),5:Oe("Neutral.5"),6:Oe("Neutral.6"),7:Oe("Neutral.7"),8:Oe("Neutral.8")},ze=(Oe("Validation.Green.Text"),Oe("Validation.Green.Icon"),Oe("Validation.Green.Border"),Oe("Validation.Green.Background"),Oe("Validation.Orange.Text"),Oe("Validation.Orange.Icon"),Oe("Validation.Orange.Border"),Oe("Validation.Orange.Background"),Oe("Validation.Orange.Badge"),Oe("Validation.Red.Text"),Oe("Validation.Red.Icon"),Oe("Validation.Red.Border"),Oe("Validation.Red.Background"),c.svg`
-    height: 1rem;
-    width: 1rem;
-    vertical-align: text-top;
+    ${y.mobileL} {
+        height: calc(
+            ${t=>t.verticalHeight?`${t.verticalHeight}px`:"1vh"} * 100
+        );
 
-    #path {
-        fill: ${je[8]};
+        top: ${t=>t.offsetTop||0}px;
     }
-`),Le=e=>t(ze,{xmlns:"http://www.w3.org/2000/svg",width:"1rem",height:"1rem",viewBox:"0 0 16 16",...e,children:t("g",{fill:"none",fillRule:"evenodd",children:t("g",{id:"path",fillRule:"nonzero",children:t("g",{children:t("g",{children:t("g",{children:t("path",{d:"M8.706 14.603l6.075-6.075c.294-.29.294-.765 0-1.06L8.706 1.398c-.29-.294-.765-.294-1.06 0l-.693.694c-.3.297-.294.78.013 1.072L10.73 6.75H1.75c-.416 0-.75.334-.75.75v1c0 .416.334.75.75.75h8.981l-3.765 3.587c-.304.291-.31.775-.013 1.072l.694.694c.29.294.765.294 1.06 0z",transform:"translate(-2384.000000, -760.000000) translate(2253.000000, 692.000000) translate(16.000000, 64.000000) translate(115.000000, 4.000000) translate(0.000000, 0.000000)"})})})})})})}),Te=e=>t(ze,{width:"1rem",height:"1rem",viewBox:"0 0 40 40",xmlns:"http://www.w3.org/2000/svg",...e,children:t("path",{id:"path",d:"M20\n\t\t8.639c-.934\n\t\t0-1.742.342-2.43 1.03-.684.684-1.03 1.495-1.03 2.429 0 .931.346 1.742 1.03 2.426.688.688 1.496 1.03 2.43 1.03.931 0 1.742-.342 2.43-1.03.684-.684 1.026-1.495 1.026-2.426 0-.934-.342-1.745-1.026-2.43-.688-.687-1.499-1.03-2.43-1.03m4.61 20.91v-1.976a.959.959 0 0 0-.287-.7.959.959 0 0 0-.7-.286h-.99v-8.232a.954.954 0 0 0-.287-.7.945.945 0 0 0-.7-.29h-5.269a.95.95 0 0 0-.7.29.954.954 0 0 0-.286.7v1.976c0 .271.095.506.286.7a.959.959 0 0 0 .7.287h.99v5.269h-.99a.959.959 0 0 0-.7.286.959.959 0 0 0-.286.7v1.977c0 .274.095.505.286.7a.959.959 0 0 0 .7.286h7.246a.959.959 0 0 0 .7-.287.959.959 0 0 0 .286-.7M20 2.5c3.15 0 6.068.788 8.75 2.365a17.67 17.67 0 0 1 6.385 6.386C36.71 13.933 37.5 16.848 37.5 20c0 3.15-.79 6.068-2.365 8.751a17.71 17.71 0 0 1-6.385 6.385C26.068 36.712 23.15 37.5 20 37.5c-3.153 0-6.068-.788-8.75-2.363a17.71 17.71 0 0 1-6.385-6.385c-1.575-2.683-2.365-5.6-2.365-8.75 0-3.154.79-6.069 2.365-8.751a17.67 17.67 0 0 1 6.385-6.386C13.932 3.288 16.847 2.5 20 2.5",fillRule:"nonzero"})}),Ie=e=>t(ze,{xmlns:"http://www.w3.org/2000/svg",width:"2rem",height:"2rem",viewBox:"0 0 64 64",id:"play-icon",...e,children:t("path",{id:"path",d:"M52.762 37.237 20.474 53.38A5.856 5.856 0 0 1 12 48.143V15.856a5.856 5.856 0 0 1 8.474-5.238l32.288 16.144a5.856 5.856 0 0 1 0 10.475z",fillRule:"nonzero"})}),Se=e=>t(ze,{xmlns:"http://www.w3.org/2000/svg",width:"2rem",height:"2rem",viewBox:"0 0 32 32",fill:"none",...e,children:t("g",{id:"search",children:t("path",{id:"path",fillRule:"evenodd",clipRule:"evenodd",d:"M7.60986 7.60986C5.86994 9.34977 5 11.445 5 13.8956C5 16.3462 5.86994 18.4414 7.60986 20.1813C9.34977 21.9212 11.445 22.7911 13.8956 22.7911C15.6355 22.7911 17.2345 22.3133 18.6926 21.3576L24.2063 26.8713C24.3044 26.9571 24.4146 27 24.5372 27C24.6597 27 24.77 26.9571 24.868 26.8713L26.8713 24.868C26.9571 24.77 27 24.6597 27 24.5372C27 24.4146 26.9571 24.3044 26.8713 24.2063L21.3576 18.6926C22.3133 17.2345 22.7911 15.6355 22.7911 13.8956C22.7911 11.445 21.9212 9.34977 20.1813 7.60986C18.4414 5.86994 16.3462 5 13.8956 5C11.445 5 9.34977 5.86994 7.60986 7.60986ZM9.59484 18.178C8.4063 16.9894 7.81205 15.562 7.81205 13.8956C7.81205 12.2292 8.4063 10.8017 9.59484 9.61321C10.7834 8.42468 12.2169 7.83042 13.8956 7.83042C15.5742 7.83042 17.0047 8.42162 18.1872 9.60403C19.3696 10.7864 19.9608 12.2169 19.9608 13.8956C19.9608 15.5742 19.3696 17.0047 18.1872 18.1872C17.0047 19.3696 15.5742 19.9608 13.8956 19.9608C12.2169 19.9608 10.7834 19.3665 9.59484 18.178Z"})})}),Ve=({type:e,...n})=>{switch(e){case"arrow-right":return t(Le,{...n});case"info":return t(Te,{...n});case"search":return t(Se,{...n});case"play-alt":return t(Ie,{...n});default:{const r=`sgds-icon sgds-icon-${e}`,o=n.className?`${r} ${n.className}`:r;return t(Pe,{...n,className:o})}}},Pe=c.span`
-    font-size: 1rem;
-`,Re=c.button`
+`);var b,F="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},w={};Object.defineProperty(w,"__esModule",{value:!0});var _=t;const B=t=>_.jsx("svg",{width:"1em",height:"1em",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:_.jsx("path",{d:"M9.99991 11.229L5.97891 15.25C5.81224 15.4167 5.61091 15.4967 5.37491 15.49C5.13891 15.4827 4.93757 15.3957 4.77091 15.229C4.60424 15.0623 4.52091 14.8577 4.52091 14.615C4.52091 14.3717 4.60424 14.1667 4.77091 14L8.77091 10L4.74991 5.979C4.58324 5.81233 4.50324 5.60767 4.50991 5.365C4.51724 5.12167 4.60424 4.91667 4.77091 4.75C4.93757 4.58333 5.14224 4.5 5.38491 4.5C5.62824 4.5 5.83324 4.58333 5.99991 4.75L9.99991 8.771L14.0209 4.75C14.1876 4.58333 14.3922 4.5 14.6349 4.5C14.8782 4.5 15.0832 4.58333 15.2499 4.75C15.4166 4.91667 15.4999 5.12167 15.4999 5.365C15.4999 5.60767 15.4166 5.81233 15.2499 5.979L11.2289 10L15.2499 14.021C15.4166 14.1877 15.4999 14.389 15.4999 14.625C15.4999 14.861 15.4166 15.0623 15.2499 15.229C15.0832 15.3957 14.8782 15.479 14.6349 15.479C14.3922 15.479 14.1876 15.3957 14.0209 15.229L9.99991 11.229Z",fill:"currentColor"})});B.displayName="CrossIcon",b=w.CrossIcon=B;var C=Array.isArray,$="object"==typeof F&&F&&F.Object===Object&&F,k="object"==typeof self&&self&&self.Object===Object&&self,E=$||k||Function("return this")(),x=E.Symbol,O=x,D=Object.prototype,A=D.hasOwnProperty,j=D.toString,L=O?O.toStringTag:void 0;var T=function(t){var e=A.call(t,L),n=t[L];try{t[L]=void 0;var r=!0}catch(t){}var o=j.call(t);return r&&(e?t[L]=n:delete t[L]),o},S=Object.prototype.toString;var z=T,I=function(t){return S.call(t)},V=x?x.toStringTag:void 0;var P=function(t){return null==t?void 0===t?"[object Undefined]":"[object Null]":V&&V in Object(t)?z(t):I(t)};var N=P,R=function(t){return null!=t&&"object"==typeof t};var G=function(t){return"symbol"==typeof t||R(t)&&"[object Symbol]"==N(t)},H=C,M=G,W=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,K=/^\w*$/;var U=function(t,e){if(H(t))return!1;var n=typeof t;return!("number"!=n&&"symbol"!=n&&"boolean"!=n&&null!=t&&!M(t))||(K.test(t)||!W.test(t)||null!=e&&t in Object(e))};var Z=function(t){var e=typeof t;return null!=t&&("object"==e||"function"==e)},q=P,J=Z;var Q,X=function(t){if(!J(t))return!1;var e=q(t);return"[object Function]"==e||"[object GeneratorFunction]"==e||"[object AsyncFunction]"==e||"[object Proxy]"==e},Y=E["__core-js_shared__"],tt=(Q=/[^.]+$/.exec(Y&&Y.keys&&Y.keys.IE_PROTO||""))?"Symbol(src)_1."+Q:"";var et=function(t){return!!tt&&tt in t},nt=Function.prototype.toString;var rt=X,ot=et,it=Z,at=function(t){if(null!=t){try{return nt.call(t)}catch(t){}try{return t+""}catch(t){}}return""},ct=/^\[object .+?Constructor\]$/,lt=Function.prototype,dt=Object.prototype,st=lt.toString,ut=dt.hasOwnProperty,ht=RegExp("^"+st.call(ut).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");var pt=function(t){return!(!it(t)||ot(t))&&(rt(t)?ht:ct).test(at(t))},vt=function(t,e){return null==t?void 0:t[e]};var ft=function(t,e){var n=vt(t,e);return pt(n)?n:void 0},gt=ft(Object,"create"),yt=gt;var mt=function(){this.__data__=yt?yt(null):{},this.size=0};var bt=function(t){var e=this.has(t)&&delete this.__data__[t];return this.size-=e?1:0,e},Ft=gt,wt=Object.prototype.hasOwnProperty;var _t=function(t){var e=this.__data__;if(Ft){var n=e[t];return"__lodash_hash_undefined__"===n?void 0:n}return wt.call(e,t)?e[t]:void 0},Bt=gt,Ct=Object.prototype.hasOwnProperty;var $t=gt;var kt=mt,Et=bt,xt=_t,Ot=function(t){var e=this.__data__;return Bt?void 0!==e[t]:Ct.call(e,t)},Dt=function(t,e){var n=this.__data__;return this.size+=this.has(t)?0:1,n[t]=$t&&void 0===e?"__lodash_hash_undefined__":e,this};function At(t){var e=-1,n=null==t?0:t.length;for(this.clear();++e<n;){var r=t[e];this.set(r[0],r[1])}}At.prototype.clear=kt,At.prototype.delete=Et,At.prototype.get=xt,At.prototype.has=Ot,At.prototype.set=Dt;var jt=At;var Lt=function(){this.__data__=[],this.size=0};var Tt=function(t,e){return t===e||t!=t&&e!=e};var St=function(t,e){for(var n=t.length;n--;)if(Tt(t[n][0],e))return n;return-1},zt=St,It=Array.prototype.splice;var Vt=St;var Pt=St;var Nt=St;var Rt=Lt,Gt=function(t){var e=this.__data__,n=zt(e,t);return!(n<0)&&(n==e.length-1?e.pop():It.call(e,n,1),--this.size,!0)},Ht=function(t){var e=this.__data__,n=Vt(e,t);return n<0?void 0:e[n][1]},Mt=function(t){return Pt(this.__data__,t)>-1},Wt=function(t,e){var n=this.__data__,r=Nt(n,t);return r<0?(++this.size,n.push([t,e])):n[r][1]=e,this};function Kt(t){var e=-1,n=null==t?0:t.length;for(this.clear();++e<n;){var r=t[e];this.set(r[0],r[1])}}Kt.prototype.clear=Rt,Kt.prototype.delete=Gt,Kt.prototype.get=Ht,Kt.prototype.has=Mt,Kt.prototype.set=Wt;var Ut=Kt,Zt=ft(E,"Map"),qt=jt,Jt=Ut,Qt=Zt;var Xt=function(t){var e=typeof t;return"string"==e||"number"==e||"symbol"==e||"boolean"==e?"__proto__"!==t:null===t};var Yt=function(t,e){var n=t.__data__;return Xt(e)?n["string"==typeof e?"string":"hash"]:n.map},te=Yt;var ee=Yt;var ne=Yt;var re=Yt;var oe=function(){this.size=0,this.__data__={hash:new qt,map:new(Qt||Jt),string:new qt}},ie=function(t){var e=te(this,t).delete(t);return this.size-=e?1:0,e},ae=function(t){return ee(this,t).get(t)},ce=function(t){return ne(this,t).has(t)},le=function(t,e){var n=re(this,t),r=n.size;return n.set(t,e),this.size+=n.size==r?0:1,this};function de(t){var e=-1,n=null==t?0:t.length;for(this.clear();++e<n;){var r=t[e];this.set(r[0],r[1])}}de.prototype.clear=oe,de.prototype.delete=ie,de.prototype.get=ae,de.prototype.has=ce,de.prototype.set=le;var se=de;function ue(t,e){if("function"!=typeof t||null!=e&&"function"!=typeof e)throw new TypeError("Expected a function");var n=function(){var r=arguments,o=e?e.apply(this,r):r[0],i=n.cache;if(i.has(o))return i.get(o);var a=t.apply(this,r);return n.cache=i.set(o,a)||i,a};return n.cache=new(ue.Cache||se),n}ue.Cache=se;var he=ue;var pe=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g,ve=/\\(\\)?/g,fe=function(t){var e=he(t,(function(t){return 500===n.size&&n.clear(),t})),n=e.cache;return e}((function(t){var e=[];return 46===t.charCodeAt(0)&&e.push(""),t.replace(pe,(function(t,n,r,o){e.push(r?o.replace(ve,"$1"):n||t)})),e}));var ge=function(t,e){for(var n=-1,r=null==t?0:t.length,o=Array(r);++n<r;)o[n]=e(t[n],n,t);return o},ye=C,me=G,be=x?x.prototype:void 0,Fe=be?be.toString:void 0;var we=function t(e){if("string"==typeof e)return e;if(ye(e))return ge(e,t)+"";if(me(e))return Fe?Fe.call(e):"";var n=e+"";return"0"==n&&1/e==-Infinity?"-0":n},_e=we;var Be=C,Ce=U,$e=fe,ke=function(t){return null==t?"":_e(t)};var Ee=G;var xe=function(t,e){return Be(t)?t:Ce(t,e)?[t]:$e(ke(t))},Oe=function(t){if("string"==typeof t||Ee(t))return t;var e=t+"";return"0"==e&&1/t==-Infinity?"-0":e};var De=function(t,e){for(var n=0,r=(e=xe(e,t)).length;null!=t&&n<r;)t=t[Oe(e[n++])];return n&&n==r?t:void 0};var Ae=function(t,e,n){var r=null==t?void 0:De(t,e);return void 0===r?n:r};const je=(t,e,n)=>e?Ae(n,e)||Ae(t,e):n||t;var Le;!function(t){t.colorScheme="colorScheme",t.layout="layout",t.textStyleScheme="textStyleScheme",t.designTokenScheme="designTokenScheme"}(Le||(Le={}));const Te={collections:{base:{Brand:{1:"#EF413D",2:"#F26664",3:"#F58E8B",4:"#F9B5B2",5:"#FDDDD7",6:"#FFEEEA"},Primary:"#1C76D5",PrimaryDark:"#1869BF",Secondary:"#0056b3",Accent:{Dark:{1:"#465A88",2:"#556D99",3:"#8D8DBF"},Light:{1:"#57A9FF",2:"#81BFFF",3:"#BED7FF",4:"#E2ECFD",5:"#F6F8FF",6:"#FBFCFE"}},Neutral:{1:"#282828",2:"#424242",3:"#686868",4:"#A4A4A4",5:"#E0E4E5",6:"#ECEFEF",7:"#F8F8F8",8:"#FFFFFF"},Validation:{Green:{Text:"#097123",Icon:"#4FC029",Border:"#95D97F",Background:"#F9FDF8"},Orange:{Text:"#B34E00",Icon:"#FEAB10",Border:"#F9CB77",Background:"#FFFCF7",Badge:"#F57F17"},Red:{Text:"#C60000",Icon:"#C60000",Border:"#DD6666",Background:"#FDF7F7"}},Shadow:{Accent:"rgba(87, 169, 255, 0.5)",Red:"rgba(221, 102, 102, 0.8)"}},bookingsg:{Brand:{1:"#EF413D",2:"#F26664",3:"#F58E8B",4:"#F9B5B2",5:"#FDDDD7",6:"#FFEEEA"},Primary:"#6F4AB8",PrimaryDark:"#6443A6",Secondary:"#6443A6",Accent:{Dark:{1:"#355985",2:"#68819D",3:"#9AABBE"},Light:{1:"#9F82D9",2:"#B5A5D7",3:"#CEC3E4 ",4:"#E2DBEF",5:"#F2EFF8",6:"#F7F6FB"}},Neutral:{1:"#282828",2:"#424242",3:"#686868",4:"#A4A4A4",5:"#E0E4E5",6:"#ECEFEF",7:"#F8F8F8",8:"#FFFFFF"},Validation:{Green:{Text:"#097123",Icon:"#4FC029",Border:"#95D97F",Background:"#F9FDF8"},Orange:{Text:"#B34E00",Icon:"#FEAB10",Border:"#F9CB77",Background:"#FFFCF7",Badge:"#F57F17"},Red:{Text:"#C60000",Icon:"#C60000",Border:"#DD6666",Background:"#FDF7F7"}},Shadow:{Accent:"rgba(161, 87, 255, 0.5)",Red:"rgba(221, 102, 102, 0.8)"}}},defaultValue:"base"},Se=t=>e=>{const n=e.theme,r=((t,e)=>{const n=e||t.defaultValue;return Ae(t.collections,n)})(Te,n[Le.colorScheme]);return n.options&&n.options.color?je(r,t,n.options.color):je(r,t)},ze=(Se("Brand.1"),Se("Brand.2"),Se("Brand.3"),Se("Brand.4"),Se("Brand.5"),Se("Brand.6"),Se("Primary"),Se("PrimaryDark"),Se("Secondary"),{Light:{1:Se("Accent.Light.1"),2:Se("Accent.Light.2"),3:Se("Accent.Light.3"),4:Se("Accent.Light.4"),5:Se("Accent.Light.5"),6:Se("Accent.Light.6")},Dark:{1:Se("Accent.Dark.1"),2:Se("Accent.Dark.2"),3:Se("Accent.Dark.3")}}),Ie={1:Se("Neutral.1"),2:Se("Neutral.2"),3:Se("Neutral.3"),4:Se("Neutral.4"),5:Se("Neutral.5"),6:Se("Neutral.6"),7:Se("Neutral.7"),8:Se("Neutral.8")},Ve=(Se("Validation.Green.Text"),Se("Validation.Green.Icon"),Se("Validation.Green.Border"),Se("Validation.Green.Background"),Se("Validation.Orange.Text"),Se("Validation.Orange.Icon"),Se("Validation.Orange.Border"),Se("Validation.Orange.Background"),Se("Validation.Orange.Badge"),Se("Validation.Red.Text"),Se("Validation.Red.Icon"),Se("Validation.Red.Border"),Se("Validation.Red.Background"),Se("Shadow.Accent"),Se("Shadow.Red"),l.button`
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 1.5rem;
-    background-color: ${je[8]};
+    background-color: transparent;
     border: none;
     cursor: pointer;
 
@@ -79,42 +67,41 @@ import{jsx as t,jsxs as e}from"react/jsx-runtime";import n,{useState as r,useRef
         width: 1rem;
     }
 
+    &:active,
     &:focus {
-        outline: none;
-        background-color: ${je[7]};
+        ${({$outline:t})=>"none"===t&&"outline: none;"}
+
+        ${({$highlight:t})=>t&&d`
+                background-color: ${Ie[7]};
+            `}
     }
-`,Ne=n.forwardRef((({children:e,iconType:n,...r},o)=>{let i;if(e)i=e;else{if(!n)return console.error("IconButton - Did not specify a valid children or iconType prop"),null;i=t(Ve,{type:n})}return t(Re,{ref:o,...r,children:i})})),Me=c.div`
+`),Pe=r.forwardRef((({children:t,focusHighlight:n=!0,focusOutline:r="none",...o},i)=>e(Ve,{ref:i,$outline:r,$highlight:n,...o,children:t}))),Ne=l.div`
     position: relative;
     display: flex;
     flex-direction: column;
     width: 40rem;
     max-height: 70%;
-    background: ${je[8]};
+    background: ${Ie[8]};
     box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.45);
     border-radius: 0.75rem;
     overflow: hidden;
 
-    ${g.mobileL} {
+    ${y.mobileL} {
         width: 90%;
         max-height: 70%;
     }
-`,Ge=c(Ne)`
+`,Re=l(Pe)`
     position: absolute;
     top: 0;
     right: 0;
     padding: 1rem 0.75rem;
     border-top-right-radius: 0.75rem;
-    background: transparent;
-    :focus-visible,
-    :focus,
-    :active {
-        background: transparent;
-    }
     :focus-visible {
-        outline: 4px solid ${Ae.Light[1]};
+        outline: 4px solid ${ze.Light[1]};
     }
-`,He=c(Ve)`
-    font-size: 2rem;
-    color: ${je[4]};
-`,We=Object.assign((({id:e="modal",show:n,animationFrom:o="bottom",children:a,enableOverlayClick:c=!0,rootComponentId:l,zIndex:d,onOverlayClick:s,...h})=>{const[p,v]=r();i((()=>(v(.01*window.innerHeight),window.addEventListener("resize",f),()=>{window.removeEventListener("resize",f)})),[]);const f=()=>{const t=.01*window.innerHeight;v(t)};return t(u,{"data-testid":`${e}-overlay`,show:n,enableOverlayClick:c,onOverlayClick:s,id:e,rootId:l,zIndex:d,children:t(y,{show:n,animationFrom:o,"data-testid":e,verticalHeight:p,...h,children:a})})}),{Box:({id:n="modal-box",children:r,onClose:o,showCloseButton:i=!0,...a})=>e(Me,{"data-testid":n,...a,onClick:t=>{t.stopPropagation()},children:[i&&t(Ge,{type:"button",onClick:o,"data-testid":"close-button",children:t(He,{type:"cross"})}),r]})});export{We as Modal};
+`,Ge=l(b)`
+    height: 1.5rem;
+    width: 1.5rem;
+    color: ${Ie[4]};
+`,He=Object.assign((({id:t="modal",show:n,animationFrom:r="bottom",children:i,enableOverlayClick:c=!0,rootComponentId:l,zIndex:d,onOverlayClick:s,dismissKeyboardOnShow:u=!0,...p})=>{const[v,f]=o(),[g,y]=o();a((()=>window.visualViewport?(F(),window.visualViewport.addEventListener("resize",F),()=>{window.visualViewport.removeEventListener("resize",F)}):(b(),window.addEventListener("resize",b),()=>{window.removeEventListener("resize",b)})),[]),a((()=>{n&&u&&document.activeElement?.blur?.()}),[n]);const b=()=>{const t=.01*window.innerHeight;f(t)},F=()=>{const t=.01*window.visualViewport.height;f(t),y(window.visualViewport.offsetTop)};return e(h,{"data-testid":`${t}-overlay`,show:n,enableOverlayClick:c,onOverlayClick:s,id:t,rootId:l,zIndex:d,children:e(m,{show:n,animationFrom:r,"data-testid":t,verticalHeight:v,offsetTop:g,...p,children:i})})}),{Box:({id:t="modal-box",children:r,onClose:o,showCloseButton:i=!0,...a})=>n(Ne,{"data-testid":t,...a,onClick:t=>{t.stopPropagation()},children:[i&&e(Re,{type:"button",onClick:o,"data-testid":"close-button",focusHighlight:!1,children:e(Ge,{})}),r]})});export{He as Modal};
 //# sourceMappingURL=index.js.map