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

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 @@
+.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 @@
+.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/index.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("../popover-v2/popover.styles_lslc72.css");var i=require("../popover-v2/popover-trigger.js");require("../popover-v2/popover-inline/popover-inline.styles_ziag9c.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,Section:u.MenuSection,Item:s.MenuItem,Link:o.MenuLink});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-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":"8gCAUO,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"}

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"),s=require("react/jsx-runtime"),o=require("@lifesg/react-icons/cross"),r=require("clsx"),t=require("react"),i=require("../shared/clickable-icon/clickable-icon.js"),l=require("./modal-box.styles.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=a(r);const n=t.forwardRef((function(r,t){var{id:a="modal-box",children:n,onClose:u,showCloseButton:d=!0,className:f}=r,b=e.__rest(r,["id","children","onClose","showCloseButton","className"]);return s.jsxs("div",Object.assign({ref:t,"data-testid":a},b,{onClick:e=>{e.stopPropagation()},className:c.default(l.box,f),children:[d&&s.jsx(i.ClickableIcon,{onClick:u,"data-testid":"close-button",focusHighlight:!1,focusOutline:"browser",className:l.closeButton,children:s.jsx(o.CrossIcon,{})}),n]}))}));n.displayName="Modal.Box",exports.ModalBox=n;
 //# 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 * 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        ...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={ref}\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","otherProps","__rest","_jsxs","Object","assign","onClick","event","stopPropagation","clsx","styles.box","_jsx","ClickableIcon","focusHighlight","focusOutline","styles.closeButton","CrossIcon","displayName"],"mappings":"mVA2DaA,EAAWC,EAAAA,YAjDxB,SACIC,EAQAC,GARA,IAAAC,GACIA,EAAK,YAAWC,SAChBA,EAAQC,QACRA,EAAOC,gBACPA,GAAkB,EAAIC,UACtBA,GAASN,EACNO,EAAUC,EAAAA,OAAAR,EANjB,2DAkCA,OACIS,OAAA,MAAAC,OAAAC,OAAA,CACIV,IAAKA,EAAG,cACKC,GACTK,EAAU,CACdK,QA1BeC,IACnBA,EAAMC,iBAAiB,EA0BnBR,UAAWS,EAAAA,QAAKC,EAAAA,IAAYV,GAAUH,SAAA,CAErCE,GApBDY,EAAAA,IAACC,EAAAA,cAAa,CACVN,QAASR,EAAO,cACJ,eACZe,gBAAgB,EAChBC,aAAa,UACbd,UAAWe,cAAkBlB,SAE7Bc,EAAAA,IAACK,EAAAA,UAAS,CAAA,KAcbnB,KAGb,IAMCL,EAAkCyB,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_1xrlxhd.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\";\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(--close-button-top-inset, ${Spacing[\"spacing-16\"]});\n    right: var(--close-button-right-inset, ${Spacing[\"spacing-16\"]});\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(--close-button-right-inset, ${Spacing[\"spacing-20\"]});\n    }\n`;\n"],"names":[],"mappings":"wFAIgB,+BAiBQ"}

package/cjs/modal/modal-box.styles_1xrlxhd.css

@@ -0,0 +1,2 @@
+.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(--close-button-top-inset, var(--fds-spacing-16));right:var(--close-button-right-inset, 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(--close-button-right-inset, 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 l=require("../theme/utils/use-apply-styles.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 a=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 c=u(t),d=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:p,enableOverlayClick:f=!0,rootComponentId:q,zIndex:y,onOverlayClick:b,dismissKeyboardOnShow:k=!0,className:x}=t,w=e.__rest(t,["id","show","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","className"]);const{verticalHeight:F,offsetTop:O}=n.useViewport(),g=o.useRef(null),C=o.useRef(null),S=p&&d.default.cloneElement(p,{ref:g});l.useApplyStyle(C,{[s.tokens.container.verticalHeight]:null==F?null:`${F}px`,[s.tokens.container.offsetTop]:null==O?null:`${O}px`});const I=a.useEvent((()=>{var e,r;k&&(null===(r=null===(e=document.activeElement)||void 0===e?void 0:e.blur)||void 0===r||r.call(e))}));return o.useEffect((()=>{v&&I()}),[v,I]),r.jsx(i.Overlay,{"data-testid":`${u}-overlay`,show:v,enableOverlayClick:f,onOverlayClick:b,id:u,rootId:q,containerRef:g,zIndex:y,children:r.jsx("div",Object.assign({ref:C,"data-testid":u},w,{className:c.default(s.container,m[j],v&&h[j],v?s.containerShow:s.containerHide,x),children:S}))})};
 //# 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, { useEffect, 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 { verticalHeight, offsetTop } = useViewport();\n    const childRef = useRef<HTMLDivElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const childWithRef =\n        children && React.cloneElement(children, { ref: childRef });\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.container.verticalHeight]:\n            verticalHeight == null ? null : `${verticalHeight}px`,\n        [styles.tokens.container.offsetTop]:\n            offsetTop == null ? null : `${offsetTop}px`,\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    const dismissKeyboard = useEvent(() => {\n        if (dismissKeyboardOnShow) {\n            (document.activeElement as HTMLElement)?.blur?.();\n        }\n    });\n\n    useEffect(() => {\n        if (show) {\n            dismissKeyboard();\n        }\n    }, [show, dismissKeyboard]);\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <Overlay\n            data-testid={`${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 && ANIMATION_FROM_SHOW_CLASS_MAP[animationFrom],\n                    show ? styles.containerShow : 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","verticalHeight","offsetTop","useViewport","childRef","useRef","containerRef","childWithRef","React","cloneElement","ref","useApplyStyle","styles.tokens","container","dismissKeyboard","useEvent","_b","document","activeElement","blur","useEffect","_jsx","Overlay","rootId","Object","assign","clsx","styles.container","styles.containerShow","styles.containerHide"],"mappings":"+0BAWA,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,eAAEA,EAAcC,UAAEA,GAAcC,gBAChCC,EAAWC,EAAAA,OAAuB,MAClCC,EAAeD,EAAAA,OAAuB,MACtCE,EACFf,GAAYgB,UAAMC,aAAajB,EAAU,CAAEkB,IAAKN,IAEpDO,EAAAA,cAAcL,EAAc,CACxB,CAACM,EAAAA,OAAcC,UAAUZ,gBACH,MAAlBA,EAAyB,KAAO,GAAGA,MACvC,CAACW,EAAAA,OAAcC,UAAUX,WACR,MAAbA,EAAoB,KAAO,GAAGA,QAMtC,MAAMY,EAAkBC,EAAAA,UAAS,aACzBlB,YACAmB,EAAuC,UAAtCC,SAASC,qBAA6B,IAAA9B,OAAA,EAAAA,EAAE+B,6BAC7C,IAYJ,OATAC,EAAAA,WAAU,KACF9B,GACAwB,GACJ,GACD,CAACxB,EAAMwB,IAMNO,MAACC,EAAAA,uBACgB,GAAGjC,YAChBC,KAAMA,EACNG,mBAAoBA,EACpBG,eAAgBA,EAChBP,GAAIA,EACJkC,OAAQ7B,EACRY,aAAcF,EACdT,OAAQA,EAAMH,SAEd6B,EAAAA,IAAA,MAAAG,OAAAC,OAAA,CACIf,IAAKJ,gBACQjB,GACTU,EAAU,CACdD,UAAW4B,EAAAA,QACPC,EAAAA,UACArD,EAAyBiB,GACzBD,GAAQP,EAA8BQ,GACtCD,EAAOsC,EAAAA,cAAuBC,EAAAA,cAC9B/B,GACHN,SAEAe,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_1sav73f.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",offsetTop:"--fds-internal-modal-container-offsetTop"}};
 //# 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        offsetTop: \"--fds-internal-modal-container-offsetTop\",\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.container.offsetTop}: initial;\n\n    ${MediaQuery.MaxWidth.sm} {\n        height: calc(var(${tokens.container.verticalHeight}, 1vh) * 100);\n        top: var(${tokens.container.offsetTop}, 0px);\n    }\n`;\n\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","offsetTop"],"mappings":"0FAWsB,sCAsBU,2CA2BI,qCAvBN,yCA2BI,qCAvBH,yCA2BI,oCAvCN,wCA2BI,iCALP,iCANA,0BAzCJ,CAClBA,UAAW,CACPC,eAAgB,gDAChBC,UAAW"}

package/cjs/modal/modal.styles_1sav73f.css

@@ -0,0 +1,11 @@
+.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-container-offsetTop:initial;}:where(body.fds-breakpoint-sm-max) .czahu6t{height:calc(var(--fds-internal-modal-container-verticalHeight, 1vh) * 100);top:var(--fds-internal-modal-container-offsetTop, 0px);}
+.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/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"),a=require("@floating-ui/react"),i=require("clsx"),t=require("react"),l=require("../overlay/overlay.js"),s=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 n=require("../theme/utils/use-apply-styles.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 o=require("../util/use-event.js"),u=require("./modal-context.js"),d=require("./modal-v2.styles.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=c(i),v=c(t);exports.ModalV2=i=>{var{id:c,show:b,onClose:h,animationFrom:j="bottom",children:y,enableOverlayClick:f=!0,rootComponentId:q,zIndex:p,onOverlayClick:x,dismissKeyboardOnShow:g=!0,"data-testid":C="modal","aria-label":k,"aria-labelledby":O,"aria-describedby":F,disableInitialFocus:I=!1,className:w}=i,N=e.__rest(i,["id","show","onClose","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","data-testid","aria-label","aria-labelledby","aria-describedby","disableInitialFocus","className"]);const{verticalHeight:E,offsetTop:M}=s.useViewport(),S=t.useRef(null),_=t.useRef(null),z=y&&v.default.cloneElement(y,{ref:S});n.useApplyStyle(_,{[d.tokens.container.verticalHeight]:null==E?null:`${E}px`,[d.tokens.container.offsetTop]:null==M?null:`${M}px`});const{refs:P,context:R}=a.useFloating({open:b,onOpenChange:e=>{e||null==h||h()}}),{isMounted:T,status:V}=a.useTransitionStatus(R,{duration:300}),$=a.useDismiss(R,{outsidePress:!1,enabled:!!h}),{getFloatingProps:H}=a.useInteractions([$]),K=o.useEvent((()=>{var e,r;g&&(null===(r=null===(e=document.activeElement)||void 0===e?void 0:e.blur)||void 0===r||r.call(e))}));return t.useEffect((()=>{b&&K()}),[b,K]),r.jsx(l.Overlay,{"data-testid":`${C}-overlay`,show:T,enableOverlayClick:f,onOverlayClick:x,id:c,rootId:q,containerRef:S,zIndex:p,children:r.jsx("div",Object.assign({ref:_,"data-testid":C,"data-status":V,"data-animation-from":j},N,{className:m.default(d.container,w),children:r.jsx(u.ModalContext.Provider,{value:{onClose:h},children:T&&r.jsx(a.FloatingFocusManager,{context:R,initialFocus:I?-1:P.floating,children:r.jsx("div",{className:d.scrollContainer,children:r.jsx("div",Object.assign({ref:P.setFloating},H(),{role:"dialog","aria-label":k,"aria-labelledby":O,"aria-describedby":F,className:d.modalContainer,children:z}))})})})}))})};
 //# 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, { useEffect, useRef } from \"react\";\n\nimport { Overlay } from \"../overlay/overlay\";\nimport { useViewport } from \"../shared/hooks\";\nimport { useApplyStyle } from \"../theme\";\nimport { useEvent } from \"../util\";\nimport { ModalContext } from \"./modal-context\";\nimport * as styles from \"./modal-v2.styles\";\nimport type { ModalV2Props } from \"./types\";\n\nexport const ModalV2 = ({\n    id,\n    show,\n    onClose,\n    animationFrom = \"bottom\",\n    children,\n    enableOverlayClick = true,\n    rootComponentId,\n    zIndex,\n    onOverlayClick,\n    dismissKeyboardOnShow = true,\n    \"data-testid\": testId = \"modal\",\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    disableInitialFocus = false,\n    className,\n    ...otherProps\n}: ModalV2Props): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const { verticalHeight, offsetTop } = useViewport();\n    const childRef = useRef<HTMLDivElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const childWithRef =\n        children && React.cloneElement(children, { ref: childRef });\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.container.verticalHeight]:\n            verticalHeight == null ? null : `${verticalHeight}px`,\n        [styles.tokens.container.offsetTop]:\n            offsetTop == null ? null : `${offsetTop}px`,\n    });\n\n    // =========================================================================\n    // FLOATING UI CONFIG\n    // =========================================================================\n    const { refs, context } = useFloating({\n        open: show,\n        onOpenChange: (isOpen) => {\n            if (!isOpen) {\n                onClose?.();\n            }\n        },\n    });\n    const { isMounted, status } = useTransitionStatus(context, {\n        duration: 300,\n    });\n    const dismiss = useDismiss(context, {\n        /* handled by overlayclick */\n        outsidePress: false,\n        enabled: !!onClose,\n    });\n    const { getFloatingProps } = useInteractions([dismiss]);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    const dismissKeyboard = useEvent(() => {\n        if (dismissKeyboardOnShow) {\n            (document.activeElement as HTMLElement)?.blur?.();\n        }\n    });\n\n    useEffect(() => {\n        if (show) {\n            dismissKeyboard();\n        }\n    }, [show, dismissKeyboard]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <Overlay\n            data-testid={`${testId}-overlay`}\n            show={isMounted}\n            enableOverlayClick={enableOverlayClick}\n            onOverlayClick={onOverlayClick}\n            id={id}\n            rootId={rootComponentId}\n            containerRef={childRef}\n            zIndex={zIndex}\n        >\n            <div\n                ref={containerRef}\n                data-testid={testId}\n                data-status={status}\n                data-animation-from={animationFrom}\n                {...otherProps}\n                className={clsx(styles.container, className)}\n            >\n                <ModalContext.Provider value={{ onClose }}>\n                    {isMounted && (\n                        <FloatingFocusManager\n                            context={context}\n                            initialFocus={\n                                disableInitialFocus ? -1 : refs.floating\n                            }\n                        >\n                            <div className={styles.scrollContainer}>\n                                <div\n                                    ref={refs.setFloating}\n                                    {...getFloatingProps()}\n                                    role=\"dialog\"\n                                    aria-label={ariaLabel}\n                                    aria-labelledby={ariaLabelledBy}\n                                    aria-describedby={ariaDescribedBy}\n                                    className={styles.modalContainer}\n                                >\n                                    {childWithRef}\n                                </div>\n                            </div>\n                        </FloatingFocusManager>\n                    )}\n                </ModalContext.Provider>\n            </div>\n        </Overlay>\n    );\n};\n"],"names":["_a","id","show","onClose","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","testId","ariaLabel","ariaLabelledBy","ariaDescribedBy","disableInitialFocus","className","otherProps","__rest","verticalHeight","offsetTop","useViewport","childRef","useRef","containerRef","childWithRef","React","cloneElement","ref","useApplyStyle","styles.tokens","container","refs","context","useFloating","open","onOpenChange","isOpen","isMounted","status","useTransitionStatus","duration","dismiss","useDismiss","outsidePress","enabled","getFloatingProps","useInteractions","dismissKeyboard","useEvent","_b","document","activeElement","blur","useEffect","_jsx","Overlay","rootId","Object","assign","clsx","styles.container","ModalContext","Provider","value","FloatingFocusManager","initialFocus","floating","styles.scrollContainer","setFloating","role","styles.modalContainer"],"mappings":"k6BAkBwBA,QAAAC,GACpBA,EAAEC,KACFA,EAAIC,QACJA,EAAOC,cACPA,EAAgB,SAAQC,SACxBA,EAAQC,mBACRA,GAAqB,EAAIC,gBACzBA,EAAeC,OACfA,EAAMC,eACNA,EAAcC,sBACdA,GAAwB,EACxB,cAAeC,EAAS,QACxB,aAAcC,EACd,kBAAmBC,EACnB,mBAAoBC,EAAeC,oBACnCA,GAAsB,EAAKC,UAC3BA,GAAShB,EACNiB,EAAUC,EAAAA,OAAAlB,EAjBO,CAAA,KAAA,OAAA,UAAA,gBAAA,WAAA,qBAAA,kBAAA,SAAA,iBAAA,wBAAA,cAAA,aAAA,kBAAA,mBAAA,sBAAA,cAsBpB,MAAMmB,eAAEA,EAAcC,UAAEA,GAAcC,gBAChCC,EAAWC,EAAAA,OAAuB,MAClCC,EAAeD,EAAAA,OAAuB,MACtCE,EACFpB,GAAYqB,UAAMC,aAAatB,EAAU,CAAEuB,IAAKN,IAEpDO,EAAAA,cAAcL,EAAc,CACxB,CAACM,EAAAA,OAAcC,UAAUZ,gBACH,MAAlBA,EAAyB,KAAO,GAAGA,MACvC,CAACW,EAAAA,OAAcC,UAAUX,WACR,MAAbA,EAAoB,KAAO,GAAGA,QAMtC,MAAMY,KAAEA,EAAIC,QAAEA,GAAYC,cAAY,CAClCC,KAAMjC,EACNkC,aAAeC,IACNA,GACDlC,SAAAA,GACJ,KAGFmC,UAAEA,EAASC,OAAEA,GAAWC,EAAAA,oBAAoBP,EAAS,CACvDQ,SAAU,MAERC,EAAUC,EAAAA,WAAWV,EAAS,CAEhCW,cAAc,EACdC,UAAW1C,KAET2C,iBAAEA,GAAqBC,kBAAgB,CAACL,IAKxCM,EAAkBC,EAAAA,UAAS,aACzBvC,YACAwC,EAAuC,UAAtCC,SAASC,qBAA6B,IAAApD,OAAA,EAAAA,EAAEqD,6BAC7C,IAYJ,OATAC,EAAAA,WAAU,KACFpD,GACA8C,GACJ,GACD,CAAC9C,EAAM8C,IAMNO,MAACC,EAAAA,QAAO,CAAA,cACS,GAAG7C,YAChBT,KAAMoC,EACNhC,mBAAoBA,EACpBG,eAAgBA,EAChBR,GAAIA,EACJwD,OAAQlD,EACRiB,aAAcF,EACdd,OAAQA,EAAMH,SAEdkD,EAAAA,IAAA,MAAAG,OAAAC,OAAA,CACI/B,IAAKJ,EAAY,cACJb,EAAM,cACN4B,EAAM,sBACEnC,GACjBa,GACJD,UAAW4C,UAAKC,EAAAA,UAAkB7C,GAAUX,SAE5CkD,MAACO,EAAAA,aAAaC,SAAQ,CAACC,MAAO,CAAE7D,WAASE,SACpCiC,GACGiB,EAAAA,IAACU,uBAAoB,CACjBhC,QAASA,EACTiC,aACInD,GAAsB,EAAKiB,EAAKmC,SAAQ9D,SAG5CkD,EAAAA,IAAA,MAAA,CAAKvC,UAAWoD,EAAAA,gBAAsB/D,SAClCkD,MAAA,MAAAG,OAAAC,OAAA,CACI/B,IAAKI,EAAKqC,aACNvB,IAAkB,CACtBwB,KAAK,SAAQ,aACD1D,EAAS,kBACJC,EAAc,mBACbC,EAClBE,UAAWuD,EAAAA,wBAEV9C,eAOnB"}

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_1irpyi6.css");exports.container="c1jrmyjd",exports.modalContainer="mn5ir3",exports.scrollContainer="s1xsiaxz",exports.tokens={container:{verticalHeight:"--fds-internal-modalV2-container-verticalHeight",offsetTop:"--fds-internal-modalV2-container-offsetTop"}};
 //# sourceMappingURL=modal-v2.styles.js.map

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"card.js","sources":["../../../../src/modal-v2/slots/card.tsx"],"sourcesContent":["import React from \"react\";\nimport { isStyledComponent } from \"styled-components\";\n\nimport type { ModalCardProps } from \"../types\";\nimport { CloseButton } from \"./close-button\";\nimport { Content } from \"./content\";\nimport { Footer } from \"./footer\";\nimport { ModalCard, SlotSpacer } from \"./slot-styles\";\n\nexport const Card = ({\n    id,\n    \"data-testid\": testId = \"modal-card\",\n    children,\n    ...otherProps\n}: ModalCardProps) => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\n    };\n\n    // =========================================================================\n    // HELPERS\n    // =========================================================================\n    const isComponentType = (child: React.ReactPortal, type: any) =>\n        isStyledComponent(child.type)\n            ? (child.type as unknown as { target: any }).target === type\n            : child.type === type;\n\n    const findComponentOfType = (type: any) => {\n        return React.Children.toArray(children).find((child) =>\n            isComponentType(child as React.ReactPortal, type)\n        );\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const CloseButtonSlot = findComponentOfType(CloseButton);\n    const ContentSlot = findComponentOfType(Content);\n    const FooterSlot = findComponentOfType(Footer);\n\n    const hasCloseButton = !!CloseButtonSlot;\n\n    return (\n        <ModalCard\n            id={id}\n            data-testid={testId}\n            {...otherProps}\n            onClick={handleOnClick}\n        >\n            <SlotSpacer $hasCloseButton={hasCloseButton}>\n                {ContentSlot}\n                {FooterSlot}\n            </SlotSpacer>\n            {hasCloseButton && CloseButtonSlot}\n        </ModalCard>\n    );\n};\n\nCard.displayName = \"ModalV2.Card\";\n"],"names":["Card","_a","id","testId","children","otherProps","__rest","findComponentOfType","type","React","Children","toArray","find","child","isStyledComponent","target","isComponentType","CloseButtonSlot","CloseButton","ContentSlot","Content","FooterSlot","Footer","hasCloseButton","_jsxs","ModalCard","Object","assign","onClick","event","stopPropagation","SlotSpacer","$hasCloseButton","displayName"],"mappings":"2UASO,MAAMA,EAAQC,IAAA,IAAAC,GACjBA,EACA,cAAeC,EAAS,aAAYC,SACpCA,GAAQH,EACLI,EAAUC,EAAAA,OAAAL,EAJI,iCASjB,MAYMM,EAAuBC,GAClBC,UAAMC,SAASC,QAAQP,GAAUQ,MAAMC,GAN1B,EAACA,EAA0BL,IAC/CM,EAAAA,kBAAkBD,EAAML,MACjBK,EAAML,KAAoCO,SAAWP,EACtDK,EAAML,OAASA,EAIjBQ,CAAgBH,EAA4BL,KAO9CS,EAAkBV,EAAoBW,eACtCC,EAAcZ,EAAoBa,WAClCC,EAAad,EAAoBe,UAEjCC,IAAmBN,EAEzB,OACIO,EAAAA,KAACC,EAAAA,UAASC,OAAAC,OAAA,CACNzB,GAAIA,EAAE,cACOC,GACTE,EAAU,CACduB,QAhCeC,IACnBA,EAAMC,iBAAiB,EA+BG1B,SAAA,CAEtBoB,EAAAA,KAACO,EAAAA,WAAU,CAAAC,gBAAkBT,EAAcnB,SAAA,CACtCe,EACAE,KAEJE,GAAkBN,KACX,EAIpBjB,EAAKiC,YAAc"}
+{"version":3,"file":"card.js","sources":["../../../../src/modal-v2/slots/card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { NamedExoticComponent } from \"react\";\nimport React from \"react\";\nimport { isStyledComponent } from \"styled-components\";\n\nimport type { ModalCardProps } from \"../types\";\nimport { CloseButton } from \"./close-button\";\nimport { Content } from \"./content\";\nimport { Footer } from \"./footer\";\nimport * as styles from \"./slot-styles\";\n\nfunction CardInner(\n    {\n        id,\n        \"data-testid\": testId = \"modal-card\",\n        children,\n        className,\n        ...otherProps\n    }: ModalCardProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n) {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\n    };\n\n    // =========================================================================\n    // HELPERS\n    // =========================================================================\n    const isComponentType = (child: React.ReactPortal, type: any) =>\n        isStyledComponent(child.type)\n            ? (child.type as unknown as { target: any }).target === type\n            : child.type === type;\n\n    const findComponentOfType = (type: any) => {\n        return React.Children.toArray(children).find((child) =>\n            isComponentType(child as React.ReactPortal, type)\n        );\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const CloseButtonSlot = findComponentOfType(CloseButton);\n    const ContentSlot = findComponentOfType(Content);\n    const FooterSlot = findComponentOfType(Footer);\n\n    const hasCloseButton = !!CloseButtonSlot;\n\n    return (\n        <div\n            ref={ref}\n            id={id}\n            data-testid={testId}\n            {...otherProps}\n            onClick={handleOnClick}\n            className={clsx(styles.modalCard, className)}\n        >\n            <div\n                data-has-close-button={hasCloseButton ? \"true\" : \"false\"}\n                className={clsx(styles.slotSpacer)}\n            >\n                {ContentSlot}\n                {FooterSlot}\n            </div>\n            {hasCloseButton && CloseButtonSlot}\n        </div>\n    );\n}\n\nexport const Card = React.forwardRef<HTMLDivElement, ModalCardProps>(CardInner);\n\n(Card as NamedExoticComponent).displayName = \"ModalV2.Card\";\n"],"names":["Card","React","forwardRef","_a","ref","id","testId","children","className","otherProps","__rest","findComponentOfType","type","Children","toArray","find","child","isStyledComponent","target","isComponentType","CloseButtonSlot","CloseButton","ContentSlot","Content","FooterSlot","Footer","hasCloseButton","_jsxs","Object","assign","onClick","event","stopPropagation","clsx","styles.modalCard","styles.slotSpacer","displayName"],"mappings":"oWAwEO,MAAMA,EAAOC,EAAAA,QAAMC,YA7D1B,SACIC,EAOAC,GAPA,IAAAC,GACIA,EACA,cAAeC,EAAS,aAAYC,SACpCA,EAAQC,UACRA,GAASL,EACNM,EAAUC,EAAAA,OAAAP,EALjB,6CAYA,MAYMQ,EAAuBC,GAClBX,UAAMY,SAASC,QAAQP,GAAUQ,MAAMC,GAN1B,EAACA,EAA0BJ,IAC/CK,EAAAA,kBAAkBD,EAAMJ,MACjBI,EAAMJ,KAAoCM,SAAWN,EACtDI,EAAMJ,OAASA,EAIjBO,CAAgBH,EAA4BJ,KAO9CQ,EAAkBT,EAAoBU,eACtCC,EAAcX,EAAoBY,WAClCC,EAAab,EAAoBc,UAEjCC,IAAmBN,EAEzB,OACIO,EAAAA,KAAA,MAAAC,OAAAC,OAAA,CACIzB,IAAKA,EACLC,GAAIA,EAAE,cACOC,GACTG,EAAU,CACdqB,QAjCeC,IACnBA,EAAMC,iBAAiB,EAiCnBxB,UAAWyB,EAAAA,QAAKC,EAAAA,UAAkB1B,GAAUD,SAAA,CAE5CoB,EAAAA,KAAA,MAAA,CAAA,wBAC2BD,EAAiB,OAAS,QACjDlB,UAAWyB,EAAAA,QAAKE,EAAAA,YAAkB5B,SAAA,CAEjCe,EACAE,KAEJE,GAAkBN,KAG/B,IAICpB,EAA8BoC,YAAc"}

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

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

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

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

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

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

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

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

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

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

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

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