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

package/cjs/navbar/drawer.styles_7hnxp5.css

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

package/cjs/navbar/menu.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),n=require("react/jsx-runtime"),r=require("./menu.styles.js");exports.Menu=({items:t,onItemClick:i})=>{const s=e=>n=>{n.stopPropagation(),i(n,e)};return(null==t?void 0:t.length)?n.jsx(r.MobileWrapper,{children:t.map(((t,i)=>{const{children:l,options:o}=t,u=e.__rest(t,["children","options"]),c=`menu__mobile-${i+1}`;return n.jsx(r.MenuItem,{children:n.jsx(r.Link,Object.assign({"data-testid":c},u,o,{onClick:s(t),underlineStyle:"none",children:l}))},i)}))}):n.jsx(n.Fragment,{})};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),n=require("../typography/index.js"),s=require("./menu.styles.js");exports.Menu=({items:i,onItemClick:t})=>{const l=e=>r=>{r.stopPropagation(),t(r,e)};return(null==i?void 0:i.length)?r.jsx("ul",{className:s.mobileWrapper,children:i.map(((i,t)=>{const{children:a,options:o}=i,u=e.__rest(i,["children","options"]),c=`menu__mobile-${t+1}`;return r.jsx("li",{className:s.menuItem,children:r.jsx(n.Typography.LinkBL,Object.assign({className:s.link,"data-testid":c},u,o,{onClick:l(i),underlineStyle:"none",children:a}))},t)}))}):r.jsx(r.Fragment,{})};
 //# sourceMappingURL=menu.js.map

package/cjs/navbar/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sources":["../../../src/navbar/menu.tsx"],"sourcesContent":["import type React from \"react\";\n\nimport { Link, MenuItem, MobileWrapper } from \"./menu.styles\";\nimport type { NavItemCommonProps } from \"./types\";\n\ninterface Props<T> {\n    items: NavItemCommonProps<T>[];\n    onItemClick: (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemCommonProps<T>\n    ) => void;\n}\n\nexport const Menu = <T,>({ items, onItemClick }: Props<T>): JSX.Element => {\n    const handleLinkClick = (item: NavItemCommonProps<T>) => {\n        return (event: React.MouseEvent<HTMLAnchorElement>) => {\n            event.stopPropagation(); // in mobile, this prevents the drawer from intercepting event\n            onItemClick(event, item);\n        };\n    };\n\n    if (!items?.length) return <></>;\n\n    return (\n        <MobileWrapper>\n            {items.map((item, index) => {\n                const { children, options, ...otherItemAttrs } = item;\n                const testId = `menu__mobile-${index + 1}`;\n\n                return (\n                    <MenuItem key={index}>\n                        <Link\n                            data-testid={testId}\n                            {...otherItemAttrs}\n                            {...options}\n                            onClick={handleLinkClick(item)}\n                            underlineStyle=\"none\"\n                        >\n                            {children}\n                        </Link>\n                    </MenuItem>\n                );\n            })}\n        </MobileWrapper>\n    );\n};\n"],"names":["items","onItemClick","handleLinkClick","item","event","stopPropagation","length","_jsx","MobileWrapper","children","map","index","options","otherItemAttrs","__rest","testId","MenuItem","Link","Object","assign","onClick","underlineStyle"],"mappings":"8HAaoB,EAAOA,QAAOC,kBAC9B,MAAMC,EAAmBC,GACbC,IACJA,EAAMC,kBACNJ,EAAYG,EAAOD,EAAK,EAIhC,OAAKH,aAAK,EAALA,EAAOM,QAGRC,EAAAA,IAACC,EAAAA,cAAa,CAAAC,SACTT,EAAMU,KAAI,CAACP,EAAMQ,KACd,MAAMF,SAAEA,EAAQG,QAAEA,GAA+BT,EAAnBU,EAAcC,EAAAA,OAAKX,EAA3C,CAAA,WAAA,YACAY,EAAS,gBAAgBJ,EAAQ,IAEvC,OACIJ,MAACS,EAAAA,SAAQ,CAAAP,SACLF,EAAAA,IAACU,OAAIC,OAAAC,OAAA,CAAA,cACYJ,GACTF,EACAD,GACJQ,QAASlB,EAAgBC,GACzBkB,eAAe,OAAMZ,SAEpBA,MARME,EAUJ,MAnBAJ,EAAAA,kBAsBP"}
+{"version":3,"file":"menu.js","sources":["../../../src/navbar/menu.tsx"],"sourcesContent":["import type React from \"react\";\n\nimport { Typography } from \"../typography\";\nimport * as styles from \"./menu.styles\";\nimport type { NavItemCommonProps } from \"./types\";\n\ninterface Props<T> {\n    items: NavItemCommonProps<T>[];\n    onItemClick: (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemCommonProps<T>\n    ) => void;\n}\n\nexport const Menu = <T,>({ items, onItemClick }: Props<T>): JSX.Element => {\n    const handleLinkClick = (item: NavItemCommonProps<T>) => {\n        return (event: React.MouseEvent<HTMLAnchorElement>) => {\n            event.stopPropagation(); // in mobile, this prevents the drawer from intercepting event\n            onItemClick(event, item);\n        };\n    };\n\n    if (!items?.length) return <></>;\n\n    return (\n        <ul className={styles.mobileWrapper}>\n            {items.map((item, index) => {\n                const { children, options, ...otherItemAttrs } = item;\n                const testId = `menu__mobile-${index + 1}`;\n\n                return (\n                    <li key={index} className={styles.menuItem}>\n                        <Typography.LinkBL\n                            className={styles.link}\n                            data-testid={testId}\n                            {...otherItemAttrs}\n                            {...options}\n                            onClick={handleLinkClick(item)}\n                            underlineStyle=\"none\"\n                        >\n                            {children}\n                        </Typography.LinkBL>\n                    </li>\n                );\n            })}\n        </ul>\n    );\n};\n"],"names":["items","onItemClick","handleLinkClick","item","event","stopPropagation","length","_jsx","className","styles.mobileWrapper","children","map","index","options","otherItemAttrs","__rest","testId","styles.menuItem","Typography","LinkBL","styles.link","onClick","underlineStyle"],"mappings":"kKAcoB,EAAOA,QAAOC,kBAC9B,MAAMC,EAAmBC,GACbC,IACJA,EAAMC,kBACNJ,EAAYG,EAAOD,EAAK,EAIhC,OAAKH,aAAK,EAALA,EAAOM,QAGRC,MAAA,KAAA,CAAIC,UAAWC,EAAAA,cAAoBC,SAC9BV,EAAMW,KAAI,CAACR,EAAMS,KACd,MAAMF,SAAEA,EAAQG,QAAEA,GAA+BV,EAAnBW,EAAcC,EAAAA,OAAKZ,EAA3C,CAAA,WAAA,YACAa,EAAS,gBAAgBJ,EAAQ,IAEvC,OACIL,EAAAA,IAAA,KAAA,CAAgBC,UAAWS,EAAAA,SAAeP,SACtCH,EAAAA,IAACW,EAAAA,WAAWC,sBACRX,UAAWY,EAAAA,mBACEJ,GACTF,EACAD,EAAO,CACXQ,QAASnB,EAAgBC,GACzBmB,eAAe,gBAEdZ,MATAE,EAWJ,MApBML,EAAAA,kBAuBlB"}

package/cjs/navbar/menu.styles.js

@@ -1,35 +1,2 @@
-"use strict";var e=require("styled-components"),r=require("../shared/styles/index.js"),i=require("../typography/index.js"),t=require("../v3_theme/index.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=o(e);const s=l.default.ul`
-    list-style: none;
-    display: flex;
-    flex-direction: column;
-
-    margin: 0;
-    padding: 0;
-
-    border-left: ${t.V3_Border["width-040"]} solid ${t.V3_Colour["border-selected"]};
-`,a=l.default.li`
-    width: 100%;
-    display: flex;
-`,d=l.default(i.Typography.LinkBL)`
-    width: 100%;
-    text-align: left;
-    color: ${t.V3_Colour.text};
-
-    margin: 0 ${t.V3_Spacing["spacing-8"]};
-
-    // use border, as padding still shows an extra line after the ellipsis
-    border: ${t.V3_Border.solid} transparent;
-    border-width: ${t.V3_Spacing["spacing-12"]} ${t.V3_Spacing["spacing-8"]};
-    border-radius: ${t.V3_Radius.md};
-
-    ${r.lineClampCss(2)}
-    white-space: pre-wrap;
-
-    &:hover,
-    &:active,
-    &:focus {
-        background-color: ${t.V3_Colour["bg-hover"]};
-        color: ${t.V3_Colour.text};
-    }
-`;exports.Link=d,exports.MenuItem=a,exports.MobileWrapper=s;
+"use strict";require("./menu.styles_gdpqc.css");exports.link="l1t9jy07",exports.menuItem="m6cy0t7",exports.mobileWrapper="m1lq4qov";
 //# sourceMappingURL=menu.styles.js.map

package/cjs/navbar/menu.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.styles.js","sources":["../../../src/navbar/menu.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport { Typography } from \"../typography\";\nimport { V3_Border, V3_Colour, V3_Radius, V3_Spacing } from \"../v3_theme\";\n\nexport const MobileWrapper = styled.ul`\n    list-style: none;\n    display: flex;\n    flex-direction: column;\n\n    margin: 0;\n    padding: 0;\n\n    border-left: ${V3_Border[\"width-040\"]} solid ${V3_Colour[\"border-selected\"]};\n`;\n\nexport const MenuItem = styled.li`\n    width: 100%;\n    display: flex;\n`;\n\nexport const Link = styled(Typography.LinkBL)`\n    width: 100%;\n    text-align: left;\n    color: ${V3_Colour[\"text\"]};\n\n    margin: 0 ${V3_Spacing[\"spacing-8\"]};\n\n    // use border, as padding still shows an extra line after the ellipsis\n    border: ${V3_Border[\"solid\"]} transparent;\n    border-width: ${V3_Spacing[\"spacing-12\"]} ${V3_Spacing[\"spacing-8\"]};\n    border-radius: ${V3_Radius[\"md\"]};\n\n    ${lineClampCss(2)}\n    white-space: pre-wrap;\n\n    &:hover,\n    &:active,\n    &:focus {\n        background-color: ${V3_Colour[\"bg-hover\"]};\n        color: ${V3_Colour[\"text\"]};\n    }\n`;\n"],"names":["MobileWrapper","styled","ul","V3_Border","V3_Colour","MenuItem","li","Link","Typography","LinkBL","V3_Spacing","V3_Radius","lineClampCss"],"mappings":"gPAMO,MAAMA,EAAgBC,EAAAA,QAAOC,EAAE;;;;;;;;mBAQnBC,EAAAA,UAAU,sBAAsBC,EAAAA,UAAU;EAGhDC,EAAWJ,EAAAA,QAAOK,EAAE;;;EAKpBC,EAAON,EAAAA,QAAOO,aAAWC,OAAO;;;aAGhCL,EAAAA,UAAgB;;gBAEbM,EAAAA,WAAW;;;cAGbP,EAAAA,UAAiB;oBACXO,EAAAA,WAAW,iBAAiBA,EAAAA,WAAW;qBACtCC,EAAAA,UAAc;;MAE7BC,EAAAA,aAAa;;;;;;4BAMSR,EAAAA,UAAU;iBACrBA,EAAAA,UAAgB;;"}
+{"version":3,"file":"menu.styles.js","sources":["../../../src/navbar/menu.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport { Border, Colour, Radius, Spacing } from \"../theme\";\n\nexport const mobileWrapper = css`\n    list-style: none;\n    display: flex;\n    flex-direction: column;\n\n    margin: 0;\n    padding: 0;\n\n    border-left: ${Border[\"width-040\"]} solid ${Colour[\"border-selected\"]};\n`;\n\nexport const menuItem = css`\n    width: 100%;\n    display: flex;\n`;\n\nexport const link = css`\n    width: 100%;\n    text-align: left;\n    color: ${Colour[\"text\"]};\n\n    margin: 0 ${Spacing[\"spacing-8\"]};\n\n    /* use border, as padding still shows an extra line after the ellipsis */\n    border: ${Border[\"solid\"]} transparent;\n    border-width: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-8\"]};\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"],"names":[],"mappings":"mFAqBiB,4BALI,gCAXK"}

package/cjs/navbar/menu.styles_gdpqc.css

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

package/cjs/navbar/navbar-action-buttons.js

@@ -1,2 +1,2 @@
-"use strict";var t=require("react/jsx-runtime"),e=require("../external/lodash/findIndex.js"),o=require("./navbar-action-buttons.styles.js");exports.NavbarActionButtons=({actionButtons:n,mobile:a=!1,onActionButtonClick:s})=>{const r=t=>{t.stopPropagation()},l=t=>e=>{e.stopPropagation(),"download"===t.type&&window.scrollTo({left:0,top:document.body.scrollHeight,behavior:"smooth"}),s(e,t)},i=(n,a)=>{const s=n?(t=>{const o=e.default(t,(t=>"download"===t.type));if(o>-1){const e=[...t],n=e.splice(o,1);return[...e,n[0]]}return t})(a):a;return s.map(((e,a)=>{let s;switch(e.type){case"download":s=n?(i=e.args,t.jsxs(o.DownloadAppWrapper,{children:[t.jsx(o.DownloadAppTitle,{weight:"semibold",children:i&&i.children||"Download the app"}),t.jsxs(o.DownloadAppImageLinkWrapper,{children:[t.jsx(o.DownloadAppImageLink,{href:"https://apps.apple.com/sg/app/moments-of-life/id1383218758",target:"_blank",rel:"noopener noreferrer","data-testid":"button__app-store",onClick:r,children:t.jsx("img",{src:"https://assets.life.gov.sg/react-design-system/img/download/apple-app-store.png",alt:"apple-app-store"})}),t.jsx(o.DownloadAppImageLink,{href:"https://play.google.com/store/apps/details?id=sg.gov.app.mol&hl=en_SG",target:"_blank",rel:"noopener noreferrer","data-testid":"button__play-store",onClick:r,children:t.jsx("img",{src:"https://assets.life.gov.sg/react-design-system/img/download/google-play-store.png",alt:"google-play-store"})})]})]})):t.jsx(o.ActionButton,Object.assign({},e.args,{type:"button",onClick:l(e),"data-testid":"action-button__download",children:"Download the app"}));break;case"button":{const r=e.args["data-testid"]?`action-button__${e.args["data-testid"]}`:`action-button__button-${n?"mobile-":""}${a+1}`;s=t.jsx(o.ActionButton,Object.assign({},e.args,{type:"button",onClick:l(e),"data-testid":r}));break}case"component":{const t=e.args;s=t&&t.render||null;break}default:s=null}var i;if(s)return t.jsx(o.ButtonItem,{$mobile:n,children:s},`action-button-${a+1}`)}))};if(n){const e=(null==n?void 0:n.mobile)||n.desktop,s=e.filter((t=>!!t.uncollapsible)),r=e.filter((t=>!t.uncollapsible));return a?t.jsx(t.Fragment,{children:r.length>0&&t.jsx(o.DrawerWrapper,{children:i(a,r)})}):t.jsxs(t.Fragment,{children:[s.length>0&&t.jsx(o.MobileWrapper,{children:i(!1,s)}),n.desktop.length>0&&t.jsx(o.Wrapper,{children:i(a,n.desktop)})]})}return t.jsx(t.Fragment,{})};
+"use strict";var e=require("react/jsx-runtime"),t=require("clsx"),a=require("../external/lodash/findIndex.js"),o=require("../button/button.js"),s=require("../typography/index.js"),n=require("./navbar-action-buttons.styles.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=l(t);exports.NavbarActionButtons=({actionButtons:t,mobile:l=!1,onActionButtonClick:i})=>{const d=e=>{e.stopPropagation()},p=e=>t=>{t.stopPropagation(),"download"===e.type&&window.scrollTo({left:0,top:document.body.scrollHeight,behavior:"smooth"}),i(t,e)},c=(t,l)=>{const i=t?(e=>{const t=a.default(e,(e=>"download"===e.type));if(t>-1){const a=[...e],o=a.splice(t,1);return[...a,o[0]]}return e})(l):l;return i.map(((a,l)=>{var i,c;let u;switch(a.type){case"download":u=t?(g=a.args,e.jsxs("div",{className:n.downloadAppWrapper,children:[e.jsx(s.Typography.BodyMD,{className:n.downloadAppTitle,weight:"semibold",children:g&&g.children||"Download the app"}),e.jsxs("div",{className:n.downloadAppImageLinkWrapper,children:[e.jsx("a",{className:n.downloadAppImageLink,href:"https://apps.apple.com/sg/app/moments-of-life/id1383218758",target:"_blank",rel:"noopener noreferrer","data-testid":"button__app-store",onClick:d,children:e.jsx("img",{src:"https://assets.life.gov.sg/react-design-system/img/download/apple-app-store.png",alt:"apple-app-store"})}),e.jsx("a",{className:n.downloadAppImageLink,href:"https://play.google.com/store/apps/details?id=sg.gov.app.mol&hl=en_SG",target:"_blank",rel:"noopener noreferrer","data-testid":"button__play-store",onClick:d,children:e.jsx("img",{src:"https://assets.life.gov.sg/react-design-system/img/download/google-play-store.png",alt:"google-play-store"})})]})]})):e.jsx(o.Button,Object.assign({},a.args,{className:r.default(n.actionButton,null===(i=a.args)||void 0===i?void 0:i.className),type:"button",sizeType:"small",onClick:p(a),"data-testid":"action-button__download",children:"Download the app"}));break;case"button":{const s=a.args["data-testid"]?`action-button__${a.args["data-testid"]}`:`action-button__button-${t?"mobile-":""}${l+1}`;u=e.jsx(o.Button,Object.assign({},a.args,{className:r.default(n.actionButton,null===(c=a.args)||void 0===c?void 0:c.className),type:"button",sizeType:"small",onClick:p(a),"data-testid":s}));break}case"component":{const e=a.args;u=e&&e.render||null;break}default:u=null}var g;if(u)return e.jsx("li",{className:r.default(n.buttonItem,t&&n.buttonItemMobile),children:u},`action-button-${l+1}`)}))};if(t){const a=(null==t?void 0:t.mobile)||t.desktop,o=a.filter((e=>!!e.uncollapsible)),s=a.filter((e=>!e.uncollapsible));return l?e.jsx(e.Fragment,{children:s.length>0&&e.jsx("ul",{className:n.drawerWrapper,children:c(l,s)})}):e.jsxs(e.Fragment,{children:[o.length>0&&e.jsx("ul",{className:n.mobileWrapper,children:c(!1,o)}),t.desktop.length>0&&e.jsx("ul",{className:n.wrapper,children:c(l,t.desktop)})]})}return e.jsx(e.Fragment,{})};
 //# sourceMappingURL=navbar-action-buttons.js.map

package/cjs/navbar/navbar-action-buttons.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar-action-buttons.js","sources":["../../../src/navbar/navbar-action-buttons.tsx"],"sourcesContent":["import findIndex from \"lodash/findIndex\";\nimport type React from \"react\";\n\nimport type { ButtonProps } from \"../button/types\";\nimport {\n    ActionButton,\n    ButtonItem,\n    DownloadAppImageLink,\n    DownloadAppImageLinkWrapper,\n    DownloadAppTitle,\n    DownloadAppWrapper,\n    DrawerWrapper,\n    MobileWrapper,\n    Wrapper,\n} from \"./navbar-action-buttons.styles\";\nimport type { NavbarActionButtonsProps, NavbarButtonProps } from \"./types\";\n\nconst APP_STORE_ICON =\n    \"https://assets.life.gov.sg/react-design-system/img/download/apple-app-store.png\";\nconst PLAY_STORE_ICON =\n    \"https://assets.life.gov.sg/react-design-system/img/download/google-play-store.png\";\n\ninterface Props {\n    actionButtons?: NavbarActionButtonsProps | undefined;\n    /** toggle for mobile or desktop view */\n    mobile?: boolean | undefined;\n    onActionButtonClick: (\n        event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<Element>,\n        actionButton: NavbarButtonProps\n    ) => void;\n    uncollapsible?: boolean | undefined;\n}\n\nexport const NavbarActionButtons = ({\n    actionButtons,\n    mobile = false,\n    onActionButtonClick,\n}: Props): JSX.Element => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDownloadAppImageLinkClick = (\n        event: React.MouseEvent<HTMLAnchorElement>\n    ) => {\n        /**\n         * Have to do this to prevent the Overlay\n         * from picking the click, causing the action\n         * to not be run\n         */\n        event.stopPropagation();\n    };\n\n    const handleActionButtonClick = (actionButton: NavbarButtonProps) => {\n        return (event: React.MouseEvent<HTMLButtonElement>) => {\n            event.stopPropagation(); // in mobile, this prevents the drawer from intercepting event\n            if (actionButton.type === \"download\") {\n                window.scrollTo({\n                    left: 0,\n                    top: document.body.scrollHeight,\n                    behavior: \"smooth\",\n                });\n            }\n\n            onActionButtonClick(event, actionButton);\n        };\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const moveDownloadButtonToTheBack = (\n        actionButtons: NavbarButtonProps[]\n    ): NavbarButtonProps[] => {\n        const downloadButtonIndex = findIndex(actionButtons, (button) => {\n            return button.type === \"download\";\n        });\n\n        if (downloadButtonIndex > -1) {\n            const updatedButtons = [...actionButtons];\n            const removedButtons = updatedButtons.splice(\n                downloadButtonIndex,\n                1\n            );\n\n            return [...updatedButtons, removedButtons[0]];\n        }\n\n        return actionButtons;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderDownloadAppMobileView = (args?: ButtonProps) => {\n        return (\n            <DownloadAppWrapper>\n                <DownloadAppTitle weight=\"semibold\">\n                    {(args && args.children) || \"Download the app\"}\n                </DownloadAppTitle>\n                <DownloadAppImageLinkWrapper>\n                    <DownloadAppImageLink\n                        href=\"https://apps.apple.com/sg/app/moments-of-life/id1383218758\"\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\"\n                        data-testid=\"button__app-store\"\n                        onClick={handleDownloadAppImageLinkClick}\n                    >\n                        <img src={APP_STORE_ICON} alt=\"apple-app-store\" />\n                    </DownloadAppImageLink>\n                    <DownloadAppImageLink\n                        href=\"https://play.google.com/store/apps/details?id=sg.gov.app.mol&hl=en_SG\"\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\"\n                        data-testid=\"button__play-store\"\n                        onClick={handleDownloadAppImageLinkClick}\n                    >\n                        <img src={PLAY_STORE_ICON} alt=\"google-play-store\" />\n                    </DownloadAppImageLink>\n                </DownloadAppImageLinkWrapper>\n            </DownloadAppWrapper>\n        );\n    };\n\n    const renderButtons = (\n        isMobile: boolean,\n        actionButtonList: NavbarButtonProps[]\n    ) => {\n        /**\n         * In drawer view, download app button will always be at\n         * the bottom, hence we will shift it to the back\n         */\n        const buttonsToRender = isMobile\n            ? moveDownloadButtonToTheBack(actionButtonList)\n            : actionButtonList;\n\n        return buttonsToRender.map((actionButton, index) => {\n            let component: React.ReactNode;\n            switch (actionButton.type) {\n                case \"download\":\n                    component = isMobile ? (\n                        renderDownloadAppMobileView(actionButton.args)\n                    ) : (\n                        <ActionButton\n                            {...actionButton.args}\n                            type=\"button\"\n                            onClick={handleActionButtonClick(actionButton)}\n                            data-testid=\"action-button__download\"\n                        >\n                            Download the app\n                        </ActionButton>\n                    );\n                    break;\n                case \"button\": {\n                    const testId = actionButton.args[\"data-testid\"]\n                        ? `action-button__${actionButton.args[\"data-testid\"]}`\n                        : `action-button__button-${isMobile ? \"mobile-\" : \"\"}${\n                              index + 1\n                          }`;\n\n                    component = (\n                        <ActionButton\n                            {...actionButton.args}\n                            type=\"button\"\n                            onClick={handleActionButtonClick(actionButton)}\n                            data-testid={testId}\n                        />\n                    );\n                    break;\n                }\n                case \"component\": {\n                    const args = actionButton.args;\n                    component = (args && args.render) || null;\n                    break;\n                }\n                default:\n                    component = null;\n                    break;\n            }\n\n            if (component) {\n                return (\n                    <ButtonItem\n                        key={`action-button-${index + 1}`}\n                        $mobile={isMobile}\n                    >\n                        {component}\n                    </ButtonItem>\n                );\n            }\n        });\n    };\n\n    if (actionButtons) {\n        const actionButtonList = actionButtons?.mobile || actionButtons.desktop;\n        const uncollapsableActionButtons = actionButtonList.filter(\n            (actionButton) => !!actionButton.uncollapsible\n        );\n        const collapsableActionButtons = actionButtonList.filter(\n            (actionButton) => !actionButton.uncollapsible\n        );\n        if (mobile) {\n            return (\n                <>\n                    {collapsableActionButtons.length > 0 && (\n                        <DrawerWrapper>\n                            {renderButtons(mobile, collapsableActionButtons)}\n                        </DrawerWrapper>\n                    )}\n                </>\n            );\n        } else {\n            return (\n                <>\n                    {uncollapsableActionButtons.length > 0 && (\n                        <MobileWrapper>\n                            {renderButtons(false, uncollapsableActionButtons)}\n                        </MobileWrapper>\n                    )}\n                    {actionButtons.desktop.length > 0 && (\n                        <Wrapper>\n                            {renderButtons(mobile, actionButtons.desktop)}\n                        </Wrapper>\n                    )}\n                </>\n            );\n        }\n    }\n\n    return <></>;\n};\n"],"names":["actionButtons","mobile","onActionButtonClick","handleDownloadAppImageLinkClick","event","stopPropagation","handleActionButtonClick","actionButton","type","window","scrollTo","left","top","document","body","scrollHeight","behavior","renderButtons","isMobile","actionButtonList","buttonsToRender","downloadButtonIndex","findIndex","button","updatedButtons","removedButtons","splice","moveDownloadButtonToTheBack","map","index","component","args","_jsxs","DownloadAppWrapper","_jsx","DownloadAppTitle","weight","children","DownloadAppImageLinkWrapper","DownloadAppImageLink","href","target","rel","onClick","src","alt","ActionButton","Object","assign","testId","render","ButtonItem","$mobile","desktop","uncollapsableActionButtons","filter","uncollapsible","collapsableActionButtons","length","DrawerWrapper","MobileWrapper","Wrapper"],"mappings":"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"}
+{"version":3,"file":"navbar-action-buttons.js","sources":["../../../src/navbar/navbar-action-buttons.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport findIndex from \"lodash/findIndex\";\nimport type React from \"react\";\n\nimport { Button } from \"../button\";\nimport type { ButtonProps } from \"../button/types\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./navbar-action-buttons.styles\";\nimport type { NavbarActionButtonsProps, NavbarButtonProps } from \"./types\";\n\nconst APP_STORE_ICON =\n    \"https://assets.life.gov.sg/react-design-system/img/download/apple-app-store.png\";\nconst PLAY_STORE_ICON =\n    \"https://assets.life.gov.sg/react-design-system/img/download/google-play-store.png\";\n\ninterface Props {\n    actionButtons?: NavbarActionButtonsProps | undefined;\n    /** toggle for mobile or desktop view */\n    mobile?: boolean | undefined;\n    onActionButtonClick: (\n        event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<Element>,\n        actionButton: NavbarButtonProps\n    ) => void;\n    uncollapsible?: boolean | undefined;\n}\n\nexport const NavbarActionButtons = ({\n    actionButtons,\n    mobile = false,\n    onActionButtonClick,\n}: Props): JSX.Element => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDownloadAppImageLinkClick = (\n        event: React.MouseEvent<HTMLAnchorElement>\n    ) => {\n        /**\n         * Have to do this to prevent the Overlay\n         * from picking the click, causing the action\n         * to not be run\n         */\n        event.stopPropagation();\n    };\n\n    const handleActionButtonClick = (actionButton: NavbarButtonProps) => {\n        return (event: React.MouseEvent<HTMLButtonElement>) => {\n            event.stopPropagation(); // in mobile, this prevents the drawer from intercepting event\n            if (actionButton.type === \"download\") {\n                window.scrollTo({\n                    left: 0,\n                    top: document.body.scrollHeight,\n                    behavior: \"smooth\",\n                });\n            }\n\n            onActionButtonClick(event, actionButton);\n        };\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const moveDownloadButtonToTheBack = (\n        actionButtons: NavbarButtonProps[]\n    ): NavbarButtonProps[] => {\n        const downloadButtonIndex = findIndex(actionButtons, (button) => {\n            return button.type === \"download\";\n        });\n\n        if (downloadButtonIndex > -1) {\n            const updatedButtons = [...actionButtons];\n            const removedButtons = updatedButtons.splice(\n                downloadButtonIndex,\n                1\n            );\n\n            return [...updatedButtons, removedButtons[0]];\n        }\n\n        return actionButtons;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderDownloadAppMobileView = (args?: ButtonProps) => {\n        return (\n            <div className={styles.downloadAppWrapper}>\n                <Typography.BodyMD\n                    className={styles.downloadAppTitle}\n                    weight=\"semibold\"\n                >\n                    {(args && args.children) || \"Download the app\"}\n                </Typography.BodyMD>\n                <div className={styles.downloadAppImageLinkWrapper}>\n                    <a\n                        className={styles.downloadAppImageLink}\n                        href=\"https://apps.apple.com/sg/app/moments-of-life/id1383218758\"\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\"\n                        data-testid=\"button__app-store\"\n                        onClick={handleDownloadAppImageLinkClick}\n                    >\n                        <img src={APP_STORE_ICON} alt=\"apple-app-store\" />\n                    </a>\n                    <a\n                        className={styles.downloadAppImageLink}\n                        href=\"https://play.google.com/store/apps/details?id=sg.gov.app.mol&hl=en_SG\"\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\"\n                        data-testid=\"button__play-store\"\n                        onClick={handleDownloadAppImageLinkClick}\n                    >\n                        <img src={PLAY_STORE_ICON} alt=\"google-play-store\" />\n                    </a>\n                </div>\n            </div>\n        );\n    };\n\n    const renderButtons = (\n        isMobile: boolean,\n        actionButtonList: NavbarButtonProps[]\n    ) => {\n        /**\n         * In drawer view, download app button will always be at\n         * the bottom, hence we will shift it to the back\n         */\n        const buttonsToRender = isMobile\n            ? moveDownloadButtonToTheBack(actionButtonList)\n            : actionButtonList;\n\n        return buttonsToRender.map((actionButton, index) => {\n            let component: React.ReactNode;\n            switch (actionButton.type) {\n                case \"download\":\n                    component = isMobile ? (\n                        renderDownloadAppMobileView(actionButton.args)\n                    ) : (\n                        <Button\n                            {...actionButton.args}\n                            className={clsx(\n                                styles.actionButton,\n                                actionButton.args?.className\n                            )}\n                            type=\"button\"\n                            sizeType=\"small\"\n                            onClick={handleActionButtonClick(actionButton)}\n                            data-testid=\"action-button__download\"\n                        >\n                            Download the app\n                        </Button>\n                    );\n                    break;\n                case \"button\": {\n                    const testId = actionButton.args[\"data-testid\"]\n                        ? `action-button__${actionButton.args[\"data-testid\"]}`\n                        : `action-button__button-${isMobile ? \"mobile-\" : \"\"}${\n                              index + 1\n                          }`;\n\n                    component = (\n                        <Button\n                            {...actionButton.args}\n                            className={clsx(\n                                styles.actionButton,\n                                actionButton.args?.className\n                            )}\n                            type=\"button\"\n                            sizeType=\"small\"\n                            onClick={handleActionButtonClick(actionButton)}\n                            data-testid={testId}\n                        />\n                    );\n                    break;\n                }\n                case \"component\": {\n                    const args = actionButton.args;\n                    component = (args && args.render) || null;\n                    break;\n                }\n                default:\n                    component = null;\n                    break;\n            }\n\n            if (component) {\n                return (\n                    <li\n                        key={`action-button-${index + 1}`}\n                        className={clsx(\n                            styles.buttonItem,\n                            isMobile && styles.buttonItemMobile\n                        )}\n                    >\n                        {component}\n                    </li>\n                );\n            }\n        });\n    };\n\n    if (actionButtons) {\n        const actionButtonList = actionButtons?.mobile || actionButtons.desktop;\n        const uncollapsableActionButtons = actionButtonList.filter(\n            (actionButton) => !!actionButton.uncollapsible\n        );\n        const collapsableActionButtons = actionButtonList.filter(\n            (actionButton) => !actionButton.uncollapsible\n        );\n        if (mobile) {\n            return (\n                <>\n                    {collapsableActionButtons.length > 0 && (\n                        <ul className={styles.drawerWrapper}>\n                            {renderButtons(mobile, collapsableActionButtons)}\n                        </ul>\n                    )}\n                </>\n            );\n        } else {\n            return (\n                <>\n                    {uncollapsableActionButtons.length > 0 && (\n                        <ul className={styles.mobileWrapper}>\n                            {renderButtons(false, uncollapsableActionButtons)}\n                        </ul>\n                    )}\n                    {actionButtons.desktop.length > 0 && (\n                        <ul className={styles.wrapper}>\n                            {renderButtons(mobile, actionButtons.desktop)}\n                        </ul>\n                    )}\n                </>\n            );\n        }\n    }\n\n    return <></>;\n};\n"],"names":["actionButtons","mobile","onActionButtonClick","handleDownloadAppImageLinkClick","event","stopPropagation","handleActionButtonClick","actionButton","type","window","scrollTo","left","top","document","body","scrollHeight","behavior","renderButtons","isMobile","actionButtonList","buttonsToRender","downloadButtonIndex","findIndex","button","updatedButtons","removedButtons","splice","moveDownloadButtonToTheBack","map","index","component","args","_jsxs","className","styles.downloadAppWrapper","children","_jsx","Typography","BodyMD","styles.downloadAppTitle","weight","styles.downloadAppImageLinkWrapper","styles.downloadAppImageLink","href","target","rel","onClick","src","alt","Button","Object","assign","clsx","styles.actionButton","_a","sizeType","testId","_b","render","styles.buttonItem","styles.buttonItemMobile","desktop","uncollapsableActionButtons","filter","uncollapsible","collapsableActionButtons","_Fragment","length","styles.drawerWrapper","styles.mobileWrapper","styles.wrapper"],"mappings":"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"}

package/cjs/navbar/navbar-action-buttons.styles.js

@@ -1,101 +1,2 @@
-"use strict";var i=require("styled-components"),e=require("../button/button.js"),t=require("../typography/index.js"),a=require("../v3_theme/index.js");function n(i){return i&&"object"==typeof i&&"default"in i?i:{default:i}}var p=n(i);const r=p.default.ul`
-    display: flex;
-    list-style: none;
-    margin-left: ${a.V3_Spacing["spacing-64"]};
-    flex-shrink: 0;
-
-    ${a.V3_MediaQuery.MaxWidth.lg} {
-        display: none;
-    }
-`,d=p.default.ul`
-    display: none;
-
-    ${a.V3_MediaQuery.MaxWidth.lg} {
-        display: flex;
-        list-style: none;
-        margin-left: ${a.V3_Spacing["spacing-64"]};
-        flex-shrink: 0;
-    }
-`,l=p.default.ul`
-    display: none;
-    list-style: none;
-
-    ${a.V3_MediaQuery.MaxWidth.lg} {
-        display: flex;
-        flex-direction: column;
-        margin-top: ${a.V3_Spacing["spacing-40"]};
-        width: max-content;
-        min-width: 22rem;
-        max-width: 24rem;
-    }
-
-    ${a.V3_MediaQuery.MaxWidth.sm} {
-        width: 100%;
-        max-width: unset;
-        min-width: unset;
-    }
-`,o=p.default.li`
-    position: relative;
-    display: flex;
-    align-items: center;
-
-    &:not(:last-of-type) {
-        margin-right: ${a.V3_Spacing["spacing-16"]};
-    }
-
-    ${a.V3_MediaQuery.MaxWidth.lg} {
-        width: 100%;
-        padding: 0 0 0 ${a.V3_Spacing["spacing-16"]};
-        justify-content: center;
-
-        &:not(:last-of-type) {
-            margin-right: 0;
-            margin-bottom: ${i=>i.$mobile?a.V3_Spacing["spacing-16"]:"0"};
-        }
-    }
-
-    ${a.V3_MediaQuery.MaxWidth.sm} {
-        ${e=>{if(e.$mobile)return i.css`
-                    padding: 0 ${a.V3_Spacing["spacing-16"]};
-                `}}
-    }
-`,s=p.default(e.Button.Small)`
-    ${a.V3_MediaQuery.MaxWidth.lg} {
-        width: 100%;
-    }
-`,g=p.default.div`
-    display: none;
-
-    ${a.V3_MediaQuery.MaxWidth.lg} {
-        display: flex;
-        flex-direction: column;
-        margin-top: ${a.V3_Spacing["spacing-40"]};
-    }
-`,u=p.default(t.Typography.BodyMD)`
-    margin-bottom: ${a.V3_Spacing["spacing-8"]};
-`,c=p.default.div`
-    display: flex;
-`,m=p.default.a`
-    &:not(:last-child) {
-        margin-right: ${a.V3_Spacing["spacing-16"]};
-    }
-
-    img {
-        width: auto;
-        height: auto;
-        object-fit: contain;
-    }
-
-    ${a.V3_MediaQuery.MaxWidth.lg} {
-        img {
-            max-width: 11rem;
-        }
-    }
-
-    ${a.V3_MediaQuery.MaxWidth.sm} {
-        img {
-            max-width: 100%;
-        }
-    }
-`;exports.ActionButton=s,exports.ButtonItem=o,exports.DownloadAppImageLink=m,exports.DownloadAppImageLinkWrapper=c,exports.DownloadAppTitle=u,exports.DownloadAppWrapper=g,exports.DrawerWrapper=l,exports.MobileWrapper=d,exports.Wrapper=r;
+"use strict";require("./navbar-action-buttons.styles_1vpm0nk.css");exports.actionButton="a11s4qne",exports.buttonItem="bmx9nfs",exports.buttonItemMobile="b1x8wy30",exports.downloadAppImageLink="dbo95jy",exports.downloadAppImageLinkWrapper="d1s552j0",exports.downloadAppTitle="dq81je7",exports.downloadAppWrapper="dvtt0j5",exports.drawerWrapper="d2uo9g4",exports.mobileWrapper="m1gsi5dr",exports.wrapper="w62j500";
 //# sourceMappingURL=navbar-action-buttons.styles.js.map

package/cjs/navbar/navbar-action-buttons.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar-action-buttons.styles.js","sources":["../../../src/navbar/navbar-action-buttons.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { Button } from \"../button\";\nimport { Typography } from \"../typography\";\nimport { V3_MediaQuery, V3_Spacing } from \"../v3_theme\";\n\n// =============================================================================\n// WRAPPER\n// =============================================================================\nexport const Wrapper = styled.ul`\n    display: flex;\n    list-style: none;\n    margin-left: ${V3_Spacing[\"spacing-64\"]};\n    flex-shrink: 0;\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        display: none;\n    }\n`;\n\nexport const MobileWrapper = styled.ul`\n    display: none;\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        display: flex;\n        list-style: none;\n        margin-left: ${V3_Spacing[\"spacing-64\"]};\n        flex-shrink: 0;\n    }\n`;\n\nexport const DrawerWrapper = styled.ul`\n    display: none;\n    list-style: none;\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        display: flex;\n        flex-direction: column;\n        margin-top: ${V3_Spacing[\"spacing-40\"]};\n        width: max-content;\n        min-width: 22rem;\n        max-width: 24rem;\n    }\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        width: 100%;\n        max-width: unset;\n        min-width: unset;\n    }\n`;\n\n// =============================================================================\n// BUTTON ITEMS\n// =============================================================================\nexport const ButtonItem = styled.li<{ $mobile?: boolean }>`\n    position: relative;\n    display: flex;\n    align-items: center;\n\n    &:not(:last-of-type) {\n        margin-right: ${V3_Spacing[\"spacing-16\"]};\n    }\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        width: 100%;\n        padding: 0 0 0 ${V3_Spacing[\"spacing-16\"]};\n        justify-content: center;\n\n        &:not(:last-of-type) {\n            margin-right: 0;\n            margin-bottom: ${(props) =>\n                props.$mobile ? V3_Spacing[\"spacing-16\"] : \"0\"};\n        }\n    }\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        ${(props) => {\n            if (props.$mobile) {\n                return css`\n                    padding: 0 ${V3_Spacing[\"spacing-16\"]};\n                `;\n            }\n        }}\n    }\n`;\n\nexport const ActionButton = styled(Button.Small)`\n    ${V3_MediaQuery.MaxWidth.lg} {\n        width: 100%;\n    }\n`;\n\n// =============================================================================\n// DOWNLOAD APP\n// =============================================================================\nexport const DownloadAppWrapper = styled.div`\n    display: none;\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        display: flex;\n        flex-direction: column;\n        margin-top: ${V3_Spacing[\"spacing-40\"]};\n    }\n`;\n\nexport const DownloadAppTitle = styled(Typography.BodyMD)`\n    margin-bottom: ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const DownloadAppImageLinkWrapper = styled.div`\n    display: flex;\n`;\n\nexport const DownloadAppImageLink = styled.a`\n    &:not(:last-child) {\n        margin-right: ${V3_Spacing[\"spacing-16\"]};\n    }\n\n    img {\n        width: auto;\n        height: auto;\n        object-fit: contain;\n    }\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        img {\n            max-width: 11rem;\n        }\n    }\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        img {\n            max-width: 100%;\n        }\n    }\n`;\n"],"names":["Wrapper","styled","ul","V3_Spacing","V3_MediaQuery","MaxWidth","lg","MobileWrapper","DrawerWrapper","sm","ButtonItem","li","props","$mobile","css","ActionButton","Button","Small","DownloadAppWrapper","div","DownloadAppTitle","Typography","BodyMD","DownloadAppImageLinkWrapper","DownloadAppImageLink","a"],"mappings":"0OASO,MAAMA,EAAUC,EAAAA,QAAOC,EAAE;;;mBAGbC,EAAAA,WAAW;;;MAGxBC,EAAAA,cAAcC,SAASC;;;EAKhBC,EAAgBN,EAAAA,QAAOC,EAAE;;;MAGhCE,EAAAA,cAAcC,SAASC;;;uBAGNH,EAAAA,WAAW;;;EAKrBK,EAAgBP,EAAAA,QAAOC,EAAE;;;;MAIhCE,EAAAA,cAAcC,SAASC;;;sBAGPH,EAAAA,WAAW;;;;;;MAM3BC,EAAAA,cAAcC,SAASI;;;;;EAUhBC,EAAaT,EAAAA,QAAOU,EAAyB;;;;;;wBAMlCR,EAAAA,WAAW;;;MAG7BC,EAAAA,cAAcC,SAASC;;yBAEJH,EAAAA,WAAW;;;;;6BAKNS,GACdA,EAAMC,QAAUV,EAAAA,WAAW,cAAgB;;;;MAIrDC,EAAAA,cAAcC,SAASI;UAClBG,IACC,GAAIA,EAAMC,QACN,OAAOC,KAAG;iCACOX,EAAAA,WAAW;iBAEhC;;EAKCY,EAAed,EAAAA,QAAOe,SAAOC,MAAM;MAC1Cb,EAAAA,cAAcC,SAASC;;;EAQhBY,EAAqBjB,EAAAA,QAAOkB,GAAG;;;MAGtCf,EAAAA,cAAcC,SAASC;;;sBAGPH,EAAAA,WAAW;;EAIpBiB,EAAmBnB,EAAAA,QAAOoB,aAAWC,OAAO;qBACpCnB,EAAAA,WAAW;EAGnBoB,EAA8BtB,EAAAA,QAAOkB,GAAG;;EAIxCK,EAAuBvB,EAAAA,QAAOwB,CAAC;;wBAEpBtB,EAAAA,WAAW;;;;;;;;;MAS7BC,EAAAA,cAAcC,SAASC;;;;;;MAMvBF,EAAAA,cAAcC,SAASI;;;;;"}
+{"version":3,"file":"navbar-action-buttons.styles.js","sources":["../../../src/navbar/navbar-action-buttons.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { MediaQuery, Spacing } from \"../theme\";\n\n// =============================================================================\n// WRAPPER\n// =============================================================================\nexport const wrapper = css`\n    display: flex;\n    list-style: none;\n    margin-left: ${Spacing[\"spacing-64\"]};\n    flex-shrink: 0;\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: none;\n    }\n`;\n\nexport const mobileWrapper = css`\n    display: none;\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: flex;\n        list-style: none;\n        margin-left: ${Spacing[\"spacing-64\"]};\n        flex-shrink: 0;\n    }\n`;\n\nexport const drawerWrapper = css`\n    display: none;\n    list-style: none;\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: flex;\n        flex-direction: column;\n        margin-top: ${Spacing[\"spacing-40\"]};\n        width: max-content;\n        min-width: 22rem;\n        max-width: 24rem;\n    }\n\n    ${MediaQuery.MaxWidth.sm} {\n        width: 100%;\n        max-width: unset;\n        min-width: unset;\n    }\n`;\n\n// =============================================================================\n// BUTTON ITEMS\n// =============================================================================\nexport const buttonItem = css`\n    position: relative;\n    display: flex;\n    align-items: center;\n\n    &:not(:last-of-type) {\n        margin-right: ${Spacing[\"spacing-16\"]};\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        width: 100%;\n        padding: 0 0 0 ${Spacing[\"spacing-16\"]};\n        justify-content: center;\n\n        &:not(:last-of-type) {\n            margin-right: 0;\n            margin-bottom: 0;\n        }\n    }\n`;\n\nexport const buttonItemMobile = css`\n    ${MediaQuery.MaxWidth.lg} {\n        &:not(:last-of-type) {\n            margin-bottom: ${Spacing[\"spacing-16\"]};\n        }\n    }\n\n    ${MediaQuery.MaxWidth.sm} {\n        padding: 0 ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const actionButton = css`\n    ${MediaQuery.MaxWidth.lg} {\n        width: 100%;\n    }\n`;\n\n// =============================================================================\n// DOWNLOAD APP\n// =============================================================================\nexport const downloadAppWrapper = css`\n    display: none;\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: flex;\n        flex-direction: column;\n        margin-top: ${Spacing[\"spacing-40\"]};\n    }\n`;\n\nexport const downloadAppTitle = css`\n    margin-bottom: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const downloadAppImageLinkWrapper = css`\n    display: flex;\n`;\n\nexport const downloadAppImageLink = css`\n    &:not(:last-child) {\n        margin-right: ${Spacing[\"spacing-16\"]};\n    }\n\n    img {\n        width: auto;\n        height: auto;\n        object-fit: contain;\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        img {\n            max-width: 11rem;\n        }\n    }\n\n    ${MediaQuery.MaxWidth.sm} {\n        img {\n            max-width: 100%;\n        }\n    }\n`;\n"],"names":[],"mappings":"8GAqFyB,8BAjCF,mCAqBM,wCAuCI,8CAJO,oCAJX,qCAVE,gCAjEL,gCAXA,2BAXN"}

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

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

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("react"),r=require("../menu/menu.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var t=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var s=require("./menu.js"),l=require("./navbar-items.styles.js");exports.NavbarItems=({items:a,selectedId:d,mobile:u=!1,hideNavBranding:o,hideLinkIndicator:c=!1,onItemClick:h})=>{const[p,j]=i.useState(-1),[m,x]=i.useState(!1),[b,g]=i.useState(null),v=i.useRef(null),k=t.useId();i.useEffect((()=>{const e=e=>{v.current&&!v.current.contains(e.target)&&(x(!1),j(-1),g(null))};return document.addEventListener("click",e,!0),()=>{document.removeEventListener("click",e,!0)}}),[]);const L=(e,n)=>i=>{var r;if(i.stopPropagation(),u&&(null===(r=e.subMenu)||void 0===r?void 0:r.length)){const e=!(p===n&&m);j(n),x(e)}h(i,e)},$=(e,n)=>{e.stopPropagation(),h(e,n),x(!1),j(-1)},f=(e,i)=>n.jsx(r.Menu.Content,{id:i,children:n.jsx(r.Menu.Section,{showDivider:!1,children:e.map(((e,i)=>n.jsx(r.Menu.Link,{href:e.href,children:e.children},`${e.id}-${i}`)))})}),I=e=>n.jsx(s.Menu,{items:e,onItemClick:$}),M=(i,t)=>{const{children:s,options:a,subMenu:h}=i,j=e.__rest(i,["children","options","subMenu"]),x=!!(null==h?void 0:h.length),v=(e=>{var n;return e.id===d||!!(null===(n=e.subMenu)||void 0===n?void 0:n.length)&&!!e.subMenu.find((e=>e.id===d))})(i),$=u&&x&&p===t&&m,M=!u&&x&&b===t||$,q=null!==b?b===t:v,C=!c&&q,_=q?u?"bold":"semibold":"regular",O=u?`link__mobile-${t+1}`:`link__${t+1}`,w=()=>C?n.jsx(l.LinkIndicator,{"data-testid":`${O}-indicator`,$selected:q}):null;return n.jsx(l.LinkItem,{$hiddenBranding:o,children:x?(()=>{const e=`navbar-submenu-${k}-${i.id}`;return u?n.jsxs(n.Fragment,{children:[n.jsxs(l.Link,Object.assign({"data-testid":O,weight:_,$selected:q},j,{"aria-current":v?"page":void 0,"aria-haspopup":"menu","aria-expanded":M,onClick:L(i,t)},a,{children:[n.jsx(l.LinkLabel,{children:s}),w(),u&&x?n.jsx(l.LinkIconContainer,{children:n.jsx(l.ExpandCollapseButton,{"data-testid":`${O}-expand-collapse-button`,$selected:$,focusHighlight:!1,focusOutline:"browser","aria-label":$?"Collapse":"Expand",children:n.jsx(l.ChevronIcon,{$selected:q})})}):null]})),$&&I(h)]}):n.jsx(r.Menu,{position:"bottom",customOffset:0,menuContent:f(h,e),triggerOnFocus:!0,isModal:!1,onPopoverAppear:()=>g(t),onPopoverDismiss:()=>{g((e=>e===t?null:e))},children:n.jsxs(l.LinkButton,Object.assign({type:"button",tabIndex:0,"data-testid":O,weight:_,$selected:q,"aria-haspopup":"menu","aria-expanded":M},a,{children:[n.jsx(l.LinkLabel,{children:s}),w()]}))})})():n.jsxs(l.Link,Object.assign({tabIndex:0,"data-testid":O,weight:_,$selected:q},j,{"aria-current":v?"page":void 0,onClick:L(i,t)},a,{children:[n.jsx(l.LinkLabel,{children:s}),w()]}))},t)},q=()=>a.map(((e,i)=>{var r;return"component"===e.itemType?n.jsx("li",{children:null!==(r=e.children)&&void 0!==r?r:null},i):M(e,i)}));return a&&a.length>0?u?n.jsx(l.MobileWrapper,{ref:v,children:q()}):n.jsx(l.Wrapper,{ref:v,$alignLeft:o,children:q()}):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"),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 u=require("./menu.js"),d=require("./navbar-items.styles.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=c(r);exports.NavbarItems=({items:r,selectedId:c,mobile:m=!1,hideNavBranding:p,hideLinkIndicator:h=!1,onItemClick:j})=>{const[b,v]=l.useState(-1),[x,g]=l.useState(!1),[f,k]=l.useState(null),I=l.useRef(null),N=s.useId();l.useEffect((()=>{const e=e=>{I.current&&!I.current.contains(e.target)&&(g(!1),v(-1),k(null))};return document.addEventListener("click",e,!0),()=>{document.removeEventListener("click",e,!0)}}),[]);const q=(e,n)=>i=>{var r;if(i.stopPropagation(),m&&(null===(r=e.subMenu)||void 0===r?void 0:r.length)){const e=!(b===n&&x);v(n),g(e)}j(i,e)},C=(e,n)=>{e.stopPropagation(),j(e,n),g(!1),v(-1)},M=(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}`)))})}),L=e=>n.jsx(u.Menu,{items:e,onItemClick:C}),S=(r,l)=>{const{children:s,options:u,subMenu:j}=r,v=e.__rest(r,["children","options","subMenu"]),g=!!(null==j?void 0:j.length),I=(e=>{var n;return e.id===c||!!(null===(n=e.subMenu)||void 0===n?void 0:n.length)&&!!e.subMenu.find((e=>e.id===c))})(r),C=m&&g&&b===l&&x,S=!m&&g&&f===l||C,$=null!==f?f===l:I,_=!h&&$,y=$?m?"bold":"semibold":"regular",B=m?`link__mobile-${l+1}`:`link__${l+1}`,O=()=>_?n.jsx("div",{"data-testid":`${B}-indicator`,className:o.default(d.linkIndicator,$&&d.linkIndicatorSelected)}):null,w=o.default(d.link,(e=>{switch(e){case"bold":return d.linkWeightBold;case"semibold":return d.linkWeightSemibold;default:return d.linkWeightRegular}})(y),$&&d.linkSelected);return n.jsx("li",{className:o.default(d.linkItem,p&&d.linkItemHiddenBranding),children:g?(()=>{const e=`navbar-submenu-${N}-${r.id}`;return m?n.jsxs(n.Fragment,{children:[n.jsxs("a",Object.assign({"data-testid":B,className:w},v,{"aria-current":I?"page":void 0,"aria-haspopup":"menu","aria-expanded":S,onClick:q(r,l)},u,{children:[n.jsx("div",{className:d.linkLabel,children:s}),O(),m&&g?n.jsx("div",{className:d.linkIconContainer,children:n.jsx(a.ClickableIcon,{"data-testid":`${B}-expand-collapse-button`,className:o.default(d.expandCollapseButton,C&&d.expandCollapseButtonExpanded),focusHighlight:!1,focusOutline:"browser","aria-label":C?"Collapse":"Expand",children:n.jsx(i.ChevronUpIcon,{className:o.default(d.chevronIcon,$&&d.chevronIconSelected)})})}):null]})),C&&L(j)]}):n.jsx(t.Menu,{position:"bottom",customOffset:0,menuContent:M(j,e),triggerOnFocus:!0,isModal:!1,onPopoverAppear:()=>k(l),onPopoverDismiss:()=>{k((e=>e===l?null:e))},children:n.jsxs("button",Object.assign({type:"button",tabIndex:0,"data-testid":B,className:o.default(w,d.linkButton),"aria-haspopup":"menu","aria-expanded":S},u,{children:[n.jsx("div",{className:d.linkLabel,children:s}),O()]}))})})():n.jsxs("a",Object.assign({tabIndex:0,"data-testid":B,className:w},v,{"aria-current":I?"page":void 0,onClick:q(r,l)},u,{children:[n.jsx("div",{className:d.linkLabel,children:s}),O()]}))},l)},$=()=>r.map(((e,i)=>{var r;return"component"===e.itemType?n.jsx("li",{children:null!==(r=e.children)&&void 0!==r?r:null},i):S(e,i)}));return r&&r.length>0?m?n.jsx("ul",{ref:I,className:d.mobileWrapper,children:$()}):n.jsx("ul",{ref:I,className:o.default(d.wrapper,p&&d.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 type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { Menu as DesktopMenu } from \"../menu\";\nimport type { TypographyWeight } from \"../typography\";\nimport { useId } from \"../util\";\nimport { Menu as MobileMenu } from \"./menu\";\nimport {\n    ChevronIcon,\n    ExpandCollapseButton,\n    Link,\n    LinkButton,\n    LinkIconContainer,\n    LinkIndicator,\n    LinkItem,\n    LinkLabel,\n    MobileWrapper,\n    Wrapper,\n} from \"./navbar-items.styles\";\nimport type {\n    NavItemCommonProps,\n    NavItemLinkProps,\n    NavItemProps,\n} from \"./types\";\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>(-1);\n    const [showSubMenu, setShowSubMenu] = useState<boolean>(false);\n    const [openSubMenuIndex, setOpenSubMenuIndex] = useState<number | null>(\n        null\n    );\n    const listRef = useRef<HTMLUListElement>(null);\n    const instanceId = useId();\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n    const resetAll = () => {\n        setShowSubMenu(false);\n        setSelectedIndex(-1);\n        setOpenSubMenuIndex(null);\n    };\n\n    const closeMobileSubMenu = () => {\n        setShowSubMenu(false);\n        setSelectedIndex(-1);\n    };\n\n    const checkSelected = (item: NavItemLinkProps<T>): boolean => {\n        if (item.id === selectedId) return true;\n        if (item.subMenu?.length) {\n            return !!item.subMenu.find((s) => s.id === selectedId);\n        }\n        return false;\n    };\n\n    useEffect(() => {\n        const handleClickOutside = (event: MouseEvent) => {\n            if (\n                listRef.current &&\n                !listRef.current.contains(event.target as Node)\n            ) {\n                resetAll();\n            }\n        };\n        document.addEventListener(\"click\", handleClickOutside, true);\n        return () => {\n            document.removeEventListener(\"click\", handleClickOutside, true);\n        };\n    }, []);\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 && item.subMenu?.length) {\n                const nextExpanded = !(selectedIndex === index && showSubMenu);\n                setSelectedIndex(index);\n                setShowSubMenu(nextExpanded);\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        closeMobileSubMenu();\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 items={subMenu} onItemClick={handleMobileSubLinkClick} />\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 && openSubMenuIndex === index;\n\n        // mobile inline expanded state\n        const isMobileExpanded =\n            mobile && hasSubMenu && selectedIndex === index && showSubMenu;\n\n        const isExpanded = isDesktopExpanded || isMobileExpanded;\n\n        const selected =\n            openSubMenuIndex !== null\n                ? openSubMenuIndex === 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                <LinkIndicator\n                    data-testid={`${testId}-indicator`}\n                    $selected={selected}\n                />\n            ) : null;\n\n        const renderMobileChevron = () =>\n            mobile && hasSubMenu ? (\n                <LinkIconContainer>\n                    <ExpandCollapseButton\n                        data-testid={`${testId}-expand-collapse-button`}\n                        $selected={isMobileExpanded}\n                        focusHighlight={false}\n                        focusOutline=\"browser\"\n                        aria-label={isMobileExpanded ? \"Collapse\" : \"Expand\"}\n                    >\n                        <ChevronIcon $selected={selected} />\n                    </ExpandCollapseButton>\n                </LinkIconContainer>\n            ) : null;\n\n        const renderLink = () => (\n            <Link\n                tabIndex={0}\n                data-testid={testId}\n                weight={textWeight}\n                $selected={selected}\n                {...otherItemAttrs}\n                aria-current={isRouteSelected ? \"page\" : undefined}\n                onClick={handleLinkClick(item, index)}\n                {...options}\n            >\n                <LinkLabel>{children}</LinkLabel>\n                {renderIndicator()}\n            </Link>\n        );\n\n        const renderLinkWithSubmenu = () => {\n            const subMenuId = `navbar-submenu-${instanceId}-${item.id}`;\n\n            if (mobile) {\n                return (\n                    <>\n                        <Link\n                            data-testid={testId}\n                            weight={textWeight}\n                            $selected={selected}\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                            <LinkLabel>{children}</LinkLabel>\n                            {renderIndicator()}\n                            {renderMobileChevron()}\n                        </Link>\n\n                        {isMobileExpanded && renderMobileSubMenu(subMenu!)}\n                    </>\n                );\n            }\n\n            return (\n                <DesktopMenu\n                    position=\"bottom\"\n                    customOffset={0}\n                    menuContent={renderDesktopSubMenu(subMenu!, subMenuId)}\n                    triggerOnFocus\n                    isModal={false}\n                    onPopoverAppear={() => setOpenSubMenuIndex(index)}\n                    onPopoverDismiss={() => {\n                        setOpenSubMenuIndex((prev) =>\n                            prev === index ? null : prev\n                        );\n                    }}\n                >\n                    <LinkButton\n                        type=\"button\"\n                        tabIndex={0}\n                        data-testid={testId}\n                        weight={textWeight}\n                        $selected={selected}\n                        aria-haspopup=\"menu\"\n                        aria-expanded={isExpanded}\n                        {...options}\n                    >\n                        <LinkLabel>{children}</LinkLabel>\n                        {renderIndicator()}\n                    </LinkButton>\n                </DesktopMenu>\n            );\n        };\n\n        return (\n            <LinkItem key={index} $hiddenBranding={hideNavBranding}>\n                {hasSubMenu ? renderLinkWithSubmenu() : renderLink()}\n            </LinkItem>\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            <MobileWrapper ref={listRef}>{renderItems()}</MobileWrapper>\n        ) : (\n            <Wrapper ref={listRef} $alignLeft={hideNavBranding}>\n                {renderItems()}\n            </Wrapper>\n        );\n    }\n\n    return <></>;\n};\n"],"names":["items","selectedId","mobile","hideNavBranding","hideLinkIndicator","onItemClick","selectedIndex","setSelectedIndex","useState","showSubMenu","setShowSubMenu","openSubMenuIndex","setOpenSubMenuIndex","listRef","useRef","instanceId","useId","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","handleLinkClick","item","index","stopPropagation","_a","subMenu","length","nextExpanded","handleMobileSubLinkClick","renderDesktopSubMenu","subMenuId","_jsx","DesktopMenu","Content","id","children","Section","showDivider","map","subIndex","Link","href","renderMobileSubMenu","MobileMenu","renderLinkItem","options","otherItemAttrs","__rest","hasSubMenu","isRouteSelected","find","s","checkSelected","isMobileExpanded","isExpanded","selected","showIndicator","textWeight","testId","renderIndicator","LinkIndicator","$selected","LinkItem","$hiddenBranding","_jsxs","_Fragment","Object","assign","weight","undefined","onClick","LinkLabel","LinkIconContainer","ExpandCollapseButton","focusHighlight","focusOutline","ChevronIcon","position","customOffset","menuContent","triggerOnFocus","isModal","onPopoverAppear","onPopoverDismiss","prev","LinkButton","type","tabIndex","renderLinkWithSubmenu","renderItems","itemType","MobileWrapper","ref","Wrapper","$alignLeft"],"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>(-1);\n    const [showSubMenu, setShowSubMenu] = useState<boolean>(false);\n    const [openSubMenuIndex, setOpenSubMenuIndex] = useState<number | null>(\n        null\n    );\n    const listRef = useRef<HTMLUListElement>(null);\n    const instanceId = useId();\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n    const resetAll = () => {\n        setShowSubMenu(false);\n        setSelectedIndex(-1);\n        setOpenSubMenuIndex(null);\n    };\n\n    const closeMobileSubMenu = () => {\n        setShowSubMenu(false);\n        setSelectedIndex(-1);\n    };\n\n    const checkSelected = (item: NavItemLinkProps<T>): boolean => {\n        if (item.id === selectedId) return true;\n        if (item.subMenu?.length) {\n            return !!item.subMenu.find((s) => s.id === selectedId);\n        }\n        return false;\n    };\n\n    useEffect(() => {\n        const handleClickOutside = (event: MouseEvent) => {\n            if (\n                listRef.current &&\n                !listRef.current.contains(event.target as Node)\n            ) {\n                resetAll();\n            }\n        };\n        document.addEventListener(\"click\", handleClickOutside, true);\n        return () => {\n            document.removeEventListener(\"click\", handleClickOutside, true);\n        };\n    }, []);\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 && item.subMenu?.length) {\n                const nextExpanded = !(selectedIndex === index && showSubMenu);\n                setSelectedIndex(index);\n                setShowSubMenu(nextExpanded);\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        closeMobileSubMenu();\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 items={subMenu} onItemClick={handleMobileSubLinkClick} />\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 && openSubMenuIndex === index;\n\n        // mobile inline expanded state\n        const isMobileExpanded =\n            mobile && hasSubMenu && selectedIndex === index && showSubMenu;\n\n        const isExpanded = isDesktopExpanded || isMobileExpanded;\n\n        const selected =\n            openSubMenuIndex !== null\n                ? openSubMenuIndex === 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 &&\n                                styles.expandCollapseButtonExpanded\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 = () => {\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=\"bottom\"\n                    customOffset={0}\n                    menuContent={renderDesktopSubMenu(subMenu!, subMenuId)}\n                    triggerOnFocus\n                    isModal={false}\n                    onPopoverAppear={() => setOpenSubMenuIndex(index)}\n                    onPopoverDismiss={() => {\n                        setOpenSubMenuIndex((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                    </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 ? renderLinkWithSubmenu() : 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","showSubMenu","setShowSubMenu","openSubMenuIndex","setOpenSubMenuIndex","listRef","useRef","instanceId","useId","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","handleLinkClick","item","index","stopPropagation","_a","subMenu","length","nextExpanded","handleMobileSubLinkClick","renderDesktopSubMenu","subMenuId","_jsx","DesktopMenu","Content","id","children","Section","showDivider","map","subIndex","Link","href","renderMobileSubMenu","MobileMenu","renderLinkItem","options","otherItemAttrs","__rest","hasSubMenu","isRouteSelected","find","s","checkSelected","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","_jsxs","_Fragment","Object","assign","undefined","onClick","styles.linkLabel","styles.linkIconContainer","ClickableIcon","styles.expandCollapseButton","styles.expandCollapseButtonExpanded","focusHighlight","focusOutline","ChevronUpIcon","styles.chevronIcon","styles.chevronIconSelected","position","customOffset","menuContent","triggerOnFocus","isModal","onPopoverAppear","onPopoverDismiss","prev","type","tabIndex","styles.linkButton","renderLinkWithSubmenu","renderItems","itemType","ref","styles.mobileWrapper","styles.wrapper","styles.wrapperAlignLeft"],"mappings":"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"}

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

@@ -1,115 +1,2 @@
-"use strict";var e=require("@lifesg/react-icons/chevron-up"),t=require("styled-components"),r=require("../shared/clickable-icon/clickable-icon.js"),i=require("../v3_theme/index.js"),o=require("../v3_theme/components/theme-helper.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=n(t);const a=l.default.ul`
-    display: flex;
-    list-style: none;
-    position: relative;
-
-    ${e=>e.$alignLeft&&"margin-right: auto;"}
-
-    ${i.V3_MediaQuery.MaxWidth.lg} {
-        display: none;
-    }
-`,d=l.default.ul`
-    display: none;
-    list-style: none;
-
-    ${i.V3_MediaQuery.MaxWidth.lg} {
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-    }
-`,s=l.default.li`
-    display: flex;
-    margin: 0 1rem;
-
-    &:first-child {
-        // negative margin to preserve touch target size for link
-        margin-left: ${e=>e.$hiddenBranding?"-0.5rem":"0"};
-    }
-
-    ${i.V3_MediaQuery.MaxWidth.lg} {
-        flex-direction: column;
-        padding: 0.125rem 0;
-        width: 100%;
-        margin-left: 0rem;
-    }
-`,c=t.css`
-    ${e=>i.V3_Font[`body-md-${e.weight}`]}
-
-    display: flex;
-    position: relative;
-    align-items: center;
-    text-align: center;
-    color: ${o.V3_ThemeNavbar["navbar-link-colour-text"]};
-    height: 100%;
-
-    &:active,
-    &:hover,
-    &:focus {
-        color: ${e=>e.$selected?o.V3_ThemeNavbar["navbar-link-colour-text-selected-hover"]:o.V3_ThemeNavbar["navbar-link-colour-text-hover"]};
-    }
-
-    ${i.V3_MediaQuery.MaxWidth.lg} {
-        width: 100%;
-        padding: 0.5rem 1rem;
-        text-align: left;
-        align-items: flex-start;
-    }
-`,u=l.default.a`
-    ${c}
-`,h=l.default.button`
-    ${c}
-    background: none;
-    border: 0;
-    padding: 0;
-    cursor: pointer;
-    text-align: left;
-    margin: 0;
-    box-shadow: none;
-    font: inherit;
-    color: inherit;
-`,p=l.default.div`
-    flex: 1;
-    margin-top: 0.25rem;
-
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-    white-space: pre-wrap;
-`,m=l.default.div`
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 0.25rem;
-    background-color: ${i.V3_Colour["border-selected"]};
-
-    &:hover {
-        ${e=>e.$selected&&i.V3_Colour["border-selected-hover"]};
-    }
-
-    ${i.V3_MediaQuery.MaxWidth.lg} {
-        left: 0;
-        right: unset;
-        top: 0;
-        bottom: 0;
-        height: 100%;
-        width: 0.25rem;
-    }
-`,g=l.default.div`
-    padding-left: 0.5rem;
-    margin-right: -0.5rem;
-`,f=l.default(r.ClickableIcon)`
-    padding: 0.5rem;
-    transform: rotate(${e=>e.$selected?0:180}deg);
-    transition: transform 300ms ease-in-out;
-    margin: auto 0.25rem auto 0;
-`,x=l.default(e.ChevronUpIcon)`
-    height: 1.25rem;
-    width: 1.25rem;
-    color: ${i.V3_Colour.icon};
-    &:hover {
-        ${e=>e.$selected?i.V3_Colour["icon-selected-hover"]:i.V3_Colour["icon-hover"]};
-    }
-`;exports.ChevronIcon=x,exports.ExpandCollapseButton=f,exports.Link=u,exports.LinkButton=h,exports.LinkIconContainer=g,exports.LinkIndicator=m,exports.LinkItem=s,exports.LinkLabel=p,exports.MobileWrapper=d,exports.Wrapper=a;
+"use strict";require("./navbar-items.styles_i9cunu.css");exports.chevronIcon="c1s8ur0k",exports.chevronIconSelected="c178e7hk",exports.expandCollapseButton="ej7h5do",exports.expandCollapseButtonExpanded="e160mxwv",exports.link="l1o3p4yu",exports.linkButton="l1xfqf3s",exports.linkIconContainer="l1p9u80z",exports.linkIndicator="lnocj2s",exports.linkIndicatorSelected="l5qfat1",exports.linkItem="l18t6f3m",exports.linkItemHiddenBranding="lsn8o0d",exports.linkLabel="lsc0hr8",exports.linkSelected="lkwvsmx",exports.linkWeightBold="l1p7dxu8",exports.linkWeightRegular="l1kp5n19",exports.linkWeightSemibold="lqgrg2a",exports.mobileWrapper="mw9gug8",exports.wrapper="w1ndf2sj",exports.wrapperAlignLeft="w177nfye";
 //# sourceMappingURL=navbar-items.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"navbar-items.styles.js","sources":["../../../src/navbar/navbar-items.styles.tsx"],"sourcesContent":["import { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport styled, { css } from \"styled-components\";\n\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport type { TypographyWeight } from \"../typography\";\nimport { V3_Colour, V3_Font, V3_MediaQuery } from \"../v3_theme\";\nimport { V3_ThemeNavbar } from \"../v3_theme/components/theme-helper\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n    $selected: boolean;\n}\n\ninterface WrapperStyleProps {\n    $alignLeft: boolean | undefined;\n}\n\ninterface ItemStyleProps {\n    $hiddenBranding: boolean | undefined;\n}\n\n// =============================================================================\n// WRAPPER\n// =============================================================================\n\nexport const Wrapper = styled.ul<WrapperStyleProps>`\n    display: flex;\n    list-style: none;\n    position: relative;\n\n    ${(props) => props.$alignLeft && \"margin-right: auto;\"}\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        display: none;\n    }\n`;\n\nexport const MobileWrapper = styled.ul`\n    display: none;\n    list-style: none;\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n    }\n`;\n\n// =============================================================================\n// LINK ITEMS\n// =============================================================================\nexport const LinkItem = styled.li<ItemStyleProps>`\n    display: flex;\n    margin: 0 1rem;\n\n    &:first-child {\n        // negative margin to preserve touch target size for link\n        margin-left: ${(props) => (props.$hiddenBranding ? \"-0.5rem\" : \"0\")};\n    }\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n        padding: 0.125rem 0;\n        width: 100%;\n        margin-left: 0rem;\n    }\n`;\n\nconst linkCss = css<{ $selected: boolean; weight: TypographyWeight }>`\n    ${(props) => V3_Font[`body-md-${props.weight}`]}\n\n    display: flex;\n    position: relative;\n    align-items: center;\n    text-align: center;\n    color: ${V3_ThemeNavbar[\"navbar-link-colour-text\"]};\n    height: 100%;\n\n    &:active,\n    &:hover,\n    &:focus {\n        color: ${(props) =>\n            props.$selected\n                ? V3_ThemeNavbar[\"navbar-link-colour-text-selected-hover\"]\n                : V3_ThemeNavbar[\"navbar-link-colour-text-hover\"]};\n    }\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        width: 100%;\n        padding: 0.5rem 1rem;\n        text-align: left;\n        align-items: flex-start;\n    }\n`;\nexport const Link = styled.a<{ $selected: boolean; weight: TypographyWeight }>`\n    ${linkCss}\n`;\n\nexport const LinkButton = styled.button<{\n    $selected: boolean;\n    weight: TypographyWeight;\n}>`\n    ${linkCss}\n    background: none;\n    border: 0;\n    padding: 0;\n    cursor: pointer;\n    text-align: left;\n    margin: 0;\n    box-shadow: none;\n    font: inherit;\n    color: inherit;\n`;\n\nexport const LinkLabel = styled.div`\n    flex: 1;\n    margin-top: 0.25rem;\n\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 3;\n    white-space: pre-wrap;\n`;\n\nexport const LinkIndicator = styled.div<StyleProps>`\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 0.25rem;\n    background-color: ${V3_Colour[\"border-selected\"]};\n\n    &:hover {\n        ${(props) => props.$selected && V3_Colour[\"border-selected-hover\"]};\n    }\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        left: 0;\n        right: unset;\n        top: 0;\n        bottom: 0;\n        height: 100%;\n        width: 0.25rem;\n    }\n`;\n\nexport const LinkIconContainer = styled.div`\n    padding-left: 0.5rem;\n    margin-right: -0.5rem;\n`;\n\nexport const ExpandCollapseButton = styled(ClickableIcon)<StyleProps>`\n    padding: 0.5rem;\n    transform: rotate(${(props) => (props.$selected ? 0 : 180)}deg);\n    transition: transform 300ms ease-in-out;\n    margin: auto 0.25rem auto 0;\n`;\n\nexport const ChevronIcon = styled(ChevronUpIcon)<StyleProps>`\n    height: 1.25rem;\n    width: 1.25rem;\n    color: ${V3_Colour.icon};\n    &:hover {\n        ${(props) =>\n            props.$selected\n                ? V3_Colour[\"icon-selected-hover\"]\n                : V3_Colour[\"icon-hover\"]};\n    }\n`;\n"],"names":["Wrapper","styled","ul","props","$alignLeft","V3_MediaQuery","MaxWidth","lg","MobileWrapper","LinkItem","li","$hiddenBranding","linkCss","css","V3_Font","weight","V3_ThemeNavbar","$selected","Link","a","LinkButton","button","LinkLabel","div","LinkIndicator","V3_Colour","LinkIconContainer","ExpandCollapseButton","ClickableIcon","ChevronIcon","ChevronUpIcon","icon"],"mappings":"6TA4BO,MAAMA,EAAUC,EAAAA,QAAOC,EAAqB;;;;;MAK5CC,GAAUA,EAAMC,YAAc;;MAE/BC,EAAAA,cAAcC,SAASC;;;EAKhBC,EAAgBP,EAAAA,QAAOC,EAAE;;;;MAIhCG,EAAAA,cAAcC,SAASC;;;;;EAUhBE,EAAWR,EAAAA,QAAOS,EAAkB;;;;;;uBAMzBP,GAAWA,EAAMQ,gBAAkB,UAAY;;;MAGjEN,EAAAA,cAAcC,SAASC;;;;;;EAQvBK,EAAUC,EAAAA,GAAqD;MAC9DV,GAAUW,UAAQ,WAAWX,EAAMY;;;;;;aAM7BC,EAAAA,eAAe;;;;;;iBAMVb,GACNA,EAAMc,UACAD,EAAAA,eAAe,0CACfA,EAAAA,eAAe;;;MAG3BX,EAAAA,cAAcC,SAASC;;;;;;EAOhBW,EAAOjB,EAAAA,QAAOkB,CAAmD;MACxEP;EAGOQ,EAAanB,EAAAA,QAAOoB,MAG/B;MACIT;;;;;;;;;;EAYOU,EAAYrB,EAAAA,QAAOsB,GAAG;;;;;;;;;EAWtBC,EAAgBvB,EAAAA,QAAOsB,GAAe;;;;;;wBAM3BE,EAAAA,UAAU;;;UAGvBtB,GAAUA,EAAMc,WAAaQ,EAAAA,UAAU;;;MAG5CpB,EAAAA,cAAcC,SAASC;;;;;;;;EAUhBmB,EAAoBzB,EAAAA,QAAOsB,GAAG;;;EAK9BI,EAAuB1B,EAAAA,QAAO2B,EAAAA,cAA0B;;wBAE5CzB,GAAWA,EAAMc,UAAY,EAAI;;;EAK7CY,EAAc5B,EAAAA,QAAO6B,EAAAA,cAA0B;;;aAG/CL,EAAAA,UAAUM;;UAEZ5B,GACCA,EAAMc,UACAQ,EAAAA,UAAU,uBACVA,EAAAA,UAAU;;"}
+{"version":3,"file":"navbar-items.styles.js","sources":["../../../src/navbar/navbar-items.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, ComponentToken, Font, MediaQuery } from \"../theme\";\n\n// =============================================================================\n// WRAPPER\n// =============================================================================\n\nexport const wrapper = css`\n    display: flex;\n    list-style: none;\n    position: relative;\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: none;\n    }\n`;\n\nexport const wrapperAlignLeft = css`\n    margin-right: auto;\n`;\n\nexport const mobileWrapper = css`\n    display: none;\n    list-style: none;\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n    }\n`;\n\n// =============================================================================\n// LINK ITEMS\n// =============================================================================\nexport const linkItem = css`\n    display: flex;\n    margin: 0 1rem;\n    &:first-child {\n        margin-left: 0;\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n        padding: 0.125rem 0;\n        width: 100%;\n        margin-left: 0rem;\n    }\n`;\n\nexport const linkItemHiddenBranding = css`\n    // negative margin to preserve touch target size for link\n    &:first-child {\n        margin-left: -0.5rem;\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        &:first-child {\n            margin-left: 0rem;\n        }\n    }\n`;\n\nexport const link = css`\n    display: flex;\n    position: relative;\n    align-items: center;\n    text-align: center;\n    color: ${ComponentToken.Navbar[\"link-colour-text\"]};\n    height: 100%;\n\n    &:active,\n    &:hover,\n    &:focus {\n        color: ${ComponentToken.Navbar[\"link-colour-text-hover\"]};\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        width: 100%;\n        padding: 0.5rem 1rem;\n        text-align: left;\n        align-items: flex-start;\n    }\n`;\n\nexport const linkSelected = css`\n    &:active,\n    &:hover,\n    &:focus {\n        color: ${ComponentToken.Navbar[\"link-colour-text-selected-hover\"]};\n    }\n`;\n\nexport const linkWeightRegular = css`\n    ${Font[\"body-md-regular\"]}\n`;\n\nexport const linkWeightSemibold = css`\n    ${Font[\"body-md-semibold\"]}\n`;\n\nexport const linkWeightBold = css`\n    ${Font[\"body-md-bold\"]}\n`;\n\nexport const linkButton = css`\n    background: none;\n    border: 0;\n    padding: 0;\n    cursor: pointer;\n    text-align: left;\n    margin: 0;\n    box-shadow: none;\n    font: inherit;\n    color: inherit;\n`;\n\nexport const linkLabel = css`\n    flex: 1;\n    margin-top: 0.25rem;\n\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 3;\n    white-space: pre-wrap;\n`;\n\nexport const linkIndicator = css`\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 0.25rem;\n    background-color: ${Colour[\"border-selected\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        left: 0;\n        right: unset;\n        top: 0;\n        bottom: 0;\n        height: 100%;\n        width: 0.25rem;\n    }\n`;\n\nexport const linkIndicatorSelected = css`\n    &:hover {\n        background-color: ${Colour[\"border-selected-hover\"]};\n    }\n`;\n\nexport const linkIconContainer = css`\n    padding-left: 0.5rem;\n    margin-right: -0.5rem;\n`;\n\nexport const expandCollapseButton = css`\n    padding: 0.5rem;\n    transform: rotate(180deg);\n    transition: transform 300ms ease-in-out;\n    margin: auto 0.25rem auto 0;\n`;\n\nexport const expandCollapseButtonExpanded = css`\n    transform: rotate(0deg);\n`;\n\nexport const chevronIcon = css`\n    height: 1.25rem;\n    width: 1.25rem;\n    color: ${Colour.icon};\n\n    &:hover {\n        color: ${Colour[\"icon-hover\"]};\n    }\n`;\n\nexport const chevronIconSelected = css`\n    &:hover {\n        color: ${Colour[\"icon-selected-hover\"]};\n    }\n`;\n"],"names":[],"mappings":"mGAyKwB,uCAUQ,wCArBC,+CAOQ,wBArGxB,8BA0CM,qCA+CO,iCAxBJ,wCAkBQ,2BA/Gb,0CAec,4BAmEb,+BAhCG,iCAgBE,qCARG,sCAIC,gCA5EL,0BAdN,oCAUS"}