@lifesg/react-design-system 4.0.0-alpha.12 → 4.0.0-alpha.13

package/cjs/local-nav/local-nav-menu/local-nav-menu.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("clsx"),a=require("react"),r=require("../../typography/index.js"),n=require("./local-nav-menu.styles.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=l(t);const d=l(a).default.forwardRef((({onNavItemSelect:t,items:a,selectedItemIndex:l,id:d,"data-testid":s,className:c,renderItem:o},u)=>{const m=s||"local-nav-menu";return e.jsx("ul",{ref:u,id:d,className:i.default(n.nav,c),"data-testid":m,children:a.map(((a,d)=>(({handleClick:t,isSelected:a,item:l,renderItem:d,index:s})=>{const{id:c,title:o}=l;return e.jsx("li",{id:c,className:i.default(n.navItem,a&&n.navItemSelected),children:e.jsx("div",{className:n.navItemContent,role:"link",onClick:t,onKeyDown:e=>((e,t)=>{const{key:a}=e;"Enter"!==a&&" "!==a||(e.preventDefault(),t(e))})(e,t),tabIndex:0,"aria-current":!!a||void 0,children:d?d(l,{selected:a}):e.jsx(r.Typography.BodyBL,{className:n.textLabel,weight:a?"semibold":"regular",children:o})})},s)})({handleClick:e=>t(e,a,d),isSelected:d===l,item:a,renderItem:o,index:d})))})}));exports.LocalNavMenu=d;
+"use strict";var e=require("react/jsx-runtime"),t=require("clsx"),n=require("react"),r=require("../../typography/index.js"),a=require("./local-nav-menu.styles.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=l(t);const i=l(n).default.forwardRef((({onNavItemSelect:t,items:n,selectedItemIndex:l,id:i,"data-testid":d,className:c,renderItem:o},u)=>{const m=d||"local-nav-menu";return e.jsx("ul",{ref:u,id:i,className:s.default(a.nav,c),"data-testid":m,children:n.map(((n,i)=>(({handleClick:t,isSelected:n,item:l,renderItem:i,index:d})=>{const{id:c,title:o,titleAddon:u}=l;return e.jsx("li",{id:c,className:s.default(a.navItem,n&&a.navItemSelected),children:e.jsx("div",{className:a.navItemContent,role:"link",onClick:t,onKeyDown:e=>((e,t)=>{const{key:n}=e;"Enter"!==n&&" "!==n||(e.preventDefault(),t(e))})(e,t),tabIndex:0,"aria-current":!!n||void 0,children:(()=>{if(i)return i(l,{selected:n});const t=e.jsx(r.Typography.BodyBL,{className:a.textLabel,weight:n?"semibold":"regular",children:o});return u?e.jsxs("span",{className:a.titleContainer,children:[u.left&&e.jsx("span",{className:a.leftAddon,children:u.left}),t,u.right&&e.jsx("span",{className:a.rightAddon,children:u.right})]}):t})()})},d)})({handleClick:e=>t(e,n,i),isSelected:i===l,item:n,renderItem:o,index:i})))})}));exports.LocalNavMenu=i;
 //# sourceMappingURL=local-nav-menu.js.map

package/cjs/local-nav/local-nav-menu/local-nav-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"local-nav-menu.js","sources":["../../../../src/local-nav/local-nav-menu/local-nav-menu.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport { Typography } from \"../../typography\";\nimport type { LocalNavMenuItemComponentProps } from \"../internal-types\";\nimport type { LocalNavMenuProps } from \"../types\";\nimport * as styles from \"./local-nav-menu.styles\";\n\nconst Component = (\n    {\n        onNavItemSelect,\n        items,\n        selectedItemIndex,\n        id,\n        \"data-testid\": dataTestId,\n        className,\n        renderItem,\n    }: LocalNavMenuProps,\n    ref: React.Ref<HTMLUListElement>\n): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const localNavMenuId = dataTestId || \"local-nav-menu\";\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // ============================================================================\n    const handleNavItemKeyDown = (\n        e: React.KeyboardEvent<HTMLElement>,\n        handleClick: (\n            e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>\n        ) => void\n    ) => {\n        const { key } = e;\n\n        if (key === \"Enter\" || key === \" \") {\n            e.preventDefault();\n            handleClick(e);\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderLocalNavItem = ({\n        handleClick,\n        isSelected,\n        item,\n        renderItem,\n        index,\n    }: LocalNavMenuItemComponentProps) => {\n        const { id, title } = item;\n\n        const renderTitle = () => {\n            if (renderItem) {\n                return renderItem(item, { selected: isSelected });\n            }\n            return (\n                <Typography.BodyBL\n                    className={styles.textLabel}\n                    weight={isSelected ? \"semibold\" : \"regular\"}\n                >\n                    {title}\n                </Typography.BodyBL>\n            );\n        };\n\n        return (\n            <li\n                id={id}\n                key={index}\n                className={clsx(\n                    styles.navItem,\n                    isSelected && styles.navItemSelected\n                )}\n            >\n                <div\n                    className={styles.navItemContent}\n                    role=\"link\"\n                    onClick={handleClick}\n                    onKeyDown={(e) => handleNavItemKeyDown(e, handleClick)}\n                    tabIndex={0}\n                    aria-current={isSelected ? true : undefined}\n                >\n                    {renderTitle()}\n                </div>\n            </li>\n        );\n    };\n    return (\n        <ul\n            ref={ref}\n            id={id}\n            className={clsx(styles.nav, className)}\n            data-testid={localNavMenuId}\n        >\n            {items.map((item, i) => {\n                const isSelected = i === selectedItemIndex;\n                return renderLocalNavItem({\n                    handleClick: (e) => onNavItemSelect(e, item, i),\n                    isSelected,\n                    item,\n                    renderItem,\n                    index: i,\n                });\n            })}\n        </ul>\n    );\n};\n\n// @catalog\n/**\n * A sidebar navigation list that highlights the currently selected section.\n *\n * Use `LocalNavMenu` for desktop in-page navigation where the list is always\n * visible.\n * @keywords in-page navigation, sections\n */\nexport const LocalNavMenu = React.forwardRef(Component);\n"],"names":["LocalNavMenu","React","forwardRef","onNavItemSelect","items","selectedItemIndex","id","dataTestId","className","renderItem","ref","localNavMenuId","_jsx","clsx","styles.nav","map","item","i","handleClick","isSelected","index","title","styles.navItem","styles.navItemSelected","children","styles.navItemContent","role","onClick","onKeyDown","e","key","preventDefault","handleNavItemKeyDown","tabIndex","undefined","selected","Typography","BodyBL","styles.textLabel","weight","renderLocalNavItem"],"mappings":"uPAQA,MAgHaA,OAAeC,QAAMC,YAhHhB,EAEVC,kBACAC,QACAC,oBACAC,KACA,cAAeC,EACfC,YACAC,cAEJC,KAKA,MAAMC,EAAiBJ,GAAc,iBAoErC,OACIK,EAAAA,IAAA,KAAA,CACIF,IAAKA,EACLJ,GAAIA,EACJE,UAAWK,EAAAA,QAAKC,EAAAA,IAAYN,GAAU,cACzBG,WAEZP,EAAMW,KAAI,CAACC,EAAMC,IApDC,GACvBC,cACAC,aACAH,OACAP,aACAW,YAEA,MAAMd,GAAEA,EAAEe,MAAEA,GAAUL,EAgBtB,OACIJ,EAAAA,IAAA,KAAA,CACIN,GAAIA,EAEJE,UAAWK,EAAAA,QACPS,UACAH,GAAcI,EAAAA,iBACjBC,SAEDZ,MAAA,MAAA,CACIJ,UAAWiB,EAAAA,eACXC,KAAK,OACLC,QAAST,EACTU,UAAYC,GAtDC,EACzBA,EACAX,KAIA,MAAMY,IAAEA,GAAQD,EAEJ,UAARC,GAA2B,MAARA,IACnBD,EAAEE,iBACFb,EAAYW,GAChB,EA2C8BG,CAAqBH,EAAGX,GAC1Ce,SAAU,EAAC,iBACGd,QAAoBe,EAASV,SA5B/Cf,EACOA,EAAWO,EAAM,CAAEmB,SAAUhB,IAGpCP,EAAAA,IAACwB,EAAAA,WAAWC,OAAM,CACd7B,UAAW8B,EAAAA,UACXC,OAAQpB,EAAa,WAAa,UAASK,SAE1CH,OAQAD,EAgBJ,EAYMoB,CAAmB,CACtBtB,YAAcW,GAAM1B,EAAgB0B,EAAGb,EAAMC,GAC7CE,WAHeF,IAAMZ,EAIrBW,OACAP,aACAW,MAAOH,OAGd"}
+{"version":3,"file":"local-nav-menu.js","sources":["../../../../src/local-nav/local-nav-menu/local-nav-menu.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport { Typography } from \"../../typography\";\nimport type { LocalNavMenuItemComponentProps } from \"../internal-types\";\nimport type { LocalNavMenuProps } from \"../types\";\nimport * as styles from \"./local-nav-menu.styles\";\n\nconst Component = (\n    {\n        onNavItemSelect,\n        items,\n        selectedItemIndex,\n        id,\n        \"data-testid\": dataTestId,\n        className,\n        renderItem,\n    }: LocalNavMenuProps,\n    ref: React.Ref<HTMLUListElement>\n): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const localNavMenuId = dataTestId || \"local-nav-menu\";\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // ============================================================================\n    const handleNavItemKeyDown = (\n        e: React.KeyboardEvent<HTMLElement>,\n        handleClick: (\n            e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>\n        ) => void\n    ) => {\n        const { key } = e;\n\n        if (key === \"Enter\" || key === \" \") {\n            e.preventDefault();\n            handleClick(e);\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderLocalNavItem = ({\n        handleClick,\n        isSelected,\n        item,\n        renderItem,\n        index,\n    }: LocalNavMenuItemComponentProps) => {\n        const { id, title, titleAddon } = item;\n\n        const renderTitle = () => {\n            if (renderItem) {\n                return renderItem(item, { selected: isSelected });\n            }\n            const label = (\n                <Typography.BodyBL\n                    className={styles.textLabel}\n                    weight={isSelected ? \"semibold\" : \"regular\"}\n                >\n                    {title}\n                </Typography.BodyBL>\n            );\n            if (!titleAddon) {\n                return label;\n            }\n            return (\n                <span className={styles.titleContainer}>\n                    {titleAddon.left && (\n                        <span className={styles.leftAddon}>\n                            {titleAddon.left}\n                        </span>\n                    )}\n                    {label}\n                    {titleAddon.right && (\n                        <span className={styles.rightAddon}>\n                            {titleAddon.right}\n                        </span>\n                    )}\n                </span>\n            );\n        };\n\n        return (\n            <li\n                id={id}\n                key={index}\n                className={clsx(\n                    styles.navItem,\n                    isSelected && styles.navItemSelected\n                )}\n            >\n                <div\n                    className={styles.navItemContent}\n                    role=\"link\"\n                    onClick={handleClick}\n                    onKeyDown={(e) => handleNavItemKeyDown(e, handleClick)}\n                    tabIndex={0}\n                    aria-current={isSelected ? true : undefined}\n                >\n                    {renderTitle()}\n                </div>\n            </li>\n        );\n    };\n    return (\n        <ul\n            ref={ref}\n            id={id}\n            className={clsx(styles.nav, className)}\n            data-testid={localNavMenuId}\n        >\n            {items.map((item, i) => {\n                const isSelected = i === selectedItemIndex;\n                return renderLocalNavItem({\n                    handleClick: (e) => onNavItemSelect(e, item, i),\n                    isSelected,\n                    item,\n                    renderItem,\n                    index: i,\n                });\n            })}\n        </ul>\n    );\n};\n\n// @catalog\n/**\n * A sidebar navigation list that highlights the currently selected section.\n *\n * Use `LocalNavMenu` for desktop in-page navigation where the list is always\n * visible.\n * @keywords in-page navigation, sections\n */\nexport const LocalNavMenu = React.forwardRef(Component);\n"],"names":["LocalNavMenu","React","forwardRef","onNavItemSelect","items","selectedItemIndex","id","dataTestId","className","renderItem","ref","localNavMenuId","_jsx","clsx","styles.nav","map","item","i","handleClick","isSelected","index","title","titleAddon","styles.navItem","styles.navItemSelected","children","styles.navItemContent","role","onClick","onKeyDown","e","key","preventDefault","handleNavItemKeyDown","tabIndex","undefined","selected","label","Typography","BodyBL","styles.textLabel","weight","_jsxs","styles.titleContainer","left","styles.leftAddon","right","styles.rightAddon","renderTitle","renderLocalNavItem"],"mappings":"uPAQA,MAkIaA,OAAeC,QAAMC,YAlIhB,EAEVC,kBACAC,QACAC,oBACAC,KACA,cAAeC,EACfC,YACAC,cAEJC,KAKA,MAAMC,EAAiBJ,GAAc,iBAsFrC,OACIK,EAAAA,IAAA,KAAA,CACIF,IAAKA,EACLJ,GAAIA,EACJE,UAAWK,EAAAA,QAAKC,EAAAA,IAAYN,GAAU,cACzBG,WAEZP,EAAMW,KAAI,CAACC,EAAMC,IAtEC,GACvBC,cACAC,aACAH,OACAP,aACAW,YAEA,MAAMd,GAAEA,EAAEe,MAAEA,EAAKC,WAAEA,GAAeN,EAkClC,OACIJ,EAAAA,IAAA,KAAA,CACIN,GAAIA,EAEJE,UAAWK,EAAAA,QACPU,UACAJ,GAAcK,EAAAA,iBACjBC,SAEDb,MAAA,MAAA,CACIJ,UAAWkB,EAAAA,eACXC,KAAK,OACLC,QAASV,EACTW,UAAYC,GAxEC,EACzBA,EACAZ,KAIA,MAAMa,IAAEA,GAAQD,EAEJ,UAARC,GAA2B,MAARA,IACnBD,EAAEE,iBACFd,EAAYY,GAChB,EA6D8BG,CAAqBH,EAAGZ,GAC1CgB,SAAU,EAAC,iBACGf,QAAoBgB,EAASV,SA/CnC,MAChB,GAAIhB,EACA,OAAOA,EAAWO,EAAM,CAAEoB,SAAUjB,IAExC,MAAMkB,EACFzB,EAAAA,IAAC0B,EAAAA,WAAWC,OAAM,CACd/B,UAAWgC,EAAAA,UACXC,OAAQtB,EAAa,WAAa,UAASM,SAE1CJ,IAGT,OAAKC,EAIDoB,EAAAA,aAAMlC,UAAWmC,EAAAA,yBACZrB,EAAWsB,MACRhC,EAAAA,YAAMJ,UAAWqC,EAAAA,UAAgBpB,SAC5BH,EAAWsB,OAGnBP,EACAf,EAAWwB,OACRlC,EAAAA,IAAA,OAAA,CAAMJ,UAAWuC,EAAAA,oBACZzB,EAAWwB,WAZjBT,CAeA,EAqBFW,MAdA5B,EAgBJ,EAYM6B,CAAmB,CACtB/B,YAAcY,GAAM3B,EAAgB2B,EAAGd,EAAMC,GAC7CE,WAHeF,IAAMZ,EAIrBW,OACAP,aACAW,MAAOH,OAGd"}

package/cjs/local-nav/local-nav-menu/local-nav-menu.styles.js

@@ -1,2 +1,2 @@
-"use strict";require("./local-nav-menu.styles_pq19dh.css");exports.nav="nflnesd",exports.navItem="n1ocymwf",exports.navItemContent="n8uzvfa",exports.navItemSelected="naf0oif",exports.textLabel="tun9y1j";
+"use strict";require("./local-nav-menu.styles_67fcyc.css");exports.leftAddon="laf0oif",exports.nav="nflnesd",exports.navItem="n5rg3yw",exports.navItemContent="n1qylgc6",exports.navItemSelected="nduzi41",exports.rightAddon="r8uzvfa",exports.textLabel="tun9y1j",exports.titleContainer="t1ocymwf";
 //# sourceMappingURL=local-nav-menu.styles.js.map

package/cjs/local-nav/local-nav-menu/local-nav-menu.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"local-nav-menu.styles.js","sources":["../../../../src/local-nav/local-nav-menu/local-nav-menu.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Radius, Spacing } from \"../../theme\";\n\nexport const nav = css`\n    list-style-type: none;\n    padding: 0;\n    margin-top: 0;\n`;\n\nexport const textLabel = css`\n    margin: 0;\n`;\n\nexport const navItem = css`\n    display: block;\n    position: relative;\n    margin: 0;\n    padding: 0;\n    cursor: pointer;\n\n    &::before {\n        content: \"\";\n        position: absolute;\n        left: 0;\n        width: 4px;\n        height: 100%;\n        top: 0;\n        background-color: ${Colour[\"bg-primary-subtler\"]};\n        transition: all 250ms linear;\n    }\n\n    &:hover,\n    &:focus-within {\n        background-color: ${Colour[\"bg-hover-subtle\"]};\n    }\n`;\n\nexport const navItemSelected = css`\n    &::before {\n        background-color: ${Colour[\"bg-primary\"]};\n    }\n`;\n\nexport const navItemContent = css`\n    display: block;\n    padding: ${Spacing[\"spacing-16\"]};\n    padding-left: ${Spacing[\"spacing-20\"]};\n\n    &:focus-visible {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 2px;\n        border-radius: ${Radius[\"sm\"]};\n    }\n`;\n"],"names":[],"mappings":"+GAIgB,0BAUI,kCA8BO,kCANC,4BA5BN"}
+{"version":3,"file":"local-nav-menu.styles.js","sources":["../../../../src/local-nav/local-nav-menu/local-nav-menu.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Radius, Spacing } from \"../../theme\";\n\nexport const nav = css`\n    list-style-type: none;\n    padding: 0;\n    margin-top: 0;\n`;\n\nexport const textLabel = css`\n    margin: 0;\n`;\n\nexport const titleContainer = css`\n    display: flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-8\"]};\n    width: 100%;\n`;\n\n/* Keeps the left addon aligned with the first line when the title wraps. */\nexport const leftAddon = css`\n    display: inline-flex;\n    align-items: center;\n    align-self: flex-start;\n    min-height: ${Font.Spec[\"body-lh-baseline\"]};\n`;\n\n/* Flushed right; stays vertically centred against the (possibly wrapped) title. */\nexport const rightAddon = css`\n    display: inline-flex;\n    align-items: center;\n    margin-left: auto;\n`;\n\nexport const navItem = css`\n    display: block;\n    position: relative;\n    margin: 0;\n    padding: 0;\n    cursor: pointer;\n\n    &::before {\n        content: \"\";\n        position: absolute;\n        left: 0;\n        width: 4px;\n        height: 100%;\n        top: 0;\n        background-color: ${Colour[\"bg-primary-subtler\"]};\n        transition: all 250ms linear;\n    }\n\n    &:hover,\n    &:focus-within {\n        background-color: ${Colour[\"bg-hover-subtle\"]};\n    }\n`;\n\nexport const navItemSelected = css`\n    &::before {\n        background-color: ${Colour[\"bg-primary\"]};\n    }\n`;\n\nexport const navItemContent = css`\n    display: block;\n    padding: ${Spacing[\"spacing-16\"]};\n    padding-left: ${Spacing[\"spacing-20\"]};\n\n    &:focus-visible {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 2px;\n        border-radius: ${Radius[\"sm\"]};\n    }\n`;\n"],"names":[],"mappings":"qHAsBsB,sBAlBN,0BAgCI,iCA8BO,mCANC,6BA9BL,4BApBD,iCAIK"}

package/cjs/local-nav/local-nav-menu/local-nav-menu.styles_67fcyc.css

@@ -0,0 +1,8 @@
+@layer fds{.nflnesd{list-style-type:none;padding:0;margin-top:0;}
+.tun9y1j{margin:0;}
+.t1ocymwf{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;gap:var(--fds-spacing-8);width:100%;}
+.laf0oif{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;min-height:var(--fds-font-body-lh-baseline);}
+.r8uzvfa{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:auto;}
+.n5rg3yw{display:block;position:relative;margin:0;padding:0;cursor:pointer;}.n5rg3yw::before{content:"";position:absolute;left:0;width:4px;height:100%;top:0;background-color:var(--fds-colour-bg-primary-subtler);-webkit-transition:all 250ms linear;transition:all 250ms linear;}.n5rg3yw:hover,.n5rg3yw:focus-within{background-color:var(--fds-colour-bg-hover-subtle);}
+.nduzi41::before{background-color:var(--fds-colour-bg-primary);}
+.n1qylgc6{display:block;padding:var(--fds-spacing-16);padding-left:var(--fds-spacing-20);}.n1qylgc6:focus-visible{outline:2px solid var(--fds-colour-focus-ring);outline-offset:2px;border-radius:var(--fds-radius-sm);}}

package/cjs/menu/menu-content.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("clsx"),n=require("react");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 s=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var i=require("./menu-content.styles.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=o(r);const a=r=>{var{children:o,className:a,"data-testid":l="menu-content",overflow:d,maxHeight:c}=r,m=e.__rest(r,["children","className","data-testid","overflow","maxHeight"]);const h=n.useRef(null);s.useApplyStyle(h,{[i.tokens.panel.maxHeight]:void 0!==c?`${c}px`:null,[i.tokens.panel.overflow]:d||null});return t.jsx("div",Object.assign({ref:h,"data-testid":l,tabIndex:-1,onKeyDown:e=>{var t;const r="ArrowDown"===e.key||"ArrowRight"===e.key,n="ArrowUp"===e.key||"ArrowLeft"===e.key;if(!r&&!n)return;const s=(e=>Array.from(e.querySelectorAll('a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])')).filter((e=>!e.hasAttribute("disabled"))))(e.currentTarget);if(!s.length)return;const i=document.activeElement,o=i?s.indexOf(i):-1;e.preventDefault();const u=r?1:-1;null===(t=s[-1===o?r?0:s.length-1:(o+u+s.length)%s.length])||void 0===t||t.focus()},className:u.default(i.panel,a)},m,{children:o}))};a.displayName="Menu.Content",exports.MenuContent=a;
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("clsx"),n=require("react");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 s=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var i=require("./menu-content.styles.js"),o=require("./menu-section.styles.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=l(r);const a=r=>{var{children:l,className:a,"data-testid":d="menu-content",overflow:c,maxHeight:m}=r,h=e.__rest(r,["children","className","data-testid","overflow","maxHeight"]);const f=n.useRef(null),p=n.useMemo((()=>{const e=n.Children.toArray(l).filter((e=>n.isValidElement(e)&&!!e.props.columns)).reduce(((e,t)=>{var r;return Math.max(e,null!==(r=t.props.columns)&&void 0!==r?r:0)}),0);if(e)return e*o.GRID_COLUMN_WIDTH_PX+(e-1)*o.GRID_COLUMN_GAP_PX+2}),[l]);s.useApplyStyle(f,{[i.tokens.panel.maxHeight]:void 0!==m?`${m}px`:null,[i.tokens.panel.maxWidth]:void 0!==p?`${p}px`:null,[i.tokens.panel.overflow]:c||null});return t.jsx("div",Object.assign({ref:f,"data-testid":d,tabIndex:-1,onKeyDown:e=>{var t;const r="ArrowDown"===e.key||"ArrowRight"===e.key,n="ArrowUp"===e.key||"ArrowLeft"===e.key;if(!r&&!n)return;const s=(e=>Array.from(e.querySelectorAll('a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])')).filter((e=>!e.hasAttribute("disabled"))))(e.currentTarget);if(!s.length)return;const i=document.activeElement,o=i?s.indexOf(i):-1;e.preventDefault();const l=r?1:-1;null===(t=s[-1===o?r?0:s.length-1:(o+l+s.length)%s.length])||void 0===t||t.focus()},className:u.default(i.panel,a)},h,{children:l}))};a.displayName="Menu.Content",exports.MenuContent=a;
 //# sourceMappingURL=menu-content.js.map

package/cjs/menu/menu-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-content.js","sources":["../../../src/menu/menu-content.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { useRef } from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport * as styles from \"./menu-content.styles\";\nimport type { MenuContentProps } from \"./types\";\n\n// =============================================================================\n// HELPERS\n// =============================================================================\nconst getFocusables = (container: HTMLElement) => {\n    return Array.from(\n        container.querySelectorAll<HTMLElement>(\n            'a[href], button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])'\n        )\n    ).filter((el) => !el.hasAttribute(\"disabled\"));\n};\n\nexport const MenuContent = ({\n    children,\n    className,\n    \"data-testid\": testId = \"menu-content\",\n    overflow,\n    maxHeight,\n    ...otherProps\n}: MenuContentProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const panelRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(panelRef, {\n        [styles.tokens.panel.maxHeight]:\n            maxHeight !== undefined ? `${maxHeight}px` : null,\n        [styles.tokens.panel.overflow]: overflow || null,\n    });\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n        const isNextKey = e.key === \"ArrowDown\" || e.key === \"ArrowRight\";\n        const isPrevKey = e.key === \"ArrowUp\" || e.key === \"ArrowLeft\";\n\n        if (!isNextKey && !isPrevKey) return;\n\n        const container = e.currentTarget as HTMLElement;\n        const focusables = getFocusables(container);\n        if (!focusables.length) return;\n\n        const active = document.activeElement as HTMLElement | null;\n        const idx = active ? focusables.indexOf(active) : -1;\n\n        e.preventDefault();\n\n        const delta = isNextKey ? 1 : -1;\n\n        const nextIndex =\n            idx === -1\n                ? isNextKey\n                    ? 0\n                    : focusables.length - 1\n                : (idx + delta + focusables.length) % focusables.length;\n\n        focusables[nextIndex]?.focus();\n    };\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <div\n            ref={panelRef}\n            data-testid={testId}\n            tabIndex={-1}\n            onKeyDown={handleKeyDown}\n            className={clsx(styles.panel, className)}\n            {...otherProps}\n        >\n            {children}\n        </div>\n    );\n};\n\nMenuContent.displayName = \"Menu.Content\";\n"],"names":["MenuContent","_a","children","className","testId","overflow","maxHeight","otherProps","__rest","panelRef","useRef","useApplyStyle","styles.tokens","panel","undefined","_jsx","Object","assign","ref","tabIndex","onKeyDown","e","isNextKey","key","isPrevKey","focusables","container","Array","from","querySelectorAll","filter","el","hasAttribute","getFocusables","currentTarget","length","active","document","activeElement","idx","indexOf","preventDefault","delta","focus","clsx","styles.panel","displayName"],"mappings":"ukBAWA,MAQaA,EAAeC,IAAA,IAAAC,SACxBA,EAAQC,UACRA,EACA,cAAeC,EAAS,eAAcC,SACtCA,EAAQC,UACRA,GAASL,EACNM,EAAUC,EAAAA,OAAAP,EANW,+DAWxB,MAAMQ,EAAWC,EAAAA,OAAuB,MAExCC,EAAAA,cAAcF,EAAU,CACpB,CAACG,EAAAA,OAAcC,MAAMP,gBACHQ,IAAdR,EAA0B,GAAGA,MAAgB,KACjD,CAACM,SAAcC,MAAMR,UAAWA,GAAY,OAkChD,OACIU,MAAA,MAAAC,OAAAC,OAAA,CACIC,IAAKT,EAAQ,cACAL,EACbe,UAAU,EACVC,UAlCeC,UACnB,MAAMC,EAAsB,cAAVD,EAAEE,KAAiC,eAAVF,EAAEE,IACvCC,EAAsB,YAAVH,EAAEE,KAA+B,cAAVF,EAAEE,IAE3C,IAAKD,IAAcE,EAAW,OAE9B,MACMC,EApCQ,CAACC,GACZC,MAAMC,KACTF,EAAUG,iBACN,qEAENC,QAAQC,IAAQA,EAAGC,aAAa,cA+BXC,CADDZ,EAAEa,eAEpB,IAAKT,EAAWU,OAAQ,OAExB,MAAMC,EAASC,SAASC,cAClBC,EAAMH,EAASX,EAAWe,QAAQJ,IAAU,EAElDf,EAAEoB,iBAEF,MAAMC,EAAQpB,EAAY,GAAI,EAST,QAArBrB,EAAAwB,GANY,IAARc,EACMjB,EACI,EACAG,EAAWU,OAAS,GACvBI,EAAMG,EAAQjB,EAAWU,QAAUV,EAAWU,eAEpC,IAAAlC,GAAAA,EAAE0C,OAAO,EAW1BxC,UAAWyC,UAAKC,EAAAA,MAAc1C,IAC1BI,EAAU,CAAAL,SAEbA,IACC,EAIdF,EAAY8C,YAAc"}
+{"version":3,"file":"menu-content.js","sources":["../../../src/menu/menu-content.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport {\n    Children,\n    isValidElement,\n    type ReactElement,\n    useMemo,\n    useRef,\n} from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport * as styles from \"./menu-content.styles\";\nimport * as sectionStyles from \"./menu-section.styles\";\nimport type { MenuContentProps, MenuSectionProps } from \"./types\";\n\n// =============================================================================\n// HELPERS\n// =============================================================================\nconst getFocusables = (container: HTMLElement) => {\n    return Array.from(\n        container.querySelectorAll<HTMLElement>(\n            'a[href], button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])'\n        )\n    ).filter((el) => !el.hasAttribute(\"disabled\"));\n};\n\nexport const MenuContent = ({\n    children,\n    className,\n    \"data-testid\": testId = \"menu-content\",\n    overflow,\n    maxHeight,\n    ...otherProps\n}: MenuContentProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const panelRef = useRef<HTMLDivElement>(null);\n\n    const gridMaxWidth = useMemo(() => {\n        const maxColumns = Children.toArray(children)\n            .filter(\n                (child): child is ReactElement<MenuSectionProps> =>\n                    isValidElement(child) &&\n                    !!(child.props as MenuSectionProps).columns\n            )\n            .reduce((max, child) => Math.max(max, child.props.columns ?? 0), 0);\n        if (!maxColumns) return undefined;\n        return (\n            maxColumns * sectionStyles.GRID_COLUMN_WIDTH_PX +\n            (maxColumns - 1) * sectionStyles.GRID_COLUMN_GAP_PX +\n            2 // 1px border × 2 sides\n        );\n    }, [children]);\n\n    useApplyStyle(panelRef, {\n        [styles.tokens.panel.maxHeight]:\n            maxHeight !== undefined ? `${maxHeight}px` : null,\n        [styles.tokens.panel.maxWidth]:\n            gridMaxWidth !== undefined ? `${gridMaxWidth}px` : null,\n        [styles.tokens.panel.overflow]: overflow || null,\n    });\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n        const isNextKey = e.key === \"ArrowDown\" || e.key === \"ArrowRight\";\n        const isPrevKey = e.key === \"ArrowUp\" || e.key === \"ArrowLeft\";\n\n        if (!isNextKey && !isPrevKey) return;\n\n        const container = e.currentTarget as HTMLElement;\n        const focusables = getFocusables(container);\n        if (!focusables.length) return;\n\n        const active = document.activeElement as HTMLElement | null;\n        const idx = active ? focusables.indexOf(active) : -1;\n\n        e.preventDefault();\n\n        const delta = isNextKey ? 1 : -1;\n\n        const nextIndex =\n            idx === -1\n                ? isNextKey\n                    ? 0\n                    : focusables.length - 1\n                : (idx + delta + focusables.length) % focusables.length;\n\n        focusables[nextIndex]?.focus();\n    };\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <div\n            ref={panelRef}\n            data-testid={testId}\n            tabIndex={-1}\n            onKeyDown={handleKeyDown}\n            className={clsx(styles.panel, className)}\n            {...otherProps}\n        >\n            {children}\n        </div>\n    );\n};\n\nMenuContent.displayName = \"Menu.Content\";\n"],"names":["MenuContent","_a","children","className","testId","overflow","maxHeight","otherProps","__rest","panelRef","useRef","gridMaxWidth","useMemo","maxColumns","Children","toArray","filter","child","isValidElement","props","columns","reduce","max","Math","sectionStyles.GRID_COLUMN_WIDTH_PX","sectionStyles.GRID_COLUMN_GAP_PX","useApplyStyle","styles.tokens","panel","undefined","maxWidth","_jsx","Object","assign","ref","tabIndex","onKeyDown","e","isNextKey","key","isPrevKey","focusables","container","Array","from","querySelectorAll","el","hasAttribute","getFocusables","currentTarget","length","active","document","activeElement","idx","indexOf","preventDefault","delta","focus","clsx","styles.panel","displayName"],"mappings":"6mBAkBA,MAQaA,EAAeC,IAAA,IAAAC,SACxBA,EAAQC,UACRA,EACA,cAAeC,EAAS,eAAcC,SACtCA,EAAQC,UACRA,GAASL,EACNM,EAAUC,EAAAA,OAAAP,EANW,+DAWxB,MAAMQ,EAAWC,EAAAA,OAAuB,MAElCC,EAAeC,EAAAA,SAAQ,KACzB,MAAMC,EAAaC,WAASC,QAAQb,GAC/Bc,QACIC,GACGC,EAAAA,eAAeD,MACZA,EAAME,MAA2BC,UAE3CC,QAAO,CAACC,EAAKL,KAAS,IAAAhB,EAAC,OAAAsB,KAAKD,IAAIA,EAAwB,QAAnBrB,EAAAgB,EAAME,MAAMC,eAAO,IAAAnB,EAAAA,EAAI,EAAE,GAAE,GACrE,GAAKY,EACL,OACIA,EAAaW,EAAAA,sBACZX,EAAa,GAAKY,EAAAA,mBACnB,IAEL,CAACvB,IAEJwB,EAAAA,cAAcjB,EAAU,CACpB,CAACkB,EAAAA,OAAcC,MAAMtB,gBACHuB,IAAdvB,EAA0B,GAAGA,MAAgB,KACjD,CAACqB,EAAAA,OAAcC,MAAME,eACAD,IAAjBlB,EAA6B,GAAGA,MAAmB,KACvD,CAACgB,SAAcC,MAAMvB,UAAWA,GAAY,OAkChD,OACI0B,MAAA,MAAAC,OAAAC,OAAA,CACIC,IAAKzB,EAAQ,cACAL,EACb+B,UAAU,EACVC,UAlCeC,UACnB,MAAMC,EAAsB,cAAVD,EAAEE,KAAiC,eAAVF,EAAEE,IACvCC,EAAsB,YAAVH,EAAEE,KAA+B,cAAVF,EAAEE,IAE3C,IAAKD,IAAcE,EAAW,OAE9B,MACMC,EAtDQ,CAACC,GACZC,MAAMC,KACTF,EAAUG,iBACN,qEAEN7B,QAAQ8B,IAAQA,EAAGC,aAAa,cAiDXC,CADDX,EAAEY,eAEpB,IAAKR,EAAWS,OAAQ,OAExB,MAAMC,EAASC,SAASC,cAClBC,EAAMH,EAASV,EAAWc,QAAQJ,IAAU,EAElDd,EAAEmB,iBAEF,MAAMC,EAAQnB,EAAY,GAAI,EAST,QAArBrC,EAAAwC,GANY,IAARa,EACMhB,EACI,EACAG,EAAWS,OAAS,GACvBI,EAAMG,EAAQhB,EAAWS,QAAUT,EAAWS,eAEpC,IAAAjD,GAAAA,EAAEyD,OAAO,EAW1BvD,UAAWwD,UAAKC,EAAAA,MAAczD,IAC1BI,EAAU,CAAAL,SAEbA,IACC,EAIdF,EAAY6D,YAAc"}

package/cjs/menu/menu-content.styles.js

@@ -1,2 +1,2 @@
-"use strict";require("./menu-content.styles_p7ijll.css");exports.panel="pmssexq",exports.tokens={panel:{maxHeight:"--fds-internal-menu-panel-maxHeight",overflow:"--fds-internal-menu-panel-overflow"}};
+"use strict";require("./menu-content.styles_1r8oxtk.css");exports.panel="pmssexq",exports.tokens={panel:{maxHeight:"--fds-internal-menu-panel-maxHeight",maxWidth:"--fds-internal-menu-panel-maxWidth",overflow:"--fds-internal-menu-panel-overflow"}};
 //# sourceMappingURL=menu-content.styles.js.map

package/cjs/menu/menu-content.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-content.styles.js","sources":["../../../src/menu/menu-content.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Border,\n    Breakpoint,\n    Colour,\n    MediaQuery,\n    Radius,\n    Shadow,\n} from \"../theme/tokens\";\n\nexport const tokens = {\n    panel: {\n        availableWidth: \"--fds-internal-menu-panel-availableWidth\",\n        maxHeight: \"--fds-internal-menu-panel-maxHeight\",\n        overflow: \"--fds-internal-menu-panel-overflow\",\n        xSpacing: \"--fds-internal-menu-panel-xSpacing\",\n    },\n} as const;\n\nexport const panel = css`\n    border-radius: ${Radius[\"md\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    background: ${Colour[\"bg\"]};\n    box-shadow: ${Shadow[\"md-subtle\"]};\n\n    ${tokens.panel.maxHeight}: initial;\n    ${tokens.panel.overflow}: initial;\n    ${tokens.panel.xSpacing}: 0px;\n    ${tokens.panel.availableWidth}: calc(100vw - var(${tokens.panel\n        .xSpacing}) * 2);\n\n    ${MediaQuery.MaxWidth.sm} {\n        ${tokens.panel.xSpacing}: ${Breakpoint[\"sm-margin\"]};\n    }\n\n    ${MediaQuery.MaxWidth.xs} {\n        ${tokens.panel.xSpacing}: ${Breakpoint[\"xs-margin\"]};\n    }\n\n    ${MediaQuery.MaxWidth.xxs} {\n        ${tokens.panel.xSpacing}: ${Breakpoint[\"xxs-margin\"]};\n    }\n\n    min-width: min(15rem, var(${tokens.panel.availableWidth}));\n    max-width: min(24rem, var(${tokens.panel.availableWidth}));\n    max-height: var(${tokens.panel.maxHeight});\n    overflow-y: var(${tokens.panel.overflow});\n\n    &:focus {\n        outline: none;\n    }\n\n    &::-webkit-scrollbar {\n        width: 14px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: ${Colour[\"bg-inverse-subtlest\"]};\n        border: 5px solid transparent;\n        border-radius: ${Radius[\"full\"]};\n        background-clip: padding-box;\n    }\n`;\n"],"names":["panel","maxHeight","overflow"],"mappings":"2FAoBkB,yBATI,CAClBA,MAAO,CAEHC,UAAW,sCACXC,SAAU"}
+{"version":3,"file":"menu-content.styles.js","sources":["../../../src/menu/menu-content.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { scrollbarCss } from \"../shared/styles\";\nimport {\n    Border,\n    Breakpoint,\n    Colour,\n    MediaQuery,\n    Radius,\n    Shadow,\n} from \"../theme/tokens\";\n\nexport const tokens = {\n    panel: {\n        availableWidth: \"--fds-internal-menu-panel-availableWidth\",\n        maxHeight: \"--fds-internal-menu-panel-maxHeight\",\n        maxWidth: \"--fds-internal-menu-panel-maxWidth\",\n        overflow: \"--fds-internal-menu-panel-overflow\",\n        xSpacing: \"--fds-internal-menu-panel-xSpacing\",\n    },\n} as const;\n\nexport const panel = css`\n    border-radius: ${Radius[\"md\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    background: ${Colour[\"bg\"]};\n    box-shadow: ${Shadow[\"md-subtle\"]};\n\n    ${tokens.panel.maxHeight}: initial;\n    ${tokens.panel.maxWidth}: initial;\n    ${tokens.panel.overflow}: initial;\n    ${tokens.panel.xSpacing}: 0px;\n    ${tokens.panel.availableWidth}: calc(100vw - var(${tokens.panel\n        .xSpacing}) * 2);\n\n    ${MediaQuery.MaxWidth.sm} {\n        ${tokens.panel.xSpacing}: ${Breakpoint[\"sm-margin\"]};\n    }\n\n    ${MediaQuery.MaxWidth.xs} {\n        ${tokens.panel.xSpacing}: ${Breakpoint[\"xs-margin\"]};\n    }\n\n    ${MediaQuery.MaxWidth.xxs} {\n        ${tokens.panel.xSpacing}: ${Breakpoint[\"xxs-margin\"]};\n    }\n\n    min-width: min(15rem, var(${tokens.panel.availableWidth}));\n    max-width: min(\n        var(${tokens.panel.maxWidth}, 24rem),\n        var(${tokens.panel.availableWidth})\n    );\n    max-height: var(${tokens.panel.maxHeight});\n    overflow-y: var(${tokens.panel.overflow});\n\n    &:focus {\n        outline: none;\n    }\n\n    ${scrollbarCss(\"vertical\")}\n`;\n"],"names":["panel","maxHeight","maxWidth","overflow"],"mappings":"4FAsBkB,yBAVI,CAClBA,MAAO,CAEHC,UAAW,sCACXC,SAAU,qCACVC,SAAU"}

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

@@ -0,0 +1,5 @@
+@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-maxWidth: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(
+        var(--fds-internal-menu-panel-maxWidth, 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.js

@@ -1,2 +1,2 @@
-"use strict";require("./menu-item.styles_liyed8.css");exports.menuItemDiv="m1ddqpur",exports.subLabel="s12tso9",exports.text="tor9xcz";
+"use strict";require("./menu-item.styles_eut2j9.css");exports.menuItemDiv="m1ddqpur",exports.subLabel="s12tso9",exports.text="tor9xcz";
 //# sourceMappingURL=menu-item.styles.js.map

package/cjs/menu/menu-item.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.styles.js","sources":["../../../src/menu/menu-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Spacing } from \"../theme/tokens\";\n\nexport const menuItemDiv = css`\n    display: flex;\n    flex-direction: column;\n    padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n`;\n\nexport const text = css`\n    color: ${Colour[\"text\"]};\n`;\n\nexport const subLabel = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n"],"names":[],"mappings":"8FAIwB,4BAUH,uBAJJ"}
+{"version":3,"file":"menu-item.styles.js","sources":["../../../src/menu/menu-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Spacing } from \"../theme/tokens\";\n\nexport const menuItemDiv = css`\n    display: flex;\n    flex-direction: column;\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n`;\n\nexport const text = css`\n    color: ${Colour[\"text\"]};\n`;\n\nexport const subLabel = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n"],"names":[],"mappings":"8FAIwB,4BAUH,uBAJJ"}

package/cjs/menu/{menu-item.styles_liyed8.css → menu-item.styles_eut2j9.css}

@@ -1,3 +1,3 @@
-@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);}
+@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-12) var(--fds-spacing-16);}
 .tor9xcz{color:var(--fds-colour-text);}
 .s12tso9{color:var(--fds-colour-text-subtler);}}

package/cjs/menu/menu-link.styles.js

@@ -1,2 +1,2 @@
-"use strict";require("./menu-link.styles_hfxoez.css");exports.link="l5rk4za",exports.menuLinkDiv="mmmrhdq";
+"use strict";require("./menu-link.styles_rng7n7.css");exports.link="l5rk4za",exports.menuLinkDiv="mmmrhdq";
 //# sourceMappingURL=menu-link.styles.js.map

package/cjs/menu/menu-link.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-link.styles.js","sources":["../../../src/menu/menu-link.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport { Border, Colour, Radius, Spacing } from \"../theme/tokens\";\n\nexport const menuLinkDiv = css`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const link = css`\n    color: ${Colour[\"text\"]};\n\n    margin: 0 ${Spacing[\"spacing-8\"]};\n\n    border: ${Border[\"solid\"]} transparent;\n    border-width: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-8\"]};\n\n    border-radius: ${Radius[\"md\"]};\n\n    ${lineClampCss(2)}\n    white-space: pre-wrap;\n\n    &:hover,\n    &:active,\n    &:focus {\n        background-color: ${Colour[\"bg-hover\"]};\n        color: ${Colour[\"text\"]};\n    }\n\n    &:focus-visible {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 0;\n    }\n`;\n"],"names":[],"mappings":"uFAUiB,8BALO"}
+{"version":3,"file":"menu-link.styles.js","sources":["../../../src/menu/menu-link.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport { Border, Colour, Radius, Spacing } from \"../theme/tokens\";\n\nexport const menuLinkDiv = css`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const link = css`\n    color: ${Colour[\"text\"]};\n\n    margin: 0 ${Spacing[\"spacing-8\"]};\n\n    border: ${Border[\"solid\"]} transparent;\n    border-width: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-8\"]};\n\n    border-radius: ${Radius[\"md\"]};\n\n    ${lineClampCss(2)}\n    white-space: pre-wrap;\n\n    &:hover,\n    &:active,\n    &:focus {\n        background-color: ${Colour[\"bg-hover\"]};\n        color: ${Colour[\"text\"]};\n    }\n\n    &:focus-visible {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 0;\n    }\n`;\n"],"names":[],"mappings":"uFAUiB,8BALO"}

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

@@ -0,0 +1,2 @@
+@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-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;}.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.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("clsx"),s=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("react");var a=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var t=require("./menu-section.styles.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=l(i);const u=i=>{var{children:l,label:u,showDivider:d=!0,className:c,"data-testid":o="menu-section"}=i,j=e.__rest(i,["children","label","showDivider","className","data-testid"]);const h=a.useId();return r.jsxs("ul",Object.assign({"data-testid":o,"aria-labelledby":h,className:n.default(t.section,d&&t.sectionWithDivider,c)},j,{children:[u&&r.jsx(s.Typography.BodyXS,{className:t.label,weight:"semibold",id:h,children:u}),l]}))};u.displayName="Menu.Section",exports.MenuSection=u;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("clsx"),s=require("react");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 a=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var l=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var u=require("./menu-section.styles.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=n(i);const d=i=>{var{children:n,label:d,showDivider:c=!0,className:m,columns:h,"data-testid":j="menu-section"}=i,q=e.__rest(i,["children","label","showDivider","className","columns","data-testid"]);const v=l.useId(),y=s.useRef(null),p=s.useMemo((()=>void 0!==h?Math.ceil(s.Children.count(n)/Math.max(1,h)):void 0),[h,n]);t.useApplyStyle(y,void 0!==p?{[u.gridTokens.rows]:String(p)}:void 0);const x=d?r.jsx(a.Typography.BodyXS,{className:u.label,weight:"semibold",id:v,children:d}):null;return r.jsxs("div",{className:o.default(u.section,c&&u.sectionWithDivider,m),children:[x,r.jsx("ul",Object.assign({ref:y,"data-testid":j,"aria-labelledby":v,className:o.default(u.list,h&&u.listColumns)},q,{children:n}))]})};d.displayName="Menu.Section",exports.MenuSection=d;
 //# sourceMappingURL=menu-section.js.map

package/cjs/menu/menu-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-section.js","sources":["../../../src/menu/menu-section.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./menu-section.styles\";\nimport type { MenuSectionProps } from \"./types\";\n\nexport const MenuSection = ({\n    children,\n    label,\n    showDivider = true,\n    className,\n    \"data-testid\": testId = \"menu-section\",\n    ...otherProps\n}: MenuSectionProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const internalId = useId();\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <ul\n            data-testid={testId}\n            aria-labelledby={internalId}\n            className={clsx(\n                styles.section,\n                showDivider && styles.sectionWithDivider,\n                className\n            )}\n            {...otherProps}\n        >\n            {label && (\n                <Typography.BodyXS\n                    className={styles.label}\n                    weight=\"semibold\"\n                    id={internalId}\n                >\n                    {label}\n                </Typography.BodyXS>\n            )}\n            {children}\n        </ul>\n    );\n};\n\nMenuSection.displayName = \"Menu.Section\";\n"],"names":["MenuSection","_a","children","label","showDivider","className","testId","otherProps","__rest","internalId","useId","_jsxs","Object","assign","clsx","styles.section","styles.sectionWithDivider","_jsx","Typography","BodyXS","styles.label","weight","id","displayName"],"mappings":"ieAOO,MAAMA,EAAeC,QAAAC,SACxBA,EAAQC,MACRA,EAAKC,YACLA,GAAc,EAAIC,UAClBA,EACA,cAAeC,EAAS,gBAAcL,EACnCM,EAAUC,EAAAA,OAAAP,EANW,8DAWxB,MAAMQ,EAAaC,EAAAA,QAKnB,OACIC,EAAAA,KAAA,KAAAC,OAAAC,OAAA,CAAA,cACiBP,EAAM,kBACFG,EACjBJ,UAAWS,EAAAA,QACPC,UACAX,GAAeY,EAAAA,mBACfX,IAEAE,EAAU,CAAAL,SAAA,CAEbC,GACGc,EAAAA,IAACC,EAAAA,WAAWC,OAAM,CACdd,UAAWe,EAAAA,MACXC,OAAO,WACPC,GAAIb,EAAUP,SAEbC,IAGRD,KACA,EAIbF,EAAYuB,YAAc"}
+{"version":3,"file":"menu-section.js","sources":["../../../src/menu/menu-section.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { Children, useMemo, useRef } from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./menu-section.styles\";\nimport type { MenuSectionProps } from \"./types\";\n\nexport const MenuSection = ({\n    children,\n    label,\n    showDivider = true,\n    className,\n    columns,\n    \"data-testid\": testId = \"menu-section\",\n    ...otherProps\n}: MenuSectionProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const internalId = useId();\n    const ulRef = useRef<HTMLUListElement>(null);\n    const gridRows = useMemo(\n        () =>\n            columns !== undefined\n                ? Math.ceil(Children.count(children) / Math.max(1, columns))\n                : undefined,\n        [columns, children]\n    );\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useApplyStyle(\n        ulRef,\n        gridRows !== undefined\n            ? { [styles.gridTokens.rows]: String(gridRows) }\n            : undefined\n    );\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const labelElement = label ? (\n        <Typography.BodyXS\n            className={styles.label}\n            weight=\"semibold\"\n            id={internalId}\n        >\n            {label}\n        </Typography.BodyXS>\n    ) : null;\n\n    return (\n        <div\n            className={clsx(\n                styles.section,\n                showDivider && styles.sectionWithDivider,\n                className\n            )}\n        >\n            {labelElement}\n            <ul\n                ref={ulRef}\n                data-testid={testId}\n                aria-labelledby={internalId}\n                className={clsx(styles.list, columns && styles.listColumns)}\n                {...otherProps}\n            >\n                {children}\n            </ul>\n        </div>\n    );\n};\n\nMenuSection.displayName = \"Menu.Section\";\n"],"names":["MenuSection","_a","children","label","showDivider","className","columns","testId","otherProps","__rest","internalId","useId","ulRef","useRef","gridRows","useMemo","undefined","Math","ceil","Children","count","max","useApplyStyle","styles.gridTokens","rows","String","labelElement","_jsx","Typography","BodyXS","styles.label","weight","id","_jsxs","clsx","styles.section","styles.sectionWithDivider","Object","assign","ref","styles.list","styles.listColumns","displayName"],"mappings":"yzBASO,MAAMA,EAAeC,QAAAC,SACxBA,EAAQC,MACRA,EAAKC,YACLA,GAAc,EAAIC,UAClBA,EAASC,QACTA,EACA,cAAeC,EAAS,kBACrBC,EAAUC,EAAAA,OAAAR,EAPW,CAAA,WAAA,QAAA,cAAA,YAAA,UAAA,gBAYxB,MAAMS,EAAaC,EAAAA,QACbC,EAAQC,EAAAA,OAAyB,MACjCC,EAAWC,WACb,SACgBC,IAAZV,EACMW,KAAKC,KAAKC,EAAAA,SAASC,MAAMlB,GAAYe,KAAKI,IAAI,EAAGf,SACjDU,GACV,CAACV,EAASJ,IAMdoB,EAAAA,cACIV,OACaI,IAAbF,EACM,CAAE,CAACS,EAAAA,WAAkBC,MAAOC,OAAOX,SACnCE,GAMV,MAAMU,EAAevB,EACjBwB,EAAAA,IAACC,EAAAA,WAAWC,OAAM,CACdxB,UAAWyB,EAAAA,MACXC,OAAO,WACPC,GAAItB,EAAUR,SAEbC,IAEL,KAEJ,OACI8B,EAAAA,YACI5B,UAAW6B,EAAAA,QACPC,EAAAA,QACA/B,GAAegC,EAAAA,mBACf/B,aAGHqB,EACDC,EAAAA,IAAA,KAAAU,OAAAC,OAAA,CACIC,IAAK3B,gBACQL,EAAM,kBACFG,EACjBL,UAAW6B,EAAAA,QAAKM,OAAalC,GAAWmC,EAAAA,cACpCjC,YAEHN,OAEH,EAIdF,EAAY0C,YAAc"}

package/cjs/menu/menu-section.styles.js

@@ -1,2 +1,2 @@
-"use strict";require("./menu-section.styles_g7my4d.css");exports.label="llhca5j",exports.section="s1fmxqsy",exports.sectionWithDivider="s1o971t2";
+"use strict";require("./menu-section.styles_1n0ppxl.css");exports.GRID_COLUMN_GAP_PX=8,exports.GRID_COLUMN_WIDTH_PX=383,exports.gridTokens={rows:"--fds-menu-section-grid-rows"},exports.label="llhca5j",exports.list="l7qikvl",exports.listColumns="l6d0215",exports.section="s1fmxqsy",exports.sectionWithDivider="s1o971t2";
 //# sourceMappingURL=menu-section.styles.js.map

package/cjs/menu/menu-section.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-section.styles.js","sources":["../../../src/menu/menu-section.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Spacing } from \"../theme/tokens\";\n\nexport const section = css`\n    padding: ${Spacing[\"spacing-8\"]} 0;\n    margin: 0;\n    list-style: none;\n`;\nexport const sectionWithDivider = css`\n    border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const label = css`\n    margin: 0 ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-8\"]};\n    color: ${Colour[\"text-subtler\"]};\n`;\n"],"names":[],"mappings":"2FAakB,0BATE,sCAKW"}
+{"version":3,"file":"menu-section.styles.js","sources":["../../../src/menu/menu-section.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, MediaQuery, Spacing } from \"../theme/tokens\";\n\nexport const gridTokens = {\n    rows: \"--fds-menu-section-grid-rows\",\n} as const;\n\n// 367px max content width (Figma) + 8px padding per side; used to cap the panel maxWidth in MenuContent\nexport const GRID_COLUMN_WIDTH_PX = 383;\n// matches Spacing[\"spacing-8\"]\nexport const GRID_COLUMN_GAP_PX = 8;\n\nexport const section = css`\n    padding: ${Spacing[\"spacing-8\"]} 0;\n    margin: 0;\n`;\n\nexport const sectionWithDivider = css`\n    border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const label = css`\n    margin: 0 ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-8\"]};\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const list = css`\n    list-style: none;\n`;\n\nexport const listColumns = css`\n    ${gridTokens.rows}: initial;\n\n    display: grid;\n    grid-template-rows: repeat(var(${gridTokens.rows}), auto);\n    grid-auto-flow: column;\n    grid-auto-columns: minmax(0, 1fr);\n    column-gap: ${Spacing[\"spacing-8\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        grid-template-rows: none;\n        grid-auto-flow: row;\n    }\n`;\n"],"names":["rows"],"mappings":"yGAWkC,+BAFE,uBALV,CACtBA,KAAM,8CAiBQ,uBAKD,8BAIO,0BAlBJ,sCAKW"}

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

@@ -0,0 +1,5 @@
+@layer fds{.s1fmxqsy{padding:var(--fds-spacing-8) 0;margin:0;}
+.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);}
+.l7qikvl{list-style:none;}
+.l6d0215{--fds-menu-section-grid-rows:initial;display:-ms-grid;display:grid;-ms-grid-rows:repeat(var(--fds-menu-section-grid-rows), auto);grid-template-rows:repeat(var(--fds-menu-section-grid-rows), auto);-ms-grid-auto-flow:column;grid-auto-flow:column;-ms-grid-auto-columns:minmax(0, 1fr);grid-auto-columns:minmax(0, 1fr);-webkit-column-gap:var(--fds-spacing-8);column-gap:var(--fds-spacing-8);}:where(body.fds-breakpoint-lg-max) .l6d0215{-ms-grid-rows:none;grid-template-rows:none;-ms-grid-auto-flow:row;grid-auto-flow:row;}}

package/cjs/navbar/navbar-items.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),n=require("react/jsx-runtime"),i=require("@lifesg/react-icons/chevron-up"),r=require("clsx"),l=require("react"),t=require("../menu/menu.js"),a=require("../shared/clickable-icon/clickable-icon.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var s=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var c=require("./menu.js"),d=require("./navbar-items.styles.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=u(r);exports.NavbarItems=({items:r,selectedId:u,mobile:m=!1,hideNavBranding:p,hideLinkIndicator:h=!1,onItemClick:v})=>{const[b,j]=l.useState(null),x=l.useRef(null),f=s.useId(),g=e=>{var n;return!!(null===(n=e.subMenu)||void 0===n?void 0:n.some((e=>e.id===u)))},k=m?r.findIndex((e=>"component"!==e.itemType&&g(e))):-1,I=k<0?null:k;l.useEffect((()=>{m&&j(I)}),[m,I]),l.useEffect((()=>{if(m)return;const e=e=>{x.current&&!x.current.contains(e.target)&&j(null)};return document.addEventListener("click",e,!0),()=>{document.removeEventListener("click",e,!0)}}),[m]);const N=(e,n)=>i=>{i.stopPropagation(),m&&j((i=>{var r;return(null===(r=e.subMenu)||void 0===r?void 0:r.length)&&i!==n?n:null})),v(i,e)},q=(e,n)=>{e.stopPropagation(),v(e,n)},C=(e,i)=>n.jsx(t.Menu.Content,{id:i,children:n.jsx(t.Menu.Section,{showDivider:!1,children:e.map(((e,i)=>n.jsx(t.Menu.Link,{href:e.href,children:e.children},`${e.id}-${i}`)))})}),M=e=>n.jsx(c.Menu,{items:e,selectedId:u,onItemClick:q}),L=(l,s)=>{const{children:c,options:v,subMenu:x}=l,k=e.__rest(l,["children","options","subMenu"]),I=!!(null==x?void 0:x.length),q=(e=>e.id===u||g(e))(l),L=!m&&I&&b===s,$=m&&I&&b===s,_=L||$,y=m||null===b?q:b===s,E=!h&&y,S=y?m?"bold":"semibold":"regular",O=m?`link__mobile-${s+1}`:`link__${s+1}`,w=()=>E?n.jsx("div",{"data-testid":`${O}-indicator`,className:o.default(d.linkIndicator,y&&d.linkIndicatorSelected)}):null,B=o.default(d.link,(e=>{switch(e){case"bold":return d.linkWeightBold;case"semibold":return d.linkWeightSemibold;default:return d.linkWeightRegular}})(S),y&&d.linkSelected);return n.jsx("li",{className:o.default(d.linkItem,p&&d.linkItemHiddenBranding),children:I?(e=>{const r=`navbar-submenu-${f}-${l.id}`;return m?n.jsxs(n.Fragment,{children:[n.jsxs("a",Object.assign({"data-testid":O,className:B},k,{"aria-current":q?"page":void 0,"aria-haspopup":"menu","aria-expanded":_,onClick:N(l,s)},v,{children:[n.jsx("div",{className:d.linkLabel,children:c}),w(),m&&I?n.jsx("div",{className:d.linkIconContainer,children:n.jsx(a.ClickableIcon,{"data-testid":`${O}-expand-collapse-button`,className:o.default(d.expandCollapseButton,$&&d.subMenuExpanded),focusHighlight:!1,focusOutline:"browser","aria-label":$?"Collapse":"Expand",children:n.jsx(i.ChevronUpIcon,{className:o.default(d.chevronIcon,y&&d.chevronIconSelected)})})}):null]})),$&&M(x)]}):n.jsx(t.Menu,{position:e?"bottom-end":"bottom",customOffset:0,menuContent:C(x,r),triggerOnFocus:!0,isModal:!1,onPopoverAppear:()=>{j(s)},onPopoverDismiss:()=>{j((e=>e===s?null:e))},children:n.jsxs("button",Object.assign({type:"button",tabIndex:0,"data-testid":O,className:o.default(B,d.linkButton),"aria-haspopup":"menu","aria-expanded":_},v,{children:[n.jsx("div",{className:d.linkLabel,children:c}),w(),n.jsx(i.ChevronUpIcon,{className:o.default(d.chevronIcon,d.chevronIconDesktop,y&&d.chevronIconSelected,L&&d.subMenuExpanded)})]}))})})(s===r.length-1):n.jsxs("a",Object.assign({tabIndex:0,"data-testid":O,className:B},k,{"aria-current":q?"page":void 0,onClick:N(l,s)},v,{children:[n.jsx("div",{className:d.linkLabel,children:c}),w()]}))},s)},$=()=>r.map(((e,i)=>{var r;return"component"===e.itemType?n.jsx("li",{children:null!==(r=e.children)&&void 0!==r?r:null},i):L(e,i)}));return r&&r.length>0?m?n.jsx("ul",{ref:x,className:d.mobileWrapper,children:$()}):n.jsx("ul",{ref:x,className:o.default(d.wrapper,p&&d.wrapperAlignLeft),children:$()}):n.jsx(n.Fragment,{})};
+"use strict";var e=require("../_virtual/_tslib.js"),n=require("react/jsx-runtime"),i=require("@lifesg/react-icons/chevron-up"),r=require("clsx"),l=require("react"),t=require("../menu/menu.js"),s=require("../shared/clickable-icon/clickable-icon.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var a=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var u=require("./menu.js"),c=require("./navbar-items.styles.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=d(r);exports.NavbarItems=({items:r,selectedId:d,mobile:m=!1,hideNavBranding:p,hideLinkIndicator:h=!1,onItemClick:b})=>{const[v,j]=l.useState(null),x=l.useRef(null),f=a.useId(),g=e=>{var n;return!!(null===(n=e.subMenu)||void 0===n?void 0:n.some((e=>e.id===d)))},k=m?r.findIndex((e=>"component"!==e.itemType&&g(e))):-1,I=k<0?null:k;l.useEffect((()=>{m&&j(I)}),[m,I]),l.useEffect((()=>{if(m)return;const e=e=>{x.current&&!x.current.contains(e.target)&&j(null)};return document.addEventListener("click",e,!0),()=>{document.removeEventListener("click",e,!0)}}),[m]);const N=(e,n)=>i=>{i.stopPropagation(),m&&j((i=>{var r;return(null===(r=e.subMenu)||void 0===r?void 0:r.length)&&i!==n?n:null})),b(i,e)},q=(e,n)=>{e.stopPropagation(),b(e,n)},C=(e,i,r)=>n.jsx(t.Menu.Content,{id:i,children:n.jsx(t.Menu.Section,{showDivider:!1,columns:r,children:e.map(((e,i)=>n.jsx(t.Menu.Link,{href:e.href,children:e.children},`${e.id}-${i}`)))})}),M=e=>n.jsx(u.Menu,{items:e,selectedId:d,onItemClick:q}),L=(l,a)=>{const{children:u,options:b,subMenu:x,subMenuColumns:k}=l,I=e.__rest(l,["children","options","subMenu","subMenuColumns"]),q=!!(null==x?void 0:x.length),L=(e=>e.id===d||g(e))(l),$=!m&&q&&v===a,_=m&&q&&v===a,y=$||_,E=m||null===v?L:v===a,S=!h&&E,O=E?m?"bold":"semibold":"regular",w=m?`link__mobile-${a+1}`:`link__${a+1}`,B=()=>S?n.jsx("div",{"data-testid":`${w}-indicator`,className:o.default(c.linkIndicator,E&&c.linkIndicatorSelected)}):null,P=o.default(c.link,(e=>{switch(e){case"bold":return c.linkWeightBold;case"semibold":return c.linkWeightSemibold;default:return c.linkWeightRegular}})(O),E&&c.linkSelected);return n.jsx("li",{className:o.default(c.linkItem,p&&c.linkItemHiddenBranding),children:q?(e=>{const r=`navbar-submenu-${f}-${l.id}`;return m?n.jsxs(n.Fragment,{children:[n.jsxs("a",Object.assign({"data-testid":w,className:P},I,{"aria-current":L?"page":void 0,"aria-haspopup":"menu","aria-expanded":y,onClick:N(l,a)},b,{children:[n.jsx("div",{className:c.linkLabel,children:u}),B(),m&&q?n.jsx("div",{className:c.linkIconContainer,children:n.jsx(s.ClickableIcon,{"data-testid":`${w}-expand-collapse-button`,className:o.default(c.expandCollapseButton,_&&c.subMenuExpanded),focusHighlight:!1,focusOutline:"browser","aria-label":_?"Collapse":"Expand",children:n.jsx(i.ChevronUpIcon,{className:o.default(c.chevronIcon,E&&c.chevronIconSelected)})})}):null]})),_&&M(x)]}):n.jsx(t.Menu,{position:e?"bottom-end":"bottom",customOffset:0,menuContent:C(x,r,k),enableResize:!0,triggerOnFocus:!0,isModal:!1,onPopoverAppear:()=>{j(a)},onPopoverDismiss:()=>{j((e=>e===a?null:e))},children:n.jsxs("button",Object.assign({type:"button",tabIndex:0,"data-testid":w,className:o.default(P,c.linkButton),"aria-haspopup":"menu","aria-expanded":y},b,{children:[n.jsx("div",{className:c.linkLabel,children:u}),B(),n.jsx(i.ChevronUpIcon,{className:o.default(c.chevronIcon,c.chevronIconDesktop,E&&c.chevronIconSelected,$&&c.subMenuExpanded)})]}))})})(a===r.length-1):n.jsxs("a",Object.assign({tabIndex:0,"data-testid":w,className:P},I,{"aria-current":L?"page":void 0,onClick:N(l,a)},b,{children:[n.jsx("div",{className:c.linkLabel,children:u}),B()]}))},a)},$=()=>r.map(((e,i)=>{var r;return"component"===e.itemType?n.jsx("li",{children:null!==(r=e.children)&&void 0!==r?r:null},i):L(e,i)}));return r&&r.length>0?m?n.jsx("ul",{ref:x,className:c.mobileWrapper,children:$()}):n.jsx("ul",{ref:x,className:o.default(c.wrapper,p&&c.wrapperAlignLeft),children:$()}):n.jsx(n.Fragment,{})};
 //# sourceMappingURL=navbar-items.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"navbar-items.js","sources":["../../../src/navbar/navbar-items.tsx"],"sourcesContent":["import { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { Menu as DesktopMenu } from \"../menu\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport type { TypographyWeight } from \"../typography\";\nimport { useId } from \"../util\";\nimport { Menu as MobileMenu } from \"./menu\";\nimport * as styles from \"./navbar-items.styles\";\nimport type {\n    NavItemCommonProps,\n    NavItemLinkProps,\n    NavItemProps,\n} from \"./types\";\n\nconst getLinkWeightClass = (weight: TypographyWeight) => {\n    switch (weight) {\n        case \"bold\":\n            return styles.linkWeightBold;\n        case \"semibold\":\n            return styles.linkWeightSemibold;\n        case \"regular\":\n        default:\n            return styles.linkWeightRegular;\n    }\n};\n\ninterface Props<T> {\n    items: NavItemProps<T>[];\n    selectedId?: string | undefined;\n    /** toggle for mobile or desktop view */\n    mobile?: boolean | undefined;\n    hideNavBranding?: boolean | undefined;\n    /** hide the selected LinkIndicator */\n    hideLinkIndicator?: boolean | undefined;\n    onItemClick: (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemProps<T> | NavItemCommonProps<T>\n    ) => void;\n}\n\nexport const NavbarItems = <T,>({\n    items,\n    selectedId,\n    mobile = false,\n    hideNavBranding,\n    hideLinkIndicator = false,\n    onItemClick,\n}: Props<T>): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const [selectedIndex, setSelectedIndex] = useState<number | null>(null);\n    const listRef = useRef<HTMLUListElement>(null);\n    const instanceId = useId();\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n    const hasSelectedSubMenuItem = (item: NavItemLinkProps<T>): boolean =>\n        !!item.subMenu?.some((subItem) => subItem.id === selectedId);\n\n    const checkSelected = (item: NavItemLinkProps<T>): boolean =>\n        item.id === selectedId || hasSelectedSubMenuItem(item);\n\n    const itemIndexWithSelectedSubItem = mobile\n        ? items.findIndex(\n              (item) =>\n                  item.itemType !== \"component\" &&\n                  hasSelectedSubMenuItem(item as NavItemLinkProps<T>)\n          )\n        : -1;\n    const initialExpandedItemIndex =\n        itemIndexWithSelectedSubItem < 0 ? null : itemIndexWithSelectedSubItem;\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n\n    useEffect(() => {\n        if (!mobile) return;\n\n        setSelectedIndex(initialExpandedItemIndex);\n    }, [mobile, initialExpandedItemIndex]);\n\n    useEffect(() => {\n        if (mobile) return;\n\n        const handleClickOutside = (event: MouseEvent) => {\n            if (\n                listRef.current &&\n                !listRef.current.contains(event.target as Node)\n            ) {\n                setSelectedIndex(null);\n            }\n        };\n        document.addEventListener(\"click\", handleClickOutside, true);\n        return () => {\n            document.removeEventListener(\"click\", handleClickOutside, true);\n        };\n    }, [mobile]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleLinkClick = (item: NavItemLinkProps<T>, index: number) => {\n        return (event: React.MouseEvent<HTMLAnchorElement>) => {\n            event.stopPropagation();\n\n            // mobile expands inline when link has submenu\n            if (mobile) {\n                setSelectedIndex((prev) =>\n                    item.subMenu?.length && prev !== index ? index : null\n                );\n            }\n\n            onItemClick(event, item);\n        };\n    };\n\n    const handleMobileSubLinkClick = (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemCommonProps<T>\n    ) => {\n        event.stopPropagation();\n        onItemClick(event, item);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderDesktopSubMenu = (\n        subMenu: NavItemCommonProps<T>[],\n        subMenuId: string\n    ) => (\n        <DesktopMenu.Content id={subMenuId}>\n            <DesktopMenu.Section showDivider={false}>\n                {subMenu.map((item, subIndex) => (\n                    <DesktopMenu.Link\n                        key={`${item.id}-${subIndex}`}\n                        href={item.href}\n                    >\n                        {item.children}\n                    </DesktopMenu.Link>\n                ))}\n            </DesktopMenu.Section>\n        </DesktopMenu.Content>\n    );\n\n    const renderMobileSubMenu = (subMenu: NavItemCommonProps<T>[]) => (\n        <MobileMenu\n            items={subMenu}\n            selectedId={selectedId}\n            onItemClick={handleMobileSubLinkClick}\n        />\n    );\n\n    const renderLinkItem = (item: NavItemLinkProps<T>, index: number) => {\n        const { children, options, subMenu, ...otherItemAttrs } = item;\n\n        const hasSubMenu = !!subMenu?.length;\n\n        const isRouteSelected = checkSelected(item);\n\n        // desktop popover open state\n        const isDesktopExpanded =\n            !mobile && hasSubMenu && selectedIndex === index;\n\n        // mobile inline expanded state\n        const isMobileExpanded =\n            mobile && hasSubMenu && selectedIndex === index;\n\n        const isExpanded = isDesktopExpanded || isMobileExpanded;\n\n        const selected =\n            !mobile && selectedIndex !== null\n                ? selectedIndex === index\n                : isRouteSelected;\n\n        const showIndicator = !hideLinkIndicator && selected;\n\n        const textWeight: TypographyWeight = selected\n            ? mobile\n                ? \"bold\"\n                : \"semibold\"\n            : \"regular\";\n\n        const testId = mobile\n            ? `link__mobile-${index + 1}`\n            : `link__${index + 1}`;\n\n        const renderIndicator = () =>\n            showIndicator ? (\n                <div\n                    data-testid={`${testId}-indicator`}\n                    className={clsx(\n                        styles.linkIndicator,\n                        selected && styles.linkIndicatorSelected\n                    )}\n                />\n            ) : null;\n\n        const renderMobileChevron = () =>\n            mobile && hasSubMenu ? (\n                <div className={styles.linkIconContainer}>\n                    <ClickableIcon\n                        data-testid={`${testId}-expand-collapse-button`}\n                        className={clsx(\n                            styles.expandCollapseButton,\n                            isMobileExpanded && styles.subMenuExpanded\n                        )}\n                        focusHighlight={false}\n                        focusOutline=\"browser\"\n                        aria-label={isMobileExpanded ? \"Collapse\" : \"Expand\"}\n                    >\n                        <ChevronUpIcon\n                            className={clsx(\n                                styles.chevronIcon,\n                                selected && styles.chevronIconSelected\n                            )}\n                        />\n                    </ClickableIcon>\n                </div>\n            ) : null;\n\n        const linkClassName = clsx(\n            styles.link,\n            getLinkWeightClass(textWeight),\n            selected && styles.linkSelected\n        );\n\n        const renderLink = () => (\n            <a\n                tabIndex={0}\n                data-testid={testId}\n                className={linkClassName}\n                {...otherItemAttrs}\n                aria-current={isRouteSelected ? \"page\" : undefined}\n                onClick={handleLinkClick(item, index)}\n                {...options}\n            >\n                <div className={styles.linkLabel}>{children}</div>\n                {renderIndicator()}\n            </a>\n        );\n\n        const renderLinkWithSubmenu = (isLastItem: boolean) => {\n            const subMenuId = `navbar-submenu-${instanceId}-${item.id}`;\n\n            if (mobile) {\n                return (\n                    <>\n                        <a\n                            data-testid={testId}\n                            className={linkClassName}\n                            {...otherItemAttrs}\n                            aria-current={isRouteSelected ? \"page\" : undefined}\n                            aria-haspopup=\"menu\"\n                            aria-expanded={isExpanded}\n                            onClick={handleLinkClick(item, index)}\n                            {...options}\n                        >\n                            <div className={styles.linkLabel}>{children}</div>\n                            {renderIndicator()}\n                            {renderMobileChevron()}\n                        </a>\n\n                        {isMobileExpanded && renderMobileSubMenu(subMenu!)}\n                    </>\n                );\n            }\n\n            return (\n                <DesktopMenu\n                    position={isLastItem ? \"bottom-end\" : \"bottom\"}\n                    customOffset={0}\n                    menuContent={renderDesktopSubMenu(subMenu!, subMenuId)}\n                    triggerOnFocus\n                    isModal={false}\n                    onPopoverAppear={() => {\n                        setSelectedIndex(index);\n                    }}\n                    onPopoverDismiss={() => {\n                        setSelectedIndex((prev) =>\n                            prev === index ? null : prev\n                        );\n                    }}\n                >\n                    <button\n                        type=\"button\"\n                        tabIndex={0}\n                        data-testid={testId}\n                        className={clsx(linkClassName, styles.linkButton)}\n                        aria-haspopup=\"menu\"\n                        aria-expanded={isExpanded}\n                        {...options}\n                    >\n                        <div className={styles.linkLabel}>{children}</div>\n                        {renderIndicator()}\n                        <ChevronUpIcon\n                            className={clsx(\n                                styles.chevronIcon,\n                                styles.chevronIconDesktop,\n                                selected && styles.chevronIconSelected,\n                                isDesktopExpanded && styles.subMenuExpanded\n                            )}\n                        />\n                    </button>\n                </DesktopMenu>\n            );\n        };\n\n        return (\n            <li\n                key={index}\n                className={clsx(\n                    styles.linkItem,\n                    hideNavBranding && styles.linkItemHiddenBranding\n                )}\n            >\n                {hasSubMenu\n                    ? renderLinkWithSubmenu(index === items.length - 1)\n                    : renderLink()}\n            </li>\n        );\n    };\n\n    const renderItems = () =>\n        items.map((item, index) => {\n            switch (item.itemType) {\n                case \"component\": {\n                    return <li key={index}>{item.children ?? null}</li>;\n                }\n                case \"link\":\n                default: {\n                    return renderLinkItem(item as NavItemLinkProps<T>, index);\n                }\n            }\n        });\n\n    if (items && items.length > 0) {\n        return mobile ? (\n            <ul ref={listRef} className={styles.mobileWrapper}>\n                {renderItems()}\n            </ul>\n        ) : (\n            <ul\n                ref={listRef}\n                className={clsx(\n                    styles.wrapper,\n                    hideNavBranding && styles.wrapperAlignLeft\n                )}\n            >\n                {renderItems()}\n            </ul>\n        );\n    }\n\n    return <></>;\n};\n"],"names":["items","selectedId","mobile","hideNavBranding","hideLinkIndicator","onItemClick","selectedIndex","setSelectedIndex","useState","listRef","useRef","instanceId","useId","hasSelectedSubMenuItem","item","_a","subMenu","some","subItem","id","itemIndexWithSelectedSubItem","findIndex","itemType","initialExpandedItemIndex","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","handleLinkClick","index","stopPropagation","prev","length","handleMobileSubLinkClick","renderDesktopSubMenu","subMenuId","_jsx","DesktopMenu","Content","children","Section","showDivider","map","subIndex","Link","href","renderMobileSubMenu","MobileMenu","renderLinkItem","options","otherItemAttrs","__rest","hasSubMenu","isRouteSelected","checkSelected","isDesktopExpanded","isMobileExpanded","isExpanded","selected","showIndicator","textWeight","testId","renderIndicator","className","clsx","styles.linkIndicator","styles.linkIndicatorSelected","linkClassName","styles.link","weight","styles.linkWeightBold","styles.linkWeightSemibold","styles.linkWeightRegular","getLinkWeightClass","styles.linkSelected","styles.linkItem","styles.linkItemHiddenBranding","isLastItem","_jsxs","_Fragment","Object","assign","undefined","onClick","styles.linkLabel","styles.linkIconContainer","ClickableIcon","styles.expandCollapseButton","styles.subMenuExpanded","focusHighlight","focusOutline","ChevronUpIcon","styles.chevronIcon","styles.chevronIconSelected","position","customOffset","menuContent","triggerOnFocus","isModal","onPopoverAppear","onPopoverDismiss","type","tabIndex","styles.linkButton","styles.chevronIconDesktop","renderLinkWithSubmenu","renderItems","ref","styles.mobileWrapper","styles.wrapper","styles.wrapperAlignLeft"],"mappings":"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"}
+{"version":3,"file":"navbar-items.js","sources":["../../../src/navbar/navbar-items.tsx"],"sourcesContent":["import { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { Menu as DesktopMenu } from \"../menu\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport type { TypographyWeight } from \"../typography\";\nimport { useId } from \"../util\";\nimport { Menu as MobileMenu } from \"./menu\";\nimport * as styles from \"./navbar-items.styles\";\nimport type {\n    NavItemCommonProps,\n    NavItemLinkProps,\n    NavItemProps,\n} from \"./types\";\n\nconst getLinkWeightClass = (weight: TypographyWeight) => {\n    switch (weight) {\n        case \"bold\":\n            return styles.linkWeightBold;\n        case \"semibold\":\n            return styles.linkWeightSemibold;\n        case \"regular\":\n        default:\n            return styles.linkWeightRegular;\n    }\n};\n\ninterface Props<T> {\n    items: NavItemProps<T>[];\n    selectedId?: string | undefined;\n    /** toggle for mobile or desktop view */\n    mobile?: boolean | undefined;\n    hideNavBranding?: boolean | undefined;\n    /** hide the selected LinkIndicator */\n    hideLinkIndicator?: boolean | undefined;\n    onItemClick: (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemProps<T> | NavItemCommonProps<T>\n    ) => void;\n}\n\nexport const NavbarItems = <T,>({\n    items,\n    selectedId,\n    mobile = false,\n    hideNavBranding,\n    hideLinkIndicator = false,\n    onItemClick,\n}: Props<T>): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const [selectedIndex, setSelectedIndex] = useState<number | null>(null);\n    const listRef = useRef<HTMLUListElement>(null);\n    const instanceId = useId();\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n    const hasSelectedSubMenuItem = (item: NavItemLinkProps<T>): boolean =>\n        !!item.subMenu?.some((subItem) => subItem.id === selectedId);\n\n    const checkSelected = (item: NavItemLinkProps<T>): boolean =>\n        item.id === selectedId || hasSelectedSubMenuItem(item);\n\n    const itemIndexWithSelectedSubItem = mobile\n        ? items.findIndex(\n              (item) =>\n                  item.itemType !== \"component\" &&\n                  hasSelectedSubMenuItem(item as NavItemLinkProps<T>)\n          )\n        : -1;\n    const initialExpandedItemIndex =\n        itemIndexWithSelectedSubItem < 0 ? null : itemIndexWithSelectedSubItem;\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n\n    useEffect(() => {\n        if (!mobile) return;\n\n        setSelectedIndex(initialExpandedItemIndex);\n    }, [mobile, initialExpandedItemIndex]);\n\n    useEffect(() => {\n        if (mobile) return;\n\n        const handleClickOutside = (event: MouseEvent) => {\n            if (\n                listRef.current &&\n                !listRef.current.contains(event.target as Node)\n            ) {\n                setSelectedIndex(null);\n            }\n        };\n        document.addEventListener(\"click\", handleClickOutside, true);\n        return () => {\n            document.removeEventListener(\"click\", handleClickOutside, true);\n        };\n    }, [mobile]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleLinkClick = (item: NavItemLinkProps<T>, index: number) => {\n        return (event: React.MouseEvent<HTMLAnchorElement>) => {\n            event.stopPropagation();\n\n            // mobile expands inline when link has submenu\n            if (mobile) {\n                setSelectedIndex((prev) =>\n                    item.subMenu?.length && prev !== index ? index : null\n                );\n            }\n\n            onItemClick(event, item);\n        };\n    };\n\n    const handleMobileSubLinkClick = (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemCommonProps<T>\n    ) => {\n        event.stopPropagation();\n        onItemClick(event, item);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderDesktopSubMenu = (\n        subMenu: NavItemCommonProps<T>[],\n        subMenuId: string,\n        columns?: number\n    ) => (\n        <DesktopMenu.Content id={subMenuId}>\n            <DesktopMenu.Section showDivider={false} columns={columns}>\n                {subMenu.map((item, subIndex) => (\n                    <DesktopMenu.Link\n                        key={`${item.id}-${subIndex}`}\n                        href={item.href}\n                    >\n                        {item.children}\n                    </DesktopMenu.Link>\n                ))}\n            </DesktopMenu.Section>\n        </DesktopMenu.Content>\n    );\n\n    const renderMobileSubMenu = (subMenu: NavItemCommonProps<T>[]) => (\n        <MobileMenu\n            items={subMenu}\n            selectedId={selectedId}\n            onItemClick={handleMobileSubLinkClick}\n        />\n    );\n\n    const renderLinkItem = (item: NavItemLinkProps<T>, index: number) => {\n        const {\n            children,\n            options,\n            subMenu,\n            subMenuColumns,\n            ...otherItemAttrs\n        } = item;\n\n        const hasSubMenu = !!subMenu?.length;\n\n        const isRouteSelected = checkSelected(item);\n\n        // desktop popover open state\n        const isDesktopExpanded =\n            !mobile && hasSubMenu && selectedIndex === index;\n\n        // mobile inline expanded state\n        const isMobileExpanded =\n            mobile && hasSubMenu && selectedIndex === index;\n\n        const isExpanded = isDesktopExpanded || isMobileExpanded;\n\n        const selected =\n            !mobile && selectedIndex !== null\n                ? selectedIndex === index\n                : isRouteSelected;\n\n        const showIndicator = !hideLinkIndicator && selected;\n\n        const textWeight: TypographyWeight = selected\n            ? mobile\n                ? \"bold\"\n                : \"semibold\"\n            : \"regular\";\n\n        const testId = mobile\n            ? `link__mobile-${index + 1}`\n            : `link__${index + 1}`;\n\n        const renderIndicator = () =>\n            showIndicator ? (\n                <div\n                    data-testid={`${testId}-indicator`}\n                    className={clsx(\n                        styles.linkIndicator,\n                        selected && styles.linkIndicatorSelected\n                    )}\n                />\n            ) : null;\n\n        const renderMobileChevron = () =>\n            mobile && hasSubMenu ? (\n                <div className={styles.linkIconContainer}>\n                    <ClickableIcon\n                        data-testid={`${testId}-expand-collapse-button`}\n                        className={clsx(\n                            styles.expandCollapseButton,\n                            isMobileExpanded && styles.subMenuExpanded\n                        )}\n                        focusHighlight={false}\n                        focusOutline=\"browser\"\n                        aria-label={isMobileExpanded ? \"Collapse\" : \"Expand\"}\n                    >\n                        <ChevronUpIcon\n                            className={clsx(\n                                styles.chevronIcon,\n                                selected && styles.chevronIconSelected\n                            )}\n                        />\n                    </ClickableIcon>\n                </div>\n            ) : null;\n\n        const linkClassName = clsx(\n            styles.link,\n            getLinkWeightClass(textWeight),\n            selected && styles.linkSelected\n        );\n\n        const renderLink = () => (\n            <a\n                tabIndex={0}\n                data-testid={testId}\n                className={linkClassName}\n                {...otherItemAttrs}\n                aria-current={isRouteSelected ? \"page\" : undefined}\n                onClick={handleLinkClick(item, index)}\n                {...options}\n            >\n                <div className={styles.linkLabel}>{children}</div>\n                {renderIndicator()}\n            </a>\n        );\n\n        const renderLinkWithSubmenu = (isLastItem: boolean) => {\n            const subMenuId = `navbar-submenu-${instanceId}-${item.id}`;\n\n            if (mobile) {\n                return (\n                    <>\n                        <a\n                            data-testid={testId}\n                            className={linkClassName}\n                            {...otherItemAttrs}\n                            aria-current={isRouteSelected ? \"page\" : undefined}\n                            aria-haspopup=\"menu\"\n                            aria-expanded={isExpanded}\n                            onClick={handleLinkClick(item, index)}\n                            {...options}\n                        >\n                            <div className={styles.linkLabel}>{children}</div>\n                            {renderIndicator()}\n                            {renderMobileChevron()}\n                        </a>\n\n                        {isMobileExpanded && renderMobileSubMenu(subMenu!)}\n                    </>\n                );\n            }\n\n            return (\n                <DesktopMenu\n                    position={isLastItem ? \"bottom-end\" : \"bottom\"}\n                    customOffset={0}\n                    menuContent={renderDesktopSubMenu(\n                        subMenu!,\n                        subMenuId,\n                        subMenuColumns\n                    )}\n                    enableResize\n                    triggerOnFocus\n                    isModal={false}\n                    onPopoverAppear={() => {\n                        setSelectedIndex(index);\n                    }}\n                    onPopoverDismiss={() => {\n                        setSelectedIndex((prev) =>\n                            prev === index ? null : prev\n                        );\n                    }}\n                >\n                    <button\n                        type=\"button\"\n                        tabIndex={0}\n                        data-testid={testId}\n                        className={clsx(linkClassName, styles.linkButton)}\n                        aria-haspopup=\"menu\"\n                        aria-expanded={isExpanded}\n                        {...options}\n                    >\n                        <div className={styles.linkLabel}>{children}</div>\n                        {renderIndicator()}\n                        <ChevronUpIcon\n                            className={clsx(\n                                styles.chevronIcon,\n                                styles.chevronIconDesktop,\n                                selected && styles.chevronIconSelected,\n                                isDesktopExpanded && styles.subMenuExpanded\n                            )}\n                        />\n                    </button>\n                </DesktopMenu>\n            );\n        };\n\n        return (\n            <li\n                key={index}\n                className={clsx(\n                    styles.linkItem,\n                    hideNavBranding && styles.linkItemHiddenBranding\n                )}\n            >\n                {hasSubMenu\n                    ? renderLinkWithSubmenu(index === items.length - 1)\n                    : renderLink()}\n            </li>\n        );\n    };\n\n    const renderItems = () =>\n        items.map((item, index) => {\n            switch (item.itemType) {\n                case \"component\": {\n                    return <li key={index}>{item.children ?? null}</li>;\n                }\n                case \"link\":\n                default: {\n                    return renderLinkItem(item as NavItemLinkProps<T>, index);\n                }\n            }\n        });\n\n    if (items && items.length > 0) {\n        return mobile ? (\n            <ul ref={listRef} className={styles.mobileWrapper}>\n                {renderItems()}\n            </ul>\n        ) : (\n            <ul\n                ref={listRef}\n                className={clsx(\n                    styles.wrapper,\n                    hideNavBranding && styles.wrapperAlignLeft\n                )}\n            >\n                {renderItems()}\n            </ul>\n        );\n    }\n\n    return <></>;\n};\n"],"names":["items","selectedId","mobile","hideNavBranding","hideLinkIndicator","onItemClick","selectedIndex","setSelectedIndex","useState","listRef","useRef","instanceId","useId","hasSelectedSubMenuItem","item","_a","subMenu","some","subItem","id","itemIndexWithSelectedSubItem","findIndex","itemType","initialExpandedItemIndex","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","handleLinkClick","index","stopPropagation","prev","length","handleMobileSubLinkClick","renderDesktopSubMenu","subMenuId","columns","_jsx","DesktopMenu","Content","children","Section","showDivider","map","subIndex","Link","href","renderMobileSubMenu","MobileMenu","renderLinkItem","options","subMenuColumns","otherItemAttrs","__rest","hasSubMenu","isRouteSelected","checkSelected","isDesktopExpanded","isMobileExpanded","isExpanded","selected","showIndicator","textWeight","testId","renderIndicator","className","clsx","styles.linkIndicator","styles.linkIndicatorSelected","linkClassName","styles.link","weight","styles.linkWeightBold","styles.linkWeightSemibold","styles.linkWeightRegular","getLinkWeightClass","styles.linkSelected","styles.linkItem","styles.linkItemHiddenBranding","isLastItem","_jsxs","_Fragment","Object","assign","undefined","onClick","styles.linkLabel","styles.linkIconContainer","ClickableIcon","styles.expandCollapseButton","styles.subMenuExpanded","focusHighlight","focusOutline","ChevronUpIcon","styles.chevronIcon","styles.chevronIconSelected","position","customOffset","menuContent","enableResize","triggerOnFocus","isModal","onPopoverAppear","onPopoverDismiss","type","tabIndex","styles.linkButton","styles.chevronIconDesktop","renderLinkWithSubmenu","renderItems","ref","styles.mobileWrapper","styles.wrapper","styles.wrapperAlignLeft"],"mappings":"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"}

package/cjs/notification-banner/notification-banner-hoc.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("../external/dompurify/dist/purify.es.js"),r=require("react"),n=require("./notification-banner.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=i(r);exports.withNotificationBanner=r=>a.default.forwardRef(((i,a)=>e.jsx(n.NBComponent,Object.assign({forwardedRef:a},i,{children:r.length>0?r.map(((r,i)=>{if("text"===r.type){const n=r.otherAttributes,a=t.default.sanitize(r.content);return e.jsx("p",Object.assign({},n,{dangerouslySetInnerHTML:{__html:a}}),i)}{const t=r.otherAttributes;return e.jsx(n.NotificationBanner.Link,Object.assign({},t,{children:r.content}),i)}})):(console.error("[NotificationBannerHOC] Empty data passed"),null)}))));
+"use strict";var t=require("../_virtual/_tslib.js"),e=require("react/jsx-runtime"),r=require("../external/dompurify/dist/purify.es.js"),n=require("react"),i=require("./notification-banner.js");function a(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var s=a(n);exports.withNotificationBanner=n=>s.default.forwardRef(((a,s)=>e.jsx(i.NBComponent,Object.assign({forwardedRef:s},a,{children:n.length>0?n.map(((n,a)=>{var s;if("text"===n.type){const t=n.otherAttributes,i=r.default.sanitize(n.content);return e.jsx("p",Object.assign({},t,{dangerouslySetInnerHTML:{__html:i}}),a)}{const o=function(e){const{href:n}=e,i=t.__rest(e,["href"]);return"string"==typeof n&&r.default.isValidAttribute("a","href",n)?e:i}(null!==(s=n.otherAttributes)&&void 0!==s?s:{});return e.jsx(i.NotificationBanner.Link,Object.assign({},o,{children:n.content}),a)}})):(console.error("[NotificationBannerHOC] Empty data passed"),null)}))));
 //# sourceMappingURL=notification-banner-hoc.js.map

package/cjs/notification-banner/notification-banner-hoc.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification-banner-hoc.js","sources":["../../../src/notification-banner/notification-banner-hoc.tsx"],"sourcesContent":["import DOMPurify from \"dompurify\";\nimport React from \"react\";\n\nimport { NBComponent, NotificationBanner } from \"./notification-banner\";\nimport type {\n    ContentLinkAttributes,\n    ContentTextAttributes,\n    NotificationBannerWithForwardedRefProps,\n    NotificationContentAttributes,\n} from \"./types\";\n\n/**\n * Higher-order component that wraps `NotificationBanner` and renders its\n * content from a structured data array.\n * *\n * @param data Content items to render inside the banner.\n */\nexport const withNotificationBanner = (\n    data: NotificationContentAttributes[]\n) => {\n    const ComponentToReturn = (\n        props: NotificationBannerWithForwardedRefProps,\n        ref: React.Ref<HTMLDivElement>\n    ) => {\n        const renderContent = () => {\n            if (data.length > 0) {\n                return data.map((attribute, index) => {\n                    if (attribute.type === \"text\") {\n                        const otherAttributes =\n                            attribute.otherAttributes as ContentTextAttributes;\n\n                        const sanitizedContent = DOMPurify.sanitize(\n                            attribute.content\n                        );\n                        return (\n                            <p\n                                key={index}\n                                {...otherAttributes}\n                                dangerouslySetInnerHTML={{\n                                    __html: sanitizedContent,\n                                }}\n                            />\n                        );\n                    } else {\n                        const otherAttributes =\n                            attribute.otherAttributes as ContentLinkAttributes;\n                        return (\n                            <NotificationBanner.Link\n                                key={index}\n                                {...otherAttributes}\n                            >\n                                {attribute.content}\n                            </NotificationBanner.Link>\n                        );\n                    }\n                });\n            }\n\n            console.error(\"[NotificationBannerHOC] Empty data passed\");\n            return null;\n        };\n\n        return (\n            <NBComponent forwardedRef={ref} {...props}>\n                {renderContent()}\n            </NBComponent>\n        );\n    };\n\n    return React.forwardRef(ComponentToReturn);\n};\n"],"names":["data","React","forwardRef","props","ref","_jsx","NBComponent","Object","assign","forwardedRef","children","length","map","attribute","index","type","otherAttributes","sanitizedContent","DOMPurify","sanitize","content","dangerouslySetInnerHTML","__html","NotificationBanner","Link","console","error"],"mappings":"gRAkBIA,GAmDOC,EAAAA,QAAMC,YAjDa,CACtBC,EACAC,IAyCIC,EAAAA,IAACC,EAAAA,YAAWC,OAAAC,OAAA,CAACC,aAAcL,GAASD,EAAK,CAAAO,SAtCrCV,EAAKW,OAAS,EACPX,EAAKY,KAAI,CAACC,EAAWC,KACxB,GAAuB,SAAnBD,EAAUE,KAAiB,CAC3B,MAAMC,EACFH,EAAUG,gBAERC,EAAmBC,EAAAA,QAAUC,SAC/BN,EAAUO,SAEd,OACIf,EAAAA,IAAA,IAAAE,OAAAC,OAAA,GAEQQ,EAAe,CACnBK,wBAAyB,CACrBC,OAAQL,KAHPH,EAOjB,CAAO,CACH,MAAME,EACFH,EAAUG,gBACd,OACIX,EAAAA,IAACkB,EAAAA,mBAAmBC,KAAIjB,OAAAC,OAAA,CAAA,EAEhBQ,EAAe,CAAAN,SAElBG,EAAUO,UAHNN,EAMjB,MAIRW,QAAQC,MAAM,6CACP"}
+{"version":3,"file":"notification-banner-hoc.js","sources":["../../../src/notification-banner/notification-banner-hoc.tsx"],"sourcesContent":["import DOMPurify from \"dompurify\";\nimport React from \"react\";\n\nimport { NBComponent, NotificationBanner } from \"./notification-banner\";\nimport type {\n    ContentLinkAttributes,\n    ContentTextAttributes,\n    NotificationBannerWithForwardedRefProps,\n    NotificationContentAttributes,\n} from \"./types\";\n\nfunction sanitizeLinkAttributes(\n    attrs: ContentLinkAttributes\n): ContentLinkAttributes {\n    const { href, ...rest } = attrs;\n\n    if (\n        typeof href !== \"string\" ||\n        !DOMPurify.isValidAttribute(\"a\", \"href\", href)\n    ) {\n        return rest;\n    }\n\n    return attrs;\n}\n\n/**\n * Higher-order component that wraps `NotificationBanner` and renders its\n * content from a structured data array.\n * *\n * @param data Content items to render inside the banner.\n */\nexport const withNotificationBanner = (\n    data: NotificationContentAttributes[]\n) => {\n    const ComponentToReturn = (\n        props: NotificationBannerWithForwardedRefProps,\n        ref: React.Ref<HTMLDivElement>\n    ) => {\n        const renderContent = () => {\n            if (data.length > 0) {\n                return data.map((attribute, index) => {\n                    if (attribute.type === \"text\") {\n                        const otherAttributes =\n                            attribute.otherAttributes as ContentTextAttributes;\n\n                        const sanitizedContent = DOMPurify.sanitize(\n                            attribute.content\n                        );\n                        return (\n                            <p\n                                key={index}\n                                {...otherAttributes}\n                                dangerouslySetInnerHTML={{\n                                    __html: sanitizedContent,\n                                }}\n                            />\n                        );\n                    } else {\n                        const otherAttributes = sanitizeLinkAttributes(\n                            (attribute.otherAttributes ??\n                                {}) as ContentLinkAttributes\n                        );\n                        return (\n                            <NotificationBanner.Link\n                                key={index}\n                                {...otherAttributes}\n                            >\n                                {attribute.content}\n                            </NotificationBanner.Link>\n                        );\n                    }\n                });\n            }\n\n            console.error(\"[NotificationBannerHOC] Empty data passed\");\n            return null;\n        };\n\n        return (\n            <NBComponent forwardedRef={ref} {...props}>\n                {renderContent()}\n            </NBComponent>\n        );\n    };\n\n    return React.forwardRef(ComponentToReturn);\n};\n"],"names":["data","React","forwardRef","props","ref","_jsx","NBComponent","Object","assign","forwardedRef","children","length","map","attribute","index","type","otherAttributes","sanitizedContent","DOMPurify","sanitize","content","dangerouslySetInnerHTML","__html","attrs","href","rest","__rest","isValidAttribute","sanitizeLinkAttributes","_a","NotificationBanner","Link","console","error"],"mappings":"mTAiCIA,GAqDOC,EAAAA,QAAMC,YAnDa,CACtBC,EACAC,IA2CIC,EAAAA,IAACC,EAAAA,YAAWC,OAAAC,OAAA,CAACC,aAAcL,GAASD,EAAK,CAAAO,SAxCrCV,EAAKW,OAAS,EACPX,EAAKY,KAAI,CAACC,EAAWC,WACxB,GAAuB,SAAnBD,EAAUE,KAAiB,CAC3B,MAAMC,EACFH,EAAUG,gBAERC,EAAmBC,EAAAA,QAAUC,SAC/BN,EAAUO,SAEd,OACIf,EAAAA,IAAA,IAAAE,OAAAC,OAAA,GAEQQ,EAAe,CACnBK,wBAAyB,CACrBC,OAAQL,KAHPH,EAOjB,CAAO,CACH,MAAME,EAhD9B,SACIO,GAEA,MAAMC,KAAEA,GAAkBD,EAATE,EAAIC,EAAAA,OAAKH,EAApB,CAAA,SAEN,MACoB,iBAATC,GACNN,EAAAA,QAAUS,iBAAiB,IAAK,OAAQH,GAKtCD,EAHIE,CAIf,CAmCgDG,CACM,QAAzBC,EAAAhB,EAAUG,uBAAe,IAAAa,EAAAA,EACtB,CAAA,GAER,OACIxB,EAAAA,IAACyB,EAAAA,mBAAmBC,KAAIxB,OAAAC,OAAA,CAAA,EAEhBQ,EAAe,CAAAN,SAElBG,EAAUO,UAHNN,EAMjB,MAIRkB,QAAQC,MAAM,6CACP"}

package/cjs/pagination/pagination.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),i=require("@lifesg/react-icons/chevron-2-left"),a=require("@lifesg/react-icons/chevron-2-right"),n=require("@lifesg/react-icons/chevron-left"),t=require("@lifesg/react-icons/chevron-line-left"),s=require("@lifesg/react-icons/chevron-line-right"),r=require("@lifesg/react-icons/chevron-right"),l=require("@lifesg/react-icons/ellipsis-horizontal"),o=require("clsx"),c=require("react"),u=require("../input/input.js"),d=require("../input-select/input-select.js"),h=require("../shared/accessibility/index.js"),p=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"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var g=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var v=require("../util/use-mount.js"),f=require("../theme/utils/use-media-query.js"),j=require("../typography/index.js"),m=require("./pagination.styles.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var b=x(o);const q=x(c).default.forwardRef((({id:o,"data-testid":x,className:q,pageSize:I=10,totalItems:C,activePage:y,pageSizeOptions:k=N,showFirstAndLastNav:M,showPageSizeChanger:S=!1,onPageChange:B,onPageSizeChange:L},w)=>{const O=v.useIsMounted(),H=f.useMaxWidthMediaQuery("sm"),[$,z]=c.useState(!1),[E,P]=c.useState(!1),[F,R]=c.useState(""),[V,W]=c.useState(k[0]),[A,D]=c.useState(!H&&S&&V?V.value:I),T=`${g.useId()}-pagination`,Q=Math.ceil(C/A),G=1===y,J=y===Q,K=y>1?()=>ee(1):void 0,U=y<Q?()=>ee(Q):void 0,X=y>1?()=>ee(y-1):void 0,Y=y<Q?()=>ee(parseInt(y.toString())+1):void 0;c.useEffect((()=>{y&&Z(y)}),[y]),c.useEffect((()=>{D(I),W(k.find((e=>e.value===I)))}),[I]);const Z=e=>{R(e.toString())},_=()=>{z(!1),P(!1)},ee=e=>{B&&(B(e),Z(e))},ie=()=>{const e=Math.min(Q,y+5);ee(e),Z(e),z(!0),P(!1)},ae=()=>{const e=Math.max(1,y-5);ee(e),Z(e),z(!1),P(!0)},ne=e=>{const i=e.target.value;if(void 0===i||0===i.length)R("");else if(/^[0-9]+$/.test(i)){const e=parseInt(i.replace(/[^0-9]/g,""));Z(Math.max(1,Math.min(Q,e)))}else R(i.replace(/[^0-9]/g,""))},te=e=>{e.preventDefault(),F&&(null==B||B(parseInt(F)))},se=()=>{z(!0)},re=()=>{z(!1)},le=()=>{P(!0)},oe=()=>{P(!1)},ce=a=>e.jsxs("div",{className:m.ellipsisContainer,children:[e.jsx(p.ClickableIcon,{className:m.iconButton,focusHighlight:!1,focusOutline:"browser","aria-label":"Previous 5 pages",onMouseEnter:le,onMouseLeave:oe,onFocus:le,onBlur:oe,onClick:ae,children:E?e.jsx(i.Chevron2LeftIcon,{"aria-hidden":!0}):e.jsx(l.EllipsisHorizontalIcon,{"aria-hidden":!0})}),E&&e.jsx("div",{className:m.hover,children:"Previous 5 pages"})]},a),ue=i=>e.jsxs("div",{className:m.ellipsisContainer,children:[e.jsx(p.ClickableIcon,{className:m.iconButton,focusHighlight:!1,focusOutline:"browser","aria-label":"Next 5 pages",onMouseEnter:se,onMouseLeave:re,onFocus:se,onBlur:re,onClick:ie,children:$?e.jsx(a.Chevron2RightIcon,{"aria-hidden":!0}):e.jsx(l.EllipsisHorizontalIcon,{"aria-hidden":!0})}),$&&e.jsx("div",{className:m.hover,children:"Next 5 pages"})]},i);return e.jsxs("nav",{className:b.default(m.paginationWrapper,q),ref:w,id:o||"pagination-wrapper","data-testid":x||"pagination","aria-labelledby":T,children:[e.jsx(h.VisuallyHidden,{id:T,"aria-hidden":!0,children:"pagination"}),e.jsx("div",{className:m.paginationList,children:e.jsxs("div",{className:m.paginationMenu,children:[M&&e.jsx(p.ClickableIcon,{className:b.default(m.iconButton,m.iconButtonNavigation),onClick:K,disabled:G,focusHighlight:!1,"aria-label":"First page",focusOutline:"browser",children:e.jsx(t.ChevronLineLeftIcon,{"aria-hidden":!0})}),e.jsx(p.ClickableIcon,{className:b.default(m.iconButton,m.iconButtonNavigation),onClick:X,disabled:G,focusHighlight:!1,"aria-label":"Previous page",focusOutline:"browser",children:e.jsx(n.ChevronLeftIcon,{"aria-hidden":!0})}),O&&H?e.jsxs("div",{className:m.paginationMobileInput,children:[e.jsx("form",{onSubmit:te,children:e.jsx(u.Input,{className:m.inputView,value:F,onChange:ne,autoComplete:"off",type:"numeric",id:(o||"pagination")+"-input","data-testid":(x||"pagination")+"-input","aria-label":`Page ${y} of ${Q}`})}),e.jsx(j.Typography.BodyBL,{className:m.labelDivider,children:"/"}),e.jsx(j.Typography.BodyBL,{className:m.label,children:Q})]}):[...Array(Q)].map(((i,a)=>{const n=a+1,t=Q-5,s=y===n;return Q<=7?e.jsx("button",{onClick:()=>ee(n),className:b.default(m.pageItem,s&&m.pageItemSelected),"aria-label":`page ${n} of ${Q}`,"aria-current":!!s&&"page",onMouseOver:_,onFocus:_,children:n},n):y+1>5&&2===n?ce(n):y-1<=t&&n===Q-1-1?ue(n):n<=5&&y+1<=5||n<=1||n===y||n<=y+1&&n>=y-1-1||n>t&&y-1>t||n>Q-1?e.jsx("button",{onClick:()=>ee(n),className:b.default(m.pageItem,s&&m.pageItemSelected),"aria-label":`page ${n} of ${Q}`,"aria-current":!!s&&"page",onMouseOver:_,onFocus:_,children:n},n):null})),e.jsx(p.ClickableIcon,{className:b.default(m.iconButton,m.iconButtonNavigation),onClick:Y,disabled:J,focusHighlight:!1,"aria-label":"Next page",focusOutline:"browser",children:e.jsx(r.ChevronRightIcon,{"aria-hidden":!0})}),M&&e.jsx(p.ClickableIcon,{className:b.default(m.iconButton,m.iconButtonNavigation),onClick:U,disabled:J,focusHighlight:!1,"aria-label":"Last page",focusOutline:"browser",children:e.jsx(s.ChevronLineRightIcon,{"aria-hidden":!0})})]})}),S&&!H&&e.jsxs("div",{className:m.inputSelectWrapper,children:[e.jsx(h.VisuallyHidden,{id:`${T}-page-size`,children:"Items per page"}),e.jsx(d.InputSelect,{"aria-labelledby":`${T}-page-size`,options:k,valueExtractor:e=>e.value,listExtractor:e=>e.label,displayValueExtractor:e=>e.label,selectedOption:V,onSelectOption:e=>{W(e);const i=e.value,a=Math.ceil(C/i);D(i);L&&L(y>=a?a:y,i)}})]})]})})),N=[{value:10,label:"10 per page"},{value:20,label:"20 per page"},{value:30,label:"30 per page"}];exports.Pagination=q;
+"use strict";var e=require("react/jsx-runtime"),i=require("@lifesg/react-icons/chevron-2-left"),a=require("@lifesg/react-icons/chevron-2-right"),t=require("@lifesg/react-icons/chevron-left"),n=require("@lifesg/react-icons/chevron-line-left"),r=require("@lifesg/react-icons/chevron-line-right"),s=require("@lifesg/react-icons/chevron-right"),l=require("@lifesg/react-icons/ellipsis-horizontal"),o=require("clsx"),c=require("react"),u=require("../input/input.js"),d=require("../input-select/input-select.js"),h=require("../shared/accessibility/index.js"),p=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"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var g=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var v=require("../util/use-mount.js"),f=require("../theme/utils/use-media-query.js"),j=require("../typography/index.js"),m=require("./pagination.styles.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var b=x(o);const q=x(c).default.forwardRef((({id:o,"data-testid":x,className:q,variant:I="default",pageSize:C=10,totalItems:y,activePage:k,pageSizeOptions:M=N,showFirstAndLastNav:B,showPageSizeChanger:S=!1,onPageChange:L,onPageSizeChange:w},O)=>{const H=v.useIsMounted(),$=f.useMaxWidthMediaQuery("sm"),z="default"===I?H&&$?"compact":"full":I,E="compact"===z,P=S&&"full"===z,[F,R]=c.useState(!1),[V,W]=c.useState(!1),[A,D]=c.useState(""),[T,Q]=c.useState(C),G=((e,i)=>{var a;return null!==(a=e.find((e=>e.value===i)))&&void 0!==a?a:e[0]})(M,T),J=`${g.useId()}-pagination`,K=Math.ceil(y/T),U=1===k,X=k===K,Y=k>1?()=>te(1):void 0,Z=k<K?()=>te(K):void 0,_=k>1?()=>te(k-1):void 0,ee=k<K?()=>te(parseInt(k.toString())+1):void 0;c.useEffect((()=>{k&&ie(k)}),[k]),c.useEffect((()=>{Q(C)}),[C]);const ie=e=>{D(e.toString())},ae=()=>{R(!1),W(!1)},te=e=>{L&&(L(e),ie(e))},ne=()=>{const e=Math.min(K,k+5);te(e),ie(e),R(!0),W(!1)},re=()=>{const e=Math.max(1,k-5);te(e),ie(e),R(!1),W(!0)},se=e=>{const i=e.target.value;if(void 0===i||0===i.length)D("");else if(/^[0-9]+$/.test(i)){const e=parseInt(i.replace(/[^0-9]/g,""));ie(Math.max(1,Math.min(K,e)))}else D(i.replace(/[^0-9]/g,""))},le=e=>{e.preventDefault(),A&&(null==L||L(parseInt(A)))},oe=()=>{R(!0)},ce=()=>{R(!1)},ue=()=>{W(!0)},de=()=>{W(!1)},he=a=>e.jsxs("div",{className:m.ellipsisContainer,children:[e.jsx(p.ClickableIcon,{className:m.iconButton,focusHighlight:!1,focusOutline:"browser","aria-label":"Previous 5 pages",onMouseEnter:ue,onMouseLeave:de,onFocus:ue,onBlur:de,onClick:re,children:V?e.jsx(i.Chevron2LeftIcon,{"aria-hidden":!0}):e.jsx(l.EllipsisHorizontalIcon,{"aria-hidden":!0})}),V&&e.jsx("div",{className:m.hover,children:"Previous 5 pages"})]},a),pe=i=>e.jsxs("div",{className:m.ellipsisContainer,children:[e.jsx(p.ClickableIcon,{className:m.iconButton,focusHighlight:!1,focusOutline:"browser","aria-label":"Next 5 pages",onMouseEnter:oe,onMouseLeave:ce,onFocus:oe,onBlur:ce,onClick:ne,children:F?e.jsx(a.Chevron2RightIcon,{"aria-hidden":!0}):e.jsx(l.EllipsisHorizontalIcon,{"aria-hidden":!0})}),F&&e.jsx("div",{className:m.hover,children:"Next 5 pages"})]},i);return e.jsxs("nav",{className:b.default(m.paginationWrapper,q),ref:O,id:o||"pagination-wrapper","data-testid":x||"pagination","aria-labelledby":J,children:[e.jsx(h.VisuallyHidden,{id:J,"aria-hidden":!0,children:"pagination"}),e.jsx("div",{className:m.paginationList,children:e.jsxs("div",{className:m.paginationMenu,children:[B&&e.jsx(p.ClickableIcon,{className:b.default(m.iconButton,m.iconButtonNavigation),onClick:Y,disabled:U,focusHighlight:!1,"aria-label":"First page",focusOutline:"browser",children:e.jsx(n.ChevronLineLeftIcon,{"aria-hidden":!0})}),e.jsx(p.ClickableIcon,{className:b.default(m.iconButton,m.iconButtonNavigation),onClick:_,disabled:U,focusHighlight:!1,"aria-label":"Previous page",focusOutline:"browser",children:e.jsx(t.ChevronLeftIcon,{"aria-hidden":!0})}),E?e.jsxs("div",{className:m.paginationMobileInput,children:[e.jsx("form",{onSubmit:le,children:e.jsx(u.Input,{className:m.inputView,value:A,onChange:se,autoComplete:"off",type:"numeric",id:(o||"pagination")+"-input","data-testid":(x||"pagination")+"-input","aria-label":`Page ${k} of ${K}`})}),e.jsx(j.Typography.BodyBL,{className:m.labelDivider,children:"/"}),e.jsx(j.Typography.BodyBL,{className:m.label,children:K})]}):[...Array(K)].map(((i,a)=>{const t=a+1,n=K-5,r=k===t;return K<=7?e.jsx("button",{onClick:()=>te(t),className:b.default(m.pageItem,r&&m.pageItemSelected),"aria-label":`page ${t} of ${K}`,"aria-current":!!r&&"page",onMouseOver:ae,onFocus:ae,children:t},t):k+1>5&&2===t?he(t):k-1<=n&&t===K-1-1?pe(t):t<=5&&k+1<=5||t<=1||t===k||t<=k+1&&t>=k-1-1||t>n&&k-1>n||t>K-1?e.jsx("button",{onClick:()=>te(t),className:b.default(m.pageItem,r&&m.pageItemSelected),"aria-label":`page ${t} of ${K}`,"aria-current":!!r&&"page",onMouseOver:ae,onFocus:ae,children:t},t):null})),e.jsx(p.ClickableIcon,{className:b.default(m.iconButton,m.iconButtonNavigation),onClick:ee,disabled:X,focusHighlight:!1,"aria-label":"Next page",focusOutline:"browser",children:e.jsx(s.ChevronRightIcon,{"aria-hidden":!0})}),B&&e.jsx(p.ClickableIcon,{className:b.default(m.iconButton,m.iconButtonNavigation),onClick:Z,disabled:X,focusHighlight:!1,"aria-label":"Last page",focusOutline:"browser",children:e.jsx(r.ChevronLineRightIcon,{"aria-hidden":!0})})]})}),P&&e.jsxs("div",{className:m.inputSelectWrapper,children:[e.jsx(h.VisuallyHidden,{id:`${J}-page-size`,children:"Items per page"}),e.jsx(d.InputSelect,{"aria-labelledby":`${J}-page-size`,options:M,valueExtractor:e=>e.value,listExtractor:e=>e.label,displayValueExtractor:e=>e.label,selectedOption:G,onSelectOption:e=>{const i=e.value,a=Math.ceil(y/i);Q(i);w&&w(k>=a?a:k,i)}})]})]})})),N=[{value:10,label:"10 per page"},{value:20,label:"20 per page"},{value:30,label:"30 per page"}];exports.Pagination=q;
 //# sourceMappingURL=pagination.js.map