@purpurds/tabs 5.30.1 → 5.32.0

package/dist/tabs.es.js

@@ -1,6 +1,6 @@
 import { jsx as T, jsxs as ee } from "react/jsx-runtime";
-import * as me from "react";
-import E, { createContext as ne, useMemo as H, createElement as g, useContext as _e, useCallback as U, forwardRef as w, Children as P, isValidElement as K, cloneElement as se, Fragment as qe, useLayoutEffect as Le, useEffect as N, useRef as R, useState as O, useReducer as Ue } from "react";
+import * as _e from "react";
+import E, { createContext as ne, useMemo as H, createElement as g, useContext as ve, useCallback as L, forwardRef as w, Children as P, isValidElement as K, cloneElement as se, Fragment as qe, useLayoutEffect as Le, useEffect as N, useRef as R, useState as O, useReducer as Ue } from "react";
 import { flushSync as Ve } from "react-dom";
 function Be(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
@@ -114,20 +114,20 @@ function ae(e, t = []) {
       ...n,
       c
     ];
-    function i(d) {
-      const { scope: v, children: m, ...f } = d, h = (v == null ? void 0 : v[e][u]) || a, $ = H(
+    function i(l) {
+      const { scope: m, children: _, ...f } = l, h = (m == null ? void 0 : m[e][u]) || a, $ = H(
         () => f,
         Object.values(f)
       );
       return /* @__PURE__ */ g(h.Provider, {
         value: $
-      }, m);
+      }, _);
     }
-    function p(d, v) {
-      const m = (v == null ? void 0 : v[e][u]) || a, f = _e(m);
+    function p(l, m) {
+      const _ = (m == null ? void 0 : m[e][u]) || a, f = ve(_);
       if (f) return f;
       if (c !== void 0) return c;
-      throw new Error(`\`${d}\` must be used within \`${r}\``);
+      throw new Error(`\`${l}\` must be used within \`${r}\``);
     }
     return i.displayName = r + "Provider", [
       i,
@@ -169,10 +169,10 @@ function Je(...e) {
     );
     return function(r) {
       const c = o.reduce((a, { useScope: u, scopeName: i }) => {
-        const d = u(r)[`__scope${i}`];
+        const l = u(r)[`__scope${i}`];
         return {
           ...a,
-          ...d
+          ...l
         };
       }, {});
       return H(
@@ -196,7 +196,7 @@ function xe(...e) {
   );
 }
 function X(...e) {
-  return U(xe(...e), e);
+  return L(xe(...e), e);
 }
 const J = /* @__PURE__ */ w((e, t) => {
   const { children: n, ...o } = e, s = P.toArray(n), r = s.find(tt);
@@ -250,30 +250,30 @@ function rt(e) {
       current: null
     },
     itemMap: /* @__PURE__ */ new Map()
-  }), c = (m) => {
-    const { scope: f, children: h } = m, $ = E.useRef(null), b = E.useRef(/* @__PURE__ */ new Map()).current;
+  }), c = (_) => {
+    const { scope: f, children: h } = _, $ = E.useRef(null), b = E.useRef(/* @__PURE__ */ new Map()).current;
     return /* @__PURE__ */ E.createElement(s, {
       scope: f,
       itemMap: b,
       collectionRef: $
     }, h);
-  }, a = e + "CollectionSlot", u = /* @__PURE__ */ E.forwardRef((m, f) => {
-    const { scope: h, children: $ } = m, b = r(a, h), _ = X(f, b.collectionRef);
+  }, a = e + "CollectionSlot", u = /* @__PURE__ */ E.forwardRef((_, f) => {
+    const { scope: h, children: $ } = _, b = r(a, h), v = X(f, b.collectionRef);
     return /* @__PURE__ */ E.createElement(J, {
-      ref: _
+      ref: v
     }, $);
-  }), i = e + "CollectionItemSlot", p = "data-radix-collection-item", d = /* @__PURE__ */ E.forwardRef((m, f) => {
-    const { scope: h, children: $, ...b } = m, _ = E.useRef(null), D = X(f, _), y = r(i, h);
-    return E.useEffect(() => (y.itemMap.set(_, {
-      ref: _,
+  }), i = e + "CollectionItemSlot", p = "data-radix-collection-item", l = /* @__PURE__ */ E.forwardRef((_, f) => {
+    const { scope: h, children: $, ...b } = _, v = E.useRef(null), U = X(f, v), y = r(i, h);
+    return E.useEffect(() => (y.itemMap.set(v, {
+      ref: v,
       ...b
-    }), () => void y.itemMap.delete(_))), /* @__PURE__ */ E.createElement(J, {
+    }), () => void y.itemMap.delete(v))), /* @__PURE__ */ E.createElement(J, {
       [p]: "",
-      ref: D
+      ref: U
     }, $);
   });
-  function v(m) {
-    const f = r(e + "CollectionConsumer", m);
+  function m(_) {
+    const f = r(e + "CollectionConsumer", _);
     return E.useCallback(() => {
       const $ = f.collectionRef.current;
       if (!$) return [];
@@ -290,18 +290,18 @@ function rt(e) {
     {
       Provider: c,
       Slot: u,
-      ItemSlot: d
+      ItemSlot: l
     },
-    v,
+    m,
     o
   ];
 }
 const oe = globalThis != null && globalThis.document ? Le : () => {
-}, ot = me.useId || (() => {
+}, ot = _e.useId || (() => {
 });
 let ct = 0;
 function Ie(e) {
-  const [t, n] = me.useState(ot());
+  const [t, n] = _e.useState(ot());
   return oe(() => {
     e || n(
       (o) => o ?? String(ct++)
@@ -358,10 +358,10 @@ function Ce({ prop: e, defaultProp: t, onChange: n = () => {
   const [o, s] = at({
     defaultProp: t,
     onChange: n
-  }), r = e !== void 0, c = r ? e : o, a = ie(n), u = U((i) => {
+  }), r = e !== void 0, c = r ? e : o, a = ie(n), u = L((i) => {
     if (r) {
-      const d = typeof i == "function" ? i(e) : i;
-      d !== e && a(d);
+      const l = typeof i == "function" ? i(e) : i;
+      l !== e && a(l);
     } else s(i);
   }, [
     r,
@@ -386,55 +386,55 @@ function at({ defaultProp: e, onChange: t }) {
 }
 const it = /* @__PURE__ */ ne(void 0);
 function ye(e) {
-  const t = _e(it);
+  const t = ve(it);
   return e || t || "ltr";
 }
 const te = "rovingFocusGroup.onEntryFocus", ut = {
   bubbles: !1,
   cancelable: !0
-}, ue = "RovingFocusGroup", [ce, Se, lt] = rt(ue), [dt, we] = ae(ue, [
-  lt
-]), [ft, pt] = dt(ue), bt = /* @__PURE__ */ w((e, t) => /* @__PURE__ */ g(ce.Provider, {
+}, ue = "RovingFocusGroup", [ce, Se, dt] = rt(ue), [lt, we] = ae(ue, [
+  dt
+]), [ft, pt] = lt(ue), bt = /* @__PURE__ */ w((e, t) => /* @__PURE__ */ g(ce.Provider, {
   scope: e.__scopeRovingFocusGroup
 }, /* @__PURE__ */ g(ce.Slot, {
   scope: e.__scopeRovingFocusGroup
 }, /* @__PURE__ */ g($t, C({}, e, {
   ref: t
 }))))), $t = /* @__PURE__ */ w((e, t) => {
-  const { __scopeRovingFocusGroup: n, orientation: o, loop: s = !1, dir: r, currentTabStopId: c, defaultCurrentTabStopId: a, onCurrentTabStopIdChange: u, onEntryFocus: i, ...p } = e, d = R(null), v = X(t, d), m = ye(r), [f = null, h] = Ce({
+  const { __scopeRovingFocusGroup: n, orientation: o, loop: s = !1, dir: r, currentTabStopId: c, defaultCurrentTabStopId: a, onCurrentTabStopIdChange: u, onEntryFocus: i, ...p } = e, l = R(null), m = X(t, l), _ = ye(r), [f = null, h] = Ce({
     prop: c,
     defaultProp: a,
     onChange: u
-  }), [$, b] = O(!1), _ = ie(i), D = Se(n), y = R(!1), [j, V] = O(0);
+  }), [$, b] = O(!1), v = ie(i), U = Se(n), y = R(!1), [j, V] = O(0);
   return N(() => {
-    const x = d.current;
+    const x = l.current;
     if (x)
-      return x.addEventListener(te, _), () => x.removeEventListener(te, _);
+      return x.addEventListener(te, v), () => x.removeEventListener(te, v);
   }, [
-    _
+    v
   ]), /* @__PURE__ */ g(ft, {
     scope: n,
     orientation: o,
-    dir: m,
+    dir: _,
     loop: s,
     currentTabStopId: f,
-    onItemFocus: U(
+    onItemFocus: L(
       (x) => h(x),
       [
         h
       ]
     ),
-    onItemShiftTab: U(
+    onItemShiftTab: L(
       () => b(!0),
       []
     ),
-    onFocusableItemAdd: U(
+    onFocusableItemAdd: L(
       () => V(
         (x) => x + 1
       ),
       []
     ),
-    onFocusableItemRemove: U(
+    onFocusableItemRemove: L(
       () => V(
         (x) => x - 1
       ),
@@ -444,7 +444,7 @@ const te = "rovingFocusGroup.onEntryFocus", ut = {
     tabIndex: $ || j === 0 ? -1 : 0,
     "data-orientation": o
   }, p, {
-    ref: v,
+    ref: m,
     style: {
       outline: "none",
       ...e.style
@@ -457,18 +457,18 @@ const te = "rovingFocusGroup.onEntryFocus", ut = {
       if (x.target === x.currentTarget && W && !$) {
         const k = new CustomEvent(te, ut);
         if (x.currentTarget.dispatchEvent(k), !k.defaultPrevented) {
-          const q = D().filter(
-            (l) => l.focusable
-          ), z = q.find(
-            (l) => l.active
-          ), Q = q.find(
-            (l) => l.id === f
+          const D = U().filter(
+            (d) => d.focusable
+          ), z = D.find(
+            (d) => d.active
+          ), Q = D.find(
+            (d) => d.id === f
           ), Y = [
             z,
             Q,
-            ...q
+            ...D
           ].filter(Boolean).map(
-            (l) => l.ref.current
+            (d) => d.ref.current
           );
           Te(Y);
         }
@@ -480,15 +480,15 @@ const te = "rovingFocusGroup.onEntryFocus", ut = {
       () => b(!1)
     )
   })));
-}), vt = "RovingFocusGroupItem", mt = /* @__PURE__ */ w((e, t) => {
-  const { __scopeRovingFocusGroup: n, focusable: o = !0, active: s = !1, tabStopId: r, ...c } = e, a = Ie(), u = r || a, i = pt(vt, n), p = i.currentTabStopId === u, d = Se(n), { onFocusableItemAdd: v, onFocusableItemRemove: m } = i;
+}), mt = "RovingFocusGroupItem", _t = /* @__PURE__ */ w((e, t) => {
+  const { __scopeRovingFocusGroup: n, focusable: o = !0, active: s = !1, tabStopId: r, ...c } = e, a = Ie(), u = r || a, i = pt(mt, n), p = i.currentTabStopId === u, l = Se(n), { onFocusableItemAdd: m, onFocusableItemRemove: _ } = i;
   return N(() => {
     if (o)
-      return v(), () => m();
+      return m(), () => _();
   }, [
     o,
-    v,
-    m
+    m,
+    _
   ]), /* @__PURE__ */ g(ce.ItemSlot, {
     scope: n,
     id: u,
@@ -515,16 +515,16 @@ const te = "rovingFocusGroup.onEntryFocus", ut = {
       const h = ht(f, i.orientation, i.dir);
       if (h !== void 0) {
         f.preventDefault();
-        let b = d().filter(
-          (_) => _.focusable
+        let b = l().filter(
+          (v) => v.focusable
         ).map(
-          (_) => _.ref.current
+          (v) => v.ref.current
         );
         if (h === "last") b.reverse();
         else if (h === "prev" || h === "next") {
           h === "prev" && b.reverse();
-          const _ = b.indexOf(f.currentTarget);
-          b = i.loop ? xt(b, _ + 1) : b.slice(_ + 1);
+          const v = b.indexOf(f.currentTarget);
+          b = i.loop ? xt(b, v + 1) : b.slice(v + 1);
         }
         setTimeout(
           () => Te(b)
@@ -532,7 +532,7 @@ const te = "rovingFocusGroup.onEntryFocus", ut = {
       }
     })
   })));
-}), _t = {
+}), vt = {
   ArrowLeft: "prev",
   ArrowUp: "prev",
   ArrowRight: "next",
@@ -554,7 +554,7 @@ function ht(e, t, n) {
     "ArrowUp",
     "ArrowDown"
   ].includes(o)))
-    return _t[o];
+    return vt[o];
 }
 function Te(e) {
   const t = document.activeElement;
@@ -566,7 +566,7 @@ function xt(e, t) {
     (n, o) => e[(t + o) % e.length]
   );
 }
-const It = bt, Ct = mt;
+const It = bt, Ct = _t;
 function yt(e, t) {
   return Ue((n, o) => {
     const s = t[n][o];
@@ -604,21 +604,21 @@ function St(e) {
   ]), oe(() => {
     const i = o.current, p = s.current;
     if (p !== e) {
-      const v = r.current, m = Z(i);
-      e ? u("MOUNT") : m === "none" || (i == null ? void 0 : i.display) === "none" ? u("UNMOUNT") : u(p && v !== m ? "ANIMATION_OUT" : "UNMOUNT"), s.current = e;
+      const m = r.current, _ = Z(i);
+      e ? u("MOUNT") : _ === "none" || (i == null ? void 0 : i.display) === "none" ? u("UNMOUNT") : u(p && m !== _ ? "ANIMATION_OUT" : "UNMOUNT"), s.current = e;
     }
   }, [
     e,
     u
   ]), oe(() => {
     if (t) {
-      const i = (d) => {
-        const m = Z(o.current).includes(d.animationName);
-        d.target === t && m && Ve(
+      const i = (l) => {
+        const _ = Z(o.current).includes(l.animationName);
+        l.target === t && _ && Ve(
           () => u("ANIMATION_END")
         );
-      }, p = (d) => {
-        d.target === t && (r.current = Z(o.current));
+      }, p = (l) => {
+        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);
@@ -633,7 +633,7 @@ function St(e) {
       "mounted",
       "unmountSuspended"
     ].includes(a),
-    ref: U((i) => {
+    ref: L((i) => {
       i && (o.current = getComputedStyle(i)), n(i);
     }, [])
   };
@@ -643,8 +643,8 @@ function Z(e) {
 }
 const Ae = "Tabs", [wt, nn] = ae(Ae, [
   we
-]), Ee = we(), [Tt, le] = wt(Ae), Nt = /* @__PURE__ */ w((e, t) => {
-  const { __scopeTabs: n, value: o, onValueChange: s, defaultValue: r, orientation: c = "horizontal", dir: a, activationMode: u = "automatic", ...i } = e, p = ye(a), [d, v] = Ce({
+]), Ee = we(), [Tt, de] = wt(Ae), Nt = /* @__PURE__ */ w((e, t) => {
+  const { __scopeTabs: n, value: o, onValueChange: s, defaultValue: r, orientation: c = "horizontal", dir: a, activationMode: u = "automatic", ...i } = e, p = ye(a), [l, m] = Ce({
     prop: o,
     onChange: s,
     defaultProp: r
@@ -652,8 +652,8 @@ const Ae = "Tabs", [wt, nn] = ae(Ae, [
   return /* @__PURE__ */ g(Tt, {
     scope: n,
     baseId: Ie(),
-    value: d,
-    onValueChange: v,
+    value: l,
+    onValueChange: m,
     orientation: c,
     dir: p,
     activationMode: u
@@ -664,7 +664,7 @@ const Ae = "Tabs", [wt, nn] = ae(Ae, [
     ref: t
   })));
 }), At = "TabsList", Et = /* @__PURE__ */ w((e, t) => {
-  const { __scopeTabs: n, loop: o = !0, ...s } = e, r = le(At, n), c = Ee(n);
+  const { __scopeTabs: n, loop: o = !0, ...s } = e, r = de(At, n), c = Ee(n);
   return /* @__PURE__ */ g(It, C({
     asChild: !0
   }, c, {
@@ -678,7 +678,7 @@ const Ae = "Tabs", [wt, nn] = ae(Ae, [
     ref: t
   })));
 }), Pt = "TabsTrigger", Rt = /* @__PURE__ */ w((e, t) => {
-  const { __scopeTabs: n, value: o, disabled: s = !1, ...r } = e, c = le(Pt, n), a = Ee(n), u = Pe(c.baseId, o), i = Re(c.baseId, o), p = o === c.value;
+  const { __scopeTabs: n, value: o, disabled: s = !1, ...r } = e, c = de(Pt, n), a = Ee(n), u = Pe(c.baseId, o), i = Re(c.baseId, o), p = o === c.value;
   return /* @__PURE__ */ g(Ct, C({
     asChild: !0
   }, a, {
@@ -695,47 +695,47 @@ const Ae = "Tabs", [wt, nn] = ae(Ae, [
     id: u
   }, r, {
     ref: t,
-    onMouseDown: F(e.onMouseDown, (d) => {
-      !s && d.button === 0 && d.ctrlKey === !1 ? c.onValueChange(o) : d.preventDefault();
+    onMouseDown: F(e.onMouseDown, (l) => {
+      !s && l.button === 0 && l.ctrlKey === !1 ? c.onValueChange(o) : l.preventDefault();
     }),
-    onKeyDown: F(e.onKeyDown, (d) => {
+    onKeyDown: F(e.onKeyDown, (l) => {
       [
         " ",
         "Enter"
-      ].includes(d.key) && c.onValueChange(o);
+      ].includes(l.key) && c.onValueChange(o);
     }),
     onFocus: F(e.onFocus, () => {
-      const d = c.activationMode !== "manual";
-      !p && !s && d && c.onValueChange(o);
+      const l = c.activationMode !== "manual";
+      !p && !s && l && c.onValueChange(o);
     })
   })));
 }), Mt = "TabsContent", Ft = /* @__PURE__ */ w((e, t) => {
-  const { __scopeTabs: n, value: o, forceMount: s, children: r, ...c } = e, a = le(Mt, n), u = Pe(a.baseId, o), i = Re(a.baseId, o), p = o === a.value, d = R(p);
+  const { __scopeTabs: n, value: o, forceMount: s, children: r, ...c } = e, a = de(Mt, n), u = Pe(a.baseId, o), i = Re(a.baseId, o), p = o === a.value, l = R(p);
   return N(() => {
-    const v = requestAnimationFrame(
-      () => d.current = !1
+    const m = requestAnimationFrame(
+      () => l.current = !1
     );
-    return () => cancelAnimationFrame(v);
+    return () => cancelAnimationFrame(m);
   }, []), /* @__PURE__ */ g(
     Ne,
     {
       present: s || p
     },
-    ({ present: v }) => /* @__PURE__ */ g(G.div, C({
+    ({ present: m }) => /* @__PURE__ */ g(G.div, C({
       "data-state": p ? "active" : "inactive",
       "data-orientation": a.orientation,
       role: "tabpanel",
       "aria-labelledby": u,
-      hidden: !v,
+      hidden: !m,
       id: i,
       tabIndex: 0
     }, c, {
       ref: t,
       style: {
         ...e.style,
-        animationDuration: d.current ? "0s" : void 0
+        animationDuration: l.current ? "0s" : void 0
       }
-    }), v && r)
+    }), m && r)
   );
 });
 function Pe(e, t) {
@@ -785,9 +785,9 @@ var Me = { exports: {} };
   })();
 })(Me);
 var Vt = Me.exports;
-const de = /* @__PURE__ */ Ut(Vt), Bt = {
+const le = /* @__PURE__ */ Ut(Vt), Bt = {
   "purpur-tab-content": "_purpur-tab-content_1x2zs_1"
-}, Gt = de.bind(Bt), jt = "purpur-tab-content", kt = w(
+}, Gt = le.bind(Bt), jt = "purpur-tab-content", kt = w(
   ({ children: e, tabId: t, "data-testid": n, className: o, ...s }, r) => /* @__PURE__ */ T(
     Lt,
     {
@@ -805,7 +805,7 @@ const de = /* @__PURE__ */ Ut(Vt), Bt = {
   "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"
-}, Wt = de.bind(Kt), ve = "purpur-tab-header", Yt = w(
+}, Wt = le.bind(Kt), me = "purpur-tab-header", Yt = w(
   ({
     index: e,
     tabId: t,
@@ -818,7 +818,7 @@ const de = /* @__PURE__ */ Ut(Vt), Bt = {
     qt,
     {
       id: `${t}-trigger`,
-      className: Wt([ve, `${ve}--${n}${o ? "-negative" : ""}`]),
+      className: Wt([me, `${me}--${n}${o ? "-negative" : ""}`]),
       value: t,
       "data-testid": r,
       "data-index": e,
@@ -842,7 +842,7 @@ const de = /* @__PURE__ */ Ut(Vt), Bt = {
   "purpur-tabs--contained-negative": "_purpur-tabs--contained-negative_1dpqy_103",
   "purpur-tabs__content-container": "_purpur-tabs__content-container_1dpqy_106",
   "purpur-tabs--fullWidth": "_purpur-tabs--fullWidth_1dpqy_115"
-}, rn = ["line", "contained"], Ht = (e) => new CustomEvent("tabChangeDetail", { detail: { value: e } }), L = de.bind(Zt), S = "purpur-tabs", Xt = (e, t) => {
+}, rn = ["line", "contained"], Ht = (e) => new CustomEvent("tabChangeDetail", { detail: { value: e } }), q = le.bind(Zt), S = "purpur-tabs", Xt = (e, t) => {
   var u;
   if (typeof (e == null ? void 0 : e.getBoundingClientRect) != "function" || typeof (t == null ? void 0 : t.scroll) != "function")
     return;
@@ -861,43 +861,43 @@ const de = /* @__PURE__ */ Ut(Vt), Bt = {
   value: u,
   ...i
 }) => {
-  const [p, d] = O({}), [v, m] = O(0), [f, h] = O(0), $ = P.toArray(e).filter(zt), b = R(), _ = R(new Array($.length)), D = 200, y = t === "line", j = L([
+  const [p, l] = O({}), [m, _] = O(0), [f, h] = O(0), $ = P.toArray(e).filter(zt), b = R(), v = R(new Array($.length)), U = 200, y = t === "line", j = q([
     S,
     `${S}--${t}${n ? "-negative" : ""}`,
     { [`${S}--fullWidth`]: o },
     r
-  ]), V = P.map($, ({ props: { tabId: l } }) => l), x = () => {
-    const l = V.findIndex((I) => I === c);
-    return l >= 0 ? l : 0;
+  ]), V = P.map($, ({ props: { tabId: d } }) => d), x = () => {
+    const d = V.findIndex((I) => I === c);
+    return d >= 0 ? d : 0;
   };
   N(() => {
-    u && k($.findIndex((l) => l.props.tabId === u));
+    u && k($.findIndex((d) => d.props.tabId === u));
   }, [$, u]);
   const [W, k] = O(x);
   if (new Set(V).size !== V.length)
     throw new Error("tabId must be unique");
-  const q = (l, I) => I || a ? `${I || a}-${l}` : void 0, z = () => {
+  const D = (d, I) => I || a ? `${I || a}-${d}` : void 0, z = () => {
     if (!y)
       return;
-    const l = _.current[W];
-    m((l == null ? void 0 : l.offsetLeft) || 0), h((l == null ? void 0 : l.getBoundingClientRect().width) || 0);
-  }, Q = (l) => {
-    y && !u && k($.findIndex((I) => I.props.tabId === l)), s == null || s(Ht(l));
-  }, fe = (l) => {
+    const d = v.current[W];
+    _((d == null ? void 0 : d.offsetLeft) || 0), h((d == null ? void 0 : d.getBoundingClientRect().width) || 0);
+  }, Q = (d) => {
+    y && !u && k($.findIndex((I) => I.props.tabId === d)), s == null || s(Ht(d));
+  }, fe = (d) => {
     if (b != null && b.current) {
-      const { scrollLeft: I } = b.current, B = l === "left" ? -D : D;
+      const { scrollLeft: I } = b.current, B = d === "left" ? -200 : U;
       b.current.scroll({ left: I + B, behavior: "smooth" });
     }
-  }, Y = ({ side: l }) => /* @__PURE__ */ T(
+  }, Y = ({ side: d }) => /* @__PURE__ */ T(
     "button",
     {
-      className: L(`${S}__scroll-button`, `${S}__scroll-button--${l}`),
-      onClick: () => fe(l),
+      className: q(`${S}__scroll-button`, `${S}__scroll-button--${d}`),
+      onClick: () => fe(d),
       type: "button",
       "aria-hidden": "true",
       tabIndex: -1,
-      "data-testid": q("scroll-button"),
-      children: /* @__PURE__ */ T(he, { svg: l === "left" ? ze : Ke, size: "md" })
+      "data-testid": D("scroll-button"),
+      children: /* @__PURE__ */ T(he, { svg: d === "left" ? ze : Ke, size: "md" })
     }
   );
   return N(() => (window.addEventListener("resize", z), () => {
@@ -905,14 +905,14 @@ const de = /* @__PURE__ */ Ut(Vt), Bt = {
   }), []), N(() => {
     z();
   }, [W, o, $.length, t]), N(() => {
-    const l = (M) => {
+    const d = (M) => {
       if (M.every((A) => A.isIntersecting) && M.length === $.length) {
-        d({});
+        l({});
         return;
       }
       M.forEach((A) => {
         const be = Number(A.target.getAttribute("data-index")), Fe = be === 0, Oe = be === $.length - 1;
-        d((De) => ({
+        l((De) => ({
           ...De,
           ...Fe && {
             [`${S}__wrapper--scroll-end`]: !A.isIntersecting
@@ -922,10 +922,10 @@ const de = /* @__PURE__ */ Ut(Vt), Bt = {
           }
         }));
       });
-    }, I = new IntersectionObserver(l, {
+    }, I = new IntersectionObserver(d, {
       threshold: [0.99],
       root: b.current
-    }), B = _.current;
+    }), B = v.current;
     return B.forEach((M) => I.observe(M)), () => {
       B.forEach((M) => I.unobserve(M));
     };
@@ -938,26 +938,26 @@ const de = /* @__PURE__ */ Ut(Vt), Bt = {
       className: j,
       value: u,
       ...i,
-      children: /* @__PURE__ */ ee("div", { className: L(`${S}__container`), children: [
-        /* @__PURE__ */ ee("div", { className: L([`${S}__wrapper`, p]), children: [
+      children: /* @__PURE__ */ ee("div", { className: q(`${S}__container`), children: [
+        /* @__PURE__ */ ee("div", { className: q([`${S}__wrapper`, p]), children: [
           /* @__PURE__ */ ee(
             Dt,
             {
-              ref: (l) => {
-                b.current = l;
+              ref: (d) => {
+                b.current = d;
               },
-              className: L(`${S}__list`),
+              className: q(`${S}__list`),
               children: [
-                P.map($, (l, I) => {
-                  const { name: B, tabId: M, "data-testid": pe } = l.props;
+                P.map($, (d, I) => {
+                  const { name: B, tabId: M, "data-testid": pe } = d.props;
                   return /* @__PURE__ */ T(
                     Yt,
                     {
-                      "data-testid": q("header", pe),
+                      "data-testid": D("header", pe),
                       index: I,
                       tabId: M,
                       ref: (A) => {
-                        A && (_.current[I] = A);
+                        A && (v.current[I] = A);
                       },
                       onFocus: (A) => {
                         Xt(A.target, b.current);
@@ -971,12 +971,12 @@ const de = /* @__PURE__ */ Ut(Vt), Bt = {
                 y && /* @__PURE__ */ T(
                   "div",
                   {
-                    className: L(`${S}__selected-border`),
+                    className: q(`${S}__selected-border`),
                     style: {
                       width: f,
-                      transform: `translateX(${v}px)`
+                      transform: `translateX(${m}px)`
                     },
-                    "data-testid": q("selected-border")
+                    "data-testid": D("selected-border")
                   }
                 )
               ]
@@ -985,7 +985,7 @@ const de = /* @__PURE__ */ Ut(Vt), Bt = {
           /* @__PURE__ */ T(Y, { side: "left" }),
           /* @__PURE__ */ T(Y, { side: "right" })
         ] }),
-        /* @__PURE__ */ T("div", { className: L(`${S}__content-container`), children: P.map($, (l) => l) })
+        /* @__PURE__ */ T("div", { className: q(`${S}__content-container`), children: P.map($, (d) => d) })
       ] })
     }
   );