@purpurds/tabs 4.6.0 → 5.0.0

package/dist/tabs.es.js

@@ -1,11 +1,11 @@
-import { jsx as N, jsxs as Q } from "react/jsx-runtime";
-import * as be from "react";
-import A, { createContext as te, useMemo as Z, createElement as g, useContext as $e, useCallback as L, forwardRef as T, Children as E, isValidElement as K, cloneElement as ce, Fragment as Me, useLayoutEffect as Oe, useEffect as R, useRef as P, useState as O, useReducer as Fe } from "react";
-import { flushSync as De } from "react-dom";
-function qe(e) {
+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 V, forwardRef as S, Children as E, isValidElement as k, cloneElement as se, Fragment as Fe, useLayoutEffect as De, useEffect as R, useRef as P, 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;
 }
-var ve = { exports: {} };
+var _e = { exports: {} };
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
@@ -40,9 +40,9 @@ var ve = { exports: {} };
     }
     e.exports ? (n.default = n, e.exports = n) : window.classNames = n;
   })();
-})(ve);
-var Le = ve.exports;
-const Ue = /* @__PURE__ */ qe(Le), Ve = {
+})(_e);
+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,37 +50,37 @@ const Ue = /* @__PURE__ */ qe(Le), Ve = {
   "purpur-icon--md": "_purpur-icon--md_8u1lq_16",
   "purpur-icon--lg": "_purpur-icon--lg_8u1lq_20",
   "purpur-icon--xl": "_purpur-icon--xl_8u1lq_24"
-}, Be = {
+}, 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"],
   category: "utility"
-}, je = {
+}, ke = {
   name: "chevron-right",
   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"
-}, Ge = Ue.bind(Ve), fe = "purpur-icon", ke = "md", ze = (e) => e.filter((t) => Object.keys(t).length >= 1).map((t) => `${t.name}="${t.value}"`).join(" "), Ke = ({ 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" },
     { name: "viewBox", value: "0 0 24 24" },
     t ? { name: "role", value: "img" } : { name: "aria-hidden", value: "true" }
   ], o = t ? `<title>${t}</title>` : "";
-  return `<svg ${ze(n)}>${o}${e}</svg>`;
-}, We = (e) => e.replace(/<(\/?)svg([^>]*)>/g, "").trim(), Ye = ({
+  return `<svg ${We(n)}>${o}${e}</svg>`;
+}, Ze = (e) => e.replace(/<(\/?)svg([^>]*)>/g, "").trim(), He = ({
   ["data-testid"]: e,
   svg: t,
   allyTitle: n,
   className: o = "",
-  size: s = ke,
+  size: s = Ke,
   ...r
 }) => {
-  const c = Ke({
-    content: We(t.svg),
+  const c = Ye({
+    content: Ze(t.svg),
     title: n
-  }), a = Ge(o, fe, `${fe}--${s}`);
-  return /* @__PURE__ */ N(
+  }), a = ze(o, be, `${be}--${s}`);
+  return /* @__PURE__ */ w(
     "span",
     {
       "aria-label": n,
@@ -91,46 +91,46 @@ const Ue = /* @__PURE__ */ qe(Le), Ve = {
     }
   );
 };
-function y() {
-  return y = 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;
-  }, y.apply(this, arguments);
+  }, I.apply(this, arguments);
 }
-function M(e, t, { checkForDefaultPrevented: n = !0 } = {}) {
+function O(e, t, { checkForDefaultPrevented: n = !0 } = {}) {
   return function(s) {
     if (e == null || e(s), n === !1 || !s.defaultPrevented)
       return t == null ? void 0 : t(s);
   };
 }
-function se(e, t = []) {
+function ae(e, t = []) {
   let n = [];
   function o(r, c) {
-    const a = /* @__PURE__ */ te(c), u = n.length;
+    const a = /* @__PURE__ */ ne(c), u = n.length;
     n = [
       ...n,
       c
     ];
-    function i(d) {
-      const { scope: b, children: v, ...l } = d, $ = (b == null ? void 0 : b[e][u]) || a, h = Z(
-        () => l,
-        Object.values(l)
+    function i(l) {
+      const { scope: $, children: v, ...d } = l, b = ($ == null ? void 0 : $[e][u]) || a, m = W(
+        () => d,
+        Object.values(d)
       );
-      return /* @__PURE__ */ g($.Provider, {
-        value: h
+      return /* @__PURE__ */ x(b.Provider, {
+        value: m
       }, v);
     }
-    function f(d, b) {
-      const v = (b == null ? void 0 : b[e][u]) || a, l = $e(v);
-      if (l)
-        return l;
+    function f(l, $) {
+      const v = ($ == null ? void 0 : $[e][u]) || a, d = me(v);
+      if (d)
+        return d;
       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,
@@ -138,10 +138,10 @@ function se(e, t = []) {
     ];
   }
   const s = () => {
-    const r = n.map((c) => /* @__PURE__ */ te(c));
+    const r = n.map((c) => /* @__PURE__ */ ne(c));
     return function(a) {
       const u = (a == null ? void 0 : a[e]) || r;
-      return Z(
+      return W(
         () => ({
           [`__scope${e}`]: {
             ...a,
@@ -157,10 +157,10 @@ function se(e, t = []) {
   };
   return s.scopeName = e, [
     o,
-    Ze(s, ...t)
+    Xe(s, ...t)
   ];
 }
-function Ze(...e) {
+function Xe(...e) {
   const t = e[0];
   if (e.length === 1)
     return t;
@@ -173,13 +173,13 @@ function Ze(...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 Z(
+      return W(
         () => ({
           [`__scope${t.scopeName}`]: c
         }),
@@ -191,43 +191,43 @@ function Ze(...e) {
   };
   return n.scopeName = t.scopeName, n;
 }
-function He(e, t) {
+function Je(e, t) {
   typeof e == "function" ? e(t) : e != null && (e.current = t);
 }
-function me(...e) {
+function ge(...e) {
   return (t) => e.forEach(
-    (n) => He(n, t)
+    (n) => Je(n, t)
   );
 }
-function H(...e) {
-  return L(me(...e), e);
+function Y(...e) {
+  return V(ge(...e), e);
 }
-const X = /* @__PURE__ */ T((e, t) => {
-  const { children: n, ...o } = e, s = E.toArray(n), r = s.find(Je);
+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__ */ g(ne, y({}, o, {
+    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, {
       ref: t
-    }), /* @__PURE__ */ K(c) ? /* @__PURE__ */ ce(c, void 0, a) : null);
+    }), /* @__PURE__ */ k(c) ? /* @__PURE__ */ se(c, void 0, a) : null);
   }
-  return /* @__PURE__ */ g(ne, y({}, o, {
+  return /* @__PURE__ */ x(re, I({}, o, {
     ref: t
   }), n);
 });
-X.displayName = "Slot";
-const ne = /* @__PURE__ */ T((e, t) => {
+Z.displayName = "Slot";
+const re = /* @__PURE__ */ S((e, t) => {
   const { children: n, ...o } = e;
-  return /* @__PURE__ */ K(n) ? /* @__PURE__ */ ce(n, {
-    ...Qe(o, n.props),
-    ref: t ? me(t, n.ref) : n.ref
+  return /* @__PURE__ */ k(n) ? /* @__PURE__ */ se(n, {
+    ...tt(o, n.props),
+    ref: t ? ge(t, n.ref) : n.ref
   }) : E.count(n) > 1 ? E.only(null) : null;
 });
-ne.displayName = "SlotClone";
-const Xe = ({ children: e }) => /* @__PURE__ */ g(Me, null, e);
-function Je(e) {
-  return /* @__PURE__ */ K(e) && e.type === Xe;
+re.displayName = "SlotClone";
+const Qe = ({ children: e }) => /* @__PURE__ */ x(Fe, null, e);
+function et(e) {
+  return /* @__PURE__ */ k(e) && e.type === Qe;
 }
-function Qe(e, t) {
+function tt(e, t) {
   const n = {
     ...t
   };
@@ -248,74 +248,74 @@ function Qe(e, t) {
     ...n
   };
 }
-function et(e) {
-  const t = e + "CollectionProvider", [n, o] = se(t), [s, r] = n(t, {
+function nt(e) {
+  const t = e + "CollectionProvider", [n, o] = ae(t), [s, r] = n(t, {
     collectionRef: {
       current: null
     },
     itemMap: /* @__PURE__ */ new Map()
   }), c = (v) => {
-    const { scope: l, children: $ } = v, h = A.useRef(null), m = A.useRef(/* @__PURE__ */ new Map()).current;
+    const { scope: d, children: b } = v, m = A.useRef(null), _ = A.useRef(/* @__PURE__ */ new Map()).current;
     return /* @__PURE__ */ A.createElement(s, {
-      scope: l,
-      itemMap: m,
-      collectionRef: h
-    }, $);
-  }, a = e + "CollectionSlot", u = /* @__PURE__ */ A.forwardRef((v, l) => {
-    const { scope: $, children: h } = v, m = r(a, $), _ = H(l, m.collectionRef);
-    return /* @__PURE__ */ A.createElement(X, {
-      ref: _
-    }, h);
-  }), i = e + "CollectionItemSlot", f = "data-radix-collection-item", d = /* @__PURE__ */ A.forwardRef((v, l) => {
-    const { scope: $, children: h, ...m } = v, _ = A.useRef(null), U = H(l, _), S = r(i, $);
-    return A.useEffect(() => (S.itemMap.set(_, {
-      ref: _,
-      ...m
-    }), () => void S.itemMap.delete(_))), /* @__PURE__ */ A.createElement(X, {
+      scope: d,
+      itemMap: _,
+      collectionRef: m
+    }, b);
+  }, a = e + "CollectionSlot", u = /* @__PURE__ */ A.forwardRef((v, d) => {
+    const { scope: b, children: m } = v, _ = r(a, b), g = Y(d, _.collectionRef);
+    return /* @__PURE__ */ A.createElement(Z, {
+      ref: g
+    }, m);
+  }), i = e + "CollectionItemSlot", f = "data-radix-collection-item", l = /* @__PURE__ */ A.forwardRef((v, d) => {
+    const { scope: b, children: m, ..._ } = v, g = A.useRef(null), F = Y(d, g), T = r(i, b);
+    return A.useEffect(() => (T.itemMap.set(g, {
+      ref: g,
+      ..._
+    }), () => void T.itemMap.delete(g))), /* @__PURE__ */ A.createElement(Z, {
       [f]: "",
-      ref: U
-    }, h);
+      ref: F
+    }, m);
   });
-  function b(v) {
-    const l = r(e + "CollectionConsumer", v);
+  function $(v) {
+    const d = r(e + "CollectionConsumer", v);
     return A.useCallback(() => {
-      const h = l.collectionRef.current;
-      if (!h)
+      const m = d.collectionRef.current;
+      if (!m)
         return [];
-      const m = Array.from(h.querySelectorAll(`[${f}]`));
-      return Array.from(l.itemMap.values()).sort(
-        (S, j) => m.indexOf(S.ref.current) - m.indexOf(j.ref.current)
+      const _ = Array.from(m.querySelectorAll(`[${f}]`));
+      return Array.from(d.itemMap.values()).sort(
+        (T, q) => _.indexOf(T.ref.current) - _.indexOf(q.ref.current)
       );
     }, [
-      l.collectionRef,
-      l.itemMap
+      d.collectionRef,
+      d.itemMap
     ]);
   }
   return [
     {
       Provider: c,
       Slot: u,
-      ItemSlot: d
+      ItemSlot: l
     },
-    b,
+    $,
     o
   ];
 }
-const re = globalThis != null && globalThis.document ? Oe : () => {
-}, tt = be.useId || (() => {
+const oe = globalThis != null && globalThis.document ? De : () => {
+}, rt = ve.useId || (() => {
 });
-let nt = 0;
-function _e(e) {
-  const [t, n] = be.useState(tt());
-  return re(() => {
+let ot = 0;
+function he(e) {
+  const [t, n] = ve.useState(rt());
+  return oe(() => {
     e || n(
-      (o) => o ?? String(nt++)
+      (o) => o ?? String(ot++)
     );
   }, [
     e
   ]), e || (t ? `radix-${t}` : "");
 }
-const rt = [
+const ct = [
   "a",
   "button",
   "div",
@@ -332,12 +332,12 @@ const rt = [
   "span",
   "svg",
   "ul"
-], B = rt.reduce((e, t) => {
-  const n = /* @__PURE__ */ T((o, s) => {
-    const { asChild: r, ...c } = o, a = r ? X : t;
+], G = ct.reduce((e, t) => {
+  const n = /* @__PURE__ */ S((o, s) => {
+    const { asChild: r, ...c } = o, a = r ? Z : t;
     return R(() => {
       window[Symbol.for("radix-ui")] = !0;
-    }, []), /* @__PURE__ */ g(a, y({}, c, {
+    }, []), /* @__PURE__ */ x(a, I({}, c, {
       ref: s
     }));
   });
@@ -346,11 +346,11 @@ const rt = [
     [t]: n
   };
 }, {});
-function ae(e) {
+function ie(e) {
   const t = P(e);
   return R(() => {
     t.current = e;
-  }), Z(
+  }), W(
     () => (...n) => {
       var o;
       return (o = t.current) === null || o === void 0 ? void 0 : o.call(t, ...n);
@@ -358,15 +358,15 @@ function ae(e) {
     []
   );
 }
-function ge({ prop: e, defaultProp: t, onChange: n = () => {
+function xe({ prop: e, defaultProp: t, onChange: n = () => {
 } }) {
-  const [o, s] = ot({
+  const [o, s] = st({
     defaultProp: t,
     onChange: n
-  }), r = e !== void 0, c = r ? e : o, a = ae(n), u = L((i) => {
+  }), r = e !== void 0, c = r ? e : o, a = ie(n), u = V((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);
   }, [
@@ -380,8 +380,8 @@ function ge({ prop: e, defaultProp: t, onChange: n = () => {
     u
   ];
 }
-function ot({ defaultProp: e, onChange: t }) {
-  const n = O(e), [o] = n, s = P(o), r = ae(t);
+function st({ defaultProp: e, onChange: t }) {
+  const n = D(e), [o] = n, s = P(o), r = ie(t);
   return R(() => {
     s.current !== o && (r(o), s.current = o);
   }, [
@@ -390,157 +390,157 @@ function ot({ defaultProp: e, onChange: t }) {
     r
   ]), n;
 }
-const ct = /* @__PURE__ */ te(void 0);
-function he(e) {
-  const t = $e(ct);
+const at = /* @__PURE__ */ ne(void 0);
+function Ce(e) {
+  const t = me(at);
   return e || t || "ltr";
 }
-const ee = "rovingFocusGroup.onEntryFocus", st = {
+const te = "rovingFocusGroup.onEntryFocus", it = {
   bubbles: !1,
   cancelable: !0
-}, ie = "RovingFocusGroup", [oe, xe, at] = et(ie), [it, Ie] = se(ie, [
-  at
-]), [ut, lt] = it(ie), dt = /* @__PURE__ */ T((e, t) => /* @__PURE__ */ g(oe.Provider, {
+}, 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__ */ g(oe.Slot, {
+}, /* @__PURE__ */ x(ce.Slot, {
   scope: e.__scopeRovingFocusGroup
-}, /* @__PURE__ */ g(ft, y({}, e, {
+}, /* @__PURE__ */ x(bt, I({}, e, {
   ref: t
-}))))), ft = /* @__PURE__ */ T((e, t) => {
-  const { __scopeRovingFocusGroup: n, orientation: o, loop: s = !1, dir: r, currentTabStopId: c, defaultCurrentTabStopId: a, onCurrentTabStopIdChange: u, onEntryFocus: i, ...f } = e, d = P(null), b = H(t, d), v = he(r), [l = null, $] = ge({
+}))))), bt = /* @__PURE__ */ S((e, t) => {
+  const { __scopeRovingFocusGroup: n, orientation: o, loop: s = !1, dir: r, currentTabStopId: c, defaultCurrentTabStopId: a, onCurrentTabStopIdChange: u, onEntryFocus: i, ...f } = e, l = P(null), $ = Y(t, l), v = Ce(r), [d = null, b] = xe({
     prop: c,
     defaultProp: a,
     onChange: u
-  }), [h, m] = O(!1), _ = ae(i), U = xe(n), S = P(!1), [j, G] = O(0);
+  }), [m, _] = D(!1), g = ie(i), F = Ie(n), T = P(!1), [q, z] = D(0);
   return R(() => {
-    const I = d.current;
-    if (I)
-      return I.addEventListener(ee, _), () => I.removeEventListener(ee, _);
+    const C = l.current;
+    if (C)
+      return C.addEventListener(te, g), () => C.removeEventListener(te, g);
   }, [
-    _
-  ]), /* @__PURE__ */ g(ut, {
+    g
+  ]), /* @__PURE__ */ x(dt, {
     scope: n,
     orientation: o,
     dir: v,
     loop: s,
-    currentTabStopId: l,
-    onItemFocus: L(
-      (I) => $(I),
+    currentTabStopId: d,
+    onItemFocus: V(
+      (C) => b(C),
       [
-        $
+        b
       ]
     ),
-    onItemShiftTab: L(
-      () => m(!0),
+    onItemShiftTab: V(
+      () => _(!0),
       []
     ),
-    onFocusableItemAdd: L(
-      () => G(
-        (I) => I + 1
+    onFocusableItemAdd: V(
+      () => z(
+        (C) => C + 1
       ),
       []
     ),
-    onFocusableItemRemove: L(
-      () => G(
-        (I) => I - 1
+    onFocusableItemRemove: V(
+      () => z(
+        (C) => C - 1
       ),
       []
     )
-  }, /* @__PURE__ */ g(B.div, y({
-    tabIndex: h || j === 0 ? -1 : 0,
+  }, /* @__PURE__ */ x(G.div, I({
+    tabIndex: m || q === 0 ? -1 : 0,
     "data-orientation": o
   }, f, {
-    ref: b,
+    ref: $,
     style: {
       outline: "none",
       ...e.style
     },
-    onMouseDown: M(e.onMouseDown, () => {
-      S.current = !0;
+    onMouseDown: O(e.onMouseDown, () => {
+      T.current = !0;
     }),
-    onFocus: M(e.onFocus, (I) => {
-      const k = !S.current;
-      if (I.target === I.currentTarget && k && !h) {
-        const V = new CustomEvent(ee, st);
-        if (I.currentTarget.dispatchEvent(V), !V.defaultPrevented) {
-          const z = U().filter(
-            (x) => x.focusable
-          ), J = z.find(
-            (x) => x.active
-          ), W = z.find(
-            (x) => x.id === l
-          ), C = [
+    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(
+            (h) => h.focusable
+          ), X = L.find(
+            (h) => h.active
+          ), J = L.find(
+            (h) => h.id === d
+          ), p = [
+            X,
             J,
-            W,
-            ...z
+            ...L
           ].filter(Boolean).map(
-            (x) => x.ref.current
+            (h) => h.ref.current
           );
-          Ce(C);
+          Se(p);
         }
       }
-      S.current = !1;
+      T.current = !1;
     }),
-    onBlur: M(
+    onBlur: O(
       e.onBlur,
-      () => m(!1)
+      () => _(!1)
     )
   })));
-}), pt = "RovingFocusGroupItem", bt = /* @__PURE__ */ T((e, t) => {
-  const { __scopeRovingFocusGroup: n, focusable: o = !0, active: s = !1, tabStopId: r, ...c } = e, a = _e(), u = r || a, i = lt(pt, n), f = i.currentTabStopId === u, d = xe(n), { onFocusableItemAdd: b, onFocusableItemRemove: v } = i;
+}), $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), f = i.currentTabStopId === u, l = Ie(n), { onFocusableItemAdd: $, onFocusableItemRemove: v } = i;
   return R(() => {
     if (o)
-      return b(), () => v();
+      return $(), () => v();
   }, [
     o,
-    b,
+    $,
     v
-  ]), /* @__PURE__ */ g(oe.ItemSlot, {
+  ]), /* @__PURE__ */ x(ce.ItemSlot, {
     scope: n,
     id: u,
     focusable: o,
     active: s
-  }, /* @__PURE__ */ g(B.span, y({
+  }, /* @__PURE__ */ x(G.span, I({
     tabIndex: f ? 0 : -1,
     "data-orientation": i.orientation
   }, c, {
     ref: t,
-    onMouseDown: M(e.onMouseDown, (l) => {
-      o ? i.onItemFocus(u) : l.preventDefault();
+    onMouseDown: O(e.onMouseDown, (d) => {
+      o ? i.onItemFocus(u) : d.preventDefault();
     }),
-    onFocus: M(
+    onFocus: O(
       e.onFocus,
       () => i.onItemFocus(u)
     ),
-    onKeyDown: M(e.onKeyDown, (l) => {
-      if (l.key === "Tab" && l.shiftKey) {
+    onKeyDown: O(e.onKeyDown, (d) => {
+      if (d.key === "Tab" && d.shiftKey) {
         i.onItemShiftTab();
         return;
       }
-      if (l.target !== l.currentTarget)
+      if (d.target !== d.currentTarget)
         return;
-      const $ = mt(l, i.orientation, i.dir);
-      if ($ !== void 0) {
-        l.preventDefault();
-        let m = d().filter(
-          (_) => _.focusable
+      const b = gt(d, i.orientation, i.dir);
+      if (b !== void 0) {
+        d.preventDefault();
+        let _ = l().filter(
+          (g) => g.focusable
         ).map(
-          (_) => _.ref.current
+          (g) => g.ref.current
         );
-        if ($ === "last")
-          m.reverse();
-        else if ($ === "prev" || $ === "next") {
-          $ === "prev" && m.reverse();
-          const _ = m.indexOf(l.currentTarget);
-          m = i.loop ? _t(m, _ + 1) : m.slice(_ + 1);
+        if (b === "last")
+          _.reverse();
+        else if (b === "prev" || b === "next") {
+          b === "prev" && _.reverse();
+          const g = _.indexOf(d.currentTarget);
+          _ = i.loop ? ht(_, g + 1) : _.slice(g + 1);
         }
         setTimeout(
-          () => Ce(m)
+          () => Se(_)
         );
       }
     })
   })));
-}), $t = {
+}), mt = {
   ArrowLeft: "prev",
   ArrowUp: "prev",
   ArrowRight: "next",
@@ -550,11 +550,11 @@ const ee = "rovingFocusGroup.onEntryFocus", st = {
   PageDown: "last",
   End: "last"
 };
-function vt(e, t) {
+function _t(e, t) {
   return t !== "rtl" ? e : e === "ArrowLeft" ? "ArrowRight" : e === "ArrowRight" ? "ArrowLeft" : e;
 }
-function mt(e, t, n) {
-  const o = vt(e.key, n);
+function gt(e, t, n) {
+  const o = _t(e.key, n);
   if (!(t === "vertical" && [
     "ArrowLeft",
     "ArrowRight"
@@ -562,37 +562,37 @@ function mt(e, t, n) {
     "ArrowUp",
     "ArrowDown"
   ].includes(o)))
-    return $t[o];
+    return mt[o];
 }
-function Ce(e) {
+function Se(e) {
   const t = document.activeElement;
   for (const n of e)
     if (n === t || (n.focus(), document.activeElement !== t))
       return;
 }
-function _t(e, t) {
+function ht(e, t) {
   return e.map(
     (n, o) => e[(t + o) % e.length]
   );
 }
-const gt = dt, ht = bt;
-function xt(e, t) {
-  return Fe((n, o) => {
+const xt = pt, Ct = vt;
+function It(e, t) {
+  return qe((n, o) => {
     const s = t[n][o];
     return s ?? n;
   }, e);
 }
-const ye = (e) => {
-  const { present: t, children: n } = e, o = It(t), s = typeof n == "function" ? n({
+const we = (e) => {
+  const { present: t, children: n } = e, o = yt(t), s = typeof n == "function" ? n({
     present: o.isPresent
-  }) : E.only(n), r = H(o.ref, s.ref);
-  return typeof n == "function" || o.isPresent ? /* @__PURE__ */ ce(s, {
+  }) : E.only(n), r = Y(o.ref, s.ref);
+  return typeof n == "function" || o.isPresent ? /* @__PURE__ */ se(s, {
     ref: r
   }) : null;
 };
-ye.displayName = "Presence";
-function It(e) {
-  const [t, n] = O(), o = P({}), s = P(e), r = P("none"), c = e ? "mounted" : "unmounted", [a, u] = xt(c, {
+we.displayName = "Presence";
+function yt(e) {
+  const [t, n] = D(), o = P({}), s = P(e), r = P("none"), c = e ? "mounted" : "unmounted", [a, u] = It(c, {
     mounted: {
       UNMOUNT: "unmounted",
       ANIMATION_OUT: "unmountSuspended"
@@ -606,28 +606,28 @@ function It(e) {
     }
   });
   return R(() => {
-    const i = Y(o.current);
+    const i = K(o.current);
     r.current = a === "mounted" ? i : "none";
   }, [
     a
-  ]), re(() => {
+  ]), oe(() => {
     const i = o.current, f = s.current;
     if (f !== e) {
-      const b = r.current, v = Y(i);
-      e ? u("MOUNT") : v === "none" || (i == null ? void 0 : i.display) === "none" ? u("UNMOUNT") : u(f && b !== v ? "ANIMATION_OUT" : "UNMOUNT"), s.current = e;
+      const $ = r.current, v = K(i);
+      e ? u("MOUNT") : v === "none" || (i == null ? void 0 : i.display) === "none" ? u("UNMOUNT") : u(f && $ !== v ? "ANIMATION_OUT" : "UNMOUNT"), s.current = e;
     }
   }, [
     e,
     u
-  ]), re(() => {
+  ]), oe(() => {
     if (t) {
-      const i = (d) => {
-        const v = Y(o.current).includes(d.animationName);
-        d.target === t && v && De(
+      const i = (l) => {
+        const v = K(o.current).includes(l.animationName);
+        l.target === t && v && Le(
           () => u("ANIMATION_END")
         );
-      }, f = (d) => {
-        d.target === t && (r.current = Y(o.current));
+      }, f = (l) => {
+        l.target === t && (r.current = K(o.current));
       };
       return t.addEventListener("animationstart", f), t.addEventListener("animationcancel", i), t.addEventListener("animationend", i), () => {
         t.removeEventListener("animationstart", f), t.removeEventListener("animationcancel", i), t.removeEventListener("animationend", i);
@@ -642,58 +642,58 @@ function It(e) {
       "mounted",
       "unmountSuspended"
     ].includes(a),
-    ref: L((i) => {
+    ref: V((i) => {
       i && (o.current = getComputedStyle(i)), n(i);
     }, [])
   };
 }
-function Y(e) {
+function K(e) {
   return (e == null ? void 0 : e.animationName) || "none";
 }
-const Se = "Tabs", [Ct, Qt] = se(Se, [
-  Ie
-]), we = Ie(), [yt, ue] = Ct(Se), St = /* @__PURE__ */ T((e, t) => {
-  const { __scopeTabs: n, value: o, onValueChange: s, defaultValue: r, orientation: c = "horizontal", dir: a, activationMode: u = "automatic", ...i } = e, f = he(a), [d, b] = ge({
+const Te = "Tabs", [St, tn] = ae(Te, [
+  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, f = Ce(a), [l, $] = xe({
     prop: o,
     onChange: s,
     defaultProp: r
   });
-  return /* @__PURE__ */ g(yt, {
+  return /* @__PURE__ */ x(wt, {
     scope: n,
-    baseId: _e(),
-    value: d,
-    onValueChange: b,
+    baseId: he(),
+    value: l,
+    onValueChange: $,
     orientation: c,
     dir: f,
     activationMode: u
-  }, /* @__PURE__ */ g(B.div, y({
+  }, /* @__PURE__ */ x(G.div, I({
     dir: f,
     "data-orientation": c
   }, i, {
     ref: t
   })));
-}), wt = "TabsList", Tt = /* @__PURE__ */ T((e, t) => {
-  const { __scopeTabs: n, loop: o = !0, ...s } = e, r = ue(wt, n), c = we(n);
-  return /* @__PURE__ */ g(gt, y({
+}), 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({
     asChild: !0
   }, c, {
     orientation: r.orientation,
     dir: r.dir,
     loop: o
-  }), /* @__PURE__ */ g(B.div, y({
+  }), /* @__PURE__ */ x(G.div, I({
     role: "tablist",
     "aria-orientation": r.orientation
   }, s, {
     ref: t
   })));
-}), Nt = "TabsTrigger", At = /* @__PURE__ */ T((e, t) => {
-  const { __scopeTabs: n, value: o, disabled: s = !1, ...r } = e, c = ue(Nt, n), a = we(n), u = Te(c.baseId, o), i = Ne(c.baseId, o), f = o === c.value;
-  return /* @__PURE__ */ g(ht, y({
+}), Et = "TabsTrigger", Rt = /* @__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), f = o === c.value;
+  return /* @__PURE__ */ x(Ct, I({
     asChild: !0
   }, a, {
     focusable: !s,
     active: f
-  }), /* @__PURE__ */ g(B.button, y({
+  }), /* @__PURE__ */ x(G.button, I({
     type: "button",
     role: "tab",
     "aria-selected": f,
@@ -704,60 +704,60 @@ const Se = "Tabs", [Ct, Qt] = se(Se, [
     id: u
   }, r, {
     ref: t,
-    onMouseDown: M(e.onMouseDown, (d) => {
-      !s && d.button === 0 && d.ctrlKey === !1 ? c.onValueChange(o) : d.preventDefault();
+    onMouseDown: O(e.onMouseDown, (l) => {
+      !s && l.button === 0 && l.ctrlKey === !1 ? c.onValueChange(o) : l.preventDefault();
     }),
-    onKeyDown: M(e.onKeyDown, (d) => {
+    onKeyDown: O(e.onKeyDown, (l) => {
       [
         " ",
         "Enter"
-      ].includes(d.key) && c.onValueChange(o);
+      ].includes(l.key) && c.onValueChange(o);
     }),
-    onFocus: M(e.onFocus, () => {
-      const d = c.activationMode !== "manual";
-      !f && !s && d && c.onValueChange(o);
+    onFocus: O(e.onFocus, () => {
+      const l = c.activationMode !== "manual";
+      !f && !s && l && c.onValueChange(o);
     })
   })));
-}), Et = "TabsContent", Rt = /* @__PURE__ */ T((e, t) => {
-  const { __scopeTabs: n, value: o, forceMount: s, children: r, ...c } = e, a = ue(Et, n), u = Te(a.baseId, o), i = Ne(a.baseId, o), f = o === a.value, d = P(f);
+}), Pt = "TabsContent", Mt = /* @__PURE__ */ S((e, t) => {
+  const { __scopeTabs: n, value: o, forceMount: s, children: r, ...c } = e, a = le(Pt, n), u = Ae(a.baseId, o), i = Ee(a.baseId, o), f = o === a.value, l = P(f);
   return R(() => {
-    const b = requestAnimationFrame(
-      () => d.current = !1
+    const $ = requestAnimationFrame(
+      () => l.current = !1
     );
-    return () => cancelAnimationFrame(b);
-  }, []), /* @__PURE__ */ g(
-    ye,
+    return () => cancelAnimationFrame($);
+  }, []), /* @__PURE__ */ x(
+    we,
     {
       present: s || f
     },
-    ({ present: b }) => /* @__PURE__ */ g(B.div, y({
+    ({ present: $ }) => /* @__PURE__ */ x(G.div, I({
       "data-state": f ? "active" : "inactive",
       "data-orientation": a.orientation,
       role: "tabpanel",
       "aria-labelledby": u,
-      hidden: !b,
+      hidden: !$,
       id: i,
       tabIndex: 0
     }, c, {
       ref: t,
       style: {
         ...e.style,
-        animationDuration: d.current ? "0s" : void 0
+        animationDuration: l.current ? "0s" : void 0
       }
-    }), b && r)
+    }), $ && r)
   );
 });
-function Te(e, t) {
+function Ae(e, t) {
   return `${e}-trigger-${t}`;
 }
-function Ne(e, t) {
+function Ee(e, t) {
   return `${e}-content-${t}`;
 }
-const Pt = St, Mt = Tt, Ot = At, Ft = Rt;
-function Dt(e) {
+const Ot = Tt, Ft = At, Dt = Rt, qt = Mt;
+function Lt(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var Ae = { exports: {} };
+var Re = { exports: {} };
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
@@ -792,43 +792,51 @@ var Ae = { exports: {} };
     }
     e.exports ? (n.default = n, e.exports = n) : window.classNames = n;
   })();
-})(Ae);
-var qt = Ae.exports;
-const le = /* @__PURE__ */ Dt(qt), Lt = {
+})(Re);
+var Ut = Re.exports;
+const de = /* @__PURE__ */ Lt(Ut), Vt = {
   "purpur-tab-content": "_purpur-tab-content_rbfjg_1"
-}, Ut = le.bind(Lt), Vt = "purpur-tab-content", Bt = T(
-  ({ children: e, tabId: t, "data-testid": n, className: o, ...s }, r) => /* @__PURE__ */ N(
-    Ft,
+}, 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: Ut([Vt, o]),
+      className: Bt([jt, o]),
       "data-testid": n,
       value: t,
       ...s,
       children: e
     }
   )
-), jt = (e) => !!e && K(e) && !!e.props.name && !!e.props.tabId, Gt = {
+), kt = (e) => !!e && k(e) && !!e.props.name && !!e.props.tabId, zt = {
   "purpur-tab-header": "_purpur-tab-header_ls5xt_1",
   "purpur-tab-header--contained": "_purpur-tab-header--contained_ls5xt_32",
   "purpur-tab-header--contained-negative": "_purpur-tab-header--contained-negative_ls5xt_32",
   "purpur-tab-header--line": "_purpur-tab-header--line_ls5xt_35",
   "purpur-tab-header--line-negative": "_purpur-tab-header--line-negative_ls5xt_47"
-}, kt = le.bind(Gt), pe = "purpur-tab-header", zt = T(
-  ({ index: e, tabId: t, variant: n, onFocus: o, "data-testid": s, children: r }, c) => /* @__PURE__ */ N(
-    Ot,
+}, Kt = de.bind(zt), $e = "purpur-tab-header", Wt = S(
+  ({
+    index: e,
+    tabId: t,
+    variant: n,
+    negative: o,
+    onFocus: s,
+    "data-testid": r,
+    children: c
+  }, a) => /* @__PURE__ */ w(
+    Dt,
     {
       id: `${t}-trigger`,
-      className: kt([pe, `${pe}--${n}`]),
+      className: Kt([$e, `${$e}--${n}${o ? "-negative" : ""}`]),
       value: t,
-      "data-testid": s,
+      "data-testid": r,
       "data-index": e,
-      ref: c,
-      onFocus: o,
-      children: r
+      ref: a,
+      onFocus: s,
+      children: c
     }
   )
-), Kt = {
+), Yt = {
   "purpur-tabs__wrapper": "_purpur-tabs__wrapper_1dpqy_1",
   "purpur-tabs__scroll-button": "_purpur-tabs__scroll-button_1dpqy_9",
   "purpur-tabs__scroll-button--left": "_purpur-tabs__scroll-button--left_1dpqy_63",
@@ -843,147 +851,149 @@ const le = /* @__PURE__ */ Dt(qt), Lt = {
   "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"
-}, en = ["line", "line-negative", "contained", "contained-negative"], Wt = (e) => new CustomEvent("tabChangeDetail", { detail: { value: e } }), q = le.bind(Kt), w = "purpur-tabs", Yt = (e, t) => {
+}, nn = ["line", "contained"], Zt = (e) => new CustomEvent("tabChangeDetail", { detail: { value: e } }), U = de.bind(Yt), y = "purpur-tabs", Ht = (e, t) => {
   var u;
   if (typeof (e == null ? void 0 : e.getBoundingClientRect) != "function" || typeof (t == null ? void 0 : t.scroll) != "function")
     return;
   const n = e.getBoundingClientRect(), o = t.getBoundingClientRect(), s = t.clientWidth, r = parseInt((u = getComputedStyle(t).borderLeftWidth) == null ? void 0 : u.split("px")[0], 10), c = o.left + (isNaN(r) ? 0 : r);
   let a;
   n.right > o.right && (a = n.left + t.scrollLeft, a = a + n.width - s + s * 0.1, a = a - c), n.left < o.left && (a = n.left + t.scrollLeft, a = a - s * 0.1, a = a - c), a !== void 0 && t.scroll({ left: a, behavior: "smooth" });
-}, Zt = ({
+}, Xt = ({
   children: e,
   variant: t = "line",
-  fullWidth: n = !1,
-  onChange: o,
-  className: s,
-  defaultValue: r,
-  "data-testid": c,
-  ...a
+  negative: n = !1,
+  fullWidth: o = !1,
+  onChange: s,
+  className: r,
+  defaultValue: c,
+  "data-testid": a,
+  ...u
 }) => {
-  const [u, i] = O({}), [f, d] = O(0), [b, v] = O(0), l = E.toArray(e).filter(jt), $ = P(), h = P(new Array(l.length)), m = 200, _ = t === "line" || t === "line-negative", U = q([
-    w,
-    `${w}--${t}`,
-    { [`${w}--fullWidth`]: n },
-    s
-  ]), S = E.map(l, ({ props: { tabId: p } }) => p), j = () => S.findIndex((p) => p === r) || 0, [G, I] = O(j);
-  if (new Set(S).size !== S.length)
+  const [i, f] = D({}), [l, $] = D(0), [v, d] = D(0), b = E.toArray(e).filter(kt), m = P(), _ = P(new Array(b.length)), g = 200, F = t === "line", T = U([
+    y,
+    `${y}--${t}${n ? "-negative" : ""}`,
+    { [`${y}--fullWidth`]: o },
+    r
+  ]), q = E.map(b, ({ props: { tabId: p } }) => p), z = () => q.findIndex((p) => p === c) || 0, [C, H] = D(z);
+  if (new Set(q).size !== q.length)
     throw new Error("tabId must be unique");
-  const k = (p, C) => C || c ? `${C || c}-${p}` : void 0, V = () => {
-    if (!_)
+  const B = (p, h) => h || a ? `${h || a}-${p}` : void 0, L = () => {
+    if (!F)
       return;
-    const p = h.current[G];
-    d((p == null ? void 0 : p.offsetLeft) || 0), v((p == null ? void 0 : p.getBoundingClientRect().width) || 0);
-  }, z = (p) => {
-    _ && I(l.findIndex((C) => C.props.tabId === p)), o == null || o(Wt(p));
+    const p = _.current[C];
+    $((p == null ? void 0 : p.offsetLeft) || 0), d((p == null ? void 0 : p.getBoundingClientRect().width) || 0);
+  }, X = (p) => {
+    F && H(b.findIndex((h) => h.props.tabId === p)), s == null || s(Zt(p));
   }, J = (p) => {
-    if ($ != null && $.current) {
-      const { scrollLeft: C } = $.current, x = p === "left" ? -m : m;
-      $.current.scroll({ left: C + x, behavior: "smooth" });
+    if (m != null && m.current) {
+      const { scrollLeft: h } = m.current, j = p === "left" ? -g : g;
+      m.current.scroll({ left: h + j, behavior: "smooth" });
     }
-  }, W = ({ side: p }) => /* @__PURE__ */ N(
+  }, Q = ({ side: p }) => /* @__PURE__ */ w(
     "button",
     {
-      className: q(`${w}__scroll-button`, `${w}__scroll-button--${p}`),
+      className: U(`${y}__scroll-button`, `${y}__scroll-button--${p}`),
       onClick: () => J(p),
       type: "button",
       "aria-hidden": "true",
       tabIndex: -1,
-      "data-testid": k("scroll-button"),
-      children: /* @__PURE__ */ N(Ye, { svg: p === "left" ? Be : je, size: "md" })
+      "data-testid": B("scroll-button"),
+      children: /* @__PURE__ */ w(He, { svg: p === "left" ? Ge : ke, size: "md" })
     }
   );
-  return R(() => (window.addEventListener("resize", V), () => {
-    window.removeEventListener("resize", V);
+  return R(() => (window.addEventListener("resize", L), () => {
+    window.removeEventListener("resize", L);
   }), []), R(() => {
-    V();
-  }, [G, n, l, t]), R(() => {
-    const p = (x) => {
-      if (x.every((F) => F.isIntersecting) && x.length === l.length) {
-        i({});
+    L();
+  }, [C, o, b.length, t]), R(() => {
+    const p = (M) => {
+      if (M.every((N) => N.isIntersecting) && M.length === b.length) {
+        f({});
         return;
       }
-      x.forEach((F) => {
-        const D = Number(F.target.getAttribute("data-index")), Ee = D === 0, Re = D === l.length - 1;
-        i((Pe) => ({
-          ...Pe,
-          ...Ee && {
-            [`${w}__wrapper--scroll-end`]: !F.isIntersecting
+      M.forEach((N) => {
+        const pe = Number(N.target.getAttribute("data-index")), Pe = pe === 0, Me = pe === b.length - 1;
+        f((Oe) => ({
+          ...Oe,
+          ...Pe && {
+            [`${y}__wrapper--scroll-end`]: !N.isIntersecting
           },
-          ...Re && {
-            [`${w}__wrapper--scroll-start`]: !F.isIntersecting
+          ...Me && {
+            [`${y}__wrapper--scroll-start`]: !N.isIntersecting
           }
         }));
       });
-    }, C = new IntersectionObserver(p, {
+    }, h = new IntersectionObserver(p, {
       threshold: [0.99],
-      root: $.current
-    });
-    return h.current.forEach((x) => C.observe(x)), () => {
-      h.current.forEach((x) => C.unobserve(x));
+      root: m.current
+    }), j = _.current;
+    return j.forEach((M) => h.observe(M)), () => {
+      j.forEach((M) => h.unobserve(M));
     };
-  }, [l.length]), /* @__PURE__ */ N(
-    Pt,
+  }, [b.length]), /* @__PURE__ */ w(
+    Ot,
     {
-      defaultValue: r ?? l[0].props.tabId,
-      onValueChange: z,
-      "data-testid": c,
-      className: U,
-      ...a,
-      children: /* @__PURE__ */ Q("div", { className: q(`${w}__container`), children: [
-        /* @__PURE__ */ Q("div", { className: q([`${w}__wrapper`, u]), children: [
-          /* @__PURE__ */ Q(
-            Mt,
+      defaultValue: c ?? b[0].props.tabId,
+      onValueChange: X,
+      "data-testid": a,
+      className: T,
+      ...u,
+      children: /* @__PURE__ */ ee("div", { className: U(`${y}__container`), children: [
+        /* @__PURE__ */ ee("div", { className: U([`${y}__wrapper`, i]), children: [
+          /* @__PURE__ */ ee(
+            Ft,
             {
               ref: (p) => {
-                $.current = p;
+                m.current = p;
               },
-              className: q(`${w}__list`),
+              className: U(`${y}__list`),
               children: [
-                E.map(l, (p, C) => {
-                  const { name: x, tabId: de, "data-testid": F } = p.props;
-                  return /* @__PURE__ */ N(
-                    zt,
+                E.map(b, (p, h) => {
+                  const { name: j, tabId: M, "data-testid": fe } = p.props;
+                  return /* @__PURE__ */ w(
+                    Wt,
                     {
-                      "data-testid": k("header", F),
-                      index: C,
-                      tabId: de,
-                      ref: (D) => {
-                        D && (h.current[C] = D);
+                      "data-testid": B("header", fe),
+                      index: h,
+                      tabId: M,
+                      ref: (N) => {
+                        N && (_.current[h] = N);
                       },
-                      onFocus: (D) => {
-                        Yt(D.target, $.current);
+                      onFocus: (N) => {
+                        Ht(N.target, m.current);
                       },
                       variant: t,
-                      children: x
+                      negative: n,
+                      children: j
                     }
                   );
                 }),
-                _ && /* @__PURE__ */ N(
+                F && /* @__PURE__ */ w(
                   "div",
                   {
-                    className: q(`${w}__selected-border`),
+                    className: U(`${y}__selected-border`),
                     style: {
-                      width: b,
-                      transform: `translateX(${f}px)`
+                      width: v,
+                      transform: `translateX(${l}px)`
                     },
-                    "data-testid": k("selected-border")
+                    "data-testid": B("selected-border")
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ N(W, { side: "left" }),
-          /* @__PURE__ */ N(W, { side: "right" })
+          /* @__PURE__ */ w(Q, { side: "left" }),
+          /* @__PURE__ */ w(Q, { side: "right" })
         ] }),
-        /* @__PURE__ */ N("div", { className: q(`${w}__content-container`), children: E.map(l, (p) => p) })
+        /* @__PURE__ */ w("div", { className: U(`${y}__content-container`), children: E.map(b, (p) => p) })
       ] })
     }
   );
 };
-Zt.Content = Bt;
+Xt.Content = Gt;
 export {
-  Zt as Tabs,
-  Wt as createTabChangeDetailEvent,
-  en as tabsVariants
+  Xt as Tabs,
+  Zt as createTabChangeDetailEvent,
+  nn as tabsVariants
 };
 //# sourceMappingURL=tabs.es.js.map