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

package/modal/modal-box.js

@@ -1,2 +1,2 @@
-import{__rest as o}from"../_virtual/_tslib.js";import{jsxs as t,jsx as s}from"react/jsx-runtime";import{CrossIcon as i}from"@lifesg/react-icons/cross";import{Box as r,CloseButton as e}from"./modal-box.styles.js";const l=l=>{var{id:n="modal-box",children:c,onClose:a,showCloseButton:d=!0}=l,m=o(l,["id","children","onClose","showCloseButton"]);return t(r,Object.assign({"data-testid":n},m,{onClick:o=>{o.stopPropagation()},children:[d&&s(e,{onClick:a,"data-testid":"close-button",focusHighlight:!1,focusOutline:"browser",children:s(i,{})}),c]}))};export{l as ModalBox};
+import{__rest as o}from"../_virtual/_tslib.js";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{CrossIcon as t}from"@lifesg/react-icons/cross";import i from"clsx";import{forwardRef as s}from"react";import{ClickableIcon as l}from"../shared/clickable-icon/clickable-icon.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{mergeRefs as a}from"../util/merge-refs.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{box as m,closeButton as n}from"./modal-box.styles.js";const c=s((function(s,c){var{id:d="modal-box",children:p,onClose:f,showCloseButton:u=!0,className:j,elementRef:h}=s,b=o(s,["id","children","onClose","showCloseButton","className","elementRef"]);return e("div",Object.assign({ref:a(c,h),"data-testid":d},b,{onClick:o=>{o.stopPropagation()},className:i(m,j),children:[u&&r(l,{onClick:f,"data-testid":"close-button",focusHighlight:!1,focusOutline:"browser",className:n,children:r(t,{})}),p]}))}));c.displayName="Modal.Box";export{c as ModalBox};
 //# sourceMappingURL=modal-box.js.map

package/modal/modal-box.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-box.js","sources":["../../src/modal/modal-box.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport type React from \"react\";\n\nimport { Box, CloseButton } from \"./modal-box.styles\";\nimport type { ModalBoxProps } from \"./types\";\n\nexport const ModalBox = ({\n    id = \"modal-box\",\n    children,\n    onClose,\n    showCloseButton = true,\n    ...otherProps\n}: ModalBoxProps) => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderCloseButton = () => {\n        return (\n            <CloseButton\n                onClick={onClose}\n                data-testid=\"close-button\"\n                focusHighlight={false}\n                focusOutline=\"browser\"\n            >\n                <CrossIcon />\n            </CloseButton>\n        );\n    };\n\n    return (\n        <Box data-testid={id} {...otherProps} onClick={handleOnClick}>\n            {showCloseButton && renderCloseButton()}\n            {children}\n        </Box>\n    );\n};\n"],"names":["ModalBox","_a","id","children","onClose","showCloseButton","otherProps","__rest","_jsxs","Box","Object","assign","onClick","event","stopPropagation","_jsx","CloseButton","focusHighlight","focusOutline","CrossIcon"],"mappings":"oNAMO,MAAMA,EAAYC,IAAA,IAAAC,GACrBA,EAAK,YAAWC,SAChBA,EAAQC,QACRA,EAAOC,gBACPA,GAAkB,GAAIJ,EACnBK,EAAUC,EAAAN,EALQ,+CA8BrB,OACIO,EAACC,EAAGC,OAAAC,OAAA,CAAA,cAAcT,GAAQI,GAAYM,QArBnBC,IACnBA,EAAMC,iBAAiB,EAoBqCX,SAAA,CACvDE,GAbDU,EAACC,EAAW,CACRJ,QAASR,EAAO,cACJ,eACZa,gBAAgB,EAChBC,aAAa,UAASf,SAEtBY,EAACI,EAAS,CAAA,KAQbhB,KACC"}
+{"version":3,"file":"modal-box.js","sources":["../../src/modal/modal-box.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport type { NamedExoticComponent } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { mergeRefs } from \"../util\";\nimport * as styles from \"./modal-box.styles\";\nimport type { ModalBoxProps } from \"./types\";\n\nfunction ModalBoxInner(\n    {\n        id = \"modal-box\",\n        children,\n        onClose,\n        showCloseButton = true,\n        className,\n        elementRef,\n        ...otherProps\n    }: ModalBoxProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n) {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderCloseButton = () => {\n        return (\n            <ClickableIcon\n                onClick={onClose}\n                data-testid=\"close-button\"\n                focusHighlight={false}\n                focusOutline=\"browser\"\n                className={styles.closeButton}\n            >\n                <CrossIcon />\n            </ClickableIcon>\n        );\n    };\n\n    return (\n        <div\n            ref={mergeRefs(ref, elementRef)}\n            data-testid={id}\n            {...otherProps}\n            onClick={handleOnClick}\n            className={clsx(styles.box, className)}\n        >\n            {showCloseButton && renderCloseButton()}\n            {children}\n        </div>\n    );\n}\n\nexport const ModalBox = forwardRef<HTMLDivElement, ModalBoxProps>(\n    ModalBoxInner\n);\n\n(ModalBox as NamedExoticComponent).displayName = \"Modal.Box\";\n"],"names":["ModalBox","forwardRef","_a","ref","id","children","onClose","showCloseButton","className","elementRef","otherProps","__rest","_jsxs","Object","assign","mergeRefs","onClick","event","stopPropagation","clsx","styles.box","_jsx","ClickableIcon","focusHighlight","focusOutline","styles.closeButton","CrossIcon","displayName"],"mappings":"mkBA6DaA,EAAWC,GAlDxB,SACIC,EASAC,OATAC,GACIA,EAAK,YAAWC,SAChBA,EAAQC,QACRA,EAAOC,gBACPA,GAAkB,EAAIC,UACtBA,EAASC,WACTA,GAAUP,EACPQ,EAAUC,EAAAT,EAPjB,wEAmCA,OACIU,EAAA,MAAAC,OAAAC,OAAA,CACIX,IAAKY,EAAUZ,EAAKM,iBACPL,GACTM,EAAU,CACdM,QA1BeC,IACnBA,EAAMC,iBAAiB,EA0BnBV,UAAWW,EAAKC,EAAYZ,GAAUH,SAAA,CAErCE,GApBDc,EAACC,EAAa,CACVN,QAASV,EAAO,cACJ,eACZiB,gBAAgB,EAChBC,aAAa,UACbhB,UAAWiB,EAAkBpB,SAE7BgB,EAACK,EAAS,CAAA,KAcbrB,KAGb,IAMCL,EAAkC2B,YAAc"}

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

@@ -1,7 +1,2 @@
-interface CloseButtonProps {
-    $insetTop?: string | undefined;
-    $insetRight?: string | undefined;
-}
-export declare const Box: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, CloseButtonProps>> & string & Omit<(props: import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export {};
+export declare const box: import("@linaria/core").LinariaClassName;
+export declare const closeButton: import("@linaria/core").LinariaClassName;

package/modal/modal-box.styles.js

@@ -1,32 +1,2 @@
-import i from"styled-components";import{ClickableIcon as o}from"../shared/clickable-icon/clickable-icon.js";import{V3_Colour as t,V3_Shadow as e,V3_Radius as r,V3_MediaQuery as n,V3_Spacing as s}from"../v3_theme/index.js";const a=i.div`
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    width: 40rem;
-    max-height: 70%;
-    background: ${t.bg};
-    box-shadow: ${e["lg-strong"]};
-    border-radius: ${r.lg};
-    overflow: hidden;
-
-    ${n.MaxWidth.md} {
-        width: 90%;
-        max-height: 70%;
-    }
-`,d=i(o)`
-    position: absolute;
-    top: var(--close-button-top-inset, ${s["spacing-16"]});
-    right: var(--close-button-right-inset, ${s["spacing-16"]});
-    padding: 0;
-    color: ${t.icon};
-
-    svg {
-        height: 2rem;
-        width: 2rem;
-    }
-
-    ${n.MaxWidth.sm} {
-        right: var(--close-button-right-inset, ${s["spacing-20"]});
-    }
-`;export{a as Box,d as CloseButton};
+import"./modal-box.styles_y52cts.css";const o="b14nv3ev",s="ccgs01o";export{o as box,s as closeButton};
 //# sourceMappingURL=modal-box.styles.js.map

package/modal/modal-box.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-box.styles.js","sources":["../../src/modal/modal-box.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport {\n    V3_Colour,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Shadow,\n    V3_Spacing,\n} from \"../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface CloseButtonProps {\n    $insetTop?: string | undefined;\n    $insetRight?: string | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Box = styled.div`\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    width: 40rem;\n    max-height: 70%;\n    background: ${V3_Colour.bg};\n    box-shadow: ${V3_Shadow[\"lg-strong\"]};\n    border-radius: ${V3_Radius[\"lg\"]};\n    overflow: hidden;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        width: 90%;\n        max-height: 70%;\n    }\n`;\n\nexport const CloseButton = styled(ClickableIcon)<CloseButtonProps>`\n    position: absolute;\n    top: var(--close-button-top-inset, ${V3_Spacing[\"spacing-16\"]});\n    right: var(--close-button-right-inset, ${V3_Spacing[\"spacing-16\"]});\n    padding: 0;\n    color: ${V3_Colour.icon};\n\n    svg {\n        height: 2rem;\n        width: 2rem;\n    }\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        right: var(--close-button-right-inset, ${V3_Spacing[\"spacing-20\"]});\n    }\n`;\n"],"names":["Box","styled","div","V3_Colour","bg","V3_Shadow","V3_Radius","V3_MediaQuery","MaxWidth","md","CloseButton","ClickableIcon","V3_Spacing","icon","sm"],"mappings":"8NAsBO,MAAMA,EAAMC,EAAOC,GAAG;;;;;;kBAMXC,EAAUC;kBACVC,EAAU;qBACPC,EAAc;;;MAG7BC,EAAcC,SAASC;;;;EAMhBC,EAAcT,EAAOU,EAAgC;;yCAEzBC,EAAW;6CACPA,EAAW;;aAE3CT,EAAUU;;;;;;;MAOjBN,EAAcC,SAASM;iDACoBF,EAAW;;"}
+{"version":3,"file":"modal-box.styles.js","sources":["../../src/modal/modal-box.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, MediaQuery, Radius, Shadow, Spacing } from \"../theme\";\nimport * as modalStyles from \"./modal.styles\";\n\nexport const box = css`\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    width: 40rem;\n    max-height: 70%;\n    background: ${Colour.bg};\n    box-shadow: ${Shadow[\"lg-strong\"]};\n    border-radius: ${Radius[\"lg\"]};\n    overflow: hidden;\n\n    ${MediaQuery.MaxWidth.md} {\n        width: 90%;\n        max-height: 70%;\n    }\n`;\n\nexport const closeButton = css`\n    position: absolute;\n    top: var(\n        ${modalStyles.tokens.closeButton.topInset},\n        ${Spacing[\"spacing-16\"]}\n    );\n    right: var(\n        ${modalStyles.tokens.closeButton.rightInset},\n        ${Spacing[\"spacing-16\"]}\n    );\n    padding: 0;\n    color: ${Colour.icon};\n\n    svg {\n        height: 2rem;\n        width: 2rem;\n    }\n\n    ${MediaQuery.MaxWidth.sm} {\n        right: var(\n            ${modalStyles.tokens.closeButton.rightInset},\n            ${Spacing[\"spacing-20\"]}\n        );\n    }\n`;\n"],"names":["box","closeButton"],"mappings":"2DAKO,MAAMA,EAAG,WAiBHC,EAAW"}

package/modal/modal-box.styles_y52cts.css

@@ -0,0 +1,11 @@
+@layer fds{.b14nv3ev{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:40rem;max-height:70%;background:var(--fds-colour-bg);box-shadow:var(--fds-shadow-lg-strong);border-radius:var(--fds-radius-lg);overflow:hidden;}:where(body.fds-breakpoint-md-max) .b14nv3ev{width:90%;max-height:70%;}
+.ccgs01o{position:absolute;top:var(
+        --fds-internal-modal-closeButton-topInset,
+        var(--fds-spacing-16)
+    );right:var(
+        --fds-internal-modal-closeButton-rightInset,
+        var(--fds-spacing-16)
+    );padding:0;color:var(--fds-colour-icon);}.ccgs01o svg{height:2rem;width:2rem;}:where(body.fds-breakpoint-sm-max) .ccgs01o{right:var(
+            --fds-internal-modal-closeButton-rightInset,
+            var(--fds-spacing-20)
+        );}}

package/modal/modal.d.ts

@@ -1,2 +1,2 @@
 import type { ModalProps } from "./types";
-export declare const Modal: ({ id, show, animationFrom, children, enableOverlayClick, rootComponentId, zIndex, onOverlayClick, dismissKeyboardOnShow, ...otherProps }: ModalProps) => JSX.Element;
+export declare const Modal: ({ id, show, animationFrom, children, enableOverlayClick, rootComponentId, zIndex, onOverlayClick, dismissKeyboardOnShow, className, ...otherProps }: ModalProps) => JSX.Element;

package/modal/modal.js

@@ -1,2 +1,2 @@
-import{__rest as o}from"../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import{useEffect as r}from"react";import{Overlay as i}from"../overlay/overlay.js";import{useViewport as t}from"../shared/hooks/useViewport.js";import{Container as a}from"./modal.styles.js";const l=l=>{var{id:n="modal",show:s,animationFrom:d="bottom",children:m,enableOverlayClick:c=!0,rootComponentId:v,zIndex:h,onOverlayClick:p,dismissKeyboardOnShow:y=!0}=l,f=o(l,["id","show","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow"]);const{verticalHeight:b,offsetTop:O}=t();return r((()=>{var o,e;s&&y&&(null===(e=null===(o=document.activeElement)||void 0===o?void 0:o.blur)||void 0===e||e.call(o))}),[s]),e(i,{"data-testid":`${n}-overlay`,show:s,enableOverlayClick:c,onOverlayClick:p,id:n,rootId:v,zIndex:h,children:e(a,Object.assign({$show:s,$animationFrom:d,"data-testid":n,$verticalHeight:b,$offsetTop:O},f,{children:m}))})};export{l as Modal};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import o from"clsx";import r,{useRef as i}from"react";import{Overlay as l}from"../overlay/overlay.js";import{useViewport as m}from"../shared/hooks/useViewport.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as s}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useEvent as n}from"../util/use-event.js";import{tokens as a,container as d,containerFromRight as p,containerFromLeft as c,containerFromBottom as h,containerFromTop as u,containerFromRightShow as v,containerFromLeftShow as j,containerFromBottomShow as y,containerFromTopShow as f,containerShow as b,containerHide as k}from"./modal.styles.js";const x={top:u,bottom:h,left:c,right:p},O={top:f,bottom:y,left:j,right:v},C=p=>{var{id:c="modal",show:h,animationFrom:u="bottom",children:v,enableOverlayClick:j=!0,rootComponentId:y,zIndex:f,onOverlayClick:C,dismissKeyboardOnShow:g=!0,className:w}=p,I=e(p,["id","show","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","className"]);const z=n((()=>{var e,t;g&&(null===(t=null===(e=document.activeElement)||void 0===e?void 0:e.blur)||void 0===t||t.call(e))})),{verticalHeight:N,ready:S}=m({enabled:h,onBeforeStart:z}),q=i(null),E=i(null),F=v&&r.cloneElement(v,{ref:q});return s(E,{[a.container.verticalHeight]:null==N?null:`${N}px`}),t(l,{"data-testid":`${c}-overlay`,show:h,enableOverlayClick:j,onOverlayClick:C,id:c,rootId:y,containerRef:q,zIndex:f,children:t("div",Object.assign({ref:E,"data-testid":c},I,{className:o(d,x[u],h&&S?[O[u],b]:k,w),children:F}))})};export{C as Modal};
 //# sourceMappingURL=modal.js.map

package/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../src/modal/modal.tsx"],"sourcesContent":["import { useEffect } from \"react\";\n\nimport { Overlay } from \"../overlay/overlay\";\nimport { useViewport } from \"../shared/hooks\";\nimport { Container } from \"./modal.styles\";\nimport type { ModalProps } from \"./types\";\n\nexport const Modal = ({\n    id = \"modal\",\n    show,\n    animationFrom = \"bottom\",\n    children,\n    enableOverlayClick = true,\n    rootComponentId,\n    zIndex,\n    onOverlayClick,\n    dismissKeyboardOnShow = true,\n    ...otherProps\n}: ModalProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const { verticalHeight, offsetTop } = useViewport();\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    }, [show]);\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <Overlay\n            data-testid={`${id}-overlay`}\n            show={show}\n            enableOverlayClick={enableOverlayClick}\n            onOverlayClick={onOverlayClick}\n            id={id}\n            rootId={rootComponentId}\n            zIndex={zIndex}\n        >\n            <Container\n                $show={show}\n                $animationFrom={animationFrom}\n                data-testid={id}\n                $verticalHeight={verticalHeight}\n                $offsetTop={offsetTop}\n                {...otherProps}\n            >\n                {children}\n            </Container>\n        </Overlay>\n    );\n};\n"],"names":["Modal","_a","id","show","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","otherProps","__rest","verticalHeight","offsetTop","useViewport","useEffect","_b","document","activeElement","blur","_jsx","Overlay","rootId","Container","Object","assign","$show","$animationFrom","$verticalHeight","$offsetTop"],"mappings":"oRAOO,MAAMA,EAASC,IAAA,IAAAC,GAClBA,EAAK,QAAOC,KACZA,EAAIC,cACJA,EAAgB,SAAQC,SACxBA,EAAQC,mBACRA,GAAqB,EAAIC,gBACzBA,EAAeC,OACfA,EAAMC,eACNA,EAAcC,sBACdA,GAAwB,GAAIT,EACzBU,EAAUC,EAAAX,EAVK,mIAelB,MAAMY,eAAEA,EAAcC,UAAEA,GAAcC,IAetC,OAVAC,GAAU,aACFb,GAAQO,YAERO,EAAuC,UAAtCC,SAASC,qBAA6B,IAAAlB,OAAA,EAAAA,EAAEmB,6BAC7C,GACD,CAACjB,IAMAkB,EAACC,EAAO,CAAA,cACS,GAAGpB,YAChBC,KAAMA,EACNG,mBAAoBA,EACpBG,eAAgBA,EAChBP,GAAIA,EACJqB,OAAQhB,EACRC,OAAQA,EAAMH,SAEdgB,EAACG,EAASC,OAAAC,OAAA,CAAAC,MACCxB,EAAIyB,eACKxB,EAAa,cAChBF,EAAE2B,gBACEhB,EAAciB,WACnBhB,GACRH,YAEHN,MAEC"}
+{"version":3,"file":"modal.js","sources":["../../src/modal/modal.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useRef } from \"react\";\n\nimport type { ModalAnimationDirection } from \"../modal-v2/types\";\nimport { Overlay } from \"../overlay/overlay\";\nimport { useViewport } from \"../shared/hooks\";\nimport { useApplyStyle } from \"../theme\";\nimport { useEvent } from \"../util\";\nimport * as styles from \"./modal.styles\";\nimport type { ModalProps } from \"./types\";\n\nconst ANIMATION_FROM_CLASS_MAP: Record<ModalAnimationDirection, string> = {\n    top: styles.containerFromTop,\n    bottom: styles.containerFromBottom,\n    left: styles.containerFromLeft,\n    right: styles.containerFromRight,\n};\n\nconst ANIMATION_FROM_SHOW_CLASS_MAP: Record<ModalAnimationDirection, string> = {\n    top: styles.containerFromTopShow,\n    bottom: styles.containerFromBottomShow,\n    left: styles.containerFromLeftShow,\n    right: styles.containerFromRightShow,\n};\n\nexport const Modal = ({\n    id = \"modal\",\n    show,\n    animationFrom = \"bottom\",\n    children,\n    enableOverlayClick = true,\n    rootComponentId,\n    zIndex,\n    onOverlayClick,\n    dismissKeyboardOnShow = true,\n    className,\n    ...otherProps\n}: ModalProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const dismissKeyboard = useEvent(() => {\n        if (dismissKeyboardOnShow) {\n            (document.activeElement as HTMLElement)?.blur?.();\n        }\n    });\n    const { verticalHeight, ready } = 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    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <Overlay\n            data-testid={`${id}-overlay`}\n            show={show}\n            enableOverlayClick={enableOverlayClick}\n            onOverlayClick={onOverlayClick}\n            id={id}\n            rootId={rootComponentId}\n            containerRef={childRef}\n            zIndex={zIndex}\n        >\n            <div\n                ref={containerRef}\n                data-testid={id}\n                {...otherProps}\n                className={clsx(\n                    styles.container,\n                    ANIMATION_FROM_CLASS_MAP[animationFrom],\n                    show && ready\n                        ? [\n                              ANIMATION_FROM_SHOW_CLASS_MAP[animationFrom],\n                              styles.containerShow,\n                          ]\n                        : styles.containerHide,\n                    className\n                )}\n            >\n                {childWithRef}\n            </div>\n        </Overlay>\n    );\n};\n"],"names":["ANIMATION_FROM_CLASS_MAP","top","styles.containerFromTop","bottom","styles.containerFromBottom","left","styles.containerFromLeft","right","styles.containerFromRight","ANIMATION_FROM_SHOW_CLASS_MAP","styles.containerFromTopShow","styles.containerFromBottomShow","styles.containerFromLeftShow","styles.containerFromRightShow","Modal","_a","id","show","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","className","otherProps","__rest","dismissKeyboard","useEvent","_b","document","activeElement","blur","verticalHeight","ready","useViewport","enabled","onBeforeStart","childRef","useRef","containerRef","childWithRef","React","cloneElement","ref","useApplyStyle","styles.tokens","container","_jsx","Overlay","rootId","Object","assign","clsx","styles.container","styles.containerShow","styles.containerHide"],"mappings":"ulCAWA,MAAMA,EAAoE,CACtEC,IAAKC,EACLC,OAAQC,EACRC,KAAMC,EACNC,MAAOC,GAGLC,EAAyE,CAC3ER,IAAKS,EACLP,OAAQQ,EACRN,KAAMO,EACNL,MAAOM,GAGEC,EAASC,IAAA,IAAAC,GAClBA,EAAK,QAAOC,KACZA,EAAIC,cACJA,EAAgB,SAAQC,SACxBA,EAAQC,mBACRA,GAAqB,EAAIC,gBACzBA,EAAeC,OACfA,EAAMC,eACNA,EAAcC,sBACdA,GAAwB,EAAIC,UAC5BA,GAASV,EACNW,EAAUC,EAAAZ,EAXK,+IAgBlB,MAAMa,EAAkBC,GAAS,aACzBL,YACAM,EAAuC,UAAtCC,SAASC,qBAA6B,IAAAjB,OAAA,EAAAA,EAAEkB,6BAC7C,KAEEC,eAAEA,EAAcC,MAAEA,GAAUC,EAAY,CAC1CC,QAASpB,EACTqB,cAAeV,IAEbW,EAAWC,EAAuB,MAClCC,EAAeD,EAAuB,MACtCE,EACFvB,GAAYwB,EAAMC,aAAazB,EAAU,CAAE0B,IAAKN,IAUpD,OARAO,EAAcL,EAAc,CACxB,CAACM,EAAcC,UAAUd,gBACH,MAAlBA,EAAyB,KAAO,GAAGA,QAOvCe,EAACC,EAAO,CAAA,cACS,GAAGlC,YAChBC,KAAMA,EACNG,mBAAoBA,EACpBG,eAAgBA,EAChBP,GAAIA,EACJmC,OAAQ9B,EACRoB,aAAcF,EACdjB,OAAQA,EAAMH,SAEd8B,EAAA,MAAAG,OAAAC,OAAA,CACIR,IAAKJ,EAAY,cACJzB,GACTU,EAAU,CACdD,UAAW6B,EACPC,EACAvD,EAAyBkB,GACzBD,GAAQkB,EACF,CACI1B,EAA8BS,GAC9BsC,GAEJC,EACNhC,GACHN,SAEAuB,MAEC"}

package/modal/modal.styles.d.ts

@@ -1,9 +1,20 @@
-import type { ModalAnimationDirection } from "../modal-v2/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 {};
+export declare const tokens: {
+    readonly container: {
+        readonly verticalHeight: "--fds-internal-modal-container-verticalHeight";
+    };
+    readonly closeButton: {
+        readonly topInset: "--fds-internal-modal-closeButton-topInset";
+        readonly rightInset: "--fds-internal-modal-closeButton-rightInset";
+    };
+};
+export declare const container: import("@linaria/core").LinariaClassName;
+export declare const containerFromTop: import("@linaria/core").LinariaClassName;
+export declare const containerFromBottom: import("@linaria/core").LinariaClassName;
+export declare const containerFromLeft: import("@linaria/core").LinariaClassName;
+export declare const containerFromRight: import("@linaria/core").LinariaClassName;
+export declare const containerShow: import("@linaria/core").LinariaClassName;
+export declare const containerHide: import("@linaria/core").LinariaClassName;
+export declare const containerFromTopShow: import("@linaria/core").LinariaClassName;
+export declare const containerFromBottomShow: import("@linaria/core").LinariaClassName;
+export declare const containerFromLeftShow: import("@linaria/core").LinariaClassName;
+export declare const containerFromRightShow: import("@linaria/core").LinariaClassName;

package/modal/modal.styles.js

@@ -1,19 +1,2 @@
-import t from"styled-components";import{V3_MediaQuery as i}from"../v3_theme/index.js";const e=t.div`
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
-    ${t=>{return i=t.$show,e=t.$animationFrom||"bottom",i?`\n\t\t\t${e}: 0;\n\t\t\topacity: 1;\n\t\t\ttransition: all 300ms cubic-bezier(0.21, 0.79, 0.53, 1);\n\t\t\ttransition-delay: 200ms;\n\t\t`:`\n\t\t${e}: -3%;\n\t\topacity: 0;\n\t\ttransition: all 300ms cubic-bezier(0.4, 0.34, 0.38, 1);\n\t`;var i,e}}
-
-    ${i.MaxWidth.sm} {
-        height: calc(
-            ${t=>t.$verticalHeight?`${t.$verticalHeight}px`:"1vh"} * 100
-        );
-
-        top: ${t=>t.$offsetTop||0}px;
-    }
-`;export{e as Container};
+import"./modal.styles_1lbblx6.css";const c={container:{verticalHeight:"--fds-internal-modal-container-verticalHeight"}},t="czahu6t",o="c16tlthj",a="c19r0uwy",e="c11f2a4r",l="ck9rog9",r="c140nooo",i="c1d9ucpb",n="c1jimj00",d="c16qcfjk",s="cgnow3g",g="c14dyqe6";export{t as container,a as containerFromBottom,d as containerFromBottomShow,e as containerFromLeft,s as containerFromLeftShow,l as containerFromRight,g as containerFromRightShow,o as containerFromTop,n as containerFromTopShow,i as containerHide,r as containerShow,c as tokens};
 //# sourceMappingURL=modal.styles.js.map

package/modal/modal.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.styles.js","sources":["../../src/modal/modal.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport type { ModalAnimationDirection } from \"../modal-v2/types\";\nimport { V3_MediaQuery } from \"../v3_theme\";\n\ninterface Props {\n    $show: boolean;\n    $animationFrom?: ModalAnimationDirection;\n    $verticalHeight?: number;\n    $offsetTop?: number;\n}\n\nconst visibilityStyle = (\n    show: boolean,\n    animationFrom: ModalAnimationDirection\n) => {\n    if (show) {\n        return `\n\t\t\t${animationFrom}: 0;\n\t\t\topacity: 1;\n\t\t\ttransition: all 300ms cubic-bezier(0.21, 0.79, 0.53, 1);\n\t\t\ttransition-delay: 200ms;\n\t\t`;\n    }\n\n    return `\n\t\t${animationFrom}: -3%;\n\t\topacity: 0;\n\t\ttransition: all 300ms cubic-bezier(0.4, 0.34, 0.38, 1);\n\t`;\n};\n\nexport const Container = styled.div<Props>`\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n    width: 100%;\n    overflow: hidden;\n    ${(props) => visibilityStyle(props.$show, props.$animationFrom || \"bottom\")}\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        height: calc(\n            ${(props) =>\n                    props.$verticalHeight\n                        ? `${props.$verticalHeight}px`\n                        : \"1vh\"} * 100\n        );\n\n        top: ${(props) => props.$offsetTop || 0}px;\n    }\n`;\n"],"names":["Container","styled","div","props","visibilityStyle","show","$show","animationFrom","$animationFrom","V3_MediaQuery","MaxWidth","sm","$verticalHeight","$offsetTop"],"mappings":"sFAYA,MAoBaA,EAAYC,EAAOC,GAAU;;;;;;;;MAQnCC,IAAUC,OA3BbC,EA2B6BF,EAAMG,MA1BnCC,EA0B0CJ,EAAMK,gBAAkB,SAxB9DH,EACO,WACVE,iIAOM,SACPA,4FAdoB,IACpBF,EACAE,CA0B2E;;MAEzEE,EAAcC,SAASC;;cAEdR,GACKA,EAAMS,gBACA,GAAGT,EAAMS,oBACT;;;eAGVT,GAAUA,EAAMU,YAAc;;"}
+{"version":3,"file":"modal.styles.js","sources":["../../src/modal/modal.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { MediaQuery } from \"../theme\";\n\nexport const tokens = {\n    container: {\n        verticalHeight: \"--fds-internal-modal-container-verticalHeight\",\n    },\n    closeButton: {\n        topInset: \"--fds-internal-modal-closeButton-topInset\",\n        rightInset: \"--fds-internal-modal-closeButton-rightInset\",\n    },\n} as const;\n\nexport const container = css`\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n    width: 100%;\n    overflow: hidden;\n\n    ${tokens.container.verticalHeight}: initial;\n    ${tokens.closeButton.topInset}: initial;\n    ${tokens.closeButton.rightInset}: initial;\n\n    ${MediaQuery.MaxWidth.sm} {\n        height: calc(var(${tokens.container.verticalHeight}, 1vh) * 100);\n    }\n`;\n\nexport const containerFromTop = css`\n    top: -3%;\n`;\n\nexport const containerFromBottom = css`\n    bottom: -3%;\n`;\n\nexport const containerFromLeft = css`\n    left: -3%;\n`;\n\nexport const containerFromRight = css`\n    right: -3%;\n`;\n\nexport const containerShow = css`\n    opacity: 1;\n    transition: all 300ms cubic-bezier(0.21, 0.79, 0.53, 1);\n    transition-delay: 200ms;\n`;\n\nexport const containerHide = css`\n    opacity: 0;\n    transition: all 300ms cubic-bezier(0.4, 0.34, 0.38, 1);\n`;\n\nexport const containerFromTopShow = css`\n    top: 0;\n`;\n\nexport const containerFromBottomShow = css`\n    bottom: 0;\n`;\n\nexport const containerFromLeftShow = css`\n    left: 0;\n`;\n\nexport const containerFromRightShow = css`\n    right: 0;\n`;\n"],"names":["tokens","container","verticalHeight","containerFromTop","containerFromBottom","containerFromLeft","containerFromRight","containerShow","containerHide","containerFromTopShow","containerFromBottomShow","containerFromLeftShow","containerFromRightShow"],"mappings":"wDAIO,MAAMA,EAAS,CAClBC,UAAW,CACPC,eAAgB,kDAQXD,EAAS,UAkBTE,EAAgB,WAIhBC,EAAmB,WAInBC,EAAiB,WAIjBC,EAAkB,UAIlBC,EAAa,WAMbC,EAAa,WAKbC,EAAoB,WAIpBC,EAAuB,WAIvBC,EAAqB,UAIrBC,EAAsB"}

package/modal/modal.styles_1lbblx6.css

@@ -0,0 +1,11 @@
+@layer fds{.czahu6t{position:relative;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;height:100%;width:100%;overflow:hidden;--fds-internal-modal-container-verticalHeight:initial;--fds-internal-modal-closeButton-topInset:initial;--fds-internal-modal-closeButton-rightInset:initial;}:where(body.fds-breakpoint-sm-max) .czahu6t{height:calc(var(--fds-internal-modal-container-verticalHeight, 1vh) * 100);}
+.c16tlthj{top:-3%;}
+.c19r0uwy{bottom:-3%;}
+.c11f2a4r{left:-3%;}
+.ck9rog9{right:-3%;}
+.c140nooo{opacity:1;-webkit-transition:all 300ms cubic-bezier(0.21, 0.79, 0.53, 1);transition:all 300ms cubic-bezier(0.21, 0.79, 0.53, 1);transition-delay:200ms;}
+.c1d9ucpb{opacity:0;-webkit-transition:all 300ms cubic-bezier(0.4, 0.34, 0.38, 1);transition:all 300ms cubic-bezier(0.4, 0.34, 0.38, 1);}
+.c1jimj00{top:0;}
+.c16qcfjk{bottom:0;}
+.cgnow3g{left:0;}
+.c14dyqe6{right:0;}}

package/modal/types.d.ts

@@ -1,19 +1,74 @@
 import type { ModalAnimationDirection } from "../modal-v2/types";
+/**
+ * Props for the `Modal` component.
+ * @deprecated Use `ModalV2` instead, which provides improved scroll behaviour and accessibility.
+ */
 export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Controls whether the modal is visible.
+     *
+     * @default false
+     */
     show: boolean;
-    children: React.ReactNode;
-    /** Animation direction of appearance and dismissal. Values: "top" | "bottom" | "left" | "right" */
+    /**
+     * 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.
+     */
+    children: React.JSX.Element;
+    /**
+     * Direction from which the modal slides in and out.
+     *
+     * @default "bottom"
+     */
     animationFrom?: ModalAnimationDirection | undefined;
+    /**
+     * Whether clicking the overlay backdrop dismisses the modal.
+     *
+     * @default true
+     */
     enableOverlayClick?: boolean | undefined;
-    /** The identifier of the element to inject the Modal into */
+    /**
+     * The `id` of the DOM element to portal the modal into.
+     *
+     * @default document.body
+     */
     rootComponentId?: string | undefined;
+    /**
+     * The z-index applied to the overlay stack.
+     */
     zIndex?: number | undefined;
+    /**
+     * Called when the overlay backdrop is clicked and `enableOverlayClick` is
+     * `true`.
+     */
     onOverlayClick?: (() => void) | undefined;
-    /** Dismiss keyboard to keep modal in fullscreen */
+    /**
+     * Blurs the currently focused element when the modal becomes visible,
+     * dismissing the on-screen keyboard on mobile to prevent it from
+     * obscuring the modal.
+     *
+     * @default true
+     */
     dismissKeyboardOnShow?: boolean | undefined;
 }
+/**
+ * Props for the `Modal.Box` sub-component.
+ * @deprecated Use `ModalV2.Card` instead.
+ */
 export interface ModalBoxProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
+    /**
+     * Whether to render the close button in the top-right corner of the box.
+     *
+     * @default true
+     */
     showCloseButton?: boolean | undefined;
+    /**
+     * Called when the close button is clicked.
+     */
     onClose?: (() => void) | undefined;
+    /**
+     * Ref to the modal box DOM element. When used within `Modal`, the default `ref` is not available and you can specify this instead.
+     */
+    elementRef?: React.Ref<HTMLDivElement> | undefined;
 }

package/modal-v2/index.d.ts

@@ -1,19 +1,2 @@
-export declare const ModalV2: (({ id, show, onClose, animationFrom, children, enableOverlayClick, rootComponentId, zIndex, onOverlayClick, dismissKeyboardOnShow, "data-testid": testId, ...otherProps }: import("./types").ModalV2Props) => JSX.Element) & {
-    Card: {
-        ({ id, "data-testid": testId, children, ...otherProps }: import("./types").ModalCardProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    CloseButton: {
-        ({ "data-testid": testId, ...otherProps }: import("./types").ModalCloseButtonProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    Content: {
-        ({ "data-testid": testId, children, ...otherProps }: import("./types").ModalContentProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    Footer: {
-        ({ "data-testid": testId, primaryButton, secondaryButton, ...otherProps }: import("./types").ModalFooterProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-};
+export * from "./modal-v2";
 export * from "./types";

package/modal-v2/index.js

@@ -1,2 +1,2 @@
-import{ModalV2 as o}from"./modal-v2.js";import{Card as t}from"./slots/card.js";import{CloseButton as s}from"./slots/close-button.js";import{Content as r}from"./slots/content.js";import{Footer as m}from"./slots/footer.js";const e=Object.assign(o,{Card:t,CloseButton:s,Content:r,Footer:m});export{e as ModalV2};
+export{ModalV2}from"./modal-v2.js";
 //# sourceMappingURL=index.js.map

package/modal-v2/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/modal-v2/index.ts"],"sourcesContent":["import { ModalV2 as Base } from \"./modal-v2\";\nimport { Card, CloseButton, Content, Footer } from \"./slots\";\n\nexport const ModalV2 = Object.assign(Base, {\n    Card,\n    CloseButton,\n    Content,\n    Footer,\n});\n\nexport * from \"./types\";\n"],"names":["ModalV2","Object","assign","Base","Card","CloseButton","Content","Footer"],"mappings":"mOAGaA,EAAUC,OAAOC,OAAOC,EAAM,CACvCC,OACAC,cACAC,UACAC"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -1,2 +1,39 @@
+import React from "react";
 import type { ModalV2Props } from "./types";
-export declare const ModalV2: ({ id, show, onClose, animationFrom, children, enableOverlayClick, rootComponentId, zIndex, onOverlayClick, dismissKeyboardOnShow, "data-testid": testId, ...otherProps }: ModalV2Props) => JSX.Element;
+/**
+ * A composable modal dialog with slot-based content layout.
+ *
+ * Use `ModalV2` when you need a controlled overlay dialog with structured
+ * content slots.
+ *
+ * Sub-components:
+ * - `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.
+ * - `ModalV2.CloseButton` — renders an accessible close button that invokes the modal's `onClose` callback.
+ * - `ModalV2.Content` — container for the body content of the modal card.
+ * - `ModalV2.Footer` — footer area for primary and secondary action buttons.
+ * @keywords dialog, overlay, popup
+ */
+export declare const ModalV2: (({ id, show, onClose, animationFrom, children, enableOverlayClick, rootComponentId, zIndex, onOverlayClick, dismissKeyboardOnShow, "data-testid": testId, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, disableInitialFocus, className, ...otherProps }: ModalV2Props) => JSX.Element) & {
+    /** Wraps modal content and arranges `Content`, `Footer`, and `CloseButton` slots in the correct layout. Supports a `fullscreen` prop. */
+    Card: (props: import("./types").ModalCardProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+    /** Renders an accessible close button that invokes the modal's `onClose` callback. */
+    CloseButton: {
+        ({ "data-testid": testId, className, ...otherProps }: import("./types").ModalCloseButtonProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /** Container for the body content of the modal card. */
+    Content: {
+        ({ "data-testid": testId, children, className, ...otherProps }: import("./types").ModalContentProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /** Footer area for primary and secondary action buttons. */
+    Footer: {
+        ({ "data-testid": testId, primaryButton, secondaryButton, className, ...otherProps }: import("./types").ModalFooterProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /** Header bar with a close button and optional title. Use instead of `CloseButton` when a heading is needed. */
+    Header: {
+        ({ "data-testid": testId, title, closeButtonPosition, className, ...otherProps }: import("./types").ModalHeaderProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};

package/modal-v2/modal-v2.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"modal-v2.js","sources":["../../src/modal-v2/modal-v2.tsx"],"sourcesContent":["import {\n    FloatingFocusManager,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useTransitionStatus,\n} from \"@floating-ui/react\";\nimport { 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, { 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":"4yCAmBA,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,EAAAlB,EAjBH,CAAA,KAAA,OAAA,UAAA,gBAAA,WAAA,qBAAA,kBAAA,SAAA,iBAAA,wBAAA,cAAA,aAAA,kBAAA,mBAAA,sBAAA,cAsBV,MAAMmB,EAAkBC,GAAS,aACzBV,YACAW,EAAuC,UAAtCC,SAASC,qBAA6B,IAAAvB,OAAA,EAAAA,EAAEwB,6BAC7C,KAEEC,eAAEA,GAAmBC,EAAY,CACnCC,QAASzB,EACT0B,cAAeT,IAEbU,EAAWC,EAAuB,MAClCC,EAAeD,EAAuB,MACtCE,EACF3B,GAAY4B,EAAMC,aAAa7B,EAAU,CAAE8B,IAAKN,IAEpDO,EAAcL,EAAc,CACxB,CAACM,EAAcC,UAAUb,gBACH,MAAlBA,EAAyB,KAAO,GAAGA,QAM3C,MAAMc,KAAEA,EAAIC,QAAEA,GAAYC,EAAY,CAClCC,KAAMxC,EACNyC,aAAeC,IACNA,GACDzC,SAAAA,GACJ,KAGF0C,UAAEA,EAASC,OAAEA,GAAWC,EAAoBP,EAAS,CACvDQ,SAAU,MAERC,EAAUC,EAAWV,EAAS,CAEhCW,cAAc,EACdxB,UAAWxB,KAETiD,iBAAEA,GAAqBC,EAAgB,CAACJ,IAK9C,OACIK,EAACC,EAAO,CAAA,cACS,GAAG5C,YAChBT,KAAMA,EACNI,mBAAoBA,EACpBG,eAAgBA,EAChBR,GAAIA,EACJuD,OAAQjD,EACRwB,aAAcF,EACdrB,OAAQA,EAAMH,SAEdiD,EAAA,MAAAxD,OAAAC,OAAA,CACIoC,IAAKJ,EAAY,cACJpB,EAAM,cACNmC,EAAM,sBACE1C,GACjBa,GACJD,UAAWyC,EAAKC,EAAkB1C,GAAUX,SAE5CiD,EAACK,EAAaC,SAAQ,CAACC,MAAO,CAAE1D,WAASE,SACpCwC,GACGS,EAACQ,EAAoB,CACjBtB,QAASA,EACTuB,aACIhD,GAAsB,EAAKwB,EAAKyB,SAAQ3D,SAG5CiD,EAAA,MAAA,CAAKtC,UAAWiD,EAAsB5D,SAClCiD,EAAA,MAAAxD,OAAAC,OAAA,CACIoC,IAAKI,EAAK2B,aACNd,IAAkB,CACtBe,KAAK,SAAQ,aACDvD,EAAS,kBACJC,EAAc,mBACbC,EAClBE,UAAWoD,WAEVpC,eAOnB,GAkByB,CAEvCqC,OAEAC,cAEAC,UAEAC,SAEAC"}

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

@@ -1,11 +1,8 @@
-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";
+    };
+};
+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_a8gv5i.css";const i={container:{verticalHeight:"--fds-internal-modalV2-container-verticalHeight"}},t="c1jrmyjd",a="s1xsiaxz",e="mn5ir3";export{t as container,e as modalContainer,a as scrollContainer,i 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    },\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":["tokens","container","verticalHeight","scrollContainer","modalContainer"],"mappings":"6DAQO,MAAMA,EAAS,CAClBC,UAAW,CACPC,eAAgB,oDAIXD,EAAS,WAiETE,EAAe,WAQfC,EAAc"}

package/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/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 e from"clsx";import o from"react";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{mergeRefs as i}from"../../util/merge-refs.js";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import s from"../../util/is-styled-components.js";import{CloseButton as a}from"./close-button.js";import{Content as m}from"./content.js";import{Footer as l}from"./footer.js";import{Header as n}from"./header.js";import{slotSpacer as d,fullscreenSlotSpacer as p,cardBase as c,fullscreenModalCard as f,modalCard as j}from"./slot-styles.js";const u=o.forwardRef((function(u,h){var{id:y,"data-testid":g="modal-card",children:v,className:N,elementRef:b,fullscreen:x}=u,C=t(u,["id","data-testid","children","className","elementRef","fullscreen"]);const R=t=>o.Children.toArray(v).find((r=>((t,r)=>s(t.type)?t.type.target===r:t.type===r)(r,t))),_=R(a),k=R(m),w=R(l),A=R(n),M=!!_||!!A;return r("div",Object.assign({ref:i(h,b),id:y,"data-testid":g},C,{onClick:t=>{t.stopPropagation()},className:e(c,x?f:j,N),children:[r("div",{"data-has-close-button":!!M,className:e(d,x&&p),children:[k,w]}),M&&(A||_)]}))}));u.displayName="ModalV2.Card";export{u as Card};
 //# sourceMappingURL=card.js.map