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

package/menu/menu-item.js.map

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

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

@@ -1,4 +1,3 @@
-export declare const MenuItemDiv: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
-export declare const SubLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
+export declare const menuItemDiv: import("@linaria/core").LinariaClassName;
+export declare const text: import("@linaria/core").LinariaClassName;
+export declare const subLabel: import("@linaria/core").LinariaClassName;

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 @@
+@layer fds{.m1ddqpur{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding:var(--fds-spacing-8) var(--fds-spacing-16);}
+.tor9xcz{color:var(--fds-colour-text);}
+.s12tso9{color:var(--fds-colour-text-subtler);}}

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

package/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 @@
+@layer fds{.s1fmxqsy{padding:var(--fds-spacing-8) 0;margin:0;list-style:none;}
+.s1o971t2{border-top:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.llhca5j{margin:0 var(--fds-spacing-16) var(--fds-spacing-8);color:var(--fds-colour-text-subtler);}}

package/menu/menu.d.ts

@@ -1,20 +1,44 @@
 import type { MenuContentProps, MenuProps } from "./types";
+/**
+ * Trigger wrapper that anchors a `Menu.Content` panel to its child element.
+ *
+ * Prefer the `Menu` composite export when building a full menu — it bundles
+ * `Menu.Content`, `Menu.Section`, `Menu.Item`, and `Menu.Link` as named
+ * sub-components alongside the trigger.
+ */
 export declare const MenuTrigger: ({ children, position, menuContent, "data-testid": testId, ...otherProps }: MenuProps) => JSX.Element;
+/**
+ * A popover-anchored menu composed of sections and interactive items.
+ *
+ * Use `Menu` when a trigger element should open a floating panel of actions or
+ * navigation links.
+ *
+ * Sub-components:
+ * - `Menu.Content` — the floating panel that contains menu sections.
+ * - `Menu.Item` — a non-anchor interactive list item with a primary label and optional sub-label.
+ * - `Menu.Link` — an anchor (`<a>`) list item styled as a menu entry.
+ * - `Menu.Section` — a grouping container for `Menu.Item` and `Menu.Link` entries.
+ * @keywords context, dropdown, navigation, submenu
+ */
 export declare const Menu: (({ children, position, menuContent, "data-testid": testId, ...otherProps }: MenuProps) => JSX.Element) & {
+    /** Renders the floating panel that contains menu sections. */
     Content: {
-        ({ children, "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, className, "data-testid": testId, overflow, maxHeight, ...otherProps }: MenuContentProps): JSX.Element;
         displayName: string;
     };
+    /** Renders a non-anchor interactive list item with a primary label and optional sub-label. */
     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;
     };
+    /** Renders an anchor (`<a>`) list item styled as a menu entry. */
     Link: {
-        ({ children, "data-testid": testId, ...otherProps }: import("./types").MenuLinkProps): JSX.Element;
+        ({ children, className, "data-testid": testId, ...otherProps }: import("./types").MenuLinkProps): JSX.Element;
+        displayName: string;
+    };
+    /** Groups related menu entries. */
+    Section: {
+        ({ children, label, showDivider, className, "data-testid": testId, ...otherProps }: import("./types").MenuSectionProps): 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/modal-v2.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"../theme/utils/use-media-query.js";import"../popover/popover.styles_ujnf0h.css";import{PopoverTrigger as r}from"../popover/popover-trigger.js";import"../popover/popover-inline/popover-inline.styles_bkopnt.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,Item:m,Link:p,Section:s});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\";\nimport { PopoverTrigger } from \"../popover\";\nimport { MenuContent } from \"./menu-content\";\nimport { MenuItem } from \"./menu-item\";\nimport { MenuLink } from \"./menu-link\";\nimport { MenuSection } from \"./menu-section\";\nimport type { MenuContentProps, MenuProps } from \"./types\";\n\n/**\n * Trigger wrapper that anchors a `Menu.Content` panel to its child element.\n *\n * Prefer the `Menu` composite export when building a full menu — it bundles\n * `Menu.Content`, `Menu.Section`, `Menu.Item`, and `Menu.Link` as named\n * sub-components alongside the trigger.\n */\nexport const MenuTrigger = ({\n    children,\n    position = \"bottom-start\",\n    menuContent,\n    \"data-testid\": testId = \"menu\",\n    ...otherProps\n}: MenuProps): JSX.Element => {\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <PopoverTrigger\n            position={position}\n            popoverContent={(renderProps: PopoverRenderProps) =>\n                cloneElement<MenuContentProps>(menuContent, {\n                    overflow: renderProps.overflow,\n                    maxHeight: renderProps.maxHeight,\n                })\n            }\n            data-testid={testId}\n            {...otherProps}\n        >\n            {children}\n        </PopoverTrigger>\n    );\n};\n\n// @catalog\n/**\n * A popover-anchored menu composed of sections and interactive items.\n *\n * Use `Menu` when a trigger element should open a floating panel of actions or\n * navigation links.\n *\n * Sub-components:\n * - `Menu.Content` — the floating panel that contains menu sections.\n * - `Menu.Item` — a non-anchor interactive list item with a primary label and optional sub-label.\n * - `Menu.Link` — an anchor (`<a>`) list item styled as a menu entry.\n * - `Menu.Section` — a grouping container for `Menu.Item` and `Menu.Link` entries.\n * @keywords context, dropdown, navigation, submenu\n */\nexport const Menu = Object.assign(MenuTrigger, {\n    /** Renders the floating panel that contains menu sections. */\n    Content: MenuContent,\n    /** Renders a non-anchor interactive list item with a primary label and optional sub-label. */\n    Item: MenuItem,\n    /** Renders an anchor (`<a>`) list item styled as a menu entry. */\n    Link: MenuLink,\n    /** Groups related menu entries. */\n    Section: MenuSection,\n});\n"],"names":["MenuTrigger","_a","children","position","menuContent","testId","otherProps","__rest","_jsx","PopoverTrigger","popoverContent","renderProps","cloneElement","overflow","maxHeight","Menu","Object","assign","Content","MenuContent","Item","MenuItem","Link","MenuLink","Section","MenuSection"],"mappings":"4lCAiBO,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,EAkBZa,EAAOC,OAAOC,OAAOjB,EAAa,CAE3CkB,QAASC,EAETC,KAAMC,EAENC,KAAMC,EAENC,QAASC"}

package/menu/types.d.ts

@@ -1,28 +1,76 @@
 import type { AnchorHTMLAttributes, FunctionComponentElement, HTMLAttributes, ReactElement } from "react";
-import type { PopoverRenderProps, PopoverV2TriggerProps } from "../popover-v2";
+import type { PopoverPosition, PopoverRenderProps, PopoverTriggerProps } from "../popover";
 import type { MenuItem } from "./menu-item";
 import type { MenuLink } from "./menu-link";
 import type { MenuSection } from "./menu-section";
-export interface MenuProps extends Omit<PopoverV2TriggerProps, "popoverContent"> {
+/**
+ * Props for the `Menu` component.
+ *
+ */
+export interface MenuProps extends Omit<PopoverTriggerProps, "popoverContent"> {
+    /**
+     * The `Menu.Content` element to display inside the popover panel.
+     */
     menuContent: FunctionComponentElement<MenuContentProps>;
+    /**
+     * Preferred placement of the popover relative to the trigger.
+     *
+     * @default "bottom-start"
+     */
+    position?: PopoverPosition | undefined;
 }
+/**
+ * Props for the `Menu.Content` sub-component.
+ */
 export interface MenuContentProps extends HTMLAttributes<HTMLDivElement>, PopoverRenderProps {
+    /** One or more `Menu.Section` elements that make up the panel body. */
     children: ReactElement<typeof MenuSection> | ReactElement<typeof MenuSection>[];
     "data-testid"?: string | undefined;
 }
 type MenuSectionItem = ReactElement<typeof MenuItem> | ReactElement<typeof MenuLink>;
+/**
+ * Props for the `Menu.Section` sub-component.
+ */
 export interface MenuSectionProps extends HTMLAttributes<HTMLUListElement> {
+    /** One or more `Menu.Item` or `Menu.Link` elements within this section. */
     children: MenuSectionItem | MenuSectionItem[];
+    /**
+     * Whether to render a top divider separating this section from the one above.
+     *
+     * @default true
+     */
     showDivider?: boolean | undefined;
+    /**
+     * Accessible group label rendered above the section items.
+     */
     label?: string | undefined;
+    /**
+     * @default "menu-section"
+     */
     "data-testid"?: string | undefined;
 }
+/**
+ * Props for the `Menu.Item` sub-component.
+ */
 export interface MenuItemProps extends HTMLAttributes<HTMLLIElement> {
+    /** Primary text label. */
     label?: string | undefined;
+    /**
+     * Secondary descriptive text rendered below `label`.
+     */
     subLabel?: string | undefined;
+    /**
+     * @default "menu-item"
+     */
     "data-testid"?: string | undefined;
 }
+/**
+ * Props for the `Menu.Link` sub-component.
+ */
 export interface MenuLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * @default "menu-link"
+     */
     "data-testid"?: string | undefined;
 }
 export {};

package/modal/index.d.ts

@@ -1,4 +1,22 @@
-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;
+/**
+ * A full-screen overlay modal with a slide animation.
+ *
+ * Use `Modal` to present content that requires the user's immediate attention
+ * or a focused interaction. Use `ModalV2` for built-in scroll handling and improved accessibility.
+ *
+ * Sub-components:
+ * - `Modal.Box` — a styled content box with an optional close button.
+ *
+ * @deprecated Use `ModalV2` instead, which provides a more composable API, improved scroll behaviour, and proper accessibility.
+ * @keywords dialog, overlay, popup
+ */
+export declare const Modal: (({ id, show, animationFrom, children, enableOverlayClick, rootComponentId, zIndex, onOverlayClick, dismissKeyboardOnShow, className, ...otherProps }: import("./types").ModalProps) => JSX.Element) & {
+    /**
+     * A styled content container for use inside `Modal`. Renders an optional
+     * close button and stops click events from propagating to the overlay.
+     *
+     * @deprecated Use `ModalV2.Card` instead.
+     */
+    Box: (props: import("./types").ModalBoxProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
 };
 export * from "./types";

package/modal/index.js.map

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

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

package/modal/modal-box.js.map

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

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

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

package/modal/modal-box.styles.js

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

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

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

package/modal/modal-box.styles_y52cts.css

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

package/modal/modal.d.ts

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

package/modal/modal.js

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

package/modal/modal.js.map

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