@protonradio/proton-ui 0.13.0 → 0.13.1

package/dist/components/Menu/MenuTrigger.es.js

@@ -1,77 +1,77 @@
-import { j as e } from "../../node_modules/react/jsx-runtime.es.js";
-import { useState as h, useRef as A, useMemo as I } from "react";
-import { useBreakpoint as R } from "../../hooks/useBreakpoint.es.js";
-import { ActionMenu as b } from "../ActionMenu/ActionMenu.es.js";
-import { PopoverMenu as k } from "./PopoverMenu.es.js";
+import { jsx as o, jsxs as A, Fragment as I } from "react/jsx-runtime";
+import { useState as b, useRef as k, useMemo as y } from "react";
+import { useBreakpoint as B } from "../../hooks/useBreakpoint.es.js";
+import { ActionMenu as N } from "../ActionMenu/ActionMenu.es.js";
+import { PopoverMenu as P } from "./PopoverMenu.es.js";
 /* empty css                   */
 /* empty css            */
-import { Ellipsis as y } from "../Icon/IconComponents/Ellipsis.es.js";
-import { BREAKPOINTS as B } from "../../constants/breakpoint.es.js";
-function E({
+import { Ellipsis as R } from "../Icon/IconComponents/Ellipsis.es.js";
+import { BREAKPOINTS as j } from "../../constants/breakpoint.es.js";
+function v({
   renderTrigger: m,
-  size: M = 24,
+  size: d = 24,
   title: a,
   items: p,
   disabled: u,
   onClose: n,
-  triggerTestId: d = "MenuTrigger-Trigger",
-  menuTestId: j,
+  triggerTestId: x = "MenuTrigger-Trigger",
+  menuTestId: O,
   onSelectionChange: i,
   selectedKey: s,
   disabledKeys: f
 }) {
-  const O = R(B.SMALL), [r, o] = h(!1), T = A(null), g = I(
+  const T = B(j.SMALL), [r, e] = b(!1), h = k(null), g = y(
     () => p.map((t) => ({ ...t, id: t.key })),
     [p]
   ), c = (t) => {
-    i == null || i(t), o(!1);
+    i == null || i(t), e(!1);
   }, l = m ? m({
     isOpen: r,
     disabled: u,
-    setIsOpen: o
-  }) : /* @__PURE__ */ e.jsx(
+    setIsOpen: e
+  }) : /* @__PURE__ */ o(
     "button",
     {
-      "data-testid": d,
+      "data-testid": x,
       disabled: u,
       className: "proton-MenuTrigger__button",
-      ref: T,
-      onClick: () => o(!r),
+      ref: h,
+      onClick: () => e(!r),
       type: "button",
       "aria-label": "Open menu",
       "aria-expanded": r,
-      children: /* @__PURE__ */ e.jsx(y, { size: M })
+      children: /* @__PURE__ */ o(R, { size: d })
     }
   );
-  return O ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+  return T ? /* @__PURE__ */ A(I, { children: [
     l,
-    r && /* @__PURE__ */ e.jsx(
-      b,
+    r && /* @__PURE__ */ o(
+      N,
       {
         actions: g,
         title: a,
         isOpen: r,
         onClose: () => {
-          o(!1), n == null || n();
+          e(!1), n == null || n();
         },
         showCancel: !0,
-        "data-testid": j,
+        "data-testid": O,
         selectionMode: "single",
         onSelectionChange: (t) => {
-          const x = Array.from(t)[0];
-          x && c(x);
+          const M = Array.from(t)[0];
+          M && c(M);
         },
         selectedKeys: s ? [s] : void 0,
         disabledKeys: f
       }
     )
-  ] }) : /* @__PURE__ */ e.jsx(
-    k,
+  ] }) : /* @__PURE__ */ o(
+    P,
     {
       trigger: l,
       items: g,
       isOpen: r,
-      onOpenChange: o,
+      onOpenChange: e,
       selectedKey: s,
       onSelectionChange: c,
       disabledKeys: f,
@@ -79,8 +79,8 @@ function E({
     }
   );
 }
-E.displayName = "ProtonUIMenuTrigger";
+v.displayName = "ProtonUIMenuTrigger";
 export {
-  E as MenuTrigger
+  v as MenuTrigger
 };
 //# sourceMappingURL=MenuTrigger.es.js.map

package/dist/components/Menu/MenuTrigger.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuTrigger.es.js","sources":["../../../src/components/Menu/MenuTrigger.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode, useMemo, useRef, useState } from \"react\";\n\nimport { BREAKPOINTS } from \"../../constants\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\nimport { ActionMenu, ActionMenuAction } from \"../ActionMenu/ActionMenu\";\nimport { Ellipsis as EllipsisIcon } from \"../Icon\";\nimport { PopoverMenu } from \"./PopoverMenu\";\n\nimport \"./MenuTrigger.css\";\nimport \"./Menu.css\";\n\nexport interface MenuTriggerProps {\n  disabled?: boolean;\n  isOpen?: boolean;\n  setIsOpen: (isOpen: boolean) => void;\n}\n\nexport interface MenuProps {\n  /** Custom trigger component. If not provided, defaults to ellipsis icon.\n   * - @prop triggerProps {@link TriggerProps}\n   */\n  renderTrigger?: (triggerProps: MenuTriggerProps) => ReactNode;\n\n  /** Size of the trigger icon\n   * @default 24\n   */\n  size?: number;\n\n  /** Title of the parent menu */\n  title?: string;\n\n  /** Array of menu actions/items to display\n   * - type {@link ActionMenuAction}[]\n   */\n  items: ActionMenuAction[];\n\n  /** Whether the menu is disabled\n   * @default false\n   */\n  disabled?: boolean;\n\n  /** Callback when the menu closes */\n  onClose?: () => void;\n\n  /** Test ID for the trigger button */\n  triggerTestId?: string;\n\n  /** Test ID for the menu */\n  menuTestId?: string;\n\n  /** Callback when the selection changes */\n  onSelectionChange?: (key: string) => void;\n\n  /** The key of the selected item */\n  selectedKey?: string;\n\n  /** The keys of the disabled items */\n  disabledKeys?: string[];\n}\n\n/**\n * An uncontrolled component that displays either a popover menu or an action menu\n * depending on device capabilities (touch detection and screen size) when the menu trigger is pressed.\n *\n * API:\n *  - {@link MenuProps}\n */\nexport function MenuTrigger({\n  renderTrigger,\n  size = 24,\n  title,\n  items,\n  disabled,\n  onClose,\n  triggerTestId = \"MenuTrigger-Trigger\",\n  menuTestId,\n  onSelectionChange,\n  selectedKey,\n  disabledKeys,\n}: MenuProps) {\n  const isMobile = useBreakpoint(BREAKPOINTS.SMALL);\n  const [isOpen, setIsOpen] = useState(false);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n\n  const menuItems = useMemo(\n    () => items.map((item) => ({ ...item, id: item.key })),\n    [items],\n  );\n\n  const handleSelectionChange = (key: string) => {\n    onSelectionChange?.(key);\n    setIsOpen(false);\n  };\n\n  const triggerButton = renderTrigger ? (\n    renderTrigger({\n      isOpen,\n      disabled,\n      setIsOpen,\n    })\n  ) : (\n    <button\n      data-testid={triggerTestId}\n      disabled={disabled}\n      className=\"proton-MenuTrigger__button\"\n      ref={triggerRef}\n      onClick={() => setIsOpen(!isOpen)}\n      type=\"button\"\n      aria-label=\"Open menu\"\n      aria-expanded={isOpen}\n    >\n      <EllipsisIcon size={size} />\n    </button>\n  );\n\n  if (isMobile) {\n    return (\n      <>\n        {triggerButton}\n        {isOpen && (\n          <ActionMenu\n            actions={menuItems}\n            title={title}\n            isOpen={isOpen}\n            onClose={() => {\n              setIsOpen(false);\n              onClose?.();\n            }}\n            showCancel\n            data-testid={menuTestId}\n            selectionMode=\"single\"\n            onSelectionChange={(keys) => {\n              const nextKey = Array.from(keys)[0];\n              if (nextKey) handleSelectionChange(nextKey as string);\n            }}\n            selectedKeys={selectedKey ? [selectedKey] : undefined}\n            disabledKeys={disabledKeys}\n          />\n        )}\n      </>\n    );\n  }\n\n  return (\n    <PopoverMenu\n      trigger={triggerButton}\n      items={menuItems}\n      isOpen={isOpen}\n      onOpenChange={setIsOpen}\n      selectedKey={selectedKey}\n      onSelectionChange={handleSelectionChange}\n      disabledKeys={disabledKeys}\n      title={title}\n    />\n  );\n}\n\nMenuTrigger.displayName = \"ProtonUIMenuTrigger\";\n"],"names":["MenuTrigger","renderTrigger","size","title","items","disabled","onClose","triggerTestId","menuTestId","onSelectionChange","selectedKey","disabledKeys","isMobile","useBreakpoint","BREAKPOINTS","isOpen","setIsOpen","useState","triggerRef","useRef","menuItems","useMemo","item","handleSelectionChange","key","triggerButton","jsx","EllipsisIcon","jsxs","Fragment","ActionMenu","keys","nextKey","PopoverMenu"],"mappings":";;;;;;;;;AAqEO,SAASA,EAAY;AAAA,EAC1B,eAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,YAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AACF,GAAc;AACZ,QAAMC,IAAWC,EAAcC,EAAY,KAAK,GAC1C,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpCC,IAAaC,EAA0B,IAAI,GAE3CC,IAAYC;AAAA,IAChB,MAAMjB,EAAM,IAAI,CAACkB,OAAU,EAAE,GAAGA,GAAM,IAAIA,EAAK,IAAA,EAAM;AAAA,IACrD,CAAClB,CAAK;AAAA,EAAA,GAGFmB,IAAwB,CAACC,MAAgB;AAC7C,IAAAf,KAAA,QAAAA,EAAoBe,IACpBR,EAAU,EAAK;AAAA,EACjB,GAEMS,IAAgBxB,IACpBA,EAAc;AAAA,IACZ,QAAAc;AAAA,IACA,UAAAV;AAAA,IACA,WAAAW;AAAA,EAAA,CACD,IAEDU,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAanB;AAAA,MACb,UAAAF;AAAA,MACA,WAAU;AAAA,MACV,KAAKa;AAAA,MACL,SAAS,MAAMF,EAAU,CAACD,CAAM;AAAA,MAChC,MAAK;AAAA,MACL,cAAW;AAAA,MACX,iBAAeA;AAAA,MAEf,UAAAW,gBAAAA,EAAAA,IAACC,KAAa,MAAAzB,EAAA,CAAY;AAAA,IAAA;AAAA,EAAA;AAI9B,SAAIU,IAEAgB,gBAAAA,EAAAA,KAAAC,YAAA,EACG,UAAA;AAAA,IAAAJ;AAAA,IACAV,KACCW,gBAAAA,EAAAA;AAAAA,MAACI;AAAA,MAAA;AAAA,QACC,SAASV;AAAA,QACT,OAAAjB;AAAA,QACA,QAAAY;AAAA,QACA,SAAS,MAAM;AACb,UAAAC,EAAU,EAAK,GACfV,KAAA,QAAAA;AAAA,QACF;AAAA,QACA,YAAU;AAAA,QACV,eAAaE;AAAA,QACb,eAAc;AAAA,QACd,mBAAmB,CAACuB,MAAS;AAC3B,gBAAMC,IAAU,MAAM,KAAKD,CAAI,EAAE,CAAC;AAClC,UAAIC,OAA+BA,CAAiB;AAAA,QACtD;AAAA,QACA,cAActB,IAAc,CAACA,CAAW,IAAI;AAAA,QAC5C,cAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GAEJ,IAKFe,gBAAAA,EAAAA;AAAAA,IAACO;AAAA,IAAA;AAAA,MACC,SAASR;AAAA,MACT,OAAOL;AAAA,MACP,QAAAL;AAAA,MACA,cAAcC;AAAA,MACd,aAAAN;AAAA,MACA,mBAAmBa;AAAA,MACnB,cAAAZ;AAAA,MACA,OAAAR;AAAA,IAAA;AAAA,EAAA;AAGN;AAEAH,EAAY,cAAc;"}
+{"version":3,"file":"MenuTrigger.es.js","sources":["../../../src/components/Menu/MenuTrigger.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode, useMemo, useRef, useState } from \"react\";\n\nimport { BREAKPOINTS } from \"../../constants\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\nimport { ActionMenu, ActionMenuAction } from \"../ActionMenu/ActionMenu\";\nimport { Ellipsis as EllipsisIcon } from \"../Icon\";\nimport { PopoverMenu } from \"./PopoverMenu\";\n\nimport \"./MenuTrigger.css\";\nimport \"./Menu.css\";\n\nexport interface MenuTriggerProps {\n  disabled?: boolean;\n  isOpen?: boolean;\n  setIsOpen: (isOpen: boolean) => void;\n}\n\nexport interface MenuProps {\n  /** Custom trigger component. If not provided, defaults to ellipsis icon.\n   * - @prop triggerProps {@link TriggerProps}\n   */\n  renderTrigger?: (triggerProps: MenuTriggerProps) => ReactNode;\n\n  /** Size of the trigger icon\n   * @default 24\n   */\n  size?: number;\n\n  /** Title of the parent menu */\n  title?: string;\n\n  /** Array of menu actions/items to display\n   * - type {@link ActionMenuAction}[]\n   */\n  items: ActionMenuAction[];\n\n  /** Whether the menu is disabled\n   * @default false\n   */\n  disabled?: boolean;\n\n  /** Callback when the menu closes */\n  onClose?: () => void;\n\n  /** Test ID for the trigger button */\n  triggerTestId?: string;\n\n  /** Test ID for the menu */\n  menuTestId?: string;\n\n  /** Callback when the selection changes */\n  onSelectionChange?: (key: string) => void;\n\n  /** The key of the selected item */\n  selectedKey?: string;\n\n  /** The keys of the disabled items */\n  disabledKeys?: string[];\n}\n\n/**\n * An uncontrolled component that displays either a popover menu or an action menu\n * depending on device capabilities (touch detection and screen size) when the menu trigger is pressed.\n *\n * API:\n *  - {@link MenuProps}\n */\nexport function MenuTrigger({\n  renderTrigger,\n  size = 24,\n  title,\n  items,\n  disabled,\n  onClose,\n  triggerTestId = \"MenuTrigger-Trigger\",\n  menuTestId,\n  onSelectionChange,\n  selectedKey,\n  disabledKeys,\n}: MenuProps) {\n  const isMobile = useBreakpoint(BREAKPOINTS.SMALL);\n  const [isOpen, setIsOpen] = useState(false);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n\n  const menuItems = useMemo(\n    () => items.map((item) => ({ ...item, id: item.key })),\n    [items],\n  );\n\n  const handleSelectionChange = (key: string) => {\n    onSelectionChange?.(key);\n    setIsOpen(false);\n  };\n\n  const triggerButton = renderTrigger ? (\n    renderTrigger({\n      isOpen,\n      disabled,\n      setIsOpen,\n    })\n  ) : (\n    <button\n      data-testid={triggerTestId}\n      disabled={disabled}\n      className=\"proton-MenuTrigger__button\"\n      ref={triggerRef}\n      onClick={() => setIsOpen(!isOpen)}\n      type=\"button\"\n      aria-label=\"Open menu\"\n      aria-expanded={isOpen}\n    >\n      <EllipsisIcon size={size} />\n    </button>\n  );\n\n  if (isMobile) {\n    return (\n      <>\n        {triggerButton}\n        {isOpen && (\n          <ActionMenu\n            actions={menuItems}\n            title={title}\n            isOpen={isOpen}\n            onClose={() => {\n              setIsOpen(false);\n              onClose?.();\n            }}\n            showCancel\n            data-testid={menuTestId}\n            selectionMode=\"single\"\n            onSelectionChange={(keys) => {\n              const nextKey = Array.from(keys)[0];\n              if (nextKey) handleSelectionChange(nextKey as string);\n            }}\n            selectedKeys={selectedKey ? [selectedKey] : undefined}\n            disabledKeys={disabledKeys}\n          />\n        )}\n      </>\n    );\n  }\n\n  return (\n    <PopoverMenu\n      trigger={triggerButton}\n      items={menuItems}\n      isOpen={isOpen}\n      onOpenChange={setIsOpen}\n      selectedKey={selectedKey}\n      onSelectionChange={handleSelectionChange}\n      disabledKeys={disabledKeys}\n      title={title}\n    />\n  );\n}\n\nMenuTrigger.displayName = \"ProtonUIMenuTrigger\";\n"],"names":["MenuTrigger","renderTrigger","size","title","items","disabled","onClose","triggerTestId","menuTestId","onSelectionChange","selectedKey","disabledKeys","isMobile","useBreakpoint","BREAKPOINTS","isOpen","setIsOpen","useState","triggerRef","useRef","menuItems","useMemo","item","handleSelectionChange","key","triggerButton","jsx","EllipsisIcon","jsxs","Fragment","ActionMenu","keys","nextKey","PopoverMenu"],"mappings":";;;;;;;;;AAqEO,SAASA,EAAY;AAAA,EAC1B,eAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,YAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AACF,GAAc;AACZ,QAAMC,IAAWC,EAAcC,EAAY,KAAK,GAC1C,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpCC,IAAaC,EAA0B,IAAI,GAE3CC,IAAYC;AAAA,IAChB,MAAMjB,EAAM,IAAI,CAACkB,OAAU,EAAE,GAAGA,GAAM,IAAIA,EAAK,IAAA,EAAM;AAAA,IACrD,CAAClB,CAAK;AAAA,EAAA,GAGFmB,IAAwB,CAACC,MAAgB;AAC7C,IAAAf,KAAA,QAAAA,EAAoBe,IACpBR,EAAU,EAAK;AAAA,EACjB,GAEMS,IAAgBxB,IACpBA,EAAc;AAAA,IACZ,QAAAc;AAAA,IACA,UAAAV;AAAA,IACA,WAAAW;AAAA,EAAA,CACD,IAED,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAanB;AAAA,MACb,UAAAF;AAAA,MACA,WAAU;AAAA,MACV,KAAKa;AAAA,MACL,SAAS,MAAMF,EAAU,CAACD,CAAM;AAAA,MAChC,MAAK;AAAA,MACL,cAAW;AAAA,MACX,iBAAeA;AAAA,MAEf,UAAA,gBAAAW,EAACC,KAAa,MAAAzB,EAAA,CAAY;AAAA,IAAA;AAAA,EAAA;AAI9B,SAAIU,IAEA,gBAAAgB,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAJ;AAAA,IACAV,KACC,gBAAAW;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,SAASV;AAAA,QACT,OAAAjB;AAAA,QACA,QAAAY;AAAA,QACA,SAAS,MAAM;AACb,UAAAC,EAAU,EAAK,GACfV,KAAA,QAAAA;AAAA,QACF;AAAA,QACA,YAAU;AAAA,QACV,eAAaE;AAAA,QACb,eAAc;AAAA,QACd,mBAAmB,CAACuB,MAAS;AAC3B,gBAAMC,IAAU,MAAM,KAAKD,CAAI,EAAE,CAAC;AAClC,UAAIC,OAA+BA,CAAiB;AAAA,QACtD;AAAA,QACA,cAActB,IAAc,CAACA,CAAW,IAAI;AAAA,QAC5C,cAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GAEJ,IAKF,gBAAAe;AAAA,IAACO;AAAA,IAAA;AAAA,MACC,SAASR;AAAA,MACT,OAAOL;AAAA,MACP,QAAAL;AAAA,MACA,cAAcC;AAAA,MACd,aAAAN;AAAA,MACA,mBAAmBa;AAAA,MACnB,cAAAZ;AAAA,MACA,OAAAR;AAAA,IAAA;AAAA,EAAA;AAGN;AAEAH,EAAY,cAAc;"}

package/dist/components/Menu/PopoverMenu.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../node_modules/react/jsx-runtime.cjs.js"),s=require("radix-ui"),R=require("../ThemeProvider.cjs.js"),u=require("../../utils/string.cjs.js"),y=require("../Icon/IconComponents/ChevronRight.cjs.js");function a({trigger:j,items:M,isOpen:h,onOpenChange:n,selectedKey:_="",onSelectionChange:l,disabledKeys:g=[],title:x=""}){const{className:c,style:p}=R.useTheme();function m(d){const{item:e,disabledKeys:t,onClose:o}=d;return e.children&&e.children.length>0?r.jsxRuntimeExports.jsxs(s.DropdownMenu.Sub,{children:[r.jsxRuntimeExports.jsxs(s.DropdownMenu.SubTrigger,{className:u.csx("proton-Menu__item","proton-MenuTrigger__menu-item"),children:[e.label,r.jsxRuntimeExports.jsx("span",{className:"proton-MenuTrigger__chevron","aria-hidden":"true",children:r.jsxRuntimeExports.jsx(y.ChevronRight,{size:12})})]}),r.jsxRuntimeExports.jsx(s.DropdownMenu.Portal,{children:r.jsxRuntimeExports.jsx(s.DropdownMenu.SubContent,{sideOffset:8,"data-has-submenu":"true",className:u.csx("proton-Menu","proton-MenuTrigger__menu",c),style:p,children:e.children.map(i=>m({item:i,disabledKeys:t,onClose:o}))})})]},e.key):r.jsxRuntimeExports.jsxs(s.DropdownMenu.Item,{className:u.csx("proton-Menu__item","proton-MenuTrigger__menu-item"),"aria-selected":_===e.key,disabled:t==null?void 0:t.includes(e.key),onSelect:()=>{var i;(i=e.onAction)==null||i.call(e,e.key),l==null||l(e.key),o==null||o()},children:[r.jsxRuntimeExports.jsx("span",{className:"proton-MenuTrigger__label",style:{gridArea:"label"},children:e.label}),e.description&&r.jsxRuntimeExports.jsx("span",{className:"proton-MenuTrigger__description",style:{gridArea:"desc"},children:e.description})]},e.key)}return r.jsxRuntimeExports.jsxs(s.DropdownMenu.Root,{open:h,onOpenChange:n,children:[r.jsxRuntimeExports.jsx(s.DropdownMenu.Trigger,{asChild:!0,children:j}),r.jsxRuntimeExports.jsx(s.DropdownMenu.Portal,{children:r.jsxRuntimeExports.jsxs(s.DropdownMenu.Content,{className:u.csx("proton-Menu","proton-MenuTrigger__menu",c),style:p,children:[x&&r.jsxRuntimeExports.jsx(s.DropdownMenu.Label,{className:"proton-MenuTrigger__menu-header",children:x}),M.map(d=>m({item:d,disabledKeys:g,onClose:()=>n==null?void 0:n(!1)}))]})})]})}a.displayName="ProtonUIPopoverMenu";exports.PopoverMenu=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),n=require("radix-ui"),y=require("../ThemeProvider.cjs.js"),u=require("../../utils/string.cjs.js"),b=require("../Icon/IconComponents/ChevronRight.cjs.js");function M({trigger:h,items:x,isOpen:_,onOpenChange:s,selectedKey:g="",onSelectionChange:l,disabledKeys:j=[],title:c=""}){const{className:a,style:p}=y.useTheme();function m(d){const{item:e,disabledKeys:o,onClose:i}=d;return e.children&&e.children.length>0?r.jsxs(n.DropdownMenu.Sub,{children:[r.jsxs(n.DropdownMenu.SubTrigger,{className:u.csx("proton-Menu__item","proton-MenuTrigger__menu-item"),children:[e.label,r.jsx("span",{className:"proton-MenuTrigger__chevron","aria-hidden":"true",children:r.jsx(b.ChevronRight,{size:12})})]}),r.jsx(n.DropdownMenu.Portal,{children:r.jsx(n.DropdownMenu.SubContent,{sideOffset:8,"data-has-submenu":"true",className:u.csx("proton-Menu","proton-MenuTrigger__menu",a),style:p,children:e.children.map(t=>m({item:t,disabledKeys:o,onClose:i}))})})]},e.key):r.jsxs(n.DropdownMenu.Item,{className:u.csx("proton-Menu__item","proton-MenuTrigger__menu-item"),"aria-selected":g===e.key,disabled:o==null?void 0:o.includes(e.key),onSelect:()=>{var t;(t=e.onAction)==null||t.call(e,e.key),l==null||l(e.key),i==null||i()},children:[r.jsx("span",{className:"proton-MenuTrigger__label",style:{gridArea:"label"},children:e.label}),e.description&&r.jsx("span",{className:"proton-MenuTrigger__description",style:{gridArea:"desc"},children:e.description})]},e.key)}return r.jsxs(n.DropdownMenu.Root,{open:_,onOpenChange:s,children:[r.jsx(n.DropdownMenu.Trigger,{asChild:!0,children:h}),r.jsx(n.DropdownMenu.Portal,{children:r.jsxs(n.DropdownMenu.Content,{className:u.csx("proton-Menu","proton-MenuTrigger__menu",a),style:p,children:[c&&r.jsx(n.DropdownMenu.Label,{className:"proton-MenuTrigger__menu-header",children:c}),x.map(d=>m({item:d,disabledKeys:j,onClose:()=>s==null?void 0:s(!1)}))]})})]})}M.displayName="ProtonUIPopoverMenu";exports.PopoverMenu=M;
 //# sourceMappingURL=PopoverMenu.cjs.js.map

package/dist/components/Menu/PopoverMenu.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverMenu.cjs.js","sources":["../../../src/components/Menu/PopoverMenu.tsx"],"sourcesContent":["import { DropdownMenu as RadixDropdownMenu } from \"radix-ui\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { csx } from \"../../utils/string\";\nimport { ActionMenuAction } from \"../ActionMenu/ActionMenu\";\nimport { ChevronRight as ChevronRightIcon } from \"../Icon\";\n\nimport type { CSSProperties, ReactNode } from \"react\";\n\ntype MenuItemRenderArgs = {\n  item: ActionMenuAction;\n  className: string | undefined;\n  style: CSSProperties | undefined;\n  disabledKeys: string[];\n  onClose: (() => void) | undefined;\n};\n\nexport interface PopoverMenuProps {\n  /** The trigger component */\n  trigger: ReactNode;\n\n  /** Array of menu actions/items to display\n   * - type {@link ActionMenuAction}[]\n   */\n  items: ActionMenuAction[];\n\n  /** Whether the menu is open */\n  isOpen: boolean;\n\n  /** Callback when the menu is opened or closed */\n  onOpenChange: (open: boolean) => void;\n\n  /** The key of the selected item */\n  selectedKey?: string;\n\n  /** Callback when the selection changes */\n  onSelectionChange: (key: string) => void;\n\n  /** The keys of the disabled items */\n  disabledKeys?: string[];\n\n  /** The title of the menu */\n  title?: string;\n}\n\n/**\n * A component that displays a popover menu.\n *\n * API:\n *  - {@link PopoverMenuProps}\n */\nexport function PopoverMenu({\n  trigger,\n  items,\n  isOpen,\n  onOpenChange,\n  selectedKey = \"\",\n  onSelectionChange,\n  disabledKeys = [],\n  title = \"\",\n}: PopoverMenuProps) {\n  const { className: themeClass, style: themeStyle } = useTheme();\n\n  function renderMenuItem(props: MenuItemRenderArgs) {\n    const { item, className, style, disabledKeys, onClose } = props;\n\n    if (item.children && item.children.length > 0) {\n      return (\n        <RadixDropdownMenu.Sub key={item.key}>\n          <RadixDropdownMenu.SubTrigger\n            className={csx(\n              \"proton-Menu__item\",\n              \"proton-MenuTrigger__menu-item\",\n            )}\n          >\n            {item.label}\n            <span className=\"proton-MenuTrigger__chevron\" aria-hidden=\"true\">\n              <ChevronRightIcon size={12} />\n            </span>\n          </RadixDropdownMenu.SubTrigger>\n\n          <RadixDropdownMenu.Portal>\n            <RadixDropdownMenu.SubContent\n              sideOffset={8}\n              data-has-submenu=\"true\"\n              className={csx(\n                \"proton-Menu\",\n                \"proton-MenuTrigger__menu\",\n                themeClass,\n              )}\n              style={themeStyle as CSSProperties}\n            >\n              {item.children.map((child: ActionMenuAction) =>\n                renderMenuItem({\n                  item: child,\n                  className,\n                  style,\n                  disabledKeys,\n                  onClose,\n                }),\n              )}\n            </RadixDropdownMenu.SubContent>\n          </RadixDropdownMenu.Portal>\n        </RadixDropdownMenu.Sub>\n      );\n    } else {\n      return (\n        <RadixDropdownMenu.Item\n          className={csx(\"proton-Menu__item\", \"proton-MenuTrigger__menu-item\")}\n          key={item.key}\n          aria-selected={selectedKey === item.key}\n          disabled={disabledKeys?.includes(item.key)}\n          onSelect={() => {\n            item.onAction?.(item.key);\n            onSelectionChange?.(item.key);\n            onClose?.();\n          }}\n        >\n          <span\n            className=\"proton-MenuTrigger__label\"\n            style={{ gridArea: \"label\" }}\n          >\n            {item.label}\n          </span>\n          {item.description && (\n            <span\n              className=\"proton-MenuTrigger__description\"\n              style={{ gridArea: \"desc\" }}\n            >\n              {item.description}\n            </span>\n          )}\n        </RadixDropdownMenu.Item>\n      );\n    }\n  }\n\n  return (\n    <RadixDropdownMenu.Root open={isOpen} onOpenChange={onOpenChange}>\n      <RadixDropdownMenu.Trigger asChild>{trigger}</RadixDropdownMenu.Trigger>\n      <RadixDropdownMenu.Portal>\n        <RadixDropdownMenu.Content\n          className={csx(\"proton-Menu\", \"proton-MenuTrigger__menu\", themeClass)}\n          style={themeStyle as CSSProperties}\n        >\n          {title && (\n            <RadixDropdownMenu.Label className=\"proton-MenuTrigger__menu-header\">\n              {title}\n            </RadixDropdownMenu.Label>\n          )}\n          {items.map((item) =>\n            renderMenuItem({\n              item,\n              className: themeClass,\n              style: themeStyle as CSSProperties,\n              disabledKeys,\n              onClose: () => onOpenChange?.(false),\n            }),\n          )}\n        </RadixDropdownMenu.Content>\n      </RadixDropdownMenu.Portal>\n    </RadixDropdownMenu.Root>\n  );\n}\n\nPopoverMenu.displayName = \"ProtonUIPopoverMenu\";\n"],"names":["PopoverMenu","trigger","items","isOpen","onOpenChange","selectedKey","onSelectionChange","disabledKeys","title","themeClass","themeStyle","useTheme","renderMenuItem","props","item","onClose","jsxs","RadixDropdownMenu","csx","jsx","ChevronRightIcon","child","_a"],"mappings":"ySAkDO,SAASA,EAAY,CAC1B,QAAAC,EACA,MAAAC,EACA,OAAAC,EACA,aAAAC,EACA,YAAAC,EAAc,GACd,kBAAAC,EACA,aAAAC,EAAe,CAAA,EACf,MAAAC,EAAQ,EACV,EAAqB,CACnB,KAAM,CAAE,UAAWC,EAAY,MAAOC,CAAA,EAAeC,EAAAA,SAAA,EAErD,SAASC,EAAeC,EAA2B,CACjD,KAAM,CAAE,KAAAC,EAAwB,aAAAP,EAAc,QAAAQ,GAAYF,EAE1D,OAAIC,EAAK,UAAYA,EAAK,SAAS,OAAS,EAExCE,yBAACC,EAAAA,aAAkB,IAAlB,CACC,SAAA,CAAAD,EAAAA,kBAAAA,KAACC,EAAAA,aAAkB,WAAlB,CACC,UAAWC,EAAAA,IACT,oBACA,+BAAA,EAGD,SAAA,CAAAJ,EAAK,MACNK,EAAAA,kBAAAA,IAAC,OAAA,CAAK,UAAU,8BAA8B,cAAY,OACxD,SAAAA,EAAAA,kBAAAA,IAACC,EAAAA,aAAA,CAAiB,KAAM,EAAA,CAAI,CAAA,CAC9B,CAAA,CAAA,CAAA,EAGFD,EAAAA,kBAAAA,IAACF,EAAAA,aAAkB,OAAlB,CACC,SAAAE,EAAAA,kBAAAA,IAACF,EAAAA,aAAkB,WAAlB,CACC,WAAY,EACZ,mBAAiB,OACjB,UAAWC,EAAAA,IACT,cACA,2BACAT,CAAA,EAEF,MAAOC,EAEN,WAAK,SAAS,IAAKW,GAClBT,EAAe,CACb,KAAMS,EAGN,aAAAd,EACA,QAAAQ,CAAA,CACD,CAAA,CACH,CAAA,CACF,CACF,CAAA,CAAA,EAlC0BD,EAAK,GAmCjC,EAIAE,EAAAA,kBAAAA,KAACC,EAAAA,aAAkB,KAAlB,CACC,UAAWC,EAAAA,IAAI,oBAAqB,+BAA+B,EAEnE,gBAAeb,IAAgBS,EAAK,IACpC,SAAUP,GAAAA,YAAAA,EAAc,SAASO,EAAK,KACtC,SAAU,IAAM,QACdQ,EAAAR,EAAK,WAAL,MAAAQ,EAAA,KAAAR,EAAgBA,EAAK,KACrBR,GAAA,MAAAA,EAAoBQ,EAAK,KACzBC,GAAA,MAAAA,GACF,EAEA,SAAA,CAAAI,EAAAA,kBAAAA,IAAC,OAAA,CACC,UAAU,4BACV,MAAO,CAAE,SAAU,OAAA,EAElB,SAAAL,EAAK,KAAA,CAAA,EAEPA,EAAK,aACJK,EAAAA,kBAAAA,IAAC,OAAA,CACC,UAAU,kCACV,MAAO,CAAE,SAAU,MAAA,EAElB,SAAAL,EAAK,WAAA,CAAA,CACR,CAAA,EArBGA,EAAK,GAAA,CA0BlB,CAEA,gCACGG,EAAAA,aAAkB,KAAlB,CAAuB,KAAMd,EAAQ,aAAAC,EACpC,SAAA,CAAAe,EAAAA,kBAAAA,IAACF,EAAAA,aAAkB,QAAlB,CAA0B,QAAO,GAAE,SAAAhB,EAAQ,EAC5CkB,EAAAA,kBAAAA,IAACF,EAAAA,aAAkB,OAAlB,CACC,SAAAD,EAAAA,kBAAAA,KAACC,EAAAA,aAAkB,QAAlB,CACC,UAAWC,EAAAA,IAAI,cAAe,2BAA4BT,CAAU,EACpE,MAAOC,EAEN,SAAA,CAAAF,2BACES,EAAAA,aAAkB,MAAlB,CAAwB,UAAU,kCAChC,SAAAT,EACH,EAEDN,EAAM,IAAKY,GACVF,EAAe,CACb,KAAAE,EAGA,aAAAP,EACA,QAAS,IAAMH,GAAA,YAAAA,EAAe,GAAK,CACpC,CAAA,CACH,CAAA,CAAA,CACF,CACF,CAAA,EACF,CAEJ,CAEAJ,EAAY,YAAc"}
+{"version":3,"file":"PopoverMenu.cjs.js","sources":["../../../src/components/Menu/PopoverMenu.tsx"],"sourcesContent":["import { DropdownMenu as RadixDropdownMenu } from \"radix-ui\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { csx } from \"../../utils/string\";\nimport { ActionMenuAction } from \"../ActionMenu/ActionMenu\";\nimport { ChevronRight as ChevronRightIcon } from \"../Icon\";\n\nimport type { CSSProperties, ReactNode } from \"react\";\n\ntype MenuItemRenderArgs = {\n  item: ActionMenuAction;\n  className: string | undefined;\n  style: CSSProperties | undefined;\n  disabledKeys: string[];\n  onClose: (() => void) | undefined;\n};\n\nexport interface PopoverMenuProps {\n  /** The trigger component */\n  trigger: ReactNode;\n\n  /** Array of menu actions/items to display\n   * - type {@link ActionMenuAction}[]\n   */\n  items: ActionMenuAction[];\n\n  /** Whether the menu is open */\n  isOpen: boolean;\n\n  /** Callback when the menu is opened or closed */\n  onOpenChange: (open: boolean) => void;\n\n  /** The key of the selected item */\n  selectedKey?: string;\n\n  /** Callback when the selection changes */\n  onSelectionChange: (key: string) => void;\n\n  /** The keys of the disabled items */\n  disabledKeys?: string[];\n\n  /** The title of the menu */\n  title?: string;\n}\n\n/**\n * A component that displays a popover menu.\n *\n * API:\n *  - {@link PopoverMenuProps}\n */\nexport function PopoverMenu({\n  trigger,\n  items,\n  isOpen,\n  onOpenChange,\n  selectedKey = \"\",\n  onSelectionChange,\n  disabledKeys = [],\n  title = \"\",\n}: PopoverMenuProps) {\n  const { className: themeClass, style: themeStyle } = useTheme();\n\n  function renderMenuItem(props: MenuItemRenderArgs) {\n    const { item, className, style, disabledKeys, onClose } = props;\n\n    if (item.children && item.children.length > 0) {\n      return (\n        <RadixDropdownMenu.Sub key={item.key}>\n          <RadixDropdownMenu.SubTrigger\n            className={csx(\n              \"proton-Menu__item\",\n              \"proton-MenuTrigger__menu-item\",\n            )}\n          >\n            {item.label}\n            <span className=\"proton-MenuTrigger__chevron\" aria-hidden=\"true\">\n              <ChevronRightIcon size={12} />\n            </span>\n          </RadixDropdownMenu.SubTrigger>\n\n          <RadixDropdownMenu.Portal>\n            <RadixDropdownMenu.SubContent\n              sideOffset={8}\n              data-has-submenu=\"true\"\n              className={csx(\n                \"proton-Menu\",\n                \"proton-MenuTrigger__menu\",\n                themeClass,\n              )}\n              style={themeStyle as CSSProperties}\n            >\n              {item.children.map((child: ActionMenuAction) =>\n                renderMenuItem({\n                  item: child,\n                  className,\n                  style,\n                  disabledKeys,\n                  onClose,\n                }),\n              )}\n            </RadixDropdownMenu.SubContent>\n          </RadixDropdownMenu.Portal>\n        </RadixDropdownMenu.Sub>\n      );\n    } else {\n      return (\n        <RadixDropdownMenu.Item\n          className={csx(\"proton-Menu__item\", \"proton-MenuTrigger__menu-item\")}\n          key={item.key}\n          aria-selected={selectedKey === item.key}\n          disabled={disabledKeys?.includes(item.key)}\n          onSelect={() => {\n            item.onAction?.(item.key);\n            onSelectionChange?.(item.key);\n            onClose?.();\n          }}\n        >\n          <span\n            className=\"proton-MenuTrigger__label\"\n            style={{ gridArea: \"label\" }}\n          >\n            {item.label}\n          </span>\n          {item.description && (\n            <span\n              className=\"proton-MenuTrigger__description\"\n              style={{ gridArea: \"desc\" }}\n            >\n              {item.description}\n            </span>\n          )}\n        </RadixDropdownMenu.Item>\n      );\n    }\n  }\n\n  return (\n    <RadixDropdownMenu.Root open={isOpen} onOpenChange={onOpenChange}>\n      <RadixDropdownMenu.Trigger asChild>{trigger}</RadixDropdownMenu.Trigger>\n      <RadixDropdownMenu.Portal>\n        <RadixDropdownMenu.Content\n          className={csx(\"proton-Menu\", \"proton-MenuTrigger__menu\", themeClass)}\n          style={themeStyle as CSSProperties}\n        >\n          {title && (\n            <RadixDropdownMenu.Label className=\"proton-MenuTrigger__menu-header\">\n              {title}\n            </RadixDropdownMenu.Label>\n          )}\n          {items.map((item) =>\n            renderMenuItem({\n              item,\n              className: themeClass,\n              style: themeStyle as CSSProperties,\n              disabledKeys,\n              onClose: () => onOpenChange?.(false),\n            }),\n          )}\n        </RadixDropdownMenu.Content>\n      </RadixDropdownMenu.Portal>\n    </RadixDropdownMenu.Root>\n  );\n}\n\nPopoverMenu.displayName = \"ProtonUIPopoverMenu\";\n"],"names":["PopoverMenu","trigger","items","isOpen","onOpenChange","selectedKey","onSelectionChange","disabledKeys","title","themeClass","themeStyle","useTheme","renderMenuItem","props","item","onClose","jsxs","RadixDropdownMenu","csx","jsx","ChevronRightIcon","child","_a"],"mappings":"+QAkDO,SAASA,EAAY,CAC1B,QAAAC,EACA,MAAAC,EACA,OAAAC,EACA,aAAAC,EACA,YAAAC,EAAc,GACd,kBAAAC,EACA,aAAAC,EAAe,CAAA,EACf,MAAAC,EAAQ,EACV,EAAqB,CACnB,KAAM,CAAE,UAAWC,EAAY,MAAOC,CAAA,EAAeC,EAAAA,SAAA,EAErD,SAASC,EAAeC,EAA2B,CACjD,KAAM,CAAE,KAAAC,EAAwB,aAAAP,EAAc,QAAAQ,GAAYF,EAE1D,OAAIC,EAAK,UAAYA,EAAK,SAAS,OAAS,EAExCE,OAACC,EAAAA,aAAkB,IAAlB,CACC,SAAA,CAAAD,EAAAA,KAACC,EAAAA,aAAkB,WAAlB,CACC,UAAWC,EAAAA,IACT,oBACA,+BAAA,EAGD,SAAA,CAAAJ,EAAK,MACNK,EAAAA,IAAC,OAAA,CAAK,UAAU,8BAA8B,cAAY,OACxD,SAAAA,EAAAA,IAACC,EAAAA,aAAA,CAAiB,KAAM,EAAA,CAAI,CAAA,CAC9B,CAAA,CAAA,CAAA,EAGFD,EAAAA,IAACF,EAAAA,aAAkB,OAAlB,CACC,SAAAE,EAAAA,IAACF,EAAAA,aAAkB,WAAlB,CACC,WAAY,EACZ,mBAAiB,OACjB,UAAWC,EAAAA,IACT,cACA,2BACAT,CAAA,EAEF,MAAOC,EAEN,WAAK,SAAS,IAAKW,GAClBT,EAAe,CACb,KAAMS,EAGN,aAAAd,EACA,QAAAQ,CAAA,CACD,CAAA,CACH,CAAA,CACF,CACF,CAAA,CAAA,EAlC0BD,EAAK,GAmCjC,EAIAE,EAAAA,KAACC,EAAAA,aAAkB,KAAlB,CACC,UAAWC,EAAAA,IAAI,oBAAqB,+BAA+B,EAEnE,gBAAeb,IAAgBS,EAAK,IACpC,SAAUP,GAAAA,YAAAA,EAAc,SAASO,EAAK,KACtC,SAAU,IAAM,QACdQ,EAAAR,EAAK,WAAL,MAAAQ,EAAA,KAAAR,EAAgBA,EAAK,KACrBR,GAAA,MAAAA,EAAoBQ,EAAK,KACzBC,GAAA,MAAAA,GACF,EAEA,SAAA,CAAAI,EAAAA,IAAC,OAAA,CACC,UAAU,4BACV,MAAO,CAAE,SAAU,OAAA,EAElB,SAAAL,EAAK,KAAA,CAAA,EAEPA,EAAK,aACJK,EAAAA,IAAC,OAAA,CACC,UAAU,kCACV,MAAO,CAAE,SAAU,MAAA,EAElB,SAAAL,EAAK,WAAA,CAAA,CACR,CAAA,EArBGA,EAAK,GAAA,CA0BlB,CAEA,cACGG,EAAAA,aAAkB,KAAlB,CAAuB,KAAMd,EAAQ,aAAAC,EACpC,SAAA,CAAAe,EAAAA,IAACF,EAAAA,aAAkB,QAAlB,CAA0B,QAAO,GAAE,SAAAhB,EAAQ,EAC5CkB,EAAAA,IAACF,EAAAA,aAAkB,OAAlB,CACC,SAAAD,EAAAA,KAACC,EAAAA,aAAkB,QAAlB,CACC,UAAWC,EAAAA,IAAI,cAAe,2BAA4BT,CAAU,EACpE,MAAOC,EAEN,SAAA,CAAAF,SACES,EAAAA,aAAkB,MAAlB,CAAwB,UAAU,kCAChC,SAAAT,EACH,EAEDN,EAAM,IAAKY,GACVF,EAAe,CACb,KAAAE,EAGA,aAAAP,EACA,QAAS,IAAMH,GAAA,YAAAA,EAAe,GAAK,CACpC,CAAA,CACH,CAAA,CAAA,CACF,CACF,CAAA,EACF,CAEJ,CAEAJ,EAAY,YAAc"}

package/dist/components/Menu/PopoverMenu.es.js

@@ -1,67 +1,67 @@
-import { j as r } from "../../node_modules/react/jsx-runtime.es.js";
-import { DropdownMenu as s } from "radix-ui";
-import { useTheme as g } from "../ThemeProvider.es.js";
-import { csx as l } from "../../utils/string.es.js";
-import { ChevronRight as y } from "../Icon/IconComponents/ChevronRight.es.js";
-function b({
-  trigger: _,
-  items: h,
-  isOpen: x,
-  onOpenChange: t,
-  selectedKey: j = "",
-  onSelectionChange: a,
-  disabledKeys: M = [],
-  title: d = ""
+import { jsxs as t, jsx as n } from "react/jsx-runtime";
+import { DropdownMenu as r } from "radix-ui";
+import { useTheme as f } from "../ThemeProvider.es.js";
+import { csx as a } from "../../utils/string.es.js";
+import { ChevronRight as T } from "../Icon/IconComponents/ChevronRight.es.js";
+function N({
+  trigger: h,
+  items: M,
+  isOpen: g,
+  onOpenChange: i,
+  selectedKey: y = "",
+  onSelectionChange: d,
+  disabledKeys: b = [],
+  title: u = ""
 }) {
-  const { className: u, style: c } = g();
-  function p(m) {
-    const { item: e, disabledKeys: n, onClose: i } = m;
-    return e.children && e.children.length > 0 ? /* @__PURE__ */ r.jsxs(s.Sub, { children: [
-      /* @__PURE__ */ r.jsxs(
-        s.SubTrigger,
+  const { className: c, style: p } = f();
+  function _(m) {
+    const { item: e, disabledKeys: s, onClose: o } = m;
+    return e.children && e.children.length > 0 ? /* @__PURE__ */ t(r.Sub, { children: [
+      /* @__PURE__ */ t(
+        r.SubTrigger,
         {
-          className: l(
+          className: a(
             "proton-Menu__item",
             "proton-MenuTrigger__menu-item"
           ),
           children: [
             e.label,
-            /* @__PURE__ */ r.jsx("span", { className: "proton-MenuTrigger__chevron", "aria-hidden": "true", children: /* @__PURE__ */ r.jsx(y, { size: 12 }) })
+            /* @__PURE__ */ n("span", { className: "proton-MenuTrigger__chevron", "aria-hidden": "true", children: /* @__PURE__ */ n(T, { size: 12 }) })
           ]
         }
       ),
-      /* @__PURE__ */ r.jsx(s.Portal, { children: /* @__PURE__ */ r.jsx(
-        s.SubContent,
+      /* @__PURE__ */ n(r.Portal, { children: /* @__PURE__ */ n(
+        r.SubContent,
         {
           sideOffset: 8,
           "data-has-submenu": "true",
-          className: l(
+          className: a(
             "proton-Menu",
             "proton-MenuTrigger__menu",
-            u
+            c
           ),
-          style: c,
+          style: p,
           children: e.children.map(
-            (o) => p({
-              item: o,
-              disabledKeys: n,
-              onClose: i
+            (l) => _({
+              item: l,
+              disabledKeys: s,
+              onClose: o
             })
           )
         }
       ) })
-    ] }, e.key) : /* @__PURE__ */ r.jsxs(
-      s.Item,
+    ] }, e.key) : /* @__PURE__ */ t(
+      r.Item,
       {
-        className: l("proton-Menu__item", "proton-MenuTrigger__menu-item"),
-        "aria-selected": j === e.key,
-        disabled: n == null ? void 0 : n.includes(e.key),
+        className: a("proton-Menu__item", "proton-MenuTrigger__menu-item"),
+        "aria-selected": y === e.key,
+        disabled: s == null ? void 0 : s.includes(e.key),
         onSelect: () => {
-          var o;
-          (o = e.onAction) == null || o.call(e, e.key), a == null || a(e.key), i == null || i();
+          var l;
+          (l = e.onAction) == null || l.call(e, e.key), d == null || d(e.key), o == null || o();
         },
         children: [
-          /* @__PURE__ */ r.jsx(
+          /* @__PURE__ */ n(
             "span",
             {
               className: "proton-MenuTrigger__label",
@@ -69,7 +69,7 @@ function b({
               children: e.label
             }
           ),
-          e.description && /* @__PURE__ */ r.jsx(
+          e.description && /* @__PURE__ */ n(
             "span",
             {
               className: "proton-MenuTrigger__description",
@@ -82,20 +82,20 @@ function b({
       e.key
     );
   }
-  return /* @__PURE__ */ r.jsxs(s.Root, { open: x, onOpenChange: t, children: [
-    /* @__PURE__ */ r.jsx(s.Trigger, { asChild: !0, children: _ }),
-    /* @__PURE__ */ r.jsx(s.Portal, { children: /* @__PURE__ */ r.jsxs(
-      s.Content,
+  return /* @__PURE__ */ t(r.Root, { open: g, onOpenChange: i, children: [
+    /* @__PURE__ */ n(r.Trigger, { asChild: !0, children: h }),
+    /* @__PURE__ */ n(r.Portal, { children: /* @__PURE__ */ t(
+      r.Content,
       {
-        className: l("proton-Menu", "proton-MenuTrigger__menu", u),
-        style: c,
+        className: a("proton-Menu", "proton-MenuTrigger__menu", c),
+        style: p,
         children: [
-          d && /* @__PURE__ */ r.jsx(s.Label, { className: "proton-MenuTrigger__menu-header", children: d }),
-          h.map(
-            (m) => p({
+          u && /* @__PURE__ */ n(r.Label, { className: "proton-MenuTrigger__menu-header", children: u }),
+          M.map(
+            (m) => _({
               item: m,
-              disabledKeys: M,
-              onClose: () => t == null ? void 0 : t(!1)
+              disabledKeys: b,
+              onClose: () => i == null ? void 0 : i(!1)
             })
           )
         ]
@@ -103,8 +103,8 @@ function b({
     ) })
   ] });
 }
-b.displayName = "ProtonUIPopoverMenu";
+N.displayName = "ProtonUIPopoverMenu";
 export {
-  b as PopoverMenu
+  N as PopoverMenu
 };
 //# sourceMappingURL=PopoverMenu.es.js.map

package/dist/components/Menu/PopoverMenu.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverMenu.es.js","sources":["../../../src/components/Menu/PopoverMenu.tsx"],"sourcesContent":["import { DropdownMenu as RadixDropdownMenu } from \"radix-ui\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { csx } from \"../../utils/string\";\nimport { ActionMenuAction } from \"../ActionMenu/ActionMenu\";\nimport { ChevronRight as ChevronRightIcon } from \"../Icon\";\n\nimport type { CSSProperties, ReactNode } from \"react\";\n\ntype MenuItemRenderArgs = {\n  item: ActionMenuAction;\n  className: string | undefined;\n  style: CSSProperties | undefined;\n  disabledKeys: string[];\n  onClose: (() => void) | undefined;\n};\n\nexport interface PopoverMenuProps {\n  /** The trigger component */\n  trigger: ReactNode;\n\n  /** Array of menu actions/items to display\n   * - type {@link ActionMenuAction}[]\n   */\n  items: ActionMenuAction[];\n\n  /** Whether the menu is open */\n  isOpen: boolean;\n\n  /** Callback when the menu is opened or closed */\n  onOpenChange: (open: boolean) => void;\n\n  /** The key of the selected item */\n  selectedKey?: string;\n\n  /** Callback when the selection changes */\n  onSelectionChange: (key: string) => void;\n\n  /** The keys of the disabled items */\n  disabledKeys?: string[];\n\n  /** The title of the menu */\n  title?: string;\n}\n\n/**\n * A component that displays a popover menu.\n *\n * API:\n *  - {@link PopoverMenuProps}\n */\nexport function PopoverMenu({\n  trigger,\n  items,\n  isOpen,\n  onOpenChange,\n  selectedKey = \"\",\n  onSelectionChange,\n  disabledKeys = [],\n  title = \"\",\n}: PopoverMenuProps) {\n  const { className: themeClass, style: themeStyle } = useTheme();\n\n  function renderMenuItem(props: MenuItemRenderArgs) {\n    const { item, className, style, disabledKeys, onClose } = props;\n\n    if (item.children && item.children.length > 0) {\n      return (\n        <RadixDropdownMenu.Sub key={item.key}>\n          <RadixDropdownMenu.SubTrigger\n            className={csx(\n              \"proton-Menu__item\",\n              \"proton-MenuTrigger__menu-item\",\n            )}\n          >\n            {item.label}\n            <span className=\"proton-MenuTrigger__chevron\" aria-hidden=\"true\">\n              <ChevronRightIcon size={12} />\n            </span>\n          </RadixDropdownMenu.SubTrigger>\n\n          <RadixDropdownMenu.Portal>\n            <RadixDropdownMenu.SubContent\n              sideOffset={8}\n              data-has-submenu=\"true\"\n              className={csx(\n                \"proton-Menu\",\n                \"proton-MenuTrigger__menu\",\n                themeClass,\n              )}\n              style={themeStyle as CSSProperties}\n            >\n              {item.children.map((child: ActionMenuAction) =>\n                renderMenuItem({\n                  item: child,\n                  className,\n                  style,\n                  disabledKeys,\n                  onClose,\n                }),\n              )}\n            </RadixDropdownMenu.SubContent>\n          </RadixDropdownMenu.Portal>\n        </RadixDropdownMenu.Sub>\n      );\n    } else {\n      return (\n        <RadixDropdownMenu.Item\n          className={csx(\"proton-Menu__item\", \"proton-MenuTrigger__menu-item\")}\n          key={item.key}\n          aria-selected={selectedKey === item.key}\n          disabled={disabledKeys?.includes(item.key)}\n          onSelect={() => {\n            item.onAction?.(item.key);\n            onSelectionChange?.(item.key);\n            onClose?.();\n          }}\n        >\n          <span\n            className=\"proton-MenuTrigger__label\"\n            style={{ gridArea: \"label\" }}\n          >\n            {item.label}\n          </span>\n          {item.description && (\n            <span\n              className=\"proton-MenuTrigger__description\"\n              style={{ gridArea: \"desc\" }}\n            >\n              {item.description}\n            </span>\n          )}\n        </RadixDropdownMenu.Item>\n      );\n    }\n  }\n\n  return (\n    <RadixDropdownMenu.Root open={isOpen} onOpenChange={onOpenChange}>\n      <RadixDropdownMenu.Trigger asChild>{trigger}</RadixDropdownMenu.Trigger>\n      <RadixDropdownMenu.Portal>\n        <RadixDropdownMenu.Content\n          className={csx(\"proton-Menu\", \"proton-MenuTrigger__menu\", themeClass)}\n          style={themeStyle as CSSProperties}\n        >\n          {title && (\n            <RadixDropdownMenu.Label className=\"proton-MenuTrigger__menu-header\">\n              {title}\n            </RadixDropdownMenu.Label>\n          )}\n          {items.map((item) =>\n            renderMenuItem({\n              item,\n              className: themeClass,\n              style: themeStyle as CSSProperties,\n              disabledKeys,\n              onClose: () => onOpenChange?.(false),\n            }),\n          )}\n        </RadixDropdownMenu.Content>\n      </RadixDropdownMenu.Portal>\n    </RadixDropdownMenu.Root>\n  );\n}\n\nPopoverMenu.displayName = \"ProtonUIPopoverMenu\";\n"],"names":["PopoverMenu","trigger","items","isOpen","onOpenChange","selectedKey","onSelectionChange","disabledKeys","title","themeClass","themeStyle","useTheme","renderMenuItem","props","item","onClose","jsxs","RadixDropdownMenu","csx","jsx","ChevronRightIcon","child","_a"],"mappings":"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"}
+{"version":3,"file":"PopoverMenu.es.js","sources":["../../../src/components/Menu/PopoverMenu.tsx"],"sourcesContent":["import { DropdownMenu as RadixDropdownMenu } from \"radix-ui\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { csx } from \"../../utils/string\";\nimport { ActionMenuAction } from \"../ActionMenu/ActionMenu\";\nimport { ChevronRight as ChevronRightIcon } from \"../Icon\";\n\nimport type { CSSProperties, ReactNode } from \"react\";\n\ntype MenuItemRenderArgs = {\n  item: ActionMenuAction;\n  className: string | undefined;\n  style: CSSProperties | undefined;\n  disabledKeys: string[];\n  onClose: (() => void) | undefined;\n};\n\nexport interface PopoverMenuProps {\n  /** The trigger component */\n  trigger: ReactNode;\n\n  /** Array of menu actions/items to display\n   * - type {@link ActionMenuAction}[]\n   */\n  items: ActionMenuAction[];\n\n  /** Whether the menu is open */\n  isOpen: boolean;\n\n  /** Callback when the menu is opened or closed */\n  onOpenChange: (open: boolean) => void;\n\n  /** The key of the selected item */\n  selectedKey?: string;\n\n  /** Callback when the selection changes */\n  onSelectionChange: (key: string) => void;\n\n  /** The keys of the disabled items */\n  disabledKeys?: string[];\n\n  /** The title of the menu */\n  title?: string;\n}\n\n/**\n * A component that displays a popover menu.\n *\n * API:\n *  - {@link PopoverMenuProps}\n */\nexport function PopoverMenu({\n  trigger,\n  items,\n  isOpen,\n  onOpenChange,\n  selectedKey = \"\",\n  onSelectionChange,\n  disabledKeys = [],\n  title = \"\",\n}: PopoverMenuProps) {\n  const { className: themeClass, style: themeStyle } = useTheme();\n\n  function renderMenuItem(props: MenuItemRenderArgs) {\n    const { item, className, style, disabledKeys, onClose } = props;\n\n    if (item.children && item.children.length > 0) {\n      return (\n        <RadixDropdownMenu.Sub key={item.key}>\n          <RadixDropdownMenu.SubTrigger\n            className={csx(\n              \"proton-Menu__item\",\n              \"proton-MenuTrigger__menu-item\",\n            )}\n          >\n            {item.label}\n            <span className=\"proton-MenuTrigger__chevron\" aria-hidden=\"true\">\n              <ChevronRightIcon size={12} />\n            </span>\n          </RadixDropdownMenu.SubTrigger>\n\n          <RadixDropdownMenu.Portal>\n            <RadixDropdownMenu.SubContent\n              sideOffset={8}\n              data-has-submenu=\"true\"\n              className={csx(\n                \"proton-Menu\",\n                \"proton-MenuTrigger__menu\",\n                themeClass,\n              )}\n              style={themeStyle as CSSProperties}\n            >\n              {item.children.map((child: ActionMenuAction) =>\n                renderMenuItem({\n                  item: child,\n                  className,\n                  style,\n                  disabledKeys,\n                  onClose,\n                }),\n              )}\n            </RadixDropdownMenu.SubContent>\n          </RadixDropdownMenu.Portal>\n        </RadixDropdownMenu.Sub>\n      );\n    } else {\n      return (\n        <RadixDropdownMenu.Item\n          className={csx(\"proton-Menu__item\", \"proton-MenuTrigger__menu-item\")}\n          key={item.key}\n          aria-selected={selectedKey === item.key}\n          disabled={disabledKeys?.includes(item.key)}\n          onSelect={() => {\n            item.onAction?.(item.key);\n            onSelectionChange?.(item.key);\n            onClose?.();\n          }}\n        >\n          <span\n            className=\"proton-MenuTrigger__label\"\n            style={{ gridArea: \"label\" }}\n          >\n            {item.label}\n          </span>\n          {item.description && (\n            <span\n              className=\"proton-MenuTrigger__description\"\n              style={{ gridArea: \"desc\" }}\n            >\n              {item.description}\n            </span>\n          )}\n        </RadixDropdownMenu.Item>\n      );\n    }\n  }\n\n  return (\n    <RadixDropdownMenu.Root open={isOpen} onOpenChange={onOpenChange}>\n      <RadixDropdownMenu.Trigger asChild>{trigger}</RadixDropdownMenu.Trigger>\n      <RadixDropdownMenu.Portal>\n        <RadixDropdownMenu.Content\n          className={csx(\"proton-Menu\", \"proton-MenuTrigger__menu\", themeClass)}\n          style={themeStyle as CSSProperties}\n        >\n          {title && (\n            <RadixDropdownMenu.Label className=\"proton-MenuTrigger__menu-header\">\n              {title}\n            </RadixDropdownMenu.Label>\n          )}\n          {items.map((item) =>\n            renderMenuItem({\n              item,\n              className: themeClass,\n              style: themeStyle as CSSProperties,\n              disabledKeys,\n              onClose: () => onOpenChange?.(false),\n            }),\n          )}\n        </RadixDropdownMenu.Content>\n      </RadixDropdownMenu.Portal>\n    </RadixDropdownMenu.Root>\n  );\n}\n\nPopoverMenu.displayName = \"ProtonUIPopoverMenu\";\n"],"names":["PopoverMenu","trigger","items","isOpen","onOpenChange","selectedKey","onSelectionChange","disabledKeys","title","themeClass","themeStyle","useTheme","renderMenuItem","props","item","onClose","jsxs","RadixDropdownMenu","csx","jsx","ChevronRightIcon","child","_a"],"mappings":"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"}

package/dist/components/Modal/Modal.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../../node_modules/react/jsx-runtime.cjs.js"),R=require("react"),E=require("../../hooks/useIsClosing.cjs.js"),_=require("../Button/Button.cjs.js");;/* empty css               */const h=require("../ScreenOverlay/ScreenOverlay.cjs.js");;/* empty css                              */const C=require("../../utils/string.cjs.js"),m=({children:t})=>o.jsxRuntimeExports.jsx("h2",{className:"proton-Modal__title",children:t}),j=({children:t})=>o.jsxRuntimeExports.jsx("h3",{className:"proton-Modal__subtitle",children:t}),p=({children:t})=>o.jsxRuntimeExports.jsx("div",{className:"proton-Modal__body",children:t}),b=t=>o.jsxRuntimeExports.jsx("div",{className:"proton-Modal__action",children:o.jsxRuntimeExports.jsx(_.Button,{...t})}),g=({children:t})=>o.jsxRuntimeExports.jsx("div",{className:"proton-Modal__actions",children:t}),v={medium:"medium",full:"full"},f=({title:t,subtitle:s,body:e,onClose:r,children:l,isClosing:a,isOpen:i,width:n,"data-testid":d})=>o.jsxRuntimeExports.jsxs("div",{"data-testid":d,"data-disable-document-scroll":i,className:C.csx("proton-Modal",n&&`proton-Modal--${n}`,"proton-Elevation--glass",a&&"proton-Modal--closing"),"aria-modal":"true",role:"dialog",tabIndex:-1,children:[o.jsxRuntimeExports.jsx("button",{name:"Close",className:"proton-Modal__close-button",onClick:r,"aria-label":"Close",children:"×"}),t&&o.jsxRuntimeExports.jsx(m,{children:t}),s&&o.jsxRuntimeExports.jsx(j,{children:s}),e&&o.jsxRuntimeExports.jsx(p,{children:e}),o.jsxRuntimeExports.jsx("div",{className:"proton-Modal__content",children:l})]}),q=({isOpen:t,onClose:s,title:e,subtitle:r,body:l,children:a,isOverlay:i=!0,width:n="full","data-testid":d})=>{const u=R.useRef(null),{isClosing:M,handleClose:c}=E.useIsClosing({onClose:s,overlayRef:u});if(!t)return null;const x=o.jsxRuntimeExports.jsx(f,{isOpen:t,title:e,subtitle:r,body:l,onClose:c,isClosing:M,"data-testid":d,width:n,children:a});return i?o.jsxRuntimeExports.jsx(h.ScreenOverlay,{fadeIn:!0,ref:u,onClose:c,children:x}):x},N=Object.assign(q,{Title:m,Subtitle:j,Body:p,Action:b,Actions:g});exports.Modal=N;exports.WidthVariants=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),p=require("react"),h=require("../../hooks/useIsClosing.cjs.js"),C=require("../Button/Button.cjs.js");;/* empty css               */const b=require("../ScreenOverlay/ScreenOverlay.cjs.js");;/* empty css                              */const g=require("../../utils/string.cjs.js"),m=({children:o})=>t.jsx("h2",{className:"proton-Modal__title",children:o}),j=({children:o})=>t.jsx("h3",{className:"proton-Modal__subtitle",children:o}),x=({children:o})=>t.jsx("div",{className:"proton-Modal__body",children:o}),v=o=>t.jsx("div",{className:"proton-Modal__action",children:t.jsx(C.Button,{...o})}),f=({children:o})=>t.jsx("div",{className:"proton-Modal__actions",children:o}),q={medium:"medium",full:"full"},N=({title:o,subtitle:e,body:s,onClose:l,children:a,isClosing:r,isOpen:i,width:n,"data-testid":d})=>t.jsxs("div",{"data-testid":d,"data-disable-document-scroll":i,className:g.csx("proton-Modal",n&&`proton-Modal--${n}`,"proton-Elevation--glass",r&&"proton-Modal--closing"),"aria-modal":"true",role:"dialog",tabIndex:-1,children:[t.jsx("button",{name:"Close",className:"proton-Modal__close-button",onClick:l,"aria-label":"Close",children:"×"}),o&&t.jsx(m,{children:o}),e&&t.jsx(j,{children:e}),s&&t.jsx(x,{children:s}),t.jsx("div",{className:"proton-Modal__content",children:a})]}),y=({isOpen:o,onClose:e,title:s,subtitle:l,body:a,children:r,isOverlay:i=!0,width:n="full","data-testid":d})=>{const c=p.useRef(null),{isClosing:_,handleClose:u}=h.useIsClosing({onClose:e,overlayRef:c});if(!o)return null;const M=t.jsx(N,{isOpen:o,title:s,subtitle:l,body:a,onClose:u,isClosing:_,"data-testid":d,width:n,children:r});return i?t.jsx(b.ScreenOverlay,{fadeIn:!0,ref:c,onClose:u,children:M}):M},S=Object.assign(y,{Title:m,Subtitle:j,Body:x,Action:v,Actions:f});exports.Modal=S;exports.WidthVariants=q;
 //# sourceMappingURL=Modal.cjs.js.map

package/dist/components/Modal/Modal.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.cjs.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode, useRef } from \"react\";\nimport { useIsClosing } from \"../../hooks/useIsClosing\";\nimport { csx } from \"../../utils\";\nimport { Button, ButtonProps } from \"../Button/Button\";\nimport \"./Modal.css\";\nimport { ScreenOverlay } from \"../ScreenOverlay/ScreenOverlay\";\nimport \"../Elevation/Elevation.css\";\n\nconst ModalTitle = ({ children }: { children: ReactNode }) => {\n  return <h2 className=\"proton-Modal__title\">{children}</h2>;\n};\n\nconst ModalSubtitle = ({ children }: { children: ReactNode }) => {\n  return <h3 className=\"proton-Modal__subtitle\">{children}</h3>;\n};\n\nconst ModalBody = ({ children }: { children: ReactNode }) => {\n  return <div className=\"proton-Modal__body\">{children}</div>;\n};\n\nconst ModalAction = (buttonProps: ButtonProps) => {\n  return (\n    <div className=\"proton-Modal__action\">\n      <Button {...buttonProps} />\n    </div>\n  );\n};\n\nconst ModalActions = ({ children }: { children: ReactNode }) => {\n  return <div className=\"proton-Modal__actions\">{children}</div>;\n};\n\n// Different base fonts (10px on the client, 16px on release links) is really setting back development on the kit.\n// Known issue: We should standardize both repos to base font size of 16px... then we can use rems for all sizes.\n// For now lets use a width prop, with a todo: standardize these sizes to represent modal widths across release links / client\n\n/**\n * Width variant for the modal (will be standardized in future release)\n *  - medium: 650px  (standard modal width on client)\n *  - full: 86vw  (default modal width)\n */\nexport type WidthVariant = \"medium\" | \"full\";\n\nexport const WidthVariants: Record<WidthVariant, WidthVariant> = {\n  medium: \"medium\",\n  full: \"full\",\n};\n\nconst ModalContent = ({\n  title,\n  subtitle,\n  body,\n  onClose,\n  children,\n  isClosing,\n  isOpen,\n  width,\n  \"data-testid\": dataTestId,\n}: ModalProps & {\n  isClosing: boolean;\n}) => {\n  return (\n    <div\n      data-testid={dataTestId}\n      data-disable-document-scroll={isOpen}\n      className={csx(\n        \"proton-Modal\",\n        width && `proton-Modal--${width}`,\n        \"proton-Elevation--glass\",\n        isClosing && \"proton-Modal--closing\",\n      )}\n      aria-modal=\"true\"\n      role=\"dialog\"\n      tabIndex={-1}\n    >\n      <button\n        name=\"Close\"\n        className=\"proton-Modal__close-button\"\n        onClick={onClose}\n        aria-label=\"Close\"\n      >\n        ×\n      </button>\n      {title && <ModalTitle>{title}</ModalTitle>}\n      {subtitle && <ModalSubtitle>{subtitle}</ModalSubtitle>}\n      {body && <ModalBody>{body}</ModalBody>}\n      <div className=\"proton-Modal__content\">{children}</div>\n    </div>\n  );\n};\n\nexport interface ModalProps {\n  /**\n   * Optional body text content for the modal\n   * */\n  body?: string;\n  /**\n   * Content to render inside the modal\n   * */\n  children: React.ReactNode;\n  /**\n   * data-testid for the modal\n   * */\n  \"data-testid\"?: string;\n  /**\n   * Controls the visibility of the modal\n   * */\n  isOpen: boolean;\n  /**\n   * Whether to show the modal with an overlay background.\n   * @default true\n   * */\n  isOverlay?: boolean;\n  /**\n   * Callback function when modal is closed\n   * */\n  onClose?: () => void;\n  /**\n   * Optional subtitle text below the modal title\n   * */\n  subtitle?: string;\n  /**\n   * Optional title text for the modal header\n   * */\n  title?: string;\n  /**\n   * Optional width variant for the modal\n   * - type {@link WidthVariant}\n   * @default \"full\"\n   * */\n  width?: WidthVariant;\n}\n\n/**\n * Modal component with overlay support and responsive behavior.\n *\n * API:\n *  - {@link ModalProps}\n */\nconst ModalWrapper = ({\n  isOpen,\n  onClose,\n  title,\n  subtitle,\n  body,\n  children,\n  isOverlay = true,\n  width = \"full\",\n  \"data-testid\": dataTestId,\n}: ModalProps) => {\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const { isClosing, handleClose } = useIsClosing({\n    onClose,\n    overlayRef,\n  });\n\n  if (!isOpen) return null;\n\n  const modalContent = (\n    <ModalContent\n      isOpen={isOpen}\n      title={title}\n      subtitle={subtitle}\n      body={body}\n      onClose={handleClose}\n      isClosing={isClosing}\n      data-testid={dataTestId}\n      width={width}\n    >\n      {children}\n    </ModalContent>\n  );\n\n  return isOverlay ? (\n    <ScreenOverlay fadeIn ref={overlayRef} onClose={handleClose}>\n      {modalContent}\n    </ScreenOverlay>\n  ) : (\n    modalContent\n  );\n};\n\nexport const Modal = Object.assign(ModalWrapper, {\n  /**\n   * Renders a h2 styled title\n   * */\n  Title: ModalTitle,\n  /**\n   * Renders a h3 styled subtitle\n   * */\n  Subtitle: ModalSubtitle,\n  /**\n   * Renders a div styled body\n   * */\n  Body: ModalBody,\n  /**\n   * Renders a Proton Button action\n   * - @prop buttonProps {@link ButtonProps}\n   * */\n  Action: ModalAction,\n  /**\n   * Renders a group of Proton Buttons\n   * */\n  Actions: ModalActions,\n});\n"],"names":["ModalTitle","children","jsx","ModalSubtitle","ModalBody","ModalAction","buttonProps","Button","ModalActions","WidthVariants","ModalContent","title","subtitle","body","onClose","isClosing","isOpen","width","dataTestId","jsxs","csx","ModalWrapper","isOverlay","overlayRef","useRef","handleClose","useIsClosing","modalContent","ScreenOverlay","Modal"],"mappings":"qaAUMA,EAAa,CAAC,CAAE,SAAAC,KACbC,EAAAA,kBAAAA,IAAC,KAAA,CAAG,UAAU,sBAAuB,SAAAD,CAAA,CAAS,EAGjDE,EAAgB,CAAC,CAAE,SAAAF,KAChBC,EAAAA,kBAAAA,IAAC,KAAA,CAAG,UAAU,yBAA0B,SAAAD,CAAA,CAAS,EAGpDG,EAAY,CAAC,CAAE,SAAAH,KACZC,EAAAA,kBAAAA,IAAC,MAAA,CAAI,UAAU,qBAAsB,SAAAD,CAAA,CAAS,EAGjDI,EAAeC,GAEjBJ,wBAAC,OAAI,UAAU,uBACb,iCAACK,SAAA,CAAQ,GAAGD,EAAa,CAAA,CAC3B,EAIEE,EAAe,CAAC,CAAE,SAAAP,KACfC,EAAAA,kBAAAA,IAAC,MAAA,CAAI,UAAU,wBAAyB,SAAAD,CAAA,CAAS,EAc7CQ,EAAoD,CAC/D,OAAQ,SACR,KAAM,MACR,EAEMC,EAAe,CAAC,CACpB,MAAAC,EACA,SAAAC,EACA,KAAAC,EACA,QAAAC,EACA,SAAAb,EACA,UAAAc,EACA,OAAAC,EACA,MAAAC,EACA,cAAeC,CACjB,IAIIC,EAAAA,kBAAAA,KAAC,MAAA,CACC,cAAaD,EACb,+BAA8BF,EAC9B,UAAWI,EAAAA,IACT,eACAH,GAAS,iBAAiBA,CAAK,GAC/B,0BACAF,GAAa,uBAAA,EAEf,aAAW,OACX,KAAK,SACL,SAAU,GAEV,SAAA,CAAAb,EAAAA,kBAAAA,IAAC,SAAA,CACC,KAAK,QACL,UAAU,6BACV,QAASY,EACT,aAAW,QACZ,SAAA,GAAA,CAAA,EAGAH,GAAST,EAAAA,kBAAAA,IAACF,EAAA,CAAY,SAAAW,CAAA,CAAM,EAC5BC,GAAYV,EAAAA,kBAAAA,IAACC,EAAA,CAAe,SAAAS,CAAA,CAAS,EACrCC,GAAQX,EAAAA,kBAAAA,IAACE,EAAA,CAAW,SAAAS,CAAA,CAAK,EAC1BX,EAAAA,kBAAAA,IAAC,MAAA,CAAI,UAAU,wBAAyB,SAAAD,CAAA,CAAS,CAAA,CAAA,CAAA,EAqDjDoB,EAAe,CAAC,CACpB,OAAAL,EACA,QAAAF,EACA,MAAAH,EACA,SAAAC,EACA,KAAAC,EACA,SAAAZ,EACA,UAAAqB,EAAY,GACZ,MAAAL,EAAQ,OACR,cAAeC,CACjB,IAAkB,CAChB,MAAMK,EAAaC,EAAAA,OAAuB,IAAI,EACxC,CAAE,UAAAT,EAAW,YAAAU,CAAA,EAAgBC,eAAa,CAC9C,QAAAZ,EACA,WAAAS,CAAA,CACD,EAED,GAAI,CAACP,EAAQ,OAAO,KAEpB,MAAMW,EACJzB,EAAAA,kBAAAA,IAACQ,EAAA,CACC,OAAAM,EACA,MAAAL,EACA,SAAAC,EACA,KAAAC,EACA,QAASY,EACT,UAAAV,EACA,cAAaG,EACb,MAAAD,EAEC,SAAAhB,CAAA,CAAA,EAIL,OAAOqB,EACLpB,EAAAA,kBAAAA,IAAC0B,EAAAA,cAAA,CAAc,OAAM,GAAC,IAAKL,EAAY,QAASE,EAC7C,SAAAE,CAAA,CACH,EAEAA,CAEJ,EAEaE,EAAQ,OAAO,OAAOR,EAAc,CAI/C,MAAOrB,EAIP,SAAUG,EAIV,KAAMC,EAKN,OAAQC,EAIR,QAASG,CACX,CAAC"}
+{"version":3,"file":"Modal.cjs.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode, useRef } from \"react\";\nimport { useIsClosing } from \"../../hooks/useIsClosing\";\nimport { csx } from \"../../utils\";\nimport { Button, ButtonProps } from \"../Button/Button\";\nimport \"./Modal.css\";\nimport { ScreenOverlay } from \"../ScreenOverlay/ScreenOverlay\";\nimport \"../Elevation/Elevation.css\";\n\nconst ModalTitle = ({ children }: { children: ReactNode }) => {\n  return <h2 className=\"proton-Modal__title\">{children}</h2>;\n};\n\nconst ModalSubtitle = ({ children }: { children: ReactNode }) => {\n  return <h3 className=\"proton-Modal__subtitle\">{children}</h3>;\n};\n\nconst ModalBody = ({ children }: { children: ReactNode }) => {\n  return <div className=\"proton-Modal__body\">{children}</div>;\n};\n\nconst ModalAction = (buttonProps: ButtonProps) => {\n  return (\n    <div className=\"proton-Modal__action\">\n      <Button {...buttonProps} />\n    </div>\n  );\n};\n\nconst ModalActions = ({ children }: { children: ReactNode }) => {\n  return <div className=\"proton-Modal__actions\">{children}</div>;\n};\n\n// Different base fonts (10px on the client, 16px on release links) is really setting back development on the kit.\n// Known issue: We should standardize both repos to base font size of 16px... then we can use rems for all sizes.\n// For now lets use a width prop, with a todo: standardize these sizes to represent modal widths across release links / client\n\n/**\n * Width variant for the modal (will be standardized in future release)\n *  - medium: 650px  (standard modal width on client)\n *  - full: 86vw  (default modal width)\n */\nexport type WidthVariant = \"medium\" | \"full\";\n\nexport const WidthVariants: Record<WidthVariant, WidthVariant> = {\n  medium: \"medium\",\n  full: \"full\",\n};\n\nconst ModalContent = ({\n  title,\n  subtitle,\n  body,\n  onClose,\n  children,\n  isClosing,\n  isOpen,\n  width,\n  \"data-testid\": dataTestId,\n}: ModalProps & {\n  isClosing: boolean;\n}) => {\n  return (\n    <div\n      data-testid={dataTestId}\n      data-disable-document-scroll={isOpen}\n      className={csx(\n        \"proton-Modal\",\n        width && `proton-Modal--${width}`,\n        \"proton-Elevation--glass\",\n        isClosing && \"proton-Modal--closing\",\n      )}\n      aria-modal=\"true\"\n      role=\"dialog\"\n      tabIndex={-1}\n    >\n      <button\n        name=\"Close\"\n        className=\"proton-Modal__close-button\"\n        onClick={onClose}\n        aria-label=\"Close\"\n      >\n        ×\n      </button>\n      {title && <ModalTitle>{title}</ModalTitle>}\n      {subtitle && <ModalSubtitle>{subtitle}</ModalSubtitle>}\n      {body && <ModalBody>{body}</ModalBody>}\n      <div className=\"proton-Modal__content\">{children}</div>\n    </div>\n  );\n};\n\nexport interface ModalProps {\n  /**\n   * Optional body text content for the modal\n   * */\n  body?: string;\n  /**\n   * Content to render inside the modal\n   * */\n  children: React.ReactNode;\n  /**\n   * data-testid for the modal\n   * */\n  \"data-testid\"?: string;\n  /**\n   * Controls the visibility of the modal\n   * */\n  isOpen: boolean;\n  /**\n   * Whether to show the modal with an overlay background.\n   * @default true\n   * */\n  isOverlay?: boolean;\n  /**\n   * Callback function when modal is closed\n   * */\n  onClose?: () => void;\n  /**\n   * Optional subtitle text below the modal title\n   * */\n  subtitle?: string;\n  /**\n   * Optional title text for the modal header\n   * */\n  title?: string;\n  /**\n   * Optional width variant for the modal\n   * - type {@link WidthVariant}\n   * @default \"full\"\n   * */\n  width?: WidthVariant;\n}\n\n/**\n * Modal component with overlay support and responsive behavior.\n *\n * API:\n *  - {@link ModalProps}\n */\nconst ModalWrapper = ({\n  isOpen,\n  onClose,\n  title,\n  subtitle,\n  body,\n  children,\n  isOverlay = true,\n  width = \"full\",\n  \"data-testid\": dataTestId,\n}: ModalProps) => {\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const { isClosing, handleClose } = useIsClosing({\n    onClose,\n    overlayRef,\n  });\n\n  if (!isOpen) return null;\n\n  const modalContent = (\n    <ModalContent\n      isOpen={isOpen}\n      title={title}\n      subtitle={subtitle}\n      body={body}\n      onClose={handleClose}\n      isClosing={isClosing}\n      data-testid={dataTestId}\n      width={width}\n    >\n      {children}\n    </ModalContent>\n  );\n\n  return isOverlay ? (\n    <ScreenOverlay fadeIn ref={overlayRef} onClose={handleClose}>\n      {modalContent}\n    </ScreenOverlay>\n  ) : (\n    modalContent\n  );\n};\n\nexport const Modal = Object.assign(ModalWrapper, {\n  /**\n   * Renders a h2 styled title\n   * */\n  Title: ModalTitle,\n  /**\n   * Renders a h3 styled subtitle\n   * */\n  Subtitle: ModalSubtitle,\n  /**\n   * Renders a div styled body\n   * */\n  Body: ModalBody,\n  /**\n   * Renders a Proton Button action\n   * - @prop buttonProps {@link ButtonProps}\n   * */\n  Action: ModalAction,\n  /**\n   * Renders a group of Proton Buttons\n   * */\n  Actions: ModalActions,\n});\n"],"names":["ModalTitle","children","jsx","ModalSubtitle","ModalBody","ModalAction","buttonProps","Button","ModalActions","WidthVariants","ModalContent","title","subtitle","body","onClose","isClosing","isOpen","width","dataTestId","jsxs","csx","ModalWrapper","isOverlay","overlayRef","useRef","handleClose","useIsClosing","modalContent","ScreenOverlay","Modal"],"mappings":"2YAUMA,EAAa,CAAC,CAAE,SAAAC,KACbC,EAAAA,IAAC,KAAA,CAAG,UAAU,sBAAuB,SAAAD,CAAA,CAAS,EAGjDE,EAAgB,CAAC,CAAE,SAAAF,KAChBC,EAAAA,IAAC,KAAA,CAAG,UAAU,yBAA0B,SAAAD,CAAA,CAAS,EAGpDG,EAAY,CAAC,CAAE,SAAAH,KACZC,EAAAA,IAAC,MAAA,CAAI,UAAU,qBAAsB,SAAAD,CAAA,CAAS,EAGjDI,EAAeC,GAEjBJ,MAAC,OAAI,UAAU,uBACb,eAACK,SAAA,CAAQ,GAAGD,EAAa,CAAA,CAC3B,EAIEE,EAAe,CAAC,CAAE,SAAAP,KACfC,EAAAA,IAAC,MAAA,CAAI,UAAU,wBAAyB,SAAAD,CAAA,CAAS,EAc7CQ,EAAoD,CAC/D,OAAQ,SACR,KAAM,MACR,EAEMC,EAAe,CAAC,CACpB,MAAAC,EACA,SAAAC,EACA,KAAAC,EACA,QAAAC,EACA,SAAAb,EACA,UAAAc,EACA,OAAAC,EACA,MAAAC,EACA,cAAeC,CACjB,IAIIC,EAAAA,KAAC,MAAA,CACC,cAAaD,EACb,+BAA8BF,EAC9B,UAAWI,EAAAA,IACT,eACAH,GAAS,iBAAiBA,CAAK,GAC/B,0BACAF,GAAa,uBAAA,EAEf,aAAW,OACX,KAAK,SACL,SAAU,GAEV,SAAA,CAAAb,EAAAA,IAAC,SAAA,CACC,KAAK,QACL,UAAU,6BACV,QAASY,EACT,aAAW,QACZ,SAAA,GAAA,CAAA,EAGAH,GAAST,EAAAA,IAACF,EAAA,CAAY,SAAAW,CAAA,CAAM,EAC5BC,GAAYV,EAAAA,IAACC,EAAA,CAAe,SAAAS,CAAA,CAAS,EACrCC,GAAQX,EAAAA,IAACE,EAAA,CAAW,SAAAS,CAAA,CAAK,EAC1BX,EAAAA,IAAC,MAAA,CAAI,UAAU,wBAAyB,SAAAD,CAAA,CAAS,CAAA,CAAA,CAAA,EAqDjDoB,EAAe,CAAC,CACpB,OAAAL,EACA,QAAAF,EACA,MAAAH,EACA,SAAAC,EACA,KAAAC,EACA,SAAAZ,EACA,UAAAqB,EAAY,GACZ,MAAAL,EAAQ,OACR,cAAeC,CACjB,IAAkB,CAChB,MAAMK,EAAaC,EAAAA,OAAuB,IAAI,EACxC,CAAE,UAAAT,EAAW,YAAAU,CAAA,EAAgBC,eAAa,CAC9C,QAAAZ,EACA,WAAAS,CAAA,CACD,EAED,GAAI,CAACP,EAAQ,OAAO,KAEpB,MAAMW,EACJzB,EAAAA,IAACQ,EAAA,CACC,OAAAM,EACA,MAAAL,EACA,SAAAC,EACA,KAAAC,EACA,QAASY,EACT,UAAAV,EACA,cAAaG,EACb,MAAAD,EAEC,SAAAhB,CAAA,CAAA,EAIL,OAAOqB,EACLpB,EAAAA,IAAC0B,EAAAA,cAAA,CAAc,OAAM,GAAC,IAAKL,EAAY,QAASE,EAC7C,SAAAE,CAAA,CACH,EAEAA,CAEJ,EAEaE,EAAQ,OAAO,OAAOR,EAAc,CAI/C,MAAOrB,EAIP,SAAUG,EAIV,KAAMC,EAKN,OAAQC,EAIR,QAASG,CACX,CAAC"}