@protonradio/proton-ui 0.11.5-beta.2 → 0.11.6

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

@@ -1,134 +1,103 @@
 import { j as e } from "../../node_modules/react/jsx-runtime.es.js";
-import { forwardRef as N, useRef as x, useEffect as O } from "react";
-import { useSelect as B } from "../../node_modules/@react-aria/select/dist/useSelect.es.js";
-import { HiddenSelect as I } from "../../node_modules/@react-aria/select/dist/HiddenSelect.es.js";
-import { useButton as R } from "../../node_modules/@react-aria/button/dist/useButton.es.js";
-import { useSelectState as k } from "../../node_modules/@react-stately/select/dist/useSelectState.es.js";
-import { Item as M } from "../../node_modules/@react-stately/collections/dist/Item.es.js";
-import { useBreakpoint as w } from "../../hooks/useBreakpoint.es.js";
-import { ActionMenu as E } from "../ActionMenu/ActionMenu.es.js";
-import { ListBox as A } from "../ListBox/ListBox.es.js";
-import { Popover as K } from "../Popover/Popover.es.js";
+import { forwardRef as T, useState as I, useRef as k, useEffect as C } from "react";
+import { Select as n } from "radix-ui";
+import { useBreakpoint as L } from "../../hooks/useBreakpoint.es.js";
+import { ActionMenu as P } from "../ActionMenu/ActionMenu.es.js";
 /* empty css              */
-import { csx as S } from "../../utils/string.es.js";
-import { BREAKPOINTS as L } from "../../constants/breakpoint.es.js";
-const b = N(
-  (r, s) => {
-    let { buttonProps: c } = R(
-      {
-        ...r,
-        isDisabled: r.disabled
-      },
-      s
-    );
-    return /* @__PURE__ */ e.jsx(
-      "button",
-      {
-        ...c,
-        ref: s,
-        className: S(
-          "proton-Select__trigger",
-          r.disabled && "proton-Select__trigger--disabled",
-          !r.isOpen && "proton-Select__trigger--closed",
-          r.isOpen && "proton-Select__trigger--opened"
-        ),
-        children: r.children
-      }
-    );
-  }
+/* empty css                  */
+import { useTheme as V } from "../ThemeProvider.es.js";
+import { csx as x } from "../../utils/string.es.js";
+import { BREAKPOINTS as A } from "../../constants/breakpoint.es.js";
+const j = T(
+  ({ disabled: r, isOpen: c, children: o, onClick: s, ...l }, a) => /* @__PURE__ */ e.jsx(
+    "button",
+    {
+      ...l,
+      ref: a,
+      disabled: r,
+      onClick: s,
+      className: x(
+        "proton-Select__trigger",
+        r && "proton-Select__trigger--disabled",
+        !c && "proton-Select__trigger--closed",
+        c && "proton-Select__trigger--opened"
+      ),
+      children: o
+    }
+  )
 );
-b.displayName = "ProtonUISelectButton";
+j.displayName = "ProtonUISelectButton";
 function U({
   label: r,
-  name: s,
-  isDisabled: c,
-  disabledKeys: d,
-  selectedKey: h,
-  onSelectionChange: g,
-  defaultSelectedKey: _,
-  onOpen: n,
-  onClose: a,
-  items: p,
-  "data-testid": m
+  name: c,
+  isDisabled: o,
+  disabledKeys: s,
+  selectedKey: l,
+  onSelectionChange: a,
+  defaultSelectedKey: w,
+  onOpen: f,
+  onClose: m,
+  items: _,
+  "data-testid": g
 }) {
-  const f = {
-    label: r,
-    isDisabled: c,
-    disabledKeys: d,
-    selectedKey: h,
-    defaultSelectedKey: _,
-    onSelectionChange: g,
-    onOpenChange: (o) => {
-      o ? n == null || n() : a == null || a();
-    },
-    "data-testid": m,
-    children: p.map((o) => /* @__PURE__ */ e.jsx(M, { textValue: o.label, children: o.label }, o.key))
-  }, t = k(f), j = w(L.MEDIUM), i = x(null), l = x(null), { labelProps: u, triggerProps: $, valueProps: v, menuProps: y } = B(
-    { ...f, label: r || s },
-    t,
-    i
-  );
-  O(() => {
-    t.isOpen && l.current && i.current && !l.current.style.minWidth && (l.current.style.minWidth = `${i.current.offsetWidth}px`);
-  }, [t.isOpen]);
-  const P = p.map((o) => ({
-    key: o.key,
-    label: o.label,
-    to: o.to,
+  const [i, u] = I(!1), [M, S] = I(
+    l || w || ""
+  ), { className: b, style: y } = V(), R = L(A.MEDIUM), v = k(null), d = k(null), p = l !== void 0 ? l : M, h = _.find((t) => t.key === p), N = (t) => {
+    l === void 0 && S(t), a == null || a(t), d.current && (d.current.value = t, d.current.dispatchEvent(
+      new Event("change", { bubbles: !0 })
+    ));
+  }, B = (t) => {
+    u(t), t ? f == null || f() : m == null || m();
+  };
+  C(() => {
+    l !== void 0 && S(l);
+  }, [l]);
+  const E = _.map((t) => ({
+    key: t.key,
+    label: t.label,
+    to: t.to,
     onAction: () => {
-      t.setSelectedKey(o.key), t.close();
+      N(t.key), u(!1);
     }
   }));
-  return /* @__PURE__ */ e.jsxs(
+  return R ? /* @__PURE__ */ e.jsxs(
     "div",
     {
       className: "proton-Select",
-      "aria-label": r || s,
-      "aria-disabled": c,
+      "aria-label": r || c,
+      "aria-disabled": o,
       children: [
-        r ? /* @__PURE__ */ e.jsx(
-          "div",
-          {
-            ...u,
-            className: "proton-Select__label",
-            "data-testid": "select-label",
-            children: r
-          }
-        ) : (
-          // If no label is provided, render an invisible label for a11y
-          /* @__PURE__ */ e.jsx("div", { ...u })
-        ),
+        r && /* @__PURE__ */ e.jsx("div", { className: "proton-Select__label", "data-testid": "select-label", children: r }),
         /* @__PURE__ */ e.jsx(
-          I,
+          "input",
           {
-            isDisabled: c,
-            state: t,
-            triggerRef: i,
-            label: r || s,
-            name: s,
+            ref: d,
+            type: "hidden",
+            name: c,
+            value: p,
             "data-testid": "hidden-select-container"
           }
         ),
         /* @__PURE__ */ e.jsxs(
-          b,
+          j,
           {
-            ...$,
-            isOpen: t.isOpen,
-            ref: i,
-            disabled: c,
-            "data-testid": m,
+            isOpen: i,
+            ref: v,
+            disabled: o,
+            "data-testid": g,
+            onClick: () => u(!0),
             children: [
-              /* @__PURE__ */ e.jsx("div", { ...v, className: "proton-Select__value", children: t.selectedItem ? t.selectedItem.rendered : "Select an option" }),
+              /* @__PURE__ */ e.jsx("div", { className: "proton-Select__value", children: h ? h.label : "Select an option" }),
               /* @__PURE__ */ e.jsx(
                 "div",
                 {
-                  className: S(
+                  className: x(
                     "proton-Select__trigger_icon",
-                    t.isOpen && "proton-Select__trigger_icon--flipped"
+                    i && "proton-Select__trigger_icon--flipped"
                   ),
                   "aria-hidden": "true",
                   children: /* @__PURE__ */ e.jsxs("svg", { id: "caret-down", viewBox: "0 0 512 512", children: [
-                    /* @__PURE__ */ e.jsx("title", { children: t.isOpen ? "caret down" : "caret up" }),
+                    /* @__PURE__ */ e.jsx("title", { children: i ? "caret down" : "caret up" }),
                     /* @__PURE__ */ e.jsx(
                       "path",
                       {
@@ -142,26 +111,108 @@ function U({
             ]
           }
         ),
-        t.isOpen && /* @__PURE__ */ e.jsx(e.Fragment, { children: j ? /* @__PURE__ */ e.jsx(
-          E,
+        /* @__PURE__ */ e.jsx(
+          P,
+          {
+            isOpen: i,
+            onClose: () => u(!1),
+            actions: E,
+            selectedKeys: [p],
+            disabledKeys: s
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ e.jsxs(
+    "div",
+    {
+      className: "proton-Select",
+      "aria-label": r || c,
+      "aria-disabled": o,
+      children: [
+        r && /* @__PURE__ */ e.jsx("div", { className: "proton-Select__label", "data-testid": "select-label", children: r }),
+        /* @__PURE__ */ e.jsx(
+          "input",
           {
-            isOpen: t.isOpen,
-            onClose: () => t.close(),
-            actions: P,
-            selectedKeys: [t.selectedKey.toString()],
-            disabledKeys: d
+            ref: d,
+            type: "hidden",
+            name: c,
+            value: p,
+            "data-testid": "hidden-select-container"
           }
-        ) : /* @__PURE__ */ e.jsx("div", { className: "proton-Select__popover", children: /* @__PURE__ */ e.jsx(
-          K,
+        ),
+        /* @__PURE__ */ e.jsxs(
+          n.Root,
           {
-            state: t,
-            triggerRef: i,
-            popoverRef: l,
-            placement: "bottom start",
-            "data-testid": "select-popover",
-            children: /* @__PURE__ */ e.jsx(A, { ...y, state: t })
+            value: p,
+            onValueChange: N,
+            onOpenChange: B,
+            disabled: o,
+            children: [
+              /* @__PURE__ */ e.jsx(n.Trigger, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+                j,
+                {
+                  isOpen: i,
+                  ref: v,
+                  disabled: o,
+                  "data-testid": g,
+                  children: [
+                    /* @__PURE__ */ e.jsx(
+                      n.Value,
+                      {
+                        className: "proton-Select__value",
+                        placeholder: "Select an option",
+                        children: h ? h.label : "Select an option"
+                      }
+                    ),
+                    /* @__PURE__ */ e.jsx(n.Icon, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+                      "div",
+                      {
+                        className: x(
+                          "proton-Select__trigger_icon",
+                          i && "proton-Select__trigger_icon--flipped"
+                        ),
+                        "aria-hidden": "true",
+                        children: /* @__PURE__ */ e.jsxs("svg", { id: "caret-down", viewBox: "0 0 512 512", children: [
+                          /* @__PURE__ */ e.jsx("title", { children: i ? "caret down" : "caret up" }),
+                          /* @__PURE__ */ e.jsx(
+                            "path",
+                            {
+                              fill: "currentColor",
+                              d: "M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7L86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"
+                            }
+                          )
+                        ] })
+                      }
+                    ) })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ e.jsx(n.Portal, { children: /* @__PURE__ */ e.jsx(
+                n.Content,
+                {
+                  className: x(
+                    "proton-Menu",
+                    "proton-MenuTrigger__menu",
+                    b
+                  ),
+                  style: y,
+                  position: "popper",
+                  children: /* @__PURE__ */ e.jsx(n.Viewport, { children: _.map((t) => /* @__PURE__ */ e.jsx(
+                    n.Item,
+                    {
+                      value: t.key,
+                      disabled: s == null ? void 0 : s.includes(t.key),
+                      className: "proton-Menu__item",
+                      children: /* @__PURE__ */ e.jsx(n.ItemText, { children: t.label })
+                    },
+                    t.key
+                  )) })
+                }
+              ) })
+            ]
           }
-        ) }) })
+        )
       ]
     }
   );

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\";\r\n\r\nimport { forwardRef, ReactNode, RefObject, useEffect, useRef } from \"react\";\r\nimport { HiddenSelect, useSelect } from \"@react-aria/select\";\r\nimport { useButton } from \"@react-aria/button\";\r\nimport { useSelectState } from \"@react-stately/select\";\r\nimport { Item } from \"@react-stately/collections\";\r\n\r\nimport { BREAKPOINTS } from \"../../constants\";\r\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\r\nimport { csx } from \"../../utils\";\r\nimport { ActionMenu, ActionMenuAction } from \"../ActionMenu/ActionMenu\";\r\nimport { ListBox } from \"../ListBox/ListBox\";\r\nimport { Popover } from \"../Popover/Popover\";\r\n\r\nimport \"./Select.css\";\r\n\r\ninterface SelectButtonProps {\r\n  disabled?: boolean;\r\n  isOpen?: boolean;\r\n  children?: ReactNode;\r\n}\r\n\r\nconst SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>(\r\n  (props, ref: RefObject<HTMLButtonElement>) => {\r\n    let { buttonProps } = useButton(\r\n      {\r\n        ...props,\r\n        isDisabled: props.disabled,\r\n      },\r\n      ref\r\n    );\r\n\r\n    return (\r\n      <button\r\n        {...buttonProps}\r\n        ref={ref}\r\n        className={csx(\r\n          \"proton-Select__trigger\",\r\n          props.disabled && \"proton-Select__trigger--disabled\",\r\n          !props.isOpen && \"proton-Select__trigger--closed\",\r\n          props.isOpen && \"proton-Select__trigger--opened\"\r\n        )}\r\n      >\r\n        {props.children}\r\n      </button>\r\n    );\r\n  }\r\n);\r\nSelectButton.displayName = \"ProtonUISelectButton\";\r\n\r\ninterface SelectItem {\r\n  label: string;\r\n  key: string;\r\n  to?: string;\r\n}\r\n\r\nexport interface SelectProps {\r\n  /** Array of keys that should be disabled\r\n   * @example [\"Thing 1\", \"Thing 2\"]\r\n   */\r\n  disabledKeys?: string[];\r\n\r\n  /** The key of the default selected item */\r\n  defaultSelectedKey?: string;\r\n\r\n  /** Test ID for the select */\r\n  \"data-testid\"?: string;\r\n\r\n  /** Whether the select is disabled */\r\n  isDisabled?: boolean;\r\n\r\n  /** Array of items to display\r\n   * @example [{ key: \"thing-1\", label: \"Thing 1\" }, { key: \"thing-2\", label: \"Thing 2\" }]\r\n   */\r\n  items: SelectItem[];\r\n\r\n  /** Label to display above the select\r\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#text\r\n   */\r\n  label?: string;\r\n\r\n  /** The name of the select field */\r\n  name: string;\r\n\r\n  /** Callback fired when the menu closes */\r\n  onClose?: () => void;\r\n\r\n  /** Callback fired when the menu opens */\r\n  onOpen?: () => void;\r\n\r\n  /** Callback fired when selection changes */\r\n  onSelectionChange?: (key: string) => void;\r\n\r\n  /** Currently selected key */\r\n  selectedKey?: string;\r\n}\r\n\r\n/**\r\n * A dropdown select menu that opens a popover on desktop and an action menu on mobile.\r\n * Supports controlled and uncontrolled modes.\r\n *\r\n * API:\r\n *  - {@link SelectProps}\r\n */\r\nexport function Select({\r\n  label,\r\n  name,\r\n  isDisabled,\r\n  disabledKeys,\r\n  selectedKey,\r\n  onSelectionChange,\r\n  defaultSelectedKey,\r\n  onOpen,\r\n  onClose,\r\n  items,\r\n  \"data-testid\": testId,\r\n}: SelectProps) {\r\n  const selectProps = {\r\n    label,\r\n    isDisabled,\r\n    disabledKeys,\r\n    selectedKey,\r\n    defaultSelectedKey,\r\n    onSelectionChange,\r\n    onOpenChange: (isOpen: boolean) => {\r\n      if (isOpen) {\r\n        onOpen?.();\r\n      } else {\r\n        onClose?.();\r\n      }\r\n    },\r\n    \"data-testid\": testId,\r\n    children: items.map((item) => (\r\n      <Item key={item.key} textValue={item.label}>\r\n        {item.label}\r\n      </Item>\r\n    )),\r\n  };\r\n\r\n  const state = useSelectState(selectProps);\r\n  const isMobile = useBreakpoint(BREAKPOINTS.MEDIUM);\r\n  const triggerRef = useRef<HTMLButtonElement>(null);\r\n  const popoverRef = useRef<HTMLDivElement>(null);\r\n  const { labelProps, triggerProps, valueProps, menuProps } = useSelect(\r\n    { ...selectProps, label: label || name },\r\n    state,\r\n    triggerRef\r\n  );\r\n\r\n  useEffect(() => {\r\n    if (\r\n      state.isOpen &&\r\n      popoverRef.current &&\r\n      triggerRef.current &&\r\n      !popoverRef.current.style.minWidth\r\n    ) {\r\n      // Adjust the popover width to be at least the width of the trigger\r\n      popoverRef.current.style.minWidth = `${triggerRef.current.offsetWidth}px`;\r\n    }\r\n  }, [state.isOpen]);\r\n\r\n  const actionItems: ActionMenuAction[] = items.map((item) => ({\r\n    key: item.key,\r\n    label: item.label,\r\n    to: item.to,\r\n    onAction: () => {\r\n      state.setSelectedKey(item.key);\r\n      state.close();\r\n    },\r\n  }));\r\n\r\n  return (\r\n    <div\r\n      className=\"proton-Select\"\r\n      aria-label={label || name}\r\n      aria-disabled={isDisabled}\r\n    >\r\n      {label ? (\r\n        <div\r\n          {...labelProps}\r\n          className=\"proton-Select__label\"\r\n          data-testid=\"select-label\"\r\n        >\r\n          {label}\r\n        </div>\r\n      ) : (\r\n        // If no label is provided, render an invisible label for a11y\r\n        <div {...labelProps} />\r\n      )}\r\n\r\n      <HiddenSelect\r\n        isDisabled={isDisabled}\r\n        state={state}\r\n        triggerRef={triggerRef}\r\n        label={label || name}\r\n        name={name}\r\n        data-testid=\"hidden-select-container\"\r\n      />\r\n\r\n      <SelectButton\r\n        {...triggerProps}\r\n        isOpen={state.isOpen}\r\n        ref={triggerRef}\r\n        disabled={isDisabled}\r\n        data-testid={testId}\r\n      >\r\n        <div {...valueProps} className=\"proton-Select__value\">\r\n          {state.selectedItem\r\n            ? state.selectedItem.rendered\r\n            : \"Select an option\"}\r\n        </div>\r\n        <div\r\n          className={csx(\r\n            \"proton-Select__trigger_icon\",\r\n            state.isOpen && \"proton-Select__trigger_icon--flipped\"\r\n          )}\r\n          aria-hidden=\"true\"\r\n        >\r\n          <svg id=\"caret-down\" viewBox=\"0 0 512 512\">\r\n            <title>{state.isOpen ? \"caret down\" : \"caret up\"}</title>\r\n            <path\r\n              fill=\"currentColor\"\r\n              d=\"M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7L86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z\"\r\n            />\r\n          </svg>\r\n        </div>\r\n      </SelectButton>\r\n\r\n      {state.isOpen && (\r\n        <>\r\n          {!isMobile ? (\r\n            <div className=\"proton-Select__popover\">\r\n              <Popover\r\n                state={state}\r\n                triggerRef={triggerRef}\r\n                popoverRef={popoverRef}\r\n                placement=\"bottom start\"\r\n                data-testid=\"select-popover\"\r\n              >\r\n                <ListBox {...menuProps} state={state} />\r\n              </Popover>\r\n            </div>\r\n          ) : (\r\n            <ActionMenu\r\n              isOpen={state.isOpen}\r\n              onClose={() => state.close()}\r\n              actions={actionItems}\r\n              selectedKeys={[state.selectedKey.toString()]}\r\n              disabledKeys={disabledKeys}\r\n            />\r\n          )}\r\n        </>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n\r\nSelect.displayName = \"ProtonUISelect\";\r\n"],"names":["SelectButton","forwardRef","props","ref","buttonProps","useButton","jsx","csx","Select","label","name","isDisabled","disabledKeys","selectedKey","onSelectionChange","defaultSelectedKey","onOpen","onClose","items","testId","selectProps","isOpen","item","Item","state","useSelectState","isMobile","useBreakpoint","BREAKPOINTS","triggerRef","useRef","popoverRef","labelProps","triggerProps","valueProps","menuProps","useSelect","useEffect","actionItems","jsxs","HiddenSelect","Fragment","ActionMenu","Popover","ListBox"],"mappings":"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"}
+{"version":3,"file":"Select.es.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {\r\n  forwardRef,\r\n  ReactNode,\r\n  RefObject,\r\n  useEffect,\r\n  useRef,\r\n  useState,\r\n} from \"react\";\r\nimport { Select as RadixSelect } from \"radix-ui\";\r\n\r\nimport { BREAKPOINTS } from \"../../constants\";\r\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\r\nimport { csx } from \"../../utils\";\r\nimport { ActionMenu, ActionMenuAction } from \"../ActionMenu/ActionMenu\";\r\n\r\nimport \"./Select.css\";\r\nimport \"../Menu/Menu.css\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\n\r\ninterface SelectButtonProps {\r\n  disabled?: boolean;\r\n  isOpen?: boolean;\r\n  children?: ReactNode;\r\n  onClick?: () => void;\r\n}\r\n\r\nconst SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>(\r\n  (\r\n    { disabled, isOpen, children, onClick, ...props },\r\n    ref: RefObject<HTMLButtonElement>\r\n  ) => {\r\n    return (\r\n      <button\r\n        {...props}\r\n        ref={ref}\r\n        disabled={disabled}\r\n        onClick={onClick}\r\n        className={csx(\r\n          \"proton-Select__trigger\",\r\n          disabled && \"proton-Select__trigger--disabled\",\r\n          !isOpen && \"proton-Select__trigger--closed\",\r\n          isOpen && \"proton-Select__trigger--opened\"\r\n        )}\r\n      >\r\n        {children}\r\n      </button>\r\n    );\r\n  }\r\n);\r\nSelectButton.displayName = \"ProtonUISelectButton\";\r\n\r\ninterface SelectItem {\r\n  label: string;\r\n  key: string;\r\n  to?: string;\r\n}\r\n\r\nexport interface SelectProps {\r\n  /** Array of keys that should be disabled\r\n   * @example [\"Thing 1\", \"Thing 2\"]\r\n   */\r\n  disabledKeys?: string[];\r\n\r\n  /** The key of the default selected item */\r\n  defaultSelectedKey?: string;\r\n\r\n  /** Test ID for the select */\r\n  \"data-testid\"?: string;\r\n\r\n  /** Whether the select is disabled */\r\n  isDisabled?: boolean;\r\n\r\n  /** Array of items to display\r\n   * @example [{ key: \"thing-1\", label: \"Thing 1\" }, { key: \"thing-2\", label: \"Thing 2\" }]\r\n   */\r\n  items: SelectItem[];\r\n\r\n  /** Label to display above the select\r\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#text\r\n   */\r\n  label?: string;\r\n\r\n  /** The name of the select field */\r\n  name: string;\r\n\r\n  /** Callback fired when the menu closes */\r\n  onClose?: () => void;\r\n\r\n  /** Callback fired when the menu opens */\r\n  onOpen?: () => void;\r\n\r\n  /** Callback fired when selection changes */\r\n  onSelectionChange?: (key: string) => void;\r\n\r\n  /** Currently selected key */\r\n  selectedKey?: string;\r\n}\r\n\r\n/**\r\n * A dropdown select menu that opens a popover on desktop and an action menu on mobile.\r\n * Supports controlled and uncontrolled modes.\r\n *\r\n * API:\r\n *  - {@link SelectProps}\r\n */\r\nexport function Select({\r\n  label,\r\n  name,\r\n  isDisabled,\r\n  disabledKeys,\r\n  selectedKey,\r\n  onSelectionChange,\r\n  defaultSelectedKey,\r\n  onOpen,\r\n  onClose,\r\n  items,\r\n  \"data-testid\": testId,\r\n}: SelectProps) {\r\n  const [isOpen, setIsOpen] = useState(false);\r\n  const [internalSelectedKey, setInternalSelectedKey] = useState(\r\n    selectedKey || defaultSelectedKey || \"\"\r\n  );\r\n  const { className: themeClass, style: themeStyle } = useTheme();\r\n  const isMobile = useBreakpoint(BREAKPOINTS.MEDIUM);\r\n  const triggerRef = useRef<HTMLButtonElement>(null);\r\n  const hiddenInputRef = useRef<HTMLInputElement>(null);\r\n\r\n  // Handle controlled vs uncontrolled state\r\n  const currentSelectedKey =\r\n    selectedKey !== undefined ? selectedKey : internalSelectedKey;\r\n  const selectedItem = items.find((item) => item.key === currentSelectedKey);\r\n\r\n  const handleValueChange = (value: string) => {\r\n    if (selectedKey === undefined) {\r\n      setInternalSelectedKey(value);\r\n    }\r\n    onSelectionChange?.(value);\r\n\r\n    // Update hidden input for form submission\r\n    if (hiddenInputRef.current) {\r\n      hiddenInputRef.current.value = value;\r\n      hiddenInputRef.current.dispatchEvent(\r\n        new Event(\"change\", { bubbles: true })\r\n      );\r\n    }\r\n  };\r\n\r\n  const handleOpenChange = (open: boolean) => {\r\n    setIsOpen(open);\r\n    if (open) {\r\n      onOpen?.();\r\n    } else {\r\n      onClose?.();\r\n    }\r\n  };\r\n\r\n  // Update internal state when controlled selectedKey changes\r\n  useEffect(() => {\r\n    if (selectedKey !== undefined) {\r\n      setInternalSelectedKey(selectedKey);\r\n    }\r\n  }, [selectedKey]);\r\n\r\n  const actionItems: ActionMenuAction[] = items.map((item) => ({\r\n    key: item.key,\r\n    label: item.label,\r\n    to: item.to,\r\n    onAction: () => {\r\n      handleValueChange(item.key);\r\n      setIsOpen(false);\r\n    },\r\n  }));\r\n\r\n  if (isMobile) {\r\n    return (\r\n      <div\r\n        className=\"proton-Select\"\r\n        aria-label={label || name}\r\n        aria-disabled={isDisabled}\r\n      >\r\n        {label && (\r\n          <div className=\"proton-Select__label\" data-testid=\"select-label\">\r\n            {label}\r\n          </div>\r\n        )}\r\n\r\n        {/* Hidden input for form submission */}\r\n        <input\r\n          ref={hiddenInputRef}\r\n          type=\"hidden\"\r\n          name={name}\r\n          value={currentSelectedKey}\r\n          data-testid=\"hidden-select-container\"\r\n        />\r\n\r\n        <SelectButton\r\n          isOpen={isOpen}\r\n          ref={triggerRef}\r\n          disabled={isDisabled}\r\n          data-testid={testId}\r\n          onClick={() => setIsOpen(true)}\r\n        >\r\n          <div className=\"proton-Select__value\">\r\n            {selectedItem ? selectedItem.label : \"Select an option\"}\r\n          </div>\r\n          <div\r\n            className={csx(\r\n              \"proton-Select__trigger_icon\",\r\n              isOpen && \"proton-Select__trigger_icon--flipped\"\r\n            )}\r\n            aria-hidden=\"true\"\r\n          >\r\n            <svg id=\"caret-down\" viewBox=\"0 0 512 512\">\r\n              <title>{isOpen ? \"caret down\" : \"caret up\"}</title>\r\n              <path\r\n                fill=\"currentColor\"\r\n                d=\"M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7L86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z\"\r\n              />\r\n            </svg>\r\n          </div>\r\n        </SelectButton>\r\n\r\n        <ActionMenu\r\n          isOpen={isOpen}\r\n          onClose={() => setIsOpen(false)}\r\n          actions={actionItems}\r\n          selectedKeys={[currentSelectedKey]}\r\n          disabledKeys={disabledKeys}\r\n        />\r\n      </div>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div\r\n      className=\"proton-Select\"\r\n      aria-label={label || name}\r\n      aria-disabled={isDisabled}\r\n    >\r\n      {label && (\r\n        <div className=\"proton-Select__label\" data-testid=\"select-label\">\r\n          {label}\r\n        </div>\r\n      )}\r\n\r\n      {/* Hidden input for form submission */}\r\n      <input\r\n        ref={hiddenInputRef}\r\n        type=\"hidden\"\r\n        name={name}\r\n        value={currentSelectedKey}\r\n        data-testid=\"hidden-select-container\"\r\n      />\r\n\r\n      <RadixSelect.Root\r\n        value={currentSelectedKey}\r\n        onValueChange={handleValueChange}\r\n        onOpenChange={handleOpenChange}\r\n        disabled={isDisabled}\r\n      >\r\n        <RadixSelect.Trigger asChild>\r\n          <SelectButton\r\n            isOpen={isOpen}\r\n            ref={triggerRef}\r\n            disabled={isDisabled}\r\n            data-testid={testId}\r\n          >\r\n            <RadixSelect.Value\r\n              className=\"proton-Select__value\"\r\n              placeholder=\"Select an option\"\r\n            >\r\n              {selectedItem ? selectedItem.label : \"Select an option\"}\r\n            </RadixSelect.Value>\r\n            <RadixSelect.Icon asChild>\r\n              <div\r\n                className={csx(\r\n                  \"proton-Select__trigger_icon\",\r\n                  isOpen && \"proton-Select__trigger_icon--flipped\"\r\n                )}\r\n                aria-hidden=\"true\"\r\n              >\r\n                <svg id=\"caret-down\" viewBox=\"0 0 512 512\">\r\n                  <title>{isOpen ? \"caret down\" : \"caret up\"}</title>\r\n                  <path\r\n                    fill=\"currentColor\"\r\n                    d=\"M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7L86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z\"\r\n                  />\r\n                </svg>\r\n              </div>\r\n            </RadixSelect.Icon>\r\n          </SelectButton>\r\n        </RadixSelect.Trigger>\r\n\r\n        <RadixSelect.Portal>\r\n          <RadixSelect.Content\r\n            className={csx(\r\n              \"proton-Menu\",\r\n              \"proton-MenuTrigger__menu\",\r\n              themeClass\r\n            )}\r\n            style={themeStyle as React.CSSProperties}\r\n            position=\"popper\"\r\n          >\r\n            <RadixSelect.Viewport>\r\n              {items.map((item) => (\r\n                <RadixSelect.Item\r\n                  key={item.key}\r\n                  value={item.key}\r\n                  disabled={disabledKeys?.includes(item.key)}\r\n                  className=\"proton-Menu__item\"\r\n                >\r\n                  <RadixSelect.ItemText>{item.label}</RadixSelect.ItemText>\r\n                </RadixSelect.Item>\r\n              ))}\r\n            </RadixSelect.Viewport>\r\n          </RadixSelect.Content>\r\n        </RadixSelect.Portal>\r\n      </RadixSelect.Root>\r\n    </div>\r\n  );\r\n}\r\n\r\nSelect.displayName = \"ProtonUISelect\";\r\n"],"names":["SelectButton","forwardRef","disabled","isOpen","children","onClick","props","ref","jsx","csx","Select","label","name","isDisabled","disabledKeys","selectedKey","onSelectionChange","defaultSelectedKey","onOpen","onClose","items","testId","setIsOpen","useState","internalSelectedKey","setInternalSelectedKey","themeClass","themeStyle","useTheme","isMobile","useBreakpoint","BREAKPOINTS","triggerRef","useRef","hiddenInputRef","currentSelectedKey","selectedItem","item","handleValueChange","value","handleOpenChange","open","useEffect","actionItems","jsxs","ActionMenu","RadixSelect"],"mappings":"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"}

package/dist/components/ThemeProvider.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../node_modules/react/jsx-runtime.cjs.js"),t=require("react"),h=require("../design/lightTheme/colors.cjs.js"),l=require("../design/generateStylesheet.cjs.js"),d=require("../design/theme.cjs.js"),u=t.createContext(void 0),T=()=>{const e=t.useContext(u);if(e===void 0)throw new Error("useTheme must be used within a ThemeProvider");return e},x=({theme:e,children:i,palette:r=h.LIGHT_PALETTE})=>{const s=t.useRef(null),o=d.THEME_CLASSES[e],n=t.useMemo(()=>l.generateStylesheet(r,e),[r,e]);return t.useEffect(()=>{s.current&&(s.current.className=o,Object.entries(n).forEach(([a,m])=>{s.current.style.setProperty(a,m)}))},[e,o,r,n]),c.jsxRuntimeExports.jsx(u.Provider,{value:{theme:e,style:n,palette:r,className:o,hasPalette:!!r},children:c.jsxRuntimeExports.jsx("div",{ref:s,children:i})})};exports.ThemeProvider=x;exports.useTheme=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../node_modules/react/jsx-runtime.cjs.js"),s=require("react"),h=require("../design/lightTheme/colors.cjs.js"),l=require("../design/generateStylesheet.cjs.js"),d=require("../design/theme.cjs.js"),i=s.createContext(void 0),T=()=>{const e=s.useContext(i);if(e===void 0)throw new Error("useTheme must be used within a ThemeProvider");return e},x=({theme:e,children:u,palette:r=h.LIGHT_PALETTE})=>{const t=s.useRef(null),o=d.THEME_CLASSES[e],n=s.useMemo(()=>l.generateStylesheet(r,e),[r,e]);return s.useEffect(()=>{t.current&&(t.current.className=o,Object.entries(n).forEach(([a,m])=>{t.current.style.setProperty(a,m)}))},[e,o,r,n]),c.jsxRuntimeExports.jsx(i.Provider,{value:{theme:e,style:n,palette:r,className:o,hasPalette:!!r,themeProviderRef:t},children:c.jsxRuntimeExports.jsx("div",{ref:t,children:u})})};exports.ThemeProvider=x;exports.useTheme=T;
 //# sourceMappingURL=ThemeProvider.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.cjs.js","sources":["../../src/components/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, {\r\n  createContext,\r\n  ReactNode,\r\n  useContext,\r\n  useEffect,\r\n  useMemo,\r\n  useRef,\r\n} from \"react\";\r\n\r\nimport { THEME_CLASSES } from \"../design\";\r\nimport { LIGHT_PALETTE } from \"../design/lightTheme/colors\";\r\nimport { ProtonPalette, ProtonStyleSheet, ProtonTheme } from \"../design/types\";\r\nimport { generateStylesheet } from \"../design/generateStylesheet\";\r\n\r\ninterface ThemeContextType {\r\n  theme: ProtonTheme;\r\n  className: string;\r\n  style: ProtonStyleSheet;\r\n  palette: ProtonPalette;\r\n  hasPalette?: boolean;\r\n}\r\n\r\nconst ThemeContext = createContext<ThemeContextType | undefined>(undefined);\r\n\r\nexport const useTheme = () => {\r\n  const context = useContext(ThemeContext);\r\n  if (context === undefined) {\r\n    throw new Error(\"useTheme must be used within a ThemeProvider\");\r\n  }\r\n  return context;\r\n};\r\n\r\ninterface ThemeProviderProps {\r\n  theme: ProtonTheme;\r\n  children: ReactNode;\r\n  palette?: ProtonPalette;\r\n}\r\n\r\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\r\n  theme,\r\n  children,\r\n  palette = LIGHT_PALETTE,\r\n}) => {\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n  const themeClass = THEME_CLASSES[theme];\r\n  const themeVariables = useMemo(\r\n    () => generateStylesheet(palette, theme),\r\n    [palette, theme]\r\n  );\r\n\r\n  useEffect(() => {\r\n    // Apply the theme class and css variables to the container div so that it is only scoped\r\n    // to the ThemeProvider children.\r\n    if (containerRef.current) {\r\n      containerRef.current.className = themeClass;\r\n\r\n      Object.entries(themeVariables).forEach(([key, value]) => {\r\n        containerRef.current!.style.setProperty(key, value as string);\r\n      });\r\n    }\r\n  }, [theme, themeClass, palette, themeVariables]);\r\n\r\n  return (\r\n    <ThemeContext.Provider\r\n      value={{\r\n        theme,\r\n        style: themeVariables,\r\n        palette,\r\n        className: themeClass,\r\n        hasPalette: Boolean(palette),\r\n      }}\r\n    >\r\n      <div ref={containerRef}>{children}</div>\r\n    </ThemeContext.Provider>\r\n  );\r\n};\r\n"],"names":["ThemeContext","createContext","useTheme","context","useContext","ThemeProvider","theme","children","palette","LIGHT_PALETTE","containerRef","useRef","themeClass","THEME_CLASSES","themeVariables","useMemo","generateStylesheet","useEffect","key","value","jsx"],"mappings":"oSAwBMA,EAAeC,EAAAA,cAA4C,MAAS,EAE7DC,EAAW,IAAM,CACtB,MAAAC,EAAUC,aAAWJ,CAAY,EACvC,GAAIG,IAAY,OACR,MAAA,IAAI,MAAM,8CAA8C,EAEzD,OAAAA,CACT,EAQaE,EAA8C,CAAC,CAAA,MAC1DC,EACA,SAAAC,EACA,QAAAC,EAAUC,EAAA,aACZ,IAAM,CACE,MAAAC,EAAeC,SAAuB,IAAI,EAC1CC,EAAaC,gBAAcP,CAAK,EAChCQ,EAAiBC,EAAA,QACrB,IAAMC,EAAmB,mBAAAR,EAASF,CAAK,EACvC,CAACE,EAASF,CAAK,CAAA,EAGjBW,OAAAA,EAAAA,UAAU,IAAM,CAGVP,EAAa,UACfA,EAAa,QAAQ,UAAYE,EAE1B,OAAA,QAAQE,CAAc,EAAE,QAAQ,CAAC,CAACI,EAAKC,CAAK,IAAM,CACvDT,EAAa,QAAS,MAAM,YAAYQ,EAAKC,CAAe,CAAA,CAC7D,IAEF,CAACb,EAAOM,EAAYJ,EAASM,CAAc,CAAC,EAG7CM,EAAA,kBAAA,IAACpB,EAAa,SAAb,CACC,MAAO,CAAA,MACLM,EACA,MAAOQ,EACP,QAAAN,EACA,UAAWI,EACX,WAAY,EAAQJ,CACtB,EAEA,SAACY,EAAA,kBAAA,IAAA,MAAA,CAAI,IAAKV,EAAe,SAAAH,EAAS,CAAA,CAAA,CAGxC"}
+{"version":3,"file":"ThemeProvider.cjs.js","sources":["../../src/components/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, {\r\n  createContext,\r\n  ReactNode,\r\n  useContext,\r\n  useEffect,\r\n  useMemo,\r\n  useRef,\r\n} from \"react\";\r\n\r\nimport { THEME_CLASSES } from \"../design\";\r\nimport { LIGHT_PALETTE } from \"../design/lightTheme/colors\";\r\nimport { ProtonPalette, ProtonStyleSheet, ProtonTheme } from \"../design/types\";\r\nimport { generateStylesheet } from \"../design/generateStylesheet\";\r\n\r\ninterface ThemeContextType {\r\n  theme: ProtonTheme;\r\n  className: string;\r\n  style: ProtonStyleSheet;\r\n  palette: ProtonPalette;\r\n  hasPalette?: boolean;\r\n  themeProviderRef?: React.RefObject<HTMLDivElement>;\r\n}\r\n\r\nconst ThemeContext = createContext<ThemeContextType | undefined>(undefined);\r\n\r\nexport const useTheme = () => {\r\n  const context = useContext(ThemeContext);\r\n  if (context === undefined) {\r\n    throw new Error(\"useTheme must be used within a ThemeProvider\");\r\n  }\r\n  return context;\r\n};\r\n\r\ninterface ThemeProviderProps {\r\n  theme: ProtonTheme;\r\n  children: ReactNode;\r\n  palette?: ProtonPalette;\r\n}\r\n\r\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\r\n  theme,\r\n  children,\r\n  palette = LIGHT_PALETTE,\r\n}) => {\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n  const themeClass = THEME_CLASSES[theme];\r\n  const themeVariables = useMemo(\r\n    () => generateStylesheet(palette, theme),\r\n    [palette, theme]\r\n  );\r\n\r\n  useEffect(() => {\r\n    // Apply the theme class and css variables to the container div so that it is only scoped\r\n    // to the ThemeProvider children.\r\n    if (containerRef.current) {\r\n      containerRef.current.className = themeClass;\r\n\r\n      Object.entries(themeVariables).forEach(([key, value]) => {\r\n        containerRef.current!.style.setProperty(key, value as string);\r\n      });\r\n    }\r\n  }, [theme, themeClass, palette, themeVariables]);\r\n\r\n  return (\r\n    <ThemeContext.Provider\r\n      value={{\r\n        theme,\r\n        style: themeVariables,\r\n        palette,\r\n        className: themeClass,\r\n        hasPalette: Boolean(palette),\r\n        themeProviderRef: containerRef,\r\n      }}\r\n    >\r\n      <div ref={containerRef}>{children}</div>\r\n    </ThemeContext.Provider>\r\n  );\r\n};\r\n"],"names":["ThemeContext","createContext","useTheme","context","useContext","ThemeProvider","theme","children","palette","LIGHT_PALETTE","containerRef","useRef","themeClass","THEME_CLASSES","themeVariables","useMemo","generateStylesheet","useEffect","key","value","jsx"],"mappings":"oSAyBMA,EAAeC,EAAAA,cAA4C,MAAS,EAE7DC,EAAW,IAAM,CACtB,MAAAC,EAAUC,aAAWJ,CAAY,EACvC,GAAIG,IAAY,OACR,MAAA,IAAI,MAAM,8CAA8C,EAEzD,OAAAA,CACT,EAQaE,EAA8C,CAAC,CAAA,MAC1DC,EACA,SAAAC,EACA,QAAAC,EAAUC,EAAA,aACZ,IAAM,CACE,MAAAC,EAAeC,SAAuB,IAAI,EAC1CC,EAAaC,gBAAcP,CAAK,EAChCQ,EAAiBC,EAAA,QACrB,IAAMC,EAAmB,mBAAAR,EAASF,CAAK,EACvC,CAACE,EAASF,CAAK,CAAA,EAGjBW,OAAAA,EAAAA,UAAU,IAAM,CAGVP,EAAa,UACfA,EAAa,QAAQ,UAAYE,EAE1B,OAAA,QAAQE,CAAc,EAAE,QAAQ,CAAC,CAACI,EAAKC,CAAK,IAAM,CACvDT,EAAa,QAAS,MAAM,YAAYQ,EAAKC,CAAe,CAAA,CAC7D,IAEF,CAACb,EAAOM,EAAYJ,EAASM,CAAc,CAAC,EAG7CM,EAAA,kBAAA,IAACpB,EAAa,SAAb,CACC,MAAO,CAAA,MACLM,EACA,MAAOQ,EACP,QAAAN,EACA,UAAWI,EACX,WAAY,EAAQJ,EACpB,iBAAkBE,CACpB,EAEA,SAACU,EAAA,kBAAA,IAAA,MAAA,CAAI,IAAKV,EAAe,SAAAH,EAAS,CAAA,CAAA,CAGxC"}

package/dist/components/ThemeProvider.es.js

@@ -1,23 +1,23 @@
 import { j as n } from "../node_modules/react/jsx-runtime.es.js";
-import { createContext as a, useContext as f, useRef as h, useMemo as l, useEffect as x } from "react";
-import { LIGHT_PALETTE as E } from "../design/lightTheme/colors.es.js";
-import { generateStylesheet as T } from "../design/generateStylesheet.es.js";
-import { THEME_CLASSES as d } from "../design/theme.es.js";
-const i = a(void 0), y = () => {
-  const e = f(i);
+import { createContext as f, useContext as a, useRef as h, useMemo as d, useEffect as l } from "react";
+import { LIGHT_PALETTE as x } from "../design/lightTheme/colors.es.js";
+import { generateStylesheet as E } from "../design/generateStylesheet.es.js";
+import { THEME_CLASSES as T } from "../design/theme.es.js";
+const i = f(void 0), y = () => {
+  const e = a(i);
   if (e === void 0)
     throw new Error("useTheme must be used within a ThemeProvider");
   return e;
-}, S = ({
+}, R = ({
   theme: e,
   children: c,
-  palette: r = E
+  palette: r = x
 }) => {
-  const o = h(null), t = d[e], s = l(
-    () => T(r, e),
+  const o = h(null), t = T[e], s = d(
+    () => E(r, e),
     [r, e]
   );
-  return x(() => {
+  return l(() => {
     o.current && (o.current.className = t, Object.entries(s).forEach(([m, u]) => {
       o.current.style.setProperty(m, u);
     }));
@@ -29,14 +29,15 @@ const i = a(void 0), y = () => {
         style: s,
         palette: r,
         className: t,
-        hasPalette: !!r
+        hasPalette: !!r,
+        themeProviderRef: o
       },
       children: /* @__PURE__ */ n.jsx("div", { ref: o, children: c })
     }
   );
 };
 export {
-  S as ThemeProvider,
+  R as ThemeProvider,
   y as useTheme
 };
 //# sourceMappingURL=ThemeProvider.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.es.js","sources":["../../src/components/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, {\r\n  createContext,\r\n  ReactNode,\r\n  useContext,\r\n  useEffect,\r\n  useMemo,\r\n  useRef,\r\n} from \"react\";\r\n\r\nimport { THEME_CLASSES } from \"../design\";\r\nimport { LIGHT_PALETTE } from \"../design/lightTheme/colors\";\r\nimport { ProtonPalette, ProtonStyleSheet, ProtonTheme } from \"../design/types\";\r\nimport { generateStylesheet } from \"../design/generateStylesheet\";\r\n\r\ninterface ThemeContextType {\r\n  theme: ProtonTheme;\r\n  className: string;\r\n  style: ProtonStyleSheet;\r\n  palette: ProtonPalette;\r\n  hasPalette?: boolean;\r\n}\r\n\r\nconst ThemeContext = createContext<ThemeContextType | undefined>(undefined);\r\n\r\nexport const useTheme = () => {\r\n  const context = useContext(ThemeContext);\r\n  if (context === undefined) {\r\n    throw new Error(\"useTheme must be used within a ThemeProvider\");\r\n  }\r\n  return context;\r\n};\r\n\r\ninterface ThemeProviderProps {\r\n  theme: ProtonTheme;\r\n  children: ReactNode;\r\n  palette?: ProtonPalette;\r\n}\r\n\r\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\r\n  theme,\r\n  children,\r\n  palette = LIGHT_PALETTE,\r\n}) => {\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n  const themeClass = THEME_CLASSES[theme];\r\n  const themeVariables = useMemo(\r\n    () => generateStylesheet(palette, theme),\r\n    [palette, theme]\r\n  );\r\n\r\n  useEffect(() => {\r\n    // Apply the theme class and css variables to the container div so that it is only scoped\r\n    // to the ThemeProvider children.\r\n    if (containerRef.current) {\r\n      containerRef.current.className = themeClass;\r\n\r\n      Object.entries(themeVariables).forEach(([key, value]) => {\r\n        containerRef.current!.style.setProperty(key, value as string);\r\n      });\r\n    }\r\n  }, [theme, themeClass, palette, themeVariables]);\r\n\r\n  return (\r\n    <ThemeContext.Provider\r\n      value={{\r\n        theme,\r\n        style: themeVariables,\r\n        palette,\r\n        className: themeClass,\r\n        hasPalette: Boolean(palette),\r\n      }}\r\n    >\r\n      <div ref={containerRef}>{children}</div>\r\n    </ThemeContext.Provider>\r\n  );\r\n};\r\n"],"names":["ThemeContext","createContext","useTheme","context","useContext","ThemeProvider","theme","children","palette","LIGHT_PALETTE","containerRef","useRef","themeClass","THEME_CLASSES","themeVariables","useMemo","generateStylesheet","useEffect","key","value","jsx"],"mappings":";;;;;AAwBA,MAAMA,IAAeC,EAA4C,MAAS,GAE7DC,IAAW,MAAM;AACtB,QAAAC,IAAUC,EAAWJ,CAAY;AACvC,MAAIG,MAAY;AACR,UAAA,IAAI,MAAM,8CAA8C;AAEzD,SAAAA;AACT,GAQaE,IAA8C,CAAC;AAAA,EAC1D,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC,IAAUC;AACZ,MAAM;AACE,QAAAC,IAAeC,EAAuB,IAAI,GAC1CC,IAAaC,EAAcP,CAAK,GAChCQ,IAAiBC;AAAA,IACrB,MAAMC,EAAmBR,GAASF,CAAK;AAAA,IACvC,CAACE,GAASF,CAAK;AAAA,EAAA;AAGjB,SAAAW,EAAU,MAAM;AAGd,IAAIP,EAAa,YACfA,EAAa,QAAQ,YAAYE,GAE1B,OAAA,QAAQE,CAAc,EAAE,QAAQ,CAAC,CAACI,GAAKC,CAAK,MAAM;AACvD,MAAAT,EAAa,QAAS,MAAM,YAAYQ,GAAKC,CAAe;AAAA,IAAA,CAC7D;AAAA,KAEF,CAACb,GAAOM,GAAYJ,GAASM,CAAc,CAAC,GAG7CM,gBAAAA,EAAA;AAAA,IAACpB,EAAa;AAAA,IAAb;AAAA,MACC,OAAO;AAAA,QACL,OAAAM;AAAA,QACA,OAAOQ;AAAA,QACP,SAAAN;AAAA,QACA,WAAWI;AAAA,QACX,YAAY,EAAQJ;AAAA,MACtB;AAAA,MAEA,UAACY,gBAAAA,EAAA,IAAA,OAAA,EAAI,KAAKV,GAAe,UAAAH,GAAS;AAAA,IAAA;AAAA,EAAA;AAGxC;"}
+{"version":3,"file":"ThemeProvider.es.js","sources":["../../src/components/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, {\r\n  createContext,\r\n  ReactNode,\r\n  useContext,\r\n  useEffect,\r\n  useMemo,\r\n  useRef,\r\n} from \"react\";\r\n\r\nimport { THEME_CLASSES } from \"../design\";\r\nimport { LIGHT_PALETTE } from \"../design/lightTheme/colors\";\r\nimport { ProtonPalette, ProtonStyleSheet, ProtonTheme } from \"../design/types\";\r\nimport { generateStylesheet } from \"../design/generateStylesheet\";\r\n\r\ninterface ThemeContextType {\r\n  theme: ProtonTheme;\r\n  className: string;\r\n  style: ProtonStyleSheet;\r\n  palette: ProtonPalette;\r\n  hasPalette?: boolean;\r\n  themeProviderRef?: React.RefObject<HTMLDivElement>;\r\n}\r\n\r\nconst ThemeContext = createContext<ThemeContextType | undefined>(undefined);\r\n\r\nexport const useTheme = () => {\r\n  const context = useContext(ThemeContext);\r\n  if (context === undefined) {\r\n    throw new Error(\"useTheme must be used within a ThemeProvider\");\r\n  }\r\n  return context;\r\n};\r\n\r\ninterface ThemeProviderProps {\r\n  theme: ProtonTheme;\r\n  children: ReactNode;\r\n  palette?: ProtonPalette;\r\n}\r\n\r\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\r\n  theme,\r\n  children,\r\n  palette = LIGHT_PALETTE,\r\n}) => {\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n  const themeClass = THEME_CLASSES[theme];\r\n  const themeVariables = useMemo(\r\n    () => generateStylesheet(palette, theme),\r\n    [palette, theme]\r\n  );\r\n\r\n  useEffect(() => {\r\n    // Apply the theme class and css variables to the container div so that it is only scoped\r\n    // to the ThemeProvider children.\r\n    if (containerRef.current) {\r\n      containerRef.current.className = themeClass;\r\n\r\n      Object.entries(themeVariables).forEach(([key, value]) => {\r\n        containerRef.current!.style.setProperty(key, value as string);\r\n      });\r\n    }\r\n  }, [theme, themeClass, palette, themeVariables]);\r\n\r\n  return (\r\n    <ThemeContext.Provider\r\n      value={{\r\n        theme,\r\n        style: themeVariables,\r\n        palette,\r\n        className: themeClass,\r\n        hasPalette: Boolean(palette),\r\n        themeProviderRef: containerRef,\r\n      }}\r\n    >\r\n      <div ref={containerRef}>{children}</div>\r\n    </ThemeContext.Provider>\r\n  );\r\n};\r\n"],"names":["ThemeContext","createContext","useTheme","context","useContext","ThemeProvider","theme","children","palette","LIGHT_PALETTE","containerRef","useRef","themeClass","THEME_CLASSES","themeVariables","useMemo","generateStylesheet","useEffect","key","value","jsx"],"mappings":";;;;;AAyBA,MAAMA,IAAeC,EAA4C,MAAS,GAE7DC,IAAW,MAAM;AACtB,QAAAC,IAAUC,EAAWJ,CAAY;AACvC,MAAIG,MAAY;AACR,UAAA,IAAI,MAAM,8CAA8C;AAEzD,SAAAA;AACT,GAQaE,IAA8C,CAAC;AAAA,EAC1D,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC,IAAUC;AACZ,MAAM;AACE,QAAAC,IAAeC,EAAuB,IAAI,GAC1CC,IAAaC,EAAcP,CAAK,GAChCQ,IAAiBC;AAAA,IACrB,MAAMC,EAAmBR,GAASF,CAAK;AAAA,IACvC,CAACE,GAASF,CAAK;AAAA,EAAA;AAGjB,SAAAW,EAAU,MAAM;AAGd,IAAIP,EAAa,YACfA,EAAa,QAAQ,YAAYE,GAE1B,OAAA,QAAQE,CAAc,EAAE,QAAQ,CAAC,CAACI,GAAKC,CAAK,MAAM;AACvD,MAAAT,EAAa,QAAS,MAAM,YAAYQ,GAAKC,CAAe;AAAA,IAAA,CAC7D;AAAA,KAEF,CAACb,GAAOM,GAAYJ,GAASM,CAAc,CAAC,GAG7CM,gBAAAA,EAAA;AAAA,IAACpB,EAAa;AAAA,IAAb;AAAA,MACC,OAAO;AAAA,QACL,OAAAM;AAAA,QACA,OAAOQ;AAAA,QACP,SAAAN;AAAA,QACA,WAAWI;AAAA,QACX,YAAY,EAAQJ;AAAA,QACpB,kBAAkBE;AAAA,MACpB;AAAA,MAEA,UAACU,gBAAAA,EAAA,IAAA,OAAA,EAAI,KAAKV,GAAe,UAAAH,GAAS;AAAA,IAAA;AAAA,EAAA;AAGxC;"}

package/dist/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./components/ActionMenu/ActionMenu.cjs.js"),t=require("./components/Badge/Badge.cjs.js"),e=require("./components/Banner/Banner.cjs.js"),r=require("./components/Button/Button.cjs.js"),u=require("./components/ButtonGroup/ButtonGroup.cjs.js"),a=require("./components/ButtonWithSelect/ButtonWithSelect.cjs.js"),s=require("./components/DataTable/DataTable.cjs.js"),c=require("./components/Dialog/Dialog.cjs.js"),l=require("./components/Elevation/Elevation.cjs.js"),T=require("./components/Icon/Icon.cjs.js"),g=require("./components/ImageBackground/ImageBackground.cjs.js"),p=require("./components/Input/BaseInput/Input.cjs.js"),B=require("./components/Input/CopyInput/CopyInput.cjs.js"),q=require("./components/Input/SearchInput/SearchInput.cjs.js"),S=require("./components/Menu/MenuTrigger.cjs.js"),I=require("./components/Modal/Modal.cjs.js"),o=require("./components/Popover/Popover.cjs.js"),m=require("./components/ScreenOverlay/ScreenOverlay.cjs.js"),v=require("./components/Select/Select.cjs.js"),h=require("./components/Switch/Switch.cjs.js"),d=require("./components/Table/Table.cjs.js"),E=require("./components/Text/TextEllipsis/TextEllipsis.cjs.js"),N=require("./components/Text/TextEmphasis/TextEmphasis.cjs.js"),n=require("./components/ThemeProvider.cjs.js"),b=require("./components/Tombstone/Tombstone.cjs.js"),A=require("./components/Tooltip/Tooltip.cjs.js"),M=require("./components/Waveform/Waveform.cjs.js");exports.ActionMenu=i.ActionMenu;exports.Badge=t.Badge;exports.BadgeVariants=t.BadgeVariants;exports.BANNER_ICONS=e.BANNER_ICONS;exports.BANNER_VARIANTS=e.BANNER_VARIANTS;exports.Banner=e.Banner;exports.Button=r.Button;exports.ButtonSizes=r.ButtonSizes;exports.ButtonVariants=r.ButtonVariants;exports.ButtonGroup=u.ButtonGroup;exports.ButtonWithSelect=a.ButtonWithSelect;exports.DataTable=s.DataTable;exports.Dialog=c.Dialog;exports.Elevation=l.Elevation;exports.Icon=T.Icon;exports.ImageBackground=g.ImageBackground;exports.Input=p.Input;exports.CopyInput=B.CopyInput;exports.SearchInput=q.SearchInput;exports.MenuTrigger=S.MenuTrigger;exports.Modal=I.Modal;exports.Popover=o.Popover;exports.usePopoverTrigger=o.usePopoverTrigger;exports.ScreenOverlay=m.ScreenOverlay;exports.Select=v.Select;exports.Switch=h.Switch;exports.Table=d.Table;exports.TextEllipsis=E.TextEllipsis;exports.TextEmphasis=N.TextEmphasis;exports.ThemeProvider=n.ThemeProvider;exports.useTheme=n.useTheme;exports.Tombstone=b.Tombstone;exports.TooltipTrigger=A.TooltipTrigger;exports.Waveform=M.Waveform;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./components/ActionMenu/ActionMenu.cjs.js"),r=require("./components/Badge/Badge.cjs.js"),e=require("./components/Banner/Banner.cjs.js"),t=require("./components/Button/Button.cjs.js"),i=require("./components/ButtonGroup/ButtonGroup.cjs.js"),u=require("./components/ButtonWithSelect/ButtonWithSelect.cjs.js"),a=require("./components/DataTable/DataTable.cjs.js"),c=require("./components/Dialog/Dialog.cjs.js"),s=require("./components/Elevation/Elevation.cjs.js"),l=require("./components/Icon/Icon.cjs.js"),T=require("./components/ImageBackground/ImageBackground.cjs.js"),p=require("./components/Input/BaseInput/Input.cjs.js"),B=require("./components/Input/CopyInput/CopyInput.cjs.js"),q=require("./components/Input/SearchInput/SearchInput.cjs.js"),g=require("./components/Menu/MenuTrigger.cjs.js"),S=require("./components/Modal/Modal.cjs.js"),I=require("./components/Popover/Popover.cjs.js"),m=require("./components/ScreenOverlay/ScreenOverlay.cjs.js"),h=require("./components/Select/Select.cjs.js"),d=require("./components/Switch/Switch.cjs.js"),v=require("./components/Table/Table.cjs.js"),E=require("./components/Text/TextEllipsis/TextEllipsis.cjs.js"),N=require("./components/Text/TextEmphasis/TextEmphasis.cjs.js"),o=require("./components/ThemeProvider.cjs.js"),b=require("./components/Tombstone/Tombstone.cjs.js"),A=require("./components/Tooltip/Tooltip.cjs.js"),M=require("./components/Waveform/Waveform.cjs.js");exports.ActionMenu=n.ActionMenu;exports.Badge=r.Badge;exports.BadgeVariants=r.BadgeVariants;exports.BANNER_ICONS=e.BANNER_ICONS;exports.BANNER_VARIANTS=e.BANNER_VARIANTS;exports.Banner=e.Banner;exports.Button=t.Button;exports.ButtonSizes=t.ButtonSizes;exports.ButtonVariants=t.ButtonVariants;exports.ButtonGroup=i.ButtonGroup;exports.ButtonWithSelect=u.ButtonWithSelect;exports.DataTable=a.DataTable;exports.Dialog=c.Dialog;exports.Elevation=s.Elevation;exports.Icon=l.Icon;exports.ImageBackground=T.ImageBackground;exports.Input=p.Input;exports.CopyInput=B.CopyInput;exports.SearchInput=q.SearchInput;exports.MenuTrigger=g.MenuTrigger;exports.Modal=S.Modal;exports.Popover=I.Popover;exports.ScreenOverlay=m.ScreenOverlay;exports.Select=h.Select;exports.Switch=d.Switch;exports.Table=v.Table;exports.TextEllipsis=E.TextEllipsis;exports.TextEmphasis=N.TextEmphasis;exports.ThemeProvider=o.ThemeProvider;exports.useTheme=o.useTheme;exports.Tombstone=b.Tombstone;exports.TooltipTrigger=A.TooltipTrigger;exports.Waveform=M.Waveform;
 //# sourceMappingURL=index.cjs.js.map