@lifesg/react-design-system 4.0.0-alpha.1 → 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 { useEffect } from \"react\";\n\nimport { Overlay } from \"../overlay/overlay\";\nimport { useViewport } from \"../shared/hooks\";\nimport { ModalContext } from \"./modal-context\";\nimport { Container, ModalContainer, ScrollContainer } from \"./modal-v2.styles\";\nimport type { ModalV2Props } from \"./types\";\n\nexport const ModalV2 = ({\n    id,\n    show,\n    onClose,\n    animationFrom = \"bottom\",\n    children,\n    enableOverlayClick = true,\n    rootComponentId,\n    zIndex,\n    onOverlayClick,\n    dismissKeyboardOnShow = true,\n    \"data-testid\": testId = \"modal\",\n    ...otherProps\n}: ModalV2Props): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const { verticalHeight, offsetTop } = useViewport();\n\n    // =========================================================================\n    // FLOATING UI CONFIG\n    // =========================================================================\n    const { refs, context } = useFloating({\n        open: show,\n        onOpenChange: (isOpen) => {\n            if (!isOpen) {\n                onClose?.();\n            }\n        },\n    });\n    const { isMounted, status } = useTransitionStatus(context, {\n        duration: 300,\n    });\n    const dismiss = useDismiss(context, {\n        /* handled by overlayclick */\n        outsidePress: false,\n        enabled: !!onClose,\n    });\n    const { getFloatingProps } = useInteractions([dismiss]);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (show && dismissKeyboardOnShow) {\n            // dismiss software keyboard to put modal in fullscreen\n            (document.activeElement as HTMLElement)?.blur?.();\n        }\n    }, [dismissKeyboardOnShow, show]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <Overlay\n            data-testid={`${testId}-overlay`}\n            show={isMounted}\n            enableOverlayClick={enableOverlayClick}\n            onOverlayClick={onOverlayClick}\n            id={id}\n            rootId={rootComponentId}\n            zIndex={zIndex}\n        >\n            <Container\n                $show={isMounted}\n                $animationFrom={animationFrom}\n                data-testid={testId}\n                $verticalHeight={verticalHeight}\n                $offsetTop={offsetTop}\n                {...otherProps}\n                data-status={status}\n            >\n                <ModalContext.Provider value={{ onClose }}>\n                    {isMounted && (\n                        <FloatingFocusManager\n                            context={context}\n                            initialFocus={refs.floating}\n                        >\n                            <ScrollContainer>\n                                <ModalContainer\n                                    ref={refs.setFloating}\n                                    {...getFloatingProps()}\n                                    aria-modal\n                                    role=\"dialog\"\n                                >\n                                    {children}\n                                </ModalContainer>\n                            </ScrollContainer>\n                        </FloatingFocusManager>\n                    )}\n                </ModalContext.Provider>\n            </Container>\n        </Overlay>\n    );\n};\n"],"names":["_a","id","show","onClose","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","testId","otherProps","__rest","verticalHeight","offsetTop","useViewport","refs","context","useFloating","open","onOpenChange","isOpen","isMounted","status","useTransitionStatus","duration","dismiss","useDismiss","outsidePress","enabled","getFloatingProps","useInteractions","useEffect","_b","document","activeElement","blur","_jsx","Overlay","rootId","Container","Object","assign","$show","$animationFrom","$verticalHeight","$offsetTop","ModalContext","Provider","value","FloatingFocusManager","initialFocus","floating","ScrollContainer","ModalContainer","ref","setFloating","role"],"mappings":"uSAewBA,IAAA,IAAAC,GACpBA,EAAEC,KACFA,EAAIC,QACJA,EAAOC,cACPA,EAAgB,SAAQC,SACxBA,EAAQC,mBACRA,GAAqB,EAAIC,gBACzBA,EAAeC,OACfA,EAAMC,eACNA,EAAcC,sBACdA,GAAwB,EACxB,cAAeC,EAAS,SAAOX,EAC5BY,EAAUC,EAAAA,OAAAb,EAZO,2JAiBpB,MAAMc,eAAEA,EAAcC,UAAEA,GAAcC,iBAKhCC,KAAEA,EAAIC,QAAEA,GAAYC,cAAY,CAClCC,KAAMlB,EACNmB,aAAeC,IACNA,GACDnB,SAAAA,GACJ,KAGFoB,UAAEA,EAASC,OAAEA,GAAWC,EAAAA,oBAAoBP,EAAS,CACvDQ,SAAU,MAERC,EAAUC,EAAAA,WAAWV,EAAS,CAEhCW,cAAc,EACdC,UAAW3B,KAET4B,iBAAEA,GAAqBC,kBAAgB,CAACL,IAe9C,OAVAM,EAAAA,WAAU,aACF/B,GAAQQ,YAERwB,EAAuC,UAAtCC,SAASC,qBAA6B,IAAApC,OAAA,EAAAA,EAAEqC,6BAC7C,GACD,CAAC3B,EAAuBR,IAMvBoC,EAAAA,IAACC,EAAAA,QAAO,CAAA,cACS,GAAG5B,YAChBT,KAAMqB,EACNjB,mBAAoBA,EACpBG,eAAgBA,EAChBR,GAAIA,EACJuC,OAAQjC,EACRC,OAAQA,WAER8B,EAAAA,IAACG,EAAAA,UAASC,OAAAC,OAAA,CAAAC,MACCrB,EAASsB,eACAzC,gBACHO,EAAMmC,gBACFhC,EAAciC,WACnBhC,GACRH,EAAU,CAAA,cACDY,EAAMnB,SAEnBiC,MAACU,EAAAA,aAAaC,SAAQ,CAACC,MAAO,CAAE/C,WAASE,SACpCkB,GACGe,EAAAA,IAACa,EAAAA,sBACGjC,QAASA,EACTkC,aAAcnC,EAAKoC,SAAQhD,SAE3BiC,EAAAA,IAACgB,kBAAe,CAAAjD,SACZiC,EAAAA,IAACiB,EAAAA,eAAcb,OAAAC,OAAA,CACXa,IAAKvC,EAAKwC,aACN1B,IAAkB,CAAA,cAAA,EAEtB2B,KAAK,SAAQrD,SAEZA,eAOnB"}
+{"version":3,"file":"modal-v2.js","sources":["../../../src/modal-v2/modal-v2.tsx"],"sourcesContent":["import {\n    FloatingFocusManager,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useTransitionStatus,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { 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/modal-v2.styles.js

@@ -1,50 +1,2 @@
-"use strict";var t=require("styled-components"),e=require("../v3_theme/index.js");function i(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var o=i(t);const n=o.default.div`
-    position: relative;
-    width: 100%;
-    height: 100%;
-
-    overflow: auto;
-
-    ${e.V3_MediaQuery.MaxWidth.sm} {
-        ${e=>t.css`
-                height: calc(
-                    ${e.$verticalHeight?`${e.$verticalHeight}px`:"1vh"} * 100
-                );
-            `}
-
-        top: ${t=>t.$offsetTop||0}px;
-    }
-
-    ${i=>t.css`
-        &[data-status="initial"] {
-            opacity: 0;
-            ${i.$animationFrom}: -3%;
-        }
-
-        &[data-status="open"] {
-            opacity: 1;
-            ${i.$animationFrom}: 0;
-            transition: all ${e.V3_Motion["duration-250"]}
-                ${e.V3_Motion["ease-entrance"]};
-            transition-delay: ${e.V3_Motion["duration-150"]};
-        }
-
-        &[data-status="close"] {
-            opacity: 0;
-            ${i.$animationFrom}: -3%;
-            transition: all ${e.V3_Motion["duration-250"]}
-                ${e.V3_Motion["ease-exit"]};
-        }
-    `}
-`,a=o.default.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 100%;
-    pointer-events: none;
-`,r=o.default.div`
-    pointer-events: auto;
-    width: 100%;
-    outline: none;
-`;exports.Container=n,exports.ModalContainer=r,exports.ScrollContainer=a;
+"use strict";require("./modal-v2.styles_a8gv5i.css");exports.container="c1jrmyjd",exports.modalContainer="mn5ir3",exports.scrollContainer="s1xsiaxz",exports.tokens={container:{verticalHeight:"--fds-internal-modalV2-container-verticalHeight"}};
 //# sourceMappingURL=modal-v2.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"modal-v2.styles.js","sources":["../../../src/modal-v2/modal-v2.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { V3_MediaQuery, V3_Motion } from \"../v3_theme\";\nimport type { ModalAnimationDirection } from \"./types\";\n\ninterface Props {\n    $show: boolean;\n    $animationFrom?: ModalAnimationDirection;\n    $verticalHeight?: number;\n    $offsetTop?: number;\n}\n\nexport const Container = styled.div<Props>`\n    position: relative;\n    width: 100%;\n    height: 100%;\n\n    overflow: auto;\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        ${(props) => {\n            return css`\n                height: calc(\n                    ${props.$verticalHeight\n                            ? `${props.$verticalHeight}px`\n                            : \"1vh\"} * 100\n                );\n            `;\n        }}\n\n        top: ${(props) => props.$offsetTop || 0}px;\n    }\n\n    ${(props) => css`\n        &[data-status=\"initial\"] {\n            opacity: 0;\n            ${props.$animationFrom}: -3%;\n        }\n\n        &[data-status=\"open\"] {\n            opacity: 1;\n            ${props.$animationFrom}: 0;\n            transition: all ${V3_Motion[\"duration-250\"]}\n                ${V3_Motion[\"ease-entrance\"]};\n            transition-delay: ${V3_Motion[\"duration-150\"]};\n        }\n\n        &[data-status=\"close\"] {\n            opacity: 0;\n            ${props.$animationFrom}: -3%;\n            transition: all ${V3_Motion[\"duration-250\"]}\n                ${V3_Motion[\"ease-exit\"]};\n        }\n    `}\n`;\n\nexport const ScrollContainer = styled.div`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 100%;\n    pointer-events: none;\n`;\n\nexport const ModalContainer = styled.div`\n    pointer-events: auto;\n    width: 100%;\n    outline: none;\n`;\n"],"names":["Container","styled","div","V3_MediaQuery","MaxWidth","sm","props","css","$verticalHeight","$offsetTop","$animationFrom","V3_Motion","ScrollContainer","ModalContainer"],"mappings":"qKAYO,MAAMA,EAAYC,EAAAA,QAAOC,GAAU;;;;;;;MAOpCC,EAAAA,cAAcC,SAASC;UAClBC,GACQC,KAAG;;sBAEAD,EAAME,gBACE,GAAGF,EAAME,oBACT;;;;eAKdF,GAAUA,EAAMG,YAAc;;;MAGvCH,GAAUC,KAAG;;;cAGND,EAAMI;;;;;cAKNJ,EAAMI;8BACUC,EAAAA,UAAU;kBACtBA,EAAAA,UAAU;gCACIA,EAAAA,UAAU;;;;;cAK5BL,EAAMI;8BACUC,EAAAA,UAAU;kBACtBA,EAAAA,UAAU;;;EAKfC,EAAkBX,EAAAA,QAAOC,GAAG;;;;;;EAQ5BW,EAAiBZ,EAAAA,QAAOC,GAAG;;;;"}
+{"version":3,"file":"modal-v2.styles.js","sources":["../../../src/modal-v2/modal-v2.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { MediaQuery, Motion } from \"../theme\";\n\nconst CLOSED_POSITION_OFFSET = \"-3%\";\nconst IS_INITIAL_OR_CLOSE =\n    ':is([data-status=\"initial\"], [data-status=\"close\"])';\n\nexport const tokens = {\n    container: {\n        verticalHeight: \"--fds-internal-modalV2-container-verticalHeight\",\n    },\n} as const;\n\nexport const container = css`\n    position: relative;\n    width: 100%;\n    height: 100%;\n\n    overflow: auto;\n\n    ${tokens.container.verticalHeight}: initial;\n\n    ${MediaQuery.MaxWidth.sm} {\n        height: calc(var(${tokens.container.verticalHeight}, 1vh) * 100);\n    }\n\n    @supports (height: 100dvh) {\n        height: 100dvh;\n    }\n\n    &[data-status=\"initial\"] {\n        opacity: 0;\n    }\n\n    &[data-status=\"open\"] {\n        opacity: 1;\n        transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-entrance\"]};\n        transition-delay: ${Motion[\"duration-150\"]};\n    }\n\n    &[data-status=\"close\"] {\n        opacity: 0;\n        transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-exit\"]};\n    }\n\n    &[data-animation-from=\"top\"]${IS_INITIAL_OR_CLOSE} {\n        top: ${CLOSED_POSITION_OFFSET};\n    }\n\n    &[data-animation-from=\"top\"][data-status=\"open\"] {\n        top: 0;\n    }\n\n    &[data-animation-from=\"bottom\"]${IS_INITIAL_OR_CLOSE} {\n        bottom: ${CLOSED_POSITION_OFFSET};\n    }\n\n    &[data-animation-from=\"bottom\"][data-status=\"open\"] {\n        bottom: 0;\n    }\n\n    &[data-animation-from=\"left\"]${IS_INITIAL_OR_CLOSE} {\n        left: ${CLOSED_POSITION_OFFSET};\n    }\n\n    &[data-animation-from=\"left\"][data-status=\"open\"] {\n        left: 0;\n    }\n\n    &[data-animation-from=\"right\"]${IS_INITIAL_OR_CLOSE} {\n        right: ${CLOSED_POSITION_OFFSET};\n    }\n\n    &[data-animation-from=\"right\"][data-status=\"open\"] {\n        right: 0;\n    }\n`;\n\nexport const scrollContainer = css`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 100%;\n    pointer-events: none;\n`;\n\nexport const modalContainer = css`\n    pointer-events: auto;\n    width: 100%;\n    outline: none;\n`;\n"],"names":["container","verticalHeight"],"mappings":"+FAcsB,kCAyEK,iCARC,0BAvEN,CAClBA,UAAW,CACPC,eAAgB"}

package/cjs/modal-v2/modal-v2.styles_a8gv5i.css

@@ -0,0 +1,3 @@
+@layer fds{.c1jrmyjd{position:relative;width:100%;height:100%;overflow:auto;--fds-internal-modalV2-container-verticalHeight:initial;}:where(body.fds-breakpoint-sm-max) .c1jrmyjd{height:calc(var(--fds-internal-modalV2-container-verticalHeight, 1vh) * 100);}@supports (height: 100dvh){.c1jrmyjd{height:100dvh;}}.c1jrmyjd[data-status="initial"]{opacity:0;}.c1jrmyjd[data-status="open"]{opacity:1;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-entrance);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-entrance);transition-delay:var(--fds-motion-duration-150);}.c1jrmyjd[data-status="close"]{opacity:0;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-exit);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-exit);}.c1jrmyjd[data-animation-from="top"]:is([data-status="initial"], [data-status="close"]){top:-3%;}.c1jrmyjd[data-animation-from="top"][data-status="open"]{top:0;}.c1jrmyjd[data-animation-from="bottom"]:is([data-status="initial"], [data-status="close"]){bottom:-3%;}.c1jrmyjd[data-animation-from="bottom"][data-status="open"]{bottom:0;}.c1jrmyjd[data-animation-from="left"]:is([data-status="initial"], [data-status="close"]){left:-3%;}.c1jrmyjd[data-animation-from="left"][data-status="open"]{left:0;}.c1jrmyjd[data-animation-from="right"]:is([data-status="initial"], [data-status="close"]){right:-3%;}.c1jrmyjd[data-animation-from="right"][data-status="open"]{right:0;}
+.s1xsiaxz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:100%;pointer-events:none;}
+.mn5ir3{pointer-events:auto;width:100%;outline:none;}}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("react"),s=require("styled-components"),o=require("./close-button.js"),a=require("./content.js"),i=require("./footer.js"),d=require("./slot-styles.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=n(r);const u=r=>{var{id:n,"data-testid":u="modal-card",children:c}=r,p=e.__rest(r,["id","data-testid","children"]);const j=e=>l.default.Children.toArray(c).find((t=>((e,t)=>s.isStyledComponent(e.type)?e.type.target===t:e.type===t)(t,e))),y=j(o.CloseButton),C=j(a.Content),q=j(i.Footer),f=!!y;return t.jsxs(d.ModalCard,Object.assign({id:n,"data-testid":u},p,{onClick:e=>{e.stopPropagation()},children:[t.jsxs(d.SlotSpacer,{$hasCloseButton:f,children:[C,q]}),f&&y]}))};u.displayName="ModalV2.Card",exports.Card=u;
+"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 React from \"react\";\nimport { isStyledComponent } from \"styled-components\";\n\nimport type { ModalCardProps } from \"../types\";\nimport { CloseButton } from \"./close-button\";\nimport { Content } from \"./content\";\nimport { Footer } from \"./footer\";\nimport { ModalCard, SlotSpacer } from \"./slot-styles\";\n\nexport const Card = ({\n    id,\n    \"data-testid\": testId = \"modal-card\",\n    children,\n    ...otherProps\n}: ModalCardProps) => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\n    };\n\n    // =========================================================================\n    // HELPERS\n    // =========================================================================\n    const isComponentType = (child: React.ReactPortal, type: any) =>\n        isStyledComponent(child.type)\n            ? (child.type as unknown as { target: any }).target === type\n            : child.type === type;\n\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\n    const hasCloseButton = !!CloseButtonSlot;\n\n    return (\n        <ModalCard\n            id={id}\n            data-testid={testId}\n            {...otherProps}\n            onClick={handleOnClick}\n        >\n            <SlotSpacer $hasCloseButton={hasCloseButton}>\n                {ContentSlot}\n                {FooterSlot}\n            </SlotSpacer>\n            {hasCloseButton && CloseButtonSlot}\n        </ModalCard>\n    );\n};\n\nCard.displayName = \"ModalV2.Card\";\n"],"names":["Card","_a","id","testId","children","otherProps","__rest","findComponentOfType","type","React","Children","toArray","find","child","isStyledComponent","target","isComponentType","CloseButtonSlot","CloseButton","ContentSlot","Content","FooterSlot","Footer","hasCloseButton","_jsxs","ModalCard","Object","assign","onClick","event","stopPropagation","SlotSpacer","$hasCloseButton","displayName"],"mappings":"2UASO,MAAMA,EAAQC,IAAA,IAAAC,GACjBA,EACA,cAAeC,EAAS,aAAYC,SACpCA,GAAQH,EACLI,EAAUC,EAAAA,OAAAL,EAJI,iCASjB,MAYMM,EAAuBC,GAClBC,UAAMC,SAASC,QAAQP,GAAUQ,MAAMC,GAN1B,EAACA,EAA0BL,IAC/CM,EAAAA,kBAAkBD,EAAML,MACjBK,EAAML,KAAoCO,SAAWP,EACtDK,EAAML,OAASA,EAIjBQ,CAAgBH,EAA4BL,KAO9CS,EAAkBV,EAAoBW,eACtCC,EAAcZ,EAAoBa,WAClCC,EAAad,EAAoBe,UAEjCC,IAAmBN,EAEzB,OACIO,EAAAA,KAACC,EAAAA,UAASC,OAAAC,OAAA,CACNzB,GAAIA,EAAE,cACOC,GACTE,EAAU,CACduB,QAhCeC,IACnBA,EAAMC,iBAAiB,EA+BG1B,SAAA,CAEtBoB,EAAAA,KAACO,EAAAA,WAAU,CAAAC,gBAAkBT,EAAcnB,SAAA,CACtCe,EACAE,KAEJE,GAAkBN,KACX,EAIpBjB,EAAKiC,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/close-button.js

@@ -1,2 +1,2 @@
-"use strict";var t=require("../../_virtual/_tslib.js"),e=require("react/jsx-runtime"),s=require("@lifesg/react-icons/cross"),o=require("react"),r=require("../modal-context.js"),i=require("./slot-styles.js");const a=a=>{var{"data-testid":l="modal-close-button"}=a,n=t.__rest(a,["data-testid"]);const{onClose:c}=o.useContext(r.ModalContext);return e.jsx(i.CloseButtonContainer,Object.assign({"data-testid":l},n,{children:e.jsx(i.StyledClickableIcon,{onClick:c,"data-testid":"close-button",focusHighlight:!1,focusOutline:"browser","aria-label":"Close button",children:e.jsx(s.CrossIcon,{"aria-hidden":!0})})}))};a.displayName="ModalV2.CloseButton",exports.CloseButton=a;
+"use strict";var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),s=require("@lifesg/react-icons/cross"),a=require("clsx"),l=require("react"),o=require("../../shared/clickable-icon/clickable-icon.js"),r=require("../modal-context.js"),i=require("./slot-styles.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=c(a);const u=a=>{var{"data-testid":c="modal-close-button",className:u}=a,d=e.__rest(a,["data-testid","className"]);const{onClose:b}=l.useContext(r.ModalContext);return t.jsx("div",Object.assign({"data-testid":c},d,{className:n.default(i.closeButtonContainer,u),children:t.jsx(o.ClickableIcon,{onClick:b,"data-testid":"close-button",focusHighlight:!1,focusOutline:"browser","aria-label":"Close button",className:i.styledClickableIcon,children:t.jsx(s.CrossIcon,{"aria-hidden":!0})})}))};u.displayName="ModalV2.CloseButton",exports.CloseButton=u;
 //# sourceMappingURL=close-button.js.map

package/cjs/modal-v2/slots/close-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"close-button.js","sources":["../../../../src/modal-v2/slots/close-button.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport { useContext } from \"react\";\n\nimport { ModalContext } from \"../modal-context\";\nimport type { ModalCloseButtonProps } from \"../types\";\nimport { CloseButtonContainer, StyledClickableIcon } from \"./slot-styles\";\n\nexport const CloseButton = ({\n    \"data-testid\": testId = \"modal-close-button\",\n    ...otherProps\n}: ModalCloseButtonProps) => {\n    const { onClose } = useContext(ModalContext);\n\n    return (\n        <CloseButtonContainer data-testid={testId} {...otherProps}>\n            <StyledClickableIcon\n                onClick={onClose}\n                data-testid=\"close-button\"\n                focusHighlight={false}\n                focusOutline=\"browser\"\n                aria-label=\"Close button\"\n            >\n                <CrossIcon aria-hidden />\n            </StyledClickableIcon>\n        </CloseButtonContainer>\n    );\n};\n\nCloseButton.displayName = \"ModalV2.CloseButton\";\n"],"names":["CloseButton","_a","testId","otherProps","__rest","onClose","useContext","ModalContext","_jsx","CloseButtonContainer","Object","assign","children","StyledClickableIcon","onClick","focusHighlight","focusOutline","CrossIcon","displayName"],"mappings":"+MAOO,MAAMA,EAAeC,QACxB,cAAeC,EAAS,wBACrBC,EAAUC,SAAAH,EAFW,CAAA,gBAIxB,MAAMI,QAAEA,GAAYC,EAAAA,WAAWC,gBAE/B,OACIC,EAAAA,IAACC,EAAAA,qBAAoBC,OAAAC,OAAA,CAAA,cAAcT,GAAYC,EAAU,CAAAS,SACrDJ,EAAAA,IAACK,EAAAA,oBAAmB,CAChBC,QAAST,EAAO,cACJ,eACZU,gBAAgB,EAChBC,aAAa,UAAS,aACX,eAAcJ,SAEzBJ,EAAAA,IAACS,EAAAA,UAAS,CAAA,eAAA,QAEK,EAI/BjB,EAAYkB,YAAc"}
+{"version":3,"file":"close-button.js","sources":["../../../../src/modal-v2/slots/close-button.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport clsx from \"clsx\";\nimport { useContext } from \"react\";\n\nimport { ClickableIcon } from \"../../shared/clickable-icon\";\nimport { ModalContext } from \"../modal-context\";\nimport type { ModalCloseButtonProps } from \"../types\";\nimport * as styles from \"./slot-styles\";\n\nexport const CloseButton = ({\n    \"data-testid\": testId = \"modal-close-button\",\n    className,\n    ...otherProps\n}: ModalCloseButtonProps) => {\n    const { onClose } = useContext(ModalContext);\n\n    return (\n        <div\n            data-testid={testId}\n            {...otherProps}\n            className={clsx(styles.closeButtonContainer, className)}\n        >\n            <ClickableIcon\n                onClick={onClose}\n                data-testid=\"close-button\"\n                focusHighlight={false}\n                focusOutline=\"browser\"\n                aria-label=\"Close button\"\n                className={styles.styledClickableIcon}\n            >\n                <CrossIcon aria-hidden />\n            </ClickableIcon>\n        </div>\n    );\n};\n\nCloseButton.displayName = \"ModalV2.CloseButton\";\n"],"names":["CloseButton","_a","testId","className","otherProps","__rest","onClose","useContext","ModalContext","_jsx","clsx","styles.closeButtonContainer","children","ClickableIcon","onClick","focusHighlight","focusOutline","styles.styledClickableIcon","CrossIcon","displayName"],"mappings":"+WASO,MAAMA,EAAeC,IAAA,IACxB,cAAeC,EAAS,qBAAoBC,UAC5CA,GAASF,EACNG,EAAUC,EAAAA,OAAAJ,EAHW,CAAA,cAAA,cAKxB,MAAMK,QAAEA,GAAYC,EAAAA,WAAWC,gBAE/B,OACIC,EAAAA,uCACiBP,GACTE,EAAU,CACdD,UAAWO,EAAAA,QAAKC,EAAAA,qBAA6BR,GAAUS,SAEvDH,MAACI,EAAAA,cAAa,CACVC,QAASR,EAAO,cACJ,eACZS,gBAAgB,EAChBC,aAAa,UAAS,aACX,eACXb,UAAWc,EAAAA,oBAA0BL,SAErCH,EAAAA,IAACS,EAAAA,UAAS,CAAA,eAAA,QAEZ,EAIdlB,EAAYmB,YAAc"}

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

@@ -1,2 +1,2 @@
-"use strict";var t=require("../../_virtual/_tslib.js"),e=require("react/jsx-runtime"),r=require("./slot-styles.js");const s=s=>{var{"data-testid":n="modal-content",children:a}=s,i=t.__rest(s,["data-testid","children"]);return e.jsx(r.ContentContainer,Object.assign({"data-testid":n},i,{children:a}))};s.displayName="ModalV2.Content",exports.Content=s;
+"use strict";var t=require("../../_virtual/_tslib.js"),e=require("react/jsx-runtime"),a=require("clsx"),s=require("./slot-styles.js");function r(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var n=r(a);const i=a=>{var{"data-testid":r="modal-content",children:i,className:l}=a,d=t.__rest(a,["data-testid","children","className"]);return e.jsx("div",Object.assign({"data-testid":r},d,{className:n.default(s.contentContainer,l),children:i}))};i.displayName="ModalV2.Content",exports.Content=i;
 //# sourceMappingURL=content.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"content.js","sources":["../../../../src/modal-v2/slots/content.tsx"],"sourcesContent":["import type { ModalContentProps } from \"../types\";\nimport { ContentContainer } from \"./slot-styles\";\n\nexport const Content = ({\n    \"data-testid\": testId = \"modal-content\",\n    children,\n    ...otherProps\n}: ModalContentProps) => {\n    return (\n        <ContentContainer data-testid={testId} {...otherProps}>\n            {children}\n        </ContentContainer>\n    );\n};\n\nContent.displayName = \"ModalV2.Content\";\n"],"names":["Content","_a","testId","children","otherProps","__rest","_jsx","ContentContainer","Object","assign","displayName"],"mappings":"oHAGO,MAAMA,EAAWC,IAAA,IACpB,cAAeC,EAAS,gBAAeC,SACvCA,GAAQF,EACLG,EAAUC,EAAAA,OAAAJ,EAHO,CAAA,cAAA,aAKpB,OACIK,MAACC,EAAAA,iBAAgBC,OAAAC,OAAA,CAAA,cAAcP,GAAYE,EAAU,CAAAD,SAChDA,IACc,EAI3BH,EAAQU,YAAc"}
+{"version":3,"file":"content.js","sources":["../../../../src/modal-v2/slots/content.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport type { ModalContentProps } from \"../types\";\nimport * as styles from \"./slot-styles\";\n\nexport const Content = ({\n    \"data-testid\": testId = \"modal-content\",\n    children,\n    className,\n    ...otherProps\n}: ModalContentProps) => {\n    return (\n        <div\n            data-testid={testId}\n            {...otherProps}\n            className={clsx(styles.contentContainer, className)}\n        >\n            {children}\n        </div>\n    );\n};\n\nContent.displayName = \"ModalV2.Content\";\n"],"names":["Content","_a","testId","children","className","otherProps","__rest","_jsx","clsx","styles.contentContainer","displayName"],"mappings":"yNAKO,MAAMA,EAAWC,IAAA,IACpB,cAAeC,EAAS,gBAAeC,SACvCA,EAAQC,UACRA,GAASH,EACNI,EAAUC,EAAAA,OAAAL,EAJO,wCAMpB,OACIM,EAAAA,uCACiBL,GACTG,EAAU,CACdD,UAAWI,EAAAA,QAAKC,mBAAyBL,YAExCD,IACC,EAIdH,EAAQU,YAAc"}

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

@@ -1,2 +1,2 @@
-"use strict";var t=require("../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),e=require("./slot-styles.js");const s=s=>{var{"data-testid":a="modal-footer",primaryButton:o,secondaryButton:i}=s,n=t.__rest(s,["data-testid","primaryButton","secondaryButton"]);return r.jsxs(e.FooterContainer,Object.assign({"data-testid":a},n,{children:[o,i]}))};s.displayName="ModalV2.Footer",exports.Footer=s;
+"use strict";var t=require("../../_virtual/_tslib.js"),e=require("react/jsx-runtime"),r=require("clsx"),a=require("./slot-styles.js");function s(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var o=s(r);const i=r=>{var{"data-testid":s="modal-footer",primaryButton:i,secondaryButton:n,className:u}=r,d=t.__rest(r,["data-testid","primaryButton","secondaryButton","className"]);return e.jsxs("div",Object.assign({"data-testid":s},d,{className:o.default(a.footerContainer,u),children:[i,n]}))};i.displayName="ModalV2.Footer",exports.Footer=i;
 //# sourceMappingURL=footer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"footer.js","sources":["../../../../src/modal-v2/slots/footer.tsx"],"sourcesContent":["import type { ModalFooterProps } from \"../types\";\nimport { FooterContainer } from \"./slot-styles\";\n\nexport const Footer = ({\n    \"data-testid\": testId = \"modal-footer\",\n    primaryButton,\n    secondaryButton,\n    ...otherProps\n}: ModalFooterProps) => {\n    return (\n        <FooterContainer data-testid={testId} {...otherProps}>\n            {primaryButton}\n            {secondaryButton}\n        </FooterContainer>\n    );\n};\n\nFooter.displayName = \"ModalV2.Footer\";\n"],"names":["Footer","_a","testId","primaryButton","secondaryButton","otherProps","__rest","_jsxs","FooterContainer","Object","assign","children","displayName"],"mappings":"oHAGO,MAAMA,EAAUC,IAAA,IACnB,cAAeC,EAAS,eAAcC,cACtCA,EAAaC,gBACbA,GAAeH,EACZI,EAAUC,EAAAA,OAAAL,EAJM,mDAMnB,OACIM,EAAAA,KAACC,EAAAA,gBAAeC,OAAAC,OAAA,CAAA,cAAcR,GAAYG,EAAU,CAAAM,SAAA,CAC/CR,EACAC,KACa,EAI1BJ,EAAOY,YAAc"}
+{"version":3,"file":"footer.js","sources":["../../../../src/modal-v2/slots/footer.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport type { ModalFooterProps } from \"../types\";\nimport * as styles from \"./slot-styles\";\n\nexport const Footer = ({\n    \"data-testid\": testId = \"modal-footer\",\n    primaryButton,\n    secondaryButton,\n    className,\n    ...otherProps\n}: ModalFooterProps) => {\n    return (\n        <div\n            data-testid={testId}\n            {...otherProps}\n            className={clsx(styles.footerContainer, className)}\n        >\n            {primaryButton}\n            {secondaryButton}\n        </div>\n    );\n};\n\nFooter.displayName = \"ModalV2.Footer\";\n"],"names":["Footer","_a","testId","primaryButton","secondaryButton","className","otherProps","__rest","_jsxs","clsx","styles.footerContainer","children","displayName"],"mappings":"yNAKO,MAAMA,EAAUC,IAAA,IACnB,cAAeC,EAAS,eAAcC,cACtCA,EAAaC,gBACbA,EAAeC,UACfA,GAASJ,EACNK,EAAUC,EAAAA,OAAAN,EALM,+DAOnB,OACIO,EAAAA,wCACiBN,GACTI,EAAU,CACdD,UAAWI,UAAKC,EAAAA,gBAAwBL,GAAUM,SAAA,CAEjDR,EACAC,KACC,EAIdJ,EAAOY,YAAc"}

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

@@ -0,0 +1,2 @@
+"use strict";var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),s=require("@lifesg/react-icons/cross"),a=require("clsx"),i=require("react"),r=require("../../shared/clickable-icon/clickable-icon.js"),o=require("../modal-context.js"),l=require("./slot-styles.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=c(a);const d=a=>{var{"data-testid":c="modal-header",title:d,closeButtonPosition:u="right",className:h}=a,j=e.__rest(a,["data-testid","title","closeButtonPosition","className"]);const{onClose:b}=i.useContext(o.ModalContext);return t.jsxs("div",Object.assign({"data-testid":c,"data-close-button-position":u,className:n.default(l.headerContainer,h)},j,{children:[t.jsx(r.ClickableIcon,{onClick:b,"data-testid":"close-button",focusHighlight:!1,focusOutline:"browser","aria-label":"Close button",className:l.headerCloseButton,children:t.jsx(s.CrossIcon,{"aria-hidden":!0})}),d&&t.jsx("span",{className:l.headerTitle,children:d}),d&&t.jsx("div",{className:l.headerSpacer,"aria-hidden":!0})]}))};d.displayName="ModalV2.Header",exports.Header=d;
+//# sourceMappingURL=header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"header.js","sources":["../../../../src/modal-v2/slots/header.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport clsx from \"clsx\";\nimport { useContext } from \"react\";\n\nimport { ClickableIcon } from \"../../shared/clickable-icon\";\nimport { ModalContext } from \"../modal-context\";\nimport type { ModalHeaderProps } from \"../types\";\nimport * as styles from \"./slot-styles\";\n\nexport const Header = ({\n    \"data-testid\": testId = \"modal-header\",\n    title,\n    closeButtonPosition = \"right\",\n    className,\n    ...otherProps\n}: ModalHeaderProps) => {\n    const { onClose } = useContext(ModalContext);\n\n    return (\n        <div\n            data-testid={testId}\n            data-close-button-position={closeButtonPosition}\n            className={clsx(styles.headerContainer, className)}\n            {...otherProps}\n        >\n            <ClickableIcon\n                onClick={onClose}\n                data-testid=\"close-button\"\n                focusHighlight={false}\n                focusOutline=\"browser\"\n                aria-label=\"Close button\"\n                className={styles.headerCloseButton}\n            >\n                <CrossIcon aria-hidden />\n            </ClickableIcon>\n            {title && <span className={styles.headerTitle}>{title}</span>}\n            {title && <div className={styles.headerSpacer} aria-hidden />}\n        </div>\n    );\n};\n\nHeader.displayName = \"ModalV2.Header\";\n"],"names":["Header","_a","testId","title","closeButtonPosition","className","otherProps","__rest","onClose","useContext","ModalContext","_jsxs","Object","assign","clsx","styles.headerContainer","children","_jsx","ClickableIcon","onClick","focusHighlight","focusOutline","styles.headerCloseButton","CrossIcon","styles.headerTitle","styles.headerSpacer","displayName"],"mappings":"+WASO,MAAMA,EAAUC,IAAA,IACnB,cAAeC,EAAS,eAAcC,MACtCA,EAAKC,oBACLA,EAAsB,QAAOC,UAC7BA,GAASJ,EACNK,EAAUC,EAAAA,OAAAN,EALM,2DAOnB,MAAMO,QAAEA,GAAYC,EAAAA,WAAWC,gBAE/B,OACIC,EAAAA,KAAA,MAAAC,OAAAC,OAAA,CAAA,cACiBX,EAAM,6BACSE,EAC5BC,UAAWS,EAAAA,QAAKC,EAAAA,gBAAwBV,IACpCC,EAAU,CAAAU,SAAA,CAEdC,EAAAA,IAACC,EAAAA,cAAa,CACVC,QAASX,EAAO,cACJ,eACZY,gBAAgB,EAChBC,aAAa,UAAS,aACX,eACXhB,UAAWiB,EAAAA,kBAAwBN,SAEnCC,EAAAA,IAACM,EAAAA,UAAS,CAAA,eAAA,MAEbpB,GAASc,EAAAA,IAAA,OAAA,CAAMZ,UAAWmB,EAAAA,YAAkBR,SAAGb,IAC/CA,GAASc,EAAAA,IAAA,MAAA,CAAKZ,UAAWoB,EAAAA,aAAmB,eAAA,OAC3C,EAIdzB,EAAO0B,YAAc"}

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

@@ -1,103 +1,2 @@
-"use strict";var i=require("styled-components"),a=require("../../shared/clickable-icon/clickable-icon.js"),e=require("../../v3_theme/index.js");function r(i){return i&&"object"==typeof i&&"default"in i?i:{default:i}}var n=r(i);const t=n.default.div`
-    width: 40rem;
-    margin: ${e.V3_Spacing["spacing-64"]} auto;
-    background: ${e.V3_Colour.bg};
-    box-shadow: ${e.V3_Shadow["xs-strong"]};
-    border-radius: ${e.V3_Radius.lg};
-
-    display: flex;
-    flex-direction: column-reverse;
-
-    max-width: calc(100% - ${e.V3_Breakpoint["xxl-margin"]}px * 2);
-
-    ${e.V3_MediaQuery.MaxWidth.xl} {
-        max-width: calc(100% - ${e.V3_Breakpoint["xl-margin"]}px * 2);
-    }
-
-    ${e.V3_MediaQuery.MaxWidth.lg} {
-        max-width: calc(100% - ${e.V3_Breakpoint["lg-margin"]}px * 2);
-    }
-
-    ${e.V3_MediaQuery.MaxWidth.md} {
-        max-width: calc(100% - ${e.V3_Breakpoint["md-margin"]}px * 2);
-    }
-
-    ${e.V3_MediaQuery.MaxWidth.sm} {
-        max-width: calc(100% - ${e.V3_Breakpoint["sm-margin"]}px * 2);
-    }
-
-    ${e.V3_MediaQuery.MaxWidth.xs} {
-        max-width: calc(100% - ${e.V3_Breakpoint["xs-margin"]}px * 2);
-    }
-
-    ${e.V3_MediaQuery.MaxWidth.xxs} {
-        max-width: calc(100% - ${e.V3_Breakpoint["xxs-margin"]}px * 2);
-    }
-`,c=n.default.div`
-    margin-right: ${e.V3_Spacing["spacing-16"]};
-    margin-left: auto;
-    margin-top: ${e.V3_Spacing["spacing-16"]};
-    margin-bottom: ${e.V3_Spacing["spacing-16"]};
-`,g=n.default(a.ClickableIcon)`
-    padding: 0;
-    color: ${e.V3_Colour.icon};
-
-    svg {
-        height: 2rem;
-        width: 2rem;
-    }
-`,o=n.default.div`
-    margin-right: ${e.V3_Spacing["spacing-64"]};
-    margin-left: ${e.V3_Spacing["spacing-64"]};
-
-    ${e.V3_MediaQuery.MaxWidth.sm} {
-        margin-right: ${e.V3_Spacing["spacing-20"]};
-        margin-left: ${e.V3_Spacing["spacing-20"]};
-    }
-`,d=n.default.div`
-    margin-right: ${e.V3_Spacing["spacing-64"]};
-    margin-left: ${e.V3_Spacing["spacing-64"]};
-
-    ${e.V3_MediaQuery.MaxWidth.sm} {
-        margin-right: ${e.V3_Spacing["spacing-20"]};
-        margin-left: ${e.V3_Spacing["spacing-20"]};
-    }
-
-    display: flex;
-    flex-direction: row-reverse; /* primary button on right */
-    column-gap: ${e.V3_Spacing["spacing-32"]};
-    row-gap: ${e.V3_Spacing["spacing-16"]};
-
-    & > button {
-        flex: 1;
-    }
-
-    ${e.V3_MediaQuery.MaxWidth.md} {
-        flex-direction: column;
-    }
-`,p=n.default.div`
-    :where(& > ${o}:last-child) {
-        margin-bottom: ${e.V3_Spacing["spacing-64"]};
-    }
-
-    :where(& > ${d}:not(:first-child)) {
-        margin-top: ${e.V3_Spacing["spacing-32"]};
-    }
-
-    :where(& > ${d}:last-child) {
-        margin-bottom: ${e.V3_Spacing["spacing-64"]};
-    }
-
-    ${a=>a.$hasCloseButton?i.css`
-                  :where(& > ${o}:first-child),
-                  :where(& > ${d}:first-child) {
-                      margin-top: 0;
-                  }
-              `:i.css`
-                  :where(& > ${o}:first-child),
-                  :where(& > ${d}:first-child) {
-                      margin-top: ${e.V3_Spacing["spacing-64"]};
-                  }
-              `}
-`;exports.CloseButtonContainer=c,exports.ContentContainer=o,exports.FooterContainer=d,exports.ModalCard=t,exports.SlotSpacer=p,exports.StyledClickableIcon=g;
+"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.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { ClickableIcon } from \"../../shared/clickable-icon\";\nimport {\n    V3_Breakpoint,\n    V3_Colour,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Shadow,\n    V3_Spacing,\n} from \"../../v3_theme\";\n\n// =============================================================================\n// Card\n// =============================================================================\nexport const ModalCard = styled.div`\n    width: 40rem;\n    margin: ${V3_Spacing[\"spacing-64\"]} auto;\n    background: ${V3_Colour.bg};\n    box-shadow: ${V3_Shadow[\"xs-strong\"]};\n    border-radius: ${V3_Radius[\"lg\"]};\n\n    display: flex;\n    flex-direction: column-reverse;\n\n    max-width: calc(100% - ${V3_Breakpoint[\"xxl-margin\"]}px * 2);\n\n    ${V3_MediaQuery.MaxWidth.xl} {\n        max-width: calc(100% - ${V3_Breakpoint[\"xl-margin\"]}px * 2);\n    }\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        max-width: calc(100% - ${V3_Breakpoint[\"lg-margin\"]}px * 2);\n    }\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        max-width: calc(100% - ${V3_Breakpoint[\"md-margin\"]}px * 2);\n    }\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        max-width: calc(100% - ${V3_Breakpoint[\"sm-margin\"]}px * 2);\n    }\n\n    ${V3_MediaQuery.MaxWidth.xs} {\n        max-width: calc(100% - ${V3_Breakpoint[\"xs-margin\"]}px * 2);\n    }\n\n    ${V3_MediaQuery.MaxWidth.xxs} {\n        max-width: calc(100% - ${V3_Breakpoint[\"xxs-margin\"]}px * 2);\n    }\n`;\n\n// =============================================================================\n// Header\n// =============================================================================\nexport const CloseButtonContainer = styled.div`\n    margin-right: ${V3_Spacing[\"spacing-16\"]};\n    margin-left: auto;\n    margin-top: ${V3_Spacing[\"spacing-16\"]};\n    margin-bottom: ${V3_Spacing[\"spacing-16\"]};\n`;\n\nexport const StyledClickableIcon = styled(ClickableIcon)`\n    padding: 0;\n    color: ${V3_Colour.icon};\n\n    svg {\n        height: 2rem;\n        width: 2rem;\n    }\n`;\n\n// =============================================================================\n// Content\n// =============================================================================\nexport const ContentContainer = styled.div`\n    margin-right: ${V3_Spacing[\"spacing-64\"]};\n    margin-left: ${V3_Spacing[\"spacing-64\"]};\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        margin-right: ${V3_Spacing[\"spacing-20\"]};\n        margin-left: ${V3_Spacing[\"spacing-20\"]};\n    }\n`;\n\n// =============================================================================\n// Footer\n// =============================================================================\nexport const FooterContainer = styled.div`\n    margin-right: ${V3_Spacing[\"spacing-64\"]};\n    margin-left: ${V3_Spacing[\"spacing-64\"]};\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        margin-right: ${V3_Spacing[\"spacing-20\"]};\n        margin-left: ${V3_Spacing[\"spacing-20\"]};\n    }\n\n    display: flex;\n    flex-direction: row-reverse; /* primary button on right */\n    column-gap: ${V3_Spacing[\"spacing-32\"]};\n    row-gap: ${V3_Spacing[\"spacing-16\"]};\n\n    & > button {\n        flex: 1;\n    }\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n    }\n`;\n\n// =============================================================================\n// Spacer\n// =============================================================================\ninterface SlotSpacerStyleProps {\n    $hasCloseButton?: boolean;\n}\n\nexport const SlotSpacer = styled.div<SlotSpacerStyleProps>`\n    :where(& > ${ContentContainer}:last-child) {\n        margin-bottom: ${V3_Spacing[\"spacing-64\"]};\n    }\n\n    :where(& > ${FooterContainer}:not(:first-child)) {\n        margin-top: ${V3_Spacing[\"spacing-32\"]};\n    }\n\n    :where(& > ${FooterContainer}:last-child) {\n        margin-bottom: ${V3_Spacing[\"spacing-64\"]};\n    }\n\n    ${(props) =>\n        props.$hasCloseButton\n            ? css`\n                  :where(& > ${ContentContainer}:first-child),\n                  :where(& > ${FooterContainer}:first-child) {\n                      margin-top: 0;\n                  }\n              `\n            : css`\n                  :where(& > ${ContentContainer}:first-child),\n                  :where(& > ${FooterContainer}:first-child) {\n                      margin-top: ${V3_Spacing[\"spacing-64\"]};\n                  }\n              `}\n`;\n"],"names":["ModalCard","styled","div","V3_Spacing","V3_Colour","bg","V3_Shadow","V3_Radius","V3_Breakpoint","V3_MediaQuery","MaxWidth","xl","lg","md","sm","xs","xxs","CloseButtonContainer","StyledClickableIcon","ClickableIcon","icon","ContentContainer","FooterContainer","SlotSpacer","props","$hasCloseButton","css"],"mappings":"mOAeO,MAAMA,EAAYC,EAAAA,QAAOC,GAAG;;cAErBC,EAAAA,WAAW;kBACPC,EAAAA,UAAUC;kBACVC,EAAAA,UAAU;qBACPC,EAAAA,UAAc;;;;;6BAKNC,EAAAA,cAAc;;MAErCC,EAAAA,cAAcC,SAASC;iCACIH,EAAAA,cAAc;;;MAGzCC,EAAAA,cAAcC,SAASE;iCACIJ,EAAAA,cAAc;;;MAGzCC,EAAAA,cAAcC,SAASG;iCACIL,EAAAA,cAAc;;;MAGzCC,EAAAA,cAAcC,SAASI;iCACIN,EAAAA,cAAc;;;MAGzCC,EAAAA,cAAcC,SAASK;iCACIP,EAAAA,cAAc;;;MAGzCC,EAAAA,cAAcC,SAASM;iCACIR,EAAAA,cAAc;;EAOlCS,EAAuBhB,EAAAA,QAAOC,GAAG;oBAC1BC,EAAAA,WAAW;;kBAEbA,EAAAA,WAAW;qBACRA,EAAAA,WAAW;EAGnBe,EAAsBjB,EAAAA,QAAOkB,EAAAA,cAAc;;aAE3Cf,EAAAA,UAAUgB;;;;;;EAWVC,EAAmBpB,EAAAA,QAAOC,GAAG;oBACtBC,EAAAA,WAAW;mBACZA,EAAAA,WAAW;;MAExBM,EAAAA,cAAcC,SAASI;wBACLX,EAAAA,WAAW;uBACZA,EAAAA,WAAW;;EAOrBmB,EAAkBrB,EAAAA,QAAOC,GAAG;oBACrBC,EAAAA,WAAW;mBACZA,EAAAA,WAAW;;MAExBM,EAAAA,cAAcC,SAASI;wBACLX,EAAAA,WAAW;uBACZA,EAAAA,WAAW;;;;;kBAKhBA,EAAAA,WAAW;eACdA,EAAAA,WAAW;;;;;;MAMpBM,EAAAA,cAAcC,SAASG;;;EAYhBU,EAAatB,EAAAA,QAAOC,GAAyB;iBACzCmB;yBACQlB,EAAAA,WAAW;;;iBAGnBmB;sBACKnB,EAAAA,WAAW;;;iBAGhBmB;yBACQnB,EAAAA,WAAW;;;MAG7BqB,GACCA,EAAMC,gBACAC,KAAG;+BACcL;+BACAC;;;gBAIjBI,KAAG;+BACcL;+BACAC;oCACKnB,EAAAA,WAAW;;;"}
+{"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/brand.js

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

package/cjs/navbar/brand.js.map

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

package/cjs/navbar/brand.styles.js

@@ -1,13 +1,2 @@
-"use strict";var t=require("styled-components"),e=require("../v3_theme/index.js");function i(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}const n=i(t).default.a`
-    display: flex;
-    justify-content: center;
-    height: 100%;
-
-    img {
-        width: auto;
-        height: 100%;
-        transition: ${e.V3_Motion["duration-150"]} ${e.V3_Motion["ease-default"]};
-        object-fit: contain;
-    }
-`;exports.Container=n;
+"use strict";require("./brand.styles_zcgddp.css");exports.container="cw4lf53";
 //# sourceMappingURL=brand.styles.js.map

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

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

package/cjs/navbar/brand.styles_zcgddp.css

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

package/cjs/navbar/drawer.js

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

package/cjs/navbar/drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","sources":["../../../src/navbar/drawer.tsx"],"sourcesContent":["import React, { useEffect, useLayoutEffect, useRef, useState } from \"react\";\n\nimport { Brand } from \"./brand\";\nimport {\n    CloseButton,\n    CloseIcon,\n    Container,\n    Content,\n    TopBar,\n    Wrapper,\n} from \"./drawer.styles\";\nimport { NavBrandContainer, NavSeparator } from \"./navbar.styles\";\nimport type { NavbarDrawerProps } from \"./types\";\n\nconst Component = (\n    props: NavbarDrawerProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const {\n        show,\n        resources = {},\n        children,\n        hideNavBranding,\n        onClose,\n        onBrandClick,\n        drawerLabel = \"Mobile navigation menu\",\n        mobileMenuRef,\n    } = props;\n    const [viewHeight, setViewHeight] = useState<number>(0);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const { primary, secondary } = resources;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleResize = () => {\n        /**\n         * Reference:\n         * https://css-tricks.com/the-trick-to-viewport-units-on-mobile/\n         */\n        if (window) {\n            const viewHeight = window.innerHeight * 0.01;\n            setViewHeight(viewHeight);\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (!show) return;\n\n        if (event.key === \"Escape\") {\n            event.preventDefault();\n            onClose?.();\n            // Return focus to the hamburger menu button\n            setTimeout(() => {\n                mobileMenuRef?.current?.focus();\n            }, 300);\n        }\n    };\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        handleResize();\n        window.addEventListener(\"resize\", handleResize);\n\n        return () => {\n            window.removeEventListener(\"resize\", handleResize);\n        };\n    }, []);\n\n    // Focus management when drawer opens\n    useLayoutEffect(() => {\n        if (show) {\n            const timer = setTimeout(() => {\n                if (containerRef.current) {\n                    containerRef.current.focus({ preventScroll: true });\n                }\n            }, 550);\n\n            return () => clearTimeout(timer);\n        }\n    }, [show]);\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderBrand = () => {\n        return (\n            <>\n                {primary && (\n                    <Brand\n                        resources={primary}\n                        compress\n                        onClick={onBrandClick}\n                        data-id=\"drawer-brand-primary\"\n                        data-testid=\"drawer__brand\"\n                        type=\"primary\"\n                    />\n                )}\n                {secondary && (\n                    <>\n                        <NavSeparator />\n                        <Brand\n                            resources={secondary}\n                            compress\n                            onClick={onBrandClick}\n                            data-id=\"drawer-brand-secondary\"\n                            data-testid=\"drawer__brand-secondary\"\n                            type=\"secondary\"\n                        />\n                    </>\n                )}\n            </>\n        );\n    };\n\n    const renderTopBar = () => (\n        <TopBar>\n            <NavBrandContainer data-id=\"drawer-brand-container\">\n                {!hideNavBranding && renderBrand()}\n            </NavBrandContainer>\n            <CloseButton\n                onClick={onClose}\n                focusHighlight={false}\n                aria-label=\"Close nav menu\"\n            >\n                <CloseIcon />\n            </CloseButton>\n        </TopBar>\n    );\n\n    return (\n        <Wrapper ref={ref} data-testid=\"drawer\">\n            <Container\n                ref={containerRef}\n                $show={show}\n                $viewHeight={viewHeight}\n                onKeyDown={handleKeyDown}\n                tabIndex={show ? 0 : -1}\n                aria-label={drawerLabel}\n            >\n                <Content>\n                    {renderTopBar()}\n                    {children}\n                </Content>\n            </Container>\n        </Wrapper>\n    );\n};\n\nexport const Drawer = React.forwardRef(Component);\n"],"names":["Drawer","React","forwardRef","props","ref","show","resources","children","hideNavBranding","onClose","onBrandClick","drawerLabel","mobileMenuRef","viewHeight","setViewHeight","useState","containerRef","useRef","primary","secondary","handleResize","window","innerHeight","useEffect","addEventListener","removeEventListener","useLayoutEffect","timer","setTimeout","current","focus","preventScroll","clearTimeout","_jsx","Wrapper","Container","$show","onKeyDown","event","key","preventDefault","_a","tabIndex","_jsxs","Content","TopBar","NavBrandContainer","_Fragment","Brand","compress","onClick","type","NavSeparator","CloseButton","focusHighlight","CloseIcon"],"mappings":"mOAcA,MA6IaA,OAASC,QAAMC,YA7IV,CACdC,EACAC,KAKA,MAAMC,KACFA,EAAIC,UACJA,EAAY,CAAA,EAAEC,SACdA,EAAQC,gBACRA,EAAeC,QACfA,EAAOC,aACPA,EAAYC,YACZA,EAAc,yBAAwBC,cACtCA,GACAT,GACGU,EAAYC,GAAiBC,EAAAA,SAAiB,GAC/CC,EAAeC,EAAAA,OAAuB,OAEtCC,QAAEA,EAAOC,UAAEA,GAAcb,EAKzBc,EAAe,KAKjB,GAAIC,OAAQ,CACR,MAAMR,EAAkC,IAArBQ,OAAOC,YAC1BR,EAAcD,EAClB,GAmBJU,EAAAA,WAAU,KACNH,IACAC,OAAOG,iBAAiB,SAAUJ,GAE3B,KACHC,OAAOI,oBAAoB,SAAUL,EAAa,IAEvD,IAGHM,EAAAA,iBAAgB,KACZ,GAAIrB,EAAM,CACN,MAAMsB,EAAQC,YAAW,KACjBZ,EAAaa,SACbb,EAAaa,QAAQC,MAAM,CAAEC,eAAe,GAChD,GACD,KAEH,MAAO,IAAMC,aAAaL,EAC9B,IACD,CAACtB,IAkDJ,OACI4B,EAAAA,IAACC,EAAAA,QAAO,CAAC9B,IAAKA,EAAG,cAAc,SAAQG,SACnC0B,EAAAA,IAACE,EAAAA,UAAS,CACN/B,IAAKY,EAAYoB,MACV/B,cACMQ,EACbwB,UA5FWC,IACdjC,GAEa,WAAdiC,EAAMC,MACND,EAAME,iBACN/B,SAAAA,IAEAmB,YAAW,WACe,QAAtBa,EAAA7B,aAAa,EAAbA,EAAeiB,eAAO,IAAAY,GAAAA,EAAEX,OAAO,GAChC,KACP,EAmFQY,SAAUrC,EAAO,GAAI,EAAE,aACXM,WAEZgC,EAAAA,KAACC,EAAAA,QAAO,CAAArC,SAAA,CAxBhBoC,EAAAA,KAACE,EAAAA,OAAM,CAAAtC,SAAA,CACH0B,EAAAA,IAACa,EAAAA,6BAA0B,yBAAwBvC,UAC7CC,GA/BNmC,OAAAI,EAAAA,SAAA,CAAAxC,SAAA,CACKW,GACGe,EAAAA,IAACe,QAAK,CACF1C,UAAWY,EACX+B,UAAQ,EACRC,QAASxC,EAAY,UACb,uBAAsB,cAClB,gBACZyC,KAAK,YAGZhC,GACGwB,EAAAA,KAAAI,EAAAA,SAAA,CAAAxC,SAAA,CACI0B,EAAAA,IAACmB,EAAAA,aAAY,IACbnB,MAACe,EAAAA,MAAK,CACF1C,UAAWa,EACX8B,UAAQ,EACRC,QAASxC,EAAY,UACb,yBAAwB,cACpB,0BACZyC,KAAK,sBAarBlB,EAAAA,IAACoB,EAAAA,YAAW,CACRH,QAASzC,EACT6C,gBAAgB,EAAK,aACV,0BAEXrB,EAAAA,IAACsB,EAAAA,mBAiBIhD,QAGH"}
+{"version":3,"file":"drawer.js","sources":["../../../src/navbar/drawer.tsx"],"sourcesContent":["import { FloatingFocusManager, useFloating } from \"@floating-ui/react\";\nimport { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useLayoutEffect, useRef, useState } from \"react\";\n\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useApplyStyle } from \"../theme\";\nimport { mergeRefs } from \"../util\";\nimport { Brand } from \"./brand\";\nimport * as styles from \"./drawer.styles\";\nimport * as navbarStyles from \"./navbar.styles\";\nimport type { NavbarDrawerProps } from \"./types\";\n\nconst Component = (\n    props: NavbarDrawerProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const {\n        show,\n        resources = {},\n        children,\n        hideNavBranding,\n        onClose,\n        onBrandClick,\n        drawerLabel = \"Mobile navigation menu\",\n        mobileMenuRef,\n    } = props;\n    const [viewHeight, setViewHeight] = useState<number>(0);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.container.viewHeight]: viewHeight\n            ? `${viewHeight}px`\n            : null,\n    });\n\n    const { primary, secondary } = resources;\n\n    // =========================================================================\n    // FLOATING UI CONFIG\n    // =========================================================================\n    const { context, refs: floatingRefs } = useFloating({\n        open: show,\n        onOpenChange: (open) => {\n            if (!open && onClose) {\n                onClose();\n            }\n        },\n    });\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleResize = () => {\n        /**\n         * Reference:\n         * https://css-tricks.com/the-trick-to-viewport-units-on-mobile/\n         */\n        if (window) {\n            const viewHeight = window.innerHeight * 0.01;\n            setViewHeight(viewHeight);\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (!show) return;\n\n        if (event.key === \"Escape\") {\n            event.preventDefault();\n            onClose?.();\n            // Return focus to the hamburger menu button\n            setTimeout(() => {\n                mobileMenuRef?.current?.focus();\n            }, 300);\n        }\n    };\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        handleResize();\n        window.addEventListener(\"resize\", handleResize);\n\n        return () => {\n            window.removeEventListener(\"resize\", handleResize);\n        };\n    }, []);\n\n    // Focus management when drawer opens\n    useLayoutEffect(() => {\n        if (show) {\n            const timer = setTimeout(() => {\n                if (containerRef.current) {\n                    containerRef.current.focus({ preventScroll: true });\n                }\n            }, 550);\n\n            return () => clearTimeout(timer);\n        }\n    }, [show]);\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderBrand = () => {\n        return (\n            <>\n                {primary && (\n                    <Brand\n                        resources={primary}\n                        compress\n                        onClick={onBrandClick}\n                        data-id=\"drawer-brand-primary\"\n                        data-testid=\"drawer__brand\"\n                        type=\"primary\"\n                    />\n                )}\n                {secondary && (\n                    <>\n                        <div\n                            className={clsx(\n                                navbarStyles.navSeparator,\n                                navbarStyles.navSeparatorCompressed,\n                                navbarStyles.navSeparatorResponsive\n                            )}\n                        />\n                        <Brand\n                            resources={secondary}\n                            compress\n                            onClick={onBrandClick}\n                            data-id=\"drawer-brand-secondary\"\n                            data-testid=\"drawer__brand-secondary\"\n                            type=\"secondary\"\n                        />\n                    </>\n                )}\n            </>\n        );\n    };\n\n    const renderTopBar = () => (\n        <div className={styles.topBar}>\n            <div\n                className={clsx(\n                    navbarStyles.navBrandContainer,\n                    navbarStyles.navBrandContainerCompressed,\n                    navbarStyles.navBrandContainerResponsive\n                )}\n                data-id=\"drawer-brand-container\"\n            >\n                {!hideNavBranding && renderBrand()}\n            </div>\n            <ClickableIcon\n                className={styles.closeButton}\n                onClick={onClose}\n                focusHighlight={false}\n                aria-label=\"Close nav menu\"\n            >\n                <CrossIcon className={styles.closeIcon} />\n            </ClickableIcon>\n        </div>\n    );\n\n    return (\n        <FloatingFocusManager\n            context={context}\n            initialFocus={-1}\n            returnFocus={true}\n            disabled={!show}\n        >\n            <div\n                className={styles.wrapper}\n                ref={mergeRefs(ref, floatingRefs.setFloating)}\n                data-testid=\"drawer\"\n            >\n                <nav\n                    ref={containerRef}\n                    className={clsx(\n                        styles.container,\n                        show ? styles.containerShown : styles.containerHidden\n                    )}\n                    onKeyDown={handleKeyDown}\n                    tabIndex={-1}\n                    aria-label={drawerLabel}\n                >\n                    <div className={styles.content}>\n                        {renderTopBar()}\n                        {children}\n                    </div>\n                </nav>\n            </div>\n        </FloatingFocusManager>\n    );\n};\n\nexport const Drawer = React.forwardRef(Component);\n"],"names":["Drawer","React","forwardRef","props","ref","show","resources","children","hideNavBranding","onClose","onBrandClick","drawerLabel","mobileMenuRef","viewHeight","setViewHeight","useState","containerRef","useRef","useApplyStyle","styles.tokens","container","primary","secondary","context","refs","floatingRefs","useFloating","open","onOpenChange","handleResize","window","innerHeight","useEffect","addEventListener","removeEventListener","useLayoutEffect","timer","setTimeout","current","focus","preventScroll","clearTimeout","_jsx","FloatingFocusManager","initialFocus","returnFocus","disabled","className","styles.wrapper","mergeRefs","setFloating","clsx","styles.container","styles.containerShown","styles.containerHidden","onKeyDown","event","key","preventDefault","_a","tabIndex","_jsxs","styles.content","styles.topBar","navbarStyles.navBrandContainer","navbarStyles.navBrandContainerCompressed","navbarStyles.navBrandContainerResponsive","_Fragment","Brand","compress","onClick","type","navbarStyles.navSeparator","navbarStyles.navSeparatorCompressed","navbarStyles.navSeparatorResponsive","ClickableIcon","styles.closeButton","focusHighlight","CrossIcon","styles.closeIcon"],"mappings":"g8BAaA,MA0LaA,OAASC,QAAMC,YA1LV,CACdC,EACAC,KAKA,MAAMC,KACFA,EAAIC,UACJA,EAAY,CAAA,EAAEC,SACdA,EAAQC,gBACRA,EAAeC,QACfA,EAAOC,aACPA,EAAYC,YACZA,EAAc,yBAAwBC,cACtCA,GACAT,GACGU,EAAYC,GAAiBC,EAAAA,SAAiB,GAC/CC,EAAeC,EAAAA,OAAuB,MAE5CC,EAAAA,cAAcF,EAAc,CACxB,CAACG,EAAAA,OAAcC,UAAUP,YAAaA,EAChC,GAAGA,MACH,OAGV,MAAMQ,QAAEA,EAAOC,UAAEA,GAAchB,GAKzBiB,QAAEA,EAASC,KAAMC,GAAiBC,EAAAA,YAAY,CAChDC,KAAMtB,EACNuB,aAAeD,KACNA,GAAQlB,GACTA,GACJ,IAOFoB,EAAe,KAKjB,GAAIC,OAAQ,CACR,MAAMjB,EAAkC,IAArBiB,OAAOC,YAC1BjB,EAAcD,EAClB,GAmBJmB,EAAAA,WAAU,KACNH,IACAC,OAAOG,iBAAiB,SAAUJ,GAE3B,KACHC,OAAOI,oBAAoB,SAAUL,EAAa,IAEvD,IAGHM,EAAAA,iBAAgB,KACZ,GAAI9B,EAAM,CACN,MAAM+B,EAAQC,YAAW,KACjBrB,EAAasB,SACbtB,EAAasB,QAAQC,MAAM,CAAEC,eAAe,GAChD,GACD,KAEH,MAAO,IAAMC,aAAaL,EAC9B,IACD,CAAC/B,IAgEJ,OACIqC,EAAAA,IAACC,EAAAA,qBAAoB,CACjBpB,QAASA,EACTqB,gBACAC,aAAa,EACbC,UAAWzC,EAAIE,SAEfmC,EAAAA,IAAA,MAAA,CACIK,UAAWC,EAAAA,QACX5C,IAAK6C,EAAAA,UAAU7C,EAAKqB,EAAayB,aAAY,cACjC,kBAEZR,EAAAA,IAAA,MAAA,CACItC,IAAKY,EACL+B,UAAWI,UACPC,EAAAA,UACA/C,EAAOgD,EAAAA,eAAwBC,EAAAA,iBAEnCC,UAtHOC,IACdnD,GAEa,WAAdmD,EAAMC,MACND,EAAME,iBACNjD,SAAAA,IAEA4B,YAAW,WACe,QAAtBsB,EAAA/C,aAAa,EAAbA,EAAe0B,eAAO,IAAAqB,GAAAA,EAAEpB,OAAO,GAChC,KACP,EA6GYqB,UAAU,EAAE,aACAjD,EAAWJ,SAEvBsD,EAAAA,KAAA,MAAA,CAAKd,UAAWe,EAAAA,QAAcvD,SAAA,CA5C1CsD,EAAAA,KAAA,MAAA,CAAKd,UAAWgB,SAAaxD,SAAA,CACzBmC,EAAAA,WACIK,UAAWI,EAAAA,QACPa,oBACAC,EAAAA,4BACAC,EAAAA,6BACH,UACO,mCAEN1D,GA5CNqD,OAAAM,EAAAA,SAAA,CAAA5D,SAAA,CACKc,GACGqB,MAAC0B,EAAAA,MAAK,CACF9D,UAAWe,EACXgD,UAAQ,EACRC,QAAS5D,EAAY,UACb,uBAAsB,cAClB,gBACZ6D,KAAK,YAGZjD,GACGuC,EAAAA,KAAAM,EAAAA,SAAA,CAAA5D,SAAA,CACImC,MAAA,MAAA,CACIK,UAAWI,UACPqB,EAAAA,aACAC,EAAAA,uBACAC,EAAAA,0BAGRhC,EAAAA,IAAC0B,EAAAA,MAAK,CACF9D,UAAWgB,EACX+C,UAAQ,EACRC,QAAS5D,EAAY,UACb,uCACI,0BACZ6D,KAAK,sBAoBrB7B,EAAAA,IAACiC,EAAAA,cAAa,CACV5B,UAAW6B,EAAAA,YACXN,QAAS7D,EACToE,gBAAgB,EAAK,aACV,iBAAgBtE,SAE3BmC,MAACoC,EAAAA,UAAS,CAAC/B,UAAWgC,EAAAA,iBA6BbxE,UAIM"}