@lifesg/react-design-system 4.0.0-alpha.10 → 4.0.0-alpha.11

package/cjs/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, { 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 { Card, CloseButton, Content, Footer, Header } from \"./slots\";\nimport type { ModalV2Props } from \"./types\";\n\nconst Base = ({\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 dismissKeyboard = useEvent(() => {\n        if (dismissKeyboardOnShow) {\n            (document.activeElement as HTMLElement)?.blur?.();\n        }\n    });\n    const { verticalHeight } = useViewport({\n        enabled: show,\n        onBeforeStart: dismissKeyboard,\n    });\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    });\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    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <Overlay\n            data-testid={`${testId}-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={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\n// @catalog\n/**\n * A composable modal dialog with slot-based content layout.\n *\n * Use `ModalV2` when you need a controlled overlay dialog with structured\n * content slots.\n *\n * Sub-components:\n * - `ModalV2.Card` — wraps modal content and arranges `Content`, `Footer`, and `CloseButton` slots in the correct layout.\n * - `ModalV2.CloseButton` — renders an accessible close button that invokes the modal's `onClose` callback.\n * - `ModalV2.Content` — container for the body content of the modal card.\n * - `ModalV2.Footer` — footer area for primary and secondary action buttons.\n * @keywords dialog, overlay, popup\n */\nexport const ModalV2 = Object.assign(Base, {\n    /** Wraps modal content and arranges `Content`, `Footer`, and `CloseButton` slots in the correct layout. */\n    Card,\n    /** Renders an accessible close button that invokes the modal's `onClose` callback. */\n    CloseButton,\n    /** Container for the body content of the modal card. */\n    Content,\n    /** Footer area for primary and secondary action buttons. */\n    Footer,\n    /** Header bar with a close button and optional title. Use instead of `CloseButton` when a heading is needed. */\n    Header,\n});\n"],"names":["ModalV2","Object","assign","_a","id","show","onClose","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","testId","ariaLabel","ariaLabelledBy","ariaDescribedBy","disableInitialFocus","className","otherProps","__rest","dismissKeyboard","useEvent","_b","document","activeElement","blur","verticalHeight","useViewport","enabled","onBeforeStart","childRef","useRef","containerRef","childWithRef","React","cloneElement","ref","useApplyStyle","styles.tokens","container","refs","context","useFloating","open","onOpenChange","isOpen","isMounted","status","useTransitionStatus","duration","dismiss","useDismiss","outsidePress","getFloatingProps","useInteractions","_jsx","Overlay","rootId","clsx","styles.container","ModalContext","Provider","value","FloatingFocusManager","initialFocus","floating","styles.scrollContainer","setFloating","role","styles.modalContainer","Card","CloseButton","Content","Footer","Header"],"mappings":"+lCAmBA,MA+HaA,EAAUC,OAAOC,QA/HhBC,QAAAC,GACVA,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,EAAAA,OAAAlB,EAjBH,CAAA,KAAA,OAAA,UAAA,gBAAA,WAAA,qBAAA,kBAAA,SAAA,iBAAA,wBAAA,cAAA,aAAA,kBAAA,mBAAA,sBAAA,cAsBV,MAAMmB,EAAkBC,EAAAA,UAAS,aACzBV,YACAW,EAAuC,UAAtCC,SAASC,qBAA6B,IAAAvB,OAAA,EAAAA,EAAEwB,6BAC7C,KAEEC,eAAEA,GAAmBC,cAAY,CACnCC,QAASzB,EACT0B,cAAeT,IAEbU,EAAWC,EAAAA,OAAuB,MAClCC,EAAeD,EAAAA,OAAuB,MACtCE,EACF3B,GAAY4B,UAAMC,aAAa7B,EAAU,CAAE8B,IAAKN,IAEpDO,EAAAA,cAAcL,EAAc,CACxB,CAACM,EAAAA,OAAcC,UAAUb,gBACH,MAAlBA,EAAyB,KAAO,GAAGA,QAM3C,MAAMc,KAAEA,EAAIC,QAAEA,GAAYC,cAAY,CAClCC,KAAMxC,EACNyC,aAAeC,IACNA,GACDzC,SAAAA,GACJ,KAGF0C,UAAEA,EAASC,OAAEA,GAAWC,EAAAA,oBAAoBP,EAAS,CACvDQ,SAAU,MAERC,EAAUC,EAAAA,WAAWV,EAAS,CAEhCW,cAAc,EACdxB,UAAWxB,KAETiD,iBAAEA,GAAqBC,kBAAgB,CAACJ,IAK9C,OACIK,MAACC,EAAAA,QAAO,CAAA,cACS,GAAG5C,YAChBT,KAAMA,EACNI,mBAAoBA,EACpBG,eAAgBA,EAChBR,GAAIA,EACJuD,OAAQjD,EACRwB,aAAcF,EACdrB,OAAQA,EAAMH,SAEdiD,EAAAA,IAAA,MAAAxD,OAAAC,OAAA,CACIoC,IAAKJ,EAAY,cACJpB,EAAM,cACNmC,EAAM,sBACE1C,GACjBa,GACJD,UAAWyC,UAAKC,EAAAA,UAAkB1C,GAAUX,SAE5CiD,MAACK,EAAAA,aAAaC,SAAQ,CAACC,MAAO,CAAE1D,WAASE,SACpCwC,GACGS,EAAAA,IAACQ,uBAAoB,CACjBtB,QAASA,EACTuB,aACIhD,GAAsB,EAAKwB,EAAKyB,SAAQ3D,SAG5CiD,EAAAA,IAAA,MAAA,CAAKtC,UAAWiD,EAAAA,gBAAsB5D,SAClCiD,MAAA,MAAAxD,OAAAC,OAAA,CACIoC,IAAKI,EAAK2B,aACNd,IAAkB,CACtBe,KAAK,SAAQ,aACDvD,EAAS,kBACJC,EAAc,mBACbC,EAClBE,UAAWoD,EAAAA,wBAEVpC,eAOnB,GAkByB,MAEvCqC,EAAAA,iBAEAC,EAAAA,oBAEAC,EAAAA,eAEAC,EAAAA,cAEAC,EAAAA"}
+{"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, { 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 { Card, CloseButton, Content, Footer, Header } from \"./slots\";\nimport type { ModalV2Props } from \"./types\";\n\nconst Base = ({\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 dismissKeyboard = useEvent(() => {\n        if (dismissKeyboardOnShow) {\n            (document.activeElement as HTMLElement)?.blur?.();\n        }\n    });\n    const { verticalHeight } = useViewport({\n        enabled: show,\n        onBeforeStart: dismissKeyboard,\n    });\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    });\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    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <Overlay\n            data-testid={`${testId}-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={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\n// @catalog\n/**\n * A composable modal dialog with slot-based content layout.\n *\n * Use `ModalV2` when you need a controlled overlay dialog with structured\n * content slots.\n *\n * Sub-components:\n * - `ModalV2.Card` — wraps modal content and arranges `Content`, `Footer`, and `CloseButton` slots in the correct layout. Supports a `fullscreen` prop that makes the card fill the viewport.\n * - `ModalV2.CloseButton` — renders an accessible close button that invokes the modal's `onClose` callback.\n * - `ModalV2.Content` — container for the body content of the modal card.\n * - `ModalV2.Footer` — footer area for primary and secondary action buttons.\n * @keywords dialog, overlay, popup\n */\nexport const ModalV2 = Object.assign(Base, {\n    /** Wraps modal content and arranges `Content`, `Footer`, and `CloseButton` slots in the correct layout. Supports a `fullscreen` prop. */\n    Card,\n    /** Renders an accessible close button that invokes the modal's `onClose` callback. */\n    CloseButton,\n    /** Container for the body content of the modal card. */\n    Content,\n    /** Footer area for primary and secondary action buttons. */\n    Footer,\n    /** Header bar with a close button and optional title. Use instead of `CloseButton` when a heading is needed. */\n    Header,\n});\n"],"names":["ModalV2","Object","assign","_a","id","show","onClose","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","testId","ariaLabel","ariaLabelledBy","ariaDescribedBy","disableInitialFocus","className","otherProps","__rest","dismissKeyboard","useEvent","_b","document","activeElement","blur","verticalHeight","useViewport","enabled","onBeforeStart","childRef","useRef","containerRef","childWithRef","React","cloneElement","ref","useApplyStyle","styles.tokens","container","refs","context","useFloating","open","onOpenChange","isOpen","isMounted","status","useTransitionStatus","duration","dismiss","useDismiss","outsidePress","getFloatingProps","useInteractions","_jsx","Overlay","rootId","clsx","styles.container","ModalContext","Provider","value","FloatingFocusManager","initialFocus","floating","styles.scrollContainer","setFloating","role","styles.modalContainer","Card","CloseButton","Content","Footer","Header"],"mappings":"+lCAmBA,MA+HaA,EAAUC,OAAOC,QA/HhBC,QAAAC,GACVA,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,EAAAA,OAAAlB,EAjBH,CAAA,KAAA,OAAA,UAAA,gBAAA,WAAA,qBAAA,kBAAA,SAAA,iBAAA,wBAAA,cAAA,aAAA,kBAAA,mBAAA,sBAAA,cAsBV,MAAMmB,EAAkBC,EAAAA,UAAS,aACzBV,YACAW,EAAuC,UAAtCC,SAASC,qBAA6B,IAAAvB,OAAA,EAAAA,EAAEwB,6BAC7C,KAEEC,eAAEA,GAAmBC,cAAY,CACnCC,QAASzB,EACT0B,cAAeT,IAEbU,EAAWC,EAAAA,OAAuB,MAClCC,EAAeD,EAAAA,OAAuB,MACtCE,EACF3B,GAAY4B,UAAMC,aAAa7B,EAAU,CAAE8B,IAAKN,IAEpDO,EAAAA,cAAcL,EAAc,CACxB,CAACM,EAAAA,OAAcC,UAAUb,gBACH,MAAlBA,EAAyB,KAAO,GAAGA,QAM3C,MAAMc,KAAEA,EAAIC,QAAEA,GAAYC,cAAY,CAClCC,KAAMxC,EACNyC,aAAeC,IACNA,GACDzC,SAAAA,GACJ,KAGF0C,UAAEA,EAASC,OAAEA,GAAWC,EAAAA,oBAAoBP,EAAS,CACvDQ,SAAU,MAERC,EAAUC,EAAAA,WAAWV,EAAS,CAEhCW,cAAc,EACdxB,UAAWxB,KAETiD,iBAAEA,GAAqBC,kBAAgB,CAACJ,IAK9C,OACIK,MAACC,EAAAA,QAAO,CAAA,cACS,GAAG5C,YAChBT,KAAMA,EACNI,mBAAoBA,EACpBG,eAAgBA,EAChBR,GAAIA,EACJuD,OAAQjD,EACRwB,aAAcF,EACdrB,OAAQA,EAAMH,SAEdiD,EAAAA,IAAA,MAAAxD,OAAAC,OAAA,CACIoC,IAAKJ,EAAY,cACJpB,EAAM,cACNmC,EAAM,sBACE1C,GACjBa,GACJD,UAAWyC,UAAKC,EAAAA,UAAkB1C,GAAUX,SAE5CiD,MAACK,EAAAA,aAAaC,SAAQ,CAACC,MAAO,CAAE1D,WAASE,SACpCwC,GACGS,EAAAA,IAACQ,uBAAoB,CACjBtB,QAASA,EACTuB,aACIhD,GAAsB,EAAKwB,EAAKyB,SAAQ3D,SAG5CiD,EAAAA,IAAA,MAAA,CAAKtC,UAAWiD,EAAAA,gBAAsB5D,SAClCiD,MAAA,MAAAxD,OAAAC,OAAA,CACIoC,IAAKI,EAAK2B,aACNd,IAAkB,CACtBe,KAAK,SAAQ,aACDvD,EAAS,kBACJC,EAAc,mBACbC,EAClBE,UAAWoD,EAAAA,wBAEVpC,eAOnB,GAkByB,MAEvCqC,EAAAA,iBAEAC,EAAAA,oBAEAC,EAAAA,eAEAC,EAAAA,cAEAC,EAAAA"}

package/cjs/modal-v2/slots/card.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("clsx"),a=require("react");require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js");var s=require("../../util/merge-refs.js");require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer");var i=require("../../util/is-styled-components.js"),l=require("./close-button.js"),d=require("./content.js"),u=require("./footer.js"),n=require("./header.js"),o=require("./slot-styles.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var f=c(t),j=c(a);const q=j.default.forwardRef((function(t,a){var{id:c,"data-testid":q="modal-card",children:m,className:p,elementRef:y}=t,h=e.__rest(t,["id","data-testid","children","className","elementRef"]);const v=e=>j.default.Children.toArray(m).find((r=>((e,r)=>i.default(e.type)?e.type.target===r:e.type===r)(r,e))),g=v(l.CloseButton),C=v(d.Content),x=v(u.Footer),b=v(n.Header),N=!!g||!!b;return r.jsxs("div",Object.assign({ref:s.mergeRefs(a,y),id:c,"data-testid":q},h,{onClick:e=>{e.stopPropagation()},className:f.default(o.modalCard,p),children:[r.jsxs("div",{"data-has-close-button":!!N,className:f.default(o.slotSpacer),children:[C,x]}),N&&(b||g)]}))}));q.displayName="ModalV2.Card",exports.Card=q;
+"use strict";var e=require("../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("clsx"),a=require("react");require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js");var s=require("../../util/merge-refs.js");require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer");var l=require("../../util/is-styled-components.js"),i=require("./close-button.js"),d=require("./content.js"),u=require("./footer.js"),n=require("./header.js"),o=require("./slot-styles.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var f=c(t),j=c(a);const q=j.default.forwardRef((function(t,a){var{id:c,"data-testid":q="modal-card",children:m,className:p,elementRef:y,fullscreen:h}=t,v=e.__rest(t,["id","data-testid","children","className","elementRef","fullscreen"]);const C=e=>j.default.Children.toArray(m).find((r=>((e,r)=>l.default(e.type)?e.type.target===r:e.type===r)(r,e))),g=C(i.CloseButton),x=C(d.Content),b=C(u.Footer),N=C(n.Header),R=!!g||!!N;return r.jsxs("div",Object.assign({ref:s.mergeRefs(a,y),id:c,"data-testid":q},v,{onClick:e=>{e.stopPropagation()},className:f.default(o.cardBase,h?o.fullscreenModalCard:o.modalCard,p),children:[r.jsxs("div",{"data-has-close-button":!!R,className:f.default(o.slotSpacer,h&&o.fullscreenSlotSpacer),children:[x,b]}),R&&(N||g)]}))}));q.displayName="ModalV2.Card",exports.Card=q;
 //# sourceMappingURL=card.js.map

package/cjs/modal-v2/slots/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sources":["../../../../src/modal-v2/slots/card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { NamedExoticComponent } from \"react\";\nimport React from \"react\";\n\nimport { mergeRefs } from \"../../util\";\nimport isStyledComponent from \"../../util/is-styled-components\";\nimport type { ModalCardProps } from \"../types\";\nimport { CloseButton } from \"./close-button\";\nimport { Content } from \"./content\";\nimport { Footer } from \"./footer\";\nimport { Header } from \"./header\";\nimport * as styles from \"./slot-styles\";\n\nfunction CardInner(\n    {\n        id,\n        \"data-testid\": testId = \"modal-card\",\n        children,\n        className,\n        elementRef,\n        ...otherProps\n    }: ModalCardProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n) {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\n    };\n\n    // =========================================================================\n    // HELPERS\n    // =========================================================================\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const isComponentType = (child: React.ReactPortal, type: any) =>\n        isStyledComponent(child.type)\n            ? // eslint-disable-next-line @typescript-eslint/no-explicit-any\n              (child.type as unknown as { target: any }).target === type\n            : child.type === type;\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const findComponentOfType = (type: any) => {\n        return React.Children.toArray(children).find((child) =>\n            isComponentType(child as React.ReactPortal, type)\n        );\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const CloseButtonSlot = findComponentOfType(CloseButton);\n    const ContentSlot = findComponentOfType(Content);\n    const FooterSlot = findComponentOfType(Footer);\n    const HeaderSlot = findComponentOfType(Header);\n\n    const hasHeader = !!CloseButtonSlot || !!HeaderSlot;\n\n    return (\n        <div\n            ref={mergeRefs(ref, elementRef)}\n            id={id}\n            data-testid={testId}\n            {...otherProps}\n            onClick={handleOnClick}\n            className={clsx(styles.modalCard, className)}\n        >\n            <div\n                data-has-close-button={!!hasHeader}\n                className={clsx(styles.slotSpacer)}\n            >\n                {ContentSlot}\n                {FooterSlot}\n            </div>\n            {hasHeader && (HeaderSlot || CloseButtonSlot)}\n        </div>\n    );\n}\n\nexport const Card = React.forwardRef<HTMLDivElement, ModalCardProps>(CardInner);\n\n(Card as NamedExoticComponent).displayName = \"ModalV2.Card\";\n"],"names":["Card","React","forwardRef","_a","ref","id","testId","children","className","elementRef","otherProps","__rest","findComponentOfType","type","Children","toArray","find","child","isStyledComponent","target","isComponentType","CloseButtonSlot","CloseButton","ContentSlot","Content","FooterSlot","Footer","HeaderSlot","Header","hasHeader","_jsxs","Object","assign","mergeRefs","onClick","event","stopPropagation","clsx","styles.modalCard","styles.slotSpacer","displayName"],"mappings":"4oBA+EO,MAAMA,EAAOC,EAAAA,QAAMC,YAlE1B,SACIC,EAQAC,GARA,IAAAC,GACIA,EACA,cAAeC,EAAS,aAAYC,SACpCA,EAAQC,UACRA,EAASC,WACTA,GAAUN,EACPO,EAAUC,EAAAA,OAAAR,EANjB,0DAaA,MAeMS,EAAuBC,GAClBZ,UAAMa,SAASC,QAAQR,GAAUS,MAAMC,GAR1B,EAACA,EAA0BJ,IAC/CK,EAAAA,QAAkBD,EAAMJ,MAEjBI,EAAMJ,KAAoCM,SAAWN,EACtDI,EAAMJ,OAASA,EAKjBO,CAAgBH,EAA4BJ,KAO9CQ,EAAkBT,EAAoBU,eACtCC,EAAcX,EAAoBY,WAClCC,EAAab,EAAoBc,UACjCC,EAAaf,EAAoBgB,UAEjCC,IAAcR,KAAqBM,EAEzC,OACIG,EAAAA,KAAA,MAAAC,OAAAC,OAAA,CACI5B,IAAK6B,EAAAA,UAAU7B,EAAKK,GACpBJ,GAAIA,EAAE,cACOC,GACTI,EAAU,CACdwB,QArCeC,IACnBA,EAAMC,iBAAiB,EAqCnB5B,UAAW6B,EAAAA,QAAKC,YAAkB9B,GAAUD,SAAA,CAE5CuB,OAAA,MAAA,CAAA,0BAC6BD,EACzBrB,UAAW6B,EAAAA,QAAKE,EAAAA,YAAkBhC,SAAA,CAEjCgB,EACAE,KAEJI,IAAcF,GAAcN,MAGzC,IAICrB,EAA8BwC,YAAc"}
+{"version":3,"file":"card.js","sources":["../../../../src/modal-v2/slots/card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { NamedExoticComponent } from \"react\";\nimport React from \"react\";\n\nimport { mergeRefs } from \"../../util\";\nimport isStyledComponent from \"../../util/is-styled-components\";\nimport type { ModalCardProps } from \"../types\";\nimport { CloseButton } from \"./close-button\";\nimport { Content } from \"./content\";\nimport { Footer } from \"./footer\";\nimport { Header } from \"./header\";\nimport * as styles from \"./slot-styles\";\n\nfunction CardInner(\n    {\n        id,\n        \"data-testid\": testId = \"modal-card\",\n        children,\n        className,\n        elementRef,\n        fullscreen,\n        ...otherProps\n    }: ModalCardProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n) {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\n    };\n\n    // =========================================================================\n    // HELPERS\n    // =========================================================================\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const isComponentType = (child: React.ReactPortal, type: any) =>\n        isStyledComponent(child.type)\n            ? // eslint-disable-next-line @typescript-eslint/no-explicit-any\n              (child.type as unknown as { target: any }).target === type\n            : child.type === type;\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const findComponentOfType = (type: any) => {\n        return React.Children.toArray(children).find((child) =>\n            isComponentType(child as React.ReactPortal, type)\n        );\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const CloseButtonSlot = findComponentOfType(CloseButton);\n    const ContentSlot = findComponentOfType(Content);\n    const FooterSlot = findComponentOfType(Footer);\n    const HeaderSlot = findComponentOfType(Header);\n\n    const hasHeader = !!CloseButtonSlot || !!HeaderSlot;\n\n    return (\n        <div\n            ref={mergeRefs(ref, elementRef)}\n            id={id}\n            data-testid={testId}\n            {...otherProps}\n            onClick={handleOnClick}\n            className={clsx(\n                styles.cardBase,\n                fullscreen ? styles.fullscreenModalCard : styles.modalCard,\n                className\n            )}\n        >\n            <div\n                data-has-close-button={!!hasHeader}\n                className={clsx(\n                    styles.slotSpacer,\n                    fullscreen && styles.fullscreenSlotSpacer\n                )}\n            >\n                {ContentSlot}\n                {FooterSlot}\n            </div>\n            {hasHeader && (HeaderSlot || CloseButtonSlot)}\n        </div>\n    );\n}\n\nexport const Card = React.forwardRef<HTMLDivElement, ModalCardProps>(CardInner);\n\n(Card as NamedExoticComponent).displayName = \"ModalV2.Card\";\n"],"names":["Card","React","forwardRef","_a","ref","id","testId","children","className","elementRef","fullscreen","otherProps","__rest","findComponentOfType","type","Children","toArray","find","child","isStyledComponent","target","isComponentType","CloseButtonSlot","CloseButton","ContentSlot","Content","FooterSlot","Footer","HeaderSlot","Header","hasHeader","_jsxs","Object","assign","mergeRefs","onClick","event","stopPropagation","clsx","styles.cardBase","styles.fullscreenModalCard","styles.modalCard","styles.slotSpacer","styles.fullscreenSlotSpacer","displayName"],"mappings":"4oBAuFO,MAAMA,EAAOC,EAAAA,QAAMC,YA1E1B,SACIC,EASAC,OATAC,GACIA,EACA,cAAeC,EAAS,aAAYC,SACpCA,EAAQC,UACRA,EAASC,WACTA,EAAUC,WACVA,GAAUP,EACPQ,EAAUC,EAAAA,OAAAT,EAPjB,uEAcA,MAeMU,EAAuBC,GAClBb,UAAMc,SAASC,QAAQT,GAAUU,MAAMC,GAR1B,EAACA,EAA0BJ,IAC/CK,EAAAA,QAAkBD,EAAMJ,MAEjBI,EAAMJ,KAAoCM,SAAWN,EACtDI,EAAMJ,OAASA,EAKjBO,CAAgBH,EAA4BJ,KAO9CQ,EAAkBT,EAAoBU,eACtCC,EAAcX,EAAoBY,WAClCC,EAAab,EAAoBc,UACjCC,EAAaf,EAAoBgB,UAEjCC,IAAcR,KAAqBM,EAEzC,OACIG,OAAA,MAAAC,OAAAC,OAAA,CACI7B,IAAK8B,EAAAA,UAAU9B,EAAKK,GACpBJ,GAAIA,EAAE,cACOC,GACTK,EAAU,CACdwB,QArCeC,IACnBA,EAAMC,iBAAiB,EAqCnB7B,UAAW8B,UACPC,EAAAA,SACA7B,EAAa8B,EAAAA,oBAA6BC,EAAAA,UAC1CjC,GACHD,SAAA,CAEDwB,wCAC6BD,EACzBtB,UAAW8B,EAAAA,QACPI,aACAhC,GAAciC,EAAAA,gCAGjBnB,EACAE,KAEJI,IAAcF,GAAcN,MAGzC,IAICtB,EAA8B4C,YAAc"}

package/cjs/modal-v2/slots/slot-styles.js

@@ -1,2 +1,2 @@
-"use strict";require("./slot-styles_10ut1v7.css");exports.closeButtonContainer="c1247joo",exports.contentContainer="c1ls09wh",exports.footerContainer="f1s12qxk",exports.headerCloseButton="ha88pah",exports.headerContainer="h1adf5mq",exports.headerSpacer="h3mtfiz",exports.headerTitle="hii7rdr",exports.modalCard="metykyj",exports.slotSpacer="s1vsayl1",exports.styledClickableIcon="st53q25";
+"use strict";require("./slot-styles_ayb9il.css");exports.cardBase="cetykyj",exports.closeButtonContainer="c1ls09wh",exports.contentContainer="c1vsayl1",exports.footerContainer="f1adf5mq",exports.fullscreenModalCard="ft53q25",exports.fullscreenSlotSpacer="fa88pah",exports.headerCloseButton="ht9zr8k",exports.headerContainer="h3mtfiz",exports.headerSpacer="hjbud0c",exports.headerTitle="h1evnebr",exports.modalCard="m1247joo",exports.slotSpacer="sii7rdr",exports.styledClickableIcon="s1s12qxk";
 //# sourceMappingURL=slot-styles.js.map

package/cjs/modal-v2/slots/slot-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"slot-styles.js","sources":["../../../../src/modal-v2/slots/slot-styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Breakpoint,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../../theme\";\n\n// =============================================================================\n// Tokens and attributes\n// =============================================================================\nexport const slotSpacerHasCloseButtonAttribute = \"data-has-close-button\";\nconst internalSlotSpacerTokens = {\n    firstChildMarginTop:\n        \"--fds-internal-modalV2-slotSpacer-firstChildMarginTop\",\n} as const;\n\nexport const slotSpacerTokens = {\n    firstChildMarginTopWithCloseButton:\n        \"--fds-internal-modalV2-slotSpacer-firstChildMarginTopWithCloseButton\",\n    firstChildMarginTopNoCloseButton:\n        \"--fds-internal-modalV2-slotSpacer-firstChildMarginTopNoCloseButton\",\n\n    contentLastChildMarginBottom:\n        \"--fds-internal-modalV2-slotSpacer-contentLastChildMarginBottom\",\n\n    footerNotFirstChildMarginTop:\n        \"--fds-internal-modalV2-slotSpacer-footerNotFirstChildMarginTop\",\n    footerLastChildMarginBottom:\n        \"--fds-internal-modalV2-slotSpacer-footerLastChildMarginBottom\",\n} as const;\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const modalCard = css`\n    width: 40rem;\n    margin: ${Spacing[\"spacing-64\"]} auto;\n    background: ${Colour.bg};\n    box-shadow: ${Shadow[\"xs-strong\"]};\n    border-radius: ${Radius[\"lg\"]};\n\n    display: flex;\n    flex-direction: column-reverse;\n\n    max-width: calc(100% - ${Breakpoint[\"xxl-margin\"]} * 2);\n\n    ${MediaQuery.MaxWidth.xl} {\n        max-width: calc(100% - ${Breakpoint[\"xl-margin\"]} * 2);\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        max-width: calc(100% - ${Breakpoint[\"lg-margin\"]} * 2);\n    }\n\n    ${MediaQuery.MaxWidth.md} {\n        max-width: calc(100% - ${Breakpoint[\"md-margin\"]} * 2);\n    }\n\n    ${MediaQuery.MaxWidth.sm} {\n        max-width: calc(100% - ${Breakpoint[\"sm-margin\"]} * 2);\n    }\n\n    ${MediaQuery.MaxWidth.xs} {\n        max-width: calc(100% - ${Breakpoint[\"xs-margin\"]} * 2);\n    }\n\n    ${MediaQuery.MaxWidth.xxs} {\n        max-width: calc(100% - ${Breakpoint[\"xxs-margin\"]} * 2);\n    }\n`;\n\nexport const closeButtonContainer = css`\n    margin-right: ${Spacing[\"spacing-16\"]};\n    margin-left: auto;\n    margin-top: ${Spacing[\"spacing-16\"]};\n    margin-bottom: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const styledClickableIcon = css`\n    padding: 0;\n    color: ${Colour.icon};\n\n    & svg {\n        height: 2rem;\n        width: 2rem;\n    }\n`;\n\nexport const contentContainer = css`\n    margin-right: ${Spacing[\"spacing-64\"]};\n    margin-left: ${Spacing[\"spacing-64\"]};\n\n    ${MediaQuery.MaxWidth.sm} {\n        margin-right: ${Spacing[\"spacing-20\"]};\n        margin-left: ${Spacing[\"spacing-20\"]};\n    }\n`;\n\nexport const footerContainer = css`\n    margin-right: ${Spacing[\"spacing-64\"]};\n    margin-left: ${Spacing[\"spacing-64\"]};\n\n    ${MediaQuery.MaxWidth.sm} {\n        margin-right: ${Spacing[\"spacing-20\"]};\n        margin-left: ${Spacing[\"spacing-20\"]};\n    }\n\n    display: flex;\n    flex-direction: row-reverse; /* primary button on right */\n    column-gap: ${Spacing[\"spacing-32\"]};\n    row-gap: ${Spacing[\"spacing-16\"]};\n\n    & > button {\n        flex: 1;\n    }\n\n    ${MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n    }\n`;\n\nexport const slotSpacer = css`\n    ${slotSpacerTokens.contentLastChildMarginBottom}: initial;\n    ${slotSpacerTokens.footerNotFirstChildMarginTop}: initial;\n    ${slotSpacerTokens.footerLastChildMarginBottom}: initial;\n    ${slotSpacerTokens.firstChildMarginTopWithCloseButton}: initial;\n    ${slotSpacerTokens.firstChildMarginTopNoCloseButton}: initial;\n\n    ${internalSlotSpacerTokens.firstChildMarginTop}: var(\n        ${slotSpacerTokens.firstChildMarginTopNoCloseButton},\n        ${Spacing[\"spacing-64\"]}\n    );\n\n    & > :where(.${contentContainer}:last-child) {\n        margin-bottom: var(\n            ${slotSpacerTokens.contentLastChildMarginBottom},\n            ${Spacing[\"spacing-64\"]}\n        );\n    }\n\n    & > :where(.${footerContainer}:not(:first-child)) {\n        margin-top: var(\n            ${slotSpacerTokens.footerNotFirstChildMarginTop},\n            ${Spacing[\"spacing-32\"]}\n        );\n    }\n\n    & > :where(.${footerContainer}:last-child) {\n        margin-bottom: var(\n            ${slotSpacerTokens.footerLastChildMarginBottom},\n            ${Spacing[\"spacing-64\"]}\n        );\n    }\n\n    &\n        > :where(\n            .${contentContainer}:first-child, .${footerContainer}:first-child\n        ) {\n        margin-top: var(${internalSlotSpacerTokens.firstChildMarginTop});\n    }\n\n    &[${slotSpacerHasCloseButtonAttribute}=\"true\"] {\n        ${internalSlotSpacerTokens.firstChildMarginTop}: var(\n            ${slotSpacerTokens.firstChildMarginTopWithCloseButton},\n            0\n        );\n    }\n\n    &[${slotSpacerHasCloseButtonAttribute}=\"false\"] {\n        ${internalSlotSpacerTokens.firstChildMarginTop}: var(\n            ${slotSpacerTokens.firstChildMarginTopNoCloseButton},\n            ${Spacing[\"spacing-64\"]}\n        );\n    }\n`;\n\nexport const headerContainer = css`\n    display: flex;\n    align-items: center;\n    padding: ${Spacing[\"spacing-16\"]};\n\n    &[data-close-button-position=\"right\"] {\n        flex-direction: row-reverse;\n    }\n`;\n\nexport const headerTitle = css`\n    ${Font[\"heading-xs-semibold\"]}\n    color: ${Colour.text};\n    flex: 1;\n    text-align: center;\n`;\n\nexport const headerCloseButton = css`\n    padding: 0;\n    color: ${Colour.icon};\n    flex-shrink: 0;\n\n    & svg {\n        height: 2rem;\n        width: 2rem;\n    }\n`;\n\nexport const headerSpacer = css`\n    width: 2rem;\n    flex-shrink: 0;\n`;\n"],"names":[],"mappings":"6GA4EiC,oCAiBJ,mCAUD,qCA+FE,kCAjBF,gCA4BH,8BAlBD,4BAxJF,6BAuFC,uCA3CS"}
+{"version":3,"file":"slot-styles.js","sources":["../../../../src/modal-v2/slots/slot-styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Breakpoint,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../../theme\";\n\n// =============================================================================\n// Tokens and attributes\n// =============================================================================\nexport const slotSpacerHasCloseButtonAttribute = \"data-has-close-button\";\nconst internalSlotSpacerTokens = {\n    firstChildMarginTop:\n        \"--fds-internal-modalV2-slotSpacer-firstChildMarginTop\",\n} as const;\n\nexport const slotSpacerTokens = {\n    firstChildMarginTopWithCloseButton:\n        \"--fds-internal-modalV2-slotSpacer-firstChildMarginTopWithCloseButton\",\n    firstChildMarginTopNoCloseButton:\n        \"--fds-internal-modalV2-slotSpacer-firstChildMarginTopNoCloseButton\",\n\n    contentLastChildMarginBottom:\n        \"--fds-internal-modalV2-slotSpacer-contentLastChildMarginBottom\",\n\n    footerNotFirstChildMarginTop:\n        \"--fds-internal-modalV2-slotSpacer-footerNotFirstChildMarginTop\",\n    footerLastChildMarginBottom:\n        \"--fds-internal-modalV2-slotSpacer-footerLastChildMarginBottom\",\n} as const;\n\n// =============================================================================\n// STYLING\n// =============================================================================\n/** Shared by both the windowed (`modalCard`) and `fullscreenModalCard` variants. */\nexport const cardBase = css`\n    background: ${Colour.bg};\n\n    display: flex;\n    flex-direction: column-reverse;\n`;\n\nexport const modalCard = css`\n    width: 40rem;\n    margin: ${Spacing[\"spacing-64\"]} auto;\n    box-shadow: ${Shadow[\"xs-strong\"]};\n    border-radius: ${Radius[\"lg\"]};\n\n    max-width: calc(100% - ${Breakpoint[\"xxl-margin\"]} * 2);\n\n    ${MediaQuery.MaxWidth.xl} {\n        max-width: calc(100% - ${Breakpoint[\"xl-margin\"]} * 2);\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        max-width: calc(100% - ${Breakpoint[\"lg-margin\"]} * 2);\n    }\n\n    ${MediaQuery.MaxWidth.md} {\n        max-width: calc(100% - ${Breakpoint[\"md-margin\"]} * 2);\n    }\n\n    ${MediaQuery.MaxWidth.sm} {\n        max-width: calc(100% - ${Breakpoint[\"sm-margin\"]} * 2);\n    }\n\n    ${MediaQuery.MaxWidth.xs} {\n        max-width: calc(100% - ${Breakpoint[\"xs-margin\"]} * 2);\n    }\n\n    ${MediaQuery.MaxWidth.xxs} {\n        max-width: calc(100% - ${Breakpoint[\"xxs-margin\"]} * 2);\n    }\n`;\n\nexport const fullscreenModalCard = css`\n    width: 100%;\n    height: 100vh;\n`;\n\nexport const closeButtonContainer = css`\n    margin-right: ${Spacing[\"spacing-16\"]};\n    margin-left: auto;\n    margin-top: ${Spacing[\"spacing-16\"]};\n    margin-bottom: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const styledClickableIcon = css`\n    padding: 0;\n    color: ${Colour.icon};\n\n    & svg {\n        height: 2rem;\n        width: 2rem;\n    }\n`;\n\nexport const contentContainer = css`\n    margin-right: ${Spacing[\"spacing-64\"]};\n    margin-left: ${Spacing[\"spacing-64\"]};\n\n    ${MediaQuery.MaxWidth.sm} {\n        margin-right: ${Spacing[\"spacing-20\"]};\n        margin-left: ${Spacing[\"spacing-20\"]};\n    }\n`;\n\nexport const footerContainer = css`\n    margin-right: ${Spacing[\"spacing-64\"]};\n    margin-left: ${Spacing[\"spacing-64\"]};\n\n    ${MediaQuery.MaxWidth.sm} {\n        margin-right: ${Spacing[\"spacing-20\"]};\n        margin-left: ${Spacing[\"spacing-20\"]};\n    }\n\n    display: flex;\n    flex-direction: row-reverse; /* primary button on right */\n    column-gap: ${Spacing[\"spacing-32\"]};\n    row-gap: ${Spacing[\"spacing-16\"]};\n\n    & > button {\n        flex: 1;\n    }\n\n    ${MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n    }\n`;\n\nexport const slotSpacer = css`\n    ${slotSpacerTokens.contentLastChildMarginBottom}: initial;\n    ${slotSpacerTokens.footerNotFirstChildMarginTop}: initial;\n    ${slotSpacerTokens.footerLastChildMarginBottom}: initial;\n    ${slotSpacerTokens.firstChildMarginTopWithCloseButton}: initial;\n    ${slotSpacerTokens.firstChildMarginTopNoCloseButton}: initial;\n\n    ${internalSlotSpacerTokens.firstChildMarginTop}: var(\n        ${slotSpacerTokens.firstChildMarginTopNoCloseButton},\n        ${Spacing[\"spacing-64\"]}\n    );\n\n    & > :where(.${contentContainer}:last-child) {\n        margin-bottom: var(\n            ${slotSpacerTokens.contentLastChildMarginBottom},\n            ${Spacing[\"spacing-64\"]}\n        );\n    }\n\n    & > :where(.${footerContainer}:not(:first-child)) {\n        margin-top: var(\n            ${slotSpacerTokens.footerNotFirstChildMarginTop},\n            ${Spacing[\"spacing-32\"]}\n        );\n    }\n\n    & > :where(.${footerContainer}:last-child) {\n        margin-bottom: var(\n            ${slotSpacerTokens.footerLastChildMarginBottom},\n            ${Spacing[\"spacing-64\"]}\n        );\n    }\n\n    &\n        > :where(\n            .${contentContainer}:first-child, .${footerContainer}:first-child\n        ) {\n        margin-top: var(${internalSlotSpacerTokens.firstChildMarginTop});\n    }\n\n    &[${slotSpacerHasCloseButtonAttribute}=\"true\"] {\n        ${internalSlotSpacerTokens.firstChildMarginTop}: var(\n            ${slotSpacerTokens.firstChildMarginTopWithCloseButton},\n            0\n        );\n    }\n\n    &[${slotSpacerHasCloseButtonAttribute}=\"false\"] {\n        ${internalSlotSpacerTokens.firstChildMarginTop}: var(\n            ${slotSpacerTokens.firstChildMarginTopNoCloseButton},\n            ${Spacing[\"spacing-64\"]}\n        );\n    }\n`;\n\nexport const fullscreenSlotSpacer = css`\n    flex-grow: 1;\n\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n`;\n\nexport const headerContainer = css`\n    display: flex;\n    align-items: center;\n    padding: ${Spacing[\"spacing-16\"]};\n\n    &[data-close-button-position=\"right\"] {\n        flex-direction: row-reverse;\n    }\n`;\n\nexport const headerTitle = css`\n    ${Font[\"heading-xs-semibold\"]}\n    color: ${Colour.text};\n    flex: 1;\n    text-align: center;\n`;\n\nexport const headerCloseButton = css`\n    padding: 0;\n    color: ${Colour.icon};\n    flex-shrink: 0;\n\n    & svg {\n        height: 2rem;\n        width: 2rem;\n    }\n`;\n\nexport const headerSpacer = css`\n    width: 2rem;\n    flex-shrink: 0;\n`;\n"],"names":[],"mappings":"gGAwCqB,uCA6CY,oCAiBJ,mCAUD,uCAhCI,uCA8GC,oCAyBH,kCAjBF,+BA4BH,8BAlBD,6BAjKF,8BAwFC,sCA3CS"}

package/cjs/modal-v2/slots/slot-styles_ayb9il.css

@@ -0,0 +1,33 @@
+@layer fds{.cetykyj{background:var(--fds-colour-bg);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;}
+.m1247joo{width:40rem;margin:var(--fds-spacing-64) auto;box-shadow:var(--fds-shadow-xs-strong);border-radius:var(--fds-radius-lg);max-width:calc(100% - var(--fds-breakpoint-margin-xxl) * 2);}:where(body.fds-breakpoint-xl-max) .m1247joo{max-width:calc(100% - var(--fds-breakpoint-margin-xl) * 2);}:where(body.fds-breakpoint-lg-max) .m1247joo{max-width:calc(100% - var(--fds-breakpoint-margin-lg) * 2);}:where(body.fds-breakpoint-md-max) .m1247joo{max-width:calc(100% - var(--fds-breakpoint-margin-md) * 2);}:where(body.fds-breakpoint-sm-max) .m1247joo{max-width:calc(100% - var(--fds-breakpoint-margin-sm) * 2);}:where(body.fds-breakpoint-xs-max) .m1247joo{max-width:calc(100% - var(--fds-breakpoint-margin-xs) * 2);}:where(body.fds-breakpoint-xxs-max) .m1247joo{max-width:calc(100% - var(--fds-breakpoint-margin-xxs) * 2);}
+.ft53q25{width:100%;height:100vh;}
+.c1ls09wh{margin-right:var(--fds-spacing-16);margin-left:auto;margin-top:var(--fds-spacing-16);margin-bottom:var(--fds-spacing-16);}
+.s1s12qxk{padding:0;color:var(--fds-colour-icon);}.s1s12qxk svg{height:2rem;width:2rem;}
+.c1vsayl1{margin-right:var(--fds-spacing-64);margin-left:var(--fds-spacing-64);}:where(body.fds-breakpoint-sm-max) .c1vsayl1{margin-right:var(--fds-spacing-20);margin-left:var(--fds-spacing-20);}
+.f1adf5mq{margin-right:var(--fds-spacing-64);margin-left:var(--fds-spacing-64);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-column-gap:var(--fds-spacing-32);column-gap:var(--fds-spacing-32);row-gap:var(--fds-spacing-16);}:where(body.fds-breakpoint-sm-max) .f1adf5mq{margin-right:var(--fds-spacing-20);margin-left:var(--fds-spacing-20);}.f1adf5mq>button{-webkit-flex:1;-ms-flex:1;flex:1;}:where(body.fds-breakpoint-md-max) .f1adf5mq{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.sii7rdr{--fds-internal-modalV2-slotSpacer-contentLastChildMarginBottom:initial;--fds-internal-modalV2-slotSpacer-footerNotFirstChildMarginTop:initial;--fds-internal-modalV2-slotSpacer-footerLastChildMarginBottom:initial;--fds-internal-modalV2-slotSpacer-firstChildMarginTopWithCloseButton:initial;--fds-internal-modalV2-slotSpacer-firstChildMarginTopNoCloseButton:initial;--fds-internal-modalV2-slotSpacer-firstChildMarginTop:var(
+        --fds-internal-modalV2-slotSpacer-firstChildMarginTopNoCloseButton,
+        var(--fds-spacing-64)
+    );}.sii7rdr>:where(.c1vsayl1:last-child){margin-bottom:var(
+            --fds-internal-modalV2-slotSpacer-contentLastChildMarginBottom,
+            var(--fds-spacing-64)
+        );}.sii7rdr>:where(.f1adf5mq:not(:first-child)){margin-top:var(
+            --fds-internal-modalV2-slotSpacer-footerNotFirstChildMarginTop,
+            var(--fds-spacing-32)
+        );}.sii7rdr>:where(.f1adf5mq:last-child){margin-bottom:var(
+            --fds-internal-modalV2-slotSpacer-footerLastChildMarginBottom,
+            var(--fds-spacing-64)
+        );}.sii7rdr>:where(
+            .c1vsayl1:first-child, .f1adf5mq:first-child
+        ){margin-top:var(--fds-internal-modalV2-slotSpacer-firstChildMarginTop);}.sii7rdr[data-has-close-button="true"]{--fds-internal-modalV2-slotSpacer-firstChildMarginTop:var(
+            --fds-internal-modalV2-slotSpacer-firstChildMarginTopWithCloseButton,
+            0
+        );}.sii7rdr[data-has-close-button="false"]{--fds-internal-modalV2-slotSpacer-firstChildMarginTop:var(
+            --fds-internal-modalV2-slotSpacer-firstChildMarginTopNoCloseButton,
+            var(--fds-spacing-64)
+        );}
+.fa88pah{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;}
+.h3mtfiz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:var(--fds-spacing-16);}.h3mtfiz[data-close-button-position="right"]{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}
+.h1evnebr{font-family:var(--fds-font-family-heading);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-heading-lh-xs);letter-spacing:var(--fds-font-heading-ls-xs);color:var(--fds-colour-text);-webkit-flex:1;-ms-flex:1;flex:1;text-align:center;}
+.ht9zr8k{padding:0;color:var(--fds-colour-icon);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.ht9zr8k svg{height:2rem;width:2rem;}
+.hjbud0c{width:2rem;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}}

package/cjs/navbar/menu.js

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

package/cjs/navbar/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sources":["../../../src/navbar/menu.tsx"],"sourcesContent":["import type React from \"react\";\n\nimport { Typography } from \"../typography\";\nimport * as styles from \"./menu.styles\";\nimport type { NavItemCommonProps } from \"./types\";\n\ninterface Props<T> {\n    items: NavItemCommonProps<T>[];\n    onItemClick: (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemCommonProps<T>\n    ) => void;\n}\n\nexport const Menu = <T,>({ items, onItemClick }: Props<T>): JSX.Element => {\n    const handleLinkClick = (item: NavItemCommonProps<T>) => {\n        return (event: React.MouseEvent<HTMLAnchorElement>) => {\n            event.stopPropagation(); // in mobile, this prevents the drawer from intercepting event\n            onItemClick(event, item);\n        };\n    };\n\n    if (!items?.length) return <></>;\n\n    return (\n        <ul className={styles.mobileWrapper}>\n            {items.map((item, index) => {\n                const { children, options, ...otherItemAttrs } = item;\n                const testId = `menu__mobile-${index + 1}`;\n\n                return (\n                    <li key={index} className={styles.menuItem}>\n                        <Typography.LinkBL\n                            className={styles.link}\n                            data-testid={testId}\n                            {...otherItemAttrs}\n                            {...options}\n                            onClick={handleLinkClick(item)}\n                            underlineStyle=\"none\"\n                        >\n                            {children}\n                        </Typography.LinkBL>\n                    </li>\n                );\n            })}\n        </ul>\n    );\n};\n"],"names":["items","onItemClick","handleLinkClick","item","event","stopPropagation","length","_jsx","className","styles.mobileWrapper","children","map","index","options","otherItemAttrs","__rest","testId","styles.menuItem","Typography","LinkBL","styles.link","onClick","underlineStyle"],"mappings":"kKAcoB,EAAOA,QAAOC,kBAC9B,MAAMC,EAAmBC,GACbC,IACJA,EAAMC,kBACNJ,EAAYG,EAAOD,EAAK,EAIhC,OAAKH,aAAK,EAALA,EAAOM,QAGRC,MAAA,KAAA,CAAIC,UAAWC,EAAAA,cAAoBC,SAC9BV,EAAMW,KAAI,CAACR,EAAMS,KACd,MAAMF,SAAEA,EAAQG,QAAEA,GAA+BV,EAAnBW,EAAcC,EAAAA,OAAKZ,EAA3C,CAAA,WAAA,YACAa,EAAS,gBAAgBJ,EAAQ,IAEvC,OACIL,EAAAA,IAAA,KAAA,CAAgBC,UAAWS,EAAAA,SAAeP,SACtCH,EAAAA,IAACW,EAAAA,WAAWC,sBACRX,UAAWY,EAAAA,mBACEJ,GACTF,EACAD,EAAO,CACXQ,QAASnB,EAAgBC,GACzBmB,eAAe,gBAEdZ,MATAE,EAWJ,MApBML,EAAAA,kBAuBlB"}
+{"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    selectedId?: string | undefined;\n    onItemClick: (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemCommonProps<T>\n    ) => void;\n}\n\nexport const Menu = <T,>({\n    items,\n    selectedId,\n    onItemClick,\n}: 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, weight, ...otherItemAttrs } = item;\n                const testId = `menu__mobile-${index + 1}`;\n                const selected = item.id === selectedId;\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                            weight={selected ? \"bold\" : weight}\n                            aria-current={selected ? \"page\" : undefined}\n                            onClick={handleLinkClick(item)}\n                            underlineStyle=\"none\"\n                        >\n                            {children}\n                        </Typography.LinkBL>\n                    </li>\n                );\n            })}\n        </ul>\n    );\n};\n"],"names":["items","selectedId","onItemClick","handleLinkClick","item","event","stopPropagation","length","_jsx","className","styles.mobileWrapper","children","map","index","options","weight","otherItemAttrs","__rest","testId","selected","id","styles.menuItem","Typography","LinkBL","styles.link","undefined","onClick","underlineStyle"],"mappings":"kKAeoB,EAChBA,QACAC,aACAC,kBAEA,MAAMC,EAAmBC,GACbC,IACJA,EAAMC,kBACNJ,EAAYG,EAAOD,EAAK,EAIhC,OAAKJ,aAAK,EAALA,EAAOO,QAGRC,MAAA,KAAA,CAAIC,UAAWC,EAAAA,cAAoBC,SAC9BX,EAAMY,KAAI,CAACR,EAAMS,KACd,MAAMF,SAAEA,EAAQG,QAAEA,EAAOC,OAAEA,GAA8BX,EAAnBY,EAAcC,EAAAA,OAAKb,EAAnD,CAAA,WAAA,UAAA,WACAc,EAAS,gBAAgBL,EAAQ,IACjCM,EAAWf,EAAKgB,KAAOnB,EAE7B,OACIO,EAAAA,IAAA,KAAA,CAAgBC,UAAWY,EAAAA,SAAeV,SACtCH,EAAAA,IAACc,aAAWC,sBACRd,UAAWe,EAAAA,KAAW,cACTN,GACTF,EACAF,EAAO,CACXC,OAAQI,EAAW,OAASJ,EAAM,eACpBI,EAAW,YAASM,EAClCC,QAASvB,EAAgBC,GACzBuB,eAAe,OAAMhB,SAEpBA,MAXAE,EAaJ,MAvBML,EAAAA,kBA0BlB"}

package/cjs/navbar/menu.styles.js

@@ -1,2 +1,2 @@
-"use strict";require("./menu.styles_gdpqc.css");exports.link="l1t9jy07",exports.menuItem="m6cy0t7",exports.mobileWrapper="m1lq4qov";
+"use strict";require("./menu.styles_zkjexa.css");exports.link="l1t9jy07",exports.menuItem="m6cy0t7",exports.mobileWrapper="m1lq4qov";
 //# sourceMappingURL=menu.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"menu.styles.js","sources":["../../../src/navbar/menu.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport { Border, Colour, Radius, Spacing } from \"../theme\";\n\nexport const mobileWrapper = css`\n    list-style: none;\n    display: flex;\n    flex-direction: column;\n\n    margin: 0;\n    padding: 0;\n\n    border-left: ${Border[\"width-040\"]} solid ${Colour[\"border-selected\"]};\n`;\n\nexport const menuItem = css`\n    width: 100%;\n    display: flex;\n`;\n\nexport const link = css`\n    width: 100%;\n    text-align: left;\n    color: ${Colour[\"text\"]};\n\n    margin: 0 ${Spacing[\"spacing-8\"]};\n\n    /* use border, as padding still shows an extra line after the ellipsis */\n    border: ${Border[\"solid\"]} transparent;\n    border-width: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-8\"]};\n    border-radius: ${Radius[\"md\"]};\n\n    ${lineClampCss(2)}\n    white-space: pre-wrap;\n\n    &:hover,\n    &:active,\n    &:focus {\n        background-color: ${Colour[\"bg-hover\"]};\n        color: ${Colour[\"text\"]};\n    }\n`;\n"],"names":[],"mappings":"mFAqBiB,4BALI,gCAXK"}
+{"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: 10px ${Spacing[\"spacing-16\"]} 10px ${Spacing[\"spacing-24\"]};\n    border-radius: ${Radius[\"md\"]};\n\n    ${lineClampCss(2)}\n    white-space: pre-wrap;\n\n    &:hover,\n    &:active,\n    &:focus {\n        background-color: ${Colour[\"bg-hover\"]};\n        color: ${Colour[\"text\"]};\n    }\n`;\n"],"names":[],"mappings":"oFAqBiB,4BALI,gCAXK"}

package/{navbar/menu.styles_gdpqc.css → cjs/navbar/menu.styles_zkjexa.css}

@@ -1,3 +1,3 @@
 @layer fds{.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);}}
+.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:10px var(--fds-spacing-16) 10px var(--fds-spacing-24);border-radius:var(--fds-radius-md);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap;}.l1t9jy07:hover,.l1t9jy07:active,.l1t9jy07:focus{background-color:var(--fds-colour-bg-hover);color:var(--fds-colour-text);}}

package/cjs/navbar/navbar-items.js

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

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

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

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

@@ -1,2 +1,2 @@
-"use strict";require("./navbar-items.styles_1b1zx.css");exports.chevronIcon="c160mxwv",exports.chevronIconDesktop="c1s8ur0k",exports.chevronIconSelected="c1euxgs0",exports.expandCollapseButton="ej7h5do",exports.link="l1o3p4yu",exports.linkButton="l1xfqf3s",exports.linkIconContainer="l1p9u80z",exports.linkIndicator="lnocj2s",exports.linkIndicatorSelected="l5qfat1",exports.linkItem="l18t6f3m",exports.linkItemHiddenBranding="lsn8o0d",exports.linkLabel="lsc0hr8",exports.linkSelected="lkwvsmx",exports.linkWeightBold="l1p7dxu8",exports.linkWeightRegular="l1kp5n19",exports.linkWeightSemibold="lqgrg2a",exports.mobileWrapper="mw9gug8",exports.subMenuExpanded="s178e7hk",exports.wrapper="w1ndf2sj",exports.wrapperAlignLeft="w177nfye";
+"use strict";require("./navbar-items.styles_1klnd8i.css");exports.chevronIcon="c160mxwv",exports.chevronIconDesktop="c1s8ur0k",exports.chevronIconSelected="c1euxgs0",exports.expandCollapseButton="ej7h5do",exports.link="l1o3p4yu",exports.linkButton="l1xfqf3s",exports.linkIconContainer="l1p9u80z",exports.linkIndicator="lnocj2s",exports.linkIndicatorSelected="l5qfat1",exports.linkItem="l18t6f3m",exports.linkItemHiddenBranding="lsn8o0d",exports.linkLabel="lsc0hr8",exports.linkSelected="lkwvsmx",exports.linkWeightBold="l1p7dxu8",exports.linkWeightRegular="l1kp5n19",exports.linkWeightSemibold="lqgrg2a",exports.mobileWrapper="mw9gug8",exports.subMenuExpanded="s178e7hk",exports.wrapper="w1ndf2sj",exports.wrapperAlignLeft="w177nfye";
 //# sourceMappingURL=navbar-items.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"navbar-items.styles.js","sources":["../../../src/navbar/navbar-items.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, ComponentToken, Font, MediaQuery } from \"../theme\";\n\n// =============================================================================\n// WRAPPER\n// =============================================================================\n\nexport const wrapper = css`\n    display: flex;\n    list-style: none;\n    position: relative;\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: none;\n    }\n`;\n\nexport const wrapperAlignLeft = css`\n    margin-right: auto;\n`;\n\nexport const mobileWrapper = css`\n    display: none;\n    list-style: none;\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n    }\n`;\n\n// =============================================================================\n// LINK ITEMS\n// =============================================================================\nexport const linkItem = css`\n    display: flex;\n    margin: 0 1rem;\n    &:first-child {\n        margin-left: 0;\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n        padding: 0.125rem 0;\n        width: 100%;\n        margin-left: 0rem;\n    }\n`;\n\nexport const linkItemHiddenBranding = css`\n    // negative margin to preserve touch target size for link\n    &:first-child {\n        margin-left: -0.5rem;\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        &:first-child {\n            margin-left: 0rem;\n        }\n    }\n`;\n\nexport const link = css`\n    display: flex;\n    position: relative;\n    align-items: center;\n    text-align: center;\n    color: ${ComponentToken.Navbar[\"link-colour-text\"]};\n    height: 100%;\n    gap: 0.5rem;\n\n    &:active,\n    &:hover,\n    &:focus,\n    &:focus-within {\n        color: ${ComponentToken.Navbar[\"link-colour-text-hover\"]};\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        width: 100%;\n        padding: 0.5rem 1rem;\n        text-align: left;\n    }\n`;\n\nexport const linkSelected = css`\n    &:active,\n    &:hover,\n    &:focus {\n        color: ${ComponentToken.Navbar[\"link-colour-text-selected-hover\"]};\n    }\n`;\n\nexport const linkWeightRegular = css`\n    ${Font[\"body-md-regular\"]}\n`;\n\nexport const linkWeightSemibold = css`\n    ${Font[\"body-md-semibold\"]}\n`;\n\nexport const linkWeightBold = css`\n    ${Font[\"body-md-bold\"]}\n`;\n\nexport const linkButton = css`\n    background: none;\n    border: 0;\n    padding: 0;\n    cursor: pointer;\n    text-align: left;\n    margin: 0;\n    box-shadow: none;\n    font: inherit;\n    color: inherit;\n    gap: 8px;\n`;\n\nexport const linkLabel = css`\n    flex: 1;\n\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 3;\n    white-space: pre-wrap;\n`;\n\nexport const linkIndicator = css`\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 0.25rem;\n    background-color: ${Colour[\"border-selected\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        left: 0;\n        right: unset;\n        top: 0;\n        bottom: 0;\n        height: 100%;\n        width: 0.25rem;\n    }\n`;\n\nexport const linkIndicatorSelected = css`\n    .${link}:active &,\n    .${link}:hover &,\n    .${link}:focus & {\n        background-color: ${Colour[\"border-selected-hover\"]};\n    }\n`;\n\nexport const linkIconContainer = css`\n    margin-right: -0.5rem;\n`;\n\nexport const expandCollapseButton = css`\n    padding: 0.5rem;\n    margin: auto 0.25rem auto 0;\n`;\n\nexport const chevronIcon = css`\n    height: 1.25rem;\n    width: 1.25rem;\n    color: ${Colour.icon};\n    transition: transform 300ms ease-in-out;\n    transform: rotate(180deg);\n\n    .${link}:active &,\n    .${link}:hover &,\n    .${link}:focus & {\n        color: ${Colour[\"icon-hover\"]};\n    }\n`;\n\nexport const chevronIconDesktop = css`\n    height: 1.125rem;\n    width: 1.125rem;\n`;\n\nexport const subMenuExpanded = css`\n    transform: rotate(0deg);\n`;\n\nexport const chevronIconSelected = css`\n    .${link}:active &,\n    .${link}:hover &,\n    .${link}:focus & {\n        color: ${Colour[\"icon-selected-hover\"]};\n    }\n`;\n"],"names":[],"mappings":"kGAqKwB,sCAcO,uCASC,wCA5BC,uBAhGhB,8BA2CM,qCAiDO,iCA1BJ,wCAkBQ,2BAhHb,0CAec,4BAqEb,+BAjCG,iCAgBE,qCARG,sCAIC,gCA7EL,kCAkKE,2BAhLR,oCAUS"}
+{"version":3,"file":"navbar-items.styles.js","sources":["../../../src/navbar/navbar-items.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, ComponentToken, Font, MediaQuery, Spacing } from \"../theme\";\n\n// =============================================================================\n// WRAPPER\n// =============================================================================\n\nexport const wrapper = css`\n    display: flex;\n    list-style: none;\n    position: relative;\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: none;\n    }\n`;\n\nexport const wrapperAlignLeft = css`\n    margin-right: auto;\n`;\n\nexport const mobileWrapper = css`\n    display: none;\n    list-style: none;\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n    }\n`;\n\n// =============================================================================\n// LINK ITEMS\n// =============================================================================\nexport const linkItem = css`\n    display: flex;\n    margin: 0 1rem;\n    &:first-child {\n        margin-left: 0;\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n        width: 100%;\n        margin-left: 0rem;\n    }\n`;\n\nexport const linkItemHiddenBranding = css`\n    // negative margin to preserve touch target size for link\n    &:first-child {\n        margin-left: -0.5rem;\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        &:first-child {\n            margin-left: 0rem;\n        }\n    }\n`;\n\nexport const link = css`\n    display: flex;\n    position: relative;\n    align-items: center;\n    text-align: center;\n    color: ${ComponentToken.Navbar[\"link-colour-text\"]};\n    height: 100%;\n    gap: ${Spacing[\"spacing-16\"]};\n\n    &:active,\n    &:hover,\n    &:focus,\n    &:focus-within {\n        color: ${ComponentToken.Navbar[\"link-colour-text-hover\"]};\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        width: 100%;\n        padding: 10px ${Spacing[\"spacing-24\"]};\n        text-align: left;\n    }\n`;\n\nexport const linkSelected = css`\n    &:active,\n    &:hover,\n    &:focus {\n        color: ${ComponentToken.Navbar[\"link-colour-text-selected-hover\"]};\n    }\n`;\n\nexport const linkWeightRegular = css`\n    ${Font[\"body-md-regular\"]}\n`;\n\nexport const linkWeightSemibold = css`\n    ${Font[\"body-md-semibold\"]}\n`;\n\nexport const linkWeightBold = css`\n    ${Font[\"body-md-bold\"]}\n`;\n\nexport const linkButton = css`\n    background: none;\n    border: 0;\n    padding: 0;\n    cursor: pointer;\n    text-align: left;\n    margin: 0;\n    box-shadow: none;\n    font: inherit;\n    color: inherit;\n    gap: 8px;\n`;\n\nexport const linkLabel = css`\n    flex: 1;\n\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 3;\n    white-space: pre-wrap;\n`;\n\nexport const linkIndicator = css`\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 0.25rem;\n    background-color: ${Colour[\"border-selected\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        left: 0;\n        right: unset;\n        top: 0;\n        bottom: 0;\n        height: 100%;\n        width: 0.25rem;\n    }\n`;\n\nexport const linkIndicatorSelected = css`\n    .${link}:active &,\n    .${link}:hover &,\n    .${link}:focus & {\n        background-color: ${Colour[\"border-selected-hover\"]};\n    }\n`;\n\nexport const linkIconContainer = css`\n    margin-right: -0.5rem;\n`;\n\nexport const expandCollapseButton = css`\n    padding: 0.5rem;\n    margin: auto 0;\n`;\n\nexport const chevronIcon = css`\n    height: 1.25rem;\n    width: 1.25rem;\n    color: ${Colour.icon};\n    transition: transform 300ms ease-in-out;\n    transform: rotate(180deg);\n\n    .${link}:active &,\n    .${link}:hover &,\n    .${link}:focus & {\n        color: ${Colour[\"icon-hover\"]};\n    }\n`;\n\nexport const chevronIconDesktop = css`\n    height: 1.125rem;\n    width: 1.125rem;\n`;\n\nexport const subMenuExpanded = css`\n    transform: rotate(0deg);\n`;\n\nexport const chevronIconSelected = css`\n    .${link}:active &,\n    .${link}:hover &,\n    .${link}:focus & {\n        color: ${Colour[\"icon-selected-hover\"]};\n    }\n`;\n"],"names":[],"mappings":"oGAoKwB,sCAcO,uCASC,wCA5BC,uBAhGhB,8BA2CM,qCAiDO,iCA1BJ,wCAkBQ,2BA/Gb,0CAcc,4BAqEb,+BAjCG,iCAgBE,qCARG,sCAIC,gCA5EL,kCAiKE,2BA/KR,oCAUS"}

package/{navbar/navbar-items.styles_1b1zx.css → cjs/navbar/navbar-items.styles_1klnd8i.css}

@@ -1,9 +1,9 @@
 @layer fds{.w1ndf2sj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;list-style:none;position:relative;}:where(body.fds-breakpoint-lg-max) .w1ndf2sj{display:none;}
 .w177nfye{margin-right:auto;}
 .mw9gug8{display:none;list-style:none;}:where(body.fds-breakpoint-lg-max) .mw9gug8{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow:hidden;}
-.l18t6f3m{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 1rem;}.l18t6f3m:first-child{margin-left:0;}:where(body.fds-breakpoint-lg-max) .l18t6f3m{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding:0.125rem 0;width:100%;margin-left:0rem;}
+.l18t6f3m{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 1rem;}.l18t6f3m:first-child{margin-left:0;}:where(body.fds-breakpoint-lg-max) .l18t6f3m{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;margin-left:0rem;}
 .lsn8o0d:first-child{margin-left:-0.5rem;}:where(body.fds-breakpoint-lg-max) .lsn8o0d:first-child{margin-left:0rem;}
-.l1o3p4yu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;color:var(--fds-navbar-link-colour-text);height:100%;gap:0.5rem;}.l1o3p4yu:active,.l1o3p4yu:hover,.l1o3p4yu:focus,.l1o3p4yu:focus-within{color:var(--fds-navbar-link-colour-text-hover);}:where(body.fds-breakpoint-lg-max) .l1o3p4yu{width:100%;padding:0.5rem 1rem;text-align:left;}
+.l1o3p4yu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;color:var(--fds-navbar-link-colour-text);height:100%;gap:var(--fds-spacing-16);}.l1o3p4yu:active,.l1o3p4yu:hover,.l1o3p4yu:focus,.l1o3p4yu:focus-within{color:var(--fds-navbar-link-colour-text-hover);}:where(body.fds-breakpoint-lg-max) .l1o3p4yu{width:100%;padding:10px var(--fds-spacing-24);text-align:left;}
 .lkwvsmx:active,.lkwvsmx:hover,.lkwvsmx:focus{color:var(--fds-navbar-link-colour-text-selected-hover);}
 .l1kp5n19{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
 .lqgrg2a{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
@@ -13,7 +13,7 @@
 .lnocj2s{position:absolute;bottom:0;left:0;right:0;height:0.25rem;background-color:var(--fds-colour-border-selected);}:where(body.fds-breakpoint-lg-max) .lnocj2s{left:0;right:unset;top:0;bottom:0;height:100%;width:0.25rem;}
 .l1o3p4yu:active .l5qfat1,.l1o3p4yu:hover .l5qfat1,.l1o3p4yu:focus .l5qfat1{background-color:var(--fds-colour-border-selected-hover);}
 .l1p9u80z{margin-right:-0.5rem;}
-.ej7h5do{padding:0.5rem;margin:auto 0.25rem auto 0;}
+.ej7h5do{padding:0.5rem;margin:auto 0;}
 .c160mxwv{height:1.25rem;width:1.25rem;color:var(--fds-colour-icon);-webkit-transition:-webkit-transform 300ms ease-in-out;transition:transform 300ms ease-in-out;-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}.l1o3p4yu:active .c160mxwv,.l1o3p4yu:hover .c160mxwv,.l1o3p4yu:focus .c160mxwv{color:var(--fds-colour-icon-hover);}
 .c1s8ur0k{height:1.125rem;width:1.125rem;}
 .s178e7hk{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}

package/cjs/theme/theme-provider/breakpoint.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../tokens/breakpoint.js"),i=require("../utils/css-variable.js");require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js"),require("react"),require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer"),require("./context.js"),require("../utils/use-media-query.js");const r="fds-breakpoint-";function n(n){const a=document.body,s=window.innerWidth;[...a.classList].forEach((e=>{e.startsWith(r)&&a.classList.remove(e)}));const t=function(r){const n=e=>{const n=i.parseCSSVariableValue(e,r);return n||(r!==document.documentElement?i.parseCSSVariableValue(e,document.documentElement):n)};return[{key:"xxs",min:n(e.Breakpoint["xxs-min"]),max:n(e.Breakpoint["xxs-max"])},{key:"xs",min:n(e.Breakpoint["xs-min"]),max:n(e.Breakpoint["xs-max"])},{key:"sm",min:n(e.Breakpoint["sm-min"]),max:n(e.Breakpoint["sm-max"])},{key:"md",min:n(e.Breakpoint["md-min"]),max:n(e.Breakpoint["md-max"])},{key:"lg",min:n(e.Breakpoint["lg-min"]),max:n(e.Breakpoint["lg-max"])},{key:"xl",min:n(e.Breakpoint["xl-min"]),max:n(e.Breakpoint["xl-max"])},{key:"xxl",min:n(e.Breakpoint["xxl-min"]),max:1/0}]}(n);t.forEach((e=>{const n=i.parsePxOrRemValue(e.min),t=e.max===1/0?1/0:i.parsePxOrRemValue(e.max),m=s>=n,o=t!==1/0&&s<=t;m&&(t===1/0||o)&&a.classList.add(`${r}${e.key}`),m&&a.classList.add(`${r}${e.key}-min`),o&&a.classList.add(`${r}${e.key}-max`)}))}exports.setupBreakpointListener=function(e){if(!globalThis.window)return;const i=()=>{n(e)};return i(),globalThis.window.addEventListener("resize",i),()=>{globalThis.window.removeEventListener("resize",i)}};
+"use strict";var e=require("../tokens/breakpoint.js"),i=require("../utils/css-variable.js");require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js"),require("react"),require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer"),require("./context.js"),require("../utils/use-media-query.js");const a="fds-breakpoint-";function n(n){const r=document.body;[...r.classList].forEach((e=>{e.startsWith(a)&&r.classList.remove(e)}));const t=function(a){const n=e=>{const n=i.parseCSSVariableValue(e,a);return n||(a!==document.documentElement?i.parseCSSVariableValue(e,document.documentElement):n)};return[{key:"xxs",min:n(e.Breakpoint["xxs-min"]),max:n(e.Breakpoint["xxs-max"])},{key:"xs",min:n(e.Breakpoint["xs-min"]),max:n(e.Breakpoint["xs-max"])},{key:"sm",min:n(e.Breakpoint["sm-min"]),max:n(e.Breakpoint["sm-max"])},{key:"md",min:n(e.Breakpoint["md-min"]),max:n(e.Breakpoint["md-max"])},{key:"lg",min:n(e.Breakpoint["lg-min"]),max:n(e.Breakpoint["lg-max"])},{key:"xl",min:n(e.Breakpoint["xl-min"]),max:n(e.Breakpoint["xl-max"])},{key:"xxl",min:n(e.Breakpoint["xxl-min"]),max:1/0}]}(n);t.forEach((e=>{const i=window.matchMedia(`(min-width: ${e.min})`).matches,n=e.max!==1/0&&window.matchMedia(`(max-width: ${e.max})`).matches;i&&(e.max===1/0||n)&&r.classList.add(`${a}${e.key}`),i&&r.classList.add(`${a}${e.key}-min`),n&&r.classList.add(`${a}${e.key}-max`)}))}exports.setupBreakpointListener=function(e){if(!globalThis.window||!globalThis.window.matchMedia)return;const i=()=>{n(e)};return i(),globalThis.window.addEventListener("resize",i),()=>{globalThis.window.removeEventListener("resize",i)}};
 //# sourceMappingURL=breakpoint.js.map

package/cjs/theme/theme-provider/breakpoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"breakpoint.js","sources":["../../../../src/theme/theme-provider/breakpoint.ts"],"sourcesContent":["import { Breakpoint } from \"../tokens/breakpoint\";\nimport type { CSSVariableString } from \"../types\";\nimport { parseCSSVariableValue, parsePxOrRemValue } from \"../utils\";\n\nfunction getBreakpointRanges(sourceElement: HTMLElement) {\n    const getBreakpointValue = (token: CSSVariableString) => {\n        const scopedValue = parseCSSVariableValue(token, sourceElement);\n        if (scopedValue) return scopedValue;\n\n        if (sourceElement !== document.documentElement) {\n            return parseCSSVariableValue(token, document.documentElement);\n        }\n\n        return scopedValue;\n    };\n\n    return [\n        {\n            key: \"xxs\",\n            min: getBreakpointValue(Breakpoint[\"xxs-min\"]),\n            max: getBreakpointValue(Breakpoint[\"xxs-max\"]),\n        },\n        {\n            key: \"xs\",\n            min: getBreakpointValue(Breakpoint[\"xs-min\"]),\n            max: getBreakpointValue(Breakpoint[\"xs-max\"]),\n        },\n        {\n            key: \"sm\",\n            min: getBreakpointValue(Breakpoint[\"sm-min\"]),\n            max: getBreakpointValue(Breakpoint[\"sm-max\"]),\n        },\n        {\n            key: \"md\",\n            min: getBreakpointValue(Breakpoint[\"md-min\"]),\n            max: getBreakpointValue(Breakpoint[\"md-max\"]),\n        },\n        {\n            key: \"lg\",\n            min: getBreakpointValue(Breakpoint[\"lg-min\"]),\n            max: getBreakpointValue(Breakpoint[\"lg-max\"]),\n        },\n        {\n            key: \"xl\",\n            min: getBreakpointValue(Breakpoint[\"xl-min\"]),\n            max: getBreakpointValue(Breakpoint[\"xl-max\"]),\n        },\n        {\n            key: \"xxl\",\n            min: getBreakpointValue(Breakpoint[\"xxl-min\"]),\n            max: Infinity,\n        },\n    ] as const;\n}\n\nconst BREAKPOINT_CLASS_PREFIX = \"fds-breakpoint-\";\n\nfunction applyBreakpointClasses(sourceElement: HTMLElement) {\n    const body = document.body;\n    const width = window.innerWidth;\n\n    [...body.classList].forEach((cls) => {\n        if (cls.startsWith(BREAKPOINT_CLASS_PREFIX)) {\n            body.classList.remove(cls);\n        }\n    });\n\n    const BREAKPOINT_RANGES = getBreakpointRanges(sourceElement);\n\n    BREAKPOINT_RANGES.forEach((range) => {\n        const minValue = parsePxOrRemValue(range.min);\n        const maxValue =\n            range.max === Infinity\n                ? Infinity\n                : parsePxOrRemValue(range.max as string);\n\n        const isMinMatched = width >= minValue;\n        const isMaxMatched = maxValue === Infinity ? false : width <= maxValue;\n        const isWithinRange =\n            isMinMatched && (maxValue === Infinity || isMaxMatched);\n\n        if (isWithinRange) {\n            body.classList.add(`${BREAKPOINT_CLASS_PREFIX}${range.key}`);\n        }\n\n        if (isMinMatched) {\n            body.classList.add(`${BREAKPOINT_CLASS_PREFIX}${range.key}-min`);\n        }\n\n        if (isMaxMatched) {\n            body.classList.add(`${BREAKPOINT_CLASS_PREFIX}${range.key}-max`);\n        }\n    });\n}\n\nexport function setupBreakpointListener(sourceElement: HTMLElement) {\n    if (!globalThis.window) return;\n\n    const handleBreakpointChange = () => {\n        applyBreakpointClasses(sourceElement);\n    };\n\n    handleBreakpointChange();\n    globalThis.window.addEventListener(\"resize\", handleBreakpointChange);\n\n    return () => {\n        globalThis.window.removeEventListener(\"resize\", handleBreakpointChange);\n    };\n}\n"],"names":["BREAKPOINT_CLASS_PREFIX","applyBreakpointClasses","sourceElement","body","document","width","window","innerWidth","classList","forEach","cls","startsWith","remove","BREAKPOINT_RANGES","getBreakpointValue","token","scopedValue","parseCSSVariableValue","documentElement","key","min","Breakpoint","max","Infinity","getBreakpointRanges","range","minValue","parsePxOrRemValue","maxValue","isMinMatched","isMaxMatched","add","globalThis","handleBreakpointChange","addEventListener","removeEventListener"],"mappings":"4XAuDA,MAAMA,EAA0B,kBAEhC,SAASC,EAAuBC,GAC5B,MAAMC,EAAOC,SAASD,KAChBE,EAAQC,OAAOC,WAErB,IAAIJ,EAAKK,WAAWC,SAASC,IACrBA,EAAIC,WAAWX,IACfG,EAAKK,UAAUI,OAAOF,EAC1B,IAGJ,MAAMG,EA/DV,SAA6BX,GACzB,MAAMY,EAAsBC,IACxB,MAAMC,EAAcC,EAAAA,sBAAsBF,EAAOb,GACjD,OAAIc,IAEAd,IAAkBE,SAASc,gBACpBD,wBAAsBF,EAAOX,SAASc,iBAG1CF,EAAW,EAGtB,MAAO,CACH,CACIG,IAAK,MACLC,IAAKN,EAAmBO,aAAW,YACnCC,IAAKR,EAAmBO,aAAW,aAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,aAAW,WACnCC,IAAKR,EAAmBO,aAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,aAAW,WACnCC,IAAKR,EAAmBO,aAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,aAAW,WACnCC,IAAKR,EAAmBO,aAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,aAAW,WACnCC,IAAKR,EAAmBO,aAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,aAAW,WACnCC,IAAKR,EAAmBO,aAAW,YAEvC,CACIF,IAAK,MACLC,IAAKN,EAAmBO,aAAW,YACnCC,IAAKC,KAGjB,CAc8BC,CAAoBtB,GAE9CW,EAAkBJ,SAASgB,IACvB,MAAMC,EAAWC,EAAAA,kBAAkBF,EAAML,KACnCQ,EACFH,EAAMH,MAAQC,IACRA,IACAI,EAAAA,kBAAkBF,EAAMH,KAE5BO,EAAexB,GAASqB,EACxBI,EAAeF,IAAaL,KAAmBlB,GAASuB,EAE1DC,IAAiBD,IAAaL,KAAYO,IAG1C3B,EAAKK,UAAUuB,IAAI,GAAG/B,IAA0ByB,EAAMN,OAGtDU,GACA1B,EAAKK,UAAUuB,IAAI,GAAG/B,IAA0ByB,EAAMN,WAGtDW,GACA3B,EAAKK,UAAUuB,IAAI,GAAG/B,IAA0ByB,EAAMN,UAC1D,GAER,iCAEM,SAAkCjB,GACpC,IAAK8B,WAAW1B,OAAQ,OAExB,MAAM2B,EAAyB,KAC3BhC,EAAuBC,EAAc,EAMzC,OAHA+B,IACAD,WAAW1B,OAAO4B,iBAAiB,SAAUD,GAEtC,KACHD,WAAW1B,OAAO6B,oBAAoB,SAAUF,EAAuB,CAE/E"}
+{"version":3,"file":"breakpoint.js","sources":["../../../../src/theme/theme-provider/breakpoint.ts"],"sourcesContent":["import { Breakpoint } from \"../tokens/breakpoint\";\nimport type { CSSVariableString } from \"../types\";\nimport { parseCSSVariableValue } from \"../utils\";\n\nfunction getBreakpointRanges(sourceElement: HTMLElement) {\n    const getBreakpointValue = (token: CSSVariableString) => {\n        const scopedValue = parseCSSVariableValue(token, sourceElement);\n        if (scopedValue) return scopedValue;\n\n        if (sourceElement !== document.documentElement) {\n            return parseCSSVariableValue(token, document.documentElement);\n        }\n\n        return scopedValue;\n    };\n\n    return [\n        {\n            key: \"xxs\",\n            min: getBreakpointValue(Breakpoint[\"xxs-min\"]),\n            max: getBreakpointValue(Breakpoint[\"xxs-max\"]),\n        },\n        {\n            key: \"xs\",\n            min: getBreakpointValue(Breakpoint[\"xs-min\"]),\n            max: getBreakpointValue(Breakpoint[\"xs-max\"]),\n        },\n        {\n            key: \"sm\",\n            min: getBreakpointValue(Breakpoint[\"sm-min\"]),\n            max: getBreakpointValue(Breakpoint[\"sm-max\"]),\n        },\n        {\n            key: \"md\",\n            min: getBreakpointValue(Breakpoint[\"md-min\"]),\n            max: getBreakpointValue(Breakpoint[\"md-max\"]),\n        },\n        {\n            key: \"lg\",\n            min: getBreakpointValue(Breakpoint[\"lg-min\"]),\n            max: getBreakpointValue(Breakpoint[\"lg-max\"]),\n        },\n        {\n            key: \"xl\",\n            min: getBreakpointValue(Breakpoint[\"xl-min\"]),\n            max: getBreakpointValue(Breakpoint[\"xl-max\"]),\n        },\n        {\n            key: \"xxl\",\n            min: getBreakpointValue(Breakpoint[\"xxl-min\"]),\n            max: Infinity,\n        },\n    ] as const;\n}\n\nconst BREAKPOINT_CLASS_PREFIX = \"fds-breakpoint-\";\n\nfunction applyBreakpointClasses(sourceElement: HTMLElement) {\n    const body = document.body;\n\n    [...body.classList].forEach((cls) => {\n        if (cls.startsWith(BREAKPOINT_CLASS_PREFIX)) {\n            body.classList.remove(cls);\n        }\n    });\n\n    const BREAKPOINT_RANGES = getBreakpointRanges(sourceElement);\n\n    BREAKPOINT_RANGES.forEach((range) => {\n        const isMinMatched = window.matchMedia(\n            `(min-width: ${range.min})`\n        ).matches;\n        const isMaxMatched =\n            range.max === Infinity\n                ? false\n                : window.matchMedia(`(max-width: ${range.max})`).matches;\n        const isWithinRange =\n            isMinMatched && (range.max === Infinity || isMaxMatched);\n\n        if (isWithinRange) {\n            body.classList.add(`${BREAKPOINT_CLASS_PREFIX}${range.key}`);\n        }\n\n        if (isMinMatched) {\n            body.classList.add(`${BREAKPOINT_CLASS_PREFIX}${range.key}-min`);\n        }\n\n        if (isMaxMatched) {\n            body.classList.add(`${BREAKPOINT_CLASS_PREFIX}${range.key}-max`);\n        }\n    });\n}\n\nexport function setupBreakpointListener(sourceElement: HTMLElement) {\n    if (!globalThis.window || !globalThis.window.matchMedia) return;\n\n    const handleBreakpointChange = () => {\n        applyBreakpointClasses(sourceElement);\n    };\n\n    handleBreakpointChange();\n    globalThis.window.addEventListener(\"resize\", handleBreakpointChange);\n\n    return () => {\n        globalThis.window.removeEventListener(\"resize\", handleBreakpointChange);\n    };\n}\n"],"names":["BREAKPOINT_CLASS_PREFIX","applyBreakpointClasses","sourceElement","body","document","classList","forEach","cls","startsWith","remove","BREAKPOINT_RANGES","getBreakpointValue","token","scopedValue","parseCSSVariableValue","documentElement","key","min","Breakpoint","max","Infinity","getBreakpointRanges","range","isMinMatched","window","matchMedia","matches","isMaxMatched","add","globalThis","handleBreakpointChange","addEventListener","removeEventListener"],"mappings":"4XAuDA,MAAMA,EAA0B,kBAEhC,SAASC,EAAuBC,GAC5B,MAAMC,EAAOC,SAASD,KAEtB,IAAIA,EAAKE,WAAWC,SAASC,IACrBA,EAAIC,WAAWR,IACfG,EAAKE,UAAUI,OAAOF,EAC1B,IAGJ,MAAMG,EA9DV,SAA6BR,GACzB,MAAMS,EAAsBC,IACxB,MAAMC,EAAcC,EAAAA,sBAAsBF,EAAOV,GACjD,OAAIW,IAEAX,IAAkBE,SAASW,gBACpBD,wBAAsBF,EAAOR,SAASW,iBAG1CF,EAAW,EAGtB,MAAO,CACH,CACIG,IAAK,MACLC,IAAKN,EAAmBO,aAAW,YACnCC,IAAKR,EAAmBO,aAAW,aAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,aAAW,WACnCC,IAAKR,EAAmBO,aAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,aAAW,WACnCC,IAAKR,EAAmBO,aAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,aAAW,WACnCC,IAAKR,EAAmBO,aAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,aAAW,WACnCC,IAAKR,EAAmBO,aAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,aAAW,WACnCC,IAAKR,EAAmBO,aAAW,YAEvC,CACIF,IAAK,MACLC,IAAKN,EAAmBO,aAAW,YACnCC,IAAKC,KAGjB,CAa8BC,CAAoBnB,GAE9CQ,EAAkBJ,SAASgB,IACvB,MAAMC,EAAeC,OAAOC,WACxB,eAAeH,EAAML,QACvBS,QACIC,EACFL,EAAMH,MAAQC,KAERI,OAAOC,WAAW,eAAeH,EAAMH,QAAQO,QAErDH,IAAiBD,EAAMH,MAAQC,KAAYO,IAG3CxB,EAAKE,UAAUuB,IAAI,GAAG5B,IAA0BsB,EAAMN,OAGtDO,GACApB,EAAKE,UAAUuB,IAAI,GAAG5B,IAA0BsB,EAAMN,WAGtDW,GACAxB,EAAKE,UAAUuB,IAAI,GAAG5B,IAA0BsB,EAAMN,UAC1D,GAER,iCAEM,SAAkCd,GACpC,IAAK2B,WAAWL,SAAWK,WAAWL,OAAOC,WAAY,OAEzD,MAAMK,EAAyB,KAC3B7B,EAAuBC,EAAc,EAMzC,OAHA4B,IACAD,WAAWL,OAAOO,iBAAiB,SAAUD,GAEtC,KACHD,WAAWL,OAAOQ,oBAAoB,SAAUF,EAAuB,CAE/E"}

package/cjs/theme/theme-provider/hooks.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react"),t=require("../utils/css-variable.js"),l=require("./context.js");exports.useInheritedThemeScope=n=>{const m=e.useContext(l.ThemeContext);return e.useMemo((()=>{var e;return n?{themeProps:{"data-fds-theme":null==m?void 0:m.theme,"data-fds-theme-mode":null==m?void 0:m.mode},themeStyle:t.getInheritedInlineCssVariables(null!==(e=null==m?void 0:m.themeElement)&&void 0!==e?e:null)}:{themeProps:{},themeStyle:{}}}),[n,null==m?void 0:m.mode,null==m?void 0:m.theme,null==m?void 0:m.themeElement])},exports.useTheme=()=>{const t=e.useContext(l.ThemeContext);return t||{theme:"lifesg",mode:"light",themeElement:null}};
+"use strict";var e=require("react"),t=require("../utils/css-variable.js"),l=require("./context.js");exports.useInheritedThemeScope=n=>{const o=e.useContext(l.ThemeContext);return e.useMemo((()=>{var e;return n?{themeProps:{"data-fds-theme":null==o?void 0:o.theme,"data-fds-theme-mode":null==o?void 0:o.mode,"data-fds-theme-font":null==o?void 0:o.fontPreset},themeStyle:t.getInheritedInlineCssVariables(null!==(e=null==o?void 0:o.themeElement)&&void 0!==e?e:null)}:{themeProps:{},themeStyle:{}}}),[n,null==o?void 0:o.fontPreset,null==o?void 0:o.mode,null==o?void 0:o.theme,null==o?void 0:o.themeElement])},exports.useTheme=()=>{const t=e.useContext(l.ThemeContext);return t||{theme:"lifesg",mode:"light",fontPreset:void 0,themeElement:null}};
 //# sourceMappingURL=hooks.js.map

package/cjs/theme/theme-provider/hooks.js.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.js","sources":["../../../../src/theme/theme-provider/hooks.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { useContext, useMemo } from \"react\";\n\nimport { getInheritedInlineCssVariables } from \"../utils/css-variable\";\nimport { ThemeContext } from \"./context\";\nimport type { ThemeContextValue } from \"./types\";\n\ntype InheritedThemeScope = {\n    themeProps: {\n        \"data-fds-theme\"?: string;\n        \"data-fds-theme-mode\"?: string;\n    };\n    themeStyle: CSSProperties;\n};\n\n// @catalog\n/**\n * Returns the theme context from the nearest `ThemeProvider`.\n *\n * @returns The active `ThemeContextValue`. When called outside a provider,\n * returns defaults: `theme: \"lifesg\"`, `mode: \"light\"`, `themeElement: null`.\n * @keywords context, hook, theme context\n */\nexport const useTheme = (): ThemeContextValue => {\n    const context = useContext(ThemeContext);\n\n    if (!context) {\n        return {\n            theme: \"lifesg\",\n            mode: \"light\",\n            themeElement: null,\n        };\n    }\n\n    return context;\n};\n\n// @catalog\n/**\n * Builds `data-fds-theme*` attributes and inline CSS variables for re-stamping\n * the current theme onto a detached DOM element (e.g. a portal or floating\n * overlay).\n *\n * @param enabled When `false`, returns empty objects — useful to conditionally\n * skip the attribute injection.\n * @returns `themeProps` (spread onto the root element) and `themeStyle` (inline\n * CSS variables to apply).\n * @keywords design tokens, hook, portal, theming\n */\nexport const useInheritedThemeScope = (\n    enabled: boolean\n): InheritedThemeScope => {\n    const themeContext = useContext(ThemeContext);\n\n    return useMemo(() => {\n        if (!enabled) {\n            return {\n                themeProps: {},\n                themeStyle: {},\n            };\n        }\n\n        return {\n            themeProps: {\n                \"data-fds-theme\": themeContext?.theme,\n                \"data-fds-theme-mode\": themeContext?.mode,\n            },\n            themeStyle: getInheritedInlineCssVariables(\n                themeContext?.themeElement ?? null\n            ),\n        };\n    }, [\n        enabled,\n        themeContext?.mode,\n        themeContext?.theme,\n        themeContext?.themeElement,\n    ]);\n};\n"],"names":["enabled","themeContext","useContext","ThemeContext","useMemo","themeProps","theme","mode","themeStyle","getInheritedInlineCssVariables","_a","themeElement","context"],"mappings":"mIAkDIA,IAEA,MAAMC,EAAeC,EAAAA,WAAWC,gBAEhC,OAAOC,EAAAA,SAAQ,WACX,OAAKJ,EAOE,CACHK,WAAY,CACR,iBAAkBJ,aAAY,EAAZA,EAAcK,MAChC,sBAAuBL,aAAY,EAAZA,EAAcM,MAEzCC,WAAYC,EAAAA,+BACkB,QAA1BC,EAAAT,aAAY,EAAZA,EAAcU,oBAAY,IAAAD,EAAAA,EAAI,OAZ3B,CACHL,WAAY,CAAA,EACZG,WAAY,CAAA,EAYnB,GACF,CACCR,EACAC,aAAY,EAAZA,EAAcM,KACdN,aAAY,EAAZA,EAAcK,MACdL,aAAY,EAAZA,EAAcU,cAChB,mBArDkB,KACpB,MAAMC,EAAUV,EAAAA,WAAWC,gBAE3B,OAAKS,GACM,CACHN,MAAO,SACPC,KAAM,QACNI,aAAc,KAIR"}
+{"version":3,"file":"hooks.js","sources":["../../../../src/theme/theme-provider/hooks.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { useContext, useMemo } from \"react\";\n\nimport { getInheritedInlineCssVariables } from \"../utils/css-variable\";\nimport { ThemeContext } from \"./context\";\nimport type { ThemeContextValue } from \"./types\";\n\ntype InheritedThemeScope = {\n    themeProps: {\n        \"data-fds-theme\"?: string;\n        \"data-fds-theme-mode\"?: string;\n        \"data-fds-theme-font\"?: string;\n    };\n    themeStyle: CSSProperties;\n};\n\n// @catalog\n/**\n * Returns the theme context from the nearest `ThemeProvider`.\n *\n * @returns The active `ThemeContextValue`. When called outside a provider,\n * returns defaults: `theme: \"lifesg\"`, `mode: \"light\"`, `themeElement: null`.\n * @keywords context, hook, theme context\n */\nexport const useTheme = (): ThemeContextValue => {\n    const context = useContext(ThemeContext);\n\n    if (!context) {\n        return {\n            theme: \"lifesg\",\n            mode: \"light\",\n            fontPreset: undefined,\n            themeElement: null,\n        };\n    }\n\n    return context;\n};\n\n// @catalog\n/**\n * Builds `data-fds-theme*` attributes and inline CSS variables for re-stamping\n * the current theme onto a detached DOM element (e.g. a portal or floating\n * overlay).\n *\n * @param enabled When `false`, returns empty objects — useful to conditionally\n * skip the attribute injection.\n * @returns `themeProps` (spread onto the root element) and `themeStyle` (inline\n * CSS variables to apply).\n * @keywords design tokens, hook, portal, theming\n */\nexport const useInheritedThemeScope = (\n    enabled: boolean\n): InheritedThemeScope => {\n    const themeContext = useContext(ThemeContext);\n\n    return useMemo(() => {\n        if (!enabled) {\n            return {\n                themeProps: {},\n                themeStyle: {},\n            };\n        }\n\n        return {\n            themeProps: {\n                \"data-fds-theme\": themeContext?.theme,\n                \"data-fds-theme-mode\": themeContext?.mode,\n                \"data-fds-theme-font\": themeContext?.fontPreset,\n            },\n            themeStyle: getInheritedInlineCssVariables(\n                themeContext?.themeElement ?? null\n            ),\n        };\n    }, [\n        enabled,\n        themeContext?.fontPreset,\n        themeContext?.mode,\n        themeContext?.theme,\n        themeContext?.themeElement,\n    ]);\n};\n"],"names":["enabled","themeContext","useContext","ThemeContext","useMemo","themeProps","theme","mode","fontPreset","themeStyle","getInheritedInlineCssVariables","_a","themeElement","context","undefined"],"mappings":"mIAoDIA,IAEA,MAAMC,EAAeC,EAAAA,WAAWC,gBAEhC,OAAOC,EAAAA,SAAQ,WACX,OAAKJ,EAOE,CACHK,WAAY,CACR,iBAAkBJ,aAAY,EAAZA,EAAcK,MAChC,sBAAuBL,aAAY,EAAZA,EAAcM,KACrC,sBAAuBN,aAAY,EAAZA,EAAcO,YAEzCC,WAAYC,EAAAA,+BACkB,QAA1BC,EAAAV,aAAY,EAAZA,EAAcW,oBAAY,IAAAD,EAAAA,EAAI,OAb3B,CACHN,WAAY,CAAA,EACZI,WAAY,CAAA,EAanB,GACF,CACCT,EACAC,aAAY,EAAZA,EAAcO,WACdP,aAAY,EAAZA,EAAcM,KACdN,aAAY,EAAZA,EAAcK,MACdL,aAAY,EAAZA,EAAcW,cAChB,mBAxDkB,KACpB,MAAMC,EAAUX,EAAAA,WAAWC,gBAE3B,OAAKU,GACM,CACHP,MAAO,SACPC,KAAM,QACNC,gBAAYM,EACZF,aAAc,KAIR"}

package/cjs/theme/theme-provider/index.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react");require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js");var t=require("../../util/merge-refs.js");require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer");var s=require("../../util/use-isomorphic-layout-effect.js"),i=require("./breakpoint.js"),u=require("./context.js"),o=require("./system-colour-mode.js");const a=r.forwardRef((({children:a,theme:l="lifesg",mode:n="auto",className:m,style:c},d)=>{const f="auto"!==n,[h,j]=r.useState(f?n:"light"),[q,p]=r.useState(null);s.useIsomorphicLayoutEffect((()=>{const e=null!=q?q:document.documentElement;return i.setupBreakpointListener(e)}),[q,l,h]),r.useEffect((()=>{if(!f)return o.listenToSystemColourMode(j);j(n)}),[f,n]);const v=r.useMemo((()=>({theme:l,mode:h,themeElement:q})),[l,h,q]);return e.jsx(u.ThemeContext.Provider,{value:v,children:e.jsx("div",{ref:t.mergeRefs(d,p),"data-fds-theme":l,"data-fds-theme-mode":h,className:m,style:c,children:a})})}));exports.ThemeProvider=a;
+"use strict";var e=require("react/jsx-runtime"),r=require("react");require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js");var t=require("../../util/merge-refs.js");require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer");var s=require("../../util/use-isomorphic-layout-effect.js"),u=require("./breakpoint.js"),i=require("./context.js"),o=require("./system-colour-mode.js");const n=r.forwardRef((({children:n,theme:a="lifesg",mode:l="auto",className:m,style:c,fontPreset:d},f)=>{const h="auto"!==l,[j,q]=r.useState(h?l:"light"),[p,x]=r.useState(null),v=!!r.useContext(i.ThemeContext);s.useIsomorphicLayoutEffect((()=>{if(v)return;const e=null!=p?p:document.documentElement;return u.setupBreakpointListener(e)}),[p,a,j,v]),r.useEffect((()=>{if(!h)return o.listenToSystemColourMode(q);q(l)}),[h,l]);const y=r.useMemo((()=>({theme:a,mode:j,fontPreset:d,themeElement:p})),[a,j,d,p]);return e.jsx(i.ThemeContext.Provider,{value:y,children:e.jsx("div",{ref:t.mergeRefs(f,x),"data-fds-theme":a,"data-fds-theme-font":d,"data-fds-theme-mode":j,className:m,style:c,children:n})})}));exports.ThemeProvider=n;
 //# sourceMappingURL=index.js.map

package/cjs/theme/theme-provider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/theme/theme-provider/index.tsx"],"sourcesContent":["import type { Ref } from \"react\";\nimport { forwardRef, useEffect, useMemo, useState } from \"react\";\n\nimport { mergeRefs, useIsomorphicLayoutEffect } from \"../../util\";\nimport type { ResolvedThemeMode } from \"../types\";\nimport { setupBreakpointListener } from \"./breakpoint\";\nimport { ThemeContext } from \"./context\";\nimport { listenToSystemColourMode } from \"./system-colour-mode\";\nimport type { ThemeProviderProps } from \"./types\";\n\nconst InnerThemeProvider = (\n    {\n        children,\n        theme = \"lifesg\",\n        mode = \"auto\",\n        className,\n        style,\n    }: ThemeProviderProps,\n    ref: Ref<HTMLDivElement>\n) => {\n    const isModeControlled = mode !== \"auto\";\n\n    const [computedMode, setComputedMode] = useState<ResolvedThemeMode>(\n        isModeControlled ? mode : \"light\"\n    );\n    const [themeElement, setThemeElement] = useState<HTMLDivElement | null>(\n        null\n    );\n\n    // Re-subscribe when the source node or token set changes:\n    // - `themeElement`: scoped breakpoint tokens may live on this element\n    // - `theme` / `themeMode`: breakpoint token values can differ across theme/mode\n    useIsomorphicLayoutEffect(() => {\n        const sourceElement = themeElement ?? document.documentElement;\n        const cleanup = setupBreakpointListener(sourceElement);\n        return cleanup;\n    }, [themeElement, theme, computedMode]);\n\n    useEffect(() => {\n        if (isModeControlled) {\n            setComputedMode(mode);\n            return;\n        }\n\n        return listenToSystemColourMode(setComputedMode);\n    }, [isModeControlled, mode]);\n\n    const contextValue = useMemo(\n        () => ({\n            theme,\n            mode: computedMode,\n            themeElement,\n        }),\n        [theme, computedMode, themeElement]\n    );\n\n    return (\n        <ThemeContext.Provider value={contextValue}>\n            <div\n                ref={mergeRefs(ref, setThemeElement)}\n                data-fds-theme={theme}\n                data-fds-theme-mode={computedMode}\n                className={className}\n                style={style}\n            >\n                {children}\n            </div>\n        </ThemeContext.Provider>\n    );\n};\n\n// @catalog\n/**\n * Establishes a themed scope for its subtree.\n *\n * Wrap a section of the tree in `ThemeProvider` to activate a design-token set\n * and colour mode. Components below it read tokens via CSS variables or the\n * `useTheme` hook. Providers can be nested to override a subtree's theme.\n * @keywords context, scope, theming\n */\nexport const ThemeProvider = forwardRef<HTMLDivElement, ThemeProviderProps>(\n    InnerThemeProvider\n);\n"],"names":["ThemeProvider","forwardRef","children","theme","mode","className","style","ref","isModeControlled","computedMode","setComputedMode","useState","themeElement","setThemeElement","useIsomorphicLayoutEffect","sourceElement","document","documentElement","setupBreakpointListener","useEffect","listenToSystemColourMode","contextValue","useMemo","_jsx","ThemeContext","Provider","value","mergeRefs"],"mappings":"qdAUA,MAsEaA,EAAgBC,EAAAA,YAtEF,EAEnBC,WACAC,QAAQ,SACRC,OAAO,OACPC,YACAC,SAEJC,KAEA,MAAMC,EAA4B,SAATJ,GAElBK,EAAcC,GAAmBC,EAAAA,SACpCH,EAAmBJ,EAAO,UAEvBQ,EAAcC,GAAmBF,EAAAA,SACpC,MAMJG,EAAAA,2BAA0B,KACtB,MAAMC,EAAgBH,QAAAA,EAAgBI,SAASC,gBAE/C,OADgBC,EAAAA,wBAAwBH,EAC1B,GACf,CAACH,EAAcT,EAAOM,IAEzBU,EAAAA,WAAU,KACN,IAAIX,EAKJ,OAAOY,EAAAA,yBAAyBV,GAJ5BA,EAAgBN,EAI4B,GACjD,CAACI,EAAkBJ,IAEtB,MAAMiB,EAAeC,EAAAA,SACjB,KAAA,CACInB,QACAC,KAAMK,EACNG,kBAEJ,CAACT,EAAOM,EAAcG,IAG1B,OACIW,MAACC,EAAAA,aAAaC,UAASC,MAAOL,EAAYnB,SACtCqB,EAAAA,WACIhB,IAAKoB,EAAAA,UAAUpB,EAAKM,GAAgB,iBACpBV,EAAK,sBACAM,EACrBJ,UAAWA,EACXC,MAAOA,EAAKJ,SAEXA,KAEe"}
+{"version":3,"file":"index.js","sources":["../../../../src/theme/theme-provider/index.tsx"],"sourcesContent":["import type { Ref } from \"react\";\nimport { forwardRef, useContext, useEffect, useMemo, useState } from \"react\";\n\nimport { mergeRefs, useIsomorphicLayoutEffect } from \"../../util\";\nimport type { ResolvedThemeMode } from \"../types\";\nimport { setupBreakpointListener } from \"./breakpoint\";\nimport { ThemeContext } from \"./context\";\nimport { listenToSystemColourMode } from \"./system-colour-mode\";\nimport type { ThemeProviderProps } from \"./types\";\n\nconst InnerThemeProvider = (\n    {\n        children,\n        theme = \"lifesg\",\n        mode = \"auto\",\n        className,\n        style,\n        fontPreset,\n    }: ThemeProviderProps,\n    ref: Ref<HTMLDivElement>\n) => {\n    const isModeControlled = mode !== \"auto\";\n\n    const [computedMode, setComputedMode] = useState<ResolvedThemeMode>(\n        isModeControlled ? mode : \"light\"\n    );\n    const [themeElement, setThemeElement] = useState<HTMLDivElement | null>(\n        null\n    );\n\n    const themeContext = useContext(ThemeContext);\n    const isNestedThemeProvider = !!themeContext;\n\n    // Re-subscribe when the source node or token set changes:\n    // - `themeElement`: scoped breakpoint tokens may live on this element\n    // - `theme` / `themeMode`: breakpoint token values can differ across theme/mode\n    useIsomorphicLayoutEffect(() => {\n        // Only set up the breakpoint listener once in the root theme provider\n        if (isNestedThemeProvider) return;\n\n        const sourceElement = themeElement ?? document.documentElement;\n        const cleanup = setupBreakpointListener(sourceElement);\n        return cleanup;\n    }, [themeElement, theme, computedMode, isNestedThemeProvider]);\n\n    useEffect(() => {\n        if (isModeControlled) {\n            setComputedMode(mode);\n            return;\n        }\n\n        return listenToSystemColourMode(setComputedMode);\n    }, [isModeControlled, mode]);\n\n    const contextValue = useMemo(\n        () => ({\n            theme,\n            mode: computedMode,\n            fontPreset,\n            themeElement,\n        }),\n        [theme, computedMode, fontPreset, themeElement]\n    );\n\n    return (\n        <ThemeContext.Provider value={contextValue}>\n            <div\n                ref={mergeRefs(ref, setThemeElement)}\n                data-fds-theme={theme}\n                data-fds-theme-font={fontPreset}\n                data-fds-theme-mode={computedMode}\n                className={className}\n                style={style}\n            >\n                {children}\n            </div>\n        </ThemeContext.Provider>\n    );\n};\n\n// @catalog\n/**\n * Establishes a themed scope for its subtree.\n *\n * Wrap a section of the tree in `ThemeProvider` to activate a design-token set\n * and colour mode. Components below it read tokens via CSS variables or the\n * `useTheme` hook. Providers can be nested to override a subtree's theme.\n * @keywords context, scope, theming\n */\nexport const ThemeProvider = forwardRef<HTMLDivElement, ThemeProviderProps>(\n    InnerThemeProvider\n);\n"],"names":["ThemeProvider","forwardRef","children","theme","mode","className","style","fontPreset","ref","isModeControlled","computedMode","setComputedMode","useState","themeElement","setThemeElement","isNestedThemeProvider","useContext","ThemeContext","useIsomorphicLayoutEffect","sourceElement","document","documentElement","setupBreakpointListener","useEffect","listenToSystemColourMode","contextValue","useMemo","_jsx","Provider","value","mergeRefs"],"mappings":"qdAUA,MA+EaA,EAAgBC,EAAAA,YA/EF,EAEnBC,WACAC,QAAQ,SACRC,OAAO,OACPC,YACAC,QACAC,cAEJC,KAEA,MAAMC,EAA4B,SAATL,GAElBM,EAAcC,GAAmBC,EAAAA,SACpCH,EAAmBL,EAAO,UAEvBS,EAAcC,GAAmBF,EAAAA,SACpC,MAIEG,IADeC,EAAAA,WAAWC,gBAMhCC,EAAAA,2BAA0B,KAEtB,GAAIH,EAAuB,OAE3B,MAAMI,EAAgBN,QAAAA,EAAgBO,SAASC,gBAE/C,OADgBC,EAAAA,wBAAwBH,EAC1B,GACf,CAACN,EAAcV,EAAOO,EAAcK,IAEvCQ,EAAAA,WAAU,KACN,IAAId,EAKJ,OAAOe,EAAAA,yBAAyBb,GAJ5BA,EAAgBP,EAI4B,GACjD,CAACK,EAAkBL,IAEtB,MAAMqB,EAAeC,EAAAA,SACjB,KAAA,CACIvB,QACAC,KAAMM,EACNH,aACAM,kBAEJ,CAACV,EAAOO,EAAcH,EAAYM,IAGtC,OACIc,EAAAA,IAACV,EAAAA,aAAaW,UAASC,MAAOJ,EAAYvB,SACtCyB,EAAAA,WACInB,IAAKsB,EAAAA,UAAUtB,EAAKM,GAAgB,iBACpBX,wBACKI,EAAU,sBACVG,EACrBL,UAAWA,EACXC,MAAOA,EAAKJ,SAEXA,KAEe"}

package/cjs/theme/types.js

@@ -1,2 +1,2 @@
-"use strict";exports.THEME_TYPES=["a11y-playground","bookingsg","careercompass","ccube","imda","lifesg","mylegacy","oneservice","pa","rbs","sgw-digital-lobby","smgs","spf","supportgowhere","tote-board"];
+"use strict";exports.THEME_TYPES=["a11y-playground","bookingsg","careercompass","ccube","imda","lifesg","mylegacy","oneservice","pa","rbs","sgw-digital-lobby","smgs","spf","supportgowhere","tote-board","vica","websg","wise","wogaa"];
 //# sourceMappingURL=types.js.map