@x-plat/design-system 0.5.66 → 0.6.1

package/dist/components/Accordion/index.css

@@ -2,12 +2,12 @@
 .lib-xplat-accordion {
   contain: content;
   width: 100%;
-  border: 1px solid var(--semantic-border-default);
+  border: 1px solid var(--semantic-border-primary);
   border-radius: var(--spacing-radius-md);
   overflow: hidden;
 }
 .lib-xplat-accordion .accordion-item {
-  border-bottom: 1px solid var(--semantic-border-default);
+  border-bottom: 1px solid var(--semantic-border-primary);
 }
 .lib-xplat-accordion .accordion-item:last-child {
   border-bottom: none;
@@ -23,12 +23,12 @@
   cursor: pointer;
   font-size: var(--semantic-typo-caption-1-r-size);
   font-weight: 500;
-  color: var(--semantic-text-strong);
+  color: var(--semantic-text-primary);
   text-align: left;
   transition: background-color 0.2s;
 }
 .lib-xplat-accordion .accordion-header:hover {
-  background-color: var(--semantic-surface-neutral-subtle);
+  background-color: var(--semantic-surface-neutral-secondary);
 }
 .lib-xplat-accordion .accordion-header .chevron {
   width: var(--spacing-space-5);
@@ -38,7 +38,7 @@
   align-items: center;
   justify-content: center;
   transition: transform 0.25s ease;
-  color: var(--semantic-text-muted);
+  color: var(--semantic-text-tertiary);
 }
 .lib-xplat-accordion .accordion-body {
   overflow: hidden;
@@ -48,7 +48,7 @@
 .lib-xplat-accordion .accordion-content {
   padding: 0 var(--spacing-space-4) 14px;
   font-size: var(--semantic-typo-caption-1-r-size);
-  color: var(--semantic-text-subtle);
+  color: var(--semantic-text-secondary);
   line-height: 1.6;
 }
 .lib-xplat-accordion .accordion-item.open .chevron {

package/dist/components/AutoResizeTextArea/index.css

@@ -7,23 +7,23 @@
 .lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea {
   display: flex;
   align-items: center;
-  border: 1px solid var(--semantic-border-default);
+  border: 1px solid var(--semantic-border-primary);
   border-radius: var(--spacing-radius-md);
   min-height: var(--spacing-control-height-md);
   overflow: hidden;
-  background-color: var(--semantic-surface-neutral-default);
+  background-color: var(--semantic-surface-neutral-primary);
   width: 100%;
   transition: border-color 0.15s, box-shadow 0.15s;
 }
 .lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea:hover:not(.disabled):not(:focus-within) {
-  border-color: var(--semantic-border-strong);
+  border-color: var(--semantic-border-tertiary);
 }
 .lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea:focus-within {
   border-color: var(--semantic-interaction-focus-ring);
   box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
 }
 .lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea:has(> textarea:not(:placeholder-shown)):not(:focus-within) {
-  border-color: var(--semantic-border-strong);
+  border-color: var(--semantic-border-tertiary);
 }
 .lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea.disabled {
   background-color: var(--semantic-surface-neutral-disabled);
@@ -35,7 +35,7 @@
   flex: 1;
   padding: var(--spacing-space-2) var(--spacing-space-4);
   width: 100%;
-  color: var(--semantic-text-subtle);
+  color: var(--semantic-text-secondary);
   resize: none;
   font-size: var(--semantic-typo-label-2-m-size);
   line-height: var(--semantic-typo-label-2-m-lh);

package/dist/components/Avatar/index.css

@@ -35,8 +35,8 @@
   align-items: center;
   justify-content: center;
   font-weight: 600;
-  background-color: var(--semantic-surface-neutral-subtle);
-  color: var(--semantic-text-muted);
+  background-color: var(--semantic-surface-neutral-secondary);
+  color: var(--semantic-text-tertiary);
 }
 .lib-xplat-avatar .fallback.cat-1 {
   background-color: var(--semantic-categorical-1-bg);

package/dist/components/Badge/index.css

@@ -54,7 +54,7 @@
 }
 .lib-xplat-badge .badge-indicator.warning {
   background-color: var(--semantic-surface-warning-default);
-  color: var(--semantic-text-strong);
+  color: var(--semantic-text-primary);
 }
 .lib-xplat-badge .badge-indicator.info {
   background-color: var(--semantic-surface-info-default);

package/dist/components/Box/index.css

@@ -8,11 +8,11 @@
   flex: 1;
   min-width: 0;
   border-radius: var(--spacing-radius-xl);
-  background-color: var(--semantic-surface-neutral-default);
+  background-color: var(--semantic-surface-neutral-primary);
   overflow: hidden;
 }
 .lib-xplat-box.outlined {
-  border: 1px solid var(--semantic-border-default);
+  border: 1px solid var(--semantic-border-primary);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
 }
 .lib-xplat-box.elevated {
@@ -21,15 +21,15 @@
 }
 .lib-xplat-box.flat {
   border: none;
-  background-color: var(--semantic-surface-neutral-subtle);
+  background-color: var(--semantic-surface-neutral-secondary);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
 }
 .lib-xplat-box > .box-title {
   font-weight: 600;
   font-size: var(--semantic-typo-caption-1-r-size);
-  color: var(--semantic-text-strong);
+  color: var(--semantic-text-primary);
   padding: var(--spacing-space-3) var(--spacing-space-4);
-  border-bottom: 1px solid var(--semantic-border-subtle);
+  border-bottom: 1px solid var(--semantic-border-secondary);
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;

package/dist/components/Breadcrumb/index.css

@@ -18,7 +18,7 @@
   font-size: var(--semantic-typo-caption-1-r-size);
 }
 .lib-xplat-breadcrumb .link {
-  color: var(--semantic-text-muted);
+  color: var(--semantic-text-tertiary);
   text-decoration: none;
   background: none;
   border: none;
@@ -28,13 +28,13 @@
   transition: color 0.2s;
 }
 .lib-xplat-breadcrumb .link:hover {
-  color: var(--semantic-text-strong);
+  color: var(--semantic-text-primary);
 }
 .lib-xplat-breadcrumb .current {
-  color: var(--semantic-text-strong);
+  color: var(--semantic-text-primary);
   font-weight: 500;
 }
 .lib-xplat-breadcrumb .separator {
-  color: var(--semantic-icon-subtle);
+  color: var(--semantic-icon-secondary);
   user-select: none;
 }

package/dist/components/Button/index.cjs

@@ -45,7 +45,6 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var Button = (props) => {
   const {
     children,
-    className,
     type = "primary",
     size = "md",
     disabled,
@@ -54,7 +53,7 @@ var Button = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "button",
     {
-      className: clsx_default("lib-xplat-button", type, size, className),
+      className: clsx_default("lib-xplat-button", type, size),
       disabled,
       ...rest,
       children

package/dist/components/Button/index.css

@@ -52,14 +52,14 @@
 }
 .lib-xplat-button.secondary {
   color: var(--semantic-surface-brand-default);
-  background-color: var(--semantic-surface-neutral-default);
-  border-color: var(--semantic-border-default);
+  background-color: var(--semantic-surface-neutral-primary);
+  border-color: var(--semantic-border-primary);
 }
 .lib-xplat-button.secondary:hover:not(:disabled) {
-  background-color: var(--semantic-surface-neutral-subtle);
+  background-color: var(--semantic-surface-neutral-secondary);
 }
 .lib-xplat-button.secondary:active:not(:disabled) {
-  background-color: var(--semantic-surface-neutral-strong);
+  background-color: var(--semantic-surface-neutral-tertiary);
 }
 .lib-xplat-button.secondary:focus-visible {
   outline: 2px solid var(--semantic-interaction-focus-ring);
@@ -80,12 +80,12 @@
   outline-offset: 2px;
 }
 .lib-xplat-button.ghost {
-  color: var(--semantic-text-subtle);
+  color: var(--semantic-text-secondary);
   background-color: transparent;
   border-color: transparent;
 }
 .lib-xplat-button.ghost:hover:not(:disabled) {
-  background-color: var(--semantic-surface-neutral-subtle);
+  background-color: var(--semantic-surface-neutral-secondary);
 }
 .lib-xplat-button.ghost:active:not(:disabled) {
   background-color: var(--semantic-surface-neutral-disabled);

package/dist/components/Button/index.d.cts

@@ -4,7 +4,7 @@ import { B as ButtonAttributes } from '../../attributes-DJIWir_0.cjs';
 
 type ButtonType = "primary" | "secondary" | "danger" | "ghost";
 type ButtonSize = "sm" | "md" | "lg";
-interface ButtonProps extends Omit<ButtonAttributes, "style"> {
+interface ButtonProps extends Omit<ButtonAttributes, "className"> {
     children: React.ReactNode;
     type?: ButtonType;
     size?: ButtonSize;

package/dist/components/Button/index.d.ts

@@ -4,7 +4,7 @@ import { B as ButtonAttributes } from '../../attributes-DJIWir_0.js';
 
 type ButtonType = "primary" | "secondary" | "danger" | "ghost";
 type ButtonSize = "sm" | "md" | "lg";
-interface ButtonProps extends Omit<ButtonAttributes, "style"> {
+interface ButtonProps extends Omit<ButtonAttributes, "className"> {
     children: React.ReactNode;
     type?: ButtonType;
     size?: ButtonSize;

package/dist/components/Button/index.js

@@ -19,7 +19,6 @@ import { jsx } from "react/jsx-runtime";
 var Button = (props) => {
   const {
     children,
-    className,
     type = "primary",
     size = "md",
     disabled,
@@ -28,7 +27,7 @@ var Button = (props) => {
   return /* @__PURE__ */ jsx(
     "button",
     {
-      className: clsx_default("lib-xplat-button", type, size, className),
+      className: clsx_default("lib-xplat-button", type, size),
       disabled,
       ...rest,
       children

package/dist/components/Calendar/index.cjs

@@ -1114,7 +1114,7 @@ var DayCell = import_react2.default.memo(
               "span",
               {
                 className: "calendar-event-dot",
-                style: { backgroundColor: event.color ?? "var(--xplat-blue-500)" },
+                style: { backgroundColor: event.color ?? "var(--semantic-surface-brand-default)" },
                 title: event.label,
                 onClick: (e) => {
                   e.stopPropagation();

package/dist/components/Calendar/index.css

@@ -16,7 +16,7 @@
 .lib-xplat-calendar .calendar-title {
   font-size: clamp(14px, 3cqi, 20px);
   font-weight: 600;
-  color: var(--semantic-text-strong);
+  color: var(--semantic-text-primary);
   min-width: 120px;
   text-align: center;
   background: none;
@@ -39,7 +39,7 @@
   border-radius: var(--spacing-radius-md);
   background: none;
   cursor: pointer;
-  color: var(--semantic-text-subtle);
+  color: var(--semantic-text-secondary);
   transition: background-color 0.15s;
 }
 .lib-xplat-calendar .calendar-nav:hover {
@@ -51,11 +51,11 @@
 .lib-xplat-calendar .calendar-today-btn {
   margin-left: auto;
   padding: var(--spacing-space-1) var(--spacing-space-3);
-  border: 1px solid var(--semantic-border-default);
+  border: 1px solid var(--semantic-border-primary);
   border-radius: var(--spacing-radius-md);
   background: none;
   font-size: clamp(12px, 2cqi, 14px);
-  color: var(--semantic-text-subtle);
+  color: var(--semantic-text-secondary);
   cursor: pointer;
   transition: background-color 0.15s;
 }
@@ -72,13 +72,13 @@
   font-size: clamp(11px, 2cqi, 14px);
   font-weight: 500;
   padding: var(--spacing-space-2) 0;
-  color: var(--semantic-text-muted);
+  color: var(--semantic-text-tertiary);
 }
 .lib-xplat-calendar .calendar-weekday.sunday {
-  color: var(--semantic-text-sunday);
+  color: var(--semantic-text-accent-red);
 }
 .lib-xplat-calendar .calendar-weekday.saturday {
-  color: var(--semantic-text-saturday);
+  color: var(--semantic-text-accent-blue);
 }
 .lib-xplat-calendar .calendar-grid {
   display: grid;
@@ -95,7 +95,7 @@
   transition: background-color 0.15s;
 }
 .lib-xplat-calendar .calendar-day:hover:not(.disabled):not(.outside):not(.selected) {
-  background-color: var(--semantic-surface-neutral-subtle);
+  background-color: var(--semantic-surface-neutral-secondary);
 }
 .lib-xplat-calendar .calendar-day.outside {
   cursor: default;
@@ -104,10 +104,10 @@
   color: var(--semantic-text-disabled);
 }
 .lib-xplat-calendar .calendar-day.outside.sunday .calendar-day-number {
-  color: color-mix(in srgb, var(--semantic-text-sunday) 35%, transparent);
+  color: color-mix(in srgb, var(--semantic-text-accent-red) 35%, transparent);
 }
 .lib-xplat-calendar .calendar-day.outside.saturday .calendar-day-number {
-  color: color-mix(in srgb, var(--semantic-text-saturday) 35%, transparent);
+  color: color-mix(in srgb, var(--semantic-text-accent-blue) 35%, transparent);
 }
 .lib-xplat-calendar .calendar-day.disabled {
   cursor: not-allowed;
@@ -120,24 +120,24 @@
   color: var(--semantic-surface-brand-default);
 }
 .lib-xplat-calendar .calendar-day.selected {
-  box-shadow: inset 0 0 0 1.5px var(--calendar-selected-color, var(--semantic-text-muted));
+  box-shadow: inset 0 0 0 1.5px var(--calendar-selected-color, var(--semantic-text-tertiary));
 }
 .lib-xplat-calendar .calendar-day.selected .calendar-day-number {
   font-weight: 700;
 }
 .lib-xplat-calendar .calendar-day.selected:hover {
-  background-color: color-mix(in srgb, var(--calendar-selected-color, var(--semantic-text-muted)) 10%, transparent);
+  background-color: color-mix(in srgb, var(--calendar-selected-color, var(--semantic-text-tertiary)) 10%, transparent);
 }
 .lib-xplat-calendar .calendar-day.sunday:not(.outside) .calendar-day-number {
-  color: var(--semantic-text-sunday);
+  color: var(--semantic-text-accent-red);
 }
 .lib-xplat-calendar .calendar-day.saturday:not(.outside) .calendar-day-number {
-  color: var(--semantic-text-saturday);
+  color: var(--semantic-text-accent-blue);
 }
 .lib-xplat-calendar .calendar-day-number {
   font-size: clamp(12px, 2.5cqi, 16px);
   line-height: 1;
-  color: var(--semantic-text-strong);
+  color: var(--semantic-text-primary);
 }
 .lib-xplat-calendar .calendar-day-events {
   display: flex;
@@ -154,7 +154,7 @@
 }
 .lib-xplat-calendar .calendar-event-more {
   font-size: var(--semantic-typo-caption-2-r-size);
-  color: var(--semantic-text-muted);
+  color: var(--semantic-text-tertiary);
   line-height: 1;
 }
 .lib-xplat-calendar .calendar-picker-grid {
@@ -172,7 +172,7 @@
   border-radius: var(--spacing-radius-md);
   background: none;
   font-size: clamp(12px, 2.5cqi, 15px);
-  color: var(--semantic-text-subtle);
+  color: var(--semantic-text-secondary);
   cursor: pointer;
   transition: background-color 0.15s;
 }
@@ -180,7 +180,7 @@
   background-color: var(--semantic-surface-neutral-disabled);
 }
 .lib-xplat-calendar .calendar-picker-cell.active {
-  background-color: var(--semantic-surface-neutral-strong);
+  background-color: var(--semantic-surface-neutral-tertiary);
   color: var(--semantic-text-inverse);
   font-weight: 600;
 }

package/dist/components/Calendar/index.js

@@ -1075,7 +1075,7 @@ var DayCell = React2.memo(
               "span",
               {
                 className: "calendar-event-dot",
-                style: { backgroundColor: event.color ?? "var(--xplat-blue-500)" },
+                style: { backgroundColor: event.color ?? "var(--semantic-surface-brand-default)" },
                 title: event.label,
                 onClick: (e) => {
                   e.stopPropagation();

package/dist/components/CardTab/index.css

@@ -12,30 +12,30 @@
 .lib-xplat-card-tab .card-tab-trigger {
   position: relative;
   cursor: pointer;
-  border: 1px solid var(--semantic-border-default);
+  border: 1px solid var(--semantic-border-primary);
   border-bottom: none;
   border-radius: var(--spacing-radius-md) var(--spacing-radius-md) 0 0;
   background-color: var(--semantic-surface-neutral-disabled);
-  color: var(--semantic-text-muted);
+  color: var(--semantic-text-tertiary);
   font-weight: 500;
   transition: background-color 0.2s, color 0.2s;
 }
 .lib-xplat-card-tab .card-tab-trigger:hover:not(.active) {
-  background-color: var(--semantic-surface-neutral-subtle);
-  color: var(--semantic-text-subtle);
+  background-color: var(--semantic-surface-neutral-secondary);
+  color: var(--semantic-text-secondary);
 }
 .lib-xplat-card-tab .card-tab-trigger.active {
-  background-color: var(--semantic-surface-neutral-default);
-  color: var(--semantic-text-strong);
+  background-color: var(--semantic-surface-neutral-primary);
+  color: var(--semantic-text-primary);
   font-weight: 600;
   z-index: 1;
   margin-bottom: -1px;
   padding-bottom: calc(var(--tab-py) + 1px);
 }
 .lib-xplat-card-tab .card-tab-body {
-  border: 1px solid var(--semantic-border-default);
+  border: 1px solid var(--semantic-border-primary);
   border-radius: 0 var(--spacing-radius-md) var(--spacing-radius-md) var(--spacing-radius-md);
-  background-color: var(--semantic-surface-neutral-default);
+  background-color: var(--semantic-surface-neutral-primary);
   padding: var(--spacing-space-5);
 }
 .lib-xplat-card-tab .card-tab-panel {

package/dist/components/Chart/index.css

@@ -21,20 +21,20 @@
   font-weight: 400;
 }
 .lib-xplat-tooltip.dark {
-  background-color: var(--semantic-surface-neutral-strong);
+  background-color: var(--semantic-surface-neutral-tertiary);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 .lib-xplat-tooltip.dark .tooltip-title,
 .lib-xplat-tooltip.dark .tooltip-desc {
-  color: var(--semantic-text-subtle);
+  color: var(--semantic-text-secondary);
 }
 .lib-xplat-tooltip.light {
-  background-color: var(--semantic-surface-neutral-default);
+  background-color: var(--semantic-surface-neutral-primary);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 }
 .lib-xplat-tooltip.light .tooltip-title,
 .lib-xplat-tooltip.light .tooltip-desc {
-  color: var(--semantic-text-subtle);
+  color: var(--semantic-text-secondary);
 }
 @keyframes tooltip-show {
   from {
@@ -63,12 +63,12 @@
   contain: layout style paint;
 }
 .lib-xplat-chart .chart-grid {
-  stroke: var(--semantic-border-subtle);
+  stroke: var(--semantic-border-secondary);
   stroke-width: 1;
 }
 .lib-xplat-chart .chart-axis-label {
   font-size: var(--semantic-typo-caption-2-r-size);
-  fill: var(--semantic-text-muted);
+  fill: var(--semantic-text-tertiary);
 }
 .lib-xplat-chart .chart-pie-label {
   font-size: var(--semantic-typo-caption-2-r-size);
@@ -105,7 +105,7 @@
 }
 .lib-xplat-chart .chart-slice {
   cursor: pointer;
-  stroke: var(--semantic-surface-neutral-default);
+  stroke: var(--semantic-surface-neutral-primary);
   stroke-width: 2;
   transition:
     opacity 0.15s ease-out,
@@ -125,7 +125,7 @@
   opacity: 1;
 }
 .lib-xplat-chart .chart-crosshair {
-  stroke: var(--semantic-border-strong);
+  stroke: var(--semantic-border-tertiary);
   stroke-width: 1;
   stroke-dasharray: 4 3;
   pointer-events: none;
@@ -137,7 +137,7 @@
 .lib-xplat-chart .chart-crosshair-label {
   font-size: var(--semantic-typo-caption-2-r-size);
   font-weight: 500;
-  color: var(--semantic-text-strong);
+  color: var(--semantic-text-primary);
   text-align: center;
   white-space: nowrap;
   overflow: visible;
@@ -182,12 +182,12 @@
 }
 .lib-xplat-chart .chart-legend-label {
   font-size: var(--semantic-typo-caption-2-r-size);
-  color: var(--semantic-text-muted);
+  color: var(--semantic-text-tertiary);
 }
 .lib-xplat-chart .chart-legend-value {
   font-size: var(--semantic-typo-caption-1-r-size);
   font-weight: 600;
-  color: var(--semantic-text-strong);
+  color: var(--semantic-text-primary);
 }
 @keyframes chart-bar-grow {
   from {

package/dist/components/ChatInput/index.cjs

@@ -58,7 +58,6 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var IconButton = (props) => {
   const {
     icon,
-    className,
     type = "primary",
     size = "md",
     disabled,
@@ -67,7 +66,7 @@ var IconButton = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "button",
     {
-      className: clsx_default("lib-xplat-icon-button", type, size, className),
+      className: clsx_default("lib-xplat-icon-button", type, size),
       disabled,
       ...rest,
       children: icon

package/dist/components/ChatInput/index.css

@@ -43,11 +43,11 @@
 }
 .lib-xplat-icon-button.secondary {
   color: var(--semantic-surface-brand-default);
-  background-color: var(--semantic-surface-neutral-default);
-  border-color: var(--semantic-border-default);
+  background-color: var(--semantic-surface-neutral-primary);
+  border-color: var(--semantic-border-primary);
 }
 .lib-xplat-icon-button.secondary:hover:not(:disabled) {
-  background-color: var(--semantic-surface-neutral-subtle);
+  background-color: var(--semantic-surface-neutral-secondary);
 }
 .lib-xplat-icon-button.secondary:focus-visible {
   outline: 2px solid var(--semantic-interaction-focus-ring);
@@ -65,11 +65,11 @@
   outline-offset: 2px;
 }
 .lib-xplat-icon-button.ghost {
-  color: var(--semantic-text-subtle);
+  color: var(--semantic-text-secondary);
   background-color: transparent;
 }
 .lib-xplat-icon-button.ghost:hover:not(:disabled) {
-  background-color: var(--semantic-surface-neutral-subtle);
+  background-color: var(--semantic-surface-neutral-secondary);
 }
 .lib-xplat-icon-button.ghost:focus-visible {
   outline: 2px solid var(--semantic-interaction-focus-ring);
@@ -85,23 +85,23 @@
 .lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea {
   display: flex;
   align-items: center;
-  border: 1px solid var(--semantic-border-default);
+  border: 1px solid var(--semantic-border-primary);
   border-radius: var(--spacing-radius-md);
   min-height: var(--spacing-control-height-md);
   overflow: hidden;
-  background-color: var(--semantic-surface-neutral-default);
+  background-color: var(--semantic-surface-neutral-primary);
   width: 100%;
   transition: border-color 0.15s, box-shadow 0.15s;
 }
 .lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea:hover:not(.disabled):not(:focus-within) {
-  border-color: var(--semantic-border-strong);
+  border-color: var(--semantic-border-tertiary);
 }
 .lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea:focus-within {
   border-color: var(--semantic-interaction-focus-ring);
   box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
 }
 .lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea:has(> textarea:not(:placeholder-shown)):not(:focus-within) {
-  border-color: var(--semantic-border-strong);
+  border-color: var(--semantic-border-tertiary);
 }
 .lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea.disabled {
   background-color: var(--semantic-surface-neutral-disabled);
@@ -113,7 +113,7 @@
   flex: 1;
   padding: var(--spacing-space-2) var(--spacing-space-4);
   width: 100%;
-  color: var(--semantic-text-subtle);
+  color: var(--semantic-text-secondary);
   resize: none;
   font-size: var(--semantic-typo-label-2-m-size);
   line-height: var(--semantic-typo-label-2-m-lh);
@@ -130,21 +130,21 @@
   width: 100%;
   gap: var(--spacing-space-2);
   padding: var(--spacing-space-3);
-  border: 1px solid var(--semantic-border-default);
+  border: 1px solid var(--semantic-border-primary);
   border-radius: var(--spacing-radius-lg);
-  background-color: var(--semantic-surface-neutral-default);
+  background-color: var(--semantic-surface-neutral-primary);
   transition: border-color 0.15s, box-shadow 0.15s;
 }
 .lib-xplat-chat-input:hover:not(.disabled):not(:focus-within) {
-  border-color: var(--semantic-border-strong);
+  border-color: var(--semantic-border-tertiary);
 }
 .lib-xplat-chat-input:focus-within {
   border-color: var(--semantic-interaction-focus-ring);
   box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
 }
 .lib-xplat-chat-input.disabled {
-  background-color: var(--semantic-surface-neutral-subtle);
-  border-color: var(--semantic-border-default);
+  background-color: var(--semantic-surface-neutral-secondary);
+  border-color: var(--semantic-border-primary);
   cursor: not-allowed;
 }
 .lib-xplat-chat-input .chat-input-textarea {
@@ -158,7 +158,7 @@
   padding: 4px 0;
   font-size: var(--semantic-typo-label-2-m-size);
   line-height: var(--semantic-typo-label-2-m-lh);
-  color: var(--semantic-text-strong);
+  color: var(--semantic-text-primary);
   background: transparent;
 }
 .lib-xplat-chat-input .chat-input-textarea::placeholder {

package/dist/components/ChatInput/index.js

@@ -22,7 +22,6 @@ import { jsx } from "react/jsx-runtime";
 var IconButton = (props) => {
   const {
     icon,
-    className,
     type = "primary",
     size = "md",
     disabled,
@@ -31,7 +30,7 @@ var IconButton = (props) => {
   return /* @__PURE__ */ jsx(
     "button",
     {
-      className: clsx_default("lib-xplat-icon-button", type, size, className),
+      className: clsx_default("lib-xplat-icon-button", type, size),
       disabled,
       ...rest,
       children: icon