sellmate-design-system-react 0.1.8 → 0.1.10

package/dist/styles.css

@@ -40,6 +40,7 @@
     --color-grey-80: #555555;
     --color-grey-05: #F9F9F9;
     --color-red-75: #E30000;
+    --color-border-accentLight: #93C4FF;
     --color-red-strong: #FB4444;
     --color-green-strong: #00973C;
     --color-blue-strong: #0075FF;
@@ -60,6 +61,7 @@
     --text-14: 14px;
     --text-16: 16px;
     --text-24: 24px;
+    --font-base: 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;
     --shadow-spread-md: 0px 0px 24px 0px rgba(34,34,34,0.2);
     --animate-linear-indeterminate: linear-indeterminate 1.2s linear infinite;
     --animate-circle-spin: circle-spin 2s linear infinite;
@@ -314,6 +316,9 @@
   .left-0 {
     left: 0;
   }
+  .left-1\/2 {
+    left: calc(1 / 2 * 100%);
+  }
   .z-10 {
     z-index: 10;
   }
@@ -497,9 +502,6 @@
   .h-\[var\(--cmp-table-header-height\)\] {
     height: var(--cmp-table-header-height);
   }
-  .h-\[var\(--cmp-table-keyValue-height\)\] {
-    height: var(--cmp-table-keyValue-height);
-  }
   .h-auto {
     height: auto;
   }
@@ -667,6 +669,10 @@
   .origin-left {
     transform-origin: 0;
   }
+  .-translate-x-1\/2 {
+    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -863,6 +869,9 @@
   .gap-\[var\(--cmp-pagination-move-gap\)\] {
     gap: var(--cmp-pagination-move-gap);
   }
+  .gap-\[var\(--cmp-pagination-simple-gap\)\] {
+    gap: var(--cmp-pagination-simple-gap);
+  }
   .gap-\[var\(--cmp-popover-contents-gap\)\] {
     gap: var(--cmp-popover-contents-gap);
   }
@@ -872,6 +881,15 @@
   .gap-\[var\(--cmp-popover-title-gap\)\] {
     gap: var(--cmp-popover-title-gap);
   }
+  .gap-\[var\(--cmp-progress-circular-gap\)\] {
+    gap: var(--cmp-progress-circular-gap);
+  }
+  .gap-\[var\(--cmp-radio-group-gap-horizontal\)\] {
+    gap: var(--cmp-radio-group-gap-horizontal);
+  }
+  .gap-\[var\(--cmp-radio-group-gap-vertical\)\] {
+    gap: var(--cmp-radio-group-gap-vertical);
+  }
   .gap-\[var\(--cmp-table-header-gap\)\] {
     gap: var(--cmp-table-header-gap);
   }
@@ -940,9 +958,6 @@
   .rounded-\[var\(--cmp-datepicker-calendar-radius\)\] {
     border-radius: var(--cmp-datepicker-calendar-radius);
   }
-  .rounded-\[var\(--cmp-filepicker-sm-radius\)\] {
-    border-radius: var(--cmp-filepicker-sm-radius);
-  }
   .rounded-\[var\(--cmp-guide-button-radius\)\] {
     border-radius: var(--cmp-guide-button-radius);
   }
@@ -1066,15 +1081,15 @@
   .border-\[color\:var\(--cb-border\)\] {
     border-color: var(--cb-border);
   }
+  .border-\[color\:var\(--cmp-checkbox-border-disabled\)\] {
+    border-color: var(--cmp-checkbox-border-disabled);
+  }
   .border-\[color\:var\(--cmp-checkbox-checked-bg-default\)\] {
     border-color: var(--cmp-checkbox-checked-bg-default);
   }
   .border-\[color\:var\(--cmp-checkbox-unchecked-border-default\)\] {
     border-color: var(--cmp-checkbox-unchecked-border-default);
   }
-  .border-\[color\:var\(--cmp-filepicker-border-default\)\] {
-    border-color: var(--cmp-filepicker-border-default);
-  }
   .border-\[color\:var\(--cmp-listItem-depth1-border-color\)\] {
     border-color: var(--cmp-listItem-depth1-border-color);
   }
@@ -1120,6 +1135,9 @@
   .bg-\[var\(--cb-bg\)\] {
     background-color: var(--cb-bg);
   }
+  .bg-\[var\(--cmp-checkbox-bg-disabled\)\] {
+    background-color: var(--cmp-checkbox-bg-disabled);
+  }
   .bg-\[var\(--cmp-checkbox-checked-bg-default\)\] {
     background-color: var(--cmp-checkbox-checked-bg-default);
   }
@@ -1135,15 +1153,15 @@
   .bg-\[var\(--cmp-datepicker-calendar-range-divider\)\] {
     background-color: var(--cmp-datepicker-calendar-range-divider);
   }
-  .bg-\[var\(--cmp-filepicker-bg-default\)\] {
-    background-color: var(--cmp-filepicker-bg-default);
-  }
   .bg-\[var\(--cmp-listBox-bg\)\] {
     background-color: var(--cmp-listBox-bg);
   }
   .bg-\[var\(--cmp-listItem-depth1-bg-default\)\] {
     background-color: var(--cmp-listItem-depth1-bg-default);
   }
+  .bg-\[var\(--cmp-listItem-depth1-bg-disabled\)\] {
+    background-color: var(--cmp-listItem-depth1-bg-disabled);
+  }
   .bg-\[var\(--cmp-listItem-depth2-middle-bg\)\] {
     background-color: var(--cmp-listItem-depth2-middle-bg);
   }
@@ -1225,6 +1243,9 @@
   .p-\[2px\] {
     padding: 2px;
   }
+  .p-\[8px\] {
+    padding: 8px;
+  }
   .p-\[12px\] {
     padding: 12px;
   }
@@ -1252,6 +1273,9 @@
   .px-16 {
     padding-inline: var(--spacing-16);
   }
+  .px-\[4px\] {
+    padding-inline: 4px;
+  }
   .px-\[8px\] {
     padding-inline: 8px;
   }
@@ -1351,9 +1375,6 @@
   .py-\[var\(--cmp-popover-paddingY\)\] {
     padding-block: var(--cmp-popover-paddingY);
   }
-  .py-\[var\(--cmp-table-keyValue-body-paddingY\)\] {
-    padding-block: var(--cmp-table-keyValue-body-paddingY);
-  }
   .pt-16 {
     padding-top: var(--spacing-16);
   }
@@ -1384,6 +1405,9 @@
   .text-left {
     text-align: left;
   }
+  .text-right {
+    text-align: right;
+  }
   .align-middle {
     vertical-align: middle;
   }
@@ -1456,6 +1480,10 @@
     --tw-leading: 30px;
     line-height: 30px;
   }
+  .leading-\[var\(--cmp-datepicker-calendar-day-circle-size\)\] {
+    --tw-leading: var(--cmp-datepicker-calendar-day-circle-size);
+    line-height: var(--cmp-datepicker-calendar-day-circle-size);
+  }
   .leading-none {
     --tw-leading: 1;
     line-height: 1;
@@ -1542,6 +1570,9 @@
   .text-\[color\:var\(--cmp-datepicker-calendar-week-color\)\] {
     color: var(--cmp-datepicker-calendar-week-color);
   }
+  .text-\[color\:var\(--cmp-filepicker-text-placeholder\)\] {
+    color: var(--cmp-filepicker-text-placeholder);
+  }
   .text-\[color\:var\(--cmp-guide-contents-typography-color\)\] {
     color: var(--cmp-guide-contents-typography-color);
   }
@@ -1653,9 +1684,6 @@
   .opacity-60 {
     opacity: 60%;
   }
-  .opacity-70 {
-    opacity: 70%;
-  }
   .opacity-100 {
     opacity: 100%;
   }
@@ -1739,6 +1767,10 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .duration-150 {
+    --tw-duration: 150ms;
+    transition-duration: 150ms;
+  }
   .duration-200 {
     --tw-duration: 200ms;
     transition-duration: 200ms;
@@ -1784,6 +1816,13 @@
       }
     }
   }
+  .group-hover\/filepicker\:text-\[color\:var\(--cmp-filepicker-text-default\)\] {
+    &:is(:where(.group\/filepicker):hover *) {
+      @media (hover: hover) {
+        color: var(--cmp-filepicker-text-default);
+      }
+    }
+  }
   .group-data-\[active-item\]\:border-\[color\:var\(--cmp-checkbox-checked-border-inverse\)\] {
     &:is(:where(.group)[data-active-item] *) {
       border-color: var(--cmp-checkbox-checked-border-inverse);
@@ -1950,6 +1989,13 @@
       }
     }
   }
+  .hover\:border-\[var\(--color-border-accentLight\)\] {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-border-accentLight);
+      }
+    }
+  }
   .hover\:\!bg-\[var\(--cmp-radioButton-bg-hover\)\] {
     &:hover {
       @media (hover: hover) {
@@ -2062,13 +2108,6 @@
       }
     }
   }
-  .hover\:opacity-100 {
-    &:hover {
-      @media (hover: hover) {
-        opacity: 100%;
-      }
-    }
-  }
   .hover\:shadow-\[0px_0px_4px_0px_\#0071ff66\] {
     &:hover {
       @media (hover: hover) {
@@ -2517,7 +2556,7 @@
   --cmp-ghostButton-inverse-content: #FFFFFF;
   --cmp-ghostButton-inverse-disabled: #E1E1E1;
   --cmp-ghostButton-inverse-hover-bg: #FFFFFF;
-  --cmp-ghostButton-group-gap: 4px;
+  --cmp-ghostButton-group-gap: 8px;
   --cmp-textLink-sm-gap: 4px;
   --cmp-textLink-sm-icon: 16px;
   --cmp-textLink-md-gap: 8px;
@@ -2578,6 +2617,8 @@
   --cmp-checkbox-label-disabled: #888888;
   --cmp-checkbox-bg-disabled: #E1E1E1;
   --cmp-checkbox-border-disabled: #CCCCCC;
+  --cmp-checkbox-group-gap-horizontal: 24px;
+  --cmp-checkbox-group-gap-vertical: 8px;
   --cmp-radio-size: 16px;
   --cmp-radio-radius: 9999px;
   --cmp-radio-borderWidth: 1px;
@@ -2594,6 +2635,8 @@
   --cmp-radio-dot-size: 10px;
   --cmp-radio-label-default: #222222;
   --cmp-radio-label-disabled: #888888;
+  --cmp-radio-group-gap-horizontal: 24px;
+  --cmp-radio-group-gap-vertical: 8px;
   --cmp-radioButton-xs-height: 24px;
   --cmp-radioButton-xs-paddingX: 8px;
   --cmp-radioButton-sm-height: 28px;
@@ -2658,10 +2701,10 @@
   --cmp-select-text-disabled: #888888;
   --cmp-field-label-sm-height: 28px;
   --cmp-field-label-sm-gap: 6px;
-  --cmp-field-label-sm-icon: 12px;
+  --cmp-field-label-sm-icon: 16px;
   --cmp-field-label-md-height: 36px;
   --cmp-field-label-md-gap: 8px;
-  --cmp-field-label-md-icon: 12px;
+  --cmp-field-label-md-icon: 16px;
   --cmp-field-addonLabel-height: 28px;
   --cmp-field-addonLabel-gap: 6px;
   --cmp-field-addonLabel-paddingX: 12px;
@@ -2725,6 +2768,7 @@
   --cmp-numberInput-stepper-bg-disabled: #EEEEEE;
   --cmp-numberInput-stepper-icon-default: #0075FF;
   --cmp-numberInput-stepper-icon-disabled: #BBBBBB;
+  --cmp-numberInput-stepper-border-default: #93C4FF;
   --cmp-chipInput-sm-minHeight: 36px;
   --cmp-chipInput-sm-paddingX: 12px;
   --cmp-chipInput-sm-paddingY: 6px;
@@ -2853,6 +2897,7 @@
   --cmp-tag-indigo-bg: #EFF6FF;
   --cmp-tag-grey-content: #737373;
   --cmp-tag-grey-bg: #EEEEEE;
+  --cmp-tag-group-gap: 8px;
   --cmp-badge-size: 6px;
   --cmp-badge-radius: 9999px;
   --cmp-badge-red: #FB4444;
@@ -2961,6 +3006,22 @@
   --cmp-popup-bg: #EEEEEE;
   --cmp-drawer-bg: #F6F6F6;
   --cmp-drawer-body-border: #E1E1E1;
+  --cmp-callout-radius: 8px;
+  --cmp-callout-border-width: 1px;
+  --cmp-callout-body-gap: 2px;
+  --cmp-callout-body-paddingX: 12px;
+  --cmp-callout-body-paddingY: 8px;
+  --cmp-callout-default-bg: #F9F9F9;
+  --cmp-callout-default-border: #E1E1E1;
+  --cmp-callout-default-content: #555555;
+  --cmp-callout-danger-bg: #FCEFEF;
+  --cmp-callout-danger-border: #FFB5B5;
+  --cmp-callout-danger-content: #222222;
+  --cmp-callout-danger-title-bg: #FB4444;
+  --cmp-callout-danger-title-paddingX: 24px;
+  --cmp-callout-danger-title-gap: 2px;
+  --cmp-callout-danger-title-color: #FFFFFF;
+  --cmp-callout-danger-title-icon: 24px;
   --cmp-guide-gap: 4px;
   --cmp-guide-button-height: 28px;
   --cmp-guide-button-paddingX: 12px;
@@ -2980,7 +3041,6 @@
   --cmp-guide-contents-paddingY: 20px;
   --cmp-guide-contents-gap: 12px;
   --cmp-guide-contents-title-gap: 8px;
-  --cmp-guide-contents-row-gap: 8px;
   --cmp-guide-contents-body-gap: 2px;
   --cmp-guide-contents-typography-color: #222222;
   --cmp-guide-contents-icon: #00973C;
@@ -3008,9 +3068,10 @@
   --cmp-table-body-default-height: 44px;
   --cmp-table-body-default-paddingY: 8px;
   --cmp-table-body-dense-height: 32px;
-  --cmp-table-body-dense-paddingY: 6px;
-  --cmp-table-body-paddingX-default: 16px;
-  --cmp-table-body-paddingX-frame: 8px;
+  --cmp-table-body-paddingY-dense: 6px;
+  --cmp-table-body-paddingY-default: 8px;
+  --cmp-table-body-paddingX-default: 8px;
+  --cmp-table-body-paddingX-wide: 16px;
   --cmp-table-border-color: #E1E1E1;
   --cmp-table-border-width: 1px;
   --cmp-table-content-gap: 8px;
@@ -3040,6 +3101,7 @@
   --cmp-pagination-item-content-default: #555555;
   --cmp-pagination-item-content-hover: #004290;
   --cmp-pagination-item-content-selected: #004290;
+  --cmp-pagination-simple-gap: 8px;
   --cmp-tab-main-lg-height: 44px;
   --cmp-tab-main-lg-paddingX: 32px;
   --cmp-tab-main-md-height: 36px;
@@ -3103,22 +3165,25 @@
   --cmp-gnbBox-item-depth1-icon: 20px;
   --cmp-gnbBox-item-depth2-paddingLeft: 24px;
   --cmp-gnbBox-item-depth3-paddingLeft: 36px;
-  --cmp-callout-radius: 8px;
-  --cmp-callout-border-width: 1px;
-  --cmp-callout-body-gap: 2px;
-  --cmp-callout-body-paddingX: 12px;
-  --cmp-callout-body-paddingY: 8px;
-  --cmp-callout-default-bg: #F9F9F9;
-  --cmp-callout-default-border: #E1E1E1;
-  --cmp-callout-default-content: #555555;
-  --cmp-callout-danger-bg: #FCEFEF;
-  --cmp-callout-danger-border: #FFB5B5;
-  --cmp-callout-danger-content: #222222;
-  --cmp-callout-danger-title-bg: #FB4444;
-  --cmp-callout-danger-title-paddingX: 24px;
-  --cmp-callout-danger-title-gap: 2px;
-  --cmp-callout-danger-title-color: #FFFFFF;
-  --cmp-callout-danger-title-icon: 24px;
+  --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-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-witdh: 1px;
+  --cmp-stepper-sequence-icon: 12px;
+  --cmp-stepper-sequence-bg-active: #D9EAFF;
+  --cmp-stepper-sequence-bg-default: #FFFFFF;
+  --cmp-stepper-sequence-bg-completed: #E1E1E1;
+  --cmp-stepper-sequence-text-active: #0075FF;
+  --cmp-stepper-sequence-text-default: #AAAAAA;
+  --cmp-stepper-text-active: #0075FF;
+  --cmp-stepper-text-default: #888888;
 }
 @layer components {
   .typo-control-xs-default {

package/dist/theme.css

@@ -617,7 +617,7 @@
   --cmp-ghostButton-inverse-content: #FFFFFF;
   --cmp-ghostButton-inverse-disabled: #E1E1E1;
   --cmp-ghostButton-inverse-hover-bg: #FFFFFF;
-  --cmp-ghostButton-group-gap: 4px;
+  --cmp-ghostButton-group-gap: 8px;
   --cmp-textLink-sm-gap: 4px;
   --cmp-textLink-sm-icon: 16px;
   --cmp-textLink-md-gap: 8px;
@@ -678,6 +678,8 @@
   --cmp-checkbox-label-disabled: #888888;
   --cmp-checkbox-bg-disabled: #E1E1E1;
   --cmp-checkbox-border-disabled: #CCCCCC;
+  --cmp-checkbox-group-gap-horizontal: 24px;
+  --cmp-checkbox-group-gap-vertical: 8px;
   --cmp-radio-size: 16px;
   --cmp-radio-radius: 9999px;
   --cmp-radio-borderWidth: 1px;
@@ -694,6 +696,8 @@
   --cmp-radio-dot-size: 10px;
   --cmp-radio-label-default: #222222;
   --cmp-radio-label-disabled: #888888;
+  --cmp-radio-group-gap-horizontal: 24px;
+  --cmp-radio-group-gap-vertical: 8px;
   --cmp-radioButton-xs-height: 24px;
   --cmp-radioButton-xs-paddingX: 8px;
   --cmp-radioButton-sm-height: 28px;
@@ -758,10 +762,10 @@
   --cmp-select-text-disabled: #888888;
   --cmp-field-label-sm-height: 28px;
   --cmp-field-label-sm-gap: 6px;
-  --cmp-field-label-sm-icon: 12px;
+  --cmp-field-label-sm-icon: 16px;
   --cmp-field-label-md-height: 36px;
   --cmp-field-label-md-gap: 8px;
-  --cmp-field-label-md-icon: 12px;
+  --cmp-field-label-md-icon: 16px;
   --cmp-field-addonLabel-height: 28px;
   --cmp-field-addonLabel-gap: 6px;
   --cmp-field-addonLabel-paddingX: 12px;
@@ -825,6 +829,7 @@
   --cmp-numberInput-stepper-bg-disabled: #EEEEEE;
   --cmp-numberInput-stepper-icon-default: #0075FF;
   --cmp-numberInput-stepper-icon-disabled: #BBBBBB;
+  --cmp-numberInput-stepper-border-default: #93C4FF;
   --cmp-chipInput-sm-minHeight: 36px;
   --cmp-chipInput-sm-paddingX: 12px;
   --cmp-chipInput-sm-paddingY: 6px;
@@ -953,6 +958,7 @@
   --cmp-tag-indigo-bg: #EFF6FF;
   --cmp-tag-grey-content: #737373;
   --cmp-tag-grey-bg: #EEEEEE;
+  --cmp-tag-group-gap: 8px;
   --cmp-badge-size: 6px;
   --cmp-badge-radius: 9999px;
   --cmp-badge-red: #FB4444;
@@ -1061,6 +1067,22 @@
   --cmp-popup-bg: #EEEEEE;
   --cmp-drawer-bg: #F6F6F6;
   --cmp-drawer-body-border: #E1E1E1;
+  --cmp-callout-radius: 8px;
+  --cmp-callout-border-width: 1px;
+  --cmp-callout-body-gap: 2px;
+  --cmp-callout-body-paddingX: 12px;
+  --cmp-callout-body-paddingY: 8px;
+  --cmp-callout-default-bg: #F9F9F9;
+  --cmp-callout-default-border: #E1E1E1;
+  --cmp-callout-default-content: #555555;
+  --cmp-callout-danger-bg: #FCEFEF;
+  --cmp-callout-danger-border: #FFB5B5;
+  --cmp-callout-danger-content: #222222;
+  --cmp-callout-danger-title-bg: #FB4444;
+  --cmp-callout-danger-title-paddingX: 24px;
+  --cmp-callout-danger-title-gap: 2px;
+  --cmp-callout-danger-title-color: #FFFFFF;
+  --cmp-callout-danger-title-icon: 24px;
   --cmp-guide-gap: 4px;
   --cmp-guide-button-height: 28px;
   --cmp-guide-button-paddingX: 12px;
@@ -1080,7 +1102,6 @@
   --cmp-guide-contents-paddingY: 20px;
   --cmp-guide-contents-gap: 12px;
   --cmp-guide-contents-title-gap: 8px;
-  --cmp-guide-contents-row-gap: 8px;
   --cmp-guide-contents-body-gap: 2px;
   --cmp-guide-contents-typography-color: #222222;
   --cmp-guide-contents-icon: #00973C;
@@ -1108,9 +1129,10 @@
   --cmp-table-body-default-height: 44px;
   --cmp-table-body-default-paddingY: 8px;
   --cmp-table-body-dense-height: 32px;
-  --cmp-table-body-dense-paddingY: 6px;
-  --cmp-table-body-paddingX-default: 16px;
-  --cmp-table-body-paddingX-frame: 8px;
+  --cmp-table-body-paddingY-dense: 6px;
+  --cmp-table-body-paddingY-default: 8px;
+  --cmp-table-body-paddingX-default: 8px;
+  --cmp-table-body-paddingX-wide: 16px;
   --cmp-table-border-color: #E1E1E1;
   --cmp-table-border-width: 1px;
   --cmp-table-content-gap: 8px;
@@ -1140,6 +1162,7 @@
   --cmp-pagination-item-content-default: #555555;
   --cmp-pagination-item-content-hover: #004290;
   --cmp-pagination-item-content-selected: #004290;
+  --cmp-pagination-simple-gap: 8px;
   --cmp-tab-main-lg-height: 44px;
   --cmp-tab-main-lg-paddingX: 32px;
   --cmp-tab-main-md-height: 36px;
@@ -1203,22 +1226,25 @@
   --cmp-gnbBox-item-depth1-icon: 20px;
   --cmp-gnbBox-item-depth2-paddingLeft: 24px;
   --cmp-gnbBox-item-depth3-paddingLeft: 36px;
-  --cmp-callout-radius: 8px;
-  --cmp-callout-border-width: 1px;
-  --cmp-callout-body-gap: 2px;
-  --cmp-callout-body-paddingX: 12px;
-  --cmp-callout-body-paddingY: 8px;
-  --cmp-callout-default-bg: #F9F9F9;
-  --cmp-callout-default-border: #E1E1E1;
-  --cmp-callout-default-content: #555555;
-  --cmp-callout-danger-bg: #FCEFEF;
-  --cmp-callout-danger-border: #FFB5B5;
-  --cmp-callout-danger-content: #222222;
-  --cmp-callout-danger-title-bg: #FB4444;
-  --cmp-callout-danger-title-paddingX: 24px;
-  --cmp-callout-danger-title-gap: 2px;
-  --cmp-callout-danger-title-color: #FFFFFF;
-  --cmp-callout-danger-title-icon: 24px;
+  --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-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-witdh: 1px;
+  --cmp-stepper-sequence-icon: 12px;
+  --cmp-stepper-sequence-bg-active: #D9EAFF;
+  --cmp-stepper-sequence-bg-default: #FFFFFF;
+  --cmp-stepper-sequence-bg-completed: #E1E1E1;
+  --cmp-stepper-sequence-text-active: #0075FF;
+  --cmp-stepper-sequence-text-default: #AAAAAA;
+  --cmp-stepper-text-active: #0075FF;
+  --cmp-stepper-text-default: #888888;
 }
 
 /* 타이포그래피 프리셋 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sellmate-design-system-react",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "Sellmate Design System — React (TypeScript + Tailwind v4) port",
   "license": "UNLICENSED",
   "keywords": [