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

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

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

package/modal-v2/modal-v2.styles.d.ts

@@ -1,11 +1,9 @@
-import type { ModalAnimationDirection } from "./types";
-interface Props {
-    $show: boolean;
-    $animationFrom?: ModalAnimationDirection;
-    $verticalHeight?: number;
-    $offsetTop?: number;
-}
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Props>> & string;
-export declare const ScrollContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ModalContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export {};
+export declare const tokens: {
+    readonly container: {
+        readonly verticalHeight: "--fds-internal-modalV2-container-verticalHeight";
+        readonly offsetTop: "--fds-internal-modalV2-container-offsetTop";
+    };
+};
+export declare const container: import("@linaria/core").LinariaClassName;
+export declare const scrollContainer: import("@linaria/core").LinariaClassName;
+export declare const modalContainer: import("@linaria/core").LinariaClassName;

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

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

package/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":"+GAYO,MAAMA,EAAYC,EAAOC,GAAU;;;;;;;MAOpCC,EAAcC,SAASC;UAClBC,GACQC,CAAG;;sBAEAD,EAAME,gBACE,GAAGF,EAAME,oBACT;;;;eAKdF,GAAUA,EAAMG,YAAc;;;MAGvCH,GAAUC,CAAG;;;cAGND,EAAMI;;;;;cAKNJ,EAAMI;8BACUC,EAAU;kBACtBA,EAAU;gCACIA,EAAU;;;;;cAK5BL,EAAMI;8BACUC,EAAU;kBACtBA,EAAU;;;EAKfC,EAAkBX,EAAOC,GAAG;;;;;;EAQ5BW,EAAiBZ,EAAOC,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        offsetTop: \"--fds-internal-modalV2-container-offsetTop\",\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    ${tokens.container.offsetTop}: initial;\n\n    ${MediaQuery.MaxWidth.sm} {\n        height: calc(var(${tokens.container.verticalHeight}, 1vh) * 100);\n        top: var(${tokens.container.offsetTop}, 0px);\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":["tokens","container","verticalHeight","offsetTop","scrollContainer","modalContainer"],"mappings":"8DAQO,MAAMA,EAAS,CAClBC,UAAW,CACPC,eAAgB,kDAChBC,UAAW,+CAINF,EAAS,WA+DTG,EAAe,WAQfC,EAAc"}

package/modal-v2/modal-v2.styles_1irpyi6.css

@@ -0,0 +1,3 @@
+.c1jrmyjd{position:relative;width:100%;height:100%;overflow:auto;--fds-internal-modalV2-container-verticalHeight:initial;--fds-internal-modalV2-container-offsetTop:initial;}:where(body.fds-breakpoint-sm-max) .c1jrmyjd{height:calc(var(--fds-internal-modalV2-container-verticalHeight, 1vh) * 100);top:var(--fds-internal-modalV2-container-offsetTop, 0px);}.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/modal-v2/slots/card.d.ts

@@ -1,5 +1,3 @@
+import React from "react";
 import type { ModalCardProps } from "../types";
-export declare const Card: {
-    ({ id, "data-testid": testId, children, ...otherProps }: ModalCardProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const Card: (props: ModalCardProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/modal-v2/slots/card.js

@@ -1,2 +1,2 @@
-import{__rest as t}from"../../_virtual/_tslib.js";import{jsxs as o}from"react/jsx-runtime";import r from"react";import{isStyledComponent as i}from"styled-components";import{CloseButton as e}from"./close-button.js";import{Content as s}from"./content.js";import{Footer as a}from"./footer.js";import{ModalCard as d,SlotSpacer as m}from"./slot-styles.js";const n=n=>{var{id:l,"data-testid":p="modal-card",children:c}=n,f=t(n,["id","data-testid","children"]);const j=t=>r.Children.toArray(c).find((o=>((t,o)=>i(t.type)?t.type.target===o:t.type===o)(o,t))),y=j(e),h=j(s),u=j(a),C=!!y;return o(d,Object.assign({id:l,"data-testid":p},f,{onClick:t=>{t.stopPropagation()},children:[o(m,{$hasCloseButton:C,children:[h,u]}),C&&y]}))};n.displayName="ModalV2.Card";export{n as Card};
+import{__rest as t}from"../../_virtual/_tslib.js";import{jsxs as r}from"react/jsx-runtime";import o from"clsx";import a from"react";import{isStyledComponent as e}from"styled-components";import{CloseButton as s}from"./close-button.js";import{Content as i}from"./content.js";import{Footer as m}from"./footer.js";import{slotSpacer as d,modalCard as l}from"./slot-styles.js";const c=a.forwardRef((function(c,n){var{id:p,"data-testid":f="modal-card",children:j,className:u}=c,y=t(c,["id","data-testid","children","className"]);const h=t=>a.Children.toArray(j).find((r=>((t,r)=>e(t.type)?t.type.target===r:t.type===r)(r,t))),N=h(s),b=h(i),v=h(m),g=!!N;return r("div",Object.assign({ref:n,id:p,"data-testid":f},y,{onClick:t=>{t.stopPropagation()},className:o(l,u),children:[r("div",{"data-has-close-button":g?"true":"false",className:o(d),children:[b,v]}),g&&N]}))}));c.displayName="ModalV2.Card";export{c as Card};
 //# sourceMappingURL=card.js.map

package/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":"+VASO,MAAMA,EAAQC,IAAA,IAAAC,GACjBA,EACA,cAAeC,EAAS,aAAYC,SACpCA,GAAQH,EACLI,EAAUC,EAAAL,EAJI,iCASjB,MAYMM,EAAuBC,GAClBC,EAAMC,SAASC,QAAQP,GAAUQ,MAAMC,GAN1B,EAACA,EAA0BL,IAC/CM,EAAkBD,EAAML,MACjBK,EAAML,KAAoCO,SAAWP,EACtDK,EAAML,OAASA,EAIjBQ,CAAgBH,EAA4BL,KAO9CS,EAAkBV,EAAoBW,GACtCC,EAAcZ,EAAoBa,GAClCC,EAAad,EAAoBe,GAEjCC,IAAmBN,EAEzB,OACIO,EAACC,EAASC,OAAAC,OAAA,CACNzB,GAAIA,EAAE,cACOC,GACTE,EAAU,CACduB,QAhCeC,IACnBA,EAAMC,iBAAiB,EA+BG1B,SAAA,CAEtBoB,EAACO,EAAU,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\";\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 * as styles from \"./slot-styles\";\n\nfunction CardInner(\n    {\n        id,\n        \"data-testid\": testId = \"modal-card\",\n        children,\n        className,\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    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        <div\n            ref={ref}\n            id={id}\n            data-testid={testId}\n            {...otherProps}\n            onClick={handleOnClick}\n            className={clsx(styles.modalCard, className)}\n        >\n            <div\n                data-has-close-button={hasCloseButton ? \"true\" : \"false\"}\n                className={clsx(styles.slotSpacer)}\n            >\n                {ContentSlot}\n                {FooterSlot}\n            </div>\n            {hasCloseButton && 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","otherProps","__rest","findComponentOfType","type","Children","toArray","find","child","isStyledComponent","target","isComponentType","CloseButtonSlot","CloseButton","ContentSlot","Content","FooterSlot","Footer","hasCloseButton","_jsxs","Object","assign","onClick","event","stopPropagation","clsx","styles.modalCard","styles.slotSpacer","displayName"],"mappings":"mXAwEO,MAAMA,EAAOC,EAAMC,YA7D1B,SACIC,EAOAC,GAPA,IAAAC,GACIA,EACA,cAAeC,EAAS,aAAYC,SACpCA,EAAQC,UACRA,GAASL,EACNM,EAAUC,EAAAP,EALjB,6CAYA,MAYMQ,EAAuBC,GAClBX,EAAMY,SAASC,QAAQP,GAAUQ,MAAMC,GAN1B,EAACA,EAA0BJ,IAC/CK,EAAkBD,EAAMJ,MACjBI,EAAMJ,KAAoCM,SAAWN,EACtDI,EAAMJ,OAASA,EAIjBO,CAAgBH,EAA4BJ,KAO9CQ,EAAkBT,EAAoBU,GACtCC,EAAcX,EAAoBY,GAClCC,EAAab,EAAoBc,GAEjCC,IAAmBN,EAEzB,OACIO,EAAA,MAAAC,OAAAC,OAAA,CACIzB,IAAKA,EACLC,GAAIA,EAAE,cACOC,GACTG,EAAU,CACdqB,QAjCeC,IACnBA,EAAMC,iBAAiB,EAiCnBxB,UAAWyB,EAAKC,EAAkB1B,GAAUD,SAAA,CAE5CoB,EAAA,MAAA,CAAA,wBAC2BD,EAAiB,OAAS,QACjDlB,UAAWyB,EAAKE,GAAkB5B,SAAA,CAEjCe,EACAE,KAEJE,GAAkBN,KAG/B,IAICpB,EAA8BoC,YAAc"}

package/modal-v2/slots/close-button.d.ts

@@ -1,5 +1,5 @@
 import type { ModalCloseButtonProps } from "../types";
 export declare const CloseButton: {
-    ({ "data-testid": testId, ...otherProps }: ModalCloseButtonProps): import("react/jsx-runtime").JSX.Element;
+    ({ "data-testid": testId, className, ...otherProps }: ModalCloseButtonProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

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

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

package/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":"uTAOO,MAAMA,EAAeC,QACxB,cAAeC,EAAS,wBACrBC,EAAUC,EAAAH,EAFW,CAAA,gBAIxB,MAAMI,QAAEA,GAAYC,EAAWC,GAE/B,OACIC,EAACC,EAAoBC,OAAAC,OAAA,CAAA,cAAcT,GAAYC,EAAU,CAAAS,SACrDJ,EAACK,EAAmB,CAChBC,QAAST,EAAO,cACJ,eACZU,gBAAgB,EAChBC,aAAa,UAAS,aACX,eAAcJ,SAEzBJ,EAACS,EAAS,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":"yZASO,MAAMA,EAAeC,IAAA,IACxB,cAAeC,EAAS,qBAAoBC,UAC5CA,GAASF,EACNG,EAAUC,EAAAJ,EAHW,CAAA,cAAA,cAKxB,MAAMK,QAAEA,GAAYC,EAAWC,GAE/B,OACIC,qCACiBP,GACTE,EAAU,CACdD,UAAWO,EAAKC,EAA6BR,GAAUS,SAEvDH,EAACI,EAAa,CACVC,QAASR,EAAO,cACJ,eACZS,gBAAgB,EAChBC,aAAa,UAAS,aACX,eACXb,UAAWc,EAA0BL,SAErCH,EAACS,EAAS,CAAA,eAAA,QAEZ,EAIdlB,EAAYmB,YAAc"}

package/modal-v2/slots/content.d.ts

@@ -1,5 +1,5 @@
 import type { ModalContentProps } from "../types";
 export declare const Content: {
-    ({ "data-testid": testId, children, ...otherProps }: ModalContentProps): import("react/jsx-runtime").JSX.Element;
+    ({ "data-testid": testId, children, className, ...otherProps }: ModalContentProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/modal-v2/slots/content.js

@@ -1,2 +1,2 @@
-import{__rest as t}from"../../_virtual/_tslib.js";import{jsx as r}from"react/jsx-runtime";import{ContentContainer as e}from"./slot-styles.js";const a=a=>{var{"data-testid":i="modal-content",children:s}=a,o=t(a,["data-testid","children"]);return r(e,Object.assign({"data-testid":i},o,{children:s}))};a.displayName="ModalV2.Content";export{a as Content};
+import{__rest as t}from"../../_virtual/_tslib.js";import{jsx as s}from"react/jsx-runtime";import a from"clsx";import{contentContainer as e}from"./slot-styles.js";const r=r=>{var{"data-testid":i="modal-content",children:o,className:l}=r,m=t(r,["data-testid","children","className"]);return s("div",Object.assign({"data-testid":i},m,{className:a(e,l),children:o}))};r.displayName="ModalV2.Content";export{r as Content};
 //# sourceMappingURL=content.js.map

package/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":"8IAGO,MAAMA,EAAWC,IAAA,IACpB,cAAeC,EAAS,gBAAeC,SACvCA,GAAQF,EACLG,EAAUC,EAAAJ,EAHO,CAAA,cAAA,aAKpB,OACIK,EAACC,EAAgBC,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":"kKAKO,MAAMA,EAAWC,IAAA,IACpB,cAAeC,EAAS,gBAAeC,SACvCA,EAAQC,UACRA,GAASH,EACNI,EAAUC,EAAAL,EAJO,wCAMpB,OACIM,qCACiBL,GACTG,EAAU,CACdD,UAAWI,EAAKC,EAAyBL,YAExCD,IACC,EAIdH,EAAQU,YAAc"}

package/modal-v2/slots/footer.d.ts

@@ -1,5 +1,5 @@
 import type { ModalFooterProps } from "../types";
 export declare const Footer: {
-    ({ "data-testid": testId, primaryButton, secondaryButton, ...otherProps }: ModalFooterProps): import("react/jsx-runtime").JSX.Element;
+    ({ "data-testid": testId, primaryButton, secondaryButton, className, ...otherProps }: ModalFooterProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/modal-v2/slots/footer.js

@@ -1,2 +1,2 @@
-import{__rest as t}from"../../_virtual/_tslib.js";import{jsxs as r}from"react/jsx-runtime";import{FooterContainer as o}from"./slot-styles.js";const a=a=>{var{"data-testid":s="modal-footer",primaryButton:e,secondaryButton:i}=a,d=t(a,["data-testid","primaryButton","secondaryButton"]);return r(o,Object.assign({"data-testid":s},d,{children:[e,i]}))};a.displayName="ModalV2.Footer";export{a as Footer};
+import{__rest as t}from"../../_virtual/_tslib.js";import{jsxs as a}from"react/jsx-runtime";import r from"clsx";import{footerContainer as o}from"./slot-styles.js";const s=s=>{var{"data-testid":e="modal-footer",primaryButton:i,secondaryButton:m,className:d}=s,l=t(s,["data-testid","primaryButton","secondaryButton","className"]);return a("div",Object.assign({"data-testid":e},l,{className:r(o,d),children:[i,m]}))};s.displayName="ModalV2.Footer";export{s as Footer};
 //# sourceMappingURL=footer.js.map

package/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":"8IAGO,MAAMA,EAAUC,IAAA,IACnB,cAAeC,EAAS,eAAcC,cACtCA,EAAaC,gBACbA,GAAeH,EACZI,EAAUC,EAAAL,EAJM,mDAMnB,OACIM,EAACC,EAAeC,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":"kKAKO,MAAMA,EAAUC,IAAA,IACnB,cAAeC,EAAS,eAAcC,cACtCA,EAAaC,gBACbA,EAAeC,UACfA,GAASJ,EACNK,EAAUC,EAAAN,EALM,+DAOnB,OACIO,qCACiBN,GACTI,EAAU,CACdD,UAAWI,EAAKC,EAAwBL,GAAUM,SAAA,CAEjDR,EACAC,KACC,EAIdJ,EAAOY,YAAc"}

package/modal-v2/slots/slot-styles.d.ts

@@ -1,10 +1,14 @@
-export declare const ModalCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CloseButtonContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledClickableIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<(props: import("../../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const ContentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const FooterContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-interface SlotSpacerStyleProps {
-    $hasCloseButton?: boolean;
-}
-export declare const SlotSpacer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SlotSpacerStyleProps>> & string;
-export {};
+export declare const slotSpacerHasCloseButtonAttribute = "data-has-close-button";
+export declare const slotSpacerTokens: {
+    readonly firstChildMarginTopWithCloseButton: "--fds-internal-modalV2-slotSpacer-firstChildMarginTopWithCloseButton";
+    readonly firstChildMarginTopNoCloseButton: "--fds-internal-modalV2-slotSpacer-firstChildMarginTopNoCloseButton";
+    readonly contentLastChildMarginBottom: "--fds-internal-modalV2-slotSpacer-contentLastChildMarginBottom";
+    readonly footerNotFirstChildMarginTop: "--fds-internal-modalV2-slotSpacer-footerNotFirstChildMarginTop";
+    readonly footerLastChildMarginBottom: "--fds-internal-modalV2-slotSpacer-footerLastChildMarginBottom";
+};
+export declare const modalCard: import("@linaria/core").LinariaClassName;
+export declare const closeButtonContainer: import("@linaria/core").LinariaClassName;
+export declare const styledClickableIcon: import("@linaria/core").LinariaClassName;
+export declare const contentContainer: import("@linaria/core").LinariaClassName;
+export declare const footerContainer: import("@linaria/core").LinariaClassName;
+export declare const slotSpacer: import("@linaria/core").LinariaClassName;

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

@@ -1,103 +1,2 @@
-import i,{css as a}from"styled-components";import{ClickableIcon as r}from"../../shared/clickable-icon/clickable-icon.js";import{V3_Spacing as t,V3_Colour as n,V3_Shadow as g,V3_Radius as m,V3_Breakpoint as c,V3_MediaQuery as s}from"../../v3_theme/index.js";const e=i.div`
-    width: 40rem;
-    margin: ${t["spacing-64"]} auto;
-    background: ${n.bg};
-    box-shadow: ${g["xs-strong"]};
-    border-radius: ${m.lg};
-
-    display: flex;
-    flex-direction: column-reverse;
-
-    max-width: calc(100% - ${c["xxl-margin"]}px * 2);
-
-    ${s.MaxWidth.xl} {
-        max-width: calc(100% - ${c["xl-margin"]}px * 2);
-    }
-
-    ${s.MaxWidth.lg} {
-        max-width: calc(100% - ${c["lg-margin"]}px * 2);
-    }
-
-    ${s.MaxWidth.md} {
-        max-width: calc(100% - ${c["md-margin"]}px * 2);
-    }
-
-    ${s.MaxWidth.sm} {
-        max-width: calc(100% - ${c["sm-margin"]}px * 2);
-    }
-
-    ${s.MaxWidth.xs} {
-        max-width: calc(100% - ${c["xs-margin"]}px * 2);
-    }
-
-    ${s.MaxWidth.xxs} {
-        max-width: calc(100% - ${c["xxs-margin"]}px * 2);
-    }
-`,d=i.div`
-    margin-right: ${t["spacing-16"]};
-    margin-left: auto;
-    margin-top: ${t["spacing-16"]};
-    margin-bottom: ${t["spacing-16"]};
-`,$=i(r)`
-    padding: 0;
-    color: ${n.icon};
-
-    svg {
-        height: 2rem;
-        width: 2rem;
-    }
-`,o=i.div`
-    margin-right: ${t["spacing-64"]};
-    margin-left: ${t["spacing-64"]};
-
-    ${s.MaxWidth.sm} {
-        margin-right: ${t["spacing-20"]};
-        margin-left: ${t["spacing-20"]};
-    }
-`,l=i.div`
-    margin-right: ${t["spacing-64"]};
-    margin-left: ${t["spacing-64"]};
-
-    ${s.MaxWidth.sm} {
-        margin-right: ${t["spacing-20"]};
-        margin-left: ${t["spacing-20"]};
-    }
-
-    display: flex;
-    flex-direction: row-reverse; /* primary button on right */
-    column-gap: ${t["spacing-32"]};
-    row-gap: ${t["spacing-16"]};
-
-    & > button {
-        flex: 1;
-    }
-
-    ${s.MaxWidth.md} {
-        flex-direction: column;
-    }
-`,h=i.div`
-    :where(& > ${o}:last-child) {
-        margin-bottom: ${t["spacing-64"]};
-    }
-
-    :where(& > ${l}:not(:first-child)) {
-        margin-top: ${t["spacing-32"]};
-    }
-
-    :where(& > ${l}:last-child) {
-        margin-bottom: ${t["spacing-64"]};
-    }
-
-    ${i=>i.$hasCloseButton?a`
-                  :where(& > ${o}:first-child),
-                  :where(& > ${l}:first-child) {
-                      margin-top: 0;
-                  }
-              `:a`
-                  :where(& > ${o}:first-child),
-                  :where(& > ${l}:first-child) {
-                      margin-top: ${t["spacing-64"]};
-                  }
-              `}
-`;export{d as CloseButtonContainer,o as ContentContainer,l as FooterContainer,e as ModalCard,h as SlotSpacer,$ as StyledClickableIcon};
+import"./slot-styles_13sd376.css";const s="metykyj",o="c1247joo",t="st53q25",l="c1ls09wh",c="f1s12qxk",y="s1vsayl1";export{o as closeButtonContainer,l as contentContainer,c as footerContainer,s as modalCard,y as slotSpacer,t as styledClickableIcon};
 //# sourceMappingURL=slot-styles.js.map

package/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":"iQAeO,MAAMA,EAAYC,EAAOC,GAAG;;cAErBC,EAAW;kBACPC,EAAUC;kBACVC,EAAU;qBACPC,EAAc;;;;;6BAKNC,EAAc;;MAErCC,EAAcC,SAASC;iCACIH,EAAc;;;MAGzCC,EAAcC,SAASE;iCACIJ,EAAc;;;MAGzCC,EAAcC,SAASG;iCACIL,EAAc;;;MAGzCC,EAAcC,SAASI;iCACIN,EAAc;;;MAGzCC,EAAcC,SAASK;iCACIP,EAAc;;;MAGzCC,EAAcC,SAASM;iCACIR,EAAc;;EAOlCS,EAAuBhB,EAAOC,GAAG;oBAC1BC,EAAW;;kBAEbA,EAAW;qBACRA,EAAW;EAGnBe,EAAsBjB,EAAOkB,EAAc;;aAE3Cf,EAAUgB;;;;;;EAWVC,EAAmBpB,EAAOC,GAAG;oBACtBC,EAAW;mBACZA,EAAW;;MAExBM,EAAcC,SAASI;wBACLX,EAAW;uBACZA,EAAW;;EAOrBmB,EAAkBrB,EAAOC,GAAG;oBACrBC,EAAW;mBACZA,EAAW;;MAExBM,EAAcC,SAASI;wBACLX,EAAW;uBACZA,EAAW;;;;;kBAKhBA,EAAW;eACdA,EAAW;;;;;;MAMpBM,EAAcC,SAASG;;;EAYhBU,EAAatB,EAAOC,GAAyB;iBACzCmB;yBACQlB,EAAW;;;iBAGnBmB;sBACKnB,EAAW;;;iBAGhBmB;yBACQnB,EAAW;;;MAG7BqB,GACCA,EAAMC,gBACAC,CAAG;+BACcL;+BACAC;;;gBAIjBI,CAAG;+BACcL;+BACAC;oCACKnB,EAAW;;;"}
+{"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    MediaQuery,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../../theme\";\n\n// =============================================================================\n// Tokens and attributes\n// =============================================================================\nexport const slotSpacerHasCloseButtonAttribute = \"data-has-close-button\";\nconst internalSlotSpacerTokens = {\n    firstChildMarginTop:\n        \"--fds-internal-modalV2-slotSpacer-firstChildMarginTop\",\n} as const;\n\nexport const slotSpacerTokens = {\n    firstChildMarginTopWithCloseButton:\n        \"--fds-internal-modalV2-slotSpacer-firstChildMarginTopWithCloseButton\",\n    firstChildMarginTopNoCloseButton:\n        \"--fds-internal-modalV2-slotSpacer-firstChildMarginTopNoCloseButton\",\n\n    contentLastChildMarginBottom:\n        \"--fds-internal-modalV2-slotSpacer-contentLastChildMarginBottom\",\n\n    footerNotFirstChildMarginTop:\n        \"--fds-internal-modalV2-slotSpacer-footerNotFirstChildMarginTop\",\n    footerLastChildMarginBottom:\n        \"--fds-internal-modalV2-slotSpacer-footerLastChildMarginBottom\",\n} as const;\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const modalCard = css`\n    width: 40rem;\n    margin: ${Spacing[\"spacing-64\"]} auto;\n    background: ${Colour.bg};\n    box-shadow: ${Shadow[\"xs-strong\"]};\n    border-radius: ${Radius[\"lg\"]};\n\n    display: flex;\n    flex-direction: column-reverse;\n\n    max-width: calc(100% - ${Breakpoint[\"xxl-margin\"]} * 2);\n\n    ${MediaQuery.MaxWidth.xl} {\n        max-width: calc(100% - ${Breakpoint[\"xl-margin\"]} * 2);\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        max-width: calc(100% - ${Breakpoint[\"lg-margin\"]} * 2);\n    }\n\n    ${MediaQuery.MaxWidth.md} {\n        max-width: calc(100% - ${Breakpoint[\"md-margin\"]} * 2);\n    }\n\n    ${MediaQuery.MaxWidth.sm} {\n        max-width: calc(100% - ${Breakpoint[\"sm-margin\"]} * 2);\n    }\n\n    ${MediaQuery.MaxWidth.xs} {\n        max-width: calc(100% - ${Breakpoint[\"xs-margin\"]} * 2);\n    }\n\n    ${MediaQuery.MaxWidth.xxs} {\n        max-width: calc(100% - ${Breakpoint[\"xxs-margin\"]} * 2);\n    }\n`;\n\nexport const closeButtonContainer = css`\n    margin-right: ${Spacing[\"spacing-16\"]};\n    margin-left: auto;\n    margin-top: ${Spacing[\"spacing-16\"]};\n    margin-bottom: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const styledClickableIcon = css`\n    padding: 0;\n    color: ${Colour.icon};\n\n    & svg {\n        height: 2rem;\n        width: 2rem;\n    }\n`;\n\nexport const contentContainer = css`\n    margin-right: ${Spacing[\"spacing-64\"]};\n    margin-left: ${Spacing[\"spacing-64\"]};\n\n    ${MediaQuery.MaxWidth.sm} {\n        margin-right: ${Spacing[\"spacing-20\"]};\n        margin-left: ${Spacing[\"spacing-20\"]};\n    }\n`;\n\nexport const footerContainer = css`\n    margin-right: ${Spacing[\"spacing-64\"]};\n    margin-left: ${Spacing[\"spacing-64\"]};\n\n    ${MediaQuery.MaxWidth.sm} {\n        margin-right: ${Spacing[\"spacing-20\"]};\n        margin-left: ${Spacing[\"spacing-20\"]};\n    }\n\n    display: flex;\n    flex-direction: row-reverse; /* primary button on right */\n    column-gap: ${Spacing[\"spacing-32\"]};\n    row-gap: ${Spacing[\"spacing-16\"]};\n\n    & > button {\n        flex: 1;\n    }\n\n    ${MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n    }\n`;\n\nexport const slotSpacer = css`\n    ${slotSpacerTokens.contentLastChildMarginBottom}: initial;\n    ${slotSpacerTokens.footerNotFirstChildMarginTop}: initial;\n    ${slotSpacerTokens.footerLastChildMarginBottom}: initial;\n    ${slotSpacerTokens.firstChildMarginTopWithCloseButton}: initial;\n    ${slotSpacerTokens.firstChildMarginTopNoCloseButton}: initial;\n\n    ${internalSlotSpacerTokens.firstChildMarginTop}: var(\n        ${slotSpacerTokens.firstChildMarginTopNoCloseButton},\n        ${Spacing[\"spacing-64\"]}\n    );\n\n    & > :where(.${contentContainer}:last-child) {\n        margin-bottom: var(\n            ${slotSpacerTokens.contentLastChildMarginBottom},\n            ${Spacing[\"spacing-64\"]}\n        );\n    }\n\n    & > :where(.${footerContainer}:not(:first-child)) {\n        margin-top: var(\n            ${slotSpacerTokens.footerNotFirstChildMarginTop},\n            ${Spacing[\"spacing-32\"]}\n        );\n    }\n\n    & > :where(.${footerContainer}:last-child) {\n        margin-bottom: var(\n            ${slotSpacerTokens.footerLastChildMarginBottom},\n            ${Spacing[\"spacing-64\"]}\n        );\n    }\n\n    &\n        > :where(\n            .${contentContainer}:first-child, .${footerContainer}:first-child\n        ) {\n        margin-top: var(${internalSlotSpacerTokens.firstChildMarginTop});\n    }\n\n    &[${slotSpacerHasCloseButtonAttribute}=\"true\"] {\n        ${internalSlotSpacerTokens.firstChildMarginTop}: var(\n            ${slotSpacerTokens.firstChildMarginTopWithCloseButton},\n            0\n        );\n    }\n\n    &[${slotSpacerHasCloseButtonAttribute}=\"false\"] {\n        ${internalSlotSpacerTokens.firstChildMarginTop}: var(\n            ${slotSpacerTokens.firstChildMarginTopNoCloseButton},\n            ${Spacing[\"spacing-64\"]}\n        );\n    }\n`;\n"],"names":["modalCard","closeButtonContainer","styledClickableIcon","contentContainer","footerContainer","slotSpacer"],"mappings":"gEAsCO,MAAMA,EAAS,UAqCTC,EAAoB,WAOpBC,EAAmB,UAUnBC,EAAgB,WAUhBC,EAAe,WAuBfC,EAAU"}

package/modal-v2/slots/slot-styles_13sd376.css

@@ -0,0 +1,26 @@
+.metykyj{width:40rem;margin:var(--fds-spacing-64) auto;background:var(--fds-colour-bg);box-shadow:var(--fds-shadow-xs-strong);border-radius:var(--fds-radius-lg);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;max-width:calc(100% - var(--fds-breakpoint-margin-xxl) * 2);}:where(body.fds-breakpoint-xl-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-xl) * 2);}:where(body.fds-breakpoint-lg-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-lg) * 2);}:where(body.fds-breakpoint-md-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-md) * 2);}:where(body.fds-breakpoint-sm-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-sm) * 2);}:where(body.fds-breakpoint-xs-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-xs) * 2);}:where(body.fds-breakpoint-xxs-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-xxs) * 2);}
+.c1247joo{margin-right:var(--fds-spacing-16);margin-left:auto;margin-top:var(--fds-spacing-16);margin-bottom:var(--fds-spacing-16);}
+.st53q25{padding:0;color:var(--fds-colour-icon);}.st53q25 svg{height:2rem;width:2rem;}
+.c1ls09wh{margin-right:var(--fds-spacing-64);margin-left:var(--fds-spacing-64);}:where(body.fds-breakpoint-sm-max) .c1ls09wh{margin-right:var(--fds-spacing-20);margin-left:var(--fds-spacing-20);}
+.f1s12qxk{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) .f1s12qxk{margin-right:var(--fds-spacing-20);margin-left:var(--fds-spacing-20);}.f1s12qxk>button{-webkit-flex:1;-ms-flex:1;flex:1;}:where(body.fds-breakpoint-md-max) .f1s12qxk{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.s1vsayl1{--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)
+    );}.s1vsayl1>:where(.c1ls09wh:last-child){margin-bottom:var(
+            --fds-internal-modalV2-slotSpacer-contentLastChildMarginBottom,
+            var(--fds-spacing-64)
+        );}.s1vsayl1>:where(.f1s12qxk:not(:first-child)){margin-top:var(
+            --fds-internal-modalV2-slotSpacer-footerNotFirstChildMarginTop,
+            var(--fds-spacing-32)
+        );}.s1vsayl1>:where(.f1s12qxk:last-child){margin-bottom:var(
+            --fds-internal-modalV2-slotSpacer-footerLastChildMarginBottom,
+            var(--fds-spacing-64)
+        );}.s1vsayl1>:where(
+            .c1ls09wh:first-child, .f1s12qxk:first-child
+        ){margin-top:var(--fds-internal-modalV2-slotSpacer-firstChildMarginTop);}.s1vsayl1[data-has-close-button="true"]{--fds-internal-modalV2-slotSpacer-firstChildMarginTop:var(
+            --fds-internal-modalV2-slotSpacer-firstChildMarginTopWithCloseButton,
+            0
+        );}.s1vsayl1[data-has-close-button="false"]{--fds-internal-modalV2-slotSpacer-firstChildMarginTop:var(
+            --fds-internal-modalV2-slotSpacer-firstChildMarginTopNoCloseButton,
+            var(--fds-spacing-64)
+        );}

package/modal-v2/types.d.ts

@@ -18,7 +18,11 @@ export interface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {
 export interface ModalV2Props extends React.HTMLAttributes<HTMLDivElement> {
     "data-testid"?: string | undefined;
     show: boolean;
-    children: React.ReactNode;
+    /** The content of the modal. The parent element must be a valid HTML
+     * element or a component that forwards a ref to a valid HTML element. This
+     * element is used to determine the boundaries for overlay click
+     * detection. Fragments are not supported. */
+    children: React.JSX.Element;
     /** Animation direction of appearance and dismissal. Values: "top" | "bottom" | "left" | "right" */
     animationFrom?: ModalAnimationDirection | undefined;
     enableOverlayClick?: boolean | undefined;
@@ -29,4 +33,6 @@ export interface ModalV2Props extends React.HTMLAttributes<HTMLDivElement> {
     onOverlayClick?: (() => void) | undefined;
     /** Dismiss keyboard to keep modal in fullscreen */
     dismissKeyboardOnShow?: boolean | undefined;
+    /** Disable automatic initial focus on show. Consumer must focus an element within the modal. */
+    disableInitialFocus?: boolean | undefined;
 }

package/navbar/brand.js

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

package/navbar/brand.js.map

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

package/navbar/brand.styles.d.ts

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

package/navbar/brand.styles.js

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

package/navbar/brand.styles.js.map

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

package/navbar/brand.styles_zcgddp.css

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