sellmate-design-system-react 0.10.0 → 0.12.0

package/dist/styles.css

@@ -165,6 +165,7 @@
     --color-bg-accent: #0075FF;
     --color-bg-accentLight: #2D8DFF;
     --color-bg-accentBright: #D9EAFF;
+    --color-bg-accentFaint: #EFF6FF;
     --color-bg-deep: #07284A;
     --color-bg-danger: #E30000;
     --color-bg-dangerLight: #FB4444;
@@ -822,6 +823,9 @@
   .block {
     display: block;
   }
+  .contents {
+    display: contents;
+  }
   .flex {
     display: flex;
   }
@@ -948,6 +952,12 @@
   .min-h-0 {
     min-height: 0;
   }
+  .min-h-8 {
+    min-height: var(--spacing-8);
+  }
+  .min-h-10 {
+    min-height: var(--spacing-10);
+  }
   .min-h-\[14px\] {
     min-height: 14px;
   }
@@ -1020,6 +1030,9 @@
   .w-\[328px\] {
     width: 328px;
   }
+  .w-\[500px\] {
+    width: 500px;
+  }
   .w-\[var\(--cmp-checkbox-size\)\] {
     width: var(--cmp-checkbox-size);
   }
@@ -1199,6 +1212,9 @@
   .items-center {
     align-items: center;
   }
+  .items-end {
+    align-items: flex-end;
+  }
   .items-start {
     align-items: flex-start;
   }
@@ -1310,6 +1326,9 @@
   .gap-\[var\(--cmp-datepicker-calendar-time-unit-gap\)\] {
     gap: var(--cmp-datepicker-calendar-time-unit-gap);
   }
+  .gap-\[var\(--cmp-expansionItem-title-gap\)\] {
+    gap: var(--cmp-expansionItem-title-gap);
+  }
   .gap-\[var\(--cmp-filepicker-md-gap\)\] {
     gap: var(--cmp-filepicker-md-gap);
   }
@@ -1433,6 +1452,9 @@
   .rounded-\[8px\] {
     border-radius: 8px;
   }
+  .rounded-\[24px\] {
+    border-radius: 24px;
+  }
   .rounded-\[inherit\] {
     border-radius: inherit;
   }
@@ -1634,12 +1656,18 @@
   .border-\[color\:var\(--rd-border\)\] {
     border-color: var(--rd-border);
   }
+  .border-\[var\(--cmp-expansionItem-title-border\)\] {
+    border-color: var(--cmp-expansionItem-title-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-\[var\(--sys-color-border-default\)\] {
+    border-color: var(--sys-color-border-default);
+  }
   .border-gray-200 {
     border-color: var(--color-gray-200);
   }
@@ -1700,6 +1728,15 @@
   .bg-\[var\(--cmp-datepicker-calendar-time-bg-selected\)\] {
     background-color: var(--cmp-datepicker-calendar-time-bg-selected);
   }
+  .bg-\[var\(--cmp-expansionItem-body-bg\)\] {
+    background-color: var(--cmp-expansionItem-body-bg);
+  }
+  .bg-\[var\(--cmp-expansionItem-title-bg-default\)\] {
+    background-color: var(--cmp-expansionItem-title-bg-default);
+  }
+  .bg-\[var\(--cmp-expansionItem-title-bg-expanded\)\] {
+    background-color: var(--cmp-expansionItem-title-bg-expanded);
+  }
   .bg-\[var\(--cmp-listBox-bg\)\] {
     background-color: var(--cmp-listBox-bg);
   }
@@ -1748,6 +1785,9 @@
   .bg-\[var\(--rd-bg\)\] {
     background-color: var(--rd-bg);
   }
+  .bg-\[var\(--sys-color-bg-accent\)\] {
+    background-color: var(--sys-color-bg-accent);
+  }
   .bg-\[var\(--sys-color-bg-frame\)\] {
     background-color: var(--sys-color-bg-frame);
   }
@@ -1823,9 +1863,15 @@
   .p-\[12px\] {
     padding: 12px;
   }
+  .p-\[16px\] {
+    padding: 16px;
+  }
   .p-\[var\(--cmp-datepicker-calendar-paddingXY\)\] {
     padding: var(--cmp-datepicker-calendar-paddingXY);
   }
+  .p-\[var\(--cmp-expansionItem-body-padding\)\] {
+    padding: var(--cmp-expansionItem-body-padding);
+  }
   .px-\(--cmp-chipInput-md-paddingX\) {
     padding-inline: var(--cmp-chipInput-md-paddingX);
   }
@@ -1919,6 +1965,9 @@
   .py-2 {
     padding-block: var(--spacing-2);
   }
+  .py-3 {
+    padding-block: calc(var(--spacing) * 3);
+  }
   .py-4 {
     padding-block: var(--spacing-4);
   }
@@ -1955,6 +2004,12 @@
   .py-\[var\(--cmp-datepicker-calendar-time-paddingY\)\] {
     padding-block: var(--cmp-datepicker-calendar-time-paddingY);
   }
+  .py-\[var\(--cmp-expansionItem-title-paddingY-dense\)\] {
+    padding-block: var(--cmp-expansionItem-title-paddingY-dense);
+  }
+  .py-\[var\(--cmp-expansionItem-title-paddingY-normal\)\] {
+    padding-block: var(--cmp-expansionItem-title-paddingY-normal);
+  }
   .py-\[var\(--cmp-modal-action-footer-paddingY\)\] {
     padding-block: var(--cmp-modal-action-footer-paddingY);
   }
@@ -1979,6 +2034,9 @@
   .pr-\[calc\(var\(--cmp-overlay-header-paddingX\)\+20px\)\] {
     padding-right: calc(var(--cmp-overlay-header-paddingX) + 20px);
   }
+  .pr-\[var\(--cmp-expansionItem-title-paddingX\)\] {
+    padding-right: var(--cmp-expansionItem-title-paddingX);
+  }
   .pb-\[var\(--cmp-modal-action-body-paddingBottom\)\] {
     padding-bottom: var(--cmp-modal-action-body-paddingBottom);
   }
@@ -1988,6 +2046,15 @@
   .pl-\[32px\] {
     padding-left: 32px;
   }
+  .pl-\[calc\(var\(--cmp-expansionItem-title-paddingX\)\+32px\)\] {
+    padding-left: calc(var(--cmp-expansionItem-title-paddingX) + 32px);
+  }
+  .pl-\[calc\(var\(--cmp-expansionItem-title-paddingX\)\+64px\)\] {
+    padding-left: calc(var(--cmp-expansionItem-title-paddingX) + 64px);
+  }
+  .pl-\[var\(--cmp-expansionItem-title-paddingX\)\] {
+    padding-left: var(--cmp-expansionItem-title-paddingX);
+  }
   .pl-\[var\(--cmp-overlay-header-paddingX\)\] {
     padding-left: var(--cmp-overlay-header-paddingX);
   }
@@ -2286,6 +2353,12 @@
   .text-\[color\:var\(--sys-color-fg-secondary\)\] {
     color: var(--sys-color-fg-secondary);
   }
+  .text-\[var\(--cmp-expansionItem-title-text-default\)\] {
+    color: var(--cmp-expansionItem-title-text-default);
+  }
+  .text-\[var\(--cmp-expansionItem-title-text-expanded\)\] {
+    color: var(--cmp-expansionItem-title-text-expanded);
+  }
   .text-\[var\(--cmp-field-hint-color\)\] {
     color: var(--cmp-field-hint-color);
   }
@@ -2295,6 +2368,18 @@
   .text-\[var\(--cmp-timepicker-selector-range-heading-color\)\] {
     color: var(--cmp-timepicker-selector-range-heading-color);
   }
+  .text-\[var\(--sys-color-fg-inverse\)\] {
+    color: var(--sys-color-fg-inverse);
+  }
+  .text-\[var\(--sys-color-fg-primary\)\] {
+    color: var(--sys-color-fg-primary);
+  }
+  .text-\[var\(--sys-color-fg-secondary\)\] {
+    color: var(--sys-color-fg-secondary);
+  }
+  .text-\[var\(--sys-color-fg-tertiary\)\] {
+    color: var(--sys-color-fg-tertiary);
+  }
   .text-blue-strong {
     color: var(--color-blue-strong);
   }
@@ -2498,6 +2583,13 @@
       }
     }
   }
+  .group-hover\/row\:opacity-100 {
+    &:is(:where(.group\/row):hover *) {
+      @media (hover: hover) {
+        opacity: 100%;
+      }
+    }
+  }
   .placeholder\:text-\(--cmp-chipInput-text-placeholder\) {
     &::placeholder {
       color: var(--cmp-chipInput-text-placeholder);
@@ -2694,6 +2786,13 @@
       }
     }
   }
+  .hover\:bg-\[var\(--cmp-expansionItem-title-bg-hover\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--cmp-expansionItem-title-bg-hover);
+      }
+    }
+  }
   .hover\:bg-\[var\(--cmp-listItem-bg-hover\)\] {
     &:hover {
       @media (hover: hover) {
@@ -2729,6 +2828,13 @@
       }
     }
   }
+  .hover\:bg-\[var\(--sys-color-bg-neutralLight\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--sys-color-bg-neutralLight);
+      }
+    }
+  }
   .hover\:bg-gray-100 {
     &:hover {
       @media (hover: hover) {
@@ -2827,6 +2933,23 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .focus-visible\:outline {
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 1px;
+    }
+  }
+  .focus-visible\:outline-2 {
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+    }
+  }
+  .focus-visible\:outline-\[var\(--sys-color-border-accent\)\] {
+    &:focus-visible {
+      outline-color: var(--sys-color-border-accent);
+    }
+  }
   .focus-visible\:outline-none {
     &:focus-visible {
       --tw-outline-style: none;
@@ -2843,6 +2966,11 @@
       color: var(--cmp-listItem-content-disabled);
     }
   }
+  .disabled\:text-\[var\(--sys-color-disabled-text\)\] {
+    &:disabled {
+      color: var(--sys-color-disabled-text);
+    }
+  }
   .data-\[disabled\]\:cursor-not-allowed {
     &[data-disabled] {
       cursor: not-allowed;
@@ -3118,6 +3246,16 @@
       border-left: 1px solid var(--sys-color-border-default);
     }
   }
+  .\[\&\>button\]\:bg-\[var\(--sys-color-bg-tableHeader\)\] {
+    &>button {
+      background-color: var(--sys-color-bg-tableHeader);
+    }
+  }
+  .\[\&\>button\]\:text-\[var\(--sys-color-fg-brand\)\] {
+    &>button {
+      color: var(--sys-color-fg-brand);
+    }
+  }
 }
 :root {
   --sys-size-control-xs-height: 24px;
@@ -3203,6 +3341,7 @@
   --sys-color-bg-accent: #0075FF;
   --sys-color-bg-accentLight: #2D8DFF;
   --sys-color-bg-accentBright: #D9EAFF;
+  --sys-color-bg-accentFaint: #EFF6FF;
   --sys-color-bg-deep: #07284A;
   --sys-color-bg-danger: #E30000;
   --sys-color-bg-dangerLight: #FB4444;
@@ -3342,7 +3481,7 @@
   --cmp-ghostButton-inverse-content: #FFFFFF;
   --cmp-ghostButton-inverse-disabled: #E1E1E1;
   --cmp-ghostButton-inverse-hover-bg: #FFFFFF;
-  --cmp-ghostButton-group-gap: 8px;
+  --cmp-ghostButton-group-gap: 4px;
   --cmp-textLink-sm-gap: 4px;
   --cmp-textLink-sm-icon: 16px;
   --cmp-textLink-md-gap: 8px;
@@ -3663,10 +3802,20 @@
   --cmp-chip-content-disabled: #888888;
   --cmp-chip-border-focus: #E1E1E1;
   --cmp-chip-border-width: 1px;
+  --cmp-timepicker-sm-height: 28px;
+  --cmp-timepicker-sm-paddingX: 12px;
+  --cmp-timepicker-sm-gap: 8px;
+  --cmp-timepicker-sm-icon: 16px;
+  --cmp-timepicker-sm-radius: 4px;
+  --cmp-timepicker-md-height: 36px;
+  --cmp-timepicker-md-paddingX: 16px;
+  --cmp-timepicker-md-gap: 12px;
+  --cmp-timepicker-md-icon: 20px;
+  --cmp-timepicker-md-radius: 6px;
+  --cmp-timepicker-border-width: 1px;
   --cmp-timepicker-border-default: #AAAAAA;
   --cmp-timepicker-border-focus: #0075FF;
   --cmp-timepicker-border-disabled: #CCCCCC;
-  --cmp-timepicker-border-width: 1px;
   --cmp-timepicker-bg-default: #FFFFFF;
   --cmp-timepicker-bg-disabled: #E1E1E1;
   --cmp-timepicker-icon-default: #888888;
@@ -3674,11 +3823,6 @@
   --cmp-timepicker-text-default: #222222;
   --cmp-timepicker-text-disabled: #888888;
   --cmp-timepicker-selector-bg: #FFFFFF;
-  --cmp-timepicker-selector-range-heading-color: #555555;
-  --cmp-timepicker-selector-range-heading-gap: 16px;
-  --cmp-timepicker-selector-range-paddingXY: 24px;
-  --cmp-timepicker-selector-range-panelGap: 24px;
-  --cmp-timepicker-selector-range-section-gap: 12px;
   --cmp-timepicker-selector-radius: 8px;
   --cmp-timepicker-selector-section-paddingX: 16px;
   --cmp-timepicker-selector-section-paddingY: 12px;
@@ -3686,16 +3830,11 @@
   --cmp-timepicker-selector-time-column-gap: 8px;
   --cmp-timepicker-selector-input-width: 40px;
   --cmp-timepicker-selector-colon-size: 16px;
-  --cmp-timepicker-sm-height: 28px;
-  --cmp-timepicker-sm-paddingX: 12px;
-  --cmp-timepicker-sm-gap: 8px;
-  --cmp-timepicker-sm-icon: 16px;
-  --cmp-timepicker-sm-radius: 4px;
-  --cmp-timepicker-md-height: 36px;
-  --cmp-timepicker-md-paddingX: 16px;
-  --cmp-timepicker-md-gap: 12px;
-  --cmp-timepicker-md-icon: 20px;
-  --cmp-timepicker-md-radius: 6px;
+  --cmp-timepicker-selector-range-paddingXY: 24px;
+  --cmp-timepicker-selector-range-panelGap: 24px;
+  --cmp-timepicker-selector-range-heading-color: #555555;
+  --cmp-timepicker-selector-range-heading-gap: 16px;
+  --cmp-timepicker-selector-range-section-gap: 12px;
   --cmp-tag-xs-height: 20px;
   --cmp-tag-xs-paddingX: 8px;
   --cmp-tag-xs-gap: 4px;
@@ -3896,10 +4035,9 @@
   --cmp-table-header-resizingBar-color: #CCCCCC;
   --cmp-table-header-resizingBar-height: 16px;
   --cmp-table-body-default-height: 44px;
-  --cmp-table-body-default-paddingY: 8px;
   --cmp-table-body-dense-height: 32px;
-  --cmp-table-body-paddingY-dense: 6px;
   --cmp-table-body-paddingY-default: 8px;
+  --cmp-table-body-paddingY-dense: 6px;
   --cmp-table-body-paddingX-default: 8px;
   --cmp-table-body-paddingX-wide: 16px;
   --cmp-table-border-color: #E1E1E1;
@@ -4023,6 +4161,19 @@
   --cmp-gnb-rail-item-radius: 8px;
   --cmp-gnb-rail-item-icon: 24px;
   --cmp-gnb-rail-item-width: 44px;
+  --cmp-expansionItem-title-paddingX: 16px;
+  --cmp-expansionItem-title-paddingY-normal: 8px;
+  --cmp-expansionItem-title-paddingY-dense: 4px;
+  --cmp-expansionItem-title-gap: 12px;
+  --cmp-expansionItem-title-icon: 12px;
+  --cmp-expansionItem-title-border: #E1E1E1;
+  --cmp-expansionItem-title-bg-default: #FFFFFF;
+  --cmp-expansionItem-title-bg-hover: #F9F9F9;
+  --cmp-expansionItem-title-bg-expanded: #EFF6FF;
+  --cmp-expansionItem-title-text-default: #222222;
+  --cmp-expansionItem-title-text-expanded: #005CC9;
+  --cmp-expansionItem-body-bg: #FFFFFF;
+  --cmp-expansionItem-body-padding: 16px;
 }
 @layer base {
   *::-webkit-scrollbar {
@@ -4298,6 +4449,66 @@
     font-weight: 700;
     line-height: 20px;
   }
+  .typo-body-xs-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: 11px;
+    font-weight: 400;
+    line-height: 18px;
+  }
+  .typo-body-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: 400;
+    line-height: 20px;
+  }
+  .typo-body-sm-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: 12px;
+    font-weight: 500;
+    line-height: 20px;
+  }
+  .typo-body-sm-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: 12px;
+    font-weight: 700;
+    line-height: 20px;
+  }
+  .typo-body-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: 400;
+    line-height: 24px;
+  }
+  .typo-body-md-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: 14px;
+    font-weight: 500;
+    line-height: 24px;
+  }
+  .typo-body-md-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: 14px;
+    font-weight: 700;
+    line-height: 24px;
+  }
+  .typo-body-lg-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: 16px;
+    font-weight: 400;
+    line-height: 26px;
+  }
+  .typo-body-lg-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: 16px;
+    font-weight: 500;
+    line-height: 26px;
+  }
+  .typo-body-lg-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: 16px;
+    font-weight: 700;
+    line-height: 26px;
+  }
 }
 @keyframes linear-indeterminate {
   0% {

package/dist/theme.css

@@ -133,6 +133,7 @@
   --color-bg-accent: #0075FF;
   --color-bg-accentLight: #2D8DFF;
   --color-bg-accentBright: #D9EAFF;
+  --color-bg-accentFaint: #EFF6FF;
   --color-bg-deep: #07284A;
   --color-bg-danger: #E30000;
   --color-bg-dangerLight: #FB4444;
@@ -479,6 +480,7 @@
   --sys-color-bg-accent: #0075FF;
   --sys-color-bg-accentLight: #2D8DFF;
   --sys-color-bg-accentBright: #D9EAFF;
+  --sys-color-bg-accentFaint: #EFF6FF;
   --sys-color-bg-deep: #07284A;
   --sys-color-bg-danger: #E30000;
   --sys-color-bg-dangerLight: #FB4444;
@@ -620,7 +622,7 @@
   --cmp-ghostButton-inverse-content: #FFFFFF;
   --cmp-ghostButton-inverse-disabled: #E1E1E1;
   --cmp-ghostButton-inverse-hover-bg: #FFFFFF;
-  --cmp-ghostButton-group-gap: 8px;
+  --cmp-ghostButton-group-gap: 4px;
   --cmp-textLink-sm-gap: 4px;
   --cmp-textLink-sm-icon: 16px;
   --cmp-textLink-md-gap: 8px;
@@ -941,10 +943,20 @@
   --cmp-chip-content-disabled: #888888;
   --cmp-chip-border-focus: #E1E1E1;
   --cmp-chip-border-width: 1px;
+  --cmp-timepicker-sm-height: 28px;
+  --cmp-timepicker-sm-paddingX: 12px;
+  --cmp-timepicker-sm-gap: 8px;
+  --cmp-timepicker-sm-icon: 16px;
+  --cmp-timepicker-sm-radius: 4px;
+  --cmp-timepicker-md-height: 36px;
+  --cmp-timepicker-md-paddingX: 16px;
+  --cmp-timepicker-md-gap: 12px;
+  --cmp-timepicker-md-icon: 20px;
+  --cmp-timepicker-md-radius: 6px;
+  --cmp-timepicker-border-width: 1px;
   --cmp-timepicker-border-default: #AAAAAA;
   --cmp-timepicker-border-focus: #0075FF;
   --cmp-timepicker-border-disabled: #CCCCCC;
-  --cmp-timepicker-border-width: 1px;
   --cmp-timepicker-bg-default: #FFFFFF;
   --cmp-timepicker-bg-disabled: #E1E1E1;
   --cmp-timepicker-icon-default: #888888;
@@ -952,11 +964,6 @@
   --cmp-timepicker-text-default: #222222;
   --cmp-timepicker-text-disabled: #888888;
   --cmp-timepicker-selector-bg: #FFFFFF;
-  --cmp-timepicker-selector-range-heading-color: #555555;
-  --cmp-timepicker-selector-range-heading-gap: 16px;
-  --cmp-timepicker-selector-range-paddingXY: 24px;
-  --cmp-timepicker-selector-range-panelGap: 24px;
-  --cmp-timepicker-selector-range-section-gap: 12px;
   --cmp-timepicker-selector-radius: 8px;
   --cmp-timepicker-selector-section-paddingX: 16px;
   --cmp-timepicker-selector-section-paddingY: 12px;
@@ -964,16 +971,11 @@
   --cmp-timepicker-selector-time-column-gap: 8px;
   --cmp-timepicker-selector-input-width: 40px;
   --cmp-timepicker-selector-colon-size: 16px;
-  --cmp-timepicker-sm-height: 28px;
-  --cmp-timepicker-sm-paddingX: 12px;
-  --cmp-timepicker-sm-gap: 8px;
-  --cmp-timepicker-sm-icon: 16px;
-  --cmp-timepicker-sm-radius: 4px;
-  --cmp-timepicker-md-height: 36px;
-  --cmp-timepicker-md-paddingX: 16px;
-  --cmp-timepicker-md-gap: 12px;
-  --cmp-timepicker-md-icon: 20px;
-  --cmp-timepicker-md-radius: 6px;
+  --cmp-timepicker-selector-range-paddingXY: 24px;
+  --cmp-timepicker-selector-range-panelGap: 24px;
+  --cmp-timepicker-selector-range-heading-color: #555555;
+  --cmp-timepicker-selector-range-heading-gap: 16px;
+  --cmp-timepicker-selector-range-section-gap: 12px;
   --cmp-tag-xs-height: 20px;
   --cmp-tag-xs-paddingX: 8px;
   --cmp-tag-xs-gap: 4px;
@@ -1174,10 +1176,9 @@
   --cmp-table-header-resizingBar-color: #CCCCCC;
   --cmp-table-header-resizingBar-height: 16px;
   --cmp-table-body-default-height: 44px;
-  --cmp-table-body-default-paddingY: 8px;
   --cmp-table-body-dense-height: 32px;
-  --cmp-table-body-paddingY-dense: 6px;
   --cmp-table-body-paddingY-default: 8px;
+  --cmp-table-body-paddingY-dense: 6px;
   --cmp-table-body-paddingX-default: 8px;
   --cmp-table-body-paddingX-wide: 16px;
   --cmp-table-border-color: #E1E1E1;
@@ -1301,6 +1302,19 @@
   --cmp-gnb-rail-item-radius: 8px;
   --cmp-gnb-rail-item-icon: 24px;
   --cmp-gnb-rail-item-width: 44px;
+  --cmp-expansionItem-title-paddingX: 16px;
+  --cmp-expansionItem-title-paddingY-normal: 8px;
+  --cmp-expansionItem-title-paddingY-dense: 4px;
+  --cmp-expansionItem-title-gap: 12px;
+  --cmp-expansionItem-title-icon: 12px;
+  --cmp-expansionItem-title-border: #E1E1E1;
+  --cmp-expansionItem-title-bg-default: #FFFFFF;
+  --cmp-expansionItem-title-bg-hover: #F9F9F9;
+  --cmp-expansionItem-title-bg-expanded: #EFF6FF;
+  --cmp-expansionItem-title-text-default: #222222;
+  --cmp-expansionItem-title-text-expanded: #005CC9;
+  --cmp-expansionItem-body-bg: #FFFFFF;
+  --cmp-expansionItem-body-padding: 16px;
 }
 
 /* 전역 스크롤바 — overflow(auto/scroll)로 스크롤이 생기는 모든 요소에 SScrollArea 기본 스크롤바를 자동 적용.
@@ -1584,6 +1598,66 @@
     font-weight: 700;
     line-height: 20px;
   }
+  .typo-body-xs-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: 11px;
+    font-weight: 400;
+    line-height: 18px;
+  }
+  .typo-body-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: 400;
+    line-height: 20px;
+  }
+  .typo-body-sm-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: 12px;
+    font-weight: 500;
+    line-height: 20px;
+  }
+  .typo-body-sm-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: 12px;
+    font-weight: 700;
+    line-height: 20px;
+  }
+  .typo-body-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: 400;
+    line-height: 24px;
+  }
+  .typo-body-md-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: 14px;
+    font-weight: 500;
+    line-height: 24px;
+  }
+  .typo-body-md-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: 14px;
+    font-weight: 700;
+    line-height: 24px;
+  }
+  .typo-body-lg-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: 16px;
+    font-weight: 400;
+    line-height: 26px;
+  }
+  .typo-body-lg-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: 16px;
+    font-weight: 500;
+    line-height: 26px;
+  }
+  .typo-body-lg-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: 16px;
+    font-weight: 700;
+    line-height: 26px;
+  }
 }
 
 /* 컴포넌트 공용 애니메이션 (progress 등) */

package/package.json

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