@lifesg/react-design-system 4.0.0-alpha.3 → 4.0.0-alpha.5

package/cjs/masthead/masthead.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime");require("./sgds-day.css"),require("./sgds-night.css");var t=require("clsx"),s=require("react"),d=require("styled-components"),n=require("./masthead.styles.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=r(t);const a=s.memo((({stretch:t=!1})=>{const r=s.useContext(d.ThemeContext),a="dark"===(null==r?void 0:r.colourMode);s.useEffect((()=>{i()||l()}),[]),s.useEffect((()=>{a?document.documentElement.classList.add(u):document.documentElement.classList.remove(u)}),[a]);const i=()=>document.getElementById(o),l=()=>{if(!document.getElementById(o)){const e=document.createElement("script");e.id=o,e.type="module",e.src=m,document.head.appendChild(e)}};return e.jsx("div",{className:c.default(n.wrapper,t&&n.wrapperStretch),dangerouslySetInnerHTML:{__html:"<sgds-masthead></sgds-masthead>"}})})),o="lifesg-ds-masthead-script",m="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3/components/Masthead/index.umd.js",u="sgds-night-theme";exports.Masthead=a;
+"use strict";var e=require("react/jsx-runtime");require("./sgds-day.css"),require("./sgds-night.css");var t=require("clsx"),r=require("react");require("../theme/theme-provider/index.js");var s=require("../theme/theme-provider/hooks.js");require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer"),require("../theme/utils/use-media-query.js");var d=require("./masthead.styles.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=n(t);const u=r.memo((({stretch:t=!1})=>{const{mode:n}=s.useTheme(),u="dark"===n;r.useEffect((()=>{c()||l()}),[]),r.useEffect((()=>{u?document.documentElement.classList.add(o):document.documentElement.classList.remove(o)}),[u]);const c=()=>document.getElementById(a),l=()=>{if(!document.getElementById(a)){const e=document.createElement("script");e.id=a,e.type="module",e.src=m,document.head.appendChild(e)}};return e.jsx("div",{className:i.default(d.wrapper,t&&d.wrapperStretch),dangerouslySetInnerHTML:{__html:"<sgds-masthead></sgds-masthead>"}})})),a="lifesg-ds-masthead-script",m="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3/components/Masthead/index.umd.js",o="sgds-night-theme";exports.Masthead=u;
 //# sourceMappingURL=masthead.js.map

package/cjs/masthead/masthead.js.map

@@ -1 +1 @@
-{"version":3,"file":"masthead.js","sources":["../../../src/masthead/masthead.tsx"],"sourcesContent":["import \"@govtechsg/sgds-web-component/themes/day.css\";\nimport \"@govtechsg/sgds-web-component/themes/night.css\";\n\nimport clsx from \"clsx\";\nimport { memo, useContext, useEffect } from \"react\";\nimport { ThemeContext } from \"styled-components\";\n\nimport * as styles from \"./masthead.styles\";\nimport type { MastheadProps } from \"./types\";\n\nconst MastheadComponent = ({ stretch = false }: MastheadProps): JSX.Element => {\n    const theme = useContext(ThemeContext);\n    const isDarkMode = theme?.colourMode === \"dark\";\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (!doAssetsExist()) {\n            addAssets();\n        }\n    }, []);\n\n    useEffect(() => {\n        // SGDS dark mode only takes effect when this class is set on the :root element\n        if (isDarkMode) {\n            document.documentElement.classList.add(SGDS_THEME_NIGHT_CLASSNAME);\n        } else {\n            document.documentElement.classList.remove(\n                SGDS_THEME_NIGHT_CLASSNAME\n            );\n        }\n    }, [isDarkMode]);\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 (\n        <div\n            className={clsx(styles.wrapper, stretch && styles.wrapperStretch)}\n            dangerouslySetInnerHTML={createContent()}\n        />\n    );\n};\n\nexport const Masthead = memo(MastheadComponent);\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@3/components/Masthead/index.umd.js\";\nconst SGDS_THEME_NIGHT_CLASSNAME = \"sgds-night-theme\";\n"],"names":["Masthead","memo","stretch","theme","useContext","ThemeContext","isDarkMode","colourMode","useEffect","doAssetsExist","addAssets","document","documentElement","classList","add","SGDS_THEME_NIGHT_CLASSNAME","remove","getElementById","SCRIPT_ID","script","createElement","id","type","src","SCRIPT_SRC","head","appendChild","_jsx","className","clsx","styles.wrapper","styles.wrapperStretch","dangerouslySetInnerHTML","__html"],"mappings":"iUAUA,MAiEaA,EAAWC,EAAAA,MAjEE,EAAGC,WAAU,MACnC,MAAMC,EAAQC,EAAAA,WAAWC,gBACnBC,EAAmC,UAAtBH,aAAK,EAALA,EAAOI,YAK1BC,EAAAA,WAAU,KACDC,KACDC,GACJ,GACD,IAEHF,EAAAA,WAAU,KAEFF,EACAK,SAASC,gBAAgBC,UAAUC,IAAIC,GAEvCJ,SAASC,gBAAgBC,UAAUG,OAC/BD,EAER,GACD,CAACT,IAKJ,MAAMG,EAAgB,IACXE,SAASM,eAAeC,GAG7BR,EAAY,KACd,IAAKC,SAASM,eAAeC,GAAY,CACrC,MAAMC,EAASR,SAASS,cAAc,UACtCD,EAAOE,GAAKH,EACZC,EAAOG,KAAO,SACdH,EAAOI,IAAMC,EAEbb,SAASc,KAAKC,YAAYP,EAC9B,GAkBJ,OACIQ,aACIC,UAAWC,EAAAA,QAAKC,EAAAA,QAAgB5B,GAAW6B,kBAC3CC,wBAVG,CAAEC,OAAQ,oCAWf,IASJf,EAAY,4BACZM,EACF,gGACET,EAA6B"}
+{"version":3,"file":"masthead.js","sources":["../../../src/masthead/masthead.tsx"],"sourcesContent":["import \"@govtechsg/sgds-web-component/themes/day.css\";\nimport \"@govtechsg/sgds-web-component/themes/night.css\";\n\nimport clsx from \"clsx\";\nimport { memo, useEffect } from \"react\";\n\nimport { useTheme } from \"../theme\";\n\nimport * as styles from \"./masthead.styles\";\nimport type { MastheadProps } from \"./types\";\n\nconst MastheadComponent = ({ stretch = false }: MastheadProps): JSX.Element => {\n    const { mode } = useTheme();\n    const isDarkMode = mode === \"dark\";\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (!doAssetsExist()) {\n            addAssets();\n        }\n    }, []);\n\n    useEffect(() => {\n        // SGDS dark mode only takes effect when this class is set on the :root element\n        if (isDarkMode) {\n            document.documentElement.classList.add(SGDS_THEME_NIGHT_CLASSNAME);\n        } else {\n            document.documentElement.classList.remove(\n                SGDS_THEME_NIGHT_CLASSNAME\n            );\n        }\n    }, [isDarkMode]);\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 (\n        <div\n            className={clsx(styles.wrapper, stretch && styles.wrapperStretch)}\n            dangerouslySetInnerHTML={createContent()}\n        />\n    );\n};\n\nexport const Masthead = memo(MastheadComponent);\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@3/components/Masthead/index.umd.js\";\nconst SGDS_THEME_NIGHT_CLASSNAME = \"sgds-night-theme\";\n"],"names":["Masthead","memo","stretch","mode","useTheme","isDarkMode","useEffect","doAssetsExist","addAssets","document","documentElement","classList","add","SGDS_THEME_NIGHT_CLASSNAME","remove","getElementById","SCRIPT_ID","script","createElement","id","type","src","SCRIPT_SRC","head","appendChild","_jsx","className","clsx","styles.wrapper","styles.wrapperStretch","dangerouslySetInnerHTML","__html"],"mappings":"4wBAWA,MAiEaA,EAAWC,EAAAA,MAjEE,EAAGC,WAAU,MACnC,MAAMC,KAAEA,GAASC,aACXC,EAAsB,SAATF,EAKnBG,EAAAA,WAAU,KACDC,KACDC,GACJ,GACD,IAEHF,EAAAA,WAAU,KAEFD,EACAI,SAASC,gBAAgBC,UAAUC,IAAIC,GAEvCJ,SAASC,gBAAgBC,UAAUG,OAC/BD,EAER,GACD,CAACR,IAKJ,MAAME,EAAgB,IACXE,SAASM,eAAeC,GAG7BR,EAAY,KACd,IAAKC,SAASM,eAAeC,GAAY,CACrC,MAAMC,EAASR,SAASS,cAAc,UACtCD,EAAOE,GAAKH,EACZC,EAAOG,KAAO,SACdH,EAAOI,IAAMC,EAEbb,SAASc,KAAKC,YAAYP,EAC9B,GAkBJ,OACIQ,aACIC,UAAWC,EAAAA,QAAKC,EAAAA,QAAgB1B,GAAW2B,kBAC3CC,wBAVG,CAAEC,OAAQ,oCAWf,IASJf,EAAY,4BACZM,EACF,gGACET,EAA6B"}

package/cjs/masthead/masthead.styles_1huzon9.css

@@ -1,2 +1,2 @@
-.wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-xxl);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-xxl);--sgds-mainnav-max-width:1440px;}:where(body.fds-breakpoint-xl-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-xl);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-xl);}:where(body.fds-breakpoint-lg-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-lg);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-lg);}:where(body.fds-breakpoint-md-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-md);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-md);}:where(body.fds-breakpoint-sm-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-sm);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-sm);}:where(body.fds-breakpoint-xs-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-xs);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-xs);}:where(body.fds-breakpoint-xxs-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-xxs);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-xxs);}
-.wq9iwwi{--sgds-mainnav-max-width:calc(infinity * 1px);}
+@layer fds{.wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-xxl);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-xxl);--sgds-mainnav-max-width:1440px;}:where(body.fds-breakpoint-xl-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-xl);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-xl);}:where(body.fds-breakpoint-lg-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-lg);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-lg);}:where(body.fds-breakpoint-md-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-md);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-md);}:where(body.fds-breakpoint-sm-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-sm);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-sm);}:where(body.fds-breakpoint-xs-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-xs);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-xs);}:where(body.fds-breakpoint-xxs-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-xxs);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-xxs);}
+.wq9iwwi{--sgds-mainnav-max-width:calc(infinity * 1px);}}

package/cjs/menu/menu-content.styles_p7ijll.css

@@ -1,2 +1,2 @@
-.pmssexq{border-radius:var(--fds-radius-md);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);background:var(--fds-colour-bg);box-shadow:var(--fds-shadow-md-subtle);--fds-internal-menu-panel-maxHeight:initial;--fds-internal-menu-panel-overflow:initial;--fds-internal-menu-panel-xSpacing:0px;--fds-internal-menu-panel-availableWidth:calc(100vw - var(--fds-internal-menu-panel-xSpacing
-              ) * 2);min-width:min(15rem, var(--fds-internal-menu-panel-availableWidth));max-width:min(24rem, var(--fds-internal-menu-panel-availableWidth));max-height:var(--fds-internal-menu-panel-maxHeight);overflow-y:var(--fds-internal-menu-panel-overflow);}:where(body.fds-breakpoint-sm-max) .pmssexq{--fds-internal-menu-panel-xSpacing:var(--fds-breakpoint-margin-sm);}:where(body.fds-breakpoint-xs-max) .pmssexq{--fds-internal-menu-panel-xSpacing:var(--fds-breakpoint-margin-xs);}:where(body.fds-breakpoint-xxs-max) .pmssexq{--fds-internal-menu-panel-xSpacing:var(--fds-breakpoint-margin-xxs);}.pmssexq:focus{outline:none;}.pmssexq::-webkit-scrollbar{width:14px;}.pmssexq::-webkit-scrollbar-track{background:transparent;}.pmssexq::-webkit-scrollbar-thumb{background:var(--fds-colour-bg-inverse-subtlest);border:5px solid transparent;border-radius:var(--fds-radius-full);-webkit-background-clip:padding-box;background-clip:padding-box;}
+@layer fds{.pmssexq{border-radius:var(--fds-radius-md);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);background:var(--fds-colour-bg);box-shadow:var(--fds-shadow-md-subtle);--fds-internal-menu-panel-maxHeight:initial;--fds-internal-menu-panel-overflow:initial;--fds-internal-menu-panel-xSpacing:0px;--fds-internal-menu-panel-availableWidth:calc(100vw - var(--fds-internal-menu-panel-xSpacing
+              ) * 2);min-width:min(15rem, var(--fds-internal-menu-panel-availableWidth));max-width:min(24rem, var(--fds-internal-menu-panel-availableWidth));max-height:var(--fds-internal-menu-panel-maxHeight);overflow-y:var(--fds-internal-menu-panel-overflow);}:where(body.fds-breakpoint-sm-max) .pmssexq{--fds-internal-menu-panel-xSpacing:var(--fds-breakpoint-margin-sm);}:where(body.fds-breakpoint-xs-max) .pmssexq{--fds-internal-menu-panel-xSpacing:var(--fds-breakpoint-margin-xs);}:where(body.fds-breakpoint-xxs-max) .pmssexq{--fds-internal-menu-panel-xSpacing:var(--fds-breakpoint-margin-xxs);}.pmssexq:focus{outline:none;}.pmssexq::-webkit-scrollbar{width:14px;}.pmssexq::-webkit-scrollbar-track{background:transparent;}.pmssexq::-webkit-scrollbar-thumb{background:var(--fds-colour-bg-inverse-subtlest);border:5px solid transparent;border-radius:var(--fds-radius-full);-webkit-background-clip:padding-box;background-clip:padding-box;}}

package/cjs/menu/menu-item.styles_liyed8.css

@@ -1,3 +1,3 @@
-.m1ddqpur{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding:var(--fds-spacing-8) var(--fds-spacing-16);}
+@layer fds{.m1ddqpur{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding:var(--fds-spacing-8) var(--fds-spacing-16);}
 .tor9xcz{color:var(--fds-colour-text);}
-.s12tso9{color:var(--fds-colour-text-subtler);}
+.s12tso9{color:var(--fds-colour-text-subtler);}}

package/cjs/menu/menu-link.styles_hfxoez.css

@@ -1,2 +1,2 @@
-.mmmrhdq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
-.l5rk4za{color:var(--fds-colour-text);margin:0 var(--fds-spacing-8);border:var(--fds-border-style-solid) transparent;border-width:var(--fds-spacing-8) var(--fds-spacing-8);border-radius:var(--fds-radius-md);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap;}.l5rk4za:hover,.l5rk4za:active,.l5rk4za:focus{background-color:var(--fds-colour-bg-hover);color:var(--fds-colour-text);}.l5rk4za:focus-visible{outline:2px solid var(--fds-colour-focus-ring);outline-offset:0;}
+@layer fds{.mmmrhdq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.l5rk4za{color:var(--fds-colour-text);margin:0 var(--fds-spacing-8);border:var(--fds-border-style-solid) transparent;border-width:var(--fds-spacing-8) var(--fds-spacing-8);border-radius:var(--fds-radius-md);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap;}.l5rk4za:hover,.l5rk4za:active,.l5rk4za:focus{background-color:var(--fds-colour-bg-hover);color:var(--fds-colour-text);}.l5rk4za:focus-visible{outline:2px solid var(--fds-colour-focus-ring);outline-offset:0;}}

package/cjs/menu/menu-section.styles_g7my4d.css

@@ -1,3 +1,3 @@
-.s1fmxqsy{padding:var(--fds-spacing-8) 0;margin:0;list-style:none;}
+@layer fds{.s1fmxqsy{padding:var(--fds-spacing-8) 0;margin:0;list-style:none;}
 .s1o971t2{border-top:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
-.llhca5j{margin:0 var(--fds-spacing-16) var(--fds-spacing-8);color:var(--fds-colour-text-subtler);}
+.llhca5j{margin:0 var(--fds-spacing-16) var(--fds-spacing-8);color:var(--fds-colour-text-subtler);}}

package/cjs/modal/modal-box.styles.js

@@ -1,2 +1,2 @@
-"use strict";require("./modal-box.styles_1xrlxhd.css");exports.box="b14nv3ev",exports.closeButton="ccgs01o";
+"use strict";require("./modal-box.styles_y52cts.css");exports.box="b14nv3ev",exports.closeButton="ccgs01o";
 //# sourceMappingURL=modal-box.styles.js.map

package/cjs/modal/modal-box.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-box.styles.js","sources":["../../../src/modal/modal-box.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, MediaQuery, Radius, Shadow, Spacing } from \"../theme\";\n\nexport const box = css`\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    width: 40rem;\n    max-height: 70%;\n    background: ${Colour.bg};\n    box-shadow: ${Shadow[\"lg-strong\"]};\n    border-radius: ${Radius[\"lg\"]};\n    overflow: hidden;\n\n    ${MediaQuery.MaxWidth.md} {\n        width: 90%;\n        max-height: 70%;\n    }\n`;\n\nexport const closeButton = css`\n    position: absolute;\n    top: var(--close-button-top-inset, ${Spacing[\"spacing-16\"]});\n    right: var(--close-button-right-inset, ${Spacing[\"spacing-16\"]});\n    padding: 0;\n    color: ${Colour.icon};\n\n    svg {\n        height: 2rem;\n        width: 2rem;\n    }\n\n    ${MediaQuery.MaxWidth.sm} {\n        right: var(--close-button-right-inset, ${Spacing[\"spacing-20\"]});\n    }\n`;\n"],"names":[],"mappings":"wFAIgB,+BAiBQ"}
+{"version":3,"file":"modal-box.styles.js","sources":["../../../src/modal/modal-box.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, MediaQuery, Radius, Shadow, Spacing } from \"../theme\";\nimport * as modalStyles from \"./modal.styles\";\n\nexport const box = css`\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    width: 40rem;\n    max-height: 70%;\n    background: ${Colour.bg};\n    box-shadow: ${Shadow[\"lg-strong\"]};\n    border-radius: ${Radius[\"lg\"]};\n    overflow: hidden;\n\n    ${MediaQuery.MaxWidth.md} {\n        width: 90%;\n        max-height: 70%;\n    }\n`;\n\nexport const closeButton = css`\n    position: absolute;\n    top: var(\n        ${modalStyles.tokens.closeButton.topInset},\n        ${Spacing[\"spacing-16\"]}\n    );\n    right: var(\n        ${modalStyles.tokens.closeButton.rightInset},\n        ${Spacing[\"spacing-16\"]}\n    );\n    padding: 0;\n    color: ${Colour.icon};\n\n    svg {\n        height: 2rem;\n        width: 2rem;\n    }\n\n    ${MediaQuery.MaxWidth.sm} {\n        right: var(\n            ${modalStyles.tokens.closeButton.rightInset},\n            ${Spacing[\"spacing-20\"]}\n        );\n    }\n`;\n"],"names":[],"mappings":"uFAKgB,+BAiBQ"}

package/cjs/modal/modal-box.styles_y52cts.css

@@ -0,0 +1,11 @@
+@layer fds{.b14nv3ev{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:40rem;max-height:70%;background:var(--fds-colour-bg);box-shadow:var(--fds-shadow-lg-strong);border-radius:var(--fds-radius-lg);overflow:hidden;}:where(body.fds-breakpoint-md-max) .b14nv3ev{width:90%;max-height:70%;}
+.ccgs01o{position:absolute;top:var(
+        --fds-internal-modal-closeButton-topInset,
+        var(--fds-spacing-16)
+    );right:var(
+        --fds-internal-modal-closeButton-rightInset,
+        var(--fds-spacing-16)
+    );padding:0;color:var(--fds-colour-icon);}.ccgs01o svg{height:2rem;width:2rem;}:where(body.fds-breakpoint-sm-max) .ccgs01o{right:var(
+            --fds-internal-modal-closeButton-rightInset,
+            var(--fds-spacing-20)
+        );}}

package/cjs/modal/modal.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("clsx"),o=require("react"),i=require("../overlay/overlay.js"),n=require("../shared/hooks/useViewport.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var l=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var a=require("../util/use-event.js"),s=require("./modal.styles.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=u(t),d=u(o);const m={top:s.containerFromTop,bottom:s.containerFromBottom,left:s.containerFromLeft,right:s.containerFromRight},h={top:s.containerFromTopShow,bottom:s.containerFromBottomShow,left:s.containerFromLeftShow,right:s.containerFromRightShow};exports.Modal=t=>{var{id:u="modal",show:v,animationFrom:j="bottom",children:p,enableOverlayClick:q=!0,rootComponentId:f,zIndex:y,onOverlayClick:b,dismissKeyboardOnShow:k=!0,className:x}=t,w=e.__rest(t,["id","show","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","className"]);const{verticalHeight:F,offsetTop:O}=n.useViewport(),g=o.useRef(null),C=o.useRef(null),S=p&&d.default.cloneElement(p,{ref:g});l.useApplyStyle(C,{[s.tokens.container.verticalHeight]:null==F?null:`${F}px`,[s.tokens.container.offsetTop]:null==O?null:`${O}px`});const I=a.useEvent((()=>{var e,r;k&&(null===(r=null===(e=document.activeElement)||void 0===e?void 0:e.blur)||void 0===r||r.call(e))}));return o.useEffect((()=>{v&&I()}),[v,I]),r.jsx(i.Overlay,{"data-testid":`${u}-overlay`,show:v,enableOverlayClick:q,onOverlayClick:b,id:u,rootId:f,containerRef:g,zIndex:y,children:r.jsx("div",Object.assign({ref:C,"data-testid":u},w,{className:c.default(s.container,m[j],v&&h[j],v?s.containerShow:s.containerHide,x),children:S}))})};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("clsx"),o=require("react"),i=require("../overlay/overlay.js"),n=require("../shared/hooks/useViewport.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var a=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var l=require("../util/use-event.js"),s=require("./modal.styles.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=u(t),c=u(o);const m={top:s.containerFromTop,bottom:s.containerFromBottom,left:s.containerFromLeft,right:s.containerFromRight},h={top:s.containerFromTopShow,bottom:s.containerFromBottomShow,left:s.containerFromLeftShow,right:s.containerFromRightShow};exports.Modal=t=>{var{id:u="modal",show:v,animationFrom:j="bottom",children:q,enableOverlayClick:y=!0,rootComponentId:p,zIndex:f,onOverlayClick:b,dismissKeyboardOnShow:k=!0,className:w}=t,x=e.__rest(t,["id","show","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","className"]);const F=l.useEvent((()=>{var e,r;k&&(null===(r=null===(e=document.activeElement)||void 0===e?void 0:e.blur)||void 0===r||r.call(e))})),{verticalHeight:O,ready:g}=n.useViewport({enabled:v,onBeforeStart:F}),S=o.useRef(null),C=o.useRef(null),I=q&&c.default.cloneElement(q,{ref:S});return a.useApplyStyle(C,{[s.tokens.container.verticalHeight]:null==O?null:`${O}px`}),r.jsx(i.Overlay,{"data-testid":`${u}-overlay`,show:v,enableOverlayClick:y,onOverlayClick:b,id:u,rootId:p,containerRef:S,zIndex:f,children:r.jsx("div",Object.assign({ref:C,"data-testid":u},x,{className:d.default(s.container,m[j],v&&g?[h[j],s.containerShow]:s.containerHide,w),children:I}))})};
 //# sourceMappingURL=modal.js.map

package/cjs/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../src/modal/modal.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useEffect, useRef } from \"react\";\n\nimport type { ModalAnimationDirection } from \"../modal-v2/types\";\nimport { Overlay } from \"../overlay/overlay\";\nimport { useViewport } from \"../shared/hooks\";\nimport { useApplyStyle } from \"../theme\";\nimport { useEvent } from \"../util\";\nimport * as styles from \"./modal.styles\";\nimport type { ModalProps } from \"./types\";\n\nconst ANIMATION_FROM_CLASS_MAP: Record<ModalAnimationDirection, string> = {\n    top: styles.containerFromTop,\n    bottom: styles.containerFromBottom,\n    left: styles.containerFromLeft,\n    right: styles.containerFromRight,\n};\n\nconst ANIMATION_FROM_SHOW_CLASS_MAP: Record<ModalAnimationDirection, string> = {\n    top: styles.containerFromTopShow,\n    bottom: styles.containerFromBottomShow,\n    left: styles.containerFromLeftShow,\n    right: styles.containerFromRightShow,\n};\n\nexport const Modal = ({\n    id = \"modal\",\n    show,\n    animationFrom = \"bottom\",\n    children,\n    enableOverlayClick = true,\n    rootComponentId,\n    zIndex,\n    onOverlayClick,\n    dismissKeyboardOnShow = true,\n    className,\n    ...otherProps\n}: ModalProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const { verticalHeight, offsetTop } = useViewport();\n    const childRef = useRef<HTMLDivElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const childWithRef =\n        children && React.cloneElement(children, { ref: childRef });\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.container.verticalHeight]:\n            verticalHeight == null ? null : `${verticalHeight}px`,\n        [styles.tokens.container.offsetTop]:\n            offsetTop == null ? null : `${offsetTop}px`,\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    const dismissKeyboard = useEvent(() => {\n        if (dismissKeyboardOnShow) {\n            (document.activeElement as HTMLElement)?.blur?.();\n        }\n    });\n\n    useEffect(() => {\n        if (show) {\n            dismissKeyboard();\n        }\n    }, [show, dismissKeyboard]);\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <Overlay\n            data-testid={`${id}-overlay`}\n            show={show}\n            enableOverlayClick={enableOverlayClick}\n            onOverlayClick={onOverlayClick}\n            id={id}\n            rootId={rootComponentId}\n            containerRef={childRef}\n            zIndex={zIndex}\n        >\n            <div\n                ref={containerRef}\n                data-testid={id}\n                {...otherProps}\n                className={clsx(\n                    styles.container,\n                    ANIMATION_FROM_CLASS_MAP[animationFrom],\n                    show && ANIMATION_FROM_SHOW_CLASS_MAP[animationFrom],\n                    show ? styles.containerShow : styles.containerHide,\n                    className\n                )}\n            >\n                {childWithRef}\n            </div>\n        </Overlay>\n    );\n};\n"],"names":["ANIMATION_FROM_CLASS_MAP","top","styles.containerFromTop","bottom","styles.containerFromBottom","left","styles.containerFromLeft","right","styles.containerFromRight","ANIMATION_FROM_SHOW_CLASS_MAP","styles.containerFromTopShow","styles.containerFromBottomShow","styles.containerFromLeftShow","styles.containerFromRightShow","_a","id","show","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","className","otherProps","__rest","verticalHeight","offsetTop","useViewport","childRef","useRef","containerRef","childWithRef","React","cloneElement","ref","useApplyStyle","styles.tokens","container","dismissKeyboard","useEvent","_b","document","activeElement","blur","useEffect","_jsx","Overlay","rootId","Object","assign","clsx","styles.container","styles.containerShow","styles.containerHide"],"mappings":"43BAWA,MAAMA,EAAoE,CACtEC,IAAKC,EAAAA,iBACLC,OAAQC,EAAAA,oBACRC,KAAMC,EAAAA,kBACNC,MAAOC,EAAAA,oBAGLC,EAAyE,CAC3ER,IAAKS,EAAAA,qBACLP,OAAQQ,EAAAA,wBACRN,KAAMO,EAAAA,sBACNL,MAAOM,EAAAA,sCAGWC,IAAA,IAAAC,GAClBA,EAAK,QAAOC,KACZA,EAAIC,cACJA,EAAgB,SAAQC,SACxBA,EAAQC,mBACRA,GAAqB,EAAIC,gBACzBA,EAAeC,OACfA,EAAMC,eACNA,EAAcC,sBACdA,GAAwB,EAAIC,UAC5BA,GAASV,EACNW,EAAUC,EAAAA,OAAAZ,EAXK,+IAgBlB,MAAMa,eAAEA,EAAcC,UAAEA,GAAcC,gBAChCC,EAAWC,EAAAA,OAAuB,MAClCC,EAAeD,EAAAA,OAAuB,MACtCE,EACFf,GAAYgB,UAAMC,aAAajB,EAAU,CAAEkB,IAAKN,IAEpDO,EAAAA,cAAcL,EAAc,CACxB,CAACM,EAAAA,OAAcC,UAAUZ,gBACH,MAAlBA,EAAyB,KAAO,GAAGA,MACvC,CAACW,EAAAA,OAAcC,UAAUX,WACR,MAAbA,EAAoB,KAAO,GAAGA,QAMtC,MAAMY,EAAkBC,EAAAA,UAAS,aACzBlB,YACAmB,EAAuC,UAAtCC,SAASC,qBAA6B,IAAA9B,OAAA,EAAAA,EAAE+B,6BAC7C,IAYJ,OATAC,EAAAA,WAAU,KACF9B,GACAwB,GACJ,GACD,CAACxB,EAAMwB,IAMNO,MAACC,EAAAA,uBACgB,GAAGjC,YAChBC,KAAMA,EACNG,mBAAoBA,EACpBG,eAAgBA,EAChBP,GAAIA,EACJkC,OAAQ7B,EACRY,aAAcF,EACdT,OAAQA,EAAMH,SAEd6B,EAAAA,IAAA,MAAAG,OAAAC,OAAA,CACIf,IAAKJ,gBACQjB,GACTU,EAAU,CACdD,UAAW4B,EAAAA,QACPC,EAAAA,UACArD,EAAyBiB,GACzBD,GAAQP,EAA8BQ,GACtCD,EAAOsC,EAAAA,cAAuBC,EAAAA,cAC9B/B,GACHN,SAEAe,MAEC"}
+{"version":3,"file":"modal.js","sources":["../../../src/modal/modal.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useRef } from \"react\";\n\nimport type { ModalAnimationDirection } from \"../modal-v2/types\";\nimport { Overlay } from \"../overlay/overlay\";\nimport { useViewport } from \"../shared/hooks\";\nimport { useApplyStyle } from \"../theme\";\nimport { useEvent } from \"../util\";\nimport * as styles from \"./modal.styles\";\nimport type { ModalProps } from \"./types\";\n\nconst ANIMATION_FROM_CLASS_MAP: Record<ModalAnimationDirection, string> = {\n    top: styles.containerFromTop,\n    bottom: styles.containerFromBottom,\n    left: styles.containerFromLeft,\n    right: styles.containerFromRight,\n};\n\nconst ANIMATION_FROM_SHOW_CLASS_MAP: Record<ModalAnimationDirection, string> = {\n    top: styles.containerFromTopShow,\n    bottom: styles.containerFromBottomShow,\n    left: styles.containerFromLeftShow,\n    right: styles.containerFromRightShow,\n};\n\nexport const Modal = ({\n    id = \"modal\",\n    show,\n    animationFrom = \"bottom\",\n    children,\n    enableOverlayClick = true,\n    rootComponentId,\n    zIndex,\n    onOverlayClick,\n    dismissKeyboardOnShow = true,\n    className,\n    ...otherProps\n}: ModalProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const dismissKeyboard = useEvent(() => {\n        if (dismissKeyboardOnShow) {\n            (document.activeElement as HTMLElement)?.blur?.();\n        }\n    });\n    const { verticalHeight, ready } = useViewport({\n        enabled: show,\n        onBeforeStart: dismissKeyboard,\n    });\n    const childRef = useRef<HTMLDivElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const childWithRef =\n        children && React.cloneElement(children, { ref: childRef });\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.container.verticalHeight]:\n            verticalHeight == null ? null : `${verticalHeight}px`,\n    });\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <Overlay\n            data-testid={`${id}-overlay`}\n            show={show}\n            enableOverlayClick={enableOverlayClick}\n            onOverlayClick={onOverlayClick}\n            id={id}\n            rootId={rootComponentId}\n            containerRef={childRef}\n            zIndex={zIndex}\n        >\n            <div\n                ref={containerRef}\n                data-testid={id}\n                {...otherProps}\n                className={clsx(\n                    styles.container,\n                    ANIMATION_FROM_CLASS_MAP[animationFrom],\n                    show && ready\n                        ? [\n                              ANIMATION_FROM_SHOW_CLASS_MAP[animationFrom],\n                              styles.containerShow,\n                          ]\n                        : styles.containerHide,\n                    className\n                )}\n            >\n                {childWithRef}\n            </div>\n        </Overlay>\n    );\n};\n"],"names":["ANIMATION_FROM_CLASS_MAP","top","styles.containerFromTop","bottom","styles.containerFromBottom","left","styles.containerFromLeft","right","styles.containerFromRight","ANIMATION_FROM_SHOW_CLASS_MAP","styles.containerFromTopShow","styles.containerFromBottomShow","styles.containerFromLeftShow","styles.containerFromRightShow","_a","id","show","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","className","otherProps","__rest","dismissKeyboard","useEvent","_b","document","activeElement","blur","verticalHeight","ready","useViewport","enabled","onBeforeStart","childRef","useRef","containerRef","childWithRef","React","cloneElement","ref","useApplyStyle","styles.tokens","container","_jsx","Overlay","rootId","Object","assign","clsx","styles.container","styles.containerShow","styles.containerHide"],"mappings":"43BAWA,MAAMA,EAAoE,CACtEC,IAAKC,EAAAA,iBACLC,OAAQC,EAAAA,oBACRC,KAAMC,EAAAA,kBACNC,MAAOC,EAAAA,oBAGLC,EAAyE,CAC3ER,IAAKS,EAAAA,qBACLP,OAAQQ,EAAAA,wBACRN,KAAMO,EAAAA,sBACNL,MAAOM,EAAAA,sCAGWC,IAAA,IAAAC,GAClBA,EAAK,QAAOC,KACZA,EAAIC,cACJA,EAAgB,SAAQC,SACxBA,EAAQC,mBACRA,GAAqB,EAAIC,gBACzBA,EAAeC,OACfA,EAAMC,eACNA,EAAcC,sBACdA,GAAwB,EAAIC,UAC5BA,GAASV,EACNW,EAAUC,EAAAA,OAAAZ,EAXK,+IAgBlB,MAAMa,EAAkBC,EAAAA,UAAS,aACzBL,YACAM,EAAuC,UAAtCC,SAASC,qBAA6B,IAAAjB,OAAA,EAAAA,EAAEkB,6BAC7C,KAEEC,eAAEA,EAAcC,MAAEA,GAAUC,cAAY,CAC1CC,QAASpB,EACTqB,cAAeV,IAEbW,EAAWC,EAAAA,OAAuB,MAClCC,EAAeD,EAAAA,OAAuB,MACtCE,EACFvB,GAAYwB,UAAMC,aAAazB,EAAU,CAAE0B,IAAKN,IAUpD,OARAO,EAAAA,cAAcL,EAAc,CACxB,CAACM,EAAAA,OAAcC,UAAUd,gBACH,MAAlBA,EAAyB,KAAO,GAAGA,QAOvCe,EAAAA,IAACC,EAAAA,QAAO,CAAA,cACS,GAAGlC,YAChBC,KAAMA,EACNG,mBAAoBA,EACpBG,eAAgBA,EAChBP,GAAIA,EACJmC,OAAQ9B,EACRoB,aAAcF,EACdjB,OAAQA,EAAMH,SAEd8B,EAAAA,IAAA,MAAAG,OAAAC,OAAA,CACIR,IAAKJ,EAAY,cACJzB,GACTU,EAAU,CACdD,UAAW6B,EAAAA,QACPC,EAAAA,UACAtD,EAAyBiB,GACzBD,GAAQkB,EACF,CACIzB,EAA8BQ,GAC9BsC,EAAAA,eAEJC,EAAAA,cACNhC,GACHN,SAEAuB,MAEC"}

package/cjs/modal/modal.styles.js

@@ -1,2 +1,2 @@
-"use strict";require("./modal.styles_1sav73f.css");exports.container="czahu6t",exports.containerFromBottom="c19r0uwy",exports.containerFromBottomShow="c16qcfjk",exports.containerFromLeft="c11f2a4r",exports.containerFromLeftShow="cgnow3g",exports.containerFromRight="ck9rog9",exports.containerFromRightShow="c14dyqe6",exports.containerFromTop="c16tlthj",exports.containerFromTopShow="c1jimj00",exports.containerHide="c1d9ucpb",exports.containerShow="c140nooo",exports.tokens={container:{verticalHeight:"--fds-internal-modal-container-verticalHeight",offsetTop:"--fds-internal-modal-container-offsetTop"}};
+"use strict";require("./modal.styles_1lbblx6.css");exports.container="czahu6t",exports.containerFromBottom="c19r0uwy",exports.containerFromBottomShow="c16qcfjk",exports.containerFromLeft="c11f2a4r",exports.containerFromLeftShow="cgnow3g",exports.containerFromRight="ck9rog9",exports.containerFromRightShow="c14dyqe6",exports.containerFromTop="c16tlthj",exports.containerFromTopShow="c1jimj00",exports.containerHide="c1d9ucpb",exports.containerShow="c140nooo",exports.tokens={container:{verticalHeight:"--fds-internal-modal-container-verticalHeight"}};
 //# sourceMappingURL=modal.styles.js.map

package/cjs/modal/modal.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.styles.js","sources":["../../../src/modal/modal.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { MediaQuery } from \"../theme\";\n\nexport const tokens = {\n    container: {\n        verticalHeight: \"--fds-internal-modal-container-verticalHeight\",\n        offsetTop: \"--fds-internal-modal-container-offsetTop\",\n    },\n} as const;\n\nexport const container = css`\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n    width: 100%;\n    overflow: hidden;\n\n    ${tokens.container.verticalHeight}: initial;\n    ${tokens.container.offsetTop}: initial;\n\n    ${MediaQuery.MaxWidth.sm} {\n        height: calc(var(${tokens.container.verticalHeight}, 1vh) * 100);\n        top: var(${tokens.container.offsetTop}, 0px);\n    }\n`;\n\nexport const containerFromTop = css`\n    top: -3%;\n`;\n\nexport const containerFromBottom = css`\n    bottom: -3%;\n`;\n\nexport const containerFromLeft = css`\n    left: -3%;\n`;\n\nexport const containerFromRight = css`\n    right: -3%;\n`;\n\nexport const containerShow = css`\n    opacity: 1;\n    transition: all 300ms cubic-bezier(0.21, 0.79, 0.53, 1);\n    transition-delay: 200ms;\n`;\n\nexport const containerHide = css`\n    opacity: 0;\n    transition: all 300ms cubic-bezier(0.4, 0.34, 0.38, 1);\n`;\n\nexport const containerFromTopShow = css`\n    top: 0;\n`;\n\nexport const containerFromBottomShow = css`\n    bottom: 0;\n`;\n\nexport const containerFromLeftShow = css`\n    left: 0;\n`;\n\nexport const containerFromRightShow = css`\n    right: 0;\n`;\n"],"names":["container","verticalHeight","offsetTop"],"mappings":"0FAWsB,sCAsBU,2CA2BI,qCAvBN,yCA2BI,qCAvBH,yCA2BI,oCAvCN,wCA2BI,iCALP,iCANA,0BAzCJ,CAClBA,UAAW,CACPC,eAAgB,gDAChBC,UAAW"}
+{"version":3,"file":"modal.styles.js","sources":["../../../src/modal/modal.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { MediaQuery } from \"../theme\";\n\nexport const tokens = {\n    container: {\n        verticalHeight: \"--fds-internal-modal-container-verticalHeight\",\n    },\n    closeButton: {\n        topInset: \"--fds-internal-modal-closeButton-topInset\",\n        rightInset: \"--fds-internal-modal-closeButton-rightInset\",\n    },\n} as const;\n\nexport const container = css`\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n    width: 100%;\n    overflow: hidden;\n\n    ${tokens.container.verticalHeight}: initial;\n    ${tokens.closeButton.topInset}: initial;\n    ${tokens.closeButton.rightInset}: initial;\n\n    ${MediaQuery.MaxWidth.sm} {\n        height: calc(var(${tokens.container.verticalHeight}, 1vh) * 100);\n    }\n`;\n\nexport const containerFromTop = css`\n    top: -3%;\n`;\n\nexport const containerFromBottom = css`\n    bottom: -3%;\n`;\n\nexport const containerFromLeft = css`\n    left: -3%;\n`;\n\nexport const containerFromRight = css`\n    right: -3%;\n`;\n\nexport const containerShow = css`\n    opacity: 1;\n    transition: all 300ms cubic-bezier(0.21, 0.79, 0.53, 1);\n    transition-delay: 200ms;\n`;\n\nexport const containerHide = css`\n    opacity: 0;\n    transition: all 300ms cubic-bezier(0.4, 0.34, 0.38, 1);\n`;\n\nexport const containerFromTopShow = css`\n    top: 0;\n`;\n\nexport const containerFromBottomShow = css`\n    bottom: 0;\n`;\n\nexport const containerFromLeftShow = css`\n    left: 0;\n`;\n\nexport const containerFromRightShow = css`\n    right: 0;\n`;\n"],"names":["container","verticalHeight"],"mappings":"0FAcsB,sCAsBU,2CA2BI,qCAvBN,yCA2BI,qCAvBH,yCA2BI,oCAvCN,wCA2BI,iCALP,iCANA,0BA5CJ,CAClBA,UAAW,CACPC,eAAgB"}

package/cjs/modal/modal.styles_1lbblx6.css

@@ -0,0 +1,11 @@
+@layer fds{.czahu6t{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;width:100%;overflow:hidden;--fds-internal-modal-container-verticalHeight:initial;--fds-internal-modal-closeButton-topInset:initial;--fds-internal-modal-closeButton-rightInset:initial;}:where(body.fds-breakpoint-sm-max) .czahu6t{height:calc(var(--fds-internal-modal-container-verticalHeight, 1vh) * 100);}
+.c16tlthj{top:-3%;}
+.c19r0uwy{bottom:-3%;}
+.c11f2a4r{left:-3%;}
+.ck9rog9{right:-3%;}
+.c140nooo{opacity:1;-webkit-transition:all 300ms cubic-bezier(0.21, 0.79, 0.53, 1);transition:all 300ms cubic-bezier(0.21, 0.79, 0.53, 1);transition-delay:200ms;}
+.c1d9ucpb{opacity:0;-webkit-transition:all 300ms cubic-bezier(0.4, 0.34, 0.38, 1);transition:all 300ms cubic-bezier(0.4, 0.34, 0.38, 1);}
+.c1jimj00{top:0;}
+.c16qcfjk{bottom:0;}
+.cgnow3g{left:0;}
+.c14dyqe6{right:0;}}

package/cjs/modal-v2/modal-v2.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("@floating-ui/react"),i=require("clsx"),t=require("react"),l=require("../overlay/overlay.js"),s=require("../shared/hooks/useViewport.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var n=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var o=require("../util/use-event.js"),u=require("./modal-context.js"),d=require("./modal-v2.styles.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=c(i),v=c(t);exports.ModalV2=i=>{var{id:c,show:b,onClose:h,animationFrom:j="bottom",children:y,enableOverlayClick:q=!0,rootComponentId:f,zIndex:p,onOverlayClick:x,dismissKeyboardOnShow:g=!0,"data-testid":C="modal","aria-label":k,"aria-labelledby":O,"aria-describedby":F,disableInitialFocus:I=!1,className:w}=i,N=e.__rest(i,["id","show","onClose","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","data-testid","aria-label","aria-labelledby","aria-describedby","disableInitialFocus","className"]);const{verticalHeight:E,offsetTop:M}=s.useViewport(),S=t.useRef(null),_=t.useRef(null),z=y&&v.default.cloneElement(y,{ref:S});n.useApplyStyle(_,{[d.tokens.container.verticalHeight]:null==E?null:`${E}px`,[d.tokens.container.offsetTop]:null==M?null:`${M}px`});const{refs:P,context:R}=a.useFloating({open:b,onOpenChange:e=>{e||null==h||h()}}),{isMounted:T,status:V}=a.useTransitionStatus(R,{duration:300}),$=a.useDismiss(R,{outsidePress:!1,enabled:!!h}),{getFloatingProps:H}=a.useInteractions([$]),K=o.useEvent((()=>{var e,r;g&&(null===(r=null===(e=document.activeElement)||void 0===e?void 0:e.blur)||void 0===r||r.call(e))}));return t.useEffect((()=>{b&&K()}),[b,K]),r.jsx(l.Overlay,{"data-testid":`${C}-overlay`,show:T,enableOverlayClick:q,onOverlayClick:x,id:c,rootId:f,containerRef:S,zIndex:p,children:r.jsx("div",Object.assign({ref:_,"data-testid":C,"data-status":V,"data-animation-from":j},N,{className:m.default(d.container,w),children:r.jsx(u.ModalContext.Provider,{value:{onClose:h},children:T&&r.jsx(a.FloatingFocusManager,{context:R,initialFocus:I?-1:P.floating,children:r.jsx("div",{className:d.scrollContainer,children:r.jsx("div",Object.assign({ref:P.setFloating},H(),{role:"dialog","aria-label":k,"aria-labelledby":O,"aria-describedby":F,className:d.modalContainer,children:z}))})})})}))})};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("@floating-ui/react"),i=require("clsx"),t=require("react"),l=require("../overlay/overlay.js"),s=require("../shared/hooks/useViewport.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var n=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var o=require("../util/use-event.js"),d=require("./modal-context.js"),u=require("./modal-v2.styles.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=c(i),v=c(t);exports.ModalV2=i=>{var{id:c,show:b,onClose:h,animationFrom:j="bottom",children:y,enableOverlayClick:q=!0,rootComponentId:x,zIndex:p,onOverlayClick:f,dismissKeyboardOnShow:g=!0,"data-testid":C="modal","aria-label":k,"aria-labelledby":O,"aria-describedby":F,disableInitialFocus:I=!1,className:w}=i,N=e.__rest(i,["id","show","onClose","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","data-testid","aria-label","aria-labelledby","aria-describedby","disableInitialFocus","className"]);const S=o.useEvent((()=>{var e,r;g&&(null===(r=null===(e=document.activeElement)||void 0===e?void 0:e.blur)||void 0===r||r.call(e))})),{verticalHeight:M}=s.useViewport({enabled:b,onBeforeStart:S}),_=t.useRef(null),z=t.useRef(null),E=y&&v.default.cloneElement(y,{ref:_});n.useApplyStyle(z,{[u.tokens.container.verticalHeight]:null==M?null:`${M}px`});const{refs:P,context:R}=a.useFloating({open:b,onOpenChange:e=>{e||null==h||h()}}),{isMounted:V,status:H}=a.useTransitionStatus(R,{duration:300}),K=a.useDismiss(R,{outsidePress:!1,enabled:!!h}),{getFloatingProps:$}=a.useInteractions([K]);return r.jsx(l.Overlay,{"data-testid":`${C}-overlay`,show:b,enableOverlayClick:q,onOverlayClick:f,id:c,rootId:x,containerRef:_,zIndex:p,children:r.jsx("div",Object.assign({ref:z,"data-testid":C,"data-status":H,"data-animation-from":j},N,{className:m.default(u.container,w),children:r.jsx(d.ModalContext.Provider,{value:{onClose:h},children:V&&r.jsx(a.FloatingFocusManager,{context:R,initialFocus:I?-1:P.floating,children:r.jsx("div",{className:u.scrollContainer,children:r.jsx("div",Object.assign({ref:P.setFloating},$(),{role:"dialog","aria-label":k,"aria-labelledby":O,"aria-describedby":F,className:u.modalContainer,children:E}))})})})}))})};
 //# sourceMappingURL=modal-v2.js.map

package/cjs/modal-v2/modal-v2.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-v2.js","sources":["../../../src/modal-v2/modal-v2.tsx"],"sourcesContent":["import {\n    FloatingFocusManager,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useTransitionStatus,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef } from \"react\";\n\nimport { Overlay } from \"../overlay/overlay\";\nimport { useViewport } from \"../shared/hooks\";\nimport { useApplyStyle } from \"../theme\";\nimport { useEvent } from \"../util\";\nimport { ModalContext } from \"./modal-context\";\nimport * as styles from \"./modal-v2.styles\";\nimport type { ModalV2Props } from \"./types\";\n\nexport const ModalV2 = ({\n    id,\n    show,\n    onClose,\n    animationFrom = \"bottom\",\n    children,\n    enableOverlayClick = true,\n    rootComponentId,\n    zIndex,\n    onOverlayClick,\n    dismissKeyboardOnShow = true,\n    \"data-testid\": testId = \"modal\",\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    disableInitialFocus = false,\n    className,\n    ...otherProps\n}: ModalV2Props): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const { verticalHeight, offsetTop } = useViewport();\n    const childRef = useRef<HTMLDivElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const childWithRef =\n        children && React.cloneElement(children, { ref: childRef });\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.container.verticalHeight]:\n            verticalHeight == null ? null : `${verticalHeight}px`,\n        [styles.tokens.container.offsetTop]:\n            offsetTop == null ? null : `${offsetTop}px`,\n    });\n\n    // =========================================================================\n    // FLOATING UI CONFIG\n    // =========================================================================\n    const { refs, context } = useFloating({\n        open: show,\n        onOpenChange: (isOpen) => {\n            if (!isOpen) {\n                onClose?.();\n            }\n        },\n    });\n    const { isMounted, status } = useTransitionStatus(context, {\n        duration: 300,\n    });\n    const dismiss = useDismiss(context, {\n        /* handled by overlayclick */\n        outsidePress: false,\n        enabled: !!onClose,\n    });\n    const { getFloatingProps } = useInteractions([dismiss]);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    const dismissKeyboard = useEvent(() => {\n        if (dismissKeyboardOnShow) {\n            (document.activeElement as HTMLElement)?.blur?.();\n        }\n    });\n\n    useEffect(() => {\n        if (show) {\n            dismissKeyboard();\n        }\n    }, [show, dismissKeyboard]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <Overlay\n            data-testid={`${testId}-overlay`}\n            show={isMounted}\n            enableOverlayClick={enableOverlayClick}\n            onOverlayClick={onOverlayClick}\n            id={id}\n            rootId={rootComponentId}\n            containerRef={childRef}\n            zIndex={zIndex}\n        >\n            <div\n                ref={containerRef}\n                data-testid={testId}\n                data-status={status}\n                data-animation-from={animationFrom}\n                {...otherProps}\n                className={clsx(styles.container, className)}\n            >\n                <ModalContext.Provider value={{ onClose }}>\n                    {isMounted && (\n                        <FloatingFocusManager\n                            context={context}\n                            initialFocus={\n                                disableInitialFocus ? -1 : refs.floating\n                            }\n                        >\n                            <div className={styles.scrollContainer}>\n                                <div\n                                    ref={refs.setFloating}\n                                    {...getFloatingProps()}\n                                    role=\"dialog\"\n                                    aria-label={ariaLabel}\n                                    aria-labelledby={ariaLabelledBy}\n                                    aria-describedby={ariaDescribedBy}\n                                    className={styles.modalContainer}\n                                >\n                                    {childWithRef}\n                                </div>\n                            </div>\n                        </FloatingFocusManager>\n                    )}\n                </ModalContext.Provider>\n            </div>\n        </Overlay>\n    );\n};\n"],"names":["_a","id","show","onClose","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","testId","ariaLabel","ariaLabelledBy","ariaDescribedBy","disableInitialFocus","className","otherProps","__rest","verticalHeight","offsetTop","useViewport","childRef","useRef","containerRef","childWithRef","React","cloneElement","ref","useApplyStyle","styles.tokens","container","refs","context","useFloating","open","onOpenChange","isOpen","isMounted","status","useTransitionStatus","duration","dismiss","useDismiss","outsidePress","enabled","getFloatingProps","useInteractions","dismissKeyboard","useEvent","_b","document","activeElement","blur","useEffect","_jsx","Overlay","rootId","Object","assign","clsx","styles.container","ModalContext","Provider","value","FloatingFocusManager","initialFocus","floating","styles.scrollContainer","setFloating","role","styles.modalContainer"],"mappings":"+8BAkBwBA,QAAAC,GACpBA,EAAEC,KACFA,EAAIC,QACJA,EAAOC,cACPA,EAAgB,SAAQC,SACxBA,EAAQC,mBACRA,GAAqB,EAAIC,gBACzBA,EAAeC,OACfA,EAAMC,eACNA,EAAcC,sBACdA,GAAwB,EACxB,cAAeC,EAAS,QACxB,aAAcC,EACd,kBAAmBC,EACnB,mBAAoBC,EAAeC,oBACnCA,GAAsB,EAAKC,UAC3BA,GAAShB,EACNiB,EAAUC,EAAAA,OAAAlB,EAjBO,CAAA,KAAA,OAAA,UAAA,gBAAA,WAAA,qBAAA,kBAAA,SAAA,iBAAA,wBAAA,cAAA,aAAA,kBAAA,mBAAA,sBAAA,cAsBpB,MAAMmB,eAAEA,EAAcC,UAAEA,GAAcC,gBAChCC,EAAWC,EAAAA,OAAuB,MAClCC,EAAeD,EAAAA,OAAuB,MACtCE,EACFpB,GAAYqB,UAAMC,aAAatB,EAAU,CAAEuB,IAAKN,IAEpDO,EAAAA,cAAcL,EAAc,CACxB,CAACM,EAAAA,OAAcC,UAAUZ,gBACH,MAAlBA,EAAyB,KAAO,GAAGA,MACvC,CAACW,EAAAA,OAAcC,UAAUX,WACR,MAAbA,EAAoB,KAAO,GAAGA,QAMtC,MAAMY,KAAEA,EAAIC,QAAEA,GAAYC,cAAY,CAClCC,KAAMjC,EACNkC,aAAeC,IACNA,GACDlC,SAAAA,GACJ,KAGFmC,UAAEA,EAASC,OAAEA,GAAWC,EAAAA,oBAAoBP,EAAS,CACvDQ,SAAU,MAERC,EAAUC,EAAAA,WAAWV,EAAS,CAEhCW,cAAc,EACdC,UAAW1C,KAET2C,iBAAEA,GAAqBC,kBAAgB,CAACL,IAKxCM,EAAkBC,EAAAA,UAAS,aACzBvC,YACAwC,EAAuC,UAAtCC,SAASC,qBAA6B,IAAApD,OAAA,EAAAA,EAAEqD,6BAC7C,IAYJ,OATAC,EAAAA,WAAU,KACFpD,GACA8C,GACJ,GACD,CAAC9C,EAAM8C,IAMNO,MAACC,EAAAA,QAAO,CAAA,cACS,GAAG7C,YAChBT,KAAMoC,EACNhC,mBAAoBA,EACpBG,eAAgBA,EAChBR,GAAIA,EACJwD,OAAQlD,EACRiB,aAAcF,EACdd,OAAQA,EAAMH,SAEdkD,EAAAA,IAAA,MAAAG,OAAAC,OAAA,CACI/B,IAAKJ,EAAY,cACJb,EAAM,cACN4B,EAAM,sBACEnC,GACjBa,GACJD,UAAW4C,UAAKC,EAAAA,UAAkB7C,GAAUX,SAE5CkD,MAACO,EAAAA,aAAaC,SAAQ,CAACC,MAAO,CAAE7D,WAASE,SACpCiC,GACGiB,EAAAA,IAACU,uBAAoB,CACjBhC,QAASA,EACTiC,aACInD,GAAsB,EAAKiB,EAAKmC,SAAQ9D,SAG5CkD,EAAAA,IAAA,MAAA,CAAKvC,UAAWoD,EAAAA,gBAAsB/D,SAClCkD,MAAA,MAAAG,OAAAC,OAAA,CACI/B,IAAKI,EAAKqC,aACNvB,IAAkB,CACtBwB,KAAK,SAAQ,aACD1D,EAAS,kBACJC,EAAc,mBACbC,EAClBE,UAAWuD,EAAAA,wBAEV9C,eAOnB"}
+{"version":3,"file":"modal-v2.js","sources":["../../../src/modal-v2/modal-v2.tsx"],"sourcesContent":["import {\n    FloatingFocusManager,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useTransitionStatus,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { useRef } from \"react\";\n\nimport { Overlay } from \"../overlay/overlay\";\nimport { useViewport } from \"../shared/hooks\";\nimport { useApplyStyle } from \"../theme\";\nimport { useEvent } from \"../util\";\nimport { ModalContext } from \"./modal-context\";\nimport * as styles from \"./modal-v2.styles\";\nimport type { ModalV2Props } from \"./types\";\n\nexport const ModalV2 = ({\n    id,\n    show,\n    onClose,\n    animationFrom = \"bottom\",\n    children,\n    enableOverlayClick = true,\n    rootComponentId,\n    zIndex,\n    onOverlayClick,\n    dismissKeyboardOnShow = true,\n    \"data-testid\": testId = \"modal\",\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    disableInitialFocus = false,\n    className,\n    ...otherProps\n}: ModalV2Props): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const dismissKeyboard = useEvent(() => {\n        if (dismissKeyboardOnShow) {\n            (document.activeElement as HTMLElement)?.blur?.();\n        }\n    });\n    const { verticalHeight } = useViewport({\n        enabled: show,\n        onBeforeStart: dismissKeyboard,\n    });\n    const childRef = useRef<HTMLDivElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const childWithRef =\n        children && React.cloneElement(children, { ref: childRef });\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.container.verticalHeight]:\n            verticalHeight == null ? null : `${verticalHeight}px`,\n    });\n\n    // =========================================================================\n    // FLOATING UI CONFIG\n    // =========================================================================\n    const { refs, context } = useFloating({\n        open: show,\n        onOpenChange: (isOpen) => {\n            if (!isOpen) {\n                onClose?.();\n            }\n        },\n    });\n    const { isMounted, status } = useTransitionStatus(context, {\n        duration: 300,\n    });\n    const dismiss = useDismiss(context, {\n        /* handled by overlayclick */\n        outsidePress: false,\n        enabled: !!onClose,\n    });\n    const { getFloatingProps } = useInteractions([dismiss]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <Overlay\n            data-testid={`${testId}-overlay`}\n            show={show}\n            enableOverlayClick={enableOverlayClick}\n            onOverlayClick={onOverlayClick}\n            id={id}\n            rootId={rootComponentId}\n            containerRef={childRef}\n            zIndex={zIndex}\n        >\n            <div\n                ref={containerRef}\n                data-testid={testId}\n                data-status={status}\n                data-animation-from={animationFrom}\n                {...otherProps}\n                className={clsx(styles.container, className)}\n            >\n                <ModalContext.Provider value={{ onClose }}>\n                    {isMounted && (\n                        <FloatingFocusManager\n                            context={context}\n                            initialFocus={\n                                disableInitialFocus ? -1 : refs.floating\n                            }\n                        >\n                            <div className={styles.scrollContainer}>\n                                <div\n                                    ref={refs.setFloating}\n                                    {...getFloatingProps()}\n                                    role=\"dialog\"\n                                    aria-label={ariaLabel}\n                                    aria-labelledby={ariaLabelledBy}\n                                    aria-describedby={ariaDescribedBy}\n                                    className={styles.modalContainer}\n                                >\n                                    {childWithRef}\n                                </div>\n                            </div>\n                        </FloatingFocusManager>\n                    )}\n                </ModalContext.Provider>\n            </div>\n        </Overlay>\n    );\n};\n"],"names":["_a","id","show","onClose","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","testId","ariaLabel","ariaLabelledBy","ariaDescribedBy","disableInitialFocus","className","otherProps","__rest","dismissKeyboard","useEvent","_b","document","activeElement","blur","verticalHeight","useViewport","enabled","onBeforeStart","childRef","useRef","containerRef","childWithRef","React","cloneElement","ref","useApplyStyle","styles.tokens","container","refs","context","useFloating","open","onOpenChange","isOpen","isMounted","status","useTransitionStatus","duration","dismiss","useDismiss","outsidePress","getFloatingProps","useInteractions","_jsx","Overlay","rootId","Object","assign","clsx","styles.container","ModalContext","Provider","value","FloatingFocusManager","initialFocus","floating","styles.scrollContainer","setFloating","role","styles.modalContainer"],"mappings":"+8BAkBwBA,QAAAC,GACpBA,EAAEC,KACFA,EAAIC,QACJA,EAAOC,cACPA,EAAgB,SAAQC,SACxBA,EAAQC,mBACRA,GAAqB,EAAIC,gBACzBA,EAAeC,OACfA,EAAMC,eACNA,EAAcC,sBACdA,GAAwB,EACxB,cAAeC,EAAS,QACxB,aAAcC,EACd,kBAAmBC,EACnB,mBAAoBC,EAAeC,oBACnCA,GAAsB,EAAKC,UAC3BA,GAAShB,EACNiB,EAAUC,EAAAA,OAAAlB,EAjBO,CAAA,KAAA,OAAA,UAAA,gBAAA,WAAA,qBAAA,kBAAA,SAAA,iBAAA,wBAAA,cAAA,aAAA,kBAAA,mBAAA,sBAAA,cAsBpB,MAAMmB,EAAkBC,EAAAA,UAAS,aACzBV,YACAW,EAAuC,UAAtCC,SAASC,qBAA6B,IAAAvB,OAAA,EAAAA,EAAEwB,6BAC7C,KAEEC,eAAEA,GAAmBC,cAAY,CACnCC,QAASzB,EACT0B,cAAeT,IAEbU,EAAWC,EAAAA,OAAuB,MAClCC,EAAeD,EAAAA,OAAuB,MACtCE,EACF3B,GAAY4B,UAAMC,aAAa7B,EAAU,CAAE8B,IAAKN,IAEpDO,EAAAA,cAAcL,EAAc,CACxB,CAACM,EAAAA,OAAcC,UAAUb,gBACH,MAAlBA,EAAyB,KAAO,GAAGA,QAM3C,MAAMc,KAAEA,EAAIC,QAAEA,GAAYC,cAAY,CAClCC,KAAMxC,EACNyC,aAAeC,IACNA,GACDzC,SAAAA,GACJ,KAGF0C,UAAEA,EAASC,OAAEA,GAAWC,EAAAA,oBAAoBP,EAAS,CACvDQ,SAAU,MAERC,EAAUC,EAAAA,WAAWV,EAAS,CAEhCW,cAAc,EACdxB,UAAWxB,KAETiD,iBAAEA,GAAqBC,kBAAgB,CAACJ,IAK9C,OACIK,MAACC,EAAAA,QAAO,CAAA,cACS,GAAG5C,YAChBT,KAAMA,EACNI,mBAAoBA,EACpBG,eAAgBA,EAChBR,GAAIA,EACJuD,OAAQjD,EACRwB,aAAcF,EACdrB,OAAQA,EAAMH,SAEdiD,EAAAA,IAAA,MAAAG,OAAAC,OAAA,CACIvB,IAAKJ,EAAY,cACJpB,EAAM,cACNmC,EAAM,sBACE1C,GACjBa,GACJD,UAAW2C,UAAKC,EAAAA,UAAkB5C,GAAUX,SAE5CiD,MAACO,EAAAA,aAAaC,SAAQ,CAACC,MAAO,CAAE5D,WAASE,SACpCwC,GACGS,EAAAA,IAACU,uBAAoB,CACjBxB,QAASA,EACTyB,aACIlD,GAAsB,EAAKwB,EAAK2B,SAAQ7D,SAG5CiD,EAAAA,IAAA,MAAA,CAAKtC,UAAWmD,EAAAA,gBAAsB9D,SAClCiD,MAAA,MAAAG,OAAAC,OAAA,CACIvB,IAAKI,EAAK6B,aACNhB,IAAkB,CACtBiB,KAAK,SAAQ,aACDzD,EAAS,kBACJC,EAAc,mBACbC,EAClBE,UAAWsD,EAAAA,wBAEVtC,eAOnB"}

package/cjs/modal-v2/modal-v2.styles.js

@@ -1,2 +1,2 @@
-"use strict";require("./modal-v2.styles_1irpyi6.css");exports.container="c1jrmyjd",exports.modalContainer="mn5ir3",exports.scrollContainer="s1xsiaxz",exports.tokens={container:{verticalHeight:"--fds-internal-modalV2-container-verticalHeight",offsetTop:"--fds-internal-modalV2-container-offsetTop"}};
+"use strict";require("./modal-v2.styles_a8gv5i.css");exports.container="c1jrmyjd",exports.modalContainer="mn5ir3",exports.scrollContainer="s1xsiaxz",exports.tokens={container:{verticalHeight:"--fds-internal-modalV2-container-verticalHeight"}};
 //# sourceMappingURL=modal-v2.styles.js.map

package/cjs/modal-v2/modal-v2.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-v2.styles.js","sources":["../../../src/modal-v2/modal-v2.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { MediaQuery, Motion } from \"../theme\";\n\nconst CLOSED_POSITION_OFFSET = \"-3%\";\nconst IS_INITIAL_OR_CLOSE =\n    ':is([data-status=\"initial\"], [data-status=\"close\"])';\n\nexport const tokens = {\n    container: {\n        verticalHeight: \"--fds-internal-modalV2-container-verticalHeight\",\n        offsetTop: \"--fds-internal-modalV2-container-offsetTop\",\n    },\n} as const;\n\nexport const container = css`\n    position: relative;\n    width: 100%;\n    height: 100%;\n\n    overflow: auto;\n\n    ${tokens.container.verticalHeight}: initial;\n    ${tokens.container.offsetTop}: initial;\n\n    ${MediaQuery.MaxWidth.sm} {\n        height: calc(var(${tokens.container.verticalHeight}, 1vh) * 100);\n        top: var(${tokens.container.offsetTop}, 0px);\n    }\n\n    &[data-status=\"initial\"] {\n        opacity: 0;\n    }\n\n    &[data-status=\"open\"] {\n        opacity: 1;\n        transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-entrance\"]};\n        transition-delay: ${Motion[\"duration-150\"]};\n    }\n\n    &[data-status=\"close\"] {\n        opacity: 0;\n        transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-exit\"]};\n    }\n\n    &[data-animation-from=\"top\"]${IS_INITIAL_OR_CLOSE} {\n        top: ${CLOSED_POSITION_OFFSET};\n    }\n\n    &[data-animation-from=\"top\"][data-status=\"open\"] {\n        top: 0;\n    }\n\n    &[data-animation-from=\"bottom\"]${IS_INITIAL_OR_CLOSE} {\n        bottom: ${CLOSED_POSITION_OFFSET};\n    }\n\n    &[data-animation-from=\"bottom\"][data-status=\"open\"] {\n        bottom: 0;\n    }\n\n    &[data-animation-from=\"left\"]${IS_INITIAL_OR_CLOSE} {\n        left: ${CLOSED_POSITION_OFFSET};\n    }\n\n    &[data-animation-from=\"left\"][data-status=\"open\"] {\n        left: 0;\n    }\n\n    &[data-animation-from=\"right\"]${IS_INITIAL_OR_CLOSE} {\n        right: ${CLOSED_POSITION_OFFSET};\n    }\n\n    &[data-animation-from=\"right\"][data-status=\"open\"] {\n        right: 0;\n    }\n`;\n\nexport const scrollContainer = css`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 100%;\n    pointer-events: none;\n`;\n\nexport const modalContainer = css`\n    pointer-events: auto;\n    width: 100%;\n    outline: none;\n`;\n"],"names":["container","verticalHeight","offsetTop"],"mappings":"gGAesB,kCAuEK,iCARC,0BAtEN,CAClBA,UAAW,CACPC,eAAgB,kDAChBC,UAAW"}
+{"version":3,"file":"modal-v2.styles.js","sources":["../../../src/modal-v2/modal-v2.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { MediaQuery, Motion } from \"../theme\";\n\nconst CLOSED_POSITION_OFFSET = \"-3%\";\nconst IS_INITIAL_OR_CLOSE =\n    ':is([data-status=\"initial\"], [data-status=\"close\"])';\n\nexport const tokens = {\n    container: {\n        verticalHeight: \"--fds-internal-modalV2-container-verticalHeight\",\n    },\n} as const;\n\nexport const container = css`\n    position: relative;\n    width: 100%;\n    height: 100%;\n\n    overflow: auto;\n\n    ${tokens.container.verticalHeight}: initial;\n\n    ${MediaQuery.MaxWidth.sm} {\n        height: calc(var(${tokens.container.verticalHeight}, 1vh) * 100);\n    }\n\n    @supports (height: 100dvh) {\n        height: 100dvh;\n    }\n\n    &[data-status=\"initial\"] {\n        opacity: 0;\n    }\n\n    &[data-status=\"open\"] {\n        opacity: 1;\n        transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-entrance\"]};\n        transition-delay: ${Motion[\"duration-150\"]};\n    }\n\n    &[data-status=\"close\"] {\n        opacity: 0;\n        transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-exit\"]};\n    }\n\n    &[data-animation-from=\"top\"]${IS_INITIAL_OR_CLOSE} {\n        top: ${CLOSED_POSITION_OFFSET};\n    }\n\n    &[data-animation-from=\"top\"][data-status=\"open\"] {\n        top: 0;\n    }\n\n    &[data-animation-from=\"bottom\"]${IS_INITIAL_OR_CLOSE} {\n        bottom: ${CLOSED_POSITION_OFFSET};\n    }\n\n    &[data-animation-from=\"bottom\"][data-status=\"open\"] {\n        bottom: 0;\n    }\n\n    &[data-animation-from=\"left\"]${IS_INITIAL_OR_CLOSE} {\n        left: ${CLOSED_POSITION_OFFSET};\n    }\n\n    &[data-animation-from=\"left\"][data-status=\"open\"] {\n        left: 0;\n    }\n\n    &[data-animation-from=\"right\"]${IS_INITIAL_OR_CLOSE} {\n        right: ${CLOSED_POSITION_OFFSET};\n    }\n\n    &[data-animation-from=\"right\"][data-status=\"open\"] {\n        right: 0;\n    }\n`;\n\nexport const scrollContainer = css`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 100%;\n    pointer-events: none;\n`;\n\nexport const modalContainer = css`\n    pointer-events: auto;\n    width: 100%;\n    outline: none;\n`;\n"],"names":["container","verticalHeight"],"mappings":"+FAcsB,kCAyEK,iCARC,0BAvEN,CAClBA,UAAW,CACPC,eAAgB"}

package/cjs/modal-v2/modal-v2.styles_a8gv5i.css

@@ -0,0 +1,3 @@
+@layer fds{.c1jrmyjd{position:relative;width:100%;height:100%;overflow:auto;--fds-internal-modalV2-container-verticalHeight:initial;}:where(body.fds-breakpoint-sm-max) .c1jrmyjd{height:calc(var(--fds-internal-modalV2-container-verticalHeight, 1vh) * 100);}@supports (height: 100dvh){.c1jrmyjd{height:100dvh;}}.c1jrmyjd[data-status="initial"]{opacity:0;}.c1jrmyjd[data-status="open"]{opacity:1;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-entrance);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-entrance);transition-delay:var(--fds-motion-duration-150);}.c1jrmyjd[data-status="close"]{opacity:0;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-exit);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-exit);}.c1jrmyjd[data-animation-from="top"]:is([data-status="initial"], [data-status="close"]){top:-3%;}.c1jrmyjd[data-animation-from="top"][data-status="open"]{top:0;}.c1jrmyjd[data-animation-from="bottom"]:is([data-status="initial"], [data-status="close"]){bottom:-3%;}.c1jrmyjd[data-animation-from="bottom"][data-status="open"]{bottom:0;}.c1jrmyjd[data-animation-from="left"]:is([data-status="initial"], [data-status="close"]){left:-3%;}.c1jrmyjd[data-animation-from="left"][data-status="open"]{left:0;}.c1jrmyjd[data-animation-from="right"]:is([data-status="initial"], [data-status="close"]){right:-3%;}.c1jrmyjd[data-animation-from="right"][data-status="open"]{right:0;}
+.s1xsiaxz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:100%;pointer-events:none;}
+.mn5ir3{pointer-events:auto;width:100%;outline:none;}}

package/cjs/modal-v2/slots/card.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("clsx"),a=require("react"),s=require("styled-components"),d=require("./close-button.js"),i=require("./content.js"),o=require("./footer.js"),l=require("./slot-styles.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=n(r),c=n(a);const f=c.default.forwardRef((function(r,a){var{id:n,"data-testid":f="modal-card",children:p,className:j}=r,m=e.__rest(r,["id","data-testid","children","className"]);const q=e=>c.default.Children.toArray(p).find((t=>((e,t)=>s.isStyledComponent(e.type)?e.type.target===t:e.type===t)(t,e))),y=q(d.CloseButton),C=q(i.Content),h=q(o.Footer),v=!!y;return t.jsxs("div",Object.assign({ref:a,id:n,"data-testid":f},m,{onClick:e=>{e.stopPropagation()},className:u.default(l.modalCard,j),children:[t.jsxs("div",{"data-has-close-button":v?"true":"false",className:u.default(l.slotSpacer),children:[C,h]}),v&&y]}))}));f.displayName="ModalV2.Card",exports.Card=f;
+"use strict";var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("clsx"),a=require("react"),s=require("../../util/is-styled-components.js"),i=require("./close-button.js"),d=require("./content.js"),l=require("./footer.js"),o=require("./slot-styles.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=n(r),c=n(a);const f=c.default.forwardRef((function(r,a){var{id:n,"data-testid":f="modal-card",children:j,className:p}=r,m=e.__rest(r,["id","data-testid","children","className"]);const q=e=>c.default.Children.toArray(j).find((t=>((e,t)=>s.default(e.type)?e.type.target===t:e.type===t)(t,e))),y=q(i.CloseButton),C=q(d.Content),h=q(l.Footer),v=!!y;return t.jsxs("div",Object.assign({ref:a,id:n,"data-testid":f},m,{onClick:e=>{e.stopPropagation()},className:u.default(o.modalCard,p),children:[t.jsxs("div",{"data-has-close-button":v?"true":"false",className:u.default(o.slotSpacer),children:[C,h]}),v&&y]}))}));f.displayName="ModalV2.Card",exports.Card=f;
 //# sourceMappingURL=card.js.map

package/cjs/modal-v2/slots/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sources":["../../../../src/modal-v2/slots/card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { NamedExoticComponent } from \"react\";\nimport React from \"react\";\nimport { isStyledComponent } from \"styled-components\";\n\nimport type { ModalCardProps } from \"../types\";\nimport { CloseButton } from \"./close-button\";\nimport { Content } from \"./content\";\nimport { Footer } from \"./footer\";\nimport * as styles from \"./slot-styles\";\n\nfunction CardInner(\n    {\n        id,\n        \"data-testid\": testId = \"modal-card\",\n        children,\n        className,\n        ...otherProps\n    }: ModalCardProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n) {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\n    };\n\n    // =========================================================================\n    // HELPERS\n    // =========================================================================\n    const isComponentType = (child: React.ReactPortal, type: any) =>\n        isStyledComponent(child.type)\n            ? (child.type as unknown as { target: any }).target === type\n            : child.type === type;\n\n    const findComponentOfType = (type: any) => {\n        return React.Children.toArray(children).find((child) =>\n            isComponentType(child as React.ReactPortal, type)\n        );\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const CloseButtonSlot = findComponentOfType(CloseButton);\n    const ContentSlot = findComponentOfType(Content);\n    const FooterSlot = findComponentOfType(Footer);\n\n    const hasCloseButton = !!CloseButtonSlot;\n\n    return (\n        <div\n            ref={ref}\n            id={id}\n            data-testid={testId}\n            {...otherProps}\n            onClick={handleOnClick}\n            className={clsx(styles.modalCard, className)}\n        >\n            <div\n                data-has-close-button={hasCloseButton ? \"true\" : \"false\"}\n                className={clsx(styles.slotSpacer)}\n            >\n                {ContentSlot}\n                {FooterSlot}\n            </div>\n            {hasCloseButton && CloseButtonSlot}\n        </div>\n    );\n}\n\nexport const Card = React.forwardRef<HTMLDivElement, ModalCardProps>(CardInner);\n\n(Card as NamedExoticComponent).displayName = \"ModalV2.Card\";\n"],"names":["Card","React","forwardRef","_a","ref","id","testId","children","className","otherProps","__rest","findComponentOfType","type","Children","toArray","find","child","isStyledComponent","target","isComponentType","CloseButtonSlot","CloseButton","ContentSlot","Content","FooterSlot","Footer","hasCloseButton","_jsxs","Object","assign","onClick","event","stopPropagation","clsx","styles.modalCard","styles.slotSpacer","displayName"],"mappings":"oWAwEO,MAAMA,EAAOC,EAAAA,QAAMC,YA7D1B,SACIC,EAOAC,GAPA,IAAAC,GACIA,EACA,cAAeC,EAAS,aAAYC,SACpCA,EAAQC,UACRA,GAASL,EACNM,EAAUC,EAAAA,OAAAP,EALjB,6CAYA,MAYMQ,EAAuBC,GAClBX,UAAMY,SAASC,QAAQP,GAAUQ,MAAMC,GAN1B,EAACA,EAA0BJ,IAC/CK,EAAAA,kBAAkBD,EAAMJ,MACjBI,EAAMJ,KAAoCM,SAAWN,EACtDI,EAAMJ,OAASA,EAIjBO,CAAgBH,EAA4BJ,KAO9CQ,EAAkBT,EAAoBU,eACtCC,EAAcX,EAAoBY,WAClCC,EAAab,EAAoBc,UAEjCC,IAAmBN,EAEzB,OACIO,EAAAA,KAAA,MAAAC,OAAAC,OAAA,CACIzB,IAAKA,EACLC,GAAIA,EAAE,cACOC,GACTG,EAAU,CACdqB,QAjCeC,IACnBA,EAAMC,iBAAiB,EAiCnBxB,UAAWyB,EAAAA,QAAKC,EAAAA,UAAkB1B,GAAUD,SAAA,CAE5CoB,EAAAA,KAAA,MAAA,CAAA,wBAC2BD,EAAiB,OAAS,QACjDlB,UAAWyB,EAAAA,QAAKE,EAAAA,YAAkB5B,SAAA,CAEjCe,EACAE,KAEJE,GAAkBN,KAG/B,IAICpB,EAA8BoC,YAAc"}
+{"version":3,"file":"card.js","sources":["../../../../src/modal-v2/slots/card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { NamedExoticComponent } from \"react\";\nimport React from \"react\";\n\nimport isStyledComponent from \"../../util/is-styled-components\";\nimport type { ModalCardProps } from \"../types\";\nimport { CloseButton } from \"./close-button\";\nimport { Content } from \"./content\";\nimport { Footer } from \"./footer\";\nimport * as styles from \"./slot-styles\";\n\nfunction CardInner(\n    {\n        id,\n        \"data-testid\": testId = \"modal-card\",\n        children,\n        className,\n        ...otherProps\n    }: ModalCardProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n) {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\n    };\n\n    // =========================================================================\n    // HELPERS\n    // =========================================================================\n    const isComponentType = (child: React.ReactPortal, type: any) =>\n        isStyledComponent(child.type)\n            ? (child.type as unknown as { target: any }).target === type\n            : child.type === type;\n\n    const findComponentOfType = (type: any) => {\n        return React.Children.toArray(children).find((child) =>\n            isComponentType(child as React.ReactPortal, type)\n        );\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const CloseButtonSlot = findComponentOfType(CloseButton);\n    const ContentSlot = findComponentOfType(Content);\n    const FooterSlot = findComponentOfType(Footer);\n\n    const hasCloseButton = !!CloseButtonSlot;\n\n    return (\n        <div\n            ref={ref}\n            id={id}\n            data-testid={testId}\n            {...otherProps}\n            onClick={handleOnClick}\n            className={clsx(styles.modalCard, className)}\n        >\n            <div\n                data-has-close-button={hasCloseButton ? \"true\" : \"false\"}\n                className={clsx(styles.slotSpacer)}\n            >\n                {ContentSlot}\n                {FooterSlot}\n            </div>\n            {hasCloseButton && CloseButtonSlot}\n        </div>\n    );\n}\n\nexport const Card = React.forwardRef<HTMLDivElement, ModalCardProps>(CardInner);\n\n(Card as NamedExoticComponent).displayName = \"ModalV2.Card\";\n"],"names":["Card","React","forwardRef","_a","ref","id","testId","children","className","otherProps","__rest","findComponentOfType","type","Children","toArray","find","child","isStyledComponent","target","isComponentType","CloseButtonSlot","CloseButton","ContentSlot","Content","FooterSlot","Footer","hasCloseButton","_jsxs","Object","assign","onClick","event","stopPropagation","clsx","styles.modalCard","styles.slotSpacer","displayName"],"mappings":"qXAwEO,MAAMA,EAAOC,EAAAA,QAAMC,YA7D1B,SACIC,EAOAC,GAPA,IAAAC,GACIA,EACA,cAAeC,EAAS,aAAYC,SACpCA,EAAQC,UACRA,GAASL,EACNM,EAAUC,EAAAA,OAAAP,EALjB,6CAYA,MAYMQ,EAAuBC,GAClBX,UAAMY,SAASC,QAAQP,GAAUQ,MAAMC,GAN1B,EAACA,EAA0BJ,IAC/CK,EAAAA,QAAkBD,EAAMJ,MACjBI,EAAMJ,KAAoCM,SAAWN,EACtDI,EAAMJ,OAASA,EAIjBO,CAAgBH,EAA4BJ,KAO9CQ,EAAkBT,EAAoBU,eACtCC,EAAcX,EAAoBY,WAClCC,EAAab,EAAoBc,UAEjCC,IAAmBN,EAEzB,OACIO,EAAAA,KAAA,MAAAC,OAAAC,OAAA,CACIzB,IAAKA,EACLC,GAAIA,EAAE,cACOC,GACTG,EAAU,CACdqB,QAjCeC,IACnBA,EAAMC,iBAAiB,EAiCnBxB,UAAWyB,EAAAA,QAAKC,EAAAA,UAAkB1B,GAAUD,SAAA,CAE5CoB,EAAAA,KAAA,MAAA,CAAA,wBAC2BD,EAAiB,OAAS,QACjDlB,UAAWyB,EAAAA,QAAKE,EAAAA,YAAkB5B,SAAA,CAEjCe,EACAE,KAEJE,GAAkBN,KAG/B,IAICpB,EAA8BoC,YAAc"}

package/cjs/modal-v2/slots/slot-styles_13sd376.css

@@ -1,4 +1,4 @@
-.metykyj{width:40rem;margin:var(--fds-spacing-64) auto;background:var(--fds-colour-bg);box-shadow:var(--fds-shadow-xs-strong);border-radius:var(--fds-radius-lg);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;max-width:calc(100% - var(--fds-breakpoint-margin-xxl) * 2);}:where(body.fds-breakpoint-xl-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-xl) * 2);}:where(body.fds-breakpoint-lg-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-lg) * 2);}:where(body.fds-breakpoint-md-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-md) * 2);}:where(body.fds-breakpoint-sm-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-sm) * 2);}:where(body.fds-breakpoint-xs-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-xs) * 2);}:where(body.fds-breakpoint-xxs-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-xxs) * 2);}
+@layer fds{.metykyj{width:40rem;margin:var(--fds-spacing-64) auto;background:var(--fds-colour-bg);box-shadow:var(--fds-shadow-xs-strong);border-radius:var(--fds-radius-lg);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;max-width:calc(100% - var(--fds-breakpoint-margin-xxl) * 2);}:where(body.fds-breakpoint-xl-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-xl) * 2);}:where(body.fds-breakpoint-lg-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-lg) * 2);}:where(body.fds-breakpoint-md-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-md) * 2);}:where(body.fds-breakpoint-sm-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-sm) * 2);}:where(body.fds-breakpoint-xs-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-xs) * 2);}:where(body.fds-breakpoint-xxs-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-xxs) * 2);}
 .c1247joo{margin-right:var(--fds-spacing-16);margin-left:auto;margin-top:var(--fds-spacing-16);margin-bottom:var(--fds-spacing-16);}
 .st53q25{padding:0;color:var(--fds-colour-icon);}.st53q25 svg{height:2rem;width:2rem;}
 .c1ls09wh{margin-right:var(--fds-spacing-64);margin-left:var(--fds-spacing-64);}:where(body.fds-breakpoint-sm-max) .c1ls09wh{margin-right:var(--fds-spacing-20);margin-left:var(--fds-spacing-20);}
@@ -23,4 +23,4 @@
         );}.s1vsayl1[data-has-close-button="false"]{--fds-internal-modalV2-slotSpacer-firstChildMarginTop:var(
             --fds-internal-modalV2-slotSpacer-firstChildMarginTopNoCloseButton,
             var(--fds-spacing-64)
-        );}
+        );}}

package/cjs/navbar/brand.styles_zcgddp.css

@@ -1 +1 @@
-.cw4lf53{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;height:100%;}.cw4lf53 img{width:auto;height:100%;-webkit-transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);object-fit:contain;}
+@layer fds{.cw4lf53{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;height:100%;}.cw4lf53 img{width:auto;height:100%;-webkit-transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);object-fit:contain;}}

package/cjs/navbar/drawer.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("@lifesg/react-icons/cross"),a=require("clsx"),s=require("react"),n=require("../shared/clickable-icon/clickable-icon.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var t=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var i=require("./brand.js"),o=require("./drawer.styles.js"),d=require("./navbar.styles.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=c(a);const u=c(s).default.forwardRef(((a,c)=>{const{show:u,resources:m={},children:v,hideNavBranding:p,onClose:h,onBrandClick:f,drawerLabel:j="Mobile navigation menu",mobileMenuRef:w}=a,[y,x]=s.useState(0),b=s.useRef(null);t.useApplyStyle(b,{[o.tokens.container.viewHeight]:y?`${y}px`:null});const{primary:q,secondary:k}=m,C=()=>{if(window){const e=.01*window.innerHeight;x(e)}};s.useEffect((()=>(C(),window.addEventListener("resize",C),()=>{window.removeEventListener("resize",C)})),[]),s.useLayoutEffect((()=>{if(u){const e=setTimeout((()=>{b.current&&b.current.focus({preventScroll:!0})}),550);return()=>clearTimeout(e)}}),[u]);return e.jsx("div",{className:o.wrapper,ref:c,"data-testid":"drawer",children:e.jsx("nav",{ref:b,className:l.default(o.container,u?o.containerShown:o.containerHidden),onKeyDown:e=>{u&&"Escape"===e.key&&(e.preventDefault(),null==h||h(),setTimeout((()=>{var e;null===(e=null==w?void 0:w.current)||void 0===e||e.focus()}),300))},tabIndex:u?0:-1,"aria-label":j,children:e.jsxs("div",{className:o.content,children:[e.jsxs("div",{className:o.topBar,children:[e.jsx("div",{className:l.default(d.navBrandContainer,d.navBrandContainerCompressed,d.navBrandContainerResponsive),"data-id":"drawer-brand-container",children:!p&&e.jsxs(e.Fragment,{children:[q&&e.jsx(i.Brand,{resources:q,compress:!0,onClick:f,"data-id":"drawer-brand-primary","data-testid":"drawer__brand",type:"primary"}),k&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:l.default(d.navSeparator,d.navSeparatorCompressed,d.navSeparatorResponsive)}),e.jsx(i.Brand,{resources:k,compress:!0,onClick:f,"data-id":"drawer-brand-secondary","data-testid":"drawer__brand-secondary",type:"secondary"})]})]})}),e.jsx(n.ClickableIcon,{className:o.closeButton,onClick:h,focusHighlight:!1,"aria-label":"Close nav menu",children:e.jsx(r.CrossIcon,{className:o.closeIcon})})]}),v]})})})}));exports.Drawer=u;
+"use strict";var e=require("react/jsx-runtime"),r=require("@floating-ui/react"),a=require("@lifesg/react-icons/cross"),n=require("clsx"),s=require("react"),i=require("../shared/clickable-icon/clickable-icon.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var t=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var o=require("../util/merge-refs.js");require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var l=require("./brand.js"),d=require("./drawer.styles.js"),c=require("./navbar.styles.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=u(n);const v=u(s).default.forwardRef(((n,u)=>{const{show:v,resources:j={},children:p,hideNavBranding:h,onClose:f,onBrandClick:q,drawerLabel:w="Mobile navigation menu",mobileMenuRef:x}=n,[y,b]=s.useState(0),g=s.useRef(null);t.useApplyStyle(g,{[d.tokens.container.viewHeight]:y?`${y}px`:null});const{primary:C,secondary:k}=j,{context:B,refs:N}=r.useFloating({open:v,onOpenChange:e=>{!e&&f&&f()}}),F=()=>{if(window){const e=.01*window.innerHeight;b(e)}};s.useEffect((()=>(F(),window.addEventListener("resize",F),()=>{window.removeEventListener("resize",F)})),[]),s.useLayoutEffect((()=>{if(v){const e=setTimeout((()=>{g.current&&g.current.focus({preventScroll:!0})}),550);return()=>clearTimeout(e)}}),[v]);return e.jsx(r.FloatingFocusManager,{context:B,initialFocus:-1,returnFocus:!0,disabled:!v,children:e.jsx("div",{className:d.wrapper,ref:o.mergeRefs(u,N.setFloating),"data-testid":"drawer",children:e.jsx("nav",{ref:g,className:m.default(d.container,v?d.containerShown:d.containerHidden),onKeyDown:e=>{v&&"Escape"===e.key&&(e.preventDefault(),null==f||f(),setTimeout((()=>{var e;null===(e=null==x?void 0:x.current)||void 0===e||e.focus()}),300))},tabIndex:-1,"aria-label":w,children:e.jsxs("div",{className:d.content,children:[e.jsxs("div",{className:d.topBar,children:[e.jsx("div",{className:m.default(c.navBrandContainer,c.navBrandContainerCompressed,c.navBrandContainerResponsive),"data-id":"drawer-brand-container",children:!h&&e.jsxs(e.Fragment,{children:[C&&e.jsx(l.Brand,{resources:C,compress:!0,onClick:q,"data-id":"drawer-brand-primary","data-testid":"drawer__brand",type:"primary"}),k&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:m.default(c.navSeparator,c.navSeparatorCompressed,c.navSeparatorResponsive)}),e.jsx(l.Brand,{resources:k,compress:!0,onClick:q,"data-id":"drawer-brand-secondary","data-testid":"drawer__brand-secondary",type:"secondary"})]})]})}),e.jsx(i.ClickableIcon,{className:d.closeButton,onClick:f,focusHighlight:!1,"aria-label":"Close nav menu",children:e.jsx(a.CrossIcon,{className:d.closeIcon})})]}),p]})})})})}));exports.Drawer=v;
 //# sourceMappingURL=drawer.js.map

package/cjs/navbar/drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","sources":["../../../src/navbar/drawer.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useLayoutEffect, useRef, useState } from \"react\";\n\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useApplyStyle } from \"../theme\";\nimport { Brand } from \"./brand\";\nimport * as styles from \"./drawer.styles\";\nimport * as navbarStyles from \"./navbar.styles\";\nimport type { NavbarDrawerProps } from \"./types\";\n\nconst Component = (\n    props: NavbarDrawerProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const {\n        show,\n        resources = {},\n        children,\n        hideNavBranding,\n        onClose,\n        onBrandClick,\n        drawerLabel = \"Mobile navigation menu\",\n        mobileMenuRef,\n    } = props;\n    const [viewHeight, setViewHeight] = useState<number>(0);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.container.viewHeight]: viewHeight\n            ? `${viewHeight}px`\n            : null,\n    });\n\n    const { primary, secondary } = resources;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleResize = () => {\n        /**\n         * Reference:\n         * https://css-tricks.com/the-trick-to-viewport-units-on-mobile/\n         */\n        if (window) {\n            const viewHeight = window.innerHeight * 0.01;\n            setViewHeight(viewHeight);\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (!show) return;\n\n        if (event.key === \"Escape\") {\n            event.preventDefault();\n            onClose?.();\n            // Return focus to the hamburger menu button\n            setTimeout(() => {\n                mobileMenuRef?.current?.focus();\n            }, 300);\n        }\n    };\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        handleResize();\n        window.addEventListener(\"resize\", handleResize);\n\n        return () => {\n            window.removeEventListener(\"resize\", handleResize);\n        };\n    }, []);\n\n    // Focus management when drawer opens\n    useLayoutEffect(() => {\n        if (show) {\n            const timer = setTimeout(() => {\n                if (containerRef.current) {\n                    containerRef.current.focus({ preventScroll: true });\n                }\n            }, 550);\n\n            return () => clearTimeout(timer);\n        }\n    }, [show]);\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderBrand = () => {\n        return (\n            <>\n                {primary && (\n                    <Brand\n                        resources={primary}\n                        compress\n                        onClick={onBrandClick}\n                        data-id=\"drawer-brand-primary\"\n                        data-testid=\"drawer__brand\"\n                        type=\"primary\"\n                    />\n                )}\n                {secondary && (\n                    <>\n                        <div\n                            className={clsx(\n                                navbarStyles.navSeparator,\n                                navbarStyles.navSeparatorCompressed,\n                                navbarStyles.navSeparatorResponsive\n                            )}\n                        />\n                        <Brand\n                            resources={secondary}\n                            compress\n                            onClick={onBrandClick}\n                            data-id=\"drawer-brand-secondary\"\n                            data-testid=\"drawer__brand-secondary\"\n                            type=\"secondary\"\n                        />\n                    </>\n                )}\n            </>\n        );\n    };\n\n    const renderTopBar = () => (\n        <div className={styles.topBar}>\n            <div\n                className={clsx(\n                    navbarStyles.navBrandContainer,\n                    navbarStyles.navBrandContainerCompressed,\n                    navbarStyles.navBrandContainerResponsive\n                )}\n                data-id=\"drawer-brand-container\"\n            >\n                {!hideNavBranding && renderBrand()}\n            </div>\n            <ClickableIcon\n                className={styles.closeButton}\n                onClick={onClose}\n                focusHighlight={false}\n                aria-label=\"Close nav menu\"\n            >\n                <CrossIcon className={styles.closeIcon} />\n            </ClickableIcon>\n        </div>\n    );\n\n    return (\n        <div className={styles.wrapper} ref={ref} data-testid=\"drawer\">\n            <nav\n                ref={containerRef}\n                className={clsx(\n                    styles.container,\n                    show ? styles.containerShown : styles.containerHidden\n                )}\n                onKeyDown={handleKeyDown}\n                tabIndex={show ? 0 : -1}\n                aria-label={drawerLabel}\n            >\n                <div className={styles.content}>\n                    {renderTopBar()}\n                    {children}\n                </div>\n            </nav>\n        </div>\n    );\n};\n\nexport const Drawer = React.forwardRef(Component);\n"],"names":["Drawer","React","forwardRef","props","ref","show","resources","children","hideNavBranding","onClose","onBrandClick","drawerLabel","mobileMenuRef","viewHeight","setViewHeight","useState","containerRef","useRef","useApplyStyle","styles.tokens","container","primary","secondary","handleResize","window","innerHeight","useEffect","addEventListener","removeEventListener","useLayoutEffect","timer","setTimeout","current","focus","preventScroll","clearTimeout","_jsx","className","styles.wrapper","clsx","styles.container","styles.containerShown","styles.containerHidden","onKeyDown","event","key","preventDefault","_a","tabIndex","_jsxs","styles.content","styles.topBar","navbarStyles.navBrandContainer","navbarStyles.navBrandContainerCompressed","navbarStyles.navBrandContainerResponsive","_Fragment","Brand","compress","onClick","type","navbarStyles.navSeparator","navbarStyles.navSeparatorCompressed","navbarStyles.navSeparatorResponsive","ClickableIcon","styles.closeButton","focusHighlight","CrossIcon","styles.closeIcon"],"mappings":"qrBAWA,MAmKaA,OAASC,QAAMC,YAnKV,CACdC,EACAC,KAKA,MAAMC,KACFA,EAAIC,UACJA,EAAY,CAAA,EAAEC,SACdA,EAAQC,gBACRA,EAAeC,QACfA,EAAOC,aACPA,EAAYC,YACZA,EAAc,yBAAwBC,cACtCA,GACAT,GACGU,EAAYC,GAAiBC,EAAAA,SAAiB,GAC/CC,EAAeC,EAAAA,OAAuB,MAE5CC,EAAAA,cAAcF,EAAc,CACxB,CAACG,EAAAA,OAAcC,UAAUP,YAAaA,EAChC,GAAGA,MACH,OAGV,MAAMQ,QAAEA,EAAOC,UAAEA,GAAchB,EAKzBiB,EAAe,KAKjB,GAAIC,OAAQ,CACR,MAAMX,EAAkC,IAArBW,OAAOC,YAC1BX,EAAcD,EAClB,GAmBJa,EAAAA,WAAU,KACNH,IACAC,OAAOG,iBAAiB,SAAUJ,GAE3B,KACHC,OAAOI,oBAAoB,SAAUL,EAAa,IAEvD,IAGHM,EAAAA,iBAAgB,KACZ,GAAIxB,EAAM,CACN,MAAMyB,EAAQC,YAAW,KACjBf,EAAagB,SACbhB,EAAagB,QAAQC,MAAM,CAAEC,eAAe,GAChD,GACD,KAEH,MAAO,IAAMC,aAAaL,EAC9B,IACD,CAACzB,IAgEJ,OACI+B,EAAAA,IAAA,MAAA,CAAKC,UAAWC,EAAAA,QAAgBlC,IAAKA,EAAG,cAAc,SAAQG,SAC1D6B,EAAAA,IAAA,MAAA,CACIhC,IAAKY,EACLqB,UAAWE,EAAAA,QACPC,EAAAA,UACAnC,EAAOoC,EAAAA,eAAwBC,EAAAA,iBAEnCC,UA5GWC,IACdvC,GAEa,WAAduC,EAAMC,MACND,EAAME,iBACNrC,SAAAA,IAEAsB,YAAW,WACe,QAAtBgB,EAAAnC,aAAa,EAAbA,EAAeoB,eAAO,IAAAe,GAAAA,EAAEd,OAAO,GAChC,KACP,EAmGQe,SAAU3C,EAAO,GAAI,EAAE,aACXM,WAEZsC,EAAAA,KAAA,MAAA,CAAKZ,UAAWa,UAAc3C,SAAA,CAlCtC0C,EAAAA,KAAA,MAAA,CAAKZ,UAAWc,SAAa5C,SAAA,CACzB6B,EAAAA,WACIC,UAAWE,EAAAA,QACPa,oBACAC,EAAAA,4BACAC,EAAAA,6BACH,UACO,mCAEN9C,GA5CNyC,OAAAM,EAAAA,SAAA,CAAAhD,SAAA,CACKc,GACGe,MAACoB,EAAAA,MAAK,CACFlD,UAAWe,EACXoC,UAAQ,EACRC,QAAShD,EAAY,UACb,uBAAsB,cAClB,gBACZiD,KAAK,YAGZrC,GACG2B,EAAAA,KAAAM,EAAAA,SAAA,CAAAhD,SAAA,CACI6B,MAAA,MAAA,CACIC,UAAWE,UACPqB,EAAAA,aACAC,EAAAA,uBACAC,EAAAA,0BAGR1B,EAAAA,IAACoB,EAAAA,MAAK,CACFlD,UAAWgB,EACXmC,UAAQ,EACRC,QAAShD,EAAY,UACb,uCACI,0BACZiD,KAAK,sBAoBrBvB,EAAAA,IAAC2B,EAAAA,cAAa,CACV1B,UAAW2B,EAAAA,YACXN,QAASjD,EACTwD,gBAAgB,EAAK,aACV,iBAAgB1D,SAE3B6B,MAAC8B,EAAAA,UAAS,CAAC7B,UAAW8B,EAAAA,iBAmBjB5D,QAGP"}
+{"version":3,"file":"drawer.js","sources":["../../../src/navbar/drawer.tsx"],"sourcesContent":["import { FloatingFocusManager, useFloating } from \"@floating-ui/react\";\nimport { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useLayoutEffect, useRef, useState } from \"react\";\n\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useApplyStyle } from \"../theme\";\nimport { mergeRefs } from \"../util\";\nimport { Brand } from \"./brand\";\nimport * as styles from \"./drawer.styles\";\nimport * as navbarStyles from \"./navbar.styles\";\nimport type { NavbarDrawerProps } from \"./types\";\n\nconst Component = (\n    props: NavbarDrawerProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const {\n        show,\n        resources = {},\n        children,\n        hideNavBranding,\n        onClose,\n        onBrandClick,\n        drawerLabel = \"Mobile navigation menu\",\n        mobileMenuRef,\n    } = props;\n    const [viewHeight, setViewHeight] = useState<number>(0);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.container.viewHeight]: viewHeight\n            ? `${viewHeight}px`\n            : null,\n    });\n\n    const { primary, secondary } = resources;\n\n    // =========================================================================\n    // FLOATING UI CONFIG\n    // =========================================================================\n    const { context, refs: floatingRefs } = useFloating({\n        open: show,\n        onOpenChange: (open) => {\n            if (!open && onClose) {\n                onClose();\n            }\n        },\n    });\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleResize = () => {\n        /**\n         * Reference:\n         * https://css-tricks.com/the-trick-to-viewport-units-on-mobile/\n         */\n        if (window) {\n            const viewHeight = window.innerHeight * 0.01;\n            setViewHeight(viewHeight);\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (!show) return;\n\n        if (event.key === \"Escape\") {\n            event.preventDefault();\n            onClose?.();\n            // Return focus to the hamburger menu button\n            setTimeout(() => {\n                mobileMenuRef?.current?.focus();\n            }, 300);\n        }\n    };\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        handleResize();\n        window.addEventListener(\"resize\", handleResize);\n\n        return () => {\n            window.removeEventListener(\"resize\", handleResize);\n        };\n    }, []);\n\n    // Focus management when drawer opens\n    useLayoutEffect(() => {\n        if (show) {\n            const timer = setTimeout(() => {\n                if (containerRef.current) {\n                    containerRef.current.focus({ preventScroll: true });\n                }\n            }, 550);\n\n            return () => clearTimeout(timer);\n        }\n    }, [show]);\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderBrand = () => {\n        return (\n            <>\n                {primary && (\n                    <Brand\n                        resources={primary}\n                        compress\n                        onClick={onBrandClick}\n                        data-id=\"drawer-brand-primary\"\n                        data-testid=\"drawer__brand\"\n                        type=\"primary\"\n                    />\n                )}\n                {secondary && (\n                    <>\n                        <div\n                            className={clsx(\n                                navbarStyles.navSeparator,\n                                navbarStyles.navSeparatorCompressed,\n                                navbarStyles.navSeparatorResponsive\n                            )}\n                        />\n                        <Brand\n                            resources={secondary}\n                            compress\n                            onClick={onBrandClick}\n                            data-id=\"drawer-brand-secondary\"\n                            data-testid=\"drawer__brand-secondary\"\n                            type=\"secondary\"\n                        />\n                    </>\n                )}\n            </>\n        );\n    };\n\n    const renderTopBar = () => (\n        <div className={styles.topBar}>\n            <div\n                className={clsx(\n                    navbarStyles.navBrandContainer,\n                    navbarStyles.navBrandContainerCompressed,\n                    navbarStyles.navBrandContainerResponsive\n                )}\n                data-id=\"drawer-brand-container\"\n            >\n                {!hideNavBranding && renderBrand()}\n            </div>\n            <ClickableIcon\n                className={styles.closeButton}\n                onClick={onClose}\n                focusHighlight={false}\n                aria-label=\"Close nav menu\"\n            >\n                <CrossIcon className={styles.closeIcon} />\n            </ClickableIcon>\n        </div>\n    );\n\n    return (\n        <FloatingFocusManager\n            context={context}\n            initialFocus={-1}\n            returnFocus={true}\n            disabled={!show}\n        >\n            <div\n                className={styles.wrapper}\n                ref={mergeRefs(ref, floatingRefs.setFloating)}\n                data-testid=\"drawer\"\n            >\n                <nav\n                    ref={containerRef}\n                    className={clsx(\n                        styles.container,\n                        show ? styles.containerShown : styles.containerHidden\n                    )}\n                    onKeyDown={handleKeyDown}\n                    tabIndex={-1}\n                    aria-label={drawerLabel}\n                >\n                    <div className={styles.content}>\n                        {renderTopBar()}\n                        {children}\n                    </div>\n                </nav>\n            </div>\n        </FloatingFocusManager>\n    );\n};\n\nexport const Drawer = React.forwardRef(Component);\n"],"names":["Drawer","React","forwardRef","props","ref","show","resources","children","hideNavBranding","onClose","onBrandClick","drawerLabel","mobileMenuRef","viewHeight","setViewHeight","useState","containerRef","useRef","useApplyStyle","styles.tokens","container","primary","secondary","context","refs","floatingRefs","useFloating","open","onOpenChange","handleResize","window","innerHeight","useEffect","addEventListener","removeEventListener","useLayoutEffect","timer","setTimeout","current","focus","preventScroll","clearTimeout","_jsx","FloatingFocusManager","initialFocus","returnFocus","disabled","className","styles.wrapper","mergeRefs","setFloating","clsx","styles.container","styles.containerShown","styles.containerHidden","onKeyDown","event","key","preventDefault","_a","tabIndex","_jsxs","styles.content","styles.topBar","navbarStyles.navBrandContainer","navbarStyles.navBrandContainerCompressed","navbarStyles.navBrandContainerResponsive","_Fragment","Brand","compress","onClick","type","navbarStyles.navSeparator","navbarStyles.navSeparatorCompressed","navbarStyles.navSeparatorResponsive","ClickableIcon","styles.closeButton","focusHighlight","CrossIcon","styles.closeIcon"],"mappings":"g8BAaA,MA0LaA,OAASC,QAAMC,YA1LV,CACdC,EACAC,KAKA,MAAMC,KACFA,EAAIC,UACJA,EAAY,CAAA,EAAEC,SACdA,EAAQC,gBACRA,EAAeC,QACfA,EAAOC,aACPA,EAAYC,YACZA,EAAc,yBAAwBC,cACtCA,GACAT,GACGU,EAAYC,GAAiBC,EAAAA,SAAiB,GAC/CC,EAAeC,EAAAA,OAAuB,MAE5CC,EAAAA,cAAcF,EAAc,CACxB,CAACG,EAAAA,OAAcC,UAAUP,YAAaA,EAChC,GAAGA,MACH,OAGV,MAAMQ,QAAEA,EAAOC,UAAEA,GAAchB,GAKzBiB,QAAEA,EAASC,KAAMC,GAAiBC,EAAAA,YAAY,CAChDC,KAAMtB,EACNuB,aAAeD,KACNA,GAAQlB,GACTA,GACJ,IAOFoB,EAAe,KAKjB,GAAIC,OAAQ,CACR,MAAMjB,EAAkC,IAArBiB,OAAOC,YAC1BjB,EAAcD,EAClB,GAmBJmB,EAAAA,WAAU,KACNH,IACAC,OAAOG,iBAAiB,SAAUJ,GAE3B,KACHC,OAAOI,oBAAoB,SAAUL,EAAa,IAEvD,IAGHM,EAAAA,iBAAgB,KACZ,GAAI9B,EAAM,CACN,MAAM+B,EAAQC,YAAW,KACjBrB,EAAasB,SACbtB,EAAasB,QAAQC,MAAM,CAAEC,eAAe,GAChD,GACD,KAEH,MAAO,IAAMC,aAAaL,EAC9B,IACD,CAAC/B,IAgEJ,OACIqC,EAAAA,IAACC,EAAAA,qBAAoB,CACjBpB,QAASA,EACTqB,gBACAC,aAAa,EACbC,UAAWzC,EAAIE,SAEfmC,EAAAA,IAAA,MAAA,CACIK,UAAWC,EAAAA,QACX5C,IAAK6C,EAAAA,UAAU7C,EAAKqB,EAAayB,aAAY,cACjC,kBAEZR,EAAAA,IAAA,MAAA,CACItC,IAAKY,EACL+B,UAAWI,UACPC,EAAAA,UACA/C,EAAOgD,EAAAA,eAAwBC,EAAAA,iBAEnCC,UAtHOC,IACdnD,GAEa,WAAdmD,EAAMC,MACND,EAAME,iBACNjD,SAAAA,IAEA4B,YAAW,WACe,QAAtBsB,EAAA/C,aAAa,EAAbA,EAAe0B,eAAO,IAAAqB,GAAAA,EAAEpB,OAAO,GAChC,KACP,EA6GYqB,UAAU,EAAE,aACAjD,EAAWJ,SAEvBsD,EAAAA,KAAA,MAAA,CAAKd,UAAWe,EAAAA,QAAcvD,SAAA,CA5C1CsD,EAAAA,KAAA,MAAA,CAAKd,UAAWgB,SAAaxD,SAAA,CACzBmC,EAAAA,WACIK,UAAWI,EAAAA,QACPa,oBACAC,EAAAA,4BACAC,EAAAA,6BACH,UACO,mCAEN1D,GA5CNqD,OAAAM,EAAAA,SAAA,CAAA5D,SAAA,CACKc,GACGqB,MAAC0B,EAAAA,MAAK,CACF9D,UAAWe,EACXgD,UAAQ,EACRC,QAAS5D,EAAY,UACb,uBAAsB,cAClB,gBACZ6D,KAAK,YAGZjD,GACGuC,EAAAA,KAAAM,EAAAA,SAAA,CAAA5D,SAAA,CACImC,MAAA,MAAA,CACIK,UAAWI,UACPqB,EAAAA,aACAC,EAAAA,uBACAC,EAAAA,0BAGRhC,EAAAA,IAAC0B,EAAAA,MAAK,CACF9D,UAAWgB,EACX+C,UAAQ,EACRC,QAAS5D,EAAY,UACb,uCACI,0BACZ6D,KAAK,sBAoBrB7B,EAAAA,IAACiC,EAAAA,cAAa,CACV5B,UAAW6B,EAAAA,YACXN,QAAS7D,EACToE,gBAAgB,EAAK,aACV,iBAAgBtE,SAE3BmC,MAACoC,EAAAA,UAAS,CAAC/B,UAAWgC,EAAAA,iBA6BbxE,UAIM"}

package/cjs/navbar/drawer.styles_7hnxp5.css

@@ -1,8 +1,8 @@
-.w13l2hkd{display:none;}:where(body.fds-breakpoint-lg-max) .w13l2hkd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+@layer fds{.w13l2hkd{display:none;}:where(body.fds-breakpoint-lg-max) .w13l2hkd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
 .c1dn2jn3{position:absolute;overflow-y:auto;overflow-x:hidden;display:block;padding:0 0 var(--fds-spacing-16);background-color:var(--fds-colour-bg);box-shadow:var(--fds-shadow-xs-subtle);outline:none;--fds-internal-navbar-drawer-viewHeight:initial;height:calc(var(--fds-internal-navbar-drawer-viewHeight, 1vh) * 100);}:where(body.fds-breakpoint-lg-max) .c1dn2jn3{width:75%;}:where(body.fds-breakpoint-sm-max) .c1dn2jn3{width:100%;}
 .cc2efvs{visibility:visible;right:0;-webkit-transition:all 300ms var(--fds-motion-timing-ease-entrance);transition:all 300ms var(--fds-motion-timing-ease-entrance);transition-delay:200ms;}
 .c9clmba{visibility:hidden;right:-100%;-webkit-transition:all 300ms var(--fds-motion-timing-ease-exit);transition:all 300ms var(--fds-motion-timing-ease-exit);}
 .c1yr3tbf{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
 .tkfa6sy{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;padding:var(--fds-spacing-40) var(--fds-spacing-20) var(--fds-spacing-32);}
 .csth4gk{height:1.5rem;width:1.5rem;}
-.c4lb5hz{position:absolute;right:calc(var(--fds-spacing-4) * -1);color:var(--fds-colour-icon);}.c4lb5hz:active,.c4lb5hz:focus{color:var(--fds-colour-icon-hover);}.c4lb5hz svg{height:1.5rem;width:1.5rem;}
+.c4lb5hz{position:absolute;right:calc(var(--fds-spacing-4) * -1);color:var(--fds-colour-icon);}.c4lb5hz:active,.c4lb5hz:focus{color:var(--fds-colour-icon-hover);}.c4lb5hz svg{height:1.5rem;width:1.5rem;}}

package/cjs/navbar/menu.styles_gdpqc.css

@@ -1,3 +1,3 @@
-.m1lq4qov{list-style:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin:0;padding:0;border-left:var(--fds-border-width-040) solid var(--fds-colour-border-selected);}
+@layer fds{.m1lq4qov{list-style:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin:0;padding:0;border-left:var(--fds-border-width-040) solid var(--fds-colour-border-selected);}
 .m6cy0t7{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
-.l1t9jy07{width:100%;text-align:left;color:var(--fds-colour-text);margin:0 var(--fds-spacing-8);border:var(--fds-border-style-solid) transparent;border-width:var(--fds-spacing-12) var(--fds-spacing-8);border-radius:var(--fds-radius-md);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap;}.l1t9jy07:hover,.l1t9jy07:active,.l1t9jy07:focus{background-color:var(--fds-colour-bg-hover);color:var(--fds-colour-text);}
+.l1t9jy07{width:100%;text-align:left;color:var(--fds-colour-text);margin:0 var(--fds-spacing-8);border:var(--fds-border-style-solid) transparent;border-width:var(--fds-spacing-12) var(--fds-spacing-8);border-radius:var(--fds-radius-md);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap;}.l1t9jy07:hover,.l1t9jy07:active,.l1t9jy07:focus{background-color:var(--fds-colour-bg-hover);color:var(--fds-colour-text);}}

package/cjs/navbar/navbar-action-buttons.styles_1vpm0nk.css

@@ -1,4 +1,4 @@
-.w62j500{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;list-style:none;margin-left:var(--fds-spacing-64);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}:where(body.fds-breakpoint-lg-max) .w62j500{display:none;}
+@layer fds{.w62j500{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;list-style:none;margin-left:var(--fds-spacing-64);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}:where(body.fds-breakpoint-lg-max) .w62j500{display:none;}
 .m1gsi5dr{display:none;}:where(body.fds-breakpoint-lg-max) .m1gsi5dr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;list-style:none;margin-left:var(--fds-spacing-64);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
 .d2uo9g4{display:none;list-style:none;}:where(body.fds-breakpoint-lg-max) .d2uo9g4{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-top:var(--fds-spacing-40);width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:22rem;max-width:24rem;}:where(body.fds-breakpoint-sm-max) .d2uo9g4{width:100%;max-width:unset;min-width:unset;}
 .bmx9nfs{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.bmx9nfs:not(:last-of-type){margin-right:var(--fds-spacing-16);}:where(body.fds-breakpoint-lg-max) .bmx9nfs{width:100%;padding:0 0 0 var(--fds-spacing-16);-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}:where(body.fds-breakpoint-lg-max) .bmx9nfs:not(:last-of-type){margin-right:0;margin-bottom:0;}
@@ -7,4 +7,4 @@
 .dvtt0j5{display:none;}:where(body.fds-breakpoint-lg-max) .dvtt0j5{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-top:var(--fds-spacing-40);}
 .dq81je7{margin-bottom:var(--fds-spacing-8);}
 .d1s552j0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
-.dbo95jy:not(:last-child){margin-right:var(--fds-spacing-16);}.dbo95jy img{width:auto;height:auto;object-fit:contain;}:where(body.fds-breakpoint-lg-max) .dbo95jy img{max-width:11rem;}:where(body.fds-breakpoint-sm-max) .dbo95jy img{max-width:100%;}
+.dbo95jy:not(:last-child){margin-right:var(--fds-spacing-16);}.dbo95jy img{width:auto;height:auto;object-fit:contain;}:where(body.fds-breakpoint-lg-max) .dbo95jy img{max-width:11rem;}:where(body.fds-breakpoint-sm-max) .dbo95jy img{max-width:100%;}}

package/cjs/navbar/navbar-items.styles.js

@@ -1,2 +1,2 @@
-"use strict";require("./navbar-items.styles_i9cunu.css");exports.chevronIcon="c1s8ur0k",exports.chevronIconSelected="c178e7hk",exports.expandCollapseButton="ej7h5do",exports.expandCollapseButtonExpanded="e160mxwv",exports.link="l1o3p4yu",exports.linkButton="l1xfqf3s",exports.linkIconContainer="l1p9u80z",exports.linkIndicator="lnocj2s",exports.linkIndicatorSelected="l5qfat1",exports.linkItem="l18t6f3m",exports.linkItemHiddenBranding="lsn8o0d",exports.linkLabel="lsc0hr8",exports.linkSelected="lkwvsmx",exports.linkWeightBold="l1p7dxu8",exports.linkWeightRegular="l1kp5n19",exports.linkWeightSemibold="lqgrg2a",exports.mobileWrapper="mw9gug8",exports.wrapper="w1ndf2sj",exports.wrapperAlignLeft="w177nfye";
+"use strict";require("./navbar-items.styles_1i3ltot.css");exports.chevronIcon="c1s8ur0k",exports.chevronIconSelected="c178e7hk",exports.expandCollapseButton="ej7h5do",exports.expandCollapseButtonExpanded="e160mxwv",exports.link="l1o3p4yu",exports.linkButton="l1xfqf3s",exports.linkIconContainer="l1p9u80z",exports.linkIndicator="lnocj2s",exports.linkIndicatorSelected="l5qfat1",exports.linkItem="l18t6f3m",exports.linkItemHiddenBranding="lsn8o0d",exports.linkLabel="lsc0hr8",exports.linkSelected="lkwvsmx",exports.linkWeightBold="l1p7dxu8",exports.linkWeightRegular="l1kp5n19",exports.linkWeightSemibold="lqgrg2a",exports.mobileWrapper="mw9gug8",exports.wrapper="w1ndf2sj",exports.wrapperAlignLeft="w177nfye";
 //# sourceMappingURL=navbar-items.styles.js.map

package/cjs/navbar/navbar-items.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar-items.styles.js","sources":["../../../src/navbar/navbar-items.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, ComponentToken, Font, MediaQuery } from \"../theme\";\n\n// =============================================================================\n// WRAPPER\n// =============================================================================\n\nexport const wrapper = css`\n    display: flex;\n    list-style: none;\n    position: relative;\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: none;\n    }\n`;\n\nexport const wrapperAlignLeft = css`\n    margin-right: auto;\n`;\n\nexport const mobileWrapper = css`\n    display: none;\n    list-style: none;\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n    }\n`;\n\n// =============================================================================\n// LINK ITEMS\n// =============================================================================\nexport const linkItem = css`\n    display: flex;\n    margin: 0 1rem;\n    &:first-child {\n        margin-left: 0;\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n        padding: 0.125rem 0;\n        width: 100%;\n        margin-left: 0rem;\n    }\n`;\n\nexport const linkItemHiddenBranding = css`\n    // negative margin to preserve touch target size for link\n    &:first-child {\n        margin-left: -0.5rem;\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        &:first-child {\n            margin-left: 0rem;\n        }\n    }\n`;\n\nexport const link = css`\n    display: flex;\n    position: relative;\n    align-items: center;\n    text-align: center;\n    color: ${ComponentToken.Navbar[\"link-colour-text\"]};\n    height: 100%;\n\n    &:active,\n    &:hover,\n    &:focus {\n        color: ${ComponentToken.Navbar[\"link-colour-text-hover\"]};\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        width: 100%;\n        padding: 0.5rem 1rem;\n        text-align: left;\n        align-items: flex-start;\n    }\n`;\n\nexport const linkSelected = css`\n    &:active,\n    &:hover,\n    &:focus {\n        color: ${ComponentToken.Navbar[\"link-colour-text-selected-hover\"]};\n    }\n`;\n\nexport const linkWeightRegular = css`\n    ${Font[\"body-md-regular\"]}\n`;\n\nexport const linkWeightSemibold = css`\n    ${Font[\"body-md-semibold\"]}\n`;\n\nexport const linkWeightBold = css`\n    ${Font[\"body-md-bold\"]}\n`;\n\nexport const linkButton = css`\n    background: none;\n    border: 0;\n    padding: 0;\n    cursor: pointer;\n    text-align: left;\n    margin: 0;\n    box-shadow: none;\n    font: inherit;\n    color: inherit;\n`;\n\nexport const linkLabel = css`\n    flex: 1;\n    margin-top: 0.25rem;\n\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 3;\n    white-space: pre-wrap;\n`;\n\nexport const linkIndicator = css`\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 0.25rem;\n    background-color: ${Colour[\"border-selected\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        left: 0;\n        right: unset;\n        top: 0;\n        bottom: 0;\n        height: 100%;\n        width: 0.25rem;\n    }\n`;\n\nexport const linkIndicatorSelected = css`\n    &:hover {\n        background-color: ${Colour[\"border-selected-hover\"]};\n    }\n`;\n\nexport const linkIconContainer = css`\n    padding-left: 0.5rem;\n    margin-right: -0.5rem;\n`;\n\nexport const expandCollapseButton = css`\n    padding: 0.5rem;\n    transform: rotate(180deg);\n    transition: transform 300ms ease-in-out;\n    margin: auto 0.25rem auto 0;\n`;\n\nexport const expandCollapseButtonExpanded = css`\n    transform: rotate(0deg);\n`;\n\nexport const chevronIcon = css`\n    height: 1.25rem;\n    width: 1.25rem;\n    color: ${Colour.icon};\n\n    &:hover {\n        color: ${Colour[\"icon-hover\"]};\n    }\n`;\n\nexport const chevronIconSelected = css`\n    &:hover {\n        color: ${Colour[\"icon-selected-hover\"]};\n    }\n`;\n"],"names":[],"mappings":"mGAyKwB,uCAUQ,wCArBC,+CAOQ,wBArGxB,8BA0CM,qCA+CO,iCAxBJ,wCAkBQ,2BA/Gb,0CAec,4BAmEb,+BAhCG,iCAgBE,qCARG,sCAIC,gCA5EL,0BAdN,oCAUS"}
+{"version":3,"file":"navbar-items.styles.js","sources":["../../../src/navbar/navbar-items.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, ComponentToken, Font, MediaQuery } from \"../theme\";\n\n// =============================================================================\n// WRAPPER\n// =============================================================================\n\nexport const wrapper = css`\n    display: flex;\n    list-style: none;\n    position: relative;\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: none;\n    }\n`;\n\nexport const wrapperAlignLeft = css`\n    margin-right: auto;\n`;\n\nexport const mobileWrapper = css`\n    display: none;\n    list-style: none;\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n    }\n`;\n\n// =============================================================================\n// LINK ITEMS\n// =============================================================================\nexport const linkItem = css`\n    display: flex;\n    margin: 0 1rem;\n    &:first-child {\n        margin-left: 0;\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n        padding: 0.125rem 0;\n        width: 100%;\n        margin-left: 0rem;\n    }\n`;\n\nexport const linkItemHiddenBranding = css`\n    // negative margin to preserve touch target size for link\n    &:first-child {\n        margin-left: -0.5rem;\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        &:first-child {\n            margin-left: 0rem;\n        }\n    }\n`;\n\nexport const link = css`\n    display: flex;\n    position: relative;\n    align-items: center;\n    text-align: center;\n    color: ${ComponentToken.Navbar[\"link-colour-text\"]};\n    height: 100%;\n\n    &:active,\n    &:hover,\n    &:focus,\n    &:focus-within {\n        color: ${ComponentToken.Navbar[\"link-colour-text-hover\"]};\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        width: 100%;\n        padding: 0.5rem 1rem;\n        text-align: left;\n        align-items: flex-start;\n    }\n`;\n\nexport const linkSelected = css`\n    &:active,\n    &:hover,\n    &:focus {\n        color: ${ComponentToken.Navbar[\"link-colour-text-selected-hover\"]};\n    }\n`;\n\nexport const linkWeightRegular = css`\n    ${Font[\"body-md-regular\"]}\n`;\n\nexport const linkWeightSemibold = css`\n    ${Font[\"body-md-semibold\"]}\n`;\n\nexport const linkWeightBold = css`\n    ${Font[\"body-md-bold\"]}\n`;\n\nexport const linkButton = css`\n    background: none;\n    border: 0;\n    padding: 0;\n    cursor: pointer;\n    text-align: left;\n    margin: 0;\n    box-shadow: none;\n    font: inherit;\n    color: inherit;\n`;\n\nexport const linkLabel = css`\n    flex: 1;\n    margin-top: 0.25rem;\n\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 3;\n    white-space: pre-wrap;\n`;\n\nexport const linkIndicator = css`\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 0.25rem;\n    background-color: ${Colour[\"border-selected\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        left: 0;\n        right: unset;\n        top: 0;\n        bottom: 0;\n        height: 100%;\n        width: 0.25rem;\n    }\n`;\n\nexport const linkIndicatorSelected = css`\n    .${link}:active &,\n    .${link}:hover &,\n    .${link}:focus & {\n        background-color: ${Colour[\"border-selected-hover\"]};\n    }\n`;\n\nexport const linkIconContainer = css`\n    padding-left: 0.5rem;\n    margin-right: -0.5rem;\n`;\n\nexport const expandCollapseButton = css`\n    padding: 0.5rem;\n    transform: rotate(180deg);\n    transition: transform 300ms ease-in-out;\n    margin: auto 0.25rem auto 0;\n`;\n\nexport const expandCollapseButtonExpanded = css`\n    transform: rotate(0deg);\n`;\n\nexport const chevronIcon = css`\n    height: 1.25rem;\n    width: 1.25rem;\n    color: ${Colour.icon};\n\n    .${link}:active &,\n    .${link}:hover &,\n    .${link}:focus & {\n        color: ${Colour[\"icon-hover\"]};\n    }\n`;\n\nexport const chevronIconSelected = css`\n    .${link}:active &,\n    .${link}:hover &,\n    .${link}:focus & {\n        color: ${Colour[\"icon-selected-hover\"]};\n    }\n`;\n"],"names":[],"mappings":"oGA4KwB,uCAYQ,wCAvBC,+CAOQ,wBAxGxB,8BA2CM,qCAiDO,iCA1BJ,wCAkBQ,2BAhHb,0CAec,4BAoEb,+BAhCG,iCAgBE,qCARG,sCAIC,gCA7EL,0BAdN,oCAUS"}

package/cjs/navbar/{navbar-items.styles_i9cunu.css → navbar-items.styles_1i3ltot.css}

@@ -1,19 +1,19 @@
-.w1ndf2sj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;list-style:none;position:relative;}:where(body.fds-breakpoint-lg-max) .w1ndf2sj{display:none;}
+@layer fds{.w1ndf2sj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;list-style:none;position:relative;}:where(body.fds-breakpoint-lg-max) .w1ndf2sj{display:none;}
 .w177nfye{margin-right:auto;}
 .mw9gug8{display:none;list-style:none;}:where(body.fds-breakpoint-lg-max) .mw9gug8{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow:hidden;}
 .l18t6f3m{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 1rem;}.l18t6f3m:first-child{margin-left:0;}:where(body.fds-breakpoint-lg-max) .l18t6f3m{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding:0.125rem 0;width:100%;margin-left:0rem;}
 .lsn8o0d:first-child{margin-left:-0.5rem;}:where(body.fds-breakpoint-lg-max) .lsn8o0d:first-child{margin-left:0rem;}
-.l1o3p4yu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;color:var(--fds-navbar-link-colour-text);height:100%;}.l1o3p4yu:active,.l1o3p4yu:hover,.l1o3p4yu:focus{color:var(--fds-navbar-link-colour-text-hover);}:where(body.fds-breakpoint-lg-max) .l1o3p4yu{width:100%;padding:0.5rem 1rem;text-align:left;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
+.l1o3p4yu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;color:var(--fds-navbar-link-colour-text);height:100%;}.l1o3p4yu:active,.l1o3p4yu:hover,.l1o3p4yu:focus,.l1o3p4yu:focus-within{color:var(--fds-navbar-link-colour-text-hover);}:where(body.fds-breakpoint-lg-max) .l1o3p4yu{width:100%;padding:0.5rem 1rem;text-align:left;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
 .lkwvsmx:active,.lkwvsmx:hover,.lkwvsmx:focus{color:var(--fds-navbar-link-colour-text-selected-hover);}
-.l1kp5n19{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
-.lqgrg2a{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
-.l1p7dxu8{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
+.l1kp5n19{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
+.lqgrg2a{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
+.l1p7dxu8{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
 .l1xfqf3s{background:none;border:0;padding:0;cursor:pointer;text-align:left;margin:0;box-shadow:none;font:inherit;color:inherit;}
 .lsc0hr8{-webkit-flex:1;-ms-flex:1;flex:1;margin-top:0.25rem;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;white-space:pre-wrap;}
 .lnocj2s{position:absolute;bottom:0;left:0;right:0;height:0.25rem;background-color:var(--fds-colour-border-selected);}:where(body.fds-breakpoint-lg-max) .lnocj2s{left:0;right:unset;top:0;bottom:0;height:100%;width:0.25rem;}
-.l5qfat1:hover{background-color:var(--fds-colour-border-selected-hover);}
+.l1o3p4yu:active .l5qfat1,.l1o3p4yu:hover .l5qfat1,.l1o3p4yu:focus .l5qfat1{background-color:var(--fds-colour-border-selected-hover);}
 .l1p9u80z{padding-left:0.5rem;margin-right:-0.5rem;}
 .ej7h5do{padding:0.5rem;-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);-webkit-transition:-webkit-transform 300ms ease-in-out;transition:transform 300ms ease-in-out;margin:auto 0.25rem auto 0;}
 .e160mxwv{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
-.c1s8ur0k{height:1.25rem;width:1.25rem;color:var(--fds-colour-icon);}.c1s8ur0k:hover{color:var(--fds-colour-icon-hover);}
-.c178e7hk:hover{color:var(--fds-colour-icon-selected-hover);}
+.c1s8ur0k{height:1.25rem;width:1.25rem;color:var(--fds-colour-icon);}.l1o3p4yu:active .c1s8ur0k,.l1o3p4yu:hover .c1s8ur0k,.l1o3p4yu:focus .c1s8ur0k{color:var(--fds-colour-icon-hover);}
+.l1o3p4yu:active .c178e7hk,.l1o3p4yu:hover .c178e7hk,.l1o3p4yu:focus .c178e7hk{color:var(--fds-colour-icon-selected-hover);}}