sellmate-design-system-react 0.9.0 → 0.11.0

package/dist/styles.css

@@ -25,6 +25,8 @@
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
     --text-xl: 1.25rem;
     --text-xl--line-height: calc(1.75 / 1.25);
     --font-weight-normal: 400;
@@ -163,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;
@@ -820,6 +823,9 @@
   .block {
     display: block;
   }
+  .contents {
+    display: contents;
+  }
   .flex {
     display: flex;
   }
@@ -946,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;
   }
@@ -1018,6 +1030,9 @@
   .w-\[328px\] {
     width: 328px;
   }
+  .w-\[500px\] {
+    width: 500px;
+  }
   .w-\[var\(--cmp-checkbox-size\)\] {
     width: var(--cmp-checkbox-size);
   }
@@ -1197,6 +1212,9 @@
   .items-center {
     align-items: center;
   }
+  .items-end {
+    align-items: flex-end;
+  }
   .items-start {
     align-items: flex-start;
   }
@@ -1224,6 +1242,9 @@
   .gap-2 {
     gap: var(--spacing-2);
   }
+  .gap-3 {
+    gap: calc(var(--spacing) * 3);
+  }
   .gap-4 {
     gap: var(--spacing-4);
   }
@@ -1305,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);
   }
@@ -1428,6 +1452,9 @@
   .rounded-\[8px\] {
     border-radius: 8px;
   }
+  .rounded-\[24px\] {
+    border-radius: 24px;
+  }
   .rounded-\[inherit\] {
     border-radius: inherit;
   }
@@ -1581,6 +1608,9 @@
   .border-\(--field-bc\) {
     border-color: var(--field-bc);
   }
+  .border-\[\#E1E1E1\] {
+    border-color: #E1E1E1;
+  }
   .border-\[color\:var\(--btn-border\)\] {
     border-color: var(--btn-border);
   }
@@ -1626,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);
   }
@@ -1653,6 +1689,9 @@
   .bg-\(--cmp-listItem-bg-hover\) {
     background-color: var(--cmp-listItem-bg-hover);
   }
+  .bg-\[\#F2F2F2\] {
+    background-color: #F2F2F2;
+  }
   .bg-\[var\(--btn-bg\)\] {
     background-color: var(--btn-bg);
   }
@@ -1689,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);
   }
@@ -1737,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);
   }
@@ -1812,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);
   }
@@ -1908,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);
   }
@@ -1944,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);
   }
@@ -1968,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);
   }
@@ -1977,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);
   }
@@ -1992,6 +2070,10 @@
   .align-middle {
     vertical-align: middle;
   }
+  .text-base {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+  }
   .text-sm {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -2031,6 +2113,9 @@
   .text-\[12px\] {
     font-size: 12px;
   }
+  .text-\[13px\] {
+    font-size: 13px;
+  }
   .text-\[14px\] {
     font-size: 14px;
   }
@@ -2169,6 +2254,12 @@
   .text-\[\#0A0A0A\] {
     color: #0A0A0A;
   }
+  .text-\[\#666\] {
+    color: #666;
+  }
+  .text-\[\#374151\] {
+    color: #374151;
+  }
   .text-\[color\:var\(--cmp-datepicker-calendar-day-default-text\)\] {
     color: var(--cmp-datepicker-calendar-day-default-text);
   }
@@ -2262,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);
   }
@@ -2271,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);
   }
@@ -2474,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);
@@ -2670,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) {
@@ -2705,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) {
@@ -2803,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;
@@ -2819,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;
@@ -3094,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;
@@ -3179,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;
@@ -3318,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;
@@ -3639,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;
@@ -3650,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;
@@ -3662,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;
@@ -3872,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;
@@ -3999,6 +4161,41 @@
   --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 {
+    width: 12px;
+    height: 12px;
+    background: transparent;
+  }
+  *::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  *::-webkit-scrollbar-thumb {
+    background-color: var(--color-grey-45);
+    border: 2px solid transparent;
+    border-radius: 9999px;
+    background-clip: padding-box;
+  }
+  @supports not selector(::-webkit-scrollbar) {
+    * {
+      scrollbar-width: thin;
+      scrollbar-color: var(--color-grey-45) transparent;
+    }
+  }
 }
 @layer components {
   .typo-control-xs-default {
@@ -4252,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% {