welcome-ui 10.0.0-alpha.4 → 10.0.0-alpha.5

package/dist/Tabs.js

@@ -1,21 +1,22 @@
 "use client";
-import { jsx as P, jsxs as fe } from "react/jsx-runtime";
-import { C as ee, a as te, h as X, b as be, j as pe } from "./SBSPVDDI-BoxPz2JY.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, X as ge, F as he, G as B, H as O, I as k, T as q, K as J } from "./OE2EFRVA-DkdhQLJL.js";
-import { u as A, m as _e, o as Q, c as Ce, s as z, a as w, f as Pe, b as re, d as Y } from "./RTNCFSKZ-LcIdBwa8.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-PAaZGbyz.js";
-import { f as we } from "./forwardRefWithAs-8eP3ZN15.js";
-import { u as Re, b as ye } from "./OLVWQA7U-wHytlFYu.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-CzEDuEn1.js";
-import { P as Be, b as De } from "./Y67KZUMI-BDyUNSJw.js";
-import { c as Me, a as Ve, u as Fe } from "./B7UTNDHN-BDa2-8JK.js";
-var U = oe(
+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]
-), We = U.useScopedContext, de = U.useProviderContext, ue = U.ScopedContextProvider, je = "button", He = W(function(r) {
+), Ue = Z.useScopedContext, de = Z.useProviderContext, ue = Z.ScopedContextProvider, Ze = "button", qe = W(function(r) {
   var t = r, {
     store: e,
     getItem: s
@@ -23,26 +24,26 @@ var U = oe(
     "store",
     "getItem"
   ]), m;
-  const i = We();
+  const i = Ue();
   e = e || i, K(
     e,
     process.env.NODE_ENV !== "production" && "Tab must be wrapped in a TabList component."
   );
-  const d = se(), a = n.id || d, h = Ie(n), c = ce(
+  const d = se(), a = n.id || d, h = he(n), c = ce(
     (f) => {
-      const R = g(v({}, f), { dimmed: h });
-      return s ? s(R) : R;
+      const N = g(v({}, f), { dimmed: h });
+      return s ? s(N) : N;
     },
     [h, s]
-  ), b = n.onClick, x = M((f) => {
+  ), b = n.onClick, x = V((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;
+      var N;
+      return (N = f.items.find((l) => l.tabId === a)) == null ? void 0 : N.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)), _ = I || S && !T, y = S || ((m = n.accessibleWhenDisabled) != null ? m : !0);
-  if (A(
+  ), 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(
     e.combobox || e.composite,
     "virtualFocus"
   ) && (n = g(v({}, n), {
@@ -57,34 +58,34 @@ var U = oe(
   }), e.composite) {
     const f = {
       id: a,
-      accessibleWhenDisabled: y,
+      accessibleWhenDisabled: w,
       store: e.composite,
-      shouldRegisterItem: _ && p,
+      shouldRegisterItem: C && p,
       rowId: n.rowId,
       render: n.render
     };
     n = g(v({}, n), {
-      render: /* @__PURE__ */ P(
-        X,
+      render: /* @__PURE__ */ _(
+        q,
         g(v({}, f), {
-          render: e.combobox && e.composite !== e.combobox ? /* @__PURE__ */ P(X, g(v({}, f), { store: e.combobox })) : f.render
+          render: e.combobox && e.composite !== e.combobox ? /* @__PURE__ */ _(q, g(v({}, f), { store: e.combobox })) : f.render
         })
       )
     });
   }
-  return n = be(g(v({
+  return n = Se(g(v({
     store: e
   }, n), {
-    accessibleWhenDisabled: y,
+    accessibleWhenDisabled: w,
     getItem: c,
     shouldRegisterItem: p
   })), n;
-}), Ke = ve(
+}), Ge = ge(
   F(function(r) {
-    const t = He(r);
-    return j(je, t);
+    const t = qe(r);
+    return j(Ze, t);
   })
-), Ge = "div", Ue = W(
+), Je = "div", Qe = W(
   function(r) {
     var t = r, { store: e } = t, s = H(t, ["store"]);
     const n = de();
@@ -97,19 +98,19 @@ var U = oe(
     );
     return s = ne(
       s,
-      (i) => /* @__PURE__ */ P(ue, { value: e, children: i }),
+      (i) => /* @__PURE__ */ _(ue, { value: e, children: i }),
       [e]
     ), e.composite && (s = v({
       focusable: !1
     }, s)), s = v({
       role: "tablist",
       "aria-orientation": m
-    }, s), s = Re(v({ store: e }, s)), s;
+    }, s), s = Le(v({ store: e }, s)), s;
   }
 ), Xe = F(function(r) {
-  const t = Ue(r);
-  return j(Ge, t);
-}), qe = "div", Je = W(
+  const t = Qe(r);
+  return j(Je, t);
+}), Ye = "div", et = W(
   function(r) {
     var t = r, {
       store: e,
@@ -131,71 +132,71 @@ var U = oe(
       e,
       process.env.NODE_ENV !== "production" && "TabPanel must receive a `store` prop or be wrapped in a TabProvider component."
     );
-    const c = V(null), b = se(a.id), x = A(
+    const c = D(null), b = se(a.id), x = z(
       e.panels,
       () => {
         var l;
         return n || ((l = e == null ? void 0 : e.panels.item(b)) == null ? void 0 : l.tabId);
       }
-    ), u = A(
+    ), u = z(
       e,
       (l) => !!x && l.selectedId === x
-    ), p = ze({ open: u }), I = A(p, "mounted"), S = V(
+    ), p = Ve({ open: u }), I = z(p, "mounted"), S = D(
       /* @__PURE__ */ new Map()
-    ), T = M(() => {
+    ), P = V(() => {
       const l = c.current;
       return l ? d ? typeof d == "function" ? d(l) : "current" in d ? d.current : d : l : null;
     });
-    Z(() => {
+    Y(() => {
       var l, E;
       if (!i || !I) return;
-      const C = T();
-      if (!C) return;
+      const T = P();
+      if (!T) return;
       if (i === "reset") {
-        C.scroll(0, 0);
+        T.scroll(0, 0);
         return;
       }
       if (!x) return;
-      const $ = S.current.get(x);
-      C.scroll((l = $ == null ? void 0 : $.x) != null ? l : 0, (E = $ == null ? void 0 : $.y) != null ? E : 0);
+      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);
       const L = () => {
         S.current.set(x, {
-          x: C.scrollLeft,
-          y: C.scrollTop
+          x: T.scrollLeft,
+          y: T.scrollTop
         });
       };
-      return C.addEventListener("scroll", L), () => {
-        C.removeEventListener("scroll", L);
+      return T.addEventListener("scroll", L), () => {
+        T.removeEventListener("scroll", L);
       };
-    }, [i, I, x, T, e]);
-    const [_, y] = G(!1);
-    Z(() => {
+    }, [i, I, x, P, e]);
+    const [C, w] = U(!1);
+    Y(() => {
       const l = c.current;
       if (!l) return;
-      const E = Se(l);
-      y(!!E.length);
+      const E = Ce(l);
+      w(!!E.length);
     }, []);
-    const N = ce(
+    const $ = ce(
       (l) => {
         const E = g(v({}, l), { id: b || l.id, tabId: n });
         return m ? m(E) : E;
       },
       [b, n, m]
-    ), f = a.onKeyDown, R = M((l) => {
+    ), f = a.onKeyDown, N = V((l) => {
       if (f == null || f(l), l.defaultPrevented || !(e != null && e.composite)) return;
-      const C = {
+      const T = {
         ArrowLeft: e.previous,
         ArrowRight: e.next,
         Home: e.first,
         End: e.last
       }[l.key];
-      if (!C) return;
-      const { selectedId: $ } = e.getState(), L = C({ activeId: $ });
+      if (!T) return;
+      const { selectedId: R } = e.getState(), L = T({ activeId: R });
       L && (l.preventDefault(), e.move(L));
     });
     return a = ne(
       a,
-      (l) => /* @__PURE__ */ P(ue, { value: e, children: l }),
+      (l) => /* @__PURE__ */ _(ue, { value: e, children: l }),
       [e]
     ), a = g(v({
       id: b,
@@ -203,28 +204,28 @@ var U = oe(
       "aria-labelledby": x || void 0
     }, a), {
       children: s && !I ? null : a.children,
-      ref: xe(c, a.ref),
-      onKeyDown: R
-    }), a = ge(v({
+      ref: Te(c, a.ref),
+      onKeyDown: N
+    }), a = _e(v({
       // If the tab panel is rendered as part of another composite widget such
       // as combobox, it should not be focusable.
-      focusable: !e.composite && !_
-    }, a)), a = Ae(v({ store: p }, a)), a = pe(g(v({ store: e.panels }, a), { getItem: N })), a;
+      focusable: !e.composite && !C
+    }, a)), a = De(v({ store: p }, a)), a = xe(g(v({ store: e.panels }, a), { getItem: $ })), a;
   }
-), Qe = F(function(r) {
-  const t = Je(r);
-  return j(qe, t);
-}), Ye = oe(
-  [De, te],
-  [Be, ee]
-), Ze = Ye.useContext;
+), 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 et(o = {}) {
+function nt(o = {}) {
   var r = o, {
     composite: t,
     combobox: e
-  } = r, s = he(r, [
+  } = r, s = Pe(r, [
     "composite",
     "combobox"
   ]);
@@ -239,42 +240,42 @@ function et(o = {}) {
     "focusLoop",
     "focusShift",
     "focusWrap"
-  ], m = _e(
+  ], m = Ee(
     s.store,
     Q(t, n),
     Q(e, n)
-  ), i = m == null ? void 0 : m.getState(), d = Me(B(k({}, s), {
+  ), i = m == null ? void 0 : m.getState(), d = je(A(O({}, 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`
     // when the activeId state is null, which could be the case when rendering
     // combobox with tab.
-    includesBaseElement: O(
+    includesBaseElement: k(
       s.includesBaseElement,
       i == null ? void 0 : i.includesBaseElement,
       !1
     ),
-    orientation: O(
+    orientation: k(
       s.orientation,
       i == null ? void 0 : i.orientation,
       "horizontal"
     ),
-    focusLoop: O(s.focusLoop, i == null ? void 0 : i.focusLoop, !0)
-  })), a = Ve(), h = B(k({}, d.getState()), {
-    selectedId: O(
+    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
     ),
-    selectOnMove: O(
+    selectOnMove: k(
       s.selectOnMove,
       i == null ? void 0 : i.selectOnMove,
       !0
     )
-  }), c = Ce(h, d, m);
-  z(
+  }), c = ye(h, d, m);
+  B(
     c,
-    () => w(c, ["moves"], () => {
+    () => y(c, ["moves"], () => {
       const { activeId: u, selectOnMove: p } = c.getState();
       if (!p || !u) return;
       const I = d.item(u);
@@ -282,62 +283,62 @@ function et(o = {}) {
     })
   );
   let b = !0;
-  z(
+  B(
     c,
-    () => Pe(c, ["selectedId"], (u, p) => {
+    () => Ne(c, ["selectedId"], (u, p) => {
       if (!b) {
         b = !0;
         return;
       }
       t && u.selectedId === p.selectedId || c.setState("activeId", u.selectedId);
     })
-  ), z(
+  ), B(
     c,
-    () => w(c, ["selectedId", "renderedItems"], (u) => {
+    () => 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);
       else {
-        const T = I.find(
-          (_) => !_.disabled && !_.dimmed
+        const P = I.find(
+          (C) => !C.disabled && !C.dimmed
         );
-        c.setState("selectedId", T == null ? void 0 : T.id);
+        c.setState("selectedId", P == null ? void 0 : P.id);
       }
     })
-  ), z(
+  ), B(
     c,
-    () => w(c, ["renderedItems"], (u) => {
+    () => y(c, ["renderedItems"], (u) => {
       const p = u.renderedItems;
       if (p.length)
-        return w(a, ["renderedItems"], (I) => {
+        return y(a, ["renderedItems"], (I) => {
           const S = I.renderedItems;
-          S.some((_) => !_.tabId) && S.forEach((_, y) => {
-            if (_.tabId) return;
-            const N = p[y];
-            N && a.renderItem(B(k({}, _), { tabId: N.id }));
+          S.some((C) => !C.tabId) && S.forEach((C, w) => {
+            if (C.tabId) return;
+            const $ = p[w];
+            $ && a.renderItem(A(O({}, C), { tabId: $.id }));
           });
         });
     })
   );
   let x = null;
-  return z(c, () => {
+  return B(c, () => {
     const u = () => {
       x = c.getState().selectedId;
     }, p = () => {
       b = !1, c.setState("selectedId", x);
     };
     if (t && "setSelectElement" in t)
-      return q(
-        w(t, ["value"], u),
-        w(t, ["mounted"], p)
+      return G(
+        y(t, ["value"], u),
+        y(t, ["mounted"], p)
       );
     if (e)
-      return q(
-        w(e, ["selectedValue"], u),
-        w(e, ["mounted"], p)
+      return G(
+        y(e, ["selectedValue"], u),
+        y(e, ["mounted"], p)
       );
-  }), B(k(k({}, d), c), {
+  }), A(O(O({}, d), c), {
     panels: a,
     setSelectedId: (u) => c.setState("selectedId", u),
     select: (u) => {
@@ -345,41 +346,41 @@ function et(o = {}) {
     }
   });
 }
-function tt(o, r, t) {
-  J(r, [t.composite, t.combobox]), o = Fe(o, r, t), Y(o, t, "selectedId", "setSelectedId"), Y(o, t, "selectOnMove");
+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(
-    Te(() => g(v({}, o), { panels: e }), [o, e]),
+    we(() => g(v({}, o), { panels: e }), [o, e]),
     { composite: t.composite, combobox: t.combobox }
   );
 }
-function Ot(o = {}) {
-  const r = ye(), t = Ze() || r;
+function kt(o = {}) {
+  const r = ke(), t = st() || r;
   o = g(v({}, o), {
     composite: o.composite !== void 0 ? o.composite : t,
     combobox: o.combobox !== void 0 ? o.combobox : r
   });
-  const [e, s] = re(et, o);
-  return tt(e, s, o);
+  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 ot(o, r) {
-  const [t, e] = G(null), s = ae.Children.map(r, (n) => n.props.id === o ? Ee(n, {
+function at(o, r) {
+  const [t, e] = U(null), s = ae.Children.map(r, (n) => n.props.id === o ? Re(n, {
     ...n.props,
-    ref: $e(e, Ne(n))
+    ref: Oe(e, Be(n))
   }) : n);
   return { activeTab: t, tabs: s };
 }
-const st = "_root_156xk_2", nt = {
-  root: st
+const ct = "_root_156xk_2", it = {
+  root: ct
 };
-function rt({ activeTab: o, listRef: r, orientation: t }) {
-  const [e, s] = G({}), { height: n, width: m } = Oe();
-  return ke(() => {
+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);
@@ -400,55 +401,63 @@ function rt({ activeTab: o, listRef: r, orientation: t }) {
     }
   }, [r, o, m, n, t]), e;
 }
-const at = D(nt), ct = ({ activeTab: o, listRef: r, orientation: t }) => {
-  const e = rt({ activeTab: o, listRef: r, orientation: t }), s = {
+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__ */ P("span", { className: at("root", `orientation-${t}`), style: s });
-}, it = "_root_3pg7f_2", lt = {
-  root: it,
+  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"
-}, dt = D(lt), ut = le(
+}, ft = M(mt), be = le(
   ({ children: o, className: r, size: t = "md", store: e, ...s }, n) => {
-    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(
+    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,
       {
-        className: dt("root", `size-${t}`, r),
+        className: ft("root", `size-${t}`, r),
         ref: i,
         store: e,
         ...s,
         children: [
           c,
-          b ? /* @__PURE__ */ P(ct, { activeTab: h, listRef: m, orientation: d }) : null
+          b ? /* @__PURE__ */ _(fe, { activeTab: h, listRef: m, orientation: d }) : null
         ]
       }
     );
   }
-), mt = "_root_etkg6_2", ft = {
-  root: mt
-}, bt = D(ft), pt = le(
-  ({ children: o, store: r, tabId: t, ...e }, s) => /* @__PURE__ */ P(Qe, { className: bt("root"), ref: s, store: r, tabId: t, ...e, children: o })
-), vt = "_root_86cgt_2", It = {
-  root: vt
-}, St = D(It), xt = we(
-  ({ as: o, children: r, className: t, id: e, store: s, ...n }, m) => /* @__PURE__ */ P(
-    Ke,
+);
+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: St("root", t),
+      className: xt("root", t),
       id: e,
       ref: m,
-      render: o ? /* @__PURE__ */ P(o, {}) : void 0,
+      render: o ? /* @__PURE__ */ _(o, {}) : void 0,
       store: s,
       ...n,
       children: r
     }
   )
-), kt = Object.assign(xt, { List: ut, Panel: pt });
+);
+ve.displayName = "Tab";
+const Ot = Object.assign(ve, { List: be, Panel: pe });
 export {
-  kt as Tab,
-  xt as TabComponent,
-  Ot as useTab
+  Ot as Tab,
+  ve as TabComponent,
+  kt as useTab
 };

package/dist/Tag.css

@@ -1 +1 @@
-@layer components{._root_etflv_4{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_etflv_4>span,._root_etflv_4>p{overflow:hidden;text-overflow:ellipsis}._root_etflv_4>svg{flex-shrink:0;width:var(--iconWidth);height:var(--iconHeight)}button._root_etflv_4,a._root_etflv_4{cursor:pointer;text-decoration:none}@media (hover: hover) and (pointer: fine){button._root_etflv_4:hover,a._root_etflv_4:hover{--backgroundColor: var( --backgroundColorHover, var(--components-colors-tag-color-background-warm-dark-default) )}}button._root_etflv_4[data-focus-visible],button._root_etflv_4:focus-visible,a._root_etflv_4[data-focus-visible],a._root_etflv_4:focus-visible{outline-color:var(--outlineColorFocus);--backgroundColor: var( --backgroundColorFocus, var(--components-colors-tag-color-background-warm-dark-default) )}button._root_etflv_4:active,a._root_etflv_4:active{--backgroundColor: var( --backgroundColorActive, var(--components-colors-tag-color-background-warm-dark-default) )}._variant-primary_etflv_70{--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_etflv_78{--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_etflv_86{--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_etflv_94{--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_etflv_102{--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_etflv_110{--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_etflv_118{--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_etflv_126{--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_etflv_134{--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_etflv_142{--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_etflv_150{--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_etflv_158{--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_etflv_166{--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_etflv_177{--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_etflv_188{--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_etflv_199{display:inline-flex;gap:var(--components-dimensions-tag-padding-block-md);align-items:center;flex-direction:row}._isSquare_etflv_205{padding:0;justify-content:center;flex-basis:var(--height)}._removeButton_etflv_210{--paddingInlineHasIcon: 0;flex-shrink:0}}
+@property --gradient-angle{syntax: "<angle>"; initial-value: -60deg; inherits: true;}@layer components{._root_1y63p_9{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);line-height:initial;font-size:var(--font-size-sm);border-radius:var(--components-dimensions-tag-border-radius);border-color:var(--components-colors-tag-color-border-default);border-width:var(--components-dimensions-tag-border-width-default);border-style:solid;background:var(--backgroundColor);box-shadow:var(--boxShadow, var(--elevation-10));color:var(--color);height:var(--height);padding:var(--paddingVertical) var(--paddingHorizontal);gap:var(--gap)}._root_1y63p_9>span,._root_1y63p_9>p{overflow:hidden;text-overflow:ellipsis}._root_1y63p_9>svg{flex-shrink:0;width:var(--components-dimensions-tag-size-icon);height:var(--components-dimensions-tag-size-icon)}button._root_1y63p_9,a._root_1y63p_9{cursor:pointer;text-decoration:none}@media (hover: hover) and (pointer: fine){button._root_1y63p_9:hover:not(._disabled_1y63p_53),a._root_1y63p_9:hover:not(._disabled_1y63p_53){--backgroundColor: var(--backgroundColorHover);--boxShadow: var(--elevation-20)}button._root_1y63p_9._variant-dash_1y63p_58:hover:not(._disabled_1y63p_53),a._root_1y63p_9._variant-dash_1y63p_58:hover:not(._disabled_1y63p_53){border-color:var(--components-colors-tag-color-border-dash-hover)}}._disabled_1y63p_53{background:var(--backgroundColorDisabled);border:none;cursor:inherit;--boxShadow: none;--color: var(--colorDisabled) !important}._disabled_1y63p_53._ai_1y63p_70{border:inherit}._disabled_1y63p_53 ._removeButton_1y63p_73{cursor:inherit}._variant-brand_1y63p_76{--backgroundColor: var(--components-colors-tag-color-background-brand-default);--backgroundColorHover: var(--components-colors-tag-color-background-brand-hover);--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), var(--components-colors-tag-color-background-brand-disabled);--color: var(--components-colors-tag-color-text-brand-default);--colorDisabled: var(--components-colors-tag-color-text-brand-disabled)}._variant-brand_1y63p_76._ai_1y63p_70{border-width:1px;border-color:transparent;box-shadow:inset 0 0 0 2px #fff;--backgroundColor: linear-gradient(var(--components-colors-tag-color-background-brand-ai-default) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--backgroundColorHover: linear-gradient(var(--components-colors-tag-color-background-brand-ai-hover) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), linear-gradient(var(--components-colors-tag-color-background-brand-ai-disabled) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box}._variant-warm_1y63p_91{--backgroundColor: var(--components-colors-tag-color-background-warm-default);--backgroundColorHover: var(--components-colors-tag-color-background-warm-hover);--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), var(--components-colors-tag-color-background-warm-disabled);--color: var(--components-colors-tag-color-text-warm-default);--colorDisabled: var(--components-colors-tag-color-text-warm-disabled)}._variant-warm_1y63p_91._ai_1y63p_70{border-width:1px;border-color:transparent;box-shadow:inset 0 0 0 2px #fff;--backgroundColor: linear-gradient(var(--components-colors-tag-color-background-warm-ai-default) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--backgroundColorHover: linear-gradient(var(--components-colors-tag-color-background-warm-ai-hover) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), linear-gradient(var(--components-colors-tag-color-background-warm-ai-disabled) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box}._variant-red_1y63p_106{--backgroundColor: var(--components-colors-tag-color-background-red-default);--backgroundColorHover: var(--components-colors-tag-color-background-red-hover);--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), var(--components-colors-tag-color-background-red-disabled);--color: var(--components-colors-tag-color-text-red-default);--colorDisabled: var(--components-colors-tag-color-text-red-disabled)}._variant-red_1y63p_106._ai_1y63p_70{border-width:1px;border-color:transparent;box-shadow:inset 0 0 0 2px #fff;--backgroundColor: linear-gradient(var(--components-colors-tag-color-background-red-ai-default) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--backgroundColorHover: linear-gradient(var(--components-colors-tag-color-background-red-ai-hover) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), linear-gradient(var(--components-colors-tag-color-background-red-ai-disabled) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box}._variant-blue_1y63p_121{--backgroundColor: var(--components-colors-tag-color-background-blue-default);--backgroundColorHover: var(--components-colors-tag-color-background-blue-hover);--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), var(--components-colors-tag-color-background-blue-disabled);--color: var(--components-colors-tag-color-text-blue-default);--colorDisabled: var(--components-colors-tag-color-text-blue-disabled)}._variant-blue_1y63p_121._ai_1y63p_70{border-width:1px;border-color:transparent;box-shadow:inset 0 0 0 2px #fff;--backgroundColor: linear-gradient(var(--components-colors-tag-color-background-blue-ai-default) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--backgroundColorHover: linear-gradient(var(--components-colors-tag-color-background-blue-ai-hover) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), linear-gradient(var(--components-colors-tag-color-background-blue-ai-disabled) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box}._variant-green_1y63p_136{--backgroundColor: var(--components-colors-tag-color-background-green-default);--backgroundColorHover: var(--components-colors-tag-color-background-green-hover);--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), var(--components-colors-tag-color-background-green-disabled);--color: var(--components-colors-tag-color-text-green-default);--colorDisabled: var(--components-colors-tag-color-text-green-disabled)}._variant-green_1y63p_136._ai_1y63p_70{border-width:1px;border-color:transparent;box-shadow:inset 0 0 0 2px #fff;--backgroundColor: linear-gradient(var(--components-colors-tag-color-background-green-ai-default) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--backgroundColorHover: linear-gradient(var(--components-colors-tag-color-background-green-ai-hover) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), linear-gradient(var(--components-colors-tag-color-background-green-ai-disabled) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box}._variant-orange_1y63p_151{--backgroundColor: var(--components-colors-tag-color-background-orange-default);--backgroundColorHover: var(--components-colors-tag-color-background-orange-hover);--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), var(--components-colors-tag-color-background-orange-disabled);--color: var(--components-colors-tag-color-text-orange-default);--colorDisabled: var(--components-colors-tag-color-text-orange-disabled)}._variant-orange_1y63p_151._ai_1y63p_70{border-width:1px;border-color:transparent;box-shadow:inset 0 0 0 2px #fff;--backgroundColor: linear-gradient(var(--components-colors-tag-color-background-orange-ai-default) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--backgroundColorHover: linear-gradient(var(--components-colors-tag-color-background-orange-ai-hover) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), linear-gradient(var(--components-colors-tag-color-background-orange-ai-disabled) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box}._variant-pink_1y63p_166{--backgroundColor: var(--components-colors-tag-color-background-pink-default);--backgroundColorHover: var(--components-colors-tag-color-background-pink-hover);--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), var(--components-colors-tag-color-background-pink-disabled);--color: var(--components-colors-tag-color-text-pink-default);--colorDisabled: var(--components-colors-tag-color-text-pink-disabled)}._variant-pink_1y63p_166._ai_1y63p_70{border-width:1px;border-color:transparent;box-shadow:inset 0 0 0 2px #fff;--backgroundColor: linear-gradient(var(--components-colors-tag-color-background-pink-ai-default) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--backgroundColorHover: linear-gradient(var(--components-colors-tag-color-background-pink-ai-hover) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), linear-gradient(var(--components-colors-tag-color-background-pink-ai-disabled) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box}._variant-teal_1y63p_181{--backgroundColor: var(--components-colors-tag-color-background-teal-default);--backgroundColorHover: var(--components-colors-tag-color-background-teal-hover);--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), var(--components-colors-tag-color-background-teal-disabled);--color: var(--components-colors-tag-color-text-teal-default);--colorDisabled: var(--components-colors-tag-color-text-teal-disabled)}._variant-teal_1y63p_181._ai_1y63p_70{border-width:1px;border-color:transparent;box-shadow:inset 0 0 0 2px #fff;--backgroundColor: linear-gradient(var(--components-colors-tag-color-background-teal-ai-default) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--backgroundColorHover: linear-gradient(var(--components-colors-tag-color-background-teal-ai-hover) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), linear-gradient(var(--components-colors-tag-color-background-teal-ai-disabled) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box}._variant-violet_1y63p_196{--backgroundColor: var(--components-colors-tag-color-background-violet-default);--backgroundColorHover: var(--components-colors-tag-color-background-violet-hover);--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), var(--components-colors-tag-color-background-violet-disabled);--color: var(--components-colors-tag-color-text-violet-default);--colorDisabled: var(--components-colors-tag-color-text-violet-disabled)}._variant-violet_1y63p_196._ai_1y63p_70{border-width:1px;border-color:transparent;box-shadow:inset 0 0 0 2px #fff;--backgroundColor: linear-gradient(var(--components-colors-tag-color-background-violet-ai-default) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--backgroundColorHover: linear-gradient(var(--components-colors-tag-color-background-violet-ai-hover) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), linear-gradient(var(--components-colors-tag-color-background-violet-ai-disabled) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box}._variant-dash_1y63p_58{--backgroundColor: var(--components-colors-tag-color-background-dash-default);--backgroundColorHover: var(--components-colors-tag-color-background-dash-hover);--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), var(--components-colors-tag-color-background-dash-disabled);--color: var(--components-colors-tag-color-text-dash-default);--colorDisabled: var(--components-colors-tag-color-text-dash-disabled);border:var(--components-dimensions-tag-border-width-default) dashed var(--components-colors-tag-color-border-dash-default);position:relative}._variant-dash_1y63p_58:hover{box-shadow:none}._variant-dash_1y63p_58._disabled_1y63p_53{border-color:var(--components-colors-tag-color-border-dash-disabled)}._size-md_1y63p_226{--height: var(--components-dimensions-tag-size-max-height-md);--maxHeight: var(--components-dimensions-tag-size-max-height-md);--paddingVertical: var(--components-dimensions-tag-padding-block-md);--paddingHorizontal: var(--components-dimensions-tag-padding-inline-md);--gap: var(--components-dimensions-tag-padding-inline-md)}._size-lg_1y63p_233{--height: var(--components-dimensions-tag-size-max-height-lg);--maxHeight: var(--components-dimensions-tag-size-max-height-lg);--paddingVertical: var(--components-dimensions-tag-padding-block-lg);--paddingHorizontal: var(--components-dimensions-tag-padding-inline-lg);--gap: var(--components-dimensions-tag-gap-content)}._hasRemoveAction_1y63p_240{align-items:center;display:inline-flex;flex-direction:row;gap:var(--components-dimensions-tag-padding-block-md)}._isSquare_1y63p_246{flex-basis:var(--height);justify-content:center;padding:0}._removeButton_1y63p_73{cursor:pointer;flex-shrink:0;--paddingInlineHasIcon: 0}}