@protonradio/proton-ui 0.11.34 → 0.12.1

package/dist/components/Popover/Popover.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../node_modules/react/jsx-runtime.cjs.js"),r=require("radix-ui");;/* empty css                 */const P=require("../ThemeProvider.cjs.js"),f=require("../../utils/string.cjs.js");function s({trigger:i,children:n,open:a,isDisabled:t=!1,defaultOpen:x,onOpenChange:o,side:l="top",align:u="center",arrow:c=!1,constrainWidth:p=!1,"data-testid":d}){const{className:m,style:j}=P.useTheme();return e.jsxRuntimeExports.jsxs(r.Popover.Root,{open:t?!1:a,defaultOpen:x,onOpenChange:v=>{t||o==null||o(v)},children:[e.jsxRuntimeExports.jsx(r.Popover.Trigger,{asChild:!0,children:e.jsxRuntimeExports.jsx("div",{"aria-disabled":t,children:i})}),!t&&e.jsxRuntimeExports.jsx(r.Popover.Portal,{children:e.jsxRuntimeExports.jsxs(r.Popover.Content,{side:l,sideOffset:2,align:u,style:j,className:f.csx("proton-Popover",p&&"proton-Popover__constrained",m),"data-testid":d,children:[c&&e.jsxRuntimeExports.jsx(r.Popover.Arrow,{className:"arrow"}),n]})})]})}s.displayName="Popover";exports.Popover=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../node_modules/react/jsx-runtime.cjs.js"),r=require("radix-ui"),h=require("../ThemeProvider.cjs.js"),P=require("../../utils/string.cjs.js"),R=require("../Overlay/Overlay.cjs.js");;/* empty css                              */;/* empty css                 */function s({trigger:i,children:n,open:x,isDisabled:t=!1,defaultOpen:l,onOpenChange:o,side:u="top",align:a="center",arrow:p=!1,constrainWidth:d=!1,"data-testid":c}){const{className:j,style:m}=h.useTheme();return e.jsxRuntimeExports.jsxs(r.Popover.Root,{open:t?!1:x,defaultOpen:l,onOpenChange:v=>{t||o==null||o(v)},children:[e.jsxRuntimeExports.jsx(r.Popover.Trigger,{asChild:!0,children:e.jsxRuntimeExports.jsx("div",{"aria-disabled":t,children:i})}),!t&&e.jsxRuntimeExports.jsx(r.Popover.Portal,{children:e.jsxRuntimeExports.jsx(r.Popover.Content,{side:u,sideOffset:2,align:a,style:m,className:P.csx("proton-Popover","proton-Elevation--glass",d&&"proton-Popover__constrained",j),"data-testid":c,children:e.jsxRuntimeExports.jsx(R.Overlay,{arrow:p&&e.jsxRuntimeExports.jsx(r.Popover.Arrow,{width:8,height:8,children:e.jsxRuntimeExports.jsx("svg",{width:8,height:8,viewBox:"0 0 8 8",children:e.jsxRuntimeExports.jsx("path",{d:"M0 0 L4 4 L8 0"})})}),children:n})})})]})}s.displayName="ProtonUIPopover";exports.Popover=s;
 //# sourceMappingURL=Popover.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.cjs.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["\"use client\";\n\nimport { Popover as RadixPopover } from \"radix-ui\";\nimport React, { CSSProperties } from \"react\";\nimport \"./Popover.css\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { csx } from \"../../utils/string\";\n\nexport type PopoverSide = \"top\" | \"right\" | \"bottom\" | \"left\";\nexport type PopoverAlign = \"start\" | \"center\" | \"end\";\n\nexport interface PopoverProps {\n  /**\n   * Popover alignment\n   * {@link PopoverAlign}\n   */\n  align?: PopoverAlign;\n  /**\n   * Show an arrow pointing to the trigger.\n   */\n  arrow?: boolean;\n  /**\n   * The content of the popover.\n   */\n  children: React.ReactNode;\n  /**\n   * Constrain the width of the popover to the width of the trigger.\n   */\n  constrainWidth?: boolean;\n  /**\n   * Default open state (uncontrolled mode).\n   */\n  defaultOpen?: boolean;\n  /**\n   * Test id for the popover content.\n   */\n  \"data-testid\"?: string;\n  /**\n   * Control open state (controlled mode).\n   */\n  open?: boolean;\n  /**\n   * Whether the popover is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Callback when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The trigger element for the popover.\n   */\n  trigger: React.ReactNode;\n  /**\n   * Popover side placement\n   * {@link PopoverSide}\n   */\n  side?: PopoverSide;\n}\n\n/**\n * A popover component that handles positioning and supports controlled and uncontrolled modes.\n *\n * A popover displays interactive content in context with a trigger element.\n * A tooltip displays a description of an element on hover or focus.\n *\n * API:\n *  - {@link PopoverProps}\n */\nexport function Popover({\n  trigger,\n  children,\n  open,\n  isDisabled = false,\n  defaultOpen,\n  onOpenChange,\n  side = \"top\",\n  align = \"center\",\n  arrow = false,\n  constrainWidth = false,\n  \"data-testid\": testId,\n}: PopoverProps) {\n  const { className: themeClass, style: themeStyle } = useTheme();\n\n  return (\n    <RadixPopover.Root\n      open={isDisabled ? false : open}\n      defaultOpen={defaultOpen}\n      onOpenChange={(newOpen) => {\n        if (isDisabled) return;\n        onOpenChange?.(newOpen);\n      }}\n    >\n      <RadixPopover.Trigger asChild>\n        <div aria-disabled={isDisabled}>{trigger}</div>\n      </RadixPopover.Trigger>\n\n      {!isDisabled && (\n        <RadixPopover.Portal>\n          <RadixPopover.Content\n            side={side}\n            sideOffset={2}\n            align={align}\n            style={themeStyle as CSSProperties}\n            className={csx(\n              \"proton-Popover\",\n              constrainWidth && \"proton-Popover__constrained\",\n              themeClass,\n            )}\n            data-testid={testId}\n          >\n            {arrow && <RadixPopover.Arrow className=\"arrow\" />}\n            {children}\n          </RadixPopover.Content>\n        </RadixPopover.Portal>\n      )}\n    </RadixPopover.Root>\n  );\n}\n\nPopover.displayName = \"Popover\";\n"],"names":["Popover","trigger","children","open","isDisabled","defaultOpen","onOpenChange","side","align","arrow","constrainWidth","testId","themeClass","themeStyle","useTheme","jsxs","RadixPopover","newOpen","jsx","csx"],"mappings":"uRAsEO,SAASA,EAAQ,CACtB,QAAAC,EACA,SAAAC,EACA,KAAAC,EACA,WAAAC,EAAa,GACb,YAAAC,EACA,aAAAC,EACA,KAAAC,EAAO,MACP,MAAAC,EAAQ,SACR,MAAAC,EAAQ,GACR,eAAAC,EAAiB,GACjB,cAAeC,CACjB,EAAiB,CACf,KAAM,CAAE,UAAWC,EAAY,MAAOC,CAAA,EAAeC,EAAAA,WAGnD,OAAAC,EAAA,kBAAA,KAACC,EAAAA,QAAa,KAAb,CACC,KAAMZ,EAAa,GAAQD,EAC3B,YAAAE,EACA,aAAeY,GAAY,CACrBb,GACJE,GAAA,MAAAA,EAAeW,EACjB,EAEA,SAAA,CAACC,EAAA,kBAAA,IAAAF,EAAA,QAAa,QAAb,CAAqB,QAAO,GAC3B,iCAAC,MAAI,CAAA,gBAAeZ,EAAa,SAAAH,CAAA,CAAQ,CAC3C,CAAA,EAEC,CAACG,GACCc,EAAAA,kBAAAA,IAAAF,EAAAA,QAAa,OAAb,CACC,SAAAD,EAAA,kBAAA,KAACC,EAAAA,QAAa,QAAb,CACC,KAAAT,EACA,WAAY,EACZ,MAAAC,EACA,MAAOK,EACP,UAAWM,EAAA,IACT,iBACAT,GAAkB,8BAClBE,CACF,EACA,cAAaD,EAEZ,SAAA,CAAAF,GAAUS,EAAA,kBAAA,IAAAF,EAAA,QAAa,MAAb,CAAmB,UAAU,QAAQ,EAC/Cd,CAAA,CAAA,CAAA,EAEL,CAAA,CAAA,CAAA,CAIR,CAEAF,EAAQ,YAAc"}
+{"version":3,"file":"Popover.cjs.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["\"use client\";\n\nimport { Popover as RadixPopover } from \"radix-ui\";\nimport { CSSProperties, ReactNode } from \"react\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { csx } from \"../../utils/string\";\nimport type { RadixAlign, RadixSide } from \"../../constants/placement\";\nimport { Overlay } from \"../Overlay/Overlay\";\n\nimport \"../Elevation/Elevation.css\";\nimport \"./Popover.css\";\n\n/** Radix `Popover.Content` `side` */\nexport type PopoverSide = RadixSide;\n/** Radix `Popover.Content` `align`*/\nexport type PopoverAlign = RadixAlign;\n\nexport interface PopoverProps {\n  /**\n   * Popover alignment\n   * {@link PopoverAlign}\n   * @default \"center\"\n   */\n  align?: PopoverAlign;\n  /**\n   * Show an arrow pointing to the trigger.\n   * @default false\n   */\n  arrow?: boolean;\n  /**\n   * The content of the popover.\n   */\n  children: ReactNode;\n  /**\n   * Constrain the width of the popover to the width of the trigger.\n   */\n  constrainWidth?: boolean;\n  /**\n   * Default open state (uncontrolled mode).\n   */\n  defaultOpen?: boolean;\n  /**\n   * Test id for the popover content.\n   */\n  \"data-testid\"?: string;\n  /**\n   * Control open state (controlled mode).\n   */\n  open?: boolean;\n  /**\n   * Whether the popover is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Callback when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The trigger element for the popover.\n   */\n  trigger: ReactNode;\n  /**\n   * Popover side placement\n   * {@link PopoverSide}\n   * @default \"top\"\n   */\n  side?: PopoverSide;\n}\n\n/**\n * A popover component that handles positioning and supports controlled and uncontrolled modes.\n *\n * A popover displays interactive content in context with a trigger element.\n * A tooltip displays a description of an element on hover or focus.\n *\n * API:\n *  - {@link PopoverProps}\n */\nexport function Popover({\n  trigger,\n  children,\n  open,\n  isDisabled = false,\n  defaultOpen,\n  onOpenChange,\n  side = \"top\",\n  align = \"center\",\n  arrow = false,\n  constrainWidth = false,\n  \"data-testid\": testId,\n}: PopoverProps) {\n  const { className: themeClass, style: themeStyle } = useTheme();\n\n  return (\n    <RadixPopover.Root\n      open={isDisabled ? false : open}\n      defaultOpen={defaultOpen}\n      onOpenChange={(newOpen) => {\n        if (isDisabled) return;\n        onOpenChange?.(newOpen);\n      }}\n    >\n      <RadixPopover.Trigger asChild>\n        <div aria-disabled={isDisabled}>{trigger}</div>\n      </RadixPopover.Trigger>\n\n      {!isDisabled && (\n        <RadixPopover.Portal>\n          <RadixPopover.Content\n            side={side}\n            sideOffset={2}\n            align={align}\n            style={themeStyle as CSSProperties}\n            className={csx(\n              \"proton-Popover\",\n              \"proton-Elevation--glass\",\n              constrainWidth && \"proton-Popover__constrained\",\n              themeClass,\n            )}\n            data-testid={testId}\n          >\n            <Overlay\n              arrow={\n                arrow && (\n                  <RadixPopover.Arrow width={8} height={8}>\n                    <svg width={8} height={8} viewBox=\"0 0 8 8\">\n                      <path d=\"M0 0 L4 4 L8 0\" />\n                    </svg>\n                  </RadixPopover.Arrow>\n                )\n              }\n            >\n              {children}\n            </Overlay>\n          </RadixPopover.Content>\n        </RadixPopover.Portal>\n      )}\n    </RadixPopover.Root>\n  );\n}\n\nPopover.displayName = \"ProtonUIPopover\";\n"],"names":["Popover","trigger","children","open","isDisabled","defaultOpen","onOpenChange","side","align","arrow","constrainWidth","testId","themeClass","themeStyle","useTheme","jsxs","RadixPopover","newOpen","jsx","csx","Overlay"],"mappings":"qWA+EO,SAASA,EAAQ,CACtB,QAAAC,EACA,SAAAC,EACA,KAAAC,EACA,WAAAC,EAAa,GACb,YAAAC,EACA,aAAAC,EACA,KAAAC,EAAO,MACP,MAAAC,EAAQ,SACR,MAAAC,EAAQ,GACR,eAAAC,EAAiB,GACjB,cAAeC,CACjB,EAAiB,CACf,KAAM,CAAE,UAAWC,EAAY,MAAOC,CAAA,EAAeC,EAAAA,SAAA,EAErD,OACEC,EAAAA,kBAAAA,KAACC,EAAAA,QAAa,KAAb,CACC,KAAMZ,EAAa,GAAQD,EAC3B,YAAAE,EACA,aAAeY,GAAY,CACrBb,GACJE,GAAA,MAAAA,EAAeW,EACjB,EAEA,SAAA,CAAAC,EAAAA,kBAAAA,IAACF,EAAAA,QAAa,QAAb,CAAqB,QAAO,GAC3B,iCAAC,MAAA,CAAI,gBAAeZ,EAAa,SAAAH,CAAA,CAAQ,CAAA,CAC3C,EAEC,CAACG,GACAc,EAAAA,kBAAAA,IAACF,EAAAA,QAAa,OAAb,CACC,SAAAE,EAAAA,kBAAAA,IAACF,EAAAA,QAAa,QAAb,CACC,KAAAT,EACA,WAAY,EACZ,MAAAC,EACA,MAAOK,EACP,UAAWM,EAAAA,IACT,iBACA,0BACAT,GAAkB,8BAClBE,CAAA,EAEF,cAAaD,EAEb,SAAAO,EAAAA,kBAAAA,IAACE,EAAAA,QAAA,CACC,MACEX,GACES,EAAAA,kBAAAA,IAACF,EAAAA,QAAa,MAAb,CAAmB,MAAO,EAAG,OAAQ,EACpC,SAAAE,EAAAA,kBAAAA,IAAC,OAAI,MAAO,EAAG,OAAQ,EAAG,QAAQ,UAChC,iCAAC,OAAA,CAAK,EAAE,gBAAA,CAAiB,CAAA,CAC3B,CAAA,CACF,EAIH,SAAAhB,CAAA,CAAA,CACH,CAAA,CACF,CACF,CAAA,CAAA,CAAA,CAIR,CAEAF,EAAQ,YAAc"}

package/dist/components/Popover/Popover.es.js

@@ -1,57 +1,63 @@
 import { j as r } from "../../node_modules/react/jsx-runtime.es.js";
-import { Popover as e } from "radix-ui";
+import { Popover as o } from "radix-ui";
+import { useTheme as j } from "../ThemeProvider.es.js";
+import { csx as v } from "../../utils/string.es.js";
+import { Overlay as P } from "../Overlay/Overlay.es.js";
+/* empty css                            */
 /* empty css               */
-import { useTheme as v } from "../ThemeProvider.es.js";
-import { csx as P } from "../../utils/string.es.js";
-function h({
+function u({
   trigger: s,
-  children: a,
-  open: i,
-  isDisabled: o = !1,
+  children: i,
+  open: a,
+  isDisabled: t = !1,
   defaultOpen: l,
-  onOpenChange: t,
+  onOpenChange: e,
   side: m = "top",
   align: p = "center",
-  arrow: c = !1,
-  constrainWidth: d = !1,
-  "data-testid": f
+  arrow: d = !1,
+  constrainWidth: h = !1,
+  "data-testid": n
 }) {
-  const { className: n, style: x } = v();
+  const { className: c, style: x } = j();
   return /* @__PURE__ */ r.jsxs(
-    e.Root,
+    o.Root,
     {
-      open: o ? !1 : i,
+      open: t ? !1 : a,
       defaultOpen: l,
-      onOpenChange: (j) => {
-        o || t == null || t(j);
+      onOpenChange: (f) => {
+        t || e == null || e(f);
       },
       children: [
-        /* @__PURE__ */ r.jsx(e.Trigger, { asChild: !0, children: /* @__PURE__ */ r.jsx("div", { "aria-disabled": o, children: s }) }),
-        !o && /* @__PURE__ */ r.jsx(e.Portal, { children: /* @__PURE__ */ r.jsxs(
-          e.Content,
+        /* @__PURE__ */ r.jsx(o.Trigger, { asChild: !0, children: /* @__PURE__ */ r.jsx("div", { "aria-disabled": t, children: s }) }),
+        !t && /* @__PURE__ */ r.jsx(o.Portal, { children: /* @__PURE__ */ r.jsx(
+          o.Content,
           {
             side: m,
             sideOffset: 2,
             align: p,
             style: x,
-            className: P(
+            className: v(
               "proton-Popover",
-              d && "proton-Popover__constrained",
-              n
+              "proton-Elevation--glass",
+              h && "proton-Popover__constrained",
+              c
             ),
-            "data-testid": f,
-            children: [
-              c && /* @__PURE__ */ r.jsx(e.Arrow, { className: "arrow" }),
-              a
-            ]
+            "data-testid": n,
+            children: /* @__PURE__ */ r.jsx(
+              P,
+              {
+                arrow: d && /* @__PURE__ */ r.jsx(o.Arrow, { width: 8, height: 8, children: /* @__PURE__ */ r.jsx("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ r.jsx("path", { d: "M0 0 L4 4 L8 0" }) }) }),
+                children: i
+              }
+            )
           }
         ) })
       ]
     }
   );
 }
-h.displayName = "Popover";
+u.displayName = "ProtonUIPopover";
 export {
-  h as Popover
+  u as Popover
 };
 //# sourceMappingURL=Popover.es.js.map

package/dist/components/Popover/Popover.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.es.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["\"use client\";\n\nimport { Popover as RadixPopover } from \"radix-ui\";\nimport React, { CSSProperties } from \"react\";\nimport \"./Popover.css\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { csx } from \"../../utils/string\";\n\nexport type PopoverSide = \"top\" | \"right\" | \"bottom\" | \"left\";\nexport type PopoverAlign = \"start\" | \"center\" | \"end\";\n\nexport interface PopoverProps {\n  /**\n   * Popover alignment\n   * {@link PopoverAlign}\n   */\n  align?: PopoverAlign;\n  /**\n   * Show an arrow pointing to the trigger.\n   */\n  arrow?: boolean;\n  /**\n   * The content of the popover.\n   */\n  children: React.ReactNode;\n  /**\n   * Constrain the width of the popover to the width of the trigger.\n   */\n  constrainWidth?: boolean;\n  /**\n   * Default open state (uncontrolled mode).\n   */\n  defaultOpen?: boolean;\n  /**\n   * Test id for the popover content.\n   */\n  \"data-testid\"?: string;\n  /**\n   * Control open state (controlled mode).\n   */\n  open?: boolean;\n  /**\n   * Whether the popover is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Callback when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The trigger element for the popover.\n   */\n  trigger: React.ReactNode;\n  /**\n   * Popover side placement\n   * {@link PopoverSide}\n   */\n  side?: PopoverSide;\n}\n\n/**\n * A popover component that handles positioning and supports controlled and uncontrolled modes.\n *\n * A popover displays interactive content in context with a trigger element.\n * A tooltip displays a description of an element on hover or focus.\n *\n * API:\n *  - {@link PopoverProps}\n */\nexport function Popover({\n  trigger,\n  children,\n  open,\n  isDisabled = false,\n  defaultOpen,\n  onOpenChange,\n  side = \"top\",\n  align = \"center\",\n  arrow = false,\n  constrainWidth = false,\n  \"data-testid\": testId,\n}: PopoverProps) {\n  const { className: themeClass, style: themeStyle } = useTheme();\n\n  return (\n    <RadixPopover.Root\n      open={isDisabled ? false : open}\n      defaultOpen={defaultOpen}\n      onOpenChange={(newOpen) => {\n        if (isDisabled) return;\n        onOpenChange?.(newOpen);\n      }}\n    >\n      <RadixPopover.Trigger asChild>\n        <div aria-disabled={isDisabled}>{trigger}</div>\n      </RadixPopover.Trigger>\n\n      {!isDisabled && (\n        <RadixPopover.Portal>\n          <RadixPopover.Content\n            side={side}\n            sideOffset={2}\n            align={align}\n            style={themeStyle as CSSProperties}\n            className={csx(\n              \"proton-Popover\",\n              constrainWidth && \"proton-Popover__constrained\",\n              themeClass,\n            )}\n            data-testid={testId}\n          >\n            {arrow && <RadixPopover.Arrow className=\"arrow\" />}\n            {children}\n          </RadixPopover.Content>\n        </RadixPopover.Portal>\n      )}\n    </RadixPopover.Root>\n  );\n}\n\nPopover.displayName = \"Popover\";\n"],"names":["Popover","trigger","children","open","isDisabled","defaultOpen","onOpenChange","side","align","arrow","constrainWidth","testId","themeClass","themeStyle","useTheme","jsxs","RadixPopover","newOpen","jsx","csx"],"mappings":";;;;;AAsEO,SAASA,EAAQ;AAAA,EACtB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,OAAAC,IAAQ;AAAA,EACR,gBAAAC,IAAiB;AAAA,EACjB,eAAeC;AACjB,GAAiB;AACf,QAAM,EAAE,WAAWC,GAAY,OAAOC,EAAA,IAAeC;AAGnD,SAAAC,gBAAAA,EAAA;AAAA,IAACC,EAAa;AAAA,IAAb;AAAA,MACC,MAAMZ,IAAa,KAAQD;AAAA,MAC3B,aAAAE;AAAA,MACA,cAAc,CAACY,MAAY;AACzB,QAAIb,KACJE,KAAA,QAAAA,EAAeW;AAAA,MACjB;AAAA,MAEA,UAAA;AAAA,QAACC,gBAAAA,EAAA,IAAAF,EAAa,SAAb,EAAqB,SAAO,IAC3B,gCAAC,OAAI,EAAA,iBAAeZ,GAAa,UAAAH,EAAA,CAAQ,EAC3C,CAAA;AAAA,QAEC,CAACG,KACCc,gBAAAA,EAAAA,IAAAF,EAAa,QAAb,EACC,UAAAD,gBAAAA,EAAA;AAAA,UAACC,EAAa;AAAA,UAAb;AAAA,YACC,MAAAT;AAAA,YACA,YAAY;AAAA,YACZ,OAAAC;AAAA,YACA,OAAOK;AAAA,YACP,WAAWM;AAAA,cACT;AAAA,cACAT,KAAkB;AAAA,cAClBE;AAAA,YACF;AAAA,YACA,eAAaD;AAAA,YAEZ,UAAA;AAAA,cAAAF,KAAUS,gBAAAA,EAAA,IAAAF,EAAa,OAAb,EAAmB,WAAU,SAAQ;AAAA,cAC/Cd;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,GAEL;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;AAEAF,EAAQ,cAAc;"}
+{"version":3,"file":"Popover.es.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["\"use client\";\n\nimport { Popover as RadixPopover } from \"radix-ui\";\nimport { CSSProperties, ReactNode } from \"react\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { csx } from \"../../utils/string\";\nimport type { RadixAlign, RadixSide } from \"../../constants/placement\";\nimport { Overlay } from \"../Overlay/Overlay\";\n\nimport \"../Elevation/Elevation.css\";\nimport \"./Popover.css\";\n\n/** Radix `Popover.Content` `side` */\nexport type PopoverSide = RadixSide;\n/** Radix `Popover.Content` `align`*/\nexport type PopoverAlign = RadixAlign;\n\nexport interface PopoverProps {\n  /**\n   * Popover alignment\n   * {@link PopoverAlign}\n   * @default \"center\"\n   */\n  align?: PopoverAlign;\n  /**\n   * Show an arrow pointing to the trigger.\n   * @default false\n   */\n  arrow?: boolean;\n  /**\n   * The content of the popover.\n   */\n  children: ReactNode;\n  /**\n   * Constrain the width of the popover to the width of the trigger.\n   */\n  constrainWidth?: boolean;\n  /**\n   * Default open state (uncontrolled mode).\n   */\n  defaultOpen?: boolean;\n  /**\n   * Test id for the popover content.\n   */\n  \"data-testid\"?: string;\n  /**\n   * Control open state (controlled mode).\n   */\n  open?: boolean;\n  /**\n   * Whether the popover is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Callback when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The trigger element for the popover.\n   */\n  trigger: ReactNode;\n  /**\n   * Popover side placement\n   * {@link PopoverSide}\n   * @default \"top\"\n   */\n  side?: PopoverSide;\n}\n\n/**\n * A popover component that handles positioning and supports controlled and uncontrolled modes.\n *\n * A popover displays interactive content in context with a trigger element.\n * A tooltip displays a description of an element on hover or focus.\n *\n * API:\n *  - {@link PopoverProps}\n */\nexport function Popover({\n  trigger,\n  children,\n  open,\n  isDisabled = false,\n  defaultOpen,\n  onOpenChange,\n  side = \"top\",\n  align = \"center\",\n  arrow = false,\n  constrainWidth = false,\n  \"data-testid\": testId,\n}: PopoverProps) {\n  const { className: themeClass, style: themeStyle } = useTheme();\n\n  return (\n    <RadixPopover.Root\n      open={isDisabled ? false : open}\n      defaultOpen={defaultOpen}\n      onOpenChange={(newOpen) => {\n        if (isDisabled) return;\n        onOpenChange?.(newOpen);\n      }}\n    >\n      <RadixPopover.Trigger asChild>\n        <div aria-disabled={isDisabled}>{trigger}</div>\n      </RadixPopover.Trigger>\n\n      {!isDisabled && (\n        <RadixPopover.Portal>\n          <RadixPopover.Content\n            side={side}\n            sideOffset={2}\n            align={align}\n            style={themeStyle as CSSProperties}\n            className={csx(\n              \"proton-Popover\",\n              \"proton-Elevation--glass\",\n              constrainWidth && \"proton-Popover__constrained\",\n              themeClass,\n            )}\n            data-testid={testId}\n          >\n            <Overlay\n              arrow={\n                arrow && (\n                  <RadixPopover.Arrow width={8} height={8}>\n                    <svg width={8} height={8} viewBox=\"0 0 8 8\">\n                      <path d=\"M0 0 L4 4 L8 0\" />\n                    </svg>\n                  </RadixPopover.Arrow>\n                )\n              }\n            >\n              {children}\n            </Overlay>\n          </RadixPopover.Content>\n        </RadixPopover.Portal>\n      )}\n    </RadixPopover.Root>\n  );\n}\n\nPopover.displayName = \"ProtonUIPopover\";\n"],"names":["Popover","trigger","children","open","isDisabled","defaultOpen","onOpenChange","side","align","arrow","constrainWidth","testId","themeClass","themeStyle","useTheme","jsxs","RadixPopover","newOpen","jsx","csx","Overlay"],"mappings":";;;;;;;AA+EO,SAASA,EAAQ;AAAA,EACtB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,OAAAC,IAAQ;AAAA,EACR,gBAAAC,IAAiB;AAAA,EACjB,eAAeC;AACjB,GAAiB;AACf,QAAM,EAAE,WAAWC,GAAY,OAAOC,EAAA,IAAeC,EAAA;AAErD,SACEC,gBAAAA,EAAAA;AAAAA,IAACC,EAAa;AAAA,IAAb;AAAA,MACC,MAAMZ,IAAa,KAAQD;AAAA,MAC3B,aAAAE;AAAA,MACA,cAAc,CAACY,MAAY;AACzB,QAAIb,KACJE,KAAA,QAAAA,EAAeW;AAAA,MACjB;AAAA,MAEA,UAAA;AAAA,QAAAC,gBAAAA,EAAAA,IAACF,EAAa,SAAb,EAAqB,SAAO,IAC3B,gCAAC,OAAA,EAAI,iBAAeZ,GAAa,UAAAH,EAAA,CAAQ,EAAA,CAC3C;AAAA,QAEC,CAACG,KACAc,gBAAAA,EAAAA,IAACF,EAAa,QAAb,EACC,UAAAE,gBAAAA,EAAAA;AAAAA,UAACF,EAAa;AAAA,UAAb;AAAA,YACC,MAAAT;AAAA,YACA,YAAY;AAAA,YACZ,OAAAC;AAAA,YACA,OAAOK;AAAA,YACP,WAAWM;AAAA,cACT;AAAA,cACA;AAAA,cACAT,KAAkB;AAAA,cAClBE;AAAA,YAAA;AAAA,YAEF,eAAaD;AAAA,YAEb,UAAAO,gBAAAA,EAAAA;AAAAA,cAACE;AAAA,cAAA;AAAA,gBACC,OACEX,KACES,gBAAAA,EAAAA,IAACF,EAAa,OAAb,EAAmB,OAAO,GAAG,QAAQ,GACpC,UAAAE,gBAAAA,EAAAA,IAAC,SAAI,OAAO,GAAG,QAAQ,GAAG,SAAQ,WAChC,gCAAC,QAAA,EAAK,GAAE,iBAAA,CAAiB,EAAA,CAC3B,EAAA,CACF;AAAA,gBAIH,UAAAhB;AAAA,cAAA;AAAA,YAAA;AAAA,UACH;AAAA,QAAA,EACF,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;AAEAF,EAAQ,cAAc;"}

package/dist/components/ScreenOverlay/ScreenOverlay.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../node_modules/react/jsx-runtime.cjs.js"),n=require("react");;/* empty css                       */const y=require("radix-ui"),a=require("../ThemeProvider.cjs.js"),m=require("../../utils/string.cjs.js"),i=n.forwardRef(({fadeIn:c=!1,onClose:e,children:o},s)=>{const{theme:d,palette:u}=a.useTheme();return n.useEffect(()=>{if(!e)return;const r=l=>{l.key==="Escape"&&e()};return document.addEventListener("keydown",r),()=>{document.removeEventListener("keydown",r)}},[e]),t.jsxRuntimeExports.jsx(y.Portal.Root,{children:t.jsxRuntimeExports.jsx(a.ThemeProvider,{theme:d,palette:u,children:t.jsxRuntimeExports.jsx("div",{ref:s,id:"background","aria-label":"Background overlay","data-testid":"screen-overlay",className:m.csx("proton-ScreenOverlay__background","proton-ScreenOverlay__z-index",c&&"proton-ScreenOverlay__fade-in"),onClick:r=>{e&&r.target===r.currentTarget&&e()},children:o})})})});i.displayName="ProtonUIScreenOverlay";exports.ScreenOverlay=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../node_modules/react/jsx-runtime.cjs.js"),n=require("react");;/* empty css                       */const y=require("radix-ui"),i=require("../ThemeProvider.cjs.js"),m=require("../../utils/string.cjs.js"),a=n.forwardRef(({fadeIn:o=!1,onClose:e,children:c},s)=>{const{theme:u,palette:d}=i.useTheme();return n.useEffect(()=>{if(!e)return;const r=l=>{l.key==="Escape"&&e()};return document.addEventListener("keydown",r),()=>{document.removeEventListener("keydown",r)}},[e]),t.jsxRuntimeExports.jsx(y.Portal.Root,{children:t.jsxRuntimeExports.jsx(i.ThemeProvider,{theme:u,palette:d,children:t.jsxRuntimeExports.jsx("div",{ref:s,id:"background","aria-label":"Background overlay","data-testid":"screen-overlay",className:m.csx("proton-ScreenOverlay__background","proton-ScreenOverlay__z-index",o&&"proton-ScreenOverlay__fade-in"),onClick:r=>{e&&r.target===r.currentTarget&&e()},children:c})})})});a.displayName="ProtonUIScreenOverlay";exports.ScreenOverlay=a;
 //# sourceMappingURL=ScreenOverlay.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScreenOverlay.cjs.js","sources":["../../../src/components/ScreenOverlay/ScreenOverlay.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useEffect } from \"react\";\nimport \"./ScreenOverlay.css\";\nimport { csx } from \"../../utils\";\nimport { Portal } from \"radix-ui\";\nimport { useTheme, ThemeProvider } from \"../ThemeProvider\";\n\ninterface ScreenOverlayProps {\n  /**\n   * Children to render inside the overlay.\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Whether to fade in the overlay.\n   */\n  fadeIn?: boolean;\n\n  /**\n   * Callback function to handle events (click or ESC key).\n   */\n  onClose?: () => void;\n\n  /**\n   * Ref to the overlay element.\n   */\n  ref?: React.RefObject<HTMLDivElement>;\n}\n\n/**\n * Base Overlay component for creating modal-like backgrounds.\n *\n * API:\n *  - {@link ScreenOverlayProps}\n */\nexport const ScreenOverlay = forwardRef<HTMLDivElement, ScreenOverlayProps>(\n  ({ fadeIn = false, onClose, children }, ref) => {\n    const { theme, palette } = useTheme();\n\n    useEffect(() => {\n      if (!onClose) return;\n\n      const handleEscKey = (event: KeyboardEvent) => {\n        if (event.key === \"Escape\") onClose();\n      };\n\n      document.addEventListener(\"keydown\", handleEscKey);\n      return () => {\n        document.removeEventListener(\"keydown\", handleEscKey);\n      };\n    }, [onClose]);\n\n    return (\n      <Portal.Root>\n        <ThemeProvider theme={theme} palette={palette}>\n          <div\n            ref={ref}\n            id=\"background\"\n            aria-label=\"Background overlay\"\n            data-testid=\"screen-overlay\"\n            className={csx(\n              \"proton-ScreenOverlay__background\",\n              \"proton-ScreenOverlay__z-index\",\n              fadeIn && \"proton-ScreenOverlay__fade-in\"\n            )}\n            onClick={(event: React.MouseEvent) => {\n              if (!onClose) return;\n\n              // Only trigger onClose if the click was directly on the background element\n              if (event.target === event.currentTarget) {\n                onClose();\n              }\n            }}\n          >\n            {children}\n          </div>\n        </ThemeProvider>\n      </Portal.Root>\n    );\n  }\n);\n\nScreenOverlay.displayName = \"ProtonUIScreenOverlay\";\n"],"names":["ScreenOverlay","forwardRef","fadeIn","onClose","children","ref","theme","palette","useTheme","useEffect","handleEscKey","event","Portal","jsx","ThemeProvider","csx"],"mappings":"gTAoCaA,EAAgBC,EAAA,WAC3B,CAAC,CAAE,OAAAC,EAAS,GAAO,QAAAC,EAAS,SAAAC,CAAA,EAAYC,IAAQ,CAC9C,KAAM,CAAE,MAAAC,EAAO,QAAAC,CAAQ,EAAIC,EAAS,SAAA,EAEpCC,OAAAA,EAAAA,UAAU,IAAM,CACd,GAAI,CAACN,EAAS,OAER,MAAAO,EAAgBC,GAAyB,CACzCA,EAAM,MAAQ,UAAkBR,EAAA,CAAA,EAG7B,gBAAA,iBAAiB,UAAWO,CAAY,EAC1C,IAAM,CACF,SAAA,oBAAoB,UAAWA,CAAY,CAAA,CACtD,EACC,CAACP,CAAO,CAAC,0BAGTS,EAAAA,OAAO,KAAP,CACC,SAACC,wBAAAC,EAAAA,cAAA,CAAc,MAAAR,EAAc,QAAAC,EAC3B,SAAAM,EAAA,kBAAA,IAAC,MAAA,CACC,IAAAR,EACA,GAAG,aACH,aAAW,qBACX,cAAY,iBACZ,UAAWU,EAAA,IACT,mCACA,gCACAb,GAAU,+BACZ,EACA,QAAUS,GAA4B,CAC/BR,GAGDQ,EAAM,SAAWA,EAAM,eACjBR,GAEZ,EAEC,SAAAC,CAAA,CAAA,CAEL,CAAA,CACF,CAAA,CAEJ,CACF,EAEAJ,EAAc,YAAc"}
+{"version":3,"file":"ScreenOverlay.cjs.js","sources":["../../../src/components/ScreenOverlay/ScreenOverlay.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useEffect } from \"react\";\nimport \"./ScreenOverlay.css\";\nimport { csx } from \"../../utils\";\nimport { Portal } from \"radix-ui\";\nimport { useTheme, ThemeProvider } from \"../ThemeProvider\";\n\ninterface ScreenOverlayProps {\n  /**\n   * Children to render inside the overlay.\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Whether to fade in the overlay.\n   */\n  fadeIn?: boolean;\n\n  /**\n   * Callback function to handle events (click or ESC key).\n   */\n  onClose?: () => void;\n\n  /**\n   * Ref to the overlay element.\n   */\n  ref?: React.RefObject<HTMLDivElement>;\n}\n\n/**\n * Base Overlay component for creating modal-like backgrounds.\n *\n * API:\n *  - {@link ScreenOverlayProps}\n */\nexport const ScreenOverlay = forwardRef<HTMLDivElement, ScreenOverlayProps>(\n  ({ fadeIn = false, onClose, children }, ref) => {\n    const { theme, palette } = useTheme();\n\n    useEffect(() => {\n      if (!onClose) return;\n\n      const handleEscKey = (event: KeyboardEvent) => {\n        if (event.key === \"Escape\") onClose();\n      };\n\n      document.addEventListener(\"keydown\", handleEscKey);\n      return () => {\n        document.removeEventListener(\"keydown\", handleEscKey);\n      };\n    }, [onClose]);\n\n    return (\n      <Portal.Root>\n        <ThemeProvider theme={theme} palette={palette}>\n          <div\n            ref={ref}\n            id=\"background\"\n            aria-label=\"Background overlay\"\n            data-testid=\"screen-overlay\"\n            className={csx(\n              \"proton-ScreenOverlay__background\",\n              \"proton-ScreenOverlay__z-index\",\n              fadeIn && \"proton-ScreenOverlay__fade-in\"\n            )}\n            onClick={(event: React.MouseEvent) => {\n              if (!onClose) return;\n\n              // Only trigger onClose if the click was directly on the background element\n              if (event.target === event.currentTarget) {\n                onClose();\n              }\n            }}\n          >\n            {children}\n          </div>\n        </ThemeProvider>\n      </Portal.Root>\n    );\n  }\n);\n\nScreenOverlay.displayName = \"ProtonUIScreenOverlay\";\n"],"names":["ScreenOverlay","forwardRef","fadeIn","onClose","children","ref","theme","palette","useTheme","useEffect","handleEscKey","event","Portal","jsx","ThemeProvider","csx"],"mappings":"gTAoCaA,EAAgBC,EAAAA,WAC3B,CAAC,CAAE,OAAAC,EAAS,GAAO,QAAAC,EAAS,SAAAC,CAAA,EAAYC,IAAQ,CAC9C,KAAM,CAAE,MAAAC,EAAO,QAAAC,CAAA,EAAYC,WAAA,EAE3BC,OAAAA,EAAAA,UAAU,IAAM,CACd,GAAI,CAACN,EAAS,OAEd,MAAMO,EAAgBC,GAAyB,CACzCA,EAAM,MAAQ,UAAUR,EAAA,CAC9B,EAEA,gBAAS,iBAAiB,UAAWO,CAAY,EAC1C,IAAM,CACX,SAAS,oBAAoB,UAAWA,CAAY,CACtD,CACF,EAAG,CAACP,CAAO,CAAC,0BAGTS,EAAAA,OAAO,KAAP,CACC,SAAAC,wBAACC,EAAAA,cAAA,CAAc,MAAAR,EAAc,QAAAC,EAC3B,SAAAM,EAAAA,kBAAAA,IAAC,MAAA,CACC,IAAAR,EACA,GAAG,aACH,aAAW,qBACX,cAAY,iBACZ,UAAWU,EAAAA,IACT,mCACA,gCACAb,GAAU,+BAAA,EAEZ,QAAUS,GAA4B,CAC/BR,GAGDQ,EAAM,SAAWA,EAAM,eACzBR,EAAA,CAEJ,EAEC,SAAAC,CAAA,CAAA,EAEL,CAAA,CACF,CAEJ,CACF,EAEAJ,EAAc,YAAc"}

package/dist/components/ScreenOverlay/ScreenOverlay.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenOverlay.es.js","sources":["../../../src/components/ScreenOverlay/ScreenOverlay.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useEffect } from \"react\";\nimport \"./ScreenOverlay.css\";\nimport { csx } from \"../../utils\";\nimport { Portal } from \"radix-ui\";\nimport { useTheme, ThemeProvider } from \"../ThemeProvider\";\n\ninterface ScreenOverlayProps {\n  /**\n   * Children to render inside the overlay.\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Whether to fade in the overlay.\n   */\n  fadeIn?: boolean;\n\n  /**\n   * Callback function to handle events (click or ESC key).\n   */\n  onClose?: () => void;\n\n  /**\n   * Ref to the overlay element.\n   */\n  ref?: React.RefObject<HTMLDivElement>;\n}\n\n/**\n * Base Overlay component for creating modal-like backgrounds.\n *\n * API:\n *  - {@link ScreenOverlayProps}\n */\nexport const ScreenOverlay = forwardRef<HTMLDivElement, ScreenOverlayProps>(\n  ({ fadeIn = false, onClose, children }, ref) => {\n    const { theme, palette } = useTheme();\n\n    useEffect(() => {\n      if (!onClose) return;\n\n      const handleEscKey = (event: KeyboardEvent) => {\n        if (event.key === \"Escape\") onClose();\n      };\n\n      document.addEventListener(\"keydown\", handleEscKey);\n      return () => {\n        document.removeEventListener(\"keydown\", handleEscKey);\n      };\n    }, [onClose]);\n\n    return (\n      <Portal.Root>\n        <ThemeProvider theme={theme} palette={palette}>\n          <div\n            ref={ref}\n            id=\"background\"\n            aria-label=\"Background overlay\"\n            data-testid=\"screen-overlay\"\n            className={csx(\n              \"proton-ScreenOverlay__background\",\n              \"proton-ScreenOverlay__z-index\",\n              fadeIn && \"proton-ScreenOverlay__fade-in\"\n            )}\n            onClick={(event: React.MouseEvent) => {\n              if (!onClose) return;\n\n              // Only trigger onClose if the click was directly on the background element\n              if (event.target === event.currentTarget) {\n                onClose();\n              }\n            }}\n          >\n            {children}\n          </div>\n        </ThemeProvider>\n      </Portal.Root>\n    );\n  }\n);\n\nScreenOverlay.displayName = \"ProtonUIScreenOverlay\";\n"],"names":["ScreenOverlay","forwardRef","fadeIn","onClose","children","ref","theme","palette","useTheme","useEffect","handleEscKey","event","Portal","jsx","ThemeProvider","csx"],"mappings":";;;;;;AAoCO,MAAMA,IAAgBC;AAAA,EAC3B,CAAC,EAAE,QAAAC,IAAS,IAAO,SAAAC,GAAS,UAAAC,EAAA,GAAYC,MAAQ;AAC9C,UAAM,EAAE,OAAAC,GAAO,SAAAC,EAAQ,IAAIC,EAAS;AAEpC,WAAAC,EAAU,MAAM;AACd,UAAI,CAACN,EAAS;AAER,YAAAO,IAAe,CAACC,MAAyB;AACzC,QAAAA,EAAM,QAAQ,YAAkBR,EAAA;AAAA,MAAA;AAG7B,sBAAA,iBAAiB,WAAWO,CAAY,GAC1C,MAAM;AACF,iBAAA,oBAAoB,WAAWA,CAAY;AAAA,MAAA;AAAA,IACtD,GACC,CAACP,CAAO,CAAC,yBAGTS,EAAO,MAAP,EACC,UAACC,gBAAAA,MAAAC,GAAA,EAAc,OAAAR,GAAc,SAAAC,GAC3B,UAAAM,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAR;AAAA,QACA,IAAG;AAAA,QACH,cAAW;AAAA,QACX,eAAY;AAAA,QACZ,WAAWU;AAAA,UACT;AAAA,UACA;AAAA,UACAb,KAAU;AAAA,QACZ;AAAA,QACA,SAAS,CAACS,MAA4B;AACpC,UAAKR,KAGDQ,EAAM,WAAWA,EAAM,iBACjBR;QAEZ;AAAA,QAEC,UAAAC;AAAA,MAAA;AAAA,IAAA,EAEL,CAAA,EACF,CAAA;AAAA,EAEJ;AACF;AAEAJ,EAAc,cAAc;"}
+{"version":3,"file":"ScreenOverlay.es.js","sources":["../../../src/components/ScreenOverlay/ScreenOverlay.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useEffect } from \"react\";\nimport \"./ScreenOverlay.css\";\nimport { csx } from \"../../utils\";\nimport { Portal } from \"radix-ui\";\nimport { useTheme, ThemeProvider } from \"../ThemeProvider\";\n\ninterface ScreenOverlayProps {\n  /**\n   * Children to render inside the overlay.\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Whether to fade in the overlay.\n   */\n  fadeIn?: boolean;\n\n  /**\n   * Callback function to handle events (click or ESC key).\n   */\n  onClose?: () => void;\n\n  /**\n   * Ref to the overlay element.\n   */\n  ref?: React.RefObject<HTMLDivElement>;\n}\n\n/**\n * Base Overlay component for creating modal-like backgrounds.\n *\n * API:\n *  - {@link ScreenOverlayProps}\n */\nexport const ScreenOverlay = forwardRef<HTMLDivElement, ScreenOverlayProps>(\n  ({ fadeIn = false, onClose, children }, ref) => {\n    const { theme, palette } = useTheme();\n\n    useEffect(() => {\n      if (!onClose) return;\n\n      const handleEscKey = (event: KeyboardEvent) => {\n        if (event.key === \"Escape\") onClose();\n      };\n\n      document.addEventListener(\"keydown\", handleEscKey);\n      return () => {\n        document.removeEventListener(\"keydown\", handleEscKey);\n      };\n    }, [onClose]);\n\n    return (\n      <Portal.Root>\n        <ThemeProvider theme={theme} palette={palette}>\n          <div\n            ref={ref}\n            id=\"background\"\n            aria-label=\"Background overlay\"\n            data-testid=\"screen-overlay\"\n            className={csx(\n              \"proton-ScreenOverlay__background\",\n              \"proton-ScreenOverlay__z-index\",\n              fadeIn && \"proton-ScreenOverlay__fade-in\"\n            )}\n            onClick={(event: React.MouseEvent) => {\n              if (!onClose) return;\n\n              // Only trigger onClose if the click was directly on the background element\n              if (event.target === event.currentTarget) {\n                onClose();\n              }\n            }}\n          >\n            {children}\n          </div>\n        </ThemeProvider>\n      </Portal.Root>\n    );\n  }\n);\n\nScreenOverlay.displayName = \"ProtonUIScreenOverlay\";\n"],"names":["ScreenOverlay","forwardRef","fadeIn","onClose","children","ref","theme","palette","useTheme","useEffect","handleEscKey","event","Portal","jsx","ThemeProvider","csx"],"mappings":";;;;;;AAoCO,MAAMA,IAAgBC;AAAA,EAC3B,CAAC,EAAE,QAAAC,IAAS,IAAO,SAAAC,GAAS,UAAAC,EAAA,GAAYC,MAAQ;AAC9C,UAAM,EAAE,OAAAC,GAAO,SAAAC,EAAA,IAAYC,EAAA;AAE3B,WAAAC,EAAU,MAAM;AACd,UAAI,CAACN,EAAS;AAEd,YAAMO,IAAe,CAACC,MAAyB;AAC7C,QAAIA,EAAM,QAAQ,YAAUR,EAAA;AAAA,MAC9B;AAEA,sBAAS,iBAAiB,WAAWO,CAAY,GAC1C,MAAM;AACX,iBAAS,oBAAoB,WAAWA,CAAY;AAAA,MACtD;AAAA,IACF,GAAG,CAACP,CAAO,CAAC,yBAGTS,EAAO,MAAP,EACC,UAAAC,gBAAAA,MAACC,GAAA,EAAc,OAAAR,GAAc,SAAAC,GAC3B,UAAAM,gBAAAA,EAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAR;AAAA,QACA,IAAG;AAAA,QACH,cAAW;AAAA,QACX,eAAY;AAAA,QACZ,WAAWU;AAAA,UACT;AAAA,UACA;AAAA,UACAb,KAAU;AAAA,QAAA;AAAA,QAEZ,SAAS,CAACS,MAA4B;AACpC,UAAKR,KAGDQ,EAAM,WAAWA,EAAM,iBACzBR,EAAA;AAAA,QAEJ;AAAA,QAEC,UAAAC;AAAA,MAAA;AAAA,IAAA,GAEL,EAAA,CACF;AAAA,EAEJ;AACF;AAEAJ,EAAc,cAAc;"}

package/dist/components/Select/Select.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../node_modules/react/jsx-runtime.cjs.js"),l=require("react"),n=require("radix-ui"),P=require("../ThemeProvider.cjs.js"),C=require("../../hooks/useBreakpoint.cjs.js"),A=require("../ActionMenu/ActionMenu.cjs.js");;/* empty css                */;/* empty css                    */const m=require("../../utils/string.cjs.js"),k=require("../Icon/IconComponents/CaretDown.cjs.js"),U=require("../../constants/breakpoint.cjs.js"),g=l.forwardRef(({disabled:r,isOpen:i,children:o,onClick:c,isRounded:s,...a},S)=>e.jsxRuntimeExports.jsx("button",{...a,ref:S,disabled:r,onClick:c,className:m.csx("proton-Select__trigger",r&&"proton-Select__trigger--disabled",!i&&"proton-Select__trigger--closed",i&&"proton-Select__trigger--opened",s&&"proton-Select__trigger--rounded"),children:o}));g.displayName="ProtonUISelectButton";function q({label:r,name:i,isDisabled:o,disabledKeys:c,selectedKey:s,onSelectionChange:a,defaultSelectedKey:S,onOpen:h,onClose:_,items:R,isRounded:E=!1,"data-testid":f}){const[u,p]=l.useState(!1),[I,v]=l.useState(s||S||""),{className:y,style:M}=P.useTheme(),T=C.useBreakpoint(U.BREAKPOINTS.MEDIUM),N=l.useRef(null),x=l.useRef(null),d=s!==void 0?s:I,j=R.find(t=>t.key===d),b=t=>{s===void 0&&v(t),a==null||a(t),x.current&&(x.current.value=t,x.current.dispatchEvent(new Event("change",{bubbles:!0})))},w=t=>{p(t),t?h==null||h():_==null||_()};l.useEffect(()=>{s!==void 0&&v(s)},[s]);const B=R.map(t=>({key:t.key,label:t.label,to:t.to,onAction:()=>{b(t.key),p(!1)}}));return T?e.jsxRuntimeExports.jsxs("div",{className:"proton-Select","aria-label":r||i,"aria-disabled":o,children:[r&&e.jsxRuntimeExports.jsx("div",{className:"proton-Select__label","data-testid":"select-label",children:r}),e.jsxRuntimeExports.jsx("input",{ref:x,type:"hidden",name:i,value:d,"data-testid":"hidden-select-container"}),e.jsxRuntimeExports.jsxs(g,{isOpen:u,isRounded:E,ref:N,disabled:o,"data-testid":f,onClick:()=>p(!0),children:[e.jsxRuntimeExports.jsx("div",{className:"proton-Select__value",children:j?j.label:"Select an option"}),e.jsxRuntimeExports.jsx("div",{className:m.csx("proton-Select__trigger_icon",u&&"proton-Select__trigger_icon--flipped"),"aria-hidden":"true",children:e.jsxRuntimeExports.jsx(k.CaretDown,{size:16})})]}),e.jsxRuntimeExports.jsx(A.ActionMenu,{isOpen:u,onClose:()=>p(!1),actions:B,selectedKeys:[d],disabledKeys:c})]}):e.jsxRuntimeExports.jsxs("div",{className:"proton-Select","aria-label":r||i,"aria-disabled":o,children:[r&&e.jsxRuntimeExports.jsx("div",{className:"proton-Select__label","data-testid":"select-label",children:r}),e.jsxRuntimeExports.jsx("input",{ref:x,type:"hidden",name:i,value:d,"data-testid":"hidden-select-container"}),e.jsxRuntimeExports.jsxs(n.Select.Root,{value:d,onValueChange:b,onOpenChange:w,disabled:o,children:[e.jsxRuntimeExports.jsx(n.Select.Trigger,{asChild:!0,children:e.jsxRuntimeExports.jsxs(g,{isRounded:E,isOpen:u,ref:N,disabled:o,"data-testid":f,children:[e.jsxRuntimeExports.jsx(n.Select.Value,{className:"proton-Select__value",placeholder:"Select an option",children:j?j.label:"Select an option"}),e.jsxRuntimeExports.jsx(n.Select.Icon,{asChild:!0,children:e.jsxRuntimeExports.jsx("div",{className:m.csx("proton-Select__trigger_icon",u&&"proton-Select__trigger_icon--flipped"),"aria-hidden":"true",children:e.jsxRuntimeExports.jsx(k.CaretDown,{size:16})})})]})}),e.jsxRuntimeExports.jsx(n.Select.Portal,{children:e.jsxRuntimeExports.jsx(n.Select.Content,{className:m.csx("proton-Menu","proton-MenuTrigger__menu",y),style:M,position:"popper",children:e.jsxRuntimeExports.jsx(n.Select.Viewport,{children:R.map(t=>e.jsxRuntimeExports.jsx(n.Select.Item,{value:t.key,disabled:c==null?void 0:c.includes(t.key),className:"proton-Menu__item",children:e.jsxRuntimeExports.jsx(n.Select.ItemText,{children:t.label})},t.key))})})})]})]})}q.displayName="ProtonUISelect";exports.Select=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../node_modules/react/jsx-runtime.cjs.js"),c=require("react"),o=require("radix-ui"),B=require("../ThemeProvider.cjs.js"),A=require("../../hooks/useBreakpoint.cjs.js"),C=require("../ActionMenu/ActionMenu.cjs.js");;/* empty css                */;/* empty css                    */;/* empty css                              */const R=require("../../utils/string.cjs.js"),U=require("../../constants/breakpoint.cjs.js"),V=require("../Icon/IconComponents/CaretDown.cjs.js"),g=c.forwardRef(({disabled:s,isOpen:r,onClick:n,isRounded:i,selectedItem:a,ariaLabel:l,"data-testid":m},u)=>e.jsxRuntimeExports.jsxs("button",{ref:u,type:"button",role:"combobox","aria-label":l,"aria-expanded":r,"aria-autocomplete":"none","data-state":r?"open":"closed","data-testid":m,disabled:s,onClick:n,className:R.csx("proton-Select__trigger","proton-Elevation--glass",s&&"proton-Select__trigger--disabled",!r&&"proton-Select__trigger--closed",r&&"proton-Select__trigger--opened",i&&"proton-Select__trigger--rounded"),children:[e.jsxRuntimeExports.jsx("span",{className:"proton-Select__value",children:a?a.label:"Select an option"}),e.jsxRuntimeExports.jsx("span",{className:R.csx("proton-Select__trigger_icon",r&&"proton-Select__trigger_icon--flipped"),children:e.jsxRuntimeExports.jsx(V.CaretDown,{size:16})})]}));g.displayName="ProtonUISelectButton";function N({label:s,name:r,isDisabled:n,disabledKeys:i,selectedKey:a,onSelectionChange:l,defaultSelectedKey:m,onOpen:u,onClose:S,items:h,isRounded:_=!1,"data-testid":f}){const[E,p]=c.useState(!1),j=a!==void 0,[k,v]=c.useState(m??""),{className:I,style:M}=B.useTheme(),T=A.useBreakpoint(U.BREAKPOINTS.MEDIUM),b=c.useRef(null),x=c.useRef(null),d=j?a:k,y=h.find(t=>t.key===d),q=t=>{j||v(t),l==null||l(t),x.current&&(x.current.value=t,x.current.dispatchEvent(new Event("change",{bubbles:!0})))},P=t=>{p(t),t?u==null||u():S==null||S()};c.useEffect(()=>{j&&v(a)},[j]);const w=h.map(t=>({key:t.key,label:t.label,to:t.to,onAction:()=>{q(t.key),p(!1)}}));return T?e.jsxRuntimeExports.jsxs("div",{className:"proton-Select","aria-label":s||r,"aria-disabled":n,children:[s&&e.jsxRuntimeExports.jsx("div",{className:"proton-Select__label","data-testid":"select-label",children:s}),e.jsxRuntimeExports.jsx("input",{ref:x,type:"hidden",name:r,value:d,"data-testid":"hidden-select-container"}),e.jsxRuntimeExports.jsx(g,{isOpen:E,isRounded:_,ref:b,disabled:n,ariaLabel:s||r,"data-testid":f,onClick:()=>p(!0),selectedItem:y}),e.jsxRuntimeExports.jsx(C.ActionMenu,{isOpen:E,onClose:()=>p(!1),actions:w,selectedKeys:[d],disabledKeys:i})]}):e.jsxRuntimeExports.jsxs("div",{className:"proton-Select","aria-label":s||r,"aria-disabled":n,children:[s&&e.jsxRuntimeExports.jsx("div",{className:"proton-Select__label","data-testid":"select-label",children:s}),e.jsxRuntimeExports.jsx("input",{ref:x,type:"hidden",name:r,value:d,"data-testid":"hidden-select-container"}),e.jsxRuntimeExports.jsxs(o.Select.Root,{value:d,onValueChange:q,onOpenChange:P,disabled:n,children:[e.jsxRuntimeExports.jsx(o.Select.Trigger,{asChild:!0,children:e.jsxRuntimeExports.jsx(g,{isRounded:_,isOpen:E,ref:b,disabled:n,ariaLabel:s||r,"data-testid":f,selectedItem:y})}),e.jsxRuntimeExports.jsx(o.Select.Portal,{children:e.jsxRuntimeExports.jsx(o.Select.Content,{className:R.csx("proton-Menu","proton-MenuTrigger__menu","proton-Elevation--glass",I),style:M,position:"popper",children:e.jsxRuntimeExports.jsx(o.Select.Viewport,{children:h.map(t=>e.jsxRuntimeExports.jsx(o.Select.Item,{value:t.key,disabled:i==null?void 0:i.includes(t.key),className:"proton-Menu__item",children:e.jsxRuntimeExports.jsx(o.Select.ItemText,{children:t.label})},t.key))})})})]})]})}N.displayName="ProtonUISelect";exports.Select=N;
 //# sourceMappingURL=Select.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Select.cjs.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  ReactNode,\n  RefObject,\n  useEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n} from \"react\";\nimport { Select as RadixSelect } from \"radix-ui\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\n\nimport { BREAKPOINTS } from \"../../constants\";\nimport { csx } from \"../../utils\";\n\nimport { ActionMenu, ActionMenuAction } from \"../ActionMenu/ActionMenu\";\nimport { CaretDown as CaretDownIcon } from \"../Icon\";\n\nimport \"./Select.css\";\nimport \"../Menu/Menu.css\";\n\ninterface SelectButtonProps {\n  disabled?: boolean;\n  isOpen?: boolean;\n  children?: ReactNode;\n  onClick?: () => void;\n  isRounded?: boolean;\n}\n\nconst SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>(\n  (\n    { disabled, isOpen, children, onClick, isRounded, ...props },\n    ref: RefObject<HTMLButtonElement>,\n  ) => {\n    return (\n      <button\n        {...props}\n        ref={ref}\n        disabled={disabled}\n        onClick={onClick}\n        className={csx(\n          \"proton-Select__trigger\",\n          disabled && \"proton-Select__trigger--disabled\",\n          !isOpen && \"proton-Select__trigger--closed\",\n          isOpen && \"proton-Select__trigger--opened\",\n          isRounded && \"proton-Select__trigger--rounded\",\n        )}\n      >\n        {children}\n      </button>\n    );\n  },\n);\nSelectButton.displayName = \"ProtonUISelectButton\";\n\nexport interface SelectItem {\n  /** The label to display for the item */\n  label: string;\n\n  /** The key of the item */\n  key: string;\n\n  /** The URL to navigate to when the item is clicked, turns item into an a tag */\n  to?: string;\n}\n\nexport interface SelectProps {\n  /** Array of keys that should be disabled\n   * @example [\"Thing 1\", \"Thing 2\"]\n   */\n  disabledKeys?: string[];\n\n  /** The key of the default selected item */\n  defaultSelectedKey?: string;\n\n  /** Test ID for the select */\n  \"data-testid\"?: string;\n\n  /** Whether the select is disabled */\n  isDisabled?: boolean;\n\n  /** Array of items to display\n   * @example [{ key: \"thing-1\", label: \"Thing 1\" }, { key: \"thing-2\", label: \"Thing 2\" }]\n   * @see {@link SelectItem}\n   */\n  items: SelectItem[];\n\n  /** Whether the select button is rounded\n   * @default false\n   */\n  isRounded?: boolean;\n\n  /** Label to display above the select\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#text\n   */\n  label?: string;\n\n  /** The name of the select field */\n  name: string;\n\n  /** Callback fired when the menu closes */\n  onClose?: () => void;\n\n  /** Callback fired when the menu opens */\n  onOpen?: () => void;\n\n  /** Callback fired when selection changes */\n  onSelectionChange?: (key: string) => void;\n\n  /** Currently selected key */\n  selectedKey?: string;\n}\n\n/**\n * A dropdown select menu that opens a popover on desktop and an action menu on mobile/touch devices.\n * Supports controlled and uncontrolled modes.\n *\n * API:\n *  - {@link SelectProps}\n */\nexport function Select({\n  label,\n  name,\n  isDisabled,\n  disabledKeys,\n  selectedKey,\n  onSelectionChange,\n  defaultSelectedKey,\n  onOpen,\n  onClose,\n  items,\n  isRounded = false,\n  \"data-testid\": testId,\n}: SelectProps) {\n  const [isOpen, setIsOpen] = useState(false);\n  const [internalSelectedKey, setInternalSelectedKey] = useState(\n    selectedKey || defaultSelectedKey || \"\",\n  );\n  const { className: themeClass, style: themeStyle } = useTheme();\n  const isMobile = useBreakpoint(BREAKPOINTS.MEDIUM);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const hiddenInputRef = useRef<HTMLInputElement>(null);\n\n  // Handle controlled vs uncontrolled state\n  const currentSelectedKey =\n    selectedKey !== undefined ? selectedKey : internalSelectedKey;\n  const selectedItem = items.find((item) => item.key === currentSelectedKey);\n\n  const handleValueChange = (value: string) => {\n    if (selectedKey === undefined) {\n      setInternalSelectedKey(value);\n    }\n    onSelectionChange?.(value);\n\n    // Update hidden input for form submission\n    if (hiddenInputRef.current) {\n      hiddenInputRef.current.value = value;\n      hiddenInputRef.current.dispatchEvent(\n        new Event(\"change\", { bubbles: true }),\n      );\n    }\n  };\n\n  const handleOpenChange = (open: boolean) => {\n    setIsOpen(open);\n    if (open) {\n      onOpen?.();\n    } else {\n      onClose?.();\n    }\n  };\n\n  // Update internal state when controlled selectedKey changes\n  useEffect(() => {\n    if (selectedKey !== undefined) {\n      setInternalSelectedKey(selectedKey);\n    }\n  }, [selectedKey]);\n\n  const actionItems: ActionMenuAction[] = items.map((item) => ({\n    key: item.key,\n    label: item.label,\n    to: item.to,\n    onAction: () => {\n      handleValueChange(item.key);\n      setIsOpen(false);\n    },\n  }));\n\n  if (isMobile) {\n    return (\n      <div\n        className=\"proton-Select\"\n        aria-label={label || name}\n        aria-disabled={isDisabled}\n      >\n        {label && (\n          <div className=\"proton-Select__label\" data-testid=\"select-label\">\n            {label}\n          </div>\n        )}\n\n        {/* Hidden input for form submission */}\n        <input\n          ref={hiddenInputRef}\n          type=\"hidden\"\n          name={name}\n          value={currentSelectedKey}\n          data-testid=\"hidden-select-container\"\n        />\n\n        <SelectButton\n          isOpen={isOpen}\n          isRounded={isRounded}\n          ref={triggerRef}\n          disabled={isDisabled}\n          data-testid={testId}\n          onClick={() => setIsOpen(true)}\n        >\n          <div className=\"proton-Select__value\">\n            {selectedItem ? selectedItem.label : \"Select an option\"}\n          </div>\n          <div\n            className={csx(\n              \"proton-Select__trigger_icon\",\n              isOpen && \"proton-Select__trigger_icon--flipped\",\n            )}\n            aria-hidden=\"true\"\n          >\n            <CaretDownIcon size={16} />\n          </div>\n        </SelectButton>\n\n        <ActionMenu\n          isOpen={isOpen}\n          onClose={() => setIsOpen(false)}\n          actions={actionItems}\n          selectedKeys={[currentSelectedKey]}\n          disabledKeys={disabledKeys}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className=\"proton-Select\"\n      aria-label={label || name}\n      aria-disabled={isDisabled}\n    >\n      {label && (\n        <div className=\"proton-Select__label\" data-testid=\"select-label\">\n          {label}\n        </div>\n      )}\n\n      {/* Hidden input for form submission */}\n      <input\n        ref={hiddenInputRef}\n        type=\"hidden\"\n        name={name}\n        value={currentSelectedKey}\n        data-testid=\"hidden-select-container\"\n      />\n\n      <RadixSelect.Root\n        value={currentSelectedKey}\n        onValueChange={handleValueChange}\n        onOpenChange={handleOpenChange}\n        disabled={isDisabled}\n      >\n        <RadixSelect.Trigger asChild>\n          <SelectButton\n            isRounded={isRounded}\n            isOpen={isOpen}\n            ref={triggerRef}\n            disabled={isDisabled}\n            data-testid={testId}\n          >\n            <RadixSelect.Value\n              className=\"proton-Select__value\"\n              placeholder=\"Select an option\"\n            >\n              {selectedItem ? selectedItem.label : \"Select an option\"}\n            </RadixSelect.Value>\n            <RadixSelect.Icon asChild>\n              <div\n                className={csx(\n                  \"proton-Select__trigger_icon\",\n                  isOpen && \"proton-Select__trigger_icon--flipped\",\n                )}\n                aria-hidden=\"true\"\n              >\n                <CaretDownIcon size={16} />\n              </div>\n            </RadixSelect.Icon>\n          </SelectButton>\n        </RadixSelect.Trigger>\n\n        <RadixSelect.Portal>\n          <RadixSelect.Content\n            className={csx(\n              \"proton-Menu\",\n              \"proton-MenuTrigger__menu\",\n              themeClass,\n            )}\n            style={themeStyle as CSSProperties}\n            position=\"popper\"\n          >\n            <RadixSelect.Viewport>\n              {items.map((item) => (\n                <RadixSelect.Item\n                  key={item.key}\n                  value={item.key}\n                  disabled={disabledKeys?.includes(item.key)}\n                  className=\"proton-Menu__item\"\n                >\n                  <RadixSelect.ItemText>{item.label}</RadixSelect.ItemText>\n                </RadixSelect.Item>\n              ))}\n            </RadixSelect.Viewport>\n          </RadixSelect.Content>\n        </RadixSelect.Portal>\n      </RadixSelect.Root>\n    </div>\n  );\n}\n\nSelect.displayName = \"ProtonUISelect\";\n"],"names":["SelectButton","forwardRef","disabled","isOpen","children","onClick","isRounded","props","ref","jsx","csx","Select","label","name","isDisabled","disabledKeys","selectedKey","onSelectionChange","defaultSelectedKey","onOpen","onClose","items","testId","setIsOpen","useState","internalSelectedKey","setInternalSelectedKey","themeClass","themeStyle","useTheme","isMobile","useBreakpoint","BREAKPOINTS","triggerRef","useRef","hiddenInputRef","currentSelectedKey","selectedItem","item","handleValueChange","value","handleOpenChange","open","useEffect","actionItems","jsxs","CaretDownIcon","ActionMenu","RadixSelect"],"mappings":"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"}
+{"version":3,"file":"Select.cjs.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  ReactNode,\n  useEffect,\n  useRef,\n  useState,\n  type ForwardedRef,\n  type CSSProperties,\n} from \"react\";\nimport { Select as RadixSelect } from \"radix-ui\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\nimport { BREAKPOINTS } from \"../../constants\";\nimport { csx } from \"../../utils\";\n\nimport { ActionMenu, type ActionMenuAction } from \"../ActionMenu/ActionMenu\";\nimport { CaretDown as CaretDownIcon } from \"../Icon\";\n\nimport \"./Select.css\";\nimport \"../Menu/Menu.css\";\nimport \"../Elevation/Elevation.css\";\n\ninterface SelectButtonProps {\n  disabled?: boolean;\n  isOpen?: boolean;\n  selectedItem?: SelectItem;\n  onClick?: () => void;\n  isRounded?: boolean;\n  ariaLabel?: string;\n  \"data-testid\"?: string;\n}\n\nconst SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>(\n  (\n    {\n      disabled,\n      isOpen,\n      onClick,\n      isRounded,\n      selectedItem,\n      ariaLabel,\n      \"data-testid\": testId,\n    },\n    ref: ForwardedRef<HTMLButtonElement>,\n  ) => {\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        role=\"combobox\"\n        aria-label={ariaLabel}\n        aria-expanded={isOpen}\n        aria-autocomplete=\"none\"\n        data-state={isOpen ? \"open\" : \"closed\"}\n        data-testid={testId}\n        disabled={disabled}\n        onClick={onClick}\n        className={csx(\n          \"proton-Select__trigger\",\n          \"proton-Elevation--glass\",\n          disabled && \"proton-Select__trigger--disabled\",\n          !isOpen && \"proton-Select__trigger--closed\",\n          isOpen && \"proton-Select__trigger--opened\",\n          isRounded && \"proton-Select__trigger--rounded\",\n        )}\n      >\n        <span className=\"proton-Select__value\">\n          {selectedItem ? selectedItem.label : \"Select an option\"}\n        </span>\n        <span\n          className={csx(\n            \"proton-Select__trigger_icon\",\n            isOpen && \"proton-Select__trigger_icon--flipped\",\n          )}\n        >\n          <CaretDownIcon size={16} />\n        </span>\n      </button>\n    );\n  },\n);\n\nSelectButton.displayName = \"ProtonUISelectButton\";\n\nexport interface SelectItem {\n  /** The label to display for the item */\n  label: string;\n\n  /** The key of the item */\n  key: string;\n\n  /** The URL to navigate to when the item is clicked, turns item into an a tag */\n  to?: string;\n}\n\nexport interface SelectProps {\n  /** Array of keys that should be disabled\n   * @example [\"Thing 1\", \"Thing 2\"]\n   */\n  disabledKeys?: string[];\n\n  /** The key of the default selected item */\n  defaultSelectedKey?: string;\n\n  /** Test ID for the select */\n  \"data-testid\"?: string;\n\n  /** Whether the select is disabled */\n  isDisabled?: boolean;\n\n  /** Array of items to display\n   * @example [{ key: \"thing-1\", label: \"Thing 1\" }, { key: \"thing-2\", label: \"Thing 2\" }]\n   * @see {@link SelectItem}\n   */\n  items: SelectItem[];\n\n  /** Whether the select button is rounded\n   * @default false\n   */\n  isRounded?: boolean;\n\n  /** Label to display above the select\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#text\n   */\n  label?: string;\n\n  /** The name of the select field */\n  name: string;\n\n  /** Callback fired when the menu closes */\n  onClose?: () => void;\n\n  /** Callback fired when the menu opens */\n  onOpen?: () => void;\n\n  /** Callback fired when selection changes */\n  onSelectionChange?: (key: string) => void;\n\n  /** Currently selected key */\n  selectedKey?: string;\n}\n\n/**\n * A dropdown select menu that opens a popover on desktop and an action menu on mobile/touch devices.\n * Supports controlled and uncontrolled modes.\n *\n * API:\n *  - {@link SelectProps}\n */\nexport function Select({\n  label,\n  name,\n  isDisabled,\n  disabledKeys,\n  selectedKey,\n  onSelectionChange,\n  defaultSelectedKey,\n  onOpen,\n  onClose,\n  items,\n  isRounded = false,\n  \"data-testid\": testId,\n}: SelectProps) {\n  const [isOpen, setIsOpen] = useState(false);\n  const isControlled = selectedKey !== undefined;\n  const [internalSelectedKey, setInternalSelectedKey] = useState(\n    defaultSelectedKey ?? \"\",\n  );\n  const { className: themeClass, style: themeStyle } = useTheme();\n  const isMobile = useBreakpoint(BREAKPOINTS.MEDIUM);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const hiddenInputRef = useRef<HTMLInputElement>(null);\n\n  // Handle controlled vs uncontrolled state\n  const currentSelectedKey = isControlled\n    ? (selectedKey as string)\n    : internalSelectedKey;\n  const selectedItem = items.find((item) => item.key === currentSelectedKey);\n\n  const handleValueChange = (value: string) => {\n    if (!isControlled) {\n      setInternalSelectedKey(value);\n    }\n    onSelectionChange?.(value);\n\n    // Update hidden input for form submission\n    if (hiddenInputRef.current) {\n      hiddenInputRef.current.value = value;\n      hiddenInputRef.current.dispatchEvent(\n        new Event(\"change\", { bubbles: true }),\n      );\n    }\n  };\n\n  const handleOpenChange = (open: boolean) => {\n    setIsOpen(open);\n    if (open) {\n      onOpen?.();\n    } else {\n      onClose?.();\n    }\n  };\n\n  // Update internal state when controlled selectedKey changes\n  useEffect(() => {\n    if (isControlled) {\n      setInternalSelectedKey(selectedKey);\n    }\n  }, [isControlled]);\n\n  const actionItems: ActionMenuAction[] = items.map((item) => ({\n    key: item.key,\n    label: item.label,\n    to: item.to,\n    onAction: () => {\n      handleValueChange(item.key);\n      setIsOpen(false);\n    },\n  }));\n\n  if (isMobile) {\n    return (\n      <div\n        className=\"proton-Select\"\n        aria-label={label || name}\n        aria-disabled={isDisabled}\n      >\n        {label && (\n          <div className=\"proton-Select__label\" data-testid=\"select-label\">\n            {label}\n          </div>\n        )}\n\n        {/* Hidden input for form submission */}\n        <input\n          ref={hiddenInputRef}\n          type=\"hidden\"\n          name={name}\n          value={currentSelectedKey}\n          data-testid=\"hidden-select-container\"\n        />\n\n        <SelectButton\n          isOpen={isOpen}\n          isRounded={isRounded}\n          ref={triggerRef}\n          disabled={isDisabled}\n          ariaLabel={label || name}\n          data-testid={testId}\n          onClick={() => setIsOpen(true)}\n          selectedItem={selectedItem}\n        />\n\n        <ActionMenu\n          isOpen={isOpen}\n          onClose={() => setIsOpen(false)}\n          actions={actionItems}\n          selectedKeys={[currentSelectedKey]}\n          disabledKeys={disabledKeys}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className=\"proton-Select\"\n      aria-label={label || name}\n      aria-disabled={isDisabled}\n    >\n      {label && (\n        <div className=\"proton-Select__label\" data-testid=\"select-label\">\n          {label}\n        </div>\n      )}\n\n      {/* Hidden input for form submission */}\n      <input\n        ref={hiddenInputRef}\n        type=\"hidden\"\n        name={name}\n        value={currentSelectedKey}\n        data-testid=\"hidden-select-container\"\n      />\n\n      <RadixSelect.Root\n        value={currentSelectedKey}\n        onValueChange={handleValueChange}\n        onOpenChange={handleOpenChange}\n        disabled={isDisabled}\n      >\n        <RadixSelect.Trigger asChild>\n          <SelectButton\n            isRounded={isRounded}\n            isOpen={isOpen}\n            ref={triggerRef}\n            disabled={isDisabled}\n            ariaLabel={label || name}\n            data-testid={testId}\n            selectedItem={selectedItem}\n          />\n        </RadixSelect.Trigger>\n\n        <RadixSelect.Portal>\n          <RadixSelect.Content\n            className={csx(\n              \"proton-Menu\",\n              \"proton-MenuTrigger__menu\",\n              \"proton-Elevation--glass\",\n              themeClass,\n            )}\n            style={themeStyle as CSSProperties}\n            position=\"popper\"\n          >\n            <RadixSelect.Viewport>\n              {items.map((item) => (\n                <RadixSelect.Item\n                  key={item.key}\n                  value={item.key}\n                  disabled={disabledKeys?.includes(item.key)}\n                  className=\"proton-Menu__item\"\n                >\n                  <RadixSelect.ItemText>{item.label}</RadixSelect.ItemText>\n                </RadixSelect.Item>\n              ))}\n            </RadixSelect.Viewport>\n          </RadixSelect.Content>\n        </RadixSelect.Portal>\n      </RadixSelect.Root>\n    </div>\n  );\n}\n\nSelect.displayName = \"ProtonUISelect\";\n"],"names":["SelectButton","forwardRef","disabled","isOpen","onClick","isRounded","selectedItem","ariaLabel","testId","ref","jsxs","csx","jsx","CaretDownIcon","Select","label","name","isDisabled","disabledKeys","selectedKey","onSelectionChange","defaultSelectedKey","onOpen","onClose","items","setIsOpen","useState","isControlled","internalSelectedKey","setInternalSelectedKey","themeClass","themeStyle","useTheme","isMobile","useBreakpoint","BREAKPOINTS","triggerRef","useRef","hiddenInputRef","currentSelectedKey","item","handleValueChange","value","handleOpenChange","open","useEffect","actionItems","ActionMenu","RadixSelect"],"mappings":"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"}

package/dist/components/Select/Select.es.js

@@ -1,61 +1,89 @@
 import { j as e } from "../../node_modules/react/jsx-runtime.es.js";
-import { forwardRef as V, useState as b, useRef as y, useEffect as A } from "react";
-import { Select as o } from "radix-ui";
-import { useTheme as C } from "../ThemeProvider.es.js";
-import { useBreakpoint as U } from "../../hooks/useBreakpoint.es.js";
-import { ActionMenu as z } from "../ActionMenu/ActionMenu.es.js";
+import { useState as I, useRef as E, useEffect as A, forwardRef as C } from "react";
+import { Select as n } from "radix-ui";
+import { useTheme as U } from "../ThemeProvider.es.js";
+import { useBreakpoint as V } from "../../hooks/useBreakpoint.es.js";
+import { ActionMenu as L } from "../ActionMenu/ActionMenu.es.js";
 /* empty css              */
 /* empty css                  */
-import { csx as m } from "../../utils/string.es.js";
-import { CaretDown as M } from "../Icon/IconComponents/CaretDown.es.js";
-import { BREAKPOINTS as $ } from "../../constants/breakpoint.es.js";
-const S = V(
-  ({ disabled: r, isOpen: l, children: i, onClick: a, isRounded: n, ...s }, _) => /* @__PURE__ */ e.jsx(
+/* empty css                            */
+import { csx as g } from "../../utils/string.es.js";
+import { BREAKPOINTS as z } from "../../constants/breakpoint.es.js";
+import { CaretDown as $ } from "../Icon/IconComponents/CaretDown.es.js";
+const j = C(
+  ({
+    disabled: o,
+    isOpen: r,
+    onClick: a,
+    isRounded: l,
+    selectedItem: s,
+    ariaLabel: c,
+    "data-testid": f
+  }, i) => /* @__PURE__ */ e.jsxs(
     "button",
     {
-      ...s,
-      ref: _,
-      disabled: r,
+      ref: i,
+      type: "button",
+      role: "combobox",
+      "aria-label": c,
+      "aria-expanded": r,
+      "aria-autocomplete": "none",
+      "data-state": r ? "open" : "closed",
+      "data-testid": f,
+      disabled: o,
       onClick: a,
-      className: m(
+      className: g(
         "proton-Select__trigger",
-        r && "proton-Select__trigger--disabled",
-        !l && "proton-Select__trigger--closed",
-        l && "proton-Select__trigger--opened",
-        n && "proton-Select__trigger--rounded"
+        "proton-Elevation--glass",
+        o && "proton-Select__trigger--disabled",
+        !r && "proton-Select__trigger--closed",
+        r && "proton-Select__trigger--opened",
+        l && "proton-Select__trigger--rounded"
       ),
-      children: i
+      children: [
+        /* @__PURE__ */ e.jsx("span", { className: "proton-Select__value", children: s ? s.label : "Select an option" }),
+        /* @__PURE__ */ e.jsx(
+          "span",
+          {
+            className: g(
+              "proton-Select__trigger_icon",
+              r && "proton-Select__trigger_icon--flipped"
+            ),
+            children: /* @__PURE__ */ e.jsx($, { size: 16 })
+          }
+        )
+      ]
     }
   )
 );
-S.displayName = "ProtonUISelectButton";
+j.displayName = "ProtonUISelectButton";
 function q({
-  label: r,
-  name: l,
-  isDisabled: i,
-  disabledKeys: a,
-  selectedKey: n,
-  onSelectionChange: s,
-  defaultSelectedKey: _,
-  onOpen: f,
-  onClose: x,
-  items: j,
-  isRounded: g = !1,
+  label: o,
+  name: r,
+  isDisabled: a,
+  disabledKeys: l,
+  selectedKey: s,
+  onSelectionChange: c,
+  defaultSelectedKey: f,
+  onOpen: i,
+  onClose: h,
+  items: x,
+  isRounded: S = !1,
   "data-testid": v
 }) {
-  const [c, u] = b(!1), [E, N] = b(
-    n || _ || ""
-  ), { className: R, style: T } = C(), w = U($.MEDIUM), I = y(null), d = y(null), p = n !== void 0 ? n : E, h = j.find((t) => t.key === p), k = (t) => {
-    n === void 0 && N(t), s == null || s(t), d.current && (d.current.value = t, d.current.dispatchEvent(
+  const [_, u] = I(!1), m = s !== void 0, [M, N] = I(
+    f ?? ""
+  ), { className: R, style: T } = U(), w = V(z.MEDIUM), y = E(null), d = E(null), p = m ? s : M, b = x.find((t) => t.key === p), k = (t) => {
+    m || N(t), c == null || c(t), d.current && (d.current.value = t, d.current.dispatchEvent(
       new Event("change", { bubbles: !0 })
     ));
   }, B = (t) => {
-    u(t), t ? f == null || f() : x == null || x();
+    u(t), t ? i == null || i() : h == null || h();
   };
   A(() => {
-    n !== void 0 && N(n);
-  }, [n]);
-  const P = j.map((t) => ({
+    m && N(s);
+  }, [m]);
+  const P = x.map((t) => ({
     key: t.key,
     label: t.label,
     to: t.to,
@@ -67,53 +95,41 @@ function q({
     "div",
     {
       className: "proton-Select",
-      "aria-label": r || l,
-      "aria-disabled": i,
+      "aria-label": o || r,
+      "aria-disabled": a,
       children: [
-        r && /* @__PURE__ */ e.jsx("div", { className: "proton-Select__label", "data-testid": "select-label", children: r }),
+        o && /* @__PURE__ */ e.jsx("div", { className: "proton-Select__label", "data-testid": "select-label", children: o }),
         /* @__PURE__ */ e.jsx(
           "input",
           {
             ref: d,
             type: "hidden",
-            name: l,
+            name: r,
             value: p,
             "data-testid": "hidden-select-container"
           }
         ),
-        /* @__PURE__ */ e.jsxs(
-          S,
+        /* @__PURE__ */ e.jsx(
+          j,
           {
-            isOpen: c,
-            isRounded: g,
-            ref: I,
-            disabled: i,
+            isOpen: _,
+            isRounded: S,
+            ref: y,
+            disabled: a,
+            ariaLabel: o || r,
             "data-testid": v,
             onClick: () => u(!0),
-            children: [
-              /* @__PURE__ */ e.jsx("div", { className: "proton-Select__value", children: h ? h.label : "Select an option" }),
-              /* @__PURE__ */ e.jsx(
-                "div",
-                {
-                  className: m(
-                    "proton-Select__trigger_icon",
-                    c && "proton-Select__trigger_icon--flipped"
-                  ),
-                  "aria-hidden": "true",
-                  children: /* @__PURE__ */ e.jsx(M, { size: 16 })
-                }
-              )
-            ]
+            selectedItem: b
           }
         ),
         /* @__PURE__ */ e.jsx(
-          z,
+          L,
           {
-            isOpen: c,
+            isOpen: _,
             onClose: () => u(!1),
             actions: P,
             selectedKeys: [p],
-            disabledKeys: a
+            disabledKeys: l
           }
         )
       ]
@@ -122,76 +138,58 @@ function q({
     "div",
     {
       className: "proton-Select",
-      "aria-label": r || l,
-      "aria-disabled": i,
+      "aria-label": o || r,
+      "aria-disabled": a,
       children: [
-        r && /* @__PURE__ */ e.jsx("div", { className: "proton-Select__label", "data-testid": "select-label", children: r }),
+        o && /* @__PURE__ */ e.jsx("div", { className: "proton-Select__label", "data-testid": "select-label", children: o }),
         /* @__PURE__ */ e.jsx(
           "input",
           {
             ref: d,
             type: "hidden",
-            name: l,
+            name: r,
             value: p,
             "data-testid": "hidden-select-container"
           }
         ),
         /* @__PURE__ */ e.jsxs(
-          o.Root,
+          n.Root,
           {
             value: p,
             onValueChange: k,
             onOpenChange: B,
-            disabled: i,
+            disabled: a,
             children: [
-              /* @__PURE__ */ e.jsx(o.Trigger, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
-                S,
+              /* @__PURE__ */ e.jsx(n.Trigger, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+                j,
                 {
-                  isRounded: g,
-                  isOpen: c,
-                  ref: I,
-                  disabled: i,
+                  isRounded: S,
+                  isOpen: _,
+                  ref: y,
+                  disabled: a,
+                  ariaLabel: o || r,
                   "data-testid": v,
-                  children: [
-                    /* @__PURE__ */ e.jsx(
-                      o.Value,
-                      {
-                        className: "proton-Select__value",
-                        placeholder: "Select an option",
-                        children: h ? h.label : "Select an option"
-                      }
-                    ),
-                    /* @__PURE__ */ e.jsx(o.Icon, { asChild: !0, children: /* @__PURE__ */ e.jsx(
-                      "div",
-                      {
-                        className: m(
-                          "proton-Select__trigger_icon",
-                          c && "proton-Select__trigger_icon--flipped"
-                        ),
-                        "aria-hidden": "true",
-                        children: /* @__PURE__ */ e.jsx(M, { size: 16 })
-                      }
-                    ) })
-                  ]
+                  selectedItem: b
                 }
               ) }),
-              /* @__PURE__ */ e.jsx(o.Portal, { children: /* @__PURE__ */ e.jsx(
-                o.Content,
+              /* @__PURE__ */ e.jsx(n.Portal, { children: /* @__PURE__ */ e.jsx(
+                n.Content,
                 {
-                  className: m(
+                  className: g(
                     "proton-Menu",
                     "proton-MenuTrigger__menu",
+                    "proton-Elevation--glass",
                     R
                   ),
                   style: T,
                   position: "popper",
-                  children: /* @__PURE__ */ e.jsx(o.Viewport, { children: j.map((t) => /* @__PURE__ */ e.jsx(
-                    o.Item,
+                  children: /* @__PURE__ */ e.jsx(n.Viewport, { children: x.map((t) => /* @__PURE__ */ e.jsx(
+                    n.Item,
                     {
                       value: t.key,
-                      disabled: a == null ? void 0 : a.includes(t.key),
+                      disabled: l == null ? void 0 : l.includes(t.key),
                       className: "proton-Menu__item",
-                      children: /* @__PURE__ */ e.jsx(o.ItemText, { children: t.label })
+                      children: /* @__PURE__ */ e.jsx(n.ItemText, { children: t.label })
                     },
                     t.key
                   )) })