sellmate-design-system-react 0.1.11 → 0.3.0

package/dist/styles.css

@@ -9,6 +9,7 @@
       "Courier New", monospace;
     --color-red-50: oklch(97.1% 0.013 17.38);
     --color-red-700: oklch(50.5% 0.213 27.518);
+    --color-yellow-50: #EBB110;
     --color-green-50: oklch(98.2% 0.018 155.826);
     --color-green-700: oklch(52.7% 0.154 150.069);
     --color-gray-100: oklch(96.7% 0.003 264.542);
@@ -21,49 +22,401 @@
     --color-white: #FFFFFF;
     --spacing: 0.25rem;
     --container-xs: 20rem;
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
+    --font-weight-extrabold: 800;
+    --font-weight-black: 900;
     --radius-md: 0.375rem;
+    --radius-lg: 0.5rem;
     --ease-in: cubic-bezier(0.4, 0, 1, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
+    --color-grey-10: #F6F6F6;
+    --color-grey-20: #EEEEEE;
     --color-grey-25: #E5E5E5;
     --color-grey-30: #E1E1E1;
+    --color-grey-35: #D8D8D8;
     --color-grey-45: #CCCCCC;
+    --color-grey-50: #BBBBBB;
     --color-grey-55: #AAAAAA;
+    --color-grey-60: #999999;
     --color-grey-65: #888888;
     --color-grey-70: #737373;
     --color-grey-80: #555555;
+    --color-grey-85: #444444;
+    --color-grey-90: #333333;
+    --color-grey-95: #222222;
     --color-grey-05: #F9F9F9;
+    --color-red-15: #FCEFEF;
+    --color-red-20: #FCE6E6;
+    --color-red-30: #FFD3D3;
+    --color-red-45: #FFB5B5;
+    --color-red-60: #FF7C7C;
+    --color-red-70: #FB4444;
     --color-red-75: #E30000;
+    --color-red-80: #AD0000;
+    --color-red-85: #820000;
+    --color-red-90: #5E0000;
+    --color-red-95: #440000;
+    --color-red-99: #220000;
+    --color-orange-10: #FEF1EA;
+    --color-orange-20: #FFEAD7;
+    --color-orange-35: #FFD5AF;
+    --color-orange-45: #FFBC81;
+    --color-orange-55: #FFA452;
+    --color-orange-60: #FF7F22;
+    --color-orange-65: #FF6B00;
+    --color-orange-75: #CE4900;
+    --color-orange-85: #9B3700;
+    --color-orange-90: #752A00;
+    --color-orange-95: #4D1B00;
+    --color-orange-99: #2F1100;
+    --color-yellow-10: #FFF7DD;
+    --color-yellow-20: #FEF1C4;
+    --color-yellow-25: #FFE99E;
+    --color-yellow-30: #FEE17C;
+    --color-yellow-40: #FFD643;
+    --color-yellow-45: #FFC700;
+    --color-yellow-60: #CA9612;
+    --color-yellow-70: #916C0D;
+    --color-yellow-80: #6C5002;
+    --color-yellow-90: #453602;
+    --color-yellow-95: #322700;
+    --color-olive-10: #FBFBBF;
+    --color-olive-15: #FAFAA1;
+    --color-olive-20: #F6F65F;
+    --color-olive-30: #EEEE37;
+    --color-olive-45: #DDDD12;
+    --color-olive-55: #C7C700;
+    --color-olive-65: #A5A500;
+    --color-olive-70: #838300;
+    --color-olive-80: #636300;
+    --color-olive-90: #454500;
+    --color-olive-95: #2C2C00;
+    --color-olive-05: #FEFED9;
+    --color-green-15: #E8F9EF;
+    --color-green-25: #D4FAE3;
+    --color-green-45: #ACF4C9;
+    --color-green-55: #6DE39C;
+    --color-green-65: #2BCE6C;
+    --color-green-70: #12B553;
+    --color-green-75: #00973C;
+    --color-green-80: #007B31;
+    --color-green-85: #006629;
+    --color-green-90: #00461C;
+    --color-green-95: #003013;
+    --color-green-99: #001D0B;
+    --color-steelblue-10: #ECF8FD;
+    --color-steelblue-25: #D9F2FD;
+    --color-steelblue-45: #A4E2FD;
+    --color-steelblue-60: #50BFF0;
+    --color-steelblue-65: #229FD7;
+    --color-steelblue-70: #128FC7;
+    --color-steelblue-75: #066D9B;
+    --color-steelblue-80: #06587D;
+    --color-steelblue-85: #033F59;
+    --color-steelblue-90: #032D40;
+    --color-steelblue-95: #02212F;
+    --color-steelblue-99: #021A25;
+    --color-oceanblue-15: #EAF5FE;
+    --color-oceanblue-25: #D5EBFE;
+    --color-oceanblue-50: #9CD1FC;
+    --color-oceanblue-60: #5CB0F3;
+    --color-oceanblue-65: #1F8AE1;
+    --color-oceanblue-70: #006AC1;
+    --color-oceanblue-75: #025497;
+    --color-oceanblue-80: #004177;
+    --color-oceanblue-85: #07284A;
+    --color-oceanblue-90: #051D36;
+    --color-oceanblue-95: #03172D;
+    --color-oceanblue-99: #011428;
+    --color-brilliantblue-10: #EFF6FF;
+    --color-brilliantblue-20: #E6F1FF;
+    --color-brilliantblue-25: #D9EAFF;
+    --color-brilliantblue-40: #BBDAFF;
+    --color-brilliantblue-50: #93C4FF;
+    --color-brilliantblue-60: #64ABFF;
+    --color-brilliantblue-70: #2D8DFF;
+    --color-brilliantblue-75: #0075FF;
+    --color-brilliantblue-80: #005CC9;
+    --color-brilliantblue-85: #004290;
+    --color-brilliantblue-90: #002B5E;
+    --color-brilliantblue-95: #001B39;
+    --color-brilliantblue-99: #001226;
+    --color-brilliantblue-05: #F5FAFF;
+    --color-bg-screen: #EEEEEE;
+    --color-bg-frame: #FFFFFF;
+    --color-bg-brand: #025497;
+    --color-bg-subtle: #1F8AE1;
+    --color-bg-accent: #0075FF;
+    --color-bg-accentLight: #2D8DFF;
+    --color-bg-accentBright: #D9EAFF;
+    --color-bg-deep: #07284A;
+    --color-bg-danger: #E30000;
+    --color-bg-dangerLight: #FB4444;
+    --color-bg-warning: #FF6B00;
+    --color-bg-caution: #FFC700;
+    --color-bg-progress: #0075FF;
+    --color-bg-success: #00973C;
+    --color-bg-successLight: #12B553;
+    --color-bg-neutralLight: #F6F6F6;
+    --color-bg-neutralBright: #F9F9F9;
+    --color-bg-tableHeader: #F5FAFF;
+    --color-fg-primary: #222222;
+    --color-fg-secondary: #555555;
+    --color-fg-tertiary: #888888;
+    --color-fg-quaternary: #AAAAAA;
+    --color-fg-brand: #005CC9;
+    --color-fg-subtleWarm: #066D9B;
+    --color-fg-subtleCool: #025497;
+    --color-fg-deep: #004290;
+    --color-fg-success: #00973C;
+    --color-fg-dangerLight: #FB4444;
+    --color-fg-accent: #0075FF;
+    --color-fg-danger: #E30000;
+    --color-fg-warning: #FF6B00;
+    --color-fg-inverse: #FFFFFF;
+    --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;
+    --color-orange-subtle: #FEF1EA;
+    --color-yellow-strong: #916C0D;
+    --color-yellow-moderate: #FFC700;
+    --color-yellow-subtle: #FFF7DD;
     --color-green-strong: #00973C;
+    --color-green-subtle: #E8F9EF;
     --color-blue-strong: #0075FF;
+    --color-blue-subtle: #E6F1FF;
+    --color-darkblue-strong: #006AC1;
+    --color-darkblue-subtle: #EAF5FE;
+    --color-indigo-strong: #004290;
+    --color-indigo-subtle: #EFF6FF;
+    --color-grey-strong: #737373;
+    --color-grey-subtle: #EEEEEE;
+    --color-field-bg-default: #FFFFFF;
+    --color-field-bg-hover: #0075FF;
+    --color-field-bg-readOnly: #EEEEEE;
+    --color-field-border-default: #AAAAAA;
+    --color-field-border-focus: #0075FF;
+    --color-field-border-hover: #0075FF;
+    --color-field-border-danger: #FB4444;
+    --color-field-border-success: #12B553;
+    --color-field-text-default: #222222;
+    --color-field-text-placeholder: #AAAAAA;
+    --color-field-text-readOnly: #555555;
+    --color-field-icon-default: #888888;
+    --color-control-bg-inverseHover: #0075FF;
+    --color-navigation-gnb-bg-dark: #001B39;
+    --color-primary-10: #EFF6FF;
+    --color-primary-20: #E6F1FF;
+    --color-primary-25: #D9EAFF;
+    --color-primary-40: #BBDAFF;
+    --color-primary-50: #93C4FF;
+    --color-primary-60: #64ABFF;
+    --color-primary-70: #2D8DFF;
+    --color-primary-75: #0075FF;
+    --color-primary-80: #005CC9;
+    --color-primary-85: #004290;
+    --color-primary-90: #002B5E;
+    --color-primary-95: #001B39;
+    --color-primary-99: #001226;
+    --color-primary-05: #F5FAFF;
+    --color-danger-15: #FCEFEF;
+    --color-danger-20: #FCE6E6;
+    --color-danger-30: #FFD3D3;
+    --color-danger-45: #FFB5B5;
+    --color-danger-60: #FF7C7C;
+    --color-danger-70: #FB4444;
     --color-danger-75: #E30000;
+    --color-danger-80: #AD0000;
+    --color-danger-85: #820000;
+    --color-danger-90: #5E0000;
+    --color-danger-95: #440000;
+    --color-danger-99: #220000;
+    --color-danger-strong: #FB4444;
+    --color-danger-subtle: #FCEFEF;
+    --color-success-15: #E8F9EF;
+    --color-success-25: #D4FAE3;
+    --color-success-45: #ACF4C9;
+    --color-success-55: #6DE39C;
+    --color-success-65: #2BCE6C;
+    --color-success-70: #12B553;
+    --color-success-75: #00973C;
+    --color-success-80: #007B31;
+    --color-success-85: #006629;
+    --color-success-90: #00461C;
+    --color-success-95: #003013;
+    --color-success-99: #001D0B;
+    --color-success-strong: #00973C;
+    --color-success-subtle: #E8F9EF;
+    --color-warning-10: #FEF1EA;
+    --color-warning-20: #FFEAD7;
+    --color-warning-35: #FFD5AF;
+    --color-warning-45: #FFBC81;
+    --color-warning-55: #FFA452;
+    --color-warning-60: #FF7F22;
+    --color-warning-65: #FF6B00;
+    --color-warning-75: #CE4900;
+    --color-warning-85: #9B3700;
+    --color-warning-90: #752A00;
+    --color-warning-95: #4D1B00;
+    --color-warning-99: #2F1100;
+    --color-warning-strong: #FF6B00;
+    --color-warning-subtle: #FEF1EA;
+    --spacing-2: 2px;
     --spacing-4: 4px;
     --spacing-6: 6px;
     --spacing-8: 8px;
+    --spacing-10: 10px;
     --spacing-12: 12px;
     --spacing-16: 16px;
+    --spacing-19: 19px;
     --spacing-20: 20px;
+    --spacing-22: 22px;
     --spacing-24: 24px;
+    --spacing-28: 28px;
     --spacing-32: 32px;
+    --spacing-36: 36px;
+    --spacing-40: 40px;
     --spacing-48: 48px;
+    --spacing-60: 60px;
+    --spacing-control-xs-paddingX: 8px;
+    --spacing-control-xs-gap: 4px;
+    --spacing-control-sm-paddingX: 12px;
+    --spacing-control-sm-gap: 6px;
+    --spacing-control-md-paddingX: 20px;
+    --spacing-control-md-gap: 8px;
+    --spacing-control-lg-paddingX: 28px;
+    --spacing-control-lg-gap: 12px;
+    --spacing-feedback-xs-paddingX: 6px;
+    --spacing-feedback-xs-gap: 4px;
+    --spacing-feedback-sm-paddingX: 8px;
+    --spacing-feedback-sm-gap: 6px;
+    --spacing-feedback-md-paddingX: 12px;
+    --spacing-feedback-md-gap: 8px;
+    --spacing-feedback-lg-paddingX: 16px;
+    --spacing-feedback-lg-gap: 12px;
+    --spacing-stack-gap-text-tight: 2px;
+    --spacing-stack-gap-text-normal: 4px;
+    --spacing-stack-gap-text-relaxed: 8px;
+    --spacing-stack-gap-element-tight: 4px;
+    --spacing-stack-gap-element-normal: 8px;
+    --spacing-stack-gap-element-relaxed: 12px;
+    --spacing-stack-gap-element-wide: 16px;
+    --spacing-stack-gap-element-spacious: 24px;
+    --spacing-field-sm-paddingX: 12px;
+    --spacing-field-sm-paddingY: 4px;
+    --spacing-field-sm-container-gap: 8px;
+    --spacing-field-sm-gap: 12px;
+    --spacing-field-md-paddingX: 16px;
+    --spacing-field-md-paddingY: 8px;
+    --spacing-field-md-container-gap: 12px;
+    --spacing-field-md-gap: 16px;
+    --spacing-navigation-lg-paddingX: 32px;
+    --spacing-navigation-md-paddingX: 24px;
+    --spacing-table-padding-sm: 8px;
+    --spacing-table-padding-md: 16px;
+    --spacing-action-gap: 16px;
+    --spacing-overlay-paddingX-sm: 20px;
+    --spacing-overlay-paddingX-md: 24px;
+    --spacing-overlay-paddingY-sm: 8px;
+    --spacing-panel-gap: 12px;
+    --spacing-44: 44px;
+    --spacing-56: 56px;
+    --spacing-62: 62px;
     --spacing-80: 80px;
+    --spacing-control-xs-height: 24px;
+    --spacing-control-sm-height: 28px;
+    --spacing-control-md-height: 36px;
+    --spacing-control-lg-height: 62px;
+    --spacing-icon-xxxs: 8px;
+    --spacing-icon-xxs: 10px;
+    --spacing-icon-xs: 12px;
+    --spacing-icon-sm: 16px;
+    --spacing-icon-md: 20px;
+    --spacing-icon-lg: 24px;
+    --spacing-icon-xl: 32px;
+    --spacing-feedback-arrow-width: 16px;
+    --spacing-feedback-arrow-height: 12px;
+    --spacing-feedback-xs-height: 20px;
+    --spacing-feedback-sm-height: 24px;
+    --spacing-feedback-md-height: 28px;
+    --spacing-field-control: 16px;
+    --spacing-field-icon: 12px;
+    --spacing-field-sm-height: 28px;
+    --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;
+    --radius-2: 2px;
+    --radius-4: 4px;
+    --radius-6: 6px;
+    --radius-8: 8px;
     --radius-full: 9999px;
+    --radius-control-sm: 4px;
+    --radius-control-md: 6px;
+    --radius-feedback-xs-square: 6px;
+    --radius-feedback-sm-square: 8px;
+    --radius-feedback-pill: 9999px;
+    --radius-field-sm: 4px;
+    --radius-field-md: 6px;
+    --radius-navigation: 6px;
+    --text-10: 10px;
+    --text-11: 11px;
     --text-12: 12px;
     --text-13: 13px;
     --text-14: 14px;
     --text-16: 16px;
+    --text-18: 18px;
+    --text-20: 20px;
     --text-24: 24px;
+    --text-28: 28px;
+    --text-32: 32px;
+    --font-weight-regular: 400;
     --font-base: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;
+    --border-width-1: 1px;
+    --border-width-4: 4px;
+    --border-width-6: 6px;
+    --border-width-control-default: 1px;
+    --border-width-field-default: 1px;
+    --border-width-navigation-default: 1px;
+    --opacity-005: 5%;
+    --opacity-040: 40%;
+    --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);
+    --shadow-normal-md: 0px 8px 36px -6px rgba(34,34,34,0.16), 4px 12px 16px -4px rgba(34,34,34,0.12);
+    --shadow-spread-sm: 0px 0px 8px 0px rgba(34,34,34,0.1);
     --shadow-spread-md: 0px 0px 24px 0px rgba(34,34,34,0.2);
+    --shadow-focus: 0px 0px 8px 0px rgba(0,117,255,0.25);
+    --shadow-overlay: 0px 0px 16px -4px rgba(34,34,34,0.12), 2px 4px 6px -2px rgba(34,34,34,0.1);
+    --shadow-floating: 0px 0px 24px -6px rgba(34,34,34,0.12), 4px 8px 16px -4px rgba(34,34,34,0.1);
+    --shadow-dialog: 0px 8px 36px -6px rgba(34,34,34,0.16), 4px 12px 16px -4px rgba(34,34,34,0.12);
     --animate-linear-indeterminate: linear-indeterminate 1.2s linear infinite;
     --animate-circle-spin: circle-spin 2s linear infinite;
     --animate-circle-arc: circle-arc 1.5s ease-in-out infinite;
@@ -263,6 +616,9 @@
   .relative {
     position: relative;
   }
+  .static {
+    position: static;
+  }
   .sticky {
     position: sticky;
   }
@@ -281,6 +637,9 @@
   .top-1\/2 {
     top: calc(1 / 2 * 100%);
   }
+  .top-12 {
+    top: var(--spacing-12);
+  }
   .top-48 {
     top: var(--spacing-48);
   }
@@ -299,6 +658,9 @@
   .right-0 {
     right: 0;
   }
+  .right-12 {
+    right: var(--spacing-12);
+  }
   .right-\[10px\] {
     right: 10px;
   }
@@ -350,11 +712,11 @@
   .z-\[5\] {
     z-index: 5;
   }
-  .z-\[200\] {
-    z-index: 200;
+  .z-\[30\] {
+    z-index: 30;
   }
-  .z-\[210\] {
-    z-index: 210;
+  .z-\[31\] {
+    z-index: 31;
   }
   .z-\[1000\] {
     z-index: 1000;
@@ -395,9 +757,18 @@
   .mt-\(--cmp-field-contents-gap\) {
     margin-top: var(--cmp-field-contents-gap);
   }
+  .mt-2 {
+    margin-top: var(--spacing-2);
+  }
+  .mt-8 {
+    margin-top: var(--spacing-8);
+  }
   .mt-12 {
     margin-top: var(--spacing-12);
   }
+  .mt-16 {
+    margin-top: var(--spacing-16);
+  }
   .mt-\[8px\] {
     margin-top: 8px;
   }
@@ -476,9 +847,15 @@
   .h-\[80px\] {
     height: 80px;
   }
+  .h-\[80vh\] {
+    height: 80vh;
+  }
   .h-\[364px\] {
     height: 364px;
   }
+  .h-\[600px\] {
+    height: 600px;
+  }
   .h-\[var\(--cmp-checkbox-size\)\] {
     height: var(--cmp-checkbox-size);
   }
@@ -515,6 +892,9 @@
   .h-px {
     height: 1px;
   }
+  .h-screen {
+    height: 100vh;
+  }
   .min-h-\(--cmp-chipInput-md-minHeight\) {
     min-height: var(--cmp-chipInput-md-minHeight);
   }
@@ -777,6 +1157,12 @@
   .gap-\(--cmp-field-addonLabel-gap\) {
     gap: var(--cmp-field-addonLabel-gap);
   }
+  .gap-2 {
+    gap: var(--spacing-2);
+  }
+  .gap-4 {
+    gap: var(--spacing-4);
+  }
   .gap-8 {
     gap: var(--spacing-8);
   }
@@ -903,6 +1289,13 @@
   .gap-\[var\(--cmp-textinput-sm-gap\)\] {
     gap: var(--cmp-textinput-sm-gap);
   }
+  .space-y-8 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(var(--spacing-8) * var(--tw-space-y-reverse));
+      margin-block-end: calc(var(--spacing-8) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .gap-x-\[var\(--cmp-datepicker-calendar-legend-group-gap\)\] {
     column-gap: var(--cmp-datepicker-calendar-legend-group-gap);
   }
@@ -986,6 +1379,9 @@
   .rounded-full {
     border-radius: var(--radius-full);
   }
+  .rounded-lg {
+    border-radius: var(--radius-lg);
+  }
   .rounded-md {
     border-radius: var(--radius-md);
   }
@@ -1124,6 +1520,9 @@
   .border-gray-200 {
     border-color: var(--color-gray-200);
   }
+  .border-grey-20 {
+    border-color: var(--color-grey-20);
+  }
   .border-grey-30 {
     border-color: var(--color-grey-30);
   }
@@ -1226,6 +1625,9 @@
   .bg-grey-05 {
     background-color: var(--color-grey-05);
   }
+  .bg-grey-90 {
+    background-color: var(--color-grey-90);
+  }
   .bg-red-50 {
     background-color: var(--color-red-50);
   }
@@ -1244,12 +1646,18 @@
   .p-0 {
     padding: 0;
   }
+  .p-8 {
+    padding: var(--spacing-8);
+  }
   .p-12 {
     padding: var(--spacing-12);
   }
   .p-20 {
     padding: var(--spacing-20);
   }
+  .p-24 {
+    padding: var(--spacing-24);
+  }
   .p-32 {
     padding: var(--spacing-32);
   }
@@ -1262,9 +1670,6 @@
   .p-\[12px\] {
     padding: 12px;
   }
-  .p-\[32px\] {
-    padding: 32px;
-  }
   .p-\[var\(--cmp-datepicker-calendar-paddingXY\)\] {
     padding: var(--cmp-datepicker-calendar-paddingXY);
   }
@@ -1277,6 +1682,9 @@
   .px-\(--cmp-field-addonLabel-paddingX\) {
     padding-inline: var(--cmp-field-addonLabel-paddingX);
   }
+  .px-3 {
+    padding-inline: calc(var(--spacing) * 3);
+  }
   .px-8 {
     padding-inline: var(--spacing-8);
   }
@@ -1346,6 +1754,9 @@
   .py-\(--cmp-chipInput-sm-paddingY\) {
     padding-block: var(--cmp-chipInput-sm-paddingY);
   }
+  .py-1 {
+    padding-block: var(--spacing);
+  }
   .py-4 {
     padding-block: var(--spacing-4);
   }
@@ -1427,6 +1838,18 @@
   .align-middle {
     vertical-align: middle;
   }
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
   .text-12 {
     font-size: var(--text-12);
   }
@@ -1439,6 +1862,9 @@
   .text-16 {
     font-size: var(--text-16);
   }
+  .text-20 {
+    font-size: var(--text-20);
+  }
   .text-24 {
     font-size: var(--text-24);
   }
@@ -1448,9 +1874,6 @@
   .text-\[12px\] {
     font-size: 12px;
   }
-  .text-\[13px\] {
-    font-size: 13px;
-  }
   .text-\[14px\] {
     font-size: 14px;
   }
@@ -1496,6 +1919,10 @@
     --tw-leading: 30px;
     line-height: 30px;
   }
+  .leading-\[normal\] {
+    --tw-leading: normal;
+    line-height: normal;
+  }
   .leading-\[var\(--cmp-datepicker-calendar-day-circle-size\)\] {
     --tw-leading: var(--cmp-datepicker-calendar-day-circle-size);
     line-height: var(--cmp-datepicker-calendar-day-circle-size);
@@ -1568,6 +1995,9 @@
   .text-\(--color-var\) {
     color: var(--color-var);
   }
+  .text-\(--sys-color-fg-warning\) {
+    color: var(--sys-color-fg-warning);
+  }
   .text-\(--sys-color-field-text-default\) {
     color: var(--sys-color-field-text-default);
   }
@@ -1643,9 +2073,6 @@
   .text-\[color\:var\(--color-grey-65\)\] {
     color: var(--color-grey-65);
   }
-  .text-\[color\:var\(--color-grey-70\)\] {
-    color: var(--color-grey-70);
-  }
   .text-\[color\:var\(--color-white\)\] {
     color: var(--color-white);
   }
@@ -1676,6 +2103,15 @@
   .text-green-strong {
     color: var(--color-green-strong);
   }
+  .text-grey-45 {
+    color: var(--color-grey-45);
+  }
+  .text-grey-55 {
+    color: var(--color-grey-55);
+  }
+  .text-grey-80 {
+    color: var(--color-grey-80);
+  }
   .text-inherit {
     color: inherit;
   }
@@ -1685,6 +2121,9 @@
   .text-red-strong {
     color: var(--color-red-strong);
   }
+  .text-white {
+    color: var(--color-white);
+  }
   .uppercase {
     text-transform: uppercase;
   }
@@ -2075,6 +2514,13 @@
       }
     }
   }
+  .hover\:bg-grey-10 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-grey-10);
+      }
+    }
+  }
   .hover\:\!text-\[color\:var\(--cmp-radioButton-content-hover\)\] {
     &:hover {
       @media (hover: hover) {
@@ -2451,6 +2897,7 @@
   --sys-color-bg-success: #00973C;
   --sys-color-bg-successLight: #12B553;
   --sys-color-bg-neutralLight: #F6F6F6;
+  --sys-color-bg-neutralBright: #F9F9F9;
   --sys-color-bg-tableHeader: #F5FAFF;
   --sys-color-fg-primary: #222222;
   --sys-color-fg-secondary: #555555;
@@ -2876,6 +3323,17 @@
   --cmp-datepicker-calendar-range-width: 20px;
   --cmp-datepicker-calendar-legend-gap: 4px;
   --cmp-datepicker-calendar-legend-group-gap: 12px;
+  --cmp-datepicker-calendar-time-bg-default: #F9F9F9;
+  --cmp-datepicker-calendar-time-bg-selected: #F5FAFF;
+  --cmp-datepicker-calendar-time-date-label: #222222;
+  --cmp-datepicker-calendar-time-date-unit: #888888;
+  --cmp-datepicker-calendar-time-date-gap: 6px;
+  --cmp-datepicker-calendar-time-radius: 8px;
+  --cmp-datepicker-calendar-time-paddingX: 16px;
+  --cmp-datepicker-calendar-time-paddingY: 12px;
+  --cmp-datepicker-calendar-time-gap: 12px;
+  --cmp-datepicker-calendar-time-section-gap: 12px;
+  --cmp-datepicker-calendar-time-unit-gap: 2px;
   --cmp-chip-height: 24px;
   --cmp-chip-paddingX: 8px;
   --cmp-chip-gap: 4px;
@@ -2890,6 +3348,39 @@
   --cmp-chip-content-disabled: #888888;
   --cmp-chip-border-focus: #E1E1E1;
   --cmp-chip-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;
+  --cmp-timepicker-icon-disabled: #BBBBBB;
+  --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;
+  --cmp-timepicker-selector-time-gap: 4px;
+  --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-tag-xs-height: 20px;
   --cmp-tag-xs-paddingX: 8px;
   --cmp-tag-xs-gap: 4px;
@@ -3148,21 +3639,15 @@
   --cmp-tab-sub-gap-vertical: 16px;
   --cmp-tab-sub-content-gap: 4px;
   --cmp-tab-sub-item-height: 20px;
-  --cmp-gnbBelt-bg: #001B39;
   --cmp-gnbBelt-top-height: 56px;
   --cmp-gnbBelt-top-paddingX: 12px;
   --cmp-gnbBelt-top-gap: 8px;
-  --cmp-gnbBelt-top-border: #004177;
   --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-bg-default: #001B39;
-  --cmp-gnbBelt-item-bg-selected: #002B5E;
-  --cmp-gnbBelt-item-color-default: #FFFFFF;
-  --cmp-gnbBelt-item-color-active: #93C4FF;
   --cmp-gnbBelt-item-depth1-paddingLeft: 20px;
   --cmp-gnbBelt-item-depth2-paddingLeft: 32px;
   --cmp-gnbBelt-item-depth3-paddingLeft: 44px;
@@ -3170,8 +3655,6 @@
   --cmp-gnbBox-top-height: 56px;
   --cmp-gnbBox-paddingX: 16px;
   --cmp-gnbBox-gap: 16px;
-  --cmp-gnbBox-bg: #FFFFFF;
-  --cmp-gnbBox-border: #E1E1E1;
   --cmp-gnbBox-button-gap: 8px;
   --cmp-gnbBox-logo-height: 32px;
   --cmp-gnbBox-menu-body-padding: 12px;
@@ -3180,11 +3663,6 @@
   --cmp-gnbBox-item-gap: 8px;
   --cmp-gnbBox-item-radius: 8px;
   --cmp-gnbBox-item-arrow: 12px;
-  --cmp-gnbBox-item-bg-default: #FFFFFF;
-  --cmp-gnbBox-item-bg-hover: #F6F6F6;
-  --cmp-gnbBox-item-bg-selected: #EFF6FF;
-  --cmp-gnbBox-item-color-default: #222222;
-  --cmp-gnbBox-item-color-selected: #0075FF;
   --cmp-gnbBox-item-depth1-paddingLeft: 12px;
   --cmp-gnbBox-item-depth1-icon: 20px;
   --cmp-gnbBox-item-depth2-paddingLeft: 24px;
@@ -3208,6 +3686,26 @@
   --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;
 }
 @layer components {
   .typo-control-xs-default {
@@ -3655,6 +4153,11 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-space-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -3817,6 +4320,7 @@
       --tw-rotate-z: initial;
       --tw-skew-x: initial;
       --tw-skew-y: initial;
+      --tw-space-y-reverse: 0;
       --tw-border-style: solid;
       --tw-leading: initial;
       --tw-font-weight: initial;