sellmate-design-system-react 8.1.0 → 9.0.0-beta.2

package/dist/styles.css

@@ -194,6 +194,7 @@
     --color-fg-subtleCool: #025497;
     --color-fg-deep: #004290;
     --color-fg-success: #00973C;
+    --color-fg-successLight: #12B553;
     --color-fg-dangerLight: #FB4444;
     --color-fg-accent: #0075FF;
     --color-fg-accentLight: #64ABFF;
@@ -742,6 +743,9 @@
   .mx-3 {
     margin-inline: calc(var(--spacing) * 3);
   }
+  .mx-\[calc\(12px-var\(--cmp-chipFilter-chip-group\)\)\] {
+    margin-inline: calc(12px - var(--cmp-chipFilter-chip-group));
+  }
   .my-auto {
     margin-block: auto;
   }
@@ -763,6 +767,9 @@
   .mt-9 {
     margin-top: calc(var(--spacing) * 9);
   }
+  .mt-\[2px\] {
+    margin-top: 2px;
+  }
   .mt-\[8px\] {
     margin-top: 8px;
   }
@@ -811,6 +818,9 @@
   .ml-\[220px\] {
     margin-left: 220px;
   }
+  .ml-\[calc\(12px-var\(--cmp-chipFilter-chip-group\)\)\] {
+    margin-left: calc(12px - var(--cmp-chipFilter-chip-group));
+  }
   .ml-auto {
     margin-left: auto;
   }
@@ -851,6 +861,10 @@
     width: var(--cmp-tree-item-arrow-icon);
     height: var(--cmp-tree-item-arrow-icon);
   }
+  .size-\[16px\] {
+    width: 16px;
+    height: 16px;
+  }
   .size-\[24px\] {
     width: 24px;
     height: 24px;
@@ -859,6 +873,9 @@
     width: 100%;
     height: 100%;
   }
+  .h-\(--cmp-pageHeader-bar-height\) {
+    height: var(--cmp-pageHeader-bar-height);
+  }
   .h-\(--cmp-sectionHeaderCard-topBorder-thickness\) {
     height: var(--cmp-sectionHeaderCard-topBorder-thickness);
   }
@@ -910,9 +927,6 @@
   .h-\[56px\] {
     height: 56px;
   }
-  .h-\[80px\] {
-    height: 80px;
-  }
   .h-\[80vh\] {
     height: 80vh;
   }
@@ -940,6 +954,9 @@
   .h-\[364px\] {
     height: 364px;
   }
+  .h-\[420px\] {
+    height: 420px;
+  }
   .h-\[600px\] {
     height: 600px;
   }
@@ -1009,6 +1026,12 @@
   .h-sd-48 {
     height: var(--spacing-sd-48);
   }
+  .max-h-\[220px\] {
+    max-height: 220px;
+  }
+  .max-h-\[240px\] {
+    max-height: 240px;
+  }
   .max-h-\[calc\(100dvh-48px\)\] {
     max-height: calc(100dvh - 48px);
   }
@@ -1045,6 +1068,9 @@
   .min-h-\[328px\] {
     min-height: 328px;
   }
+  .min-h-\[364px\] {
+    min-height: 364px;
+  }
   .min-h-\[min\(320px\,calc\(100dvh-48px\)\)\] {
     min-height: min(320px, calc(100dvh - 48px));
   }
@@ -1105,9 +1131,6 @@
   .w-\[61px\] {
     width: 61px;
   }
-  .w-\[80px\] {
-    width: 80px;
-  }
   .w-\[200px\] {
     width: 200px;
   }
@@ -1204,15 +1227,18 @@
   .max-w-\[calc\(100dvw-48px\)\] {
     max-width: calc(100dvw - 48px);
   }
+  .max-w-\[var\(--radix-dropdown-menu-content-available-width\)\] {
+    max-width: var(--radix-dropdown-menu-content-available-width);
+  }
+  .max-w-\[var\(--radix-popover-content-available-width\)\] {
+    max-width: var(--radix-popover-content-available-width);
+  }
   .max-w-full {
     max-width: 100%;
   }
   .max-w-md {
     max-width: var(--container-md);
   }
-  .min-w-\(--radix-popover-trigger-width\) {
-    min-width: var(--radix-popover-trigger-width);
-  }
   .min-w-0 {
     min-width: 0;
   }
@@ -1228,17 +1254,26 @@
   .min-w-\[160px\] {
     min-width: 160px;
   }
+  .min-w-\[180px\] {
+    min-width: 180px;
+  }
   .min-w-\[calc\(var\(--cmp-pagination-height\)\*2\+var\(--cmp-pagination-move-gap\)\)\] {
     min-width: calc(var(--cmp-pagination-height) * 2 + var(--cmp-pagination-move-gap));
   }
+  .min-w-\[min\(160px\,var\(--radix-popover-content-available-width\)\)\] {
+    min-width: min(160px, var(--radix-popover-content-available-width));
+  }
   .min-w-\[min\(480px\,calc\(100dvw-48px\)\)\] {
     min-width: min(480px, calc(100dvw - 48px));
   }
   .min-w-\[min\(520px\,calc\(100dvw-48px\)\)\] {
     min-width: min(520px, calc(100dvw - 48px));
   }
-  .min-w-\[var\(--radix-dropdown-menu-trigger-width\)\] {
-    min-width: var(--radix-dropdown-menu-trigger-width);
+  .min-w-\[min\(var\(--radix-dropdown-menu-trigger-width\)\,var\(--radix-dropdown-menu-content-available-width\)\)\] {
+    min-width: min(var(--radix-dropdown-menu-trigger-width), var(--radix-dropdown-menu-content-available-width));
+  }
+  .min-w-\[min\(var\(--radix-popover-trigger-width\)\,var\(--radix-popover-content-available-width\)\)\] {
+    min-width: min(var(--radix-popover-trigger-width), var(--radix-popover-content-available-width));
   }
   .min-w-px {
     min-width: 1px;
@@ -1441,6 +1476,12 @@
   .gap-\(--cmp-listItem-gap\) {
     gap: var(--cmp-listItem-gap);
   }
+  .gap-\(--cmp-pageHeader-gap\) {
+    gap: var(--cmp-pageHeader-gap);
+  }
+  .gap-\(--cmp-pageHeader-plain-title-gap\) {
+    gap: var(--cmp-pageHeader-plain-title-gap);
+  }
   .gap-\(--cmp-sectionHeaderCard-header-gap\) {
     gap: var(--cmp-sectionHeaderCard-header-gap);
   }
@@ -1507,6 +1548,9 @@
   .gap-\[var\(--\.\.\.\)\] {
     gap: var(--...);
   }
+  .gap-\[var\(--chipfilter-bar-gap\)\] {
+    gap: var(--chipfilter-bar-gap);
+  }
   .gap-\[var\(--cmp-callout-body-gap\)\] {
     gap: var(--cmp-callout-body-gap);
   }
@@ -1522,6 +1566,18 @@
   .gap-\[var\(--cmp-chip-gap\)\] {
     gap: var(--cmp-chip-gap);
   }
+  .gap-\[var\(--cmp-chipFilter-addButton-gap\)\] {
+    gap: var(--cmp-chipFilter-addButton-gap);
+  }
+  .gap-\[var\(--cmp-chipFilter-chip-group\)\] {
+    gap: var(--cmp-chipFilter-chip-group);
+  }
+  .gap-\[var\(--cmp-chipFilter-listbox-bottom-gap\)\] {
+    gap: var(--cmp-chipFilter-listbox-bottom-gap);
+  }
+  .gap-\[var\(--cmp-chipFilter-listbox-top-gap\)\] {
+    gap: var(--cmp-chipFilter-listbox-top-gap);
+  }
   .gap-\[var\(--cmp-datepicker-calendar-day-dot-gap\)\] {
     gap: var(--cmp-datepicker-calendar-day-dot-gap);
   }
@@ -1662,6 +1718,9 @@
   .self-center {
     align-self: center;
   }
+  .self-start {
+    align-self: flex-start;
+  }
   .self-stretch {
     align-self: stretch;
   }
@@ -1742,6 +1801,9 @@
   .rounded-\[var\(--cmp-datepicker-sm-radius\)\] {
     border-radius: var(--cmp-datepicker-sm-radius);
   }
+  .rounded-\[var\(--cmp-ghostButton-radius-sm\)\] {
+    border-radius: var(--cmp-ghostButton-radius-sm);
+  }
   .rounded-\[var\(--cmp-guide-button-radius\)\] {
     border-radius: var(--cmp-guide-button-radius);
   }
@@ -1934,6 +1996,9 @@
   .border-\(--cmp-listItem-bordered-border-selected\) {
     border-color: var(--cmp-listItem-bordered-border-selected);
   }
+  .border-\(--cmp-pageHeader-bar-border\) {
+    border-color: var(--cmp-pageHeader-bar-border);
+  }
   .border-\(--cmp-sectionHeaderCard-header-border\) {
     border-color: var(--cmp-sectionHeaderCard-header-border);
   }
@@ -2006,6 +2071,9 @@
   .border-\[color\:var\(--sys-color-border-default\)\] {
     border-color: var(--sys-color-border-default);
   }
+  .border-\[color\:var\(--sys-color-field-border-default\)\] {
+    border-color: var(--sys-color-field-border-default);
+  }
   .border-\[var\(--cmp-table-border-color\)\] {
     border-color: var(--cmp-table-border-color);
   }
@@ -2045,6 +2113,9 @@
   .border-transparent {
     border-color: transparent;
   }
+  .bg-\(--cmp-image-bg\) {
+    background-color: var(--cmp-image-bg);
+  }
   .bg-\(--cmp-listBox-bg\) {
     background-color: var(--cmp-listBox-bg);
   }
@@ -2084,6 +2155,9 @@
   .bg-\(--cmp-listItem-bg-selected\) {
     background-color: var(--cmp-listItem-bg-selected);
   }
+  .bg-\(--cmp-pageHeader-bar-bg\) {
+    background-color: var(--cmp-pageHeader-bar-bg);
+  }
   .bg-\(--cmp-sectionHeaderCard-header-bg\) {
     background-color: var(--cmp-sectionHeaderCard-header-bg);
   }
@@ -2138,6 +2212,12 @@
   .bg-\[var\(--cb-bg\)\] {
     background-color: var(--cb-bg);
   }
+  .bg-\[var\(--chipfilter-bar-bg\)\] {
+    background-color: var(--chipfilter-bar-bg);
+  }
+  .bg-\[var\(--chipfilter-bar-border\)\] {
+    background-color: var(--chipfilter-bar-border);
+  }
   .bg-\[var\(--cmp-checkbox-bg-disabled\)\] {
     background-color: var(--cmp-checkbox-bg-disabled);
   }
@@ -2147,6 +2227,9 @@
   .bg-\[var\(--cmp-checkbox-unchecked-bg-default\)\] {
     background-color: var(--cmp-checkbox-unchecked-bg-default);
   }
+  .bg-\[var\(--cmp-chipFilter-addButton-bg\)\] {
+    background-color: var(--cmp-chipFilter-addButton-bg);
+  }
   .bg-\[var\(--cmp-datepicker-bg-default\)\] {
     background-color: var(--cmp-datepicker-bg-default);
   }
@@ -2234,6 +2317,9 @@
   .bg-\[var\(--sys-color-divider-default\)\] {
     background-color: var(--sys-color-divider-default);
   }
+  .bg-\[var\(--sys-color-field-bg-default\)\] {
+    background-color: var(--sys-color-field-bg-default);
+  }
   .bg-bg-frame {
     background-color: var(--color-bg-frame);
   }
@@ -2318,6 +2404,9 @@
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
+  .p-10 {
+    padding: calc(var(--spacing) * 10);
+  }
   .p-16 {
     padding: calc(var(--spacing) * 16);
   }
@@ -2393,6 +2482,9 @@
   .px-\(--cmp-listDraggableItem-paddingX\) {
     padding-inline: var(--cmp-listDraggableItem-paddingX);
   }
+  .px-\(--cmp-pageHeader-paddingX\) {
+    padding-inline: var(--cmp-pageHeader-paddingX);
+  }
   .px-\(--cmp-popup-header-paddingX\) {
     padding-inline: var(--cmp-popup-header-paddingX);
   }
@@ -2426,6 +2518,9 @@
   .px-\[32px\] {
     padding-inline: 32px;
   }
+  .px-\[var\(--chipfilter-bar-padding-x\)\] {
+    padding-inline: var(--chipfilter-bar-padding-x);
+  }
   .px-\[var\(--cmp-callout-body-paddingX\)\] {
     padding-inline: var(--cmp-callout-body-paddingX);
   }
@@ -2435,6 +2530,18 @@
   .px-\[var\(--cmp-chip-paddingX\)\] {
     padding-inline: var(--cmp-chip-paddingX);
   }
+  .px-\[var\(--cmp-chipFilter-addButton-paddingX\)\] {
+    padding-inline: var(--cmp-chipFilter-addButton-paddingX);
+  }
+  .px-\[var\(--cmp-chipFilter-chip-paddingX\)\] {
+    padding-inline: var(--cmp-chipFilter-chip-paddingX);
+  }
+  .px-\[var\(--cmp-chipFilter-listbox-bottom-paddingX\)\] {
+    padding-inline: var(--cmp-chipFilter-listbox-bottom-paddingX);
+  }
+  .px-\[var\(--cmp-chipFilter-listbox-top-paddingX\)\] {
+    padding-inline: var(--cmp-chipFilter-listbox-top-paddingX);
+  }
   .px-\[var\(--cmp-datepicker-calendar-time-paddingX\)\] {
     padding-inline: var(--cmp-datepicker-calendar-time-paddingX);
   }
@@ -2507,6 +2614,9 @@
   .py-\(--cmp-listItem-paddingY-normal\) {
     padding-block: var(--cmp-listItem-paddingY-normal);
   }
+  .py-\(--cmp-pageHeader-bar-paddingY\) {
+    padding-block: var(--cmp-pageHeader-bar-paddingY);
+  }
   .py-\(--cmp-popup-header-paddingY\) {
     padding-block: var(--cmp-popup-header-paddingY);
   }
@@ -2531,9 +2641,21 @@
   .py-\[40px\] {
     padding-block: 40px;
   }
+  .py-\[var\(--chipfilter-bar-padding-y\)\] {
+    padding-block: var(--chipfilter-bar-padding-y);
+  }
   .py-\[var\(--cmp-callout-body-paddingY\)\] {
     padding-block: var(--cmp-callout-body-paddingY);
   }
+  .py-\[var\(--cmp-chipFilter-listbox-bottom-paddingY\)\] {
+    padding-block: var(--cmp-chipFilter-listbox-bottom-paddingY);
+  }
+  .py-\[var\(--cmp-chipFilter-listbox-list-paddingY\)\] {
+    padding-block: var(--cmp-chipFilter-listbox-list-paddingY);
+  }
+  .py-\[var\(--cmp-chipFilter-listbox-top-paddingY\)\] {
+    padding-block: var(--cmp-chipFilter-listbox-top-paddingY);
+  }
   .py-\[var\(--cmp-datepicker-calendar-day-dot-paddingY\)\] {
     padding-block: var(--cmp-datepicker-calendar-day-dot-paddingY);
   }
@@ -2570,9 +2692,15 @@
   .py-sd-24 {
     padding-block: var(--spacing-sd-24);
   }
+  .pt-\(--cmp-pageHeader-plain-paddingTop\) {
+    padding-top: var(--cmp-pageHeader-plain-paddingTop);
+  }
   .pt-3 {
     padding-top: calc(var(--spacing) * 3);
   }
+  .pt-\[var\(--cmp-chipFilter-listbox-list-paddingY\)\] {
+    padding-top: var(--cmp-chipFilter-listbox-list-paddingY);
+  }
   .pt-sd-16 {
     padding-top: var(--spacing-sd-16);
   }
@@ -2594,6 +2722,15 @@
   .pr-\[var\(--cmp-overlay-header-paddingX\)\] {
     padding-right: var(--cmp-overlay-header-paddingX);
   }
+  .pb-\(--cmp-pageHeader-plain-paddingBottom\) {
+    padding-bottom: var(--cmp-pageHeader-plain-paddingBottom);
+  }
+  .pb-\[4px\] {
+    padding-bottom: 4px;
+  }
+  .pb-\[var\(--cmp-chipFilter-listbox-list-paddingY\)\] {
+    padding-bottom: var(--cmp-chipFilter-listbox-list-paddingY);
+  }
   .pb-\[var\(--cmp-modal-action-body-paddingBottom\)\] {
     padding-bottom: var(--cmp-modal-action-body-paddingBottom);
   }
@@ -2606,6 +2743,9 @@
   .pl-\(--cmp-guide-contents-depth-paddingLeft\) {
     padding-left: var(--cmp-guide-contents-depth-paddingLeft);
   }
+  .pl-\(--cmp-pageHeader-title-paddingLeft\) {
+    padding-left: var(--cmp-pageHeader-title-paddingLeft);
+  }
   .pl-\[16px\] {
     padding-left: 16px;
   }
@@ -2862,6 +3002,12 @@
   .text-\(--cmp-listItem-text-selected\) {
     color: var(--cmp-listItem-text-selected);
   }
+  .text-\(--cmp-pageHeader-subtitle-text\) {
+    color: var(--cmp-pageHeader-subtitle-text);
+  }
+  .text-\(--cmp-pageHeader-title-text\) {
+    color: var(--cmp-pageHeader-title-text);
+  }
   .text-\(--cmp-tree-item-text-default\) {
     color: var(--cmp-tree-item-text-default);
   }
@@ -2898,6 +3044,9 @@
   .text-\[\#0A0A0A\] {
     color: #0A0A0A;
   }
+  .text-\[\#6b7280\] {
+    color: #6b7280;
+  }
   .text-\[\#333\] {
     color: #333;
   }
@@ -2997,6 +3146,9 @@
   .text-\[color\:var\(--sys-color-fg-secondary\)\] {
     color: var(--sys-color-fg-secondary);
   }
+  .text-\[color\:var\(--sys-color-field-text-default\)\] {
+    color: var(--sys-color-field-text-default);
+  }
   .text-\[var\(--cmp-field-hint-color\)\] {
     color: var(--cmp-field-hint-color);
   }
@@ -3105,6 +3257,9 @@
   .opacity-40 {
     opacity: 40%;
   }
+  .opacity-50 {
+    opacity: 50%;
+  }
   .opacity-60 {
     opacity: 60%;
   }
@@ -3143,6 +3298,10 @@
     --tw-shadow: var(--shadow-spread-md);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-floating {
+    --tw-shadow: 0px 0px 24px -6px var(--tw-shadow-color, rgba(34,34,34,0.12)), 4px 8px 16px -4px var(--tw-shadow-color, rgba(34,34,34,0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-none {
     --tw-shadow: 0 0 #0000;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3167,6 +3326,9 @@
     --tw-blur: blur(8px);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .filter {
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3258,6 +3420,13 @@
   .\[length\:var\(--x\)\] {
     length: var(--x);
   }
+  .group-hover\:visible {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        visibility: visible;
+      }
+    }
+  }
   .group-hover\:bg-\(--cmp-splitter-border-color\) {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -3265,6 +3434,14 @@
       }
     }
   }
+  .group-hover\:font-bold {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        --tw-font-weight: var(--font-weight-bold);
+        font-weight: var(--font-weight-bold);
+      }
+    }
+  }
   .group-hover\/filepicker\:text-\[color\:var\(--cmp-filepicker-text-default\)\] {
     &:is(:where(.group\/filepicker):hover *) {
       @media (hover: hover) {
@@ -3744,6 +3921,14 @@
       }
     }
   }
+  .hover\:font-bold {
+    &:hover {
+      @media (hover: hover) {
+        --tw-font-weight: var(--font-weight-bold);
+        font-weight: var(--font-weight-bold);
+      }
+    }
+  }
   .hover\:\!text-\[color\:var\(--cmp-radioButton-content-hover\)\] {
     &:hover {
       @media (hover: hover) {
@@ -4232,6 +4417,17 @@
       border-color: var(--color-border-strong);
     }
   }
+  .\[\&\>\*\]\:border-b {
+    &>* {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 1px;
+    }
+  }
+  .\[\&\>\*\]\:border-\(--cmp-listItem-border-default\) {
+    &>* {
+      border-color: var(--cmp-listItem-border-default);
+    }
+  }
   .\[\&\>\*\:not\(\:last-child\)\]\:border-b {
     &>*:not(:last-child) {
       border-bottom-style: var(--tw-border-style);
@@ -4363,6 +4559,7 @@
   --sys-color-fg-subtleCool: #025497;
   --sys-color-fg-deep: #004290;
   --sys-color-fg-success: #00973C;
+  --sys-color-fg-successLight: #12B553;
   --sys-color-fg-dangerLight: #FB4444;
   --sys-color-fg-accent: #0075FF;
   --sys-color-fg-accentLight: #64ABFF;
@@ -4516,8 +4713,10 @@
   --cmp-switch-bg-disabled-on: #BBDAFF;
   --cmp-switch-bg-disabled-off: #E1E1E1;
   --cmp-switch-gap: 6px;
-  --cmp-toggle-height: 28px;
-  --cmp-toggle-paddingX: 12px;
+  --cmp-toggle-xs-height: 24px;
+  --cmp-toggle-xs-paddingX: 8px;
+  --cmp-toggle-sm-height: 28px;
+  --cmp-toggle-sm-paddingX: 12px;
   --cmp-toggle-radius: 9999px;
   --cmp-toggle-border-width: 1px;
   --cmp-toggle-border-default: #CCCCCC;
@@ -5047,9 +5246,10 @@
   --cmp-progress-circular-gap: 8px;
   --cmp-progress-color-track: #EEEEEE;
   --cmp-progress-color-label: #555555;
-  --cmp-progress-active-color: #2D8DFF;
-  --cmp-progress-success-color: #12B553;
-  --cmp-progress-error-color: #FB4444;
+  --cmp-progress-color-active: #2D8DFF;
+  --cmp-progress-color-success: #12B553;
+  --cmp-progress-color-error: #FB4444;
+  --cmp-progress-color-neutral: #D8D8D8;
   --cmp-progress-bar-text: #FFFFFF;
   --cmp-progress-inverse-color: #FFFFFF;
   --cmp-progress-inverse-opacity: 40%;
@@ -5358,6 +5558,8 @@
   --cmp-splitter-border-width: 4px;
   --cmp-splitter-border-padding: 4px;
   --cmp-splitter-border-color: #64ABFF;
+  --cmp-image-bg: #F9F9F9;
+  --cmp-image-icon: #D8D8D8;
 }
 @layer base {
   body {

package/dist/theme.css

@@ -154,6 +154,7 @@
   --color-fg-subtleCool: #025497;
   --color-fg-deep: #004290;
   --color-fg-success: #00973C;
+  --color-fg-successLight: #12B553;
   --color-fg-dangerLight: #FB4444;
   --color-fg-accent: #0075FF;
   --color-fg-accentLight: #64ABFF;
@@ -453,6 +454,7 @@
   --sys-color-fg-subtleCool: #025497;
   --sys-color-fg-deep: #004290;
   --sys-color-fg-success: #00973C;
+  --sys-color-fg-successLight: #12B553;
   --sys-color-fg-dangerLight: #FB4444;
   --sys-color-fg-accent: #0075FF;
   --sys-color-fg-accentLight: #64ABFF;
@@ -608,8 +610,10 @@
   --cmp-switch-bg-disabled-on: #BBDAFF;
   --cmp-switch-bg-disabled-off: #E1E1E1;
   --cmp-switch-gap: 6px;
-  --cmp-toggle-height: 28px;
-  --cmp-toggle-paddingX: 12px;
+  --cmp-toggle-xs-height: 24px;
+  --cmp-toggle-xs-paddingX: 8px;
+  --cmp-toggle-sm-height: 28px;
+  --cmp-toggle-sm-paddingX: 12px;
   --cmp-toggle-radius: 9999px;
   --cmp-toggle-border-width: 1px;
   --cmp-toggle-border-default: #CCCCCC;
@@ -1139,9 +1143,10 @@
   --cmp-progress-circular-gap: 8px;
   --cmp-progress-color-track: #EEEEEE;
   --cmp-progress-color-label: #555555;
-  --cmp-progress-active-color: #2D8DFF;
-  --cmp-progress-success-color: #12B553;
-  --cmp-progress-error-color: #FB4444;
+  --cmp-progress-color-active: #2D8DFF;
+  --cmp-progress-color-success: #12B553;
+  --cmp-progress-color-error: #FB4444;
+  --cmp-progress-color-neutral: #D8D8D8;
   --cmp-progress-bar-text: #FFFFFF;
   --cmp-progress-inverse-color: #FFFFFF;
   --cmp-progress-inverse-opacity: 40%;
@@ -1450,6 +1455,8 @@
   --cmp-splitter-border-width: 4px;
   --cmp-splitter-border-padding: 4px;
   --cmp-splitter-border-color: #64ABFF;
+  --cmp-image-bg: #F9F9F9;
+  --cmp-image-icon: #D8D8D8;
 }
 
 /* 전역 스크롤바 — overflow(auto/scroll)로 스크롤이 생기는 모든 요소에 SScrollArea 기본 스크롤바를 자동 적용.

package/eslint/scale.gen.mjs

@@ -13,4 +13,4 @@ export const RADIUS = ["2","4","6","8","full","control-sm","control-md","feedbac
 export const TYPO_PRESETS = ["typo-body-lg-bold","typo-body-lg-default","typo-body-lg-medium","typo-body-md-bold","typo-body-md-default","typo-body-md-medium","typo-body-sm-bold","typo-body-sm-default","typo-body-sm-medium","typo-body-xs-default","typo-control-lg","typo-control-md-default","typo-control-md-underline","typo-control-sm-default","typo-control-sm-underline","typo-control-xs-bold","typo-control-xs-default","typo-control-xs-medium","typo-control-xs-underline","typo-feedback-md-bold","typo-feedback-md-medium","typo-feedback-md-underline","typo-feedback-sm-bold","typo-feedback-sm-medium","typo-feedback-sm-regular","typo-feedback-sm-underline","typo-feedback-xs","typo-field-lg-bold","typo-field-lg-default","typo-field-lg-medium","typo-field-md-bold","typo-field-md-default","typo-field-md-medium","typo-field-sm-bold","typo-field-sm-default","typo-field-sm-medium","typo-field-xs-default","typo-heading-lg","typo-heading-md","typo-heading-sm","typo-heading-xs","typo-heading-xxs","typo-item-md-default","typo-item-md-selected","typo-item-sm-default","typo-item-sm-selected","typo-navigation-lg-medium","typo-navigation-lg-semibold","typo-navigation-md-bold","typo-navigation-sm-bold","typo-navigation-sm-default","typo-navigation-sm-medium","typo-navigation-xs-bold","typo-navigation-xs-medium","typo-table-accent","typo-table-body","typo-table-header"];
 
 /** 색상 유틸리티 키 (text-*, bg-*, border-* 공통) */
-export const COLORS = ["bg-accent","bg-accentBright","bg-accentFaint","bg-accentLight","bg-brand","bg-caution","bg-danger","bg-dangerLight","bg-deep","bg-frame","bg-neutralBright","bg-neutralLight","bg-progress","bg-screen","bg-subtle","bg-success","bg-successLight","bg-tableHeader","bg-warning","black","blue-strong","blue-subtle","border-accent","border-accentLight","border-bold","border-danger","border-default","border-strong","border-success","border-warning","brilliantblue-05","brilliantblue-10","brilliantblue-20","brilliantblue-25","brilliantblue-40","brilliantblue-50","brilliantblue-60","brilliantblue-70","brilliantblue-75","brilliantblue-80","brilliantblue-85","brilliantblue-90","brilliantblue-95","brilliantblue-99","control-bg-inverseHover","danger-15","danger-20","danger-30","danger-45","danger-60","danger-70","danger-75","danger-80","danger-85","danger-90","danger-95","danger-99","danger-strong","danger-subtle","darkblue-strong","darkblue-subtle","disabled-bg","disabled-border","disabled-icon","disabled-text","divider-default","fg-accent","fg-accentLight","fg-brand","fg-danger","fg-dangerLight","fg-deep","fg-inverse","fg-primary","fg-quaternary","fg-secondary","fg-subtleCool","fg-subtleWarm","fg-success","fg-tertiary","fg-warning","field-bg-default","field-bg-hover","field-bg-readOnly","field-border-danger","field-border-default","field-border-focus","field-border-hover","field-border-success","field-icon-default","field-text-default","field-text-placeholder","field-text-readOnly","green-15","green-25","green-45","green-55","green-65","green-70","green-75","green-80","green-85","green-90","green-95","green-99","green-strong","green-subtle","grey-05","grey-10","grey-20","grey-25","grey-30","grey-35","grey-45","grey-50","grey-55","grey-60","grey-65","grey-70","grey-80","grey-85","grey-90","grey-95","grey-strong","grey-subtle","indigo-strong","indigo-subtle","lightblue-strong","lightblue-subtle","link-accent","navigation-gnb-bg-dark","oceanblue-15","oceanblue-25","oceanblue-50","oceanblue-60","oceanblue-65","oceanblue-70","oceanblue-75","oceanblue-80","oceanblue-85","oceanblue-90","oceanblue-95","oceanblue-99","olive-05","olive-10","olive-15","olive-20","olive-30","olive-45","olive-55","olive-65","olive-70","olive-80","olive-90","olive-95","orange-10","orange-20","orange-35","orange-45","orange-55","orange-60","orange-65","orange-75","orange-85","orange-90","orange-95","orange-99","orange-strong","orange-subtle","primary-05","primary-10","primary-20","primary-25","primary-40","primary-50","primary-60","primary-70","primary-75","primary-80","primary-85","primary-90","primary-95","primary-99","red-15","red-20","red-30","red-45","red-60","red-70","red-75","red-80","red-85","red-90","red-95","red-99","red-strong","red-subtle","steelblue-10","steelblue-25","steelblue-45","steelblue-60","steelblue-65","steelblue-70","steelblue-75","steelblue-80","steelblue-85","steelblue-90","steelblue-95","steelblue-99","success-15","success-25","success-45","success-55","success-65","success-70","success-75","success-80","success-85","success-90","success-95","success-99","success-strong","success-subtle","warning-10","warning-20","warning-35","warning-45","warning-55","warning-60","warning-65","warning-75","warning-85","warning-90","warning-95","warning-99","warning-strong","warning-subtle","white","yellow-10","yellow-20","yellow-25","yellow-30","yellow-40","yellow-45","yellow-50","yellow-60","yellow-70","yellow-80","yellow-90","yellow-95","yellow-moderate","yellow-strong","yellow-subtle"];
+export const COLORS = ["bg-accent","bg-accentBright","bg-accentFaint","bg-accentLight","bg-brand","bg-caution","bg-danger","bg-dangerLight","bg-deep","bg-frame","bg-neutralBright","bg-neutralLight","bg-progress","bg-screen","bg-subtle","bg-success","bg-successLight","bg-tableHeader","bg-warning","black","blue-strong","blue-subtle","border-accent","border-accentLight","border-bold","border-danger","border-default","border-strong","border-success","border-warning","brilliantblue-05","brilliantblue-10","brilliantblue-20","brilliantblue-25","brilliantblue-40","brilliantblue-50","brilliantblue-60","brilliantblue-70","brilliantblue-75","brilliantblue-80","brilliantblue-85","brilliantblue-90","brilliantblue-95","brilliantblue-99","control-bg-inverseHover","danger-15","danger-20","danger-30","danger-45","danger-60","danger-70","danger-75","danger-80","danger-85","danger-90","danger-95","danger-99","danger-strong","danger-subtle","darkblue-strong","darkblue-subtle","disabled-bg","disabled-border","disabled-icon","disabled-text","divider-default","fg-accent","fg-accentLight","fg-brand","fg-danger","fg-dangerLight","fg-deep","fg-inverse","fg-primary","fg-quaternary","fg-secondary","fg-subtleCool","fg-subtleWarm","fg-success","fg-successLight","fg-tertiary","fg-warning","field-bg-default","field-bg-hover","field-bg-readOnly","field-border-danger","field-border-default","field-border-focus","field-border-hover","field-border-success","field-icon-default","field-text-default","field-text-placeholder","field-text-readOnly","green-15","green-25","green-45","green-55","green-65","green-70","green-75","green-80","green-85","green-90","green-95","green-99","green-strong","green-subtle","grey-05","grey-10","grey-20","grey-25","grey-30","grey-35","grey-45","grey-50","grey-55","grey-60","grey-65","grey-70","grey-80","grey-85","grey-90","grey-95","grey-strong","grey-subtle","indigo-strong","indigo-subtle","lightblue-strong","lightblue-subtle","link-accent","navigation-gnb-bg-dark","oceanblue-15","oceanblue-25","oceanblue-50","oceanblue-60","oceanblue-65","oceanblue-70","oceanblue-75","oceanblue-80","oceanblue-85","oceanblue-90","oceanblue-95","oceanblue-99","olive-05","olive-10","olive-15","olive-20","olive-30","olive-45","olive-55","olive-65","olive-70","olive-80","olive-90","olive-95","orange-10","orange-20","orange-35","orange-45","orange-55","orange-60","orange-65","orange-75","orange-85","orange-90","orange-95","orange-99","orange-strong","orange-subtle","primary-05","primary-10","primary-20","primary-25","primary-40","primary-50","primary-60","primary-70","primary-75","primary-80","primary-85","primary-90","primary-95","primary-99","red-15","red-20","red-30","red-45","red-60","red-70","red-75","red-80","red-85","red-90","red-95","red-99","red-strong","red-subtle","steelblue-10","steelblue-25","steelblue-45","steelblue-60","steelblue-65","steelblue-70","steelblue-75","steelblue-80","steelblue-85","steelblue-90","steelblue-95","steelblue-99","success-15","success-25","success-45","success-55","success-65","success-70","success-75","success-80","success-85","success-90","success-95","success-99","success-strong","success-subtle","warning-10","warning-20","warning-35","warning-45","warning-55","warning-60","warning-65","warning-75","warning-85","warning-90","warning-95","warning-99","warning-strong","warning-subtle","white","yellow-10","yellow-20","yellow-25","yellow-30","yellow-40","yellow-45","yellow-50","yellow-60","yellow-70","yellow-80","yellow-90","yellow-95","yellow-moderate","yellow-strong","yellow-subtle"];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sellmate-design-system-react",
-  "version": "8.1.0",
+  "version": "9.0.0-beta.2",
   "description": "Sellmate Design System — React (TypeScript + Tailwind v4) port",
   "license": "UNLICENSED",
   "keywords": [
@@ -70,8 +70,10 @@
     "check:docs": "node scripts/check-docs-coverage.mjs",
     "check:docs-refs": "node scripts/check-docs-refs.mjs",
     "check:routing": "node scripts/check-routing.mjs",
-    "version": "node scripts/version.mjs",
-    "version:dry": "node scripts/version.mjs --dry-run",
+    "version": "node scripts/version.mjs --prerelease beta --tag",
+    "version:dry": "node scripts/version.mjs --prerelease beta --dry-run",
+    "version:stable": "node scripts/version.mjs --tag",
+    "version:stable:dry": "node scripts/version.mjs --dry-run",
     "clean": "rm -rf dist storybook-static"
   },
   "peerDependencies": {
@@ -117,6 +119,7 @@
     "vite": "^8.0.0"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "tag": "beta"
   }
 }