@purpurds/tabs 5.35.0 → 6.0.0

package/dist/tabs.es.js

@@ -1,11 +1,11 @@
 import { jsx as T, jsxs as ee } from "react/jsx-runtime";
-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) {
+import * as ve from "react";
+import E, { createContext as ne, useMemo as H, createElement as g, useContext as ge, useCallback as L, forwardRef as w, Children as P, isValidElement as z, cloneElement as se, Fragment as Le, useLayoutEffect as Ue, useEffect as N, useRef as R, useState as F, useReducer as Ve } from "react";
+import { flushSync as Be } from "react-dom";
+function Ge(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var ge = { exports: {} };
+var he = { exports: {} };
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
@@ -40,9 +40,9 @@ var ge = { exports: {} };
     }
     e.exports ? (n.default = n, e.exports = n) : window.classNames = n;
   })();
-})(ge);
-var Ge = ge.exports;
-const je = /* @__PURE__ */ Be(Ge), ke = {
+})(he);
+var je = he.exports;
+const ke = /* @__PURE__ */ Ge(je), Ke = {
   "purpur-icon": "_purpur-icon_8u1lq_1",
   "purpur-icon--xxs": "_purpur-icon--xxs_8u1lq_4",
   "purpur-icon--xs": "_purpur-icon--xs_8u1lq_8",
@@ -50,36 +50,26 @@ const je = /* @__PURE__ */ Be(Ge), ke = {
   "purpur-icon--md": "_purpur-icon--md_8u1lq_16",
   "purpur-icon--lg": "_purpur-icon--lg_8u1lq_20",
   "purpur-icon--xl": "_purpur-icon--xl_8u1lq_24"
-}, ze = {
-  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"
-}, 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"
-}, We = je.bind(ke), $e = "purpur-icon", Ye = "md", Ze = (e) => e.filter((t) => Object.keys(t).length >= 1).map((t) => `${t.name}="${t.value}"`).join(" "), He = ({ content: e = "", title: t } = {}) => {
+}, ze = ke.bind(Ke), $e = "purpur-icon", We = "md", Ye = (e) => e.filter((t) => Object.keys(t).length >= 1).map((t) => `${t.name}="${t.value}"`).join(" "), Ze = ({ 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>`;
-}, Xe = (e) => e.replace(/<(\/?)svg([^>]*)>/g, "").trim(), he = ({
+  return `<svg ${Ye(n)}>${o}${e}</svg>`;
+}, He = (e) => e.replace(/<(\/?)svg([^>]*)>/g, "").trim(), xe = ({
   ["data-testid"]: e,
   svg: t,
   allyTitle: n,
   className: o,
-  size: s = Ye,
+  size: s = We,
   ...r
 }) => {
-  const c = He({
-    content: Xe(t.svg),
+  const c = Ze({
+    content: He(t.svg),
     title: n
-  }), a = We(o, $e, `${$e}--${s}`);
+  }), a = ze(o, $e, `${$e}--${s}`);
   return /* @__PURE__ */ T(
     "span",
     {
@@ -91,7 +81,18 @@ const je = /* @__PURE__ */ Be(Ge), ke = {
     }
   );
 };
-he.displayName = "Icon";
+xe.displayName = "Icon";
+const Xe = {
+  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 = {
+  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 C() {
   return C = Object.assign ? Object.assign.bind() : function(e) {
     for (var t = 1; t < arguments.length; t++) {
@@ -101,7 +102,7 @@ function C() {
     return e;
   }, C.apply(null, arguments);
 }
-function F(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);
   };
@@ -124,7 +125,7 @@ function ae(e, t = []) {
       }, _);
     }
     function p(l, m) {
-      const _ = (m == null ? void 0 : m[e][u]) || a, f = ve(_);
+      const _ = (m == null ? void 0 : m[e][u]) || a, f = ge(_);
       if (f) return f;
       if (c !== void 0) return c;
       throw new Error(`\`${l}\` must be used within \`${r}\``);
@@ -154,10 +155,10 @@ function ae(e, t = []) {
   };
   return s.scopeName = e, [
     o,
-    Je(s, ...t)
+    Qe(s, ...t)
   ];
 }
-function Je(...e) {
+function Qe(...e) {
   const t = e[0];
   if (e.length === 1) return t;
   const n = () => {
@@ -187,24 +188,24 @@ function Je(...e) {
   };
   return n.scopeName = t.scopeName, n;
 }
-function Qe(e, t) {
+function et(e, t) {
   typeof e == "function" ? e(t) : e != null && (e.current = t);
 }
-function xe(...e) {
+function Ie(...e) {
   return (t) => e.forEach(
-    (n) => Qe(n, t)
+    (n) => et(n, t)
   );
 }
 function X(...e) {
-  return L(xe(...e), e);
+  return L(Ie(...e), e);
 }
 const J = /* @__PURE__ */ w((e, t) => {
-  const { children: n, ...o } = e, s = P.toArray(n), r = s.find(tt);
+  const { children: n, ...o } = e, s = P.toArray(n), r = s.find(nt);
   if (r) {
-    const c = r.props.children, a = s.map((u) => u === r ? P.count(c) > 1 ? P.only(null) : /* @__PURE__ */ K(c) ? c.props.children : null : u);
+    const c = r.props.children, a = s.map((u) => u === r ? P.count(c) > 1 ? P.only(null) : /* @__PURE__ */ z(c) ? c.props.children : null : u);
     return /* @__PURE__ */ g(re, C({}, o, {
       ref: t
-    }), /* @__PURE__ */ K(c) ? /* @__PURE__ */ se(c, void 0, a) : null);
+    }), /* @__PURE__ */ z(c) ? /* @__PURE__ */ se(c, void 0, a) : null);
   }
   return /* @__PURE__ */ g(re, C({}, o, {
     ref: t
@@ -213,17 +214,17 @@ const J = /* @__PURE__ */ w((e, t) => {
 J.displayName = "Slot";
 const re = /* @__PURE__ */ w((e, t) => {
   const { children: n, ...o } = e;
-  return /* @__PURE__ */ K(n) ? /* @__PURE__ */ se(n, {
-    ...nt(o, n.props),
-    ref: t ? xe(t, n.ref) : n.ref
+  return /* @__PURE__ */ z(n) ? /* @__PURE__ */ se(n, {
+    ...rt(o, n.props),
+    ref: t ? Ie(t, n.ref) : n.ref
   }) : P.count(n) > 1 ? P.only(null) : null;
 });
 re.displayName = "SlotClone";
-const et = ({ children: e }) => /* @__PURE__ */ g(qe, null, e);
-function tt(e) {
-  return /* @__PURE__ */ K(e) && e.type === et;
+const tt = ({ children: e }) => /* @__PURE__ */ g(Le, null, e);
+function nt(e) {
+  return /* @__PURE__ */ z(e) && e.type === tt;
 }
-function nt(e, t) {
+function rt(e, t) {
   const n = {
     ...t
   };
@@ -244,7 +245,7 @@ function nt(e, t) {
     ...n
   };
 }
-function rt(e) {
+function ot(e) {
   const t = e + "CollectionProvider", [n, o] = ae(t), [s, r] = n(t, {
     collectionRef: {
       current: null
@@ -296,21 +297,21 @@ function rt(e) {
     o
   ];
 }
-const oe = globalThis != null && globalThis.document ? Le : () => {
-}, ot = _e.useId || (() => {
+const oe = globalThis != null && globalThis.document ? Ue : () => {
+}, ct = ve.useId || (() => {
 });
-let ct = 0;
-function Ie(e) {
-  const [t, n] = _e.useState(ot());
+let st = 0;
+function Ce(e) {
+  const [t, n] = ve.useState(ct());
   return oe(() => {
     e || n(
-      (o) => o ?? String(ct++)
+      (o) => o ?? String(st++)
     );
   }, [
     e
   ]), e || (t ? `radix-${t}` : "");
 }
-const st = [
+const at = [
   "a",
   "button",
   "div",
@@ -327,7 +328,7 @@ const st = [
   "span",
   "svg",
   "ul"
-], G = st.reduce((e, t) => {
+], G = at.reduce((e, t) => {
   const n = /* @__PURE__ */ w((o, s) => {
     const { asChild: r, ...c } = o, a = r ? J : t;
     return N(() => {
@@ -353,9 +354,9 @@ function ie(e) {
     []
   );
 }
-function Ce({ prop: e, defaultProp: t, onChange: n = () => {
+function ye({ prop: e, defaultProp: t, onChange: n = () => {
 } }) {
-  const [o, s] = at({
+  const [o, s] = it({
     defaultProp: t,
     onChange: n
   }), r = e !== void 0, c = r ? e : o, a = ie(n), u = L((i) => {
@@ -374,8 +375,8 @@ function Ce({ prop: e, defaultProp: t, onChange: n = () => {
     u
   ];
 }
-function at({ defaultProp: e, onChange: t }) {
-  const n = O(e), [o] = n, s = R(o), r = ie(t);
+function it({ defaultProp: e, onChange: t }) {
+  const n = F(e), [o] = n, s = R(o), r = ie(t);
   return N(() => {
     s.current !== o && (r(o), s.current = o);
   }, [
@@ -384,35 +385,35 @@ function at({ defaultProp: e, onChange: t }) {
     r
   ]), n;
 }
-const it = /* @__PURE__ */ ne(void 0);
-function ye(e) {
-  const t = ve(it);
+const ut = /* @__PURE__ */ ne(void 0);
+function Se(e) {
+  const t = ge(ut);
   return e || t || "ltr";
 }
-const te = "rovingFocusGroup.onEntryFocus", ut = {
+const te = "rovingFocusGroup.onEntryFocus", dt = {
   bubbles: !1,
   cancelable: !0
-}, 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, {
+}, ue = "RovingFocusGroup", [ce, we, lt] = ot(ue), [ft, Te] = ae(ue, [
+  lt
+]), [pt, bt] = ft(ue), $t = /* @__PURE__ */ w((e, t) => /* @__PURE__ */ g(ce.Provider, {
   scope: e.__scopeRovingFocusGroup
 }, /* @__PURE__ */ g(ce.Slot, {
   scope: e.__scopeRovingFocusGroup
-}, /* @__PURE__ */ g($t, C({}, e, {
+}, /* @__PURE__ */ g(mt, 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, l = R(null), m = X(t, l), _ = ye(r), [f = null, h] = Ce({
+}))))), mt = /* @__PURE__ */ w((e, t) => {
+  const { __scopeRovingFocusGroup: n, orientation: o, loop: s = !1, dir: r, currentTabStopId: c, defaultCurrentTabStopId: a, onCurrentTabStopIdChange: u, onEntryFocus: i, ...p } = e, l = R(null), m = X(t, l), _ = Se(r), [f = null, h] = ye({
     prop: c,
     defaultProp: a,
     onChange: u
-  }), [$, b] = O(!1), v = ie(i), U = Se(n), y = R(!1), [j, V] = O(0);
+  }), [$, b] = F(!1), v = ie(i), U = we(n), y = R(!1), [j, V] = F(0);
   return N(() => {
     const x = l.current;
     if (x)
       return x.addEventListener(te, v), () => x.removeEventListener(te, v);
   }, [
     v
-  ]), /* @__PURE__ */ g(ft, {
+  ]), /* @__PURE__ */ g(pt, {
     scope: n,
     orientation: o,
     dir: _,
@@ -449,39 +450,39 @@ const te = "rovingFocusGroup.onEntryFocus", ut = {
       outline: "none",
       ...e.style
     },
-    onMouseDown: F(e.onMouseDown, () => {
+    onMouseDown: O(e.onMouseDown, () => {
       y.current = !0;
     }),
-    onFocus: F(e.onFocus, (x) => {
+    onFocus: O(e.onFocus, (x) => {
       const W = !y.current;
       if (x.target === x.currentTarget && W && !$) {
-        const k = new CustomEvent(te, ut);
+        const k = new CustomEvent(te, dt);
         if (x.currentTarget.dispatchEvent(k), !k.defaultPrevented) {
           const D = U().filter(
             (d) => d.focusable
-          ), z = D.find(
+          ), K = D.find(
             (d) => d.active
           ), Q = D.find(
             (d) => d.id === f
           ), Y = [
-            z,
+            K,
             Q,
             ...D
           ].filter(Boolean).map(
             (d) => d.ref.current
           );
-          Te(Y);
+          Ne(Y);
         }
       }
       y.current = !1;
     }),
-    onBlur: F(
+    onBlur: O(
       e.onBlur,
       () => b(!1)
     )
   })));
-}), 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;
+}), _t = "RovingFocusGroupItem", vt = /* @__PURE__ */ w((e, t) => {
+  const { __scopeRovingFocusGroup: n, focusable: o = !0, active: s = !1, tabStopId: r, ...c } = e, a = Ce(), u = r || a, i = bt(_t, n), p = i.currentTabStopId === u, l = we(n), { onFocusableItemAdd: m, onFocusableItemRemove: _ } = i;
   return N(() => {
     if (o)
       return m(), () => _();
@@ -499,20 +500,20 @@ const te = "rovingFocusGroup.onEntryFocus", ut = {
     "data-orientation": i.orientation
   }, c, {
     ref: t,
-    onMouseDown: F(e.onMouseDown, (f) => {
+    onMouseDown: O(e.onMouseDown, (f) => {
       o ? i.onItemFocus(u) : f.preventDefault();
     }),
-    onFocus: F(
+    onFocus: O(
       e.onFocus,
       () => i.onItemFocus(u)
     ),
-    onKeyDown: F(e.onKeyDown, (f) => {
+    onKeyDown: O(e.onKeyDown, (f) => {
       if (f.key === "Tab" && f.shiftKey) {
         i.onItemShiftTab();
         return;
       }
       if (f.target !== f.currentTarget) return;
-      const h = ht(f, i.orientation, i.dir);
+      const h = xt(f, i.orientation, i.dir);
       if (h !== void 0) {
         f.preventDefault();
         let b = l().filter(
@@ -524,15 +525,15 @@ const te = "rovingFocusGroup.onEntryFocus", ut = {
         else if (h === "prev" || h === "next") {
           h === "prev" && b.reverse();
           const v = b.indexOf(f.currentTarget);
-          b = i.loop ? xt(b, v + 1) : b.slice(v + 1);
+          b = i.loop ? It(b, v + 1) : b.slice(v + 1);
         }
         setTimeout(
-          () => Te(b)
+          () => Ne(b)
         );
       }
     })
   })));
-}), vt = {
+}), gt = {
   ArrowLeft: "prev",
   ArrowUp: "prev",
   ArrowRight: "next",
@@ -542,11 +543,11 @@ const te = "rovingFocusGroup.onEntryFocus", ut = {
   PageDown: "last",
   End: "last"
 };
-function gt(e, t) {
+function ht(e, t) {
   return t !== "rtl" ? e : e === "ArrowLeft" ? "ArrowRight" : e === "ArrowRight" ? "ArrowLeft" : e;
 }
-function ht(e, t, n) {
-  const o = gt(e.key, n);
+function xt(e, t, n) {
+  const o = ht(e.key, n);
   if (!(t === "vertical" && [
     "ArrowLeft",
     "ArrowRight"
@@ -554,36 +555,36 @@ function ht(e, t, n) {
     "ArrowUp",
     "ArrowDown"
   ].includes(o)))
-    return vt[o];
+    return gt[o];
 }
-function Te(e) {
+function Ne(e) {
   const t = document.activeElement;
   for (const n of e)
     if (n === t || (n.focus(), document.activeElement !== t)) return;
 }
-function xt(e, t) {
+function It(e, t) {
   return e.map(
     (n, o) => e[(t + o) % e.length]
   );
 }
-const It = bt, Ct = _t;
-function yt(e, t) {
-  return Ue((n, o) => {
+const Ct = $t, yt = vt;
+function St(e, t) {
+  return Ve((n, o) => {
     const s = t[n][o];
     return s ?? n;
   }, e);
 }
-const Ne = (e) => {
-  const { present: t, children: n } = e, o = St(t), s = typeof n == "function" ? n({
+const Ae = (e) => {
+  const { present: t, children: n } = e, o = wt(t), s = typeof n == "function" ? n({
     present: o.isPresent
   }) : P.only(n), r = X(o.ref, s.ref);
   return typeof n == "function" || o.isPresent ? /* @__PURE__ */ se(s, {
     ref: r
   }) : null;
 };
-Ne.displayName = "Presence";
-function St(e) {
-  const [t, n] = O(), o = R({}), s = R(e), r = R("none"), c = e ? "mounted" : "unmounted", [a, u] = yt(c, {
+Ae.displayName = "Presence";
+function wt(e) {
+  const [t, n] = F(), o = R({}), s = R(e), r = R("none"), c = e ? "mounted" : "unmounted", [a, u] = St(c, {
     mounted: {
       UNMOUNT: "unmounted",
       ANIMATION_OUT: "unmountSuspended"
@@ -614,7 +615,7 @@ function St(e) {
     if (t) {
       const i = (l) => {
         const _ = Z(o.current).includes(l.animationName);
-        l.target === t && _ && Ve(
+        l.target === t && _ && Be(
           () => u("ANIMATION_END")
         );
       }, p = (l) => {
@@ -641,17 +642,17 @@ function St(e) {
 function Z(e) {
   return (e == null ? void 0 : e.animationName) || "none";
 }
-const Ae = "Tabs", [wt, nn] = ae(Ae, [
-  we
-]), 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({
+const Ee = "Tabs", [Tt, nn] = ae(Ee, [
+  Te
+]), Pe = Te(), [Nt, de] = Tt(Ee), At = /* @__PURE__ */ w((e, t) => {
+  const { __scopeTabs: n, value: o, onValueChange: s, defaultValue: r, orientation: c = "horizontal", dir: a, activationMode: u = "automatic", ...i } = e, p = Se(a), [l, m] = ye({
     prop: o,
     onChange: s,
     defaultProp: r
   });
-  return /* @__PURE__ */ g(Tt, {
+  return /* @__PURE__ */ g(Nt, {
     scope: n,
-    baseId: Ie(),
+    baseId: Ce(),
     value: l,
     onValueChange: m,
     orientation: c,
@@ -663,9 +664,9 @@ const Ae = "Tabs", [wt, nn] = ae(Ae, [
   }, i, {
     ref: t
   })));
-}), At = "TabsList", Et = /* @__PURE__ */ w((e, t) => {
-  const { __scopeTabs: n, loop: o = !0, ...s } = e, r = de(At, n), c = Ee(n);
-  return /* @__PURE__ */ g(It, C({
+}), Et = "TabsList", Pt = /* @__PURE__ */ w((e, t) => {
+  const { __scopeTabs: n, loop: o = !0, ...s } = e, r = de(Et, n), c = Pe(n);
+  return /* @__PURE__ */ g(Ct, C({
     asChild: !0
   }, c, {
     orientation: r.orientation,
@@ -677,9 +678,9 @@ const Ae = "Tabs", [wt, nn] = ae(Ae, [
   }, s, {
     ref: t
   })));
-}), Pt = "TabsTrigger", Rt = /* @__PURE__ */ w((e, t) => {
-  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({
+}), Rt = "TabsTrigger", Mt = /* @__PURE__ */ w((e, t) => {
+  const { __scopeTabs: n, value: o, disabled: s = !1, ...r } = e, c = de(Rt, n), a = Pe(n), u = Re(c.baseId, o), i = Me(c.baseId, o), p = o === c.value;
+  return /* @__PURE__ */ g(yt, C({
     asChild: !0
   }, a, {
     focusable: !s,
@@ -695,29 +696,29 @@ const Ae = "Tabs", [wt, nn] = ae(Ae, [
     id: u
   }, r, {
     ref: t,
-    onMouseDown: F(e.onMouseDown, (l) => {
+    onMouseDown: O(e.onMouseDown, (l) => {
       !s && l.button === 0 && l.ctrlKey === !1 ? c.onValueChange(o) : l.preventDefault();
     }),
-    onKeyDown: F(e.onKeyDown, (l) => {
+    onKeyDown: O(e.onKeyDown, (l) => {
       [
         " ",
         "Enter"
       ].includes(l.key) && c.onValueChange(o);
     }),
-    onFocus: F(e.onFocus, () => {
+    onFocus: O(e.onFocus, () => {
       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 = de(Mt, n), u = Pe(a.baseId, o), i = Re(a.baseId, o), p = o === a.value, l = R(p);
+}), Ot = "TabsContent", Ft = /* @__PURE__ */ w((e, t) => {
+  const { __scopeTabs: n, value: o, forceMount: s, children: r, ...c } = e, a = de(Ot, n), u = Re(a.baseId, o), i = Me(a.baseId, o), p = o === a.value, l = R(p);
   return N(() => {
     const m = requestAnimationFrame(
       () => l.current = !1
     );
     return () => cancelAnimationFrame(m);
   }, []), /* @__PURE__ */ g(
-    Ne,
+    Ae,
     {
       present: s || p
     },
@@ -738,17 +739,17 @@ const Ae = "Tabs", [wt, nn] = ae(Ae, [
     }), m && r)
   );
 });
-function Pe(e, t) {
+function Re(e, t) {
   return `${e}-trigger-${t}`;
 }
-function Re(e, t) {
+function Me(e, t) {
   return `${e}-content-${t}`;
 }
-const Ot = Nt, Dt = Et, qt = Rt, Lt = Ft;
-function Ut(e) {
+const Dt = At, qt = Pt, Lt = Mt, Ut = Ft;
+function Vt(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var Me = { exports: {} };
+var Oe = { exports: {} };
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
@@ -783,29 +784,42 @@ var Me = { exports: {} };
     }
     e.exports ? (n.default = n, e.exports = n) : window.classNames = n;
   })();
-})(Me);
-var Vt = Me.exports;
-const le = /* @__PURE__ */ Ut(Vt), Bt = {
-  "purpur-tab-content": "_purpur-tab-content_1x2zs_1"
-}, Gt = le.bind(Bt), jt = "purpur-tab-content", kt = w(
-  ({ children: e, tabId: t, "data-testid": n, className: o, ...s }, r) => /* @__PURE__ */ T(
-    Lt,
+})(Oe);
+var Bt = Oe.exports;
+const le = /* @__PURE__ */ Vt(Bt), Gt = {
+  "purpur-tab-content": "_purpur-tab-content_1ugbi_1",
+  "purpur-tab-content--force-mount": "_purpur-tab-content--force-mount_1ugbi_15"
+}, jt = le.bind(Gt), me = "purpur-tab-content", kt = w(
+  ({
+    children: e,
+    tabId: t,
+    "data-testid": n,
+    className: o,
+    disableForceMount: s,
+    ...r
+  }, c) => /* @__PURE__ */ T(
+    Ut,
     {
-      ref: r,
-      className: Gt([jt, o]),
+      ref: c,
+      className: jt([
+        me,
+        o,
+        { [`${me}--force-mount`]: !s }
+      ]),
       "data-testid": n,
       value: t,
-      ...s,
+      forceMount: !s || void 0,
+      ...r,
       children: e
     }
   )
-), zt = (e) => !!e && K(e) && !!e.props.name && !!e.props.tabId, Kt = {
+), Kt = (e) => !!e && z(e) && !!e.props.name && !!e.props.tabId, zt = {
   "purpur-tab-header": "_purpur-tab-header_18g3c_1",
   "purpur-tab-header--contained": "_purpur-tab-header--contained_18g3c_33",
   "purpur-tab-header--contained-negative": "_purpur-tab-header--contained-negative_18g3c_33",
   "purpur-tab-header--line": "_purpur-tab-header--line_18g3c_36",
   "purpur-tab-header--line-negative": "_purpur-tab-header--line-negative_18g3c_48"
-}, Wt = le.bind(Kt), me = "purpur-tab-header", Yt = w(
+}, Wt = le.bind(zt), _e = "purpur-tab-header", Yt = w(
   ({
     index: e,
     tabId: t,
@@ -815,10 +829,10 @@ const le = /* @__PURE__ */ Ut(Vt), Bt = {
     "data-testid": r,
     children: c
   }, a) => /* @__PURE__ */ T(
-    qt,
+    Lt,
     {
       id: `${t}-trigger`,
-      className: Wt([me, `${me}--${n}${o ? "-negative" : ""}`]),
+      className: Wt([_e, `${_e}--${n}${o ? "-negative" : ""}`]),
       value: t,
       "data-testid": r,
       "data-index": e,
@@ -861,7 +875,7 @@ const le = /* @__PURE__ */ Ut(Vt), Bt = {
   value: u,
   ...i
 }) => {
-  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([
+  const [p, l] = F({}), [m, _] = F(0), [f, h] = F(0), $ = P.toArray(e).filter(Kt), b = R(), v = R(new Array($.length)), U = 200, y = t === "line", j = q([
     S,
     `${S}--${t}${n ? "-negative" : ""}`,
     { [`${S}--fullWidth`]: o },
@@ -873,10 +887,10 @@ const le = /* @__PURE__ */ Ut(Vt), Bt = {
   N(() => {
     u && k($.findIndex((d) => d.props.tabId === u));
   }, [$, u]);
-  const [W, k] = O(x);
+  const [W, k] = F(x);
   if (new Set(V).size !== V.length)
     throw new Error("tabId must be unique");
-  const D = (d, I) => I || a ? `${I || a}-${d}` : void 0, z = () => {
+  const D = (d, I) => I || a ? `${I || a}-${d}` : void 0, K = () => {
     if (!y)
       return;
     const d = v.current[W];
@@ -897,13 +911,13 @@ const le = /* @__PURE__ */ Ut(Vt), Bt = {
       "aria-hidden": "true",
       tabIndex: -1,
       "data-testid": D("scroll-button"),
-      children: /* @__PURE__ */ T(he, { svg: d === "left" ? ze : Ke, size: "md" })
+      children: /* @__PURE__ */ T(xe, { svg: d === "left" ? Xe : Je, size: "md" })
     }
   );
-  return N(() => (window.addEventListener("resize", z), () => {
-    window.removeEventListener("resize", z);
+  return N(() => (window.addEventListener("resize", K), () => {
+    window.removeEventListener("resize", K);
   }), []), N(() => {
-    z();
+    K();
   }, [W, o, $.length, t]), N(() => {
     const d = (M) => {
       if (M.every((A) => A.isIntersecting) && M.length === $.length) {
@@ -911,13 +925,13 @@ const le = /* @__PURE__ */ Ut(Vt), Bt = {
         return;
       }
       M.forEach((A) => {
-        const be = Number(A.target.getAttribute("data-index")), Fe = be === 0, Oe = be === $.length - 1;
-        l((De) => ({
-          ...De,
+        const be = Number(A.target.getAttribute("data-index")), Fe = be === 0, De = be === $.length - 1;
+        l((qe) => ({
+          ...qe,
           ...Fe && {
             [`${S}__wrapper--scroll-end`]: !A.isIntersecting
           },
-          ...Oe && {
+          ...De && {
             [`${S}__wrapper--scroll-start`]: !A.isIntersecting
           }
         }));
@@ -930,7 +944,7 @@ const le = /* @__PURE__ */ Ut(Vt), Bt = {
       B.forEach((M) => I.unobserve(M));
     };
   }, [$.length]), /* @__PURE__ */ T(
-    Ot,
+    Dt,
     {
       defaultValue: c ?? $[0].props.tabId,
       onValueChange: Q,
@@ -941,7 +955,7 @@ const le = /* @__PURE__ */ Ut(Vt), Bt = {
       children: /* @__PURE__ */ ee("div", { className: q(`${S}__container`), children: [
         /* @__PURE__ */ ee("div", { className: q([`${S}__wrapper`, p]), children: [
           /* @__PURE__ */ ee(
-            Dt,
+            qt,
             {
               ref: (d) => {
                 b.current = d;