@fanvue/ui 1.21.0 → 2.0.0

package/dist/cjs/components/Slider/SliderLayout.cjs

@@ -12,22 +12,15 @@ function SliderLayout({
 }) {
   if (labelPosition === "left") {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-      label && /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          id: labelId,
-          className: "typography-semibold-body-lg shrink-0 text-foreground-default",
-          children: label
-        }
-      ),
-      minLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-regular-body-md shrink-0 text-foreground-secondary", children: minLabel }),
+      label && /* @__PURE__ */ jsxRuntime.jsx("span", { id: labelId, className: "typography-semibold-body-lg shrink-0 text-content-primary", children: label }),
+      minLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-regular-body-md shrink-0 text-content-secondary", children: minLabel }),
       children,
-      maxLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-regular-body-md shrink-0 text-foreground-secondary", children: maxLabel })
+      maxLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-regular-body-md shrink-0 text-content-secondary", children: maxLabel })
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col gap-3", children: [
-    label && /* @__PURE__ */ jsxRuntime.jsx("span", { id: labelId, className: "typography-semibold-body-lg text-foreground-default", children: label }),
-    (minLabel || maxLabel) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-start justify-between text-foreground-secondary text-sm leading-[18px]", children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx("span", { id: labelId, className: "typography-semibold-body-lg text-content-primary", children: label }),
+    (minLabel || maxLabel) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-start justify-between typography-regular-body-md text-content-secondary", children: [
       minLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { children: minLabel }),
       maxLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto", children: maxLabel })
     ] }),

package/dist/cjs/components/Slider/SliderLayout.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SliderLayout.cjs","sources":["../../../../src/components/Slider/SliderLayout.tsx"],"sourcesContent":["import type * as React from \"react\";\nimport type { SliderLabelPosition } from \"./Slider\";\n\ninterface SliderLayoutProps {\n  label?: string;\n  labelId: string;\n  labelPosition: SliderLabelPosition;\n  minLabel?: string;\n  maxLabel?: string;\n  children: React.ReactNode;\n}\n\nexport function SliderLayout({\n  label,\n  labelId,\n  labelPosition,\n  minLabel,\n  maxLabel,\n  children,\n}: SliderLayoutProps) {\n  if (labelPosition === \"left\") {\n    return (\n      <div className=\"flex items-center gap-3\">\n        {label && (\n          <span\n            id={labelId}\n            className=\"typography-semibold-body-lg shrink-0 text-foreground-default\"\n          >\n            {label}\n          </span>\n        )}\n        {minLabel && (\n          <span className=\"typography-regular-body-md shrink-0 text-foreground-secondary\">\n            {minLabel}\n          </span>\n        )}\n        {children}\n        {maxLabel && (\n          <span className=\"typography-regular-body-md shrink-0 text-foreground-secondary\">\n            {maxLabel}\n          </span>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex w-full flex-col gap-3\">\n      {label && (\n        <span id={labelId} className=\"typography-semibold-body-lg text-foreground-default\">\n          {label}\n        </span>\n      )}\n      {(minLabel || maxLabel) && (\n        <div className=\"flex w-full items-start justify-between text-foreground-secondary text-sm leading-[18px]\">\n          {minLabel && <span>{minLabel}</span>}\n          {maxLabel && <span className=\"ml-auto\">{maxLabel}</span>}\n        </div>\n      )}\n      {children}\n    </div>\n  );\n}\n"],"names":["jsxs","jsx"],"mappings":";;;;AAYO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsB;AACpB,MAAI,kBAAkB,QAAQ;AAC5B,WACEA,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,MAAA,SACCC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,UACJ,WAAU;AAAA,UAET,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJ,YACCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,iEACb,UAAA,UACH;AAAA,MAED;AAAA,MACA,YACCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,iEACb,UAAA,SAAA,CACH;AAAA,IAAA,GAEJ;AAAA,EAEJ;AAEA,SACED,2BAAAA,KAAC,OAAA,EAAI,WAAU,8BACZ,UAAA;AAAA,IAAA,wCACE,QAAA,EAAK,IAAI,SAAS,WAAU,uDAC1B,UAAA,OACH;AAAA,KAEA,YAAY,aACZA,2BAAAA,KAAC,OAAA,EAAI,WAAU,4FACZ,UAAA;AAAA,MAAA,YAAYC,2BAAAA,IAAC,UAAM,UAAA,SAAA,CAAS;AAAA,MAC5B,YAAYA,2BAAAA,IAAC,QAAA,EAAK,WAAU,WAAW,UAAA,SAAA,CAAS;AAAA,IAAA,GACnD;AAAA,IAED;AAAA,EAAA,GACH;AAEJ;;"}
+{"version":3,"file":"SliderLayout.cjs","sources":["../../../../src/components/Slider/SliderLayout.tsx"],"sourcesContent":["import type * as React from \"react\";\nimport type { SliderLabelPosition } from \"./Slider\";\n\ninterface SliderLayoutProps {\n  label?: string;\n  labelId: string;\n  labelPosition: SliderLabelPosition;\n  minLabel?: string;\n  maxLabel?: string;\n  children: React.ReactNode;\n}\n\nexport function SliderLayout({\n  label,\n  labelId,\n  labelPosition,\n  minLabel,\n  maxLabel,\n  children,\n}: SliderLayoutProps) {\n  if (labelPosition === \"left\") {\n    return (\n      <div className=\"flex items-center gap-3\">\n        {label && (\n          <span id={labelId} className=\"typography-semibold-body-lg shrink-0 text-content-primary\">\n            {label}\n          </span>\n        )}\n        {minLabel && (\n          <span className=\"typography-regular-body-md shrink-0 text-content-secondary\">\n            {minLabel}\n          </span>\n        )}\n        {children}\n        {maxLabel && (\n          <span className=\"typography-regular-body-md shrink-0 text-content-secondary\">\n            {maxLabel}\n          </span>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex w-full flex-col gap-3\">\n      {label && (\n        <span id={labelId} className=\"typography-semibold-body-lg text-content-primary\">\n          {label}\n        </span>\n      )}\n      {(minLabel || maxLabel) && (\n        <div className=\"flex w-full items-start justify-between typography-regular-body-md text-content-secondary\">\n          {minLabel && <span>{minLabel}</span>}\n          {maxLabel && <span className=\"ml-auto\">{maxLabel}</span>}\n        </div>\n      )}\n      {children}\n    </div>\n  );\n}\n"],"names":["jsxs","jsx"],"mappings":";;;;AAYO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsB;AACpB,MAAI,kBAAkB,QAAQ;AAC5B,WACEA,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,MAAA,wCACE,QAAA,EAAK,IAAI,SAAS,WAAU,6DAC1B,UAAA,OACH;AAAA,MAED,YACCC,2BAAAA,IAAC,QAAA,EAAK,WAAU,8DACb,UAAA,UACH;AAAA,MAED;AAAA,MACA,YACCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,8DACb,UAAA,SAAA,CACH;AAAA,IAAA,GAEJ;AAAA,EAEJ;AAEA,SACED,2BAAAA,KAAC,OAAA,EAAI,WAAU,8BACZ,UAAA;AAAA,IAAA,wCACE,QAAA,EAAK,IAAI,SAAS,WAAU,oDAC1B,UAAA,OACH;AAAA,KAEA,YAAY,aACZA,2BAAAA,KAAC,OAAA,EAAI,WAAU,6FACZ,UAAA;AAAA,MAAA,YAAYC,2BAAAA,IAAC,UAAM,UAAA,SAAA,CAAS;AAAA,MAC5B,YAAYA,2BAAAA,IAAC,QAAA,EAAK,WAAU,WAAW,UAAA,SAAA,CAAS;AAAA,IAAA,GACnD;AAAA,IAED;AAAA,EAAA,GACH;AAEJ;;"}

package/dist/cjs/components/Slider/SliderThumb.cjs

@@ -56,21 +56,21 @@ function SliderThumb({
         }
       },
       className: cn.cn(
-        "flex size-6 items-center justify-center rounded-full border border-neutral-100 bg-surface-page shadow-sm",
+        "flex size-6 items-center justify-center rounded-full border border-border-primary bg-bg-primary shadow-sm",
         "transition-shadow duration-150",
-        "hover:ring-2 hover:ring-brand-accent-default",
-        "not-data-disabled:active:ring-2 not-data-disabled:active:ring-brand-accent-default",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-page",
+        "hover:ring-2 hover:ring-brand-primary-default",
+        "not-data-disabled:active:ring-2 not-data-disabled:active:ring-brand-primary-default",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary",
         "data-disabled:cursor-not-allowed"
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block size-3 rounded-full bg-brand-accent-default shadow-[inset_0px_1px_2px_0px_rgba(0,0,0,0.1)]" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block size-3 rounded-full bg-brand-primary-default shadow-[inset_0px_1px_2px_0px_rgba(0,0,0,0.1)]" }),
         showTooltip && /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
             role: "tooltip",
             "data-slider-tooltip": true,
-            className: "typography-semibold-body-sm pointer-events-none absolute bottom-full mb-2 rounded-3xl bg-surface-pageinverse px-2 py-1 text-foreground-inverse shadow-sm"
+            className: "typography-semibold-body-sm pointer-events-none absolute bottom-full mb-2 rounded-lg bg-surface-primary-inverted px-2 py-1 text-content-primary-inverted shadow-sm"
           }
         )
       ]

package/dist/cjs/components/Slider/SliderThumb.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SliderThumb.cjs","sources":["../../../../src/components/Slider/SliderThumb.tsx"],"sourcesContent":["import * as SliderPrimitive from \"@radix-ui/react-slider\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\ninterface SliderThumbProps {\n  showTooltip: boolean;\n  formatTooltip?: (value: number) => string;\n  index: number;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n}\n\nexport function SliderThumb({\n  showTooltip,\n  formatTooltip,\n  index,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n}: SliderThumbProps) {\n  const thumbRef = React.useCallback(\n    (el: HTMLSpanElement | null) => {\n      if (!el || !showTooltip) return;\n      syncTooltipText(el, formatTooltip);\n    },\n    [showTooltip, formatTooltip],\n  );\n\n  return (\n    <SliderPrimitive.Thumb\n      ref={thumbRef}\n      data-index={index}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      onPointerDown={(e) => {\n        if (showTooltip) syncTooltipText(e.currentTarget, formatTooltip);\n      }}\n      onPointerMove={(e) => {\n        if (showTooltip) syncTooltipText(e.currentTarget, formatTooltip);\n      }}\n      onKeyDown={(e) => {\n        if (showTooltip) {\n          requestAnimationFrame(() => syncTooltipText(e.currentTarget, formatTooltip));\n        }\n      }}\n      className={cn(\n        \"flex size-6 items-center justify-center rounded-full border border-neutral-100 bg-surface-page shadow-sm\",\n        \"transition-shadow duration-150\",\n        \"hover:ring-2 hover:ring-brand-accent-default\",\n        \"not-data-disabled:active:ring-2 not-data-disabled:active:ring-brand-accent-default\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-page\",\n        \"data-disabled:cursor-not-allowed\",\n      )}\n    >\n      <span className=\"block size-3 rounded-full bg-brand-accent-default shadow-[inset_0px_1px_2px_0px_rgba(0,0,0,0.1)]\" />\n\n      {showTooltip && (\n        <span\n          role=\"tooltip\"\n          data-slider-tooltip\n          className=\"typography-semibold-body-sm pointer-events-none absolute bottom-full mb-2 rounded-3xl bg-surface-pageinverse px-2 py-1 text-foreground-inverse shadow-sm\"\n        />\n      )}\n    </SliderPrimitive.Thumb>\n  );\n}\n\nfunction syncTooltipText(thumb: HTMLElement, formatTooltip?: (value: number) => string) {\n  const raw = thumb.getAttribute(\"aria-valuenow\");\n  const tooltip = thumb.querySelector<HTMLSpanElement>(\"[data-slider-tooltip]\");\n  if (raw == null || !tooltip) return;\n  const num = Number(raw);\n  tooltip.textContent = formatTooltip ? formatTooltip(num) : String(num);\n}\n"],"names":["React","jsxs","SliderPrimitive","cn","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAYO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,mBAAmB;AACrB,GAAqB;AACnB,QAAM,WAAWA,iBAAM;AAAA,IACrB,CAAC,OAA+B;AAC9B,UAAI,CAAC,MAAM,CAAC,YAAa;AACzB,sBAAgB,IAAI,aAAa;AAAA,IACnC;AAAA,IACA,CAAC,aAAa,aAAa;AAAA,EAAA;AAG7B,SACEC,2BAAAA;AAAAA,IAACC,2BAAgB;AAAA,IAAhB;AAAA,MACC,KAAK;AAAA,MACL,cAAY;AAAA,MACZ,cAAY;AAAA,MACZ,mBAAiB;AAAA,MACjB,eAAe,CAAC,MAAM;AACpB,YAAI,YAAa,iBAAgB,EAAE,eAAe,aAAa;AAAA,MACjE;AAAA,MACA,eAAe,CAAC,MAAM;AACpB,YAAI,YAAa,iBAAgB,EAAE,eAAe,aAAa;AAAA,MACjE;AAAA,MACA,WAAW,CAAC,MAAM;AAChB,YAAI,aAAa;AACf,gCAAsB,MAAM,gBAAgB,EAAE,eAAe,aAAa,CAAC;AAAA,QAC7E;AAAA,MACF;AAAA,MACA,WAAWC,GAAAA;AAAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAAC,2BAAAA,IAAC,QAAA,EAAK,WAAU,mGAAA,CAAmG;AAAA,QAElH,eACCA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,uBAAmB;AAAA,YACnB,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA;AAAA,EAAA;AAIR;AAEA,SAAS,gBAAgB,OAAoB,eAA2C;AACtF,QAAM,MAAM,MAAM,aAAa,eAAe;AAC9C,QAAM,UAAU,MAAM,cAA+B,uBAAuB;AAC5E,MAAI,OAAO,QAAQ,CAAC,QAAS;AAC7B,QAAM,MAAM,OAAO,GAAG;AACtB,UAAQ,cAAc,gBAAgB,cAAc,GAAG,IAAI,OAAO,GAAG;AACvE;;"}
+{"version":3,"file":"SliderThumb.cjs","sources":["../../../../src/components/Slider/SliderThumb.tsx"],"sourcesContent":["import * as SliderPrimitive from \"@radix-ui/react-slider\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\ninterface SliderThumbProps {\n  showTooltip: boolean;\n  formatTooltip?: (value: number) => string;\n  index: number;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n}\n\nexport function SliderThumb({\n  showTooltip,\n  formatTooltip,\n  index,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n}: SliderThumbProps) {\n  const thumbRef = React.useCallback(\n    (el: HTMLSpanElement | null) => {\n      if (!el || !showTooltip) return;\n      syncTooltipText(el, formatTooltip);\n    },\n    [showTooltip, formatTooltip],\n  );\n\n  return (\n    <SliderPrimitive.Thumb\n      ref={thumbRef}\n      data-index={index}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      onPointerDown={(e) => {\n        if (showTooltip) syncTooltipText(e.currentTarget, formatTooltip);\n      }}\n      onPointerMove={(e) => {\n        if (showTooltip) syncTooltipText(e.currentTarget, formatTooltip);\n      }}\n      onKeyDown={(e) => {\n        if (showTooltip) {\n          requestAnimationFrame(() => syncTooltipText(e.currentTarget, formatTooltip));\n        }\n      }}\n      className={cn(\n        \"flex size-6 items-center justify-center rounded-full border border-border-primary bg-bg-primary shadow-sm\",\n        \"transition-shadow duration-150\",\n        \"hover:ring-2 hover:ring-brand-primary-default\",\n        \"not-data-disabled:active:ring-2 not-data-disabled:active:ring-brand-primary-default\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary\",\n        \"data-disabled:cursor-not-allowed\",\n      )}\n    >\n      <span className=\"block size-3 rounded-full bg-brand-primary-default shadow-[inset_0px_1px_2px_0px_rgba(0,0,0,0.1)]\" />\n\n      {showTooltip && (\n        <span\n          role=\"tooltip\"\n          data-slider-tooltip\n          className=\"typography-semibold-body-sm pointer-events-none absolute bottom-full mb-2 rounded-lg bg-surface-primary-inverted px-2 py-1 text-content-primary-inverted shadow-sm\"\n        />\n      )}\n    </SliderPrimitive.Thumb>\n  );\n}\n\nfunction syncTooltipText(thumb: HTMLElement, formatTooltip?: (value: number) => string) {\n  const raw = thumb.getAttribute(\"aria-valuenow\");\n  const tooltip = thumb.querySelector<HTMLSpanElement>(\"[data-slider-tooltip]\");\n  if (raw == null || !tooltip) return;\n  const num = Number(raw);\n  tooltip.textContent = formatTooltip ? formatTooltip(num) : String(num);\n}\n"],"names":["React","jsxs","SliderPrimitive","cn","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAYO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,mBAAmB;AACrB,GAAqB;AACnB,QAAM,WAAWA,iBAAM;AAAA,IACrB,CAAC,OAA+B;AAC9B,UAAI,CAAC,MAAM,CAAC,YAAa;AACzB,sBAAgB,IAAI,aAAa;AAAA,IACnC;AAAA,IACA,CAAC,aAAa,aAAa;AAAA,EAAA;AAG7B,SACEC,2BAAAA;AAAAA,IAACC,2BAAgB;AAAA,IAAhB;AAAA,MACC,KAAK;AAAA,MACL,cAAY;AAAA,MACZ,cAAY;AAAA,MACZ,mBAAiB;AAAA,MACjB,eAAe,CAAC,MAAM;AACpB,YAAI,YAAa,iBAAgB,EAAE,eAAe,aAAa;AAAA,MACjE;AAAA,MACA,eAAe,CAAC,MAAM;AACpB,YAAI,YAAa,iBAAgB,EAAE,eAAe,aAAa;AAAA,MACjE;AAAA,MACA,WAAW,CAAC,MAAM;AAChB,YAAI,aAAa;AACf,gCAAsB,MAAM,gBAAgB,EAAE,eAAe,aAAa,CAAC;AAAA,QAC7E;AAAA,MACF;AAAA,MACA,WAAWC,GAAAA;AAAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAAC,2BAAAA,IAAC,QAAA,EAAK,WAAU,oGAAA,CAAoG;AAAA,QAEnH,eACCA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,uBAAmB;AAAA,YACnB,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA;AAAA,EAAA;AAIR;AAEA,SAAS,gBAAgB,OAAoB,eAA2C;AACtF,QAAM,MAAM,MAAM,aAAa,eAAe;AAC9C,QAAM,UAAU,MAAM,cAA+B,uBAAuB;AAC5E,MAAI,OAAO,QAAQ,CAAC,QAAS;AAC7B,QAAM,MAAM,OAAO,GAAG;AACtB,UAAQ,cAAc,gBAAgB,cAAc,GAAG,IAAI,OAAO,GAAG;AACvE;;"}

package/dist/cjs/components/Snackbar/Snackbar.cjs

@@ -65,8 +65,8 @@ function VipEarnContent({
     icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0", "aria-hidden": "true", children: icon }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-4", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-        title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-semibold-body-lg text-foreground-default leading-6", children: title }),
-        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-regular-body-md text-foreground-secondary", children: description })
+        title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-semibold-body-lg text-content-primary leading-6", children: title }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-regular-body-md text-content-secondary", children: description })
       ] }),
       showActions && primary && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "self-start", children: primary })
     ] })
@@ -90,9 +90,9 @@ function WelcomeContent({
     variant: "secondary"
   });
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2 px-8 text-center text-foreground-default", children: [
-      title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-bold-heading-xs text-foreground-default", children: title }),
-      description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-regular-body-md text-foreground-secondary", children: description })
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2 px-8 text-center text-content-primary", children: [
+      title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-bold-heading-xs text-content-primary", children: title }),
+      description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-regular-body-md text-content-secondary", children: description })
     ] }),
     showActions && (primary || secondary) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col gap-4 px-8 sm:flex-row sm:*:flex-1", children: [
       secondary,
@@ -119,7 +119,7 @@ function DefaultContent({
     size: "40"
   });
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "typography-regular-body-lg flex min-w-0 flex-1 items-center self-stretch text-foreground-default", children }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "typography-regular-body-lg flex min-w-0 flex-1 items-center self-stretch text-content-primary", children }),
     showActions && (primary || secondary) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-start gap-2", children: [
       primary,
       secondary
@@ -155,11 +155,11 @@ const Snackbar = React__namespace.forwardRef(
           role: "status",
           "data-testid": "snackbar",
           className: cn.cn(
-            "flex gap-4 rounded-2xl",
-            (variant === "default" || variant === "vipEarn") && "border border-neutral-50 bg-surface-container p-4 backdrop-blur-md",
+            "flex gap-4 rounded-md",
+            (variant === "default" || variant === "vipEarn") && "border border-neutral-alphas-50 bg-surface-primary p-4 backdrop-blur-md",
             variant === "default" && "flex-wrap items-start",
             variant === "vipEarn" && "items-start",
-            variant === "welcome" && "relative flex-col items-center bg-surface-page py-6",
+            variant === "welcome" && "relative flex-col items-center bg-bg-primary py-6",
             className
           ),
           ...props,

package/dist/cjs/components/Snackbar/Snackbar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Snackbar.cjs","sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button/Button\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { CrossIcon } from \"../Icons/CrossIcon\";\n\n/** Layout variant of the snackbar. */\nexport type SnackbarVariant = \"default\" | \"vipEarn\" | \"welcome\";\n\nexport interface SnackbarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Layout variant of the snackbar. @default \"default\" */\n  variant?: SnackbarVariant;\n  /** Icon element displayed at the leading edge (used by the `vipEarn` variant). */\n  icon?: React.ReactNode;\n  /** Title content. */\n  title?: React.ReactNode;\n  /** Descriptive body text. */\n  description?: React.ReactNode;\n  /** Whether to show primary/secondary action buttons. @default true */\n  showActions?: boolean;\n  /** Primary CTA label — renders a default {@link Button}. */\n  primaryLabel?: string;\n  /** Click handler for the primary CTA (used together with `primaryLabel`). */\n  primaryOnClick?: () => void;\n  /** Custom element rendered as the primary CTA. Overrides `primaryLabel` / `primaryOnClick`. */\n  primarySlot?: React.ReactNode;\n  /** Secondary CTA label — renders a default {@link Button}. */\n  secondaryLabel?: string;\n  /** Click handler for the secondary CTA (used together with `secondaryLabel`). */\n  secondaryOnClick?: () => void;\n  /** Custom element rendered as the secondary CTA. Overrides `secondaryLabel` / `secondaryOnClick`. */\n  secondarySlot?: React.ReactNode;\n  /** Whether to show the close button. @default false */\n  closable?: boolean;\n  /** Callback fired when the close button is clicked. */\n  onClose?: () => void;\n  /** Accessible label for the close button. @default \"Close snackbar\" */\n  closeLabel?: string;\n}\n\nfunction CloseButton({\n  onClose,\n  className,\n  closeLabel = \"Close snackbar\",\n}: {\n  onClose?: () => void;\n  className?: string;\n  closeLabel?: string;\n}) {\n  return (\n    <IconButton\n      variant=\"tertiary\"\n      size=\"24\"\n      onClick={onClose}\n      icon={<CrossIcon />}\n      className={cn(\"shrink-0\", className)}\n      aria-label={closeLabel}\n    />\n  );\n}\n\n/**\n * Resolves a CTA slot. If a custom slot is provided it takes precedence,\n * otherwise a default Button is rendered from label + onClick.\n */\nfunction resolveCtaSlot(\n  slot: React.ReactNode | undefined,\n  label: string | undefined,\n  onClick: (() => void) | undefined,\n  buttonProps: React.ComponentProps<typeof Button>,\n): React.ReactNode | null {\n  if (slot) return slot;\n  if (label) {\n    return (\n      <Button onClick={onClick} {...buttonProps}>\n        {label}\n      </Button>\n    );\n  }\n  return null;\n}\n\nfunction VipEarnContent({\n  icon,\n  title,\n  description,\n  showActions,\n  primarySlot,\n  primaryLabel,\n  primaryOnClick,\n}: Pick<\n  SnackbarProps,\n  | \"icon\"\n  | \"title\"\n  | \"description\"\n  | \"showActions\"\n  | \"primarySlot\"\n  | \"primaryLabel\"\n  | \"primaryOnClick\"\n>) {\n  const primary = resolveCtaSlot(primarySlot, primaryLabel, primaryOnClick, {\n    variant: \"text\",\n    size: \"24\",\n  });\n\n  return (\n    <>\n      {icon && (\n        <span className=\"flex shrink-0\" aria-hidden=\"true\">\n          {icon}\n        </span>\n      )}\n      <div className=\"flex min-w-0 flex-1 flex-col gap-4\">\n        <div className=\"flex flex-col\">\n          {title && (\n            <p className=\"typography-semibold-body-lg text-foreground-default leading-6\">{title}</p>\n          )}\n          {description && (\n            <p className=\"typography-regular-body-md text-foreground-secondary\">{description}</p>\n          )}\n        </div>\n        {showActions && primary && <div className=\"self-start\">{primary}</div>}\n      </div>\n    </>\n  );\n}\n\nfunction WelcomeContent({\n  title,\n  description,\n  showActions,\n  primarySlot,\n  primaryLabel,\n  primaryOnClick,\n  secondarySlot,\n  secondaryLabel,\n  secondaryOnClick,\n}: Pick<\n  SnackbarProps,\n  | \"title\"\n  | \"description\"\n  | \"showActions\"\n  | \"primarySlot\"\n  | \"primaryLabel\"\n  | \"primaryOnClick\"\n  | \"secondarySlot\"\n  | \"secondaryLabel\"\n  | \"secondaryOnClick\"\n>) {\n  const primary = resolveCtaSlot(primarySlot, primaryLabel, primaryOnClick, {\n    variant: \"primary\",\n  });\n  const secondary = resolveCtaSlot(secondarySlot, secondaryLabel, secondaryOnClick, {\n    variant: \"secondary\",\n  });\n\n  return (\n    <>\n      <div className=\"flex flex-col items-center gap-2 px-8 text-center text-foreground-default\">\n        {title && <p className=\"typography-bold-heading-xs text-foreground-default\">{title}</p>}\n        {description && (\n          <p className=\"typography-regular-body-md text-foreground-secondary\">{description}</p>\n        )}\n      </div>\n      {showActions && (primary || secondary) && (\n        <div className=\"flex w-full flex-col gap-4 px-8 sm:flex-row sm:*:flex-1\">\n          {secondary}\n          {primary}\n        </div>\n      )}\n    </>\n  );\n}\n\nfunction DefaultContent({\n  children,\n  showActions,\n  primarySlot,\n  primaryLabel,\n  primaryOnClick,\n  secondarySlot,\n  secondaryLabel,\n  secondaryOnClick,\n}: Pick<\n  SnackbarProps,\n  | \"children\"\n  | \"showActions\"\n  | \"primarySlot\"\n  | \"primaryLabel\"\n  | \"primaryOnClick\"\n  | \"secondarySlot\"\n  | \"secondaryLabel\"\n  | \"secondaryOnClick\"\n>) {\n  const primary = resolveCtaSlot(primarySlot, primaryLabel, primaryOnClick, {\n    variant: \"primary\",\n    size: \"40\",\n  });\n  const secondary = resolveCtaSlot(secondarySlot, secondaryLabel, secondaryOnClick, {\n    variant: \"tertiary\",\n    size: \"40\",\n  });\n\n  return (\n    <>\n      <div className=\"typography-regular-body-lg flex min-w-0 flex-1 items-center self-stretch text-foreground-default\">\n        {children}\n      </div>\n      {showActions && (primary || secondary) && (\n        <div className=\"flex shrink-0 items-start gap-2\">\n          {primary}\n          {secondary}\n        </div>\n      )}\n    </>\n  );\n}\n\n/**\n * A prominent inline message with optional title, description, action buttons,\n * and close control. Supports three layout variants: `default`, `vipEarn`, and\n * `welcome`.\n *\n * @example\n * ```tsx\n * <Snackbar\n *   variant=\"default\"\n *   primaryLabel=\"Undo\"\n *   primaryOnClick={undo}\n *   closable\n *   onClose={dismiss}\n * >\n *   Item deleted\n * </Snackbar>\n * ```\n */\nexport const Snackbar = React.forwardRef<HTMLDivElement, SnackbarProps>(\n  (\n    {\n      className,\n      variant = \"default\",\n      icon,\n      title,\n      description,\n      showActions = true,\n      primaryLabel,\n      primaryOnClick,\n      primarySlot,\n      secondaryLabel,\n      secondaryOnClick,\n      secondarySlot,\n      closable = false,\n      onClose,\n      closeLabel,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      /* biome-ignore lint/a11y/useSemanticElements: output cannot contain div children; browsers would break the wrapper. */\n      <div\n        ref={ref}\n        role=\"status\"\n        data-testid=\"snackbar\"\n        className={cn(\n          \"flex gap-4 rounded-2xl\",\n          (variant === \"default\" || variant === \"vipEarn\") &&\n            \"border border-neutral-50 bg-surface-container p-4 backdrop-blur-md\",\n          variant === \"default\" && \"flex-wrap items-start\",\n          variant === \"vipEarn\" && \"items-start\",\n          variant === \"welcome\" && \"relative flex-col items-center bg-surface-page py-6\",\n          className,\n        )}\n        {...props}\n      >\n        {variant === \"vipEarn\" && (\n          <VipEarnContent\n            icon={icon}\n            title={title}\n            description={description}\n            showActions={showActions}\n            primarySlot={primarySlot}\n            primaryLabel={primaryLabel}\n            primaryOnClick={primaryOnClick}\n          />\n        )}\n        {variant === \"welcome\" && (\n          <WelcomeContent\n            title={title}\n            description={description}\n            showActions={showActions}\n            primarySlot={primarySlot}\n            primaryLabel={primaryLabel}\n            primaryOnClick={primaryOnClick}\n            secondarySlot={secondarySlot}\n            secondaryLabel={secondaryLabel}\n            secondaryOnClick={secondaryOnClick}\n          />\n        )}\n        {variant === \"default\" && (\n          <DefaultContent\n            showActions={showActions}\n            primarySlot={primarySlot}\n            primaryLabel={primaryLabel}\n            primaryOnClick={primaryOnClick}\n            secondarySlot={secondarySlot}\n            secondaryLabel={secondaryLabel}\n            secondaryOnClick={secondaryOnClick}\n          >\n            {children}\n          </DefaultContent>\n        )}\n        {closable && (\n          <CloseButton\n            onClose={onClose}\n            closeLabel={closeLabel}\n            className={variant === \"welcome\" ? \"absolute top-2 right-2\" : undefined}\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nSnackbar.displayName = \"Snackbar\";\n"],"names":["jsx","IconButton","CrossIcon","cn","Button","jsxs","Fragment","React"],"mappings":"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"}
+{"version":3,"file":"Snackbar.cjs","sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button/Button\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { CrossIcon } from \"../Icons/CrossIcon\";\n\n/** Layout variant of the snackbar. */\nexport type SnackbarVariant = \"default\" | \"vipEarn\" | \"welcome\";\n\nexport interface SnackbarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Layout variant of the snackbar. @default \"default\" */\n  variant?: SnackbarVariant;\n  /** Icon element displayed at the leading edge (used by the `vipEarn` variant). */\n  icon?: React.ReactNode;\n  /** Title content. */\n  title?: React.ReactNode;\n  /** Descriptive body text. */\n  description?: React.ReactNode;\n  /** Whether to show primary/secondary action buttons. @default true */\n  showActions?: boolean;\n  /** Primary CTA label — renders a default {@link Button}. */\n  primaryLabel?: string;\n  /** Click handler for the primary CTA (used together with `primaryLabel`). */\n  primaryOnClick?: () => void;\n  /** Custom element rendered as the primary CTA. Overrides `primaryLabel` / `primaryOnClick`. */\n  primarySlot?: React.ReactNode;\n  /** Secondary CTA label — renders a default {@link Button}. */\n  secondaryLabel?: string;\n  /** Click handler for the secondary CTA (used together with `secondaryLabel`). */\n  secondaryOnClick?: () => void;\n  /** Custom element rendered as the secondary CTA. Overrides `secondaryLabel` / `secondaryOnClick`. */\n  secondarySlot?: React.ReactNode;\n  /** Whether to show the close button. @default false */\n  closable?: boolean;\n  /** Callback fired when the close button is clicked. */\n  onClose?: () => void;\n  /** Accessible label for the close button. @default \"Close snackbar\" */\n  closeLabel?: string;\n}\n\nfunction CloseButton({\n  onClose,\n  className,\n  closeLabel = \"Close snackbar\",\n}: {\n  onClose?: () => void;\n  className?: string;\n  closeLabel?: string;\n}) {\n  return (\n    <IconButton\n      variant=\"tertiary\"\n      size=\"24\"\n      onClick={onClose}\n      icon={<CrossIcon />}\n      className={cn(\"shrink-0\", className)}\n      aria-label={closeLabel}\n    />\n  );\n}\n\n/**\n * Resolves a CTA slot. If a custom slot is provided it takes precedence,\n * otherwise a default Button is rendered from label + onClick.\n */\nfunction resolveCtaSlot(\n  slot: React.ReactNode | undefined,\n  label: string | undefined,\n  onClick: (() => void) | undefined,\n  buttonProps: React.ComponentProps<typeof Button>,\n): React.ReactNode | null {\n  if (slot) return slot;\n  if (label) {\n    return (\n      <Button onClick={onClick} {...buttonProps}>\n        {label}\n      </Button>\n    );\n  }\n  return null;\n}\n\nfunction VipEarnContent({\n  icon,\n  title,\n  description,\n  showActions,\n  primarySlot,\n  primaryLabel,\n  primaryOnClick,\n}: Pick<\n  SnackbarProps,\n  | \"icon\"\n  | \"title\"\n  | \"description\"\n  | \"showActions\"\n  | \"primarySlot\"\n  | \"primaryLabel\"\n  | \"primaryOnClick\"\n>) {\n  const primary = resolveCtaSlot(primarySlot, primaryLabel, primaryOnClick, {\n    variant: \"text\",\n    size: \"24\",\n  });\n\n  return (\n    <>\n      {icon && (\n        <span className=\"flex shrink-0\" aria-hidden=\"true\">\n          {icon}\n        </span>\n      )}\n      <div className=\"flex min-w-0 flex-1 flex-col gap-4\">\n        <div className=\"flex flex-col\">\n          {title && (\n            <p className=\"typography-semibold-body-lg text-content-primary leading-6\">{title}</p>\n          )}\n          {description && (\n            <p className=\"typography-regular-body-md text-content-secondary\">{description}</p>\n          )}\n        </div>\n        {showActions && primary && <div className=\"self-start\">{primary}</div>}\n      </div>\n    </>\n  );\n}\n\nfunction WelcomeContent({\n  title,\n  description,\n  showActions,\n  primarySlot,\n  primaryLabel,\n  primaryOnClick,\n  secondarySlot,\n  secondaryLabel,\n  secondaryOnClick,\n}: Pick<\n  SnackbarProps,\n  | \"title\"\n  | \"description\"\n  | \"showActions\"\n  | \"primarySlot\"\n  | \"primaryLabel\"\n  | \"primaryOnClick\"\n  | \"secondarySlot\"\n  | \"secondaryLabel\"\n  | \"secondaryOnClick\"\n>) {\n  const primary = resolveCtaSlot(primarySlot, primaryLabel, primaryOnClick, {\n    variant: \"primary\",\n  });\n  const secondary = resolveCtaSlot(secondarySlot, secondaryLabel, secondaryOnClick, {\n    variant: \"secondary\",\n  });\n\n  return (\n    <>\n      <div className=\"flex flex-col items-center gap-2 px-8 text-center text-content-primary\">\n        {title && <p className=\"typography-bold-heading-xs text-content-primary\">{title}</p>}\n        {description && (\n          <p className=\"typography-regular-body-md text-content-secondary\">{description}</p>\n        )}\n      </div>\n      {showActions && (primary || secondary) && (\n        <div className=\"flex w-full flex-col gap-4 px-8 sm:flex-row sm:*:flex-1\">\n          {secondary}\n          {primary}\n        </div>\n      )}\n    </>\n  );\n}\n\nfunction DefaultContent({\n  children,\n  showActions,\n  primarySlot,\n  primaryLabel,\n  primaryOnClick,\n  secondarySlot,\n  secondaryLabel,\n  secondaryOnClick,\n}: Pick<\n  SnackbarProps,\n  | \"children\"\n  | \"showActions\"\n  | \"primarySlot\"\n  | \"primaryLabel\"\n  | \"primaryOnClick\"\n  | \"secondarySlot\"\n  | \"secondaryLabel\"\n  | \"secondaryOnClick\"\n>) {\n  const primary = resolveCtaSlot(primarySlot, primaryLabel, primaryOnClick, {\n    variant: \"primary\",\n    size: \"40\",\n  });\n  const secondary = resolveCtaSlot(secondarySlot, secondaryLabel, secondaryOnClick, {\n    variant: \"tertiary\",\n    size: \"40\",\n  });\n\n  return (\n    <>\n      <div className=\"typography-regular-body-lg flex min-w-0 flex-1 items-center self-stretch text-content-primary\">\n        {children}\n      </div>\n      {showActions && (primary || secondary) && (\n        <div className=\"flex shrink-0 items-start gap-2\">\n          {primary}\n          {secondary}\n        </div>\n      )}\n    </>\n  );\n}\n\n/**\n * A prominent inline message with optional title, description, action buttons,\n * and close control. Supports three layout variants: `default`, `vipEarn`, and\n * `welcome`.\n *\n * @example\n * ```tsx\n * <Snackbar\n *   variant=\"default\"\n *   primaryLabel=\"Undo\"\n *   primaryOnClick={undo}\n *   closable\n *   onClose={dismiss}\n * >\n *   Item deleted\n * </Snackbar>\n * ```\n */\nexport const Snackbar = React.forwardRef<HTMLDivElement, SnackbarProps>(\n  (\n    {\n      className,\n      variant = \"default\",\n      icon,\n      title,\n      description,\n      showActions = true,\n      primaryLabel,\n      primaryOnClick,\n      primarySlot,\n      secondaryLabel,\n      secondaryOnClick,\n      secondarySlot,\n      closable = false,\n      onClose,\n      closeLabel,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      /* biome-ignore lint/a11y/useSemanticElements: output cannot contain div children; browsers would break the wrapper. */\n      <div\n        ref={ref}\n        role=\"status\"\n        data-testid=\"snackbar\"\n        className={cn(\n          \"flex gap-4 rounded-md\",\n          (variant === \"default\" || variant === \"vipEarn\") &&\n            \"border border-neutral-alphas-50 bg-surface-primary p-4 backdrop-blur-md\",\n          variant === \"default\" && \"flex-wrap items-start\",\n          variant === \"vipEarn\" && \"items-start\",\n          variant === \"welcome\" && \"relative flex-col items-center bg-bg-primary py-6\",\n          className,\n        )}\n        {...props}\n      >\n        {variant === \"vipEarn\" && (\n          <VipEarnContent\n            icon={icon}\n            title={title}\n            description={description}\n            showActions={showActions}\n            primarySlot={primarySlot}\n            primaryLabel={primaryLabel}\n            primaryOnClick={primaryOnClick}\n          />\n        )}\n        {variant === \"welcome\" && (\n          <WelcomeContent\n            title={title}\n            description={description}\n            showActions={showActions}\n            primarySlot={primarySlot}\n            primaryLabel={primaryLabel}\n            primaryOnClick={primaryOnClick}\n            secondarySlot={secondarySlot}\n            secondaryLabel={secondaryLabel}\n            secondaryOnClick={secondaryOnClick}\n          />\n        )}\n        {variant === \"default\" && (\n          <DefaultContent\n            showActions={showActions}\n            primarySlot={primarySlot}\n            primaryLabel={primaryLabel}\n            primaryOnClick={primaryOnClick}\n            secondarySlot={secondarySlot}\n            secondaryLabel={secondaryLabel}\n            secondaryOnClick={secondaryOnClick}\n          >\n            {children}\n          </DefaultContent>\n        )}\n        {closable && (\n          <CloseButton\n            onClose={onClose}\n            closeLabel={closeLabel}\n            className={variant === \"welcome\" ? \"absolute top-2 right-2\" : undefined}\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nSnackbar.displayName = \"Snackbar\";\n"],"names":["jsx","IconButton","CrossIcon","cn","Button","jsxs","Fragment","React"],"mappings":"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"}

package/dist/cjs/components/Switch/Switch.cjs

@@ -32,8 +32,8 @@ const Switch = React__namespace.forwardRef(({ className, size = "default", ...pr
       className: cn.cn(
         "inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-colors duration-150",
         "focus-visible:shadow-focus-ring focus-visible:outline-none",
-        "data-[state=checked]:border-neutral-200 data-[state=checked]:bg-brand-accent-default",
-        "data-[state=unchecked]:bg-neutral-400",
+        "data-[state=checked]:border-neutral-alphas-200 data-[state=checked]:bg-brand-primary-default",
+        "data-[state=unchecked]:bg-neutral-alphas-400",
         "not-disabled:active:opacity-80",
         "disabled:cursor-not-allowed disabled:opacity-50",
         size === "default" && "h-6 w-10.5",
@@ -45,7 +45,7 @@ const Switch = React__namespace.forwardRef(({ className, size = "default", ...pr
         SwitchPrimitive__namespace.Thumb,
         {
           className: cn.cn(
-            "pointer-events-none rounded-full bg-surface-page shadow-sm transition-transform duration-150",
+            "pointer-events-none rounded-full bg-bg-primary shadow-sm transition-transform duration-150",
             thumbSizeClass
           )
         }

package/dist/cjs/components/Switch/Switch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.cjs","sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as SwitchPrimitive from \"@radix-ui/react-switch\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Size variant of the switch toggle. */\nexport type SwitchSize = \"default\" | \"small\";\n\nexport interface SwitchProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, \"asChild\"> {\n  /** Size variant of the switch. @default \"default\" */\n  size?: SwitchSize;\n}\n\n/**\n * A toggle switch for boolean on/off states. Built on Radix UI `Switch`.\n *\n * For a labelled switch with helper text, see {@link SwitchField}.\n *\n * @example\n * ```tsx\n * <Switch checked={on} onCheckedChange={setOn} />\n * ```\n */\nexport const Switch = React.forwardRef<\n  React.ComponentRef<typeof SwitchPrimitive.Root>,\n  SwitchProps\n>(({ className, size = \"default\", ...props }, ref) => {\n  const thumbSizeClass =\n    size === \"default\"\n      ? \"size-4.5 translate-x-0.75 data-[state=checked]:translate-x-4.75\"\n      : \"size-4 translate-x-0.5 data-[state=checked]:translate-x-4.25\";\n\n  return (\n    <SwitchPrimitive.Root\n      ref={ref}\n      className={cn(\n        \"inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-colors duration-150\",\n        \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n        \"data-[state=checked]:border-neutral-200 data-[state=checked]:bg-brand-accent-default\",\n        \"data-[state=unchecked]:bg-neutral-400\",\n        \"not-disabled:active:opacity-80\",\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        size === \"default\" && \"h-6 w-10.5\",\n        size === \"small\" && \"h-5 w-9\",\n        className,\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        className={cn(\n          \"pointer-events-none rounded-full bg-surface-page shadow-sm transition-transform duration-150\",\n          thumbSizeClass,\n        )}\n      />\n    </SwitchPrimitive.Root>\n  );\n});\n\nSwitch.displayName = \"Switch\";\n"],"names":["React","jsx","SwitchPrimitive","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAuBO,MAAM,SAASA,iBAAM,WAG1B,CAAC,EAAE,WAAW,OAAO,WAAW,GAAG,MAAA,GAAS,QAAQ;AACpD,QAAM,iBACJ,SAAS,YACL,oEACA;AAEN,SACEC,2BAAAA;AAAAA,IAACC,2BAAgB;AAAA,IAAhB;AAAA,MACC;AAAA,MACA,WAAWC,GAAAA;AAAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,SAAS,aAAa;AAAA,QACtB,SAAS,WAAW;AAAA,QACpB;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAAF,2BAAAA;AAAAA,QAACC,2BAAgB;AAAA,QAAhB;AAAA,UACC,WAAWC,GAAAA;AAAAA,YACT;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN,CAAC;AAED,OAAO,cAAc;;"}
+{"version":3,"file":"Switch.cjs","sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as SwitchPrimitive from \"@radix-ui/react-switch\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Size variant of the switch toggle. */\nexport type SwitchSize = \"default\" | \"small\";\n\nexport interface SwitchProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, \"asChild\"> {\n  /** Size variant of the switch. @default \"default\" */\n  size?: SwitchSize;\n}\n\n/**\n * A toggle switch for boolean on/off states. Built on Radix UI `Switch`.\n *\n * For a labelled switch with helper text, see {@link SwitchField}.\n *\n * @example\n * ```tsx\n * <Switch checked={on} onCheckedChange={setOn} />\n * ```\n */\nexport const Switch = React.forwardRef<\n  React.ComponentRef<typeof SwitchPrimitive.Root>,\n  SwitchProps\n>(({ className, size = \"default\", ...props }, ref) => {\n  const thumbSizeClass =\n    size === \"default\"\n      ? \"size-4.5 translate-x-0.75 data-[state=checked]:translate-x-4.75\"\n      : \"size-4 translate-x-0.5 data-[state=checked]:translate-x-4.25\";\n\n  return (\n    <SwitchPrimitive.Root\n      ref={ref}\n      className={cn(\n        \"inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-colors duration-150\",\n        \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n        \"data-[state=checked]:border-neutral-alphas-200 data-[state=checked]:bg-brand-primary-default\",\n        \"data-[state=unchecked]:bg-neutral-alphas-400\",\n        \"not-disabled:active:opacity-80\",\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        size === \"default\" && \"h-6 w-10.5\",\n        size === \"small\" && \"h-5 w-9\",\n        className,\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        className={cn(\n          \"pointer-events-none rounded-full bg-bg-primary shadow-sm transition-transform duration-150\",\n          thumbSizeClass,\n        )}\n      />\n    </SwitchPrimitive.Root>\n  );\n});\n\nSwitch.displayName = \"Switch\";\n"],"names":["React","jsx","SwitchPrimitive","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAuBO,MAAM,SAASA,iBAAM,WAG1B,CAAC,EAAE,WAAW,OAAO,WAAW,GAAG,MAAA,GAAS,QAAQ;AACpD,QAAM,iBACJ,SAAS,YACL,oEACA;AAEN,SACEC,2BAAAA;AAAAA,IAACC,2BAAgB;AAAA,IAAhB;AAAA,MACC;AAAA,MACA,WAAWC,GAAAA;AAAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,SAAS,aAAa;AAAA,QACtB,SAAS,WAAW;AAAA,QACpB;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAAF,2BAAAA;AAAAA,QAACC,2BAAgB;AAAA,QAAhB;AAAA,UACC,WAAWC,GAAAA;AAAAA,YACT;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN,CAAC;AAED,OAAO,cAAc;;"}

package/dist/cjs/components/SwitchField/SwitchField.cjs

@@ -65,8 +65,8 @@ const SwitchField = React__namespace.forwardRef(
               {
                 htmlFor: id,
                 className: cn.cn(
-                  "cursor-pointer select-none text-foreground-default",
-                  disabled && "cursor-not-allowed text-neutral-250",
+                  "cursor-pointer select-none text-content-primary",
+                  disabled && "cursor-not-allowed text-content-tertiary",
                   size === "default" ? "typography-semibold-body-lg" : "typography-semibold-body-md"
                 ),
                 children: label
@@ -77,7 +77,7 @@ const SwitchField = React__namespace.forwardRef(
                 InfoCircleIcon.InfoCircleIcon,
                 {
                   "aria-hidden": "true",
-                  className: "size-5 text-foreground-secondary"
+                  className: "size-5 text-content-secondary"
                 }
               ) }) }),
               /* @__PURE__ */ jsxRuntime.jsx(Tooltip.TooltipContent, { side: "bottom", children: infoText })
@@ -88,8 +88,8 @@ const SwitchField = React__namespace.forwardRef(
             {
               id: helperTextId,
               className: cn.cn(
-                "text-foreground-secondary",
-                disabled && "text-neutral-250",
+                "text-content-secondary",
+                disabled && "text-content-tertiary",
                 size === "default" ? "typography-regular-body-md" : "typography-regular-body-sm"
               ),
               children: helperText

package/dist/cjs/components/SwitchField/SwitchField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchField.cjs","sources":["../../../../src/components/SwitchField/SwitchField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { InfoCircleIcon } from \"../Icons/InfoCircleIcon\";\nimport { Switch, type SwitchSize } from \"../Switch/Switch\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"../Tooltip/Tooltip\";\n\n/** Side on which the switch toggle is positioned relative to the label. */\nexport type SwitchFieldOrientation = \"right\" | \"left\";\n\nexport interface SwitchFieldProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof Switch>, \"size\" | \"className\"> {\n  /** Side on which the switch is placed relative to the label. @default \"right\" */\n  orientation?: SwitchFieldOrientation;\n  /** Size variant of the switch and accompanying text. @default \"default\" */\n  size?: SwitchSize;\n  /** Label text displayed next to the switch. */\n  label?: string;\n  /** Descriptive text displayed below the label. */\n  helperText?: string;\n  /** Tooltip text shown when hovering the info icon next to the label. */\n  infoText?: string;\n  /** Accessible label for the info tooltip trigger button. Override for i18n.\n   * @default \"More information\"\n   */\n  infoLabel?: string;\n  /** Additional CSS class name for the outer wrapper. */\n  className?: string;\n}\n\n/**\n * A labelled switch field with optional helper text and info tooltip. Composes\n * the {@link Switch} component with a `<label>` and description.\n *\n * @example\n * ```tsx\n * <SwitchField\n *   label=\"Notifications\"\n *   helperText=\"Receive push notifications\"\n *   checked={enabled}\n *   onCheckedChange={setEnabled}\n * />\n * ```\n */\nexport const SwitchField = React.forwardRef<React.ComponentRef<typeof Switch>, SwitchFieldProps>(\n  (\n    {\n      className,\n      orientation = \"right\",\n      size = \"default\",\n      label,\n      helperText,\n      infoText,\n      infoLabel = \"More information\",\n      disabled,\n      id: propId,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const id = propId ?? generatedId;\n    const helperTextId = helperText ? `${id}-helper` : undefined;\n\n    const switchElement = (\n      <Switch\n        ref={ref}\n        id={id}\n        size={size}\n        disabled={disabled}\n        aria-describedby={helperTextId}\n        {...props}\n      />\n    );\n\n    const labelContent = (label || helperText) && (\n      <div\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start\",\n          size === \"default\" ? \"gap-1\" : \"gap-0.5\",\n        )}\n      >\n        {label && (\n          <div className=\"flex items-center gap-1\">\n            <label\n              htmlFor={id}\n              className={cn(\n                \"cursor-pointer select-none text-foreground-default\",\n                disabled && \"cursor-not-allowed text-neutral-250\",\n                size === \"default\" ? \"typography-semibold-body-lg\" : \"typography-semibold-body-md\",\n              )}\n            >\n              {label}\n            </label>\n            {infoText && (\n              <TooltipProvider>\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <button type=\"button\" aria-label={infoLabel} className=\"flex shrink-0 pt-0.5\">\n                      <InfoCircleIcon\n                        aria-hidden=\"true\"\n                        className=\"size-5 text-foreground-secondary\"\n                      />\n                    </button>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"bottom\">{infoText}</TooltipContent>\n                </Tooltip>\n              </TooltipProvider>\n            )}\n          </div>\n        )}\n        {helperText && (\n          <span\n            id={helperTextId}\n            className={cn(\n              \"text-foreground-secondary\",\n              disabled && \"text-neutral-250\",\n              size === \"default\" ? \"typography-regular-body-md\" : \"typography-regular-body-sm\",\n            )}\n          >\n            {helperText}\n          </span>\n        )}\n      </div>\n    );\n\n    return (\n      <div className={cn(\"flex items-start gap-2\", disabled && \"cursor-not-allowed\", className)}>\n        {orientation === \"left\" && switchElement}\n        {labelContent}\n        {orientation === \"right\" && switchElement}\n      </div>\n    );\n  },\n);\n\nSwitchField.displayName = \"SwitchField\";\n"],"names":["React","jsx","Switch","jsxs","cn","TooltipProvider","Tooltip","TooltipTrigger","InfoCircleIcon","TooltipContent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA2CO,MAAM,cAAcA,iBAAM;AAAA,EAC/B,CACE;AAAA,IACE;AAAA,IACA,cAAc;AAAA,IACd,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,IAAI;AAAA,IACJ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,cAAcA,iBAAM,MAAA;AAC1B,UAAM,KAAK,UAAU;AACrB,UAAM,eAAe,aAAa,GAAG,EAAE,YAAY;AAEnD,UAAM,gBACJC,2BAAAA;AAAAA,MAACC,OAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,oBAAkB;AAAA,QACjB,GAAG;AAAA,MAAA;AAAA,IAAA;AAIR,UAAM,gBAAgB,SAAS,eAC7BC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,SAAS,YAAY,UAAU;AAAA,QAAA;AAAA,QAGhC,UAAA;AAAA,UAAA,SACCD,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,YAAAF,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAAS;AAAA,gBACT,WAAWG,GAAAA;AAAAA,kBACT;AAAA,kBACA,YAAY;AAAA,kBACZ,SAAS,YAAY,gCAAgC;AAAA,gBAAA;AAAA,gBAGtD,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAEF,YACCH,2BAAAA,IAACI,yBAAA,EACC,UAAAF,gCAACG,QAAAA,SAAA,EACC,UAAA;AAAA,cAAAL,2BAAAA,IAACM,QAAAA,gBAAA,EAAe,SAAO,MACrB,UAAAN,2BAAAA,IAAC,UAAA,EAAO,MAAK,UAAS,cAAY,WAAW,WAAU,wBACrD,UAAAA,2BAAAA;AAAAA,gBAACO,eAAAA;AAAAA,gBAAA;AAAA,kBACC,eAAY;AAAA,kBACZ,WAAU;AAAA,gBAAA;AAAA,cAAA,GAEd,EAAA,CACF;AAAA,cACAP,2BAAAA,IAACQ,QAAAA,gBAAA,EAAe,MAAK,UAAU,UAAA,SAAA,CAAS;AAAA,YAAA,EAAA,CAC1C,EAAA,CACF;AAAA,UAAA,GAEJ;AAAA,UAED,cACCR,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cACJ,WAAWG,GAAAA;AAAAA,gBACT;AAAA,gBACA,YAAY;AAAA,gBACZ,SAAS,YAAY,+BAA+B;AAAA,cAAA;AAAA,cAGrD,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAKN,WACED,gCAAC,SAAI,WAAWC,GAAAA,GAAG,0BAA0B,YAAY,sBAAsB,SAAS,GACrF,UAAA;AAAA,MAAA,gBAAgB,UAAU;AAAA,MAC1B;AAAA,MACA,gBAAgB,WAAW;AAAA,IAAA,GAC9B;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;;"}
+{"version":3,"file":"SwitchField.cjs","sources":["../../../../src/components/SwitchField/SwitchField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { InfoCircleIcon } from \"../Icons/InfoCircleIcon\";\nimport { Switch, type SwitchSize } from \"../Switch/Switch\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"../Tooltip/Tooltip\";\n\n/** Side on which the switch toggle is positioned relative to the label. */\nexport type SwitchFieldOrientation = \"right\" | \"left\";\n\nexport interface SwitchFieldProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof Switch>, \"size\" | \"className\"> {\n  /** Side on which the switch is placed relative to the label. @default \"right\" */\n  orientation?: SwitchFieldOrientation;\n  /** Size variant of the switch and accompanying text. @default \"default\" */\n  size?: SwitchSize;\n  /** Label text displayed next to the switch. */\n  label?: string;\n  /** Descriptive text displayed below the label. */\n  helperText?: string;\n  /** Tooltip text shown when hovering the info icon next to the label. */\n  infoText?: string;\n  /** Accessible label for the info tooltip trigger button. Override for i18n.\n   * @default \"More information\"\n   */\n  infoLabel?: string;\n  /** Additional CSS class name for the outer wrapper. */\n  className?: string;\n}\n\n/**\n * A labelled switch field with optional helper text and info tooltip. Composes\n * the {@link Switch} component with a `<label>` and description.\n *\n * @example\n * ```tsx\n * <SwitchField\n *   label=\"Notifications\"\n *   helperText=\"Receive push notifications\"\n *   checked={enabled}\n *   onCheckedChange={setEnabled}\n * />\n * ```\n */\nexport const SwitchField = React.forwardRef<React.ComponentRef<typeof Switch>, SwitchFieldProps>(\n  (\n    {\n      className,\n      orientation = \"right\",\n      size = \"default\",\n      label,\n      helperText,\n      infoText,\n      infoLabel = \"More information\",\n      disabled,\n      id: propId,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const id = propId ?? generatedId;\n    const helperTextId = helperText ? `${id}-helper` : undefined;\n\n    const switchElement = (\n      <Switch\n        ref={ref}\n        id={id}\n        size={size}\n        disabled={disabled}\n        aria-describedby={helperTextId}\n        {...props}\n      />\n    );\n\n    const labelContent = (label || helperText) && (\n      <div\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start\",\n          size === \"default\" ? \"gap-1\" : \"gap-0.5\",\n        )}\n      >\n        {label && (\n          <div className=\"flex items-center gap-1\">\n            <label\n              htmlFor={id}\n              className={cn(\n                \"cursor-pointer select-none text-content-primary\",\n                disabled && \"cursor-not-allowed text-content-tertiary\",\n                size === \"default\" ? \"typography-semibold-body-lg\" : \"typography-semibold-body-md\",\n              )}\n            >\n              {label}\n            </label>\n            {infoText && (\n              <TooltipProvider>\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <button type=\"button\" aria-label={infoLabel} className=\"flex shrink-0 pt-0.5\">\n                      <InfoCircleIcon\n                        aria-hidden=\"true\"\n                        className=\"size-5 text-content-secondary\"\n                      />\n                    </button>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"bottom\">{infoText}</TooltipContent>\n                </Tooltip>\n              </TooltipProvider>\n            )}\n          </div>\n        )}\n        {helperText && (\n          <span\n            id={helperTextId}\n            className={cn(\n              \"text-content-secondary\",\n              disabled && \"text-content-tertiary\",\n              size === \"default\" ? \"typography-regular-body-md\" : \"typography-regular-body-sm\",\n            )}\n          >\n            {helperText}\n          </span>\n        )}\n      </div>\n    );\n\n    return (\n      <div className={cn(\"flex items-start gap-2\", disabled && \"cursor-not-allowed\", className)}>\n        {orientation === \"left\" && switchElement}\n        {labelContent}\n        {orientation === \"right\" && switchElement}\n      </div>\n    );\n  },\n);\n\nSwitchField.displayName = \"SwitchField\";\n"],"names":["React","jsx","Switch","jsxs","cn","TooltipProvider","Tooltip","TooltipTrigger","InfoCircleIcon","TooltipContent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA2CO,MAAM,cAAcA,iBAAM;AAAA,EAC/B,CACE;AAAA,IACE;AAAA,IACA,cAAc;AAAA,IACd,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,IAAI;AAAA,IACJ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,cAAcA,iBAAM,MAAA;AAC1B,UAAM,KAAK,UAAU;AACrB,UAAM,eAAe,aAAa,GAAG,EAAE,YAAY;AAEnD,UAAM,gBACJC,2BAAAA;AAAAA,MAACC,OAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,oBAAkB;AAAA,QACjB,GAAG;AAAA,MAAA;AAAA,IAAA;AAIR,UAAM,gBAAgB,SAAS,eAC7BC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,SAAS,YAAY,UAAU;AAAA,QAAA;AAAA,QAGhC,UAAA;AAAA,UAAA,SACCD,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,YAAAF,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAAS;AAAA,gBACT,WAAWG,GAAAA;AAAAA,kBACT;AAAA,kBACA,YAAY;AAAA,kBACZ,SAAS,YAAY,gCAAgC;AAAA,gBAAA;AAAA,gBAGtD,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAEF,YACCH,2BAAAA,IAACI,yBAAA,EACC,UAAAF,gCAACG,QAAAA,SAAA,EACC,UAAA;AAAA,cAAAL,2BAAAA,IAACM,QAAAA,gBAAA,EAAe,SAAO,MACrB,UAAAN,2BAAAA,IAAC,UAAA,EAAO,MAAK,UAAS,cAAY,WAAW,WAAU,wBACrD,UAAAA,2BAAAA;AAAAA,gBAACO,eAAAA;AAAAA,gBAAA;AAAA,kBACC,eAAY;AAAA,kBACZ,WAAU;AAAA,gBAAA;AAAA,cAAA,GAEd,EAAA,CACF;AAAA,cACAP,2BAAAA,IAACQ,QAAAA,gBAAA,EAAe,MAAK,UAAU,UAAA,SAAA,CAAS;AAAA,YAAA,EAAA,CAC1C,EAAA,CACF;AAAA,UAAA,GAEJ;AAAA,UAED,cACCR,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cACJ,WAAWG,GAAAA;AAAAA,gBACT;AAAA,gBACA,YAAY;AAAA,gBACZ,SAAS,YAAY,+BAA+B;AAAA,cAAA;AAAA,cAGrD,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAKN,WACED,gCAAC,SAAI,WAAWC,GAAAA,GAAG,0BAA0B,YAAY,sBAAsB,SAAS,GACrF,UAAA;AAAA,MAAA,gBAAgB,UAAU;AAAA,MAC1B;AAAA,MACA,gBAAgB,WAAW;AAAA,IAAA,GAC9B;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;;"}

package/dist/cjs/components/SwitchToggle/SwitchToggle.cjs

@@ -70,7 +70,7 @@ const SwitchToggle = React__namespace.forwardRef(
         ref,
         role: "radiogroup",
         className: cn.cn(
-          "relative inline-grid grid-cols-2 rounded-full border border-neutral-200 p-1",
+          "relative inline-grid grid-cols-2 rounded-full border border-neutral-alphas-200 p-1",
           disabled && "cursor-not-allowed opacity-50",
           className
         ),
@@ -81,7 +81,7 @@ const SwitchToggle = React__namespace.forwardRef(
             {
               "aria-hidden": "true",
               className: cn.cn(
-                "absolute inset-y-1 left-1 w-[calc(50%-4px)] rounded-full border border-brand-accent-default bg-brand-accent-muted",
+                "absolute inset-y-1 left-1 w-[calc(50%-4px)] rounded-full border border-brand-primary-default bg-brand-primary-muted",
                 "motion-safe:transition-transform motion-safe:duration-200 motion-safe:ease-in-out",
                 isSecondSelected && "translate-x-full"
               )
@@ -105,9 +105,9 @@ const SwitchToggle = React__namespace.forwardRef(
                   onClick: () => handleSelect(option.value),
                   onKeyDown: (e) => handleKeyDown(e, index),
                   className: cn.cn(
-                    "relative z-10 inline-flex min-w-0 cursor-pointer items-center justify-center rounded-full border border-transparent text-foreground-default",
+                    "relative z-10 inline-flex min-w-0 cursor-pointer items-center justify-center rounded-full border border-transparent text-content-primary",
                     "focus-visible:shadow-focus-ring focus-visible:outline-none",
-                    "active:rounded-full active:bg-brand-accent-muted",
+                    "active:rounded-full active:bg-brand-primary-muted",
                     disabled && "pointer-events-none",
                     sizeClass
                   ),

package/dist/cjs/components/SwitchToggle/SwitchToggle.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchToggle.cjs","sources":["../../../../src/components/SwitchToggle/SwitchToggle.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Height of the switch toggle in pixels. */\nexport type SwitchToggleSize = \"24\" | \"32\" | \"40\";\n\n/** Describes one side of the binary toggle. */\nexport interface SwitchToggleOption {\n  /** Display label for the option. */\n  label: string;\n  /** Value identifier returned via `onChange`. */\n  value: string;\n}\n\nexport interface SwitchToggleProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** Height of the toggle in pixels. @default \"24\" */\n  size?: SwitchToggleSize;\n  /** The two options to toggle between (exactly two required). */\n  options: [SwitchToggleOption, SwitchToggleOption];\n  /** Currently selected value (controlled). */\n  value?: string;\n  /** Initially selected value (uncontrolled). */\n  defaultValue?: string;\n  /** Callback fired when the selected value changes. */\n  onChange?: (value: string) => void;\n  /** Whether the toggle is disabled. @default false */\n  disabled?: boolean;\n}\n\nfunction warnMissingAccessibleName(ariaLabel?: string, ariaLabelledBy?: string) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        \"SwitchToggle: no accessible name provided. Pass an `aria-label` or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\n/**\n * A binary segmented toggle rendered as a `radiogroup`. The active option is\n * highlighted with a sliding pill indicator. Supports both controlled and\n * uncontrolled usage.\n *\n * @example\n * ```tsx\n * <SwitchToggle\n *   options={[\n *     { label: \"Monthly\", value: \"monthly\" },\n *     { label: \"Yearly\", value: \"yearly\" },\n *   ]}\n *   value={billing}\n *   onChange={setBilling}\n * />\n * ```\n */\nexport const SwitchToggle = React.forwardRef<HTMLDivElement, SwitchToggleProps>(\n  (\n    {\n      className,\n      size = \"24\",\n      options,\n      value: controlledValue,\n      defaultValue,\n      onChange,\n      disabled = false,\n      ...props\n    },\n    ref,\n  ) => {\n    warnMissingAccessibleName(props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n    // Tracks selection for uncontrolled usage; ignored when `value` prop is provided\n    const [internalValue, setInternalValue] = React.useState(defaultValue ?? options[0].value);\n    const isControlled = controlledValue !== undefined;\n    const currentValue = isControlled ? controlledValue : internalValue;\n    const anySelected = options.some((o) => o.value === currentValue);\n    const isSecondSelected = currentValue === options[1].value;\n    const buttonRefs = React.useRef<(HTMLButtonElement | null)[]>([]);\n\n    const sizeClass =\n      size === \"24\"\n        ? \"px-2 py-1 typography-semibold-body-sm\"\n        : size === \"32\"\n          ? \"px-3 py-1.75 typography-semibold-body-md\"\n          : \"h-10 px-4 py-2.25 typography-semibold-body-lg\";\n\n    const handleSelect = (optionValue: string) => {\n      if (disabled || optionValue === currentValue) return;\n      if (!isControlled) {\n        setInternalValue(optionValue);\n      }\n      onChange?.(optionValue);\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent, index: number) => {\n      const nextIndex =\n        e.key === \"ArrowRight\" || e.key === \"ArrowDown\"\n          ? (index + 1) % options.length\n          : e.key === \"ArrowLeft\" || e.key === \"ArrowUp\"\n            ? (index - 1 + options.length) % options.length\n            : null;\n      if (nextIndex === null) return;\n      e.preventDefault();\n      const nextOption = options[nextIndex] as (typeof options)[number];\n      handleSelect(nextOption.value);\n      buttonRefs.current[nextIndex]?.focus();\n    };\n\n    return (\n      <div\n        ref={ref}\n        role=\"radiogroup\"\n        className={cn(\n          \"relative inline-grid grid-cols-2 rounded-full border border-neutral-200 p-1\",\n          disabled && \"cursor-not-allowed opacity-50\",\n          className,\n        )}\n        {...props}\n      >\n        <span\n          aria-hidden=\"true\"\n          className={cn(\n            \"absolute inset-y-1 left-1 w-[calc(50%-4px)] rounded-full border border-brand-accent-default bg-brand-accent-muted\",\n            \"motion-safe:transition-transform motion-safe:duration-200 motion-safe:ease-in-out\",\n            isSecondSelected && \"translate-x-full\",\n          )}\n        />\n        {options.map((option, index) => {\n          const isSelected = currentValue === option.value;\n          return (\n            // biome-ignore lint/a11y/useSemanticElements: native radio inputs only allow Tab-focus on the checked item; buttons with roving tabindex give full keyboard navigation\n            <button\n              key={option.value}\n              ref={(el) => {\n                buttonRefs.current[index] = el;\n              }}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={isSelected}\n              tabIndex={isSelected || (!anySelected && index === 0) ? 0 : -1}\n              disabled={disabled}\n              onClick={() => handleSelect(option.value)}\n              onKeyDown={(e) => handleKeyDown(e, index)}\n              className={cn(\n                \"relative z-10 inline-flex min-w-0 cursor-pointer items-center justify-center rounded-full border border-transparent text-foreground-default\",\n                \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n                \"active:rounded-full active:bg-brand-accent-muted\",\n                disabled && \"pointer-events-none\",\n                sizeClass,\n              )}\n            >\n              <span className=\"min-w-0 truncate\">{option.label}</span>\n            </button>\n          );\n        })}\n      </div>\n    );\n  },\n);\n\nSwitchToggle.displayName = \"SwitchToggle\";\n"],"names":["React","jsxs","cn","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA6BA,SAAS,0BAA0B,WAAoB,gBAAyB;AAC9E,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,QAAI,CAAC,aAAa,CAAC,gBAAgB;AACjC,cAAQ;AAAA,QACN;AAAA,MAAA;AAAA,IAEJ;AAAA,EACF;AACF;AAmBO,MAAM,eAAeA,iBAAM;AAAA,EAChC,CACE;AAAA,IACE;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,GAEL,QACG;AACH,8BAA0B,MAAM,YAAY,GAAG,MAAM,iBAAiB,CAAC;AAGvE,UAAM,CAAC,eAAe,gBAAgB,IAAIA,iBAAM,SAAS,gBAAgB,QAAQ,CAAC,EAAE,KAAK;AACzF,UAAM,eAAe,oBAAoB;AACzC,UAAM,eAAe,eAAe,kBAAkB;AACtD,UAAM,cAAc,QAAQ,KAAK,CAAC,MAAM,EAAE,UAAU,YAAY;AAChE,UAAM,mBAAmB,iBAAiB,QAAQ,CAAC,EAAE;AACrD,UAAM,aAAaA,iBAAM,OAAqC,EAAE;AAEhE,UAAM,YACJ,SAAS,OACL,0CACA,SAAS,OACP,6CACA;AAER,UAAM,eAAe,CAAC,gBAAwB;AAC5C,UAAI,YAAY,gBAAgB,aAAc;AAC9C,UAAI,CAAC,cAAc;AACjB,yBAAiB,WAAW;AAAA,MAC9B;AACA,iBAAW,WAAW;AAAA,IACxB;AAEA,UAAM,gBAAgB,CAAC,GAAwB,UAAkB;AAC/D,YAAM,YACJ,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,eAC/B,QAAQ,KAAK,QAAQ,SACtB,EAAE,QAAQ,eAAe,EAAE,QAAQ,aAChC,QAAQ,IAAI,QAAQ,UAAU,QAAQ,SACvC;AACR,UAAI,cAAc,KAAM;AACxB,QAAE,eAAA;AACF,YAAM,aAAa,QAAQ,SAAS;AACpC,mBAAa,WAAW,KAAK;AAC7B,iBAAW,QAAQ,SAAS,GAAG,MAAA;AAAA,IACjC;AAEA,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,YAAY;AAAA,UACZ;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,eAAY;AAAA,cACZ,WAAWD,GAAAA;AAAAA,gBACT;AAAA,gBACA;AAAA,gBACA,oBAAoB;AAAA,cAAA;AAAA,YACtB;AAAA,UAAA;AAAA,UAED,QAAQ,IAAI,CAAC,QAAQ,UAAU;AAC9B,kBAAM,aAAa,iBAAiB,OAAO;AAC3C;AAAA;AAAA,cAEEC,2BAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,KAAK,CAAC,OAAO;AACX,+BAAW,QAAQ,KAAK,IAAI;AAAA,kBAC9B;AAAA,kBACA,MAAK;AAAA,kBACL,MAAK;AAAA,kBACL,gBAAc;AAAA,kBACd,UAAU,cAAe,CAAC,eAAe,UAAU,IAAK,IAAI;AAAA,kBAC5D;AAAA,kBACA,SAAS,MAAM,aAAa,OAAO,KAAK;AAAA,kBACxC,WAAW,CAAC,MAAM,cAAc,GAAG,KAAK;AAAA,kBACxC,WAAWD,GAAAA;AAAAA,oBACT;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA,YAAY;AAAA,oBACZ;AAAA,kBAAA;AAAA,kBAGF,UAAAC,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAoB,iBAAO,MAAA,CAAM;AAAA,gBAAA;AAAA,gBAnB5C,OAAO;AAAA,cAAA;AAAA;AAAA,UAsBlB,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,aAAa,cAAc;;"}
+{"version":3,"file":"SwitchToggle.cjs","sources":["../../../../src/components/SwitchToggle/SwitchToggle.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Height of the switch toggle in pixels. */\nexport type SwitchToggleSize = \"24\" | \"32\" | \"40\";\n\n/** Describes one side of the binary toggle. */\nexport interface SwitchToggleOption {\n  /** Display label for the option. */\n  label: string;\n  /** Value identifier returned via `onChange`. */\n  value: string;\n}\n\nexport interface SwitchToggleProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** Height of the toggle in pixels. @default \"24\" */\n  size?: SwitchToggleSize;\n  /** The two options to toggle between (exactly two required). */\n  options: [SwitchToggleOption, SwitchToggleOption];\n  /** Currently selected value (controlled). */\n  value?: string;\n  /** Initially selected value (uncontrolled). */\n  defaultValue?: string;\n  /** Callback fired when the selected value changes. */\n  onChange?: (value: string) => void;\n  /** Whether the toggle is disabled. @default false */\n  disabled?: boolean;\n}\n\nfunction warnMissingAccessibleName(ariaLabel?: string, ariaLabelledBy?: string) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        \"SwitchToggle: no accessible name provided. Pass an `aria-label` or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\n/**\n * A binary segmented toggle rendered as a `radiogroup`. The active option is\n * highlighted with a sliding pill indicator. Supports both controlled and\n * uncontrolled usage.\n *\n * @example\n * ```tsx\n * <SwitchToggle\n *   options={[\n *     { label: \"Monthly\", value: \"monthly\" },\n *     { label: \"Yearly\", value: \"yearly\" },\n *   ]}\n *   value={billing}\n *   onChange={setBilling}\n * />\n * ```\n */\nexport const SwitchToggle = React.forwardRef<HTMLDivElement, SwitchToggleProps>(\n  (\n    {\n      className,\n      size = \"24\",\n      options,\n      value: controlledValue,\n      defaultValue,\n      onChange,\n      disabled = false,\n      ...props\n    },\n    ref,\n  ) => {\n    warnMissingAccessibleName(props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n    // Tracks selection for uncontrolled usage; ignored when `value` prop is provided\n    const [internalValue, setInternalValue] = React.useState(defaultValue ?? options[0].value);\n    const isControlled = controlledValue !== undefined;\n    const currentValue = isControlled ? controlledValue : internalValue;\n    const anySelected = options.some((o) => o.value === currentValue);\n    const isSecondSelected = currentValue === options[1].value;\n    const buttonRefs = React.useRef<(HTMLButtonElement | null)[]>([]);\n\n    const sizeClass =\n      size === \"24\"\n        ? \"px-2 py-1 typography-semibold-body-sm\"\n        : size === \"32\"\n          ? \"px-3 py-1.75 typography-semibold-body-md\"\n          : \"h-10 px-4 py-2.25 typography-semibold-body-lg\";\n\n    const handleSelect = (optionValue: string) => {\n      if (disabled || optionValue === currentValue) return;\n      if (!isControlled) {\n        setInternalValue(optionValue);\n      }\n      onChange?.(optionValue);\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent, index: number) => {\n      const nextIndex =\n        e.key === \"ArrowRight\" || e.key === \"ArrowDown\"\n          ? (index + 1) % options.length\n          : e.key === \"ArrowLeft\" || e.key === \"ArrowUp\"\n            ? (index - 1 + options.length) % options.length\n            : null;\n      if (nextIndex === null) return;\n      e.preventDefault();\n      const nextOption = options[nextIndex] as (typeof options)[number];\n      handleSelect(nextOption.value);\n      buttonRefs.current[nextIndex]?.focus();\n    };\n\n    return (\n      <div\n        ref={ref}\n        role=\"radiogroup\"\n        className={cn(\n          \"relative inline-grid grid-cols-2 rounded-full border border-neutral-alphas-200 p-1\",\n          disabled && \"cursor-not-allowed opacity-50\",\n          className,\n        )}\n        {...props}\n      >\n        <span\n          aria-hidden=\"true\"\n          className={cn(\n            \"absolute inset-y-1 left-1 w-[calc(50%-4px)] rounded-full border border-brand-primary-default bg-brand-primary-muted\",\n            \"motion-safe:transition-transform motion-safe:duration-200 motion-safe:ease-in-out\",\n            isSecondSelected && \"translate-x-full\",\n          )}\n        />\n        {options.map((option, index) => {\n          const isSelected = currentValue === option.value;\n          return (\n            // biome-ignore lint/a11y/useSemanticElements: native radio inputs only allow Tab-focus on the checked item; buttons with roving tabindex give full keyboard navigation\n            <button\n              key={option.value}\n              ref={(el) => {\n                buttonRefs.current[index] = el;\n              }}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={isSelected}\n              tabIndex={isSelected || (!anySelected && index === 0) ? 0 : -1}\n              disabled={disabled}\n              onClick={() => handleSelect(option.value)}\n              onKeyDown={(e) => handleKeyDown(e, index)}\n              className={cn(\n                \"relative z-10 inline-flex min-w-0 cursor-pointer items-center justify-center rounded-full border border-transparent text-content-primary\",\n                \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n                \"active:rounded-full active:bg-brand-primary-muted\",\n                disabled && \"pointer-events-none\",\n                sizeClass,\n              )}\n            >\n              <span className=\"min-w-0 truncate\">{option.label}</span>\n            </button>\n          );\n        })}\n      </div>\n    );\n  },\n);\n\nSwitchToggle.displayName = \"SwitchToggle\";\n"],"names":["React","jsxs","cn","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA6BA,SAAS,0BAA0B,WAAoB,gBAAyB;AAC9E,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,QAAI,CAAC,aAAa,CAAC,gBAAgB;AACjC,cAAQ;AAAA,QACN;AAAA,MAAA;AAAA,IAEJ;AAAA,EACF;AACF;AAmBO,MAAM,eAAeA,iBAAM;AAAA,EAChC,CACE;AAAA,IACE;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,GAEL,QACG;AACH,8BAA0B,MAAM,YAAY,GAAG,MAAM,iBAAiB,CAAC;AAGvE,UAAM,CAAC,eAAe,gBAAgB,IAAIA,iBAAM,SAAS,gBAAgB,QAAQ,CAAC,EAAE,KAAK;AACzF,UAAM,eAAe,oBAAoB;AACzC,UAAM,eAAe,eAAe,kBAAkB;AACtD,UAAM,cAAc,QAAQ,KAAK,CAAC,MAAM,EAAE,UAAU,YAAY;AAChE,UAAM,mBAAmB,iBAAiB,QAAQ,CAAC,EAAE;AACrD,UAAM,aAAaA,iBAAM,OAAqC,EAAE;AAEhE,UAAM,YACJ,SAAS,OACL,0CACA,SAAS,OACP,6CACA;AAER,UAAM,eAAe,CAAC,gBAAwB;AAC5C,UAAI,YAAY,gBAAgB,aAAc;AAC9C,UAAI,CAAC,cAAc;AACjB,yBAAiB,WAAW;AAAA,MAC9B;AACA,iBAAW,WAAW;AAAA,IACxB;AAEA,UAAM,gBAAgB,CAAC,GAAwB,UAAkB;AAC/D,YAAM,YACJ,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,eAC/B,QAAQ,KAAK,QAAQ,SACtB,EAAE,QAAQ,eAAe,EAAE,QAAQ,aAChC,QAAQ,IAAI,QAAQ,UAAU,QAAQ,SACvC;AACR,UAAI,cAAc,KAAM;AACxB,QAAE,eAAA;AACF,YAAM,aAAa,QAAQ,SAAS;AACpC,mBAAa,WAAW,KAAK;AAC7B,iBAAW,QAAQ,SAAS,GAAG,MAAA;AAAA,IACjC;AAEA,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,YAAY;AAAA,UACZ;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,eAAY;AAAA,cACZ,WAAWD,GAAAA;AAAAA,gBACT;AAAA,gBACA;AAAA,gBACA,oBAAoB;AAAA,cAAA;AAAA,YACtB;AAAA,UAAA;AAAA,UAED,QAAQ,IAAI,CAAC,QAAQ,UAAU;AAC9B,kBAAM,aAAa,iBAAiB,OAAO;AAC3C;AAAA;AAAA,cAEEC,2BAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,KAAK,CAAC,OAAO;AACX,+BAAW,QAAQ,KAAK,IAAI;AAAA,kBAC9B;AAAA,kBACA,MAAK;AAAA,kBACL,MAAK;AAAA,kBACL,gBAAc;AAAA,kBACd,UAAU,cAAe,CAAC,eAAe,UAAU,IAAK,IAAI;AAAA,kBAC5D;AAAA,kBACA,SAAS,MAAM,aAAa,OAAO,KAAK;AAAA,kBACxC,WAAW,CAAC,MAAM,cAAc,GAAG,KAAK;AAAA,kBACxC,WAAWD,GAAAA;AAAAA,oBACT;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA,YAAY;AAAA,oBACZ;AAAA,kBAAA;AAAA,kBAGF,UAAAC,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAoB,iBAAO,MAAA,CAAM;AAAA,gBAAA;AAAA,gBAnB5C,OAAO;AAAA,cAAA;AAAA;AAAA,UAsBlB,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,aAAa,cAAc;;"}

package/dist/cjs/components/Tabs/TabsList.cjs

@@ -79,8 +79,8 @@ const TabsList = React__namespace.forwardRef(({ className, children, fullWidth =
       className: cn.cn(
         "relative",
         fullWidth ? "flex w-full [&>[role=tab]]:flex-1" : "inline-flex",
-        "data-[orientation=horizontal]:items-center data-[orientation=horizontal]:shadow-[inset_0_-1px_0_0_var(--color-neutral-200)]",
-        "data-[orientation=vertical]:flex-col data-[orientation=vertical]:shadow-[inset_-1px_0_0_0_var(--color-neutral-200)]",
+        "data-[orientation=horizontal]:items-center data-[orientation=horizontal]:shadow-[inset_0_-1px_0_0_var(--color-neutral-alphas-200)]",
+        "data-[orientation=vertical]:flex-col data-[orientation=vertical]:shadow-[inset_-1px_0_0_0_var(--color-neutral-alphas-200)]",
         className
       ),
       ...props,
@@ -91,7 +91,7 @@ const TabsList = React__namespace.forwardRef(({ className, children, fullWidth =
           {
             ref: indicatorRef,
             "aria-hidden": true,
-            className: "pointer-events-none absolute rounded-full bg-brand-accent-default motion-safe:transition-[transform,width,height] motion-safe:duration-200 motion-safe:ease-in-out",
+            className: "pointer-events-none absolute rounded-full bg-brand-primary-default motion-safe:transition-[transform,width,height] motion-safe:duration-200 motion-safe:ease-in-out",
             style: { opacity: 0 }
           }
         )

package/dist/cjs/components/Tabs/TabsList.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabsList.cjs","sources":["../../../../src/components/Tabs/TabsList.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link TabsList} component. */\nexport type TabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {\n  /** When `true` (the default), the tab list spans the full width of its container and each tab grows equally. Set to `false` for inline sizing. */\n  fullWidth?: boolean;\n};\n\n/** Container for {@link TabsTrigger} elements. Renders a sliding active-tab indicator that animates between tabs. */\nexport const TabsList = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.List>,\n  TabsListProps\n>(({ className, children, fullWidth = true, ...props }, ref) => {\n  const innerRef = React.useRef<HTMLDivElement>(null);\n  const indicatorRef = React.useRef<HTMLSpanElement>(null);\n\n  React.useImperativeHandle(ref, () => innerRef.current as HTMLDivElement);\n\n  const updateIndicator = React.useCallback(() => {\n    const list = innerRef.current;\n    const indicator = indicatorRef.current;\n    if (!list || !indicator) return;\n\n    const activeTab = list.querySelector<HTMLElement>('[data-state=\"active\"]');\n    if (!activeTab) {\n      indicator.style.opacity = \"0\";\n      return;\n    }\n\n    const isVertical = list.dataset.orientation === \"vertical\";\n\n    indicator.style.opacity = \"1\";\n\n    if (isVertical) {\n      indicator.style.inset = `0 0 auto auto`;\n      indicator.style.width = \"4px\";\n      indicator.style.height = `${activeTab.offsetHeight}px`;\n      indicator.style.transform = `translateY(${activeTab.offsetTop}px)`;\n    } else {\n      indicator.style.inset = `auto auto 0 0`;\n      indicator.style.height = \"4px\";\n      indicator.style.width = `${activeTab.offsetWidth}px`;\n      indicator.style.transform = `translateX(${activeTab.offsetLeft}px)`;\n    }\n  }, []);\n\n  React.useLayoutEffect(() => {\n    const list = innerRef.current;\n    const indicator = indicatorRef.current;\n    if (!list || !indicator) return;\n\n    indicator.style.transitionDuration = \"0s\";\n    updateIndicator();\n    indicator.getBoundingClientRect();\n    indicator.style.transitionDuration = \"\";\n\n    const mutationObserver = new MutationObserver(updateIndicator);\n    mutationObserver.observe(list, {\n      attributes: true,\n      attributeFilter: [\"data-state\"],\n      childList: true,\n      subtree: true,\n    });\n\n    const resizeObserver = new ResizeObserver(updateIndicator);\n    resizeObserver.observe(list);\n\n    return () => {\n      mutationObserver.disconnect();\n      resizeObserver.disconnect();\n    };\n  }, [updateIndicator]);\n\n  return (\n    <TabsPrimitive.List\n      ref={innerRef}\n      className={cn(\n        \"relative\",\n        fullWidth ? \"flex w-full [&>[role=tab]]:flex-1\" : \"inline-flex\",\n        \"data-[orientation=horizontal]:items-center data-[orientation=horizontal]:shadow-[inset_0_-1px_0_0_var(--color-neutral-200)]\",\n        \"data-[orientation=vertical]:flex-col data-[orientation=vertical]:shadow-[inset_-1px_0_0_0_var(--color-neutral-200)]\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <span\n        ref={indicatorRef}\n        aria-hidden\n        className=\"pointer-events-none absolute rounded-full bg-brand-accent-default motion-safe:transition-[transform,width,height] motion-safe:duration-200 motion-safe:ease-in-out\"\n        style={{ opacity: 0 }}\n      />\n    </TabsPrimitive.List>\n  );\n});\n\nTabsList.displayName = \"TabsList\";\n"],"names":["React","jsxs","TabsPrimitive","cn","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAM,WAAWA,iBAAM,WAG5B,CAAC,EAAE,WAAW,UAAU,YAAY,MAAM,GAAG,MAAA,GAAS,QAAQ;AAC9D,QAAM,WAAWA,iBAAM,OAAuB,IAAI;AAClD,QAAM,eAAeA,iBAAM,OAAwB,IAAI;AAEvDA,mBAAM,oBAAoB,KAAK,MAAM,SAAS,OAAyB;AAEvE,QAAM,kBAAkBA,iBAAM,YAAY,MAAM;AAC9C,UAAM,OAAO,SAAS;AACtB,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,QAAQ,CAAC,UAAW;AAEzB,UAAM,YAAY,KAAK,cAA2B,uBAAuB;AACzE,QAAI,CAAC,WAAW;AACd,gBAAU,MAAM,UAAU;AAC1B;AAAA,IACF;AAEA,UAAM,aAAa,KAAK,QAAQ,gBAAgB;AAEhD,cAAU,MAAM,UAAU;AAE1B,QAAI,YAAY;AACd,gBAAU,MAAM,QAAQ;AACxB,gBAAU,MAAM,QAAQ;AACxB,gBAAU,MAAM,SAAS,GAAG,UAAU,YAAY;AAClD,gBAAU,MAAM,YAAY,cAAc,UAAU,SAAS;AAAA,IAC/D,OAAO;AACL,gBAAU,MAAM,QAAQ;AACxB,gBAAU,MAAM,SAAS;AACzB,gBAAU,MAAM,QAAQ,GAAG,UAAU,WAAW;AAChD,gBAAU,MAAM,YAAY,cAAc,UAAU,UAAU;AAAA,IAChE;AAAA,EACF,GAAG,CAAA,CAAE;AAELA,mBAAM,gBAAgB,MAAM;AAC1B,UAAM,OAAO,SAAS;AACtB,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,QAAQ,CAAC,UAAW;AAEzB,cAAU,MAAM,qBAAqB;AACrC,oBAAA;AACA,cAAU,sBAAA;AACV,cAAU,MAAM,qBAAqB;AAErC,UAAM,mBAAmB,IAAI,iBAAiB,eAAe;AAC7D,qBAAiB,QAAQ,MAAM;AAAA,MAC7B,YAAY;AAAA,MACZ,iBAAiB,CAAC,YAAY;AAAA,MAC9B,WAAW;AAAA,MACX,SAAS;AAAA,IAAA,CACV;AAED,UAAM,iBAAiB,IAAI,eAAe,eAAe;AACzD,mBAAe,QAAQ,IAAI;AAE3B,WAAO,MAAM;AACX,uBAAiB,WAAA;AACjB,qBAAe,WAAA;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,eAAe,CAAC;AAEpB,SACEC,2BAAAA;AAAAA,IAACC,yBAAc;AAAA,IAAd;AAAA,MACC,KAAK;AAAA,MACL,WAAWC,GAAAA;AAAAA,QACT;AAAA,QACA,YAAY,sCAAsC;AAAA,QAClD;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA;AAAA,QACDC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL,eAAW;AAAA,YACX,WAAU;AAAA,YACV,OAAO,EAAE,SAAS,EAAA;AAAA,UAAE;AAAA,QAAA;AAAA,MACtB;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;AAED,SAAS,cAAc;;"}
+{"version":3,"file":"TabsList.cjs","sources":["../../../../src/components/Tabs/TabsList.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link TabsList} component. */\nexport type TabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {\n  /** When `true` (the default), the tab list spans the full width of its container and each tab grows equally. Set to `false` for inline sizing. */\n  fullWidth?: boolean;\n};\n\n/** Container for {@link TabsTrigger} elements. Renders a sliding active-tab indicator that animates between tabs. */\nexport const TabsList = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.List>,\n  TabsListProps\n>(({ className, children, fullWidth = true, ...props }, ref) => {\n  const innerRef = React.useRef<HTMLDivElement>(null);\n  const indicatorRef = React.useRef<HTMLSpanElement>(null);\n\n  React.useImperativeHandle(ref, () => innerRef.current as HTMLDivElement);\n\n  const updateIndicator = React.useCallback(() => {\n    const list = innerRef.current;\n    const indicator = indicatorRef.current;\n    if (!list || !indicator) return;\n\n    const activeTab = list.querySelector<HTMLElement>('[data-state=\"active\"]');\n    if (!activeTab) {\n      indicator.style.opacity = \"0\";\n      return;\n    }\n\n    const isVertical = list.dataset.orientation === \"vertical\";\n\n    indicator.style.opacity = \"1\";\n\n    if (isVertical) {\n      indicator.style.inset = `0 0 auto auto`;\n      indicator.style.width = \"4px\";\n      indicator.style.height = `${activeTab.offsetHeight}px`;\n      indicator.style.transform = `translateY(${activeTab.offsetTop}px)`;\n    } else {\n      indicator.style.inset = `auto auto 0 0`;\n      indicator.style.height = \"4px\";\n      indicator.style.width = `${activeTab.offsetWidth}px`;\n      indicator.style.transform = `translateX(${activeTab.offsetLeft}px)`;\n    }\n  }, []);\n\n  React.useLayoutEffect(() => {\n    const list = innerRef.current;\n    const indicator = indicatorRef.current;\n    if (!list || !indicator) return;\n\n    indicator.style.transitionDuration = \"0s\";\n    updateIndicator();\n    indicator.getBoundingClientRect();\n    indicator.style.transitionDuration = \"\";\n\n    const mutationObserver = new MutationObserver(updateIndicator);\n    mutationObserver.observe(list, {\n      attributes: true,\n      attributeFilter: [\"data-state\"],\n      childList: true,\n      subtree: true,\n    });\n\n    const resizeObserver = new ResizeObserver(updateIndicator);\n    resizeObserver.observe(list);\n\n    return () => {\n      mutationObserver.disconnect();\n      resizeObserver.disconnect();\n    };\n  }, [updateIndicator]);\n\n  return (\n    <TabsPrimitive.List\n      ref={innerRef}\n      className={cn(\n        \"relative\",\n        fullWidth ? \"flex w-full [&>[role=tab]]:flex-1\" : \"inline-flex\",\n        \"data-[orientation=horizontal]:items-center data-[orientation=horizontal]:shadow-[inset_0_-1px_0_0_var(--color-neutral-alphas-200)]\",\n        \"data-[orientation=vertical]:flex-col data-[orientation=vertical]:shadow-[inset_-1px_0_0_0_var(--color-neutral-alphas-200)]\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <span\n        ref={indicatorRef}\n        aria-hidden\n        className=\"pointer-events-none absolute rounded-full bg-brand-primary-default motion-safe:transition-[transform,width,height] motion-safe:duration-200 motion-safe:ease-in-out\"\n        style={{ opacity: 0 }}\n      />\n    </TabsPrimitive.List>\n  );\n});\n\nTabsList.displayName = \"TabsList\";\n"],"names":["React","jsxs","TabsPrimitive","cn","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAM,WAAWA,iBAAM,WAG5B,CAAC,EAAE,WAAW,UAAU,YAAY,MAAM,GAAG,MAAA,GAAS,QAAQ;AAC9D,QAAM,WAAWA,iBAAM,OAAuB,IAAI;AAClD,QAAM,eAAeA,iBAAM,OAAwB,IAAI;AAEvDA,mBAAM,oBAAoB,KAAK,MAAM,SAAS,OAAyB;AAEvE,QAAM,kBAAkBA,iBAAM,YAAY,MAAM;AAC9C,UAAM,OAAO,SAAS;AACtB,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,QAAQ,CAAC,UAAW;AAEzB,UAAM,YAAY,KAAK,cAA2B,uBAAuB;AACzE,QAAI,CAAC,WAAW;AACd,gBAAU,MAAM,UAAU;AAC1B;AAAA,IACF;AAEA,UAAM,aAAa,KAAK,QAAQ,gBAAgB;AAEhD,cAAU,MAAM,UAAU;AAE1B,QAAI,YAAY;AACd,gBAAU,MAAM,QAAQ;AACxB,gBAAU,MAAM,QAAQ;AACxB,gBAAU,MAAM,SAAS,GAAG,UAAU,YAAY;AAClD,gBAAU,MAAM,YAAY,cAAc,UAAU,SAAS;AAAA,IAC/D,OAAO;AACL,gBAAU,MAAM,QAAQ;AACxB,gBAAU,MAAM,SAAS;AACzB,gBAAU,MAAM,QAAQ,GAAG,UAAU,WAAW;AAChD,gBAAU,MAAM,YAAY,cAAc,UAAU,UAAU;AAAA,IAChE;AAAA,EACF,GAAG,CAAA,CAAE;AAELA,mBAAM,gBAAgB,MAAM;AAC1B,UAAM,OAAO,SAAS;AACtB,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,QAAQ,CAAC,UAAW;AAEzB,cAAU,MAAM,qBAAqB;AACrC,oBAAA;AACA,cAAU,sBAAA;AACV,cAAU,MAAM,qBAAqB;AAErC,UAAM,mBAAmB,IAAI,iBAAiB,eAAe;AAC7D,qBAAiB,QAAQ,MAAM;AAAA,MAC7B,YAAY;AAAA,MACZ,iBAAiB,CAAC,YAAY;AAAA,MAC9B,WAAW;AAAA,MACX,SAAS;AAAA,IAAA,CACV;AAED,UAAM,iBAAiB,IAAI,eAAe,eAAe;AACzD,mBAAe,QAAQ,IAAI;AAE3B,WAAO,MAAM;AACX,uBAAiB,WAAA;AACjB,qBAAe,WAAA;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,eAAe,CAAC;AAEpB,SACEC,2BAAAA;AAAAA,IAACC,yBAAc;AAAA,IAAd;AAAA,MACC,KAAK;AAAA,MACL,WAAWC,GAAAA;AAAAA,QACT;AAAA,QACA,YAAY,sCAAsC;AAAA,QAClD;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA;AAAA,QACDC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL,eAAW;AAAA,YACX,WAAU;AAAA,YACV,OAAO,EAAE,SAAS,EAAA;AAAA,UAAE;AAAA,QAAA;AAAA,MACtB;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;AAED,SAAS,cAAc;;"}

package/dist/cjs/components/Tabs/TabsTrigger.cjs

@@ -30,18 +30,18 @@ const TabsTrigger = React__namespace.forwardRef(({ className, children, ...props
     className: cn.cn(
       "inline-flex min-w-0 items-center justify-center",
       "rounded-xs",
-      "typography-semibold-body-lg cursor-pointer text-foreground-default",
+      "typography-semibold-body-lg cursor-pointer text-content-primary",
       "motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out",
       "data-[orientation=horizontal]:px-4 data-[orientation=horizontal]:py-3",
       "data-[orientation=vertical]:justify-start data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3",
-      "data-[state=active]:hover:text-neutral-350",
-      "data-[state=inactive]:hover:text-neutral-300",
-      "data-[state=active]:active:text-neutral-350",
-      "data-[state=inactive]:active:text-neutral-300",
+      "data-[state=active]:hover:text-buttons-primary-muted",
+      "data-[state=inactive]:hover:text-neutral-alphas-300",
+      "data-[state=active]:active:text-buttons-primary-muted",
+      "data-[state=inactive]:active:text-neutral-alphas-300",
       "data-disabled:pointer-events-none",
-      "data-disabled:data-[state=active]:text-neutral-250",
-      "data-disabled:data-[state=inactive]:text-neutral-300",
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-page",
+      "data-disabled:data-[state=active]:text-content-tertiary",
+      "data-disabled:data-[state=inactive]:text-neutral-alphas-300",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary",
       className
     ),
     ...props,

package/dist/cjs/components/Tabs/TabsTrigger.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabsTrigger.cjs","sources":["../../../../src/components/Tabs/TabsTrigger.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link TabsTrigger} button component. */\nexport type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>;\n\n/** An interactive tab button that activates its associated {@link TabsContent} panel when clicked. */\nexport const TabsTrigger = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, children, ...props }, ref) => (\n  <TabsPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"inline-flex min-w-0 items-center justify-center\",\n      \"rounded-xs\",\n      \"typography-semibold-body-lg cursor-pointer text-foreground-default\",\n      \"motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\n      \"data-[orientation=horizontal]:px-4 data-[orientation=horizontal]:py-3\",\n      \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3\",\n      \"data-[state=active]:hover:text-neutral-350\",\n      \"data-[state=inactive]:hover:text-neutral-300\",\n      \"data-[state=active]:active:text-neutral-350\",\n      \"data-[state=inactive]:active:text-neutral-300\",\n      \"data-disabled:pointer-events-none\",\n      \"data-disabled:data-[state=active]:text-neutral-250\",\n      \"data-disabled:data-[state=inactive]:text-neutral-300\",\n      \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-page\",\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"min-w-0 truncate\">{children}</span>\n  </TabsPrimitive.Trigger>\n));\n\nTabsTrigger.displayName = \"TabsTrigger\";\n"],"names":["React","jsx","TabsPrimitive","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAQO,MAAM,cAAcA,iBAAM,WAG/B,CAAC,EAAE,WAAW,UAAU,GAAG,SAAS,QACpCC,2BAAAA;AAAAA,EAACC,yBAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAWC,GAAAA;AAAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEJ,UAAAF,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAoB,SAAA,CAAS;AAAA,EAAA;AAC/C,CACD;AAED,YAAY,cAAc;;"}
+{"version":3,"file":"TabsTrigger.cjs","sources":["../../../../src/components/Tabs/TabsTrigger.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link TabsTrigger} button component. */\nexport type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>;\n\n/** An interactive tab button that activates its associated {@link TabsContent} panel when clicked. */\nexport const TabsTrigger = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, children, ...props }, ref) => (\n  <TabsPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"inline-flex min-w-0 items-center justify-center\",\n      \"rounded-xs\",\n      \"typography-semibold-body-lg cursor-pointer text-content-primary\",\n      \"motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\n      \"data-[orientation=horizontal]:px-4 data-[orientation=horizontal]:py-3\",\n      \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3\",\n      \"data-[state=active]:hover:text-buttons-primary-muted\",\n      \"data-[state=inactive]:hover:text-neutral-alphas-300\",\n      \"data-[state=active]:active:text-buttons-primary-muted\",\n      \"data-[state=inactive]:active:text-neutral-alphas-300\",\n      \"data-disabled:pointer-events-none\",\n      \"data-disabled:data-[state=active]:text-content-tertiary\",\n      \"data-disabled:data-[state=inactive]:text-neutral-alphas-300\",\n      \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary\",\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"min-w-0 truncate\">{children}</span>\n  </TabsPrimitive.Trigger>\n));\n\nTabsTrigger.displayName = \"TabsTrigger\";\n"],"names":["React","jsx","TabsPrimitive","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAQO,MAAM,cAAcA,iBAAM,WAG/B,CAAC,EAAE,WAAW,UAAU,GAAG,SAAS,QACpCC,2BAAAA;AAAAA,EAACC,yBAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAWC,GAAAA;AAAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEJ,UAAAF,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAoB,SAAA,CAAS;AAAA,EAAA;AAC/C,CACD;AAED,YAAY,cAAc;;"}

package/dist/cjs/components/TextArea/TextArea.cjs

@@ -51,16 +51,16 @@ const CLEAR_BUTTON_RIGHT = {
 };
 function getContainerClassName(size, error, disabled) {
   return cn.cn(
-    "relative rounded-xl border bg-neutral-100 has-focus-visible:outline-none motion-safe:transition-colors",
-    error ? "border-error-default" : "border-transparent",
-    !disabled && !error && "hover:border-neutral-400",
+    "relative rounded-sm border bg-neutral-alphas-50 has-focus-visible:outline-none motion-safe:transition-colors",
+    error ? "border-error-content" : "border-transparent",
+    !disabled && !error && "hover:border-neutral-alphas-400",
     CONTAINER_MIN_HEIGHT[size],
     disabled && "opacity-50"
   );
 }
 function getTextareaClassName(size, hasClearButton, hasMinRows, resizable) {
   return cn.cn(
-    "w-full rounded-xl bg-transparent text-foreground-default no-underline placeholder:text-foreground-secondary placeholder:opacity-40 focus:outline-none disabled:cursor-not-allowed",
+    "h-full w-full bg-transparent text-content-primary no-underline placeholder:text-content-secondary focus:outline-none disabled:cursor-not-allowed",
     resizable ? "resize-y" : "resize-none",
     !hasMinRows && "min-h-[80px]",
     TEXTAREA_SIZE_CLASSES[size],
@@ -79,7 +79,7 @@ function TextAreaHelperText({
       id,
       className: cn.cn(
         "typography-regular-body-sm px-2 pt-1 pb-0.5",
-        error ? "text-error-default" : "text-foreground-secondary"
+        error ? "text-error-content" : "text-content-secondary"
       ),
       children
     }
@@ -179,7 +179,7 @@ const TextArea = React__namespace.forwardRef(
             "label",
             {
               htmlFor: inputId,
-              className: "typography-semibold-body-sm px-1 pt-1 pb-2 text-foreground-default",
+              className: "typography-semibold-body-sm px-1 pt-1 pb-2 text-content-primary",
               children: label
             }
           ),
@@ -222,7 +222,7 @@ const TextArea = React__namespace.forwardRef(
                   "pointer-events-none absolute flex size-5 items-center justify-center",
                   CLEAR_BUTTON_RIGHT[size]
                 ),
-                children: /* @__PURE__ */ jsxRuntime.jsx(CheckOutlineIcon.CheckOutlineIcon, { className: "text-success-default" })
+                children: /* @__PURE__ */ jsxRuntime.jsx(CheckOutlineIcon.CheckOutlineIcon, { className: "text-success-content" })
               }
             )
           ] }),