@purpurds/tabs 5.12.0 → 5.14.0

package/dist/tabs.es.js

@@ -1,6 +1,6 @@
-import { jsx as T, jsxs as ee } from "react/jsx-runtime";
+import { jsx as w, jsxs as ee } from "react/jsx-runtime";
 import * as ve from "react";
-import A, { createContext as ne, useMemo as W, createElement as x, useContext as me, useCallback as B, forwardRef as S, Children as E, isValidElement as k, cloneElement as se, Fragment as Fe, useLayoutEffect as De, useEffect as P, useRef as R, useState as D, useReducer as qe } from "react";
+import A, { createContext as ne, useMemo as W, createElement as x, useContext as me, useCallback as V, forwardRef as S, Children as E, isValidElement as k, cloneElement as se, Fragment as Fe, useLayoutEffect as De, useEffect as P, useRef as R, useState as D, useReducer as qe } from "react";
 import { flushSync as Le } from "react-dom";
 function Ue(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
@@ -41,8 +41,8 @@ var _e = { exports: {} };
     e.exports ? (n.default = n, e.exports = n) : window.classNames = n;
   })();
 })(_e);
-var Be = _e.exports;
-const Ve = /* @__PURE__ */ Ue(Be), Ge = {
+var Ve = _e.exports;
+const Be = /* @__PURE__ */ Ue(Ve), je = {
   "purpur-icon": "_purpur-icon_8u1lq_1",
   "purpur-icon--xxs": "_purpur-icon--xxs_8u1lq_4",
   "purpur-icon--xs": "_purpur-icon--xs_8u1lq_8",
@@ -50,7 +50,7 @@ const Ve = /* @__PURE__ */ Ue(Be), Ge = {
   "purpur-icon--md": "_purpur-icon--md_8u1lq_16",
   "purpur-icon--lg": "_purpur-icon--lg_8u1lq_20",
   "purpur-icon--xl": "_purpur-icon--xl_8u1lq_24"
-}, je = {
+}, Ge = {
   name: "chevron-left",
   svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M16.175 3.905a.9.9 0 0 1-.08 1.27L8.36 12l7.736 6.825a.9.9 0 0 1-1.191 1.35l-8.5-7.5a.9.9 0 0 1 0-1.35l8.5-7.5a.9.9 0 0 1 1.27.08Z" clip-rule="evenodd"/></svg>',
   keywords: ["chevron-left"],
@@ -60,7 +60,7 @@ const Ve = /* @__PURE__ */ Ue(Be), Ge = {
   svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M7.809 3.924a.9.9 0 0 0 .115 1.267L16.094 12l-8.17 6.809a.9.9 0 0 0 1.152 1.382l9-7.5a.9.9 0 0 0 0-1.382l-9-7.5a.9.9 0 0 0-1.267.115Z" clip-rule="evenodd"/></svg>',
   keywords: ["chevron-right"],
   category: "utility"
-}, Ke = Ve.bind(Ge), be = "purpur-icon", ze = "md", We = (e) => e.filter((t) => Object.keys(t).length >= 1).map((t) => `${t.name}="${t.value}"`).join(" "), Ye = ({ content: e = "", title: t } = {}) => {
+}, ze = Be.bind(je), be = "purpur-icon", Ke = "md", We = (e) => e.filter((t) => Object.keys(t).length >= 1).map((t) => `${t.name}="${t.value}"`).join(" "), Ye = ({ content: e = "", title: t } = {}) => {
   const n = [
     { name: "xmlns", value: "http://www.w3.org/2000/svg" },
     { name: "fill", value: "currentColor" },
@@ -73,14 +73,14 @@ const Ve = /* @__PURE__ */ Ue(Be), Ge = {
   svg: t,
   allyTitle: n,
   className: o,
-  size: s = ze,
+  size: s = Ke,
   ...r
 }) => {
   const c = Ye({
     content: Ze(t.svg),
     title: n
-  }), a = Ke(o, be, `${be}--${s}`);
-  return /* @__PURE__ */ T(
+  }), a = ze(o, be, `${be}--${s}`);
+  return /* @__PURE__ */ w(
     "span",
     {
       "aria-label": n,
@@ -91,15 +91,15 @@ const Ve = /* @__PURE__ */ Ue(Be), Ge = {
     }
   );
 };
-function C() {
-  return C = Object.assign ? Object.assign.bind() : function(e) {
+function I() {
+  return I = Object.assign ? Object.assign.bind() : function(e) {
     for (var t = 1; t < arguments.length; t++) {
       var n = arguments[t];
       for (var o in n)
         Object.prototype.hasOwnProperty.call(n, o) && (e[o] = n[o]);
     }
     return e;
-  }, C.apply(this, arguments);
+  }, I.apply(this, arguments);
 }
 function O(e, t, { checkForDefaultPrevented: n = !0 } = {}) {
   return function(s) {
@@ -196,17 +196,17 @@ function ge(...e) {
   );
 }
 function Y(...e) {
-  return B(ge(...e), e);
+  return V(ge(...e), e);
 }
 const Z = /* @__PURE__ */ S((e, t) => {
   const { children: n, ...o } = e, s = E.toArray(n), r = s.find(et);
   if (r) {
     const c = r.props.children, a = s.map((u) => u === r ? E.count(c) > 1 ? E.only(null) : /* @__PURE__ */ k(c) ? c.props.children : null : u);
-    return /* @__PURE__ */ x(re, C({}, o, {
+    return /* @__PURE__ */ x(re, I({}, o, {
       ref: t
     }), /* @__PURE__ */ k(c) ? /* @__PURE__ */ se(c, void 0, a) : null);
   }
-  return /* @__PURE__ */ x(re, C({}, o, {
+  return /* @__PURE__ */ x(re, I({}, o, {
     ref: t
   }), n);
 });
@@ -263,11 +263,11 @@ function nt(e) {
       ref: h
     }, m);
   }), i = e + "CollectionItemSlot", p = "data-radix-collection-item", l = /* @__PURE__ */ A.forwardRef((v, d) => {
-    const { scope: b, children: m, ..._ } = v, h = A.useRef(null), F = Y(d, h), w = r(i, b);
-    return A.useEffect(() => (w.itemMap.set(h, {
+    const { scope: b, children: m, ..._ } = v, h = A.useRef(null), F = Y(d, h), T = r(i, b);
+    return A.useEffect(() => (T.itemMap.set(h, {
       ref: h,
       ..._
-    }), () => void w.itemMap.delete(h))), /* @__PURE__ */ A.createElement(Z, {
+    }), () => void T.itemMap.delete(h))), /* @__PURE__ */ A.createElement(Z, {
       [p]: "",
       ref: F
     }, m);
@@ -279,7 +279,7 @@ function nt(e) {
       if (!m) return [];
       const _ = Array.from(m.querySelectorAll(`[${p}]`));
       return Array.from(d.itemMap.values()).sort(
-        (w, q) => _.indexOf(w.ref.current) - _.indexOf(q.ref.current)
+        (T, q) => _.indexOf(T.ref.current) - _.indexOf(q.ref.current)
       );
     }, [
       d.collectionRef,
@@ -327,12 +327,12 @@ const ct = [
   "span",
   "svg",
   "ul"
-], j = ct.reduce((e, t) => {
+], G = ct.reduce((e, t) => {
   const n = /* @__PURE__ */ S((o, s) => {
     const { asChild: r, ...c } = o, a = r ? Z : t;
     return P(() => {
       window[Symbol.for("radix-ui")] = !0;
-    }, []), /* @__PURE__ */ x(a, C({}, c, {
+    }, []), /* @__PURE__ */ x(a, I({}, c, {
       ref: s
     }));
   });
@@ -358,7 +358,7 @@ function xe({ prop: e, defaultProp: t, onChange: n = () => {
   const [o, s] = st({
     defaultProp: t,
     onChange: n
-  }), r = e !== void 0, c = r ? e : o, a = ie(n), u = B((i) => {
+  }), r = e !== void 0, c = r ? e : o, a = ie(n), u = V((i) => {
     if (r) {
       const l = typeof i == "function" ? i(e) : i;
       l !== e && a(l);
@@ -385,31 +385,31 @@ function st({ defaultProp: e, onChange: t }) {
   ]), n;
 }
 const at = /* @__PURE__ */ ne(void 0);
-function Ie(e) {
+function Ce(e) {
   const t = me(at);
   return e || t || "ltr";
 }
 const te = "rovingFocusGroup.onEntryFocus", it = {
   bubbles: !1,
   cancelable: !0
-}, ue = "RovingFocusGroup", [ce, Ce, ut] = nt(ue), [lt, ye] = ae(ue, [
+}, ue = "RovingFocusGroup", [ce, Ie, ut] = nt(ue), [lt, ye] = ae(ue, [
   ut
 ]), [dt, ft] = lt(ue), pt = /* @__PURE__ */ S((e, t) => /* @__PURE__ */ x(ce.Provider, {
   scope: e.__scopeRovingFocusGroup
 }, /* @__PURE__ */ x(ce.Slot, {
   scope: e.__scopeRovingFocusGroup
-}, /* @__PURE__ */ x(bt, C({}, e, {
+}, /* @__PURE__ */ x(bt, I({}, e, {
   ref: t
 }))))), bt = /* @__PURE__ */ S((e, t) => {
-  const { __scopeRovingFocusGroup: n, orientation: o, loop: s = !1, dir: r, currentTabStopId: c, defaultCurrentTabStopId: a, onCurrentTabStopIdChange: u, onEntryFocus: i, ...p } = e, l = R(null), $ = Y(t, l), v = Ie(r), [d = null, b] = xe({
+  const { __scopeRovingFocusGroup: n, orientation: o, loop: s = !1, dir: r, currentTabStopId: c, defaultCurrentTabStopId: a, onCurrentTabStopIdChange: u, onEntryFocus: i, ...p } = e, l = R(null), $ = Y(t, l), v = Ce(r), [d = null, b] = xe({
     prop: c,
     defaultProp: a,
     onChange: u
-  }), [m, _] = D(!1), h = ie(i), F = Ce(n), w = R(!1), [q, K] = D(0);
+  }), [m, _] = D(!1), h = ie(i), F = Ie(n), T = R(!1), [q, z] = D(0);
   return P(() => {
-    const I = l.current;
-    if (I)
-      return I.addEventListener(te, h), () => I.removeEventListener(te, h);
+    const C = l.current;
+    if (C)
+      return C.addEventListener(te, h), () => C.removeEventListener(te, h);
   }, [
     h
   ]), /* @__PURE__ */ x(dt, {
@@ -418,29 +418,29 @@ const te = "rovingFocusGroup.onEntryFocus", it = {
     dir: v,
     loop: s,
     currentTabStopId: d,
-    onItemFocus: B(
-      (I) => b(I),
+    onItemFocus: V(
+      (C) => b(C),
       [
         b
       ]
     ),
-    onItemShiftTab: B(
+    onItemShiftTab: V(
       () => _(!0),
       []
     ),
-    onFocusableItemAdd: B(
-      () => K(
-        (I) => I + 1
+    onFocusableItemAdd: V(
+      () => z(
+        (C) => C + 1
       ),
       []
     ),
-    onFocusableItemRemove: B(
-      () => K(
-        (I) => I - 1
+    onFocusableItemRemove: V(
+      () => z(
+        (C) => C - 1
       ),
       []
     )
-  }, /* @__PURE__ */ x(j.div, C({
+  }, /* @__PURE__ */ x(G.div, I({
     tabIndex: m || q === 0 ? -1 : 0,
     "data-orientation": o
   }, p, {
@@ -450,13 +450,13 @@ const te = "rovingFocusGroup.onEntryFocus", it = {
       ...e.style
     },
     onMouseDown: O(e.onMouseDown, () => {
-      w.current = !0;
+      T.current = !0;
     }),
-    onFocus: O(e.onFocus, (I) => {
-      const H = !w.current;
-      if (I.target === I.currentTarget && H && !m) {
-        const V = new CustomEvent(te, it);
-        if (I.currentTarget.dispatchEvent(V), !V.defaultPrevented) {
+    onFocus: O(e.onFocus, (C) => {
+      const H = !T.current;
+      if (C.target === C.currentTarget && H && !m) {
+        const B = new CustomEvent(te, it);
+        if (C.currentTarget.dispatchEvent(B), !B.defaultPrevented) {
           const L = F().filter(
             (g) => g.focusable
           ), X = L.find(
@@ -473,7 +473,7 @@ const te = "rovingFocusGroup.onEntryFocus", it = {
           Se(f);
         }
       }
-      w.current = !1;
+      T.current = !1;
     }),
     onBlur: O(
       e.onBlur,
@@ -481,7 +481,7 @@ const te = "rovingFocusGroup.onEntryFocus", it = {
     )
   })));
 }), $t = "RovingFocusGroupItem", vt = /* @__PURE__ */ S((e, t) => {
-  const { __scopeRovingFocusGroup: n, focusable: o = !0, active: s = !1, tabStopId: r, ...c } = e, a = he(), u = r || a, i = ft($t, n), p = i.currentTabStopId === u, l = Ce(n), { onFocusableItemAdd: $, onFocusableItemRemove: v } = i;
+  const { __scopeRovingFocusGroup: n, focusable: o = !0, active: s = !1, tabStopId: r, ...c } = e, a = he(), u = r || a, i = ft($t, n), p = i.currentTabStopId === u, l = Ie(n), { onFocusableItemAdd: $, onFocusableItemRemove: v } = i;
   return P(() => {
     if (o)
       return $(), () => v();
@@ -494,7 +494,7 @@ const te = "rovingFocusGroup.onEntryFocus", it = {
     id: u,
     focusable: o,
     active: s
-  }, /* @__PURE__ */ x(j.span, C({
+  }, /* @__PURE__ */ x(G.span, I({
     tabIndex: p ? 0 : -1,
     "data-orientation": i.orientation
   }, c, {
@@ -566,14 +566,14 @@ function ht(e, t) {
     (n, o) => e[(t + o) % e.length]
   );
 }
-const xt = pt, It = vt;
-function Ct(e, t) {
+const xt = pt, Ct = vt;
+function It(e, t) {
   return qe((n, o) => {
     const s = t[n][o];
     return s ?? n;
   }, e);
 }
-const Te = (e) => {
+const we = (e) => {
   const { present: t, children: n } = e, o = yt(t), s = typeof n == "function" ? n({
     present: o.isPresent
   }) : E.only(n), r = Y(o.ref, s.ref);
@@ -581,9 +581,9 @@ const Te = (e) => {
     ref: r
   }) : null;
 };
-Te.displayName = "Presence";
+we.displayName = "Presence";
 function yt(e) {
-  const [t, n] = D(), o = R({}), s = R(e), r = R("none"), c = e ? "mounted" : "unmounted", [a, u] = Ct(c, {
+  const [t, n] = D(), o = R({}), s = R(e), r = R("none"), c = e ? "mounted" : "unmounted", [a, u] = It(c, {
     mounted: {
       UNMOUNT: "unmounted",
       ANIMATION_OUT: "unmountSuspended"
@@ -597,14 +597,14 @@ function yt(e) {
     }
   });
   return P(() => {
-    const i = z(o.current);
+    const i = K(o.current);
     r.current = a === "mounted" ? i : "none";
   }, [
     a
   ]), oe(() => {
     const i = o.current, p = s.current;
     if (p !== e) {
-      const $ = r.current, v = z(i);
+      const $ = r.current, v = K(i);
       e ? u("MOUNT") : v === "none" || (i == null ? void 0 : i.display) === "none" ? u("UNMOUNT") : u(p && $ !== v ? "ANIMATION_OUT" : "UNMOUNT"), s.current = e;
     }
   }, [
@@ -613,12 +613,12 @@ function yt(e) {
   ]), oe(() => {
     if (t) {
       const i = (l) => {
-        const v = z(o.current).includes(l.animationName);
+        const v = K(o.current).includes(l.animationName);
         l.target === t && v && Le(
           () => u("ANIMATION_END")
         );
       }, p = (l) => {
-        l.target === t && (r.current = z(o.current));
+        l.target === t && (r.current = K(o.current));
       };
       return t.addEventListener("animationstart", p), t.addEventListener("animationcancel", i), t.addEventListener("animationend", i), () => {
         t.removeEventListener("animationstart", p), t.removeEventListener("animationcancel", i), t.removeEventListener("animationend", i);
@@ -633,23 +633,23 @@ function yt(e) {
       "mounted",
       "unmountSuspended"
     ].includes(a),
-    ref: B((i) => {
+    ref: V((i) => {
       i && (o.current = getComputedStyle(i)), n(i);
     }, [])
   };
 }
-function z(e) {
+function K(e) {
   return (e == null ? void 0 : e.animationName) || "none";
 }
-const we = "Tabs", [St, tn] = ae(we, [
+const Te = "Tabs", [St, tn] = ae(Te, [
   ye
-]), Ne = ye(), [Tt, le] = St(we), wt = /* @__PURE__ */ S((e, t) => {
-  const { __scopeTabs: n, value: o, onValueChange: s, defaultValue: r, orientation: c = "horizontal", dir: a, activationMode: u = "automatic", ...i } = e, p = Ie(a), [l, $] = xe({
+]), Ne = ye(), [wt, le] = St(Te), Tt = /* @__PURE__ */ S((e, t) => {
+  const { __scopeTabs: n, value: o, onValueChange: s, defaultValue: r, orientation: c = "horizontal", dir: a, activationMode: u = "automatic", ...i } = e, p = Ce(a), [l, $] = xe({
     prop: o,
     onChange: s,
     defaultProp: r
   });
-  return /* @__PURE__ */ x(Tt, {
+  return /* @__PURE__ */ x(wt, {
     scope: n,
     baseId: he(),
     value: l,
@@ -657,7 +657,7 @@ const we = "Tabs", [St, tn] = ae(we, [
     orientation: c,
     dir: p,
     activationMode: u
-  }, /* @__PURE__ */ x(j.div, C({
+  }, /* @__PURE__ */ x(G.div, I({
     dir: p,
     "data-orientation": c
   }, i, {
@@ -665,13 +665,13 @@ const we = "Tabs", [St, tn] = ae(we, [
   })));
 }), Nt = "TabsList", At = /* @__PURE__ */ S((e, t) => {
   const { __scopeTabs: n, loop: o = !0, ...s } = e, r = le(Nt, n), c = Ne(n);
-  return /* @__PURE__ */ x(xt, C({
+  return /* @__PURE__ */ x(xt, I({
     asChild: !0
   }, c, {
     orientation: r.orientation,
     dir: r.dir,
     loop: o
-  }), /* @__PURE__ */ x(j.div, C({
+  }), /* @__PURE__ */ x(G.div, I({
     role: "tablist",
     "aria-orientation": r.orientation
   }, s, {
@@ -679,12 +679,12 @@ const we = "Tabs", [St, tn] = ae(we, [
   })));
 }), Et = "TabsTrigger", Pt = /* @__PURE__ */ S((e, t) => {
   const { __scopeTabs: n, value: o, disabled: s = !1, ...r } = e, c = le(Et, n), a = Ne(n), u = Ae(c.baseId, o), i = Ee(c.baseId, o), p = o === c.value;
-  return /* @__PURE__ */ x(It, C({
+  return /* @__PURE__ */ x(Ct, I({
     asChild: !0
   }, a, {
     focusable: !s,
     active: p
-  }), /* @__PURE__ */ x(j.button, C({
+  }), /* @__PURE__ */ x(G.button, I({
     type: "button",
     role: "tab",
     "aria-selected": p,
@@ -717,11 +717,11 @@ const we = "Tabs", [St, tn] = ae(we, [
     );
     return () => cancelAnimationFrame($);
   }, []), /* @__PURE__ */ x(
-    Te,
+    we,
     {
       present: s || p
     },
-    ({ present: $ }) => /* @__PURE__ */ x(j.div, C({
+    ({ present: $ }) => /* @__PURE__ */ x(G.div, I({
       "data-state": p ? "active" : "inactive",
       "data-orientation": a.orientation,
       role: "tabpanel",
@@ -744,7 +744,7 @@ function Ae(e, t) {
 function Ee(e, t) {
   return `${e}-content-${t}`;
 }
-const Ot = wt, Ft = At, Dt = Pt, qt = Mt;
+const Ot = Tt, Ft = At, Dt = Pt, qt = Mt;
 function Lt(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
@@ -785,27 +785,27 @@ var Pe = { exports: {} };
   })();
 })(Pe);
 var Ut = Pe.exports;
-const de = /* @__PURE__ */ Lt(Ut), Bt = {
+const de = /* @__PURE__ */ Lt(Ut), Vt = {
   "purpur-tab-content": "_purpur-tab-content_1x2zs_1"
-}, Vt = de.bind(Bt), Gt = "purpur-tab-content", jt = S(
-  ({ children: e, tabId: t, "data-testid": n, className: o, ...s }, r) => /* @__PURE__ */ T(
+}, Bt = de.bind(Vt), jt = "purpur-tab-content", Gt = S(
+  ({ children: e, tabId: t, "data-testid": n, className: o, ...s }, r) => /* @__PURE__ */ w(
     qt,
     {
       ref: r,
-      className: Vt([Gt, o]),
+      className: Bt([jt, o]),
       "data-testid": n,
       value: t,
       ...s,
       children: e
     }
   )
-), kt = (e) => !!e && k(e) && !!e.props.name && !!e.props.tabId, Kt = {
+), kt = (e) => !!e && k(e) && !!e.props.name && !!e.props.tabId, zt = {
   "purpur-tab-header": "_purpur-tab-header_18g3c_1",
   "purpur-tab-header--contained": "_purpur-tab-header--contained_18g3c_33",
   "purpur-tab-header--contained-negative": "_purpur-tab-header--contained-negative_18g3c_33",
   "purpur-tab-header--line": "_purpur-tab-header--line_18g3c_36",
   "purpur-tab-header--line-negative": "_purpur-tab-header--line-negative_18g3c_48"
-}, zt = de.bind(Kt), $e = "purpur-tab-header", Wt = S(
+}, Kt = de.bind(zt), $e = "purpur-tab-header", Wt = S(
   ({
     index: e,
     tabId: t,
@@ -814,11 +814,11 @@ const de = /* @__PURE__ */ Lt(Ut), Bt = {
     onFocus: s,
     "data-testid": r,
     children: c
-  }, a) => /* @__PURE__ */ T(
+  }, a) => /* @__PURE__ */ w(
     Dt,
     {
       id: `${t}-trigger`,
-      className: zt([$e, `${$e}--${n}${o ? "-negative" : ""}`]),
+      className: Kt([$e, `${$e}--${n}${o ? "-negative" : ""}`]),
       value: t,
       "data-testid": r,
       "data-index": e,
@@ -860,30 +860,30 @@ const de = /* @__PURE__ */ Lt(Ut), Bt = {
   "data-testid": a,
   ...u
 }) => {
-  const [i, p] = D({}), [l, $] = D(0), [v, d] = D(0), b = E.toArray(e).filter(kt), m = R(), _ = R(new Array(b.length)), h = 200, F = t === "line", w = U([
+  const [i, p] = D({}), [l, $] = D(0), [v, d] = D(0), b = E.toArray(e).filter(kt), m = R(), _ = R(new Array(b.length)), h = 200, F = t === "line", T = U([
     y,
     `${y}--${t}${n ? "-negative" : ""}`,
     { [`${y}--fullWidth`]: o },
     r
-  ]), q = E.map(b, ({ props: { tabId: f } }) => f), K = () => {
+  ]), q = E.map(b, ({ props: { tabId: f } }) => f), z = () => {
     const f = q.findIndex((g) => g === c);
     return f >= 0 ? f : 0;
-  }, [I, H] = D(K);
+  }, [C, H] = D(z);
   if (new Set(q).size !== q.length)
     throw new Error("tabId must be unique");
-  const V = (f, g) => g || a ? `${g || a}-${f}` : void 0, L = () => {
+  const B = (f, g) => g || a ? `${g || a}-${f}` : void 0, L = () => {
     if (!F)
       return;
-    const f = _.current[I];
+    const f = _.current[C];
     $((f == null ? void 0 : f.offsetLeft) || 0), d((f == null ? void 0 : f.getBoundingClientRect().width) || 0);
   }, X = (f) => {
     F && H(b.findIndex((g) => g.props.tabId === f)), s == null || s(Zt(f));
   }, J = (f) => {
     if (m != null && m.current) {
-      const { scrollLeft: g } = m.current, G = f === "left" ? -h : h;
-      m.current.scroll({ left: g + G, behavior: "smooth" });
+      const { scrollLeft: g } = m.current, j = f === "left" ? -h : h;
+      m.current.scroll({ left: g + j, behavior: "smooth" });
     }
-  }, Q = ({ side: f }) => /* @__PURE__ */ T(
+  }, Q = ({ side: f }) => /* @__PURE__ */ w(
     "button",
     {
       className: U(`${y}__scroll-button`, `${y}__scroll-button--${f}`),
@@ -891,15 +891,15 @@ const de = /* @__PURE__ */ Lt(Ut), Bt = {
       type: "button",
       "aria-hidden": "true",
       tabIndex: -1,
-      "data-testid": V("scroll-button"),
-      children: /* @__PURE__ */ T(He, { svg: f === "left" ? je : ke, size: "md" })
+      "data-testid": B("scroll-button"),
+      children: /* @__PURE__ */ w(He, { svg: f === "left" ? Ge : ke, size: "md" })
     }
   );
   return P(() => (window.addEventListener("resize", L), () => {
     window.removeEventListener("resize", L);
   }), []), P(() => {
     L();
-  }, [I, o, b.length, t]), P(() => {
+  }, [C, o, b.length, t]), P(() => {
     const f = (M) => {
       if (M.every((N) => N.isIntersecting) && M.length === b.length) {
         p({});
@@ -920,17 +920,17 @@ const de = /* @__PURE__ */ Lt(Ut), Bt = {
     }, g = new IntersectionObserver(f, {
       threshold: [0.99],
       root: m.current
-    }), G = _.current;
-    return G.forEach((M) => g.observe(M)), () => {
-      G.forEach((M) => g.unobserve(M));
+    }), j = _.current;
+    return j.forEach((M) => g.observe(M)), () => {
+      j.forEach((M) => g.unobserve(M));
     };
-  }, [b.length]), /* @__PURE__ */ T(
+  }, [b.length]), /* @__PURE__ */ w(
     Ot,
     {
       defaultValue: c ?? b[0].props.tabId,
       onValueChange: X,
       "data-testid": a,
-      className: w,
+      className: T,
       ...u,
       children: /* @__PURE__ */ ee("div", { className: U(`${y}__container`), children: [
         /* @__PURE__ */ ee("div", { className: U([`${y}__wrapper`, i]), children: [
@@ -943,11 +943,11 @@ const de = /* @__PURE__ */ Lt(Ut), Bt = {
               className: U(`${y}__list`),
               children: [
                 E.map(b, (f, g) => {
-                  const { name: G, tabId: M, "data-testid": fe } = f.props;
-                  return /* @__PURE__ */ T(
+                  const { name: j, tabId: M, "data-testid": fe } = f.props;
+                  return /* @__PURE__ */ w(
                     Wt,
                     {
-                      "data-testid": V("header", fe),
+                      "data-testid": B("header", fe),
                       index: g,
                       tabId: M,
                       ref: (N) => {
@@ -958,11 +958,11 @@ const de = /* @__PURE__ */ Lt(Ut), Bt = {
                       },
                       variant: t,
                       negative: n,
-                      children: G
+                      children: j
                     }
                   );
                 }),
-                F && /* @__PURE__ */ T(
+                F && /* @__PURE__ */ w(
                   "div",
                   {
                     className: U(`${y}__selected-border`),
@@ -970,21 +970,21 @@ const de = /* @__PURE__ */ Lt(Ut), Bt = {
                       width: v,
                       transform: `translateX(${l}px)`
                     },
-                    "data-testid": V("selected-border")
+                    "data-testid": B("selected-border")
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ T(Q, { side: "left" }),
-          /* @__PURE__ */ T(Q, { side: "right" })
+          /* @__PURE__ */ w(Q, { side: "left" }),
+          /* @__PURE__ */ w(Q, { side: "right" })
         ] }),
-        /* @__PURE__ */ T("div", { className: U(`${y}__content-container`), children: E.map(b, (f) => f) })
+        /* @__PURE__ */ w("div", { className: U(`${y}__content-container`), children: E.map(b, (f) => f) })
       ] })
     }
   );
 };
-Xt.Content = jt;
+Xt.Content = Gt;
 export {
   Xt as Tabs,
   Zt as createTabChangeDetailEvent,