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

package/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../src/modal/modal.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useEffect, useRef } from \"react\";\n\nimport type { ModalAnimationDirection } from \"../modal-v2/types\";\nimport { Overlay } from \"../overlay/overlay\";\nimport { useViewport } from \"../shared/hooks\";\nimport { useApplyStyle } from \"../theme\";\nimport { useEvent } from \"../util\";\nimport * as styles from \"./modal.styles\";\nimport type { ModalProps } from \"./types\";\n\nconst ANIMATION_FROM_CLASS_MAP: Record<ModalAnimationDirection, string> = {\n    top: styles.containerFromTop,\n    bottom: styles.containerFromBottom,\n    left: styles.containerFromLeft,\n    right: styles.containerFromRight,\n};\n\nconst ANIMATION_FROM_SHOW_CLASS_MAP: Record<ModalAnimationDirection, string> = {\n    top: styles.containerFromTopShow,\n    bottom: styles.containerFromBottomShow,\n    left: styles.containerFromLeftShow,\n    right: styles.containerFromRightShow,\n};\n\nexport const Modal = ({\n    id = \"modal\",\n    show,\n    animationFrom = \"bottom\",\n    children,\n    enableOverlayClick = true,\n    rootComponentId,\n    zIndex,\n    onOverlayClick,\n    dismissKeyboardOnShow = true,\n    className,\n    ...otherProps\n}: ModalProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const { verticalHeight, offsetTop } = useViewport();\n    const childRef = useRef<HTMLDivElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const childWithRef =\n        children && React.cloneElement(children, { ref: childRef });\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.container.verticalHeight]:\n            verticalHeight == null ? null : `${verticalHeight}px`,\n        [styles.tokens.container.offsetTop]:\n            offsetTop == null ? null : `${offsetTop}px`,\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    const dismissKeyboard = useEvent(() => {\n        if (dismissKeyboardOnShow) {\n            (document.activeElement as HTMLElement)?.blur?.();\n        }\n    });\n\n    useEffect(() => {\n        if (show) {\n            dismissKeyboard();\n        }\n    }, [show, dismissKeyboard]);\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <Overlay\n            data-testid={`${id}-overlay`}\n            show={show}\n            enableOverlayClick={enableOverlayClick}\n            onOverlayClick={onOverlayClick}\n            id={id}\n            rootId={rootComponentId}\n            containerRef={childRef}\n            zIndex={zIndex}\n        >\n            <div\n                ref={containerRef}\n                data-testid={id}\n                {...otherProps}\n                className={clsx(\n                    styles.container,\n                    ANIMATION_FROM_CLASS_MAP[animationFrom],\n                    show && ANIMATION_FROM_SHOW_CLASS_MAP[animationFrom],\n                    show ? styles.containerShow : styles.containerHide,\n                    className\n                )}\n            >\n                {childWithRef}\n            </div>\n        </Overlay>\n    );\n};\n"],"names":["ANIMATION_FROM_CLASS_MAP","top","styles.containerFromTop","bottom","styles.containerFromBottom","left","styles.containerFromLeft","right","styles.containerFromRight","ANIMATION_FROM_SHOW_CLASS_MAP","styles.containerFromTopShow","styles.containerFromBottomShow","styles.containerFromLeftShow","styles.containerFromRightShow","Modal","_a","id","show","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","className","otherProps","__rest","verticalHeight","offsetTop","useViewport","childRef","useRef","containerRef","childWithRef","React","cloneElement","ref","useApplyStyle","styles.tokens","container","dismissKeyboard","useEvent","_b","document","activeElement","blur","useEffect","_jsx","Overlay","rootId","Object","assign","clsx","styles.container","styles.containerShow","styles.containerHide"],"mappings":"4jCAWA,MAAMA,EAAoE,CACtEC,IAAKC,EACLC,OAAQC,EACRC,KAAMC,EACNC,MAAOC,GAGLC,EAAyE,CAC3ER,IAAKS,EACLP,OAAQQ,EACRN,KAAMO,EACNL,MAAOM,GAGEC,EAASC,IAAA,IAAAC,GAClBA,EAAK,QAAOC,KACZA,EAAIC,cACJA,EAAgB,SAAQC,SACxBA,EAAQC,mBACRA,GAAqB,EAAIC,gBACzBA,EAAeC,OACfA,EAAMC,eACNA,EAAcC,sBACdA,GAAwB,EAAIC,UAC5BA,GAASV,EACNW,EAAUC,EAAAZ,EAXK,+IAgBlB,MAAMa,eAAEA,EAAcC,UAAEA,GAAcC,IAChCC,EAAWC,EAAuB,MAClCC,EAAeD,EAAuB,MACtCE,EACFf,GAAYgB,EAAMC,aAAajB,EAAU,CAAEkB,IAAKN,IAEpDO,EAAcL,EAAc,CACxB,CAACM,EAAcC,UAAUZ,gBACH,MAAlBA,EAAyB,KAAO,GAAGA,MACvC,CAACW,EAAcC,UAAUX,WACR,MAAbA,EAAoB,KAAO,GAAGA,QAMtC,MAAMY,EAAkBC,GAAS,aACzBlB,YACAmB,EAAuC,UAAtCC,SAASC,qBAA6B,IAAA9B,OAAA,EAAAA,EAAE+B,6BAC7C,IAYJ,OATAC,GAAU,KACF9B,GACAwB,GACJ,GACD,CAACxB,EAAMwB,IAMNO,EAACC,iBACgB,GAAGjC,YAChBC,KAAMA,EACNG,mBAAoBA,EACpBG,eAAgBA,EAChBP,GAAIA,EACJkC,OAAQ7B,EACRY,aAAcF,EACdT,OAAQA,EAAMH,SAEd6B,EAAA,MAAAG,OAAAC,OAAA,CACIf,IAAKJ,gBACQjB,GACTU,EAAU,CACdD,UAAW4B,EACPC,EACAtD,EAAyBkB,GACzBD,GAAQR,EAA8BS,GACtCD,EAAOsC,EAAuBC,EAC9B/B,GACHN,SAEAe,MAEC"}
+{"version":3,"file":"modal.js","sources":["../../src/modal/modal.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useEffect, useRef } from \"react\";\n\nimport type { ModalAnimationDirection } from \"../modal-v2/types\";\nimport { Overlay } from \"../overlay/overlay\";\nimport { useViewport } from \"../shared/hooks\";\nimport { useApplyStyle } from \"../theme\";\nimport { useEvent } from \"../util\";\nimport * as styles from \"./modal.styles\";\nimport type { ModalProps } from \"./types\";\n\nconst ANIMATION_FROM_CLASS_MAP: Record<ModalAnimationDirection, string> = {\n    top: styles.containerFromTop,\n    bottom: styles.containerFromBottom,\n    left: styles.containerFromLeft,\n    right: styles.containerFromRight,\n};\n\nconst ANIMATION_FROM_SHOW_CLASS_MAP: Record<ModalAnimationDirection, string> = {\n    top: styles.containerFromTopShow,\n    bottom: styles.containerFromBottomShow,\n    left: styles.containerFromLeftShow,\n    right: styles.containerFromRightShow,\n};\n\nexport const Modal = ({\n    id = \"modal\",\n    show,\n    animationFrom = \"bottom\",\n    children,\n    enableOverlayClick = true,\n    rootComponentId,\n    zIndex,\n    onOverlayClick,\n    dismissKeyboardOnShow = true,\n    className,\n    ...otherProps\n}: ModalProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const { verticalHeight, offsetTop } = useViewport();\n    const childRef = useRef<HTMLDivElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const childWithRef =\n        children && React.cloneElement(children, { ref: childRef });\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.container.verticalHeight]:\n            verticalHeight == null ? null : `${verticalHeight}px`,\n        [styles.tokens.container.offsetTop]:\n            offsetTop == null ? null : `${offsetTop}px`,\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    const dismissKeyboard = useEvent(() => {\n        if (dismissKeyboardOnShow) {\n            (document.activeElement as HTMLElement)?.blur?.();\n        }\n    });\n\n    useEffect(() => {\n        if (show) {\n            dismissKeyboard();\n        }\n    }, [show, dismissKeyboard]);\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <Overlay\n            data-testid={`${id}-overlay`}\n            show={show}\n            enableOverlayClick={enableOverlayClick}\n            onOverlayClick={onOverlayClick}\n            id={id}\n            rootId={rootComponentId}\n            containerRef={childRef}\n            zIndex={zIndex}\n        >\n            <div\n                ref={containerRef}\n                data-testid={id}\n                {...otherProps}\n                className={clsx(\n                    styles.container,\n                    ANIMATION_FROM_CLASS_MAP[animationFrom],\n                    show && ANIMATION_FROM_SHOW_CLASS_MAP[animationFrom],\n                    show ? styles.containerShow : styles.containerHide,\n                    className\n                )}\n            >\n                {childWithRef}\n            </div>\n        </Overlay>\n    );\n};\n"],"names":["ANIMATION_FROM_CLASS_MAP","top","styles.containerFromTop","bottom","styles.containerFromBottom","left","styles.containerFromLeft","right","styles.containerFromRight","ANIMATION_FROM_SHOW_CLASS_MAP","styles.containerFromTopShow","styles.containerFromBottomShow","styles.containerFromLeftShow","styles.containerFromRightShow","Modal","_a","id","show","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","className","otherProps","__rest","verticalHeight","offsetTop","useViewport","childRef","useRef","containerRef","childWithRef","React","cloneElement","ref","useApplyStyle","styles.tokens","container","dismissKeyboard","useEvent","_b","document","activeElement","blur","useEffect","_jsx","Overlay","rootId","Object","assign","clsx","styles.container","styles.containerShow","styles.containerHide"],"mappings":"smCAWA,MAAMA,EAAoE,CACtEC,IAAKC,EACLC,OAAQC,EACRC,KAAMC,EACNC,MAAOC,GAGLC,EAAyE,CAC3ER,IAAKS,EACLP,OAAQQ,EACRN,KAAMO,EACNL,MAAOM,GAGEC,EAASC,IAAA,IAAAC,GAClBA,EAAK,QAAOC,KACZA,EAAIC,cACJA,EAAgB,SAAQC,SACxBA,EAAQC,mBACRA,GAAqB,EAAIC,gBACzBA,EAAeC,OACfA,EAAMC,eACNA,EAAcC,sBACdA,GAAwB,EAAIC,UAC5BA,GAASV,EACNW,EAAUC,EAAAZ,EAXK,+IAgBlB,MAAMa,eAAEA,EAAcC,UAAEA,GAAcC,IAChCC,EAAWC,EAAuB,MAClCC,EAAeD,EAAuB,MACtCE,EACFf,GAAYgB,EAAMC,aAAajB,EAAU,CAAEkB,IAAKN,IAEpDO,EAAcL,EAAc,CACxB,CAACM,EAAcC,UAAUZ,gBACH,MAAlBA,EAAyB,KAAO,GAAGA,MACvC,CAACW,EAAcC,UAAUX,WACR,MAAbA,EAAoB,KAAO,GAAGA,QAMtC,MAAMY,EAAkBC,GAAS,aACzBlB,YACAmB,EAAuC,UAAtCC,SAASC,qBAA6B,IAAA9B,OAAA,EAAAA,EAAE+B,6BAC7C,IAYJ,OATAC,GAAU,KACF9B,GACAwB,GACJ,GACD,CAACxB,EAAMwB,IAMNO,EAACC,iBACgB,GAAGjC,YAChBC,KAAMA,EACNG,mBAAoBA,EACpBG,eAAgBA,EAChBP,GAAIA,EACJkC,OAAQ7B,EACRY,aAAcF,EACdT,OAAQA,EAAMH,SAEd6B,EAAA,MAAAG,OAAAC,OAAA,CACIf,IAAKJ,gBACQjB,GACTU,EAAU,CACdD,UAAW4B,EACPC,EACAtD,EAAyBkB,GACzBD,GAAQR,EAA8BS,GACtCD,EAAOsC,EAAuBC,EAC9B/B,GACHN,SAEAe,MAEC"}

package/modal-v2/modal-v2.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"modal-v2.js","sources":["../../src/modal-v2/modal-v2.tsx"],"sourcesContent":["import {\n    FloatingFocusManager,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useTransitionStatus,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef } from \"react\";\n\nimport { Overlay } from \"../overlay/overlay\";\nimport { useViewport } from \"../shared/hooks\";\nimport { useApplyStyle } from \"../theme\";\nimport { useEvent } from \"../util\";\nimport { ModalContext } from \"./modal-context\";\nimport * as styles from \"./modal-v2.styles\";\nimport type { ModalV2Props } from \"./types\";\n\nexport const ModalV2 = ({\n    id,\n    show,\n    onClose,\n    animationFrom = \"bottom\",\n    children,\n    enableOverlayClick = true,\n    rootComponentId,\n    zIndex,\n    onOverlayClick,\n    dismissKeyboardOnShow = true,\n    \"data-testid\": testId = \"modal\",\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    disableInitialFocus = false,\n    className,\n    ...otherProps\n}: ModalV2Props): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const { verticalHeight, offsetTop } = useViewport();\n    const childRef = useRef<HTMLDivElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const childWithRef =\n        children && React.cloneElement(children, { ref: childRef });\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.container.verticalHeight]:\n            verticalHeight == null ? null : `${verticalHeight}px`,\n        [styles.tokens.container.offsetTop]:\n            offsetTop == null ? null : `${offsetTop}px`,\n    });\n\n    // =========================================================================\n    // FLOATING UI CONFIG\n    // =========================================================================\n    const { refs, context } = useFloating({\n        open: show,\n        onOpenChange: (isOpen) => {\n            if (!isOpen) {\n                onClose?.();\n            }\n        },\n    });\n    const { isMounted, status } = useTransitionStatus(context, {\n        duration: 300,\n    });\n    const dismiss = useDismiss(context, {\n        /* handled by overlayclick */\n        outsidePress: false,\n        enabled: !!onClose,\n    });\n    const { getFloatingProps } = useInteractions([dismiss]);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    const dismissKeyboard = useEvent(() => {\n        if (dismissKeyboardOnShow) {\n            (document.activeElement as HTMLElement)?.blur?.();\n        }\n    });\n\n    useEffect(() => {\n        if (show) {\n            dismissKeyboard();\n        }\n    }, [show, dismissKeyboard]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <Overlay\n            data-testid={`${testId}-overlay`}\n            show={isMounted}\n            enableOverlayClick={enableOverlayClick}\n            onOverlayClick={onOverlayClick}\n            id={id}\n            rootId={rootComponentId}\n            containerRef={childRef}\n            zIndex={zIndex}\n        >\n            <div\n                ref={containerRef}\n                data-testid={testId}\n                data-status={status}\n                data-animation-from={animationFrom}\n                {...otherProps}\n                className={clsx(styles.container, className)}\n            >\n                <ModalContext.Provider value={{ onClose }}>\n                    {isMounted && (\n                        <FloatingFocusManager\n                            context={context}\n                            initialFocus={\n                                disableInitialFocus ? -1 : refs.floating\n                            }\n                        >\n                            <div className={styles.scrollContainer}>\n                                <div\n                                    ref={refs.setFloating}\n                                    {...getFloatingProps()}\n                                    role=\"dialog\"\n                                    aria-label={ariaLabel}\n                                    aria-labelledby={ariaLabelledBy}\n                                    aria-describedby={ariaDescribedBy}\n                                    className={styles.modalContainer}\n                                >\n                                    {childWithRef}\n                                </div>\n                            </div>\n                        </FloatingFocusManager>\n                    )}\n                </ModalContext.Provider>\n            </div>\n        </Overlay>\n    );\n};\n"],"names":["ModalV2","_a","id","show","onClose","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","testId","ariaLabel","ariaLabelledBy","ariaDescribedBy","disableInitialFocus","className","otherProps","__rest","verticalHeight","offsetTop","useViewport","childRef","useRef","containerRef","childWithRef","React","cloneElement","ref","useApplyStyle","styles.tokens","container","refs","context","useFloating","open","onOpenChange","isOpen","isMounted","status","useTransitionStatus","duration","dismiss","useDismiss","outsidePress","enabled","getFloatingProps","useInteractions","dismissKeyboard","useEvent","_b","document","activeElement","blur","useEffect","_jsx","Overlay","rootId","Object","assign","clsx","styles.container","ModalContext","Provider","value","FloatingFocusManager","initialFocus","floating","styles.scrollContainer","setFloating","role","styles.modalContainer"],"mappings":"ijCAkBO,MAAMA,EAAWC,QAAAC,GACpBA,EAAEC,KACFA,EAAIC,QACJA,EAAOC,cACPA,EAAgB,SAAQC,SACxBA,EAAQC,mBACRA,GAAqB,EAAIC,gBACzBA,EAAeC,OACfA,EAAMC,eACNA,EAAcC,sBACdA,GAAwB,EACxB,cAAeC,EAAS,QACxB,aAAcC,EACd,kBAAmBC,EACnB,mBAAoBC,EAAeC,oBACnCA,GAAsB,EAAKC,UAC3BA,GAAShB,EACNiB,EAAUC,EAAAlB,EAjBO,CAAA,KAAA,OAAA,UAAA,gBAAA,WAAA,qBAAA,kBAAA,SAAA,iBAAA,wBAAA,cAAA,aAAA,kBAAA,mBAAA,sBAAA,cAsBpB,MAAMmB,eAAEA,EAAcC,UAAEA,GAAcC,IAChCC,EAAWC,EAAuB,MAClCC,EAAeD,EAAuB,MACtCE,EACFpB,GAAYqB,EAAMC,aAAatB,EAAU,CAAEuB,IAAKN,IAEpDO,EAAcL,EAAc,CACxB,CAACM,EAAcC,UAAUZ,gBACH,MAAlBA,EAAyB,KAAO,GAAGA,MACvC,CAACW,EAAcC,UAAUX,WACR,MAAbA,EAAoB,KAAO,GAAGA,QAMtC,MAAMY,KAAEA,EAAIC,QAAEA,GAAYC,EAAY,CAClCC,KAAMjC,EACNkC,aAAeC,IACNA,GACDlC,SAAAA,GACJ,KAGFmC,UAAEA,EAASC,OAAEA,GAAWC,EAAoBP,EAAS,CACvDQ,SAAU,MAERC,EAAUC,EAAWV,EAAS,CAEhCW,cAAc,EACdC,UAAW1C,KAET2C,iBAAEA,GAAqBC,EAAgB,CAACL,IAKxCM,EAAkBC,GAAS,aACzBvC,YACAwC,EAAuC,UAAtCC,SAASC,qBAA6B,IAAApD,OAAA,EAAAA,EAAEqD,6BAC7C,IAYJ,OATAC,GAAU,KACFpD,GACA8C,GACJ,GACD,CAAC9C,EAAM8C,IAMNO,EAACC,EAAO,CAAA,cACS,GAAG7C,YAChBT,KAAMoC,EACNhC,mBAAoBA,EACpBG,eAAgBA,EAChBR,GAAIA,EACJwD,OAAQlD,EACRiB,aAAcF,EACdd,OAAQA,EAAMH,SAEdkD,EAAA,MAAAG,OAAAC,OAAA,CACI/B,IAAKJ,EAAY,cACJb,EAAM,cACN4B,EAAM,sBACEnC,GACjBa,GACJD,UAAW4C,EAAKC,EAAkB7C,GAAUX,SAE5CkD,EAACO,EAAaC,SAAQ,CAACC,MAAO,CAAE7D,WAASE,SACpCiC,GACGiB,EAACU,EAAoB,CACjBhC,QAASA,EACTiC,aACInD,GAAsB,EAAKiB,EAAKmC,SAAQ9D,SAG5CkD,EAAA,MAAA,CAAKvC,UAAWoD,EAAsB/D,SAClCkD,EAAA,MAAAG,OAAAC,OAAA,CACI/B,IAAKI,EAAKqC,aACNvB,IAAkB,CACtBwB,KAAK,SAAQ,aACD1D,EAAS,kBACJC,EAAc,mBACbC,EAClBE,UAAWuD,WAEV9C,eAOnB"}
+{"version":3,"file":"modal-v2.js","sources":["../../src/modal-v2/modal-v2.tsx"],"sourcesContent":["import {\n    FloatingFocusManager,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useTransitionStatus,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef } from \"react\";\n\nimport { Overlay } from \"../overlay/overlay\";\nimport { useViewport } from \"../shared/hooks\";\nimport { useApplyStyle } from \"../theme\";\nimport { useEvent } from \"../util\";\nimport { ModalContext } from \"./modal-context\";\nimport * as styles from \"./modal-v2.styles\";\nimport type { ModalV2Props } from \"./types\";\n\nexport const ModalV2 = ({\n    id,\n    show,\n    onClose,\n    animationFrom = \"bottom\",\n    children,\n    enableOverlayClick = true,\n    rootComponentId,\n    zIndex,\n    onOverlayClick,\n    dismissKeyboardOnShow = true,\n    \"data-testid\": testId = \"modal\",\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    disableInitialFocus = false,\n    className,\n    ...otherProps\n}: ModalV2Props): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const { verticalHeight, offsetTop } = useViewport();\n    const childRef = useRef<HTMLDivElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const childWithRef =\n        children && React.cloneElement(children, { ref: childRef });\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.container.verticalHeight]:\n            verticalHeight == null ? null : `${verticalHeight}px`,\n        [styles.tokens.container.offsetTop]:\n            offsetTop == null ? null : `${offsetTop}px`,\n    });\n\n    // =========================================================================\n    // FLOATING UI CONFIG\n    // =========================================================================\n    const { refs, context } = useFloating({\n        open: show,\n        onOpenChange: (isOpen) => {\n            if (!isOpen) {\n                onClose?.();\n            }\n        },\n    });\n    const { isMounted, status } = useTransitionStatus(context, {\n        duration: 300,\n    });\n    const dismiss = useDismiss(context, {\n        /* handled by overlayclick */\n        outsidePress: false,\n        enabled: !!onClose,\n    });\n    const { getFloatingProps } = useInteractions([dismiss]);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    const dismissKeyboard = useEvent(() => {\n        if (dismissKeyboardOnShow) {\n            (document.activeElement as HTMLElement)?.blur?.();\n        }\n    });\n\n    useEffect(() => {\n        if (show) {\n            dismissKeyboard();\n        }\n    }, [show, dismissKeyboard]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <Overlay\n            data-testid={`${testId}-overlay`}\n            show={isMounted}\n            enableOverlayClick={enableOverlayClick}\n            onOverlayClick={onOverlayClick}\n            id={id}\n            rootId={rootComponentId}\n            containerRef={childRef}\n            zIndex={zIndex}\n        >\n            <div\n                ref={containerRef}\n                data-testid={testId}\n                data-status={status}\n                data-animation-from={animationFrom}\n                {...otherProps}\n                className={clsx(styles.container, className)}\n            >\n                <ModalContext.Provider value={{ onClose }}>\n                    {isMounted && (\n                        <FloatingFocusManager\n                            context={context}\n                            initialFocus={\n                                disableInitialFocus ? -1 : refs.floating\n                            }\n                        >\n                            <div className={styles.scrollContainer}>\n                                <div\n                                    ref={refs.setFloating}\n                                    {...getFloatingProps()}\n                                    role=\"dialog\"\n                                    aria-label={ariaLabel}\n                                    aria-labelledby={ariaLabelledBy}\n                                    aria-describedby={ariaDescribedBy}\n                                    className={styles.modalContainer}\n                                >\n                                    {childWithRef}\n                                </div>\n                            </div>\n                        </FloatingFocusManager>\n                    )}\n                </ModalContext.Provider>\n            </div>\n        </Overlay>\n    );\n};\n"],"names":["ModalV2","_a","id","show","onClose","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","testId","ariaLabel","ariaLabelledBy","ariaDescribedBy","disableInitialFocus","className","otherProps","__rest","verticalHeight","offsetTop","useViewport","childRef","useRef","containerRef","childWithRef","React","cloneElement","ref","useApplyStyle","styles.tokens","container","refs","context","useFloating","open","onOpenChange","isOpen","isMounted","status","useTransitionStatus","duration","dismiss","useDismiss","outsidePress","enabled","getFloatingProps","useInteractions","dismissKeyboard","useEvent","_b","document","activeElement","blur","useEffect","_jsx","Overlay","rootId","Object","assign","clsx","styles.container","ModalContext","Provider","value","FloatingFocusManager","initialFocus","floating","styles.scrollContainer","setFloating","role","styles.modalContainer"],"mappings":"2lCAkBO,MAAMA,EAAWC,QAAAC,GACpBA,EAAEC,KACFA,EAAIC,QACJA,EAAOC,cACPA,EAAgB,SAAQC,SACxBA,EAAQC,mBACRA,GAAqB,EAAIC,gBACzBA,EAAeC,OACfA,EAAMC,eACNA,EAAcC,sBACdA,GAAwB,EACxB,cAAeC,EAAS,QACxB,aAAcC,EACd,kBAAmBC,EACnB,mBAAoBC,EAAeC,oBACnCA,GAAsB,EAAKC,UAC3BA,GAAShB,EACNiB,EAAUC,EAAAlB,EAjBO,CAAA,KAAA,OAAA,UAAA,gBAAA,WAAA,qBAAA,kBAAA,SAAA,iBAAA,wBAAA,cAAA,aAAA,kBAAA,mBAAA,sBAAA,cAsBpB,MAAMmB,eAAEA,EAAcC,UAAEA,GAAcC,IAChCC,EAAWC,EAAuB,MAClCC,EAAeD,EAAuB,MACtCE,EACFpB,GAAYqB,EAAMC,aAAatB,EAAU,CAAEuB,IAAKN,IAEpDO,EAAcL,EAAc,CACxB,CAACM,EAAcC,UAAUZ,gBACH,MAAlBA,EAAyB,KAAO,GAAGA,MACvC,CAACW,EAAcC,UAAUX,WACR,MAAbA,EAAoB,KAAO,GAAGA,QAMtC,MAAMY,KAAEA,EAAIC,QAAEA,GAAYC,EAAY,CAClCC,KAAMjC,EACNkC,aAAeC,IACNA,GACDlC,SAAAA,GACJ,KAGFmC,UAAEA,EAASC,OAAEA,GAAWC,EAAoBP,EAAS,CACvDQ,SAAU,MAERC,EAAUC,EAAWV,EAAS,CAEhCW,cAAc,EACdC,UAAW1C,KAET2C,iBAAEA,GAAqBC,EAAgB,CAACL,IAKxCM,EAAkBC,GAAS,aACzBvC,YACAwC,EAAuC,UAAtCC,SAASC,qBAA6B,IAAApD,OAAA,EAAAA,EAAEqD,6BAC7C,IAYJ,OATAC,GAAU,KACFpD,GACA8C,GACJ,GACD,CAAC9C,EAAM8C,IAMNO,EAACC,EAAO,CAAA,cACS,GAAG7C,YAChBT,KAAMoC,EACNhC,mBAAoBA,EACpBG,eAAgBA,EAChBR,GAAIA,EACJwD,OAAQlD,EACRiB,aAAcF,EACdd,OAAQA,EAAMH,SAEdkD,EAAA,MAAAG,OAAAC,OAAA,CACI/B,IAAKJ,EAAY,cACJb,EAAM,cACN4B,EAAM,sBACEnC,GACjBa,GACJD,UAAW4C,EAAKC,EAAkB7C,GAAUX,SAE5CkD,EAACO,EAAaC,SAAQ,CAACC,MAAO,CAAE7D,WAASE,SACpCiC,GACGiB,EAACU,EAAoB,CACjBhC,QAASA,EACTiC,aACInD,GAAsB,EAAKiB,EAAKmC,SAAQ9D,SAG5CkD,EAAA,MAAA,CAAKvC,UAAWoD,EAAsB/D,SAClCkD,EAAA,MAAAG,OAAAC,OAAA,CACI/B,IAAKI,EAAKqC,aACNvB,IAAkB,CACtBwB,KAAK,SAAQ,aACD1D,EAAS,kBACJC,EAAc,mBACbC,EAClBE,UAAWuD,WAEV9C,eAOnB"}

package/navbar/brand.js

@@ -1,2 +1,2 @@
-import{jsx as a}from"react/jsx-runtime";import{ImageWithFallback as t}from"../shared/image-with-fallback/image-with-fallback.js";import{Container as r}from"./brand.styles.js";const e=({resources:e,onClick:o,"data-id":i,"data-testid":d="navbar-brand",type:n})=>{const s=!!o,m=s?"primary"===n?`Go to ${e.brandName} homepage`:`Go to ${e.brandName}`:e.brandName,l=s?{role:"link",tabIndex:0,onClick:a=>{o&&(a.preventDefault(),o(a,n))}}:{};return a(r,Object.assign({"data-id":i,"data-testid":d,$type:n,as:s?"a":"div"},l,{children:a(t,{src:e.logoSrc,alt:m})}))};export{e as Brand};
+import{jsx as a}from"react/jsx-runtime";import{ImageWithFallback as t}from"../shared/image-with-fallback/image-with-fallback.js";import{container as r}from"./brand.styles.js";const e=({resources:e,onClick:d,"data-id":o,"data-testid":i="navbar-brand",type:s})=>{const l=a=>{d&&(a.preventDefault(),d(a,s))},n=!!d,c=n?"primary"===s?`Go to ${e.brandName} homepage`:`Go to ${e.brandName}`:e.brandName;return n?a("a",{"data-id":o,"data-testid":i,className:r,role:"link",tabIndex:0,onClick:l,children:a(t,{src:e.logoSrc,alt:c})}):a("div",{"data-id":o,"data-testid":i,className:r,children:a(t,{src:e.logoSrc,alt:c})})};export{e as Brand};
 //# sourceMappingURL=brand.js.map

package/navbar/brand.js.map

@@ -1 +1 @@
-{"version":3,"file":"brand.js","sources":["../../src/navbar/brand.tsx"],"sourcesContent":["import type React from \"react\";\n\nimport { ImageWithFallback } from \"../shared/image-with-fallback/image-with-fallback\";\nimport { Container } from \"./brand.styles\";\nimport type { BrandType, NavbarBrandingProps } from \"./types\";\n\ninterface Props {\n    resources: NavbarBrandingProps;\n    compress?: boolean | undefined;\n    \"data-id\"?: string | undefined;\n    \"data-testid\"?: string | undefined;\n    type: BrandType;\n    onClick?:\n        | ((\n              event: React.MouseEvent<HTMLAnchorElement>,\n              type: BrandType\n          ) => void)\n        | undefined;\n}\n\nexport const Brand = ({\n    resources,\n    onClick,\n    \"data-id\": dataId,\n    \"data-testid\": testId = \"navbar-brand\",\n    type,\n}: Props) => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\n        if (onClick) {\n            event.preventDefault();\n            onClick(event, type);\n        }\n    };\n\n    // Determine if this should be clickable - brands are clickable by default\n    const isClickable = !!onClick;\n\n    const logoLabel = isClickable\n        ? type === \"primary\"\n            ? `Go to ${resources.brandName} homepage`\n            : `Go to ${resources.brandName}`\n        : resources.brandName;\n\n    const props = isClickable\n        ? {\n              role: \"link\",\n              tabIndex: 0,\n              onClick: handleClick,\n          }\n        : {};\n\n    return (\n        <Container\n            data-id={dataId}\n            data-testid={testId}\n            $type={type}\n            as={isClickable ? \"a\" : \"div\"}\n            {...props}\n        >\n            <ImageWithFallback src={resources.logoSrc} alt={logoLabel} />\n        </Container>\n    );\n};\n\n// TODO: Fix img size in drawer\n"],"names":["Brand","resources","onClick","dataId","testId","type","isClickable","logoLabel","brandName","props","role","tabIndex","event","preventDefault","_jsx","Container","Object","assign","$type","as","children","ImageWithFallback","src","logoSrc","alt"],"mappings":"qLAoBaA,EAAQ,EACjBC,YACAC,UACA,UAAWC,EACX,cAAeC,EAAS,eACxBC,WAKA,MAQMC,IAAgBJ,EAEhBK,EAAYD,EACH,YAATD,EACI,SAASJ,EAAUO,qBACnB,SAASP,EAAUO,YACvBP,EAAUO,UAEVC,EAAQH,EACR,CACII,KAAM,OACNC,SAAU,EACVT,QApBWU,IACbV,IACAU,EAAMC,iBACNX,EAAQU,EAAOP,GACnB,GAkBE,CAAA,EAEN,OACIS,EAACC,EAASC,OAAAC,OAAA,CAAA,UACGd,gBACIC,EAAMc,MACZb,EACPc,GAAIb,EAAc,IAAM,OACpBG,EAAK,CAAAW,SAETN,EAACO,EAAiB,CAACC,IAAKrB,EAAUsB,QAASC,IAAKjB,MACxC"}
+{"version":3,"file":"brand.js","sources":["../../src/navbar/brand.tsx"],"sourcesContent":["import type React from \"react\";\n\nimport { ImageWithFallback } from \"../shared/image-with-fallback/image-with-fallback\";\nimport * as styles from \"./brand.styles\";\nimport type { BrandType, NavbarBrandingProps } from \"./types\";\n\ninterface Props {\n    resources: NavbarBrandingProps;\n    compress?: boolean | undefined;\n    \"data-id\"?: string | undefined;\n    \"data-testid\"?: string | undefined;\n    type: BrandType;\n    onClick?:\n        | ((\n              event: React.MouseEvent<HTMLAnchorElement>,\n              type: BrandType\n          ) => void)\n        | undefined;\n}\n\nexport const Brand = ({\n    resources,\n    onClick,\n    \"data-id\": dataId,\n    \"data-testid\": testId = \"navbar-brand\",\n    type,\n}: Props) => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\n        if (onClick) {\n            event.preventDefault();\n            onClick(event, type);\n        }\n    };\n\n    // Determine if this should be clickable - brands are clickable by default\n    const isClickable = !!onClick;\n\n    const logoLabel = isClickable\n        ? type === \"primary\"\n            ? `Go to ${resources.brandName} homepage`\n            : `Go to ${resources.brandName}`\n        : resources.brandName;\n\n    if (isClickable) {\n        return (\n            <a\n                data-id={dataId}\n                data-testid={testId}\n                className={styles.container}\n                role=\"link\"\n                tabIndex={0}\n                onClick={handleClick}\n            >\n                <ImageWithFallback src={resources.logoSrc} alt={logoLabel} />\n            </a>\n        );\n    }\n\n    return (\n        <div data-id={dataId} data-testid={testId} className={styles.container}>\n            <ImageWithFallback src={resources.logoSrc} alt={logoLabel} />\n        </div>\n    );\n};\n\n// TODO: Fix img size in drawer\n"],"names":["Brand","resources","onClick","dataId","testId","type","handleClick","event","preventDefault","isClickable","logoLabel","brandName","_jsx","className","styles.container","role","tabIndex","children","ImageWithFallback","src","logoSrc","alt"],"mappings":"qLAoBaA,EAAQ,EACjBC,YACAC,UACA,UAAWC,EACX,cAAeC,EAAS,eACxBC,WAKA,MAAMC,EAAeC,IACbL,IACAK,EAAMC,iBACNN,EAAQK,EAAOF,GACnB,EAIEI,IAAgBP,EAEhBQ,EAAYD,EACH,YAATJ,EACI,SAASJ,EAAUU,qBACnB,SAASV,EAAUU,YACvBV,EAAUU,UAEhB,OAAIF,EAEIG,EAAA,IAAA,CAAA,UACaT,EAAM,cACFC,EACbS,UAAWC,EACXC,KAAK,OACLC,SAAU,EACVd,QAASI,EAAWW,SAEpBL,EAACM,EAAiB,CAACC,IAAKlB,EAAUmB,QAASC,IAAKX,MAMxDE,EAAA,MAAA,CAAA,UAAcT,EAAM,cAAeC,EAAQS,UAAWC,EAAgBG,SAClEL,EAACM,EAAiB,CAACC,IAAKlB,EAAUmB,QAASC,IAAKX,KAC9C"}

package/navbar/brand.styles.d.ts

@@ -1,6 +1 @@
-import type { BrandType } from "./types";
-interface StyleProps {
-    $type?: BrandType | undefined;
-}
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "$type"> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "$type"> & StyleProps, never>>> & string;
-export {};
+export declare const container: import("@linaria/core").LinariaClassName;

package/navbar/brand.styles.js

@@ -1,13 +1,2 @@
-import t from"styled-components";import{V3_Motion as e}from"../v3_theme/index.js";const i=t.a`
-    display: flex;
-    justify-content: center;
-    height: 100%;
-
-    img {
-        width: auto;
-        height: 100%;
-        transition: ${e["duration-150"]} ${e["ease-default"]};
-        object-fit: contain;
-    }
-`;export{i as Container};
+import"./brand.styles_zcgddp.css";const s="cw4lf53";export{s as container};
 //# sourceMappingURL=brand.styles.js.map

package/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":"kFAgBO,MAAMA,EAAYC,EAAOC,CAAa;;;;;;;;sBAQvBC,EAAU,mBAAmBA,EAAU;;;"}
+{"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":["container"],"mappings":"wDAIO,MAAMA,EAAS"}

package/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/navbar/drawer.js

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

package/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":"qXAcA,MA6IaA,EAASC,EAAMC,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,EAAiB,GAC/CC,EAAeC,EAAuB,OAEtCC,QAAEA,EAAOC,UAAEA,GAAcb,EAKzBc,EAAe,KAKjB,GAAIC,OAAQ,CACR,MAAMR,EAAkC,IAArBQ,OAAOC,YAC1BR,EAAcD,EAClB,GAmBJU,GAAU,KACNH,IACAC,OAAOG,iBAAiB,SAAUJ,GAE3B,KACHC,OAAOI,oBAAoB,SAAUL,EAAa,IAEvD,IAGHM,GAAgB,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,EAACC,EAAO,CAAC9B,IAAKA,EAAG,cAAc,SAAQG,SACnC0B,EAACE,EAAS,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,EAACC,EAAO,CAAArC,SAAA,CAxBhBoC,EAACE,EAAM,CAAAtC,SAAA,CACH0B,EAACa,aAA0B,yBAAwBvC,UAC7CC,GA/BNmC,EAAAI,EAAA,CAAAxC,SAAA,CACKW,GACGe,EAACe,EAAK,CACF1C,UAAWY,EACX+B,UAAQ,EACRC,QAASxC,EAAY,UACb,uBAAsB,cAClB,gBACZyC,KAAK,YAGZhC,GACGwB,EAAAI,EAAA,CAAAxC,SAAA,CACI0B,EAACmB,EAAY,IACbnB,EAACe,EAAK,CACF1C,UAAWa,EACX8B,UAAQ,EACRC,QAASxC,EAAY,UACb,yBAAwB,cACpB,0BACZyC,KAAK,sBAarBlB,EAACoB,EAAW,CACRH,QAASzC,EACT6C,gBAAgB,EAAK,aACV,0BAEXrB,EAACsB,WAiBIhD,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":"qgCAWA,MAmKaA,EAASC,EAAMC,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,EAAiB,GAC/CC,EAAeC,EAAuB,MAE5CC,EAAcF,EAAc,CACxB,CAACG,EAAcC,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,GAAU,KACNH,IACAC,OAAOG,iBAAiB,SAAUJ,GAE3B,KACHC,OAAOI,oBAAoB,SAAUL,EAAa,IAEvD,IAGHM,GAAgB,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,EAAA,MAAA,CAAKC,UAAWC,EAAgBlC,IAAKA,EAAG,cAAc,SAAQG,SAC1D6B,EAAA,MAAA,CACIhC,IAAKY,EACLqB,UAAWE,EACPC,EACAnC,EAAOoC,EAAwBC,GAEnCC,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,EAAA,MAAA,CAAKZ,UAAWa,EAAc3C,SAAA,CAlCtC0C,EAAA,MAAA,CAAKZ,UAAWc,EAAa5C,SAAA,CACzB6B,SACIC,UAAWE,EACPa,EACAC,EACAC,GACH,UACO,mCAEN9C,GA5CNyC,EAAAM,EAAA,CAAAhD,SAAA,CACKc,GACGe,EAACoB,EAAK,CACFlD,UAAWe,EACXoC,UAAQ,EACRC,QAAShD,EAAY,UACb,uBAAsB,cAClB,gBACZiD,KAAK,YAGZrC,GACG2B,EAAAM,EAAA,CAAAhD,SAAA,CACI6B,EAAA,MAAA,CACIC,UAAWE,EACPqB,EACAC,EACAC,KAGR1B,EAACoB,EAAK,CACFlD,UAAWgB,EACXmC,UAAQ,EACRC,QAAShD,EAAY,UACb,uCACI,0BACZiD,KAAK,sBAoBrBvB,EAAC2B,EAAa,CACV1B,UAAW2B,EACXN,QAASjD,EACTwD,gBAAgB,EAAK,aACV,iBAAgB1D,SAE3B6B,EAAC8B,EAAS,CAAC7B,UAAW8B,SAmBjB5D,QAGP"}

package/navbar/drawer.styles.d.ts

@@ -1,18 +1,13 @@
-interface StyleProps {
-    $show: boolean;
-    $viewHeight?: number | undefined;
-}
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof StyleProps> & StyleProps, never>>> & string;
-export declare const Content: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const TopBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const CloseIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never> & Partial<Pick<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const CloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, never> & Partial<Pick<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, never>>> & string & Omit<(props: import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export {};
+export declare const tokens: {
+    container: {
+        viewHeight: string;
+    };
+};
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const container: import("@linaria/core").LinariaClassName;
+export declare const containerShown: import("@linaria/core").LinariaClassName;
+export declare const containerHidden: import("@linaria/core").LinariaClassName;
+export declare const content: import("@linaria/core").LinariaClassName;
+export declare const topBar: import("@linaria/core").LinariaClassName;
+export declare const closeIcon: import("@linaria/core").LinariaClassName;
+export declare const closeButton: import("@linaria/core").LinariaClassName;

package/navbar/drawer.styles.js

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

package/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":"8RAwBA,MAkBaA,EAAUC,EAAOC,GAAG;;;MAG3BC,EAAcC,SAASC;;;EAKhBC,EAAYL,EAAOM,GAAe;;;;;;mBAM5BC,EAAW;wBACNC,EAAUC;kBAChBC,EAAU;kBACTC,GAAWA,EAAMC,MAAQ,UAAY;;;MAGjDD,GAA2BA,EAAMC,MApCzBC,CAAG;;oCAEkBC,EAAU;;UAKnCD,CAAG;;gCAEkBC,EAAU;;MA4BnCH,IACC,IAAII,EAAa,MAIjB,OAHIJ,EAAMK,cACND,EAAa,GAAGJ,EAAMK,iBAEnBH,CAAG;2BACSE;SAClB;;GAGNb,EAAcC,SAASC;;;;MAIpBF,EAAcC,SAASc;;;EAKhBC,EAAUlB,EAAOC,GAAG;;;EAQpBkB,EAASnB,EAAOC,GAAG;;;;;eAKjBM,EAAW,iBAAiBA,EAAW;UAC5CA,EAAW;EAGRa,EAAYpB,EAAOqB,EAAU;;;EAK7BC,EAActB,EAAOuB,EAAc;;cAElChB,EAAW;aACZC,EAAgB;;;;iBAIZA,EAAU;;;;;;;"}
+{"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":["tokens","container","viewHeight","wrapper","containerShown","containerHidden","content","topBar","closeIcon","closeButton"],"mappings":"yDAIO,MAAMA,EAAS,CAClBC,UAAW,CACPC,WAAY,4CAIPC,EAAO,WAQPF,EAAS,WAuBTG,EAAc,UAOdC,EAAe,UAMfC,EAAO,WAQPC,EAAM,UASNC,EAAS,UAKTC,EAAW"}

package/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/navbar/menu.js

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

package/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":["Menu","items","onItemClick","handleLinkClick","item","event","stopPropagation","length","_jsx","MobileWrapper","children","map","index","options","otherItemAttrs","__rest","testId","MenuItem","Link","Object","assign","onClick","underlineStyle"],"mappings":"8KAaO,MAAMA,EAAO,EAAOC,QAAOC,kBAC9B,MAAMC,EAAmBC,GACbC,IACJA,EAAMC,kBACNJ,EAAYG,EAAOD,EAAK,EAIhC,OAAKH,aAAK,EAALA,EAAOM,QAGRC,EAACC,EAAa,CAAAC,SACTT,EAAMU,KAAI,CAACP,EAAMQ,KACd,MAAMF,SAAEA,EAAQG,QAAEA,GAA+BT,EAAnBU,EAAcC,EAAKX,EAA3C,CAAA,WAAA,YACAY,EAAS,gBAAgBJ,EAAQ,IAEvC,OACIJ,EAACS,EAAQ,CAAAP,SACLF,EAACU,EAAIC,OAAAC,OAAA,CAAA,cACYJ,GACTF,EACAD,GACJQ,QAASlB,EAAgBC,GACzBkB,eAAe,OAAMZ,SAEpBA,MARME,EAUJ,MAnBAJ,OAsBP"}
+{"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":["Menu","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":"kOAcO,MAAMA,EAAO,EAAOC,QAAOC,kBAC9B,MAAMC,EAAmBC,GACbC,IACJA,EAAMC,kBACNJ,EAAYG,EAAOD,EAAK,EAIhC,OAAKH,aAAK,EAALA,EAAOM,QAGRC,EAAA,KAAA,CAAIC,UAAWC,EAAoBC,SAC9BV,EAAMW,KAAI,CAACR,EAAMS,KACd,MAAMF,SAAEA,EAAQG,QAAEA,GAA+BV,EAAnBW,EAAcC,EAAKZ,EAA3C,CAAA,WAAA,YACAa,EAAS,gBAAgBJ,EAAQ,IAEvC,OACIL,EAAA,KAAA,CAAgBC,UAAWS,EAAeP,SACtCH,EAACW,EAAWC,sBACRX,UAAWY,gBACEJ,GACTF,EACAD,EAAO,CACXQ,QAASnB,EAAgBC,GACzBmB,eAAe,gBAEdZ,MATAE,EAWJ,MApBML,OAuBlB"}

package/navbar/menu.styles.d.ts

@@ -1,3 +1,3 @@
-export declare const MobileWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>>> & string;
-export declare const MenuItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>>> & string;
-export declare const Link: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyLinkProps & import("react").RefAttributes<HTMLAnchorElement>, never> & Partial<Pick<import("..").TypographyLinkProps & import("react").RefAttributes<HTMLAnchorElement>, never>>> & string & Omit<(props: import("..").TypographyLinkProps & import("react").RefAttributes<HTMLAnchorElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const mobileWrapper: import("@linaria/core").LinariaClassName;
+export declare const menuItem: import("@linaria/core").LinariaClassName;
+export declare const link: import("@linaria/core").LinariaClassName;

package/navbar/menu.styles.js

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

package/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":"6OAMO,MAAMA,EAAgBC,EAAOC,EAAE;;;;;;;;mBAQnBC,EAAU,sBAAsBC,EAAU;EAGhDC,EAAWJ,EAAOK,EAAE;;;EAKpBC,EAAON,EAAOO,EAAWC,OAAO;;;aAGhCL,EAAgB;;gBAEbM,EAAW;;;cAGbP,EAAiB;oBACXO,EAAW,iBAAiBA,EAAW;qBACtCC,EAAc;;MAE7BC,EAAa;;;;;;4BAMSR,EAAU;iBACrBA,EAAgB;;"}
+{"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":["mobileWrapper","menuItem","link"],"mappings":"sDAKO,MAAMA,EAAa,WAWbC,EAAQ,UAKRC,EAAI"}

package/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/navbar/navbar-action-buttons.js

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

package/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":["NavbarActionButtons","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":"4VAiBA,MAgBaA,EAAsB,EAC/BC,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,EA4D1CU,EAAgB,CAClBC,EACAC,KAMA,MAAMC,EAAkBF,EA7DQ,CAChClB,IAEA,MAAMqB,EAAsBC,EAAUtB,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,EA6Cd2B,CAA4BR,GAC5BA,EAEN,OAAOC,EAAgBQ,KAAI,CAACrB,EAAcsB,KACtC,IAAIC,EACJ,OAAQvB,EAAaC,MACjB,IAAK,WACDsB,EAAYZ,GA9CSa,EA+CWxB,EAAawB,KA7CrDC,EAACC,aACGC,EAACC,GAAiBC,OAAO,WAAUC,SAC7BN,GAAQA,EAAKM,UAAa,qBAEhCL,EAACM,aACGJ,EAACK,GACGC,KAAK,6DACLC,OAAO,SACPC,IAAI,oCACQ,oBACZC,QAASxC,WAET+B,EAAA,MAAA,CAAKU,IAzFzB,kFAyF8CC,IAAI,sBAElCX,EAACK,EAAoB,CACjBC,KAAK,wEACLC,OAAO,SACPC,IAAI,sBAAqB,cACb,qBACZC,QAASxC,EAA+BkC,SAExCH,SAAKU,IAhGzB,oFAgG+CC,IAAI,+BA0B/BX,EAACY,EAAYC,OAAAC,OAAA,CAAA,EACLzC,EAAawB,KAAI,CACrBvB,KAAK,SACLmC,QAASrC,EAAwBC,iBACrB,0BAAyB8B,SAAA,sBAK7C,MACJ,IAAK,SAAU,CACX,MAAMY,EAAS1C,EAAawB,KAAK,eAC3B,kBAAkBxB,EAAawB,KAAK,iBACpC,yBAAyBb,EAAW,UAAY,KAC5CW,EAAQ,IAGlBC,EACII,EAACY,mBACOvC,EAAawB,KAAI,CACrBvB,KAAK,SACLmC,QAASrC,EAAwBC,GAAa,cACjC0C,KAGrB,KACJ,CACA,IAAK,YAAa,CACd,MAAMlB,EAAOxB,EAAawB,KAC1BD,EAAaC,GAAQA,EAAKmB,QAAW,KACrC,KACJ,CACA,QACIpB,EAAY,KAlFQ,IAACC,EAsF7B,GAAID,EACA,OACII,EAACiB,EAAU,CAAAC,QAEElC,EAAQmB,SAEhBP,GAHI,iBAAiBD,EAAQ,IAM1C,GACF,EAGN,GAAI7B,EAAe,CACf,MAAMmB,GAAmBnB,aAAa,EAAbA,EAAeC,SAAUD,EAAcqD,QAC1DC,EAA6BnC,EAAiBoC,QAC/ChD,KAAmBA,EAAaiD,gBAE/BC,EAA2BtC,EAAiBoC,QAC7ChD,IAAkBA,EAAaiD,gBAEpC,OAAIvD,EAEIiC,cACKuB,EAAyBC,OAAS,GAC/BxB,EAACyB,YACI1C,EAAchB,EAAQwD,OAOnCzB,eACKsB,EAA2BI,OAAS,GACjCxB,EAAC0B,EAAa,CAAAvB,SACTpB,GAAc,EAAOqC,KAG7BtD,EAAcqD,QAAQK,OAAS,GAC5BxB,EAAC2B,EAAO,CAAAxB,SACHpB,EAAchB,EAAQD,EAAcqD,aAM7D,CAEA,OAAOnB,OAAK"}
+{"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":["NavbarActionButtons","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":"ueAUA,MAgBaA,EAAsB,EAC/BC,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,EAAUtB,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,EAAA,MAAA,CAAKC,UAAWC,EAAyBC,SAAA,CACrCC,EAACC,EAAWC,QACRL,UAAWM,EACXC,OAAO,WAAUL,SAEfJ,GAAQA,EAAKI,UAAa,qBAEhCH,EAAA,MAAA,CAAKC,UAAWQ,EAAkCN,SAAA,CAC9CC,EAAA,IAAA,CACIH,UAAWS,EACXC,KAAK,6DACLC,OAAO,SACPC,IAAI,sBAAqB,cACb,oBACZC,QAAS3C,EAA+BgC,SAExCC,EAAA,MAAA,CAAKW,IA7FzB,kFA6F8CC,IAAI,sBAElCZ,EAAA,IAAA,CACIH,UAAWS,EACXC,KAAK,wEACLC,OAAO,SACPC,IAAI,sBAAqB,cACb,qBACZC,QAAS3C,EAA+BgC,SAExCC,SAAKW,IArGzB,oFAqG+CC,IAAI,+BA0B/BZ,EAACa,EAAMC,OAAAC,OAAA,CAAA,EACC5C,EAAawB,KAAI,CACrBE,UAAWmB,EACPC,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,EAACa,EAAMC,OAAAC,OAAA,CAAA,EACC5C,EAAawB,KAAI,CACrBE,UAAWmB,EACPC,UACAI,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,EAAA,KAAA,CAEIH,UAAWmB,EACPO,EACAzC,GAAY0C,GACfzB,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,EAAA8B,EAAA,CAAA/B,SACK8B,EAAyBE,OAAS,GAC/B/B,EAAA,KAAA,CAAIH,UAAWmC,EAAoBjC,SAC9BlB,EAAchB,EAAQgE,OAOnCjC,EAAAkC,EAAA,CAAA/B,SAAA,CACK2B,EAA2BK,OAAS,GACjC/B,EAAA,KAAA,CAAIH,UAAWoC,EAAoBlC,SAC9BlB,GAAc,EAAO6C,KAG7B9D,EAAc6D,QAAQM,OAAS,GAC5B/B,EAAA,KAAA,CAAIH,UAAWqC,WACVrD,EAAchB,EAAQD,EAAc6D,aAM7D,CAEA,OAAOzB,OAAK"}