welcome-ui 10.0.4 → 10.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/Drawer.css +1 -1
  2. package/dist/Drawer.js +71 -71
  3. package/dist/Stepper.js +1 -1
  4. package/dist/Tabs.js +117 -129
  5. package/dist/Tag.css +1 -1
  6. package/dist/Tag.js +37 -37
  7. package/dist/types/components/Tabs/TabContext.d.ts +8 -0
  8. package/dist/types/components/Tabs/index.d.ts +3 -4
  9. package/dist/types/components/Tabs/types.d.ts +0 -1
  10. package/dist/types/components/Tabs/utils.d.ts +3 -2
  11. package/package.json +1 -1
package/dist/Drawer.css CHANGED
@@ -1 +1 @@
1
- @layer components{._asset-drawer_4vnol_3{overflow:hidden;border-top-left-radius:var(--border-radius-2xl);border-top-right-radius:var(--border-radius-2xl);top:auto!important}._asset-drawer_4vnol_3[class*=root]{height:calc(100% - 3rem)}._content-wrapper_4vnol_14{height:100%;margin-top:var(--spacing-xl);overflow-y:auto;width:100%}@media screen and (min-width: 736px){._content-wrapper_4vnol_14{margin-top:var(--spacing-3xl)}}._content-max-width_4vnol_25{flex:1;margin:0 auto;width:100%;max-width:var(--assetDrawerContentMaxWidth, 51.25rem)}._content_4vnol_14{--assetDrawerContentPadding: 0 var(--spacing-md) var(--spacing-xl);padding:var(--assetDrawerContentPadding)}@media screen and (min-width: 736px){._content_4vnol_14{--assetDrawerContentPadding: 0 var(--spacing-xl) var(--spacing-3xl)}}._asset-drawer-header_4vnol_40{display:flex;flex-direction:column;gap:var(--spacing-xl);justify-content:space-between;background-color:var(--color-background-neutral-inverse-fixed);margin-bottom:var(--spacing-xl);padding-bottom:var(--spacing-md);position:sticky;top:0;z-index:1}@media screen and (min-width: 736px){._asset-drawer-header_4vnol_40{align-items:center;flex-direction:row}}._back-button_4vnol_58{align-items:center;display:flex;gap:var(--spacing-md)}@media screen and (min-width: 736px){._back-button_4vnol_58{gap:var(--spacing-xl)}}._title_4vnol_68{display:flex;flex-direction:column;gap:var(--spacing-xxs)}._icon-block_4vnol_73{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--border-radius-sm);background-color:var(--color-background-warm-primary);transition:background-color var(--duration-medium);--iconBlockSize: var(--size-icon-2xl);width:var(--iconBlockSize);height:var(--iconBlockSize)}._icon-block_4vnol_73._size-md_4vnol_85{--iconBlockSize: var(--size-icon-2xl)}._icon-block_4vnol_73._size-sm_4vnol_88{--iconBlockSize: var(--size-icon-xl)}}@layer components{._root_uc9ud_3{background-color:var(--drawer-body-color-background-default);border:var(--drawer-border-width) solid var(--drawer-color-border-default);box-shadow:var(--elevation-10);z-index:999;position:fixed;display:flex;flex-direction:column;opacity:0;transition:var(--duration-medium);max-width:100%;--drawerLeft: 0;--drawerRight: 0;--drawerTop: 0;--drawerBottom: 0;--drawerHeight: calc(100% - var(--spacing-md) * 2);--drawerWidth: calc(100% - var(--spacing-md) * 2);--drawerTransform: translate(0, 0);left:var(--drawerLeft);right:var(--drawerRight);top:var(--drawerTop);bottom:var(--drawerBottom);width:var(--drawerWidth);height:var(--drawerHeight);transform:var(--drawerTransform)}@media screen and (max-width: 736px){._root_uc9ud_3{--drawerTransform: translate(0, 0);left:0;right:0;top:0;bottom:0;width:100%;height:100%;margin:0;border-radius:0;transform:var(--drawerTransform)}}._root_uc9ud_3:has(>header) ._drawer-close_uc9ud_47{display:none}@media screen and (min-width: 736px){._root_uc9ud_3{border-radius:var(--drawer-border-radius);margin:var(--spacing-md)}}._root_uc9ud_3._placement-bottom_uc9ud_56{--drawerTop: calc(100% - var(--drawerHeight) - var(--spacing-md) * 2);--drawerTransform: translate(0, 100%)}._root_uc9ud_3._placement-left_uc9ud_60{--drawerRight: calc(100% - var(--drawerWidth) - var(--spacing-md) * 2);--drawerTransform: translate(-100%, 0)}._root_uc9ud_3._placement-right_uc9ud_64{--drawerLeft: calc(100% - var(--drawerWidth) - var(--spacing-md) * 2);--drawerTransform: translate(100%, 0)}._root_uc9ud_3._placement-top_uc9ud_68{--drawerBottom: calc(100% - var(--drawerHeight) - var(--spacing-md) * 2);--drawerTransform: translate(0, -100%)}._root_uc9ud_3._placement-top_uc9ud_68._size-sm_uc9ud_72,._root_uc9ud_3._placement-bottom_uc9ud_56._size-sm_uc9ud_72{--drawerHeight: 25rem}._root_uc9ud_3._placement-top_uc9ud_68._size-md_uc9ud_75,._root_uc9ud_3._placement-bottom_uc9ud_56._size-md_uc9ud_75{--drawerHeight: 34.375rem}._root_uc9ud_3._placement-top_uc9ud_68._size-lg_uc9ud_78,._root_uc9ud_3._placement-bottom_uc9ud_56._size-lg_uc9ud_78{--drawerHeight: 42.5rem}._root_uc9ud_3._placement-left_uc9ud_60._size-sm_uc9ud_72,._root_uc9ud_3._placement-right_uc9ud_64._size-sm_uc9ud_72{--drawerWidth: 25rem}._root_uc9ud_3._placement-left_uc9ud_60._size-md_uc9ud_75,._root_uc9ud_3._placement-right_uc9ud_64._size-md_uc9ud_75{--drawerWidth: 34.375rem}._root_uc9ud_3._placement-left_uc9ud_60._size-lg_uc9ud_78,._root_uc9ud_3._placement-right_uc9ud_64._size-lg_uc9ud_78{--drawerWidth: 42.5rem}._root_uc9ud_3[data-enter]{opacity:1;--drawerTransform: translate(0, 0)}._root_uc9ud_3._fullscreen_uc9ud_94{top:0;left:0;width:calc(100% - var(--spacing-md) * 2);height:calc(100% - var(--spacing-md) * 2)}._root_uc9ud_3._fullscreen_uc9ud_94._placement-left_uc9ud_60:not([data-enter]){--drawerTransform: translate(-100%, 0)}._root_uc9ud_3._fullscreen_uc9ud_94._placement-right_uc9ud_64:not([data-enter]){--drawerTransform: translate(100%, 0)}._root_uc9ud_3._fullscreen_uc9ud_94._placement-top_uc9ud_68:not([data-enter]){--drawerTransform: translate(0, -100%)}._root_uc9ud_3._fullscreen_uc9ud_94._placement-bottom_uc9ud_56:not([data-enter]){--drawerTransform: translate(0, 100%)}._root_uc9ud_3._fullscreen_uc9ud_94 ._media_uc9ud_112{display:flex;align-items:center;justify-content:center}._root_uc9ud_3._fullscreen_uc9ud_94 ._media_uc9ud_112 :first-child{max-height:calc(100vh - 37px - var(--spacing-xxl) * 2);width:auto;height:auto}._backdrop_uc9ud_122{background-color:var(--color-background-transparent-black-subtle);z-index:999;position:fixed;top:0;right:0;left:0;bottom:0;opacity:0;transition:opacity .15s ease-in-out}._backdrop_uc9ud_122._drawer-hide-on-interact-outside_uc9ud_133{cursor:pointer}._backdrop_uc9ud_122[data-enter]{opacity:1}._content_uc9ud_139{flex:1;padding:var(--spacing-xxl);overflow-y:auto}._content-header_uc9ud_144{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-md)}._content-header-subtitle_uc9ud_150{color:var(--modal-color-text-body);margin-bottom:var(--spacing-md)}._footer_uc9ud_154{bottom:0;position:sticky;z-index:1;width:100%;background-color:var(--drawer-body-color-background-default);padding:var(--spacing-xl);display:flex;flex-wrap:wrap;gap:var(--spacing-md)}._variant-right_uc9ud_165{justify-content:flex-end;align-items:center}._variant-full_uc9ud_169 button,._variant-full_uc9ud_169 a{flex:1}._title_uc9ud_173{display:flex;align-items:center;justify-content:space-between;position:sticky;z-index:1;top:0;width:100%;background-color:var(--drawer-body-color-background-default);margin:0;padding:var(--spacing-xl) var(--spacing-5xl) var(--spacing-xl) var(--spacing-xl)}._drawer-close_uc9ud_47{position:absolute;right:var(--spacing-xs);top:var(--spacing-xs);z-index:10}}
1
+ @layer components{._asset-drawer_4vnol_3{overflow:hidden;border-top-left-radius:var(--border-radius-2xl);border-top-right-radius:var(--border-radius-2xl);top:auto!important}._asset-drawer_4vnol_3[class*=root]{height:calc(100% - 3rem)}._content-wrapper_4vnol_14{height:100%;margin-top:var(--spacing-xl);overflow-y:auto;width:100%}@media screen and (min-width: 736px){._content-wrapper_4vnol_14{margin-top:var(--spacing-3xl)}}._content-max-width_4vnol_25{flex:1;margin:0 auto;width:100%;max-width:var(--assetDrawerContentMaxWidth, 51.25rem)}._content_4vnol_14{--assetDrawerContentPadding: 0 var(--spacing-md) var(--spacing-xl);padding:var(--assetDrawerContentPadding)}@media screen and (min-width: 736px){._content_4vnol_14{--assetDrawerContentPadding: 0 var(--spacing-xl) var(--spacing-3xl)}}._asset-drawer-header_4vnol_40{display:flex;flex-direction:column;gap:var(--spacing-xl);justify-content:space-between;background-color:var(--color-background-neutral-inverse-fixed);margin-bottom:var(--spacing-xl);padding-bottom:var(--spacing-md);position:sticky;top:0;z-index:1}@media screen and (min-width: 736px){._asset-drawer-header_4vnol_40{align-items:center;flex-direction:row}}._back-button_4vnol_58{align-items:center;display:flex;gap:var(--spacing-md)}@media screen and (min-width: 736px){._back-button_4vnol_58{gap:var(--spacing-xl)}}._title_4vnol_68{display:flex;flex-direction:column;gap:var(--spacing-xxs)}._icon-block_4vnol_73{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--border-radius-sm);background-color:var(--color-background-warm-primary);transition:background-color var(--duration-medium);--iconBlockSize: var(--size-icon-2xl);width:var(--iconBlockSize);height:var(--iconBlockSize)}._icon-block_4vnol_73._size-md_4vnol_85{--iconBlockSize: var(--size-icon-2xl)}._icon-block_4vnol_73._size-sm_4vnol_88{--iconBlockSize: var(--size-icon-xl)}}@layer components{._root_hxy3b_3{background-color:var(--drawer-body-color-background-default);border:var(--drawer-border-width) solid var(--drawer-color-border-default);box-shadow:var(--elevation-10);z-index:999;position:fixed;display:flex;flex-direction:column;opacity:0;transition:var(--duration-medium);max-width:100%;--drawerLeft: 0;--drawerRight: 0;--drawerTop: 0;--drawerBottom: 0;--drawerHeight: calc(100% - var(--spacing-md) * 2);--drawerWidth: calc(100% - var(--spacing-md) * 2);--drawerTransform: translate(0, 0);left:var(--drawerLeft);right:var(--drawerRight);top:var(--drawerTop);bottom:var(--drawerBottom);width:var(--drawerWidth);height:var(--drawerHeight);transform:var(--drawerTransform)}@media screen and (max-width: 736px){._root_hxy3b_3{--drawerTransform: translate(0, 0);top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;border-radius:0;transform:var(--drawerTransform)}}._root_hxy3b_3:has(>header) ._drawer-close_hxy3b_44{display:none}@media screen and (min-width: 736px){._root_hxy3b_3{border-radius:var(--drawer-border-radius);margin:var(--spacing-md)}}._root_hxy3b_3._placement-bottom_hxy3b_53{--drawerTop: calc(100% - var(--drawerHeight) - var(--spacing-md) * 2);--drawerTransform: translate(0, 100%)}._root_hxy3b_3._placement-left_hxy3b_57{--drawerRight: calc(100% - var(--drawerWidth) - var(--spacing-md) * 2);--drawerTransform: translate(-100%, 0)}._root_hxy3b_3._placement-right_hxy3b_61{--drawerLeft: calc(100% - var(--drawerWidth) - var(--spacing-md) * 2);--drawerTransform: translate(100%, 0)}._root_hxy3b_3._placement-top_hxy3b_65{--drawerBottom: calc(100% - var(--drawerHeight) - var(--spacing-md) * 2);--drawerTransform: translate(0, -100%)}._root_hxy3b_3._placement-top_hxy3b_65._size-sm_hxy3b_69,._root_hxy3b_3._placement-bottom_hxy3b_53._size-sm_hxy3b_69{--drawerHeight: 25rem}._root_hxy3b_3._placement-top_hxy3b_65._size-md_hxy3b_72,._root_hxy3b_3._placement-bottom_hxy3b_53._size-md_hxy3b_72{--drawerHeight: 34.375rem}._root_hxy3b_3._placement-top_hxy3b_65._size-lg_hxy3b_75,._root_hxy3b_3._placement-bottom_hxy3b_53._size-lg_hxy3b_75{--drawerHeight: 42.5rem}._root_hxy3b_3._placement-left_hxy3b_57._size-sm_hxy3b_69,._root_hxy3b_3._placement-right_hxy3b_61._size-sm_hxy3b_69{--drawerWidth: 32.25rem}@media screen and (max-width: 32.25rem){._root_hxy3b_3._placement-left_hxy3b_57._size-sm_hxy3b_69,._root_hxy3b_3._placement-right_hxy3b_61._size-sm_hxy3b_69{--drawerTransform: translate(0, 0);top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;border-radius:0;transform:var(--drawerTransform)}}._root_hxy3b_3._placement-left_hxy3b_57._size-md_hxy3b_72,._root_hxy3b_3._placement-right_hxy3b_61._size-md_hxy3b_72{--drawerWidth: 44.25rem}@media screen and (max-width: 44.25rem){._root_hxy3b_3._placement-left_hxy3b_57._size-md_hxy3b_72,._root_hxy3b_3._placement-right_hxy3b_61._size-md_hxy3b_72{--drawerTransform: translate(0, 0);top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;border-radius:0;transform:var(--drawerTransform)}}._root_hxy3b_3._placement-left_hxy3b_57._size-lg_hxy3b_75,._root_hxy3b_3._placement-right_hxy3b_61._size-lg_hxy3b_75{--drawerWidth: 56.25rem}@media screen and (max-width: 56.25rem){._root_hxy3b_3._placement-left_hxy3b_57._size-lg_hxy3b_75,._root_hxy3b_3._placement-right_hxy3b_61._size-lg_hxy3b_75{--drawerTransform: translate(0, 0);top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;border-radius:0;transform:var(--drawerTransform)}}._root_hxy3b_3[data-enter]{opacity:1;--drawerTransform: translate(0, 0)}._root_hxy3b_3._fullscreen_hxy3b_124{top:0;left:0;width:calc(100% - var(--spacing-md) * 2);height:calc(100% - var(--spacing-md) * 2)}._root_hxy3b_3._fullscreen_hxy3b_124._placement-left_hxy3b_57:not([data-enter]){--drawerTransform: translate(-100%, 0)}._root_hxy3b_3._fullscreen_hxy3b_124._placement-right_hxy3b_61:not([data-enter]){--drawerTransform: translate(100%, 0)}._root_hxy3b_3._fullscreen_hxy3b_124._placement-top_hxy3b_65:not([data-enter]){--drawerTransform: translate(0, -100%)}._root_hxy3b_3._fullscreen_hxy3b_124._placement-bottom_hxy3b_53:not([data-enter]){--drawerTransform: translate(0, 100%)}._root_hxy3b_3._fullscreen_hxy3b_124 ._media_hxy3b_142{display:flex;align-items:center;justify-content:center}._root_hxy3b_3._fullscreen_hxy3b_124 ._media_hxy3b_142 :first-child{max-height:calc(100vh - 37px - var(--spacing-xxl) * 2);width:auto;height:auto}._backdrop_hxy3b_152{background-color:var(--color-background-transparent-black-subtle);z-index:999;position:fixed;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .15s ease-in-out}._backdrop_hxy3b_152._drawer-hide-on-interact-outside_hxy3b_160{cursor:pointer}._backdrop_hxy3b_152[data-enter]{opacity:1}._content_hxy3b_166{flex:1;padding:var(--spacing-xxl);overflow-y:auto}._content-header_hxy3b_171{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-md)}._content-header-subtitle_hxy3b_177{color:var(--modal-color-text-body);margin-bottom:var(--spacing-md)}._footer_hxy3b_181{bottom:0;position:sticky;z-index:1;width:100%;background-color:var(--drawer-body-color-background-default);padding:var(--spacing-xl);display:flex;flex-wrap:wrap;gap:var(--spacing-md)}._variant-right_hxy3b_192{justify-content:flex-end;align-items:center}._variant-full_hxy3b_196 button,._variant-full_hxy3b_196 a{flex:1}._title_hxy3b_200{display:flex;align-items:center;justify-content:space-between;position:sticky;z-index:1;top:0;width:100%;background-color:var(--drawer-body-color-background-default);margin:0;padding:var(--spacing-xl) var(--spacing-5xl) var(--spacing-xl) var(--spacing-xl)}._drawer-close_hxy3b_44{position:absolute;right:var(--spacing-xs);top:var(--spacing-xs);z-index:10}}
package/dist/Drawer.js CHANGED
@@ -2,14 +2,14 @@
2
2
  import './Drawer.css';
3
3
  import { jsx as e, jsxs as d, Fragment as S } from "react/jsx-runtime";
4
4
  import { D as q } from "./2S4Q4M35-CzDcLRQb.js";
5
- import { u as ye } from "./2S4Q4M35-CzDcLRQb.js";
6
- import { useCallback as g, forwardRef as h } from "react";
5
+ import { u as De } from "./2S4Q4M35-CzDcLRQb.js";
6
+ import { useCallback as w, forwardRef as p } from "react";
7
7
  import { Window as i } from "./Window.js";
8
8
  import { c as o } from "./index-PAaZGbyz.js";
9
9
  import { f as B } from "./forwardRefWithAs-8eP3ZN15.js";
10
10
  import { Button as R } from "./Button.js";
11
11
  import { Icon as $ } from "./Icon.js";
12
- import { Text as y } from "./Text.js";
12
+ import { Text as D } from "./Text.js";
13
13
  import { D as Z } from "./C2LT7CSX-B3kzKaLP.js";
14
14
  import { D as J } from "./GYHYTZZN-DHSdjG7J.js";
15
15
  const K = "_content_4vnol_14", L = "_title_4vnol_68", k = {
@@ -23,7 +23,7 @@ const K = "_content_4vnol_14", L = "_title_4vnol_68", k = {
23
23
  "icon-block": "_icon-block_4vnol_73",
24
24
  "size-md": "_size-md_4vnol_85",
25
25
  "size-sm": "_size-sm_4vnol_88"
26
- }, w = o(k), W = B(
26
+ }, b = o(k), W = B(
27
27
  ({
28
28
  children: t,
29
29
  className: r,
@@ -31,41 +31,41 @@ const K = "_content_4vnol_14", L = "_title_4vnol_68", k = {
31
31
  hideOnInteractOutside: s = !0,
32
32
  maxWidth: n,
33
33
  store: c,
34
- ...u
35
- }, _) => {
36
- const l = g(
34
+ ..._
35
+ }, h) => {
36
+ const l = w(
37
37
  () => Array.from(
38
38
  a ? a() : document.querySelectorAll("[data-wui-persistent]")
39
39
  ),
40
40
  [a]
41
- ), v = g(
42
- (b) => {
41
+ ), y = w(
42
+ (g) => {
43
43
  if (!s) return !1;
44
- const p = b.target;
44
+ const u = g.target;
45
45
  return !l().some(
46
- (x) => x.contains(p)
46
+ (v) => v.contains(u)
47
47
  );
48
48
  },
49
49
  [l, s]
50
- ), N = typeof n == "number" ? `${n}px` : n;
50
+ ), f = typeof n == "number" ? `${n}px` : n;
51
51
  return /* @__PURE__ */ e(
52
52
  le,
53
53
  {
54
54
  autoFocusOnShow: !1,
55
- className: w("asset-drawer", r),
55
+ className: b("asset-drawer", r),
56
56
  getPersistentElements: l,
57
- hideOnInteractOutside: v,
57
+ hideOnInteractOutside: y,
58
58
  placement: "bottom",
59
- ref: _,
59
+ ref: h,
60
60
  store: c,
61
61
  withBackdrop: !0,
62
- ...u,
63
- children: /* @__PURE__ */ e("div", { className: w("content-wrapper"), children: /* @__PURE__ */ e(
62
+ ..._,
63
+ children: /* @__PURE__ */ e("div", { className: b("content-wrapper"), children: /* @__PURE__ */ e(
64
64
  "div",
65
65
  {
66
- className: w("content-max-width"),
67
- style: { "--assetDrawerContentMaxWidth": N },
68
- children: /* @__PURE__ */ e("div", { className: w("content"), children: t })
66
+ className: b("content-max-width"),
67
+ style: { "--assetDrawerContentMaxWidth": f },
68
+ children: /* @__PURE__ */ e("div", { className: b("content"), children: t })
69
69
  }
70
70
  ) })
71
71
  }
@@ -75,47 +75,47 @@ const K = "_content_4vnol_14", L = "_title_4vnol_68", k = {
75
75
  W.displayName = "AssetDrawer";
76
76
  const Q = o(k), U = { md: "lg", sm: "md" }, F = ({ iconName: t, size: r = "md" }) => /* @__PURE__ */ e("div", { className: Q("icon-block", `size-${r}`), children: /* @__PURE__ */ e($, { className: "text-neutral-90", name: t, size: U[r] }) });
77
77
  F.displayName = "AssetDrawer.IconBlock";
78
- const f = o(k), H = ({
78
+ const x = o(k), H = ({
79
79
  action: t,
80
80
  className: r,
81
81
  iconName: a,
82
82
  onBackButtonClick: s,
83
83
  subtitle: n,
84
84
  title: c
85
- }) => /* @__PURE__ */ d("div", { className: f("asset-drawer-header", r), children: [
86
- /* @__PURE__ */ d("div", { className: f("back-button"), children: [
85
+ }) => /* @__PURE__ */ d("div", { className: x("asset-drawer-header", r), children: [
86
+ /* @__PURE__ */ d("div", { className: x("back-button"), children: [
87
87
  !!s && /* @__PURE__ */ e(R, { onClick: s, variant: "tertiary", children: /* @__PURE__ */ e($, { name: "arrow-left" }) }),
88
88
  !!a && /* @__PURE__ */ e(F, { iconName: a }),
89
- /* @__PURE__ */ d("div", { className: f("title"), children: [
90
- /* @__PURE__ */ e(y, { as: "h3", className: "pr-xl", variant: "heading-lg", children: c }),
89
+ /* @__PURE__ */ d("div", { className: x("title"), children: [
90
+ /* @__PURE__ */ e(D, { as: "h3", className: "pr-xl", variant: "heading-lg", children: c }),
91
91
  n
92
92
  ] })
93
93
  ] }),
94
- t ? /* @__PURE__ */ e("div", { className: f("actions"), children: t }) : null
94
+ t ? /* @__PURE__ */ e("div", { className: x("actions"), children: t }) : null
95
95
  ] });
96
96
  H.displayName = "AssetDrawer.Header";
97
- const V = "_root_uc9ud_3", X = "_fullscreen_uc9ud_94", Y = "_media_uc9ud_112", G = "_backdrop_uc9ud_122", ee = "_content_uc9ud_139", te = "_footer_uc9ud_154", re = "_title_uc9ud_173", m = {
97
+ const V = "_root_hxy3b_3", X = "_fullscreen_hxy3b_124", Y = "_media_hxy3b_142", G = "_backdrop_hxy3b_152", ee = "_content_hxy3b_166", te = "_footer_hxy3b_181", re = "_title_hxy3b_200", m = {
98
98
  root: V,
99
- "drawer-close": "_drawer-close_uc9ud_47",
100
- "placement-bottom": "_placement-bottom_uc9ud_56",
101
- "placement-left": "_placement-left_uc9ud_60",
102
- "placement-right": "_placement-right_uc9ud_64",
103
- "placement-top": "_placement-top_uc9ud_68",
104
- "size-sm": "_size-sm_uc9ud_72",
105
- "size-md": "_size-md_uc9ud_75",
106
- "size-lg": "_size-lg_uc9ud_78",
99
+ "drawer-close": "_drawer-close_hxy3b_44",
100
+ "placement-bottom": "_placement-bottom_hxy3b_53",
101
+ "placement-left": "_placement-left_hxy3b_57",
102
+ "placement-right": "_placement-right_hxy3b_61",
103
+ "placement-top": "_placement-top_hxy3b_65",
104
+ "size-sm": "_size-sm_hxy3b_69",
105
+ "size-md": "_size-md_hxy3b_72",
106
+ "size-lg": "_size-lg_hxy3b_75",
107
107
  fullscreen: X,
108
108
  media: Y,
109
109
  backdrop: G,
110
- "drawer-hide-on-interact-outside": "_drawer-hide-on-interact-outside_uc9ud_133",
110
+ "drawer-hide-on-interact-outside": "_drawer-hide-on-interact-outside_hxy3b_160",
111
111
  content: ee,
112
- "content-header": "_content-header_uc9ud_144",
113
- "content-header-subtitle": "_content-header-subtitle_uc9ud_150",
112
+ "content-header": "_content-header_hxy3b_171",
113
+ "content-header-subtitle": "_content-header-subtitle_hxy3b_177",
114
114
  footer: te,
115
- "variant-right": "_variant-right_uc9ud_165",
116
- "variant-full": "_variant-full_uc9ud_169",
115
+ "variant-right": "_variant-right_hxy3b_192",
116
+ "variant-full": "_variant-full_hxy3b_196",
117
117
  title: re
118
- }, ae = o(m), z = h(
118
+ }, ae = o(m), z = p(
119
119
  ({ hideOnInteractOutside: t = !0, ...r }, a) => /* @__PURE__ */ e(
120
120
  "div",
121
121
  {
@@ -140,25 +140,25 @@ const se = o(m), T = ({ className: t }) => /* @__PURE__ */ e(
140
140
  }
141
141
  );
142
142
  T.displayName = "Drawer.Close";
143
- const D = o(m), I = h(
144
- ({ children: t, className: r, iconName: a, subtitle: s, title: n, ...c }, u) => {
145
- const _ = !!(a || n);
146
- return /* @__PURE__ */ d("div", { className: D("content", r), ref: u, ...c, children: [
147
- _ ? /* @__PURE__ */ d("div", { className: D("content-header"), children: [
143
+ const N = o(m), I = p(
144
+ ({ children: t, className: r, iconName: a, subtitle: s, title: n, ...c }, _) => {
145
+ const h = !!(a || n);
146
+ return /* @__PURE__ */ d("div", { className: N("content", r), ref: _, ...c, children: [
147
+ h ? /* @__PURE__ */ d("div", { className: N("content-header"), children: [
148
148
  a ? /* @__PURE__ */ e($, { name: a, size: "lg" }) : null,
149
- n ? /* @__PURE__ */ e(y, { variant: "heading-md-strong", children: n }) : null
149
+ n ? /* @__PURE__ */ e(D, { variant: "heading-md-strong", children: n }) : null
150
150
  ] }) : null,
151
- s ? /* @__PURE__ */ e(y, { className: D("content-header-subtitle"), variant: "body-lg", children: s }) : null,
151
+ s ? /* @__PURE__ */ e(D, { className: N("content-header-subtitle"), variant: "body-lg", children: s }) : null,
152
152
  t
153
153
  ] });
154
154
  }
155
155
  );
156
156
  I.displayName = "Drawer.Content";
157
- const ne = o(m), O = h(
157
+ const ne = o(m), O = p(
158
158
  ({ className: t, variant: r = "right", ...a }, s) => /* @__PURE__ */ e("div", { className: ne("footer", `variant-${r}`, t), ref: s, ...a })
159
159
  );
160
160
  O.displayName = "Drawer.Footer";
161
- const oe = o(m), P = h(
161
+ const oe = o(m), P = p(
162
162
  ({ className: t, ...r }, a) => /* @__PURE__ */ e(i.Media, { className: oe("media", t), ref: a, ...r })
163
163
  );
164
164
  P.displayName = "Drawer.Media";
@@ -174,7 +174,7 @@ const A = B(
174
174
  )
175
175
  );
176
176
  A.displayName = "Drawer.Trigger";
177
- const ce = o(m), E = h(
177
+ const ce = o(m), E = p(
178
178
  ({
179
179
  children: t,
180
180
  className: r,
@@ -182,51 +182,51 @@ const ce = o(m), E = h(
182
182
  getPersistentElements: s,
183
183
  hideOnInteractOutside: n = !0,
184
184
  placement: c = "right",
185
- size: u = "lg",
186
- store: _,
185
+ size: _ = "lg",
186
+ store: h,
187
187
  withBackdrop: l = !1,
188
- withCloseButton: v = !0,
189
- ...N
190
- }, b) => {
191
- const p = g(
188
+ withCloseButton: y = !0,
189
+ ...f
190
+ }, g) => {
191
+ const u = w(
192
192
  () => Array.from(
193
193
  s ? s() : document.querySelectorAll("[data-wui-persistent]")
194
194
  ),
195
195
  [s]
196
- ), C = g(
197
- (x) => {
196
+ ), C = w(
197
+ (v) => {
198
198
  if (!n) return !1;
199
- const M = x.target;
200
- return !p().some(
199
+ const M = v.target;
200
+ return !u().some(
201
201
  (j) => j.contains(M)
202
202
  );
203
203
  },
204
- [p, n]
204
+ [u, n]
205
205
  );
206
206
  return /* @__PURE__ */ e(
207
207
  q,
208
208
  {
209
209
  backdrop: l ? /* @__PURE__ */ e(z, { hideOnInteractOutside: n }) : !1,
210
- getPersistentElements: p,
210
+ getPersistentElements: u,
211
211
  hideOnInteractOutside: C,
212
212
  modal: l,
213
- ref: b,
213
+ ref: g,
214
214
  render: /* @__PURE__ */ e(
215
215
  "div",
216
216
  {
217
217
  className: ce(
218
218
  "root",
219
219
  `placement-${c}`,
220
- `size-${u}`,
220
+ `size-${_}`,
221
221
  a && "fullscreen",
222
222
  r
223
223
  )
224
224
  }
225
225
  ),
226
- store: _,
227
- ...N,
226
+ store: h,
227
+ ...f,
228
228
  children: /* @__PURE__ */ d(S, { children: [
229
- v ? /* @__PURE__ */ e(T, {}) : null,
229
+ y ? /* @__PURE__ */ e(T, {}) : null,
230
230
  t
231
231
  ] })
232
232
  }
@@ -245,9 +245,9 @@ const le = Object.assign(E, {
245
245
  Media: P,
246
246
  Trigger: A,
247
247
  WindowTabPanel: i.TabPanel
248
- }), be = Object.assign(W, { Header: H, Trigger: A });
248
+ }), ge = Object.assign(W, { Header: H, Trigger: A });
249
249
  export {
250
- be as AssetDrawer,
250
+ ge as AssetDrawer,
251
251
  le as Drawer,
252
- ye as useDrawer
252
+ De as useDrawer
253
253
  };
package/dist/Stepper.js CHANGED
@@ -42,7 +42,7 @@ const m = x(W), h = I(
42
42
  if (!t) return;
43
43
  const r = t.querySelector('[aria-current="true"]');
44
44
  r && r.scrollIntoView && r.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
45
- }, [c, n]), /* @__PURE__ */ o("div", { className: m("root", e == null ? void 0 : e.className), ...e, children: /* @__PURE__ */ o(
45
+ }, [c, n]), /* @__PURE__ */ o("div", { ...e, className: m("root", e == null ? void 0 : e.className), children: /* @__PURE__ */ o(
46
46
  "ol",
47
47
  {
48
48
  className: m(
package/dist/Tabs.js CHANGED
@@ -1,27 +1,27 @@
1
1
  "use client";
2
2
  import './Tabs.css';
3
- import { jsx as k, jsxs as q } from "react/jsx-runtime";
4
- import { T as B, b as L, a as $ } from "./tab-panel-Bs1vehNH.js";
5
- import F, { createContext as z, useMemo as R, forwardRef as _, cloneElement as W, isValidElement as K } from "react";
6
- import { c as C } from "./index-PAaZGbyz.js";
7
- import { m as Q, o as S, c as U, s as h, d as m, g as D, u as E, a as y, b as G } from "./Q3KUZPD7-rHtne1MQ.js";
8
- import { Badge as H } from "./Badge.js";
9
- import { f as J } from "./forwardRefWithAs-8eP3ZN15.js";
10
- import { Icon as X } from "./Icon.js";
11
- import { P as Y, b as Z } from "./MWF5B7KS-DoHIdPSn.js";
12
- import { C as A, a as ee } from "./FIT2LC3L-CPJXByLq.js";
13
- import { b as te, x as p, Q as P, y as T } from "./US3TW2XI-C1E9L32T.js";
14
- import { c as ae, a as oe, u as re } from "./VEHC2EHR-Cwt53vgQ.js";
3
+ import { jsx as h, jsxs as V } from "react/jsx-runtime";
4
+ import { T as $, b as F, a as R } from "./tab-panel-Bs1vehNH.js";
5
+ import T, { createContext as C, useMemo as W, forwardRef as _ } from "react";
6
+ import { c as N } from "./index-PAaZGbyz.js";
7
+ import { m as K, o as S, c as Q, s as p, d as u, g as U, u as O, a as y, b as D } from "./Q3KUZPD7-rHtne1MQ.js";
8
+ import { Badge as G } from "./Badge.js";
9
+ import { f as H } from "./forwardRefWithAs-8eP3ZN15.js";
10
+ import { Icon as J } from "./Icon.js";
11
+ import { P as X, b as Y } from "./MWF5B7KS-DoHIdPSn.js";
12
+ import { C as Z, a as A } from "./FIT2LC3L-CPJXByLq.js";
13
+ import { b as ee, x as k, Q as z, y as P } from "./US3TW2XI-C1E9L32T.js";
14
+ import { c as te, a as ae, u as oe } from "./VEHC2EHR-Cwt53vgQ.js";
15
15
  import { a as se } from "./7P7IWEBR-DjpitcS1.js";
16
- var ne = te(
17
- [Z, ee],
18
- [Y, A]
19
- ), le = ne.useContext;
20
- z(!1);
21
- z(null);
22
- function ce({
16
+ var re = ee(
17
+ [Y, A],
18
+ [X, Z]
19
+ ), ne = re.useContext;
20
+ C(!1);
21
+ C(null);
22
+ function le({
23
23
  composite: e,
24
- combobox: r,
24
+ combobox: s,
25
25
  ...t
26
26
  } = {}) {
27
27
  const l = [
@@ -35,135 +35,140 @@ function ce({
35
35
  "focusLoop",
36
36
  "focusShift",
37
37
  "focusWrap"
38
- ], s = Q(
38
+ ], r = K(
39
39
  t.store,
40
40
  S(e, l),
41
- S(r, l)
42
- ), n = s == null ? void 0 : s.getState(), i = ae({
41
+ S(s, l)
42
+ ), n = r == null ? void 0 : r.getState(), d = te({
43
43
  ...t,
44
- store: s,
44
+ store: r,
45
45
  // We need to explicitly set the default value of `includesBaseElement` to
46
46
  // `false` since we don't want the composite store to default it to `true`
47
47
  // when the activeId state is null, which could be the case when rendering
48
48
  // combobox with tab.
49
- includesBaseElement: p(
49
+ includesBaseElement: k(
50
50
  t.includesBaseElement,
51
51
  n == null ? void 0 : n.includesBaseElement,
52
52
  !1
53
53
  ),
54
- orientation: p(
54
+ orientation: k(
55
55
  t.orientation,
56
56
  n == null ? void 0 : n.orientation,
57
57
  "horizontal"
58
58
  ),
59
- focusLoop: p(t.focusLoop, n == null ? void 0 : n.focusLoop, !0)
60
- }), d = oe(), v = {
61
- ...i.getState(),
62
- selectedId: p(
59
+ focusLoop: k(t.focusLoop, n == null ? void 0 : n.focusLoop, !0)
60
+ }), f = ae(), I = {
61
+ ...d.getState(),
62
+ selectedId: k(
63
63
  t.selectedId,
64
64
  n == null ? void 0 : n.selectedId,
65
65
  t.defaultSelectedId
66
66
  ),
67
- selectOnMove: p(
67
+ selectOnMove: k(
68
68
  t.selectOnMove,
69
69
  n == null ? void 0 : n.selectOnMove,
70
70
  !0
71
71
  )
72
- }, a = U(v, i, s);
73
- h(
72
+ }, a = Q(I, d, r);
73
+ p(
74
74
  a,
75
- () => m(a, ["moves"], () => {
75
+ () => u(a, ["moves"], () => {
76
76
  const { activeId: o, selectOnMove: c } = a.getState();
77
77
  if (!c || !o) return;
78
- const u = i.item(o);
79
- u && (u.dimmed || u.disabled || a.setState("selectedId", u.id));
78
+ const i = d.item(o);
79
+ i && (i.dimmed || i.disabled || a.setState("selectedId", i.id));
80
80
  })
81
81
  );
82
- let f = !0;
83
- h(
82
+ let m = !0;
83
+ p(
84
84
  a,
85
- () => D(a, ["selectedId"], (o, c) => {
86
- if (!f) {
87
- f = !0;
85
+ () => U(a, ["selectedId"], (o, c) => {
86
+ if (!m) {
87
+ m = !0;
88
88
  return;
89
89
  }
90
90
  e && o.selectedId === c.selectedId || a.setState("activeId", o.selectedId);
91
91
  })
92
- ), h(
92
+ ), p(
93
93
  a,
94
- () => m(a, ["selectedId", "renderedItems"], (o) => {
94
+ () => u(a, ["selectedId", "renderedItems"], (o) => {
95
95
  if (o.selectedId !== void 0) return;
96
- const { activeId: c, renderedItems: u } = a.getState(), b = i.item(c);
96
+ const { activeId: c, renderedItems: i } = a.getState(), b = d.item(c);
97
97
  if (b && !b.disabled && !b.dimmed)
98
98
  a.setState("selectedId", b.id);
99
99
  else {
100
- const x = u.find(
100
+ const x = i.find(
101
101
  (g) => !g.disabled && !g.dimmed
102
102
  );
103
103
  a.setState("selectedId", x == null ? void 0 : x.id);
104
104
  }
105
105
  })
106
- ), h(
106
+ ), p(
107
107
  a,
108
- () => m(a, ["renderedItems"], (o) => {
108
+ () => u(a, ["renderedItems"], (o) => {
109
109
  const c = o.renderedItems;
110
110
  if (c.length)
111
- return m(d, ["renderedItems"], (u) => {
112
- const b = u.renderedItems;
113
- b.some((g) => !g.tabId) && b.forEach((g, j) => {
111
+ return u(f, ["renderedItems"], (i) => {
112
+ const b = i.renderedItems;
113
+ b.some((g) => !g.tabId) && b.forEach((g, L) => {
114
114
  if (g.tabId) return;
115
- const w = c[j];
116
- w && d.renderItem({ ...g, tabId: w.id });
115
+ const w = c[L];
116
+ w && f.renderItem({ ...g, tabId: w.id });
117
117
  });
118
118
  });
119
119
  })
120
120
  );
121
- let I = null;
122
- return h(a, () => {
121
+ let v = null;
122
+ return p(a, () => {
123
123
  const o = () => {
124
- I = a.getState().selectedId;
124
+ v = a.getState().selectedId;
125
125
  }, c = () => {
126
- f = !1, a.setState("selectedId", I);
126
+ m = !1, a.setState("selectedId", v);
127
127
  };
128
128
  if (e && "setSelectElement" in e)
129
- return P(
130
- m(e, ["value"], o),
131
- m(e, ["mounted"], c)
129
+ return z(
130
+ u(e, ["value"], o),
131
+ u(e, ["mounted"], c)
132
132
  );
133
- if (r)
134
- return P(
135
- m(r, ["selectedValue"], o),
136
- m(r, ["mounted"], c)
133
+ if (s)
134
+ return z(
135
+ u(s, ["selectedValue"], o),
136
+ u(s, ["mounted"], c)
137
137
  );
138
138
  }), {
139
- ...i,
139
+ ...d,
140
140
  ...a,
141
- panels: d,
141
+ panels: f,
142
142
  setSelectedId: (o) => a.setState("selectedId", o),
143
143
  select: (o) => {
144
- a.setState("selectedId", o), i.move(o);
144
+ a.setState("selectedId", o), d.move(o);
145
145
  }
146
146
  };
147
147
  }
148
- function ie(e, r, t) {
149
- T(r, [t.composite, t.combobox]), e = re(e, r, t), y(e, t, "selectedId", "setSelectedId"), y(e, t, "selectOnMove");
150
- const [l, s] = E(() => e.panels, {});
151
- return T(s, [e, s]), Object.assign(
152
- R(() => ({ ...e, panels: l }), [e, l]),
148
+ function ce(e, s, t) {
149
+ P(s, [t.composite, t.combobox]), e = oe(e, s, t), y(e, t, "selectedId", "setSelectedId"), y(e, t, "selectOnMove");
150
+ const [l, r] = O(() => e.panels, {});
151
+ return P(r, [e, r]), Object.assign(
152
+ W(() => ({ ...e, panels: l }), [e, l]),
153
153
  { composite: t.composite, combobox: t.combobox }
154
154
  );
155
155
  }
156
156
  function Fe(e = {}) {
157
- const r = se(), t = le() || r;
157
+ const s = se(), t = ne() || s;
158
158
  e = {
159
159
  ...e,
160
160
  composite: e.composite !== void 0 ? e.composite : t,
161
- combobox: e.combobox !== void 0 ? e.combobox : r
161
+ combobox: e.combobox !== void 0 ? e.combobox : s
162
162
  };
163
- const [l, s] = E(ce, e);
164
- return ie(l, s, e);
163
+ const [l, r] = O(le, e);
164
+ return ce(l, r, e);
165
165
  }
166
- const de = "_root_w7nc9_2", N = {
166
+ const E = T.createContext(null);
167
+ function ie() {
168
+ const e = T.useContext(E);
169
+ return (e == null ? void 0 : e.size) || "lg";
170
+ }
171
+ const de = "_root_w7nc9_2", M = {
167
172
  root: de,
168
173
  "size-lg": "_size-lg_w7nc9_58",
169
174
  "size-md": "_size-md_w7nc9_65",
@@ -493,14 +498,14 @@ const de = "_root_w7nc9_2", N = {
493
498
  ], Se = (e) => we.includes(e);
494
499
  function ye({
495
500
  icon: e,
496
- iconColor: r,
501
+ iconColor: s,
497
502
  isActive: t,
498
503
  size: l
499
504
  }) {
500
505
  if (!e) return null;
501
506
  if (typeof e != "string" || !Se(e)) return e;
502
- const s = (() => {
503
- switch (r) {
507
+ const r = (() => {
508
+ switch (s) {
504
509
  case "blue":
505
510
  return t ? "text-background-accent-blue-strong" : "text-background-accent-blue-primary";
506
511
  case "green":
@@ -519,70 +524,53 @@ function ye({
519
524
  return "";
520
525
  }
521
526
  })();
522
- return /* @__PURE__ */ k(X, { className: s, name: e, size: l });
527
+ return /* @__PURE__ */ h(J, { className: r, name: e, size: l });
523
528
  }
524
- const Pe = C(N), O = J(
525
- ({
526
- as: e,
527
- badge: r,
528
- children: t,
529
- className: l,
530
- icon: s,
531
- iconColor: n = "violet",
532
- id: i,
533
- size: d = "lg",
534
- store: v,
535
- ...a
536
- }, f) => {
537
- const { selectedId: I } = G(v), o = I === i, c = ye({
538
- icon: s,
529
+ const ze = N(M), j = H(
530
+ ({ as: e, badge: s, children: t, className: l, icon: r, iconColor: n = "violet", id: d, store: f, ...I }, a) => {
531
+ const m = ie(), { selectedId: v } = D(f), o = v === d, c = ye({
532
+ icon: r,
539
533
  iconColor: n,
540
534
  isActive: o,
541
- size: d
542
- }), u = o ? "neutral" : "warm";
543
- return /* @__PURE__ */ q(
544
- B,
535
+ size: m
536
+ }), i = o ? "neutral" : "warm";
537
+ return /* @__PURE__ */ V(
538
+ $,
545
539
  {
546
- className: Pe("root", `size-${d}`, l),
547
- id: i,
548
- ref: f,
549
- render: e ? /* @__PURE__ */ k(e, {}) : void 0,
550
- store: v,
551
- ...a,
540
+ className: ze("root", `size-${m}`, l),
541
+ id: d,
542
+ ref: a,
543
+ render: e ? /* @__PURE__ */ h(e, {}) : void 0,
544
+ store: f,
545
+ ...I,
552
546
  children: [
553
547
  c,
554
548
  t,
555
- r ? /* @__PURE__ */ k(H, { size: d, variant: u, children: r }) : null
549
+ s ? /* @__PURE__ */ h(G, { size: m, variant: i, children: s }) : null
556
550
  ]
557
551
  }
558
552
  );
559
553
  }
560
554
  );
561
- O.displayName = "Tabs.Tab";
562
- const M = _(({ children: e, ...r }, t) => /* @__PURE__ */ k(L, { ref: t, ...r, children: e }));
563
- M.displayName = "Tabs.Panel";
564
- const Te = C(N), V = _(
565
- ({ children: e, className: r, size: t = "lg", store: l, ...s }, n) => {
566
- const i = F.Children.map(
567
- e,
568
- (d) => K(d) ? W(d, { size: t }) : d
569
- );
570
- return /* @__PURE__ */ k(
571
- $,
572
- {
573
- className: Te("tab-list", `size-${t}`, r),
574
- ref: n,
575
- store: l,
576
- ...s,
577
- children: i
578
- }
579
- );
580
- }
555
+ j.displayName = "Tabs.Tab";
556
+ const q = _(({ children: e, ...s }, t) => /* @__PURE__ */ h(F, { ref: t, ...s, children: e }));
557
+ q.displayName = "Tabs.Panel";
558
+ const Pe = N(M), B = _(
559
+ ({ children: e, className: s, size: t = "lg", store: l, ...r }, n) => /* @__PURE__ */ h(
560
+ R,
561
+ {
562
+ className: Pe("tab-list", `size-${t}`, s),
563
+ ref: n,
564
+ store: l,
565
+ ...r,
566
+ children: /* @__PURE__ */ h(E.Provider, { value: { size: t }, children: e })
567
+ }
568
+ )
581
569
  );
582
- V.displayName = "Tabs";
583
- const Re = Object.assign(V, { Panel: M, Tab: O });
570
+ B.displayName = "Tabs";
571
+ const Re = Object.assign(B, { Panel: q, Tab: j });
584
572
  export {
585
573
  Re as Tabs,
586
- V as TabsComponent,
574
+ B as TabsComponent,
587
575
  Fe as useTab
588
576
  };
package/dist/Tag.css CHANGED
@@ -1 +1 @@
1
- @property --gradient-angle{syntax: "<angle>"; initial-value: -60deg; inherits: true;}@layer components{._root_otzk1_7{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(--tag-border-radius);border-color:var(--tag-color-border-default);border-width:var(--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_otzk1_7>span,._root_otzk1_7>p{overflow:hidden;text-overflow:ellipsis}._root_otzk1_7>svg{flex-shrink:0;width:var(--tag-size-icon);height:var(--tag-size-icon)}button._root_otzk1_7,a._root_otzk1_7{cursor:pointer;text-decoration:none}@media (hover: hover) and (pointer: fine){button._root_otzk1_7:hover:not(._disabled_otzk1_51),a._root_otzk1_7:hover:not(._disabled_otzk1_51){--backgroundColor: var(--backgroundColorHover);--boxShadow: var(--elevation-20)}button._root_otzk1_7._variant-dash_otzk1_56:hover:not(._disabled_otzk1_51),a._root_otzk1_7._variant-dash_otzk1_56:hover:not(._disabled_otzk1_51){border-color:var(--tag-color-border-dash-hover)}}._disabled_otzk1_51{background:var(--backgroundColorDisabled);border:none;cursor:inherit;--boxShadow: none;--color: var(--colorDisabled) !important}._disabled_otzk1_51._ai_otzk1_68{border:inherit}._disabled_otzk1_51 ._removeButton_otzk1_71{cursor:inherit}._variant-brand_otzk1_74{--backgroundColor: var(--tag-color-background-brand-default);--backgroundColorHover: var(--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(--tag-color-background-brand-disabled);--color: var(--tag-color-text-brand-default);--colorDisabled: var(--tag-color-text-brand-disabled)}._variant-brand_otzk1_74._ai_otzk1_68{border-width:1px;border-color:transparent;box-shadow:inset 0 0 0 2px #fff;--backgroundColor: linear-gradient(var(--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(--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(--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-light-brand_otzk1_89{--backgroundColor: var(--tag-color-background-brand-light-default);--backgroundColorHover: var(--tag-color-background-brand-light-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(--tag-color-background-brand-light-disabled);--color: var(--tag-color-text-brand-default);--colorDisabled: var(--tag-color-text-brand-disabled)}._variant-dark-brand_otzk1_96{--backgroundColor: var(--tag-color-background-brand-dark-default);--backgroundColorHover: var(--tag-color-background-brand-dark-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(--tag-color-background-brand-dark-disabled);--color: var(--tag-color-text-brand-default);--colorDisabled: var(--tag-color-text-brand-disabled)}._variant-warm_otzk1_103{--backgroundColor: var(--tag-color-background-warm-default);--backgroundColorHover: var(--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(--tag-color-background-warm-disabled);--color: var(--tag-color-text-warm-default);--colorDisabled: var(--tag-color-text-warm-disabled)}._variant-warm_otzk1_103._ai_otzk1_68{border-width:1px;border-color:transparent;box-shadow:inset 0 0 0 2px #fff;--backgroundColor: linear-gradient(var(--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(--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(--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-light-warm_otzk1_118{--backgroundColor: var(--tag-color-background-warm-light-default);--backgroundColorHover: var(--tag-color-background-warm-light-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(--tag-color-background-warm-light-disabled);--color: var(--tag-color-text-warm-default);--colorDisabled: var(--tag-color-text-warm-disabled)}._variant-dark-warm_otzk1_125{--backgroundColor: var(--tag-color-background-warm-dark-default);--backgroundColorHover: var(--tag-color-background-warm-dark-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(--tag-color-background-warm-dark-disabled);--color: var(--tag-color-text-warm-default);--colorDisabled: var(--tag-color-text-warm-disabled)}._variant-red_otzk1_132{--backgroundColor: var(--tag-color-background-red-default);--backgroundColorHover: var(--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(--tag-color-background-red-disabled);--color: var(--tag-color-text-red-default);--colorDisabled: var(--tag-color-text-red-disabled)}._variant-red_otzk1_132._ai_otzk1_68{border-width:1px;border-color:transparent;box-shadow:inset 0 0 0 2px #fff;--backgroundColor: linear-gradient(var(--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(--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(--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-light-red_otzk1_147{--backgroundColor: var(--tag-color-background-red-light-default);--backgroundColorHover: var(--tag-color-background-red-light-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(--tag-color-background-red-disabled);--color: var(--tag-color-text-red-default);--colorDisabled: var(--tag-color-text-red-disabled)}._variant-dark-red_otzk1_154{--backgroundColor: var(--tag-color-background-red-dark-default);--backgroundColorHover: var(--tag-color-background-red-dark-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(--tag-color-background-red-disabled);--color: var(--tag-color-text-red-default);--colorDisabled: var(--tag-color-text-red-disabled)}._variant-blue_otzk1_161{--backgroundColor: var(--tag-color-background-blue-default);--backgroundColorHover: var(--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(--tag-color-background-blue-disabled);--color: var(--tag-color-text-blue-default);--colorDisabled: var(--tag-color-text-blue-disabled)}._variant-blue_otzk1_161._ai_otzk1_68{border-width:1px;border-color:transparent;box-shadow:inset 0 0 0 2px #fff;--backgroundColor: linear-gradient(var(--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(--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(--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-light-blue_otzk1_176{--backgroundColor: var(--tag-color-background-blue-light-default);--backgroundColorHover: var(--tag-color-background-blue-light-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(--tag-color-background-blue-light-disabled);--color: var(--tag-color-text-blue-default);--colorDisabled: var(--tag-color-text-blue-disabled)}._variant-dark-blue_otzk1_183{--backgroundColor: var(--tag-color-background-blue-dark-default);--backgroundColorHover: var(--tag-color-background-blue-dark-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(--tag-color-background-blue-dark-disabled);--color: var(--tag-color-text-blue-default);--colorDisabled: var(--tag-color-text-blue-disabled)}._variant-green_otzk1_190{--backgroundColor: var(--tag-color-background-green-default);--backgroundColorHover: var(--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(--tag-color-background-green-disabled);--color: var(--tag-color-text-green-default);--colorDisabled: var(--tag-color-text-green-disabled)}._variant-green_otzk1_190._ai_otzk1_68{border-width:1px;border-color:transparent;box-shadow:inset 0 0 0 2px #fff;--backgroundColor: linear-gradient(var(--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(--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(--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-light-green_otzk1_205{--backgroundColor: var(--tag-color-background-green-light-default);--backgroundColorHover: var(--tag-color-background-green-light-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(--tag-color-background-green-light-disabled);--color: var(--tag-color-text-green-default);--colorDisabled: var(--tag-color-text-green-disabled)}._variant-dark-green_otzk1_212{--backgroundColor: var(--tag-color-background-green-dark-default);--backgroundColorHover: var(--tag-color-background-green-dark-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(--tag-color-background-green-dark-disabled);--color: var(--tag-color-text-green-default);--colorDisabled: var(--tag-color-text-green-disabled)}._variant-orange_otzk1_219{--backgroundColor: var(--tag-color-background-orange-default);--backgroundColorHover: var(--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(--tag-color-background-orange-disabled);--color: var(--tag-color-text-orange-default);--colorDisabled: var(--tag-color-text-orange-disabled)}._variant-orange_otzk1_219._ai_otzk1_68{border-width:1px;border-color:transparent;box-shadow:inset 0 0 0 2px #fff;--backgroundColor: linear-gradient(var(--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(--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(--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-light-orange_otzk1_234{--backgroundColor: var(--tag-color-background-orange-light-default);--backgroundColorHover: var(--tag-color-background-orange-light-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(--tag-color-background-orange-light-disabled);--color: var(--tag-color-text-orange-default);--colorDisabled: var(--tag-color-text-orange-disabled)}._variant-dark-orange_otzk1_241{--backgroundColor: var(--tag-color-background-orange-dark-default);--backgroundColorHover: var(--tag-color-background-orange-dark-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(--tag-color-background-orange-dark-disabled);--color: var(--tag-color-text-orange-default);--colorDisabled: var(--tag-color-text-orange-disabled)}._variant-pink_otzk1_248{--backgroundColor: var(--tag-color-background-pink-default);--backgroundColorHover: var(--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(--tag-color-background-pink-disabled);--color: var(--tag-color-text-pink-default);--colorDisabled: var(--tag-color-text-pink-disabled)}._variant-pink_otzk1_248._ai_otzk1_68{border-width:1px;border-color:transparent;box-shadow:inset 0 0 0 2px #fff;--backgroundColor: linear-gradient(var(--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(--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(--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-light-pink_otzk1_263{--backgroundColor: var(--tag-color-background-pink-light-default);--backgroundColorHover: var(--tag-color-background-pink-light-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(--tag-color-background-pink-light-disabled);--color: var(--tag-color-text-pink-default);--colorDisabled: var(--tag-color-text-pink-disabled)}._variant-dark-pink_otzk1_270{--backgroundColor: var(--tag-color-background-pink-dark-default);--backgroundColorHover: var(--tag-color-background-pink-dark-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(--tag-color-background-pink-dark-disabled);--color: var(--tag-color-text-pink-default);--colorDisabled: var(--tag-color-text-pink-disabled)}._variant-teal_otzk1_277{--backgroundColor: var(--tag-color-background-teal-default);--backgroundColorHover: var(--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(--tag-color-background-teal-disabled);--color: var(--tag-color-text-teal-default);--colorDisabled: var(--tag-color-text-teal-disabled)}._variant-teal_otzk1_277._ai_otzk1_68{border-width:1px;border-color:transparent;box-shadow:inset 0 0 0 2px #fff;--backgroundColor: linear-gradient(var(--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(--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(--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-light-teal_otzk1_292{--backgroundColor: var(--tag-color-background-teal-light-default);--backgroundColorHover: var(--tag-color-background-teal-light-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(--tag-color-background-teal-light-disabled);--color: var(--tag-color-text-teal-default);--colorDisabled: var(--tag-color-text-teal-disabled)}._variant-dark-teal_otzk1_299{--backgroundColor: var(--tag-color-background-teal-dark-default);--backgroundColorHover: var(--tag-color-background-teal-dark-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(--tag-color-background-teal-dark-disabled);--color: var(--tag-color-text-teal-default);--colorDisabled: var(--tag-color-text-teal-disabled)}._variant-violet_otzk1_306{--backgroundColor: var(--tag-color-background-violet-default);--backgroundColorHover: var(--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(--tag-color-background-violet-disabled);--color: var(--tag-color-text-violet-default);--colorDisabled: var(--tag-color-text-violet-disabled)}._variant-violet_otzk1_306._ai_otzk1_68{border-width:1px;border-color:transparent;box-shadow:inset 0 0 0 2px #fff;--backgroundColor: linear-gradient(var(--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(--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(--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-light-violet_otzk1_321{--backgroundColor: var(--tag-color-background-violet-light-default);--backgroundColorHover: var(--tag-color-background-violet-light-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(--tag-color-background-violet-light-disabled);--color: var(--tag-color-text-violet-default);--colorDisabled: var(--tag-color-text-violet-disabled)}._variant-dark-violet_otzk1_328{--backgroundColor: var(--tag-color-background-violet-dark-default);--backgroundColorHover: var(--tag-color-background-violet-dark-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(--tag-color-background-violet-dark-disabled);--color: var(--tag-color-text-violet-default);--colorDisabled: var(--tag-color-text-violet-disabled)}._variant-dash_otzk1_56{--backgroundColor: var(--tag-color-background-dash-default);--backgroundColorHover: var(--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(--tag-color-background-dash-disabled);--color: var(--tag-color-text-dash-default);--colorDisabled: var(--tag-color-text-dash-disabled);border:var(--tag-border-width-default) dashed var(--tag-color-border-dash-default);position:relative}._variant-dash_otzk1_56:hover{box-shadow:none}._variant-dash_otzk1_56._disabled_otzk1_51{border-color:var(--tag-color-border-dash-disabled)}._size-md_otzk1_350{--height: var(--tag-size-max-height-md);--maxHeight: var(--tag-size-max-height-md);--paddingVertical: var(--tag-padding-block-md);--paddingHorizontal: var(--tag-padding-inline-md);--gap: var(--tag-gap-content)}._size-lg_otzk1_357{--height: var(--tag-size-max-height-lg);--maxHeight: var(--tag-size-max-height-lg);--paddingVertical: var(--tag-padding-block-lg);--paddingHorizontal: var(--tag-padding-inline-lg);--gap: var(--tag-gap-content)}._hasRemoveAction_otzk1_364{align-items:center;display:inline-flex;flex-direction:row;gap:var(--tag-padding-block-md)}._isSquare_otzk1_370{flex-basis:var(--height);justify-content:center;padding:0}._removeButton_otzk1_71{cursor:pointer;flex-shrink:0;--paddingInlineHasIcon: 0}}
1
+ @property --gradient-angle{syntax: "<angle>"; initial-value: -60deg; inherits: true;}@layer components{._root_4kt6z_7{position:relative;display:inline-flex;align-items:center;justify-content:var(--justifyContent, flex-start);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(--tag-border-radius);border-color:var(--tag-color-border-default);border-width:var(--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_4kt6z_7>span,._root_4kt6z_7>p{overflow:hidden;text-overflow:ellipsis}._root_4kt6z_7>svg{flex-shrink:0;width:var(--tag-size-icon);height:var(--tag-size-icon)}button._root_4kt6z_7,a._root_4kt6z_7{cursor:pointer;text-decoration:none}@media (hover: hover) and (pointer: fine){button._root_4kt6z_7:hover:not(._disabled_4kt6z_51),a._root_4kt6z_7:hover:not(._disabled_4kt6z_51){--backgroundColor: var(--backgroundColorHover);--boxShadow: var(--elevation-20)}button._root_4kt6z_7._variant-dash_4kt6z_56:hover:not(._disabled_4kt6z_51),a._root_4kt6z_7._variant-dash_4kt6z_56:hover:not(._disabled_4kt6z_51){border-color:var(--tag-color-border-dash-hover)}}._disabled_4kt6z_51{background:var(--backgroundColorDisabled);border:none;cursor:inherit;--boxShadow: none;--color: var(--colorDisabled) !important}._disabled_4kt6z_51._ai_4kt6z_68{border:inherit}._disabled_4kt6z_51 ._removeButton_4kt6z_71{cursor:inherit}._variant-brand_4kt6z_74{--backgroundColor: var(--tag-color-background-brand-default);--backgroundColorHover: var(--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(--tag-color-background-brand-disabled);--color: var(--tag-color-text-brand-default);--colorDisabled: var(--tag-color-text-brand-disabled)}._variant-brand_4kt6z_74._ai_4kt6z_68{border-width:1px;border-color:transparent;box-shadow:inset 0 0 0 2px #fff;--backgroundColor: linear-gradient(var(--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(--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(--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-light-brand_4kt6z_89{--backgroundColor: var(--tag-color-background-brand-light-default);--backgroundColorHover: var(--tag-color-background-brand-light-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(--tag-color-background-brand-light-disabled);--color: var(--tag-color-text-brand-default);--colorDisabled: var(--tag-color-text-brand-disabled)}._variant-dark-brand_4kt6z_96{--backgroundColor: var(--tag-color-background-brand-dark-default);--backgroundColorHover: var(--tag-color-background-brand-dark-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(--tag-color-background-brand-dark-disabled);--color: var(--tag-color-text-brand-default);--colorDisabled: var(--tag-color-text-brand-disabled)}._variant-warm_4kt6z_103{--backgroundColor: var(--tag-color-background-warm-default);--backgroundColorHover: var(--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(--tag-color-background-warm-disabled);--color: var(--tag-color-text-warm-default);--colorDisabled: var(--tag-color-text-warm-disabled)}._variant-warm_4kt6z_103._ai_4kt6z_68{border-width:1px;border-color:transparent;box-shadow:inset 0 0 0 2px #fff;--backgroundColor: linear-gradient(var(--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(--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(--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-light-warm_4kt6z_118{--backgroundColor: var(--tag-color-background-warm-light-default);--backgroundColorHover: var(--tag-color-background-warm-light-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(--tag-color-background-warm-light-disabled);--color: var(--tag-color-text-warm-default);--colorDisabled: var(--tag-color-text-warm-disabled)}._variant-dark-warm_4kt6z_125{--backgroundColor: var(--tag-color-background-warm-dark-default);--backgroundColorHover: var(--tag-color-background-warm-dark-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(--tag-color-background-warm-dark-disabled);--color: var(--tag-color-text-warm-default);--colorDisabled: var(--tag-color-text-warm-disabled)}._variant-red_4kt6z_132{--backgroundColor: var(--tag-color-background-red-default);--backgroundColorHover: var(--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(--tag-color-background-red-disabled);--color: var(--tag-color-text-red-default);--colorDisabled: var(--tag-color-text-red-disabled)}._variant-red_4kt6z_132._ai_4kt6z_68{border-width:1px;border-color:transparent;box-shadow:inset 0 0 0 2px #fff;--backgroundColor: linear-gradient(var(--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(--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(--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-light-red_4kt6z_147{--backgroundColor: var(--tag-color-background-red-light-default);--backgroundColorHover: var(--tag-color-background-red-light-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(--tag-color-background-red-disabled);--color: var(--tag-color-text-red-default);--colorDisabled: var(--tag-color-text-red-disabled)}._variant-dark-red_4kt6z_154{--backgroundColor: var(--tag-color-background-red-dark-default);--backgroundColorHover: var(--tag-color-background-red-dark-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(--tag-color-background-red-disabled);--color: var(--tag-color-text-red-default);--colorDisabled: var(--tag-color-text-red-disabled)}._variant-blue_4kt6z_161{--backgroundColor: var(--tag-color-background-blue-default);--backgroundColorHover: var(--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(--tag-color-background-blue-disabled);--color: var(--tag-color-text-blue-default);--colorDisabled: var(--tag-color-text-blue-disabled)}._variant-blue_4kt6z_161._ai_4kt6z_68{border-width:1px;border-color:transparent;box-shadow:inset 0 0 0 2px #fff;--backgroundColor: linear-gradient(var(--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(--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(--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-light-blue_4kt6z_176{--backgroundColor: var(--tag-color-background-blue-light-default);--backgroundColorHover: var(--tag-color-background-blue-light-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(--tag-color-background-blue-light-disabled);--color: var(--tag-color-text-blue-default);--colorDisabled: var(--tag-color-text-blue-disabled)}._variant-dark-blue_4kt6z_183{--backgroundColor: var(--tag-color-background-blue-dark-default);--backgroundColorHover: var(--tag-color-background-blue-dark-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(--tag-color-background-blue-dark-disabled);--color: var(--tag-color-text-blue-default);--colorDisabled: var(--tag-color-text-blue-disabled)}._variant-green_4kt6z_190{--backgroundColor: var(--tag-color-background-green-default);--backgroundColorHover: var(--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(--tag-color-background-green-disabled);--color: var(--tag-color-text-green-default);--colorDisabled: var(--tag-color-text-green-disabled)}._variant-green_4kt6z_190._ai_4kt6z_68{border-width:1px;border-color:transparent;box-shadow:inset 0 0 0 2px #fff;--backgroundColor: linear-gradient(var(--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(--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(--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-light-green_4kt6z_205{--backgroundColor: var(--tag-color-background-green-light-default);--backgroundColorHover: var(--tag-color-background-green-light-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(--tag-color-background-green-light-disabled);--color: var(--tag-color-text-green-default);--colorDisabled: var(--tag-color-text-green-disabled)}._variant-dark-green_4kt6z_212{--backgroundColor: var(--tag-color-background-green-dark-default);--backgroundColorHover: var(--tag-color-background-green-dark-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(--tag-color-background-green-dark-disabled);--color: var(--tag-color-text-green-default);--colorDisabled: var(--tag-color-text-green-disabled)}._variant-orange_4kt6z_219{--backgroundColor: var(--tag-color-background-orange-default);--backgroundColorHover: var(--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(--tag-color-background-orange-disabled);--color: var(--tag-color-text-orange-default);--colorDisabled: var(--tag-color-text-orange-disabled)}._variant-orange_4kt6z_219._ai_4kt6z_68{border-width:1px;border-color:transparent;box-shadow:inset 0 0 0 2px #fff;--backgroundColor: linear-gradient(var(--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(--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(--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-light-orange_4kt6z_234{--backgroundColor: var(--tag-color-background-orange-light-default);--backgroundColorHover: var(--tag-color-background-orange-light-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(--tag-color-background-orange-light-disabled);--color: var(--tag-color-text-orange-default);--colorDisabled: var(--tag-color-text-orange-disabled)}._variant-dark-orange_4kt6z_241{--backgroundColor: var(--tag-color-background-orange-dark-default);--backgroundColorHover: var(--tag-color-background-orange-dark-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(--tag-color-background-orange-dark-disabled);--color: var(--tag-color-text-orange-default);--colorDisabled: var(--tag-color-text-orange-disabled)}._variant-pink_4kt6z_248{--backgroundColor: var(--tag-color-background-pink-default);--backgroundColorHover: var(--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(--tag-color-background-pink-disabled);--color: var(--tag-color-text-pink-default);--colorDisabled: var(--tag-color-text-pink-disabled)}._variant-pink_4kt6z_248._ai_4kt6z_68{border-width:1px;border-color:transparent;box-shadow:inset 0 0 0 2px #fff;--backgroundColor: linear-gradient(var(--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(--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(--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-light-pink_4kt6z_263{--backgroundColor: var(--tag-color-background-pink-light-default);--backgroundColorHover: var(--tag-color-background-pink-light-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(--tag-color-background-pink-light-disabled);--color: var(--tag-color-text-pink-default);--colorDisabled: var(--tag-color-text-pink-disabled)}._variant-dark-pink_4kt6z_270{--backgroundColor: var(--tag-color-background-pink-dark-default);--backgroundColorHover: var(--tag-color-background-pink-dark-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(--tag-color-background-pink-dark-disabled);--color: var(--tag-color-text-pink-default);--colorDisabled: var(--tag-color-text-pink-disabled)}._variant-teal_4kt6z_277{--backgroundColor: var(--tag-color-background-teal-default);--backgroundColorHover: var(--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(--tag-color-background-teal-disabled);--color: var(--tag-color-text-teal-default);--colorDisabled: var(--tag-color-text-teal-disabled)}._variant-teal_4kt6z_277._ai_4kt6z_68{border-width:1px;border-color:transparent;box-shadow:inset 0 0 0 2px #fff;--backgroundColor: linear-gradient(var(--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(--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(--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-light-teal_4kt6z_292{--backgroundColor: var(--tag-color-background-teal-light-default);--backgroundColorHover: var(--tag-color-background-teal-light-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(--tag-color-background-teal-light-disabled);--color: var(--tag-color-text-teal-default);--colorDisabled: var(--tag-color-text-teal-disabled)}._variant-dark-teal_4kt6z_299{--backgroundColor: var(--tag-color-background-teal-dark-default);--backgroundColorHover: var(--tag-color-background-teal-dark-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(--tag-color-background-teal-dark-disabled);--color: var(--tag-color-text-teal-default);--colorDisabled: var(--tag-color-text-teal-disabled)}._variant-violet_4kt6z_306{--backgroundColor: var(--tag-color-background-violet-default);--backgroundColorHover: var(--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(--tag-color-background-violet-disabled);--color: var(--tag-color-text-violet-default);--colorDisabled: var(--tag-color-text-violet-disabled)}._variant-violet_4kt6z_306._ai_4kt6z_68{border-width:1px;border-color:transparent;box-shadow:inset 0 0 0 2px #fff;--backgroundColor: linear-gradient(var(--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(--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(--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-light-violet_4kt6z_321{--backgroundColor: var(--tag-color-background-violet-light-default);--backgroundColorHover: var(--tag-color-background-violet-light-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(--tag-color-background-violet-light-disabled);--color: var(--tag-color-text-violet-default);--colorDisabled: var(--tag-color-text-violet-disabled)}._variant-dark-violet_4kt6z_328{--backgroundColor: var(--tag-color-background-violet-dark-default);--backgroundColorHover: var(--tag-color-background-violet-dark-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(--tag-color-background-violet-dark-disabled);--color: var(--tag-color-text-violet-default);--colorDisabled: var(--tag-color-text-violet-disabled)}._variant-dash_4kt6z_56{--backgroundColor: var(--tag-color-background-dash-default);--backgroundColorHover: var(--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(--tag-color-background-dash-disabled);--color: var(--tag-color-text-dash-default);--colorDisabled: var(--tag-color-text-dash-disabled);border:var(--tag-border-width-default) dashed var(--tag-color-border-dash-default);position:relative}._variant-dash_4kt6z_56:hover{box-shadow:none}._variant-dash_4kt6z_56._disabled_4kt6z_51{border-color:var(--tag-color-border-dash-disabled)}._size-md_4kt6z_350{--height: var(--tag-size-max-height-md);--maxHeight: var(--tag-size-max-height-md);--paddingVertical: var(--tag-padding-block-md);--paddingHorizontal: var(--tag-padding-inline-md);--gap: var(--tag-gap-content)}._size-lg_4kt6z_357{--height: var(--tag-size-max-height-lg);--maxHeight: var(--tag-size-max-height-lg);--paddingVertical: var(--tag-padding-block-lg);--paddingHorizontal: var(--tag-padding-inline-lg);--gap: var(--tag-gap-content)}._hasRemoveAction_4kt6z_364{align-items:center;display:inline-flex;flex-direction:row;gap:var(--tag-padding-block-md)}._isSquare_4kt6z_370{flex-basis:var(--height);justify-content:center;padding:0}._removeButton_4kt6z_71{cursor:pointer;flex-shrink:0;--paddingInlineHasIcon: 0}}
package/dist/Tag.js CHANGED
@@ -5,41 +5,41 @@ import w from "react";
5
5
  import { Icon as s } from "./Icon.js";
6
6
  import { c as R } from "./index-PAaZGbyz.js";
7
7
  import { f as C } from "./forwardRefWithAs-8eP3ZN15.js";
8
- const S = "_root_otzk1_7", N = "_disabled_otzk1_51", q = "_ai_otzk1_68", x = "_removeButton_otzk1_71", y = "_hasRemoveAction_otzk1_364", A = "_isSquare_otzk1_370", T = {
8
+ const S = "_root_4kt6z_7", N = "_disabled_4kt6z_51", q = "_ai_4kt6z_68", x = "_removeButton_4kt6z_71", y = "_hasRemoveAction_4kt6z_364", A = "_isSquare_4kt6z_370", T = {
9
9
  root: S,
10
10
  disabled: N,
11
- "variant-dash": "_variant-dash_otzk1_56",
11
+ "variant-dash": "_variant-dash_4kt6z_56",
12
12
  ai: q,
13
13
  removeButton: x,
14
- "variant-brand": "_variant-brand_otzk1_74",
15
- "variant-light-brand": "_variant-light-brand_otzk1_89",
16
- "variant-dark-brand": "_variant-dark-brand_otzk1_96",
17
- "variant-warm": "_variant-warm_otzk1_103",
18
- "variant-light-warm": "_variant-light-warm_otzk1_118",
19
- "variant-dark-warm": "_variant-dark-warm_otzk1_125",
20
- "variant-red": "_variant-red_otzk1_132",
21
- "variant-light-red": "_variant-light-red_otzk1_147",
22
- "variant-dark-red": "_variant-dark-red_otzk1_154",
23
- "variant-blue": "_variant-blue_otzk1_161",
24
- "variant-light-blue": "_variant-light-blue_otzk1_176",
25
- "variant-dark-blue": "_variant-dark-blue_otzk1_183",
26
- "variant-green": "_variant-green_otzk1_190",
27
- "variant-light-green": "_variant-light-green_otzk1_205",
28
- "variant-dark-green": "_variant-dark-green_otzk1_212",
29
- "variant-orange": "_variant-orange_otzk1_219",
30
- "variant-light-orange": "_variant-light-orange_otzk1_234",
31
- "variant-dark-orange": "_variant-dark-orange_otzk1_241",
32
- "variant-pink": "_variant-pink_otzk1_248",
33
- "variant-light-pink": "_variant-light-pink_otzk1_263",
34
- "variant-dark-pink": "_variant-dark-pink_otzk1_270",
35
- "variant-teal": "_variant-teal_otzk1_277",
36
- "variant-light-teal": "_variant-light-teal_otzk1_292",
37
- "variant-dark-teal": "_variant-dark-teal_otzk1_299",
38
- "variant-violet": "_variant-violet_otzk1_306",
39
- "variant-light-violet": "_variant-light-violet_otzk1_321",
40
- "variant-dark-violet": "_variant-dark-violet_otzk1_328",
41
- "size-md": "_size-md_otzk1_350",
42
- "size-lg": "_size-lg_otzk1_357",
14
+ "variant-brand": "_variant-brand_4kt6z_74",
15
+ "variant-light-brand": "_variant-light-brand_4kt6z_89",
16
+ "variant-dark-brand": "_variant-dark-brand_4kt6z_96",
17
+ "variant-warm": "_variant-warm_4kt6z_103",
18
+ "variant-light-warm": "_variant-light-warm_4kt6z_118",
19
+ "variant-dark-warm": "_variant-dark-warm_4kt6z_125",
20
+ "variant-red": "_variant-red_4kt6z_132",
21
+ "variant-light-red": "_variant-light-red_4kt6z_147",
22
+ "variant-dark-red": "_variant-dark-red_4kt6z_154",
23
+ "variant-blue": "_variant-blue_4kt6z_161",
24
+ "variant-light-blue": "_variant-light-blue_4kt6z_176",
25
+ "variant-dark-blue": "_variant-dark-blue_4kt6z_183",
26
+ "variant-green": "_variant-green_4kt6z_190",
27
+ "variant-light-green": "_variant-light-green_4kt6z_205",
28
+ "variant-dark-green": "_variant-dark-green_4kt6z_212",
29
+ "variant-orange": "_variant-orange_4kt6z_219",
30
+ "variant-light-orange": "_variant-light-orange_4kt6z_234",
31
+ "variant-dark-orange": "_variant-dark-orange_4kt6z_241",
32
+ "variant-pink": "_variant-pink_4kt6z_248",
33
+ "variant-light-pink": "_variant-light-pink_4kt6z_263",
34
+ "variant-dark-pink": "_variant-dark-pink_4kt6z_270",
35
+ "variant-teal": "_variant-teal_4kt6z_277",
36
+ "variant-light-teal": "_variant-light-teal_4kt6z_292",
37
+ "variant-dark-teal": "_variant-dark-teal_4kt6z_299",
38
+ "variant-violet": "_variant-violet_4kt6z_306",
39
+ "variant-light-violet": "_variant-light-violet_4kt6z_321",
40
+ "variant-dark-violet": "_variant-dark-violet_4kt6z_328",
41
+ "size-md": "_size-md_4kt6z_350",
42
+ "size-lg": "_size-lg_4kt6z_357",
43
43
  hasRemoveAction: y,
44
44
  isSquare: A
45
45
  }, k = R(T);
@@ -51,9 +51,9 @@ function j(a) {
51
51
  }
52
52
  const $ = C((a, d) => {
53
53
  const {
54
- ai: o = !1,
54
+ ai: _ = !1,
55
55
  as: g = "div",
56
- children: _,
56
+ children: o,
57
57
  className: z,
58
58
  disabled: i = !1,
59
59
  icon: m,
@@ -63,7 +63,7 @@ const $ = C((a, d) => {
63
63
  size: c = "lg",
64
64
  variant: l = "warm",
65
65
  ...h
66
- } = a, u = j(_) === 1 && !r, f = (n) => {
66
+ } = a, u = j(o) === 1 && !r, f = (n) => {
67
67
  n.stopPropagation(), !i && (t != null && t.onClick && t.onClick(n), r && r());
68
68
  }, p = (n) => {
69
69
  i || v && v(n);
@@ -77,7 +77,7 @@ const $ = C((a, d) => {
77
77
  `size-${c}`,
78
78
  !!r && "hasRemoveAction",
79
79
  u && "isSquare",
80
- o && "ai",
80
+ _ && "ai",
81
81
  i && "disabled",
82
82
  z
83
83
  ),
@@ -85,8 +85,8 @@ const $ = C((a, d) => {
85
85
  ref: d,
86
86
  ...h,
87
87
  children: [
88
- o && l !== "dash" ? /* @__PURE__ */ e(s, { name: "sparkles", size: "md" }) : m,
89
- _,
88
+ _ && l !== "dash" ? /* @__PURE__ */ e(s, { name: "sparkles", size: "md" }) : m,
89
+ /* @__PURE__ */ e("span", { children: o }),
90
90
  r ? /* @__PURE__ */ e(
91
91
  "button",
92
92
  {
package/dist/types/components/Tabs/TabContext.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import { default as React } from 'react';
2
+ import { Size } from './types';
3
+ type TabContextType = {
4
+ size?: Size;
5
+ };
6
+ export declare const TabContext: React.Context<TabContextType>;
7
+ export declare function useTabSize(): Size;
8
+ export {};
package/dist/types/components/Tabs/index.d.ts CHANGED
@@ -1,8 +1,7 @@
1
- import { default as React } from 'react';
2
1
  import { TabListProps } from './types';
3
- export declare const TabsComponent: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLDivElement>>;
4
- export declare const Tabs: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLDivElement>> & {
5
- Panel: React.ForwardRefExoticComponent<import('./types').TabPanelProps & React.RefAttributes<HTMLDivElement>>;
2
+ export declare const TabsComponent: import('react').ForwardRefExoticComponent<TabListProps & import('react').RefAttributes<HTMLDivElement>>;
3
+ export declare const Tabs: import('react').ForwardRefExoticComponent<TabListProps & import('react').RefAttributes<HTMLDivElement>> & {
4
+ Panel: import('react').ForwardRefExoticComponent<import('./types').TabPanelProps & import('react').RefAttributes<HTMLDivElement>>;
6
5
  Tab: import('../../utils').FunctionComponentWithAs<"button", import('./types').TabProps>;
7
6
  };
8
7
  export { useTabStore as useTab } from '@ariakit/react';
package/dist/types/components/Tabs/types.d.ts CHANGED
@@ -15,7 +15,6 @@ export interface TabOptions {
15
15
  icon?: IconName | React.ReactNode;
16
16
  iconColor?: 'blue' | 'green' | 'orange' | 'pink' | 'teal' | 'violet' | 'warm';
17
17
  id?: string;
18
- size?: Size;
19
18
  store: TabStore;
20
19
  }
21
20
  export type TabPanelProps = {
package/dist/types/components/Tabs/utils.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- import { TabProps } from './types';
2
- export declare function getIcon({ icon, iconColor, isActive, size, }: Pick<TabProps, 'icon' | 'iconColor' | 'size'> & {
1
+ import { TabListProps, TabProps } from './types';
2
+ export declare function getIcon({ icon, iconColor, isActive, size, }: Pick<TabProps, 'icon' | 'iconColor'> & {
3
3
  isActive: boolean;
4
+ size: TabListProps['size'];
4
5
  }): string | number | true | Iterable<import('react').ReactNode> | import("react/jsx-runtime").JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "welcome-ui",
3
- "version": "10.0.4",
3
+ "version": "10.0.6",
4
4
  "description": "Customizable design system with react, typescript, tailwindcss and ariakit.",
5
5
  "files": [
6
6
  "dist"