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

package/menu/menu-item.styles.js

@@ -1,8 +1,2 @@
-import o from"styled-components";import{Typography as t}from"../typography/index.js";import{V3_Spacing as e,V3_Colour as i}from"../v3_theme/index.js";const p=o.li`
-    display: flex;
-    flex-direction: column;
-    padding: ${e["spacing-8"]} ${e["spacing-16"]};
-`,r=o(t.BodySM)`
-    color: ${i["text-subtler"]};
-`;export{p as MenuItemDiv,r as SubLabel};
+import"./menu-item.styles_liyed8.css";const s="m1ddqpur",t="tor9xcz",e="s12tso9";export{s as menuItemDiv,e as subLabel,t as text};
 //# sourceMappingURL=menu-item.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"menu-item.styles.js","sources":["../../src/menu/menu-item.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { Typography } from \"../typography\";\nimport { V3_Colour, V3_Spacing } from \"../v3_theme\";\n\n// =============================================================================\n// MENU ITEM STYLES\n// =============================================================================\nexport const MenuItemDiv = styled.li`\n    display: flex;\n    flex-direction: column;\n    padding: ${V3_Spacing[\"spacing-8\"]} ${V3_Spacing[\"spacing-16\"]};\n`;\n\nexport const SubLabel = styled(Typography.BodySM)`\n    color: ${V3_Colour[\"text-subtler\"]};\n`;\n"],"names":["MenuItemDiv","styled","li","V3_Spacing","SubLabel","Typography","BodySM","V3_Colour"],"mappings":"sJAQO,MAAMA,EAAcC,EAAOC,EAAE;;;eAGrBC,EAAW,gBAAgBA,EAAW;EAGxCC,EAAWH,EAAOI,EAAWC,OAAO;aACpCC,EAAU;"}
+{"version":3,"file":"menu-item.styles.js","sources":["../../src/menu/menu-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Spacing } from \"../theme/tokens\";\n\nexport const menuItemDiv = css`\n    display: flex;\n    flex-direction: column;\n    padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n`;\n\nexport const text = css`\n    color: ${Colour[\"text\"]};\n`;\n\nexport const subLabel = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n"],"names":["menuItemDiv","text","subLabel"],"mappings":"0DAIO,MAAMA,EAAW,WAMXC,EAAI,UAIJC,EAAQ"}

package/menu/menu-item.styles_liyed8.css

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

package/menu/menu-link.d.ts

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

package/menu/menu-link.js

@@ -1,2 +1,2 @@
-import{__rest as t}from"../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import{MenuLinkDiv as i,Link as n}from"./menu-link.styles.js";const r=r=>{var{children:s,"data-testid":a="menu-link"}=r,d=t(r,["children","data-testid"]);return e(i,{children:e(n,Object.assign({"data-testid":a,underlineStyle:"none"},d,{children:s}))})};r.displayName="Menu.Link";export{r as MenuLink};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import i from"clsx";import{Typography as r}from"../typography/index.js";import{menuLinkDiv as s,link as a}from"./menu-link.styles.js";const n=n=>{var{children:l,className:m,"data-testid":o="menu-link"}=n,d=e(n,["children","className","data-testid"]);return t("li",{className:s,children:t(r.LinkMD,Object.assign({"data-testid":o,underlineStyle:"none",className:i(a,m)},d,{children:l}))})};n.displayName="Menu.Link";export{n as MenuLink};
 //# sourceMappingURL=menu-link.js.map

package/menu/menu-link.js.map

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

package/menu/menu-link.styles.d.ts

@@ -1,4 +1,2 @@
-export declare const MenuLinkDiv: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
-export declare const Link: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyLinkProps & {
-    ref?: import("react").RefObject<HTMLAnchorElement> | undefined;
-}, never>> & string;
+export declare const menuLinkDiv: import("@linaria/core").LinariaClassName;
+export declare const link: import("@linaria/core").LinariaClassName;

package/menu/menu-link.styles.js

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

package/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":"6OASO,MAAMA,EAAcC,EAAOC,EAAE;;;EAKvBC,EAAOF,EAAOG,EAAWC,OAAO;aAChCC,EAAgB;;gBAEbC,EAAW;;cAEbC,EAAiB;oBACXD,EAAW,gBAAgBA,EAAW;;qBAErCE,EAAc;;MAE7BC,EAAa;;;;;;4BAMSJ,EAAU;iBACrBA,EAAgB;;;;6BAIJA,EAAU;;;"}
+{"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":["menuLinkDiv","link"],"mappings":"0DAKO,MAAMA,EAAW,UAKXC,EAAI"}

package/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/menu/menu-section.d.ts

@@ -1,5 +1,5 @@
 import type { MenuSectionProps } from "./types";
 export declare const MenuSection: {
-    ({ children, label, showDivider, "data-testid": testId, ...otherProps }: MenuSectionProps): JSX.Element;
+    ({ children, label, showDivider, className, "data-testid": testId, ...otherProps }: MenuSectionProps): JSX.Element;
     displayName: string;
 };

package/menu/menu-section.js

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

package/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":"8WAMO,MAAMA,EAAeC,IAAA,IAAAC,SACxBA,EAAQC,MACRA,EAAKC,YACLA,GAAc,EACd,cAAeC,EAAS,gBAAcJ,EACnCK,EAAUC,EAAAN,EALW,kDAUxB,MAAOO,GAAcC,GAAS,IAAMC,EAAkBC,aAKtD,OACIC,EAACC,EAAOC,OAAAC,OAAA,CAAAC,aACUZ,EAAW,cACZC,EAAM,kBACFG,GACbF,EAAU,CAAAJ,SAAA,CAEbC,GACGc,EAACC,EAAK,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":"kdAOO,MAAMA,EAAeC,QAAAC,SACxBA,EAAQC,MACRA,EAAKC,YACLA,GAAc,EAAIC,UAClBA,EACA,cAAeC,EAAS,gBAAcL,EACnCM,EAAUC,EAAAP,EANW,8DAWxB,MAAMQ,EAAaC,IAKnB,OACIC,EAAA,KAAAC,OAAAC,OAAA,CAAA,cACiBP,EAAM,kBACFG,EACjBJ,UAAWS,EACPC,EACAX,GAAeY,EACfX,IAEAE,EAAU,CAAAL,SAAA,CAEbC,GACGc,EAACC,EAAWC,OAAM,CACdd,UAAWe,EACXC,OAAO,WACPC,GAAIb,EAAUP,SAEbC,IAGRD,KACA,EAIbF,EAAYuB,YAAc"}

package/menu/menu-section.styles.d.ts

@@ -1,8 +1,3 @@
-interface MenuSectionStyleProps {
-    $showDivider?: boolean;
-}
-export declare const Section: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, MenuSectionStyleProps>> & string;
-export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
-export {};
+export declare const section: import("@linaria/core").LinariaClassName;
+export declare const sectionWithDivider: import("@linaria/core").LinariaClassName;
+export declare const label: import("@linaria/core").LinariaClassName;

package/menu/menu-section.styles.js

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

package/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":"+KAeO,MAAMA,EAAUC,EAAOC,EAAyB;MAChDC,GACCA,EAAMC,cACNC,CAAG;0BACeC,EAAU,gBAAgBA,EAAiB;kBACnDC,EAAkB;;eAErBC,EAAW;;;EAKbC,EAAQR,EAAOS,EAAWC,OAAO;gBAC9BH,EAAW,iBAAiBA,EAAW;aAC1CD,EAAU;"}
+{"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":["section","sectionWithDivider","label"],"mappings":"6DAIO,MAAMA,EAAO,WAKPC,EAAkB,WAIlBC,EAAK"}

package/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/menu/menu.d.ts

@@ -2,19 +2,19 @@ import type { MenuContentProps, MenuProps } from "./types";
 export declare const MenuTrigger: ({ children, position, menuContent, "data-testid": testId, ...otherProps }: MenuProps) => JSX.Element;
 export declare const Menu: (({ children, position, menuContent, "data-testid": testId, ...otherProps }: MenuProps) => JSX.Element) & {
     Content: {
-        ({ children, "data-testid": testId, overflow, maxHeight, ...otherProps }: MenuContentProps): JSX.Element;
+        ({ children, className, "data-testid": testId, overflow, maxHeight, ...otherProps }: MenuContentProps): JSX.Element;
         displayName: string;
     };
     Section: {
-        ({ children, label, showDivider, "data-testid": testId, ...otherProps }: import("./types").MenuSectionProps): JSX.Element;
+        ({ children, label, showDivider, className, "data-testid": testId, ...otherProps }: import("./types").MenuSectionProps): JSX.Element;
         displayName: string;
     };
     Item: {
-        ({ label, subLabel, children, "data-testid": testId, ...otherProps }: import("./types").MenuItemProps): JSX.Element;
+        ({ label, subLabel, children, className, "data-testid": testId, ...otherProps }: import("./types").MenuItemProps): JSX.Element;
         displayName: string;
     };
     Link: {
-        ({ children, "data-testid": testId, ...otherProps }: import("./types").MenuLinkProps): JSX.Element;
+        ({ children, className, "data-testid": testId, ...otherProps }: import("./types").MenuLinkProps): JSX.Element;
         displayName: string;
     };
 };

package/menu/menu.js

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

package/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":"glBAUO,MAAMA,EAAeC,IAAA,IAAAC,SACxBA,EAAQC,SACRA,EAAW,eAAcC,YACzBA,EACA,cAAeC,EAAS,QAAMJ,EAC3BK,EAAUC,EAAAN,EALW,qDAUxB,OACIO,EAACC,iBACGN,SAAUA,EACVO,eAAiBC,GACbC,EAA+BR,EAAa,CACxCS,SAAUF,EAAYE,SACtBC,UAAWH,EAAYG,YACzB,cAEOT,GACTC,YAEHJ,IACY,EAIZa,EAAOC,OAAOC,OAAOjB,EAAa,CAC3CkB,QAASC,EACTC,QAASC,EACTC,KAAMC,EACNC,KAAMC"}
+{"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":"wjCAUO,MAAMA,EAAeC,IAAA,IAAAC,SACxBA,EAAQC,SACRA,EAAW,eAAcC,YACzBA,EACA,cAAeC,EAAS,QAAMJ,EAC3BK,EAAUC,EAAAN,EALW,qDAUxB,OACIO,EAACC,iBACGN,SAAUA,EACVO,eAAiBC,GACbC,EAA+BR,EAAa,CACxCS,SAAUF,EAAYE,SACtBC,UAAWH,EAAYG,YACzB,cAEOT,GACTC,YAEHJ,IACY,EAIZa,EAAOC,OAAOC,OAAOjB,EAAa,CAC3CkB,QAASC,EACTC,QAASC,EACTC,KAAMC,EACNC,KAAMC"}

package/modal/index.d.ts

@@ -1,4 +1,4 @@
-export declare const Modal: (({ id, show, animationFrom, children, enableOverlayClick, rootComponentId, zIndex, onOverlayClick, dismissKeyboardOnShow, ...otherProps }: import("./types").ModalProps) => JSX.Element) & {
-    Box: ({ id, children, onClose, showCloseButton, ...otherProps }: import("./types").ModalBoxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Modal: (({ id, show, animationFrom, children, enableOverlayClick, rootComponentId, zIndex, onOverlayClick, dismissKeyboardOnShow, className, ...otherProps }: import("./types").ModalProps) => JSX.Element) & {
+    Box: (props: import("./types").ModalBoxProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
 };
 export * from "./types";

package/modal/modal-box.d.ts

@@ -1,2 +1,3 @@
+import type React from "react";
 import type { ModalBoxProps } from "./types";
-export declare const ModalBox: ({ id, children, onClose, showCloseButton, ...otherProps }: ModalBoxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ModalBox: (props: ModalBoxProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/modal/modal-box.js

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

package/modal/modal-box.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-box.js","sources":["../../src/modal/modal-box.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport type React from \"react\";\n\nimport { Box, CloseButton } from \"./modal-box.styles\";\nimport type { ModalBoxProps } from \"./types\";\n\nexport const ModalBox = ({\n    id = \"modal-box\",\n    children,\n    onClose,\n    showCloseButton = true,\n    ...otherProps\n}: ModalBoxProps) => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderCloseButton = () => {\n        return (\n            <CloseButton\n                onClick={onClose}\n                data-testid=\"close-button\"\n                focusHighlight={false}\n                focusOutline=\"browser\"\n            >\n                <CrossIcon />\n            </CloseButton>\n        );\n    };\n\n    return (\n        <Box data-testid={id} {...otherProps} onClick={handleOnClick}>\n            {showCloseButton && renderCloseButton()}\n            {children}\n        </Box>\n    );\n};\n"],"names":["ModalBox","_a","id","children","onClose","showCloseButton","otherProps","__rest","_jsxs","Box","Object","assign","onClick","event","stopPropagation","_jsx","CloseButton","focusHighlight","focusOutline","CrossIcon"],"mappings":"oNAMO,MAAMA,EAAYC,IAAA,IAAAC,GACrBA,EAAK,YAAWC,SAChBA,EAAQC,QACRA,EAAOC,gBACPA,GAAkB,GAAIJ,EACnBK,EAAUC,EAAAN,EALQ,+CA8BrB,OACIO,EAACC,EAAGC,OAAAC,OAAA,CAAA,cAAcT,GAAQI,GAAYM,QArBnBC,IACnBA,EAAMC,iBAAiB,EAoBqCX,SAAA,CACvDE,GAbDU,EAACC,EAAW,CACRJ,QAASR,EAAO,cACJ,eACZa,gBAAgB,EAChBC,aAAa,UAASf,SAEtBY,EAACI,EAAS,CAAA,KAQbhB,KACC"}
+{"version":3,"file":"modal-box.js","sources":["../../src/modal/modal-box.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport type { NamedExoticComponent } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport * 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":"4VA2DaA,EAAWC,GAjDxB,SACIC,EAQAC,GARA,IAAAC,GACIA,EAAK,YAAWC,SAChBA,EAAQC,QACRA,EAAOC,gBACPA,GAAkB,EAAIC,UACtBA,GAASN,EACNO,EAAUC,EAAAR,EANjB,2DAkCA,OACIS,EAAA,MAAAC,OAAAC,OAAA,CACIV,IAAKA,EAAG,cACKC,GACTK,EAAU,CACdK,QA1BeC,IACnBA,EAAMC,iBAAiB,EA0BnBR,UAAWS,EAAKC,EAAYV,GAAUH,SAAA,CAErCE,GApBDY,EAACC,EAAa,CACVN,QAASR,EAAO,cACJ,eACZe,gBAAgB,EAChBC,aAAa,UACbd,UAAWe,EAAkBlB,SAE7Bc,EAACK,EAAS,CAAA,KAcbnB,KAGb,IAMCL,EAAkCyB,YAAc"}

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

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

package/modal/modal-box.styles.js

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

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

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

package/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/modal/modal.d.ts

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

package/modal/modal.js

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

package/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../src/modal/modal.tsx"],"sourcesContent":["import { useEffect } from \"react\";\n\nimport { Overlay } from \"../overlay/overlay\";\nimport { useViewport } from \"../shared/hooks\";\nimport { Container } from \"./modal.styles\";\nimport type { ModalProps } from \"./types\";\n\nexport const Modal = ({\n    id = \"modal\",\n    show,\n    animationFrom = \"bottom\",\n    children,\n    enableOverlayClick = true,\n    rootComponentId,\n    zIndex,\n    onOverlayClick,\n    dismissKeyboardOnShow = true,\n    ...otherProps\n}: ModalProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const { verticalHeight, offsetTop } = useViewport();\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (show && dismissKeyboardOnShow) {\n            // dismiss software keyboard to put modal in fullscreen\n            (document.activeElement as HTMLElement)?.blur?.();\n        }\n    }, [show]);\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <Overlay\n            data-testid={`${id}-overlay`}\n            show={show}\n            enableOverlayClick={enableOverlayClick}\n            onOverlayClick={onOverlayClick}\n            id={id}\n            rootId={rootComponentId}\n            zIndex={zIndex}\n        >\n            <Container\n                $show={show}\n                $animationFrom={animationFrom}\n                data-testid={id}\n                $verticalHeight={verticalHeight}\n                $offsetTop={offsetTop}\n                {...otherProps}\n            >\n                {children}\n            </Container>\n        </Overlay>\n    );\n};\n"],"names":["Modal","_a","id","show","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","otherProps","__rest","verticalHeight","offsetTop","useViewport","useEffect","_b","document","activeElement","blur","_jsx","Overlay","rootId","Container","Object","assign","$show","$animationFrom","$verticalHeight","$offsetTop"],"mappings":"oRAOO,MAAMA,EAASC,IAAA,IAAAC,GAClBA,EAAK,QAAOC,KACZA,EAAIC,cACJA,EAAgB,SAAQC,SACxBA,EAAQC,mBACRA,GAAqB,EAAIC,gBACzBA,EAAeC,OACfA,EAAMC,eACNA,EAAcC,sBACdA,GAAwB,GAAIT,EACzBU,EAAUC,EAAAX,EAVK,mIAelB,MAAMY,eAAEA,EAAcC,UAAEA,GAAcC,IAetC,OAVAC,GAAU,aACFb,GAAQO,YAERO,EAAuC,UAAtCC,SAASC,qBAA6B,IAAAlB,OAAA,EAAAA,EAAEmB,6BAC7C,GACD,CAACjB,IAMAkB,EAACC,EAAO,CAAA,cACS,GAAGpB,YAChBC,KAAMA,EACNG,mBAAoBA,EACpBG,eAAgBA,EAChBP,GAAIA,EACJqB,OAAQhB,EACRC,OAAQA,EAAMH,SAEdgB,EAACG,EAASC,OAAAC,OAAA,CAAAC,MACCxB,EAAIyB,eACKxB,EAAa,cAChBF,EAAE2B,gBACEhB,EAAciB,WACnBhB,GACRH,YAEHN,MAEC"}
+{"version":3,"file":"modal.js","sources":["../../src/modal/modal.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { 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","Modal","_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":"4jCAWA,MAAMA,EAAoE,CACtEC,IAAKC,EACLC,OAAQC,EACRC,KAAMC,EACNC,MAAOC,GAGLC,EAAyE,CAC3ER,IAAKS,EACLP,OAAQQ,EACRN,KAAMO,EACNL,MAAOM,GAGEC,EAASC,IAAA,IAAAC,GAClBA,EAAK,QAAOC,KACZA,EAAIC,cACJA,EAAgB,SAAQC,SACxBA,EAAQC,mBACRA,GAAqB,EAAIC,gBACzBA,EAAeC,OACfA,EAAMC,eACNA,EAAcC,sBACdA,GAAwB,EAAIC,UAC5BA,GAASV,EACNW,EAAUC,EAAAZ,EAXK,+IAgBlB,MAAMa,eAAEA,EAAcC,UAAEA,GAAcC,IAChCC,EAAWC,EAAuB,MAClCC,EAAeD,EAAuB,MACtCE,EACFf,GAAYgB,EAAMC,aAAajB,EAAU,CAAEkB,IAAKN,IAEpDO,EAAcL,EAAc,CACxB,CAACM,EAAcC,UAAUZ,gBACH,MAAlBA,EAAyB,KAAO,GAAGA,MACvC,CAACW,EAAcC,UAAUX,WACR,MAAbA,EAAoB,KAAO,GAAGA,QAMtC,MAAMY,EAAkBC,GAAS,aACzBlB,YACAmB,EAAuC,UAAtCC,SAASC,qBAA6B,IAAA9B,OAAA,EAAAA,EAAE+B,6BAC7C,IAYJ,OATAC,GAAU,KACF9B,GACAwB,GACJ,GACD,CAACxB,EAAMwB,IAMNO,EAACC,iBACgB,GAAGjC,YAChBC,KAAMA,EACNG,mBAAoBA,EACpBG,eAAgBA,EAChBP,GAAIA,EACJkC,OAAQ7B,EACRY,aAAcF,EACdT,OAAQA,EAAMH,SAEd6B,EAAA,MAAAG,OAAAC,OAAA,CACIf,IAAKJ,gBACQjB,GACTU,EAAU,CACdD,UAAW4B,EACPC,EACAtD,EAAyBkB,GACzBD,GAAQR,EAA8BS,GACtCD,EAAOsC,EAAuBC,EAC9B/B,GACHN,SAEAe,MAEC"}

package/modal/modal.styles.d.ts

@@ -1,9 +1,17 @@
-import type { ModalAnimationDirection } from "../modal-v2/types";
-interface Props {
-    $show: boolean;
-    $animationFrom?: ModalAnimationDirection;
-    $verticalHeight?: number;
-    $offsetTop?: number;
-}
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Props>> & string;
-export {};
+export declare const tokens: {
+    readonly container: {
+        readonly verticalHeight: "--fds-internal-modal-container-verticalHeight";
+        readonly offsetTop: "--fds-internal-modal-container-offsetTop";
+    };
+};
+export declare const container: import("@linaria/core").LinariaClassName;
+export declare const containerFromTop: import("@linaria/core").LinariaClassName;
+export declare const containerFromBottom: import("@linaria/core").LinariaClassName;
+export declare const containerFromLeft: import("@linaria/core").LinariaClassName;
+export declare const containerFromRight: import("@linaria/core").LinariaClassName;
+export declare const containerShow: import("@linaria/core").LinariaClassName;
+export declare const containerHide: import("@linaria/core").LinariaClassName;
+export declare const containerFromTopShow: import("@linaria/core").LinariaClassName;
+export declare const containerFromBottomShow: import("@linaria/core").LinariaClassName;
+export declare const containerFromLeftShow: import("@linaria/core").LinariaClassName;
+export declare const containerFromRightShow: import("@linaria/core").LinariaClassName;

package/modal/modal.styles.js

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

package/modal/modal.styles.js.map

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

package/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/modal/types.d.ts

@@ -1,7 +1,11 @@
 import type { ModalAnimationDirection } from "../modal-v2/types";
 export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
     show: boolean;
-    children: React.ReactNode;
+    /** The content of the modal. The parent element must be a valid HTML
+     * element or a component that forwards a ref to a valid HTML element. This
+     * element is used to determine the boundaries for overlay click
+     * detection. Fragments are not supported. */
+    children: React.JSX.Element;
     /** Animation direction of appearance and dismissal. Values: "top" | "bottom" | "left" | "right" */
     animationFrom?: ModalAnimationDirection | undefined;
     enableOverlayClick?: boolean | undefined;

package/modal-v2/index.d.ts

@@ -1,18 +1,15 @@
-export declare const ModalV2: (({ id, show, onClose, animationFrom, children, enableOverlayClick, rootComponentId, zIndex, onOverlayClick, dismissKeyboardOnShow, "data-testid": testId, ...otherProps }: import("./types").ModalV2Props) => JSX.Element) & {
-    Card: {
-        ({ id, "data-testid": testId, children, ...otherProps }: import("./types").ModalCardProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
+export declare const ModalV2: (({ id, show, onClose, animationFrom, children, enableOverlayClick, rootComponentId, zIndex, onOverlayClick, dismissKeyboardOnShow, "data-testid": testId, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, disableInitialFocus, className, ...otherProps }: import("./types").ModalV2Props) => JSX.Element) & {
+    Card: (props: import("./types").ModalCardProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
     CloseButton: {
-        ({ "data-testid": testId, ...otherProps }: import("./types").ModalCloseButtonProps): import("react/jsx-runtime").JSX.Element;
+        ({ "data-testid": testId, className, ...otherProps }: import("./types").ModalCloseButtonProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Content: {
-        ({ "data-testid": testId, children, ...otherProps }: import("./types").ModalContentProps): import("react/jsx-runtime").JSX.Element;
+        ({ "data-testid": testId, children, className, ...otherProps }: import("./types").ModalContentProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Footer: {
-        ({ "data-testid": testId, primaryButton, secondaryButton, ...otherProps }: import("./types").ModalFooterProps): import("react/jsx-runtime").JSX.Element;
+        ({ "data-testid": testId, primaryButton, secondaryButton, className, ...otherProps }: import("./types").ModalFooterProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
 };

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

@@ -1,2 +1,2 @@
 import type { ModalV2Props } from "./types";
-export declare const ModalV2: ({ id, show, onClose, animationFrom, children, enableOverlayClick, rootComponentId, zIndex, onOverlayClick, dismissKeyboardOnShow, "data-testid": testId, ...otherProps }: ModalV2Props) => JSX.Element;
+export declare const ModalV2: ({ id, show, onClose, animationFrom, children, enableOverlayClick, rootComponentId, zIndex, onOverlayClick, dismissKeyboardOnShow, "data-testid": testId, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, disableInitialFocus, className, ...otherProps }: ModalV2Props) => JSX.Element;

package/modal-v2/modal-v2.js

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