welcome-ui 8.0.0 → 8.1.0-alpha.0

package/dist/Tabs.mjs

@@ -1,28 +1,29 @@
 "use client";
-import L, { createContext as re, useMemo as ge, useCallback as ae, useRef as z, useEffect as Z, useState as K, Children as Te, Fragment as Pe, cloneElement as Ce } from "react";
-import { u as Ee } from "./use-fork-ref-CUZErtAC.mjs";
-import { u as $e } from "./use-viewport-m3glsbna.mjs";
-import { u as ye } from "./use-isomorphic-layout-effect-Izr-e2pi.mjs";
-import j, { css as D, th as x, system as we } from "@xstyled/styled-components";
-import { C as ie, a as ce, d as ee, u as _e, e as Re } from "./P2CTZE2T-YPes1GXe.mjs";
-import { v as le, A as Le, B as V, C as A, D as O, Q as te, d as g, g as p, H as oe, c as Q, _ as U, i as X, x as de, l as Ne, b as H, t as M, w as Be, f as Y, h as q, E as ue, aa as Ae, e as Oe, r as ke } from "./LVA2YJMS-qFC9J-lt.mjs";
-import { c as De, b as Ve, u as Fe, a as Me } from "./ITI7HKP4-BONrZ9Pq.mjs";
-import { e as je, f as ze } from "./VGCJ63VH-B39w1tBw.mjs";
-import { m as He, o as ne, s as k, d as y, g as We, c as Ke, a as me, b as se, u as F } from "./YV4JVR4I-BGfUf3Nu.mjs";
-import { forwardRef as G } from "./System.mjs";
-import { u as Qe } from "./VEVQD5MH-ZMnHV8ZJ.mjs";
-import { P as Ue, a as Xe } from "./MTZPJQMC-C0Xe_WK4.mjs";
-var Ye = le(
-  [Xe, ce],
-  [Ue, ie]
-), qe = Ye.useContext;
-re(!1);
-re(null);
-function Ge(t = {}) {
-  var n = t, {
+import { j as $ } from "./jsx-runtime-B7I4PJ0H.mjs";
+import { forwardRef as W } from "./System.mjs";
+import z, { th as S, system as he, css as k } from "@xstyled/styled-components";
+import { C as ne, a as re, d as Q, u as ge, e as Te } from "./P2CTZE2T-DOT1mNnX.mjs";
+import { t as ae, z as Pe, A as D, B as j, C as A, P as Z, d as g, g as p, G as ee, v as Ce, f as K, c as G, h as U, _ as X, i as Y, w as ie, l as $e, b as F, D as ce, a9 as ye, e as we, m as Ee } from "./LVA2YJMS-C-kJ1lkr.mjs";
+import { c as _e, b as Re, u as Le, a as Ne } from "./ITI7HKP4-C89kOQb8.mjs";
+import { e as Be, f as je } from "./VGCJ63VH-C0UPBY-5.mjs";
+import { m as Ae, o as te, c as Oe, s as O, d as E, g as ke, a as le, b as oe, u as V } from "./YV4JVR4I-DPC8mMuG.mjs";
+import { createContext as de, useMemo as De, useCallback as ue, useRef as M, useEffect as se, useState as q, Children as Ve, Fragment as ze, cloneElement as Fe } from "react";
+import { u as Me } from "./use-fork-ref-DvaCTfQ_.mjs";
+import { u as He } from "./use-isomorphic-layout-effect-Izr-e2pi.mjs";
+import { u as We } from "./use-viewport-CWpjoHXy.mjs";
+import { u as Ke } from "./VEVQD5MH-0w9Y7Ytc.mjs";
+import { P as Ge, a as Ue } from "./MTZPJQMC-TybFZCho.mjs";
+var Xe = ae(
+  [Ue, re],
+  [Ge, ne]
+), Ye = Xe.useContext;
+de(!1);
+de(null);
+function qe(t = {}) {
+  var s = t, {
     composite: o,
     combobox: e
-  } = n, s = Le(n, [
+  } = s, n = Pe(s, [
     "composite",
     "combobox"
   ]);
@@ -37,105 +38,105 @@ function Ge(t = {}) {
     "focusLoop",
     "focusShift",
     "focusWrap"
-  ], m = He(
-    s.store,
-    ne(o, r),
-    ne(e, r)
-  ), c = m == null ? void 0 : m.getState(), d = De(V(O({}, s), {
+  ], m = Ae(
+    n.store,
+    te(o, r),
+    te(e, r)
+  ), c = m == null ? void 0 : m.getState(), d = _e(D(A({}, n), {
     store: m,
     // 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: A(
-      s.includesBaseElement,
+    includesBaseElement: j(
+      n.includesBaseElement,
       c == null ? void 0 : c.includesBaseElement,
       !1
     ),
-    orientation: A(
-      s.orientation,
+    orientation: j(
+      n.orientation,
       c == null ? void 0 : c.orientation,
       "horizontal"
     ),
-    focusLoop: A(s.focusLoop, c == null ? void 0 : c.focusLoop, !0)
-  })), a = Ve(), T = V(O({}, d.getState()), {
-    selectedId: A(
-      s.selectedId,
+    focusLoop: j(n.focusLoop, c == null ? void 0 : c.focusLoop, !0)
+  })), a = Re(), T = D(A({}, d.getState()), {
+    selectedId: j(
+      n.selectedId,
       c == null ? void 0 : c.selectedId,
-      s.defaultSelectedId
+      n.defaultSelectedId
     ),
-    selectOnMove: A(
-      s.selectOnMove,
+    selectOnMove: j(
+      n.selectOnMove,
       c == null ? void 0 : c.selectOnMove,
       !0
     )
-  }), i = Ke(T, d, m);
-  k(
+  }), i = Oe(T, d, m);
+  O(
     i,
-    () => y(i, ["moves"], () => {
-      const { activeId: u, selectOnMove: b } = i.getState();
-      if (!b || !u) return;
+    () => E(i, ["moves"], () => {
+      const { activeId: u, selectOnMove: f } = i.getState();
+      if (!f || !u) return;
       const I = d.item(u);
       I && (I.dimmed || I.disabled || i.setState("selectedId", I.id));
     })
   );
   let v = !0;
-  k(
+  O(
     i,
-    () => We(i, ["selectedId"], (u, b) => {
+    () => ke(i, ["selectedId"], (u, f) => {
       if (!v) {
         v = !0;
         return;
       }
-      o && u.selectedId === b.selectedId || i.setState("activeId", u.selectedId);
+      o && u.selectedId === f.selectedId || i.setState("activeId", u.selectedId);
     })
-  ), k(
+  ), O(
     i,
-    () => y(i, ["selectedId", "renderedItems"], (u) => {
+    () => E(i, ["selectedId", "renderedItems"], (u) => {
       if (u.selectedId !== void 0) return;
-      const { activeId: b, renderedItems: I } = i.getState(), S = d.item(b);
-      if (S && !S.disabled && !S.dimmed)
-        i.setState("selectedId", S.id);
+      const { activeId: f, renderedItems: I } = i.getState(), x = d.item(f);
+      if (x && !x.disabled && !x.dimmed)
+        i.setState("selectedId", x.id);
       else {
-        const E = I.find(
+        const y = I.find(
           (P) => !P.disabled && !P.dimmed
         );
-        i.setState("selectedId", E == null ? void 0 : E.id);
+        i.setState("selectedId", y == null ? void 0 : y.id);
       }
     })
-  ), k(
+  ), O(
     i,
-    () => y(i, ["renderedItems"], (u) => {
-      const b = u.renderedItems;
-      if (b.length)
-        return y(a, ["renderedItems"], (I) => {
-          const S = I.renderedItems;
-          S.some((P) => !P.tabId) && S.forEach((P, _) => {
+    () => E(i, ["renderedItems"], (u) => {
+      const f = u.renderedItems;
+      if (f.length)
+        return E(a, ["renderedItems"], (I) => {
+          const x = I.renderedItems;
+          x.some((P) => !P.tabId) && x.forEach((P, R) => {
             if (P.tabId) return;
-            const N = b[_];
-            N && a.renderItem(V(O({}, P), { tabId: N.id }));
+            const N = f[R];
+            N && a.renderItem(D(A({}, P), { tabId: N.id }));
           });
         });
     })
   );
   let h = null;
-  return k(i, () => {
+  return O(i, () => {
     const u = () => {
       h = i.getState().selectedId;
-    }, b = () => {
+    }, f = () => {
       v = !1, i.setState("selectedId", h);
     };
     if (o && "setSelectElement" in o)
-      return te(
-        y(o, ["value"], u),
-        y(o, ["mounted"], b)
+      return Z(
+        E(o, ["value"], u),
+        E(o, ["mounted"], f)
       );
     if (e)
-      return te(
-        y(e, ["selectedValue"], u),
-        y(e, ["mounted"], b)
+      return Z(
+        E(e, ["selectedValue"], u),
+        E(e, ["mounted"], f)
       );
-  }), V(O(O({}, d), i), {
+  }), D(A(A({}, d), i), {
     panels: a,
     setSelectedId: (u) => i.setState("selectedId", u),
     select: (u) => {
@@ -143,54 +144,54 @@ function Ge(t = {}) {
     }
   });
 }
-function Je(t, n, o) {
-  oe(n, [o.composite, o.combobox]), t = Fe(t, n, o), se(t, o, "selectedId", "setSelectedId"), se(t, o, "selectOnMove");
-  const [e, s] = me(() => t.panels, {});
-  return oe(s, [t, s]), Object.assign(
-    ge(() => g(p({}, t), { panels: e }), [t, e]),
+function Je(t, s, o) {
+  ee(s, [o.composite, o.combobox]), t = Le(t, s, o), oe(t, o, "selectedId", "setSelectedId"), oe(t, o, "selectOnMove");
+  const [e, n] = le(() => t.panels, {});
+  return ee(n, [t, n]), Object.assign(
+    De(() => g(p({}, t), { panels: e }), [t, e]),
     { composite: o.composite, combobox: o.combobox }
   );
 }
-function Ze(t = {}) {
-  const n = Qe(), o = qe() || n;
+function Qe(t = {}) {
+  const s = Ke(), o = Ye() || s;
   t = g(p({}, t), {
     composite: t.composite !== void 0 ? t.composite : o,
-    combobox: t.combobox !== void 0 ? t.combobox : n
+    combobox: t.combobox !== void 0 ? t.combobox : s
   });
-  const [e, s] = me(Ge, t);
-  return Je(e, s, t);
+  const [e, n] = le(qe, t);
+  return Je(e, n, t);
 }
-var J = le(
-  [ce],
-  [ie]
-), et = J.useScopedContext, fe = J.useProviderContext, be = J.ScopedContextProvider, tt = "button", ot = Q(function(n) {
-  var o = n, {
+var J = ae(
+  [re],
+  [ne]
+), Ze = J.useScopedContext, me = J.useProviderContext, be = J.ScopedContextProvider, et = "button", tt = G(function(s) {
+  var o = s, {
     store: e,
-    getItem: s
-  } = o, r = U(o, [
+    getItem: n
+  } = o, r = X(o, [
     "store",
     "getItem"
   ]), m;
-  const c = et();
-  e = e || c, X(
+  const c = Ze();
+  e = e || c, Y(
     e,
     process.env.NODE_ENV !== "production" && "Tab must be wrapped in a TabList component."
   );
-  const d = de(), a = r.id || d, T = Ne(r), i = ae(
-    (f) => {
-      const w = g(p({}, f), { dimmed: T });
-      return s ? s(w) : w;
+  const d = ie(), a = r.id || d, T = $e(r), i = ue(
+    (b) => {
+      const _ = g(p({}, b), { dimmed: T });
+      return n ? n(_) : _;
     },
-    [T, s]
-  ), v = r.onClick, h = H((f) => {
-    v == null || v(f), !f.defaultPrevented && (e == null || e.setSelectedId(a));
+    [T, n]
+  ), v = r.onClick, h = F((b) => {
+    v == null || v(b), !b.defaultPrevented && (e == null || e.setSelectedId(a));
   }), u = e.panels.useState(
-    (f) => {
-      var w;
-      return (w = f.items.find((l) => l.tabId === a)) == null ? void 0 : w.id;
+    (b) => {
+      var _;
+      return (_ = b.items.find((l) => l.tabId === a)) == null ? void 0 : _.id;
     }
-  ), b = d ? r.shouldRegisterItem : !1, I = e.useState((f) => !!a && f.activeId === a), S = e.useState((f) => !!a && f.selectedId === a), E = e.useState((f) => !!e.item(f.activeId)), P = I || S && !E, _ = S || ((m = r.accessibleWhenDisabled) != null ? m : !0);
-  if (F(
+  ), f = d ? r.shouldRegisterItem : !1, I = e.useState((b) => !!a && b.activeId === a), x = e.useState((b) => !!a && b.selectedId === a), y = e.useState((b) => !!e.item(b.activeId)), P = I || x && !y, R = x || ((m = r.accessibleWhenDisabled) != null ? m : !0);
+  if (V(
     e.combobox || e.composite,
     "virtualFocus"
   ) && (r = g(p({}, r), {
@@ -198,75 +199,75 @@ var J = le(
   })), r = g(p({
     id: a,
     role: "tab",
-    "aria-selected": S,
+    "aria-selected": x,
     "aria-controls": u || void 0
   }, r), {
     onClick: h
   }), e.composite) {
-    const f = {
+    const b = {
       id: a,
-      accessibleWhenDisabled: _,
+      accessibleWhenDisabled: R,
       store: e.composite,
-      shouldRegisterItem: P && b,
+      shouldRegisterItem: P && f,
       rowId: r.rowId,
       render: r.render
     };
     r = g(p({}, r), {
-      render: /* @__PURE__ */ M.jsx(
-        ee,
-        g(p({}, f), {
-          render: e.combobox && e.composite !== e.combobox ? /* @__PURE__ */ M.jsx(ee, g(p({}, f), { store: e.combobox })) : f.render
+      render: /* @__PURE__ */ $.jsx(
+        Q,
+        g(p({}, b), {
+          render: e.combobox && e.composite !== e.combobox ? /* @__PURE__ */ $.jsx(Q, g(p({}, b), { store: e.combobox })) : b.render
         })
       )
     });
   }
-  return r = _e(g(p({
+  return r = ge(g(p({
     store: e
   }, r), {
-    accessibleWhenDisabled: _,
+    accessibleWhenDisabled: R,
     getItem: i,
-    shouldRegisterItem: b
+    shouldRegisterItem: f
   })), r;
-}), nt = Be(
-  Y(function(n) {
-    const o = ot(n);
-    return q(tt, o);
+}), ot = Ce(
+  K(function(s) {
+    const o = tt(s);
+    return U(et, o);
   })
-), st = "div", rt = Q(
-  function(n) {
-    var o = n, { store: e } = o, s = U(o, ["store"]);
-    const r = fe();
-    e = e || r, X(
+), st = "div", nt = G(
+  function(s) {
+    var o = s, { store: e } = o, n = X(o, ["store"]);
+    const r = me();
+    e = e || r, Y(
       e,
       process.env.NODE_ENV !== "production" && "TabList must receive a `store` prop or be wrapped in a TabProvider component."
     );
     const m = e.useState(
       (c) => c.orientation === "both" ? void 0 : c.orientation
     );
-    return s = ue(
-      s,
-      (c) => /* @__PURE__ */ M.jsx(be, { value: e, children: c }),
+    return n = ce(
+      n,
+      (c) => /* @__PURE__ */ $.jsx(be, { value: e, children: c }),
       [e]
-    ), e.composite && (s = p({
+    ), e.composite && (n = p({
       focusable: !1
-    }, s)), s = p({
+    }, n)), n = p({
       role: "tablist",
       "aria-orientation": m
-    }, s), s = Me(p({ store: e }, s)), s;
+    }, n), n = Ne(p({ store: e }, n)), n;
   }
-), at = Y(function(n) {
-  const o = rt(n);
-  return q(st, o);
-}), it = "div", ct = Q(
-  function(n) {
-    var o = n, {
+), rt = K(function(s) {
+  const o = nt(s);
+  return U(st, o);
+}), at = "div", it = G(
+  function(s) {
+    var o = s, {
       store: e,
-      unmountOnHide: s,
+      unmountOnHide: n,
       tabId: r,
       getItem: m,
       scrollRestoration: c,
       scrollElement: d
-    } = o, a = U(o, [
+    } = o, a = X(o, [
       "store",
       "unmountOnHide",
       "tabId",
@@ -274,40 +275,40 @@ var J = le(
       "scrollRestoration",
       "scrollElement"
     ]);
-    const T = fe();
-    e = e || T, X(
+    const T = me();
+    e = e || T, Y(
       e,
       process.env.NODE_ENV !== "production" && "TabPanel must receive a `store` prop or be wrapped in a TabProvider component."
     );
-    const i = z(null), v = de(a.id), h = F(
+    const i = M(null), v = ie(a.id), h = V(
       e.panels,
       () => {
         var l;
         return r || ((l = e == null ? void 0 : e.panels.item(v)) == null ? void 0 : l.tabId);
       }
-    ), u = F(
+    ), u = V(
       e,
       (l) => !!h && l.selectedId === h
-    ), b = je({ open: u }), I = F(b, "mounted"), S = z(
+    ), f = Be({ open: u }), I = V(f, "mounted"), x = M(
       /* @__PURE__ */ new Map()
-    ), E = H(() => {
+    ), y = F(() => {
       const l = i.current;
       return l ? d ? typeof d == "function" ? d(l) : "current" in d ? d.current : d : l : null;
     });
-    Z(() => {
-      var l, $;
+    se(() => {
+      var l, w;
       if (!c || !I) return;
-      const C = E();
+      const C = y();
       if (!C) return;
       if (c === "reset") {
         C.scroll(0, 0);
         return;
       }
       if (!h) return;
-      const R = S.current.get(h);
-      C.scroll((l = R == null ? void 0 : R.x) != null ? l : 0, ($ = R == null ? void 0 : R.y) != null ? $ : 0);
+      const L = x.current.get(h);
+      C.scroll((l = L == null ? void 0 : L.x) != null ? l : 0, (w = L == null ? void 0 : L.y) != null ? w : 0);
       const B = () => {
-        S.current.set(h, {
+        x.current.set(h, {
           x: C.scrollLeft,
           y: C.scrollTop
         });
@@ -315,22 +316,22 @@ var J = le(
       return C.addEventListener("scroll", B), () => {
         C.removeEventListener("scroll", B);
       };
-    }, [c, I, h, E, e]);
-    const [P, _] = K(!1);
-    Z(() => {
+    }, [c, I, h, y, e]);
+    const [P, R] = q(!1);
+    se(() => {
       const l = i.current;
       if (!l) return;
-      const $ = Ae(l);
-      _(!!$.length);
+      const w = ye(l);
+      R(!!w.length);
     }, []);
-    const N = ae(
+    const N = ue(
       (l) => {
-        const $ = g(p({}, l), { id: v || l.id, tabId: r });
-        return m ? m($) : $;
+        const w = g(p({}, l), { id: v || l.id, tabId: r });
+        return m ? m(w) : w;
       },
       [v, r, m]
-    ), f = a.onKeyDown, w = H((l) => {
-      if (f == null || f(l), l.defaultPrevented || !(e != null && e.composite)) return;
+    ), b = a.onKeyDown, _ = F((l) => {
+      if (b == null || b(l), l.defaultPrevented || !(e != null && e.composite)) return;
       const C = {
         ArrowLeft: e.previous,
         ArrowRight: e.next,
@@ -338,39 +339,33 @@ var J = le(
         End: e.last
       }[l.key];
       if (!C) return;
-      const { selectedId: R } = e.getState(), B = C({ activeId: R });
+      const { selectedId: L } = e.getState(), B = C({ activeId: L });
       B && (l.preventDefault(), e.move(B));
     });
-    return a = ue(
+    return a = ce(
       a,
-      (l) => /* @__PURE__ */ M.jsx(be, { value: e, children: l }),
+      (l) => /* @__PURE__ */ $.jsx(be, { value: e, children: l }),
       [e]
     ), a = g(p({
       id: v,
       role: "tabpanel",
       "aria-labelledby": h || void 0
     }, a), {
-      children: s && !I ? null : a.children,
-      ref: Oe(i, a.ref),
-      onKeyDown: w
-    }), a = ke(p({
+      children: n && !I ? null : a.children,
+      ref: we(i, a.ref),
+      onKeyDown: _
+    }), a = Ee(p({
       // If the tab panel is rendered as part of another composite widget such
       // as combobox, it should not be focusable.
       focusable: !e.composite && !P
-    }, a)), a = ze(p({ store: b }, a)), a = Re(g(p({ store: e.panels }, a), { getItem: N })), a;
+    }, a)), a = je(p({ store: f }, a)), a = Te(g(p({ store: e.panels }, a), { getItem: N })), a;
   }
-), lt = Y(function(n) {
-  const o = ct(n);
-  return q(it, o);
+), ct = K(function(s) {
+  const o = it(s);
+  return U(at, o);
 });
-function W(t) {
-  var n = Te.toArray(t);
-  return n.reduce(function(o, e) {
-    return e.type === Pe ? o.concat(W(e.props.children)) : (o.push(e), o);
-  }, []);
-}
-const dt = j(at)(
-  ({ size: t }) => D`
+const lt = z(rt)(
+  ({ size: t }) => k`
     position: relative;
     width: 100%;
     overflow-x: auto;
@@ -380,20 +375,20 @@ const dt = j(at)(
 
     &[aria-orientation='vertical'] {
       flex-direction: column;
-      ${x("tabs.tabsBorder.vertical")};
+      ${S("tabs.tabsBorder.vertical")};
     }
 
-    ${x("tabs.tabsBorder.horizontal")};
+    ${S("tabs.tabsBorder.horizontal")};
 
-    ${pe} {
-      ${x(`tabs.item.size.${t}`)}
+    ${fe} {
+      ${S(`tabs.item.size.${t}`)}
     }
-    ${we};
+    ${he};
   `
-), pe = j.button`
+), fe = z.button`
   border: 0;
   background: none;
-  ${x("tabs.item.default")};
+  ${S("tabs.item.default")};
   display: flex;
   align-items: center;
   flex: none;
@@ -407,126 +402,136 @@ const dt = j(at)(
     outline: none !important; /* important for firefox */
 
     &:not([aria-selected='true']) {
-      ${x("tabs.item.focus")};
+      ${S("tabs.item.focus")};
     }
   }
 
   &[aria-selected='true'] {
-    ${x("tabs.item.active")};
+    ${S("tabs.item.active")};
   }
 
   &[aria-disabled='true'] {
-    ${x("tabs.item.disabled")};
+    ${S("tabs.item.disabled")};
     cursor: auto;
   }
 
   &:hover:not([aria-selected='true']):not([aria-disabled='true']) {
-    ${x("tabs.item.focus")};
+    ${S("tabs.item.focus")};
   }
 
   & > svg,
   img {
-    ${x("tabs.icon")};
+    ${S("tabs.icon")};
   }
 
   & > span {
-    ${x("tabs.badge")};
+    ${S("tabs.badge")};
   }
-`, ut = j(lt)(
-  ({ orientation: t }) => D`
-    ${t === "vertical" ? x("tabs.panel.vertical") : x("tabs.panel.horizontal")};
+`, dt = z(ct)(
+  ({ orientation: t }) => k`
+    ${t === "vertical" ? S("tabs.panel.vertical") : S("tabs.panel.horizontal")};
   `
-), mt = ({ offset: t = 0, size: n = 0 }) => D`
-  ${x("tabs.activeBar.horizontal")};
+), ut = ({ offset: t = 0, size: s = 0 }) => k`
+  ${S("tabs.activeBar.horizontal")};
   left: 0;
   bottom: 0;
-  width: ${n}px;
+  width: ${s}px;
   transform: translateX(${t}px);
-`, ft = ({ offset: t = 0, size: n = 0 }) => D`
-  ${x("tabs.activeBar.vertical")};
+`, mt = ({ offset: t = 0, size: s = 0 }) => k`
+  ${S("tabs.activeBar.vertical")};
   right: 0;
   top: 0;
-  height: ${n}px;
+  height: ${s}px;
   transform: translateY(${t}px);
-`, bt = j.span(
-  ({ orientation: t, ...n }) => D`
+`, bt = z.span(
+  ({ orientation: t, ...s }) => k`
     position: absolute;
-    ${t === "vertical" ? ft(n) : mt(n)}
+    ${t === "vertical" ? mt(s) : ut(s)}
     will-change: width, transform;
     transition: medium;
     transition-property: transform, width;
   `
-), ve = (t) => {
+);
+function H(t) {
+  var s = Ve.toArray(t);
+  return s.reduce(function(o, e) {
+    return e.type === ze ? o.concat(H(e.props.children)) : (o.push(e), o);
+  }, []);
+}
+const pe = (t) => {
   if (!t || typeof window > "u") return 1;
-  const n = Number(window.getComputedStyle(t).scale);
-  return isNaN(n) ? ve(t.parentElement) : n;
+  const s = Number(window.getComputedStyle(t).scale);
+  return isNaN(s) ? pe(t.parentElement) : s;
 };
-function pt(t, n, o) {
-  const [e, s] = K({}), { height: r, width: m } = $e();
-  return ye(() => {
+function ft(t, s, o) {
+  const [e, n] = q({}), { height: r, width: m } = We();
+  return He(() => {
     const c = t.current;
-    if (!c || !n) return;
-    const d = c.getBoundingClientRect(), a = n.getBoundingClientRect(), T = ve(c);
+    if (!c || !s) return;
+    const d = c.getBoundingClientRect(), a = s.getBoundingClientRect(), T = pe(c);
     if (o === "vertical") {
       const i = a.top - d.top, v = a.height;
-      s({
-        size: v,
+      n({
         offset: i,
-        orientation: o
+        orientation: o,
+        size: v
       });
     } else {
       const i = (a.left - d.left + c.scrollLeft) / T, v = a.width / T;
-      s({
-        size: isNaN(v) ? 0 : v,
+      n({
         offset: isNaN(i) ? 0 : i,
-        orientation: o
+        orientation: o,
+        size: isNaN(v) ? 0 : v
       });
     }
-  }, [t, n, m, r, o]), e;
+  }, [t, s, m, r, o]), e;
 }
-const Ie = ({ activeTab: t, listRef: n, orientation: o }) => {
-  const e = pt(n, t, o);
-  return /* @__PURE__ */ L.createElement(bt, { ...e });
+const ve = ({ activeTab: t, listRef: s, orientation: o }) => {
+  const e = ft(s, t, o);
+  return /* @__PURE__ */ $.jsx(bt, { ...e });
 };
-Ie.displayName = "ActiveBar";
-const vt = W.default || W;
-function It(t, n) {
-  const [o, e] = K(null);
-  return [vt(n).map((r) => r.props.id === t ? Ce(r, { ref: e }) : r), o];
+ve.displayName = "ActiveBar";
+const pt = H.default || H;
+function vt(t, s) {
+  const [o, e] = q(null);
+  return [pt(s).map((r) => r.props.id === t ? Fe(r, { ref: e }) : r), o];
 }
-const Se = G(
-  ({ children: t, size: n = "md", store: o, ...e }, s) => {
-    const r = z(), m = Ee(s, r), { orientation: c, selectedId: d } = o.useState(), [a, T] = It(d, t);
-    return /* @__PURE__ */ L.createElement(dt, { orientation: c, ref: m, size: n, store: o, ...e }, a, a.length > 1 && /* @__PURE__ */ L.createElement(Ie, { activeTab: T, listRef: r, orientation: c }));
+const Ie = W(
+  ({ children: t, size: s = "md", store: o, ...e }, n) => {
+    const r = M(), m = Me(n, r), { orientation: c, selectedId: d } = o.useState(), [a, T] = vt(d, t);
+    return /* @__PURE__ */ $.jsxs(lt, { orientation: c, ref: m, size: s, store: o, ...e, children: [
+      a,
+      a.length > 1 && /* @__PURE__ */ $.jsx(ve, { activeTab: T, listRef: r, orientation: c })
+    ] });
   }
 );
-Se.displayName = "TabList";
-const xe = G(
-  ({ children: t, store: n, tabId: o, ...e }, s) => {
-    const r = n.useState("orientation");
-    return /* @__PURE__ */ L.createElement(ut, { orientation: r, ref: s, store: n, tabId: o, ...e }, t);
+Ie.displayName = "TabList";
+const xe = W(
+  ({ children: t, store: s, tabId: o, ...e }, n) => {
+    const r = s.useState("orientation");
+    return /* @__PURE__ */ $.jsx(dt, { orientation: r, ref: n, store: s, tabId: o, ...e, children: t });
   }
 );
 xe.displayName = "TabPanel";
-const he = G(
-  ({ as: t, children: n, id: o, store: e, ...s }, r) => /* @__PURE__ */ L.createElement(
-    nt,
+const Se = W(
+  ({ as: t, children: s, id: o, store: e, ...n }, r) => /* @__PURE__ */ $.jsx(
+    ot,
     {
       id: o,
-      render: (m) => /* @__PURE__ */ L.createElement(pe, { as: t, ...m, ref: r }),
+      render: (m) => /* @__PURE__ */ $.jsx(fe, { as: t, ...m, ref: r }),
       store: e,
-      ...s
-    },
-    n
+      ...n,
+      children: s
+    }
   )
 );
-he.displayName = "Tab";
-const Lt = Object.assign(he, { List: Se, Panel: xe });
+Se.displayName = "Tab";
+const Lt = Object.assign(Se, { List: Ie, Panel: xe });
 function Nt(t) {
-  return Ze(t);
+  return Qe(t);
 }
 export {
   Lt as Tab,
-  he as TabComponent,
+  Se as TabComponent,
   Nt as useTab
 };