sellmate-design-system-react 2.1.0 → 2.1.2

package/dist/styles.css

@@ -190,20 +190,22 @@
     --color-fg-success: #00973C;
     --color-fg-dangerLight: #FB4444;
     --color-fg-accent: #0075FF;
+    --color-fg-accentLight: #64ABFF;
     --color-fg-danger: #E30000;
     --color-fg-warning: #FF6B00;
     --color-fg-inverse: #FFFFFF;
+    --color-border-default: #E1E1E1;
+    --color-border-strong: #AAAAAA;
+    --color-border-accent: #0075FF;
+    --color-border-accentLight: #93C4FF;
+    --color-border-danger: #FB4444;
+    --color-border-success: #12B553;
     --color-disabled-bg: #E1E1E1;
     --color-disabled-text: #888888;
     --color-disabled-icon: #BBBBBB;
     --color-disabled-border: #CCCCCC;
     --color-link-accent: #006AC1;
     --color-divider-default: #E1E1E1;
-    --color-border-default: #E1E1E1;
-    --color-border-accent: #0075FF;
-    --color-border-accentLight: #93C4FF;
-    --color-border-danger: #FB4444;
-    --color-border-success: #12B553;
     --color-red-strong: #FB4444;
     --color-red-subtle: #FCEFEF;
     --color-orange-strong: #FF6B00;
@@ -213,6 +215,8 @@
     --color-yellow-subtle: #FFF7DD;
     --color-green-strong: #00973C;
     --color-green-subtle: #E8F9EF;
+    --color-lightblue-strong: #64ABFF;
+    --color-lightblue-subtle: #EFF6FF;
     --color-blue-strong: #0075FF;
     --color-blue-subtle: #E6F1FF;
     --color-darkblue-strong: #006AC1;
@@ -349,6 +353,10 @@
     --spacing-overlay-paddingX-md: 24px;
     --spacing-overlay-paddingY-sm: 8px;
     --spacing-panel-gap: 12px;
+    --spacing-item-paddingX: 16px;
+    --spacing-item-paddingY-normal: 8px;
+    --spacing-item-paddingY-dense: 4px;
+    --spacing-item-gap: 12px;
     --spacing-44: 44px;
     --spacing-56: 56px;
     --spacing-62: 62px;
@@ -378,6 +386,7 @@
     --spacing-table-height-xs: 32px;
     --spacing-table-height-sm: 36px;
     --spacing-table-height-md: 44px;
+    --spacing-item-accentStripe-width: 2px;
     --radius-2: 2px;
     --radius-4: 4px;
     --radius-6: 6px;
@@ -391,6 +400,7 @@
     --radius-field-sm: 4px;
     --radius-field-md: 6px;
     --radius-navigation: 6px;
+    --radius-item-bordered: 8px;
     --text-10: 10px;
     --text-11: 11px;
     --text-12: 12px;
@@ -410,8 +420,10 @@
     --border-width-control-default: 1px;
     --border-width-field-default: 1px;
     --border-width-navigation-default: 1px;
+    --border-width-item-default: 1px;
     --opacity-005: 5%;
     --opacity-040: 40%;
+    --opacity-060: 60%;
     --z-raised: 1;
     --shadow-normal-xs: 0px 0px 16px -4px rgba(34,34,34,0.12), 2px 4px 6px -2px rgba(34,34,34,0.1);
     --shadow-normal-sm: 0px 0px 24px -6px rgba(34,34,34,0.12), 4px 8px 16px -4px rgba(34,34,34,0.1);
@@ -1265,12 +1277,12 @@
   .gap-\(--cmp-chipInput-chip-gap\) {
     gap: var(--cmp-chipInput-chip-gap);
   }
-  .gap-\(--cmp-expansionItem-title-gap\) {
-    gap: var(--cmp-expansionItem-title-gap);
-  }
   .gap-\(--cmp-field-addonLabel-gap\) {
     gap: var(--cmp-field-addonLabel-gap);
   }
+  .gap-\(--cmp-listExpansionItem-title-gap\) {
+    gap: var(--cmp-listExpansionItem-title-gap);
+  }
   .gap-2 {
     gap: var(--spacing-2);
   }
@@ -1650,8 +1662,8 @@
   .\!border-\[\#93C4FF\] {
     border-color: #93C4FF !important;
   }
-  .border-\(--cmp-expansionItem-title-border\) {
-    border-color: var(--cmp-expansionItem-title-border);
+  .border-\(--cmp-listExpansionItem-title-border\) {
+    border-color: var(--cmp-listExpansionItem-title-border);
   }
   .border-\(--field-bc\) {
     border-color: var(--field-bc);
@@ -1680,8 +1692,8 @@
   .border-\[color\:var\(--cmp-datepicker-border-default\)\] {
     border-color: var(--cmp-datepicker-border-default);
   }
-  .border-\[color\:var\(--cmp-listItem-depth1-border-color\)\] {
-    border-color: var(--cmp-listItem-depth1-border-color);
+  .border-\[color\:var\(--cmp-listBoxItem-depth1-border-color\)\] {
+    border-color: var(--cmp-listBoxItem-depth1-border-color);
   }
   .border-\[color\:var\(--cmp-table-border-color\)\] {
     border-color: var(--cmp-table-border-color);
@@ -1734,14 +1746,14 @@
   .border-transparent {
     border-color: transparent;
   }
-  .bg-\(--cmp-expansionItem-title-bg-expanded\) {
-    background-color: var(--cmp-expansionItem-title-bg-expanded);
-  }
   .bg-\(--cmp-listBox-bg\) {
     background-color: var(--cmp-listBox-bg);
   }
-  .bg-\(--cmp-listItem-bg-hover\) {
-    background-color: var(--cmp-listItem-bg-hover);
+  .bg-\(--cmp-listBoxItem-bg-hover\) {
+    background-color: var(--cmp-listBoxItem-bg-hover);
+  }
+  .bg-\(--cmp-listExpansionItem-title-bg-expanded\) {
+    background-color: var(--cmp-listExpansionItem-title-bg-expanded);
   }
   .bg-\[\#F2F2F2\] {
     background-color: #F2F2F2;
@@ -1782,26 +1794,26 @@
   .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-listBox-bg\)\] {
     background-color: var(--cmp-listBox-bg);
   }
-  .bg-\[var\(--cmp-listItem-bg-hover\)\] {
-    background-color: var(--cmp-listItem-bg-hover);
+  .bg-\[var\(--cmp-listBoxItem-bg-hover\)\] {
+    background-color: var(--cmp-listBoxItem-bg-hover);
   }
-  .bg-\[var\(--cmp-listItem-depth1-bg-default\)\] {
-    background-color: var(--cmp-listItem-depth1-bg-default);
+  .bg-\[var\(--cmp-listBoxItem-depth1-bg-default\)\] {
+    background-color: var(--cmp-listBoxItem-depth1-bg-default);
   }
-  .bg-\[var\(--cmp-listItem-depth1-bg-disabled\)\] {
-    background-color: var(--cmp-listItem-depth1-bg-disabled);
+  .bg-\[var\(--cmp-listBoxItem-depth1-bg-disabled\)\] {
+    background-color: var(--cmp-listBoxItem-depth1-bg-disabled);
   }
-  .bg-\[var\(--cmp-listItem-depth2-middle-bg\)\] {
-    background-color: var(--cmp-listItem-depth2-middle-bg);
+  .bg-\[var\(--cmp-listBoxItem-depth2-middle-bg\)\] {
+    background-color: var(--cmp-listBoxItem-depth2-middle-bg);
+  }
+  .bg-\[var\(--cmp-listExpansionItem-body-bg\)\] {
+    background-color: var(--cmp-listExpansionItem-body-bg);
+  }
+  .bg-\[var\(--cmp-listExpansionItem-title-bg-default\)\] {
+    background-color: var(--cmp-listExpansionItem-title-bg-default);
   }
   .bg-\[var\(--cmp-modal-bg\)\] {
     background-color: var(--cmp-modal-bg);
@@ -1887,8 +1899,8 @@
       background-color: color-mix(in oklab, var(--color-white) 60%, transparent);
     }
   }
-  .p-\(--cmp-expansionItem-body-padding\) {
-    padding: var(--cmp-expansionItem-body-padding);
+  .p-\(--cmp-listExpansionItem-body-padding\) {
+    padding: var(--cmp-listExpansionItem-body-padding);
   }
   .p-0 {
     padding: 0;
@@ -1923,8 +1935,8 @@
   .p-\[var\(--cmp-datepicker-calendar-paddingXY\)\] {
     padding: var(--cmp-datepicker-calendar-paddingXY);
   }
-  .p-\[var\(--cmp-expansionItem-body-padding\)\] {
-    padding: var(--cmp-expansionItem-body-padding);
+  .p-\[var\(--cmp-listExpansionItem-body-padding\)\] {
+    padding: var(--cmp-listExpansionItem-body-padding);
   }
   .px-\(--cmp-chipInput-md-paddingX\) {
     padding-inline: var(--cmp-chipInput-md-paddingX);
@@ -2016,11 +2028,11 @@
   .py-\(--cmp-chipInput-sm-paddingY\) {
     padding-block: var(--cmp-chipInput-sm-paddingY);
   }
-  .py-\(--cmp-expansionItem-title-paddingY-dense\) {
-    padding-block: var(--cmp-expansionItem-title-paddingY-dense);
+  .py-\(--cmp-listExpansionItem-title-paddingY-dense\) {
+    padding-block: var(--cmp-listExpansionItem-title-paddingY-dense);
   }
-  .py-\(--cmp-expansionItem-title-paddingY-normal\) {
-    padding-block: var(--cmp-expansionItem-title-paddingY-normal);
+  .py-\(--cmp-listExpansionItem-title-paddingY-normal\) {
+    padding-block: var(--cmp-listExpansionItem-title-paddingY-normal);
   }
   .py-1 {
     padding-block: var(--spacing);
@@ -2085,8 +2097,8 @@
   .pt-48 {
     padding-top: var(--spacing-48);
   }
-  .pr-\(--cmp-expansionItem-title-paddingX\) {
-    padding-right: var(--cmp-expansionItem-title-paddingX);
+  .pr-\(--cmp-listExpansionItem-title-paddingX\) {
+    padding-right: var(--cmp-listExpansionItem-title-paddingX);
   }
   .pr-\[12px\] {
     padding-right: 12px;
@@ -2097,8 +2109,8 @@
   .pb-\[var\(--cmp-modal-action-body-paddingBottom\)\] {
     padding-bottom: var(--cmp-modal-action-body-paddingBottom);
   }
-  .pl-\(--cmp-expansionItem-title-paddingX\) {
-    padding-left: var(--cmp-expansionItem-title-paddingX);
+  .pl-\(--cmp-listExpansionItem-title-paddingX\) {
+    padding-left: var(--cmp-listExpansionItem-title-paddingX);
   }
   .pl-\[26px\] {
     padding-left: 26px;
@@ -2106,11 +2118,11 @@
   .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-listExpansionItem-title-paddingX\)\+32px\)\] {
+    padding-left: calc(var(--cmp-listExpansionItem-title-paddingX) + 32px);
   }
-  .pl-\[calc\(var\(--cmp-expansionItem-title-paddingX\)\+64px\)\] {
-    padding-left: calc(var(--cmp-expansionItem-title-paddingX) + 64px);
+  .pl-\[calc\(var\(--cmp-listExpansionItem-title-paddingX\)\+64px\)\] {
+    padding-left: calc(var(--cmp-listExpansionItem-title-paddingX) + 64px);
   }
   .pl-\[var\(--cmp-overlay-header-paddingX\)\] {
     padding-left: var(--cmp-overlay-header-paddingX);
@@ -2281,23 +2293,23 @@
   .text-\(--cmp-chipInput-text-placeholder\) {
     color: var(--cmp-chipInput-text-placeholder);
   }
-  .text-\(--cmp-expansionItem-title-text-expanded\) {
-    color: var(--cmp-expansionItem-title-text-expanded);
-  }
   .text-\(--cmp-field-errorMessage-color\) {
     color: var(--cmp-field-errorMessage-color);
   }
   .text-\(--cmp-field-hint-color\) {
     color: var(--cmp-field-hint-color);
   }
-  .text-\(--cmp-listItem-content-default\) {
-    color: var(--cmp-listItem-content-default);
+  .text-\(--cmp-listBoxItem-content-default\) {
+    color: var(--cmp-listBoxItem-content-default);
   }
-  .text-\(--cmp-listItem-content-hover\) {
-    color: var(--cmp-listItem-content-hover);
+  .text-\(--cmp-listBoxItem-content-hover\) {
+    color: var(--cmp-listBoxItem-content-hover);
   }
-  .text-\(--cmp-listItem-content-selected\) {
-    color: var(--cmp-listItem-content-selected);
+  .text-\(--cmp-listBoxItem-content-selected\) {
+    color: var(--cmp-listBoxItem-content-selected);
+  }
+  .text-\(--cmp-listExpansionItem-title-text-expanded\) {
+    color: var(--cmp-listExpansionItem-title-text-expanded);
   }
   .text-\(--color-grey-65\) {
     color: var(--color-grey-65);
@@ -2347,17 +2359,17 @@
   .text-\[color\:var\(--cmp-guide-contents-typography-color\)\] {
     color: var(--cmp-guide-contents-typography-color);
   }
-  .text-\[color\:var\(--cmp-listItem-content-default\)\] {
-    color: var(--cmp-listItem-content-default);
+  .text-\[color\:var\(--cmp-listBoxItem-content-default\)\] {
+    color: var(--cmp-listBoxItem-content-default);
   }
-  .text-\[color\:var\(--cmp-listItem-content-disabled\)\] {
-    color: var(--cmp-listItem-content-disabled);
+  .text-\[color\:var\(--cmp-listBoxItem-content-disabled\)\] {
+    color: var(--cmp-listBoxItem-content-disabled);
   }
-  .text-\[color\:var\(--cmp-listItem-content-hover\)\] {
-    color: var(--cmp-listItem-content-hover);
+  .text-\[color\:var\(--cmp-listBoxItem-content-hover\)\] {
+    color: var(--cmp-listBoxItem-content-hover);
   }
-  .text-\[color\:var\(--cmp-listItem-content-selected\)\] {
-    color: var(--cmp-listItem-content-selected);
+  .text-\[color\:var\(--cmp-listBoxItem-content-selected\)\] {
+    color: var(--cmp-listBoxItem-content-selected);
   }
   .text-\[color\:var\(--cmp-modal-confirm-message-color\)\] {
     color: var(--cmp-modal-confirm-message-color);
@@ -2413,12 +2425,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-field-hint-color\)\] {
     color: var(--cmp-field-hint-color);
   }
+  .text-\[var\(--cmp-listExpansionItem-title-text-default\)\] {
+    color: var(--cmp-listExpansionItem-title-text-default);
+  }
   .text-\[var\(--cmp-timepicker-border-focus\)\] {
     color: var(--cmp-timepicker-border-focus);
   }
@@ -2852,10 +2864,10 @@
       }
     }
   }
-  .hover\:bg-\(--cmp-expansionItem-title-bg-hover\) {
+  .hover\:bg-\(--cmp-listExpansionItem-title-bg-hover\) {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--cmp-expansionItem-title-bg-hover);
+        background-color: var(--cmp-listExpansionItem-title-bg-hover);
       }
     }
   }
@@ -2873,10 +2885,10 @@
       }
     }
   }
-  .hover\:bg-\[var\(--cmp-listItem-bg-hover\)\] {
+  .hover\:bg-\[var\(--cmp-listBoxItem-bg-hover\)\] {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--cmp-listItem-bg-hover);
+        background-color: var(--cmp-listBoxItem-bg-hover);
       }
     }
   }
@@ -2950,10 +2962,10 @@
       }
     }
   }
-  .hover\:text-\[color\:var\(--cmp-listItem-content-hover\)\] {
+  .hover\:text-\[color\:var\(--cmp-listBoxItem-content-hover\)\] {
     &:hover {
       @media (hover: hover) {
-        color: var(--cmp-listItem-content-hover);
+        color: var(--cmp-listBoxItem-content-hover);
       }
     }
   }
@@ -2991,14 +3003,14 @@
       border-color: var(--cmp-datepicker-border-focus);
     }
   }
-  .focus-visible\:bg-\[var\(--cmp-listItem-bg-hover\)\] {
+  .focus-visible\:bg-\[var\(--cmp-listBoxItem-bg-hover\)\] {
     &:focus-visible {
-      background-color: var(--cmp-listItem-bg-hover);
+      background-color: var(--cmp-listBoxItem-bg-hover);
     }
   }
-  .focus-visible\:text-\[color\:var\(--cmp-listItem-content-hover\)\] {
+  .focus-visible\:text-\[color\:var\(--cmp-listBoxItem-content-hover\)\] {
     &:focus-visible {
-      color: var(--cmp-listItem-content-hover);
+      color: var(--cmp-listBoxItem-content-hover);
     }
   }
   .focus-visible\:shadow-\[0_0_0_2px_var\(--btn-ring\)\] {
@@ -3041,9 +3053,9 @@
       cursor: not-allowed;
     }
   }
-  .disabled\:text-\[color\:var\(--cmp-listItem-content-disabled\)\] {
+  .disabled\:text-\[color\:var\(--cmp-listBoxItem-content-disabled\)\] {
     &:disabled {
-      color: var(--cmp-listItem-content-disabled);
+      color: var(--cmp-listBoxItem-content-disabled);
     }
   }
   .disabled\:text-\[var\(--sys-color-disabled-text\)\] {
@@ -3398,6 +3410,7 @@
   --sys-size-table-height-xs: 32px;
   --sys-size-table-height-sm: 36px;
   --sys-size-table-height-md: 44px;
+  --sys-size-item-accentStripe-width: 2px;
   --sys-space-control-xs-paddingX: 8px;
   --sys-space-control-xs-gap: 4px;
   --sys-space-control-sm-paddingX: 12px;
@@ -3439,6 +3452,10 @@
   --sys-space-overlay-paddingX-md: 24px;
   --sys-space-overlay-paddingY-sm: 8px;
   --sys-space-panel-gap: 12px;
+  --sys-space-item-paddingX: 16px;
+  --sys-space-item-paddingY-normal: 8px;
+  --sys-space-item-paddingY-dense: 4px;
+  --sys-space-item-gap: 12px;
   --sys-radius-control-sm: 4px;
   --sys-radius-control-md: 6px;
   --sys-radius-feedback-xs-square: 6px;
@@ -3446,9 +3463,11 @@
   --sys-radius-feedback-pill: 9999px;
   --sys-radius-field-sm: 4px;
   --sys-radius-field-md: 6px;
+  --sys-radius-item-bordered: 8px;
   --sys-border-width-control-default: 1px;
   --sys-border-width-field-default: 1px;
   --sys-border-width-navigation-default: 1px;
+  --sys-border-width-item-default: 1px;
   --sys-color-bg-screen: #EEEEEE;
   --sys-color-bg-frame: #FFFFFF;
   --sys-color-bg-brand: #025497;
@@ -3479,20 +3498,24 @@
   --sys-color-fg-success: #00973C;
   --sys-color-fg-dangerLight: #FB4444;
   --sys-color-fg-accent: #0075FF;
+  --sys-color-fg-accentLight: #64ABFF;
   --sys-color-fg-danger: #E30000;
   --sys-color-fg-warning: #FF6B00;
   --sys-color-fg-inverse: #FFFFFF;
+  --sys-color-border-default: #E1E1E1;
+  --sys-color-border-strong: #AAAAAA;
+  --sys-color-border-accent: #0075FF;
+  --sys-color-border-accentLight: #93C4FF;
+  --sys-color-border-danger: #FB4444;
+  --sys-color-border-success: #12B553;
   --sys-color-disabled-bg: #E1E1E1;
   --sys-color-disabled-text: #888888;
   --sys-color-disabled-icon: #BBBBBB;
   --sys-color-disabled-border: #CCCCCC;
   --sys-color-link-accent: #006AC1;
   --sys-color-divider-default: #E1E1E1;
-  --sys-color-border-default: #E1E1E1;
-  --sys-color-border-accent: #0075FF;
-  --sys-color-border-accentLight: #93C4FF;
-  --sys-color-border-danger: #FB4444;
-  --sys-color-border-success: #12B553;
+  --sys-color-lightblue-strong: #64ABFF;
+  --sys-color-lightblue-subtle: #EFF6FF;
   --sys-color-blue-strong: #0075FF;
   --sys-color-blue-subtle: #E6F1FF;
   --sys-color-darkblue-strong: #006AC1;
@@ -3597,6 +3620,8 @@
   --cmp-ghostButton-inverse-disabled: #E1E1E1;
   --cmp-ghostButton-inverse-hover-bg: #FFFFFF;
   --cmp-ghostButton-group-gap: 4px;
+  --cmp-ghostButton-subAction-content: #5CB0F3;
+  --cmp-ghostButton-subAction-hover-bg: #5CB0F3;
   --cmp-textLink-sm-gap: 4px;
   --cmp-textLink-sm-icon: 16px;
   --cmp-textLink-md-gap: 8px;
@@ -3695,24 +3720,24 @@
   --cmp-radioButton-content-select: #0075FF;
   --cmp-radioButton-content-disabled: #888888;
   --cmp-radioButton-group-gap: -1px;
-  --cmp-listItem-paddingY: 4px;
-  --cmp-listItem-paddingRight: 12px;
-  --cmp-listItem-gap: 8px;
-  --cmp-listItem-paddingLeft-depth1: 12px;
-  --cmp-listItem-paddingLeft-depth2: 20px;
-  --cmp-listItem-paddingLeft-depth3: 28px;
-  --cmp-listItem-bg-default: #FFFFFF;
-  --cmp-listItem-bg-hover: #0075FF;
-  --cmp-listItem-content-default: #222222;
-  --cmp-listItem-content-hover: #FFFFFF;
-  --cmp-listItem-content-disabled: #888888;
-  --cmp-listItem-content-selected: #0075FF;
-  --cmp-listItem-depth1-bg-default: #EFF6FF;
-  --cmp-listItem-depth1-bg-disabled: #EEEEEE;
-  --cmp-listItem-depth1-border-color: #E1E1E1;
-  --cmp-listItem-depth1-border-width: 1px;
-  --cmp-listItem-depth2-middle-bg: #F6F6F6;
-  --cmp-listItem-count-color: #888888;
+  --cmp-listBoxItem-paddingY: 4px;
+  --cmp-listBoxItem-paddingRight: 12px;
+  --cmp-listBoxItem-gap: 8px;
+  --cmp-listBoxItem-paddingLeft-depth1: 12px;
+  --cmp-listBoxItem-paddingLeft-depth2: 20px;
+  --cmp-listBoxItem-paddingLeft-depth3: 28px;
+  --cmp-listBoxItem-bg-default: #FFFFFF;
+  --cmp-listBoxItem-bg-hover: #0075FF;
+  --cmp-listBoxItem-content-default: #222222;
+  --cmp-listBoxItem-content-hover: #FFFFFF;
+  --cmp-listBoxItem-content-disabled: #888888;
+  --cmp-listBoxItem-content-selected: #0075FF;
+  --cmp-listBoxItem-depth1-bg-default: #EFF6FF;
+  --cmp-listBoxItem-depth1-bg-disabled: #EEEEEE;
+  --cmp-listBoxItem-depth1-border-color: #E1E1E1;
+  --cmp-listBoxItem-depth1-border-width: 1px;
+  --cmp-listBoxItem-depth2-middle-bg: #F6F6F6;
+  --cmp-listBoxItem-count-color: #888888;
   --cmp-listBox-radius: 4px;
   --cmp-listBox-bg: #FFFFFF;
   --cmp-listBox-chip-paddingXY: 8px;
@@ -3755,6 +3780,7 @@
   --cmp-field-hint-color: #555555;
   --cmp-field-errorMessage-color: #E30000;
   --cmp-field-contents-gap: 4px;
+  --cmp-field-message-paddingX: 8px;
   --cmp-textinput-sm-height: 28px;
   --cmp-textinput-sm-paddingX: 12px;
   --cmp-textinput-sm-paddingY: 4px;
@@ -3943,7 +3969,7 @@
   --cmp-timepicker-selector-section-paddingY: 12px;
   --cmp-timepicker-selector-time-gap: 4px;
   --cmp-timepicker-selector-time-column-gap: 8px;
-  --cmp-timepicker-selector-input-width: 40px;
+  --cmp-timepicker-selector-time-input-width: 40px;
   --cmp-timepicker-selector-colon-size: 16px;
   --cmp-timepicker-selector-range-paddingXY: 24px;
   --cmp-timepicker-selector-range-panelGap: 24px;
@@ -3988,6 +4014,7 @@
   --cmp-badge-orange: #FF6B00;
   --cmp-badge-yellow: #FFC700;
   --cmp-badge-green: #00973C;
+  --cmp-badge-lightblue: #64ABFF;
   --cmp-badge-blue: #0075FF;
   --cmp-badge-darkblue: #006AC1;
   --cmp-badge-indigo: #004290;
@@ -4006,6 +4033,21 @@
   --cmp-tooltip-warning-content: #FF6B00;
   --cmp-tooltip-accent-bg: #E6F1FF;
   --cmp-tooltip-accent-content: #0075FF;
+  --cmp-tooltip-trigger-xxs-size: 16px;
+  --cmp-tooltip-trigger-xxs-icon: 12px;
+  --cmp-tooltip-trigger-xs-size: 24px;
+  --cmp-tooltip-trigger-xs-icon: 16px;
+  --cmp-tooltip-trigger-sm-size: 28px;
+  --cmp-tooltip-trigger-sm-icon: 20px;
+  --cmp-tooltip-trigger-md-size: 36px;
+  --cmp-tooltip-trigger-md-icon: 24px;
+  --cmp-tooltip-trigger-lg-size: 62px;
+  --cmp-tooltip-trigger-lg-icon: 32px;
+  --cmp-tooltip-trigger-radius-sm: 4px;
+  --cmp-tooltip-trigger-radius-md: 6px;
+  --cmp-tooltip-trigger-hover-opacity: 5%;
+  --cmp-tooltip-trigger-hover-bg: #00973C;
+  --cmp-tooltip-trigger-content: #00973C;
   --cmp-popover-radius: 6px;
   --cmp-popover-paddingX: 20px;
   --cmp-popover-paddingY: 16px;
@@ -4195,7 +4237,7 @@
   --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-border-width: 1px;
   --cmp-stepper-sequence-icon: 12px;
   --cmp-stepper-sequence-bg-active: #D9EAFF;
   --cmp-stepper-sequence-bg-default: #FFFFFF;
@@ -4276,19 +4318,79 @@
   --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;
+  --cmp-listItem-paddingX: 16px;
+  --cmp-listItem-paddingY-normal: 8px;
+  --cmp-listItem-paddingY-dense: 4px;
+  --cmp-listItem-gap: 12px;
+  --cmp-listItem-radius-bordered: 8px;
+  --cmp-listItem-bg-default: #FFFFFF;
+  --cmp-listItem-bg-hover: #F6F6F6;
+  --cmp-listItem-bg-selected: #EFF6FF;
+  --cmp-listItem-bordered-border-selected: #93C4FF;
+  --cmp-listItem-bordered-border-hover: #AAAAAA;
+  --cmp-listItem-border-default: #E1E1E1;
+  --cmp-listItem-border-width-default: 1px;
+  --cmp-listItem-text-default: #222222;
+  --cmp-listItem-text-selected: #0075FF;
+  --cmp-listItem-accentStripe-width: 2px;
+  --cmp-listItem-accentStripe-color: #64ABFF;
+  --cmp-listExpansionItem-title-paddingX: 16px;
+  --cmp-listExpansionItem-title-paddingY-normal: 8px;
+  --cmp-listExpansionItem-title-paddingY-dense: 4px;
+  --cmp-listExpansionItem-title-gap: 12px;
+  --cmp-listExpansionItem-title-icon: 12px;
+  --cmp-listExpansionItem-title-border: #E1E1E1;
+  --cmp-listExpansionItem-title-bg-default: #FFFFFF;
+  --cmp-listExpansionItem-title-bg-hover: #F9F9F9;
+  --cmp-listExpansionItem-title-bg-expanded: #EFF6FF;
+  --cmp-listExpansionItem-title-text-default: #222222;
+  --cmp-listExpansionItem-title-text-expanded: #005CC9;
+  --cmp-listExpansionItem-body-bg: #FFFFFF;
+  --cmp-listExpansionItem-body-padding: 16px;
+  --cmp-listExpansionItem-border-default: #E1E1E1;
+  --cmp-listExpansionItem-border-hover: #AAAAAA;
+  --cmp-listExpansionItem-border-expanded: #93C4FF;
+  --cmp-listExpansionItem-bordered-radius: 8px;
+  --cmp-listExpansionItem-accentStripe-width: 2px;
+  --cmp-listExpansionItem-accentStripe-color: #64ABFF;
+  --cmp-listDraggableItem-paddingX: 16px;
+  --cmp-listDraggableItem-paddingY-normal: 8px;
+  --cmp-listDraggableItem-paddingY-dense: 4px;
+  --cmp-listDraggableItem-gap: 12px;
+  --cmp-listDraggableItem-radius-bordered: 8px;
+  --cmp-listDraggableItem-bg-default: #FFFFFF;
+  --cmp-listDraggableItem-bg-hover: #F6F6F6;
+  --cmp-listDraggableItem-bg-selected: #EFF6FF;
+  --cmp-listDraggableItem-bordered-bg-selected: #EFF6FF;
+  --cmp-listDraggableItem-bordered-border-selected: #93C4FF;
+  --cmp-listDraggableItem-bordered-border-hover: #AAAAAA;
+  --cmp-listDraggableItem-bordered-dragging-bg: #EFF6FF;
+  --cmp-listDraggableItem-bordered-dragging-border-color: #2D8DFF;
+  --cmp-listDraggableItem-bordered-dragging-border-width: 2px;
+  --cmp-listDraggableItem-border-default: #E1E1E1;
+  --cmp-listDraggableItem-border-width-default: 1px;
+  --cmp-listDraggableItem-text-default: #222222;
+  --cmp-listDraggableItem-text-selected: #0075FF;
+  --cmp-listDraggableItem-accentStripe-width: 2px;
+  --cmp-listDraggableItem-accentStripe-color: #64ABFF;
+  --cmp-listDraggableItem-dragging-content-opacity: 60%;
+  --cmp-page-padding: 20px;
+  --cmp-sectionHeaderCard-radius: 8px;
+  --cmp-sectionHeaderCard-border: #E1E1E1;
+  --cmp-sectionHeaderCard-topBorder-thickness: 2px;
+  --cmp-sectionHeaderCard-topBorder-color-accent: #005CC9;
+  --cmp-sectionHeaderCard-topBorder-color-default: #AAAAAA;
+  --cmp-sectionHeaderCard-header-bg: #FFFFFF;
+  --cmp-sectionHeaderCard-header-border: #E1E1E1;
+  --cmp-sectionHeaderCard-header-minHeight: 40px;
+  --cmp-sectionHeaderCard-header-paddingX: 16px;
+  --cmp-sectionHeaderCard-header-paddingY: 4px;
+  --cmp-sectionHeaderCard-header-gap: 8px;
+  --cmp-sectionHeaderCard-title-gap: 4px;
+  --cmp-sectionHeaderCard-title-color: #005CC9;
+  --cmp-sectionHeaderCard-required-icon: 16px;
+  --cmp-sectionHeaderCard-subtitle-color: #555555;
+  --cmp-sectionHeaderCard-body-bg: #FFFFFF;
 }
 @layer base {
   *::-webkit-scrollbar {
@@ -4313,6 +4415,90 @@
   }
 }
 @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-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;
+    font-weight: 700;
+    line-height: 26px;
+  }
+  .typo-heading-lg {
+    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: 18px;
+    font-weight: 700;
+    line-height: 30px;
+  }
+  .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;
+  }
   .typo-control-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: 12px;
@@ -4420,24 +4606,6 @@
     line-height: 24px;
     text-decoration: underline;
   }
-  .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;
-    font-weight: 700;
-    line-height: 26px;
-  }
-  .typo-heading-lg {
-    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: 18px;
-    font-weight: 700;
-    line-height: 30px;
-  }
   .typo-field-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;
@@ -4564,66 +4732,6 @@
     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% {