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

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"),t=require("../menu/menu.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var r=require("../util/simple-id-generator.js");require("../util/string-helper.js");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]=i.useState((()=>r.SimpleIdGenerator.generate()));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 t;if(i.stopPropagation(),u&&(null===(t=e.subMenu)||void 0===t?void 0:t.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(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}`)))})}),I=e=>n.jsx(s.Menu,{items:e,onItemClick:$}),M=(i,r)=>{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===r&&m,M=!u&&x&&b===r||$,q=null!==b?b===r:v,C=!c&&q,S=q?u?"bold":"semibold":"regular",_=u?`link__mobile-${r+1}`:`link__${r+1}`,y=()=>C?n.jsx(l.LinkIndicator,{"data-testid":`${_}-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":_,weight:S,$selected:q,underlineStyle:"none"},j,{"aria-current":v?"page":void 0,"aria-haspopup":"menu","aria-expanded":M,onClick:L(i,r)},a,{children:[n.jsx(l.LinkLabel,{children:s}),y(),u&&x?n.jsx(l.LinkIconContainer,{children:n.jsx(l.ExpandCollapseButton,{"data-testid":`${_}-expand-collapse-button`,$selected:$,focusHighlight:!1,focusOutline:"browser","aria-label":$?"Collapse":"Expand",children:n.jsx(l.ChevronIcon,{$selected:q})})}):null]})),$&&I(h)]}):n.jsx(t.Menu,{position:"bottom",customOffset:0,menuContent:f(h,e),triggerOnFocus:!0,isModal:!1,onPopoverAppear:()=>g(r),onPopoverDismiss:()=>{g((e=>e===r?null:e))},children:n.jsxs(l.LinkButton,Object.assign({type:"button",tabIndex:0,"data-testid":_,weight:S,$selected:q,"aria-haspopup":"menu","aria-expanded":M},a,{children:[n.jsx(l.LinkLabel,{children:s}),y()]}))})})():n.jsxs(l.Link,Object.assign({tabIndex:0,"data-testid":_,weight:S,$selected:q,underlineStyle:"none"},j,{"aria-current":v?"page":void 0,onClick:L(i,r)},a,{children:[n.jsx(l.LinkLabel,{children:s}),y()]}))},r)},q=()=>a.map(((e,i)=>{var t;return"component"===e.itemType?n.jsx("li",{children:null!==(t=e.children)&&void 0!==t?t: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 { SimpleIdGenerator } 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] = useState(() => SimpleIdGenerator.generate());\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                underlineStyle=\"none\"\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                            underlineStyle=\"none\"\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","SimpleIdGenerator","generate","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","underlineStyle","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"}

package/cjs/navbar/navbar-items.styles_i9cunu.css

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

package/cjs/navbar/navbar-logo-data.js

@@ -1,2 +1,2 @@
-"use strict";const e={primary:{brandName:"LifeSG",logoSrc:"https://assets.life.gov.sg/lifesg/logo-lifesg.svg"}},s={primary:{brandName:"BookingSG",logoSrc:"https://www.booking.gov.sg/logo.svg"}},g={primary:{brandName:"CCube",logoSrc:"https://assets.life.gov.sg/ccube/logo-ccube.svg"}},o={primary:{brandName:"IMDA",logoSrc:"https://assets.life.gov.sg/react-design-system/img/logo/imda-logo.svg"}},r={primary:{brandName:"MyLegacy",logoSrc:"https://mylegacy.life.gov.sg/images/site-logo.png"}},a={primary:{brandName:"SPF",logoSrc:"https://assets.life.gov.sg/react-design-system/img/logo/spf-logo.png"}},t={primary:{brandName:"SupportGoWhere",logoSrc:"https://assets.life.gov.sg/react-design-system/img/logo/sgw-logo.png"}};exports.getDefaultResourceLogo=i=>{switch(i){case"bookingsg":return s;case"mylegacy":return r;case"ccube":return g;case"spf":return a;case"supportgowhere":return t;case"imda":return o;default:return e}};
+"use strict";const s={primary:{brandName:"LifeSG",logoSrc:"https://assets.life.gov.sg/lifesg/logo-lifesg.svg"}},e={primary:{brandName:"BookingSG",logoSrc:"https://www.booking.gov.sg/logo.svg"}},g={primary:{brandName:"CCube",logoSrc:"https://assets.life.gov.sg/ccube/logo-ccube.svg"}},o={primary:{brandName:"IMDA",logoSrc:"https://assets.life.gov.sg/react-design-system/img/logo/imda-logo.svg"}},r={primary:{brandName:"MyLegacy",logoSrc:"https://mylegacy.life.gov.sg/images/site-logo.png"}},a={primary:{brandName:"SPF",logoSrc:"https://assets.life.gov.sg/react-design-system/img/logo/spf-logo.png"}},t={primary:{brandName:"SupportGoWhere",logoSrc:"https://assets.life.gov.sg/react-design-system/img/logo/sgw-logo.png"}};exports.getDefaultResourceLogo=i=>{switch(i){case"bookingsg":return e;case"mylegacy":return r;case"ccube":return g;case"spf":return a;case"supportgowhere":case"sgw-digital-lobby":return t;case"imda":return o;default:return s}};
 //# sourceMappingURL=navbar-logo-data.js.map

package/cjs/navbar/navbar-logo-data.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar-logo-data.js","sources":["../../../src/navbar/navbar-logo-data.ts"],"sourcesContent":["import type { V3_ResourceScheme } from \"../v3_theme/types\";\nimport type { NavbarResourcesProps } from \"./types\";\n\nconst DEFAULT_RESOURCES_LOGO: NavbarResourcesProps = {\n    primary: {\n        brandName: \"LifeSG\",\n        logoSrc: \"https://assets.life.gov.sg/lifesg/logo-lifesg.svg\",\n    },\n};\n\nconst BOOKINGSG_RESOURCES_LOGO: NavbarResourcesProps = {\n    primary: {\n        brandName: \"BookingSG\",\n        logoSrc: \"https://www.booking.gov.sg/logo.svg\",\n    },\n};\n\nconst CCUBE_RESOURCES_LOGO: NavbarResourcesProps = {\n    primary: {\n        brandName: \"CCube\",\n        logoSrc: \"https://assets.life.gov.sg/ccube/logo-ccube.svg\",\n    },\n};\n\nconst IMDA_RESOURCE_LOGO: NavbarResourcesProps = {\n    primary: {\n        brandName: \"IMDA\",\n        logoSrc:\n            \"https://assets.life.gov.sg/react-design-system/img/logo/imda-logo.svg\",\n    },\n};\n\nconst MYLEGACY_RESOURCES_LOGO: NavbarResourcesProps = {\n    primary: {\n        brandName: \"MyLegacy\",\n        logoSrc: \"https://mylegacy.life.gov.sg/images/site-logo.png\",\n    },\n};\n\nconst SPF_RESOURCE_LOGO: NavbarResourcesProps = {\n    primary: {\n        brandName: \"SPF\",\n        logoSrc:\n            \"https://assets.life.gov.sg/react-design-system/img/logo/spf-logo.png\",\n    },\n};\n\nconst SUPPORTGOWHERE_RESOURCE_LOGO: NavbarResourcesProps = {\n    primary: {\n        brandName: \"SupportGoWhere\",\n        logoSrc:\n            \"https://assets.life.gov.sg/react-design-system/img/logo/sgw-logo.png\",\n    },\n};\n\nexport const getDefaultResourceLogo = (resourceScheme?: V3_ResourceScheme) => {\n    switch (resourceScheme) {\n        case \"bookingsg\":\n            return BOOKINGSG_RESOURCES_LOGO;\n        case \"mylegacy\":\n            return MYLEGACY_RESOURCES_LOGO;\n        case \"ccube\":\n            return CCUBE_RESOURCES_LOGO;\n        case \"spf\":\n            return SPF_RESOURCE_LOGO;\n        case \"supportgowhere\":\n            return SUPPORTGOWHERE_RESOURCE_LOGO;\n        case \"imda\":\n            return IMDA_RESOURCE_LOGO;\n        default:\n            return DEFAULT_RESOURCES_LOGO;\n    }\n};\n"],"names":["DEFAULT_RESOURCES_LOGO","primary","brandName","logoSrc","BOOKINGSG_RESOURCES_LOGO","CCUBE_RESOURCES_LOGO","IMDA_RESOURCE_LOGO","MYLEGACY_RESOURCES_LOGO","SPF_RESOURCE_LOGO","SUPPORTGOWHERE_RESOURCE_LOGO","resourceScheme"],"mappings":"aAGA,MAAMA,EAA+C,CACjDC,QAAS,CACLC,UAAW,SACXC,QAAS,sDAIXC,EAAiD,CACnDH,QAAS,CACLC,UAAW,YACXC,QAAS,wCAIXE,EAA6C,CAC/CJ,QAAS,CACLC,UAAW,QACXC,QAAS,oDAIXG,EAA2C,CAC7CL,QAAS,CACLC,UAAW,OACXC,QACI,0EAINI,EAAgD,CAClDN,QAAS,CACLC,UAAW,WACXC,QAAS,sDAIXK,EAA0C,CAC5CP,QAAS,CACLC,UAAW,MACXC,QACI,yEAINM,EAAqD,CACvDR,QAAS,CACLC,UAAW,iBACXC,QACI,wGAI2BO,IACnC,OAAQA,GACJ,IAAK,YACD,OAAON,EACX,IAAK,WACD,OAAOG,EACX,IAAK,QACD,OAAOF,EACX,IAAK,MACD,OAAOG,EACX,IAAK,iBACD,OAAOC,EACX,IAAK,OACD,OAAOH,EACX,QACI,OAAON"}
+{"version":3,"file":"navbar-logo-data.js","sources":["../../../src/navbar/navbar-logo-data.ts"],"sourcesContent":["import type { ThemeType } from \"../theme/types\";\nimport type { NavbarResourcesProps } from \"./types\";\n\nconst DEFAULT_RESOURCES_LOGO: NavbarResourcesProps = {\n    primary: {\n        brandName: \"LifeSG\",\n        logoSrc: \"https://assets.life.gov.sg/lifesg/logo-lifesg.svg\",\n    },\n};\n\nconst BOOKINGSG_RESOURCES_LOGO: NavbarResourcesProps = {\n    primary: {\n        brandName: \"BookingSG\",\n        logoSrc: \"https://www.booking.gov.sg/logo.svg\",\n    },\n};\n\nconst CCUBE_RESOURCES_LOGO: NavbarResourcesProps = {\n    primary: {\n        brandName: \"CCube\",\n        logoSrc: \"https://assets.life.gov.sg/ccube/logo-ccube.svg\",\n    },\n};\n\nconst IMDA_RESOURCE_LOGO: NavbarResourcesProps = {\n    primary: {\n        brandName: \"IMDA\",\n        logoSrc:\n            \"https://assets.life.gov.sg/react-design-system/img/logo/imda-logo.svg\",\n    },\n};\n\nconst MYLEGACY_RESOURCES_LOGO: NavbarResourcesProps = {\n    primary: {\n        brandName: \"MyLegacy\",\n        logoSrc: \"https://mylegacy.life.gov.sg/images/site-logo.png\",\n    },\n};\n\nconst SPF_RESOURCE_LOGO: NavbarResourcesProps = {\n    primary: {\n        brandName: \"SPF\",\n        logoSrc:\n            \"https://assets.life.gov.sg/react-design-system/img/logo/spf-logo.png\",\n    },\n};\n\nconst SUPPORTGOWHERE_RESOURCE_LOGO: NavbarResourcesProps = {\n    primary: {\n        brandName: \"SupportGoWhere\",\n        logoSrc:\n            \"https://assets.life.gov.sg/react-design-system/img/logo/sgw-logo.png\",\n    },\n};\n\nexport const getDefaultResourceLogo = (resourceScheme?: ThemeType) => {\n    switch (resourceScheme) {\n        case \"bookingsg\":\n            return BOOKINGSG_RESOURCES_LOGO;\n        case \"mylegacy\":\n            return MYLEGACY_RESOURCES_LOGO;\n        case \"ccube\":\n            return CCUBE_RESOURCES_LOGO;\n        case \"spf\":\n            return SPF_RESOURCE_LOGO;\n        case \"supportgowhere\":\n        case \"sgw-digital-lobby\":\n            return SUPPORTGOWHERE_RESOURCE_LOGO;\n        case \"imda\":\n            return IMDA_RESOURCE_LOGO;\n        default:\n            return DEFAULT_RESOURCES_LOGO;\n    }\n};\n"],"names":["DEFAULT_RESOURCES_LOGO","primary","brandName","logoSrc","BOOKINGSG_RESOURCES_LOGO","CCUBE_RESOURCES_LOGO","IMDA_RESOURCE_LOGO","MYLEGACY_RESOURCES_LOGO","SPF_RESOURCE_LOGO","SUPPORTGOWHERE_RESOURCE_LOGO","resourceScheme"],"mappings":"aAGA,MAAMA,EAA+C,CACjDC,QAAS,CACLC,UAAW,SACXC,QAAS,sDAIXC,EAAiD,CACnDH,QAAS,CACLC,UAAW,YACXC,QAAS,wCAIXE,EAA6C,CAC/CJ,QAAS,CACLC,UAAW,QACXC,QAAS,oDAIXG,EAA2C,CAC7CL,QAAS,CACLC,UAAW,OACXC,QACI,0EAINI,EAAgD,CAClDN,QAAS,CACLC,UAAW,WACXC,QAAS,sDAIXK,EAA0C,CAC5CP,QAAS,CACLC,UAAW,MACXC,QACI,yEAINM,EAAqD,CACvDR,QAAS,CACLC,UAAW,iBACXC,QACI,wGAI2BO,IACnC,OAAQA,GACJ,IAAK,YACD,OAAON,EACX,IAAK,WACD,OAAOG,EACX,IAAK,QACD,OAAOF,EACX,IAAK,MACD,OAAOG,EACX,IAAK,iBACL,IAAK,oBACD,OAAOC,EACX,IAAK,OACD,OAAOH,EACX,QACI,OAAON"}

package/cjs/navbar/navbar.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),a=require("react/jsx-runtime"),r=require("react"),n=require("styled-components"),t=require("../layout/index.js"),i=require("../masthead/masthead.js"),s=require("../overlay/overlay.js"),o=require("../v3_theme/index.js"),d=require("./brand.js"),l=require("./drawer.js"),c=require("./navbar.styles.js"),u=require("./navbar-action-buttons.js"),m=require("./navbar-helper.js"),v=require("./navbar-items.js"),b=require("./navbar-logo-data.js");const h=r.forwardRef(((h,p)=>{var{items:k,className:j,id:x,selectedId:C,compress:y=!1,fixed:B=!0,resources:N,hideNavElements:w=!1,hideNavBranding:f=!1,hideLinkIndicator:g=!1,drawerDismissalExclusions:I=[],actionButtons:q,onItemClick:L,onActionButtonClick:_,onBrandClick:E,masthead:M=!0,layout:D="default",headerLabel:A="Main navigation menu",drawerLabel:O}=h,R=e.__rest(h,["items","className","id","selectedId","compress","fixed","resources","hideNavElements","hideNavBranding","hideLinkIndicator","drawerDismissalExclusions","actionButtons","onItemClick","onActionButtonClick","onBrandClick","masthead","layout","headerLabel","drawerLabel"]);const[$,H]=r.useState(!1),[S,z]=r.useState(!1),T=r.useRef(null),W="stretch"===D,F=r.useRef(null),V=r.useContext(n.ThemeContext),G=b.getDefaultResourceLogo(null==V?void 0:V.resourceScheme),J=o.V3_Breakpoint["lg-max"]({theme:V}),K=(null==N?void 0:N.primary)||G.primary,P=null==N?void 0:N.secondary;r.useImperativeHandle(p,(()=>Object.assign(F.current,{dismissDrawer:()=>{Q()}})),[$]),r.useEffect((()=>(X(),window.addEventListener("resize",X),()=>{window.removeEventListener("resize",X)})),[]);const Q=()=>{H(!1),setTimeout((()=>{z(!1)}),550)},U=e=>$&&-1===I.indexOf(e),X=()=>{window.innerWidth<=J&&$&&Q()},Y=(e,a)=>{E&&E(a),U("brand-click")&&Q()},Z=(e,a)=>{m.NavbarHelper.isNavItemCommon(a)&&a.onClick?a.onClick(e):L&&(e.preventDefault(),L(a)),m.NavbarHelper.isNavItemLink(a)&&!a.subMenu&&U("item-click")&&Q()},ee=(e,a)=>{var r;"button"!==a.type&&"download"!==a.type||!(null===(r=a.args)||void 0===r?void 0:r.onClick)?_&&(e.preventDefault(),_(a)):a.args.onClick(e),U("item-click")&&Q()},ae=()=>{H(!0),z(!0)},re=()=>{U("close-button-click")&&Q()},ne=()=>{const e=k.mobile||k.desktop;return e&&e.length>0||q&&(e=>{const a=e.mobile||e.desktop;return!!a&&a.length&&a.some((e=>!e.uncollapsible))})(q)?a.jsx(c.MobileMenuButton,{ref:T,"aria-label":$?"Close nav menu":"Open nav menu","aria-expanded":$,"data-testid":"button__mobile-menu",onClick:ae,focusHighlight:!1,children:a.jsx(c.MobileMenuIcon,{})}):null};return a.jsxs(c.Wrapper,{ref:F,$fixed:B,className:j,id:x||"navbar-wrapper","data-testid":R["data-testid"]||"navbar-wrapper",children:[M&&a.jsx(i.Masthead,{stretch:W}),a.jsxs(t.Layout.Content,{stretch:W,children:[a.jsxs(c.Nav,{$compress:y,"aria-label":A,children:[!f&&a.jsxs(c.NavBrandContainer,{$compress:y,"data-id":"brand-container",children:[K&&a.jsx(d.Brand,{resources:K,onClick:Y,"data-id":"brand-primary","data-testid":"main__brand",type:"primary"}),P&&a.jsxs(a.Fragment,{children:[a.jsx(c.NavSeparator,{$compress:y}),a.jsx(d.Brand,{resources:P,onClick:Y,"data-id":"brand-secondary","data-testid":"main__brand-secondary",type:"secondary"})]})]}),!w&&a.jsxs(c.NavElementsContainer,{$hideNavBranding:f,children:[a.jsx(v.NavbarItems,{items:k.desktop,onItemClick:Z,selectedId:C,hideNavBranding:f,hideLinkIndicator:g}),a.jsx(u.NavbarActionButtons,{actionButtons:q,onActionButtonClick:ee}),ne()]})]}),!w&&a.jsx(s.Overlay,{show:S,enableOverlayClick:!0,onOverlayClick:re,children:a.jsxs(l.Drawer,{show:$,resources:{primary:K,secondary:P},onClose:re,onBrandClick:Y,actionButtons:q,hideNavBranding:f,mobileMenuRef:T,drawerLabel:O,children:[a.jsx(v.NavbarItems,{items:k.mobile||k.desktop,onItemClick:Z,selectedId:C,mobile:!0,hideLinkIndicator:g}),a.jsx(u.NavbarActionButtons,{actionButtons:q,onActionButtonClick:ee,mobile:!0})]})})]})]})}));exports.Navbar=h;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("@lifesg/react-icons/menu"),n=require("clsx"),i=require("react"),t=require("../layout/index.js"),s=require("../masthead/masthead.js"),o=require("../overlay/overlay.js"),l=require("../shared/clickable-icon/clickable-icon.js");require("../theme/theme-provider/index.js");var d=require("../theme/utils/css-variable.js"),u=require("../theme/theme-provider/context.js");require("../theme/tokens/border.js");var c=require("../theme/tokens/breakpoint.js");require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var m=require("../theme/utils/use-design-token.js");require("../theme/utils/use-media-query.js");var v=require("./brand.js"),p=require("./drawer.js"),h=require("./navbar.styles.js"),b=require("./navbar-action-buttons.js"),j=require("./navbar-helper.js"),k=require("./navbar-items.js"),x=require("./navbar-logo-data.js");function C(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var q=C(n);const y=i.forwardRef(((n,C)=>{var{items:y,className:f,id:B,selectedId:w,compress:g=!1,fixed:N=!0,resources:I,hideNavElements:L=!1,hideNavBranding:D=!1,hideLinkIndicator:_=!1,drawerDismissalExclusions:E=[],actionButtons:R,onItemClick:M,onActionButtonClick:O,onBrandClick:A,masthead:S=!0,layout:F="default",headerLabel:H="Main navigation menu",drawerLabel:T}=n,z=e.__rest(n,["items","className","id","selectedId","compress","fixed","resources","hideNavElements","hideNavBranding","hideLinkIndicator","drawerDismissalExclusions","actionButtons","onItemClick","onActionButtonClick","onBrandClick","masthead","layout","headerLabel","drawerLabel"]);const[W,P]=i.useState(!1),[V,G]=i.useState(!1),J=i.useRef(null),K="stretch"===F,Q=i.useRef(null),U=i.useContext(u.ThemeContext),X=x.getDefaultResourceLogo(null==U?void 0:U.theme),Y=m.useDesignToken(c.Breakpoint["lg-max"]),Z=d.parsePxOrRemValue(Y||"1200px"),$=(null==I?void 0:I.primary)||X.primary,ee=null==I?void 0:I.secondary;i.useImperativeHandle(C,(()=>Object.assign(Q.current,{dismissDrawer:()=>{re()}})),[W]),i.useEffect((()=>(ne(),window.addEventListener("resize",ne),()=>{window.removeEventListener("resize",ne)})),[]);const re=()=>{P(!1),setTimeout((()=>{G(!1)}),550)},ae=e=>W&&-1===E.indexOf(e),ne=()=>{window.innerWidth<=Z&&W&&re()},ie=(e,r)=>{A&&A(r),ae("brand-click")&&re()},te=(e,r)=>{j.NavbarHelper.isNavItemCommon(r)&&r.onClick?r.onClick(e):M&&(e.preventDefault(),M(r)),j.NavbarHelper.isNavItemLink(r)&&!r.subMenu&&ae("item-click")&&re()},se=(e,r)=>{var a;"button"!==r.type&&"download"!==r.type||!(null===(a=r.args)||void 0===a?void 0:a.onClick)?O&&(e.preventDefault(),O(r)):r.args.onClick(e),ae("item-click")&&re()},oe=()=>{P(!0),G(!0)},le=()=>{ae("close-button-click")&&re()},de=()=>{const e=y.mobile||y.desktop;return e&&e.length>0||R&&(e=>{const r=e.mobile||e.desktop;return!!r&&r.length&&r.some((e=>!e.uncollapsible))})(R)?r.jsx(l.ClickableIcon,{ref:J,className:h.mobileMenuButton,"aria-label":W?"Close nav menu":"Open nav menu","aria-expanded":W,"data-testid":"button__mobile-menu",onClick:oe,focusHighlight:!1,children:r.jsx(a.MenuIcon,{className:h.mobileMenuIcon})}):null};return r.jsxs("div",{ref:Q,className:q.default(h.wrapper,N?h.wrapperFixed:h.wrapperRelative,"dark"===(null==U?void 0:U.mode)?h.wrapperDark:h.wrapperLight,f),id:B||"navbar-wrapper","data-testid":z["data-testid"]||"navbar-wrapper",children:[S&&r.jsx(s.Masthead,{stretch:K}),r.jsxs(t.Layout.Content,{stretch:K,children:[r.jsxs("nav",{className:q.default(h.nav,g&&h.navCompressed,"dark"===(null==U?void 0:U.mode)&&h.navDark),"aria-label":H,children:[!D&&r.jsxs("div",{className:q.default(h.navBrandContainer,g?h.navBrandContainerCompressed:h.navBrandContainerFull,h.navBrandContainerResponsive),"data-id":"brand-container",children:[$&&r.jsx(v.Brand,{resources:$,onClick:ie,"data-id":"brand-primary","data-testid":"main__brand",type:"primary"}),ee&&r.jsxs(r.Fragment,{children:[r.jsx("div",{className:q.default(h.navSeparator,g?h.navSeparatorCompressed:h.navSeparatorFull,h.navSeparatorResponsive)}),r.jsx(v.Brand,{resources:ee,onClick:ie,"data-id":"brand-secondary","data-testid":"main__brand-secondary",type:"secondary"})]})]}),!L&&r.jsxs("div",{className:q.default(h.navElementsContainer,!D&&h.navElementsContainerWithBranding),children:[r.jsx(k.NavbarItems,{items:y.desktop,onItemClick:te,selectedId:w,hideNavBranding:D,hideLinkIndicator:_}),r.jsx(b.NavbarActionButtons,{actionButtons:R,onActionButtonClick:se}),de()]})]}),!L&&r.jsx(o.Overlay,{show:V,enableOverlayClick:!0,onOverlayClick:le,children:r.jsxs(p.Drawer,{show:W,resources:{primary:$,secondary:ee},onClose:le,onBrandClick:ie,actionButtons:R,hideNavBranding:D,mobileMenuRef:J,drawerLabel:T,children:[r.jsx(k.NavbarItems,{items:y.mobile||y.desktop,onItemClick:te,selectedId:w,mobile:!0,hideLinkIndicator:_}),r.jsx(b.NavbarActionButtons,{actionButtons:R,onActionButtonClick:se,mobile:!0})]})})]})]})}));exports.Navbar=y;
 //# sourceMappingURL=navbar.js.map

package/cjs/navbar/navbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar.js","sources":["../../../src/navbar/navbar.tsx"],"sourcesContent":["import type React from \"react\";\nimport {\n    forwardRef,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { Layout } from \"../layout\";\nimport { Masthead } from \"../masthead/masthead\";\nimport { Overlay } from \"../overlay/overlay\";\nimport { V3_Breakpoint } from \"../v3_theme\";\nimport { Brand } from \"./brand\";\nimport { Drawer } from \"./drawer\";\nimport {\n    MobileMenuButton,\n    MobileMenuIcon,\n    Nav,\n    NavBrandContainer,\n    NavElementsContainer,\n    NavSeparator,\n    Wrapper,\n} from \"./navbar.styles\";\nimport { NavbarActionButtons } from \"./navbar-action-buttons\";\nimport { NavbarHelper } from \"./navbar-helper\";\nimport { NavbarItems } from \"./navbar-items\";\nimport { getDefaultResourceLogo } from \"./navbar-logo-data\";\nimport type {\n    BrandType,\n    DrawerDismissalMethod,\n    NavbarActionButtonsProps,\n    NavbarButtonProps,\n    NavbarDrawerApi,\n    NavbarDrawerHandle,\n    NavbarProps,\n    NavItemCommonProps,\n    NavItemProps,\n} from \"./types\";\n\nconst Component = <T,>(\n    {\n        items,\n        className,\n        id,\n        selectedId,\n        compress = false,\n        fixed = true,\n        resources,\n        hideNavElements = false,\n        hideNavBranding = false,\n        hideLinkIndicator = false,\n        drawerDismissalExclusions: blockDrawerDismissalMethods = [],\n        actionButtons,\n        onItemClick,\n        onActionButtonClick,\n        onBrandClick,\n        masthead = true,\n        layout = \"default\",\n        headerLabel = \"Main navigation menu\",\n        drawerLabel,\n        ...otherProps\n    }: NavbarProps<T>,\n    ref: React.Ref<NavbarDrawerHandle>\n) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const [showDrawer, setShowDrawer] = useState<boolean>(false);\n    const [showOverlay, setShowOverlay] = useState<boolean>(false);\n    const mobileMenuRef = useRef<HTMLButtonElement>(null);\n    const isStretch = layout === \"stretch\";\n    const elementRef = useRef<HTMLDivElement>(null);\n    const theme = useContext(ThemeContext);\n    const defaultResource = getDefaultResourceLogo(theme?.resourceScheme);\n    const tabletWidth = V3_Breakpoint[\"lg-max\"]({ theme });\n\n    const primary = resources?.primary || defaultResource.primary;\n    const secondary = resources?.secondary;\n\n    useImperativeHandle(\n        ref,\n        () =>\n            Object.assign<HTMLDivElement, NavbarDrawerApi>(\n                elementRef.current!,\n                {\n                    dismissDrawer: () => {\n                        dismissDrawer();\n                    },\n                }\n            ),\n        [showDrawer]\n    );\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        handleResize();\n        window.addEventListener(\"resize\", handleResize);\n\n        return () => {\n            window.removeEventListener(\"resize\", handleResize);\n        };\n    }, []);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const dismissDrawer = () => {\n        setShowDrawer(false);\n        setTimeout(() => {\n            setShowOverlay(false);\n        }, 550); // For drawer animation to complete + buffer\n    };\n\n    const shouldDismissDrawer = (dismissalMethod: DrawerDismissalMethod) => {\n        return (\n            showDrawer &&\n            blockDrawerDismissalMethods.indexOf(dismissalMethod) === -1\n        );\n    };\n\n    const hasCollapsibleActionButtons = (\n        actionButtons: NavbarActionButtonsProps\n    ) => {\n        const drawerActionButtons =\n            actionButtons.mobile || actionButtons.desktop;\n        if (drawerActionButtons) {\n            return (\n                drawerActionButtons.length &&\n                drawerActionButtons.some(\n                    (actionButton) => !actionButton.uncollapsible\n                )\n            );\n        }\n\n        return false;\n    };\n\n    // =============================================================================\n    // EVENT HANDLER\n    // =============================================================================\n    const handleResize = () => {\n        if (window.innerWidth <= tabletWidth && showDrawer) {\n            dismissDrawer();\n        }\n    };\n\n    const handleBrandClick = (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        type: BrandType\n    ) => {\n        if (onBrandClick) {\n            onBrandClick(type);\n        }\n\n        if (shouldDismissDrawer(\"brand-click\")) {\n            dismissDrawer();\n        }\n    };\n\n    const handleNavItemClick = <K extends T>(\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemProps<K> | NavItemCommonProps<K>\n    ) => {\n        if (NavbarHelper.isNavItemCommon(item) && item.onClick) {\n            item.onClick(event);\n        } else if (onItemClick) {\n            event.preventDefault();\n            onItemClick(item);\n        }\n\n        if (\n            NavbarHelper.isNavItemLink(item) &&\n            !item.subMenu &&\n            shouldDismissDrawer(\"item-click\")\n        ) {\n            dismissDrawer();\n        }\n    };\n\n    const handleActionButtonClick = (\n        event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<Element>,\n        actionButton: NavbarButtonProps\n    ) => {\n        if (\n            (actionButton.type === \"button\" ||\n                actionButton.type === \"download\") &&\n            actionButton.args?.onClick\n        ) {\n            actionButton.args.onClick(\n                event as React.MouseEvent<HTMLButtonElement>\n            );\n        } else if (onActionButtonClick) {\n            event.preventDefault();\n            onActionButtonClick(actionButton);\n        }\n\n        if (shouldDismissDrawer(\"item-click\")) {\n            dismissDrawer();\n        }\n    };\n\n    const handleMobileMenuButtonClick = () => {\n        setShowDrawer(true);\n        setShowOverlay(true);\n    };\n\n    const handleDrawerClose = () => {\n        if (shouldDismissDrawer(\"close-button-click\")) {\n            dismissDrawer();\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderDrawer = () => (\n        <Overlay\n            show={showOverlay}\n            enableOverlayClick\n            onOverlayClick={handleDrawerClose}\n        >\n            <Drawer\n                show={showDrawer}\n                resources={{ primary, secondary }}\n                onClose={handleDrawerClose}\n                onBrandClick={handleBrandClick}\n                actionButtons={actionButtons}\n                hideNavBranding={hideNavBranding}\n                mobileMenuRef={mobileMenuRef}\n                drawerLabel={drawerLabel}\n            >\n                <NavbarItems\n                    items={items.mobile || items.desktop}\n                    onItemClick={handleNavItemClick}\n                    selectedId={selectedId}\n                    mobile\n                    hideLinkIndicator={hideLinkIndicator}\n                />\n                <NavbarActionButtons\n                    actionButtons={actionButtons}\n                    onActionButtonClick={handleActionButtonClick}\n                    mobile\n                />\n            </Drawer>\n        </Overlay>\n    );\n\n    const renderBrand = () => (\n        <NavBrandContainer $compress={compress} data-id=\"brand-container\">\n            {primary && (\n                <Brand\n                    resources={primary}\n                    onClick={handleBrandClick}\n                    data-id=\"brand-primary\"\n                    data-testid=\"main__brand\"\n                    type=\"primary\"\n                />\n            )}\n            {secondary && (\n                <>\n                    <NavSeparator $compress={compress} />\n                    <Brand\n                        resources={secondary}\n                        onClick={handleBrandClick}\n                        data-id=\"brand-secondary\"\n                        data-testid=\"main__brand-secondary\"\n                        type=\"secondary\"\n                    />\n                </>\n            )}\n        </NavBrandContainer>\n    );\n\n    const renderMobileMenuButton = () => {\n        const drawerItems = items.mobile || items.desktop;\n        if (\n            (drawerItems && drawerItems.length > 0) ||\n            (actionButtons && hasCollapsibleActionButtons(actionButtons))\n        ) {\n            return (\n                <MobileMenuButton\n                    ref={mobileMenuRef}\n                    aria-label={showDrawer ? \"Close nav menu\" : \"Open nav menu\"}\n                    aria-expanded={showDrawer}\n                    data-testid=\"button__mobile-menu\"\n                    onClick={handleMobileMenuButtonClick}\n                    focusHighlight={false}\n                >\n                    <MobileMenuIcon />\n                </MobileMenuButton>\n            );\n        }\n\n        return null;\n    };\n\n    const renderNavbar = () => {\n        return (\n            <Layout.Content stretch={isStretch}>\n                <Nav $compress={compress} aria-label={headerLabel}>\n                    {!hideNavBranding && renderBrand()}\n                    {!hideNavElements && (\n                        <NavElementsContainer\n                            $hideNavBranding={hideNavBranding}\n                        >\n                            <NavbarItems\n                                items={items.desktop}\n                                onItemClick={handleNavItemClick}\n                                selectedId={selectedId}\n                                hideNavBranding={hideNavBranding}\n                                hideLinkIndicator={hideLinkIndicator}\n                            />\n                            <NavbarActionButtons\n                                actionButtons={actionButtons}\n                                onActionButtonClick={handleActionButtonClick}\n                            />\n                            {renderMobileMenuButton()}\n                        </NavElementsContainer>\n                    )}\n                </Nav>\n\n                {!hideNavElements && renderDrawer()}\n            </Layout.Content>\n        );\n    };\n\n    return (\n        <Wrapper\n            ref={elementRef}\n            $fixed={fixed}\n            className={className}\n            id={id || \"navbar-wrapper\"}\n            data-testid={otherProps[\"data-testid\"] || \"navbar-wrapper\"}\n        >\n            {masthead && <Masthead stretch={isStretch} />}\n            {renderNavbar()}\n        </Wrapper>\n    );\n};\n\nexport const Navbar = forwardRef(Component);\n"],"names":["Navbar","forwardRef","_a","ref","items","className","id","selectedId","compress","fixed","resources","hideNavElements","hideNavBranding","hideLinkIndicator","drawerDismissalExclusions","blockDrawerDismissalMethods","actionButtons","onItemClick","onActionButtonClick","onBrandClick","masthead","layout","headerLabel","drawerLabel","otherProps","__rest","showDrawer","setShowDrawer","useState","showOverlay","setShowOverlay","mobileMenuRef","useRef","isStretch","elementRef","theme","useContext","ThemeContext","defaultResource","getDefaultResourceLogo","resourceScheme","tabletWidth","V3_Breakpoint","primary","secondary","useImperativeHandle","Object","assign","current","dismissDrawer","useEffect","handleResize","window","addEventListener","removeEventListener","setTimeout","shouldDismissDrawer","dismissalMethod","indexOf","innerWidth","handleBrandClick","event","type","handleNavItemClick","item","NavbarHelper","isNavItemCommon","onClick","preventDefault","isNavItemLink","subMenu","handleActionButtonClick","actionButton","args","handleMobileMenuButtonClick","handleDrawerClose","renderMobileMenuButton","drawerItems","mobile","desktop","length","drawerActionButtons","some","uncollapsible","hasCollapsibleActionButtons","_jsx","MobileMenuButton","focusHighlight","MobileMenuIcon","_jsxs","Wrapper","$fixed","children","Masthead","stretch","Layout","Content","Nav","$compress","NavBrandContainer","Brand","_Fragment","NavSeparator","NavElementsContainer","$hideNavBranding","NavbarItems","NavbarActionButtons","Overlay","show","enableOverlayClick","onOverlayClick","Drawer","onClose"],"mappings":"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"}
+{"version":3,"file":"navbar.js","sources":["../../../src/navbar/navbar.tsx"],"sourcesContent":["import { MenuIcon } from \"@lifesg/react-icons/menu\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport {\n    forwardRef,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\n\nimport { Layout } from \"../layout\";\nimport { Masthead } from \"../masthead/masthead\";\nimport { Overlay } from \"../overlay/overlay\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Breakpoint, parsePxOrRemValue, useDesignToken } from \"../theme\";\nimport { ThemeContext } from \"../theme/theme-provider/context\";\nimport { Brand } from \"./brand\";\nimport { Drawer } from \"./drawer\";\nimport * as styles from \"./navbar.styles\";\nimport { NavbarActionButtons } from \"./navbar-action-buttons\";\nimport { NavbarHelper } from \"./navbar-helper\";\nimport { NavbarItems } from \"./navbar-items\";\nimport { getDefaultResourceLogo } from \"./navbar-logo-data\";\nimport type {\n    BrandType,\n    DrawerDismissalMethod,\n    NavbarActionButtonsProps,\n    NavbarButtonProps,\n    NavbarDrawerApi,\n    NavbarDrawerHandle,\n    NavbarProps,\n    NavItemCommonProps,\n    NavItemProps,\n} from \"./types\";\n\nconst Component = <T,>(\n    {\n        items,\n        className,\n        id,\n        selectedId,\n        compress = false,\n        fixed = true,\n        resources,\n        hideNavElements = false,\n        hideNavBranding = false,\n        hideLinkIndicator = false,\n        drawerDismissalExclusions: blockDrawerDismissalMethods = [],\n        actionButtons,\n        onItemClick,\n        onActionButtonClick,\n        onBrandClick,\n        masthead = true,\n        layout = \"default\",\n        headerLabel = \"Main navigation menu\",\n        drawerLabel,\n        ...otherProps\n    }: NavbarProps<T>,\n    ref: React.Ref<NavbarDrawerHandle>\n) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const [showDrawer, setShowDrawer] = useState<boolean>(false);\n    const [showOverlay, setShowOverlay] = useState<boolean>(false);\n    const mobileMenuRef = useRef<HTMLButtonElement>(null);\n    const isStretch = layout === \"stretch\";\n    const elementRef = useRef<HTMLDivElement>(null);\n    const theme = useContext(ThemeContext);\n    const defaultResource = getDefaultResourceLogo(theme?.theme);\n    const tabletWidthToken = useDesignToken(Breakpoint[\"lg-max\"]);\n    const tabletWidth = parsePxOrRemValue(tabletWidthToken || \"1200px\");\n\n    const primary = resources?.primary || defaultResource.primary;\n    const secondary = resources?.secondary;\n\n    useImperativeHandle(\n        ref,\n        () =>\n            Object.assign<HTMLDivElement, NavbarDrawerApi>(\n                elementRef.current!,\n                {\n                    dismissDrawer: () => {\n                        dismissDrawer();\n                    },\n                }\n            ),\n        [showDrawer]\n    );\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        handleResize();\n        window.addEventListener(\"resize\", handleResize);\n\n        return () => {\n            window.removeEventListener(\"resize\", handleResize);\n        };\n    }, []);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const dismissDrawer = () => {\n        setShowDrawer(false);\n        setTimeout(() => {\n            setShowOverlay(false);\n        }, 550); // For drawer animation to complete + buffer\n    };\n\n    const shouldDismissDrawer = (dismissalMethod: DrawerDismissalMethod) => {\n        return (\n            showDrawer &&\n            blockDrawerDismissalMethods.indexOf(dismissalMethod) === -1\n        );\n    };\n\n    const hasCollapsibleActionButtons = (\n        actionButtons: NavbarActionButtonsProps\n    ) => {\n        const drawerActionButtons =\n            actionButtons.mobile || actionButtons.desktop;\n        if (drawerActionButtons) {\n            return (\n                drawerActionButtons.length &&\n                drawerActionButtons.some(\n                    (actionButton) => !actionButton.uncollapsible\n                )\n            );\n        }\n\n        return false;\n    };\n\n    // =============================================================================\n    // EVENT HANDLER\n    // =============================================================================\n    const handleResize = () => {\n        if (window.innerWidth <= tabletWidth && showDrawer) {\n            dismissDrawer();\n        }\n    };\n\n    const handleBrandClick = (\n        _event: React.MouseEvent<HTMLAnchorElement>,\n        type: BrandType\n    ) => {\n        if (onBrandClick) {\n            onBrandClick(type);\n        }\n\n        if (shouldDismissDrawer(\"brand-click\")) {\n            dismissDrawer();\n        }\n    };\n\n    const handleNavItemClick = <K extends T>(\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemProps<K> | NavItemCommonProps<K>\n    ) => {\n        if (NavbarHelper.isNavItemCommon(item) && item.onClick) {\n            item.onClick(event);\n        } else if (onItemClick) {\n            event.preventDefault();\n            onItemClick(item);\n        }\n\n        if (\n            NavbarHelper.isNavItemLink(item) &&\n            !item.subMenu &&\n            shouldDismissDrawer(\"item-click\")\n        ) {\n            dismissDrawer();\n        }\n    };\n\n    const handleActionButtonClick = (\n        event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<Element>,\n        actionButton: NavbarButtonProps\n    ) => {\n        if (\n            (actionButton.type === \"button\" ||\n                actionButton.type === \"download\") &&\n            actionButton.args?.onClick\n        ) {\n            actionButton.args.onClick(\n                event as React.MouseEvent<HTMLButtonElement>\n            );\n        } else if (onActionButtonClick) {\n            event.preventDefault();\n            onActionButtonClick(actionButton);\n        }\n\n        if (shouldDismissDrawer(\"item-click\")) {\n            dismissDrawer();\n        }\n    };\n\n    const handleMobileMenuButtonClick = () => {\n        setShowDrawer(true);\n        setShowOverlay(true);\n    };\n\n    const handleDrawerClose = () => {\n        if (shouldDismissDrawer(\"close-button-click\")) {\n            dismissDrawer();\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderDrawer = () => (\n        <Overlay\n            show={showOverlay}\n            enableOverlayClick\n            onOverlayClick={handleDrawerClose}\n        >\n            <Drawer\n                show={showDrawer}\n                resources={{ primary, secondary }}\n                onClose={handleDrawerClose}\n                onBrandClick={handleBrandClick}\n                actionButtons={actionButtons}\n                hideNavBranding={hideNavBranding}\n                mobileMenuRef={mobileMenuRef}\n                drawerLabel={drawerLabel}\n            >\n                <NavbarItems\n                    items={items.mobile || items.desktop}\n                    onItemClick={handleNavItemClick}\n                    selectedId={selectedId}\n                    mobile\n                    hideLinkIndicator={hideLinkIndicator}\n                />\n                <NavbarActionButtons\n                    actionButtons={actionButtons}\n                    onActionButtonClick={handleActionButtonClick}\n                    mobile\n                />\n            </Drawer>\n        </Overlay>\n    );\n\n    const renderBrand = () => (\n        <div\n            className={clsx(\n                styles.navBrandContainer,\n                compress\n                    ? styles.navBrandContainerCompressed\n                    : styles.navBrandContainerFull,\n                styles.navBrandContainerResponsive\n            )}\n            data-id=\"brand-container\"\n        >\n            {primary && (\n                <Brand\n                    resources={primary}\n                    onClick={handleBrandClick}\n                    data-id=\"brand-primary\"\n                    data-testid=\"main__brand\"\n                    type=\"primary\"\n                />\n            )}\n            {secondary && (\n                <>\n                    <div\n                        className={clsx(\n                            styles.navSeparator,\n                            compress\n                                ? styles.navSeparatorCompressed\n                                : styles.navSeparatorFull,\n                            styles.navSeparatorResponsive\n                        )}\n                    />\n                    <Brand\n                        resources={secondary}\n                        onClick={handleBrandClick}\n                        data-id=\"brand-secondary\"\n                        data-testid=\"main__brand-secondary\"\n                        type=\"secondary\"\n                    />\n                </>\n            )}\n        </div>\n    );\n\n    const renderMobileMenuButton = () => {\n        const drawerItems = items.mobile || items.desktop;\n        if (\n            (drawerItems && drawerItems.length > 0) ||\n            (actionButtons && hasCollapsibleActionButtons(actionButtons))\n        ) {\n            return (\n                <ClickableIcon\n                    ref={mobileMenuRef}\n                    className={styles.mobileMenuButton}\n                    aria-label={showDrawer ? \"Close nav menu\" : \"Open nav menu\"}\n                    aria-expanded={showDrawer}\n                    data-testid=\"button__mobile-menu\"\n                    onClick={handleMobileMenuButtonClick}\n                    focusHighlight={false}\n                >\n                    <MenuIcon className={styles.mobileMenuIcon} />\n                </ClickableIcon>\n            );\n        }\n\n        return null;\n    };\n\n    const renderNavbar = () => {\n        return (\n            <Layout.Content stretch={isStretch}>\n                <nav\n                    className={clsx(\n                        styles.nav,\n                        compress && styles.navCompressed,\n                        theme?.mode === \"dark\" && styles.navDark\n                    )}\n                    aria-label={headerLabel}\n                >\n                    {!hideNavBranding && renderBrand()}\n                    {!hideNavElements && (\n                        <div\n                            className={clsx(\n                                styles.navElementsContainer,\n                                !hideNavBranding &&\n                                    styles.navElementsContainerWithBranding\n                            )}\n                        >\n                            <NavbarItems\n                                items={items.desktop}\n                                onItemClick={handleNavItemClick}\n                                selectedId={selectedId}\n                                hideNavBranding={hideNavBranding}\n                                hideLinkIndicator={hideLinkIndicator}\n                            />\n                            <NavbarActionButtons\n                                actionButtons={actionButtons}\n                                onActionButtonClick={handleActionButtonClick}\n                            />\n                            {renderMobileMenuButton()}\n                        </div>\n                    )}\n                </nav>\n\n                {!hideNavElements && renderDrawer()}\n            </Layout.Content>\n        );\n    };\n\n    return (\n        <div\n            ref={elementRef}\n            className={clsx(\n                styles.wrapper,\n                fixed ? styles.wrapperFixed : styles.wrapperRelative,\n                theme?.mode === \"dark\"\n                    ? styles.wrapperDark\n                    : styles.wrapperLight,\n                className\n            )}\n            id={id || \"navbar-wrapper\"}\n            data-testid={otherProps[\"data-testid\"] || \"navbar-wrapper\"}\n        >\n            {masthead && <Masthead stretch={isStretch} />}\n            {renderNavbar()}\n        </div>\n    );\n};\n\nexport const Navbar = forwardRef(Component);\n"],"names":["Navbar","forwardRef","_a","ref","items","className","id","selectedId","compress","fixed","resources","hideNavElements","hideNavBranding","hideLinkIndicator","drawerDismissalExclusions","blockDrawerDismissalMethods","actionButtons","onItemClick","onActionButtonClick","onBrandClick","masthead","layout","headerLabel","drawerLabel","otherProps","__rest","showDrawer","setShowDrawer","useState","showOverlay","setShowOverlay","mobileMenuRef","useRef","isStretch","elementRef","theme","useContext","ThemeContext","defaultResource","getDefaultResourceLogo","tabletWidthToken","useDesignToken","Breakpoint","tabletWidth","parsePxOrRemValue","primary","secondary","useImperativeHandle","Object","assign","current","dismissDrawer","useEffect","handleResize","window","addEventListener","removeEventListener","setTimeout","shouldDismissDrawer","dismissalMethod","indexOf","innerWidth","handleBrandClick","_event","type","handleNavItemClick","event","item","NavbarHelper","isNavItemCommon","onClick","preventDefault","isNavItemLink","subMenu","handleActionButtonClick","actionButton","args","handleMobileMenuButtonClick","handleDrawerClose","renderMobileMenuButton","drawerItems","mobile","desktop","length","drawerActionButtons","some","uncollapsible","hasCollapsibleActionButtons","_jsx","ClickableIcon","styles.mobileMenuButton","focusHighlight","children","MenuIcon","styles.mobileMenuIcon","_jsxs","clsx","styles.wrapper","styles.wrapperFixed","styles.wrapperRelative","mode","styles.wrapperDark","styles.wrapperLight","Masthead","stretch","Layout","Content","styles.nav","styles.navCompressed","styles.navDark","styles.navBrandContainer","styles.navBrandContainerCompressed","styles.navBrandContainerFull","styles.navBrandContainerResponsive","Brand","_Fragment","styles.navSeparator","styles.navSeparatorCompressed","styles.navSeparatorFull","styles.navSeparatorResponsive","styles.navElementsContainer","styles.navElementsContainerWithBranding","NavbarItems","NavbarActionButtons","Overlay","show","enableOverlayClick","onOverlayClick","Drawer","onClose"],"mappings":"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"}