welcome-ui 10.0.0-alpha.10 → 10.0.0-alpha.12

package/dist/Tabs.js

@@ -1,125 +1,125 @@
 "use client";
 import './Tabs.css';
-import { jsx as _, jsxs as Ie } from "react/jsx-runtime";
-import { C as ee, a as te, h as q, b as Se, j as xe } from "./SBSPVDDI-CmtnvvUX.js";
-import { e as oe, y as ge, f as F, c as W, b as j, _ as H, i as K, l as se, F as he, d as g, a as v, u as V, k as ne, af as Ce, v as Te, Z as _e, M as Pe, A, z as k, B as O, V as G, C as J } from "./OE2EFRVA-Dg1R6gaC.js";
-import { b as z, m as Ee, o as Q, c as ye, s as B, d as y, f as Ne, u as re, a as X } from "./RTNCFSKZ-BywELldk.js";
-import ae, { useCallback as ce, useRef as D, useEffect as Y, useState as U, createContext as ie, useMemo as we, cloneElement as Re, forwardRef as le } from "react";
-import { c as M } from "./index-PAaZGbyz.js";
-import { f as $e } from "./forwardRefWithAs-8eP3ZN15.js";
-import { u as Le, b as ke } from "./OLVWQA7U-Dia3UUnG.js";
-import { m as Oe, g as Be, u as ze } from "./useForkRef-D807AV7D.js";
-import { u as Ae, a as Me } from "./use-viewport-CgrficYB.js";
-import { u as Ve, d as De } from "./T22PY7TE-gLuJpoOm.js";
-import { P as Fe, b as We } from "./Y67KZUMI-BwLWwpNF.js";
-import { c as je, a as He, u as Ke } from "./B7UTNDHN-BghjolIs.js";
-var Z = oe(
-  [te],
-  [ee]
-), Ue = Z.useScopedContext, de = Z.useProviderContext, ue = Z.ScopedContextProvider, Ze = "button", qe = W(function(r) {
-  var t = r, {
+import { jsx as T, jsxs as pe } from "react/jsx-runtime";
+import { C as X, a as Y, h as A, b as fe, j as ve } from "./SBSPVDDI-CmtnvvUX.js";
+import { e as ee, y as Ie, f as F, c as W, b as j, _ as B, i as H, l as te, F as ge, d as S, a as f, u as $, k as oe, af as xe, v as Se, Z as Pe, M as Ce, A as M, z as O, B as V, V as U, C as Z } from "./OE2EFRVA-Dg1R6gaC.js";
+import { u as Te, b as _e } from "./OLVWQA7U-Dia3UUnG.js";
+import he, { useCallback as ne, useRef as q, useEffect as G, useState as ke, createContext as re, useMemo as ye, forwardRef as se, cloneElement as Ee, isValidElement as we } from "react";
+import { c as ae } from "./index-PAaZGbyz.js";
+import { b as D, m as Ne, o as J, c as Re, s as z, d as y, f as Le, u as ce, a as Q } from "./RTNCFSKZ-BywELldk.js";
+import { Badge as Oe } from "./Badge.js";
+import { f as Ve } from "./forwardRefWithAs-8eP3ZN15.js";
+import { Icon as ze } from "./Icon.js";
+import { u as De, d as Me } from "./T22PY7TE-gLuJpoOm.js";
+import { P as $e, b as Fe } from "./Y67KZUMI-BwLWwpNF.js";
+import { c as We, a as je, u as Be } from "./B7UTNDHN-BghjolIs.js";
+var K = ee(
+  [Y],
+  [X]
+), He = K.useScopedContext, ie = K.useProviderContext, le = K.ScopedContextProvider, Ke = "button", Ae = W(function(s) {
+  var t = s, {
     store: e,
-    getItem: s
-  } = t, n = H(t, [
+    getItem: n
+  } = t, a = B(t, [
     "store",
     "getItem"
-  ]), m;
-  const i = Ue();
-  e = e || i, K(
+  ]), b;
+  const c = He();
+  e = e || c, H(
     e,
     process.env.NODE_ENV !== "production" && "Tab must be wrapped in a TabList component."
   );
-  const d = se(), a = n.id || d, h = he(n), c = ce(
-    (f) => {
-      const N = g(v({}, f), { dimmed: h });
-      return s ? s(N) : N;
+  const u = te(), r = a.id || u, _ = ge(a), i = ne(
+    (m) => {
+      const E = S(f({}, m), { dimmed: _ });
+      return n ? n(E) : E;
     },
-    [h, s]
-  ), b = n.onClick, x = V((f) => {
-    b == null || b(f), !f.defaultPrevented && (e == null || e.setSelectedId(a));
-  }), u = e.panels.useState(
-    (f) => {
-      var N;
-      return (N = f.items.find((l) => l.tabId === a)) == null ? void 0 : N.id;
+    [_, n]
+  ), v = a.onClick, I = $((m) => {
+    v == null || v(m), !m.defaultPrevented && (e == null || e.setSelectedId(r));
+  }), d = e.panels.useState(
+    (m) => {
+      var E;
+      return (E = m.items.find((l) => l.tabId === r)) == null ? void 0 : E.id;
     }
-  ), p = d ? n.shouldRegisterItem : !1, I = e.useState((f) => !!a && f.activeId === a), S = e.useState((f) => !!a && f.selectedId === a), P = e.useState((f) => !!e.item(f.activeId)), C = I || S && !P, w = S || ((m = n.accessibleWhenDisabled) != null ? m : !0);
-  if (z(
+  ), p = u ? a.shouldRegisterItem : !1, g = e.useState((m) => !!r && m.activeId === r), x = e.useState((m) => !!r && m.selectedId === r), h = e.useState((m) => !!e.item(m.activeId)), P = g || x && !h, w = x || ((b = a.accessibleWhenDisabled) != null ? b : !0);
+  if (D(
     e.combobox || e.composite,
     "virtualFocus"
-  ) && (n = g(v({}, n), {
+  ) && (a = S(f({}, a), {
     tabIndex: -1
-  })), n = g(v({
-    id: a,
+  })), a = S(f({
+    id: r,
     role: "tab",
-    "aria-selected": S,
-    "aria-controls": u || void 0
-  }, n), {
-    onClick: x
+    "aria-selected": x,
+    "aria-controls": d || void 0
+  }, a), {
+    onClick: I
   }), e.composite) {
-    const f = {
-      id: a,
+    const m = {
+      id: r,
       accessibleWhenDisabled: w,
       store: e.composite,
-      shouldRegisterItem: C && p,
-      rowId: n.rowId,
-      render: n.render
+      shouldRegisterItem: P && p,
+      rowId: a.rowId,
+      render: a.render
     };
-    n = g(v({}, n), {
-      render: /* @__PURE__ */ _(
-        q,
-        g(v({}, f), {
-          render: e.combobox && e.composite !== e.combobox ? /* @__PURE__ */ _(q, g(v({}, f), { store: e.combobox })) : f.render
+    a = S(f({}, a), {
+      render: /* @__PURE__ */ T(
+        A,
+        S(f({}, m), {
+          render: e.combobox && e.composite !== e.combobox ? /* @__PURE__ */ T(A, S(f({}, m), { store: e.combobox })) : m.render
         })
       )
     });
   }
-  return n = Se(g(v({
+  return a = fe(S(f({
     store: e
-  }, n), {
+  }, a), {
     accessibleWhenDisabled: w,
-    getItem: c,
+    getItem: i,
     shouldRegisterItem: p
-  })), n;
-}), Ge = ge(
-  F(function(r) {
-    const t = qe(r);
-    return j(Ze, t);
+  })), a;
+}), Ue = Ie(
+  F(function(s) {
+    const t = Ae(s);
+    return j(Ke, t);
   })
-), Je = "div", Qe = W(
-  function(r) {
-    var t = r, { store: e } = t, s = H(t, ["store"]);
-    const n = de();
-    e = e || n, K(
+), Ze = "div", qe = W(
+  function(s) {
+    var t = s, { store: e } = t, n = B(t, ["store"]);
+    const a = ie();
+    e = e || a, H(
       e,
       process.env.NODE_ENV !== "production" && "TabList must receive a `store` prop or be wrapped in a TabProvider component."
     );
-    const m = e.useState(
-      (i) => i.orientation === "both" ? void 0 : i.orientation
+    const b = e.useState(
+      (c) => c.orientation === "both" ? void 0 : c.orientation
     );
-    return s = ne(
-      s,
-      (i) => /* @__PURE__ */ _(ue, { value: e, children: i }),
+    return n = oe(
+      n,
+      (c) => /* @__PURE__ */ T(le, { value: e, children: c }),
       [e]
-    ), e.composite && (s = v({
+    ), e.composite && (n = f({
       focusable: !1
-    }, s)), s = v({
+    }, n)), n = f({
       role: "tablist",
-      "aria-orientation": m
-    }, s), s = Le(v({ store: e }, s)), s;
+      "aria-orientation": b
+    }, n), n = Te(f({ store: e }, n)), n;
   }
-), Xe = F(function(r) {
-  const t = Qe(r);
-  return j(Je, t);
-}), Ye = "div", et = W(
-  function(r) {
-    var t = r, {
+), Ge = F(function(s) {
+  const t = qe(s);
+  return j(Ze, t);
+}), Je = "div", Qe = W(
+  function(s) {
+    var t = s, {
       store: e,
-      unmountOnHide: s,
-      tabId: n,
-      getItem: m,
-      scrollRestoration: i,
-      scrollElement: d
-    } = t, a = H(t, [
+      unmountOnHide: n,
+      tabId: a,
+      getItem: b,
+      scrollRestoration: c,
+      scrollElement: u
+    } = t, r = B(t, [
       "store",
       "unmountOnHide",
       "tabId",
@@ -127,109 +127,109 @@ var Z = oe(
       "scrollRestoration",
       "scrollElement"
     ]);
-    const h = de();
-    e = e || h, K(
+    const _ = ie();
+    e = e || _, H(
       e,
       process.env.NODE_ENV !== "production" && "TabPanel must receive a `store` prop or be wrapped in a TabProvider component."
     );
-    const c = D(null), b = se(a.id), x = z(
+    const i = q(null), v = te(r.id), I = D(
       e.panels,
       () => {
         var l;
-        return n || ((l = e == null ? void 0 : e.panels.item(b)) == null ? void 0 : l.tabId);
+        return a || ((l = e == null ? void 0 : e.panels.item(v)) == null ? void 0 : l.tabId);
       }
-    ), u = z(
+    ), d = D(
       e,
-      (l) => !!x && l.selectedId === x
-    ), p = Ve({ open: u }), I = z(p, "mounted"), S = D(
+      (l) => !!I && l.selectedId === I
+    ), p = De({ open: d }), g = D(p, "mounted"), x = q(
       /* @__PURE__ */ new Map()
-    ), P = V(() => {
-      const l = c.current;
-      return l ? d ? typeof d == "function" ? d(l) : "current" in d ? d.current : d : l : null;
+    ), h = $(() => {
+      const l = i.current;
+      return l ? u ? typeof u == "function" ? u(l) : "current" in u ? u.current : u : l : null;
     });
-    Y(() => {
-      var l, E;
-      if (!i || !I) return;
-      const T = P();
-      if (!T) return;
-      if (i === "reset") {
-        T.scroll(0, 0);
+    G(() => {
+      var l, k;
+      if (!c || !g) return;
+      const C = h();
+      if (!C) return;
+      if (c === "reset") {
+        C.scroll(0, 0);
         return;
       }
-      if (!x) return;
-      const R = S.current.get(x);
-      T.scroll((l = R == null ? void 0 : R.x) != null ? l : 0, (E = R == null ? void 0 : R.y) != null ? E : 0);
+      if (!I) return;
+      const N = x.current.get(I);
+      C.scroll((l = N == null ? void 0 : N.x) != null ? l : 0, (k = N == null ? void 0 : N.y) != null ? k : 0);
       const L = () => {
-        S.current.set(x, {
-          x: T.scrollLeft,
-          y: T.scrollTop
+        x.current.set(I, {
+          x: C.scrollLeft,
+          y: C.scrollTop
         });
       };
-      return T.addEventListener("scroll", L), () => {
-        T.removeEventListener("scroll", L);
+      return C.addEventListener("scroll", L), () => {
+        C.removeEventListener("scroll", L);
       };
-    }, [i, I, x, P, e]);
-    const [C, w] = U(!1);
-    Y(() => {
-      const l = c.current;
+    }, [c, g, I, h, e]);
+    const [P, w] = ke(!1);
+    G(() => {
+      const l = i.current;
       if (!l) return;
-      const E = Ce(l);
-      w(!!E.length);
+      const k = xe(l);
+      w(!!k.length);
     }, []);
-    const $ = ce(
+    const R = ne(
       (l) => {
-        const E = g(v({}, l), { id: b || l.id, tabId: n });
-        return m ? m(E) : E;
+        const k = S(f({}, l), { id: v || l.id, tabId: a });
+        return b ? b(k) : k;
       },
-      [b, n, m]
-    ), f = a.onKeyDown, N = V((l) => {
-      if (f == null || f(l), l.defaultPrevented || !(e != null && e.composite)) return;
-      const T = {
+      [v, a, b]
+    ), m = r.onKeyDown, E = $((l) => {
+      if (m == null || m(l), l.defaultPrevented || !(e != null && e.composite)) return;
+      const C = {
         ArrowLeft: e.previous,
         ArrowRight: e.next,
         Home: e.first,
         End: e.last
       }[l.key];
-      if (!T) return;
-      const { selectedId: R } = e.getState(), L = T({ activeId: R });
+      if (!C) return;
+      const { selectedId: N } = e.getState(), L = C({ activeId: N });
       L && (l.preventDefault(), e.move(L));
     });
-    return a = ne(
-      a,
-      (l) => /* @__PURE__ */ _(ue, { value: e, children: l }),
+    return r = oe(
+      r,
+      (l) => /* @__PURE__ */ T(le, { value: e, children: l }),
       [e]
-    ), a = g(v({
-      id: b,
+    ), r = S(f({
+      id: v,
       role: "tabpanel",
-      "aria-labelledby": x || void 0
-    }, a), {
-      children: s && !I ? null : a.children,
-      ref: Te(c, a.ref),
-      onKeyDown: N
-    }), a = _e(v({
+      "aria-labelledby": I || void 0
+    }, r), {
+      children: n && !g ? null : r.children,
+      ref: Se(i, r.ref),
+      onKeyDown: E
+    }), r = Pe(f({
       // If the tab panel is rendered as part of another composite widget such
       // as combobox, it should not be focusable.
-      focusable: !e.composite && !C
-    }, a)), a = De(v({ store: p }, a)), a = xe(g(v({ store: e.panels }, a), { getItem: $ })), a;
+      focusable: !e.composite && !P
+    }, r)), r = Me(f({ store: p }, r)), r = ve(S(f({ store: e.panels }, r), { getItem: R })), r;
   }
-), tt = F(function(r) {
-  const t = et(r);
-  return j(Ye, t);
-}), ot = oe(
-  [We, te],
-  [Fe, ee]
-), st = ot.useContext;
-ie(!1);
-ie(null);
-function nt(o = {}) {
-  var r = o, {
+), Xe = F(function(s) {
+  const t = Qe(s);
+  return j(Je, t);
+}), Ye = ee(
+  [Fe, Y],
+  [$e, X]
+), et = Ye.useContext;
+re(!1);
+re(null);
+function tt(o = {}) {
+  var s = o, {
     composite: t,
     combobox: e
-  } = r, s = Pe(r, [
+  } = s, n = Ce(s, [
     "composite",
     "combobox"
   ]);
-  const n = [
+  const a = [
     "items",
     "renderedItems",
     "moves",
@@ -240,224 +240,225 @@ function nt(o = {}) {
     "focusLoop",
     "focusShift",
     "focusWrap"
-  ], m = Ee(
-    s.store,
-    Q(t, n),
-    Q(e, n)
-  ), i = m == null ? void 0 : m.getState(), d = je(A(O({}, s), {
-    store: m,
+  ], b = Ne(
+    n.store,
+    J(t, a),
+    J(e, a)
+  ), c = b == null ? void 0 : b.getState(), u = We(M(V({}, n), {
+    store: b,
     // We need to explicitly set the default value of `includesBaseElement` to
     // `false` since we don't want the composite store to default it to `true`
     // when the activeId state is null, which could be the case when rendering
     // combobox with tab.
-    includesBaseElement: k(
-      s.includesBaseElement,
-      i == null ? void 0 : i.includesBaseElement,
+    includesBaseElement: O(
+      n.includesBaseElement,
+      c == null ? void 0 : c.includesBaseElement,
       !1
     ),
-    orientation: k(
-      s.orientation,
-      i == null ? void 0 : i.orientation,
+    orientation: O(
+      n.orientation,
+      c == null ? void 0 : c.orientation,
       "horizontal"
     ),
-    focusLoop: k(s.focusLoop, i == null ? void 0 : i.focusLoop, !0)
-  })), a = He(), h = A(O({}, d.getState()), {
-    selectedId: k(
-      s.selectedId,
-      i == null ? void 0 : i.selectedId,
-      s.defaultSelectedId
+    focusLoop: O(n.focusLoop, c == null ? void 0 : c.focusLoop, !0)
+  })), r = je(), _ = M(V({}, u.getState()), {
+    selectedId: O(
+      n.selectedId,
+      c == null ? void 0 : c.selectedId,
+      n.defaultSelectedId
     ),
-    selectOnMove: k(
-      s.selectOnMove,
-      i == null ? void 0 : i.selectOnMove,
+    selectOnMove: O(
+      n.selectOnMove,
+      c == null ? void 0 : c.selectOnMove,
       !0
     )
-  }), c = ye(h, d, m);
-  B(
-    c,
-    () => y(c, ["moves"], () => {
-      const { activeId: u, selectOnMove: p } = c.getState();
-      if (!p || !u) return;
-      const I = d.item(u);
-      I && (I.dimmed || I.disabled || c.setState("selectedId", I.id));
+  }), i = Re(_, u, b);
+  z(
+    i,
+    () => y(i, ["moves"], () => {
+      const { activeId: d, selectOnMove: p } = i.getState();
+      if (!p || !d) return;
+      const g = u.item(d);
+      g && (g.dimmed || g.disabled || i.setState("selectedId", g.id));
     })
   );
-  let b = !0;
-  B(
-    c,
-    () => Ne(c, ["selectedId"], (u, p) => {
-      if (!b) {
-        b = !0;
+  let v = !0;
+  z(
+    i,
+    () => Le(i, ["selectedId"], (d, p) => {
+      if (!v) {
+        v = !0;
         return;
       }
-      t && u.selectedId === p.selectedId || c.setState("activeId", u.selectedId);
+      t && d.selectedId === p.selectedId || i.setState("activeId", d.selectedId);
     })
-  ), B(
-    c,
-    () => y(c, ["selectedId", "renderedItems"], (u) => {
-      if (u.selectedId !== void 0) return;
-      const { activeId: p, renderedItems: I } = c.getState(), S = d.item(p);
-      if (S && !S.disabled && !S.dimmed)
-        c.setState("selectedId", S.id);
+  ), z(
+    i,
+    () => y(i, ["selectedId", "renderedItems"], (d) => {
+      if (d.selectedId !== void 0) return;
+      const { activeId: p, renderedItems: g } = i.getState(), x = u.item(p);
+      if (x && !x.disabled && !x.dimmed)
+        i.setState("selectedId", x.id);
       else {
-        const P = I.find(
-          (C) => !C.disabled && !C.dimmed
+        const h = g.find(
+          (P) => !P.disabled && !P.dimmed
         );
-        c.setState("selectedId", P == null ? void 0 : P.id);
+        i.setState("selectedId", h == null ? void 0 : h.id);
       }
     })
-  ), B(
-    c,
-    () => y(c, ["renderedItems"], (u) => {
-      const p = u.renderedItems;
+  ), z(
+    i,
+    () => y(i, ["renderedItems"], (d) => {
+      const p = d.renderedItems;
       if (p.length)
-        return y(a, ["renderedItems"], (I) => {
-          const S = I.renderedItems;
-          S.some((C) => !C.tabId) && S.forEach((C, w) => {
-            if (C.tabId) return;
-            const $ = p[w];
-            $ && a.renderItem(A(O({}, C), { tabId: $.id }));
+        return y(r, ["renderedItems"], (g) => {
+          const x = g.renderedItems;
+          x.some((P) => !P.tabId) && x.forEach((P, w) => {
+            if (P.tabId) return;
+            const R = p[w];
+            R && r.renderItem(M(V({}, P), { tabId: R.id }));
           });
         });
     })
   );
-  let x = null;
-  return B(c, () => {
-    const u = () => {
-      x = c.getState().selectedId;
+  let I = null;
+  return z(i, () => {
+    const d = () => {
+      I = i.getState().selectedId;
     }, p = () => {
-      b = !1, c.setState("selectedId", x);
+      v = !1, i.setState("selectedId", I);
     };
     if (t && "setSelectElement" in t)
-      return G(
-        y(t, ["value"], u),
+      return U(
+        y(t, ["value"], d),
         y(t, ["mounted"], p)
       );
     if (e)
-      return G(
-        y(e, ["selectedValue"], u),
+      return U(
+        y(e, ["selectedValue"], d),
         y(e, ["mounted"], p)
       );
-  }), A(O(O({}, d), c), {
-    panels: a,
-    setSelectedId: (u) => c.setState("selectedId", u),
-    select: (u) => {
-      c.setState("selectedId", u), d.move(u);
+  }), M(V(V({}, u), i), {
+    panels: r,
+    setSelectedId: (d) => i.setState("selectedId", d),
+    select: (d) => {
+      i.setState("selectedId", d), u.move(d);
     }
   });
 }
-function rt(o, r, t) {
-  J(r, [t.composite, t.combobox]), o = Ke(o, r, t), X(o, t, "selectedId", "setSelectedId"), X(o, t, "selectOnMove");
-  const [e, s] = re(() => o.panels, {});
-  return J(s, [o, s]), Object.assign(
-    we(() => g(v({}, o), { panels: e }), [o, e]),
+function ot(o, s, t) {
+  Z(s, [t.composite, t.combobox]), o = Be(o, s, t), Q(o, t, "selectedId", "setSelectedId"), Q(o, t, "selectOnMove");
+  const [e, n] = ce(() => o.panels, {});
+  return Z(n, [o, n]), Object.assign(
+    ye(() => S(f({}, o), { panels: e }), [o, e]),
     { composite: t.composite, combobox: t.combobox }
   );
 }
-function kt(o = {}) {
-  const r = ke(), t = st() || r;
-  o = g(v({}, o), {
+function St(o = {}) {
+  const s = _e(), t = et() || s;
+  o = S(f({}, o), {
     composite: o.composite !== void 0 ? o.composite : t,
-    combobox: o.combobox !== void 0 ? o.combobox : r
+    combobox: o.combobox !== void 0 ? o.combobox : s
   });
-  const [e, s] = re(nt, o);
-  return rt(e, s, o);
-}
-const me = (o) => {
-  if (!o || typeof window > "u") return 1;
-  const r = Number(window.getComputedStyle(o).scale);
-  return isNaN(r) ? me(o.parentElement) : r;
-};
-function at(o, r) {
-  const [t, e] = U(null), s = ae.Children.map(r, (n) => n.props.id === o ? Re(n, {
-    ...n.props,
-    ref: Oe(e, Be(n))
-  }) : n);
-  return { activeTab: t, tabs: s };
+  const [e, n] = ce(tt, o);
+  return ot(e, n, o);
 }
-const ct = "_root_156xk_2", it = {
-  root: ct
+const nt = "_root_nt8z5_2", de = {
+  root: nt,
+  "size-lg": "_size-lg_nt8z5_55",
+  "size-md": "_size-md_nt8z5_62",
+  "tab-list": "_tab-list_nt8z5_72"
 };
-function lt({ activeTab: o, listRef: r, orientation: t }) {
-  const [e, s] = U({}), { height: n, width: m } = Ae();
-  return Me(() => {
-    const i = r.current;
-    if (!i || !o) return;
-    const d = i.getBoundingClientRect(), a = o.getBoundingClientRect(), h = me(i);
-    if (t === "vertical") {
-      const c = a.top - d.top, b = a.height;
-      s({
-        offset: c,
-        orientation: t,
-        size: b
-      });
-    } else {
-      const c = (a.left - d.left + i.scrollLeft) / h, b = a.width / h;
-      s({
-        offset: isNaN(c) ? 0 : c,
-        orientation: t,
-        size: isNaN(b) ? 0 : b
-      });
+function rt({
+  icon: o,
+  iconColor: s,
+  isActive: t
+}) {
+  if (!o) return null;
+  if (typeof o != "string") return o;
+  const e = (() => {
+    switch (s) {
+      case "blue":
+        return t ? "text-background-accent-blue-strong" : "text-background-accent-blue-primary";
+      case "green":
+        return t ? "text-background-accent-green-strong" : "text-background-accent-green-primary";
+      case "orange":
+        return t ? "text-background-accent-orange-strong" : "text-background-accent-orange-primary";
+      case "pink":
+        return t ? "text-background-accent-pink-strong" : "text-background-accent-pink-primary";
+      case "teal":
+        return t ? "text-background-accent-teal-strong" : "text-background-accent-teal-primary";
+      case "violet":
+        return t ? "text-background-accent-violet-strong" : "text-background-accent-violet-primary";
+      case "warm":
+        return t ? "text-background-accent-warm-strong" : "text-background-accent-warm-primary";
+      default:
+        return "";
     }
-  }, [r, o, m, n, t]), e;
+  })();
+  return /* @__PURE__ */ T(ze, { className: e, name: o });
 }
-const dt = M(it), fe = ({ activeTab: o, listRef: r, orientation: t }) => {
-  const e = lt({ activeTab: o, listRef: r, orientation: t }), s = {
-    "--activeBarOffset": `${e.offset}px`,
-    "--activeBarSize": `${e.size}px`
-  };
-  return /* @__PURE__ */ _("span", { className: dt("root", `orientation-${t}`), style: s });
-};
-fe.displayName = "Tab.ActiveBar";
-const ut = "_root_3pg7f_2", mt = {
-  root: ut,
-  "size-md": "_size-md_3pg7f_20",
-  "size-sm": "_size-sm_3pg7f_23"
-}, ft = M(mt), be = le(
-  ({ children: o, className: r, size: t = "md", store: e, ...s }, n) => {
-    const m = D(), [, i] = ze(n, m), { orientation: d, selectedId: a } = z(e), { activeTab: h, tabs: c } = at(a, o), b = ae.Children.count(o) > 1;
-    return /* @__PURE__ */ Ie(
-      Xe,
+const st = ae(de), ue = Ve(
+  ({
+    as: o,
+    badge: s,
+    children: t,
+    className: e,
+    icon: n,
+    iconColor: a = "violet",
+    id: b,
+    size: c = "lg",
+    store: u,
+    ...r
+  }, _) => {
+    const { selectedId: i } = D(u), v = i === b, I = rt({
+      icon: n,
+      iconColor: a,
+      isActive: v
+    }), d = v ? "neutral" : "warm";
+    return /* @__PURE__ */ pe(
+      Ue,
       {
-        className: ft("root", `size-${t}`, r),
-        ref: i,
-        store: e,
-        ...s,
+        className: st("root", `size-${c}`, e),
+        id: b,
+        ref: _,
+        render: o ? /* @__PURE__ */ T(o, {}) : void 0,
+        store: u,
+        ...r,
         children: [
-          c,
-          b ? /* @__PURE__ */ _(fe, { activeTab: h, listRef: m, orientation: d }) : null
+          I,
+          t,
+          s ? /* @__PURE__ */ T(Oe, { size: c, variant: d, children: s }) : null
         ]
       }
     );
   }
 );
-be.displayName = "Tab.List";
-const bt = "_root_etkg6_2", pt = {
-  root: bt
-}, vt = M(pt), pe = le(
-  ({ children: o, store: r, tabId: t, ...e }, s) => /* @__PURE__ */ _(tt, { className: vt("root"), ref: s, store: r, tabId: t, ...e, children: o })
-);
-pe.displayName = "Tab.Panel";
-const It = "_root_86cgt_2", St = {
-  root: It
-}, xt = M(St), ve = $e(
-  ({ as: o, children: r, className: t, id: e, store: s, ...n }, m) => /* @__PURE__ */ _(
-    Ge,
-    {
-      className: xt("root", t),
-      id: e,
-      ref: m,
-      render: o ? /* @__PURE__ */ _(o, {}) : void 0,
-      store: s,
-      ...n,
-      children: r
-    }
-  )
+ue.displayName = "Tabs.Tab";
+const me = se(({ children: o, ...s }, t) => /* @__PURE__ */ T(Xe, { ref: t, ...s, children: o }));
+me.displayName = "Tabs.Panel";
+const at = ae(de), be = se(
+  ({ children: o, className: s, size: t = "lg", store: e, ...n }, a) => {
+    const b = he.Children.map(
+      o,
+      (c) => we(c) ? Ee(c, { size: t }) : c
+    );
+    return /* @__PURE__ */ T(
+      Ge,
+      {
+        className: at("tab-list", `size-${t}`, s),
+        ref: a,
+        store: e,
+        ...n,
+        children: b
+      }
+    );
+  }
 );
-ve.displayName = "Tab";
-const Ot = Object.assign(ve, { List: be, Panel: pe });
+be.displayName = "Tabs";
+const Pt = Object.assign(be, { Panel: me, Tab: ue });
 export {
-  Ot as Tab,
-  ve as TabComponent,
-  kt as useTab
+  Pt as Tabs,
+  be as TabsComponent,
+  St as useTab
 };