sellmate-design-system-react 8.0.0 → 9.0.0-beta.0

package/dist/styles.css

@@ -742,6 +742,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,9 +766,15 @@
   .mt-9 {
     margin-top: calc(var(--spacing) * 9);
   }
+  .mt-\[2px\] {
+    margin-top: 2px;
+  }
   .mt-\[8px\] {
     margin-top: 8px;
   }
+  .mt-\[24px\] {
+    margin-top: 24px;
+  }
   .mt-\[var\(--cmp-guide-contents-gap\)\] {
     margin-top: var(--cmp-guide-contents-gap);
   }
@@ -808,6 +817,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;
   }
@@ -848,6 +860,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;
@@ -856,6 +872,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);
   }
@@ -937,6 +956,9 @@
   .h-\[364px\] {
     height: 364px;
   }
+  .h-\[420px\] {
+    height: 420px;
+  }
   .h-\[600px\] {
     height: 600px;
   }
@@ -1006,6 +1028,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);
   }
@@ -1042,6 +1070,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));
   }
@@ -1072,9 +1103,6 @@
   .w-\[4px\] {
     width: 4px;
   }
-  .w-\[8px\] {
-    width: 8px;
-  }
   .w-\[9px\] {
     width: 9px;
   }
@@ -1204,15 +1232,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 +1259,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 +1481,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 +1553,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 +1571,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 +1723,9 @@
   .self-center {
     align-self: center;
   }
+  .self-start {
+    align-self: flex-start;
+  }
   .self-stretch {
     align-self: stretch;
   }
@@ -1742,6 +1806,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 +2001,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 +2076,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);
   }
@@ -2084,6 +2157,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 +2214,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 +2229,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 +2319,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);
   }
@@ -2393,6 +2481,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 +2517,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 +2529,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);
   }
@@ -2483,11 +2589,17 @@
   .py-\(--cmp-chipInput-sm-paddingY\) {
     padding-block: var(--cmp-chipInput-sm-paddingY);
   }
-  .py-\(--cmp-listDraggableItem-paddingY-dense\) {
-    padding-block: var(--cmp-listDraggableItem-paddingY-dense);
+  .py-\(--cmp-listDraggableItem-paddingY-md-dense\) {
+    padding-block: var(--cmp-listDraggableItem-paddingY-md-dense);
+  }
+  .py-\(--cmp-listDraggableItem-paddingY-md-normal\) {
+    padding-block: var(--cmp-listDraggableItem-paddingY-md-normal);
   }
-  .py-\(--cmp-listDraggableItem-paddingY-normal\) {
-    padding-block: var(--cmp-listDraggableItem-paddingY-normal);
+  .py-\(--cmp-listDraggableItem-paddingY-sm-dense\) {
+    padding-block: var(--cmp-listDraggableItem-paddingY-sm-dense);
+  }
+  .py-\(--cmp-listDraggableItem-paddingY-sm-normal\) {
+    padding-block: var(--cmp-listDraggableItem-paddingY-sm-normal);
   }
   .py-\(--cmp-listExpansionItem-title-paddingY-dense\) {
     padding-block: var(--cmp-listExpansionItem-title-paddingY-dense);
@@ -2501,6 +2613,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);
   }
@@ -2525,9 +2640,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);
   }
@@ -2564,6 +2691,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);
   }
@@ -2585,6 +2721,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);
   }
@@ -2597,6 +2742,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;
   }
@@ -2853,6 +3001,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);
   }
@@ -2889,6 +3043,9 @@
   .text-\[\#0A0A0A\] {
     color: #0A0A0A;
   }
+  .text-\[\#6b7280\] {
+    color: #6b7280;
+  }
   .text-\[\#333\] {
     color: #333;
   }
@@ -2988,6 +3145,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);
   }
@@ -3134,6 +3294,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);
@@ -3158,6 +3322,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));
@@ -3249,6 +3416,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) {
@@ -3256,6 +3430,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) {
@@ -3735,6 +3917,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) {
@@ -4223,6 +4413,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);
@@ -4311,8 +4512,8 @@
   --sys-space-panel-padding-default: 16px;
   --sys-space-panel-padding-wide: 24px;
   --sys-space-item-paddingX: 16px;
-  --sys-space-item-paddingY-normal: 8px;
-  --sys-space-item-paddingY-dense: 4px;
+  --sys-space-item-paddingY-normal: 10px;
+  --sys-space-item-paddingY-dense: 6px;
   --sys-space-item-gap: 12px;
   --sys-radius-control-sm: 4px;
   --sys-radius-control-md: 6px;
@@ -5111,12 +5312,12 @@
   --cmp-stepper-vertical-item-bg-selected: #EFF6FF;
   --cmp-stepper-vertical-item-gap: 12px;
   --cmp-stepper-vertical-item-paddingX: 16px;
-  --cmp-stepper-vertical-item-paddingY: 8px;
+  --cmp-stepper-vertical-item-paddingY: 10px;
   --cmp-stepper-vertical-item-accentStripe-width: 2px;
   --cmp-stepper-vertical-item-accentStripe-color: #64ABFF;
   --cmp-stepper-vertical-title-bg: #FFFFFF;
   --cmp-stepper-vertical-title-paddingTop: 12px;
-  --cmp-stepper-vertical-title-paddingBottom: 4px;
+  --cmp-stepper-vertical-title-paddingBottom: 6px;
   --cmp-stepper-vertical-title-text: #004290;
   --cmp-tab-main-lg-height: 44px;
   --cmp-tab-main-lg-paddingX: 32px;
@@ -5193,8 +5394,8 @@
   --cmp-list-group-gap: 8px;
   --cmp-list-group-padding: 16px;
   --cmp-listItem-paddingX: 16px;
-  --cmp-listItem-paddingY-normal: 8px;
-  --cmp-listItem-paddingY-dense: 4px;
+  --cmp-listItem-paddingY-normal: 10px;
+  --cmp-listItem-paddingY-dense: 6px;
   --cmp-listItem-gap: 12px;
   --cmp-listItem-radius-bordered: 8px;
   --cmp-listItem-bg-default: #FFFFFF;
@@ -5209,8 +5410,8 @@
   --cmp-listItem-accentStripe-width: 2px;
   --cmp-listItem-accentStripe-color: #64ABFF;
   --cmp-listExpansionItem-title-paddingX: 16px;
-  --cmp-listExpansionItem-title-paddingY-normal: 8px;
-  --cmp-listExpansionItem-title-paddingY-dense: 4px;
+  --cmp-listExpansionItem-title-paddingY-normal: 10px;
+  --cmp-listExpansionItem-title-paddingY-dense: 6px;
   --cmp-listExpansionItem-title-gap: 12px;
   --cmp-listExpansionItem-title-icon: 12px;
   --cmp-listExpansionItem-title-border: #E1E1E1;
@@ -5228,8 +5429,10 @@
   --cmp-listExpansionItem-accentStripe-width: 2px;
   --cmp-listExpansionItem-accentStripe-color: #64ABFF;
   --cmp-listDraggableItem-paddingX: 16px;
-  --cmp-listDraggableItem-paddingY-normal: 8px;
-  --cmp-listDraggableItem-paddingY-dense: 4px;
+  --cmp-listDraggableItem-paddingY-sm-normal: 8px;
+  --cmp-listDraggableItem-paddingY-sm-dense: 4px;
+  --cmp-listDraggableItem-paddingY-md-normal: 10px;
+  --cmp-listDraggableItem-paddingY-md-dense: 6px;
   --cmp-listDraggableItem-gap: 12px;
   --cmp-listDraggableItem-radius-bordered: 8px;
   --cmp-listDraggableItem-bg-default: #FFFFFF;
@@ -5697,6 +5900,30 @@
     font-weight: 700;
     line-height: 20px;
   }
+  .typo-item-sm-default {
+    font-family: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 20px;
+  }
+  .typo-item-sm-selected {
+    font-family: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 20px;
+  }
+  .typo-item-md-default {
+    font-family: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 24px;
+  }
+  .typo-item-md-selected {
+    font-family: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 24px;
+  }
 }
 @keyframes linear-indeterminate {
   0% {

package/dist/theme.css

@@ -410,8 +410,8 @@
   --sys-space-panel-padding-default: 16px;
   --sys-space-panel-padding-wide: 24px;
   --sys-space-item-paddingX: 16px;
-  --sys-space-item-paddingY-normal: 8px;
-  --sys-space-item-paddingY-dense: 4px;
+  --sys-space-item-paddingY-normal: 10px;
+  --sys-space-item-paddingY-dense: 6px;
   --sys-space-item-gap: 12px;
   --sys-radius-control-sm: 4px;
   --sys-radius-control-md: 6px;
@@ -1212,12 +1212,12 @@
   --cmp-stepper-vertical-item-bg-selected: #EFF6FF;
   --cmp-stepper-vertical-item-gap: 12px;
   --cmp-stepper-vertical-item-paddingX: 16px;
-  --cmp-stepper-vertical-item-paddingY: 8px;
+  --cmp-stepper-vertical-item-paddingY: 10px;
   --cmp-stepper-vertical-item-accentStripe-width: 2px;
   --cmp-stepper-vertical-item-accentStripe-color: #64ABFF;
   --cmp-stepper-vertical-title-bg: #FFFFFF;
   --cmp-stepper-vertical-title-paddingTop: 12px;
-  --cmp-stepper-vertical-title-paddingBottom: 4px;
+  --cmp-stepper-vertical-title-paddingBottom: 6px;
   --cmp-stepper-vertical-title-text: #004290;
   --cmp-tab-main-lg-height: 44px;
   --cmp-tab-main-lg-paddingX: 32px;
@@ -1294,8 +1294,8 @@
   --cmp-list-group-gap: 8px;
   --cmp-list-group-padding: 16px;
   --cmp-listItem-paddingX: 16px;
-  --cmp-listItem-paddingY-normal: 8px;
-  --cmp-listItem-paddingY-dense: 4px;
+  --cmp-listItem-paddingY-normal: 10px;
+  --cmp-listItem-paddingY-dense: 6px;
   --cmp-listItem-gap: 12px;
   --cmp-listItem-radius-bordered: 8px;
   --cmp-listItem-bg-default: #FFFFFF;
@@ -1310,8 +1310,8 @@
   --cmp-listItem-accentStripe-width: 2px;
   --cmp-listItem-accentStripe-color: #64ABFF;
   --cmp-listExpansionItem-title-paddingX: 16px;
-  --cmp-listExpansionItem-title-paddingY-normal: 8px;
-  --cmp-listExpansionItem-title-paddingY-dense: 4px;
+  --cmp-listExpansionItem-title-paddingY-normal: 10px;
+  --cmp-listExpansionItem-title-paddingY-dense: 6px;
   --cmp-listExpansionItem-title-gap: 12px;
   --cmp-listExpansionItem-title-icon: 12px;
   --cmp-listExpansionItem-title-border: #E1E1E1;
@@ -1329,8 +1329,10 @@
   --cmp-listExpansionItem-accentStripe-width: 2px;
   --cmp-listExpansionItem-accentStripe-color: #64ABFF;
   --cmp-listDraggableItem-paddingX: 16px;
-  --cmp-listDraggableItem-paddingY-normal: 8px;
-  --cmp-listDraggableItem-paddingY-dense: 4px;
+  --cmp-listDraggableItem-paddingY-sm-normal: 8px;
+  --cmp-listDraggableItem-paddingY-sm-dense: 4px;
+  --cmp-listDraggableItem-paddingY-md-normal: 10px;
+  --cmp-listDraggableItem-paddingY-md-dense: 6px;
   --cmp-listDraggableItem-gap: 12px;
   --cmp-listDraggableItem-radius-bordered: 8px;
   --cmp-listDraggableItem-bg-default: #FFFFFF;
@@ -1811,6 +1813,30 @@
     font-weight: 700;
     line-height: 20px;
   }
+  .typo-item-sm-default {
+    font-family: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 20px;
+  }
+  .typo-item-sm-selected {
+    font-family: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 20px;
+  }
+  .typo-item-md-default {
+    font-family: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 24px;
+  }
+  .typo-item-md-selected {
+    font-family: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 24px;
+  }
 }
 
 /* 컴포넌트 공용 애니메이션 (progress 등) */