sellmate-design-system-react 5.0.1 → 6.0.0

package/dist/styles.css

@@ -202,9 +202,11 @@
     --color-fg-inverse: #FFFFFF;
     --color-border-default: #E1E1E1;
     --color-border-strong: #AAAAAA;
+    --color-border-bold: #555555;
     --color-border-accent: #0075FF;
     --color-border-accentLight: #93C4FF;
     --color-border-danger: #FB4444;
+    --color-border-warning: #FF6B00;
     --color-border-success: #12B553;
     --color-disabled-bg: #E1E1E1;
     --color-disabled-text: #888888;
@@ -925,6 +927,9 @@
   .h-\[var\(--cmp-datepicker-calendar-day-dot-size\)\] {
     height: var(--cmp-datepicker-calendar-day-dot-size);
   }
+  .h-\[var\(--cmp-datepicker-calendar-header-divider-height\)\] {
+    height: var(--cmp-datepicker-calendar-header-divider-height);
+  }
   .h-\[var\(--cmp-datepicker-calendar-range-height\)\] {
     height: var(--cmp-datepicker-calendar-range-height);
   }
@@ -1102,6 +1107,9 @@
   .w-\[720px\] {
     width: 720px;
   }
+  .w-\[1000px\] {
+    width: 1000px;
+  }
   .w-\[calc\(14px\+var\(--cmp-tree-item-arrow-icon\)\)\] {
     width: calc(14px + var(--cmp-tree-item-arrow-icon));
   }
@@ -2084,12 +2092,6 @@
   .bg-\[var\(--cmp-datepicker-calendar-day-select-bg\)\] {
     background-color: var(--cmp-datepicker-calendar-day-select-bg);
   }
-  .bg-\[var\(--cmp-datepicker-calendar-header-divider\)\] {
-    background-color: var(--cmp-datepicker-calendar-header-divider);
-  }
-  .bg-\[var\(--cmp-datepicker-calendar-range-divider\)\] {
-    background-color: var(--cmp-datepicker-calendar-range-divider);
-  }
   .bg-\[var\(--cmp-datepicker-calendar-time-bg-default\)\] {
     background-color: var(--cmp-datepicker-calendar-time-bg-default);
   }
@@ -2213,6 +2215,9 @@
   .bg-grey-10 {
     background-color: var(--color-grey-10);
   }
+  .bg-grey-20 {
+    background-color: var(--color-grey-20);
+  }
   .bg-grey-90 {
     background-color: var(--color-grey-90);
   }
@@ -2237,6 +2242,12 @@
   .p-\(--cmp-listExpansionItem-body-padding\) {
     padding: var(--cmp-listExpansionItem-body-padding);
   }
+  .p-\(--sys-space-panel-padding-default\) {
+    padding: var(--sys-space-panel-padding-default);
+  }
+  .p-\(--sys-space-panel-padding-wide\) {
+    padding: var(--sys-space-panel-padding-wide);
+  }
   .p-0 {
     padding: 0;
   }
@@ -2273,8 +2284,8 @@
   .p-\[var\(--cmp-datepicker-calendar-paddingXY\)\] {
     padding: var(--cmp-datepicker-calendar-paddingXY);
   }
-  .p-\[var\(--cmp-pageBody-padding\)\] {
-    padding: var(--cmp-pageBody-padding);
+  .p-\[var\(--cmp-pageBody-padding-default\)\] {
+    padding: var(--cmp-pageBody-padding-default);
   }
   .p-sd-2 {
     padding: var(--spacing-sd-2);
@@ -2516,6 +2527,9 @@
   .pb-sd-16 {
     padding-bottom: var(--spacing-sd-16);
   }
+  .pb-sd-80 {
+    padding-bottom: var(--spacing-sd-80);
+  }
   .pl-\(--cmp-guide-contents-depth-paddingLeft\) {
     padding-left: var(--cmp-guide-contents-depth-paddingLeft);
   }
@@ -4181,6 +4195,8 @@
   --sys-space-overlay-paddingX-md: 24px;
   --sys-space-overlay-paddingY-sm: 8px;
   --sys-space-panel-gap: 12px;
+  --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;
@@ -4233,9 +4249,11 @@
   --sys-color-fg-inverse: #FFFFFF;
   --sys-color-border-default: #E1E1E1;
   --sys-color-border-strong: #AAAAAA;
+  --sys-color-border-bold: #555555;
   --sys-color-border-accent: #0075FF;
   --sys-color-border-accentLight: #93C4FF;
   --sys-color-border-danger: #FB4444;
+  --sys-color-border-warning: #FF6B00;
   --sys-color-border-success: #12B553;
   --sys-color-disabled-bg: #E1E1E1;
   --sys-color-disabled-text: #888888;
@@ -4625,7 +4643,7 @@
   --cmp-datepicker-calendar-gap: 12px;
   --cmp-datepicker-calendar-radius: 8px;
   --cmp-datepicker-calendar-header-gap: 8px;
-  --cmp-datepicker-calendar-header-divider: #E1E1E1;
+  --cmp-datepicker-calendar-header-divider-height: 16px;
   --cmp-datepicker-calendar-week-color: #888888;
   --cmp-datepicker-calendar-grid-rowGap: 4px;
   --cmp-datepicker-calendar-day-width: 40px;
@@ -4643,7 +4661,6 @@
   --cmp-datepicker-calendar-range-bg: #D9EAFF;
   --cmp-datepicker-calendar-range-height: 32px;
   --cmp-datepicker-calendar-range-panelGap: 24px;
-  --cmp-datepicker-calendar-range-divider: #E1E1E1;
   --cmp-datepicker-calendar-range-width: 20px;
   --cmp-datepicker-calendar-legend-gap: 4px;
   --cmp-datepicker-calendar-legend-group-gap: 12px;
@@ -4957,24 +4974,37 @@
   --cmp-pagination-item-content-selected: #004290;
   --cmp-pagination-simple-gap: 8px;
   --cmp-stepper-sm-sequence-size: 20px;
-  --cmp-stepper-dash-width: 20px;
-  --cmp-stepper-dash-color: #888888;
   --cmp-stepper-lg-sequence-size: 24px;
-  --cmp-stepper-container-gap: 12px;
+  --cmp-stepper-horizontal-dash-width: 20px;
+  --cmp-stepper-horizontal-dash-color: #888888;
+  --cmp-stepper-horizontal-gap: 12px;
   --cmp-stepper-item-gap: 8px;
   --cmp-stepper-sequence-radius: 9999px;
   --cmp-stepper-sequence-border-active: #93C4FF;
   --cmp-stepper-sequence-border-default: #E1E1E1;
-  --cmp-stepper-sequence-border-completed: #CCCCCC;
+  --cmp-stepper-sequence-border-completed: #93C4FF;
   --cmp-stepper-sequence-border-width: 1px;
   --cmp-stepper-sequence-icon: 12px;
-  --cmp-stepper-sequence-bg-active: #D9EAFF;
+  --cmp-stepper-sequence-bg-active: #FFFFFF;
   --cmp-stepper-sequence-bg-default: #FFFFFF;
-  --cmp-stepper-sequence-bg-completed: #E1E1E1;
+  --cmp-stepper-sequence-bg-completed: #EFF6FF;
   --cmp-stepper-sequence-text-active: #0075FF;
   --cmp-stepper-sequence-text-default: #AAAAAA;
   --cmp-stepper-text-active: #0075FF;
-  --cmp-stepper-text-default: #888888;
+  --cmp-stepper-text-default: #555555;
+  --cmp-stepper-text-completed: #888888;
+  --cmp-stepper-vertical-item-bg-default: #FFFFFF;
+  --cmp-stepper-vertical-item-bg-hover: #F6F6F6;
+  --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-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-text: #004290;
   --cmp-tab-main-lg-height: 44px;
   --cmp-tab-main-lg-paddingX: 32px;
   --cmp-tab-main-md-height: 36px;
@@ -5105,7 +5135,7 @@
   --cmp-listDraggableItem-accentStripe-width: 2px;
   --cmp-listDraggableItem-accentStripe-color: #64ABFF;
   --cmp-listDraggableItem-dragging-content-opacity: 60%;
-  --cmp-pageBody-padding: 16px;
+  --cmp-pageBody-padding-default: 16px;
   --cmp-sectionHeaderCard-radius: 8px;
   --cmp-sectionHeaderCard-border: #E1E1E1;
   --cmp-sectionHeaderCard-topBorder-thickness: 2px;
@@ -5146,6 +5176,59 @@
   --cmp-pageHeader-plain-paddingTop: 20px;
   --cmp-pageHeader-plain-paddingBottom: 16px;
   --cmp-pageHeader-plain-title-gap: 4px;
+  --cmp-chipFilter-bar-bg: #FFFFFF;
+  --cmp-chipFilter-bar-border: #E1E1E1;
+  --cmp-chipFilter-bar-paddingX: 16px;
+  --cmp-chipFilter-bar-paddingY: 12px;
+  --cmp-chipFilter-bar-gap: 12px;
+  --cmp-chipFilter-divider-height: 20px;
+  --cmp-chipFilter-chip-height: 24px;
+  --cmp-chipFilter-chip-radius: 4px;
+  --cmp-chipFilter-chip-paddingX: 8px;
+  --cmp-chipFilter-chip-gap: 6px;
+  --cmp-chipFilter-chip-icon-caret: 12px;
+  --cmp-chipFilter-chip-icon-essential: 12px;
+  --cmp-chipFilter-chip-default-bg: #FFFFFF;
+  --cmp-chipFilter-chip-default-border: #AAAAAA;
+  --cmp-chipFilter-chip-default-text: #222222;
+  --cmp-chipFilter-chip-active-border: #555555;
+  --cmp-chipFilter-chip-warning-border: #FF6B00;
+  --cmp-chipFilter-chip-applied-bg: #EFF6FF;
+  --cmp-chipFilter-chip-applied-border: #93C4FF;
+  --cmp-chipFilter-chip-applied-text-label: #222222;
+  --cmp-chipFilter-chip-disabled-bg: #F6F6F6;
+  --cmp-chipFilter-chip-disabled-border: #CCCCCC;
+  --cmp-chipFilter-chip-disabled-text: #888888;
+  --cmp-chipFilter-chip-group: 6px;
+  --cmp-chipFilter-chip-hover-bg: #F6F6F6;
+  --cmp-chipFilter-addButton-height: 24px;
+  --cmp-chipFilter-addButton-radius: 4px;
+  --cmp-chipFilter-addButton-paddingX: 8px;
+  --cmp-chipFilter-addButton-gap: 4px;
+  --cmp-chipFilter-addButton-icon: 12px;
+  --cmp-chipFilter-addButton-bg: #F9F9F9;
+  --cmp-chipFilter-addButton-border-default: #888888;
+  --cmp-chipFilter-addButton-border-disabled: #CCCCCC;
+  --cmp-chipFilter-addButton-text-default: #222222;
+  --cmp-chipFilter-addButton-text-disabled: #888888;
+  --cmp-chipFilter-listbox-bg: #FFFFFF;
+  --cmp-chipFilter-listbox-border-color: #E1E1E1;
+  --cmp-chipFilter-listbox-radius: 8px;
+  --cmp-chipFilter-listbox-top-paddingX: 12px;
+  --cmp-chipFilter-listbox-top-paddingY: 8px;
+  --cmp-chipFilter-listbox-top-gap: 8px;
+  --cmp-chipFilter-listbox-top-label-color: #222222;
+  --cmp-chipFilter-listbox-list-paddingY: 4px;
+  --cmp-chipFilter-listbox-bottom-paddingX: 16px;
+  --cmp-chipFilter-listbox-bottom-paddingY: 8px;
+  --cmp-chipFilter-listbox-bottom-gap: 8px;
+  --cmp-chipFilter-listbox-bottom-divider-height: 12px;
+  --cmp-chipFilter-item-paddingLeft: 16px;
+  --cmp-chipFilter-item-paddingRight: 12px;
+  --cmp-chipFilter-item-paddingY: 4px;
+  --cmp-chipFilter-item-multi-paddingX: 12px;
+  --cmp-chipFilter-item-text-default: #222222;
+  --cmp-chipFilter-item-text-selected: #0075FF;
 }
 @layer base {
   body {
@@ -5173,18 +5256,24 @@
   }
 }
 @layer components {
-  .typo-heading-sm {
-    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;
-  }
   .typo-heading-xs {
     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-heading-xxs {
+    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: 11px;
+    font-weight: 700;
+    line-height: 18px;
+  }
+  .typo-heading-sm {
+    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;
+  }
   .typo-heading-md {
     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: 16px;
@@ -5562,13 +5651,13 @@
     transform: scale(1);
   }
   25% {
-    transform: scale(1.03);
+    transform: scale(1.01);
   }
   50% {
-    transform: scale(0.97);
+    transform: scale(0.99);
   }
   75% {
-    transform: scale(1.01);
+    transform: scale(1);
   }
 }
 @keyframes drawer-shake {
@@ -5576,10 +5665,10 @@
     transform: translateX(0);
   }
   40% {
-    transform: translateX(-3px);
+    transform: translateX(-1.5px);
   }
   70% {
-    transform: translateX(2px);
+    transform: translateX(1px);
   }
 }
 @keyframes floating-in-top {

package/dist/theme.css

@@ -162,9 +162,11 @@
   --color-fg-inverse: #FFFFFF;
   --color-border-default: #E1E1E1;
   --color-border-strong: #AAAAAA;
+  --color-border-bold: #555555;
   --color-border-accent: #0075FF;
   --color-border-accentLight: #93C4FF;
   --color-border-danger: #FB4444;
+  --color-border-warning: #FF6B00;
   --color-border-success: #12B553;
   --color-disabled-bg: #E1E1E1;
   --color-disabled-text: #888888;
@@ -405,6 +407,8 @@
   --sys-space-overlay-paddingX-md: 24px;
   --sys-space-overlay-paddingY-sm: 8px;
   --sys-space-panel-gap: 12px;
+  --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;
@@ -457,9 +461,11 @@
   --sys-color-fg-inverse: #FFFFFF;
   --sys-color-border-default: #E1E1E1;
   --sys-color-border-strong: #AAAAAA;
+  --sys-color-border-bold: #555555;
   --sys-color-border-accent: #0075FF;
   --sys-color-border-accentLight: #93C4FF;
   --sys-color-border-danger: #FB4444;
+  --sys-color-border-warning: #FF6B00;
   --sys-color-border-success: #12B553;
   --sys-color-disabled-bg: #E1E1E1;
   --sys-color-disabled-text: #888888;
@@ -851,7 +857,7 @@
   --cmp-datepicker-calendar-gap: 12px;
   --cmp-datepicker-calendar-radius: 8px;
   --cmp-datepicker-calendar-header-gap: 8px;
-  --cmp-datepicker-calendar-header-divider: #E1E1E1;
+  --cmp-datepicker-calendar-header-divider-height: 16px;
   --cmp-datepicker-calendar-week-color: #888888;
   --cmp-datepicker-calendar-grid-rowGap: 4px;
   --cmp-datepicker-calendar-day-width: 40px;
@@ -869,7 +875,6 @@
   --cmp-datepicker-calendar-range-bg: #D9EAFF;
   --cmp-datepicker-calendar-range-height: 32px;
   --cmp-datepicker-calendar-range-panelGap: 24px;
-  --cmp-datepicker-calendar-range-divider: #E1E1E1;
   --cmp-datepicker-calendar-range-width: 20px;
   --cmp-datepicker-calendar-legend-gap: 4px;
   --cmp-datepicker-calendar-legend-group-gap: 12px;
@@ -1183,24 +1188,37 @@
   --cmp-pagination-item-content-selected: #004290;
   --cmp-pagination-simple-gap: 8px;
   --cmp-stepper-sm-sequence-size: 20px;
-  --cmp-stepper-dash-width: 20px;
-  --cmp-stepper-dash-color: #888888;
   --cmp-stepper-lg-sequence-size: 24px;
-  --cmp-stepper-container-gap: 12px;
+  --cmp-stepper-horizontal-dash-width: 20px;
+  --cmp-stepper-horizontal-dash-color: #888888;
+  --cmp-stepper-horizontal-gap: 12px;
   --cmp-stepper-item-gap: 8px;
   --cmp-stepper-sequence-radius: 9999px;
   --cmp-stepper-sequence-border-active: #93C4FF;
   --cmp-stepper-sequence-border-default: #E1E1E1;
-  --cmp-stepper-sequence-border-completed: #CCCCCC;
+  --cmp-stepper-sequence-border-completed: #93C4FF;
   --cmp-stepper-sequence-border-width: 1px;
   --cmp-stepper-sequence-icon: 12px;
-  --cmp-stepper-sequence-bg-active: #D9EAFF;
+  --cmp-stepper-sequence-bg-active: #FFFFFF;
   --cmp-stepper-sequence-bg-default: #FFFFFF;
-  --cmp-stepper-sequence-bg-completed: #E1E1E1;
+  --cmp-stepper-sequence-bg-completed: #EFF6FF;
   --cmp-stepper-sequence-text-active: #0075FF;
   --cmp-stepper-sequence-text-default: #AAAAAA;
   --cmp-stepper-text-active: #0075FF;
-  --cmp-stepper-text-default: #888888;
+  --cmp-stepper-text-default: #555555;
+  --cmp-stepper-text-completed: #888888;
+  --cmp-stepper-vertical-item-bg-default: #FFFFFF;
+  --cmp-stepper-vertical-item-bg-hover: #F6F6F6;
+  --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-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-text: #004290;
   --cmp-tab-main-lg-height: 44px;
   --cmp-tab-main-lg-paddingX: 32px;
   --cmp-tab-main-md-height: 36px;
@@ -1331,7 +1349,7 @@
   --cmp-listDraggableItem-accentStripe-width: 2px;
   --cmp-listDraggableItem-accentStripe-color: #64ABFF;
   --cmp-listDraggableItem-dragging-content-opacity: 60%;
-  --cmp-pageBody-padding: 16px;
+  --cmp-pageBody-padding-default: 16px;
   --cmp-sectionHeaderCard-radius: 8px;
   --cmp-sectionHeaderCard-border: #E1E1E1;
   --cmp-sectionHeaderCard-topBorder-thickness: 2px;
@@ -1372,6 +1390,59 @@
   --cmp-pageHeader-plain-paddingTop: 20px;
   --cmp-pageHeader-plain-paddingBottom: 16px;
   --cmp-pageHeader-plain-title-gap: 4px;
+  --cmp-chipFilter-bar-bg: #FFFFFF;
+  --cmp-chipFilter-bar-border: #E1E1E1;
+  --cmp-chipFilter-bar-paddingX: 16px;
+  --cmp-chipFilter-bar-paddingY: 12px;
+  --cmp-chipFilter-bar-gap: 12px;
+  --cmp-chipFilter-divider-height: 20px;
+  --cmp-chipFilter-chip-height: 24px;
+  --cmp-chipFilter-chip-radius: 4px;
+  --cmp-chipFilter-chip-paddingX: 8px;
+  --cmp-chipFilter-chip-gap: 6px;
+  --cmp-chipFilter-chip-icon-caret: 12px;
+  --cmp-chipFilter-chip-icon-essential: 12px;
+  --cmp-chipFilter-chip-default-bg: #FFFFFF;
+  --cmp-chipFilter-chip-default-border: #AAAAAA;
+  --cmp-chipFilter-chip-default-text: #222222;
+  --cmp-chipFilter-chip-active-border: #555555;
+  --cmp-chipFilter-chip-warning-border: #FF6B00;
+  --cmp-chipFilter-chip-applied-bg: #EFF6FF;
+  --cmp-chipFilter-chip-applied-border: #93C4FF;
+  --cmp-chipFilter-chip-applied-text-label: #222222;
+  --cmp-chipFilter-chip-disabled-bg: #F6F6F6;
+  --cmp-chipFilter-chip-disabled-border: #CCCCCC;
+  --cmp-chipFilter-chip-disabled-text: #888888;
+  --cmp-chipFilter-chip-group: 6px;
+  --cmp-chipFilter-chip-hover-bg: #F6F6F6;
+  --cmp-chipFilter-addButton-height: 24px;
+  --cmp-chipFilter-addButton-radius: 4px;
+  --cmp-chipFilter-addButton-paddingX: 8px;
+  --cmp-chipFilter-addButton-gap: 4px;
+  --cmp-chipFilter-addButton-icon: 12px;
+  --cmp-chipFilter-addButton-bg: #F9F9F9;
+  --cmp-chipFilter-addButton-border-default: #888888;
+  --cmp-chipFilter-addButton-border-disabled: #CCCCCC;
+  --cmp-chipFilter-addButton-text-default: #222222;
+  --cmp-chipFilter-addButton-text-disabled: #888888;
+  --cmp-chipFilter-listbox-bg: #FFFFFF;
+  --cmp-chipFilter-listbox-border-color: #E1E1E1;
+  --cmp-chipFilter-listbox-radius: 8px;
+  --cmp-chipFilter-listbox-top-paddingX: 12px;
+  --cmp-chipFilter-listbox-top-paddingY: 8px;
+  --cmp-chipFilter-listbox-top-gap: 8px;
+  --cmp-chipFilter-listbox-top-label-color: #222222;
+  --cmp-chipFilter-listbox-list-paddingY: 4px;
+  --cmp-chipFilter-listbox-bottom-paddingX: 16px;
+  --cmp-chipFilter-listbox-bottom-paddingY: 8px;
+  --cmp-chipFilter-listbox-bottom-gap: 8px;
+  --cmp-chipFilter-listbox-bottom-divider-height: 12px;
+  --cmp-chipFilter-item-paddingLeft: 16px;
+  --cmp-chipFilter-item-paddingRight: 12px;
+  --cmp-chipFilter-item-paddingY: 4px;
+  --cmp-chipFilter-item-multi-paddingX: 12px;
+  --cmp-chipFilter-item-text-default: #222222;
+  --cmp-chipFilter-item-text-selected: #0075FF;
 }
 
 /* 전역 스크롤바 — overflow(auto/scroll)로 스크롤이 생기는 모든 요소에 SScrollArea 기본 스크롤바를 자동 적용.
@@ -1412,18 +1483,24 @@
 
 /* 타이포그래피 프리셋 */
 @layer components {
-  .typo-heading-sm {
-    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;
-  }
   .typo-heading-xs {
     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-heading-xxs {
+    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: 11px;
+    font-weight: 700;
+    line-height: 18px;
+  }
+  .typo-heading-sm {
+    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;
+  }
   .typo-heading-md {
     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: 16px;
@@ -1780,15 +1857,15 @@
 /* persistent 모달에서 백드롭/ESC 닫기 시도 시 흔들림 (sd-modal-container--shake 포팅) */
 @keyframes modal-shake {
   0%, 100% { transform: scale(1); }
-  25% { transform: scale(1.03); }
-  50% { transform: scale(0.97); }
-  75% { transform: scale(1.01); }
+  25% { transform: scale(1.01); }
+  50% { transform: scale(0.99); }
+  75% { transform: scale(1); }
 }
 /* persistent Drawer에서 닫기 시도 시 사용하는 낮은 진폭의 흔들림 */
 @keyframes drawer-shake {
   0%, 100% { transform: translateX(0); }
-  40% { transform: translateX(-3px); }
-  70% { transform: translateX(2px); }
+  40% { transform: translateX(-1.5px); }
+  70% { transform: translateX(1px); }
 }
 /* floating(툴팁·팝오버): placement 방향에서 4px 슬라이드 + 페이드 (sd-floating-slide-* 포팅) */
 @keyframes floating-in-top { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

package/eslint/scale.gen.mjs

@@ -10,7 +10,7 @@ export const TEXT_SIZES = [10,11,12,13,14,16,18,20,24,28,32];
 export const RADIUS = ["2","4","6","8","full","control-sm","control-md","feedback-xs-square","feedback-sm-square","feedback-pill","field-sm","field-md","navigation","item-bordered"];
 
 /** 타이포그래피 프리셋 클래스 */
-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-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"];
+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-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-danger","border-default","border-strong","border-success","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-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": "5.0.1",
+  "version": "6.0.0",
   "description": "Sellmate Design System — React (TypeScript + Tailwind v4) port",
   "license": "UNLICENSED",
   "keywords": [