@x-plat/design-system 0.5.65 → 0.6.0

package/dist/components/IconButton/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);

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

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

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

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

package/dist/components/IconButton/index.js

@@ -19,7 +19,6 @@ import { jsx } from "react/jsx-runtime";
 var IconButton = (props) => {
   const {
     icon,
-    className,
     type = "primary",
     size = "md",
     disabled,
@@ -28,7 +27,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

package/dist/components/ImageSelector/index.css

@@ -6,7 +6,7 @@
   height: 100%;
   flex-direction: column;
   position: relative;
-  background-color: var(--semantic-surface-neutral-default);
+  background-color: var(--semantic-surface-neutral-primary);
   border-radius: var(--spacing-radius-sm);
   overflow: hidden;
   padding: var(--spacing-space-3);
@@ -15,7 +15,7 @@
   display: none;
 }
 .lib-xplat-imageselector.none-value {
-  border: 1px dashed var(--semantic-border-strong);
+  border: 1px dashed var(--semantic-border-tertiary);
 }
 .lib-xplat-imageselector:hover {
   background-color: var(--semantic-surface-neutral-disabled);
@@ -47,18 +47,18 @@
   cursor: pointer;
 }
 .lib-xplat-imageselector > .content .skeleton > .icon-wrapper {
-  color: var(--semantic-icon-subtle);
+  color: var(--semantic-icon-secondary);
 }
 .lib-xplat-imageselector > .content .skeleton > .label {
   margin-top: var(--spacing-space-1);
   font-size: var(--semantic-typo-caption-1-r-size);
-  color: var(--semantic-text-muted);
+  color: var(--semantic-text-tertiary);
 }
 .lib-xplat-imageselector > .content .skeleton:hover > .icon-wrapper {
-  color: var(--semantic-icon-strong);
+  color: var(--semantic-icon-primary);
 }
 .lib-xplat-imageselector > .content .skeleton:hover > .label {
-  color: var(--semantic-text-subtle);
+  color: var(--semantic-text-secondary);
 }
 .lib-xplat-imageselector > .action-bar {
   position: absolute;
@@ -68,7 +68,7 @@
   display: flex;
   gap: 0.5em;
   font-size: var(--semantic-typo-title-2-m-size);
-  background-color: var(--semantic-surface-neutral-strong);
+  background-color: var(--semantic-surface-neutral-tertiary);
   padding: var(--spacing-space-1) var(--spacing-space-3);
   align-items: center;
   opacity: 0;

package/dist/components/Input/index.css

@@ -7,23 +7,23 @@
 .lib-xplat-input-wrap .lib-xplat-input {
   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);
   overflow: hidden;
-  background-color: var(--semantic-surface-neutral-default);
+  background-color: var(--semantic-surface-neutral-primary);
   padding-right: var(--spacing-space-2);
   width: 100%;
   transition: border-color 0.15s, box-shadow 0.15s;
 }
 .lib-xplat-input-wrap .lib-xplat-input:hover:not(.disabled):not(:focus-within) {
-  border-color: var(--semantic-border-strong);
+  border-color: var(--semantic-border-tertiary);
 }
 .lib-xplat-input-wrap .lib-xplat-input:focus-within {
   border-color: var(--semantic-interaction-focus-ring);
   box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
 }
 .lib-xplat-input-wrap .lib-xplat-input:has(> input:not(:placeholder-shown)):not(:focus-within) {
-  border-color: var(--semantic-border-strong);
+  border-color: var(--semantic-border-tertiary);
 }
 .lib-xplat-input-wrap .lib-xplat-input.sm {
   height: var(--spacing-control-height-sm);
@@ -51,7 +51,7 @@
   padding-left: var(--spacing-space-4);
   padding-right: var(--spacing-space-2);
   width: 100%;
-  color: var(--semantic-text-subtle);
+  color: var(--semantic-text-secondary);
   font-size: inherit;
   font-family: inherit;
 }
@@ -63,7 +63,7 @@
   align-items: center;
   justify-content: center;
   height: 100%;
-  color: var(--semantic-icon-subtle);
+  color: var(--semantic-icon-secondary);
   padding-right: var(--spacing-space-2);
 }
 .lib-xplat-input-wrap .lib-xplat-input > .suffix > .wrapper {
@@ -86,7 +86,7 @@
   user-select: none;
 }
 .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation.default {
-  color: var(--semantic-icon-subtle);
+  color: var(--semantic-icon-secondary);
 }
 .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation.success {
   color: var(--semantic-text-success);

package/dist/components/Modal/index.css

@@ -4,7 +4,7 @@
 }
 .lib-xplat-modal.modal-box {
   border-radius: var(--spacing-radius-lg);
-  background-color: var(--semantic-surface-neutral-default);
+  background-color: var(--semantic-surface-neutral-primary);
   padding: var(--spacing-space-6);
   min-width: min-content;
   max-width: calc(100vw - 32px);

package/dist/components/Pagination/index.css

@@ -37,7 +37,7 @@
   width: var(--spacing-control-height-sm);
   height: var(--spacing-control-height-sm);
   font-size: var(--semantic-typo-caption-1-r-size);
-  color: var(--semantic-text-muted);
+  color: var(--semantic-text-tertiary);
   user-select: none;
 }
 .lib-xplat-pagination .page-btn {
@@ -52,11 +52,11 @@
   background: none;
   font-size: var(--semantic-typo-caption-1-r-size);
   cursor: pointer;
-  color: var(--semantic-text-subtle);
+  color: var(--semantic-text-secondary);
   transition: background-color 0.2s, color 0.2s;
 }
 .lib-xplat-pagination .page-btn:hover:not(:disabled):not(.active) {
-  background-color: var(--semantic-surface-neutral-subtle);
+  background-color: var(--semantic-surface-neutral-secondary);
 }
 .lib-xplat-pagination .page-btn:disabled {
   cursor: not-allowed;

package/dist/components/PopOver/index.css

@@ -11,7 +11,7 @@
   z-index: 1000;
   cursor: default;
   transition: transform 0.2s ease, opacity 0.2s ease;
-  background: var(--semantic-surface-neutral-default);
+  background: var(--semantic-surface-neutral-primary);
   border-radius: var(--spacing-radius-md);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   opacity: 0;

package/dist/components/Progress/index.css

@@ -43,7 +43,7 @@
 .lib-xplat-progress .label {
   font-size: var(--semantic-typo-caption-2-r-size);
   font-weight: 500;
-  color: var(--semantic-text-subtle);
+  color: var(--semantic-text-secondary);
   min-width: 36px;
   text-align: right;
 }

package/dist/components/Radio/index.css

@@ -45,25 +45,25 @@
   line-height: var(--semantic-typo-label-1-m-lh);
 }
 .lib-xplat-radio > .circle {
-  border: 2px solid var(--semantic-border-strong);
+  border: 2px solid var(--semantic-border-tertiary);
   border-radius: 50%;
   display: flex;
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  background-color: var(--semantic-surface-neutral-default);
+  background-color: var(--semantic-surface-neutral-primary);
   transition: border-color 0.12s ease-out, background-color 0.12s ease-out;
 }
 .lib-xplat-radio > .circle > .inner-circle {
   width: var(--spacing-space-3);
   height: var(--spacing-space-3);
-  background-color: var(--semantic-surface-neutral-default);
+  background-color: var(--semantic-surface-neutral-primary);
   border-radius: 50%;
 }
 .lib-xplat-radio:hover > .circle:not(.checked) {
-  border-color: var(--semantic-icon-strong);
-  background-color: var(--semantic-surface-neutral-subtle);
+  border-color: var(--semantic-icon-primary);
+  background-color: var(--semantic-surface-neutral-secondary);
 }
 .lib-xplat-radio.brand > .circle.checked {
   background-color: var(--semantic-surface-brand-default);

package/dist/components/Select/index.css

@@ -35,14 +35,14 @@
   align-items: center;
   justify-content: space-between;
   gap: var(--spacing-space-2);
-  border: 1px solid var(--semantic-border-default);
+  border: 1px solid var(--semantic-border-primary);
   border-radius: var(--spacing-radius-md);
-  background-color: var(--semantic-surface-neutral-default);
-  color: var(--semantic-text-strong);
+  background-color: var(--semantic-surface-neutral-primary);
+  color: var(--semantic-text-primary);
   transition: border-color 0.15s;
 }
 .lib-xplat-select .select-trigger:hover:not(.disabled) {
-  border-color: var(--semantic-border-strong);
+  border-color: var(--semantic-border-tertiary);
 }
 .lib-xplat-select .select-trigger:active:not(.disabled) {
   border-color: var(--semantic-interaction-focus-ring);
@@ -55,7 +55,7 @@
   cursor: not-allowed;
   pointer-events: none;
   background-color: var(--semantic-surface-neutral-disabled);
-  border-color: var(--semantic-border-default);
+  border-color: var(--semantic-border-primary);
   color: var(--semantic-text-disabled);
 }
 .lib-xplat-select .select-trigger.disabled .select-trigger-value.placeholder {
@@ -86,7 +86,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--semantic-icon-subtle);
+  color: var(--semantic-icon-secondary);
   transition: transform 0.2s ease;
 }
 .lib-xplat-select .select-trigger .select-trigger-icon.open {
@@ -100,7 +100,7 @@
   z-index: 1000;
   padding: var(--spacing-space-1) 0;
   border-radius: var(--spacing-radius-md);
-  background-color: var(--semantic-surface-neutral-default);
+  background-color: var(--semantic-surface-neutral-primary);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   cursor: default;
   max-height: 220px;
@@ -153,10 +153,10 @@
   font-weight: var(--semantic-typo-label-1-sb-weight);
 }
 .lib-xplat-select-content .select-item:hover:not(.disabled) {
-  background-color: var(--semantic-surface-neutral-subtle);
+  background-color: var(--semantic-surface-neutral-secondary);
 }
 .lib-xplat-select-content .select-item:focus-visible:not(.disabled) {
-  background-color: var(--semantic-surface-neutral-subtle);
+  background-color: var(--semantic-surface-neutral-secondary);
 }
 .lib-xplat-select-content .select-item.disabled {
   cursor: not-allowed;

package/dist/components/Spinner/index.css

@@ -27,7 +27,7 @@
   backface-visibility: hidden;
 }
 .lib-xplat-spinner .track {
-  stroke: var(--semantic-border-default);
+  stroke: var(--semantic-border-primary);
 }
 .lib-xplat-spinner .indicator {
   stroke-dasharray: 42;

package/dist/components/Steps/index.css

@@ -46,11 +46,11 @@
 .lib-xplat-steps .step-title {
   font-size: var(--semantic-typo-caption-1-r-size);
   font-weight: 500;
-  color: var(--semantic-text-strong);
+  color: var(--semantic-text-primary);
 }
 .lib-xplat-steps .step-description {
   font-size: var(--semantic-typo-caption-2-r-size);
-  color: var(--semantic-text-muted);
+  color: var(--semantic-text-tertiary);
   margin-top: 2px;
 }
 .lib-xplat-steps.brand .step-item.completed .step-circle {
@@ -110,7 +110,7 @@
 }
 .lib-xplat-steps .step-item.pending .step-circle {
   background-color: var(--semantic-surface-neutral-disabled);
-  color: var(--semantic-text-muted);
+  color: var(--semantic-text-tertiary);
 }
 .lib-xplat-steps .step-item.pending .step-title {
   color: var(--semantic-text-disabled);

package/dist/components/Swiper/index.css

@@ -47,7 +47,7 @@
   top: 0;
   left: 0;
   height: 100%;
-  background-color: var(--semantic-text-muted);
+  background-color: var(--semantic-text-tertiary);
   border-radius: 1px;
   transition-property: width;
   transition-timing-function: ease;
@@ -65,11 +65,11 @@
   border: none;
   padding: 0;
   cursor: pointer;
-  background-color: var(--semantic-border-default);
+  background-color: var(--semantic-border-primary);
   transition: background-color 0.2s;
 }
 .lib-xplat-swiper__dot.active {
-  background-color: var(--semantic-text-subtle);
+  background-color: var(--semantic-text-secondary);
 }
 .lib-xplat-swiper__dot:hover:not(.active) {
   background-color: var(--semantic-text-disabled);

package/dist/components/Switch/index.css

@@ -6,8 +6,8 @@
   box-sizing: border-box;
   transition: background-color 0.2s, border-color 0.2s;
   border: 1px solid transparent;
-  background-color: var(--semantic-border-default);
-  border-color: var(--semantic-border-default);
+  background-color: var(--semantic-border-primary);
+  border-color: var(--semantic-border-primary);
 }
 .lib-xplat-switch.sm {
   width: 34px;
@@ -96,7 +96,7 @@
   top: 50%;
   left: 2px;
   transform: translateY(-50%);
-  background-color: var(--semantic-surface-neutral-default);
+  background-color: var(--semantic-surface-neutral-primary);
   border-radius: var(--spacing-radius-full);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
   transition: left 0.25s;

package/dist/components/Tab/index.css

@@ -26,7 +26,7 @@
 }
 .lib-xplat-tab.type-default {
   width: 100%;
-  background-color: var(--semantic-surface-neutral-strong);
+  background-color: var(--semantic-surface-neutral-tertiary);
   border-radius: var(--spacing-radius-md);
 }
 .lib-xplat-tab.type-default > .tab-item {
@@ -38,7 +38,7 @@
   justify-content: center;
   cursor: pointer;
   white-space: nowrap;
-  border-right: 1px solid var(--semantic-border-strong);
+  border-right: 1px solid var(--semantic-border-tertiary);
   color: var(--semantic-text-inverse);
 }
 .lib-xplat-tab.type-default > .tab-item:last-child {
@@ -49,7 +49,7 @@
 }
 .lib-xplat-tab.type-toggle {
   width: 100%;
-  border-bottom: 1px solid var(--semantic-border-default);
+  border-bottom: 1px solid var(--semantic-border-primary);
   gap: var(--spacing-space-6);
 }
 .lib-xplat-tab.type-toggle > .tab-item {
@@ -67,7 +67,7 @@
   border: none;
   cursor: pointer;
   transition: color 0.2s;
-  color: var(--semantic-text-muted);
+  color: var(--semantic-text-tertiary);
 }
 .lib-xplat-tab.type-toggle > .tab-item.active {
   color: var(--semantic-surface-brand-default);

package/dist/components/Table/index.css

@@ -46,7 +46,7 @@
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.table-bottom-border,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.table-bottom-border {
-  border-bottom: 1px solid var(--semantic-border-default);
+  border-bottom: 1px solid var(--semantic-border-primary);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.primary,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.primary {
@@ -74,26 +74,26 @@
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.secondary,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.secondary {
-  background-color: var(--semantic-surface-neutral-default);
+  background-color: var(--semantic-surface-neutral-primary);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.secondary > td,
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.secondary > th,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.secondary > td,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.secondary > th {
-  background-color: var(--semantic-surface-neutral-default);
-  color: var(--semantic-text-strong);
+  background-color: var(--semantic-surface-neutral-primary);
+  color: var(--semantic-text-primary);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.secondary > td.cell-hover:hover,
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.secondary > th.cell-hover:hover,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.secondary > td.cell-hover:hover,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.secondary > th.cell-hover:hover {
-  background-color: var(--semantic-surface-neutral-subtle);
+  background-color: var(--semantic-surface-neutral-secondary);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.secondary.hover:hover > td,
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.secondary.hover:hover > th,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.secondary.hover:hover > td,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.secondary.hover:hover > th {
-  background-color: var(--semantic-surface-neutral-subtle);
+  background-color: var(--semantic-surface-neutral-secondary);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.success,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.success {
@@ -151,7 +151,7 @@
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.warning > th,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.warning > td,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.warning > th {
-  color: var(--semantic-text-strong);
+  color: var(--semantic-text-primary);
   background-color: var(--semantic-surface-warning-default);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.warning > td.cell-hover:hover,
@@ -164,7 +164,7 @@
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.warning.hover:hover > th,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.warning.hover:hover > td,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.warning.hover:hover > th {
-  color: var(--semantic-text-strong);
+  color: var(--semantic-text-primary);
   background-color: var(--semantic-surface-warning-strong);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.info,
@@ -210,14 +210,14 @@
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical.cat-neutral,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.categorical.cat-neutral {
-  background-color: var(--semantic-surface-neutral-strong);
+  background-color: var(--semantic-surface-neutral-tertiary);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical.cat-neutral > td,
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical.cat-neutral > th,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.categorical.cat-neutral > td,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.categorical.cat-neutral > th {
   color: var(--semantic-text-inverse);
-  background-color: var(--semantic-surface-neutral-strong);
+  background-color: var(--semantic-surface-neutral-tertiary);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical.cat-neutral.hover:hover > td,
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical.cat-neutral.hover:hover > th,

package/dist/components/Tag/index.css

@@ -22,9 +22,9 @@
   font-size: var(--semantic-typo-caption-1-r-size);
 }
 .lib-xplat-tag.neutral {
-  color: var(--semantic-text-muted);
-  border-color: var(--semantic-border-default);
-  background-color: var(--semantic-surface-neutral-subtle);
+  color: var(--semantic-text-tertiary);
+  border-color: var(--semantic-border-primary);
+  background-color: var(--semantic-surface-neutral-secondary);
 }
 .lib-xplat-tag.categorical.cat-1 {
   color: var(--semantic-categorical-1-text);

package/dist/components/TextArea/index.css

@@ -6,10 +6,10 @@
 }
 .lib-xplat-textarea-wrap .lib-xplat-textarea {
   width: 100%;
-  border: 1px solid var(--semantic-border-default);
+  border: 1px solid var(--semantic-border-primary);
   border-radius: var(--spacing-radius-md);
-  background-color: var(--semantic-surface-neutral-default);
-  color: var(--semantic-text-subtle);
+  background-color: var(--semantic-surface-neutral-primary);
+  color: var(--semantic-text-secondary);
   font-family: inherit;
   outline: none;
   transition: border-color 0.15s, box-shadow 0.15s;
@@ -30,14 +30,14 @@
   line-height: var(--semantic-typo-label-1-m-lh);
 }
 .lib-xplat-textarea-wrap .lib-xplat-textarea:hover:not(.disabled):not(:focus) {
-  border-color: var(--semantic-border-strong);
+  border-color: var(--semantic-border-tertiary);
 }
 .lib-xplat-textarea-wrap .lib-xplat-textarea:focus {
   border-color: var(--semantic-interaction-focus-ring);
   box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
 }
 .lib-xplat-textarea-wrap .lib-xplat-textarea:not(:placeholder-shown):not(:focus) {
-  border-color: var(--semantic-border-strong);
+  border-color: var(--semantic-border-tertiary);
 }
 .lib-xplat-textarea-wrap .lib-xplat-textarea.disabled {
   background-color: var(--semantic-surface-neutral-disabled);

package/dist/components/Tooltip/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 {

package/dist/components/Video/index.css

@@ -5,7 +5,7 @@
   height: 100%;
   border-radius: var(--spacing-radius-sm);
   overflow: hidden;
-  background-color: var(--semantic-surface-neutral-strong);
+  background-color: var(--semantic-surface-neutral-tertiary);
 }
 .lib-xplat-video > video {
   display: block;

package/dist/components/index.cjs

@@ -1675,7 +1675,6 @@ var import_jsx_runtime301 = require("react/jsx-runtime");
 var Button = (props) => {
   const {
     children,
-    className,
     type = "primary",
     size = "md",
     disabled,
@@ -1684,7 +1683,7 @@ var Button = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
     "button",
     {
-      className: clsx_default("lib-xplat-button", type, size, className),
+      className: clsx_default("lib-xplat-button", type, size),
       disabled,
       ...rest,
       children
@@ -2853,7 +2852,6 @@ var import_jsx_runtime307 = require("react/jsx-runtime");
 var IconButton = (props) => {
   const {
     icon,
-    className,
     type = "primary",
     size = "md",
     disabled,
@@ -2862,7 +2860,7 @@ var IconButton = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime307.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