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

package/masthead/types.d.ts

@@ -1,3 +1,12 @@
+/**
+ * Props for the `Masthead` component.
+ */
 export interface MastheadProps {
+    /**
+     * Allows the masthead to span the full width of its container rather than
+     * constraining to the default layout width.
+     *
+     * @default false
+     */
     stretch?: boolean | undefined;
 }

package/menu/menu-content.d.ts

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

package/menu/menu-content.js

@@ -1,2 +1,2 @@
-import{__rest as t}from"../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import{MenuPanel as r}from"./menu-content.styles.js";const n=n=>{var{children:o,"data-testid":i="menu-content",overflow:a,maxHeight:l}=n,s=t(n,["children","data-testid","overflow","maxHeight"]);return e(r,Object.assign({$overflow:a,$maxHeight:l,"data-testid":i,tabIndex:-1,onKeyDown:t=>{var e;const r="ArrowDown"===t.key||"ArrowRight"===t.key,n="ArrowUp"===t.key||"ArrowLeft"===t.key;if(!r&&!n)return;const o=(t=>Array.from(t.querySelectorAll('a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])')).filter((t=>!t.hasAttribute("disabled"))))(t.currentTarget);if(!o.length)return;const i=document.activeElement,a=i?o.indexOf(i):-1;t.preventDefault();const l=r?1:-1;null===(e=o[-1===a?r?0:o.length-1:(a+l+o.length)%o.length])||void 0===e||e.focus()}},s,{children:o}))};n.displayName="Menu.Content";export{n as MenuContent};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import r from"clsx";import{useRef as o}from"react";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 n}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{tokens as i,panel as s}from"./menu-content.styles.js";const m=m=>{var{children:l,className:a,"data-testid":d="menu-content",overflow:u,maxHeight:c}=m,p=e(m,["children","className","data-testid","overflow","maxHeight"]);const h=o(null);n(h,{[i.panel.maxHeight]:void 0!==c?`${c}px`:null,[i.panel.overflow]:u||null});return t("div",Object.assign({ref:h,"data-testid":d,tabIndex:-1,onKeyDown:e=>{var t;const r="ArrowDown"===e.key||"ArrowRight"===e.key,o="ArrowUp"===e.key||"ArrowLeft"===e.key;if(!r&&!o)return;const n=(e=>Array.from(e.querySelectorAll('a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])')).filter((e=>!e.hasAttribute("disabled"))))(e.currentTarget);if(!n.length)return;const i=document.activeElement,s=i?n.indexOf(i):-1;e.preventDefault();const m=r?1:-1;null===(t=n[-1===s?r?0:n.length-1:(s+m+n.length)%n.length])||void 0===t||t.focus()},className:r(s,a)},p,{children:l}))};m.displayName="Menu.Content";export{m as MenuContent};
 //# sourceMappingURL=menu-content.js.map

package/menu/menu-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-content.js","sources":["../../src/menu/menu-content.tsx"],"sourcesContent":["import type React from \"react\";\n\nimport { MenuPanel } from \"./menu-content.styles\";\nimport type { MenuContentProps } from \"./types\";\n\n// =============================================================================\n// HELPERS\n// =============================================================================\nconst getFocusables = (container: HTMLElement) => {\n    return Array.from(\n        container.querySelectorAll<HTMLElement>(\n            'a[href], button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])'\n        )\n    ).filter((el) => !el.hasAttribute(\"disabled\"));\n};\n\nexport const MenuContent = ({\n    children,\n    \"data-testid\": testId = \"menu-content\",\n    overflow,\n    maxHeight,\n    ...otherProps\n}: MenuContentProps): JSX.Element => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n        const isNextKey = e.key === \"ArrowDown\" || e.key === \"ArrowRight\";\n        const isPrevKey = e.key === \"ArrowUp\" || e.key === \"ArrowLeft\";\n\n        if (!isNextKey && !isPrevKey) return;\n\n        const container = e.currentTarget as HTMLElement;\n        const focusables = getFocusables(container);\n        if (!focusables.length) return;\n\n        const active = document.activeElement as HTMLElement | null;\n        const idx = active ? focusables.indexOf(active) : -1;\n\n        e.preventDefault();\n\n        const delta = isNextKey ? 1 : -1;\n\n        const nextIndex =\n            idx === -1\n                ? isNextKey\n                    ? 0\n                    : focusables.length - 1\n                : (idx + delta + focusables.length) % focusables.length;\n\n        focusables[nextIndex]?.focus();\n    };\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <MenuPanel\n            $overflow={overflow}\n            $maxHeight={maxHeight}\n            data-testid={testId}\n            tabIndex={-1}\n            onKeyDown={handleKeyDown}\n            {...otherProps}\n        >\n            {children}\n        </MenuPanel>\n    );\n};\n\nMenuContent.displayName = \"Menu.Content\";\n"],"names":["MenuContent","_a","children","testId","overflow","maxHeight","otherProps","__rest","_jsx","MenuPanel","Object","assign","$overflow","tabIndex","onKeyDown","e","isNextKey","key","isPrevKey","focusables","container","Array","from","querySelectorAll","filter","el","hasAttribute","getFocusables","currentTarget","length","active","document","activeElement","idx","indexOf","preventDefault","delta","focus","displayName"],"mappings":"4IAQA,MAQaA,EAAeC,IAAA,IAAAC,SACxBA,EACA,cAAeC,EAAS,eAAcC,SACtCA,EAAQC,UACRA,GAASJ,EACNK,EAAUC,EAAAN,EALW,mDAuCxB,OACIO,EAACC,EAASC,OAAAC,OAAA,CAAAC,UACKR,aACCC,EAAS,cACRF,EACbU,YACAC,UAnCeC,UACnB,MAAMC,EAAsB,cAAVD,EAAEE,KAAiC,eAAVF,EAAEE,IACvCC,EAAsB,YAAVH,EAAEE,KAA+B,cAAVF,EAAEE,IAE3C,IAAKD,IAAcE,EAAW,OAE9B,MACMC,EAzBQ,CAACC,GACZC,MAAMC,KACTF,EAAUG,iBACN,qEAENC,QAAQC,IAAQA,EAAGC,aAAa,cAoBXC,CADDZ,EAAEa,eAEpB,IAAKT,EAAWU,OAAQ,OAExB,MAAMC,EAASC,SAASC,cAClBC,EAAMH,EAASX,EAAWe,QAAQJ,IAAU,EAElDf,EAAEoB,iBAEF,MAAMC,EAAQpB,EAAY,GAAI,EAST,QAArBf,EAAAkB,GANY,IAARc,EACMjB,EACI,EACAG,EAAWU,OAAS,GACvBI,EAAMG,EAAQjB,EAAWU,QAAUV,EAAWU,eAEpC,IAAA5B,GAAAA,EAAEoC,OAAO,GAYtB/B,EAAU,CAAAJ,SAEbA,IACO,EAIpBF,EAAYsC,YAAc"}
+{"version":3,"file":"menu-content.js","sources":["../../src/menu/menu-content.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { useRef } from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport * as styles from \"./menu-content.styles\";\nimport type { MenuContentProps } from \"./types\";\n\n// =============================================================================\n// HELPERS\n// =============================================================================\nconst getFocusables = (container: HTMLElement) => {\n    return Array.from(\n        container.querySelectorAll<HTMLElement>(\n            'a[href], button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])'\n        )\n    ).filter((el) => !el.hasAttribute(\"disabled\"));\n};\n\nexport const MenuContent = ({\n    children,\n    className,\n    \"data-testid\": testId = \"menu-content\",\n    overflow,\n    maxHeight,\n    ...otherProps\n}: MenuContentProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const panelRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(panelRef, {\n        [styles.tokens.panel.maxHeight]:\n            maxHeight !== undefined ? `${maxHeight}px` : null,\n        [styles.tokens.panel.overflow]: overflow || null,\n    });\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n        const isNextKey = e.key === \"ArrowDown\" || e.key === \"ArrowRight\";\n        const isPrevKey = e.key === \"ArrowUp\" || e.key === \"ArrowLeft\";\n\n        if (!isNextKey && !isPrevKey) return;\n\n        const container = e.currentTarget as HTMLElement;\n        const focusables = getFocusables(container);\n        if (!focusables.length) return;\n\n        const active = document.activeElement as HTMLElement | null;\n        const idx = active ? focusables.indexOf(active) : -1;\n\n        e.preventDefault();\n\n        const delta = isNextKey ? 1 : -1;\n\n        const nextIndex =\n            idx === -1\n                ? isNextKey\n                    ? 0\n                    : focusables.length - 1\n                : (idx + delta + focusables.length) % focusables.length;\n\n        focusables[nextIndex]?.focus();\n    };\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <div\n            ref={panelRef}\n            data-testid={testId}\n            tabIndex={-1}\n            onKeyDown={handleKeyDown}\n            className={clsx(styles.panel, className)}\n            {...otherProps}\n        >\n            {children}\n        </div>\n    );\n};\n\nMenuContent.displayName = \"Menu.Content\";\n"],"names":["MenuContent","_a","children","className","testId","overflow","maxHeight","otherProps","__rest","panelRef","useRef","useApplyStyle","styles.tokens","panel","undefined","_jsx","Object","assign","ref","tabIndex","onKeyDown","e","isNextKey","key","isPrevKey","focusables","container","Array","from","querySelectorAll","filter","el","hasAttribute","getFocusables","currentTarget","length","active","document","activeElement","idx","indexOf","preventDefault","delta","focus","clsx","styles.panel","displayName"],"mappings":"mhBAWA,MAQaA,EAAeC,IAAA,IAAAC,SACxBA,EAAQC,UACRA,EACA,cAAeC,EAAS,eAAcC,SACtCA,EAAQC,UACRA,GAASL,EACNM,EAAUC,EAAAP,EANW,+DAWxB,MAAMQ,EAAWC,EAAuB,MAExCC,EAAcF,EAAU,CACpB,CAACG,EAAcC,MAAMP,gBACHQ,IAAdR,EAA0B,GAAGA,MAAgB,KACjD,CAACM,EAAcC,MAAMR,UAAWA,GAAY,OAkChD,OACIU,EAAA,MAAAC,OAAAC,OAAA,CACIC,IAAKT,EAAQ,cACAL,EACbe,UAAU,EACVC,UAlCeC,UACnB,MAAMC,EAAsB,cAAVD,EAAEE,KAAiC,eAAVF,EAAEE,IACvCC,EAAsB,YAAVH,EAAEE,KAA+B,cAAVF,EAAEE,IAE3C,IAAKD,IAAcE,EAAW,OAE9B,MACMC,EApCQ,CAACC,GACZC,MAAMC,KACTF,EAAUG,iBACN,qEAENC,QAAQC,IAAQA,EAAGC,aAAa,cA+BXC,CADDZ,EAAEa,eAEpB,IAAKT,EAAWU,OAAQ,OAExB,MAAMC,EAASC,SAASC,cAClBC,EAAMH,EAASX,EAAWe,QAAQJ,IAAU,EAElDf,EAAEoB,iBAEF,MAAMC,EAAQpB,EAAY,GAAI,EAST,QAArBrB,EAAAwB,GANY,IAARc,EACMjB,EACI,EACAG,EAAWU,OAAS,GACvBI,EAAMG,EAAQjB,EAAWU,QAAUV,EAAWU,eAEpC,IAAAlC,GAAAA,EAAE0C,OAAO,EAW1BxC,UAAWyC,EAAKC,EAAc1C,IAC1BI,EAAU,CAAAL,SAEbA,IACC,EAIdF,EAAY8C,YAAc"}

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

@@ -1,7 +1,9 @@
-import type { PopoverOverflowType } from "../popover-v2/types";
-interface MenuPanelStylesProps {
-    $overflow?: PopoverOverflowType | undefined;
-    $maxHeight?: number | undefined;
-}
-export declare const MenuPanel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, MenuPanelStylesProps>> & string;
-export {};
+export declare const tokens: {
+    readonly panel: {
+        readonly availableWidth: "--fds-internal-menu-panel-availableWidth";
+        readonly maxHeight: "--fds-internal-menu-panel-maxHeight";
+        readonly overflow: "--fds-internal-menu-panel-overflow";
+        readonly xSpacing: "--fds-internal-menu-panel-xSpacing";
+    };
+};
+export declare const panel: import("@linaria/core").LinariaClassName;

package/menu/menu-content.styles.js

@@ -1,49 +1,2 @@
-import a from"styled-components";import{V3_Radius as r,V3_Border as i,V3_Colour as o,V3_Shadow as d,V3_MediaQuery as n,V3_Breakpoint as t}from"../v3_theme/index.js";const e=a.div`
-    border-radius: ${r.md};
-    border: ${i["width-010"]} ${i.solid}
-        ${o.border};
-    background: ${o.bg};
-    box-shadow: ${d["md-subtle"]};
-
-    --x-spacing: 0px;
-    --available-width: calc(100vw - var(--x-spacing) * 2);
-
-    ${n.MaxWidth.sm} {
-        --x-spacing: ${t["sm-margin"]}px;
-    }
-
-    ${n.MaxWidth.xs} {
-        --x-spacing: ${t["xs-margin"]}px;
-    }
-
-    ${n.MaxWidth.xxs} {
-        --x-spacing: ${t["xxs-margin"]}px;
-    }
-
-    min-width: min(15rem, var(--available-width));
-    max-width: min(24rem, var(--available-width));
-
-    ${({$maxHeight:a})=>void 0!==a&&`\n        max-height: ${a}px;\n    `}
-
-    ${({$overflow:a})=>a&&`\n        overflow-y: ${a};\n    `}
-
-    &:focus {
-        outline: none;
-    }
-
-    &::-webkit-scrollbar {
-        width: 14px;
-    }
-
-    &::-webkit-scrollbar-track {
-        background: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background: ${o["bg-inverse-subtlest"]};
-        border: 5px solid transparent;
-        border-radius: ${r.full};
-        background-clip: padding-box;
-    }
-`;export{e as MenuPanel};
+import"./menu-content.styles_p7ijll.css";const e={panel:{maxHeight:"--fds-internal-menu-panel-maxHeight",overflow:"--fds-internal-menu-panel-overflow"}},n="pmssexq";export{n as panel,e as tokens};
 //# sourceMappingURL=menu-content.styles.js.map

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

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

package/menu/menu-content.styles_p7ijll.css

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

package/menu/menu-item.d.ts

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

package/menu/menu-item.js

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

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;