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

package/cjs/menu/menu-content.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-content.styles.js","sources":["../../../src/menu/menu-content.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport type { PopoverOverflowType } from \"../popover-v2/types\";\nimport {\n    V3_Border,\n    V3_Breakpoint,\n    V3_Colour,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Shadow,\n} from \"../v3_theme\";\n\n// =============================================================================\n// STYLES INTERFACE\n// =============================================================================\ninterface MenuPanelStylesProps {\n    $overflow?: PopoverOverflowType | undefined;\n    $maxHeight?: number | undefined;\n}\n\n// =============================================================================\n// MENU CONTENT STYLES\n// =============================================================================\nexport const MenuPanel = styled.div<MenuPanelStylesProps>`\n    border-radius: ${V3_Radius[\"md\"]};\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n    background: ${V3_Colour[\"bg\"]};\n    box-shadow: ${V3_Shadow[\"md-subtle\"]};\n\n    --x-spacing: 0px;\n    --available-width: calc(100vw - var(--x-spacing) * 2);\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        --x-spacing: ${V3_Breakpoint[\"sm-margin\"]}px;\n    }\n\n    ${V3_MediaQuery.MaxWidth.xs} {\n        --x-spacing: ${V3_Breakpoint[\"xs-margin\"]}px;\n    }\n\n    ${V3_MediaQuery.MaxWidth.xxs} {\n        --x-spacing: ${V3_Breakpoint[\"xxs-margin\"]}px;\n    }\n\n    min-width: min(15rem, var(--available-width));\n    max-width: min(24rem, var(--available-width));\n\n    ${({ $maxHeight }) =>\n        $maxHeight !== undefined &&\n        `\n        max-height: ${$maxHeight}px;\n    `}\n\n    ${({ $overflow }) =>\n        $overflow &&\n        `\n        overflow-y: ${$overflow};\n    `}\n\n    &:focus {\n        outline: none;\n    }\n\n    &::-webkit-scrollbar {\n        width: 14px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: ${V3_Colour[\"bg-inverse-subtlest\"]};\n        border: 5px solid transparent;\n        border-radius: ${V3_Radius[\"full\"]};\n        background-clip: padding-box;\n    }\n`;\n"],"names":["MenuPanel","styled","div","V3_Radius","V3_Border","V3_Colour","V3_Shadow","V3_MediaQuery","MaxWidth","sm","V3_Breakpoint","xs","xxs","$maxHeight","undefined","$overflow"],"mappings":"0JAuBO,MAAMA,OAAYC,QAAOC,GAAyB;qBACpCC,EAAAA,UAAc;cACrBC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;UAC/CC,EAAAA,UAAkB;kBACVA,EAAAA,UAAc;kBACdC,EAAAA,UAAU;;;;;MAKtBC,EAAAA,cAAcC,SAASC;uBACNC,EAAAA,cAAc;;;MAG/BH,EAAAA,cAAcC,SAASG;uBACND,EAAAA,cAAc;;;MAG/BH,EAAAA,cAAcC,SAASI;uBACNF,EAAAA,cAAc;;;;;;MAM/B,EAAGG,qBACcC,IAAfD,GACA,yBACcA;;MAGhB,EAAGE,eACDA,GACA,yBACcA;;;;;;;;;;;;;;;sBAgBAV,EAAAA,UAAU;;yBAEPF,EAAAA,UAAgB;;;"}
+{"version":3,"file":"menu-content.styles.js","sources":["../../../src/menu/menu-content.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Border,\n    Breakpoint,\n    Colour,\n    MediaQuery,\n    Radius,\n    Shadow,\n} from \"../theme/tokens\";\n\nexport const tokens = {\n    panel: {\n        availableWidth: \"--fds-internal-menu-panel-availableWidth\",\n        maxHeight: \"--fds-internal-menu-panel-maxHeight\",\n        overflow: \"--fds-internal-menu-panel-overflow\",\n        xSpacing: \"--fds-internal-menu-panel-xSpacing\",\n    },\n} as const;\n\nexport const panel = css`\n    border-radius: ${Radius[\"md\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    background: ${Colour[\"bg\"]};\n    box-shadow: ${Shadow[\"md-subtle\"]};\n\n    ${tokens.panel.maxHeight}: initial;\n    ${tokens.panel.overflow}: initial;\n    ${tokens.panel.xSpacing}: 0px;\n    ${tokens.panel.availableWidth}: calc(100vw - var(${tokens.panel\n        .xSpacing}) * 2);\n\n    ${MediaQuery.MaxWidth.sm} {\n        ${tokens.panel.xSpacing}: ${Breakpoint[\"sm-margin\"]};\n    }\n\n    ${MediaQuery.MaxWidth.xs} {\n        ${tokens.panel.xSpacing}: ${Breakpoint[\"xs-margin\"]};\n    }\n\n    ${MediaQuery.MaxWidth.xxs} {\n        ${tokens.panel.xSpacing}: ${Breakpoint[\"xxs-margin\"]};\n    }\n\n    min-width: min(15rem, var(${tokens.panel.availableWidth}));\n    max-width: min(24rem, var(${tokens.panel.availableWidth}));\n    max-height: var(${tokens.panel.maxHeight});\n    overflow-y: var(${tokens.panel.overflow});\n\n    &:focus {\n        outline: none;\n    }\n\n    &::-webkit-scrollbar {\n        width: 14px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: ${Colour[\"bg-inverse-subtlest\"]};\n        border: 5px solid transparent;\n        border-radius: ${Radius[\"full\"]};\n        background-clip: padding-box;\n    }\n`;\n"],"names":["panel","maxHeight","overflow"],"mappings":"2FAoBkB,yBATI,CAClBA,MAAO,CAEHC,UAAW,sCACXC,SAAU"}

package/cjs/menu/menu-content.styles_p7ijll.css

@@ -0,0 +1,2 @@
+@layer fds{.pmssexq{border-radius:var(--fds-radius-md);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);background:var(--fds-colour-bg);box-shadow:var(--fds-shadow-md-subtle);--fds-internal-menu-panel-maxHeight:initial;--fds-internal-menu-panel-overflow:initial;--fds-internal-menu-panel-xSpacing:0px;--fds-internal-menu-panel-availableWidth:calc(100vw - var(--fds-internal-menu-panel-xSpacing
+              ) * 2);min-width:min(15rem, var(--fds-internal-menu-panel-availableWidth));max-width:min(24rem, var(--fds-internal-menu-panel-availableWidth));max-height:var(--fds-internal-menu-panel-maxHeight);overflow-y:var(--fds-internal-menu-panel-overflow);}:where(body.fds-breakpoint-sm-max) .pmssexq{--fds-internal-menu-panel-xSpacing:var(--fds-breakpoint-margin-sm);}:where(body.fds-breakpoint-xs-max) .pmssexq{--fds-internal-menu-panel-xSpacing:var(--fds-breakpoint-margin-xs);}:where(body.fds-breakpoint-xxs-max) .pmssexq{--fds-internal-menu-panel-xSpacing:var(--fds-breakpoint-margin-xxs);}.pmssexq:focus{outline:none;}.pmssexq::-webkit-scrollbar{width:14px;}.pmssexq::-webkit-scrollbar-track{background:transparent;}.pmssexq::-webkit-scrollbar-thumb{background:var(--fds-colour-bg-inverse-subtlest);border:5px solid transparent;border-radius:var(--fds-radius-full);-webkit-background-clip:padding-box;background-clip:padding-box;}}

package/cjs/menu/menu-item.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("../typography/index.js"),s=require("./menu-item.styles.js");const i=i=>{var{label:a,subLabel:l,children:u,"data-testid":d="menu-item"}=i,n=e.__rest(i,["label","subLabel","children","data-testid"]);return t.jsxs(s.MenuItemDiv,Object.assign({"data-testid":d},n,{children:[a&&t.jsx(r.Typography.BodyMD,{weight:"semibold",children:a}),l&&t.jsx(s.SubLabel,{children:l}),u]}))};i.displayName="Menu.Item",exports.MenuItem=i;
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),s=require("clsx"),a=require("../typography/index.js"),r=require("./menu-item.styles.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=i(s);const u=s=>{var{label:i,subLabel:u,children:d,className:n,"data-testid":c="menu-item"}=s,m=e.__rest(s,["label","subLabel","children","className","data-testid"]);return t.jsxs("li",Object.assign({"data-testid":c,className:l.default(r.menuItemDiv,r.text,n)},m,{children:[i&&t.jsx(a.Typography.BodyMD,{className:r.text,weight:"semibold",children:i}),u&&t.jsx(a.Typography.BodySM,{className:r.subLabel,children:u}),d]}))};u.displayName="Menu.Item",exports.MenuItem=u;
 //# sourceMappingURL=menu-item.js.map

package/cjs/menu/menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.js","sources":["../../../src/menu/menu-item.tsx"],"sourcesContent":["import { Typography } from \"../typography\";\nimport { MenuItemDiv, SubLabel } from \"./menu-item.styles\";\nimport type { MenuItemProps } from \"./types\";\n\nexport const MenuItem = ({\n    label,\n    subLabel,\n    children,\n    \"data-testid\": testId = \"menu-item\",\n    ...otherProps\n}: MenuItemProps): JSX.Element => {\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <MenuItemDiv data-testid={testId} {...otherProps}>\n            {label && (\n                <Typography.BodyMD weight=\"semibold\">{label}</Typography.BodyMD>\n            )}\n            {subLabel && <SubLabel>{subLabel}</SubLabel>}\n            {children}\n        </MenuItemDiv>\n    );\n};\n\nMenuItem.displayName = \"Menu.Item\";\n"],"names":["MenuItem","_a","label","subLabel","children","testId","otherProps","__rest","_jsxs","MenuItemDiv","Object","assign","_jsx","Typography","BodyMD","weight","SubLabel","displayName"],"mappings":"0JAIO,MAAMA,EAAYC,IAAA,IAAAC,MACrBA,EAAKC,SACLA,EAAQC,SACRA,EACA,cAAeC,EAAS,aAAWJ,EAChCK,EAAUC,EAAAA,OAAAN,EALQ,+CAUrB,OACIO,EAAAA,KAACC,EAAAA,YAAWC,OAAAC,OAAA,CAAA,cAAcN,GAAYC,EAAU,CAAAF,SAAA,CAC3CF,GACGU,EAAAA,IAACC,EAAAA,WAAWC,OAAM,CAACC,OAAO,oBAAYb,IAEzCC,GAAYS,EAAAA,IAACI,EAAAA,SAAQ,CAAAZ,SAAED,IACvBC,KACS,EAItBJ,EAASiB,YAAc"}
+{"version":3,"file":"menu-item.js","sources":["../../../src/menu/menu-item.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { Typography } from \"../typography\";\nimport * as styles from \"./menu-item.styles\";\nimport type { MenuItemProps } from \"./types\";\n\nexport const MenuItem = ({\n    label,\n    subLabel,\n    children,\n    className,\n    \"data-testid\": testId = \"menu-item\",\n    ...otherProps\n}: MenuItemProps): JSX.Element => {\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <li\n            data-testid={testId}\n            className={clsx(styles.menuItemDiv, styles.text, className)}\n            {...otherProps}\n        >\n            {label && (\n                <Typography.BodyMD className={styles.text} weight=\"semibold\">\n                    {label}\n                </Typography.BodyMD>\n            )}\n            {subLabel && (\n                <Typography.BodySM className={styles.subLabel}>\n                    {subLabel}\n                </Typography.BodySM>\n            )}\n            {children}\n        </li>\n    );\n};\n\nMenuItem.displayName = \"Menu.Item\";\n"],"names":["MenuItem","_a","label","subLabel","children","className","testId","otherProps","__rest","_jsxs","Object","assign","clsx","styles.menuItemDiv","styles.text","_jsx","Typography","BodyMD","weight","BodySM","styles.subLabel","displayName"],"mappings":"+PAMO,MAAMA,EAAYC,IAAA,IAAAC,MACrBA,EAAKC,SACLA,EAAQC,SACRA,EAAQC,UACRA,EACA,cAAeC,EAAS,aAAWL,EAChCM,EAAUC,EAAAA,OAAAP,EANQ,2DAWrB,OACIQ,EAAAA,KAAA,KAAAC,OAAAC,OAAA,CAAA,cACiBL,EACbD,UAAWO,UAAKC,EAAAA,YAAoBC,EAAAA,KAAaT,IAC7CE,EAAU,CAAAH,SAAA,CAEbF,GACGa,MAACC,EAAAA,WAAWC,OAAM,CAACZ,UAAWS,EAAAA,KAAaI,OAAO,WAAUd,SACvDF,IAGRC,GACGY,MAACC,EAAAA,WAAWG,OAAM,CAACd,UAAWe,EAAAA,SAAehB,SACxCD,IAGRC,KACA,EAIbJ,EAASqB,YAAc"}

package/cjs/menu/menu-item.styles.js

@@ -1,8 +1,2 @@
-"use strict";var e=require("styled-components"),t=require("../typography/index.js"),r=require("../v3_theme/index.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=i(e);const o=n.default.li`
-    display: flex;
-    flex-direction: column;
-    padding: ${r.V3_Spacing["spacing-8"]} ${r.V3_Spacing["spacing-16"]};
-`,a=n.default(t.Typography.BodySM)`
-    color: ${r.V3_Colour["text-subtler"]};
-`;exports.MenuItemDiv=o,exports.SubLabel=a;
+"use strict";require("./menu-item.styles_liyed8.css");exports.menuItemDiv="m1ddqpur",exports.subLabel="s12tso9",exports.text="tor9xcz";
 //# sourceMappingURL=menu-item.styles.js.map

package/cjs/menu/menu-item.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.styles.js","sources":["../../../src/menu/menu-item.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { Typography } from \"../typography\";\nimport { V3_Colour, V3_Spacing } from \"../v3_theme\";\n\n// =============================================================================\n// MENU ITEM STYLES\n// =============================================================================\nexport const MenuItemDiv = styled.li`\n    display: flex;\n    flex-direction: column;\n    padding: ${V3_Spacing[\"spacing-8\"]} ${V3_Spacing[\"spacing-16\"]};\n`;\n\nexport const SubLabel = styled(Typography.BodySM)`\n    color: ${V3_Colour[\"text-subtler\"]};\n`;\n"],"names":["MenuItemDiv","styled","li","V3_Spacing","SubLabel","Typography","BodySM","V3_Colour"],"mappings":"yMAQO,MAAMA,EAAcC,EAAAA,QAAOC,EAAE;;;eAGrBC,EAAAA,WAAW,gBAAgBA,EAAAA,WAAW;EAGxCC,EAAWH,EAAAA,QAAOI,aAAWC,OAAO;aACpCC,EAAAA,UAAU;"}
+{"version":3,"file":"menu-item.styles.js","sources":["../../../src/menu/menu-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Spacing } from \"../theme/tokens\";\n\nexport const menuItemDiv = css`\n    display: flex;\n    flex-direction: column;\n    padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n`;\n\nexport const text = css`\n    color: ${Colour[\"text\"]};\n`;\n\nexport const subLabel = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n"],"names":[],"mappings":"8FAIwB,4BAUH,uBAJJ"}

package/cjs/menu/menu-item.styles_liyed8.css

@@ -0,0 +1,3 @@
+@layer fds{.m1ddqpur{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding:var(--fds-spacing-8) var(--fds-spacing-16);}
+.tor9xcz{color:var(--fds-colour-text);}
+.s12tso9{color:var(--fds-colour-text-subtler);}}

package/cjs/menu/menu-link.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),i=require("react/jsx-runtime"),n=require("./menu-link.styles.js");const t=t=>{var{children:r,"data-testid":s="menu-link"}=t,a=e.__rest(t,["children","data-testid"]);return i.jsx(n.MenuLinkDiv,{children:i.jsx(n.Link,Object.assign({"data-testid":s,underlineStyle:"none"},a,{children:r}))})};t.displayName="Menu.Link",exports.MenuLink=t;
+"use strict";var e=require("../_virtual/_tslib.js"),i=require("react/jsx-runtime"),r=require("clsx"),t=require("../typography/index.js"),n=require("./menu-link.styles.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=s(r);const l=r=>{var{children:s,className:l,"data-testid":u="menu-link"}=r,d=e.__rest(r,["children","className","data-testid"]);return i.jsx("li",{className:n.menuLinkDiv,children:i.jsx(t.Typography.LinkMD,Object.assign({"data-testid":u,underlineStyle:"none",className:a.default(n.link,l)},d,{children:s}))})};l.displayName="Menu.Link",exports.MenuLink=l;
 //# sourceMappingURL=menu-link.js.map

package/cjs/menu/menu-link.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-link.js","sources":["../../../src/menu/menu-link.tsx"],"sourcesContent":["import { Link, MenuLinkDiv } from \"./menu-link.styles\";\nimport type { MenuLinkProps } from \"./types\";\n\nexport const MenuLink = ({\n    children,\n    \"data-testid\": testId = \"menu-link\",\n    ...otherProps\n}: MenuLinkProps): JSX.Element => {\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <MenuLinkDiv>\n            <Link data-testid={testId} underlineStyle=\"none\" {...otherProps}>\n                {children}\n            </Link>\n        </MenuLinkDiv>\n    );\n};\n\nMenuLink.displayName = \"Menu.Link\";\n"],"names":["MenuLink","_a","children","testId","otherProps","__rest","_jsx","MenuLinkDiv","Link","underlineStyle","displayName"],"mappings":"sHAGO,MAAMA,EAAYC,IAAA,IAAAC,SACrBA,EACA,cAAeC,EAAS,aAAWF,EAChCG,EAAUC,EAAAA,OAAAJ,EAHQ,CAAA,WAAA,gBAQrB,OACIK,EAAAA,IAACC,EAAAA,sBACGD,EAAAA,IAACE,oCAAkBL,EAAQM,eAAe,QAAWL,EAAU,CAAAF,SAC1DA,MAEK,EAItBF,EAASU,YAAc"}
+{"version":3,"file":"menu-link.js","sources":["../../../src/menu/menu-link.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { Typography } from \"../typography\";\nimport * as styles from \"./menu-link.styles\";\nimport type { MenuLinkProps } from \"./types\";\n\nexport const MenuLink = ({\n    children,\n    className,\n    \"data-testid\": testId = \"menu-link\",\n    ...otherProps\n}: MenuLinkProps): JSX.Element => {\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <li className={styles.menuLinkDiv}>\n            <Typography.LinkMD\n                data-testid={testId}\n                underlineStyle=\"none\"\n                className={clsx(styles.link, className)}\n                {...otherProps}\n            >\n                {children}\n            </Typography.LinkMD>\n        </li>\n    );\n};\n\nMenuLink.displayName = \"Menu.Link\";\n"],"names":["MenuLink","_a","children","className","testId","otherProps","__rest","_jsx","styles.menuLinkDiv","Typography","LinkMD","Object","assign","underlineStyle","clsx","styles.link","displayName"],"mappings":"+PAMO,MAAMA,EAAYC,IAAA,IAAAC,SACrBA,EAAQC,UACRA,EACA,cAAeC,EAAS,aAAWH,EAChCI,EAAUC,EAAAA,OAAAL,EAJQ,wCASrB,OACIM,MAAA,KAAA,CAAIJ,UAAWK,EAAAA,YAAkBN,SAC7BK,EAAAA,IAACE,EAAAA,WAAWC,OAAMC,OAAAC,OAAA,CAAA,cACDR,EACbS,eAAe,OACfV,UAAWW,EAAAA,QAAKC,EAAAA,KAAaZ,IACzBE,EAAU,CAAAH,SAEbA,MAEJ,EAIbF,EAASgB,YAAc"}

package/cjs/menu/menu-link.styles.js

@@ -1,29 +1,2 @@
-"use strict";var e=require("styled-components"),r=require("../shared/styles/index.js"),o=require("../typography/index.js"),i=require("../v3_theme/index.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=t(e);const s=n.default.li`
-    display: flex;
-    flex-direction: column;
-`,a=n.default(o.Typography.LinkMD)`
-    color: ${i.V3_Colour.text};
-
-    margin: 0 ${i.V3_Spacing["spacing-8"]};
-
-    border: ${i.V3_Border.solid} transparent;
-    border-width: ${i.V3_Spacing["spacing-8"]} ${i.V3_Spacing["spacing-8"]};
-
-    border-radius: ${i.V3_Radius.md};
-
-    ${r.lineClampCss(2)}
-    white-space: pre-wrap;
-
-    &:hover,
-    &:active,
-    &:focus {
-        background-color: ${i.V3_Colour["bg-hover"]};
-        color: ${i.V3_Colour.text};
-    }
-
-    &:focus-visible {
-        outline: 2px solid ${i.V3_Colour["focus-ring"]};
-        outline-offset: 0;
-    }
-`;exports.Link=a,exports.MenuLinkDiv=s;
+"use strict";require("./menu-link.styles_hfxoez.css");exports.link="l5rk4za",exports.menuLinkDiv="mmmrhdq";
 //# sourceMappingURL=menu-link.styles.js.map

package/cjs/menu/menu-link.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-link.styles.js","sources":["../../../src/menu/menu-link.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport { Typography } from \"../typography\";\nimport { V3_Border, V3_Colour, V3_Radius, V3_Spacing } from \"../v3_theme\";\n\n// =============================================================================\n// MENU LINK STYLES\n// =============================================================================\nexport const MenuLinkDiv = styled.li`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const Link = styled(Typography.LinkMD)`\n    color: ${V3_Colour[\"text\"]};\n\n    margin: 0 ${V3_Spacing[\"spacing-8\"]};\n\n    border: ${V3_Border[\"solid\"]} transparent;\n    border-width: ${V3_Spacing[\"spacing-8\"]} ${V3_Spacing[\"spacing-8\"]};\n\n    border-radius: ${V3_Radius[\"md\"]};\n\n    ${lineClampCss(2)}\n    white-space: pre-wrap;\n\n    &:hover,\n    &:active,\n    &:focus {\n        background-color: ${V3_Colour[\"bg-hover\"]};\n        color: ${V3_Colour[\"text\"]};\n    }\n\n    &:focus-visible {\n        outline: 2px solid ${V3_Colour[\"focus-ring\"]};\n        outline-offset: 0;\n    }\n`;\n"],"names":["MenuLinkDiv","styled","li","Link","Typography","LinkMD","V3_Colour","V3_Spacing","V3_Border","V3_Radius","lineClampCss"],"mappings":"gPASO,MAAMA,EAAcC,EAAAA,QAAOC,EAAE;;;EAKvBC,EAAOF,EAAAA,QAAOG,aAAWC,OAAO;aAChCC,EAAAA,UAAgB;;gBAEbC,EAAAA,WAAW;;cAEbC,EAAAA,UAAiB;oBACXD,EAAAA,WAAW,gBAAgBA,EAAAA,WAAW;;qBAErCE,EAAAA,UAAc;;MAE7BC,EAAAA,aAAa;;;;;;4BAMSJ,EAAAA,UAAU;iBACrBA,EAAAA,UAAgB;;;;6BAIJA,EAAAA,UAAU;;;"}
+{"version":3,"file":"menu-link.styles.js","sources":["../../../src/menu/menu-link.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport { Border, Colour, Radius, Spacing } from \"../theme/tokens\";\n\nexport const menuLinkDiv = css`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const link = css`\n    color: ${Colour[\"text\"]};\n\n    margin: 0 ${Spacing[\"spacing-8\"]};\n\n    border: ${Border[\"solid\"]} transparent;\n    border-width: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-8\"]};\n\n    border-radius: ${Radius[\"md\"]};\n\n    ${lineClampCss(2)}\n    white-space: pre-wrap;\n\n    &:hover,\n    &:active,\n    &:focus {\n        background-color: ${Colour[\"bg-hover\"]};\n        color: ${Colour[\"text\"]};\n    }\n\n    &:focus-visible {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 0;\n    }\n`;\n"],"names":[],"mappings":"uFAUiB,8BALO"}

package/cjs/menu/menu-link.styles_hfxoez.css

@@ -0,0 +1,2 @@
+@layer fds{.mmmrhdq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.l5rk4za{color:var(--fds-colour-text);margin:0 var(--fds-spacing-8);border:var(--fds-border-style-solid) transparent;border-width:var(--fds-spacing-8) var(--fds-spacing-8);border-radius:var(--fds-radius-md);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap;}.l5rk4za:hover,.l5rk4za:active,.l5rk4za:focus{background-color:var(--fds-colour-bg-hover);color:var(--fds-colour-text);}.l5rk4za:focus-visible{outline:2px solid var(--fds-colour-focus-ring);outline-offset:0;}}

package/cjs/menu/menu-section.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("react");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var t=require("../util/simple-id-generator.js");require("../util/string-helper.js");var s=require("./menu-section.styles.js");const a=a=>{var{children:l,label:n,showDivider:d=!0,"data-testid":u="menu-section"}=a,c=e.__rest(a,["children","label","showDivider","data-testid"]);const[o]=i.useState((()=>t.SimpleIdGenerator.generate()));return r.jsxs(s.Section,Object.assign({$showDivider:d,"data-testid":u,"aria-labelledby":o},c,{children:[n&&r.jsx(s.Label,{weight:"semibold",id:o,children:n}),l]}))};a.displayName="Menu.Section",exports.MenuSection=a;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("clsx"),s=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("react");var a=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var t=require("./menu-section.styles.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=l(i);const u=i=>{var{children:l,label:u,showDivider:d=!0,className:c,"data-testid":o="menu-section"}=i,j=e.__rest(i,["children","label","showDivider","className","data-testid"]);const h=a.useId();return r.jsxs("ul",Object.assign({"data-testid":o,"aria-labelledby":h,className:n.default(t.section,d&&t.sectionWithDivider,c)},j,{children:[u&&r.jsx(s.Typography.BodyXS,{className:t.label,weight:"semibold",id:h,children:u}),l]}))};u.displayName="Menu.Section",exports.MenuSection=u;
 //# sourceMappingURL=menu-section.js.map

package/cjs/menu/menu-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-section.js","sources":["../../../src/menu/menu-section.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { SimpleIdGenerator } from \"../util\";\nimport { Label, Section } from \"./menu-section.styles\";\nimport type { MenuSectionProps } from \"./types\";\n\nexport const MenuSection = ({\n    children,\n    label,\n    showDivider = true,\n    \"data-testid\": testId = \"menu-section\",\n    ...otherProps\n}: MenuSectionProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [internalId] = useState(() => SimpleIdGenerator.generate());\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <Section\n            $showDivider={showDivider}\n            data-testid={testId}\n            aria-labelledby={internalId}\n            {...otherProps}\n        >\n            {label && (\n                <Label weight=\"semibold\" id={internalId}>\n                    {label}\n                </Label>\n            )}\n            {children}\n        </Section>\n    );\n};\n\nMenuSection.displayName = \"Menu.Section\";\n"],"names":["MenuSection","_a","children","label","showDivider","testId","otherProps","__rest","internalId","useState","SimpleIdGenerator","generate","_jsxs","Section","Object","assign","$showDivider","_jsx","Label","weight","id","displayName"],"mappings":"oTAMO,MAAMA,EAAeC,IAAA,IAAAC,SACxBA,EAAQC,MACRA,EAAKC,YACLA,GAAc,EACd,cAAeC,EAAS,gBAAcJ,EACnCK,EAAUC,EAAAA,OAAAN,EALW,kDAUxB,MAAOO,GAAcC,EAAAA,UAAS,IAAMC,EAAAA,kBAAkBC,aAKtD,OACIC,EAAAA,KAACC,EAAAA,QAAOC,OAAAC,OAAA,CAAAC,aACUZ,EAAW,cACZC,EAAM,kBACFG,GACbF,EAAU,CAAAJ,SAAA,CAEbC,GACGc,EAAAA,IAACC,EAAAA,MAAK,CAACC,OAAO,WAAWC,GAAIZ,EAAUN,SAClCC,IAGRD,KACK,EAIlBF,EAAYqB,YAAc"}
+{"version":3,"file":"menu-section.js","sources":["../../../src/menu/menu-section.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./menu-section.styles\";\nimport type { MenuSectionProps } from \"./types\";\n\nexport const MenuSection = ({\n    children,\n    label,\n    showDivider = true,\n    className,\n    \"data-testid\": testId = \"menu-section\",\n    ...otherProps\n}: MenuSectionProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const internalId = useId();\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <ul\n            data-testid={testId}\n            aria-labelledby={internalId}\n            className={clsx(\n                styles.section,\n                showDivider && styles.sectionWithDivider,\n                className\n            )}\n            {...otherProps}\n        >\n            {label && (\n                <Typography.BodyXS\n                    className={styles.label}\n                    weight=\"semibold\"\n                    id={internalId}\n                >\n                    {label}\n                </Typography.BodyXS>\n            )}\n            {children}\n        </ul>\n    );\n};\n\nMenuSection.displayName = \"Menu.Section\";\n"],"names":["MenuSection","_a","children","label","showDivider","className","testId","otherProps","__rest","internalId","useId","_jsxs","Object","assign","clsx","styles.section","styles.sectionWithDivider","_jsx","Typography","BodyXS","styles.label","weight","id","displayName"],"mappings":"ieAOO,MAAMA,EAAeC,QAAAC,SACxBA,EAAQC,MACRA,EAAKC,YACLA,GAAc,EAAIC,UAClBA,EACA,cAAeC,EAAS,gBAAcL,EACnCM,EAAUC,EAAAA,OAAAP,EANW,8DAWxB,MAAMQ,EAAaC,EAAAA,QAKnB,OACIC,EAAAA,KAAA,KAAAC,OAAAC,OAAA,CAAA,cACiBP,EAAM,kBACFG,EACjBJ,UAAWS,EAAAA,QACPC,UACAX,GAAeY,EAAAA,mBACfX,IAEAE,EAAU,CAAAL,SAAA,CAEbC,GACGc,EAAAA,IAACC,EAAAA,WAAWC,OAAM,CACdd,UAAWe,EAAAA,MACXC,OAAO,WACPC,GAAIb,EAAUP,SAEbC,IAGRD,KACA,EAIbF,EAAYuB,YAAc"}

package/cjs/menu/menu-section.styles.js

@@ -1,13 +1,2 @@
-"use strict";var e=require("styled-components"),r=require("../typography/index.js"),o=require("../v3_theme/index.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=t(e);const n=i.default.ul`
-    ${r=>r.$showDivider&&e.css`
-            border-top: ${o.V3_Border["width-010"]} ${o.V3_Border.solid}
-                ${o.V3_Colour.border};
-        `}
-    padding: ${o.V3_Spacing["spacing-8"]} 0;
-    margin: 0;
-    list-style: none;
-`,s=i.default(r.Typography.BodyXS)`
-    margin: 0 ${o.V3_Spacing["spacing-16"]} ${o.V3_Spacing["spacing-8"]};
-    color: ${o.V3_Colour["text-subtler"]};
-`;exports.Label=s,exports.Section=n;
+"use strict";require("./menu-section.styles_g7my4d.css");exports.label="llhca5j",exports.section="s1fmxqsy",exports.sectionWithDivider="s1o971t2";
 //# sourceMappingURL=menu-section.styles.js.map

package/cjs/menu/menu-section.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-section.styles.js","sources":["../../../src/menu/menu-section.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { Typography } from \"../typography\";\nimport { V3_Border, V3_Colour, V3_Spacing } from \"../v3_theme\";\n\n// =============================================================================\n// STYLES INTERFACE\n// =============================================================================\ninterface MenuSectionStyleProps {\n    $showDivider?: boolean;\n}\n\n// =============================================================================\n// MENU SECTION STYLES\n// =============================================================================\nexport const Section = styled.ul<MenuSectionStyleProps>`\n    ${(props) =>\n        props.$showDivider &&\n        css`\n            border-top: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n                ${V3_Colour[\"border\"]};\n        `}\n    padding: ${V3_Spacing[\"spacing-8\"]} 0;\n    margin: 0;\n    list-style: none;\n`;\n\nexport const Label = styled(Typography.BodyXS)`\n    margin: 0 ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\"spacing-8\"]};\n    color: ${V3_Colour[\"text-subtler\"]};\n`;\n"],"names":["Section","styled","ul","props","$showDivider","css","V3_Border","V3_Colour","V3_Spacing","Label","Typography","BodyXS"],"mappings":"yMAeO,MAAMA,EAAUC,EAAAA,QAAOC,EAAyB;MAChDC,GACCA,EAAMC,cACNC,KAAG;0BACeC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;kBACnDC,EAAAA,UAAkB;;eAErBC,EAAAA,WAAW;;;EAKbC,EAAQR,EAAAA,QAAOS,aAAWC,OAAO;gBAC9BH,EAAAA,WAAW,iBAAiBA,EAAAA,WAAW;aAC1CD,EAAAA,UAAU;"}
+{"version":3,"file":"menu-section.styles.js","sources":["../../../src/menu/menu-section.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Spacing } from \"../theme/tokens\";\n\nexport const section = css`\n    padding: ${Spacing[\"spacing-8\"]} 0;\n    margin: 0;\n    list-style: none;\n`;\nexport const sectionWithDivider = css`\n    border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const label = css`\n    margin: 0 ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-8\"]};\n    color: ${Colour[\"text-subtler\"]};\n`;\n"],"names":[],"mappings":"2FAakB,0BATE,sCAKW"}

package/cjs/menu/menu-section.styles_g7my4d.css

@@ -0,0 +1,3 @@
+@layer fds{.s1fmxqsy{padding:var(--fds-spacing-8) 0;margin:0;list-style:none;}
+.s1o971t2{border-top:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.llhca5j{margin:0 var(--fds-spacing-16) var(--fds-spacing-8);color:var(--fds-colour-text-subtler);}}

package/cjs/menu/menu.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("react");require("styled-components"),require("../modal-v2/index.js"),require("../typography/typography.js"),require("../v3_theme/index.js"),require("../popover-v2/popover.styles.js");var n=require("../popover-v2/popover-trigger.js");require("../popover-v2/popover-inline/popover-inline.styles.js");var i=require("./menu-content.js"),o=require("./menu-item.js"),s=require("./menu-link.js"),u=require("./menu-section.js");const p=i=>{var{children:o,position:s="bottom-start",menuContent:u,"data-testid":p="menu"}=i,a=e.__rest(i,["children","position","menuContent","data-testid"]);return r.jsx(n.PopoverTrigger,Object.assign({position:s,popoverContent:e=>t.cloneElement(u,{overflow:e.overflow,maxHeight:e.maxHeight}),"data-testid":p},a,{children:o}))},a=Object.assign(p,{Content:i.MenuContent,Section:u.MenuSection,Item:o.MenuItem,Link:s.MenuLink});exports.Menu=a,exports.MenuTrigger=p;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("react");require("clsx"),require("../theme/theme-provider/context.js"),require("../typography/typography.js"),require("../card/card.styles_1gh9gs3.css"),require("../markup/markup.js"),require("../modal-v2/modal-v2.js"),require("../theme/theme-provider/index.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer"),require("../theme/utils/use-media-query.js"),require("../popover/popover.styles_ujnf0h.css");var i=require("../popover/popover-trigger.js");require("../popover/popover-inline/popover-inline.styles_bkopnt.css");var n=require("./menu-content.js"),s=require("./menu-item.js"),o=require("./menu-link.js"),u=require("./menu-section.js");const a=n=>{var{children:s,position:o="bottom-start",menuContent:u,"data-testid":a="menu"}=n,p=e.__rest(n,["children","position","menuContent","data-testid"]);return r.jsx(i.PopoverTrigger,Object.assign({position:o,popoverContent:e=>t.cloneElement(u,{overflow:e.overflow,maxHeight:e.maxHeight}),"data-testid":a},p,{children:s}))},p=Object.assign(a,{Content:n.MenuContent,Item:s.MenuItem,Link:o.MenuLink,Section:u.MenuSection});exports.Menu=p,exports.MenuTrigger=a;
 //# sourceMappingURL=menu.js.map

package/cjs/menu/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sources":["../../../src/menu/menu.tsx"],"sourcesContent":["import { cloneElement } from \"react\";\n\nimport type { PopoverRenderProps } from \"../popover-v2\";\nimport { PopoverTrigger } from \"../popover-v2\";\nimport { MenuContent } from \"./menu-content\";\nimport { MenuItem } from \"./menu-item\";\nimport { MenuLink } from \"./menu-link\";\nimport { MenuSection } from \"./menu-section\";\nimport type { MenuContentProps, MenuProps } from \"./types\";\n\nexport const MenuTrigger = ({\n    children,\n    position = \"bottom-start\",\n    menuContent,\n    \"data-testid\": testId = \"menu\",\n    ...otherProps\n}: MenuProps): JSX.Element => {\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <PopoverTrigger\n            position={position}\n            popoverContent={(renderProps: PopoverRenderProps) =>\n                cloneElement<MenuContentProps>(menuContent, {\n                    overflow: renderProps.overflow,\n                    maxHeight: renderProps.maxHeight,\n                })\n            }\n            data-testid={testId}\n            {...otherProps}\n        >\n            {children}\n        </PopoverTrigger>\n    );\n};\n\nexport const Menu = Object.assign(MenuTrigger, {\n    Content: MenuContent,\n    Section: MenuSection,\n    Item: MenuItem,\n    Link: MenuLink,\n});\n"],"names":["MenuTrigger","_a","children","position","menuContent","testId","otherProps","__rest","_jsx","PopoverTrigger","popoverContent","renderProps","cloneElement","overflow","maxHeight","Menu","Object","assign","Content","MenuContent","Section","MenuSection","Item","MenuItem","Link","MenuLink"],"mappings":"kgBAUO,MAAMA,EAAeC,IAAA,IAAAC,SACxBA,EAAQC,SACRA,EAAW,eAAcC,YACzBA,EACA,cAAeC,EAAS,QAAMJ,EAC3BK,EAAUC,EAAAA,OAAAN,EALW,qDAUxB,OACIO,MAACC,EAAAA,8BACGN,SAAUA,EACVO,eAAiBC,GACbC,EAAAA,aAA+BR,EAAa,CACxCS,SAAUF,EAAYE,SACtBC,UAAWH,EAAYG,YACzB,cAEOT,GACTC,YAEHJ,IACY,EAIZa,EAAOC,OAAOC,OAAOjB,EAAa,CAC3CkB,QAASC,EAAAA,YACTC,QAASC,EAAAA,YACTC,KAAMC,EAAAA,SACNC,KAAMC,EAAAA"}
+{"version":3,"file":"menu.js","sources":["../../../src/menu/menu.tsx"],"sourcesContent":["import { cloneElement } from \"react\";\n\nimport type { PopoverRenderProps } from \"../popover\";\nimport { PopoverTrigger } from \"../popover\";\nimport { MenuContent } from \"./menu-content\";\nimport { MenuItem } from \"./menu-item\";\nimport { MenuLink } from \"./menu-link\";\nimport { MenuSection } from \"./menu-section\";\nimport type { MenuContentProps, MenuProps } from \"./types\";\n\n/**\n * Trigger wrapper that anchors a `Menu.Content` panel to its child element.\n *\n * Prefer the `Menu` composite export when building a full menu — it bundles\n * `Menu.Content`, `Menu.Section`, `Menu.Item`, and `Menu.Link` as named\n * sub-components alongside the trigger.\n */\nexport const MenuTrigger = ({\n    children,\n    position = \"bottom-start\",\n    menuContent,\n    \"data-testid\": testId = \"menu\",\n    ...otherProps\n}: MenuProps): JSX.Element => {\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <PopoverTrigger\n            position={position}\n            popoverContent={(renderProps: PopoverRenderProps) =>\n                cloneElement<MenuContentProps>(menuContent, {\n                    overflow: renderProps.overflow,\n                    maxHeight: renderProps.maxHeight,\n                })\n            }\n            data-testid={testId}\n            {...otherProps}\n        >\n            {children}\n        </PopoverTrigger>\n    );\n};\n\n// @catalog\n/**\n * A popover-anchored menu composed of sections and interactive items.\n *\n * Use `Menu` when a trigger element should open a floating panel of actions or\n * navigation links.\n *\n * Sub-components:\n * - `Menu.Content` — the floating panel that contains menu sections.\n * - `Menu.Item` — a non-anchor interactive list item with a primary label and optional sub-label.\n * - `Menu.Link` — an anchor (`<a>`) list item styled as a menu entry.\n * - `Menu.Section` — a grouping container for `Menu.Item` and `Menu.Link` entries.\n * @keywords context, dropdown, navigation, submenu\n */\nexport const Menu = Object.assign(MenuTrigger, {\n    /** Renders the floating panel that contains menu sections. */\n    Content: MenuContent,\n    /** Renders a non-anchor interactive list item with a primary label and optional sub-label. */\n    Item: MenuItem,\n    /** Renders an anchor (`<a>`) list item styled as a menu entry. */\n    Link: MenuLink,\n    /** Groups related menu entries. */\n    Section: MenuSection,\n});\n"],"names":["MenuTrigger","_a","children","position","menuContent","testId","otherProps","__rest","_jsx","PopoverTrigger","popoverContent","renderProps","cloneElement","overflow","maxHeight","Menu","Object","assign","Content","MenuContent","Item","MenuItem","Link","MenuLink","Section","MenuSection"],"mappings":"qjCAiBO,MAAMA,EAAeC,IAAA,IAAAC,SACxBA,EAAQC,SACRA,EAAW,eAAcC,YACzBA,EACA,cAAeC,EAAS,QAAMJ,EAC3BK,EAAUC,EAAAA,OAAAN,EALW,qDAUxB,OACIO,MAACC,EAAAA,8BACGN,SAAUA,EACVO,eAAiBC,GACbC,EAAAA,aAA+BR,EAAa,CACxCS,SAAUF,EAAYE,SACtBC,UAAWH,EAAYG,YACzB,cAEOT,GACTC,YAEHJ,IACY,EAkBZa,EAAOC,OAAOC,OAAOjB,EAAa,CAE3CkB,QAASC,EAAAA,YAETC,KAAMC,EAAAA,SAENC,KAAMC,EAAAA,SAENC,QAASC,EAAAA"}

package/cjs/modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/modal/index.ts"],"sourcesContent":["import { Modal as Base } from \"./modal\";\nimport { ModalBox as Box } from \"./modal-box\";\n\nexport const Modal = Object.assign(Base, {\n    Box,\n});\n\nexport * from \"./types\";\n"],"names":["Modal","Object","assign","Base","Box"],"mappings":"2EAGaA,EAAQC,OAAOC,OAAOC,QAAM,KACrCC,EAAAA"}
+{"version":3,"file":"index.js","sources":["../../../src/modal/index.ts"],"sourcesContent":["import { Modal as Base } from \"./modal\";\nimport { ModalBox as Box } from \"./modal-box\";\n\n// @catalog\n/**\n * A full-screen overlay modal with a slide animation.\n *\n * Use `Modal` to present content that requires the user's immediate attention\n * or a focused interaction. Use `ModalV2` for built-in scroll handling and improved accessibility.\n *\n * Sub-components:\n * - `Modal.Box` — a styled content box with an optional close button.\n *\n * @deprecated Use `ModalV2` instead, which provides a more composable API, improved scroll behaviour, and proper accessibility.\n * @keywords dialog, overlay, popup\n */\nexport const Modal = Object.assign(Base, {\n    /**\n     * A styled content container for use inside `Modal`. Renders an optional\n     * close button and stops click events from propagating to the overlay.\n     *\n     * @deprecated Use `ModalV2.Card` instead.\n     */\n    Box,\n});\n\nexport * from \"./types\";\n"],"names":["Modal","Object","assign","Base","Box"],"mappings":"2EAgBaA,EAAQC,OAAOC,OAAOC,QAAM,KAOrCC,EAAAA"}

package/cjs/modal/modal-box.js

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

package/cjs/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":["_a","id","children","onClose","showCloseButton","otherProps","__rest","_jsxs","Box","Object","assign","onClick","event","stopPropagation","_jsx","CloseButton","focusHighlight","focusOutline","CrossIcon"],"mappings":"8KAMyBA,IAAA,IAAAC,GACrBA,EAAK,YAAWC,SAChBA,EAAQC,QACRA,EAAOC,gBACPA,GAAkB,GAAIJ,EACnBK,EAAUC,EAAAA,OAAAN,EALQ,+CA8BrB,OACIO,EAAAA,KAACC,EAAAA,IAAGC,OAAAC,OAAA,CAAA,cAAcT,GAAQI,GAAYM,QArBnBC,IACnBA,EAAMC,iBAAiB,EAoBqCX,SAAA,CACvDE,GAbDU,EAAAA,IAACC,EAAAA,YAAW,CACRJ,QAASR,EAAO,cACJ,eACZa,gBAAgB,EAChBC,aAAa,UAASf,SAEtBY,EAAAA,IAACI,EAAAA,UAAS,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":"kkBA6DaA,EAAWC,EAAAA,YAlDxB,SACIC,EASAC,OATAC,GACIA,EAAK,YAAWC,SAChBA,EAAQC,QACRA,EAAOC,gBACPA,GAAkB,EAAIC,UACtBA,EAASC,WACTA,GAAUP,EACPQ,EAAUC,EAAAA,OAAAT,EAPjB,wEAmCA,OACIU,EAAAA,KAAA,MAAAC,OAAAC,OAAA,CACIX,IAAKY,YAAUZ,EAAKM,iBACPL,GACTM,EAAU,CACdM,QA1BeC,IACnBA,EAAMC,iBAAiB,EA0BnBV,UAAWW,UAAKC,EAAAA,IAAYZ,GAAUH,SAAA,CAErCE,GApBDc,EAAAA,IAACC,EAAAA,cAAa,CACVN,QAASV,EAAO,cACJ,eACZiB,gBAAgB,EAChBC,aAAa,UACbhB,UAAWiB,cAAkBpB,SAE7BgB,EAAAA,IAACK,EAAAA,UAAS,CAAA,KAcbrB,KAGb,IAMCL,EAAkC2B,YAAc"}

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

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

package/cjs/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":"6NAsBO,MAAMA,EAAMC,EAAAA,QAAOC,GAAG;;;;;;kBAMXC,EAAAA,UAAUC;kBACVC,EAAAA,UAAU;qBACPC,EAAAA,UAAc;;;MAG7BC,EAAAA,cAAcC,SAASC;;;;EAMhBC,EAAcT,EAAAA,QAAOU,EAAAA,cAAgC;;yCAEzBC,EAAAA,WAAW;6CACPA,EAAAA,WAAW;;aAE3CT,EAAAA,UAAUU;;;;;;;MAOjBN,EAAAA,cAAcC,SAASM;iDACoBF,EAAAA,WAAW;;"}
+{"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":[],"mappings":"uFAKgB,+BAiBQ"}

package/cjs/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/cjs/modal/modal.js

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

package/cjs/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":["_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":"kOAOsBA,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,EAAAA,OAAAX,EAVK,mIAelB,MAAMY,eAAEA,EAAcC,UAAEA,GAAcC,gBAetC,OAVAC,EAAAA,WAAU,aACFb,GAAQO,YAERO,EAAuC,UAAtCC,SAASC,qBAA6B,IAAAlB,OAAA,EAAAA,EAAEmB,6BAC7C,GACD,CAACjB,IAMAkB,EAAAA,IAACC,EAAAA,QAAO,CAAA,cACS,GAAGpB,YAChBC,KAAMA,EACNG,mBAAoBA,EACpBG,eAAgBA,EAChBP,GAAIA,EACJqB,OAAQhB,EACRC,OAAQA,EAAMH,SAEdgB,EAAAA,IAACG,EAAAA,UAASC,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","_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":"43BAWA,MAAMA,EAAoE,CACtEC,IAAKC,EAAAA,iBACLC,OAAQC,EAAAA,oBACRC,KAAMC,EAAAA,kBACNC,MAAOC,EAAAA,oBAGLC,EAAyE,CAC3ER,IAAKS,EAAAA,qBACLP,OAAQQ,EAAAA,wBACRN,KAAMO,EAAAA,sBACNL,MAAOM,EAAAA,sCAGWC,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,EAAAA,OAAAZ,EAXK,+IAgBlB,MAAMa,EAAkBC,EAAAA,UAAS,aACzBL,YACAM,EAAuC,UAAtCC,SAASC,qBAA6B,IAAAjB,OAAA,EAAAA,EAAEkB,6BAC7C,KAEEC,eAAEA,EAAcC,MAAEA,GAAUC,cAAY,CAC1CC,QAASpB,EACTqB,cAAeV,IAEbW,EAAWC,EAAAA,OAAuB,MAClCC,EAAeD,EAAAA,OAAuB,MACtCE,EACFvB,GAAYwB,UAAMC,aAAazB,EAAU,CAAE0B,IAAKN,IAUpD,OARAO,EAAAA,cAAcL,EAAc,CACxB,CAACM,EAAAA,OAAcC,UAAUd,gBACH,MAAlBA,EAAyB,KAAO,GAAGA,QAOvCe,EAAAA,IAACC,EAAAA,QAAO,CAAA,cACS,GAAGlC,YAChBC,KAAMA,EACNG,mBAAoBA,EACpBG,eAAgBA,EAChBP,GAAIA,EACJmC,OAAQ9B,EACRoB,aAAcF,EACdjB,OAAQA,EAAMH,SAEd8B,EAAAA,IAAA,MAAAG,OAAAC,OAAA,CACIR,IAAKJ,EAAY,cACJzB,GACTU,EAAU,CACdD,UAAW6B,EAAAA,QACPC,EAAAA,UACAtD,EAAyBiB,GACzBD,GAAQkB,EACF,CACIzB,EAA8BQ,GAC9BsC,EAAAA,eAEJC,EAAAA,cACNhC,GACHN,SAEAuB,MAEC"}

package/cjs/modal/modal.styles.js

@@ -1,19 +1,2 @@
-"use strict";var t=require("styled-components"),e=require("../v3_theme/index.js");function i(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}const n=i(t).default.div`
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
-    ${t=>{return e=t.$show,i=t.$animationFrom||"bottom",e?`\n\t\t\t${i}: 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${i}: -3%;\n\t\topacity: 0;\n\t\ttransition: all 300ms cubic-bezier(0.4, 0.34, 0.38, 1);\n\t`;var e,i}}
-
-    ${e.V3_MediaQuery.MaxWidth.sm} {
-        height: calc(
-            ${t=>t.$verticalHeight?`${t.$verticalHeight}px`:"1vh"} * 100
-        );
-
-        top: ${t=>t.$offsetTop||0}px;
-    }
-`;exports.Container=n;
+"use strict";require("./modal.styles_1lbblx6.css");exports.container="czahu6t",exports.containerFromBottom="c19r0uwy",exports.containerFromBottomShow="c16qcfjk",exports.containerFromLeft="c11f2a4r",exports.containerFromLeftShow="cgnow3g",exports.containerFromRight="ck9rog9",exports.containerFromRightShow="c14dyqe6",exports.containerFromTop="c16tlthj",exports.containerFromTopShow="c1jimj00",exports.containerHide="c1d9ucpb",exports.containerShow="c140nooo",exports.tokens={container:{verticalHeight:"--fds-internal-modal-container-verticalHeight"}};
 //# sourceMappingURL=modal.styles.js.map

package/cjs/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":"0JAYA,MAoBaA,OAAYC,QAAOC,GAAU;;;;;;;;MAQnCC,IAAUC,OA3BbC,EA2B6BF,EAAMG,MA1BnCC,EA0B0CJ,EAAMK,gBAAkB,SAxB9DH,EACO,WACVE,iIAOM,SACPA,4FAdoB,IACpBF,EACAE,CA0B2E;;MAEzEE,EAAAA,cAAcC,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":["container","verticalHeight"],"mappings":"0FAcsB,sCAsBU,2CA2BI,qCAvBN,yCA2BI,qCAvBH,yCA2BI,oCAvCN,wCA2BI,iCALP,iCANA,0BA5CJ,CAClBA,UAAW,CACPC,eAAgB"}

package/cjs/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/cjs/modal-v2/index.js

@@ -1,2 +1,2 @@
-"use strict";var o=require("./modal-v2.js"),t=require("./slots/card.js"),e=require("./slots/close-button.js"),s=require("./slots/content.js"),r=require("./slots/footer.js");const n=Object.assign(o.ModalV2,{Card:t.Card,CloseButton:e.CloseButton,Content:s.Content,Footer:r.Footer});exports.ModalV2=n;
+"use strict";var r=require("./modal-v2.js");exports.ModalV2=r.ModalV2;
 //# sourceMappingURL=index.js.map

package/cjs/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":"mLAGaA,EAAUC,OAAOC,OAAOC,UAAM,MACvCC,EAAAA,iBACAC,EAAAA,oBACAC,EAAAA,eACAC,EAAAA"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"modal-v2.js","sources":["../../../src/modal-v2/modal-v2.tsx"],"sourcesContent":["import {\n    FloatingFocusManager,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useTransitionStatus,\n} from \"@floating-ui/react\";\nimport { useEffect } from \"react\";\n\nimport { Overlay } from \"../overlay/overlay\";\nimport { useViewport } from \"../shared/hooks\";\nimport { ModalContext } from \"./modal-context\";\nimport { Container, ModalContainer, ScrollContainer } from \"./modal-v2.styles\";\nimport type { ModalV2Props } from \"./types\";\n\nexport const ModalV2 = ({\n    id,\n    show,\n    onClose,\n    animationFrom = \"bottom\",\n    children,\n    enableOverlayClick = true,\n    rootComponentId,\n    zIndex,\n    onOverlayClick,\n    dismissKeyboardOnShow = true,\n    \"data-testid\": testId = \"modal\",\n    ...otherProps\n}: ModalV2Props): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const { verticalHeight, offsetTop } = useViewport();\n\n    // =========================================================================\n    // FLOATING UI CONFIG\n    // =========================================================================\n    const { refs, context } = useFloating({\n        open: show,\n        onOpenChange: (isOpen) => {\n            if (!isOpen) {\n                onClose?.();\n            }\n        },\n    });\n    const { isMounted, status } = useTransitionStatus(context, {\n        duration: 300,\n    });\n    const dismiss = useDismiss(context, {\n        /* handled by overlayclick */\n        outsidePress: false,\n        enabled: !!onClose,\n    });\n    const { getFloatingProps } = useInteractions([dismiss]);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (show && dismissKeyboardOnShow) {\n            // dismiss software keyboard to put modal in fullscreen\n            (document.activeElement as HTMLElement)?.blur?.();\n        }\n    }, [dismissKeyboardOnShow, show]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <Overlay\n            data-testid={`${testId}-overlay`}\n            show={isMounted}\n            enableOverlayClick={enableOverlayClick}\n            onOverlayClick={onOverlayClick}\n            id={id}\n            rootId={rootComponentId}\n            zIndex={zIndex}\n        >\n            <Container\n                $show={isMounted}\n                $animationFrom={animationFrom}\n                data-testid={testId}\n                $verticalHeight={verticalHeight}\n                $offsetTop={offsetTop}\n                {...otherProps}\n                data-status={status}\n            >\n                <ModalContext.Provider value={{ onClose }}>\n                    {isMounted && (\n                        <FloatingFocusManager\n                            context={context}\n                            initialFocus={refs.floating}\n                        >\n                            <ScrollContainer>\n                                <ModalContainer\n                                    ref={refs.setFloating}\n                                    {...getFloatingProps()}\n                                    aria-modal\n                                    role=\"dialog\"\n                                >\n                                    {children}\n                                </ModalContainer>\n                            </ScrollContainer>\n                        </FloatingFocusManager>\n                    )}\n                </ModalContext.Provider>\n            </Container>\n        </Overlay>\n    );\n};\n"],"names":["_a","id","show","onClose","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","testId","otherProps","__rest","verticalHeight","offsetTop","useViewport","refs","context","useFloating","open","onOpenChange","isOpen","isMounted","status","useTransitionStatus","duration","dismiss","useDismiss","outsidePress","enabled","getFloatingProps","useInteractions","useEffect","_b","document","activeElement","blur","_jsx","Overlay","rootId","Container","Object","assign","$show","$animationFrom","$verticalHeight","$offsetTop","ModalContext","Provider","value","FloatingFocusManager","initialFocus","floating","ScrollContainer","ModalContainer","ref","setFloating","role"],"mappings":"uSAewBA,IAAA,IAAAC,GACpBA,EAAEC,KACFA,EAAIC,QACJA,EAAOC,cACPA,EAAgB,SAAQC,SACxBA,EAAQC,mBACRA,GAAqB,EAAIC,gBACzBA,EAAeC,OACfA,EAAMC,eACNA,EAAcC,sBACdA,GAAwB,EACxB,cAAeC,EAAS,SAAOX,EAC5BY,EAAUC,EAAAA,OAAAb,EAZO,2JAiBpB,MAAMc,eAAEA,EAAcC,UAAEA,GAAcC,iBAKhCC,KAAEA,EAAIC,QAAEA,GAAYC,cAAY,CAClCC,KAAMlB,EACNmB,aAAeC,IACNA,GACDnB,SAAAA,GACJ,KAGFoB,UAAEA,EAASC,OAAEA,GAAWC,EAAAA,oBAAoBP,EAAS,CACvDQ,SAAU,MAERC,EAAUC,EAAAA,WAAWV,EAAS,CAEhCW,cAAc,EACdC,UAAW3B,KAET4B,iBAAEA,GAAqBC,kBAAgB,CAACL,IAe9C,OAVAM,EAAAA,WAAU,aACF/B,GAAQQ,YAERwB,EAAuC,UAAtCC,SAASC,qBAA6B,IAAApC,OAAA,EAAAA,EAAEqC,6BAC7C,GACD,CAAC3B,EAAuBR,IAMvBoC,EAAAA,IAACC,EAAAA,QAAO,CAAA,cACS,GAAG5B,YAChBT,KAAMqB,EACNjB,mBAAoBA,EACpBG,eAAgBA,EAChBR,GAAIA,EACJuC,OAAQjC,EACRC,OAAQA,WAER8B,EAAAA,IAACG,EAAAA,UAASC,OAAAC,OAAA,CAAAC,MACCrB,EAASsB,eACAzC,gBACHO,EAAMmC,gBACFhC,EAAciC,WACnBhC,GACRH,EAAU,CAAA,cACDY,EAAMnB,SAEnBiC,MAACU,EAAAA,aAAaC,SAAQ,CAACC,MAAO,CAAE/C,WAASE,SACpCkB,GACGe,EAAAA,IAACa,EAAAA,sBACGjC,QAASA,EACTkC,aAAcnC,EAAKoC,SAAQhD,SAE3BiC,EAAAA,IAACgB,kBAAe,CAAAjD,SACZiC,EAAAA,IAACiB,EAAAA,eAAcb,OAAAC,OAAA,CACXa,IAAKvC,EAAKwC,aACN1B,IAAkB,CAAA,cAAA,EAEtB2B,KAAK,SAAQrD,SAEZA,eAOnB"}
+{"version":3,"file":"modal-v2.js","sources":["../../../src/modal-v2/modal-v2.tsx"],"sourcesContent":["import {\n    FloatingFocusManager,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useTransitionStatus,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { useRef } from \"react\";\n\nimport { Overlay } from \"../overlay/overlay\";\nimport { useViewport } from \"../shared/hooks\";\nimport { useApplyStyle } from \"../theme\";\nimport { useEvent } from \"../util\";\nimport { ModalContext } from \"./modal-context\";\nimport * as styles from \"./modal-v2.styles\";\nimport { Card, CloseButton, Content, Footer, Header } from \"./slots\";\nimport type { ModalV2Props } from \"./types\";\n\nconst Base = ({\n    id,\n    show,\n    onClose,\n    animationFrom = \"bottom\",\n    children,\n    enableOverlayClick = true,\n    rootComponentId,\n    zIndex,\n    onOverlayClick,\n    dismissKeyboardOnShow = true,\n    \"data-testid\": testId = \"modal\",\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    disableInitialFocus = false,\n    className,\n    ...otherProps\n}: ModalV2Props): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const dismissKeyboard = useEvent(() => {\n        if (dismissKeyboardOnShow) {\n            (document.activeElement as HTMLElement)?.blur?.();\n        }\n    });\n    const { verticalHeight } = useViewport({\n        enabled: show,\n        onBeforeStart: dismissKeyboard,\n    });\n    const childRef = useRef<HTMLDivElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const childWithRef =\n        children && React.cloneElement(children, { ref: childRef });\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.container.verticalHeight]:\n            verticalHeight == null ? null : `${verticalHeight}px`,\n    });\n\n    // =========================================================================\n    // FLOATING UI CONFIG\n    // =========================================================================\n    const { refs, context } = useFloating({\n        open: show,\n        onOpenChange: (isOpen) => {\n            if (!isOpen) {\n                onClose?.();\n            }\n        },\n    });\n    const { isMounted, status } = useTransitionStatus(context, {\n        duration: 300,\n    });\n    const dismiss = useDismiss(context, {\n        /* handled by overlayclick */\n        outsidePress: false,\n        enabled: !!onClose,\n    });\n    const { getFloatingProps } = useInteractions([dismiss]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <Overlay\n            data-testid={`${testId}-overlay`}\n            show={show}\n            enableOverlayClick={enableOverlayClick}\n            onOverlayClick={onOverlayClick}\n            id={id}\n            rootId={rootComponentId}\n            containerRef={childRef}\n            zIndex={zIndex}\n        >\n            <div\n                ref={containerRef}\n                data-testid={testId}\n                data-status={status}\n                data-animation-from={animationFrom}\n                {...otherProps}\n                className={clsx(styles.container, className)}\n            >\n                <ModalContext.Provider value={{ onClose }}>\n                    {isMounted && (\n                        <FloatingFocusManager\n                            context={context}\n                            initialFocus={\n                                disableInitialFocus ? -1 : refs.floating\n                            }\n                        >\n                            <div className={styles.scrollContainer}>\n                                <div\n                                    ref={refs.setFloating}\n                                    {...getFloatingProps()}\n                                    role=\"dialog\"\n                                    aria-label={ariaLabel}\n                                    aria-labelledby={ariaLabelledBy}\n                                    aria-describedby={ariaDescribedBy}\n                                    className={styles.modalContainer}\n                                >\n                                    {childWithRef}\n                                </div>\n                            </div>\n                        </FloatingFocusManager>\n                    )}\n                </ModalContext.Provider>\n            </div>\n        </Overlay>\n    );\n};\n\n// @catalog\n/**\n * A composable modal dialog with slot-based content layout.\n *\n * Use `ModalV2` when you need a controlled overlay dialog with structured\n * content slots.\n *\n * Sub-components:\n * - `ModalV2.Card` — wraps modal content and arranges `Content`, `Footer`, and `CloseButton` slots in the correct layout.\n * - `ModalV2.CloseButton` — renders an accessible close button that invokes the modal's `onClose` callback.\n * - `ModalV2.Content` — container for the body content of the modal card.\n * - `ModalV2.Footer` — footer area for primary and secondary action buttons.\n * @keywords dialog, overlay, popup\n */\nexport const ModalV2 = Object.assign(Base, {\n    /** Wraps modal content and arranges `Content`, `Footer`, and `CloseButton` slots in the correct layout. */\n    Card,\n    /** Renders an accessible close button that invokes the modal's `onClose` callback. */\n    CloseButton,\n    /** Container for the body content of the modal card. */\n    Content,\n    /** Footer area for primary and secondary action buttons. */\n    Footer,\n    /** Header bar with a close button and optional title. Use instead of `CloseButton` when a heading is needed. */\n    Header,\n});\n"],"names":["ModalV2","Object","assign","_a","id","show","onClose","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","testId","ariaLabel","ariaLabelledBy","ariaDescribedBy","disableInitialFocus","className","otherProps","__rest","dismissKeyboard","useEvent","_b","document","activeElement","blur","verticalHeight","useViewport","enabled","onBeforeStart","childRef","useRef","containerRef","childWithRef","React","cloneElement","ref","useApplyStyle","styles.tokens","container","refs","context","useFloating","open","onOpenChange","isOpen","isMounted","status","useTransitionStatus","duration","dismiss","useDismiss","outsidePress","getFloatingProps","useInteractions","_jsx","Overlay","rootId","clsx","styles.container","ModalContext","Provider","value","FloatingFocusManager","initialFocus","floating","styles.scrollContainer","setFloating","role","styles.modalContainer","Card","CloseButton","Content","Footer","Header"],"mappings":"+lCAmBA,MA+HaA,EAAUC,OAAOC,QA/HhBC,QAAAC,GACVA,EAAEC,KACFA,EAAIC,QACJA,EAAOC,cACPA,EAAgB,SAAQC,SACxBA,EAAQC,mBACRA,GAAqB,EAAIC,gBACzBA,EAAeC,OACfA,EAAMC,eACNA,EAAcC,sBACdA,GAAwB,EACxB,cAAeC,EAAS,QACxB,aAAcC,EACd,kBAAmBC,EACnB,mBAAoBC,EAAeC,oBACnCA,GAAsB,EAAKC,UAC3BA,GAAShB,EACNiB,EAAUC,EAAAA,OAAAlB,EAjBH,CAAA,KAAA,OAAA,UAAA,gBAAA,WAAA,qBAAA,kBAAA,SAAA,iBAAA,wBAAA,cAAA,aAAA,kBAAA,mBAAA,sBAAA,cAsBV,MAAMmB,EAAkBC,EAAAA,UAAS,aACzBV,YACAW,EAAuC,UAAtCC,SAASC,qBAA6B,IAAAvB,OAAA,EAAAA,EAAEwB,6BAC7C,KAEEC,eAAEA,GAAmBC,cAAY,CACnCC,QAASzB,EACT0B,cAAeT,IAEbU,EAAWC,EAAAA,OAAuB,MAClCC,EAAeD,EAAAA,OAAuB,MACtCE,EACF3B,GAAY4B,UAAMC,aAAa7B,EAAU,CAAE8B,IAAKN,IAEpDO,EAAAA,cAAcL,EAAc,CACxB,CAACM,EAAAA,OAAcC,UAAUb,gBACH,MAAlBA,EAAyB,KAAO,GAAGA,QAM3C,MAAMc,KAAEA,EAAIC,QAAEA,GAAYC,cAAY,CAClCC,KAAMxC,EACNyC,aAAeC,IACNA,GACDzC,SAAAA,GACJ,KAGF0C,UAAEA,EAASC,OAAEA,GAAWC,EAAAA,oBAAoBP,EAAS,CACvDQ,SAAU,MAERC,EAAUC,EAAAA,WAAWV,EAAS,CAEhCW,cAAc,EACdxB,UAAWxB,KAETiD,iBAAEA,GAAqBC,kBAAgB,CAACJ,IAK9C,OACIK,MAACC,EAAAA,QAAO,CAAA,cACS,GAAG5C,YAChBT,KAAMA,EACNI,mBAAoBA,EACpBG,eAAgBA,EAChBR,GAAIA,EACJuD,OAAQjD,EACRwB,aAAcF,EACdrB,OAAQA,EAAMH,SAEdiD,EAAAA,IAAA,MAAAxD,OAAAC,OAAA,CACIoC,IAAKJ,EAAY,cACJpB,EAAM,cACNmC,EAAM,sBACE1C,GACjBa,GACJD,UAAWyC,UAAKC,EAAAA,UAAkB1C,GAAUX,SAE5CiD,MAACK,EAAAA,aAAaC,SAAQ,CAACC,MAAO,CAAE1D,WAASE,SACpCwC,GACGS,EAAAA,IAACQ,uBAAoB,CACjBtB,QAASA,EACTuB,aACIhD,GAAsB,EAAKwB,EAAKyB,SAAQ3D,SAG5CiD,EAAAA,IAAA,MAAA,CAAKtC,UAAWiD,EAAAA,gBAAsB5D,SAClCiD,MAAA,MAAAxD,OAAAC,OAAA,CACIoC,IAAKI,EAAK2B,aACNd,IAAkB,CACtBe,KAAK,SAAQ,aACDvD,EAAS,kBACJC,EAAc,mBACbC,EAClBE,UAAWoD,EAAAA,wBAEVpC,eAOnB,GAkByB,MAEvCqC,EAAAA,iBAEAC,EAAAA,oBAEAC,EAAAA,eAEAC,EAAAA,cAEAC,EAAAA"}

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

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