@lifesg/react-design-system 4.0.0-alpha.5 → 4.0.0-alpha.7

package/masked-input/types.d.ts

@@ -1,32 +1,107 @@
 import type { InputProps } from "../input/types";
+/**
+ * Load state for `MaskedInput`.
+ */
 export type MaskedInputLoadState = "loading" | "fail" | "success";
+/**
+ * Shared masking configuration used by `MaskedInput` and related components.
+ *
+ * Exactly one masking strategy should be provided. When multiple are supplied
+ * the precedence is: `maskTransformer` → `maskRegex` → `maskRange` /
+ * `unmaskRange`.
+ */
 export interface MaskAttributeProps {
+    /**
+     * Index range `[start, end]` of the characters to mask (inclusive, zero-based).
+     * Characters outside this range remain visible.
+     *
+     * @remarks Ignored when `maskTransformer` or `maskRegex` is provided.
+     */
     maskRange?: number[] | undefined;
+    /**
+     * Index range `[start, end]` of the characters to keep visible (inclusive, zero-based).
+     * Characters outside this range are masked.
+     *
+     * @remarks Ignored when `maskTransformer` or `maskRegex` is provided.
+     */
     unmaskRange?: number[] | undefined;
+    /**
+     * Regular expression whose matches are replaced with `maskChar`.
+     *
+     * @remarks Ignored when `maskTransformer` is provided.
+     */
     maskRegex?: RegExp | undefined;
+    /**
+     * Custom function that receives the raw value and returns the fully
+     * masked string. Takes precedence over `maskRegex`, `maskRange`, and
+     * `unmaskRange`.
+     */
     maskTransformer?: ((value: string) => string) | undefined;
+    /**
+     * Character used to replace each masked character in the displayed value.
+     *
+     * @default "•"
+     */
     maskChar?: string | undefined;
 }
+/**
+ * Props for the `MaskedInput` component.
+ */
 export interface MaskedInputProps extends InputProps, MaskAttributeProps {
     value?: string | undefined;
-    iconMask?: JSX.Element;
+    /**
+     * Icon rendered inside the toggle button while the value is masked
+     *
+     * @default <EyeIcon />
+     */
     iconUnmask?: JSX.Element;
+    /**
+     * Icon rendered inside the toggle button while the value is unmasked
+     *
+     * @default <EyeSlashIcon />
+     */
+    iconMask?: JSX.Element;
+    /**
+     * CSS color value applied to the mask-toggle icon when it is active
+     */
     iconActiveColor?: string | undefined;
+    /**
+     * CSS color value applied to the mask-toggle icon in its default
+     * inactive state.
+     */
     iconInactiveColor?: string | undefined;
+    /**
+     * When `true`, masking is permanently disabled and the raw value is
+     * always shown. The toggle icon is not rendered.
+     *
+     * @default false
+     */
     disableMask?: boolean | undefined;
+    /**
+     * Automatically transforms the typed value before it is stored and
+     * passed to `onChange`.
+     */
     transformInput?: "uppercase" | "lowercase" | undefined;
     /**
-     * Specifies the state of the component when there is a
-     * loading behaviour. Note that this only applies if
-     * the component is in `readOnly` mode.
-     *
-     * Values: "loading" | "fail" | "success"
+     * Retrieval state for the value. Only applies when `readOnly` is `true`.
      */
     loadState?: MaskedInputLoadState | undefined;
+    /**
+     * Called when the value transitions from unmasked to masked.
+     */
     onMask?: (() => void) | undefined;
+    /**
+     * Called when the value transitions from masked to unmasked.
+     */
     onUnmask?: (() => void) | undefined;
-    /** The callback function when the "Try again" button is clicked in error state */
+    /**
+     * Called when the user clicks the "Try again?" button shown in the
+     * `loadState="fail"` state. Only relevant when `readOnly` is `true`.
+     */
     onTryAgain?: (() => void) | undefined;
 }
-/** To be exposed for Form component inheritance */
+/**
+ * A subset of `MaskedInputProps` used by form components that manage
+ * the `error` state themselves.
+ */
 export type MaskedInputPartialProps = Omit<MaskedInputProps, "error">;

package/masthead/masthead.d.ts

@@ -1,4 +1,10 @@
 import "@govtechsg/sgds-web-component/themes/day.css";
 import "@govtechsg/sgds-web-component/themes/night.css";
 import type { MastheadProps } from "./types";
+/**
+ * Displays the Singapore Government Design System (SGDS) masthead banner.
+ *
+ * Use `Masthead` at the top of government digital services to meet the SGDS
+ * masthead requirement.
+ */
 export declare const Masthead: import("react").MemoExoticComponent<({ stretch }: MastheadProps) => JSX.Element>;

package/masthead/masthead.js.map

@@ -1 +1 @@
-{"version":3,"file":"masthead.js","sources":["../../src/masthead/masthead.tsx"],"sourcesContent":["import \"@govtechsg/sgds-web-component/themes/day.css\";\nimport \"@govtechsg/sgds-web-component/themes/night.css\";\n\nimport clsx from \"clsx\";\nimport { memo, useEffect } from \"react\";\n\nimport { useTheme } from \"../theme\";\n\nimport * as styles from \"./masthead.styles\";\nimport type { MastheadProps } from \"./types\";\n\nconst MastheadComponent = ({ stretch = false }: MastheadProps): JSX.Element => {\n    const { mode } = useTheme();\n    const isDarkMode = mode === \"dark\";\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (!doAssetsExist()) {\n            addAssets();\n        }\n    }, []);\n\n    useEffect(() => {\n        // SGDS dark mode only takes effect when this class is set on the :root element\n        if (isDarkMode) {\n            document.documentElement.classList.add(SGDS_THEME_NIGHT_CLASSNAME);\n        } else {\n            document.documentElement.classList.remove(\n                SGDS_THEME_NIGHT_CLASSNAME\n            );\n        }\n    }, [isDarkMode]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const doAssetsExist = () => {\n        return document.getElementById(SCRIPT_ID);\n    };\n\n    const addAssets = () => {\n        if (!document.getElementById(SCRIPT_ID)) {\n            const script = document.createElement(\"script\");\n            script.id = SCRIPT_ID;\n            script.type = \"module\";\n            script.src = SCRIPT_SRC;\n\n            document.head.appendChild(script);\n        }\n    };\n\n    const createContent = () => {\n        /**\n         * Note: Had to use this method because we had to create a\n         * custom type to handle Web Components (refer to this guide\n         * https://blog.devgenius.io/how-to-use-web-components-in-react-54c951399bfd)\n         * But we are having troubles exporting the custom type definition\n         * via rollup\n         */\n        return { __html: \"<sgds-masthead></sgds-masthead>\" };\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    return (\n        <div\n            className={clsx(styles.wrapper, stretch && styles.wrapperStretch)}\n            dangerouslySetInnerHTML={createContent()}\n        />\n    );\n};\n\nexport const Masthead = memo(MastheadComponent);\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst SCRIPT_ID = \"lifesg-ds-masthead-script\";\nconst SCRIPT_SRC =\n    \"https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3/components/Masthead/index.umd.js\";\nconst SGDS_THEME_NIGHT_CLASSNAME = \"sgds-night-theme\";\n"],"names":["Masthead","memo","stretch","mode","useTheme","isDarkMode","useEffect","doAssetsExist","addAssets","document","documentElement","classList","add","SGDS_THEME_NIGHT_CLASSNAME","remove","getElementById","SCRIPT_ID","script","createElement","id","type","src","SCRIPT_SRC","head","appendChild","_jsx","className","clsx","styles.wrapper","styles.wrapperStretch","dangerouslySetInnerHTML","__html"],"mappings":"wsBAWA,MAiEaA,EAAWC,GAjEE,EAAGC,WAAU,MACnC,MAAMC,KAAEA,GAASC,IACXC,EAAsB,SAATF,EAKnBG,GAAU,KACDC,KACDC,GACJ,GACD,IAEHF,GAAU,KAEFD,EACAI,SAASC,gBAAgBC,UAAUC,IAAIC,GAEvCJ,SAASC,gBAAgBC,UAAUG,OAC/BD,EAER,GACD,CAACR,IAKJ,MAAME,EAAgB,IACXE,SAASM,eAAeC,GAG7BR,EAAY,KACd,IAAKC,SAASM,eAAeC,GAAY,CACrC,MAAMC,EAASR,SAASS,cAAc,UACtCD,EAAOE,GAAKH,EACZC,EAAOG,KAAO,SACdH,EAAOI,IAAMC,EAEbb,SAASc,KAAKC,YAAYP,EAC9B,GAkBJ,OACIQ,SACIC,UAAWC,EAAKC,EAAgB1B,GAAW2B,GAC3CC,wBAVG,CAAEC,OAAQ,oCAWf,IASJf,EAAY,4BACZM,EACF,gGACET,EAA6B"}
+{"version":3,"file":"masthead.js","sources":["../../src/masthead/masthead.tsx"],"sourcesContent":["import \"@govtechsg/sgds-web-component/themes/day.css\";\nimport \"@govtechsg/sgds-web-component/themes/night.css\";\n\nimport clsx from \"clsx\";\nimport { memo, useEffect } from \"react\";\n\nimport { useTheme } from \"../theme\";\nimport * as styles from \"./masthead.styles\";\nimport type { MastheadProps } from \"./types\";\n\nconst MastheadComponent = ({ stretch = false }: MastheadProps): JSX.Element => {\n    const { mode } = useTheme();\n    const isDarkMode = mode === \"dark\";\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (!doAssetsExist()) {\n            addAssets();\n        }\n    }, []);\n\n    useEffect(() => {\n        // SGDS dark mode only takes effect when this class is set on the :root element\n        if (isDarkMode) {\n            document.documentElement.classList.add(SGDS_THEME_NIGHT_CLASSNAME);\n        } else {\n            document.documentElement.classList.remove(\n                SGDS_THEME_NIGHT_CLASSNAME\n            );\n        }\n    }, [isDarkMode]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const doAssetsExist = () => {\n        return document.getElementById(SCRIPT_ID);\n    };\n\n    const addAssets = () => {\n        if (!document.getElementById(SCRIPT_ID)) {\n            const script = document.createElement(\"script\");\n            script.id = SCRIPT_ID;\n            script.type = \"module\";\n            script.src = SCRIPT_SRC;\n\n            document.head.appendChild(script);\n        }\n    };\n\n    const createContent = () => {\n        /**\n         * Note: Had to use this method because we had to create a\n         * custom type to handle Web Components (refer to this guide\n         * https://blog.devgenius.io/how-to-use-web-components-in-react-54c951399bfd)\n         * But we are having troubles exporting the custom type definition\n         * via rollup\n         */\n        return { __html: \"<sgds-masthead></sgds-masthead>\" };\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    return (\n        <div\n            className={clsx(styles.wrapper, stretch && styles.wrapperStretch)}\n            dangerouslySetInnerHTML={createContent()}\n        />\n    );\n};\n\n// @catalog\n/**\n * Displays the Singapore Government Design System (SGDS) masthead banner.\n *\n * Use `Masthead` at the top of government digital services to meet the SGDS\n * masthead requirement.\n */\nexport const Masthead = memo(MastheadComponent);\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst SCRIPT_ID = \"lifesg-ds-masthead-script\";\nconst SCRIPT_SRC =\n    \"https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3/components/Masthead/index.umd.js\";\nconst SGDS_THEME_NIGHT_CLASSNAME = \"sgds-night-theme\";\n"],"names":["Masthead","memo","stretch","mode","useTheme","isDarkMode","useEffect","doAssetsExist","addAssets","document","documentElement","classList","add","SGDS_THEME_NIGHT_CLASSNAME","remove","getElementById","SCRIPT_ID","script","createElement","id","type","src","SCRIPT_SRC","head","appendChild","_jsx","className","clsx","styles.wrapper","styles.wrapperStretch","dangerouslySetInnerHTML","__html"],"mappings":"wsBAUA,MAwEaA,EAAWC,GAxEE,EAAGC,WAAU,MACnC,MAAMC,KAAEA,GAASC,IACXC,EAAsB,SAATF,EAKnBG,GAAU,KACDC,KACDC,GACJ,GACD,IAEHF,GAAU,KAEFD,EACAI,SAASC,gBAAgBC,UAAUC,IAAIC,GAEvCJ,SAASC,gBAAgBC,UAAUG,OAC/BD,EAER,GACD,CAACR,IAKJ,MAAME,EAAgB,IACXE,SAASM,eAAeC,GAG7BR,EAAY,KACd,IAAKC,SAASM,eAAeC,GAAY,CACrC,MAAMC,EAASR,SAASS,cAAc,UACtCD,EAAOE,GAAKH,EACZC,EAAOG,KAAO,SACdH,EAAOI,IAAMC,EAEbb,SAASc,KAAKC,YAAYP,EAC9B,GAkBJ,OACIQ,SACIC,UAAWC,EAAKC,EAAgB1B,GAAW2B,GAC3CC,wBAVG,CAAEC,OAAQ,oCAWf,IAgBJf,EAAY,4BACZM,EACF,gGACET,EAA6B"}

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.d.ts

@@ -1,20 +1,43 @@
 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.
+ */
 export declare const Menu: (({ children, position, menuContent, "data-testid": testId, ...otherProps }: MenuProps) => JSX.Element) & {
+    /** Renders the floating panel that contains menu sections. */
     Content: {
         ({ children, className, "data-testid": testId, overflow, maxHeight, ...otherProps }: MenuContentProps): JSX.Element;
         displayName: string;
     };
-    Section: {
-        ({ children, label, showDivider, className, "data-testid": testId, ...otherProps }: import("./types").MenuSectionProps): JSX.Element;
-        displayName: string;
-    };
+    /** Renders a non-anchor interactive list item with a primary label and optional sub-label. */
     Item: {
         ({ 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, 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 t}from"../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import{cloneElement as o}from"react";import"clsx";import"../theme/theme-provider/context.js";import"../typography/typography.js";import"../card/card.styles_1gh9gs3.css";import"../markup/markup.js";import"../modal-v2/index.js";import"../theme/theme-provider/index.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import"../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,Section:s,Item:m,Link:p});export{a as Menu,n 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\";\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\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":"ylCAUO,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 */\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,EAiBZa,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, PopoverTriggerProps } from "../popover";
+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";
+/**
+ * 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,17 @@
+/**
+ * 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.
+ */
 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.
+     */
     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 */\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    Box,\n});\n\nexport * from \"./types\";\n"],"names":["Modal","Object","assign","Base","Box"],"mappings":"mFAaaA,EAAQC,OAAOC,OAAOC,EAAM,KAKrCC"}

package/modal/modal-box.js

@@ -1,2 +1,2 @@
-import{__rest as o}from"../_virtual/_tslib.js";import{jsxs as s,jsx as t}from"react/jsx-runtime";import{CrossIcon as i}from"@lifesg/react-icons/cross";import r from"clsx";import{forwardRef as e}from"react";import{ClickableIcon as l}from"../shared/clickable-icon/clickable-icon.js";import{box as a,closeButton as c}from"./modal-box.styles.js";const m=e((function(e,m){var{id:n="modal-box",children:d,onClose:f,showCloseButton:p=!0,className:u}=e,h=o(e,["id","children","onClose","showCloseButton","className"]);return s("div",Object.assign({ref:m,"data-testid":n},h,{onClick:o=>{o.stopPropagation()},className:r(a,u),children:[p&&t(l,{onClick:f,"data-testid":"close-button",focusHighlight:!1,focusOutline:"browser",className:c,children:t(i,{})}),d]}))}));m.displayName="Modal.Box";export{m as ModalBox};
+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 clsx from \"clsx\";\nimport type React from \"react\";\nimport type { NamedExoticComponent } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport * as styles from \"./modal-box.styles\";\nimport type { ModalBoxProps } from \"./types\";\n\nfunction ModalBoxInner(\n    {\n        id = \"modal-box\",\n        children,\n        onClose,\n        showCloseButton = true,\n        className,\n        ...otherProps\n    }: ModalBoxProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n) {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderCloseButton = () => {\n        return (\n            <ClickableIcon\n                onClick={onClose}\n                data-testid=\"close-button\"\n                focusHighlight={false}\n                focusOutline=\"browser\"\n                className={styles.closeButton}\n            >\n                <CrossIcon />\n            </ClickableIcon>\n        );\n    };\n\n    return (\n        <div\n            ref={ref}\n            data-testid={id}\n            {...otherProps}\n            onClick={handleOnClick}\n            className={clsx(styles.box, className)}\n        >\n            {showCloseButton && renderCloseButton()}\n            {children}\n        </div>\n    );\n}\n\nexport const ModalBox = forwardRef<HTMLDivElement, ModalBoxProps>(\n    ModalBoxInner\n);\n\n(ModalBox as NamedExoticComponent).displayName = \"Modal.Box\";\n"],"names":["ModalBox","forwardRef","_a","ref","id","children","onClose","showCloseButton","className","otherProps","__rest","_jsxs","Object","assign","onClick","event","stopPropagation","clsx","styles.box","_jsx","ClickableIcon","focusHighlight","focusOutline","styles.closeButton","CrossIcon","displayName"],"mappings":"4VA2DaA,EAAWC,GAjDxB,SACIC,EAQAC,GARA,IAAAC,GACIA,EAAK,YAAWC,SAChBA,EAAQC,QACRA,EAAOC,gBACPA,GAAkB,EAAIC,UACtBA,GAASN,EACNO,EAAUC,EAAAR,EANjB,2DAkCA,OACIS,EAAA,MAAAC,OAAAC,OAAA,CACIV,IAAKA,EAAG,cACKC,GACTK,EAAU,CACdK,QA1BeC,IACnBA,EAAMC,iBAAiB,EA0BnBR,UAAWS,EAAKC,EAAYV,GAAUH,SAAA,CAErCE,GApBDY,EAACC,EAAa,CACVN,QAASR,EAAO,cACJ,eACZe,gBAAgB,EAChBC,aAAa,UACbd,UAAWe,EAAkBlB,SAE7Bc,EAACK,EAAS,CAAA,KAcbnB,KAGb,IAMCL,EAAkCyB,YAAc"}
+{"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/types.d.ts

@@ -1,23 +1,72 @@
 import type { ModalAnimationDirection } from "../modal-v2/types";
+/**
+ * Props for the `Modal` component.
+ */
 export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Controls whether the modal is visible.
+     *
+     * @default false
+     */
     show: boolean;
-    /** The content of the modal. The parent element must be a valid HTML
-     * element or a component that forwards a ref to a valid HTML element. This
-     * element is used to determine the boundaries for overlay click
-     * detection. Fragments are not supported. */
+    /**
+     * The content of the modal. The parent element must be a valid HTML
+     * element or a component that forwards a ref to a valid HTML element.
+     */
     children: React.JSX.Element;
-    /** Animation direction of appearance and dismissal. Values: "top" | "bottom" | "left" | "right" */
+    /**
+     * Direction from which the modal slides in and out.
+     *
+     * @default "bottom"
+     */
     animationFrom?: ModalAnimationDirection | undefined;
+    /**
+     * Whether clicking the overlay backdrop dismisses the modal.
+     *
+     * @default true
+     */
     enableOverlayClick?: boolean | undefined;
-    /** The identifier of the element to inject the Modal into */
+    /**
+     * The `id` of the DOM element to portal the modal into.
+     *
+     * @default document.body
+     */
     rootComponentId?: string | undefined;
+    /**
+     * The z-index applied to the overlay stack.
+     */
     zIndex?: number | undefined;
+    /**
+     * Called when the overlay backdrop is clicked and `enableOverlayClick` is
+     * `true`.
+     */
     onOverlayClick?: (() => void) | undefined;
-    /** Dismiss keyboard to keep modal in fullscreen */
+    /**
+     * Blurs the currently focused element when the modal becomes visible,
+     * dismissing the on-screen keyboard on mobile to prevent it from
+     * obscuring the modal.
+     *
+     * @default true
+     */
     dismissKeyboardOnShow?: boolean | undefined;
 }
+/**
+ * Props for the `Modal.Box` sub-component.
+ */
 export interface ModalBoxProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
+    /**
+     * Whether to render the close button in the top-right corner of the box.
+     *
+     * @default true
+     */
     showCloseButton?: boolean | undefined;
+    /**
+     * Called when the close button is clicked.
+     */
     onClose?: (() => void) | undefined;
+    /**
+     * Ref to the modal box DOM element. When used within `Modal`, the default `ref` is not available and you can specify this instead.
+     */
+    elementRef?: React.Ref<HTMLDivElement> | undefined;
 }

package/modal-v2/index.d.ts

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

package/modal-v2/index.js

@@ -1,2 +1,2 @@
-import{ModalV2 as o}from"./modal-v2.js";import{Card as t}from"./slots/card.js";import{CloseButton as s}from"./slots/close-button.js";import{Content as r}from"./slots/content.js";import{Footer as m}from"./slots/footer.js";const e=Object.assign(o,{Card:t,CloseButton:s,Content:r,Footer:m});export{e as ModalV2};
+export{ModalV2}from"./modal-v2.js";
 //# sourceMappingURL=index.js.map

package/modal-v2/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/modal-v2/index.ts"],"sourcesContent":["import { ModalV2 as Base } from \"./modal-v2\";\nimport { Card, CloseButton, Content, Footer } from \"./slots\";\n\nexport const ModalV2 = Object.assign(Base, {\n    Card,\n    CloseButton,\n    Content,\n    Footer,\n});\n\nexport * from \"./types\";\n"],"names":["ModalV2","Object","assign","Base","Card","CloseButton","Content","Footer"],"mappings":"mOAGaA,EAAUC,OAAOC,OAAOC,EAAM,CACvCC,OACAC,cACAC,UACAC"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -1,2 +1,33 @@
+import React from "react";
 import type { ModalV2Props } from "./types";
-export declare const ModalV2: ({ id, show, onClose, animationFrom, children, enableOverlayClick, rootComponentId, zIndex, onOverlayClick, dismissKeyboardOnShow, "data-testid": testId, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, disableInitialFocus, className, ...otherProps }: ModalV2Props) => JSX.Element;
+/**
+ * A composable modal dialog with slot-based content layout.
+ *
+ * Use `ModalV2` when you need a controlled overlay dialog with structured
+ * content slots.
+ *
+ * Sub-components:
+ * - `ModalV2.Card` — wraps modal content and arranges `Content`, `Footer`, and `CloseButton` slots in the correct layout.
+ * - `ModalV2.CloseButton` — renders an accessible close button that invokes the modal's `onClose` callback.
+ * - `ModalV2.Content` — container for the body content of the modal card.
+ * - `ModalV2.Footer` — footer area for primary and secondary action buttons.
+ */
+export declare const ModalV2: (({ id, show, onClose, animationFrom, children, enableOverlayClick, rootComponentId, zIndex, onOverlayClick, dismissKeyboardOnShow, "data-testid": testId, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, disableInitialFocus, className, ...otherProps }: ModalV2Props) => JSX.Element) & {
+    /** Wraps modal content and arranges `Content`, `Footer`, and `CloseButton` slots in the correct layout. */
+    Card: (props: import("./types").ModalCardProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+    /** Renders an accessible close button that invokes the modal's `onClose` callback. */
+    CloseButton: {
+        ({ "data-testid": testId, className, ...otherProps }: import("./types").ModalCloseButtonProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /** Container for the body content of the modal card. */
+    Content: {
+        ({ "data-testid": testId, children, className, ...otherProps }: import("./types").ModalContentProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /** Footer area for primary and secondary action buttons. */
+    Footer: {
+        ({ "data-testid": testId, primaryButton, secondaryButton, className, ...otherProps }: import("./types").ModalFooterProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};

package/modal-v2/modal-v2.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import{useFloating as o,useTransitionStatus as i,useDismiss as r,useInteractions as a,FloatingFocusManager as l}from"@floating-ui/react";import s from"clsx";import n,{useRef as m}from"react";import{Overlay as d}from"../overlay/overlay.js";import{useViewport as c}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 p}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 u}from"../util/use-event.js";import{ModalContext as b}from"./modal-context.js";import{tokens as h,scrollContainer as v,modalContainer as y,container as j}from"./modal-v2.styles.js";const f=f=>{var{id:g,show:x,onClose:C,animationFrom:k="bottom",children:O,enableOverlayClick:I=!0,rootComponentId:F,zIndex:w,onOverlayClick:N,dismissKeyboardOnShow:z=!0,"data-testid":P="modal","aria-label":S,"aria-labelledby":q,"aria-describedby":E,disableInitialFocus:H=!1,className:K}=f,$=e(f,["id","show","onClose","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","data-testid","aria-label","aria-labelledby","aria-describedby","disableInitialFocus","className"]);const _=u((()=>{var e,t;z&&(null===(t=null===(e=document.activeElement)||void 0===e?void 0:e.blur)||void 0===t||t.call(e))})),{verticalHeight:B}=c({enabled:x,onBeforeStart:_}),M=m(null),R=m(null),V=O&&n.cloneElement(O,{ref:M});p(R,{[h.container.verticalHeight]:null==B?null:`${B}px`});const{refs:A,context:D}=o({open:x,onOpenChange:e=>{e||null==C||C()}}),{isMounted:G,status:J}=i(D,{duration:300}),L=r(D,{outsidePress:!1,enabled:!!C}),{getFloatingProps:Q}=a([L]);return t(d,{"data-testid":`${P}-overlay`,show:x,enableOverlayClick:I,onOverlayClick:N,id:g,rootId:F,containerRef:M,zIndex:w,children:t("div",Object.assign({ref:R,"data-testid":P,"data-status":J,"data-animation-from":k},$,{className:s(j,K),children:t(b.Provider,{value:{onClose:C},children:G&&t(l,{context:D,initialFocus:H?-1:A.floating,children:t("div",{className:v,children:t("div",Object.assign({ref:A.setFloating},Q(),{role:"dialog","aria-label":S,"aria-labelledby":q,"aria-describedby":E,className:y,children:V}))})})})}))})};export{f as ModalV2};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as o}from"react/jsx-runtime";import{useFloating as t,useTransitionStatus as r,useDismiss as i,useInteractions as a,FloatingFocusManager as l}from"@floating-ui/react";import s from"clsx";import n,{useRef as m}from"react";import{Overlay as d}from"../overlay/overlay.js";import{useViewport as c}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 p}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 u}from"../util/use-event.js";import{ModalContext as b}from"./modal-context.js";import{tokens as h,scrollContainer as j,modalContainer as v,container as f}from"./modal-v2.styles.js";import{Card as y}from"./slots/card.js";import{CloseButton as C}from"./slots/close-button.js";import{Content as g}from"./slots/content.js";import{Footer as x}from"./slots/footer.js";const O=Object.assign((y=>{var{id:C,show:g,onClose:x,animationFrom:O="bottom",children:k,enableOverlayClick:F=!0,rootComponentId:I,zIndex:w,onOverlayClick:N,dismissKeyboardOnShow:z=!0,"data-testid":P="modal","aria-label":S,"aria-labelledby":q,"aria-describedby":B,disableInitialFocus:E=!1,className:H}=y,K=e(y,["id","show","onClose","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","data-testid","aria-label","aria-labelledby","aria-describedby","disableInitialFocus","className"]);const $=u((()=>{var e,o;z&&(null===(o=null===(e=document.activeElement)||void 0===e?void 0:e.blur)||void 0===o||o.call(e))})),{verticalHeight:_}=c({enabled:g,onBeforeStart:$}),M=m(null),R=m(null),V=k&&n.cloneElement(k,{ref:M});p(R,{[h.container.verticalHeight]:null==_?null:`${_}px`});const{refs:A,context:D}=t({open:g,onOpenChange:e=>{e||null==x||x()}}),{isMounted:G,status:J}=r(D,{duration:300}),L=i(D,{outsidePress:!1,enabled:!!x}),{getFloatingProps:Q}=a([L]);return o(d,{"data-testid":`${P}-overlay`,show:g,enableOverlayClick:F,onOverlayClick:N,id:C,rootId:I,containerRef:M,zIndex:w,children:o("div",Object.assign({ref:R,"data-testid":P,"data-status":J,"data-animation-from":O},K,{className:s(f,H),children:o(b.Provider,{value:{onClose:x},children:G&&o(l,{context:D,initialFocus:E?-1:A.floating,children:o("div",{className:j,children:o("div",Object.assign({ref:A.setFloating},Q(),{role:"dialog","aria-label":S,"aria-labelledby":q,"aria-describedby":B,className:v,children:V}))})})})}))})}),{Card:y,CloseButton:C,Content:g,Footer:x});export{O as ModalV2};
 //# sourceMappingURL=modal-v2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"modal-v2.js","sources":["../../src/modal-v2/modal-v2.tsx"],"sourcesContent":["import {\n    FloatingFocusManager,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useTransitionStatus,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { useRef } from \"react\";\n\nimport { Overlay } from \"../overlay/overlay\";\nimport { useViewport } from \"../shared/hooks\";\nimport { useApplyStyle } from \"../theme\";\nimport { useEvent } from \"../util\";\nimport { ModalContext } from \"./modal-context\";\nimport * as styles from \"./modal-v2.styles\";\nimport type { ModalV2Props } from \"./types\";\n\nexport const ModalV2 = ({\n    id,\n    show,\n    onClose,\n    animationFrom = \"bottom\",\n    children,\n    enableOverlayClick = true,\n    rootComponentId,\n    zIndex,\n    onOverlayClick,\n    dismissKeyboardOnShow = true,\n    \"data-testid\": testId = \"modal\",\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    disableInitialFocus = false,\n    className,\n    ...otherProps\n}: ModalV2Props): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const dismissKeyboard = useEvent(() => {\n        if (dismissKeyboardOnShow) {\n            (document.activeElement as HTMLElement)?.blur?.();\n        }\n    });\n    const { verticalHeight } = useViewport({\n        enabled: show,\n        onBeforeStart: dismissKeyboard,\n    });\n    const childRef = useRef<HTMLDivElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const childWithRef =\n        children && React.cloneElement(children, { ref: childRef });\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.container.verticalHeight]:\n            verticalHeight == null ? null : `${verticalHeight}px`,\n    });\n\n    // =========================================================================\n    // FLOATING UI CONFIG\n    // =========================================================================\n    const { refs, context } = useFloating({\n        open: show,\n        onOpenChange: (isOpen) => {\n            if (!isOpen) {\n                onClose?.();\n            }\n        },\n    });\n    const { isMounted, status } = useTransitionStatus(context, {\n        duration: 300,\n    });\n    const dismiss = useDismiss(context, {\n        /* handled by overlayclick */\n        outsidePress: false,\n        enabled: !!onClose,\n    });\n    const { getFloatingProps } = useInteractions([dismiss]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <Overlay\n            data-testid={`${testId}-overlay`}\n            show={show}\n            enableOverlayClick={enableOverlayClick}\n            onOverlayClick={onOverlayClick}\n            id={id}\n            rootId={rootComponentId}\n            containerRef={childRef}\n            zIndex={zIndex}\n        >\n            <div\n                ref={containerRef}\n                data-testid={testId}\n                data-status={status}\n                data-animation-from={animationFrom}\n                {...otherProps}\n                className={clsx(styles.container, className)}\n            >\n                <ModalContext.Provider value={{ onClose }}>\n                    {isMounted && (\n                        <FloatingFocusManager\n                            context={context}\n                            initialFocus={\n                                disableInitialFocus ? -1 : refs.floating\n                            }\n                        >\n                            <div className={styles.scrollContainer}>\n                                <div\n                                    ref={refs.setFloating}\n                                    {...getFloatingProps()}\n                                    role=\"dialog\"\n                                    aria-label={ariaLabel}\n                                    aria-labelledby={ariaLabelledBy}\n                                    aria-describedby={ariaDescribedBy}\n                                    className={styles.modalContainer}\n                                >\n                                    {childWithRef}\n                                </div>\n                            </div>\n                        </FloatingFocusManager>\n                    )}\n                </ModalContext.Provider>\n            </div>\n        </Overlay>\n    );\n};\n"],"names":["ModalV2","_a","id","show","onClose","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","testId","ariaLabel","ariaLabelledBy","ariaDescribedBy","disableInitialFocus","className","otherProps","__rest","dismissKeyboard","useEvent","_b","document","activeElement","blur","verticalHeight","useViewport","enabled","onBeforeStart","childRef","useRef","containerRef","childWithRef","React","cloneElement","ref","useApplyStyle","styles.tokens","container","refs","context","useFloating","open","onOpenChange","isOpen","isMounted","status","useTransitionStatus","duration","dismiss","useDismiss","outsidePress","getFloatingProps","useInteractions","_jsx","Overlay","rootId","Object","assign","clsx","styles.container","ModalContext","Provider","value","FloatingFocusManager","initialFocus","floating","styles.scrollContainer","setFloating","role","styles.modalContainer"],"mappings":"4kCAkBO,MAAMA,EAAWC,QAAAC,GACpBA,EAAEC,KACFA,EAAIC,QACJA,EAAOC,cACPA,EAAgB,SAAQC,SACxBA,EAAQC,mBACRA,GAAqB,EAAIC,gBACzBA,EAAeC,OACfA,EAAMC,eACNA,EAAcC,sBACdA,GAAwB,EACxB,cAAeC,EAAS,QACxB,aAAcC,EACd,kBAAmBC,EACnB,mBAAoBC,EAAeC,oBACnCA,GAAsB,EAAKC,UAC3BA,GAAShB,EACNiB,EAAUC,EAAAlB,EAjBO,CAAA,KAAA,OAAA,UAAA,gBAAA,WAAA,qBAAA,kBAAA,SAAA,iBAAA,wBAAA,cAAA,aAAA,kBAAA,mBAAA,sBAAA,cAsBpB,MAAMmB,EAAkBC,GAAS,aACzBV,YACAW,EAAuC,UAAtCC,SAASC,qBAA6B,IAAAvB,OAAA,EAAAA,EAAEwB,6BAC7C,KAEEC,eAAEA,GAAmBC,EAAY,CACnCC,QAASzB,EACT0B,cAAeT,IAEbU,EAAWC,EAAuB,MAClCC,EAAeD,EAAuB,MACtCE,EACF3B,GAAY4B,EAAMC,aAAa7B,EAAU,CAAE8B,IAAKN,IAEpDO,EAAcL,EAAc,CACxB,CAACM,EAAcC,UAAUb,gBACH,MAAlBA,EAAyB,KAAO,GAAGA,QAM3C,MAAMc,KAAEA,EAAIC,QAAEA,GAAYC,EAAY,CAClCC,KAAMxC,EACNyC,aAAeC,IACNA,GACDzC,SAAAA,GACJ,KAGF0C,UAAEA,EAASC,OAAEA,GAAWC,EAAoBP,EAAS,CACvDQ,SAAU,MAERC,EAAUC,EAAWV,EAAS,CAEhCW,cAAc,EACdxB,UAAWxB,KAETiD,iBAAEA,GAAqBC,EAAgB,CAACJ,IAK9C,OACIK,EAACC,EAAO,CAAA,cACS,GAAG5C,YAChBT,KAAMA,EACNI,mBAAoBA,EACpBG,eAAgBA,EAChBR,GAAIA,EACJuD,OAAQjD,EACRwB,aAAcF,EACdrB,OAAQA,EAAMH,SAEdiD,EAAA,MAAAG,OAAAC,OAAA,CACIvB,IAAKJ,EAAY,cACJpB,EAAM,cACNmC,EAAM,sBACE1C,GACjBa,GACJD,UAAW2C,EAAKC,EAAkB5C,GAAUX,SAE5CiD,EAACO,EAAaC,SAAQ,CAACC,MAAO,CAAE5D,WAASE,SACpCwC,GACGS,EAACU,EAAoB,CACjBxB,QAASA,EACTyB,aACIlD,GAAsB,EAAKwB,EAAK2B,SAAQ7D,SAG5CiD,EAAA,MAAA,CAAKtC,UAAWmD,EAAsB9D,SAClCiD,EAAA,MAAAG,OAAAC,OAAA,CACIvB,IAAKI,EAAK6B,aACNhB,IAAkB,CACtBiB,KAAK,SAAQ,aACDzD,EAAS,kBACJC,EAAc,mBACbC,EAClBE,UAAWsD,WAEVtC,eAOnB"}
+{"version":3,"file":"modal-v2.js","sources":["../../src/modal-v2/modal-v2.tsx"],"sourcesContent":["import {\n    FloatingFocusManager,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useTransitionStatus,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { useRef } from \"react\";\n\nimport { Overlay } from \"../overlay/overlay\";\nimport { useViewport } from \"../shared/hooks\";\nimport { useApplyStyle } from \"../theme\";\nimport { useEvent } from \"../util\";\nimport { ModalContext } from \"./modal-context\";\nimport * as styles from \"./modal-v2.styles\";\nimport { Card, CloseButton, Content, Footer } from \"./slots\";\nimport type { ModalV2Props } from \"./types\";\n\nconst Base = ({\n    id,\n    show,\n    onClose,\n    animationFrom = \"bottom\",\n    children,\n    enableOverlayClick = true,\n    rootComponentId,\n    zIndex,\n    onOverlayClick,\n    dismissKeyboardOnShow = true,\n    \"data-testid\": testId = \"modal\",\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    disableInitialFocus = false,\n    className,\n    ...otherProps\n}: ModalV2Props): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const dismissKeyboard = useEvent(() => {\n        if (dismissKeyboardOnShow) {\n            (document.activeElement as HTMLElement)?.blur?.();\n        }\n    });\n    const { verticalHeight } = useViewport({\n        enabled: show,\n        onBeforeStart: dismissKeyboard,\n    });\n    const childRef = useRef<HTMLDivElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const childWithRef =\n        children && React.cloneElement(children, { ref: childRef });\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.container.verticalHeight]:\n            verticalHeight == null ? null : `${verticalHeight}px`,\n    });\n\n    // =========================================================================\n    // FLOATING UI CONFIG\n    // =========================================================================\n    const { refs, context } = useFloating({\n        open: show,\n        onOpenChange: (isOpen) => {\n            if (!isOpen) {\n                onClose?.();\n            }\n        },\n    });\n    const { isMounted, status } = useTransitionStatus(context, {\n        duration: 300,\n    });\n    const dismiss = useDismiss(context, {\n        /* handled by overlayclick */\n        outsidePress: false,\n        enabled: !!onClose,\n    });\n    const { getFloatingProps } = useInteractions([dismiss]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <Overlay\n            data-testid={`${testId}-overlay`}\n            show={show}\n            enableOverlayClick={enableOverlayClick}\n            onOverlayClick={onOverlayClick}\n            id={id}\n            rootId={rootComponentId}\n            containerRef={childRef}\n            zIndex={zIndex}\n        >\n            <div\n                ref={containerRef}\n                data-testid={testId}\n                data-status={status}\n                data-animation-from={animationFrom}\n                {...otherProps}\n                className={clsx(styles.container, className)}\n            >\n                <ModalContext.Provider value={{ onClose }}>\n                    {isMounted && (\n                        <FloatingFocusManager\n                            context={context}\n                            initialFocus={\n                                disableInitialFocus ? -1 : refs.floating\n                            }\n                        >\n                            <div className={styles.scrollContainer}>\n                                <div\n                                    ref={refs.setFloating}\n                                    {...getFloatingProps()}\n                                    role=\"dialog\"\n                                    aria-label={ariaLabel}\n                                    aria-labelledby={ariaLabelledBy}\n                                    aria-describedby={ariaDescribedBy}\n                                    className={styles.modalContainer}\n                                >\n                                    {childWithRef}\n                                </div>\n                            </div>\n                        </FloatingFocusManager>\n                    )}\n                </ModalContext.Provider>\n            </div>\n        </Overlay>\n    );\n};\n\n// @catalog\n/**\n * A composable modal dialog with slot-based content layout.\n *\n * Use `ModalV2` when you need a controlled overlay dialog with structured\n * content slots.\n *\n * Sub-components:\n * - `ModalV2.Card` — wraps modal content and arranges `Content`, `Footer`, and `CloseButton` slots in the correct layout.\n * - `ModalV2.CloseButton` — renders an accessible close button that invokes the modal's `onClose` callback.\n * - `ModalV2.Content` — container for the body content of the modal card.\n * - `ModalV2.Footer` — footer area for primary and secondary action buttons.\n */\nexport const ModalV2 = Object.assign(Base, {\n    /** Wraps modal content and arranges `Content`, `Footer`, and `CloseButton` slots in the correct layout. */\n    Card,\n    /** Renders an accessible close button that invokes the modal's `onClose` callback. */\n    CloseButton,\n    /** Container for the body content of the modal card. */\n    Content,\n    /** Footer area for primary and secondary action buttons. */\n    Footer,\n});\n"],"names":["ModalV2","Object","assign","_a","id","show","onClose","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","testId","ariaLabel","ariaLabelledBy","ariaDescribedBy","disableInitialFocus","className","otherProps","__rest","dismissKeyboard","useEvent","_b","document","activeElement","blur","verticalHeight","useViewport","enabled","onBeforeStart","childRef","useRef","containerRef","childWithRef","React","cloneElement","ref","useApplyStyle","styles.tokens","container","refs","context","useFloating","open","onOpenChange","isOpen","isMounted","status","useTransitionStatus","duration","dismiss","useDismiss","outsidePress","getFloatingProps","useInteractions","_jsx","Overlay","rootId","clsx","styles.container","ModalContext","Provider","value","FloatingFocusManager","initialFocus","floating","styles.scrollContainer","setFloating","role","styles.modalContainer","Card","CloseButton","Content","Footer"],"mappings":"iwCAmBA,MA8HaA,EAAUC,OAAOC,QA9HhBC,QAAAC,GACVA,EAAEC,KACFA,EAAIC,QACJA,EAAOC,cACPA,EAAgB,SAAQC,SACxBA,EAAQC,mBACRA,GAAqB,EAAIC,gBACzBA,EAAeC,OACfA,EAAMC,eACNA,EAAcC,sBACdA,GAAwB,EACxB,cAAeC,EAAS,QACxB,aAAcC,EACd,kBAAmBC,EACnB,mBAAoBC,EAAeC,oBACnCA,GAAsB,EAAKC,UAC3BA,GAAShB,EACNiB,EAAUC,EAAAlB,EAjBH,CAAA,KAAA,OAAA,UAAA,gBAAA,WAAA,qBAAA,kBAAA,SAAA,iBAAA,wBAAA,cAAA,aAAA,kBAAA,mBAAA,sBAAA,cAsBV,MAAMmB,EAAkBC,GAAS,aACzBV,YACAW,EAAuC,UAAtCC,SAASC,qBAA6B,IAAAvB,OAAA,EAAAA,EAAEwB,6BAC7C,KAEEC,eAAEA,GAAmBC,EAAY,CACnCC,QAASzB,EACT0B,cAAeT,IAEbU,EAAWC,EAAuB,MAClCC,EAAeD,EAAuB,MACtCE,EACF3B,GAAY4B,EAAMC,aAAa7B,EAAU,CAAE8B,IAAKN,IAEpDO,EAAcL,EAAc,CACxB,CAACM,EAAcC,UAAUb,gBACH,MAAlBA,EAAyB,KAAO,GAAGA,QAM3C,MAAMc,KAAEA,EAAIC,QAAEA,GAAYC,EAAY,CAClCC,KAAMxC,EACNyC,aAAeC,IACNA,GACDzC,SAAAA,GACJ,KAGF0C,UAAEA,EAASC,OAAEA,GAAWC,EAAoBP,EAAS,CACvDQ,SAAU,MAERC,EAAUC,EAAWV,EAAS,CAEhCW,cAAc,EACdxB,UAAWxB,KAETiD,iBAAEA,GAAqBC,EAAgB,CAACJ,IAK9C,OACIK,EAACC,EAAO,CAAA,cACS,GAAG5C,YAChBT,KAAMA,EACNI,mBAAoBA,EACpBG,eAAgBA,EAChBR,GAAIA,EACJuD,OAAQjD,EACRwB,aAAcF,EACdrB,OAAQA,EAAMH,SAEdiD,EAAA,MAAAxD,OAAAC,OAAA,CACIoC,IAAKJ,EAAY,cACJpB,EAAM,cACNmC,EAAM,sBACE1C,GACjBa,GACJD,UAAWyC,EAAKC,EAAkB1C,GAAUX,SAE5CiD,EAACK,EAAaC,SAAQ,CAACC,MAAO,CAAE1D,WAASE,SACpCwC,GACGS,EAACQ,EAAoB,CACjBtB,QAASA,EACTuB,aACIhD,GAAsB,EAAKwB,EAAKyB,SAAQ3D,SAG5CiD,EAAA,MAAA,CAAKtC,UAAWiD,EAAsB5D,SAClCiD,EAAA,MAAAxD,OAAAC,OAAA,CACIoC,IAAKI,EAAK2B,aACNd,IAAkB,CACtBe,KAAK,SAAQ,aACDvD,EAAS,kBACJC,EAAc,mBACbC,EAClBE,UAAWoD,WAEVpC,eAOnB,GAiByB,CAEvCqC,OAEAC,cAEAC,UAEAC"}

package/modal-v2/slots/card.js

@@ -1,2 +1,2 @@
-import{__rest as t}from"../../_virtual/_tslib.js";import{jsxs as r}from"react/jsx-runtime";import o from"clsx";import s from"react";import a from"../../util/is-styled-components.js";import{CloseButton as e}from"./close-button.js";import{Content as i}from"./content.js";import{Footer as m}from"./footer.js";import{slotSpacer as d,modalCard as l}from"./slot-styles.js";const c=s.forwardRef((function(c,n){var{id:p,"data-testid":f="modal-card",children:j,className:u}=c,y=t(c,["id","data-testid","children","className"]);const h=t=>s.Children.toArray(j).find((r=>((t,r)=>a(t.type)?t.type.target===r:t.type===r)(r,t))),N=h(e),b=h(i),v=h(m),g=!!N;return r("div",Object.assign({ref:n,id:p,"data-testid":f},y,{onClick:t=>{t.stopPropagation()},className:o(l,u),children:[r("div",{"data-has-close-button":g?"true":"false",className:o(d),children:[b,v]}),g&&N]}))}));c.displayName="ModalV2.Card";export{c as Card};
+import{__rest as t}from"../../_virtual/_tslib.js";import{jsxs as r}from"react/jsx-runtime";import e from"clsx";import i from"react";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{mergeRefs as o}from"../../util/merge-refs.js";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import s from"../../util/is-styled-components.js";import{CloseButton as a}from"./close-button.js";import{Content as m}from"./content.js";import{Footer as l}from"./footer.js";import{slotSpacer as n,modalCard as d}from"./slot-styles.js";const p=i.forwardRef((function(p,c){var{id:f,"data-testid":j="modal-card",children:u,className:y,elementRef:h}=p,g=t(p,["id","data-testid","children","className","elementRef"]);const v=t=>i.Children.toArray(u).find((r=>((t,r)=>s(t.type)?t.type.target===r:t.type===r)(r,t))),N=v(a),b=v(m),x=v(l),C=!!N;return r("div",Object.assign({ref:o(c,h),id:f,"data-testid":j},g,{onClick:t=>{t.stopPropagation()},className:e(d,y),children:[r("div",{"data-has-close-button":C?"true":"false",className:e(n),children:[b,x]}),C&&N]}))}));p.displayName="ModalV2.Card";export{p as Card};
 //# sourceMappingURL=card.js.map