@purpurds/tabs 6.12.0 → 6.12.1

package/dist/tabs.es.js

@@ -1,19 +1,19 @@
-import { jsx as m, Fragment as Ge, jsxs as X } from "react/jsx-runtime";
+import { jsx as m, Fragment as ze, jsxs as J } from "react/jsx-runtime";
 import * as a from "react";
-import P, { forwardRef as ge, isValidElement as We, useState as B, Children as U, useRef as ue, useEffect as j } from "react";
+import F, { forwardRef as ye, isValidElement as Ye, useRef as Q, useState as B, Children as k, useEffect as K } from "react";
 import "react-dom";
-function ke(e) {
+function Ze(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var le = { exports: {} };
+var pe = { exports: {} };
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
 	http://jedwatson.github.io/classnames
 */
-var de;
-function Ke() {
-  return de || (de = 1, function(e) {
+var me;
+function He() {
+  return me || (me = 1, function(e) {
     (function() {
       var t = {}.hasOwnProperty;
       function n() {
@@ -42,10 +42,10 @@ function Ke() {
       }
       e.exports ? (n.default = n, e.exports = n) : window.classNames = n;
     })();
-  }(le)), le.exports;
+  }(pe)), pe.exports;
 }
-var ze = Ke();
-const Ye = /* @__PURE__ */ ke(ze), Ze = {
+var Xe = He();
+const Je = /* @__PURE__ */ Ze(Xe), Qe = {
   "purpur-icon": "_purpur-icon_8u1lq_1",
   "purpur-icon--xxs": "_purpur-icon--xxs_8u1lq_4",
   "purpur-icon--xs": "_purpur-icon--xs_8u1lq_8",
@@ -53,26 +53,26 @@ const Ye = /* @__PURE__ */ ke(ze), Ze = {
   "purpur-icon--md": "_purpur-icon--md_8u1lq_16",
   "purpur-icon--lg": "_purpur-icon--lg_8u1lq_20",
   "purpur-icon--xl": "_purpur-icon--xl_8u1lq_24"
-}, Xe = Ye.bind(Ze), fe = "purpur-icon", Je = "md", Qe = (e) => e.filter((t) => Object.keys(t).length >= 1).map((t) => `${t.name}="${t.value}"`).join(" "), He = ({ content: e = "", title: t } = {}) => {
+}, et = Je.bind(Qe), ge = "purpur-icon", tt = "md", nt = (e) => e.filter((t) => Object.keys(t).length >= 1).map((t) => `${t.name}="${t.value}"`).join(" "), rt = ({ 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 ${Qe(n)}>${o}${e}</svg>`;
-}, et = (e) => e.replace(/<(\/?)svg([^>]*)>/g, "").trim(), be = ({
+  return `<svg ${nt(n)}>${o}${e}</svg>`;
+}, ot = (e) => e.replace(/<(\/?)svg([^>]*)>/g, "").trim(), we = ({
   ["data-testid"]: e,
   svg: t,
   allyTitle: n,
   className: o,
-  size: s = Je,
+  size: s = tt,
   ...r
 }) => {
-  const i = He({
-    content: et(t.svg),
+  const i = rt({
+    content: ot(t.svg),
     title: n
-  }), c = Xe(o, fe, `${fe}--${s}`);
+  }), c = et(o, ge, `${ge}--${s}`);
   return /* @__PURE__ */ m(
     "span",
     {
@@ -84,57 +84,57 @@ const Ye = /* @__PURE__ */ ke(ze), Ze = {
     }
   );
 };
-be.displayName = "Icon";
-const tt = {
+we.displayName = "Icon";
+const st = {
   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"
-}, nt = {
+}, it = {
   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"
 };
-function x(e, t, { checkForDefaultPrevented: n = !0 } = {}) {
+function A(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 ne(e, t = []) {
+function se(e, t = []) {
   let n = [];
   function o(r, i) {
-    const c = a.createContext(i), u = n.length;
+    const c = a.createContext(i), l = n.length;
     n = [...n, i];
-    const l = (d) => {
-      var _;
-      const { scope: g, children: h, ...f } = d, y = ((_ = g == null ? void 0 : g[e]) == null ? void 0 : _[u]) || c, b = a.useMemo(() => f, Object.values(f));
-      return /* @__PURE__ */ m(y.Provider, { value: b, children: h });
+    const u = (d) => {
+      var h;
+      const { scope: _, children: v, ...f } = d, b = ((h = _ == null ? void 0 : _[e]) == null ? void 0 : h[l]) || c, C = a.useMemo(() => f, Object.values(f));
+      return /* @__PURE__ */ m(b.Provider, { value: C, children: v });
     };
-    l.displayName = r + "Provider";
-    function v(d, g) {
-      var y;
-      const h = ((y = g == null ? void 0 : g[e]) == null ? void 0 : y[u]) || c, f = a.useContext(h);
+    u.displayName = r + "Provider";
+    function g(d, _) {
+      var b;
+      const v = ((b = _ == null ? void 0 : _[e]) == null ? void 0 : b[l]) || c, f = a.useContext(v);
       if (f) return f;
       if (i !== void 0) return i;
       throw new Error(`\`${d}\` must be used within \`${r}\``);
     }
-    return [l, v];
+    return [u, g];
   }
   const s = () => {
     const r = n.map((i) => a.createContext(i));
     return function(c) {
-      const u = (c == null ? void 0 : c[e]) || r;
+      const l = (c == null ? void 0 : c[e]) || r;
       return a.useMemo(
-        () => ({ [`__scope${e}`]: { ...c, [e]: u } }),
-        [c, u]
+        () => ({ [`__scope${e}`]: { ...c, [e]: l } }),
+        [c, l]
       );
     };
   };
-  return s.scopeName = e, [o, rt(s, ...t)];
+  return s.scopeName = e, [o, ct(s, ...t)];
 }
-function rt(...e) {
+function ct(...e) {
   const t = e[0];
   if (e.length === 1) return t;
   const n = () => {
@@ -143,8 +143,8 @@ function rt(...e) {
       scopeName: s.scopeName
     }));
     return function(r) {
-      const i = o.reduce((c, { useScope: u, scopeName: l }) => {
-        const d = u(r)[`__scope${l}`];
+      const i = o.reduce((c, { useScope: l, scopeName: u }) => {
+        const d = l(r)[`__scope${u}`];
         return { ...c, ...d };
       }, {});
       return a.useMemo(() => ({ [`__scope${t.scopeName}`]: i }), [i]);
@@ -152,53 +152,53 @@ function rt(...e) {
   };
   return n.scopeName = t.scopeName, n;
 }
-function pe(e, t) {
+function _e(e, t) {
   if (typeof e == "function")
     return e(t);
   e != null && (e.current = t);
 }
-function he(...e) {
+function Ce(...e) {
   return (t) => {
     let n = !1;
     const o = e.map((s) => {
-      const r = pe(s, t);
+      const r = _e(s, t);
       return !n && typeof r == "function" && (n = !0), r;
     });
     if (n)
       return () => {
         for (let s = 0; s < o.length; s++) {
           const r = o[s];
-          typeof r == "function" ? r() : pe(e[s], null);
+          typeof r == "function" ? r() : _e(e[s], null);
         }
       };
   };
 }
-function W(...e) {
-  return a.useCallback(he(...e), e);
+function Y(...e) {
+  return a.useCallback(Ce(...e), e);
 }
-var k = a.forwardRef((e, t) => {
-  const { children: n, ...o } = e, s = a.Children.toArray(n), r = s.find(st);
+var Z = a.forwardRef((e, t) => {
+  const { children: n, ...o } = e, s = a.Children.toArray(n), r = s.find(ut);
   if (r) {
-    const i = r.props.children, c = s.map((u) => u === r ? a.Children.count(i) > 1 ? a.Children.only(null) : a.isValidElement(i) ? i.props.children : null : u);
-    return /* @__PURE__ */ m(H, { ...o, ref: t, children: a.isValidElement(i) ? a.cloneElement(i, void 0, c) : null });
+    const i = r.props.children, c = s.map((l) => l === r ? a.Children.count(i) > 1 ? a.Children.only(null) : a.isValidElement(i) ? i.props.children : null : l);
+    return /* @__PURE__ */ m(ne, { ...o, ref: t, children: a.isValidElement(i) ? a.cloneElement(i, void 0, c) : null });
   }
-  return /* @__PURE__ */ m(H, { ...o, ref: t, children: n });
+  return /* @__PURE__ */ m(ne, { ...o, ref: t, children: n });
 });
-k.displayName = "Slot";
-var H = a.forwardRef((e, t) => {
+Z.displayName = "Slot";
+var ne = a.forwardRef((e, t) => {
   const { children: n, ...o } = e;
   if (a.isValidElement(n)) {
-    const s = ct(n), r = it(o, n.props);
-    return n.type !== a.Fragment && (r.ref = t ? he(t, s) : s), a.cloneElement(n, r);
+    const s = dt(n), r = lt(o, n.props);
+    return n.type !== a.Fragment && (r.ref = t ? Ce(t, s) : s), a.cloneElement(n, r);
   }
   return a.Children.count(n) > 1 ? a.Children.only(null) : null;
 });
-H.displayName = "SlotClone";
-var ot = ({ children: e }) => /* @__PURE__ */ m(Ge, { children: e });
-function st(e) {
-  return a.isValidElement(e) && e.type === ot;
+ne.displayName = "SlotClone";
+var at = ({ children: e }) => /* @__PURE__ */ m(ze, { children: e });
+function ut(e) {
+  return a.isValidElement(e) && e.type === at;
 }
-function it(e, t) {
+function lt(e, t) {
   const n = { ...t };
   for (const o in t) {
     const s = e[o], r = t[o];
@@ -208,61 +208,61 @@ function it(e, t) {
   }
   return { ...e, ...n };
 }
-function ct(e) {
+function dt(e) {
   var o, s;
   let t = (o = Object.getOwnPropertyDescriptor(e.props, "ref")) == null ? void 0 : o.get, n = t && "isReactWarning" in t && t.isReactWarning;
   return n ? e.ref : (t = (s = Object.getOwnPropertyDescriptor(e, "ref")) == null ? void 0 : s.get, n = t && "isReactWarning" in t && t.isReactWarning, n ? e.props.ref : e.props.ref || e.ref);
 }
-function at(e) {
-  const t = e + "CollectionProvider", [n, o] = ne(t), [s, r] = n(
+function ft(e) {
+  const t = e + "CollectionProvider", [n, o] = se(t), [s, r] = n(
     t,
     { collectionRef: { current: null }, itemMap: /* @__PURE__ */ new Map() }
-  ), i = (h) => {
-    const { scope: f, children: y } = h, b = P.useRef(null), _ = P.useRef(/* @__PURE__ */ new Map()).current;
-    return /* @__PURE__ */ m(s, { scope: f, itemMap: _, collectionRef: b, children: y });
+  ), i = (v) => {
+    const { scope: f, children: b } = v, C = F.useRef(null), h = F.useRef(/* @__PURE__ */ new Map()).current;
+    return /* @__PURE__ */ m(s, { scope: f, itemMap: h, collectionRef: C, children: b });
   };
   i.displayName = t;
-  const c = e + "CollectionSlot", u = P.forwardRef(
-    (h, f) => {
-      const { scope: y, children: b } = h, _ = r(c, y), w = W(f, _.collectionRef);
-      return /* @__PURE__ */ m(k, { ref: w, children: b });
+  const c = e + "CollectionSlot", l = F.forwardRef(
+    (v, f) => {
+      const { scope: b, children: C } = v, h = r(c, b), y = Y(f, h.collectionRef);
+      return /* @__PURE__ */ m(Z, { ref: y, children: C });
     }
   );
-  u.displayName = c;
-  const l = e + "CollectionItemSlot", v = "data-radix-collection-item", d = P.forwardRef(
-    (h, f) => {
-      const { scope: y, children: b, ..._ } = h, w = P.useRef(null), E = W(f, w), N = r(l, y);
-      return P.useEffect(() => (N.itemMap.set(w, { ref: w, ..._ }), () => void N.itemMap.delete(w))), /* @__PURE__ */ m(k, { [v]: "", ref: E, children: b });
+  l.displayName = c;
+  const u = e + "CollectionItemSlot", g = "data-radix-collection-item", d = F.forwardRef(
+    (v, f) => {
+      const { scope: b, children: C, ...h } = v, y = F.useRef(null), M = Y(f, y), w = r(u, b);
+      return F.useEffect(() => (w.itemMap.set(y, { ref: y, ...h }), () => void w.itemMap.delete(y))), /* @__PURE__ */ m(Z, { [g]: "", ref: M, children: C });
     }
   );
-  d.displayName = l;
-  function g(h) {
-    const f = r(e + "CollectionConsumer", h);
-    return P.useCallback(() => {
-      const b = f.collectionRef.current;
-      if (!b) return [];
-      const _ = Array.from(b.querySelectorAll(`[${v}]`));
+  d.displayName = u;
+  function _(v) {
+    const f = r(e + "CollectionConsumer", v);
+    return F.useCallback(() => {
+      const C = f.collectionRef.current;
+      if (!C) return [];
+      const h = Array.from(C.querySelectorAll(`[${g}]`));
       return Array.from(f.itemMap.values()).sort(
-        (N, A) => _.indexOf(N.ref.current) - _.indexOf(A.ref.current)
+        (w, N) => h.indexOf(w.ref.current) - h.indexOf(N.ref.current)
       );
     }, [f.collectionRef, f.itemMap]);
   }
   return [
-    { Provider: i, Slot: u, ItemSlot: d },
-    g,
+    { Provider: i, Slot: l, ItemSlot: d },
+    _,
     o
   ];
 }
-var ee = globalThis != null && globalThis.document ? a.useLayoutEffect : () => {
-}, ut = a.useId || (() => {
-}), lt = 0;
-function ye(e) {
-  const [t, n] = a.useState(ut());
-  return ee(() => {
-    n((o) => o ?? String(lt++));
+var re = globalThis != null && globalThis.document ? a.useLayoutEffect : () => {
+}, pt = a.useId || (() => {
+}), mt = 0;
+function Ie(e) {
+  const [t, n] = a.useState(pt());
+  return re(() => {
+    n((o) => o ?? String(mt++));
   }, [e]), t ? `radix-${t}` : "";
 }
-var dt = [
+var gt = [
   "a",
   "button",
   "div",
@@ -279,14 +279,14 @@ var dt = [
   "span",
   "svg",
   "ul"
-], D = dt.reduce((e, t) => {
+], D = gt.reduce((e, t) => {
   const n = a.forwardRef((o, s) => {
-    const { asChild: r, ...i } = o, c = r ? k : t;
+    const { asChild: r, ...i } = o, c = r ? Z : t;
     return typeof window < "u" && (window[Symbol.for("radix-ui")] = !0), /* @__PURE__ */ m(c, { ...i, ref: s });
   });
   return n.displayName = `Primitive.${t}`, { ...e, [t]: n };
 }, {});
-function re(e) {
+function ie(e) {
   const t = a.useRef(e);
   return a.useEffect(() => {
     t.current = e;
@@ -295,46 +295,46 @@ function re(e) {
     return (o = t.current) == null ? void 0 : o.call(t, ...n);
   }, []);
 }
-function Ce({
+function Se({
   prop: e,
   defaultProp: t,
   onChange: n = () => {
   }
 }) {
-  const [o, s] = ft({ defaultProp: t, onChange: n }), r = e !== void 0, i = r ? e : o, c = re(n), u = a.useCallback(
-    (l) => {
+  const [o, s] = _t({ defaultProp: t, onChange: n }), r = e !== void 0, i = r ? e : o, c = ie(n), l = a.useCallback(
+    (u) => {
       if (r) {
-        const d = typeof l == "function" ? l(e) : l;
+        const d = typeof u == "function" ? u(e) : u;
         d !== e && c(d);
       } else
-        s(l);
+        s(u);
     },
     [r, e, s, c]
   );
-  return [i, u];
+  return [i, l];
 }
-function ft({
+function _t({
   defaultProp: e,
   onChange: t
 }) {
-  const n = a.useState(e), [o] = n, s = a.useRef(o), r = re(t);
+  const n = a.useState(e), [o] = n, s = a.useRef(o), r = ie(t);
   return a.useEffect(() => {
     s.current !== o && (r(o), s.current = o);
   }, [o, s, r]), n;
 }
-var pt = a.createContext(void 0);
-function we(e) {
-  const t = a.useContext(pt);
+var vt = a.createContext(void 0);
+function Ne(e) {
+  const t = a.useContext(vt);
   return e || t || "ltr";
 }
-var J = "rovingFocusGroup.onEntryFocus", mt = { bubbles: !1, cancelable: !0 }, K = "RovingFocusGroup", [te, Ie, _t] = at(K), [vt, Se] = ne(
-  K,
-  [_t]
-), [gt, bt] = vt(K), Ne = a.forwardRef(
-  (e, t) => /* @__PURE__ */ m(te.Provider, { scope: e.__scopeRovingFocusGroup, children: /* @__PURE__ */ m(te.Slot, { scope: e.__scopeRovingFocusGroup, children: /* @__PURE__ */ m(ht, { ...e, ref: t }) }) })
+var ee = "rovingFocusGroup.onEntryFocus", bt = { bubbles: !1, cancelable: !0 }, H = "RovingFocusGroup", [oe, Re, ht] = ft(H), [yt, Te] = se(
+  H,
+  [ht]
+), [wt, Ct] = yt(H), xe = a.forwardRef(
+  (e, t) => /* @__PURE__ */ m(oe.Provider, { scope: e.__scopeRovingFocusGroup, children: /* @__PURE__ */ m(oe.Slot, { scope: e.__scopeRovingFocusGroup, children: /* @__PURE__ */ m(It, { ...e, ref: t }) }) })
 );
-Ne.displayName = K;
-var ht = a.forwardRef((e, t) => {
+xe.displayName = H;
+var It = a.forwardRef((e, t) => {
   const {
     __scopeRovingFocusGroup: n,
     orientation: o,
@@ -342,70 +342,70 @@ var ht = a.forwardRef((e, t) => {
     dir: r,
     currentTabStopId: i,
     defaultCurrentTabStopId: c,
-    onCurrentTabStopIdChange: u,
-    onEntryFocus: l,
-    preventScrollOnEntryFocus: v = !1,
+    onCurrentTabStopIdChange: l,
+    onEntryFocus: u,
+    preventScrollOnEntryFocus: g = !1,
     ...d
-  } = e, g = a.useRef(null), h = W(t, g), f = we(r), [y = null, b] = Ce({
+  } = e, _ = a.useRef(null), v = Y(t, _), f = Ne(r), [b = null, C] = Se({
     prop: i,
     defaultProp: c,
-    onChange: u
-  }), [_, w] = a.useState(!1), E = re(l), N = Ie(n), A = a.useRef(!1), [q, L] = a.useState(0);
+    onChange: l
+  }), [h, y] = a.useState(!1), M = ie(u), w = Re(n), N = a.useRef(!1), [q, U] = a.useState(0);
   return a.useEffect(() => {
-    const I = g.current;
+    const I = _.current;
     if (I)
-      return I.addEventListener(J, E), () => I.removeEventListener(J, E);
-  }, [E]), /* @__PURE__ */ m(
-    gt,
+      return I.addEventListener(ee, M), () => I.removeEventListener(ee, M);
+  }, [M]), /* @__PURE__ */ m(
+    wt,
     {
       scope: n,
       orientation: o,
       dir: f,
       loop: s,
-      currentTabStopId: y,
+      currentTabStopId: b,
       onItemFocus: a.useCallback(
-        (I) => b(I),
-        [b]
+        (I) => C(I),
+        [C]
       ),
-      onItemShiftTab: a.useCallback(() => w(!0), []),
+      onItemShiftTab: a.useCallback(() => y(!0), []),
       onFocusableItemAdd: a.useCallback(
-        () => L((I) => I + 1),
+        () => U((I) => I + 1),
         []
       ),
       onFocusableItemRemove: a.useCallback(
-        () => L((I) => I - 1),
+        () => U((I) => I - 1),
         []
       ),
       children: /* @__PURE__ */ m(
         D.div,
         {
-          tabIndex: _ || q === 0 ? -1 : 0,
+          tabIndex: h || q === 0 ? -1 : 0,
           "data-orientation": o,
           ...d,
-          ref: h,
+          ref: v,
           style: { outline: "none", ...e.style },
-          onMouseDown: x(e.onMouseDown, () => {
-            A.current = !0;
+          onMouseDown: A(e.onMouseDown, () => {
+            N.current = !0;
           }),
-          onFocus: x(e.onFocus, (I) => {
-            const V = !A.current;
-            if (I.target === I.currentTarget && V && !_) {
-              const F = new CustomEvent(J, mt);
-              if (I.currentTarget.dispatchEvent(F), !F.defaultPrevented) {
-                const M = N().filter((C) => C.focusable), z = M.find((C) => C.active), Y = M.find((C) => C.id === y), p = [z, Y, ...M].filter(
+          onFocus: A(e.onFocus, (I) => {
+            const X = !N.current;
+            if (I.target === I.currentTarget && X && !h) {
+              const $ = new CustomEvent(ee, bt);
+              if (I.currentTarget.dispatchEvent($), !$.defaultPrevented) {
+                const L = w().filter((x) => x.focusable), V = L.find((x) => x.active), j = L.find((x) => x.id === b), W = [V, j, ...L].filter(
                   Boolean
-                ).map((C) => C.ref.current);
-                xe(p, v);
+                ).map((x) => x.ref.current);
+                Me(W, g);
               }
             }
-            A.current = !1;
+            N.current = !1;
           }),
-          onBlur: x(e.onBlur, () => w(!1))
+          onBlur: A(e.onBlur, () => y(!1))
         }
       )
     }
   );
-}), Re = "RovingFocusGroupItem", Te = a.forwardRef(
+}), Ee = "RovingFocusGroupItem", Ae = a.forwardRef(
   (e, t) => {
     const {
       __scopeRovingFocusGroup: n,
@@ -413,46 +413,46 @@ var ht = a.forwardRef((e, t) => {
       active: s = !1,
       tabStopId: r,
       ...i
-    } = e, c = ye(), u = r || c, l = bt(Re, n), v = l.currentTabStopId === u, d = Ie(n), { onFocusableItemAdd: g, onFocusableItemRemove: h } = l;
+    } = e, c = Ie(), l = r || c, u = Ct(Ee, n), g = u.currentTabStopId === l, d = Re(n), { onFocusableItemAdd: _, onFocusableItemRemove: v } = u;
     return a.useEffect(() => {
       if (o)
-        return g(), () => h();
-    }, [o, g, h]), /* @__PURE__ */ m(
-      te.ItemSlot,
+        return _(), () => v();
+    }, [o, _, v]), /* @__PURE__ */ m(
+      oe.ItemSlot,
       {
         scope: n,
-        id: u,
+        id: l,
         focusable: o,
         active: s,
         children: /* @__PURE__ */ m(
           D.span,
           {
-            tabIndex: v ? 0 : -1,
-            "data-orientation": l.orientation,
+            tabIndex: g ? 0 : -1,
+            "data-orientation": u.orientation,
             ...i,
             ref: t,
-            onMouseDown: x(e.onMouseDown, (f) => {
-              o ? l.onItemFocus(u) : f.preventDefault();
+            onMouseDown: A(e.onMouseDown, (f) => {
+              o ? u.onItemFocus(l) : f.preventDefault();
             }),
-            onFocus: x(e.onFocus, () => l.onItemFocus(u)),
-            onKeyDown: x(e.onKeyDown, (f) => {
+            onFocus: A(e.onFocus, () => u.onItemFocus(l)),
+            onKeyDown: A(e.onKeyDown, (f) => {
               if (f.key === "Tab" && f.shiftKey) {
-                l.onItemShiftTab();
+                u.onItemShiftTab();
                 return;
               }
               if (f.target !== f.currentTarget) return;
-              const y = wt(f, l.orientation, l.dir);
-              if (y !== void 0) {
+              const b = Rt(f, u.orientation, u.dir);
+              if (b !== void 0) {
                 if (f.metaKey || f.ctrlKey || f.altKey || f.shiftKey) return;
                 f.preventDefault();
-                let _ = d().filter((w) => w.focusable).map((w) => w.ref.current);
-                if (y === "last") _.reverse();
-                else if (y === "prev" || y === "next") {
-                  y === "prev" && _.reverse();
-                  const w = _.indexOf(f.currentTarget);
-                  _ = l.loop ? It(_, w + 1) : _.slice(w + 1);
+                let h = d().filter((y) => y.focusable).map((y) => y.ref.current);
+                if (b === "last") h.reverse();
+                else if (b === "prev" || b === "next") {
+                  b === "prev" && h.reverse();
+                  const y = h.indexOf(f.currentTarget);
+                  h = u.loop ? Tt(h, y + 1) : h.slice(y + 1);
                 }
-                setTimeout(() => xe(_));
+                setTimeout(() => Me(h));
               }
             })
           }
@@ -461,8 +461,8 @@ var ht = a.forwardRef((e, t) => {
     );
   }
 );
-Te.displayName = Re;
-var yt = {
+Ae.displayName = Ee;
+var St = {
   ArrowLeft: "prev",
   ArrowUp: "prev",
   ArrowRight: "next",
@@ -472,33 +472,33 @@ var yt = {
   PageDown: "last",
   End: "last"
 };
-function Ct(e, t) {
+function Nt(e, t) {
   return t !== "rtl" ? e : e === "ArrowLeft" ? "ArrowRight" : e === "ArrowRight" ? "ArrowLeft" : e;
 }
-function wt(e, t, n) {
-  const o = Ct(e.key, n);
+function Rt(e, t, n) {
+  const o = Nt(e.key, n);
   if (!(t === "vertical" && ["ArrowLeft", "ArrowRight"].includes(o)) && !(t === "horizontal" && ["ArrowUp", "ArrowDown"].includes(o)))
-    return yt[o];
+    return St[o];
 }
-function xe(e, t = !1) {
+function Me(e, t = !1) {
   const n = document.activeElement;
   for (const o of e)
     if (o === n || (o.focus({ preventScroll: t }), document.activeElement !== n)) return;
 }
-function It(e, t) {
+function Tt(e, t) {
   return e.map((n, o) => e[(t + o) % e.length]);
 }
-var St = Ne, Nt = Te;
-function Rt(e, t) {
+var xt = xe, Et = Ae;
+function At(e, t) {
   return a.useReducer((n, o) => t[n][o] ?? n, e);
 }
-var Ee = (e) => {
-  const { present: t, children: n } = e, o = Tt(t), s = typeof n == "function" ? n({ present: o.isPresent }) : a.Children.only(n), r = W(o.ref, xt(s));
+var Pe = (e) => {
+  const { present: t, children: n } = e, o = Mt(t), s = typeof n == "function" ? n({ present: o.isPresent }) : a.Children.only(n), r = Y(o.ref, Pt(s));
   return typeof n == "function" || o.isPresent ? a.cloneElement(s, { ref: r }) : null;
 };
-Ee.displayName = "Presence";
-function Tt(e) {
-  const [t, n] = a.useState(), o = a.useRef({}), s = a.useRef(e), r = a.useRef("none"), i = e ? "mounted" : "unmounted", [c, u] = Rt(i, {
+Pe.displayName = "Presence";
+function Mt(e) {
+  const [t, n] = a.useState(), o = a.useRef({}), s = a.useRef(e), r = a.useRef("none"), i = e ? "mounted" : "unmounted", [c, l] = At(i, {
     mounted: {
       UNMOUNT: "unmounted",
       ANIMATION_OUT: "unmountSuspended"
@@ -512,51 +512,51 @@ function Tt(e) {
     }
   });
   return a.useEffect(() => {
-    const l = G(o.current);
-    r.current = c === "mounted" ? l : "none";
-  }, [c]), ee(() => {
-    const l = o.current, v = s.current;
-    if (v !== e) {
-      const g = r.current, h = G(l);
-      e ? u("MOUNT") : h === "none" || (l == null ? void 0 : l.display) === "none" ? u("UNMOUNT") : u(v && g !== h ? "ANIMATION_OUT" : "UNMOUNT"), s.current = e;
+    const u = z(o.current);
+    r.current = c === "mounted" ? u : "none";
+  }, [c]), re(() => {
+    const u = o.current, g = s.current;
+    if (g !== e) {
+      const _ = r.current, v = z(u);
+      e ? l("MOUNT") : v === "none" || (u == null ? void 0 : u.display) === "none" ? l("UNMOUNT") : l(g && _ !== v ? "ANIMATION_OUT" : "UNMOUNT"), s.current = e;
     }
-  }, [e, u]), ee(() => {
+  }, [e, l]), re(() => {
     if (t) {
-      let l;
-      const v = t.ownerDocument.defaultView ?? window, d = (h) => {
-        const y = G(o.current).includes(h.animationName);
-        if (h.target === t && y && (u("ANIMATION_END"), !s.current)) {
-          const b = t.style.animationFillMode;
-          t.style.animationFillMode = "forwards", l = v.setTimeout(() => {
-            t.style.animationFillMode === "forwards" && (t.style.animationFillMode = b);
+      let u;
+      const g = t.ownerDocument.defaultView ?? window, d = (v) => {
+        const b = z(o.current).includes(v.animationName);
+        if (v.target === t && b && (l("ANIMATION_END"), !s.current)) {
+          const C = t.style.animationFillMode;
+          t.style.animationFillMode = "forwards", u = g.setTimeout(() => {
+            t.style.animationFillMode === "forwards" && (t.style.animationFillMode = C);
           });
         }
-      }, g = (h) => {
-        h.target === t && (r.current = G(o.current));
+      }, _ = (v) => {
+        v.target === t && (r.current = z(o.current));
       };
-      return t.addEventListener("animationstart", g), t.addEventListener("animationcancel", d), t.addEventListener("animationend", d), () => {
-        v.clearTimeout(l), t.removeEventListener("animationstart", g), t.removeEventListener("animationcancel", d), t.removeEventListener("animationend", d);
+      return t.addEventListener("animationstart", _), t.addEventListener("animationcancel", d), t.addEventListener("animationend", d), () => {
+        g.clearTimeout(u), t.removeEventListener("animationstart", _), t.removeEventListener("animationcancel", d), t.removeEventListener("animationend", d);
       };
     } else
-      u("ANIMATION_END");
-  }, [t, u]), {
+      l("ANIMATION_END");
+  }, [t, l]), {
     isPresent: ["mounted", "unmountSuspended"].includes(c),
-    ref: a.useCallback((l) => {
-      l && (o.current = getComputedStyle(l)), n(l);
+    ref: a.useCallback((u) => {
+      u && (o.current = getComputedStyle(u)), n(u);
     }, [])
   };
 }
-function G(e) {
+function z(e) {
   return (e == null ? void 0 : e.animationName) || "none";
 }
-function xt(e) {
+function Pt(e) {
   var o, s;
   let t = (o = Object.getOwnPropertyDescriptor(e.props, "ref")) == null ? void 0 : o.get, n = t && "isReactWarning" in t && t.isReactWarning;
   return n ? e.ref : (t = (s = Object.getOwnPropertyDescriptor(e, "ref")) == null ? void 0 : s.get, n = t && "isReactWarning" in t && t.isReactWarning, n ? e.props.ref : e.props.ref || e.ref);
 }
-var oe = "Tabs", [Et, Qt] = ne(oe, [
-  Se
-]), Ae = Se(), [At, se] = Et(oe), Me = a.forwardRef(
+var ce = "Tabs", [Ot, nn] = se(ce, [
+  Te
+]), Oe = Te(), [Ft, ae] = Ot(ce), Fe = a.forwardRef(
   (e, t) => {
     const {
       __scopeTabs: n,
@@ -565,29 +565,29 @@ var oe = "Tabs", [Et, Qt] = ne(oe, [
       defaultValue: r,
       orientation: i = "horizontal",
       dir: c,
-      activationMode: u = "automatic",
-      ...l
-    } = e, v = we(c), [d, g] = Ce({
+      activationMode: l = "automatic",
+      ...u
+    } = e, g = Ne(c), [d, _] = Se({
       prop: o,
       onChange: s,
       defaultProp: r
     });
     return /* @__PURE__ */ m(
-      At,
+      Ft,
       {
         scope: n,
-        baseId: ye(),
+        baseId: Ie(),
         value: d,
-        onValueChange: g,
+        onValueChange: _,
         orientation: i,
-        dir: v,
-        activationMode: u,
+        dir: g,
+        activationMode: l,
         children: /* @__PURE__ */ m(
           D.div,
           {
-            dir: v,
+            dir: g,
             "data-orientation": i,
-            ...l,
+            ...u,
             ref: t
           }
         )
@@ -595,12 +595,12 @@ var oe = "Tabs", [Et, Qt] = ne(oe, [
     );
   }
 );
-Me.displayName = oe;
-var Pe = "TabsList", Oe = a.forwardRef(
+Fe.displayName = ce;
+var $e = "TabsList", De = a.forwardRef(
   (e, t) => {
-    const { __scopeTabs: n, loop: o = !0, ...s } = e, r = se(Pe, n), i = Ae(n);
+    const { __scopeTabs: n, loop: o = !0, ...s } = e, r = ae($e, n), i = Oe(n);
     return /* @__PURE__ */ m(
-      St,
+      xt,
       {
         asChild: !0,
         ...i,
@@ -620,39 +620,39 @@ var Pe = "TabsList", Oe = a.forwardRef(
     );
   }
 );
-Oe.displayName = Pe;
-var Fe = "TabsTrigger", $e = a.forwardRef(
+De.displayName = $e;
+var qe = "TabsTrigger", Le = a.forwardRef(
   (e, t) => {
-    const { __scopeTabs: n, value: o, disabled: s = !1, ...r } = e, i = se(Fe, n), c = Ae(n), u = Le(i.baseId, o), l = Ve(i.baseId, o), v = o === i.value;
+    const { __scopeTabs: n, value: o, disabled: s = !1, ...r } = e, i = ae(qe, n), c = Oe(n), l = Ue(i.baseId, o), u = je(i.baseId, o), g = o === i.value;
     return /* @__PURE__ */ m(
-      Nt,
+      Et,
       {
         asChild: !0,
         ...c,
         focusable: !s,
-        active: v,
+        active: g,
         children: /* @__PURE__ */ m(
           D.button,
           {
             type: "button",
             role: "tab",
-            "aria-selected": v,
-            "aria-controls": l,
-            "data-state": v ? "active" : "inactive",
+            "aria-selected": g,
+            "aria-controls": u,
+            "data-state": g ? "active" : "inactive",
             "data-disabled": s ? "" : void 0,
             disabled: s,
-            id: u,
+            id: l,
             ...r,
             ref: t,
-            onMouseDown: x(e.onMouseDown, (d) => {
+            onMouseDown: A(e.onMouseDown, (d) => {
               !s && d.button === 0 && d.ctrlKey === !1 ? i.onValueChange(o) : d.preventDefault();
             }),
-            onKeyDown: x(e.onKeyDown, (d) => {
+            onKeyDown: A(e.onKeyDown, (d) => {
               [" ", "Enter"].includes(d.key) && i.onValueChange(o);
             }),
-            onFocus: x(e.onFocus, () => {
+            onFocus: A(e.onFocus, () => {
               const d = i.activationMode !== "manual";
-              !v && !s && d && i.onValueChange(o);
+              !g && !s && d && i.onValueChange(o);
             })
           }
         )
@@ -660,22 +660,22 @@ var Fe = "TabsTrigger", $e = a.forwardRef(
     );
   }
 );
-$e.displayName = Fe;
-var De = "TabsContent", qe = a.forwardRef(
+Le.displayName = qe;
+var Ve = "TabsContent", Be = a.forwardRef(
   (e, t) => {
-    const { __scopeTabs: n, value: o, forceMount: s, children: r, ...i } = e, c = se(De, n), u = Le(c.baseId, o), l = Ve(c.baseId, o), v = o === c.value, d = a.useRef(v);
+    const { __scopeTabs: n, value: o, forceMount: s, children: r, ...i } = e, c = ae(Ve, n), l = Ue(c.baseId, o), u = je(c.baseId, o), g = o === c.value, d = a.useRef(g);
     return a.useEffect(() => {
-      const g = requestAnimationFrame(() => d.current = !1);
-      return () => cancelAnimationFrame(g);
-    }, []), /* @__PURE__ */ m(Ee, { present: s || v, children: ({ present: g }) => /* @__PURE__ */ m(
+      const _ = requestAnimationFrame(() => d.current = !1);
+      return () => cancelAnimationFrame(_);
+    }, []), /* @__PURE__ */ m(Pe, { present: s || g, children: ({ present: _ }) => /* @__PURE__ */ m(
       D.div,
       {
-        "data-state": v ? "active" : "inactive",
+        "data-state": g ? "active" : "inactive",
         "data-orientation": c.orientation,
         role: "tabpanel",
-        "aria-labelledby": u,
-        hidden: !g,
-        id: l,
+        "aria-labelledby": l,
+        hidden: !_,
+        id: u,
         tabIndex: 0,
         ...i,
         ref: t,
@@ -683,31 +683,31 @@ var De = "TabsContent", qe = a.forwardRef(
           ...e.style,
           animationDuration: d.current ? "0s" : void 0
         },
-        children: g && r
+        children: _ && r
       }
     ) });
   }
 );
-qe.displayName = De;
-function Le(e, t) {
+Be.displayName = Ve;
+function Ue(e, t) {
   return `${e}-trigger-${t}`;
 }
-function Ve(e, t) {
+function je(e, t) {
   return `${e}-content-${t}`;
 }
-var Mt = Me, Pt = Oe, Ot = $e, Ft = qe;
-function $t(e) {
+var $t = Fe, Dt = De, qt = Le, Lt = Be;
+function Vt(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var Q = { exports: {} };
+var te = { exports: {} };
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
 	http://jedwatson.github.io/classnames
 */
-var me;
-function Dt() {
-  return me || (me = 1, function(e) {
+var ve;
+function Bt() {
+  return ve || (ve = 1, function(e) {
     (function() {
       var t = {}.hasOwnProperty;
       function n() {
@@ -736,13 +736,13 @@ function Dt() {
       }
       e.exports ? (n.default = n, e.exports = n) : window.classNames = n;
     })();
-  }(Q)), Q.exports;
+  }(te)), te.exports;
 }
-var qt = Dt();
-const ie = /* @__PURE__ */ $t(qt), Lt = {
+var Ut = Bt();
+const ue = /* @__PURE__ */ Vt(Ut), jt = {
   "purpur-tab-content": "_purpur-tab-content_1ugbi_1",
   "purpur-tab-content--force-mount": "_purpur-tab-content--force-mount_1ugbi_15"
-}, Vt = ie.bind(Lt), _e = "purpur-tab-content", Bt = ge(
+}, Gt = ue.bind(jt), be = "purpur-tab-content", Wt = ye(
   ({
     children: e,
     tabId: t,
@@ -751,13 +751,13 @@ const ie = /* @__PURE__ */ $t(qt), Lt = {
     disableForceMount: s,
     ...r
   }, i) => /* @__PURE__ */ m(
-    Ft,
+    Lt,
     {
       ref: i,
-      className: Vt([
-        _e,
+      className: Gt([
+        be,
         o,
-        { [`${_e}--force-mount`]: !s }
+        { [`${be}--force-mount`]: !s }
       ]),
       "data-testid": n,
       value: t,
@@ -766,13 +766,13 @@ const ie = /* @__PURE__ */ $t(qt), Lt = {
       children: e
     }
   )
-), Ut = (e) => !!e && We(e) && !!e.props.name && !!e.props.tabId, jt = {
+), kt = (e) => !!e && Ye(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"
-}, Gt = ie.bind(jt), ve = "purpur-tab-header", Wt = ge(
+}, zt = ue.bind(Kt), he = "purpur-tab-header", Yt = ye(
   ({
     index: e,
     tabId: t,
@@ -782,10 +782,10 @@ const ie = /* @__PURE__ */ $t(qt), Lt = {
     "data-testid": r,
     children: i
   }, c) => /* @__PURE__ */ m(
-    Ot,
+    qt,
     {
       id: `${t}-trigger`,
-      className: Gt([ve, `${ve}--${n}${o ? "-negative" : ""}`]),
+      className: zt([he, `${he}--${n}${o ? "-negative" : ""}`]),
       value: t,
       "data-testid": r,
       "data-index": e,
@@ -794,29 +794,30 @@ const ie = /* @__PURE__ */ $t(qt), Lt = {
       children: i
     }
   )
-), kt = {
-  "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",
-  "purpur-tabs__scroll-button--right": "_purpur-tabs__scroll-button--right_1dpqy_66",
-  "purpur-tabs__wrapper--scroll-end": "_purpur-tabs__wrapper--scroll-end_1dpqy_69",
-  "purpur-tabs__wrapper--scroll-start": "_purpur-tabs__wrapper--scroll-start_1dpqy_72",
-  "purpur-tabs--line": "_purpur-tabs--line_1dpqy_75",
-  "purpur-tabs--line-negative": "_purpur-tabs--line-negative_1dpqy_75",
-  "purpur-tabs__selected-border": "_purpur-tabs__selected-border_1dpqy_83",
-  "purpur-tabs--contained": "_purpur-tabs--contained_1dpqy_103",
-  "purpur-tabs__list": "_purpur-tabs__list_1dpqy_103",
-  "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"
-}, Ht = ["line", "contained"], Kt = (e) => new CustomEvent("tabChangeDetail", { detail: { value: e } }), O = ie.bind(kt), S = "purpur-tabs", zt = (e, t) => {
-  var u;
+), Zt = {
+  "purpur-tabs__wrapper": "_purpur-tabs__wrapper_1nygq_1",
+  "purpur-tabs__scroll-button": "_purpur-tabs__scroll-button_1nygq_9",
+  "purpur-tabs__scroll-button--left": "_purpur-tabs__scroll-button--left_1nygq_71",
+  "purpur-tabs__scroll-button--right": "_purpur-tabs__scroll-button--right_1nygq_74",
+  "purpur-tabs__wrapper--scroll-end": "_purpur-tabs__wrapper--scroll-end_1nygq_77",
+  "purpur-tabs__wrapper--scroll-start": "_purpur-tabs__wrapper--scroll-start_1nygq_80",
+  "purpur-tabs--line": "_purpur-tabs--line_1nygq_83",
+  "purpur-tabs--line-negative": "_purpur-tabs--line-negative_1nygq_83",
+  "purpur-tabs__selected-border": "_purpur-tabs__selected-border_1nygq_91",
+  "purpur-tabs__content-wrapper": "_purpur-tabs__content-wrapper_1nygq_115",
+  "purpur-tabs--contained": "_purpur-tabs--contained_1nygq_123",
+  "purpur-tabs__list": "_purpur-tabs__list_1nygq_123",
+  "purpur-tabs--contained-negative": "_purpur-tabs--contained-negative_1nygq_123",
+  "purpur-tabs__content-container": "_purpur-tabs__content-container_1nygq_126",
+  "purpur-tabs--fullWidth": "_purpur-tabs--fullWidth_1nygq_135"
+}, rn = ["line", "contained"], Ht = (e) => new CustomEvent("tabChangeDetail", { detail: { value: e } }), O = ue.bind(Zt), R = "purpur-tabs", Xt = (e, t) => {
+  var l;
   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), i = o.left + (isNaN(r) ? 0 : r);
+  const n = e.getBoundingClientRect(), o = t.getBoundingClientRect(), s = t.clientWidth, r = parseInt((l = getComputedStyle(t).borderLeftWidth) == null ? void 0 : l.split("px")[0], 10), i = o.left + (isNaN(r) ? 0 : r);
   let c;
   n.right > o.right && (c = n.left + t.scrollLeft, c = c + n.width - s + s * 0.1, c = c - i), n.left < o.left && (c = n.left + t.scrollLeft, c = c - s * 0.1, c = c - i), c !== void 0 && t.scroll({ left: c, behavior: "smooth" });
-}, Yt = ({
+}, Jt = ({
   children: e,
   variant: t = "line",
   negative: n = !1,
@@ -824,143 +825,161 @@ const ie = /* @__PURE__ */ $t(qt), Lt = {
   onChange: s,
   className: r,
   defaultValue: i,
-  "data-testid": c,
+  animateHeight: c = !1,
+  "data-testid": l,
   value: u,
-  ...l
+  ...g
 }) => {
-  const [v, d] = B({}), [g, h] = B(0), [f, y] = B(0), b = U.toArray(e).filter(Ut), _ = ue(null), w = ue(new Array(b.length)), E = 200, N = t === "line", A = O([
-    S,
-    `${S}--${t}${n ? "-negative" : ""}`,
-    { [`${S}--fullWidth`]: o },
+  const d = Q(null), [_, v] = B(-1), [f, b] = B({}), [C, h] = B(0), [y, M] = B(0), w = k.toArray(e).filter(kt), N = Q(null), q = Q(new Array(w.length)), U = 200, I = t === "line", X = O([
+    R,
+    `${R}--${t}${n ? "-negative" : ""}`,
+    { [`${R}--fullWidth`]: o },
     r
-  ]), q = U.map(b, ({ props: { tabId: p } }) => p), L = () => {
-    const p = q.findIndex((C) => C === i);
+  ]), $ = k.map(w, ({ props: { tabId: p } }) => p), L = () => {
+    const p = $.findIndex((S) => S === i);
     return p >= 0 ? p : 0;
   };
-  j(() => {
-    u && V(b.findIndex((p) => p.props.tabId === u));
-  }, [b, u]);
-  const [I, V] = B(L);
-  if (new Set(q).size !== q.length)
+  K(() => {
+    u && j(w.findIndex((p) => p.props.tabId === u));
+  }, [w, u]);
+  const [V, j] = B(L);
+  if (new Set($).size !== $.length)
     throw new Error("tabId must be unique");
-  const F = (p, C) => C || c ? `${C || c}-${p}` : void 0, M = () => {
-    if (!N)
+  const G = (p, S) => S || l ? `${S || l}-${p}` : void 0, W = () => {
+    if (!I)
       return;
-    const p = w.current[I];
-    h((p == null ? void 0 : p.offsetLeft) || 0), y((p == null ? void 0 : p.getBoundingClientRect().width) || 0);
-  }, z = (p) => {
-    N && !u && V(b.findIndex((C) => C.props.tabId === p)), s == null || s(Kt(p));
-  }, Y = (p) => {
-    if (_ != null && _.current) {
-      const { scrollLeft: C } = _.current, $ = p === "left" ? -200 : E;
-      _.current.scroll({ left: C + $, behavior: "smooth" });
+    const p = q.current[V];
+    h((p == null ? void 0 : p.offsetLeft) || 0), M((p == null ? void 0 : p.getBoundingClientRect().width) || 0);
+  }, x = (p) => {
+    I && !u && j(w.findIndex((S) => S.props.tabId === p)), s == null || s(Ht(p));
+  }, Ge = (p) => {
+    if (N != null && N.current) {
+      const { scrollLeft: S } = N.current, P = p === "left" ? -200 : U;
+      N.current.scroll({ left: S + P, behavior: "smooth" });
     }
-  }, Z = ({ side: p }) => /* @__PURE__ */ m(
+  }, le = ({ side: p }) => /* @__PURE__ */ m(
     "button",
     {
-      className: O(`${S}__scroll-button`, `${S}__scroll-button--${p}`),
-      onClick: () => Y(p),
+      className: O(`${R}__scroll-button`, `${R}__scroll-button--${p}`),
+      onClick: () => Ge(p),
       type: "button",
       "aria-hidden": "true",
       tabIndex: -1,
-      "data-testid": F("scroll-button"),
-      children: /* @__PURE__ */ m(be, { svg: p === "left" ? tt : nt, size: "md" })
+      "data-testid": G("scroll-button"),
+      children: /* @__PURE__ */ m(we, { svg: p === "left" ? st : it, size: "md" })
     }
   );
-  return j(() => (window.addEventListener("resize", M), () => {
-    window.removeEventListener("resize", M);
-  }), [I]), j(() => {
-    M();
-  }, [I, o, b.length, t]), j(() => {
-    const p = (T) => {
-      if (T.every((R) => R.isIntersecting) && T.length === b.length) {
-        d({});
+  return K(() => {
+    const p = () => {
+      if (d.current && c) {
+        const P = d.current.offsetHeight;
+        v(P);
+      }
+    }, S = () => {
+      p(), W();
+    };
+    return p(), window.addEventListener("resize", S), () => {
+      window.removeEventListener("resize", S);
+    };
+  }, [V, c]), K(() => {
+    W();
+  }, [V, o, w.length, t]), K(() => {
+    const p = (E) => {
+      if (E.every((T) => T.isIntersecting) && E.length === w.length) {
+        b({});
         return;
       }
-      T.forEach((R) => {
-        const ae = Number(R.target.getAttribute("data-index")), Be = ae === 0, Ue = ae === b.length - 1;
-        d((je) => ({
-          ...je,
-          ...Be && {
-            [`${S}__wrapper--scroll-end`]: !R.isIntersecting
+      E.forEach((T) => {
+        const fe = Number(T.target.getAttribute("data-index")), We = fe === 0, ke = fe === w.length - 1;
+        b((Ke) => ({
+          ...Ke,
+          ...We && {
+            [`${R}__wrapper--scroll-end`]: !T.isIntersecting
           },
-          ...Ue && {
-            [`${S}__wrapper--scroll-start`]: !R.isIntersecting
+          ...ke && {
+            [`${R}__wrapper--scroll-start`]: !T.isIntersecting
           }
         }));
       });
-    }, C = new IntersectionObserver(p, {
+    }, S = new IntersectionObserver(p, {
       threshold: [0.99],
-      root: _.current
-    }), $ = w.current;
-    return $.forEach((T) => C.observe(T)), () => {
-      $.forEach((T) => C.unobserve(T));
+      root: N.current
+    }), P = q.current;
+    return P.forEach((E) => S.observe(E)), () => {
+      P.forEach((E) => S.unobserve(E));
     };
-  }, [b.length]), /* @__PURE__ */ m(
-    Mt,
+  }, [w.length]), /* @__PURE__ */ m(
+    $t,
     {
-      defaultValue: i ?? b[0].props.tabId,
-      onValueChange: z,
-      "data-testid": c,
-      className: A,
+      defaultValue: i ?? w[0].props.tabId,
+      onValueChange: x,
+      "data-testid": l,
+      className: X,
       value: u,
-      ...l,
-      children: /* @__PURE__ */ X("div", { className: O(`${S}__container`), children: [
-        /* @__PURE__ */ X("div", { className: O([`${S}__wrapper`, v]), children: [
-          /* @__PURE__ */ X(
-            Pt,
+      ...g,
+      children: /* @__PURE__ */ J("div", { className: O(`${R}__container`), children: [
+        /* @__PURE__ */ J("div", { className: O([`${R}__wrapper`, f]), children: [
+          /* @__PURE__ */ J(
+            Dt,
             {
               ref: (p) => {
-                _.current = p;
+                N.current = p;
               },
-              className: O(`${S}__list`),
+              className: O(`${R}__list`),
               children: [
-                U.map(b, (p, C) => {
-                  const { name: $, tabId: T, "data-testid": ce } = p.props;
+                k.map(w, (p, S) => {
+                  const { name: P, tabId: E, "data-testid": de } = p.props;
                   return /* @__PURE__ */ m(
-                    Wt,
+                    Yt,
                     {
-                      "data-testid": F("header", ce),
-                      index: C,
-                      tabId: T,
-                      ref: (R) => {
-                        R && (w.current[C] = R);
+                      "data-testid": G("header", de),
+                      index: S,
+                      tabId: E,
+                      ref: (T) => {
+                        T && (q.current[S] = T);
                       },
-                      onFocus: (R) => {
-                        zt(R.target, _.current);
+                      onFocus: (T) => {
+                        Xt(T.target, N.current);
                       },
                       variant: t,
                       negative: n,
-                      children: $
+                      children: P
                     }
                   );
                 }),
-                N && /* @__PURE__ */ m(
+                I && /* @__PURE__ */ m(
                   "div",
                   {
-                    className: O(`${S}__selected-border`),
+                    className: O(`${R}__selected-border`),
                     style: {
-                      width: f,
-                      transform: `translateX(${g}px)`
+                      width: y,
+                      transform: `translateX(${C}px)`
                     },
-                    "data-testid": F("selected-border")
+                    "data-testid": G("selected-border")
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ m(Z, { side: "left" }),
-          /* @__PURE__ */ m(Z, { side: "right" })
+          /* @__PURE__ */ m(le, { side: "left" }),
+          /* @__PURE__ */ m(le, { side: "right" })
         ] }),
-        /* @__PURE__ */ m("div", { className: O(`${S}__content-container`), children: U.map(b, (p) => p) })
+        /* @__PURE__ */ m(
+          "div",
+          {
+            className: O(`${R}__content-wrapper`),
+            style: { height: c && _ > -1 ? `${_}px` : "auto" },
+            children: /* @__PURE__ */ m("div", { ref: d, className: O(`${R}__content-container`), children: k.map(w, (p) => p) })
+          }
+        )
       ] })
     }
   );
 };
-Yt.Content = Bt;
+Jt.Content = Wt;
 export {
-  Yt as Tabs,
-  Kt as createTabChangeDetailEvent,
-  Ht as tabsVariants
+  Jt as Tabs,
+  Ht as createTabChangeDetailEvent,
+  rn as tabsVariants
 };
 //# sourceMappingURL=tabs.es.js.map