@protonradio/proton-ui 0.6.18-beta.14 → 0.6.18-beta.16

package/dist/index.d.ts

@@ -616,7 +616,7 @@ declare interface ThemeVariables {
     "--proton-color__secondary": string;
 }
 
-export declare function Tooltip({ children, arrow, ...props }: TooltipProps): JSX_2.Element;
+export declare function Tooltip({ children, arrow, placement, ...props }: TooltipProps): JSX_2.Element;
 
 export declare interface TooltipProps extends Omit<TooltipProps_2, "children"> {
     children: React.ReactNode;

package/dist/index.es.js

@@ -2,7 +2,7 @@ import g, { useLayoutEffect as pr, useState as D, useRef as S, createElement as
 import en, { createPortal as tn } from "react-dom";
 import { useMenu as nn, useOverlay as mr, FocusScope as pt, useMenuItem as rn, useButton as Le, useRadioGroup as br, useRadio as gr, VisuallyHidden as on, useDialog as yr, useTextField as xr, useClipboard as $r, useSearchField as _r, useOverlayTrigger as Sr, usePopover as Er, Overlay as wr, DismissButton as Cr, useFocusRing as Ce, useHover as Rr, useId as Lt, mergeProps as me, useMenuTrigger as Pr, useMenuSection as Tr, useTooltipTrigger as jr, OverlayContainer as Nr, useOverlayPosition as Mr, useTooltip as kr, useListBox as Ar, useOption as Or, useSelect as an, HiddenSelect as ln, useSwitch as Ir, useTableHeaderRow as Dr, useTableColumnHeader as Lr, useTableRowGroup as Br, useTableRow as Vr, useTableCell as Hr, useTable as Kr } from "react-aria";
 import { useTreeState as sn, Item as ht, useRadioGroupState as Wr, useOverlayTriggerState as Fr, useMenuTriggerState as Gr, useTooltipTriggerState as cn, useSelectState as un, useToggleState as Ur, useTableState as zr } from "react-stately";
-import { b as w, i as vt, h as dn } from "./utils-DPt5Em4t.mjs";
+import { b as E, i as vt, h as dn } from "./utils-DPt5Em4t.mjs";
 import { THEMES as le, BREAKPOINTS as fn } from "./constants.es.js";
 import { transparentize as de, toRgba as $e } from "color2k";
 import { G as Q, S as Me, W as ke, D as Ae, B as Yr } from "./colors-Dwh4VIMR.mjs";
@@ -51,7 +51,7 @@ function Jr() {
       var m = y && a[y] || a[x];
       return typeof m == "function" ? m : null;
     }
-    var E = t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    var w = t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
     function R(a) {
       {
         for (var m = arguments.length, b = new Array(m > 1 ? m - 1 : 0), _ = 1; _ < m; _++)
@@ -61,7 +61,7 @@ function Jr() {
     }
     function j(a, m, b) {
       {
-        var _ = E.ReactDebugCurrentFrame, N = _.getStackAddendum();
+        var _ = w.ReactDebugCurrentFrame, N = _.getStackAddendum();
         N !== "" && (m += "%s", b = b.concat([N]));
         var k = b.map(function(T) {
           return String(T);
@@ -195,7 +195,7 @@ function Jr() {
         B < 0 && R("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
       }
     }
-    var We = E.ReactCurrentDispatcher, Fe;
+    var We = w.ReactCurrentDispatcher, Fe;
     function Pe(a, m, b) {
       {
         if (Fe === void 0)
@@ -321,7 +321,7 @@ function Jr() {
         }
       return "";
     }
-    var ye = Object.prototype.hasOwnProperty, wt = {}, Ct = E.ReactDebugCurrentFrame;
+    var ye = Object.prototype.hasOwnProperty, wt = {}, Ct = w.ReactDebugCurrentFrame;
     function Ne(a) {
       if (a) {
         var m = a._owner, b = je(a.type, a._source, m ? m.type : null);
@@ -372,7 +372,7 @@ function Jr() {
       if (Yn(a))
         return R("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", zn(a)), Rt(a);
     }
-    var xe = E.ReactCurrentOwner, qn = {
+    var xe = w.ReactCurrentOwner, qn = {
       key: !0,
       ref: !0,
       __self: !0,
@@ -470,7 +470,7 @@ function Jr() {
         return tr(a, C, J, N, _, xe.current, T);
       }
     }
-    var Ye = E.ReactCurrentOwner, Nt = E.ReactDebugCurrentFrame;
+    var Ye = w.ReactCurrentOwner, Nt = w.ReactDebugCurrentFrame;
     function he(a) {
       if (a) {
         var m = a._owner, b = je(a.type, a._source, m ? m.type : null);
@@ -669,8 +669,8 @@ const Zr = ({ children: t }) => {
   "data-testid": h
 }) => {
   Xr(e);
-  const { className: p, theme: v } = ie(), [y, x] = D(!1), [$, E] = D(0), R = S(null), j = S(null), P = S(window.location.pathname), L = c && c.length > 0, M = () => {
-    x(!0), E(0), setTimeout(() => {
+  const { className: p, theme: v } = ie(), [y, x] = D(!1), [$, w] = D(0), R = S(null), j = S(null), P = S(window.location.pathname), L = c && c.length > 0, M = () => {
+    x(!0), w(0), setTimeout(() => {
       d == null || d(), x(!1);
     }, 300);
   }, G = L ? sn({
@@ -706,7 +706,7 @@ const Zr = ({ children: t }) => {
     j
   );
   F(() => {
-    e && R.current && E(R.current.scrollHeight);
+    e && R.current && w(R.current.scrollHeight);
   }, [e, R]), F(() => {
     const I = (H) => {
       H.key === "Escape" && M();
@@ -741,14 +741,14 @@ const Zr = ({ children: t }) => {
       "div",
       {
         "data-testid": h || "ActionMenu-wrapper",
-        className: w(
+        className: E(
           "proton-ActionMenu__wrapper",
           te && "proton-ActionMenu__wrapper--scrollable"
         ),
         children: /* @__PURE__ */ s.jsx(
           "div",
           {
-            className: w("proton-ActionMenu__card", p),
+            className: E("proton-ActionMenu__card", p),
             "data-testid": "ActionMenu-content",
             style: { height: `${$}px` },
             children: /* @__PURE__ */ s.jsx("div", { ref: j, children: /* @__PURE__ */ s.jsx("div", { ...z, ref: R, children: ce ? /* @__PURE__ */ s.jsxs(pt, { autoFocus: !0, contain: !0, children: [
@@ -756,7 +756,7 @@ const Zr = ({ children: t }) => {
               L && /* @__PURE__ */ s.jsx(
                 "div",
                 {
-                  className: w(
+                  className: E(
                     "proton-ActionMenu__list",
                     n === "none" && "proton-ActionMenu__list--disabled"
                   ),
@@ -902,7 +902,7 @@ const ua = {
       role: "status",
       "aria-live": "polite",
       "data-testid": n["data-testid"],
-      className: w(
+      className: E(
         "proton-Badge",
         t && `proton-Badge--${t}`,
         r
@@ -937,7 +937,7 @@ function vn({
     {
       ...d,
       ...u,
-      className: w(
+      className: E(
         "proton-Button",
         `proton-Button--${t}`,
         o && "proton-Button--disabled"
@@ -1019,7 +1019,7 @@ const mn = {
   {
     role: "status",
     "aria-live": "polite",
-    className: w(
+    className: E(
       "proton-Banner",
       `proton-Banner--${t}`,
       e && "proton-Banner--rounded"
@@ -1028,7 +1028,7 @@ const mn = {
     children: /* @__PURE__ */ s.jsxs(
       "div",
       {
-        className: w(
+        className: E(
           "proton-Banner__wrapper",
           r && "proton-Banner__wrapper--compact"
         ),
@@ -1045,7 +1045,7 @@ const mn = {
   return /* @__PURE__ */ s.jsx(
     "h3",
     {
-      className: w(
+      className: E(
         "proton-Banner",
         "proton-Banner__title",
         `proton-Banner--${n}__title`
@@ -1060,7 +1060,7 @@ const mn = {
   return /* @__PURE__ */ s.jsx(
     "p",
     {
-      className: w(
+      className: E(
         "proton-Banner",
         "proton-Banner__content",
         `proton-Banner--${n}__content`
@@ -1078,7 +1078,7 @@ const mn = {
     {
       "aria-hidden": "true",
       "data-testid": n["data-testid"],
-      className: w("proton-Banner__icon", `proton-Banner--${r}__icon`),
+      className: E("proton-Banner__icon", `proton-Banner--${r}__icon`),
       children: i
     }
   ) : null;
@@ -1116,7 +1116,7 @@ co.Option = function(e) {
   return /* @__PURE__ */ s.jsxs(
     "label",
     {
-      className: w(
+      className: E(
         "proton-ButtonGroup__option",
         l && "proton-ButtonGroup__option--selected"
       ),
@@ -1132,7 +1132,7 @@ co.Option = function(e) {
 function fa({ title: t, children: e, ...n }) {
   let r = S(null), { dialogProps: o, titleProps: i } = yr(n, r);
   const { className: l } = ie();
-  return /* @__PURE__ */ s.jsxs("div", { ...o, ref: r, className: w("proton-Dialog", l), children: [
+  return /* @__PURE__ */ s.jsxs("div", { ...o, ref: r, className: E("proton-Dialog", l), children: [
     t && /* @__PURE__ */ s.jsx("h3", { ...i, className: "proton-Dialog__header", children: t }),
     e
   ] });
@@ -1178,7 +1178,7 @@ const po = fe(
     autoComplete: v,
     "data-testid": y
   }, x) => {
-    const $ = S(null), { className: E, palette: R, theme: j } = ie(), P = x || $, { labelProps: L, inputProps: M, descriptionProps: G, errorMessageProps: z } = xr(
+    const $ = S(null), { className: w, palette: R, theme: j } = ie(), P = x || $, { labelProps: L, inputProps: M, descriptionProps: G, errorMessageProps: z } = xr(
       {
         label: c,
         name: u,
@@ -1217,7 +1217,7 @@ const po = fe(
         t && /* @__PURE__ */ s.jsx(
           "div",
           {
-            className: w(
+            className: E(
               "proton-Input__descriptor",
               "proton-Input__prefix"
             ),
@@ -1234,11 +1234,11 @@ const po = fe(
             "aria-invalid": !!i,
             ref: P,
             style: te,
-            className: w(
+            className: E(
               "proton-Input",
               i && "proton-Input--error",
               c && !f && "proton-Input__label-top",
-              E
+              w
             )
           }
         ),
@@ -1246,7 +1246,7 @@ const po = fe(
           "label",
           {
             ...L,
-            className: w(
+            className: E(
               "proton-Input__label",
               f && "proton-Input__label--hide",
               h && "proton-Input__label--filled"
@@ -1257,7 +1257,7 @@ const po = fe(
         e && /* @__PURE__ */ s.jsx(
           "div",
           {
-            className: w(
+            className: E(
               "proton-Input__descriptor",
               "proton-Input__suffix"
             ),
@@ -1270,7 +1270,7 @@ const po = fe(
         {
           ...z,
           role: "alert",
-          className: w("proton-Input__error", "proton-Input__text"),
+          className: E("proton-Input__error", "proton-Input__text"),
           id: `${u}-error`,
           children: i
         }
@@ -1330,7 +1330,7 @@ const ha = ({
   const d = vo({
     defaultValue: i,
     value: l,
-    onChange: (E) => u == null ? void 0 : u(E),
+    onChange: (w) => u == null ? void 0 : u(w),
     onClear: () => f == null ? void 0 : f(),
     label: e
   }), h = S(null), { inputProps: p, clearButtonProps: v } = _r(
@@ -1351,7 +1351,7 @@ const ha = ({
         {
           ...p,
           type: "search",
-          onChange: (E) => d.setValue(E),
+          onChange: (w) => d.setValue(w),
           value: y,
           name: t,
           placeholder: e,
@@ -1366,8 +1366,8 @@ const ha = ({
               height: "1.6em",
               viewBox: "0 0 24 24",
               onClick: () => {
-                var E;
-                return (E = h.current) == null ? void 0 : E.focus();
+                var w;
+                return (w = h.current) == null ? void 0 : w.focus();
               },
               children: [
                 /* @__PURE__ */ s.jsx("title", { children: "Magnifying Glass" }),
@@ -1386,7 +1386,7 @@ const ha = ({
             {
               "aria-label": v["aria-label"],
               type: "button",
-              className: w(
+              className: E(
                 "proton-SearchInput__button",
                 "proton-Input__descriptor",
                 "proton-Input__suffix",
@@ -1394,8 +1394,8 @@ const ha = ({
               ),
               "data-testid": `${c}-clear`,
               onClick: () => {
-                var E;
-                $(), (E = h.current) == null || E.focus();
+                var w;
+                $(), (w = h.current) == null || w.focus();
               },
               children: /* @__PURE__ */ s.jsxs(
                 "svg",
@@ -1461,7 +1461,7 @@ function mt({
       {
         ...f,
         ref: l,
-        className: w("proton-Popover", c),
+        className: E("proton-Popover", c),
         style: { ...u, ...f.style },
         "data-testid": o["data-testid"] || void 0,
         children: [
@@ -2117,7 +2117,7 @@ function Ko() {
     function y(j, P, L) {
       return P();
     }
-    var x = typeof window < "u" && typeof window.document < "u" && typeof window.document.createElement < "u", $ = !x, E = $ ? y : p, R = t.useSyncExternalStore !== void 0 ? t.useSyncExternalStore : E;
+    var x = typeof window < "u" && typeof window.document < "u" && typeof window.document.createElement < "u", $ = !x, w = $ ? y : p, R = t.useSyncExternalStore !== void 0 ? t.useSyncExternalStore : w;
     tt.useSyncExternalStore = R, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
   }()), tt;
 }
@@ -2471,10 +2471,10 @@ function ui(t, e) {
   r && (x ? x = `${x} ${y}` : o["aria-label"] && (x = `${v} ${y}`));
   let $ = S(r);
   return F(() => {
-    let E = {
+    let w = {
       "aria-labelledby": x || v
     };
-    (!$.current && c && r || $.current && c && !r) && qt(E, "assertive"), $.current = r;
+    (!$.current && c && r || $.current && c && !r) && qt(w, "assertive"), $.current = r;
   }, [
     r,
     c,
@@ -2910,7 +2910,7 @@ const ut = /* @__PURE__ */ O(null), Mi = /* @__PURE__ */ Jo("item", function(e,
     key: r.key
   }, l, c), { isFocusVisible: v, focusProps: y } = Ce(), { hoverProps: x, isHovered: $ } = vi({
     isDisabled: p.isDisabled
-  }), E = ge({
+  }), w = ge({
     ...e,
     id: void 0,
     children: r.rendered,
@@ -2927,7 +2927,7 @@ const ut = /* @__PURE__ */ O(null), Mi = /* @__PURE__ */ Jo("item", function(e,
   }), R = e.href ? "a" : "div";
   return /* @__PURE__ */ g.createElement(R, {
     ...me(u, y, x),
-    ...E,
+    ...w,
     ref: c,
     "data-disabled": p.isDisabled || void 0,
     "data-hovered": $ || void 0,
@@ -2954,7 +2954,7 @@ const ut = /* @__PURE__ */ O(null), Mi = /* @__PURE__ */ Jo("item", function(e,
         h
       ]
     ]
-  }, E.children));
+  }, w.children));
 });
 function kn(t) {
   return null;
@@ -3292,8 +3292,8 @@ function xa({
                 target: "_blank",
                 rel: "noopener noreferrer",
                 onAction: () => {
-                  var E;
-                  (E = $.onAction) == null || E.call($, $.key), setTimeout(() => {
+                  var w;
+                  (w = $.onAction) == null || w.call($, $.key), setTimeout(() => {
                     h(!1);
                   }, 200);
                 },
@@ -3331,7 +3331,7 @@ function Vi({ item: t, state: e }) {
     "li",
     {
       ...r,
-      className: w(
+      className: E(
         "proton-ListBox__item",
         i && "proton-ListBox__item--focused",
         o && "proton-ListBox__item--selected",
@@ -3356,7 +3356,7 @@ const Bn = fe(
       {
         ...n,
         ref: e,
-        className: w(
+        className: E(
           "proton-Select__trigger",
           t.disabled && "proton-Select__trigger--disabled",
           !t.isOpen && "proton-Select__trigger--closed",
@@ -3392,7 +3392,7 @@ function Hi({
     onOpenChange: (j) => {
       j ? l == null || l() : c == null || c();
     }
-  }, p = un(h), v = S(null), y = S(null), { labelProps: x, triggerProps: $, valueProps: E, menuProps: R } = an(
+  }, p = un(h), v = S(null), y = S(null), { labelProps: x, triggerProps: $, valueProps: w, menuProps: R } = an(
     { ...h, label: t || e },
     p,
     v
@@ -3438,11 +3438,11 @@ function Hi({
             disabled: n,
             "data-testid": f,
             children: [
-              /* @__PURE__ */ s.jsx("div", { ...E, className: "proton-Select__value", children: p.selectedItem ? p.selectedItem.rendered : "Select an option" }),
+              /* @__PURE__ */ s.jsx("div", { ...w, className: "proton-Select__value", children: p.selectedItem ? p.selectedItem.rendered : "Select an option" }),
               /* @__PURE__ */ s.jsx(
                 "div",
                 {
-                  className: w(
+                  className: E(
                     "proton-Select__trigger_icon",
                     p.isOpen && "proton-Select__trigger_icon--flipped"
                   ),
@@ -3506,7 +3506,7 @@ function Ki({
     items: u,
     "data-testid": f,
     children: d
-  }, p = un(h), v = Ln(fn.MEDIUM), y = S(null), x = S(null), { labelProps: $, triggerProps: E, valueProps: R, menuProps: j } = an(
+  }, p = un(h), v = Ln(fn.MEDIUM), y = S(null), x = S(null), { labelProps: $, triggerProps: w, valueProps: R, menuProps: j } = an(
     { ...h, label: t || e },
     p,
     y
@@ -3546,7 +3546,7 @@ function Ki({
         /* @__PURE__ */ s.jsxs(
           Bn,
           {
-            ...E,
+            ...w,
             isOpen: p.isOpen,
             ref: y,
             disabled: n,
@@ -3556,7 +3556,7 @@ function Ki({
               /* @__PURE__ */ s.jsx(
                 "div",
                 {
-                  className: w(
+                  className: E(
                     "proton-Select__trigger_icon",
                     p.isOpen && "proton-Select__trigger_icon--flipped"
                   ),
@@ -3604,7 +3604,7 @@ function Sa(t) {
   return /* @__PURE__ */ s.jsxs(
     "label",
     {
-      className: w(
+      className: E(
         "proton-Switch",
         t.isDisabled && "proton-Switch--disabled",
         r.isSelected && "proton-Switch--on"
@@ -3626,7 +3626,7 @@ function Sa(t) {
 }
 function Wi({ item: t, state: e, children: n }) {
   let r = S(), { rowProps: o } = Dr({ node: t }, e, r);
-  return /* @__PURE__ */ s.jsx("tr", { className: w("proton-Table__headerRow"), ...o, ref: r, children: n });
+  return /* @__PURE__ */ s.jsx("tr", { className: E("proton-Table__headerRow"), ...o, ref: r, children: n });
 }
 function Fi({ column: t, state: e }) {
   var u, f;
@@ -3642,7 +3642,7 @@ function Fi({ column: t, state: e }) {
     {
       ...me(r, l),
       colSpan: t.colspan,
-      className: w(
+      className: E(
         "proton-Table__header",
         `proton-Table__header--${o}`,
         i ? "proton-Table__header--focused" : null
@@ -3654,7 +3654,7 @@ function Fi({ column: t, state: e }) {
           "span",
           {
             "aria-hidden": "true",
-            className: w("proton-Table__headerSortIcon"),
+            className: E("proton-Table__headerSortIcon"),
             style: {
               visibility: ((f = e.sortDescriptor) == null ? void 0 : f.column) === t.key ? "visible" : "hidden"
             },
@@ -3671,7 +3671,7 @@ function Xt({ type: t, children: e }) {
     t,
     {
       ...n,
-      className: w(
+      className: E(
         "proton-Table__rowGroup",
         t === "thead" ? "proton-Table__rowGroup--header" : "proton-Table__rowGroup--body"
       ),
@@ -3690,7 +3690,7 @@ function Gi({ item: t, children: e, state: n }) {
   return /* @__PURE__ */ s.jsx(
     "tr",
     {
-      className: w(
+      className: E(
         "proton-Table__row",
         o ? "proton-Table__row--selected" : null,
         l ? "proton-Table__row--pressed" : null,
@@ -3709,7 +3709,7 @@ function Ui({ cell: t, state: e, ...n }) {
     "td",
     {
       ...me(o, l),
-      className: w(
+      className: E(
         "proton-Table__cell",
         i ? "proton-Table__cell--focused" : null,
         `proton-Table__cell--${c}`
@@ -3728,7 +3728,7 @@ function Ca(t) {
     e,
     n
   );
-  return /* @__PURE__ */ s.jsxs("table", { ...o, ref: n, className: w("proton-Table"), children: [
+  return /* @__PURE__ */ s.jsxs("table", { ...o, ref: n, className: E("proton-Table"), children: [
     /* @__PURE__ */ s.jsx(Xt, { type: "thead", children: r.headerRows.map((i) => /* @__PURE__ */ s.jsx(Wi, { item: i, state: e, children: Array.from(r.getChildren(i.key)).map((l) => /* @__PURE__ */ s.jsx(
       Fi,
       {
@@ -3740,16 +3740,22 @@ function Ca(t) {
     /* @__PURE__ */ s.jsx(Xt, { type: "tbody", children: Array.from(r.body.childNodes).map((i) => /* @__PURE__ */ s.jsx(Gi, { item: i, state: e, children: Array.from(r.getChildren(i.key)).map((l) => /* @__PURE__ */ s.jsx(Ui, { cell: l, state: e }, l.key)) }, i.key)) })
   ] });
 }
-function zi({ children: t, arrow: e, ...n }) {
-  const { className: r, style: o } = ie();
+function zi({
+  children: t,
+  arrow: e,
+  placement: n = "top",
+  ...r
+}) {
+  const { className: o, style: i } = ie();
   return console.log(n), /* @__PURE__ */ s.jsxs(
     Di,
     {
-      ...n,
-      className: `proton__Tooltip proton-Dialog ${r}`,
-      style: o,
+      ...r,
+      placement: n,
+      className: E("proton__Tooltip", "proton-Dialog", o),
+      style: i,
       children: [
-        e && /* @__PURE__ */ s.jsx(Si, { className: "proton__TooltipArrow", children: /* @__PURE__ */ s.jsx("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ s.jsx("path", { d: "M0 0 L4 4 L8 0" }) }) }),
+        e && /* @__PURE__ */ s.jsx(Si, { className: E("proton__TooltipArrow", o), children: /* @__PURE__ */ s.jsx("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ s.jsx("path", { d: "M0 0 L4 4 L8 0" }) }) }),
         t
       ]
     }
@@ -3811,7 +3817,7 @@ const Ra = ({
     return /* @__PURE__ */ s.jsx(
       "span",
       {
-        className: w(
+        className: E(
           "proton-TextEmphasis",
           n && "proton-TextEmphasis--tooltip",
           o
@@ -3834,7 +3840,7 @@ const Ra = ({
   return /* @__PURE__ */ s.jsx(
     "span",
     {
-      className: w(
+      className: E(
         "proton-TextEmphasis",
         n && "proton-TextEmphasis--tooltip",
         o
@@ -3860,7 +3866,7 @@ function qi({
   return /* @__PURE__ */ s.jsxs(
     "div",
     {
-      className: w("proton-Waveform__bar-wrapper"),
+      className: E("proton-Waveform__bar-wrapper"),
       style: {
         width: `${l}px`,
         marginRight: `${c}px`
@@ -3869,7 +3875,7 @@ function qi({
         /* @__PURE__ */ s.jsx(
           "div",
           {
-            className: w(
+            className: E(
               "proton-Waveform__bar",
               "proton-Waveform__bar--upper",
               e && "proton-Waveform__bar--disabled",
@@ -3886,7 +3892,7 @@ function qi({
         /* @__PURE__ */ s.jsx(
           "div",
           {
-            className: w(
+            className: E(
               "proton-Waveform__bar",
               "proton-Waveform__bar--lower",
               e && "proton-Waveform__bar--disabled",
@@ -3927,7 +3933,7 @@ function Pa({
   "data-testid": f
 }) {
   var Z;
-  const { className: d, palette: h, theme: p } = ie(), v = S(null), [y, x] = D([]), [$, E] = D(null), [R, j] = D(!1), [P, L] = D(!1), M = t || Ji, G = u || (p === "custom-dark" ? h.BRAND.PRIMARY : void 0), z = e;
+  const { className: d, palette: h, theme: p } = ie(), v = S(null), [y, x] = D([]), [$, w] = D(null), [R, j] = D(!1), [P, L] = D(!1), M = t || Ji, G = u || (p === "custom-dark" ? h.BRAND.PRIMARY : void 0), z = e;
   F(() => {
     if (!v.current) return;
     const B = (q) => {
@@ -3948,15 +3954,15 @@ function Pa({
   const W = (B) => {
     if (!v.current) return;
     const U = v.current.getBoundingClientRect(), q = (B.clientX - U.left) / U.width * l;
-    E(q);
+    w(q);
   }, te = () => {
-    E(null);
+    w(null);
   }, ce = e + z, I = (B, U) => {
     var ae;
     const Y = B / l * 100;
     return (U === "start" ? Math.floor(Y / 100 * y.length) : Math.ceil(Y / 100 * y.length)) * ce / ((ae = v.current) == null ? void 0 : ae.clientWidth) * 100;
   }, H = (Z = v.current) == null ? void 0 : Z.clientWidth;
-  return /* @__PURE__ */ s.jsxs("div", { className: w("proton-Waveform", d), "data-testid": f, children: [
+  return /* @__PURE__ */ s.jsxs("div", { className: E("proton-Waveform", d), "data-testid": f, children: [
     i && /* @__PURE__ */ s.jsx(
       Zt,
       {
@@ -4047,7 +4053,7 @@ function Zt({
   return /* @__PURE__ */ s.jsx(
     "div",
     {
-      className: w(
+      className: E(
         "proton-Waveform__timestamp",
         `proton-Waveform__timestamp--${t}`
       ),