@protonradio/proton-ui 0.12.5 → 0.12.6

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

@@ -1,34 +1,29 @@
 import { j as t } from "../../node_modules/react/jsx-runtime.es.js";
-import { useRef as _ } from "react";
-import { useIsClosing as f } from "../../hooks/useIsClosing.es.js";
-import { Button as h } from "../Button/Button.es.js";
+import { useRef as M } from "react";
+import { useIsClosing as _ } from "../../hooks/useIsClosing.es.js";
+import { Button as f } from "../Button/Button.es.js";
 /* empty css             */
-import { ScreenOverlay as C } from "../ScreenOverlay/ScreenOverlay.es.js";
+import { ScreenOverlay as h } from "../ScreenOverlay/ScreenOverlay.es.js";
 /* empty css                            */
-import { csx as v } from "../../utils/string.es.js";
-const p = ({ children: o }) => /* @__PURE__ */ t.jsx("h2", { className: "proton-Modal__title", children: o }), x = ({ children: o }) => /* @__PURE__ */ t.jsx("h3", { className: "proton-Modal__subtitle", children: o }), M = ({ children: o }) => /* @__PURE__ */ t.jsx("div", { className: "proton-Modal__body", children: o }), b = (o) => /* @__PURE__ */ t.jsx("div", { className: "proton-Modal__action", children: /* @__PURE__ */ t.jsx(h, { ...o }) }), N = ({ children: o }) => /* @__PURE__ */ t.jsx("div", { className: "proton-Modal__actions", children: o }), w = {
-  medium: "650px",
-  full: "86vw"
-}, g = ({
+import { csx as C } from "../../utils/string.es.js";
+const u = ({ children: o }) => /* @__PURE__ */ t.jsx("h2", { className: "proton-Modal__title", children: o }), p = ({ children: o }) => /* @__PURE__ */ t.jsx("h3", { className: "proton-Modal__subtitle", children: o }), x = ({ children: o }) => /* @__PURE__ */ t.jsx("div", { className: "proton-Modal__body", children: o }), b = (o) => /* @__PURE__ */ t.jsx("div", { className: "proton-Modal__action", children: /* @__PURE__ */ t.jsx(f, { ...o }) }), v = ({ children: o }) => /* @__PURE__ */ t.jsx("div", { className: "proton-Modal__actions", children: o }), N = ({
   title: o,
   subtitle: s,
   body: n,
   onClose: a,
   children: e,
-  isClosing: r,
-  isOpen: d,
-  width: l,
-  "data-testid": i
+  isClosing: l,
+  isOpen: r,
+  "data-testid": d
 }) => /* @__PURE__ */ t.jsxs(
   "div",
   {
-    "data-testid": i,
-    "data-disable-document-scroll": d,
-    className: v(
+    "data-testid": d,
+    "data-disable-document-scroll": r,
+    className: C(
       "proton-Modal",
-      l && `proton-Modal--${l}`,
       "proton-Elevation--glass",
-      r && "proton-Modal--closing"
+      l && "proton-Modal--closing"
     ),
     "aria-modal": "true",
     role: "dialog",
@@ -44,56 +39,54 @@ const p = ({ children: o }) => /* @__PURE__ */ t.jsx("h2", { className: "proton-
           children: "×"
         }
       ),
-      o && /* @__PURE__ */ t.jsx(p, { children: o }),
-      s && /* @__PURE__ */ t.jsx(x, { children: s }),
-      n && /* @__PURE__ */ t.jsx(M, { children: n }),
+      o && /* @__PURE__ */ t.jsx(u, { children: o }),
+      s && /* @__PURE__ */ t.jsx(p, { children: s }),
+      n && /* @__PURE__ */ t.jsx(x, { children: n }),
       /* @__PURE__ */ t.jsx("div", { className: "proton-Modal__content", children: e })
     ]
   }
-), y = ({
+), g = ({
   isOpen: o,
   onClose: s,
   title: n,
   subtitle: a,
   body: e,
-  children: r,
-  isOverlay: d = !0,
-  width: l = "full",
-  "data-testid": i
+  children: l,
+  isOverlay: r = !0,
+  "data-testid": d
 }) => {
-  const c = _(null), { isClosing: j, handleClose: m } = f({
+  const i = M(null), { isClosing: j, handleClose: c } = _({
     onClose: s,
-    overlayRef: c
+    overlayRef: i
   });
   if (!o) return null;
-  const u = /* @__PURE__ */ t.jsx(
-    g,
+  const m = /* @__PURE__ */ t.jsx(
+    N,
     {
       isOpen: o,
       title: n,
       subtitle: a,
       body: e,
-      onClose: m,
+      onClose: c,
       isClosing: j,
-      "data-testid": i,
-      width: l,
-      children: r
+      "data-testid": d,
+      children: l
     }
   );
-  return d ? /* @__PURE__ */ t.jsx(C, { fadeIn: !0, ref: c, onClose: m, children: u }) : u;
-}, O = Object.assign(y, {
+  return r ? /* @__PURE__ */ t.jsx(h, { fadeIn: !0, ref: i, onClose: c, children: m }) : m;
+}, k = Object.assign(g, {
   /**
    * Renders a h2 styled title
    * */
-  Title: p,
+  Title: u,
   /**
    * Renders a h3 styled subtitle
    * */
-  Subtitle: x,
+  Subtitle: p,
   /**
    * Renders a div styled body
    * */
-  Body: M,
+  Body: x,
   /**
    * Renders a Proton Button action
    * - @prop buttonProps {@link ButtonProps}
@@ -102,10 +95,9 @@ const p = ({ children: o }) => /* @__PURE__ */ t.jsx("h2", { className: "proton-
   /**
    * Renders a group of Proton Buttons
    * */
-  Actions: N
+  Actions: v
 });
 export {
-  O as Modal,
-  w as widthVariants
+  k as Modal
 };
 //# sourceMappingURL=Modal.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.es.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRef } from \"react\";\nimport { useIsClosing } from \"../../hooks/useIsClosing\";\nimport { csx } from \"../../utils\";\nimport { Button, ButtonProps } from \"../Button/Button\";\nimport \"./Modal.css\";\nimport { ScreenOverlay } from \"../ScreenOverlay/ScreenOverlay\";\nimport \"../Elevation/Elevation.css\";\n\nconst ModalTitle = ({ children }: { children: 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 <div className=\"proton-Modal__actions\">{children}</div>;\n};\n\n// Different base fonts (10px on the client, 16px on release links) is really setting back development on the kit.\n// Known issue: We should standardize both repos to base font size of 16px... then we can use rems for all sizes.\n// For now lets use a width prop, with a todo: standardize these sizes to represent modal widths across release links / client\n\n/**\n * Width variant for the modal (will be standardized in future release)\n *  - medium: 650px  (standard modal width on client)\n *  - full: 86vw  (default modal width)\n */\nexport type WidthVariant = \"medium\" | \"full\";\nexport const widthVariants: Record<WidthVariant, string> = {\n  medium: \"650px\",\n  full: \"86vw\",\n};\n\nconst ModalContent = ({\n  title,\n  subtitle,\n  body,\n  onClose,\n  children,\n  isClosing,\n  isOpen,\n  width,\n  \"data-testid\": dataTestId,\n}: ModalProps & {\n  isClosing: boolean;\n}) => {\n  return (\n    <div\n      data-testid={dataTestId}\n      data-disable-document-scroll={isOpen}\n      className={csx(\n        \"proton-Modal\",\n        width && `proton-Modal--${width}`,\n        \"proton-Elevation--glass\",\n        isClosing && \"proton-Modal--closing\",\n      )}\n      aria-modal=\"true\"\n      role=\"dialog\"\n      tabIndex={-1}\n    >\n      <button\n        name=\"Close\"\n        className=\"proton-Modal__close-button\"\n        onClick={onClose}\n        aria-label=\"Close\"\n      >\n        ×\n      </button>\n      {title && <ModalTitle>{title}</ModalTitle>}\n      {subtitle && <ModalSubtitle>{subtitle}</ModalSubtitle>}\n      {body && <ModalBody>{body}</ModalBody>}\n      <div className=\"proton-Modal__content\">{children}</div>\n    </div>\n  );\n};\n\nexport interface ModalProps {\n  /**\n   * Optional body text content for the modal\n   * */\n  body?: string;\n  /**\n   * Content to render inside the modal\n   * */\n  children: React.ReactNode;\n  /**\n   * data-testid for the modal\n   * */\n  \"data-testid\"?: string;\n  /**\n   * Controls the visibility of the modal\n   * */\n  isOpen: boolean;\n  /**\n   * Whether to show the modal with an overlay background.\n   * @default true\n   * */\n  isOverlay?: boolean;\n  /**\n   * Callback function when modal is closed\n   * */\n  onClose?: () => void;\n  /**\n   * Optional subtitle text below the modal title\n   * */\n  subtitle?: string;\n  /**\n   * Optional title text for the modal header\n   * */\n  title?: string;\n  /**\n   * Optional width variant for the modal\n   * - type {@link WidthVariant}\n   * @default \"full\"\n   * */\n  width?: WidthVariant;\n}\n\n/**\n * Modal component with overlay support and responsive behavior.\n *\n * API:\n *  - {@link ModalProps}\n */\nconst ModalWrapper = ({\n  isOpen,\n  onClose,\n  title,\n  subtitle,\n  body,\n  children,\n  isOverlay = true,\n  width = \"full\",\n  \"data-testid\": dataTestId,\n}: ModalProps) => {\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const { isClosing, handleClose } = useIsClosing({\n    onClose,\n    overlayRef,\n  });\n\n  if (!isOpen) return null;\n\n  const modalContent = (\n    <ModalContent\n      isOpen={isOpen}\n      title={title}\n      subtitle={subtitle}\n      body={body}\n      onClose={handleClose}\n      isClosing={isClosing}\n      data-testid={dataTestId}\n      width={width}\n    >\n      {children}\n    </ModalContent>\n  );\n\n  return isOverlay ? (\n    <ScreenOverlay fadeIn ref={overlayRef} onClose={handleClose}>\n      {modalContent}\n    </ScreenOverlay>\n  ) : (\n    modalContent\n  );\n};\n\nexport const Modal = Object.assign(ModalWrapper, {\n  /**\n   * Renders a h2 styled title\n   * */\n  Title: ModalTitle,\n  /**\n   * Renders a h3 styled subtitle\n   * */\n  Subtitle: ModalSubtitle,\n  /**\n   * Renders a div styled body\n   * */\n  Body: ModalBody,\n  /**\n   * Renders a Proton Button action\n   * - @prop buttonProps {@link ButtonProps}\n   * */\n  Action: ModalAction,\n  /**\n   * Renders a group of Proton Buttons\n   * */\n  Actions: ModalActions,\n});\n"],"names":["ModalTitle","children","jsx","ModalSubtitle","ModalBody","ModalAction","buttonProps","Button","ModalActions","widthVariants","ModalContent","title","subtitle","body","onClose","isClosing","isOpen","width","dataTestId","jsxs","csx","ModalWrapper","isOverlay","overlayRef","useRef","handleClose","useIsClosing","modalContent","ScreenOverlay","Modal"],"mappings":"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"}
+{"version":3,"file":"Modal.es.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRef } from \"react\";\nimport { useIsClosing } from \"../../hooks/useIsClosing\";\nimport { csx } from \"../../utils\";\nimport { Button, ButtonProps } from \"../Button/Button\";\nimport \"./Modal.css\";\nimport { ScreenOverlay } from \"../ScreenOverlay/ScreenOverlay\";\nimport \"../Elevation/Elevation.css\";\n\nconst ModalTitle = ({ children }: { children: 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 <div className=\"proton-Modal__actions\">{children}</div>;\n};\n\nconst ModalContent = ({\n  title,\n  subtitle,\n  body,\n  onClose,\n  children,\n  isClosing,\n  isOpen,\n  \"data-testid\": dataTestId,\n}: ModalProps & {\n  isClosing: boolean;\n}) => {\n  return (\n    <div\n      data-testid={dataTestId}\n      data-disable-document-scroll={isOpen}\n      className={csx(\n        \"proton-Modal\",\n        \"proton-Elevation--glass\",\n        isClosing && \"proton-Modal--closing\",\n      )}\n      aria-modal=\"true\"\n      role=\"dialog\"\n      tabIndex={-1}\n    >\n      <button\n        name=\"Close\"\n        className=\"proton-Modal__close-button\"\n        onClick={onClose}\n        aria-label=\"Close\"\n      >\n        ×\n      </button>\n      {title && <ModalTitle>{title}</ModalTitle>}\n      {subtitle && <ModalSubtitle>{subtitle}</ModalSubtitle>}\n      {body && <ModalBody>{body}</ModalBody>}\n      <div className=\"proton-Modal__content\">{children}</div>\n    </div>\n  );\n};\n\nexport interface ModalProps {\n  /**\n   * Optional body text content for the modal\n   * */\n  body?: string;\n  /**\n   * Content to render inside the modal\n   * */\n  children: React.ReactNode;\n  /**\n   * data-testid for the modal\n   * */\n  \"data-testid\"?: string;\n  /**\n   * Controls the visibility of the modal\n   * */\n  isOpen: boolean;\n  /**\n   * Whether to show the modal with an overlay background.\n   * @default true\n   * */\n  isOverlay?: boolean;\n  /**\n   * Callback function when modal is closed\n   * */\n  onClose?: () => void;\n  /**\n   * Optional subtitle text below the modal title\n   * */\n  subtitle?: string;\n  /**\n   * Optional title text for the modal header\n   * */\n  title?: string;\n}\n\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\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 ? (\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","ModalContent","title","subtitle","body","onClose","isClosing","isOpen","dataTestId","jsxs","csx","ModalWrapper","isOverlay","overlayRef","useRef","handleClose","useIsClosing","modalContent","ScreenOverlay","Modal"],"mappings":"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"}

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"),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;
+"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:a,onOpenChange:o,side:l="top",align:p="center",arrow:u=!1,constrainWidth:c=!1,"data-testid":d}){const{className:j,style:m}=h.useTheme();return e.jsxRuntimeExports.jsxs(r.Popover.Root,{open:t?!1:x,defaultOpen:a,onOpenChange:v=>{t||o==null||o(v)},children:[e.jsxRuntimeExports.jsx(r.Popover.Trigger,{asChild:!0,children:e.jsxRuntimeExports.jsx("div",{className:"proton-Popover-trigger","aria-disabled":t,children:i})}),!t&&e.jsxRuntimeExports.jsx(r.Popover.Portal,{children:e.jsxRuntimeExports.jsx(r.Popover.Content,{side:l,sideOffset:2,align:p,style:m,className:P.csx("proton-Popover","proton-Elevation--glass",c&&"proton-Popover__constrained",j),"data-testid":d,children:e.jsxRuntimeExports.jsx(R.Overlay,{arrow:u&&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 { 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"}
+{"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.Content`.\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\n          className=\"proton-Popover-trigger\"\n          aria-disabled={isDisabled}\n        >\n          {trigger}\n        </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,SAAAE,EAAAA,kBAAAA,IAAC,MAAA,CACC,UAAU,yBACV,gBAAed,EAEd,SAAAH,CAAA,CAAA,EAEL,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,7 +1,7 @@
 import { j as r } from "../../node_modules/react/jsx-runtime.es.js";
 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 { useTheme as v } from "../ThemeProvider.es.js";
+import { csx as j } from "../../utils/string.es.js";
 import { Overlay as P } from "../Overlay/Overlay.es.js";
 /* empty css                            */
 /* empty css               */
@@ -12,13 +12,13 @@ function u({
   isDisabled: t = !1,
   defaultOpen: l,
   onOpenChange: e,
-  side: m = "top",
-  align: p = "center",
+  side: p = "top",
+  align: m = "center",
   arrow: d = !1,
-  constrainWidth: h = !1,
-  "data-testid": n
+  constrainWidth: n = !1,
+  "data-testid": c
 }) {
-  const { className: c, style: x } = j();
+  const { className: h, style: x } = v();
   return /* @__PURE__ */ r.jsxs(
     o.Root,
     {
@@ -28,21 +28,28 @@ function u({
         t || e == null || e(f);
       },
       children: [
-        /* @__PURE__ */ r.jsx(o.Trigger, { asChild: !0, children: /* @__PURE__ */ r.jsx("div", { "aria-disabled": t, children: s }) }),
+        /* @__PURE__ */ r.jsx(o.Trigger, { asChild: !0, children: /* @__PURE__ */ r.jsx(
+          "div",
+          {
+            className: "proton-Popover-trigger",
+            "aria-disabled": t,
+            children: s
+          }
+        ) }),
         !t && /* @__PURE__ */ r.jsx(o.Portal, { children: /* @__PURE__ */ r.jsx(
           o.Content,
           {
-            side: m,
+            side: p,
             sideOffset: 2,
-            align: p,
+            align: m,
             style: x,
-            className: v(
+            className: j(
               "proton-Popover",
               "proton-Elevation--glass",
-              h && "proton-Popover__constrained",
-              c
+              n && "proton-Popover__constrained",
+              h
             ),
-            "data-testid": n,
+            "data-testid": c,
             children: /* @__PURE__ */ r.jsx(
               P,
               {

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 { 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;"}
+{"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.Content`.\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\n          className=\"proton-Popover-trigger\"\n          aria-disabled={isDisabled}\n        >\n          {trigger}\n        </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,UAAAE,gBAAAA,EAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,iBAAed;AAAA,YAEd,UAAAH;AAAA,UAAA;AAAA,QAAA,GAEL;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.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,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"}
+{"version":3,"file":"ScreenOverlay.cjs.js","sources":["../../../src/components/ScreenOverlay/ScreenOverlay.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useEffect, type MouseEvent } 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: 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,GAAsB,CACzBR,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,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;"}
+{"version":3,"file":"ScreenOverlay.es.js","sources":["../../../src/components/ScreenOverlay/ScreenOverlay.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useEffect, type MouseEvent } 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: 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,MAAsB;AAC9B,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.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  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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"}
+{"version":3,"file":"Select.cjs.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\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.map

@@ -1 +1 @@
-{"version":3,"file":"Select.es.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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"}
+{"version":3,"file":"Select.es.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\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/Text/TextEllipsis/TextEllipsis.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextEllipsis.cjs.js","sources":["../../../../src/components/Text/TextEllipsis/TextEllipsis.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode } from \"react\";\nimport { csx } from \"../../../utils\";\nimport \"./TextEllipsis.css\";\n\ninterface TextEllipsisProps {\n  /**\n   * The content to display within the text ellipsis.\n   */\n  children: ReactNode;\n\n  /**\n   * The maximum width of the text container in any valid CSS unit (px, rem, em, %, etc.).\n   * When the container width is less than this value, text will be truncated with an ellipsis.\n   */\n  maxWidth?: string | number;\n\n  /**\n   * Whether to truncate the text to a single line. Default is true.\n   * If false, the text will wrap to multiple lines.\n   */\n  singleLine?: boolean;\n\n  /**\n   * The number of lines to show before truncating with an ellipsis.\n   * Only applies when singleLine is false.\n   */\n  lines?: number;\n\n  /**\n   * The title attribute to show on hover. If not provided and singleLine is true,\n   * the children will be used as the title (if children is a string).\n   */\n  title?: string;\n\n  /**\n   * A test ID.\n   */\n  \"data-testid\"?: string;\n}\n\n/**\n * A component that displays text with an ellipsis when it overflows its container.\n *\n * API:\n *  - {@link TextEllipsisProps}\n */\nexport const TextEllipsis = ({\n  children,\n  maxWidth,\n  singleLine = true,\n  lines = 1,\n  title,\n  \"data-testid\": testId,\n}: TextEllipsisProps) => {\n  return (\n    <div\n      className={csx(\n        \"proton-TextEllipsis\",\n        singleLine || lines === 1\n          ? \"proton-TextEllipsis--single-line\"\n          : lines > 1\n            ? \"proton-TextEllipsis--multi-line\"\n            : \"\"\n      )}\n      style={{\n        maxWidth: maxWidth,\n        WebkitLineClamp: lines,\n      }}\n      title={title}\n      data-testid={testId}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["TextEllipsis","children","maxWidth","singleLine","lines","title","testId","jsx","csx"],"mappings":"uOAgDaA,EAAe,CAAC,CAC3B,SAAAC,EACA,SAAAC,EACA,WAAAC,EAAa,GACb,MAAAC,EAAQ,EACR,MAAAC,EACA,cAAeC,CACjB,IAEIC,EAAAA,kBAAAA,IAAC,MAAA,CACC,UAAWC,EAAAA,IACT,sBACAL,GAAcC,IAAU,EACpB,mCACAA,EAAQ,EACN,kCACA,EAAA,EAER,MAAO,CACL,SAAAF,EACA,gBAAiBE,CAAA,EAEnB,MAAAC,EACA,cAAaC,EAEZ,SAAAL,CAAA,CAAA"}
+{"version":3,"file":"TextEllipsis.cjs.js","sources":["../../../../src/components/Text/TextEllipsis/TextEllipsis.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode } from \"react\";\nimport { csx } from \"../../../utils\";\nimport \"./TextEllipsis.css\";\n\ninterface TextEllipsisProps {\n  /**\n   * The content to display within the text ellipsis.\n   */\n  children: ReactNode;\n\n  /**\n   * The maximum width of the text container in any valid CSS unit (px, rem, em, %, etc.).\n   * When the container width is less than this value, text will be truncated with an ellipsis.\n   */\n  maxWidth?: string | number;\n\n  /**\n   * Whether to truncate the text to a single line. Default is true.\n   * If false, the text will wrap to multiple lines.\n   */\n  singleLine?: boolean;\n\n  /**\n   * The number of lines to show before truncating with an ellipsis.\n   * Only applies when singleLine is false.\n   */\n  lines?: number;\n\n  /**\n   * The title attribute to show on hover. If not provided and singleLine is true,\n   * the children will be used as the title (if children is a string).\n   */\n  title?: string;\n\n  /**\n   * Test id for the component.\n   */\n  \"data-testid\"?: string;\n}\n\n/**\n * A component that displays text with an ellipsis when it overflows its container.\n *\n * API:\n *  - {@link TextEllipsisProps}\n */\nexport const TextEllipsis = ({\n  children,\n  maxWidth,\n  singleLine = true,\n  lines = 1,\n  title,\n  \"data-testid\": testId,\n}: TextEllipsisProps) => {\n  return (\n    <div\n      className={csx(\n        \"proton-TextEllipsis\",\n        singleLine || lines === 1\n          ? \"proton-TextEllipsis--single-line\"\n          : lines > 1\n            ? \"proton-TextEllipsis--multi-line\"\n            : \"\"\n      )}\n      style={{\n        maxWidth: maxWidth,\n        WebkitLineClamp: lines,\n      }}\n      title={title}\n      data-testid={testId}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["TextEllipsis","children","maxWidth","singleLine","lines","title","testId","jsx","csx"],"mappings":"uOAgDaA,EAAe,CAAC,CAC3B,SAAAC,EACA,SAAAC,EACA,WAAAC,EAAa,GACb,MAAAC,EAAQ,EACR,MAAAC,EACA,cAAeC,CACjB,IAEIC,EAAAA,kBAAAA,IAAC,MAAA,CACC,UAAWC,EAAAA,IACT,sBACAL,GAAcC,IAAU,EACpB,mCACAA,EAAQ,EACN,kCACA,EAAA,EAER,MAAO,CACL,SAAAF,EACA,gBAAiBE,CAAA,EAEnB,MAAAC,EACA,cAAaC,EAEZ,SAAAL,CAAA,CAAA"}

package/dist/components/Text/TextEllipsis/TextEllipsis.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextEllipsis.es.js","sources":["../../../../src/components/Text/TextEllipsis/TextEllipsis.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode } from \"react\";\nimport { csx } from \"../../../utils\";\nimport \"./TextEllipsis.css\";\n\ninterface TextEllipsisProps {\n  /**\n   * The content to display within the text ellipsis.\n   */\n  children: ReactNode;\n\n  /**\n   * The maximum width of the text container in any valid CSS unit (px, rem, em, %, etc.).\n   * When the container width is less than this value, text will be truncated with an ellipsis.\n   */\n  maxWidth?: string | number;\n\n  /**\n   * Whether to truncate the text to a single line. Default is true.\n   * If false, the text will wrap to multiple lines.\n   */\n  singleLine?: boolean;\n\n  /**\n   * The number of lines to show before truncating with an ellipsis.\n   * Only applies when singleLine is false.\n   */\n  lines?: number;\n\n  /**\n   * The title attribute to show on hover. If not provided and singleLine is true,\n   * the children will be used as the title (if children is a string).\n   */\n  title?: string;\n\n  /**\n   * A test ID.\n   */\n  \"data-testid\"?: string;\n}\n\n/**\n * A component that displays text with an ellipsis when it overflows its container.\n *\n * API:\n *  - {@link TextEllipsisProps}\n */\nexport const TextEllipsis = ({\n  children,\n  maxWidth,\n  singleLine = true,\n  lines = 1,\n  title,\n  \"data-testid\": testId,\n}: TextEllipsisProps) => {\n  return (\n    <div\n      className={csx(\n        \"proton-TextEllipsis\",\n        singleLine || lines === 1\n          ? \"proton-TextEllipsis--single-line\"\n          : lines > 1\n            ? \"proton-TextEllipsis--multi-line\"\n            : \"\"\n      )}\n      style={{\n        maxWidth: maxWidth,\n        WebkitLineClamp: lines,\n      }}\n      title={title}\n      data-testid={testId}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["TextEllipsis","children","maxWidth","singleLine","lines","title","testId","jsx","csx"],"mappings":";;;AAgDO,MAAMA,IAAe,CAAC;AAAA,EAC3B,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,OAAAC,IAAQ;AAAA,EACR,OAAAC;AAAA,EACA,eAAeC;AACjB,MAEIC,gBAAAA,EAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAL,KAAcC,MAAU,IACpB,qCACAA,IAAQ,IACN,oCACA;AAAA,IAAA;AAAA,IAER,OAAO;AAAA,MACL,UAAAF;AAAA,MACA,iBAAiBE;AAAA,IAAA;AAAA,IAEnB,OAAAC;AAAA,IACA,eAAaC;AAAA,IAEZ,UAAAL;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"TextEllipsis.es.js","sources":["../../../../src/components/Text/TextEllipsis/TextEllipsis.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode } from \"react\";\nimport { csx } from \"../../../utils\";\nimport \"./TextEllipsis.css\";\n\ninterface TextEllipsisProps {\n  /**\n   * The content to display within the text ellipsis.\n   */\n  children: ReactNode;\n\n  /**\n   * The maximum width of the text container in any valid CSS unit (px, rem, em, %, etc.).\n   * When the container width is less than this value, text will be truncated with an ellipsis.\n   */\n  maxWidth?: string | number;\n\n  /**\n   * Whether to truncate the text to a single line. Default is true.\n   * If false, the text will wrap to multiple lines.\n   */\n  singleLine?: boolean;\n\n  /**\n   * The number of lines to show before truncating with an ellipsis.\n   * Only applies when singleLine is false.\n   */\n  lines?: number;\n\n  /**\n   * The title attribute to show on hover. If not provided and singleLine is true,\n   * the children will be used as the title (if children is a string).\n   */\n  title?: string;\n\n  /**\n   * Test id for the component.\n   */\n  \"data-testid\"?: string;\n}\n\n/**\n * A component that displays text with an ellipsis when it overflows its container.\n *\n * API:\n *  - {@link TextEllipsisProps}\n */\nexport const TextEllipsis = ({\n  children,\n  maxWidth,\n  singleLine = true,\n  lines = 1,\n  title,\n  \"data-testid\": testId,\n}: TextEllipsisProps) => {\n  return (\n    <div\n      className={csx(\n        \"proton-TextEllipsis\",\n        singleLine || lines === 1\n          ? \"proton-TextEllipsis--single-line\"\n          : lines > 1\n            ? \"proton-TextEllipsis--multi-line\"\n            : \"\"\n      )}\n      style={{\n        maxWidth: maxWidth,\n        WebkitLineClamp: lines,\n      }}\n      title={title}\n      data-testid={testId}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["TextEllipsis","children","maxWidth","singleLine","lines","title","testId","jsx","csx"],"mappings":";;;AAgDO,MAAMA,IAAe,CAAC;AAAA,EAC3B,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,OAAAC,IAAQ;AAAA,EACR,OAAAC;AAAA,EACA,eAAeC;AACjB,MAEIC,gBAAAA,EAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAL,KAAcC,MAAU,IACpB,qCACAA,IAAQ,IACN,oCACA;AAAA,IAAA;AAAA,IAER,OAAO;AAAA,MACL,UAAAF;AAAA,MACA,iBAAiBE;AAAA,IAAA;AAAA,IAEnB,OAAAC;AAAA,IACA,eAAaC;AAAA,IAEZ,UAAAL;AAAA,EAAA;AAAA;"}

package/dist/components/Tooltip/ResponsiveTooltip.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveTooltip.cjs.js","sources":["../../../src/components/Tooltip/ResponsiveTooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { Tooltip, TooltipProps, TooltipPlacement } from \"./Tooltip\";\nimport { Popover, PopoverProps } from \"../Popover/Popover\";\nimport { BREAKPOINTS } from \"../../constants\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\n\nexport interface ResponsiveTooltipProps\n  extends Omit<TooltipProps, \"placement\">,\n    Omit<PopoverProps, \"trigger\" | \"children\" | \"side\"> {\n  /**\n   * Placement/side of the tooltip/popover.\n   * @default \"top\"\n   */\n  placement?: TooltipPlacement;\n  /**\n   * Force a specific component type.\n   * @default \"auto\"\n   */\n  forceComponent?: \"tooltip\" | \"popover\" | \"auto\";\n}\n\n/**\n * A responsive component that automatically renders as Tooltip on desktop\n * and Popover on mobile devices.\n *\n * API:\n *  - {@link ResponsiveTooltipProps}\n *  - @extends {@link TooltipProps} \n *  - @extends {@link PopoverProps}\n */\nexport function ResponsiveTooltip({\n  children,\n  content,\n  placement = \"top\",\n  align = \"center\",\n  arrow,\n  delay = 100,\n  isDisabled,\n  open,\n  defaultOpen,\n  onOpenChange,\n  constrainWidth,\n  disableTriggerClick,\n  forceComponent = \"auto\",\n  \"data-testid\": testId,\n}: ResponsiveTooltipProps) {\n  const isMobile = useBreakpoint(BREAKPOINTS.SMALL);\n\n  if (content === \"\") return null;\n\n  let usePopover: boolean;\n  switch (forceComponent) {\n    case \"popover\":\n      usePopover = true;\n      break;\n    case \"tooltip\":\n      usePopover = false;\n      break;\n    default:\n      usePopover = isMobile;\n      break;\n  }\n\n  if (!usePopover) {\n    return (\n      <Tooltip\n        children={children}\n        content={content}\n        placement={placement}\n        align={align}\n        arrow={arrow}\n        delay={delay}\n        isDisabled={isDisabled}\n        defaultOpen={defaultOpen}\n        onOpenChange={onOpenChange}\n        disableTriggerClick={disableTriggerClick}\n        data-testid={testId}\n      />\n    );\n  }\n\n  return (\n    <Popover\n      trigger={children}\n      side={placement}\n      align={align}\n      arrow={arrow}\n      constrainWidth={constrainWidth}\n      isDisabled={isDisabled}\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      data-testid={testId}\n    >\n      {content}\n    </Popover>\n  );\n}\n\nResponsiveTooltip.displayName = \"ProtonUIResponsiveTooltip\";\n"],"names":["ResponsiveTooltip","children","content","placement","align","arrow","delay","isDisabled","open","defaultOpen","onOpenChange","constrainWidth","disableTriggerClick","forceComponent","testId","isMobile","useBreakpoint","BREAKPOINTS","usePopover","jsx","Popover","Tooltip"],"mappings":"iTA+BO,SAASA,EAAkB,CAChC,SAAAC,EACA,QAAAC,EACA,UAAAC,EAAY,MACZ,MAAAC,EAAQ,SACR,MAAAC,EACA,MAAAC,EAAQ,IACR,WAAAC,EACA,KAAAC,EACA,YAAAC,EACA,aAAAC,EACA,eAAAC,EACA,oBAAAC,EACA,eAAAC,EAAiB,OACjB,cAAeC,CACjB,EAA2B,CACzB,MAAMC,EAAWC,EAAAA,cAAcC,EAAAA,YAAY,KAAK,EAEhD,GAAIf,IAAY,GAAI,OAAO,KAE3B,IAAIgB,EACJ,OAAQL,EAAA,CACN,IAAK,UACHK,EAAa,GACb,MACF,IAAK,UACHA,EAAa,GACb,MACF,QACEA,EAAaH,EACb,KAAA,CAGJ,OAAKG,EAmBHC,EAAAA,kBAAAA,IAACC,EAAAA,QAAA,CACC,QAASnB,EACT,KAAME,EACN,MAAAC,EACA,MAAAC,EACA,eAAAM,EACA,WAAAJ,EACA,KAAAC,EACA,YAAAC,EACA,aAAAC,EACA,cAAaI,EAEZ,SAAAZ,CAAA,CAAA,EA7BDiB,EAAAA,kBAAAA,IAACE,EAAAA,QAAA,CACC,SAAApB,EACA,QAAAC,EACA,UAAAC,EACA,MAAAC,EACA,MAAAC,EACA,MAAAC,EACA,WAAAC,EACA,YAAAE,EACA,aAAAC,EACA,oBAAAE,EACA,cAAaE,CAAA,CAAA,CAqBrB,CAEAd,EAAkB,YAAc"}
+{"version":3,"file":"ResponsiveTooltip.cjs.js","sources":["../../../src/components/Tooltip/ResponsiveTooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { Tooltip, TooltipProps } from \"./Tooltip\";\nimport { Popover, PopoverProps } from \"../Popover/Popover\";\nimport { BREAKPOINTS, type RadixSide } from \"../../constants\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\n\nexport interface ResponsiveTooltipProps\n  extends Omit<TooltipProps, \"placement\">,\n    Omit<PopoverProps, \"trigger\" | \"children\" | \"side\"> {\n  /**\n   * Placement/side of the tooltip/popover.\n   * @default \"top\"\n   */\n  placement?: RadixSide;\n  /**\n   * Force a specific component type.\n   * @default \"auto\"\n   */\n  forceComponent?: \"tooltip\" | \"popover\" | \"auto\";\n}\n\n/**\n * A responsive component that automatically renders as Tooltip on desktop\n * and Popover on mobile devices.\n *\n * API:\n *  - {@link ResponsiveTooltipProps}\n *  - @extends {@link TooltipProps} \n *  - @extends {@link PopoverProps}\n */\nexport function ResponsiveTooltip({\n  children,\n  content,\n  placement = \"top\",\n  align = \"center\",\n  arrow,\n  delay = 100,\n  isDisabled,\n  open,\n  defaultOpen,\n  onOpenChange,\n  constrainWidth,\n  disableTriggerClick,\n  forceComponent = \"auto\",\n  \"data-testid\": testId,\n}: ResponsiveTooltipProps) {\n  const isMobile = useBreakpoint(BREAKPOINTS.SMALL);\n\n  if (content === \"\") return null;\n\n  let usePopover: boolean;\n  switch (forceComponent) {\n    case \"popover\":\n      usePopover = true;\n      break;\n    case \"tooltip\":\n      usePopover = false;\n      break;\n    default:\n      usePopover = isMobile;\n      break;\n  }\n\n  if (!usePopover) {\n    return (\n      <Tooltip\n        children={children}\n        content={content}\n        placement={placement}\n        align={align}\n        arrow={arrow}\n        delay={delay}\n        isDisabled={isDisabled}\n        defaultOpen={defaultOpen}\n        onOpenChange={onOpenChange}\n        disableTriggerClick={disableTriggerClick}\n        data-testid={testId}\n      />\n    );\n  }\n\n  return (\n    <Popover\n      trigger={children}\n      side={placement}\n      align={align}\n      arrow={arrow}\n      constrainWidth={constrainWidth}\n      isDisabled={isDisabled}\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      data-testid={testId}\n    >\n      {content}\n    </Popover>\n  );\n}\n\nResponsiveTooltip.displayName = \"ProtonUIResponsiveTooltip\";\n"],"names":["ResponsiveTooltip","children","content","placement","align","arrow","delay","isDisabled","open","defaultOpen","onOpenChange","constrainWidth","disableTriggerClick","forceComponent","testId","isMobile","useBreakpoint","BREAKPOINTS","usePopover","jsx","Popover","Tooltip"],"mappings":"iTA+BO,SAASA,EAAkB,CAChC,SAAAC,EACA,QAAAC,EACA,UAAAC,EAAY,MACZ,MAAAC,EAAQ,SACR,MAAAC,EACA,MAAAC,EAAQ,IACR,WAAAC,EACA,KAAAC,EACA,YAAAC,EACA,aAAAC,EACA,eAAAC,EACA,oBAAAC,EACA,eAAAC,EAAiB,OACjB,cAAeC,CACjB,EAA2B,CACzB,MAAMC,EAAWC,EAAAA,cAAcC,EAAAA,YAAY,KAAK,EAEhD,GAAIf,IAAY,GAAI,OAAO,KAE3B,IAAIgB,EACJ,OAAQL,EAAA,CACN,IAAK,UACHK,EAAa,GACb,MACF,IAAK,UACHA,EAAa,GACb,MACF,QACEA,EAAaH,EACb,KAAA,CAGJ,OAAKG,EAmBHC,EAAAA,kBAAAA,IAACC,EAAAA,QAAA,CACC,QAASnB,EACT,KAAME,EACN,MAAAC,EACA,MAAAC,EACA,eAAAM,EACA,WAAAJ,EACA,KAAAC,EACA,YAAAC,EACA,aAAAC,EACA,cAAaI,EAEZ,SAAAZ,CAAA,CAAA,EA7BDiB,EAAAA,kBAAAA,IAACE,EAAAA,QAAA,CACC,SAAApB,EACA,QAAAC,EACA,UAAAC,EACA,MAAAC,EACA,MAAAC,EACA,MAAAC,EACA,WAAAC,EACA,YAAAE,EACA,aAAAC,EACA,oBAAAE,EACA,cAAaE,CAAA,CAAA,CAqBrB,CAEAd,EAAkB,YAAc"}

package/dist/components/Tooltip/ResponsiveTooltip.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveTooltip.es.js","sources":["../../../src/components/Tooltip/ResponsiveTooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { Tooltip, TooltipProps, TooltipPlacement } from \"./Tooltip\";\nimport { Popover, PopoverProps } from \"../Popover/Popover\";\nimport { BREAKPOINTS } from \"../../constants\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\n\nexport interface ResponsiveTooltipProps\n  extends Omit<TooltipProps, \"placement\">,\n    Omit<PopoverProps, \"trigger\" | \"children\" | \"side\"> {\n  /**\n   * Placement/side of the tooltip/popover.\n   * @default \"top\"\n   */\n  placement?: TooltipPlacement;\n  /**\n   * Force a specific component type.\n   * @default \"auto\"\n   */\n  forceComponent?: \"tooltip\" | \"popover\" | \"auto\";\n}\n\n/**\n * A responsive component that automatically renders as Tooltip on desktop\n * and Popover on mobile devices.\n *\n * API:\n *  - {@link ResponsiveTooltipProps}\n *  - @extends {@link TooltipProps} \n *  - @extends {@link PopoverProps}\n */\nexport function ResponsiveTooltip({\n  children,\n  content,\n  placement = \"top\",\n  align = \"center\",\n  arrow,\n  delay = 100,\n  isDisabled,\n  open,\n  defaultOpen,\n  onOpenChange,\n  constrainWidth,\n  disableTriggerClick,\n  forceComponent = \"auto\",\n  \"data-testid\": testId,\n}: ResponsiveTooltipProps) {\n  const isMobile = useBreakpoint(BREAKPOINTS.SMALL);\n\n  if (content === \"\") return null;\n\n  let usePopover: boolean;\n  switch (forceComponent) {\n    case \"popover\":\n      usePopover = true;\n      break;\n    case \"tooltip\":\n      usePopover = false;\n      break;\n    default:\n      usePopover = isMobile;\n      break;\n  }\n\n  if (!usePopover) {\n    return (\n      <Tooltip\n        children={children}\n        content={content}\n        placement={placement}\n        align={align}\n        arrow={arrow}\n        delay={delay}\n        isDisabled={isDisabled}\n        defaultOpen={defaultOpen}\n        onOpenChange={onOpenChange}\n        disableTriggerClick={disableTriggerClick}\n        data-testid={testId}\n      />\n    );\n  }\n\n  return (\n    <Popover\n      trigger={children}\n      side={placement}\n      align={align}\n      arrow={arrow}\n      constrainWidth={constrainWidth}\n      isDisabled={isDisabled}\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      data-testid={testId}\n    >\n      {content}\n    </Popover>\n  );\n}\n\nResponsiveTooltip.displayName = \"ProtonUIResponsiveTooltip\";\n"],"names":["ResponsiveTooltip","children","content","placement","align","arrow","delay","isDisabled","open","defaultOpen","onOpenChange","constrainWidth","disableTriggerClick","forceComponent","testId","isMobile","useBreakpoint","BREAKPOINTS","usePopover","jsx","Popover","Tooltip"],"mappings":";;;;;AA+BO,SAASA,EAAkB;AAAA,EAChC,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,OAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,YAAAC;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,eAAeC;AACjB,GAA2B;AACzB,QAAMC,IAAWC,EAAcC,EAAY,KAAK;AAEhD,MAAIf,MAAY,GAAI,QAAO;AAE3B,MAAIgB;AACJ,UAAQL,GAAA;AAAA,IACN,KAAK;AACH,MAAAK,IAAa;AACb;AAAA,IACF,KAAK;AACH,MAAAA,IAAa;AACb;AAAA,IACF;AACE,MAAAA,IAAaH;AACb;AAAA,EAAA;AAGJ,SAAKG,IAmBHC,gBAAAA,EAAAA;AAAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAASnB;AAAA,MACT,MAAME;AAAA,MACN,OAAAC;AAAA,MACA,OAAAC;AAAA,MACA,gBAAAM;AAAA,MACA,YAAAJ;AAAA,MACA,MAAAC;AAAA,MACA,aAAAC;AAAA,MACA,cAAAC;AAAA,MACA,eAAaI;AAAA,MAEZ,UAAAZ;AAAA,IAAA;AAAA,EAAA,IA7BDiB,gBAAAA,EAAAA;AAAAA,IAACE;AAAA,IAAA;AAAA,MACC,UAAApB;AAAA,MACA,SAAAC;AAAA,MACA,WAAAC;AAAA,MACA,OAAAC;AAAA,MACA,OAAAC;AAAA,MACA,OAAAC;AAAA,MACA,YAAAC;AAAA,MACA,aAAAE;AAAA,MACA,cAAAC;AAAA,MACA,qBAAAE;AAAA,MACA,eAAaE;AAAA,IAAA;AAAA,EAAA;AAqBrB;AAEAd,EAAkB,cAAc;"}
+{"version":3,"file":"ResponsiveTooltip.es.js","sources":["../../../src/components/Tooltip/ResponsiveTooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { Tooltip, TooltipProps } from \"./Tooltip\";\nimport { Popover, PopoverProps } from \"../Popover/Popover\";\nimport { BREAKPOINTS, type RadixSide } from \"../../constants\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\n\nexport interface ResponsiveTooltipProps\n  extends Omit<TooltipProps, \"placement\">,\n    Omit<PopoverProps, \"trigger\" | \"children\" | \"side\"> {\n  /**\n   * Placement/side of the tooltip/popover.\n   * @default \"top\"\n   */\n  placement?: RadixSide;\n  /**\n   * Force a specific component type.\n   * @default \"auto\"\n   */\n  forceComponent?: \"tooltip\" | \"popover\" | \"auto\";\n}\n\n/**\n * A responsive component that automatically renders as Tooltip on desktop\n * and Popover on mobile devices.\n *\n * API:\n *  - {@link ResponsiveTooltipProps}\n *  - @extends {@link TooltipProps} \n *  - @extends {@link PopoverProps}\n */\nexport function ResponsiveTooltip({\n  children,\n  content,\n  placement = \"top\",\n  align = \"center\",\n  arrow,\n  delay = 100,\n  isDisabled,\n  open,\n  defaultOpen,\n  onOpenChange,\n  constrainWidth,\n  disableTriggerClick,\n  forceComponent = \"auto\",\n  \"data-testid\": testId,\n}: ResponsiveTooltipProps) {\n  const isMobile = useBreakpoint(BREAKPOINTS.SMALL);\n\n  if (content === \"\") return null;\n\n  let usePopover: boolean;\n  switch (forceComponent) {\n    case \"popover\":\n      usePopover = true;\n      break;\n    case \"tooltip\":\n      usePopover = false;\n      break;\n    default:\n      usePopover = isMobile;\n      break;\n  }\n\n  if (!usePopover) {\n    return (\n      <Tooltip\n        children={children}\n        content={content}\n        placement={placement}\n        align={align}\n        arrow={arrow}\n        delay={delay}\n        isDisabled={isDisabled}\n        defaultOpen={defaultOpen}\n        onOpenChange={onOpenChange}\n        disableTriggerClick={disableTriggerClick}\n        data-testid={testId}\n      />\n    );\n  }\n\n  return (\n    <Popover\n      trigger={children}\n      side={placement}\n      align={align}\n      arrow={arrow}\n      constrainWidth={constrainWidth}\n      isDisabled={isDisabled}\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      data-testid={testId}\n    >\n      {content}\n    </Popover>\n  );\n}\n\nResponsiveTooltip.displayName = \"ProtonUIResponsiveTooltip\";\n"],"names":["ResponsiveTooltip","children","content","placement","align","arrow","delay","isDisabled","open","defaultOpen","onOpenChange","constrainWidth","disableTriggerClick","forceComponent","testId","isMobile","useBreakpoint","BREAKPOINTS","usePopover","jsx","Popover","Tooltip"],"mappings":";;;;;AA+BO,SAASA,EAAkB;AAAA,EAChC,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,OAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,YAAAC;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,eAAeC;AACjB,GAA2B;AACzB,QAAMC,IAAWC,EAAcC,EAAY,KAAK;AAEhD,MAAIf,MAAY,GAAI,QAAO;AAE3B,MAAIgB;AACJ,UAAQL,GAAA;AAAA,IACN,KAAK;AACH,MAAAK,IAAa;AACb;AAAA,IACF,KAAK;AACH,MAAAA,IAAa;AACb;AAAA,IACF;AACE,MAAAA,IAAaH;AACb;AAAA,EAAA;AAGJ,SAAKG,IAmBHC,gBAAAA,EAAAA;AAAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAASnB;AAAA,MACT,MAAME;AAAA,MACN,OAAAC;AAAA,MACA,OAAAC;AAAA,MACA,gBAAAM;AAAA,MACA,YAAAJ;AAAA,MACA,MAAAC;AAAA,MACA,aAAAC;AAAA,MACA,cAAAC;AAAA,MACA,eAAaI;AAAA,MAEZ,UAAAZ;AAAA,IAAA;AAAA,EAAA,IA7BDiB,gBAAAA,EAAAA;AAAAA,IAACE;AAAA,IAAA;AAAA,MACC,UAAApB;AAAA,MACA,SAAAC;AAAA,MACA,WAAAC;AAAA,MACA,OAAAC;AAAA,MACA,OAAAC;AAAA,MACA,OAAAC;AAAA,MACA,YAAAC;AAAA,MACA,aAAAE;AAAA,MACA,cAAAC;AAAA,MACA,qBAAAE;AAAA,MACA,eAAaE;AAAA,IAAA;AAAA,EAAA;AAqBrB;AAEAd,EAAkB,cAAc;"}

package/dist/constants/breakpoint.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"breakpoint.cjs.js","sources":["../../src/constants/breakpoint.ts"],"sourcesContent":["export const BREAKPOINTS = {\n  SMALL: 576,\n  MEDIUM: 768,\n  LARGE: 992,\n  X_LARGE: 1200,\n};\n\nexport type Breakpoint = (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];\n"],"names":["BREAKPOINTS"],"mappings":"gFAAO,MAAMA,EAAc,CACzB,MAAO,IACP,OAAQ,IACR,MAAO,IACP,QAAS,IACX"}
+{"version":3,"file":"breakpoint.cjs.js","sources":["../../src/constants/breakpoint.ts"],"sourcesContent":["export const BREAKPOINTS = {\n  SMALL: 576,\n  MEDIUM: 768,\n  LARGE: 992,\n  X_LARGE: 1200,\n};\n\nexport type Breakpoint = (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];\n\nexport type BreakpointDirection = \"up\" | \"down\";\n"],"names":["BREAKPOINTS"],"mappings":"gFAAO,MAAMA,EAAc,CACzB,MAAO,IACP,OAAQ,IACR,MAAO,IACP,QAAS,IACX"}

package/dist/constants/breakpoint.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"breakpoint.es.js","sources":["../../src/constants/breakpoint.ts"],"sourcesContent":["export const BREAKPOINTS = {\n  SMALL: 576,\n  MEDIUM: 768,\n  LARGE: 992,\n  X_LARGE: 1200,\n};\n\nexport type Breakpoint = (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];\n"],"names":["BREAKPOINTS"],"mappings":"AAAO,MAAMA,IAAc;AAAA,EACzB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,SAAS;AACX;"}
+{"version":3,"file":"breakpoint.es.js","sources":["../../src/constants/breakpoint.ts"],"sourcesContent":["export const BREAKPOINTS = {\n  SMALL: 576,\n  MEDIUM: 768,\n  LARGE: 992,\n  X_LARGE: 1200,\n};\n\nexport type Breakpoint = (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];\n\nexport type BreakpointDirection = \"up\" | \"down\";\n"],"names":["BREAKPOINTS"],"mappings":"AAAO,MAAMA,IAAc;AAAA,EACzB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,SAAS;AACX;"}