sellmate-design-system-react 0.3.0 → 0.4.0

package/dist/styles.css

@@ -34,6 +34,7 @@
     --font-weight-bold: 700;
     --font-weight-extrabold: 800;
     --font-weight-black: 900;
+    --tracking-wider: 0.05em;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --ease-in: cubic-bezier(0.4, 0, 1, 1);
@@ -369,7 +370,6 @@
     --spacing-field-md-height: 36px;
     --spacing-navigation-lg-height: 44px;
     --spacing-navigation-md-height: 36px;
-    --spacing-navigation-gnb-topbar-height: 56px;
     --spacing-table-height-xs: 32px;
     --spacing-table-height-sm: 36px;
     --spacing-table-height-md: 44px;
@@ -682,6 +682,9 @@
   .left-1\/2 {
     left: calc(1 / 2 * 100%);
   }
+  .isolate {
+    isolation: isolate;
+  }
   .z-10 {
     z-index: 10;
   }
@@ -769,12 +772,18 @@
   .mt-16 {
     margin-top: var(--spacing-16);
   }
+  .mt-32 {
+    margin-top: var(--spacing-32);
+  }
   .mt-\[8px\] {
     margin-top: 8px;
   }
   .mt-\[var\(--cmp-guide-contents-gap\)\] {
     margin-top: var(--cmp-guide-contents-gap);
   }
+  .-mr-px {
+    margin-right: -1px;
+  }
   .mb-8 {
     margin-bottom: var(--spacing-8);
   }
@@ -880,6 +889,9 @@
   .h-\[var\(--cmp-table-header-height\)\] {
     height: var(--cmp-table-header-height);
   }
+  .h-\[var\(--cmp-textinput-sm-height\)\] {
+    height: var(--cmp-textinput-sm-height);
+  }
   .h-auto {
     height: auto;
   }
@@ -943,6 +955,9 @@
   .w-\[32px\] {
     width: 32px;
   }
+  .w-\[61px\] {
+    width: 61px;
+  }
   .w-\[80px\] {
     width: 80px;
   }
@@ -1400,6 +1415,10 @@
     border-top-left-radius: var(--cmp-radioButton-radius);
     border-bottom-left-radius: var(--cmp-radioButton-radius);
   }
+  .rounded-l-\[var\(--cmp-select-sm-radius\)\] {
+    border-top-left-radius: var(--cmp-select-sm-radius);
+    border-bottom-left-radius: var(--cmp-select-sm-radius);
+  }
   .rounded-r-\[4px\] {
     border-top-right-radius: 4px;
     border-bottom-right-radius: 4px;
@@ -1408,6 +1427,10 @@
     border-top-right-radius: var(--cmp-radioButton-radius);
     border-bottom-right-radius: var(--cmp-radioButton-radius);
   }
+  .rounded-r-\[var\(--cmp-select-sm-radius\)\] {
+    border-top-right-radius: var(--cmp-select-sm-radius);
+    border-bottom-right-radius: var(--cmp-select-sm-radius);
+  }
   .rounded-b-\[8px\] {
     border-bottom-right-radius: 8px;
     border-bottom-left-radius: 8px;
@@ -1517,6 +1540,12 @@
   .border-\[color\:var\(--rd-border\)\] {
     border-color: var(--rd-border);
   }
+  .border-\[var\(--cmp-timepicker-border-default\)\] {
+    border-color: var(--cmp-timepicker-border-default);
+  }
+  .border-\[var\(--cmp-timepicker-border-focus\)\] {
+    border-color: var(--cmp-timepicker-border-focus);
+  }
   .border-gray-200 {
     border-color: var(--color-gray-200);
   }
@@ -1610,6 +1639,9 @@
   .bg-\[var\(--sys-color-bg-frame\)\] {
     background-color: var(--sys-color-bg-frame);
   }
+  .bg-\[var\(--sys-color-divider-default\)\] {
+    background-color: var(--sys-color-divider-default);
+  }
   .bg-black\/40 {
     background-color: color-mix(in srgb, #000000 40%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1947,6 +1979,10 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
+  .tracking-wider {
+    --tw-tracking: var(--tracking-wider);
+    letter-spacing: var(--tracking-wider);
+  }
   .text-nowrap {
     text-wrap: nowrap;
   }
@@ -2085,6 +2121,15 @@
   .text-\[color\:var\(--sys-color-fg-secondary\)\] {
     color: var(--sys-color-fg-secondary);
   }
+  .text-\[var\(--cmp-field-hint-color\)\] {
+    color: var(--cmp-field-hint-color);
+  }
+  .text-\[var\(--cmp-timepicker-border-focus\)\] {
+    color: var(--cmp-timepicker-border-focus);
+  }
+  .text-\[var\(--cmp-timepicker-selector-range-heading-color\)\] {
+    color: var(--cmp-timepicker-selector-range-heading-color);
+  }
   .text-blue-strong {
     color: var(--color-blue-strong);
   }
@@ -2826,7 +2871,6 @@
   --sys-size-field-md-height: 36px;
   --sys-size-navigation-lg-height: 44px;
   --sys-size-navigation-md-height: 36px;
-  --sys-size-navigation-gnb-topbar-height: 56px;
   --sys-size-table-height-xs: 32px;
   --sys-size-table-height-sm: 36px;
   --sys-size-table-height-md: 44px;
@@ -3617,6 +3661,25 @@
   --cmp-pagination-item-content-hover: #004290;
   --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-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;
   --cmp-tab-main-lg-height: 44px;
   --cmp-tab-main-lg-paddingX: 32px;
   --cmp-tab-main-md-height: 36px;
@@ -3639,73 +3702,56 @@
   --cmp-tab-sub-gap-vertical: 16px;
   --cmp-tab-sub-content-gap: 4px;
   --cmp-tab-sub-item-height: 20px;
-  --cmp-gnbBelt-top-height: 56px;
-  --cmp-gnbBelt-top-paddingX: 12px;
-  --cmp-gnbBelt-top-gap: 8px;
-  --cmp-gnbBelt-logo-height: 32px;
-  --cmp-gnbBelt-body-paddingY: 12px;
-  --cmp-gnbBelt-item-paddingY: 6px;
-  --cmp-gnbBelt-item-paddingRight: 20px;
-  --cmp-gnbBelt-item-gap: 12px;
-  --cmp-gnbBelt-item-icon: 12px;
-  --cmp-gnbBelt-item-depth1-paddingLeft: 20px;
-  --cmp-gnbBelt-item-depth2-paddingLeft: 32px;
-  --cmp-gnbBelt-item-depth3-paddingLeft: 44px;
-  --cmp-gnbBelt-fold-width: 48px;
-  --cmp-gnbBox-top-height: 56px;
-  --cmp-gnbBox-paddingX: 16px;
-  --cmp-gnbBox-gap: 16px;
-  --cmp-gnbBox-button-gap: 8px;
-  --cmp-gnbBox-logo-height: 32px;
-  --cmp-gnbBox-menu-body-padding: 12px;
-  --cmp-gnbBox-item-paddingY: 6px;
-  --cmp-gnbBox-item-paddingRight: 12px;
-  --cmp-gnbBox-item-gap: 8px;
-  --cmp-gnbBox-item-radius: 8px;
-  --cmp-gnbBox-item-arrow: 12px;
-  --cmp-gnbBox-item-depth1-paddingLeft: 12px;
-  --cmp-gnbBox-item-depth1-icon: 20px;
-  --cmp-gnbBox-item-depth2-paddingLeft: 24px;
-  --cmp-gnbBox-item-depth3-paddingLeft: 36px;
-  --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;
-  --cmp-light-bg: #FFFFFF;
-  --cmp-light-divider: #E1E1E1;
-  --cmp-light-item-bg-default: #FFFFFF;
-  --cmp-light-item-bg-hover: #F6F6F6;
-  --cmp-light-item-bg-selected: #EFF6FF;
-  --cmp-light-item-fg-default: #222222;
-  --cmp-light-item-fg-hover: #222222;
-  --cmp-light-item-fg-selected: #0075FF;
-  --cmp-light-item-chevron: #555555;
-  --cmp-light-top-icon: #888888;
-  --cmp-dark-bg: #001B39;
-  --cmp-dark-divider: #004177;
-  --cmp-dark-item-bg-default: #001B39;
-  --cmp-dark-item-bg-hover: #07284A;
-  --cmp-dark-item-bg-selected: #002B5E;
-  --cmp-dark-item-fg-default: #FFFFFF;
-  --cmp-dark-item-fg-hover: #FFFFFF;
-  --cmp-dark-item-fg-selected: #93C4FF;
-  --cmp-dark-item-chevron: #AAAAAA;
-  --cmp-dark-top-icon: #FFFFFF;
+  --cmp-gnb-light-bg: #FFFFFF;
+  --cmp-gnb-light-divider: #E1E1E1;
+  --cmp-gnb-light-item-bg-default: #FFFFFF;
+  --cmp-gnb-light-item-bg-hover: #F6F6F6;
+  --cmp-gnb-light-item-bg-selected: #EFF6FF;
+  --cmp-gnb-light-item-fg-default: #222222;
+  --cmp-gnb-light-item-fg-hover: #222222;
+  --cmp-gnb-light-item-fg-selected: #0075FF;
+  --cmp-gnb-light-item-chevron: #555555;
+  --cmp-gnb-light-top-icon: #888888;
+  --cmp-gnb-light-rail-fg-default: #888888;
+  --cmp-gnb-dark-bg: #001B39;
+  --cmp-gnb-dark-divider: #004177;
+  --cmp-gnb-dark-item-bg-default: #001B39;
+  --cmp-gnb-dark-item-bg-hover: #07284A;
+  --cmp-gnb-dark-item-bg-selected: #002B5E;
+  --cmp-gnb-dark-item-fg-default: #FFFFFF;
+  --cmp-gnb-dark-item-fg-hover: #FFFFFF;
+  --cmp-gnb-dark-item-fg-selected: #93C4FF;
+  --cmp-gnb-dark-item-chevron: #AAAAAA;
+  --cmp-gnb-dark-top-icon: #FFFFFF;
+  --cmp-gnb-dark-rail-fg-default: #AAAAAA;
+  --cmp-gnb-top-height: 56px;
+  --cmp-gnb-top-paddingX: 16px;
+  --cmp-gnb-top-gap: 16px;
+  --cmp-gnb-logo-height: 32px;
+  --cmp-gnb-fold-width: 48px;
+  --cmp-gnb-body-padding: 12px;
+  --cmp-gnb-item-paddingY: 6px;
+  --cmp-gnb-item-chevron-size: 12px;
+  --cmp-gnb-box-item-paddingRight: 12px;
+  --cmp-gnb-box-item-gap: 8px;
+  --cmp-gnb-box-item-radius: 8px;
+  --cmp-gnb-box-item-depth1-paddingLeft: 12px;
+  --cmp-gnb-box-item-depth1-icon: 20px;
+  --cmp-gnb-box-item-depth2-paddingLeft: 24px;
+  --cmp-gnb-box-item-depth3-paddingLeft: 36px;
+  --cmp-gnb-belt-item-paddingRight: 20px;
+  --cmp-gnb-belt-item-gap: 8px;
+  --cmp-gnb-belt-item-depth1-paddingLeft: 20px;
+  --cmp-gnb-belt-item-depth1-icon: 16px;
+  --cmp-gnb-belt-item-depth2-paddingLeft: 32px;
+  --cmp-gnb-belt-item-depth3-paddingLeft: 44px;
+  --cmp-gnb-rail-width: 68px;
+  --cmp-gnb-rail-padding: 12px;
+  --cmp-gnb-rail-gap: 16px;
+  --cmp-gnb-rail-item-paddingTop: 4px;
+  --cmp-gnb-rail-item-paddingBottom: 2px;
+  --cmp-gnb-rail-item-radius: 8px;
+  --cmp-gnb-rail-item-icon: 24px;
 }
 @layer components {
   .typo-control-xs-default {
@@ -3893,6 +3939,18 @@
     font-weight: 700;
     line-height: 26px;
   }
+  .typo-navigation-xs-medium {
+    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: 500;
+    line-height: 18px;
+  }
+  .typo-navigation-xs-bold {
+    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-navigation-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;
@@ -4171,6 +4229,10 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-shadow {
   syntax: "*";
   inherits: false;
@@ -4324,6 +4386,7 @@
       --tw-border-style: solid;
       --tw-leading: initial;
       --tw-font-weight: initial;
+      --tw-tracking: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;

package/dist/theme.css

@@ -340,7 +340,6 @@
   --spacing-field-md-height: 36px;
   --spacing-navigation-lg-height: 44px;
   --spacing-navigation-md-height: 36px;
-  --spacing-navigation-gnb-topbar-height: 56px;
   --spacing-table-height-xs: 32px;
   --spacing-table-height-sm: 36px;
   --spacing-table-height-md: 44px;
@@ -419,7 +418,6 @@
   --sys-size-field-md-height: 36px;
   --sys-size-navigation-lg-height: 44px;
   --sys-size-navigation-md-height: 36px;
-  --sys-size-navigation-gnb-topbar-height: 56px;
   --sys-size-table-height-xs: 32px;
   --sys-size-table-height-sm: 36px;
   --sys-size-table-height-md: 44px;
@@ -1212,6 +1210,25 @@
   --cmp-pagination-item-content-hover: #004290;
   --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-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;
   --cmp-tab-main-lg-height: 44px;
   --cmp-tab-main-lg-paddingX: 32px;
   --cmp-tab-main-md-height: 36px;
@@ -1234,73 +1251,56 @@
   --cmp-tab-sub-gap-vertical: 16px;
   --cmp-tab-sub-content-gap: 4px;
   --cmp-tab-sub-item-height: 20px;
-  --cmp-gnbBelt-top-height: 56px;
-  --cmp-gnbBelt-top-paddingX: 12px;
-  --cmp-gnbBelt-top-gap: 8px;
-  --cmp-gnbBelt-logo-height: 32px;
-  --cmp-gnbBelt-body-paddingY: 12px;
-  --cmp-gnbBelt-item-paddingY: 6px;
-  --cmp-gnbBelt-item-paddingRight: 20px;
-  --cmp-gnbBelt-item-gap: 12px;
-  --cmp-gnbBelt-item-icon: 12px;
-  --cmp-gnbBelt-item-depth1-paddingLeft: 20px;
-  --cmp-gnbBelt-item-depth2-paddingLeft: 32px;
-  --cmp-gnbBelt-item-depth3-paddingLeft: 44px;
-  --cmp-gnbBelt-fold-width: 48px;
-  --cmp-gnbBox-top-height: 56px;
-  --cmp-gnbBox-paddingX: 16px;
-  --cmp-gnbBox-gap: 16px;
-  --cmp-gnbBox-button-gap: 8px;
-  --cmp-gnbBox-logo-height: 32px;
-  --cmp-gnbBox-menu-body-padding: 12px;
-  --cmp-gnbBox-item-paddingY: 6px;
-  --cmp-gnbBox-item-paddingRight: 12px;
-  --cmp-gnbBox-item-gap: 8px;
-  --cmp-gnbBox-item-radius: 8px;
-  --cmp-gnbBox-item-arrow: 12px;
-  --cmp-gnbBox-item-depth1-paddingLeft: 12px;
-  --cmp-gnbBox-item-depth1-icon: 20px;
-  --cmp-gnbBox-item-depth2-paddingLeft: 24px;
-  --cmp-gnbBox-item-depth3-paddingLeft: 36px;
-  --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;
-  --cmp-light-bg: #FFFFFF;
-  --cmp-light-divider: #E1E1E1;
-  --cmp-light-item-bg-default: #FFFFFF;
-  --cmp-light-item-bg-hover: #F6F6F6;
-  --cmp-light-item-bg-selected: #EFF6FF;
-  --cmp-light-item-fg-default: #222222;
-  --cmp-light-item-fg-hover: #222222;
-  --cmp-light-item-fg-selected: #0075FF;
-  --cmp-light-item-chevron: #555555;
-  --cmp-light-top-icon: #888888;
-  --cmp-dark-bg: #001B39;
-  --cmp-dark-divider: #004177;
-  --cmp-dark-item-bg-default: #001B39;
-  --cmp-dark-item-bg-hover: #07284A;
-  --cmp-dark-item-bg-selected: #002B5E;
-  --cmp-dark-item-fg-default: #FFFFFF;
-  --cmp-dark-item-fg-hover: #FFFFFF;
-  --cmp-dark-item-fg-selected: #93C4FF;
-  --cmp-dark-item-chevron: #AAAAAA;
-  --cmp-dark-top-icon: #FFFFFF;
+  --cmp-gnb-light-bg: #FFFFFF;
+  --cmp-gnb-light-divider: #E1E1E1;
+  --cmp-gnb-light-item-bg-default: #FFFFFF;
+  --cmp-gnb-light-item-bg-hover: #F6F6F6;
+  --cmp-gnb-light-item-bg-selected: #EFF6FF;
+  --cmp-gnb-light-item-fg-default: #222222;
+  --cmp-gnb-light-item-fg-hover: #222222;
+  --cmp-gnb-light-item-fg-selected: #0075FF;
+  --cmp-gnb-light-item-chevron: #555555;
+  --cmp-gnb-light-top-icon: #888888;
+  --cmp-gnb-light-rail-fg-default: #888888;
+  --cmp-gnb-dark-bg: #001B39;
+  --cmp-gnb-dark-divider: #004177;
+  --cmp-gnb-dark-item-bg-default: #001B39;
+  --cmp-gnb-dark-item-bg-hover: #07284A;
+  --cmp-gnb-dark-item-bg-selected: #002B5E;
+  --cmp-gnb-dark-item-fg-default: #FFFFFF;
+  --cmp-gnb-dark-item-fg-hover: #FFFFFF;
+  --cmp-gnb-dark-item-fg-selected: #93C4FF;
+  --cmp-gnb-dark-item-chevron: #AAAAAA;
+  --cmp-gnb-dark-top-icon: #FFFFFF;
+  --cmp-gnb-dark-rail-fg-default: #AAAAAA;
+  --cmp-gnb-top-height: 56px;
+  --cmp-gnb-top-paddingX: 16px;
+  --cmp-gnb-top-gap: 16px;
+  --cmp-gnb-logo-height: 32px;
+  --cmp-gnb-fold-width: 48px;
+  --cmp-gnb-body-padding: 12px;
+  --cmp-gnb-item-paddingY: 6px;
+  --cmp-gnb-item-chevron-size: 12px;
+  --cmp-gnb-box-item-paddingRight: 12px;
+  --cmp-gnb-box-item-gap: 8px;
+  --cmp-gnb-box-item-radius: 8px;
+  --cmp-gnb-box-item-depth1-paddingLeft: 12px;
+  --cmp-gnb-box-item-depth1-icon: 20px;
+  --cmp-gnb-box-item-depth2-paddingLeft: 24px;
+  --cmp-gnb-box-item-depth3-paddingLeft: 36px;
+  --cmp-gnb-belt-item-paddingRight: 20px;
+  --cmp-gnb-belt-item-gap: 8px;
+  --cmp-gnb-belt-item-depth1-paddingLeft: 20px;
+  --cmp-gnb-belt-item-depth1-icon: 16px;
+  --cmp-gnb-belt-item-depth2-paddingLeft: 32px;
+  --cmp-gnb-belt-item-depth3-paddingLeft: 44px;
+  --cmp-gnb-rail-width: 68px;
+  --cmp-gnb-rail-padding: 12px;
+  --cmp-gnb-rail-gap: 16px;
+  --cmp-gnb-rail-item-paddingTop: 4px;
+  --cmp-gnb-rail-item-paddingBottom: 2px;
+  --cmp-gnb-rail-item-radius: 8px;
+  --cmp-gnb-rail-item-icon: 24px;
 }
 
 /* 타이포그래피 프리셋 */
@@ -1490,6 +1490,18 @@
     font-weight: 700;
     line-height: 26px;
   }
+  .typo-navigation-xs-medium {
+    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: 500;
+    line-height: 18px;
+  }
+  .typo-navigation-xs-bold {
+    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-navigation-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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sellmate-design-system-react",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Sellmate Design System — React (TypeScript + Tailwind v4) port",
   "license": "UNLICENSED",
   "keywords": [
@@ -40,6 +40,9 @@
     "build:css": "cp ./src/styles/theme.css ./dist/theme.css && tailwindcss -i ./src/styles/entry.css -o ./dist/styles.css",
     "dev": "tsup --watch",
     "playground": "vite --config vite.playground.config.ts",
+    "playground:next:install": "npm --prefix playground-next install",
+    "playground:next": "npm run playground:next:install && npm run build && npm --prefix playground-next run dev",
+    "playground:next:build": "npm run playground:next:install && npm run build && npm --prefix playground-next run build",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "test:spec": "npm run build && node --test ./src/components/**/*.test.mjs",