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

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

@@ -1 +1 @@
-{"version":3,"file":"brand.styles.js","sources":["../../../src/navbar/brand.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { V3_Motion } from \"../v3_theme\";\nimport type { BrandType } from \"./types\";\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    $type?: BrandType | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Container = styled.a<StyleProps>`\n    display: flex;\n    justify-content: center;\n    height: 100%;\n\n    img {\n        width: auto;\n        height: 100%;\n        transition: ${V3_Motion[\"duration-150\"]} ${V3_Motion[\"ease-default\"]};\n        object-fit: contain;\n    }\n`;\n"],"names":["Container","styled","a","V3_Motion"],"mappings":"0JAgBO,MAAMA,OAAYC,QAAOC,CAAa;;;;;;;;sBAQvBC,EAAAA,UAAU,mBAAmBA,EAAAA,UAAU;;;"}
+{"version":3,"file":"brand.styles.js","sources":["../../../src/navbar/brand.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Motion } from \"../theme\";\n\nexport const container = css`\n    display: flex;\n    justify-content: center;\n    height: 100%;\n\n    img {\n        width: auto;\n        height: 100%;\n        transition: ${Motion[\"duration-150\"]} ${Motion[\"ease-default\"]};\n        object-fit: contain;\n    }\n`;\n"],"names":[],"mappings":"0FAIsB"}

package/cjs/navbar/brand.styles_zcgddp.css

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

package/cjs/navbar/drawer.js

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

package/cjs/navbar/drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","sources":["../../../src/navbar/drawer.tsx"],"sourcesContent":["import React, { useEffect, useLayoutEffect, useRef, useState } from \"react\";\n\nimport { Brand } from \"./brand\";\nimport {\n    CloseButton,\n    CloseIcon,\n    Container,\n    Content,\n    TopBar,\n    Wrapper,\n} from \"./drawer.styles\";\nimport { NavBrandContainer, NavSeparator } from \"./navbar.styles\";\nimport type { NavbarDrawerProps } from \"./types\";\n\nconst Component = (\n    props: NavbarDrawerProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const {\n        show,\n        resources = {},\n        children,\n        hideNavBranding,\n        onClose,\n        onBrandClick,\n        drawerLabel = \"Mobile navigation menu\",\n        mobileMenuRef,\n    } = props;\n    const [viewHeight, setViewHeight] = useState<number>(0);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const { primary, secondary } = resources;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleResize = () => {\n        /**\n         * Reference:\n         * https://css-tricks.com/the-trick-to-viewport-units-on-mobile/\n         */\n        if (window) {\n            const viewHeight = window.innerHeight * 0.01;\n            setViewHeight(viewHeight);\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (!show) return;\n\n        if (event.key === \"Escape\") {\n            event.preventDefault();\n            onClose?.();\n            // Return focus to the hamburger menu button\n            setTimeout(() => {\n                mobileMenuRef?.current?.focus();\n            }, 300);\n        }\n    };\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        handleResize();\n        window.addEventListener(\"resize\", handleResize);\n\n        return () => {\n            window.removeEventListener(\"resize\", handleResize);\n        };\n    }, []);\n\n    // Focus management when drawer opens\n    useLayoutEffect(() => {\n        if (show) {\n            const timer = setTimeout(() => {\n                if (containerRef.current) {\n                    containerRef.current.focus({ preventScroll: true });\n                }\n            }, 550);\n\n            return () => clearTimeout(timer);\n        }\n    }, [show]);\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderBrand = () => {\n        return (\n            <>\n                {primary && (\n                    <Brand\n                        resources={primary}\n                        compress\n                        onClick={onBrandClick}\n                        data-id=\"drawer-brand-primary\"\n                        data-testid=\"drawer__brand\"\n                        type=\"primary\"\n                    />\n                )}\n                {secondary && (\n                    <>\n                        <NavSeparator />\n                        <Brand\n                            resources={secondary}\n                            compress\n                            onClick={onBrandClick}\n                            data-id=\"drawer-brand-secondary\"\n                            data-testid=\"drawer__brand-secondary\"\n                            type=\"secondary\"\n                        />\n                    </>\n                )}\n            </>\n        );\n    };\n\n    const renderTopBar = () => (\n        <TopBar>\n            <NavBrandContainer data-id=\"drawer-brand-container\">\n                {!hideNavBranding && renderBrand()}\n            </NavBrandContainer>\n            <CloseButton\n                onClick={onClose}\n                focusHighlight={false}\n                aria-label=\"Close nav menu\"\n            >\n                <CloseIcon />\n            </CloseButton>\n        </TopBar>\n    );\n\n    return (\n        <Wrapper ref={ref} data-testid=\"drawer\">\n            <Container\n                ref={containerRef}\n                $show={show}\n                $viewHeight={viewHeight}\n                onKeyDown={handleKeyDown}\n                tabIndex={show ? 0 : -1}\n                aria-label={drawerLabel}\n            >\n                <Content>\n                    {renderTopBar()}\n                    {children}\n                </Content>\n            </Container>\n        </Wrapper>\n    );\n};\n\nexport const Drawer = React.forwardRef(Component);\n"],"names":["Drawer","React","forwardRef","props","ref","show","resources","children","hideNavBranding","onClose","onBrandClick","drawerLabel","mobileMenuRef","viewHeight","setViewHeight","useState","containerRef","useRef","primary","secondary","handleResize","window","innerHeight","useEffect","addEventListener","removeEventListener","useLayoutEffect","timer","setTimeout","current","focus","preventScroll","clearTimeout","_jsx","Wrapper","Container","$show","onKeyDown","event","key","preventDefault","_a","tabIndex","_jsxs","Content","TopBar","NavBrandContainer","_Fragment","Brand","compress","onClick","type","NavSeparator","CloseButton","focusHighlight","CloseIcon"],"mappings":"mOAcA,MA6IaA,OAASC,QAAMC,YA7IV,CACdC,EACAC,KAKA,MAAMC,KACFA,EAAIC,UACJA,EAAY,CAAA,EAAEC,SACdA,EAAQC,gBACRA,EAAeC,QACfA,EAAOC,aACPA,EAAYC,YACZA,EAAc,yBAAwBC,cACtCA,GACAT,GACGU,EAAYC,GAAiBC,EAAAA,SAAiB,GAC/CC,EAAeC,EAAAA,OAAuB,OAEtCC,QAAEA,EAAOC,UAAEA,GAAcb,EAKzBc,EAAe,KAKjB,GAAIC,OAAQ,CACR,MAAMR,EAAkC,IAArBQ,OAAOC,YAC1BR,EAAcD,EAClB,GAmBJU,EAAAA,WAAU,KACNH,IACAC,OAAOG,iBAAiB,SAAUJ,GAE3B,KACHC,OAAOI,oBAAoB,SAAUL,EAAa,IAEvD,IAGHM,EAAAA,iBAAgB,KACZ,GAAIrB,EAAM,CACN,MAAMsB,EAAQC,YAAW,KACjBZ,EAAaa,SACbb,EAAaa,QAAQC,MAAM,CAAEC,eAAe,GAChD,GACD,KAEH,MAAO,IAAMC,aAAaL,EAC9B,IACD,CAACtB,IAkDJ,OACI4B,EAAAA,IAACC,EAAAA,QAAO,CAAC9B,IAAKA,EAAG,cAAc,SAAQG,SACnC0B,EAAAA,IAACE,EAAAA,UAAS,CACN/B,IAAKY,EAAYoB,MACV/B,cACMQ,EACbwB,UA5FWC,IACdjC,GAEa,WAAdiC,EAAMC,MACND,EAAME,iBACN/B,SAAAA,IAEAmB,YAAW,WACe,QAAtBa,EAAA7B,aAAa,EAAbA,EAAeiB,eAAO,IAAAY,GAAAA,EAAEX,OAAO,GAChC,KACP,EAmFQY,SAAUrC,EAAO,GAAI,EAAE,aACXM,WAEZgC,EAAAA,KAACC,EAAAA,QAAO,CAAArC,SAAA,CAxBhBoC,EAAAA,KAACE,EAAAA,OAAM,CAAAtC,SAAA,CACH0B,EAAAA,IAACa,EAAAA,6BAA0B,yBAAwBvC,UAC7CC,GA/BNmC,OAAAI,EAAAA,SAAA,CAAAxC,SAAA,CACKW,GACGe,EAAAA,IAACe,QAAK,CACF1C,UAAWY,EACX+B,UAAQ,EACRC,QAASxC,EAAY,UACb,uBAAsB,cAClB,gBACZyC,KAAK,YAGZhC,GACGwB,EAAAA,KAAAI,EAAAA,SAAA,CAAAxC,SAAA,CACI0B,EAAAA,IAACmB,EAAAA,aAAY,IACbnB,MAACe,EAAAA,MAAK,CACF1C,UAAWa,EACX8B,UAAQ,EACRC,QAASxC,EAAY,UACb,yBAAwB,cACpB,0BACZyC,KAAK,sBAarBlB,EAAAA,IAACoB,EAAAA,YAAW,CACRH,QAASzC,EACT6C,gBAAgB,EAAK,aACV,0BAEXrB,EAAAA,IAACsB,EAAAA,mBAiBIhD,QAGH"}
+{"version":3,"file":"drawer.js","sources":["../../../src/navbar/drawer.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useLayoutEffect, useRef, useState } from \"react\";\n\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useApplyStyle } from \"../theme\";\nimport { Brand } from \"./brand\";\nimport * as styles from \"./drawer.styles\";\nimport * as navbarStyles from \"./navbar.styles\";\nimport type { NavbarDrawerProps } from \"./types\";\n\nconst Component = (\n    props: NavbarDrawerProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const {\n        show,\n        resources = {},\n        children,\n        hideNavBranding,\n        onClose,\n        onBrandClick,\n        drawerLabel = \"Mobile navigation menu\",\n        mobileMenuRef,\n    } = props;\n    const [viewHeight, setViewHeight] = useState<number>(0);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.container.viewHeight]: viewHeight\n            ? `${viewHeight}px`\n            : null,\n    });\n\n    const { primary, secondary } = resources;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleResize = () => {\n        /**\n         * Reference:\n         * https://css-tricks.com/the-trick-to-viewport-units-on-mobile/\n         */\n        if (window) {\n            const viewHeight = window.innerHeight * 0.01;\n            setViewHeight(viewHeight);\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (!show) return;\n\n        if (event.key === \"Escape\") {\n            event.preventDefault();\n            onClose?.();\n            // Return focus to the hamburger menu button\n            setTimeout(() => {\n                mobileMenuRef?.current?.focus();\n            }, 300);\n        }\n    };\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        handleResize();\n        window.addEventListener(\"resize\", handleResize);\n\n        return () => {\n            window.removeEventListener(\"resize\", handleResize);\n        };\n    }, []);\n\n    // Focus management when drawer opens\n    useLayoutEffect(() => {\n        if (show) {\n            const timer = setTimeout(() => {\n                if (containerRef.current) {\n                    containerRef.current.focus({ preventScroll: true });\n                }\n            }, 550);\n\n            return () => clearTimeout(timer);\n        }\n    }, [show]);\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderBrand = () => {\n        return (\n            <>\n                {primary && (\n                    <Brand\n                        resources={primary}\n                        compress\n                        onClick={onBrandClick}\n                        data-id=\"drawer-brand-primary\"\n                        data-testid=\"drawer__brand\"\n                        type=\"primary\"\n                    />\n                )}\n                {secondary && (\n                    <>\n                        <div\n                            className={clsx(\n                                navbarStyles.navSeparator,\n                                navbarStyles.navSeparatorCompressed,\n                                navbarStyles.navSeparatorResponsive\n                            )}\n                        />\n                        <Brand\n                            resources={secondary}\n                            compress\n                            onClick={onBrandClick}\n                            data-id=\"drawer-brand-secondary\"\n                            data-testid=\"drawer__brand-secondary\"\n                            type=\"secondary\"\n                        />\n                    </>\n                )}\n            </>\n        );\n    };\n\n    const renderTopBar = () => (\n        <div className={styles.topBar}>\n            <div\n                className={clsx(\n                    navbarStyles.navBrandContainer,\n                    navbarStyles.navBrandContainerCompressed,\n                    navbarStyles.navBrandContainerResponsive\n                )}\n                data-id=\"drawer-brand-container\"\n            >\n                {!hideNavBranding && renderBrand()}\n            </div>\n            <ClickableIcon\n                className={styles.closeButton}\n                onClick={onClose}\n                focusHighlight={false}\n                aria-label=\"Close nav menu\"\n            >\n                <CrossIcon className={styles.closeIcon} />\n            </ClickableIcon>\n        </div>\n    );\n\n    return (\n        <div className={styles.wrapper} ref={ref} data-testid=\"drawer\">\n            <nav\n                ref={containerRef}\n                className={clsx(\n                    styles.container,\n                    show ? styles.containerShown : styles.containerHidden\n                )}\n                onKeyDown={handleKeyDown}\n                tabIndex={show ? 0 : -1}\n                aria-label={drawerLabel}\n            >\n                <div className={styles.content}>\n                    {renderTopBar()}\n                    {children}\n                </div>\n            </nav>\n        </div>\n    );\n};\n\nexport const Drawer = React.forwardRef(Component);\n"],"names":["Drawer","React","forwardRef","props","ref","show","resources","children","hideNavBranding","onClose","onBrandClick","drawerLabel","mobileMenuRef","viewHeight","setViewHeight","useState","containerRef","useRef","useApplyStyle","styles.tokens","container","primary","secondary","handleResize","window","innerHeight","useEffect","addEventListener","removeEventListener","useLayoutEffect","timer","setTimeout","current","focus","preventScroll","clearTimeout","_jsx","className","styles.wrapper","clsx","styles.container","styles.containerShown","styles.containerHidden","onKeyDown","event","key","preventDefault","_a","tabIndex","_jsxs","styles.content","styles.topBar","navbarStyles.navBrandContainer","navbarStyles.navBrandContainerCompressed","navbarStyles.navBrandContainerResponsive","_Fragment","Brand","compress","onClick","type","navbarStyles.navSeparator","navbarStyles.navSeparatorCompressed","navbarStyles.navSeparatorResponsive","ClickableIcon","styles.closeButton","focusHighlight","CrossIcon","styles.closeIcon"],"mappings":"qrBAWA,MAmKaA,OAASC,QAAMC,YAnKV,CACdC,EACAC,KAKA,MAAMC,KACFA,EAAIC,UACJA,EAAY,CAAA,EAAEC,SACdA,EAAQC,gBACRA,EAAeC,QACfA,EAAOC,aACPA,EAAYC,YACZA,EAAc,yBAAwBC,cACtCA,GACAT,GACGU,EAAYC,GAAiBC,EAAAA,SAAiB,GAC/CC,EAAeC,EAAAA,OAAuB,MAE5CC,EAAAA,cAAcF,EAAc,CACxB,CAACG,EAAAA,OAAcC,UAAUP,YAAaA,EAChC,GAAGA,MACH,OAGV,MAAMQ,QAAEA,EAAOC,UAAEA,GAAchB,EAKzBiB,EAAe,KAKjB,GAAIC,OAAQ,CACR,MAAMX,EAAkC,IAArBW,OAAOC,YAC1BX,EAAcD,EAClB,GAmBJa,EAAAA,WAAU,KACNH,IACAC,OAAOG,iBAAiB,SAAUJ,GAE3B,KACHC,OAAOI,oBAAoB,SAAUL,EAAa,IAEvD,IAGHM,EAAAA,iBAAgB,KACZ,GAAIxB,EAAM,CACN,MAAMyB,EAAQC,YAAW,KACjBf,EAAagB,SACbhB,EAAagB,QAAQC,MAAM,CAAEC,eAAe,GAChD,GACD,KAEH,MAAO,IAAMC,aAAaL,EAC9B,IACD,CAACzB,IAgEJ,OACI+B,EAAAA,IAAA,MAAA,CAAKC,UAAWC,EAAAA,QAAgBlC,IAAKA,EAAG,cAAc,SAAQG,SAC1D6B,EAAAA,IAAA,MAAA,CACIhC,IAAKY,EACLqB,UAAWE,EAAAA,QACPC,EAAAA,UACAnC,EAAOoC,EAAAA,eAAwBC,EAAAA,iBAEnCC,UA5GWC,IACdvC,GAEa,WAAduC,EAAMC,MACND,EAAME,iBACNrC,SAAAA,IAEAsB,YAAW,WACe,QAAtBgB,EAAAnC,aAAa,EAAbA,EAAeoB,eAAO,IAAAe,GAAAA,EAAEd,OAAO,GAChC,KACP,EAmGQe,SAAU3C,EAAO,GAAI,EAAE,aACXM,WAEZsC,EAAAA,KAAA,MAAA,CAAKZ,UAAWa,UAAc3C,SAAA,CAlCtC0C,EAAAA,KAAA,MAAA,CAAKZ,UAAWc,SAAa5C,SAAA,CACzB6B,EAAAA,WACIC,UAAWE,EAAAA,QACPa,oBACAC,EAAAA,4BACAC,EAAAA,6BACH,UACO,mCAEN9C,GA5CNyC,OAAAM,EAAAA,SAAA,CAAAhD,SAAA,CACKc,GACGe,MAACoB,EAAAA,MAAK,CACFlD,UAAWe,EACXoC,UAAQ,EACRC,QAAShD,EAAY,UACb,uBAAsB,cAClB,gBACZiD,KAAK,YAGZrC,GACG2B,EAAAA,KAAAM,EAAAA,SAAA,CAAAhD,SAAA,CACI6B,MAAA,MAAA,CACIC,UAAWE,UACPqB,EAAAA,aACAC,EAAAA,uBACAC,EAAAA,0BAGR1B,EAAAA,IAACoB,EAAAA,MAAK,CACFlD,UAAWgB,EACXmC,UAAQ,EACRC,QAAShD,EAAY,UACb,uCACI,0BACZiD,KAAK,sBAoBrBvB,EAAAA,IAAC2B,EAAAA,cAAa,CACV1B,UAAW2B,EAAAA,YACXN,QAASjD,EACTwD,gBAAgB,EAAK,aACV,iBAAgB1D,SAE3B6B,MAAC8B,EAAAA,UAAS,CAAC7B,UAAW8B,EAAAA,iBAmBjB5D,QAGP"}

package/cjs/navbar/drawer.styles.js

@@ -1,66 +1,2 @@
-"use strict";var e=require("@lifesg/react-icons/cross"),i=require("styled-components"),t=require("../shared/clickable-icon/clickable-icon.js"),o=require("../v3_theme/index.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=s(i);const a=n.default.div`
-    display: none;
-
-    ${o.V3_MediaQuery.MaxWidth.lg} {
-        display: flex;
-    }
-`,r=n.default.nav`
-    position: absolute;
-    overflow-y: auto;
-    overflow-x: hidden;
-    height: 100vh;
-    display: block;
-    padding: 0 0 ${o.V3_Spacing["spacing-16"]};
-    background-color: ${o.V3_Colour.bg};
-    box-shadow: ${o.V3_Shadow["xs-subtle"]};
-    visibility: ${e=>e.$show?"visible":"hidden"};
-    outline: none;
-
-    ${e=>e.$show?i.css`
-            right: 0;
-            transition: all 300ms ${o.V3_Motion["ease-entrance"]};
-            transition-delay: 200ms;
-        `:i.css`
-        right: -100%;
-        transition: all 300ms ${o.V3_Motion["ease-exit"]};
-    `}
-    ${e=>{let t="1vh";return e.$viewHeight&&(t=`${e.$viewHeight}px`),i.css`
-            height: calc(${t} * 100);
-        `}}
-
-	${o.V3_MediaQuery.MaxWidth.lg} {
-        width: 75%;
-    }
-
-    ${o.V3_MediaQuery.MaxWidth.sm} {
-        width: 100%;
-    }
-`,l=n.default.div`
-    display: flex;
-    flex-direction: column;
-`,c=n.default.div`
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    position: relative;
-    padding: ${o.V3_Spacing["spacing-40"]} ${o.V3_Spacing["spacing-20"]}
-        ${o.V3_Spacing["spacing-32"]};
-`,d=n.default(e.CrossIcon)`
-    height: 1.5rem;
-    width: 1.5rem;
-`,p=n.default(t.ClickableIcon)`
-    position: absolute;
-    right: -${o.V3_Spacing["spacing-4"]};
-    color: ${o.V3_Colour.icon};
-
-    &:active,
-    &:focus {
-        color: ${o.V3_Colour["icon-hover"]};
-    }
-
-    svg {
-        height: 1.5rem;
-        width: 1.5rem;
-    }
-`;exports.CloseButton=p,exports.CloseIcon=d,exports.Container=r,exports.Content=l,exports.TopBar=c,exports.Wrapper=a;
+"use strict";require("./drawer.styles_7hnxp5.css");exports.closeButton="c4lb5hz",exports.closeIcon="csth4gk",exports.container="c1dn2jn3",exports.containerHidden="c9clmba",exports.containerShown="cc2efvs",exports.content="c1yr3tbf",exports.tokens={container:{viewHeight:"--fds-internal-navbar-drawer-viewHeight"}},exports.topBar="tkfa6sy",exports.wrapper="w13l2hkd";
 //# sourceMappingURL=drawer.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"drawer.styles.js","sources":["../../../src/navbar/drawer.styles.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport styled, { css } from \"styled-components\";\n\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport {\n    V3_Colour,\n    V3_MediaQuery,\n    V3_Motion,\n    V3_Shadow,\n    V3_Spacing,\n} from \"../v3_theme\";\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    $show: boolean;\n    $viewHeight?: number | undefined;\n}\n\n// =============================================================================\n// STYLING HELPERS\n// =============================================================================\nconst VISIBILITY_STYLE = (show: boolean | undefined) => {\n    if (show) {\n        return css`\n            right: 0;\n            transition: all 300ms ${V3_Motion[\"ease-entrance\"]};\n            transition-delay: 200ms;\n        `;\n    }\n\n    return css`\n        right: -100%;\n        transition: all 300ms ${V3_Motion[\"ease-exit\"]};\n    `;\n};\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Wrapper = styled.div`\n    display: none;\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        display: flex;\n    }\n`;\n\nexport const Container = styled.nav<StyleProps>`\n    position: absolute;\n    overflow-y: auto;\n    overflow-x: hidden;\n    height: 100vh;\n    display: block;\n    padding: 0 0 ${V3_Spacing[\"spacing-16\"]};\n    background-color: ${V3_Colour.bg};\n    box-shadow: ${V3_Shadow[\"xs-subtle\"]};\n    visibility: ${(props) => (props.$show ? \"visible\" : \"hidden\")};\n    outline: none;\n\n    ${(props) => VISIBILITY_STYLE(props.$show)}\n    ${(props) => {\n        let viewHeight = \"1vh\";\n        if (props.$viewHeight) {\n            viewHeight = `${props.$viewHeight}px`;\n        }\n        return css`\n            height: calc(${viewHeight} * 100);\n        `;\n    }}\n\n\t${V3_MediaQuery.MaxWidth.lg} {\n        width: 75%;\n    }\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        width: 100%;\n    }\n`;\n\nexport const Content = styled.div`\n    display: flex;\n    flex-direction: column;\n`;\n\n// -----------------------------------------------------------------------------\n// NAV CONTENTS\n// -----------------------------------------------------------------------------\nexport const TopBar = styled.div`\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    position: relative;\n    padding: ${V3_Spacing[\"spacing-40\"]} ${V3_Spacing[\"spacing-20\"]}\n        ${V3_Spacing[\"spacing-32\"]};\n`;\n\nexport const CloseIcon = styled(CrossIcon)`\n    height: 1.5rem;\n    width: 1.5rem;\n`;\n\nexport const CloseButton = styled(ClickableIcon)`\n    position: absolute;\n    right: -${V3_Spacing[\"spacing-4\"]};\n    color: ${V3_Colour[\"icon\"]};\n\n    &:active,\n    &:focus {\n        color: ${V3_Colour[\"icon-hover\"]};\n    }\n\n    svg {\n        height: 1.5rem;\n        width: 1.5rem;\n    }\n`;\n"],"names":["Wrapper","styled","div","V3_MediaQuery","MaxWidth","lg","Container","nav","V3_Spacing","V3_Colour","bg","V3_Shadow","props","$show","css","V3_Motion","viewHeight","$viewHeight","sm","Content","TopBar","CloseIcon","CrossIcon","CloseButton","ClickableIcon"],"mappings":"oQAwBA,MAkBaA,EAAUC,EAAAA,QAAOC,GAAG;;;MAG3BC,EAAAA,cAAcC,SAASC;;;EAKhBC,EAAYL,EAAAA,QAAOM,GAAe;;;;;;mBAM5BC,EAAAA,WAAW;wBACNC,EAAAA,UAAUC;kBAChBC,EAAAA,UAAU;kBACTC,GAAWA,EAAMC,MAAQ,UAAY;;;MAGjDD,GAA2BA,EAAMC,MApCzBC,KAAG;;oCAEkBC,EAAAA,UAAU;;UAKnCD,KAAG;;gCAEkBC,EAAAA,UAAU;;MA4BnCH,IACC,IAAII,EAAa,MAIjB,OAHIJ,EAAMK,cACND,EAAa,GAAGJ,EAAMK,iBAEnBH,KAAG;2BACSE;SAClB;;GAGNb,EAAAA,cAAcC,SAASC;;;;MAIpBF,EAAAA,cAAcC,SAASc;;;EAKhBC,EAAUlB,EAAAA,QAAOC,GAAG;;;EAQpBkB,EAASnB,EAAAA,QAAOC,GAAG;;;;;eAKjBM,EAAAA,WAAW,iBAAiBA,EAAAA,WAAW;UAC5CA,EAAAA,WAAW;EAGRa,EAAYpB,EAAAA,QAAOqB,EAAAA,UAAU;;;EAK7BC,EAActB,EAAAA,QAAOuB,EAAAA,cAAc;;cAElChB,EAAAA,WAAW;aACZC,EAAAA,UAAgB;;;;iBAIZA,EAAAA,UAAU;;;;;;;"}
+{"version":3,"file":"drawer.styles.js","sources":["../../../src/navbar/drawer.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, MediaQuery, Motion, Shadow, Spacing } from \"../theme\";\n\nexport const tokens = {\n    container: {\n        viewHeight: \"--fds-internal-navbar-drawer-viewHeight\",\n    },\n};\n\nexport const wrapper = css`\n    display: none;\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: flex;\n    }\n`;\n\nexport const container = css`\n    position: absolute;\n    overflow-y: auto;\n    overflow-x: hidden;\n    display: block;\n    padding: 0 0 ${Spacing[\"spacing-16\"]};\n    background-color: ${Colour.bg};\n    box-shadow: ${Shadow[\"xs-subtle\"]};\n    outline: none;\n\n    /* reset variable to prevent leaking to child components */\n    ${tokens.container.viewHeight}: initial;\n    height: calc(var(${tokens.container.viewHeight}, 1vh) * 100);\n\n    ${MediaQuery.MaxWidth.lg} {\n        width: 75%;\n    }\n\n    ${MediaQuery.MaxWidth.sm} {\n        width: 100%;\n    }\n`;\n\nexport const containerShown = css`\n    visibility: visible;\n    right: 0;\n    transition: all 300ms ${Motion[\"ease-entrance\"]};\n    transition-delay: 200ms;\n`;\n\nexport const containerHidden = css`\n    visibility: hidden;\n    right: -100%;\n    transition: all 300ms ${Motion[\"ease-exit\"]};\n`;\n\nexport const content = css`\n    display: flex;\n    flex-direction: column;\n`;\n\n// -----------------------------------------------------------------------------\n// NAV CONTENTS\n// -----------------------------------------------------------------------------\nexport const topBar = css`\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    position: relative;\n    padding: ${Spacing[\"spacing-40\"]} ${Spacing[\"spacing-20\"]}\n        ${Spacing[\"spacing-32\"]};\n`;\n\nexport const closeIcon = css`\n    height: 1.5rem;\n    width: 1.5rem;\n`;\n\nexport const closeButton = css`\n    position: absolute;\n    right: calc(${Spacing[\"spacing-4\"]} * -1);\n    color: ${Colour[\"icon\"]};\n\n    &:active,\n    &:focus {\n        color: ${Colour[\"icon-hover\"]};\n    }\n\n    svg {\n        height: 1.5rem;\n        width: 1.5rem;\n    }\n`;\n"],"names":["container","viewHeight"],"mappings":"6FA4EwB,4BALF,4BArDA,mCA8BM,iCAPD,0BAaP,0BAlDE,CAClBA,UAAW,CACPC,WAAY,2DAwDD,0BApDC"}

package/cjs/navbar/drawer.styles_7hnxp5.css

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

package/cjs/navbar/menu.js

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

package/cjs/navbar/menu.js.map

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

package/cjs/navbar/menu.styles.js

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

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

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

package/cjs/navbar/menu.styles_gdpqc.css

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"navbar-action-buttons.js","sources":["../../../src/navbar/navbar-action-buttons.tsx"],"sourcesContent":["import findIndex from \"lodash/findIndex\";\nimport type React from \"react\";\n\nimport type { ButtonProps } from \"../button/types\";\nimport {\n    ActionButton,\n    ButtonItem,\n    DownloadAppImageLink,\n    DownloadAppImageLinkWrapper,\n    DownloadAppTitle,\n    DownloadAppWrapper,\n    DrawerWrapper,\n    MobileWrapper,\n    Wrapper,\n} from \"./navbar-action-buttons.styles\";\nimport type { NavbarActionButtonsProps, NavbarButtonProps } from \"./types\";\n\nconst APP_STORE_ICON =\n    \"https://assets.life.gov.sg/react-design-system/img/download/apple-app-store.png\";\nconst PLAY_STORE_ICON =\n    \"https://assets.life.gov.sg/react-design-system/img/download/google-play-store.png\";\n\ninterface Props {\n    actionButtons?: NavbarActionButtonsProps | undefined;\n    /** toggle for mobile or desktop view */\n    mobile?: boolean | undefined;\n    onActionButtonClick: (\n        event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<Element>,\n        actionButton: NavbarButtonProps\n    ) => void;\n    uncollapsible?: boolean | undefined;\n}\n\nexport const NavbarActionButtons = ({\n    actionButtons,\n    mobile = false,\n    onActionButtonClick,\n}: Props): JSX.Element => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDownloadAppImageLinkClick = (\n        event: React.MouseEvent<HTMLAnchorElement>\n    ) => {\n        /**\n         * Have to do this to prevent the Overlay\n         * from picking the click, causing the action\n         * to not be run\n         */\n        event.stopPropagation();\n    };\n\n    const handleActionButtonClick = (actionButton: NavbarButtonProps) => {\n        return (event: React.MouseEvent<HTMLButtonElement>) => {\n            event.stopPropagation(); // in mobile, this prevents the drawer from intercepting event\n            if (actionButton.type === \"download\") {\n                window.scrollTo({\n                    left: 0,\n                    top: document.body.scrollHeight,\n                    behavior: \"smooth\",\n                });\n            }\n\n            onActionButtonClick(event, actionButton);\n        };\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const moveDownloadButtonToTheBack = (\n        actionButtons: NavbarButtonProps[]\n    ): NavbarButtonProps[] => {\n        const downloadButtonIndex = findIndex(actionButtons, (button) => {\n            return button.type === \"download\";\n        });\n\n        if (downloadButtonIndex > -1) {\n            const updatedButtons = [...actionButtons];\n            const removedButtons = updatedButtons.splice(\n                downloadButtonIndex,\n                1\n            );\n\n            return [...updatedButtons, removedButtons[0]];\n        }\n\n        return actionButtons;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderDownloadAppMobileView = (args?: ButtonProps) => {\n        return (\n            <DownloadAppWrapper>\n                <DownloadAppTitle weight=\"semibold\">\n                    {(args && args.children) || \"Download the app\"}\n                </DownloadAppTitle>\n                <DownloadAppImageLinkWrapper>\n                    <DownloadAppImageLink\n                        href=\"https://apps.apple.com/sg/app/moments-of-life/id1383218758\"\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\"\n                        data-testid=\"button__app-store\"\n                        onClick={handleDownloadAppImageLinkClick}\n                    >\n                        <img src={APP_STORE_ICON} alt=\"apple-app-store\" />\n                    </DownloadAppImageLink>\n                    <DownloadAppImageLink\n                        href=\"https://play.google.com/store/apps/details?id=sg.gov.app.mol&hl=en_SG\"\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\"\n                        data-testid=\"button__play-store\"\n                        onClick={handleDownloadAppImageLinkClick}\n                    >\n                        <img src={PLAY_STORE_ICON} alt=\"google-play-store\" />\n                    </DownloadAppImageLink>\n                </DownloadAppImageLinkWrapper>\n            </DownloadAppWrapper>\n        );\n    };\n\n    const renderButtons = (\n        isMobile: boolean,\n        actionButtonList: NavbarButtonProps[]\n    ) => {\n        /**\n         * In drawer view, download app button will always be at\n         * the bottom, hence we will shift it to the back\n         */\n        const buttonsToRender = isMobile\n            ? moveDownloadButtonToTheBack(actionButtonList)\n            : actionButtonList;\n\n        return buttonsToRender.map((actionButton, index) => {\n            let component: React.ReactNode;\n            switch (actionButton.type) {\n                case \"download\":\n                    component = isMobile ? (\n                        renderDownloadAppMobileView(actionButton.args)\n                    ) : (\n                        <ActionButton\n                            {...actionButton.args}\n                            type=\"button\"\n                            onClick={handleActionButtonClick(actionButton)}\n                            data-testid=\"action-button__download\"\n                        >\n                            Download the app\n                        </ActionButton>\n                    );\n                    break;\n                case \"button\": {\n                    const testId = actionButton.args[\"data-testid\"]\n                        ? `action-button__${actionButton.args[\"data-testid\"]}`\n                        : `action-button__button-${isMobile ? \"mobile-\" : \"\"}${\n                              index + 1\n                          }`;\n\n                    component = (\n                        <ActionButton\n                            {...actionButton.args}\n                            type=\"button\"\n                            onClick={handleActionButtonClick(actionButton)}\n                            data-testid={testId}\n                        />\n                    );\n                    break;\n                }\n                case \"component\": {\n                    const args = actionButton.args;\n                    component = (args && args.render) || null;\n                    break;\n                }\n                default:\n                    component = null;\n                    break;\n            }\n\n            if (component) {\n                return (\n                    <ButtonItem\n                        key={`action-button-${index + 1}`}\n                        $mobile={isMobile}\n                    >\n                        {component}\n                    </ButtonItem>\n                );\n            }\n        });\n    };\n\n    if (actionButtons) {\n        const actionButtonList = actionButtons?.mobile || actionButtons.desktop;\n        const uncollapsableActionButtons = actionButtonList.filter(\n            (actionButton) => !!actionButton.uncollapsible\n        );\n        const collapsableActionButtons = actionButtonList.filter(\n            (actionButton) => !actionButton.uncollapsible\n        );\n        if (mobile) {\n            return (\n                <>\n                    {collapsableActionButtons.length > 0 && (\n                        <DrawerWrapper>\n                            {renderButtons(mobile, collapsableActionButtons)}\n                        </DrawerWrapper>\n                    )}\n                </>\n            );\n        } else {\n            return (\n                <>\n                    {uncollapsableActionButtons.length > 0 && (\n                        <MobileWrapper>\n                            {renderButtons(false, uncollapsableActionButtons)}\n                        </MobileWrapper>\n                    )}\n                    {actionButtons.desktop.length > 0 && (\n                        <Wrapper>\n                            {renderButtons(mobile, actionButtons.desktop)}\n                        </Wrapper>\n                    )}\n                </>\n            );\n        }\n    }\n\n    return <></>;\n};\n"],"names":["actionButtons","mobile","onActionButtonClick","handleDownloadAppImageLinkClick","event","stopPropagation","handleActionButtonClick","actionButton","type","window","scrollTo","left","top","document","body","scrollHeight","behavior","renderButtons","isMobile","actionButtonList","buttonsToRender","downloadButtonIndex","findIndex","button","updatedButtons","removedButtons","splice","moveDownloadButtonToTheBack","map","index","component","args","_jsxs","DownloadAppWrapper","_jsx","DownloadAppTitle","weight","children","DownloadAppImageLinkWrapper","DownloadAppImageLink","href","target","rel","onClick","src","alt","ActionButton","Object","assign","testId","render","ButtonItem","$mobile","desktop","uncollapsableActionButtons","filter","uncollapsible","collapsableActionButtons","length","DrawerWrapper","MobileWrapper","Wrapper"],"mappings":"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"}
+{"version":3,"file":"navbar-action-buttons.js","sources":["../../../src/navbar/navbar-action-buttons.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport findIndex from \"lodash/findIndex\";\nimport type React from \"react\";\n\nimport { Button } from \"../button\";\nimport type { ButtonProps } from \"../button/types\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./navbar-action-buttons.styles\";\nimport type { NavbarActionButtonsProps, NavbarButtonProps } from \"./types\";\n\nconst APP_STORE_ICON =\n    \"https://assets.life.gov.sg/react-design-system/img/download/apple-app-store.png\";\nconst PLAY_STORE_ICON =\n    \"https://assets.life.gov.sg/react-design-system/img/download/google-play-store.png\";\n\ninterface Props {\n    actionButtons?: NavbarActionButtonsProps | undefined;\n    /** toggle for mobile or desktop view */\n    mobile?: boolean | undefined;\n    onActionButtonClick: (\n        event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<Element>,\n        actionButton: NavbarButtonProps\n    ) => void;\n    uncollapsible?: boolean | undefined;\n}\n\nexport const NavbarActionButtons = ({\n    actionButtons,\n    mobile = false,\n    onActionButtonClick,\n}: Props): JSX.Element => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDownloadAppImageLinkClick = (\n        event: React.MouseEvent<HTMLAnchorElement>\n    ) => {\n        /**\n         * Have to do this to prevent the Overlay\n         * from picking the click, causing the action\n         * to not be run\n         */\n        event.stopPropagation();\n    };\n\n    const handleActionButtonClick = (actionButton: NavbarButtonProps) => {\n        return (event: React.MouseEvent<HTMLButtonElement>) => {\n            event.stopPropagation(); // in mobile, this prevents the drawer from intercepting event\n            if (actionButton.type === \"download\") {\n                window.scrollTo({\n                    left: 0,\n                    top: document.body.scrollHeight,\n                    behavior: \"smooth\",\n                });\n            }\n\n            onActionButtonClick(event, actionButton);\n        };\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const moveDownloadButtonToTheBack = (\n        actionButtons: NavbarButtonProps[]\n    ): NavbarButtonProps[] => {\n        const downloadButtonIndex = findIndex(actionButtons, (button) => {\n            return button.type === \"download\";\n        });\n\n        if (downloadButtonIndex > -1) {\n            const updatedButtons = [...actionButtons];\n            const removedButtons = updatedButtons.splice(\n                downloadButtonIndex,\n                1\n            );\n\n            return [...updatedButtons, removedButtons[0]];\n        }\n\n        return actionButtons;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderDownloadAppMobileView = (args?: ButtonProps) => {\n        return (\n            <div className={styles.downloadAppWrapper}>\n                <Typography.BodyMD\n                    className={styles.downloadAppTitle}\n                    weight=\"semibold\"\n                >\n                    {(args && args.children) || \"Download the app\"}\n                </Typography.BodyMD>\n                <div className={styles.downloadAppImageLinkWrapper}>\n                    <a\n                        className={styles.downloadAppImageLink}\n                        href=\"https://apps.apple.com/sg/app/moments-of-life/id1383218758\"\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\"\n                        data-testid=\"button__app-store\"\n                        onClick={handleDownloadAppImageLinkClick}\n                    >\n                        <img src={APP_STORE_ICON} alt=\"apple-app-store\" />\n                    </a>\n                    <a\n                        className={styles.downloadAppImageLink}\n                        href=\"https://play.google.com/store/apps/details?id=sg.gov.app.mol&hl=en_SG\"\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\"\n                        data-testid=\"button__play-store\"\n                        onClick={handleDownloadAppImageLinkClick}\n                    >\n                        <img src={PLAY_STORE_ICON} alt=\"google-play-store\" />\n                    </a>\n                </div>\n            </div>\n        );\n    };\n\n    const renderButtons = (\n        isMobile: boolean,\n        actionButtonList: NavbarButtonProps[]\n    ) => {\n        /**\n         * In drawer view, download app button will always be at\n         * the bottom, hence we will shift it to the back\n         */\n        const buttonsToRender = isMobile\n            ? moveDownloadButtonToTheBack(actionButtonList)\n            : actionButtonList;\n\n        return buttonsToRender.map((actionButton, index) => {\n            let component: React.ReactNode;\n            switch (actionButton.type) {\n                case \"download\":\n                    component = isMobile ? (\n                        renderDownloadAppMobileView(actionButton.args)\n                    ) : (\n                        <Button\n                            {...actionButton.args}\n                            className={clsx(\n                                styles.actionButton,\n                                actionButton.args?.className\n                            )}\n                            type=\"button\"\n                            sizeType=\"small\"\n                            onClick={handleActionButtonClick(actionButton)}\n                            data-testid=\"action-button__download\"\n                        >\n                            Download the app\n                        </Button>\n                    );\n                    break;\n                case \"button\": {\n                    const testId = actionButton.args[\"data-testid\"]\n                        ? `action-button__${actionButton.args[\"data-testid\"]}`\n                        : `action-button__button-${isMobile ? \"mobile-\" : \"\"}${\n                              index + 1\n                          }`;\n\n                    component = (\n                        <Button\n                            {...actionButton.args}\n                            className={clsx(\n                                styles.actionButton,\n                                actionButton.args?.className\n                            )}\n                            type=\"button\"\n                            sizeType=\"small\"\n                            onClick={handleActionButtonClick(actionButton)}\n                            data-testid={testId}\n                        />\n                    );\n                    break;\n                }\n                case \"component\": {\n                    const args = actionButton.args;\n                    component = (args && args.render) || null;\n                    break;\n                }\n                default:\n                    component = null;\n                    break;\n            }\n\n            if (component) {\n                return (\n                    <li\n                        key={`action-button-${index + 1}`}\n                        className={clsx(\n                            styles.buttonItem,\n                            isMobile && styles.buttonItemMobile\n                        )}\n                    >\n                        {component}\n                    </li>\n                );\n            }\n        });\n    };\n\n    if (actionButtons) {\n        const actionButtonList = actionButtons?.mobile || actionButtons.desktop;\n        const uncollapsableActionButtons = actionButtonList.filter(\n            (actionButton) => !!actionButton.uncollapsible\n        );\n        const collapsableActionButtons = actionButtonList.filter(\n            (actionButton) => !actionButton.uncollapsible\n        );\n        if (mobile) {\n            return (\n                <>\n                    {collapsableActionButtons.length > 0 && (\n                        <ul className={styles.drawerWrapper}>\n                            {renderButtons(mobile, collapsableActionButtons)}\n                        </ul>\n                    )}\n                </>\n            );\n        } else {\n            return (\n                <>\n                    {uncollapsableActionButtons.length > 0 && (\n                        <ul className={styles.mobileWrapper}>\n                            {renderButtons(false, uncollapsableActionButtons)}\n                        </ul>\n                    )}\n                    {actionButtons.desktop.length > 0 && (\n                        <ul className={styles.wrapper}>\n                            {renderButtons(mobile, actionButtons.desktop)}\n                        </ul>\n                    )}\n                </>\n            );\n        }\n    }\n\n    return <></>;\n};\n"],"names":["actionButtons","mobile","onActionButtonClick","handleDownloadAppImageLinkClick","event","stopPropagation","handleActionButtonClick","actionButton","type","window","scrollTo","left","top","document","body","scrollHeight","behavior","renderButtons","isMobile","actionButtonList","buttonsToRender","downloadButtonIndex","findIndex","button","updatedButtons","removedButtons","splice","moveDownloadButtonToTheBack","map","index","component","args","_jsxs","className","styles.downloadAppWrapper","children","_jsx","Typography","BodyMD","styles.downloadAppTitle","weight","styles.downloadAppImageLinkWrapper","styles.downloadAppImageLink","href","target","rel","onClick","src","alt","Button","Object","assign","clsx","styles.actionButton","_a","sizeType","testId","_b","render","styles.buttonItem","styles.buttonItemMobile","desktop","uncollapsableActionButtons","filter","uncollapsible","collapsableActionButtons","_Fragment","length","styles.drawerWrapper","styles.mobileWrapper","styles.wrapper"],"mappings":"kVA0BmC,EAC/BA,gBACAC,UAAS,EACTC,0BAKA,MAAMC,EACFC,IAOAA,EAAMC,iBAAiB,EAGrBC,EAA2BC,GACrBH,IACJA,EAAMC,kBACoB,aAAtBE,EAAaC,MACbC,OAAOC,SAAS,CACZC,KAAM,EACNC,IAAKC,SAASC,KAAKC,aACnBC,SAAU,WAIlBd,EAAoBE,EAAOG,EAAa,EAiE1CU,EAAgB,CAClBC,EACAC,KAMA,MAAMC,EAAkBF,EAlEQ,CAChClB,IAEA,MAAMqB,EAAsBC,EAAAA,QAAUtB,GAAgBuB,GAC3B,aAAhBA,EAAOf,OAGlB,GAAIa,GAAsB,EAAI,CAC1B,MAAMG,EAAiB,IAAIxB,GACrByB,EAAiBD,EAAeE,OAClCL,EACA,GAGJ,MAAO,IAAIG,EAAgBC,EAAe,GAC9C,CAEA,OAAOzB,CAAa,EAkDd2B,CAA4BR,GAC5BA,EAEN,OAAOC,EAAgBQ,KAAI,CAACrB,EAAcsB,aACtC,IAAIC,EACJ,OAAQvB,EAAaC,MACjB,IAAK,WACDsB,EAAYZ,GAnDSa,EAoDWxB,EAAawB,KAlDrDC,EAAAA,KAAA,MAAA,CAAKC,UAAWC,EAAAA,mBAAyBC,SAAA,CACrCC,EAAAA,IAACC,EAAAA,WAAWC,QACRL,UAAWM,EAAAA,iBACXC,OAAO,WAAUL,SAEfJ,GAAQA,EAAKI,UAAa,qBAEhCH,EAAAA,KAAA,MAAA,CAAKC,UAAWQ,8BAAkCN,SAAA,CAC9CC,MAAA,IAAA,CACIH,UAAWS,EAAAA,qBACXC,KAAK,6DACLC,OAAO,SACPC,IAAI,sBAAqB,cACb,oBACZC,QAAS3C,EAA+BgC,SAExCC,EAAAA,IAAA,MAAA,CAAKW,IA7FzB,kFA6F8CC,IAAI,sBAElCZ,EAAAA,IAAA,IAAA,CACIH,UAAWS,EAAAA,qBACXC,KAAK,wEACLC,OAAO,SACPC,IAAI,sBAAqB,cACb,qBACZC,QAAS3C,EAA+BgC,SAExCC,aAAKW,IArGzB,oFAqG+CC,IAAI,+BA0B/BZ,EAAAA,IAACa,EAAAA,OAAMC,OAAAC,OAAA,CAAA,EACC5C,EAAawB,KAAI,CACrBE,UAAWmB,EAAAA,QACPC,eACiB,QAAjBC,EAAA/C,EAAawB,YAAI,IAAAuB,OAAA,EAAAA,EAAErB,WAEvBzB,KAAK,SACL+C,SAAS,QACTT,QAASxC,EAAwBC,GAAa,cAClC,0BAAyB4B,SAAA,sBAK7C,MACJ,IAAK,SAAU,CACX,MAAMqB,EAASjD,EAAawB,KAAK,eAC3B,kBAAkBxB,EAAawB,KAAK,iBACpC,yBAAyBb,EAAW,UAAY,KAC5CW,EAAQ,IAGlBC,EACIM,EAAAA,IAACa,EAAAA,OAAMC,OAAAC,OAAA,CAAA,EACC5C,EAAawB,KAAI,CACrBE,UAAWmB,EAAAA,QACPC,EAAAA,qBACAI,EAAAlD,EAAawB,2BAAME,WAEvBzB,KAAK,SACL+C,SAAS,QACTT,QAASxC,EAAwBC,iBACpBiD,KAGrB,KACJ,CACA,IAAK,YAAa,CACd,MAAMzB,EAAOxB,EAAawB,KAC1BD,EAAaC,GAAQA,EAAK2B,QAAW,KACrC,KACJ,CACA,QACI5B,EAAY,KAjGQ,IAACC,EAqG7B,GAAID,EACA,OACIM,EAAAA,IAAA,KAAA,CAEIH,UAAWmB,EAAAA,QACPO,EAAAA,WACAzC,GAAY0C,EAAAA,kBACfzB,SAEAL,GANI,iBAAiBD,EAAQ,IAS1C,GACF,EAGN,GAAI7B,EAAe,CACf,MAAMmB,GAAmBnB,aAAa,EAAbA,EAAeC,SAAUD,EAAc6D,QAC1DC,EAA6B3C,EAAiB4C,QAC/CxD,KAAmBA,EAAayD,gBAE/BC,EAA2B9C,EAAiB4C,QAC7CxD,IAAkBA,EAAayD,gBAEpC,OAAI/D,EAEImC,EAAAA,IAAA8B,EAAAA,SAAA,CAAA/B,SACK8B,EAAyBE,OAAS,GAC/B/B,MAAA,KAAA,CAAIH,UAAWmC,EAAAA,cAAoBjC,SAC9BlB,EAAchB,EAAQgE,OAOnCjC,EAAAA,KAAAkC,EAAAA,SAAA,CAAA/B,SAAA,CACK2B,EAA2BK,OAAS,GACjC/B,EAAAA,IAAA,KAAA,CAAIH,UAAWoC,gBAAoBlC,SAC9BlB,GAAc,EAAO6C,KAG7B9D,EAAc6D,QAAQM,OAAS,GAC5B/B,EAAAA,IAAA,KAAA,CAAIH,UAAWqC,EAAAA,iBACVrD,EAAchB,EAAQD,EAAc6D,aAM7D,CAEA,OAAOzB,EAAAA,kBAAK"}

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

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

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

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

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

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

package/cjs/navbar/navbar-items.js

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