@protonradio/proton-ui 0.11.10 → 0.11.12

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

@@ -0,0 +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\";\n\nexport interface PopoverMenuProps {\n  /** The trigger component */\n  trigger: React.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) {\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            <svg\n              className=\"proton-MenuTrigger__chevron\"\n              viewBox=\"0 0 256 256\"\n              width={16}\n              height={12}\n            >\n              <path\n                fill=\"currentColor\"\n                d=\"m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17\"\n              />\n            </svg>\n          </RadixDropdownMenu.SubTrigger>\n\n          <RadixDropdownMenu.SubContent\n            sideOffset={8}\n            data-has-submenu=\"true\"\n            className={csx(\"proton-Menu\", \"proton-MenuTrigger__menu\")}\n          >\n            {item.children.map((child) =>\n              renderMenuItem({\n                item: child,\n                className,\n                style,\n                disabledKeys,\n                onClose,\n              })\n            )}\n          </RadixDropdownMenu.SubContent>\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 React.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 React.CSSProperties,\n              disabledKeys,\n              onClose: () => onOpenChange?.(false),\n            })\n          )}\n        </RadixDropdownMenu.Content>\n      </RadixDropdownMenu.Portal>\n    </RadixDropdownMenu.Root>\n  );\n}\n"],"names":["PopoverMenu","trigger","items","isOpen","onOpenChange","selectedKey","onSelectionChange","disabledKeys","title","themeClass","themeStyle","useTheme","renderMenuItem","props","item","className","style","onClose","jsxs","RadixDropdownMenu","csx","jsx","child","_a"],"mappings":"iPAuCO,SAASA,EAAY,CAC1B,QAAAC,EACA,MAAAC,EACA,OAAAC,EACA,aAAAC,EACA,YAAAC,EACA,kBAAAC,EACA,aAAAC,EACA,MAAAC,CACF,EAAqB,CACnB,KAAM,CAAE,UAAWC,EAAY,MAAOC,CAAA,EAAeC,EAAAA,WAErD,SAASC,EAAeC,EAAO,CAC7B,KAAM,CAAE,KAAAC,EAAM,UAAAC,EAAW,MAAAC,EAAO,aAAAT,EAAc,QAAAU,CAAY,EAAAJ,EAE1D,OAAIC,EAAK,UAAYA,EAAK,SAAS,OAAS,EAExCI,yBAACC,EAAAA,aAAkB,IAAlB,CACC,SAAA,CAAAD,EAAA,kBAAA,KAACC,EAAAA,aAAkB,WAAlB,CACC,UAAWC,EAAA,IACT,oBACA,+BACF,EAEC,SAAA,CAAKN,EAAA,MACNO,EAAA,kBAAA,IAAC,MAAA,CACC,UAAU,8BACV,QAAQ,cACR,MAAO,GACP,OAAQ,GAER,SAAAA,EAAA,kBAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,wGAAA,CACJ,CAAA,CACF,CAAA,CAAA,CACF,EAEAA,EAAA,kBAAA,IAACF,EAAAA,aAAkB,WAAlB,CACC,WAAY,EACZ,mBAAiB,OACjB,UAAWC,EAAAA,IAAI,cAAe,0BAA0B,EAEvD,WAAK,SAAS,IAAKE,GAClBV,EAAe,CACb,KAAMU,EACN,UAAAP,EACA,MAAAC,EACA,aAAAT,EACA,QAAAU,CAAA,CACD,CACH,CAAA,CACF,CAAA,GAnC0BH,EAAK,GAoCjC,EAIAI,EAAA,kBAAA,KAACC,EAAAA,aAAkB,KAAlB,CACC,UAAWC,EAAAA,IAAI,oBAAqB,+BAA+B,EAEnE,gBAAef,IAAgBS,EAAK,IACpC,SAAUP,GAAAA,YAAAA,EAAc,SAASO,EAAK,KACtC,SAAU,IAAM,QACTS,EAAAT,EAAA,WAAA,MAAAS,EAAA,KAAAT,EAAWA,EAAK,KACrBR,GAAA,MAAAA,EAAoBQ,EAAK,KACfG,GAAA,MAAAA,GACZ,EAEA,SAAA,CAAAI,EAAA,kBAAA,IAAC,OAAA,CACC,UAAU,4BACV,MAAO,CAAE,SAAU,OAAQ,EAE1B,SAAKP,EAAA,KAAA,CACR,EACCA,EAAK,aACJO,EAAA,kBAAA,IAAC,OAAA,CACC,UAAU,kCACV,MAAO,CAAE,SAAU,MAAO,EAEzB,SAAKP,EAAA,WAAA,CACR,CAAA,CAAA,EArBGA,EAAK,GAAA,CA0BlB,CAEA,gCACGK,EAAAA,aAAkB,KAAlB,CAAuB,KAAMhB,EAAQ,aAAAC,EACpC,SAAA,CAAAiB,EAAA,kBAAA,IAACF,EAAkB,aAAA,QAAlB,CAA0B,QAAO,GAAE,SAAQlB,EAAA,EAC5CoB,EAAAA,kBAAAA,IAACF,EAAkB,aAAA,OAAlB,CACC,SAAAD,EAAA,kBAAA,KAACC,EAAAA,aAAkB,QAAlB,CACC,UAAWC,EAAA,IAAI,cAAe,2BAA4BX,CAAU,EACpE,MAAOC,EAEN,SAAA,CAAAF,2BACEW,EAAAA,aAAkB,MAAlB,CAAwB,UAAU,kCAChC,SACHX,EAAA,EAEDN,EAAM,IAAKY,GACVF,EAAe,CACb,KAAAE,EACA,UAAWL,EACX,MAAOC,EACP,aAAAH,EACA,QAAS,IAAMH,GAAA,YAAAA,EAAe,GAAK,CACpC,CACH,CAAA,CAAA,CAAA,EAEJ,CACF,CAAA,CAAA,CAEJ"}

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

@@ -0,0 +1,122 @@
+import { j as r } from "../../node_modules/react/jsx-runtime.es.js";
+import { DropdownMenu as s } from "radix-ui";
+import { useTheme as b } from "../ThemeProvider.es.js";
+import { csx as o } from "../../utils/string.es.js";
+function v({
+  trigger: _,
+  items: h,
+  isOpen: x,
+  onOpenChange: t,
+  selectedKey: g,
+  onSelectionChange: a,
+  disabledKeys: j,
+  title: c
+}) {
+  const { className: u, style: d } = b();
+  function p(m) {
+    const { item: e, className: M, style: y, disabledKeys: l, onClose: i } = m;
+    return e.children && e.children.length > 0 ? /* @__PURE__ */ r.jsxs(s.Sub, { children: [
+      /* @__PURE__ */ r.jsxs(
+        s.SubTrigger,
+        {
+          className: o(
+            "proton-Menu__item",
+            "proton-MenuTrigger__menu-item"
+          ),
+          children: [
+            e.label,
+            /* @__PURE__ */ r.jsx(
+              "svg",
+              {
+                className: "proton-MenuTrigger__chevron",
+                viewBox: "0 0 256 256",
+                width: 16,
+                height: 12,
+                children: /* @__PURE__ */ r.jsx(
+                  "path",
+                  {
+                    fill: "currentColor",
+                    d: "m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17"
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ r.jsx(
+        s.SubContent,
+        {
+          sideOffset: 8,
+          "data-has-submenu": "true",
+          className: o("proton-Menu", "proton-MenuTrigger__menu"),
+          children: e.children.map(
+            (n) => p({
+              item: n,
+              className: M,
+              style: y,
+              disabledKeys: l,
+              onClose: i
+            })
+          )
+        }
+      )
+    ] }, e.key) : /* @__PURE__ */ r.jsxs(
+      s.Item,
+      {
+        className: o("proton-Menu__item", "proton-MenuTrigger__menu-item"),
+        "aria-selected": g === e.key,
+        disabled: l == null ? void 0 : l.includes(e.key),
+        onSelect: () => {
+          var n;
+          (n = e.onAction) == null || n.call(e, e.key), a == null || a(e.key), i == null || i();
+        },
+        children: [
+          /* @__PURE__ */ r.jsx(
+            "span",
+            {
+              className: "proton-MenuTrigger__label",
+              style: { gridArea: "label" },
+              children: e.label
+            }
+          ),
+          e.description && /* @__PURE__ */ r.jsx(
+            "span",
+            {
+              className: "proton-MenuTrigger__description",
+              style: { gridArea: "desc" },
+              children: e.description
+            }
+          )
+        ]
+      },
+      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,
+      {
+        className: o("proton-Menu", "proton-MenuTrigger__menu", u),
+        style: d,
+        children: [
+          c && /* @__PURE__ */ r.jsx(s.Label, { className: "proton-MenuTrigger__menu-header", children: c }),
+          h.map(
+            (m) => p({
+              item: m,
+              className: u,
+              style: d,
+              disabledKeys: j,
+              onClose: () => t == null ? void 0 : t(!1)
+            })
+          )
+        ]
+      }
+    ) })
+  ] });
+}
+export {
+  v as PopoverMenu
+};
+//# sourceMappingURL=PopoverMenu.es.js.map

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

@@ -0,0 +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\";\n\nexport interface PopoverMenuProps {\n  /** The trigger component */\n  trigger: React.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) {\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            <svg\n              className=\"proton-MenuTrigger__chevron\"\n              viewBox=\"0 0 256 256\"\n              width={16}\n              height={12}\n            >\n              <path\n                fill=\"currentColor\"\n                d=\"m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17\"\n              />\n            </svg>\n          </RadixDropdownMenu.SubTrigger>\n\n          <RadixDropdownMenu.SubContent\n            sideOffset={8}\n            data-has-submenu=\"true\"\n            className={csx(\"proton-Menu\", \"proton-MenuTrigger__menu\")}\n          >\n            {item.children.map((child) =>\n              renderMenuItem({\n                item: child,\n                className,\n                style,\n                disabledKeys,\n                onClose,\n              })\n            )}\n          </RadixDropdownMenu.SubContent>\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 React.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 React.CSSProperties,\n              disabledKeys,\n              onClose: () => onOpenChange?.(false),\n            })\n          )}\n        </RadixDropdownMenu.Content>\n      </RadixDropdownMenu.Portal>\n    </RadixDropdownMenu.Root>\n  );\n}\n"],"names":["PopoverMenu","trigger","items","isOpen","onOpenChange","selectedKey","onSelectionChange","disabledKeys","title","themeClass","themeStyle","useTheme","renderMenuItem","props","item","className","style","onClose","jsxs","RadixDropdownMenu","csx","jsx","child","_a"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../node_modules/react/jsx-runtime.cjs.js"),E=require("../../node_modules/@react-aria/button/dist/useButton.cjs.js"),q=require("../../node_modules/@react-aria/dialog/dist/useDialog.cjs.js"),m=require("../../node_modules/@react-aria/focus/dist/FocusScope.cjs.js"),v=require("@react-aria/utils"),S=require("../../node_modules/@react-aria/overlays/dist/usePreventScroll.cjs.js"),_=require("../../node_modules/@react-aria/overlays/dist/useModalOverlay.cjs.js"),j=require("react"),b=require("../../node_modules/@react-stately/overlays/dist/useOverlayTriggerState.cjs.js"),h=require("../../hooks/useIsClosing.cjs.js"),f=require("../Button/Button.cjs.js");;/* empty css               */const y=require("../ScreenOverlay/ScreenOverlay.cjs.js"),B=require("../../hooks/useBreakpoint.cjs.js"),C=require("../../constants/breakpoint.cjs.js"),O=require("../../utils/string.cjs.js"),M=({children:s})=>e.jsxRuntimeExports.jsx("h2",{className:"proton-Modal__title",children:s}),R=({children:s})=>e.jsxRuntimeExports.jsx("h3",{className:"proton-Modal__subtitle",children:s}),g=({children:s})=>e.jsxRuntimeExports.jsx("div",{className:"proton-Modal__body",children:s}),P=s=>e.jsxRuntimeExports.jsx("div",{className:"proton-Modal__action",children:e.jsxRuntimeExports.jsx(f.Button,{...s})}),N=({children:s})=>e.jsxRuntimeExports.jsx(m.FocusScope,{autoFocus:!0,children:e.jsxRuntimeExports.jsx("div",{className:"proton-Modal__actions",children:s})}),F=({title:s,subtitle:o,body:r,onClose:n,children:c,isClosing:d,"data-testid":x})=>{const t=j.useRef(null),u=b.useOverlayTriggerState({isOpen:!0,onOpenChange:n}),{modalProps:p}=_.useModalOverlay({isDismissable:!1},u,t),{dialogProps:i}=q.useDialog({role:"dialog"},t);S.usePreventScroll();const l=j.useRef(null),{buttonProps:a}=E.useButton({onPress:n,"aria-label":"Close"},l);return e.jsxRuntimeExports.jsx(m.FocusScope,{contain:!0,restoreFocus:!0,autoFocus:!0,children:e.jsxRuntimeExports.jsxs("div",{"data-testid":x,className:O.csx("proton-Modal",d&&"proton-Modal--closing"),...v.mergeProps(p,i),ref:t,children:[e.jsxRuntimeExports.jsx("button",{name:"Close",className:"proton-Modal__close-button",...a,ref:l,children:"×"}),s&&e.jsxRuntimeExports.jsx(M,{children:s}),o&&e.jsxRuntimeExports.jsx(R,{children:o}),r&&e.jsxRuntimeExports.jsx(g,{children:r}),e.jsxRuntimeExports.jsx("div",{className:"proton-Modal__content",children:c})]})})},T=({isOpen:s,onClose:o,title:r,subtitle:n,body:c,children:d,isOverlay:x=!0,"data-testid":t})=>{const u=j.useRef(null),{isClosing:p,handleClose:i}=h.useIsClosing({onClose:o,overlayRef:u}),l=B.useBreakpoint(C.BREAKPOINTS.MEDIUM);if(!s)return null;const a=e.jsxRuntimeExports.jsx(F,{isOpen:s,title:r,subtitle:n,body:c,onClose:i,isClosing:p,"data-testid":t,children:d});return x||l?e.jsxRuntimeExports.jsx(y.ScreenOverlay,{fadeIn:!0,ref:u,onClose:i,children:a}):a},A=Object.assign(T,{Title:M,Subtitle:R,Body:g,Action:P,Actions:N});exports.Modal=A;
+//# sourceMappingURL=Modal.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.cjs.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport { useButton } from \"@react-aria/button\";\nimport { useDialog } from \"@react-aria/dialog\";\nimport { FocusScope } from \"@react-aria/focus\";\nimport { useModalOverlay, usePreventScroll } from \"@react-aria/overlays\";\nimport { mergeProps } from \"@react-aria/utils\";\nimport { useRef } from \"react\";\nimport { useOverlayTriggerState } from \"@react-stately/overlays\";\nimport { BREAKPOINTS } from \"../../constants\";\nimport { useBreakpoint } from \"../../hooks\";\nimport { useIsClosing } from \"../../hooks/useIsClosing\";\nimport { csx } from \"../../utils\";\nimport { Button, ButtonProps } from \"../Button/Button\";\nimport \"./Modal.css\";\nimport { ScreenOverlay } from \"../ScreenOverlay/ScreenOverlay\";\n\nconst ModalTitle = ({ children }: { children: React.ReactNode }) => {\n  return <h2 className=\"proton-Modal__title\">{children}</h2>;\n};\n\nconst ModalSubtitle = ({ children }: { children: React.ReactNode }) => {\n  return <h3 className=\"proton-Modal__subtitle\">{children}</h3>;\n};\n\nconst ModalBody = ({ children }: { children: React.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: React.ReactNode }) => {\n  return (\n    <FocusScope autoFocus>\n      <div className=\"proton-Modal__actions\">{children}</div>\n    </FocusScope>\n  );\n};\n\nconst ModalContent = ({\n  title,\n  subtitle,\n  body,\n  onClose,\n  children,\n  isClosing,\n  \"data-testid\": dataTestId,\n}: ModalProps & {\n  isClosing: boolean;\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const state = useOverlayTriggerState({ isOpen: true, onOpenChange: onClose });\n  const { modalProps } = useModalOverlay(\n    {\n      isDismissable: false, //handle dismiss behavior in useIsClosing\n    },\n    state,\n    ref\n  );\n\n  const { dialogProps } = useDialog({ role: \"dialog\" }, ref);\n  usePreventScroll();\n\n  const closeButtonRef = useRef<HTMLButtonElement>(null);\n  const { buttonProps: closeButtonProps } = useButton(\n    {\n      onPress: onClose,\n      \"aria-label\": \"Close\",\n    },\n    closeButtonRef\n  );\n\n  return (\n    <FocusScope contain restoreFocus autoFocus>\n      <div\n        data-testid={dataTestId}\n        className={csx(\"proton-Modal\", isClosing && \"proton-Modal--closing\")}\n        {...mergeProps(modalProps, dialogProps)}\n        ref={ref}\n      >\n        <button\n          name=\"Close\"\n          className=\"proton-Modal__close-button\"\n          {...closeButtonProps}\n          ref={closeButtonRef}\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    </FocusScope>\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\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  \"data-testid\": dataTestId,\n}: ModalProps) => {\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const { isClosing, handleClose } = useIsClosing({\n    onClose,\n    overlayRef,\n  });\n  const isMobile = useBreakpoint(BREAKPOINTS.MEDIUM);\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    >\n      {children}\n    </ModalContent>\n  );\n\n  return isOverlay || isMobile ? (\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","FocusScope","ModalContent","title","subtitle","body","onClose","isClosing","dataTestId","ref","useRef","state","useOverlayTriggerState","modalProps","useModalOverlay","dialogProps","useDialog","usePreventScroll","closeButtonRef","closeButtonProps","useButton","jsxs","csx","mergeProps","ModalWrapper","isOpen","isOverlay","overlayRef","handleClose","useIsClosing","isMobile","useBreakpoint","BREAKPOINTS","modalContent","ScreenOverlay","Modal"],"mappings":"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"}

package/dist/components/Modal/Modal.es.js

@@ -0,0 +1,122 @@
+import { j as o } from "../../node_modules/react/jsx-runtime.es.js";
+import { useButton as $ } from "../../node_modules/@react-aria/button/dist/useButton.es.js";
+import { useDialog as _ } from "../../node_modules/@react-aria/dialog/dist/useDialog.es.js";
+import { FocusScope as x } from "../../node_modules/@react-aria/focus/dist/FocusScope.es.js";
+import { mergeProps as h } from "@react-aria/utils";
+import { usePreventScroll as g } from "../../node_modules/@react-aria/overlays/dist/usePreventScroll.es.js";
+import { useModalOverlay as v } from "../../node_modules/@react-aria/overlays/dist/useModalOverlay.es.js";
+import { useRef as f } from "react";
+import { useOverlayTriggerState as C } from "../../node_modules/@react-stately/overlays/dist/useOverlayTriggerState.es.js";
+import { useIsClosing as N } from "../../hooks/useIsClosing.es.js";
+import { Button as B } from "../Button/Button.es.js";
+/* empty css             */
+import { ScreenOverlay as P } from "../ScreenOverlay/ScreenOverlay.es.js";
+import { useBreakpoint as S } from "../../hooks/useBreakpoint.es.js";
+import { BREAKPOINTS as y } from "../../constants/breakpoint.es.js";
+import { csx as O } from "../../utils/string.es.js";
+const b = ({ children: t }) => /* @__PURE__ */ o.jsx("h2", { className: "proton-Modal__title", children: t }), M = ({ children: t }) => /* @__PURE__ */ o.jsx("h3", { className: "proton-Modal__subtitle", children: t }), j = ({ children: t }) => /* @__PURE__ */ o.jsx("div", { className: "proton-Modal__body", children: t }), A = (t) => /* @__PURE__ */ o.jsx("div", { className: "proton-Modal__action", children: /* @__PURE__ */ o.jsx(B, { ...t }) }), R = ({ children: t }) => /* @__PURE__ */ o.jsx(x, { autoFocus: !0, children: /* @__PURE__ */ o.jsx("div", { className: "proton-Modal__actions", children: t }) }), F = ({
+  title: t,
+  subtitle: s,
+  body: r,
+  onClose: a,
+  children: d,
+  isClosing: m,
+  "data-testid": p
+}) => {
+  const e = f(null), n = C({ isOpen: !0, onOpenChange: a }), { modalProps: u } = v(
+    {
+      isDismissable: !1
+      //handle dismiss behavior in useIsClosing
+    },
+    n,
+    e
+  ), { dialogProps: l } = _({ role: "dialog" }, e);
+  g();
+  const c = f(null), { buttonProps: i } = $(
+    {
+      onPress: a,
+      "aria-label": "Close"
+    },
+    c
+  );
+  return /* @__PURE__ */ o.jsx(x, { contain: !0, restoreFocus: !0, autoFocus: !0, children: /* @__PURE__ */ o.jsxs(
+    "div",
+    {
+      "data-testid": p,
+      className: O("proton-Modal", m && "proton-Modal--closing"),
+      ...h(u, l),
+      ref: e,
+      children: [
+        /* @__PURE__ */ o.jsx(
+          "button",
+          {
+            name: "Close",
+            className: "proton-Modal__close-button",
+            ...i,
+            ref: c,
+            children: "×"
+          }
+        ),
+        t && /* @__PURE__ */ o.jsx(b, { children: t }),
+        s && /* @__PURE__ */ o.jsx(M, { children: s }),
+        r && /* @__PURE__ */ o.jsx(j, { children: r }),
+        /* @__PURE__ */ o.jsx("div", { className: "proton-Modal__content", children: d })
+      ]
+    }
+  ) });
+}, I = ({
+  isOpen: t,
+  onClose: s,
+  title: r,
+  subtitle: a,
+  body: d,
+  children: m,
+  isOverlay: p = !0,
+  "data-testid": e
+}) => {
+  const n = f(null), { isClosing: u, handleClose: l } = N({
+    onClose: s,
+    overlayRef: n
+  }), c = S(y.MEDIUM);
+  if (!t) return null;
+  const i = /* @__PURE__ */ o.jsx(
+    F,
+    {
+      isOpen: t,
+      title: r,
+      subtitle: a,
+      body: d,
+      onClose: l,
+      isClosing: u,
+      "data-testid": e,
+      children: m
+    }
+  );
+  return p || c ? /* @__PURE__ */ o.jsx(P, { fadeIn: !0, ref: n, onClose: l, children: i }) : i;
+}, X = Object.assign(I, {
+  /**
+   * Renders a h2 styled title
+   * */
+  Title: b,
+  /**
+   * Renders a h3 styled subtitle
+   * */
+  Subtitle: M,
+  /**
+   * Renders a div styled body
+   * */
+  Body: j,
+  /**
+   * Renders a Proton Button action
+   * - @prop buttonProps {@link ButtonProps}
+   * */
+  Action: A,
+  /**
+   * Renders a group of Proton Buttons
+   * */
+  Actions: R
+});
+export {
+  X as Modal
+};
+//# sourceMappingURL=Modal.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.es.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport { useButton } from \"@react-aria/button\";\nimport { useDialog } from \"@react-aria/dialog\";\nimport { FocusScope } from \"@react-aria/focus\";\nimport { useModalOverlay, usePreventScroll } from \"@react-aria/overlays\";\nimport { mergeProps } from \"@react-aria/utils\";\nimport { useRef } from \"react\";\nimport { useOverlayTriggerState } from \"@react-stately/overlays\";\nimport { BREAKPOINTS } from \"../../constants\";\nimport { useBreakpoint } from \"../../hooks\";\nimport { useIsClosing } from \"../../hooks/useIsClosing\";\nimport { csx } from \"../../utils\";\nimport { Button, ButtonProps } from \"../Button/Button\";\nimport \"./Modal.css\";\nimport { ScreenOverlay } from \"../ScreenOverlay/ScreenOverlay\";\n\nconst ModalTitle = ({ children }: { children: React.ReactNode }) => {\n  return <h2 className=\"proton-Modal__title\">{children}</h2>;\n};\n\nconst ModalSubtitle = ({ children }: { children: React.ReactNode }) => {\n  return <h3 className=\"proton-Modal__subtitle\">{children}</h3>;\n};\n\nconst ModalBody = ({ children }: { children: React.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: React.ReactNode }) => {\n  return (\n    <FocusScope autoFocus>\n      <div className=\"proton-Modal__actions\">{children}</div>\n    </FocusScope>\n  );\n};\n\nconst ModalContent = ({\n  title,\n  subtitle,\n  body,\n  onClose,\n  children,\n  isClosing,\n  \"data-testid\": dataTestId,\n}: ModalProps & {\n  isClosing: boolean;\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const state = useOverlayTriggerState({ isOpen: true, onOpenChange: onClose });\n  const { modalProps } = useModalOverlay(\n    {\n      isDismissable: false, //handle dismiss behavior in useIsClosing\n    },\n    state,\n    ref\n  );\n\n  const { dialogProps } = useDialog({ role: \"dialog\" }, ref);\n  usePreventScroll();\n\n  const closeButtonRef = useRef<HTMLButtonElement>(null);\n  const { buttonProps: closeButtonProps } = useButton(\n    {\n      onPress: onClose,\n      \"aria-label\": \"Close\",\n    },\n    closeButtonRef\n  );\n\n  return (\n    <FocusScope contain restoreFocus autoFocus>\n      <div\n        data-testid={dataTestId}\n        className={csx(\"proton-Modal\", isClosing && \"proton-Modal--closing\")}\n        {...mergeProps(modalProps, dialogProps)}\n        ref={ref}\n      >\n        <button\n          name=\"Close\"\n          className=\"proton-Modal__close-button\"\n          {...closeButtonProps}\n          ref={closeButtonRef}\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    </FocusScope>\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\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  \"data-testid\": dataTestId,\n}: ModalProps) => {\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const { isClosing, handleClose } = useIsClosing({\n    onClose,\n    overlayRef,\n  });\n  const isMobile = useBreakpoint(BREAKPOINTS.MEDIUM);\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    >\n      {children}\n    </ModalContent>\n  );\n\n  return isOverlay || isMobile ? (\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","FocusScope","ModalContent","title","subtitle","body","onClose","isClosing","dataTestId","ref","useRef","state","useOverlayTriggerState","modalProps","useModalOverlay","dialogProps","useDialog","usePreventScroll","closeButtonRef","closeButtonProps","useButton","jsxs","csx","mergeProps","ModalWrapper","isOpen","isOverlay","overlayRef","handleClose","useIsClosing","isMobile","useBreakpoint","BREAKPOINTS","modalContent","ScreenOverlay","Modal"],"mappings":"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"}

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

@@ -0,0 +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 j=require("../ThemeProvider.cjs.js"),v=require("../../utils/string.cjs.js");function s({trigger:o,children:t,open:i,defaultOpen:n,onOpenChange:a,side:p="top",align:x="center",arrow:l=!1,constrainWidth:c=!1,"data-testid":u}){const{className:d,style:m}=j.useTheme();return e.jsxRuntimeExports.jsxs(r.Popover.Root,{open:i,defaultOpen:n,onOpenChange:a,children:[e.jsxRuntimeExports.jsx(r.Popover.Trigger,{asChild:!0,children:e.jsxRuntimeExports.jsx("div",{children:o})}),e.jsxRuntimeExports.jsx(r.Popover.Portal,{children:e.jsxRuntimeExports.jsxs(r.Popover.Content,{side:p,sideOffset:2,align:x,style:m,className:v.csx("proton-Popover",c&&"proton-Popover__constrained",d),"data-testid":u,children:[l&&e.jsxRuntimeExports.jsx(r.Popover.Arrow,{className:"arrow"}),t]})})]})}s.displayName="Popover";exports.Popover=s;
+//# sourceMappingURL=Popover.cjs.js.map

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

@@ -0,0 +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   * The trigger element for the popover.\n   */\n  trigger: React.ReactNode;\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   * Control open state (controlled mode).\n   */\n  open?: boolean;\n  /**\n   * Default open state (uncontrolled mode).\n   */\n  defaultOpen?: boolean;\n  /**\n   * Callback when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Popover side placement\n   * {@link PopoverSide}\n   */\n  side?: PopoverSide;\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   * Test id for the popover content.\n   */\n  \"data-testid\"?: string;\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  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={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n    >\n      <RadixPopover.Trigger asChild>\n        <div>{trigger}</div>\n      </RadixPopover.Trigger>\n\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    </RadixPopover.Root>\n  );\n}\n\nPopover.displayName = \"Popover\";\n"],"names":["Popover","trigger","children","open","defaultOpen","onOpenChange","side","align","arrow","constrainWidth","testId","themeClass","themeStyle","useTheme","jsxs","RadixPopover","jsx","csx"],"mappings":"uRAiEO,SAASA,EAAQ,CACtB,QAAAC,EACA,SAAAC,EACA,KAAAC,EACA,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,KAAAZ,EACA,YAAAC,EACA,aAAAC,EAEA,SAAA,CAACW,EAAAA,kBAAAA,IAAAD,EAAAA,QAAa,QAAb,CAAqB,QAAO,GAC3B,SAACC,EAAA,kBAAA,IAAA,MAAA,CAAK,WAAQ,CAChB,CAAA,EAEAA,EAAAA,kBAAAA,IAACD,EAAa,QAAA,OAAb,CACC,SAAAD,EAAA,kBAAA,KAACC,EAAAA,QAAa,QAAb,CACC,KAAAT,EACA,WAAY,EACZ,MAAAC,EACA,MAAOK,EACP,UAAWK,EAAA,IACT,iBACAR,GAAkB,8BAClBE,CACF,EACA,cAAaD,EAEZ,SAAA,CAAAF,GAAUQ,EAAA,kBAAA,IAAAD,EAAA,QAAa,MAAb,CAAmB,UAAU,QAAQ,EAC/Cb,CAAA,CAAA,CAAA,EAEL,CAAA,CAAA,CAAA,CAGN,CAEAF,EAAQ,YAAc"}

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

@@ -0,0 +1,54 @@
+import { j as e } from "../../node_modules/react/jsx-runtime.es.js";
+import { Popover as o } from "radix-ui";
+/* empty css               */
+import { useTheme as f } from "../ThemeProvider.es.js";
+import { csx as h } from "../../utils/string.es.js";
+function j({
+  trigger: r,
+  children: s,
+  open: t,
+  defaultOpen: a,
+  onOpenChange: i,
+  side: l = "top",
+  align: m = "center",
+  arrow: n = !1,
+  constrainWidth: p = !1,
+  "data-testid": d
+}) {
+  const { className: c, style: x } = f();
+  return /* @__PURE__ */ e.jsxs(
+    o.Root,
+    {
+      open: t,
+      defaultOpen: a,
+      onOpenChange: i,
+      children: [
+        /* @__PURE__ */ e.jsx(o.Trigger, { asChild: !0, children: /* @__PURE__ */ e.jsx("div", { children: r }) }),
+        /* @__PURE__ */ e.jsx(o.Portal, { children: /* @__PURE__ */ e.jsxs(
+          o.Content,
+          {
+            side: l,
+            sideOffset: 2,
+            align: m,
+            style: x,
+            className: h(
+              "proton-Popover",
+              p && "proton-Popover__constrained",
+              c
+            ),
+            "data-testid": d,
+            children: [
+              n && /* @__PURE__ */ e.jsx(o.Arrow, { className: "arrow" }),
+              s
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+j.displayName = "Popover";
+export {
+  j as Popover
+};
+//# sourceMappingURL=Popover.es.js.map

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

@@ -0,0 +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   * The trigger element for the popover.\n   */\n  trigger: React.ReactNode;\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   * Control open state (controlled mode).\n   */\n  open?: boolean;\n  /**\n   * Default open state (uncontrolled mode).\n   */\n  defaultOpen?: boolean;\n  /**\n   * Callback when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Popover side placement\n   * {@link PopoverSide}\n   */\n  side?: PopoverSide;\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   * Test id for the popover content.\n   */\n  \"data-testid\"?: string;\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  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={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n    >\n      <RadixPopover.Trigger asChild>\n        <div>{trigger}</div>\n      </RadixPopover.Trigger>\n\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    </RadixPopover.Root>\n  );\n}\n\nPopover.displayName = \"Popover\";\n"],"names":["Popover","trigger","children","open","defaultOpen","onOpenChange","side","align","arrow","constrainWidth","testId","themeClass","themeStyle","useTheme","jsxs","RadixPopover","jsx","csx"],"mappings":";;;;;AAiEO,SAASA,EAAQ;AAAA,EACtB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,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,MAAAZ;AAAA,MACA,aAAAC;AAAA,MACA,cAAAC;AAAA,MAEA,UAAA;AAAA,QAACW,gBAAAA,EAAAA,IAAAD,EAAa,SAAb,EAAqB,SAAO,IAC3B,UAACC,gBAAAA,EAAA,IAAA,OAAA,EAAK,aAAQ,EAChB,CAAA;AAAA,QAEAA,gBAAAA,EAAAA,IAACD,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,WAAWK;AAAA,cACT;AAAA,cACAR,KAAkB;AAAA,cAClBE;AAAA,YACF;AAAA,YACA,eAAaD;AAAA,YAEZ,UAAA;AAAA,cAAAF,KAAUQ,gBAAAA,EAAA,IAAAD,EAAa,OAAb,EAAmB,WAAU,SAAQ;AAAA,cAC/Cb;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,GAEL;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;AAEAF,EAAQ,cAAc;"}

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

@@ -0,0 +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 m=require("radix-ui"),a=require("../ThemeProvider.cjs.js"),y=require("../../utils/string.cjs.js"),i=n.forwardRef(({fadeIn:o=!1,onClose:e,children:c},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(m.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",role:"dialog","aria-modal":"true","data-testid":"screen-overlay",className:y.csx("proton-ScreenOverlay__background","proton-ScreenOverlay__z-index",o&&"proton-ScreenOverlay__fade-in"),onClick:r=>{e&&r.target===r.currentTarget&&e()},children:c})})})});i.displayName="ProtonUIScreenOverlay";exports.ScreenOverlay=i;
+//# sourceMappingURL=ScreenOverlay.cjs.js.map

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

@@ -0,0 +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            role=\"dialog\"\n            aria-modal=\"true\"\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,KAAK,SACL,aAAW,OACX,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"}

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

@@ -0,0 +1,44 @@
+import { j as t } from "../../node_modules/react/jsx-runtime.es.js";
+import { forwardRef as m, useEffect as s } from "react";
+/* empty css                     */
+import { Portal as l } from "radix-ui";
+import { useTheme as f, ThemeProvider as p } from "../ThemeProvider.es.js";
+import { csx as u } from "../../utils/string.es.js";
+const y = m(
+  ({ fadeIn: o = !1, onClose: e, children: a }, n) => {
+    const { theme: i, palette: c } = f();
+    return s(() => {
+      if (!e) return;
+      const r = (d) => {
+        d.key === "Escape" && e();
+      };
+      return document.addEventListener("keydown", r), () => {
+        document.removeEventListener("keydown", r);
+      };
+    }, [e]), /* @__PURE__ */ t.jsx(l.Root, { children: /* @__PURE__ */ t.jsx(p, { theme: i, palette: c, children: /* @__PURE__ */ t.jsx(
+      "div",
+      {
+        ref: n,
+        id: "background",
+        "aria-label": "Background overlay",
+        role: "dialog",
+        "aria-modal": "true",
+        "data-testid": "screen-overlay",
+        className: u(
+          "proton-ScreenOverlay__background",
+          "proton-ScreenOverlay__z-index",
+          o && "proton-ScreenOverlay__fade-in"
+        ),
+        onClick: (r) => {
+          e && r.target === r.currentTarget && e();
+        },
+        children: a
+      }
+    ) }) });
+  }
+);
+y.displayName = "ProtonUIScreenOverlay";
+export {
+  y as ScreenOverlay
+};
+//# sourceMappingURL=ScreenOverlay.es.js.map

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

@@ -0,0 +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            role=\"dialog\"\n            aria-modal=\"true\"\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,MAAK;AAAA,QACL,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;"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../node_modules/react/jsx-runtime.cjs.js"),a=require("react"),n=require("radix-ui"),T=require("../../hooks/useBreakpoint.cjs.js"),P=require("../ActionMenu/ActionMenu.cjs.js");;/* empty css                */;/* empty css                    */const A=require("../ThemeProvider.cjs.js"),m=require("../../utils/string.cjs.js"),C=require("../../constants/breakpoint.cjs.js"),E=a.forwardRef(({disabled:r,isOpen:i,children:o,onClick:l,isRounded:s,...x},h)=>e.jsxRuntimeExports.jsx("button",{...x,ref:h,disabled:r,onClick:l,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}));E.displayName="ProtonUISelectButton";function k({label:r,name:i,isDisabled:o,disabledKeys:l,selectedKey:s,onSelectionChange:x,defaultSelectedKey:h,onOpen:S,onClose:R,items:_,isRounded:g=!1,"data-testid":f}){const[c,p]=a.useState(!1),[I,v]=a.useState(s||h||""),{className:M,style:q}=A.useTheme(),w=T.useBreakpoint(C.BREAKPOINTS.MEDIUM),N=a.useRef(null),u=a.useRef(null),d=s!==void 0?s:I,j=_.find(t=>t.key===d),b=t=>{s===void 0&&v(t),x==null||x(t),u.current&&(u.current.value=t,u.current.dispatchEvent(new Event("change",{bubbles:!0})))},y=t=>{p(t),t?S==null||S():R==null||R()};a.useEffect(()=>{s!==void 0&&v(s)},[s]);const B=_.map(t=>({key:t.key,label:t.label,to:t.to,onAction:()=>{b(t.key),p(!1)}}));return w?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:u,type:"hidden",name:i,value:d,"data-testid":"hidden-select-container"}),e.jsxRuntimeExports.jsxs(E,{isOpen:c,isRounded:g,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",c&&"proton-Select__trigger_icon--flipped"),"aria-hidden":"true",children:e.jsxRuntimeExports.jsxs("svg",{id:"caret-down",viewBox:"0 0 512 512",children:[e.jsxRuntimeExports.jsx("title",{children:c?"caret down":"caret up"}),e.jsxRuntimeExports.jsx("path",{fill:"currentColor",d:"M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7L86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"})]})})]}),e.jsxRuntimeExports.jsx(P.ActionMenu,{isOpen:c,onClose:()=>p(!1),actions:B,selectedKeys:[d],disabledKeys:l})]}):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:u,type:"hidden",name:i,value:d,"data-testid":"hidden-select-container"}),e.jsxRuntimeExports.jsxs(n.Select.Root,{value:d,onValueChange:b,onOpenChange:y,disabled:o,children:[e.jsxRuntimeExports.jsx(n.Select.Trigger,{asChild:!0,children:e.jsxRuntimeExports.jsxs(E,{isRounded:g,isOpen:c,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",c&&"proton-Select__trigger_icon--flipped"),"aria-hidden":"true",children:e.jsxRuntimeExports.jsxs("svg",{id:"caret-down",viewBox:"0 0 512 512",children:[e.jsxRuntimeExports.jsx("title",{children:c?"caret down":"caret up"}),e.jsxRuntimeExports.jsx("path",{fill:"currentColor",d:"M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7L86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"})]})})})]})}),e.jsxRuntimeExports.jsx(n.Select.Portal,{children:e.jsxRuntimeExports.jsx(n.Select.Content,{className:m.csx("proton-Menu","proton-MenuTrigger__menu",M),style:q,position:"popper",children:e.jsxRuntimeExports.jsx(n.Select.Viewport,{children:_.map(t=>e.jsxRuntimeExports.jsx(n.Select.Item,{value:t.key,disabled:l==null?void 0:l.includes(t.key),className:"proton-Menu__item",children:e.jsxRuntimeExports.jsx(n.Select.ItemText,{children:t.label})},t.key))})})})]})]})}k.displayName="ProtonUISelect";exports.Select=k;
+//# sourceMappingURL=Select.cjs.js.map

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

@@ -0,0 +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} from \"react\";\nimport { Select as RadixSelect } from \"radix-ui\";\n\nimport { BREAKPOINTS } from \"../../constants\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\nimport { csx } from \"../../utils\";\nimport { ActionMenu, ActionMenuAction } from \"../ActionMenu/ActionMenu\";\n\nimport \"./Select.css\";\nimport \"../Menu/Menu.css\";\nimport { useTheme } from \"../ThemeProvider\";\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.\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            <svg id=\"caret-down\" viewBox=\"0 0 512 512\">\n              <title>{isOpen ? \"caret down\" : \"caret up\"}</title>\n              <path\n                fill=\"currentColor\"\n                d=\"M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7L86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z\"\n              />\n            </svg>\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                <svg id=\"caret-down\" viewBox=\"0 0 512 512\">\n                  <title>{isOpen ? \"caret down\" : \"caret up\"}</title>\n                  <path\n                    fill=\"currentColor\"\n                    d=\"M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7L86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z\"\n                  />\n                </svg>\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 React.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","ActionMenu","RadixSelect"],"mappings":"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"}