welcome-ui 9.0.0 → 10.0.0-alpha.1

package/dist/Table.js

@@ -1,33 +1,33 @@
 "use client";
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as n } from "react/jsx-runtime";
 import { forwardRef as s } from "react";
 import { c as i } from "./index-CdiHdiVB.js";
-const _ = "_root_8bmny_2", b = "_content_8bmny_6", l = "_clickable_8bmny_48", m = "_indent_8bmny_70", d = {
+const _ = "_root_10vth_2", l = "_content_10vth_6", v = "_clickable_10vth_48", d = "_indent_10vth_70", h = {
   root: _,
-  content: b,
-  clickable: l,
-  "variant-danger": "_variant-danger_8bmny_54",
-  "variant-warning": "_variant-warning_8bmny_58",
-  "variant-success": "_variant-success_8bmny_62",
-  "variant-info": "_variant-info_8bmny_66",
-  indent: m
-}, c = i(d), y = s(
-  ({ children: n, className: a, indent: e, ...r }, o) => /* @__PURE__ */ t("div", { className: c("root", a), ref: o, ...r, children: /* @__PURE__ */ t("div", { className: c("content", e && "indent"), children: /* @__PURE__ */ t("table", { children: n }) }) })
-), v = (n) => /* @__PURE__ */ t("tbody", { ...n }), u = (n) => /* @__PURE__ */ t("th", { ...n }), f = (n) => /* @__PURE__ */ t("thead", { ...n }), T = (n) => /* @__PURE__ */ t("td", { ...n }), h = ({ className: n, onClick: a, variant: e, ...r }) => /* @__PURE__ */ t(
+  content: l,
+  clickable: v,
+  "variant-danger": "_variant-danger_10vth_54",
+  "variant-warning": "_variant-warning_10vth_58",
+  "variant-success": "_variant-success_10vth_62",
+  "variant-info": "_variant-info_10vth_66",
+  indent: d
+}, c = i(h), b = s(
+  ({ children: t, className: a, indent: e, ...r }, o) => /* @__PURE__ */ n("div", { className: c("root", a), ref: o, ...r, children: /* @__PURE__ */ n("div", { className: c("content", e && "indent"), children: /* @__PURE__ */ n("table", { children: t }) }) })
+), m = (t) => /* @__PURE__ */ n("tbody", { ...t }), u = (t) => /* @__PURE__ */ n("th", { ...t }), f = (t) => /* @__PURE__ */ n("thead", { ...t }), T = (t) => /* @__PURE__ */ n("td", { ...t }), g = ({ className: t, onClick: a, variant: e, ...r }) => /* @__PURE__ */ n(
   "tr",
   {
-    className: c(e && `variant-${e}`, !!a && "clickable", n),
+    className: c(e && `variant-${e}`, !!a && "clickable", t),
     onClick: a,
     ...r
   }
-), k = Object.assign(y, {
-  Tbody: v,
+), w = Object.assign(b, {
+  Tbody: m,
   Td: T,
   Th: u,
   Thead: f,
-  Tr: h
+  Tr: g
 });
 export {
-  k as Table,
-  y as TableComponent
+  w as Table,
+  b as TableComponent
 };

package/dist/Tabs.css

@@ -1 +1 @@
-@layer components{._root_102tt_2{position:absolute;will-change:width,transform;transition-property:all;transition-duration:var(--duration-medium);transition-timing-function:var(--timing-primary);background-color:var(--color-brand-40)}[aria-orientation=horizontal] ._root_102tt_2{width:var(--active-bar-size);height:var(--border-width-md);left:0;bottom:0;transform:translate(var(--active-bar-offset))}[aria-orientation=vertical] ._root_102tt_2{width:var(--border-width-md);height:var(--active-bar-size);right:0;top:0;transform:translateY(var(--active-bar-offset))}}@layer components{._root_axn0q_2{width:100%;position:relative;display:flex;overflow-x:auto;border:0;gap:var(--spacing-xl);--tab-font-size: var(--font-size-md);--tab-box-shadow: inset 0 calc(-1 * var(--border-width-sm)) 0 var(--color-neutral-30);font-size:var(--tab-font-size);box-shadow:var(--tab-box-shadow)}._root_axn0q_2[aria-orientation=vertical]{flex-direction:column;--tab-box-shadow: inset calc(-1 * var(--border-width-sm)) 0 0 var(--color-neutral-30)}._size-md_axn0q_18{--tab-font-size: var(--font-size-md)}._size-sm_axn0q_21{--tab-font-size: var(--font-size-sm)}}@layer components{._root_1kepd_2:focus{outline:none}[aria-orientation=horizontal] ._root_1kepd_2{margin-top:var(--spacing-xl)}[aria-orientation=vertical] ._root_1kepd_2{margin-left:var(--spacing-xl)}}@layer components{._root_wlfaw_2{border:0;background:none;color:var(--tabs-color, var(--color-neutral-70));font-weight:var(--font-weight-medium);line-height:var(--line-height-md);text-decoration:none;display:flex;align-items:center;flex:none;padding:var(--spacing-md) 0;transition:var(--transition-medium);text-transform:none;cursor:pointer;gap:var(--spacing-sm)}._root_wlfaw_2:focus{outline:none!important}._root_wlfaw_2:focus:not([aria-selected=true]){--tabs-color: var(--color-neutral-90)}._root_wlfaw_2[aria-selected=true]{--tabs-color: var(--color-neutral-90)}._root_wlfaw_2[aria-disabled=true]{--tabs-color: var(--color-neutral-60);cursor:not-allowed}._root_wlfaw_2:hover:not([aria-selected=true]):not([aria-disabled=true]){--tabs-color: var(--color-neutral-90)}._root_wlfaw_2>svg,._root_wlfaw_2 img{max-height:var(--spacing-lg);max-width:var(--spacing-lg)}._root_wlfaw_2>span{max-height:var(--spacing-lg)}}
+@layer components{._root_156xk_2{position:absolute;will-change:width,transform;transition-property:all;transition-duration:var(--duration-medium);transition-timing-function:var(--timing-primary);background-color:var(--components-colors-tab-color-background-checked-pressed)}[aria-orientation=horizontal] ._root_156xk_2{width:var(--activeBarSize);height:var(--components-dimensions-tab-border-width-checked);left:0;bottom:0;transform:translate(var(--activeBarOffset))}[aria-orientation=vertical] ._root_156xk_2{width:var(--components-dimensions-tab-border-width-checked);height:var(--activeBarSize);right:0;top:0;transform:translateY(var(--activeBarOffset))}}@layer components{._root_3pg7f_2{width:100%;position:relative;display:flex;overflow-x:auto;border:0;gap:var(--components-dimensions-tab-size-icon-lg);--tabFontSize: var(--components-dimensions-tab-padding-inline-lg);--tabBoxShadow: inset 0 calc(-1 * var(--components-dimensions-tab-border-width-unchecked)) 0 var(--color-background-neutral-subtlest);font-size:var(--tabFontSize);box-shadow:var(--tabBoxShadow)}._root_3pg7f_2[aria-orientation=vertical]{flex-direction:column;--tabBoxShadow: inset calc(-1 * var(--components-dimensions-tab-border-width-unchecked)) 0 0 var(--color-background-neutral-subtlest)}._size-md_3pg7f_20{--tabFontSize: var(--components-dimensions-tab-padding-inline-lg)}._size-sm_3pg7f_23{--tabFontSize: var(--font-size-14)}}@layer components{._root_etkg6_2:focus{outline:none}[aria-orientation=horizontal] ._root_etkg6_2{margin-top:var(--components-dimensions-tab-size-icon-lg)}[aria-orientation=vertical] ._root_etkg6_2{margin-left:var(--components-dimensions-tab-size-icon-lg)}}@layer components{._root_86cgt_2{border:0;background:none;color:var(--tabsColor, var(--color-background-neutral-tertiary));font-weight:var(--font-weight-medium);line-height:var(--font-size-lg);text-decoration:none;display:flex;align-items:center;flex:none;padding:var(--components-dimensions-tab-padding-inline-md) 0;transition:var(--duration-medium);text-transform:none;cursor:pointer;gap:var(--components-dimensions-tab-padding-block-md)}._root_86cgt_2:focus{outline:none!important}._root_86cgt_2:focus:not([aria-selected=true]){--tabsColor: var(--components-colors-tab-color-text-unchecked-pressed)}._root_86cgt_2[aria-selected=true]{--tabsColor: var(--components-colors-tab-color-text-unchecked-pressed)}._root_86cgt_2[aria-disabled=true]{--tabsColor: var(--color-icon-neutral-subtle);cursor:not-allowed}._root_86cgt_2:hover:not([aria-selected=true]):not([aria-disabled=true]){--tabsColor: var(--components-colors-tab-color-text-unchecked-pressed)}._root_86cgt_2>svg,._root_86cgt_2 img{max-height:var(--components-dimensions-tab-padding-inline-lg);max-width:var(--components-dimensions-tab-padding-inline-lg)}._root_86cgt_2>span{max-height:var(--components-dimensions-tab-padding-inline-lg)}}

package/dist/Tabs.js

@@ -1,21 +1,21 @@
 "use client";
 import { jsx as P, jsxs as fe } from "react/jsx-runtime";
-import { C as ee, a as te, h as U, b as be, j as pe } from "./SBSPVDDI-DJKkC1eb.js";
-import { e as oe, v as ve, f as B, c as W, b as j, _ as H, i as K, w as se, A as Ie, d as h, a as v, u as V, x as ne, ad as Se, p as xe, W as he, F as _e, G as D, H as O, I as k, S as J, K as Q } from "./OE2EFRVA-C3721cM3.js";
-import { u as A, m as ge, o as X, c as Ce, s as z, a as w, f as Pe, b as re, d as Y } from "./RTNCFSKZ-qpPg689E.js";
-import ae, { useCallback as ce, useRef as F, useEffect as Z, useState as q, createContext as ie, useMemo as Te, cloneElement as Ee, forwardRef as le } from "react";
-import { c as M } from "./index-CdiHdiVB.js";
+import { C as ee, a as te, h as q, b as be, j as pe } from "./SBSPVDDI-DJKkC1eb.js";
+import { e as oe, v as ve, f as F, c as W, b as j, _ as H, i as K, w as se, A as Ie, d as g, a as v, u as M, x as ne, ad as Se, p as xe, W as ge, F as he, G as B, H as O, I as k, S as J, K as Q } from "./OE2EFRVA-C3721cM3.js";
+import { u as A, m as _e, o as X, c as Ce, s as z, a as w, f as Pe, b as re, d as Y } from "./RTNCFSKZ-qpPg689E.js";
+import ae, { useCallback as ce, useRef as V, useEffect as Z, useState as G, createContext as ie, useMemo as Te, cloneElement as Ee, forwardRef as le } from "react";
+import { c as D } from "./index-CdiHdiVB.js";
 import { f as we } from "./forwardRefWithAs-8eP3ZN15.js";
 import { u as Re, b as ye } from "./OLVWQA7U-DysaSaZj.js";
 import { m as $e, g as Ne, u as Le } from "./useForkRef-D807AV7D.js";
 import { u as Oe, a as ke } from "./use-viewport-CgrficYB.js";
 import { u as ze, d as Ae } from "./T22PY7TE-C1N0q8Kn.js";
-import { P as De, a as Me } from "./Y67KZUMI-DFEgrUv2.js";
-import { c as Ve, a as Fe, u as Be } from "./B7UTNDHN-BlIblHCu.js";
-var G = oe(
+import { P as Be, a as De } from "./Y67KZUMI-DFEgrUv2.js";
+import { c as Me, a as Ve, u as Fe } from "./B7UTNDHN-BlIblHCu.js";
+var U = oe(
   [te],
   [ee]
-), We = G.useScopedContext, de = G.useProviderContext, ue = G.ScopedContextProvider, je = "button", He = W(function(r) {
+), We = U.useScopedContext, de = U.useProviderContext, ue = U.ScopedContextProvider, je = "button", He = W(function(r) {
   var t = r, {
     store: e,
     getItem: s
@@ -28,26 +28,26 @@ var G = oe(
     e,
     process.env.NODE_ENV !== "production" && "Tab must be wrapped in a TabList component."
   );
-  const d = se(), a = n.id || d, _ = Ie(n), c = ce(
+  const d = se(), a = n.id || d, h = Ie(n), c = ce(
     (f) => {
-      const R = h(v({}, f), { dimmed: _ });
+      const R = g(v({}, f), { dimmed: h });
       return s ? s(R) : R;
     },
-    [_, s]
-  ), b = n.onClick, x = V((f) => {
+    [h, s]
+  ), b = n.onClick, x = M((f) => {
     b == null || b(f), !f.defaultPrevented && (e == null || e.setSelectedId(a));
   }), u = e.panels.useState(
     (f) => {
       var R;
       return (R = f.items.find((l) => l.tabId === a)) == null ? void 0 : R.id;
     }
-  ), p = d ? n.shouldRegisterItem : !1, I = e.useState((f) => !!a && f.activeId === a), S = e.useState((f) => !!a && f.selectedId === a), T = e.useState((f) => !!e.item(f.activeId)), g = I || S && !T, y = S || ((m = n.accessibleWhenDisabled) != null ? m : !0);
+  ), p = d ? n.shouldRegisterItem : !1, I = e.useState((f) => !!a && f.activeId === a), S = e.useState((f) => !!a && f.selectedId === a), T = e.useState((f) => !!e.item(f.activeId)), _ = I || S && !T, y = S || ((m = n.accessibleWhenDisabled) != null ? m : !0);
   if (A(
     e.combobox || e.composite,
     "virtualFocus"
-  ) && (n = h(v({}, n), {
+  ) && (n = g(v({}, n), {
     tabIndex: -1
-  })), n = h(v({
+  })), n = g(v({
     id: a,
     role: "tab",
     "aria-selected": S,
@@ -59,20 +59,20 @@ var G = oe(
       id: a,
       accessibleWhenDisabled: y,
       store: e.composite,
-      shouldRegisterItem: g && p,
+      shouldRegisterItem: _ && p,
       rowId: n.rowId,
       render: n.render
     };
-    n = h(v({}, n), {
+    n = g(v({}, n), {
       render: /* @__PURE__ */ P(
-        U,
-        h(v({}, f), {
-          render: e.combobox && e.composite !== e.combobox ? /* @__PURE__ */ P(U, h(v({}, f), { store: e.combobox })) : f.render
+        q,
+        g(v({}, f), {
+          render: e.combobox && e.composite !== e.combobox ? /* @__PURE__ */ P(q, g(v({}, f), { store: e.combobox })) : f.render
         })
       )
     });
   }
-  return n = be(h(v({
+  return n = be(g(v({
     store: e
   }, n), {
     accessibleWhenDisabled: y,
@@ -80,11 +80,11 @@ var G = oe(
     shouldRegisterItem: p
   })), n;
 }), Ke = ve(
-  B(function(r) {
+  F(function(r) {
     const t = He(r);
     return j(je, t);
   })
-), qe = "div", Ge = W(
+), Ge = "div", Ue = W(
   function(r) {
     var t = r, { store: e } = t, s = H(t, ["store"]);
     const n = de();
@@ -106,9 +106,9 @@ var G = oe(
       "aria-orientation": m
     }, s), s = Re(v({ store: e }, s)), s;
   }
-), Ue = B(function(r) {
-  const t = Ge(r);
-  return j(qe, t);
+), qe = F(function(r) {
+  const t = Ue(r);
+  return j(Ge, t);
 }), Je = "div", Qe = W(
   function(r) {
     var t = r, {
@@ -126,12 +126,12 @@ var G = oe(
       "scrollRestoration",
       "scrollElement"
     ]);
-    const _ = de();
-    e = e || _, K(
+    const h = de();
+    e = e || h, K(
       e,
       process.env.NODE_ENV !== "production" && "TabPanel must receive a `store` prop or be wrapped in a TabProvider component."
     );
-    const c = F(null), b = se(a.id), x = A(
+    const c = V(null), b = se(a.id), x = A(
       e.panels,
       () => {
         var l;
@@ -140,9 +140,9 @@ var G = oe(
     ), u = A(
       e,
       (l) => !!x && l.selectedId === x
-    ), p = ze({ open: u }), I = A(p, "mounted"), S = F(
+    ), p = ze({ open: u }), I = A(p, "mounted"), S = V(
       /* @__PURE__ */ new Map()
-    ), T = V(() => {
+    ), T = M(() => {
       const l = c.current;
       return l ? d ? typeof d == "function" ? d(l) : "current" in d ? d.current : d : l : null;
     });
@@ -168,7 +168,7 @@ var G = oe(
         C.removeEventListener("scroll", L);
       };
     }, [i, I, x, T, e]);
-    const [g, y] = q(!1);
+    const [_, y] = G(!1);
     Z(() => {
       const l = c.current;
       if (!l) return;
@@ -177,11 +177,11 @@ var G = oe(
     }, []);
     const N = ce(
       (l) => {
-        const E = h(v({}, l), { id: b || l.id, tabId: n });
+        const E = g(v({}, l), { id: b || l.id, tabId: n });
         return m ? m(E) : E;
       },
       [b, n, m]
-    ), f = a.onKeyDown, R = V((l) => {
+    ), f = a.onKeyDown, R = M((l) => {
       if (f == null || f(l), l.defaultPrevented || !(e != null && e.composite)) return;
       const C = {
         ArrowLeft: e.previous,
@@ -197,7 +197,7 @@ var G = oe(
       a,
       (l) => /* @__PURE__ */ P(ue, { value: e, children: l }),
       [e]
-    ), a = h(v({
+    ), a = g(v({
       id: b,
       role: "tabpanel",
       "aria-labelledby": x || void 0
@@ -205,18 +205,18 @@ var G = oe(
       children: s && !I ? null : a.children,
       ref: xe(c, a.ref),
       onKeyDown: R
-    }), a = he(v({
+    }), a = ge(v({
       // If the tab panel is rendered as part of another composite widget such
       // as combobox, it should not be focusable.
-      focusable: !e.composite && !g
-    }, a)), a = Ae(v({ store: p }, a)), a = pe(h(v({ store: e.panels }, a), { getItem: N })), a;
+      focusable: !e.composite && !_
+    }, a)), a = Ae(v({ store: p }, a)), a = pe(g(v({ store: e.panels }, a), { getItem: N })), a;
   }
-), Xe = B(function(r) {
+), Xe = F(function(r) {
   const t = Qe(r);
   return j(Je, t);
 }), Ye = oe(
-  [Me, te],
-  [De, ee]
+  [De, te],
+  [Be, ee]
 ), Ze = Ye.useContext;
 ie(!1);
 ie(null);
@@ -224,7 +224,7 @@ function et(o = {}) {
   var r = o, {
     composite: t,
     combobox: e
-  } = r, s = _e(r, [
+  } = r, s = he(r, [
     "composite",
     "combobox"
   ]);
@@ -239,11 +239,11 @@ function et(o = {}) {
     "focusLoop",
     "focusShift",
     "focusWrap"
-  ], m = ge(
+  ], m = _e(
     s.store,
     X(t, n),
     X(e, n)
-  ), i = m == null ? void 0 : m.getState(), d = Ve(D(k({}, s), {
+  ), i = m == null ? void 0 : m.getState(), d = Me(B(k({}, s), {
     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`
@@ -260,7 +260,7 @@ function et(o = {}) {
       "horizontal"
     ),
     focusLoop: O(s.focusLoop, i == null ? void 0 : i.focusLoop, !0)
-  })), a = Fe(), _ = D(k({}, d.getState()), {
+  })), a = Ve(), h = B(k({}, d.getState()), {
     selectedId: O(
       s.selectedId,
       i == null ? void 0 : i.selectedId,
@@ -271,7 +271,7 @@ function et(o = {}) {
       i == null ? void 0 : i.selectOnMove,
       !0
     )
-  }), c = Ce(_, d, m);
+  }), c = Ce(h, d, m);
   z(
     c,
     () => w(c, ["moves"], () => {
@@ -300,7 +300,7 @@ function et(o = {}) {
         c.setState("selectedId", S.id);
       else {
         const T = I.find(
-          (g) => !g.disabled && !g.dimmed
+          (_) => !_.disabled && !_.dimmed
         );
         c.setState("selectedId", T == null ? void 0 : T.id);
       }
@@ -312,10 +312,10 @@ function et(o = {}) {
       if (p.length)
         return w(a, ["renderedItems"], (I) => {
           const S = I.renderedItems;
-          S.some((g) => !g.tabId) && S.forEach((g, y) => {
-            if (g.tabId) return;
+          S.some((_) => !_.tabId) && S.forEach((_, y) => {
+            if (_.tabId) return;
             const N = p[y];
-            N && a.renderItem(D(k({}, g), { tabId: N.id }));
+            N && a.renderItem(B(k({}, _), { tabId: N.id }));
           });
         });
     })
@@ -337,7 +337,7 @@ function et(o = {}) {
         w(e, ["selectedValue"], u),
         w(e, ["mounted"], p)
       );
-  }), D(k(k({}, d), c), {
+  }), B(k(k({}, d), c), {
     panels: a,
     setSelectedId: (u) => c.setState("selectedId", u),
     select: (u) => {
@@ -346,16 +346,16 @@ function et(o = {}) {
   });
 }
 function tt(o, r, t) {
-  Q(r, [t.composite, t.combobox]), o = Be(o, r, t), Y(o, t, "selectedId", "setSelectedId"), Y(o, t, "selectOnMove");
+  Q(r, [t.composite, t.combobox]), o = Fe(o, r, t), Y(o, t, "selectedId", "setSelectedId"), Y(o, t, "selectOnMove");
   const [e, s] = re(() => o.panels, {});
   return Q(s, [o, s]), Object.assign(
-    Te(() => h(v({}, o), { panels: e }), [o, e]),
+    Te(() => g(v({}, o), { panels: e }), [o, e]),
     { composite: t.composite, combobox: t.combobox }
   );
 }
 function Ot(o = {}) {
   const r = ye(), t = Ze() || r;
-  o = h(v({}, o), {
+  o = g(v({}, o), {
     composite: o.composite !== void 0 ? o.composite : t,
     combobox: o.combobox !== void 0 ? o.combobox : r
   });
@@ -368,21 +368,21 @@ const me = (o) => {
   return isNaN(r) ? me(o.parentElement) : r;
 };
 function ot(o, r) {
-  const [t, e] = q(null), s = ae.Children.map(r, (n) => n.props.id === o ? Ee(n, {
+  const [t, e] = G(null), s = ae.Children.map(r, (n) => n.props.id === o ? Ee(n, {
     ...n.props,
     ref: $e(e, Ne(n))
   }) : n);
   return { activeTab: t, tabs: s };
 }
-const st = "_root_102tt_2", nt = {
+const st = "_root_156xk_2", nt = {
   root: st
 };
 function rt({ activeTab: o, listRef: r, orientation: t }) {
-  const [e, s] = q({}), { height: n, width: m } = Oe();
+  const [e, s] = G({}), { height: n, width: m } = Oe();
   return ke(() => {
     const i = r.current;
     if (!i || !o) return;
-    const d = i.getBoundingClientRect(), a = o.getBoundingClientRect(), _ = me(i);
+    const d = i.getBoundingClientRect(), a = o.getBoundingClientRect(), h = me(i);
     if (t === "vertical") {
       const c = a.top - d.top, b = a.height;
       s({
@@ -391,7 +391,7 @@ function rt({ activeTab: o, listRef: r, orientation: t }) {
         size: b
       });
     } else {
-      const c = (a.left - d.left + i.scrollLeft) / _, b = a.width / _;
+      const c = (a.left - d.left + i.scrollLeft) / h, b = a.width / h;
       s({
         offset: isNaN(c) ? 0 : c,
         orientation: t,
@@ -400,21 +400,21 @@ function rt({ activeTab: o, listRef: r, orientation: t }) {
     }
   }, [r, o, m, n, t]), e;
 }
-const at = M(nt), ct = ({ activeTab: o, listRef: r, orientation: t }) => {
+const at = D(nt), ct = ({ activeTab: o, listRef: r, orientation: t }) => {
   const e = rt({ activeTab: o, listRef: r, orientation: t }), s = {
-    "--active-bar-offset": `${e.offset}px`,
-    "--active-bar-size": `${e.size}px`
+    "--activeBarOffset": `${e.offset}px`,
+    "--activeBarSize": `${e.size}px`
   };
   return /* @__PURE__ */ P("span", { className: at("root", `orientation-${t}`), style: s });
-}, it = "_root_axn0q_2", lt = {
+}, it = "_root_3pg7f_2", lt = {
   root: it,
-  "size-md": "_size-md_axn0q_18",
-  "size-sm": "_size-sm_axn0q_21"
-}, dt = M(lt), ut = le(
+  "size-md": "_size-md_3pg7f_20",
+  "size-sm": "_size-sm_3pg7f_23"
+}, dt = D(lt), ut = le(
   ({ children: o, className: r, size: t = "md", store: e, ...s }, n) => {
-    const m = F(), [, i] = Le(n, m), { orientation: d, selectedId: a } = A(e), { activeTab: _, tabs: c } = ot(a, o), b = ae.Children.count(o) > 1;
+    const m = V(), [, i] = Le(n, m), { orientation: d, selectedId: a } = A(e), { activeTab: h, tabs: c } = ot(a, o), b = ae.Children.count(o) > 1;
     return /* @__PURE__ */ fe(
-      Ue,
+      qe,
       {
         className: dt("root", `size-${t}`, r),
         ref: i,
@@ -422,18 +422,18 @@ const at = M(nt), ct = ({ activeTab: o, listRef: r, orientation: t }) => {
         ...s,
         children: [
           c,
-          b ? /* @__PURE__ */ P(ct, { activeTab: _, listRef: m, orientation: d }) : null
+          b ? /* @__PURE__ */ P(ct, { activeTab: h, listRef: m, orientation: d }) : null
         ]
       }
     );
   }
-), mt = "_root_1kepd_2", ft = {
+), mt = "_root_etkg6_2", ft = {
   root: mt
-}, bt = M(ft), pt = le(
+}, bt = D(ft), pt = le(
   ({ children: o, store: r, tabId: t, ...e }, s) => /* @__PURE__ */ P(Xe, { className: bt("root"), ref: s, store: r, tabId: t, ...e, children: o })
-), vt = "_root_wlfaw_2", It = {
+), vt = "_root_86cgt_2", It = {
   root: vt
-}, St = M(It), xt = we(
+}, St = D(It), xt = we(
   ({ as: o, children: r, className: t, id: e, store: s, ...n }, m) => /* @__PURE__ */ P(
     Ke,
     {

package/dist/Tag.css

@@ -1 +1 @@
-@layer components{._root_1xtnl_2{position:relative;display:inline-flex;align-items:center;justify-content:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background-color var(--duration-medium) var(--timing-primary);font-weight:var(--font-weight-medium);border:var(--border-width-md) solid var(--color-neutral-10);line-height:initial;background-color:var(--backgroundColor, var(--color-beige-20));color:var(--color, var(--color-beige-90));border-color:var(--borderColor, transparent);height:var(--height);padding:var(--paddingVertical) var(--paddingHorizontal);gap:var(--gap);font-size:var(--fontSize);border-radius:var(--borderRadius, var(--radius-md))}._root_1xtnl_2>span,._root_1xtnl_2>p{overflow:hidden;text-overflow:ellipsis}._root_1xtnl_2>svg{flex-shrink:0;width:var(--iconWidth);height:var(--iconHeight)}button._root_1xtnl_2,a._root_1xtnl_2{cursor:pointer;text-decoration:none}@media (hover: hover) and (pointer: fine){button._root_1xtnl_2:hover,a._root_1xtnl_2:hover{--backgroundColor: var(--backgroundColorHover, var(--color-beige-30))}}button._root_1xtnl_2[data-focus-visible],button._root_1xtnl_2:focus-visible,a._root_1xtnl_2[data-focus-visible],a._root_1xtnl_2:focus-visible{outline-color:var(--outlineColorFocus);--backgroundColor: var(--backgroundColorFocus, var(--color-beige-30))}button._root_1xtnl_2:active,a._root_1xtnl_2:active{--backgroundColor: var(--backgroundColorActive, var(--color-beige-30))}._variant-primary_1xtnl_59{--backgroundColor: var(--color-brand-40);--backgroundColorHover: var(--color-brand-50);--backgroundColorActive: var(--color-brand-50);--backgroundColorFocus: var(--color-brand-50);--outlineColorFocus: var(--color-brand-60);--color: var(--color-neutral-90)}._variant-info_1xtnl_67{--backgroundColor: var(--color-blue-10);--backgroundColorHover: var(--color-blue-20);--backgroundColorActive: var(--color-blue-20);--backgroundColorFocus: var(--color-blue-20);--outlineColorFocus: var(--color-blue-30);--color: var(--color-blue-90)}._variant-success_1xtnl_75{--backgroundColor: var(--color-green-10);--backgroundColorHover: var(--color-green-20);--backgroundColorActive: var(--color-green-20);--backgroundColorFocus: var(--color-green-20);--outlineColorFocus: var(--color-green-30);--color: var(--color-green-90)}._variant-danger_1xtnl_83{--backgroundColor: var(--color-red-10);--backgroundColorHover: var(--color-red-20);--backgroundColorActive: var(--color-red-20);--backgroundColorFocus: var(--color-red-20);--outlineColorFocus: var(--color-red-30);--color: var(--color-red-90)}._variant-warning_1xtnl_91{--backgroundColor: var(--color-orange-10);--backgroundColorHover: var(--color-orange-20);--backgroundColorActive: var(--color-orange-20);--backgroundColorFocus: var(--color-orange-20);--outlineColorFocus: var(--color-orange-30);--color: var(--color-orange-90)}._variant-ai_1xtnl_99{--backgroundColor: var(--color-violet-20);--backgroundColorHover: var(--color-violet-30);--backgroundColorActive: var(--color-violet-30);--backgroundColorFocus: var(--color-violet-30);--outlineColorFocus: var(--color-violet-40);--color: var(--color-violet-90)}._variant-blue_1xtnl_107{--backgroundColor: var(--color-blue-40);--backgroundColorHover: var(--color-blue-50);--backgroundColorActive: var(--color-blue-50);--backgroundColorFocus: var(--color-blue-50);--outlineColorFocus: var(--color-blue-60);--color: var(--color-neutral-90)}._variant-green_1xtnl_115{--backgroundColor: var(--color-green-30);--backgroundColorHover: var(--color-green-40);--backgroundColorActive: var(--color-green-40);--backgroundColorFocus: var(--color-green-40);--outlineColorFocus: var(--color-green-50);--color: var(--color-neutral-90)}._variant-orange_1xtnl_123{--backgroundColor: var(--color-orange-40);--backgroundColorHover: var(--color-orange-50);--backgroundColorActive: var(--color-orange-50);--backgroundColorFocus: var(--color-orange-50);--outlineColorFocus: var(--color-orange-60);--color: var(--color-neutral-90)}._variant-pink_1xtnl_131{--backgroundColor: var(--color-pink-40);--backgroundColorHover: var(--color-pink-50);--backgroundColorActive: var(--color-pink-50);--backgroundColorFocus: var(--color-pink-50);--outlineColorFocus: var(--color-pink-60);--color: var(--color-neutral-90)}._variant-teal_1xtnl_139{--backgroundColor: var(--color-teal-40);--backgroundColorHover: var(--color-teal-50);--backgroundColorActive: var(--color-teal-50);--backgroundColorFocus: var(--color-teal-50);--outlineColorFocus: var(--color-teal-60);--color: var(--color-neutral-90)}._variant-violet_1xtnl_147{--backgroundColor: var(--color-violet-40);--backgroundColorHover: var(--color-violet-50);--backgroundColorActive: var(--color-violet-50);--backgroundColorFocus: var(--color-violet-50);--outlineColorFocus: var(--color-violet-60);--color: var(--color-neutral-90)}._size-xs_1xtnl_155{--height: var(--height-20);--paddingVertical: var(--spacing-xxs);--paddingHorizontal: var(--spacing-xs);--gap: var(--spacing-xs);--fontSize: var(--font-size-xs);--borderRadius: var(--radius-sm);--iconWidth: .75rem;--iconHeight: var(--height-12);--removeWidth: .5rem}._size-sm_1xtnl_166{--height: var(--height-24);--paddingVertical: var(--spacing-xs);--paddingHorizontal: var(--spacing-sm);--gap: var(--spacing-xs);--fontSize: var(--font-size-xs);--iconWidth: .75rem;--iconHeight: var(--height-12);--borderRadius: var(--radius-md);--removeWidth: .75rem}._size-md_1xtnl_177{--height: var(--height-32);--paddingVertical: var(--spacing-xs);--paddingHorizontal: var(--spacing-sm);--gap: var(--spacing-sm);--fontSize: var(--font-size-sm);--iconWidth: 1rem;--iconHeight: var(--height-16);--borderRadius: var(--radius-md);--removeWidth: 1rem}._hasRemoveAction_1xtnl_188{display:inline-flex;gap:var(--spacing-xs);align-items:center;flex-direction:row}._isSquare_1xtnl_194{padding:0;justify-content:center;flex-basis:var(--height)}._removeButton_1xtnl_199{--paddingInlineHasIcon: 0;flex-shrink:0}}
+@layer components{._root_40vfm_2{position:relative;display:inline-flex;align-items:center;justify-content:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background-color var(--duration-medium) var(--timing-primary);font-weight:var(--font-weight-medium);border:var(--components-dimensions-tag-border-width) solid var(--components-colors-tag-color-background-dash-default);line-height:initial;background-color:var(--backgroundColor, var(--components-colors-tag-color-background-warm-light-disabled));color:var(--color, var(--components-colors-tag-color-icon-warm-dark-default));border-color:var(--borderColor, transparent);height:var(--height);padding:var(--paddingVertical) var(--paddingHorizontal);gap:var(--gap);font-size:var(--fontSize);border-radius:var(--borderRadius, var(--components-dimensions-tag-padding-block-md))}._root_40vfm_2>span,._root_40vfm_2>p{overflow:hidden;text-overflow:ellipsis}._root_40vfm_2>svg{flex-shrink:0;width:var(--iconWidth);height:var(--iconHeight)}button._root_40vfm_2,a._root_40vfm_2{cursor:pointer;text-decoration:none}@media (hover: hover) and (pointer: fine){button._root_40vfm_2:hover,a._root_40vfm_2:hover{--backgroundColor: var( --backgroundColorHover, var(--components-colors-tag-color-background-warm-dark-default) )}}button._root_40vfm_2[data-focus-visible],button._root_40vfm_2:focus-visible,a._root_40vfm_2[data-focus-visible],a._root_40vfm_2:focus-visible{outline-color:var(--outlineColorFocus);--backgroundColor: var( --backgroundColorFocus, var(--components-colors-tag-color-background-warm-dark-default) )}button._root_40vfm_2:active,a._root_40vfm_2:active{--backgroundColor: var( --backgroundColorActive, var(--components-colors-tag-color-background-warm-dark-default) )}._variant-primary_40vfm_68{--backgroundColor: var(--components-colors-tag-color-background-brand-dark-hover);--backgroundColorHover: var(--color-background-brand-strong);--backgroundColorActive: var(--color-background-brand-strong);--backgroundColorFocus: var(--color-background-brand-strong);--outlineColorFocus: var(--color-background-brand-stronger);--color: var(--components-colors-tag-color-icon-dash-default)}._variant-info_40vfm_76{--backgroundColor: var(--components-colors-tag-color-background-blue-light-disabled);--backgroundColorHover: var(--components-colors-tag-color-background-blue-light-hover);--backgroundColorActive: var(--components-colors-tag-color-background-blue-light-hover);--backgroundColorFocus: var(--components-colors-tag-color-background-blue-light-hover);--outlineColorFocus: var(--components-colors-tag-color-background-blue-dark-default);--color: var(--components-colors-tag-color-icon-blue-dark-default)}._variant-success_40vfm_84{--backgroundColor: var(--color-green-10);--backgroundColorHover: var(--color-green-20);--backgroundColorActive: var(--color-green-20);--backgroundColorFocus: var(--color-green-20);--outlineColorFocus: var(--components-colors-tag-color-background-green-dark-hover);--color: var(--components-colors-tag-color-icon-green-dark-default)}._variant-danger_40vfm_92{--backgroundColor: var(--components-colors-tag-color-background-red-light-disabled);--backgroundColorHover: var(--components-colors-tag-color-background-red-light-hover);--backgroundColorActive: var(--components-colors-tag-color-background-red-light-hover);--backgroundColorFocus: var(--components-colors-tag-color-background-red-light-hover);--outlineColorFocus: var(--components-colors-tag-color-background-red-dark-default);--color: var(--components-colors-tag-color-icon-red-dark-default)}._variant-warning_40vfm_100{--backgroundColor: var(--color-background-warning-minimal);--backgroundColorHover: var(--color-background-warning-subtle);--backgroundColorActive: var(--color-background-warning-subtle);--backgroundColorFocus: var(--color-background-warning-subtle);--outlineColorFocus: var(--color-background-warning-secondary);--color: var(--color-icon-warning-primary)}._variant-ai_40vfm_108{--backgroundColor: var(--components-colors-tag-color-background-violet-light-hover);--backgroundColorHover: var(--components-colors-tag-color-background-violet-dark-default);--backgroundColorActive: var(--components-colors-tag-color-background-violet-dark-default);--backgroundColorFocus: var(--components-colors-tag-color-background-violet-dark-default);--outlineColorFocus: var(--components-colors-tag-color-background-violet-dark-hover);--color: var(--color-violet-90)}._variant-blue_40vfm_116{--backgroundColor: var(--components-colors-tag-color-background-blue-dark-hover);--backgroundColorHover: var(--color-background-accent-blue-strong);--backgroundColorActive: var(--color-background-accent-blue-strong);--backgroundColorFocus: var(--color-background-accent-blue-strong);--outlineColorFocus: var(--components-colors-tag-color-icon-blue-light-disabled);--color: var(--components-colors-tag-color-icon-dash-default)}._variant-green_40vfm_124{--backgroundColor: var(--components-colors-tag-color-background-green-dark-hover);--backgroundColorHover: var(--color-background-accent-green-strong);--backgroundColorActive: var(--color-background-accent-green-strong);--backgroundColorFocus: var(--color-background-accent-green-strong);--outlineColorFocus: var(--color-background-accent-green-stronger);--color: var(--components-colors-tag-color-icon-dash-default)}._variant-orange_40vfm_132{--backgroundColor: var(--color-background-warning-primary);--backgroundColorHover: var(--color-background-warning-strong);--backgroundColorActive: var(--color-background-warning-strong);--backgroundColorFocus: var(--color-background-warning-strong);--outlineColorFocus: var(--color-background-warning-stronger);--color: var(--components-colors-tag-color-icon-dash-default)}._variant-pink_40vfm_140{--backgroundColor: var(--components-colors-tag-color-background-pink-dark-hover);--backgroundColorHover: var(--color-pink-50);--backgroundColorActive: var(--color-pink-50);--backgroundColorFocus: var(--color-pink-50);--outlineColorFocus: var(--color-pink-60);--color: var(--components-colors-tag-color-icon-dash-default)}._variant-teal_40vfm_148{--backgroundColor: var(--color-background-accent-teal-primary);--backgroundColorHover: var(--color-teal-50);--backgroundColorActive: var(--color-teal-50);--backgroundColorFocus: var(--color-teal-50);--outlineColorFocus: var(--color-teal-60);--color: var(--components-colors-tag-color-icon-dash-default)}._variant-violet_40vfm_156{--backgroundColor: var(--components-colors-tag-color-background-violet-dark-hover);--backgroundColorHover: var(--color-violet-50);--backgroundColorActive: var(--color-violet-50);--backgroundColorFocus: var(--color-violet-50);--outlineColorFocus: var(--color-violet-60);--color: var(--components-colors-tag-color-icon-dash-default)}._size-xs_40vfm_164{--height: var(--font-size-xl);--paddingVertical: var(--border-radius-xs);--paddingHorizontal: var(--components-dimensions-tag-padding-block-md);--gap: var(--components-dimensions-tag-padding-block-md);--fontSize: var(--components-dimensions-tag-padding-inline-lg);--borderRadius: var(--border-radius-xs);--iconWidth: .75rem;--iconHeight: var(--components-dimensions-tag-padding-inline-lg);--removeWidth: .5rem}._size-sm_40vfm_175{--height: var(--size-icon-lg);--paddingVertical: var(--components-dimensions-tag-padding-block-md);--paddingHorizontal: var(--components-dimensions-tag-padding-inline-md);--gap: var(--components-dimensions-tag-padding-block-md);--fontSize: var(--components-dimensions-tag-padding-inline-lg);--iconWidth: .75rem;--iconHeight: var(--components-dimensions-tag-padding-inline-lg);--borderRadius: var(--components-dimensions-tag-padding-block-md);--removeWidth: .75rem}._size-md_40vfm_186{--height: var(--size-icon-xl);--paddingVertical: var(--components-dimensions-tag-padding-block-md);--paddingHorizontal: var(--components-dimensions-tag-padding-inline-md);--gap: var(--components-dimensions-tag-padding-inline-md);--fontSize: var(--font-size-14);--iconWidth: 1rem;--iconHeight: var(--components-dimensions-tag-size-icon);--borderRadius: var(--components-dimensions-tag-padding-block-md);--removeWidth: 1rem}._hasRemoveAction_40vfm_197{display:inline-flex;gap:var(--components-dimensions-tag-padding-block-md);align-items:center;flex-direction:row}._isSquare_40vfm_203{padding:0;justify-content:center;flex-basis:var(--height)}._removeButton_40vfm_208{--paddingInlineHasIcon: 0;flex-shrink:0}}

package/dist/Tag.js

@@ -1,80 +1,79 @@
 "use client";
-import { jsxs as p, jsx as e } from "react/jsx-runtime";
-import d from "react";
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import z from "react";
 import { Button as h } from "./Button.js";
-import "./Icon-EG7O4YwD.js";
-import { C as z } from "./index-Bt79XJ8R.js";
+import { Icon as x } from "./Icon.js";
 import { c as R } from "./index-CdiHdiVB.js";
-import { f as S } from "./forwardRefWithAs-8eP3ZN15.js";
-const k = "_root_1xtnl_2", y = "_hasRemoveAction_1xtnl_188", C = "_isSquare_1xtnl_194", q = "_removeButton_1xtnl_199", A = {
-  root: k,
-  "variant-primary": "_variant-primary_1xtnl_59",
-  "variant-info": "_variant-info_1xtnl_67",
-  "variant-success": "_variant-success_1xtnl_75",
-  "variant-danger": "_variant-danger_1xtnl_83",
-  "variant-warning": "_variant-warning_1xtnl_91",
-  "variant-ai": "_variant-ai_1xtnl_99",
-  "variant-blue": "_variant-blue_1xtnl_107",
-  "variant-green": "_variant-green_1xtnl_115",
-  "variant-orange": "_variant-orange_1xtnl_123",
-  "variant-pink": "_variant-pink_1xtnl_131",
-  "variant-teal": "_variant-teal_1xtnl_139",
-  "variant-violet": "_variant-violet_1xtnl_147",
-  "size-xs": "_size-xs_1xtnl_155",
-  "size-sm": "_size-sm_1xtnl_166",
-  "size-md": "_size-md_1xtnl_177",
-  hasRemoveAction: y,
-  isSquare: C,
-  removeButton: q
-}, s = R(A);
-function N(t) {
-  if (typeof t == "string" || typeof t == "number")
-    return t.toString().length;
-  if (d.isValidElement(t) && typeof t.props.children == "string")
-    return t.props.children.length;
+import { f as y } from "./forwardRefWithAs-8eP3ZN15.js";
+const S = "_root_40vfm_2", k = "_hasRemoveAction_40vfm_197", q = "_isSquare_40vfm_203", A = "_removeButton_40vfm_208", N = {
+  root: S,
+  "variant-primary": "_variant-primary_40vfm_68",
+  "variant-info": "_variant-info_40vfm_76",
+  "variant-success": "_variant-success_40vfm_84",
+  "variant-danger": "_variant-danger_40vfm_92",
+  "variant-warning": "_variant-warning_40vfm_100",
+  "variant-ai": "_variant-ai_40vfm_108",
+  "variant-blue": "_variant-blue_40vfm_116",
+  "variant-green": "_variant-green_40vfm_124",
+  "variant-orange": "_variant-orange_40vfm_132",
+  "variant-pink": "_variant-pink_40vfm_140",
+  "variant-teal": "_variant-teal_40vfm_148",
+  "variant-violet": "_variant-violet_40vfm_156",
+  "size-xs": "_size-xs_40vfm_164",
+  "size-sm": "_size-sm_40vfm_175",
+  "size-md": "_size-md_40vfm_186",
+  hasRemoveAction: k,
+  isSquare: q,
+  removeButton: A
+}, s = R(N);
+function b(a) {
+  if (typeof a == "string" || typeof a == "number")
+    return a.toString().length;
+  if (z.isValidElement(a) && typeof a.props.children == "string")
+    return a.props.children.length;
 }
-const I = S((t, o) => {
+const $ = y((a, o) => {
   const {
     as: _ = "div",
-    children: i,
-    className: l,
-    icon: v,
-    onClick: m,
-    onRemove: a,
-    removeButtonProps: n,
+    children: n,
+    className: v,
+    icon: m,
+    onClick: f,
+    onRemove: i,
+    removeButtonProps: t,
     size: c = "md",
-    variant: r,
-    ...x
-  } = t, f = N(i) === 1 && !a, u = (g) => {
-    n != null && n.onClick && n.onClick(g), a && a();
+    variant: e,
+    ...l
+  } = a, u = b(n) === 1 && !i, g = (p) => {
+    t != null && t.onClick && t.onClick(p), i && i();
   };
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ d(
     _,
     {
       className: s(
         "root",
-        r && `variant-${r}`,
+        e && `variant-${e}`,
         `size-${c}`,
-        !!a && "hasRemoveAction",
-        f && "isSquare",
-        l
+        !!i && "hasRemoveAction",
+        u && "isSquare",
+        v
       ),
-      onClick: m,
+      onClick: f,
       ref: o,
-      ...x,
+      ...l,
       children: [
-        v,
-        i,
-        a ? /* @__PURE__ */ e(
+        m,
+        n,
+        i ? /* @__PURE__ */ r(
           h,
           {
             "aria-label": "remove tag",
-            ...n,
-            className: s("removeButton", n == null ? void 0 : n.className),
-            onClick: u,
-            size: "xs",
-            variant: "ghost",
-            children: /* @__PURE__ */ e(z, { size: "xs" })
+            ...t,
+            className: s("removeButton", t == null ? void 0 : t.className),
+            onClick: g,
+            size: "sm",
+            variant: "tertiary",
+            children: /* @__PURE__ */ r(x, { name: "times", size: "xs" })
           }
         ) : null
       ]
@@ -82,5 +81,5 @@ const I = S((t, o) => {
   );
 });
 export {
-  I as Tag
+  $ as Tag
 };