@purpurds/tabs 5.10.0 → 5.11.0

package/dist/tabs.es.js

@@ -1,6 +1,6 @@
-import { jsx as w, jsxs as ee } from "react/jsx-runtime";
+import { jsx as T, 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 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 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 { 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 Ve = _e.exports;
-const Be = /* @__PURE__ */ Ue(Ve), je = {
+var Be = _e.exports;
+const Ve = /* @__PURE__ */ Ue(Be), Ge = {
   "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 Be = /* @__PURE__ */ Ue(Ve), je = {
   "purpur-icon--md": "_purpur-icon--md_8u1lq_16",
   "purpur-icon--lg": "_purpur-icon--lg_8u1lq_20",
   "purpur-icon--xl": "_purpur-icon--xl_8u1lq_24"
-}, Ge = {
+}, je = {
   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 Be = /* @__PURE__ */ Ue(Ve), je = {
   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"
-}, 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 } = {}) => {
+}, 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 } = {}) => {
   const n = [
     { name: "xmlns", value: "http://www.w3.org/2000/svg" },
     { name: "fill", value: "currentColor" },
@@ -73,14 +73,14 @@ const Be = /* @__PURE__ */ Ue(Ve), je = {
   svg: t,
   allyTitle: n,
   className: o = "",
-  size: s = Ke,
+  size: s = ze,
   ...r
 }) => {
   const c = Ye({
     content: Ze(t.svg),
     title: n
-  }), a = ze(o, be, `${be}--${s}`);
-  return /* @__PURE__ */ w(
+  }), a = Ke(o, be, `${be}--${s}`);
+  return /* @__PURE__ */ T(
     "span",
     {
       "aria-label": n,
@@ -91,15 +91,15 @@ const Be = /* @__PURE__ */ Ue(Ve), je = {
     }
   );
 };
-function I() {
-  return I = Object.assign ? Object.assign.bind() : function(e) {
+function C() {
+  return C = 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;
-  }, I.apply(this, arguments);
+  }, C.apply(this, arguments);
 }
 function O(e, t, { checkForDefaultPrevented: n = !0 } = {}) {
   return function(s) {
@@ -200,17 +200,17 @@ function ge(...e) {
   );
 }
 function Y(...e) {
-  return V(ge(...e), e);
+  return B(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, I({}, o, {
+    return /* @__PURE__ */ x(re, C({}, o, {
       ref: t
     }), /* @__PURE__ */ k(c) ? /* @__PURE__ */ se(c, void 0, a) : null);
   }
-  return /* @__PURE__ */ x(re, I({}, o, {
+  return /* @__PURE__ */ x(re, C({}, o, {
     ref: t
   }), n);
 });
@@ -267,11 +267,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), T = r(i, b);
-    return A.useEffect(() => (T.itemMap.set(h, {
+    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, {
       ref: h,
       ..._
-    }), () => void T.itemMap.delete(h))), /* @__PURE__ */ A.createElement(Z, {
+    }), () => void w.itemMap.delete(h))), /* @__PURE__ */ A.createElement(Z, {
       [p]: "",
       ref: F
     }, m);
@@ -284,7 +284,7 @@ function nt(e) {
         return [];
       const _ = Array.from(m.querySelectorAll(`[${p}]`));
       return Array.from(d.itemMap.values()).sort(
-        (T, q) => _.indexOf(T.ref.current) - _.indexOf(q.ref.current)
+        (w, q) => _.indexOf(w.ref.current) - _.indexOf(q.ref.current)
       );
     }, [
       d.collectionRef,
@@ -332,12 +332,12 @@ const ct = [
   "span",
   "svg",
   "ul"
-], G = ct.reduce((e, t) => {
+], j = 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, I({}, c, {
+    }, []), /* @__PURE__ */ x(a, C({}, c, {
       ref: s
     }));
   });
@@ -363,7 +363,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 = V((i) => {
+  }), r = e !== void 0, c = r ? e : o, a = ie(n), u = B((i) => {
     if (r) {
       const l = typeof i == "function" ? i(e) : i;
       l !== e && a(l);
@@ -391,31 +391,31 @@ function st({ defaultProp: e, onChange: t }) {
   ]), n;
 }
 const at = /* @__PURE__ */ ne(void 0);
-function Ce(e) {
+function Ie(e) {
   const t = me(at);
   return e || t || "ltr";
 }
 const te = "rovingFocusGroup.onEntryFocus", it = {
   bubbles: !1,
   cancelable: !0
-}, ue = "RovingFocusGroup", [ce, Ie, ut] = nt(ue), [lt, ye] = ae(ue, [
+}, ue = "RovingFocusGroup", [ce, Ce, 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, I({}, e, {
+}, /* @__PURE__ */ x(bt, C({}, 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 = Ce(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 = Ie(r), [d = null, b] = xe({
     prop: c,
     defaultProp: a,
     onChange: u
-  }), [m, _] = D(!1), h = ie(i), F = Ie(n), T = R(!1), [q, z] = D(0);
+  }), [m, _] = D(!1), h = ie(i), F = Ce(n), w = R(!1), [q, K] = D(0);
   return P(() => {
-    const C = l.current;
-    if (C)
-      return C.addEventListener(te, h), () => C.removeEventListener(te, h);
+    const I = l.current;
+    if (I)
+      return I.addEventListener(te, h), () => I.removeEventListener(te, h);
   }, [
     h
   ]), /* @__PURE__ */ x(dt, {
@@ -424,29 +424,29 @@ const te = "rovingFocusGroup.onEntryFocus", it = {
     dir: v,
     loop: s,
     currentTabStopId: d,
-    onItemFocus: V(
-      (C) => b(C),
+    onItemFocus: B(
+      (I) => b(I),
       [
         b
       ]
     ),
-    onItemShiftTab: V(
+    onItemShiftTab: B(
       () => _(!0),
       []
     ),
-    onFocusableItemAdd: V(
-      () => z(
-        (C) => C + 1
+    onFocusableItemAdd: B(
+      () => K(
+        (I) => I + 1
       ),
       []
     ),
-    onFocusableItemRemove: V(
-      () => z(
-        (C) => C - 1
+    onFocusableItemRemove: B(
+      () => K(
+        (I) => I - 1
       ),
       []
     )
-  }, /* @__PURE__ */ x(G.div, I({
+  }, /* @__PURE__ */ x(j.div, C({
     tabIndex: m || q === 0 ? -1 : 0,
     "data-orientation": o
   }, p, {
@@ -456,13 +456,13 @@ const te = "rovingFocusGroup.onEntryFocus", it = {
       ...e.style
     },
     onMouseDown: O(e.onMouseDown, () => {
-      T.current = !0;
+      w.current = !0;
     }),
-    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) {
+    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) {
           const L = F().filter(
             (g) => g.focusable
           ), X = L.find(
@@ -479,7 +479,7 @@ const te = "rovingFocusGroup.onEntryFocus", it = {
           Se(f);
         }
       }
-      T.current = !1;
+      w.current = !1;
     }),
     onBlur: O(
       e.onBlur,
@@ -487,7 +487,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 = Ie(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 = Ce(n), { onFocusableItemAdd: $, onFocusableItemRemove: v } = i;
   return P(() => {
     if (o)
       return $(), () => v();
@@ -500,7 +500,7 @@ const te = "rovingFocusGroup.onEntryFocus", it = {
     id: u,
     focusable: o,
     active: s
-  }, /* @__PURE__ */ x(G.span, I({
+  }, /* @__PURE__ */ x(j.span, C({
     tabIndex: p ? 0 : -1,
     "data-orientation": i.orientation
   }, c, {
@@ -575,14 +575,14 @@ function ht(e, t) {
     (n, o) => e[(t + o) % e.length]
   );
 }
-const xt = pt, Ct = vt;
-function It(e, t) {
+const xt = pt, It = vt;
+function Ct(e, t) {
   return qe((n, o) => {
     const s = t[n][o];
     return s ?? n;
   }, e);
 }
-const we = (e) => {
+const Te = (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);
@@ -590,9 +590,9 @@ const we = (e) => {
     ref: r
   }) : null;
 };
-we.displayName = "Presence";
+Te.displayName = "Presence";
 function yt(e) {
-  const [t, n] = D(), o = R({}), s = R(e), r = R("none"), c = e ? "mounted" : "unmounted", [a, u] = It(c, {
+  const [t, n] = D(), o = R({}), s = R(e), r = R("none"), c = e ? "mounted" : "unmounted", [a, u] = Ct(c, {
     mounted: {
       UNMOUNT: "unmounted",
       ANIMATION_OUT: "unmountSuspended"
@@ -606,14 +606,14 @@ function yt(e) {
     }
   });
   return P(() => {
-    const i = K(o.current);
+    const i = z(o.current);
     r.current = a === "mounted" ? i : "none";
   }, [
     a
   ]), oe(() => {
     const i = o.current, p = s.current;
     if (p !== e) {
-      const $ = r.current, v = K(i);
+      const $ = r.current, v = z(i);
       e ? u("MOUNT") : v === "none" || (i == null ? void 0 : i.display) === "none" ? u("UNMOUNT") : u(p && $ !== v ? "ANIMATION_OUT" : "UNMOUNT"), s.current = e;
     }
   }, [
@@ -622,12 +622,12 @@ function yt(e) {
   ]), oe(() => {
     if (t) {
       const i = (l) => {
-        const v = K(o.current).includes(l.animationName);
+        const v = z(o.current).includes(l.animationName);
         l.target === t && v && Le(
           () => u("ANIMATION_END")
         );
       }, p = (l) => {
-        l.target === t && (r.current = K(o.current));
+        l.target === t && (r.current = z(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);
@@ -642,23 +642,23 @@ function yt(e) {
       "mounted",
       "unmountSuspended"
     ].includes(a),
-    ref: V((i) => {
+    ref: B((i) => {
       i && (o.current = getComputedStyle(i)), n(i);
     }, [])
   };
 }
-function K(e) {
+function z(e) {
   return (e == null ? void 0 : e.animationName) || "none";
 }
-const Te = "Tabs", [St, tn] = ae(Te, [
+const we = "Tabs", [St, tn] = ae(we, [
   ye
-]), 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({
+]), 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({
     prop: o,
     onChange: s,
     defaultProp: r
   });
-  return /* @__PURE__ */ x(wt, {
+  return /* @__PURE__ */ x(Tt, {
     scope: n,
     baseId: he(),
     value: l,
@@ -666,7 +666,7 @@ const Te = "Tabs", [St, tn] = ae(Te, [
     orientation: c,
     dir: p,
     activationMode: u
-  }, /* @__PURE__ */ x(G.div, I({
+  }, /* @__PURE__ */ x(j.div, C({
     dir: p,
     "data-orientation": c
   }, i, {
@@ -674,13 +674,13 @@ const Te = "Tabs", [St, tn] = ae(Te, [
   })));
 }), 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, I({
+  return /* @__PURE__ */ x(xt, C({
     asChild: !0
   }, c, {
     orientation: r.orientation,
     dir: r.dir,
     loop: o
-  }), /* @__PURE__ */ x(G.div, I({
+  }), /* @__PURE__ */ x(j.div, C({
     role: "tablist",
     "aria-orientation": r.orientation
   }, s, {
@@ -688,12 +688,12 @@ const Te = "Tabs", [St, tn] = ae(Te, [
   })));
 }), 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(Ct, I({
+  return /* @__PURE__ */ x(It, C({
     asChild: !0
   }, a, {
     focusable: !s,
     active: p
-  }), /* @__PURE__ */ x(G.button, I({
+  }), /* @__PURE__ */ x(j.button, C({
     type: "button",
     role: "tab",
     "aria-selected": p,
@@ -726,11 +726,11 @@ const Te = "Tabs", [St, tn] = ae(Te, [
     );
     return () => cancelAnimationFrame($);
   }, []), /* @__PURE__ */ x(
-    we,
+    Te,
     {
       present: s || p
     },
-    ({ present: $ }) => /* @__PURE__ */ x(G.div, I({
+    ({ present: $ }) => /* @__PURE__ */ x(j.div, C({
       "data-state": p ? "active" : "inactive",
       "data-orientation": a.orientation,
       role: "tabpanel",
@@ -753,7 +753,7 @@ function Ae(e, t) {
 function Ee(e, t) {
   return `${e}-content-${t}`;
 }
-const Ot = Tt, Ft = At, Dt = Pt, qt = Mt;
+const Ot = wt, Ft = At, Dt = Pt, qt = Mt;
 function Lt(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
@@ -794,27 +794,27 @@ var Pe = { exports: {} };
   })();
 })(Pe);
 var Ut = Pe.exports;
-const de = /* @__PURE__ */ Lt(Ut), Vt = {
+const de = /* @__PURE__ */ Lt(Ut), Bt = {
   "purpur-tab-content": "_purpur-tab-content_1x2zs_1"
-}, Bt = de.bind(Vt), jt = "purpur-tab-content", Gt = S(
-  ({ children: e, tabId: t, "data-testid": n, className: o, ...s }, r) => /* @__PURE__ */ w(
+}, Vt = de.bind(Bt), Gt = "purpur-tab-content", jt = S(
+  ({ children: e, tabId: t, "data-testid": n, className: o, ...s }, r) => /* @__PURE__ */ T(
     qt,
     {
       ref: r,
-      className: Bt([jt, o]),
+      className: Vt([Gt, o]),
       "data-testid": n,
       value: t,
       ...s,
       children: e
     }
   )
-), kt = (e) => !!e && k(e) && !!e.props.name && !!e.props.tabId, zt = {
+), kt = (e) => !!e && k(e) && !!e.props.name && !!e.props.tabId, Kt = {
   "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"
-}, Kt = de.bind(zt), $e = "purpur-tab-header", Wt = S(
+}, zt = de.bind(Kt), $e = "purpur-tab-header", Wt = S(
   ({
     index: e,
     tabId: t,
@@ -823,11 +823,11 @@ const de = /* @__PURE__ */ Lt(Ut), Vt = {
     onFocus: s,
     "data-testid": r,
     children: c
-  }, a) => /* @__PURE__ */ w(
+  }, a) => /* @__PURE__ */ T(
     Dt,
     {
       id: `${t}-trigger`,
-      className: Kt([$e, `${$e}--${n}${o ? "-negative" : ""}`]),
+      className: zt([$e, `${$e}--${n}${o ? "-negative" : ""}`]),
       value: t,
       "data-testid": r,
       "data-index": e,
@@ -869,30 +869,30 @@ const de = /* @__PURE__ */ Lt(Ut), Vt = {
   "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", T = 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([
     y,
     `${y}--${t}${n ? "-negative" : ""}`,
     { [`${y}--fullWidth`]: o },
     r
-  ]), q = E.map(b, ({ props: { tabId: f } }) => f), z = () => {
+  ]), q = E.map(b, ({ props: { tabId: f } }) => f), K = () => {
     const f = q.findIndex((g) => g === c);
     return f >= 0 ? f : 0;
-  }, [C, H] = D(z);
+  }, [I, H] = D(K);
   if (new Set(q).size !== q.length)
     throw new Error("tabId must be unique");
-  const B = (f, g) => g || a ? `${g || a}-${f}` : void 0, L = () => {
+  const V = (f, g) => g || a ? `${g || a}-${f}` : void 0, L = () => {
     if (!F)
       return;
-    const f = _.current[C];
+    const f = _.current[I];
     $((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, j = f === "left" ? -h : h;
-      m.current.scroll({ left: g + j, behavior: "smooth" });
+      const { scrollLeft: g } = m.current, G = f === "left" ? -h : h;
+      m.current.scroll({ left: g + G, behavior: "smooth" });
     }
-  }, Q = ({ side: f }) => /* @__PURE__ */ w(
+  }, Q = ({ side: f }) => /* @__PURE__ */ T(
     "button",
     {
       className: U(`${y}__scroll-button`, `${y}__scroll-button--${f}`),
@@ -900,15 +900,15 @@ const de = /* @__PURE__ */ Lt(Ut), Vt = {
       type: "button",
       "aria-hidden": "true",
       tabIndex: -1,
-      "data-testid": B("scroll-button"),
-      children: /* @__PURE__ */ w(He, { svg: f === "left" ? Ge : ke, size: "md" })
+      "data-testid": V("scroll-button"),
+      children: /* @__PURE__ */ T(He, { svg: f === "left" ? je : ke, size: "md" })
     }
   );
   return P(() => (window.addEventListener("resize", L), () => {
     window.removeEventListener("resize", L);
   }), []), P(() => {
     L();
-  }, [C, o, b.length, t]), P(() => {
+  }, [I, o, b.length, t]), P(() => {
     const f = (M) => {
       if (M.every((N) => N.isIntersecting) && M.length === b.length) {
         p({});
@@ -929,17 +929,17 @@ const de = /* @__PURE__ */ Lt(Ut), Vt = {
     }, g = new IntersectionObserver(f, {
       threshold: [0.99],
       root: m.current
-    }), j = _.current;
-    return j.forEach((M) => g.observe(M)), () => {
-      j.forEach((M) => g.unobserve(M));
+    }), G = _.current;
+    return G.forEach((M) => g.observe(M)), () => {
+      G.forEach((M) => g.unobserve(M));
     };
-  }, [b.length]), /* @__PURE__ */ w(
+  }, [b.length]), /* @__PURE__ */ T(
     Ot,
     {
       defaultValue: c ?? b[0].props.tabId,
       onValueChange: X,
       "data-testid": a,
-      className: T,
+      className: w,
       ...u,
       children: /* @__PURE__ */ ee("div", { className: U(`${y}__container`), children: [
         /* @__PURE__ */ ee("div", { className: U([`${y}__wrapper`, i]), children: [
@@ -952,11 +952,11 @@ const de = /* @__PURE__ */ Lt(Ut), Vt = {
               className: U(`${y}__list`),
               children: [
                 E.map(b, (f, g) => {
-                  const { name: j, tabId: M, "data-testid": fe } = f.props;
-                  return /* @__PURE__ */ w(
+                  const { name: G, tabId: M, "data-testid": fe } = f.props;
+                  return /* @__PURE__ */ T(
                     Wt,
                     {
-                      "data-testid": B("header", fe),
+                      "data-testid": V("header", fe),
                       index: g,
                       tabId: M,
                       ref: (N) => {
@@ -967,11 +967,11 @@ const de = /* @__PURE__ */ Lt(Ut), Vt = {
                       },
                       variant: t,
                       negative: n,
-                      children: j
+                      children: G
                     }
                   );
                 }),
-                F && /* @__PURE__ */ w(
+                F && /* @__PURE__ */ T(
                   "div",
                   {
                     className: U(`${y}__selected-border`),
@@ -979,21 +979,21 @@ const de = /* @__PURE__ */ Lt(Ut), Vt = {
                       width: v,
                       transform: `translateX(${l}px)`
                     },
-                    "data-testid": B("selected-border")
+                    "data-testid": V("selected-border")
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ w(Q, { side: "left" }),
-          /* @__PURE__ */ w(Q, { side: "right" })
+          /* @__PURE__ */ T(Q, { side: "left" }),
+          /* @__PURE__ */ T(Q, { side: "right" })
         ] }),
-        /* @__PURE__ */ w("div", { className: U(`${y}__content-container`), children: E.map(b, (f) => f) })
+        /* @__PURE__ */ T("div", { className: U(`${y}__content-container`), children: E.map(b, (f) => f) })
       ] })
     }
   );
 };
-Xt.Content = Gt;
+Xt.Content = jt;
 export {
   Xt as Tabs,
   Zt as createTabChangeDetailEvent,