sellmate-design-system-react 9.0.0-beta.64 → 9.0.0-beta.66

package/dist/styles.css

@@ -390,6 +390,8 @@
     --opacity-005: 5%;
     --opacity-008: 8%;
     --opacity-040: 40%;
+    --opacity-030: 30%;
+    --opacity-050: 50%;
     --opacity-060: 60%;
     --opacity-080: 80%;
     --z-raised: 1;
@@ -978,9 +980,9 @@
     width: var(--cmp-calendarBoard-daySequence-size);
     height: var(--cmp-calendarBoard-daySequence-size);
   }
-  .size-\(--cmp-tree-item-arrow-icon\) {
-    width: var(--cmp-tree-item-arrow-icon);
-    height: var(--cmp-tree-item-arrow-icon);
+  .size-\(--cmp-ghostButton-xxs-size\) {
+    width: var(--cmp-ghostButton-xxs-size);
+    height: var(--cmp-ghostButton-xxs-size);
   }
   .size-\[16px\] {
     width: 16px;
@@ -1426,8 +1428,8 @@
   .w-\[1080px\] {
     width: 1080px;
   }
-  .w-\[calc\(14px\+var\(--cmp-tree-item-arrow-icon\)\)\] {
-    width: calc(14px + var(--cmp-tree-item-arrow-icon));
+  .w-\[calc\(14px\+var\(--cmp-ghostButton-xxs-size\)\)\] {
+    width: calc(14px + var(--cmp-ghostButton-xxs-size));
   }
   .w-\[var\(--border-width-1\)\] {
     width: var(--border-width-1);
@@ -1842,6 +1844,9 @@
   .gap-\(--cmp-chart-chartTooltipItem-gap\) {
     gap: var(--cmp-chart-chartTooltipItem-gap);
   }
+  .gap-\(--cmp-chart-doughnut-legend-data-default-gap\) {
+    gap: var(--cmp-chart-doughnut-legend-data-default-gap);
+  }
   .gap-\(--cmp-chart-gap\) {
     gap: var(--cmp-chart-gap);
   }
@@ -1917,6 +1922,9 @@
   .gap-\(--cmp-tree-item-rowGap\) {
     gap: var(--cmp-tree-item-rowGap);
   }
+  .gap-\(--sys-space-field-vertical-gap\) {
+    gap: var(--sys-space-field-vertical-gap);
+  }
   .gap-1 {
     gap: var(--spacing);
   }
@@ -2022,6 +2030,9 @@
   .gap-\[var\(--cmp-chipFilter-listbox-top-gap\)\] {
     gap: var(--cmp-chipFilter-listbox-top-gap);
   }
+  .gap-\[var\(--cmp-contextAlert-gap\)\] {
+    gap: var(--cmp-contextAlert-gap);
+  }
   .gap-\[var\(--cmp-datepicker-calendar-day-dot-gap\)\] {
     gap: var(--cmp-datepicker-calendar-day-dot-gap);
   }
@@ -2323,6 +2334,9 @@
   .rounded-\[var\(--cmp-checkbox-radius\)\] {
     border-radius: var(--cmp-checkbox-radius);
   }
+  .rounded-\[var\(--cmp-contextAlert-radius\)\] {
+    border-radius: var(--cmp-contextAlert-radius);
+  }
   .rounded-\[var\(--cmp-datepicker-calendar-day-circle-radius\)\] {
     border-radius: var(--cmp-datepicker-calendar-day-circle-radius);
   }
@@ -2478,6 +2492,10 @@
     border-style: var(--tw-border-style);
     border-width: var(--cmp-chip-border-width);
   }
+  .border-\[length\:var\(--cmp-contextAlert-border-width\)\] {
+    border-style: var(--tw-border-style);
+    border-width: var(--cmp-contextAlert-border-width);
+  }
   .border-\[length\:var\(--cmp-guide-button-border-width\)\] {
     border-style: var(--tw-border-style);
     border-width: var(--cmp-guide-button-border-width);
@@ -2613,6 +2631,9 @@
   .border-\[color\:var\(--btn-border\)\] {
     border-color: var(--btn-border);
   }
+  .border-\[color\:var\(--ca-border\)\] {
+    border-color: var(--ca-border);
+  }
   .border-\[color\:var\(--cb-border\)\] {
     border-color: var(--cb-border);
   }
@@ -2928,6 +2949,9 @@
   .bg-\[var\(--btn-bg\)\] {
     background-color: var(--btn-bg);
   }
+  .bg-\[var\(--ca-bg\)\] {
+    background-color: var(--ca-bg);
+  }
   .bg-\[var\(--cb-bg\)\] {
     background-color: var(--cb-bg);
   }
@@ -3354,6 +3378,9 @@
   .px-\[var\(--cmp-chipFilter-listbox-top-paddingX\)\] {
     padding-inline: var(--cmp-chipFilter-listbox-top-paddingX);
   }
+  .px-\[var\(--cmp-contextAlert-paddingX\)\] {
+    padding-inline: var(--cmp-contextAlert-paddingX);
+  }
   .px-\[var\(--cmp-datepicker-calendar-time-paddingX\)\] {
     padding-inline: var(--cmp-datepicker-calendar-time-paddingX);
   }
@@ -3507,6 +3534,9 @@
   .py-\[var\(--cmp-chipFilter-listbox-top-paddingY\)\] {
     padding-block: var(--cmp-chipFilter-listbox-top-paddingY);
   }
+  .py-\[var\(--cmp-contextAlert-paddingY\)\] {
+    padding-block: var(--cmp-contextAlert-paddingY);
+  }
   .py-\[var\(--cmp-datepicker-calendar-day-dot-paddingY\)\] {
     padding-block: var(--cmp-datepicker-calendar-day-dot-paddingY);
   }
@@ -3946,6 +3976,12 @@
   .text-\(--cmp-chart-legendItem-color\) {
     color: var(--cmp-chart-legendItem-color);
   }
+  .text-\(--cmp-chart-title-color\) {
+    color: var(--cmp-chart-title-color);
+  }
+  .text-\(--cmp-chart-unit-color\) {
+    color: var(--cmp-chart-unit-color);
+  }
   .text-\(--cmp-chatAttachedFile-filename-color\) {
     color: var(--cmp-chatAttachedFile-filename-color);
   }
@@ -4114,6 +4150,9 @@
   .text-\[\#374151\] {
     color: #374151;
   }
+  .text-\[color\:var\(--cmp-contextAlert-content\)\] {
+    color: var(--cmp-contextAlert-content);
+  }
   .text-\[color\:var\(--cmp-datepicker-calendar-day-default-text\)\] {
     color: var(--cmp-datepicker-calendar-day-default-text);
   }
@@ -4355,6 +4394,14 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\(--cmp-chart-chartTooltip-shadow\) {
+    --tw-shadow: var(--cmp-chart-chartTooltip-shadow);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-\(--cmp-gnb-launcher-listBox-shadow\) {
+    --tw-shadow: var(--cmp-gnb-launcher-listBox-shadow);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\(--shadow-overlay\) {
     --tw-shadow: var(--shadow-overlay);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -4379,12 +4426,16 @@
     --tw-shadow: 5px 0 8px 0 var(--tw-shadow-color, rgba(34,34,34,0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-\[var\(--shadow-overlay\)\] {
-    --tw-shadow: var(--shadow-overlay);
+  .shadow-\[var\(--cmp-chipFilter-listbox-shadow\)\] {
+    --tw-shadow: var(--cmp-chipFilter-listbox-shadow);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-\[var\(--cmp-overlay-footer-shadow\)\] {
+    --tw-shadow: var(--cmp-overlay-footer-shadow);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-\[var\(--shadow-spread-md\)\] {
-    --tw-shadow: var(--shadow-spread-md);
+  .shadow-\[var\(--shadow-overlay\)\] {
+    --tw-shadow: var(--shadow-overlay);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .shadow-floating {
@@ -7164,6 +7215,7 @@
   --sys-space-field-md-paddingY: 8px;
   --sys-space-field-md-container-gap: 12px;
   --sys-space-field-md-gap: 16px;
+  --sys-space-field-vertical-gap: 8px;
   --sys-space-navigation-lg-paddingX: 32px;
   --sys-space-navigation-md-paddingX: 24px;
   --sys-space-table-padding-sm: 8px;
@@ -7978,6 +8030,8 @@
   --cmp-overlay-footer-paddingX: 20px;
   --cmp-overlay-footer-paddingY: 8px;
   --cmp-overlay-footer-gap: 16px;
+  --cmp-overlay-footer-shadow: 0px 0px 24px 0px rgba(34,34,34,0.2);
+  --cmp-overlay-footer-shadow-filter: drop-shadow(0px 0px 24px rgba(34,34,34,0.2));
   --cmp-modal-radius: 8px;
   --cmp-modal-confirm-paddingX: 32px;
   --cmp-modal-confirm-paddingY: 40px;
@@ -8028,6 +8082,25 @@
   --cmp-callout-danger-title-gap: 2px;
   --cmp-callout-danger-title-color: #FFFFFF;
   --cmp-callout-danger-title-icon: 24px;
+  --cmp-contextAlert-radius: 8px;
+  --cmp-contextAlert-border-width: 1px;
+  --cmp-contextAlert-paddingX: 12px;
+  --cmp-contextAlert-paddingY: 8px;
+  --cmp-contextAlert-gap: 8px;
+  --cmp-contextAlert-icon: 16px;
+  --cmp-contextAlert-content: #555555;
+  --cmp-contextAlert-default-bg: #F9F9F9;
+  --cmp-contextAlert-default-border: #E1E1E1;
+  --cmp-contextAlert-danger-bg: #FCEFEF;
+  --cmp-contextAlert-danger-border: #FFB5B5;
+  --cmp-contextAlert-warning-bg: #FEF1EA;
+  --cmp-contextAlert-warning-border: #FFD5AF;
+  --cmp-contextAlert-success-bg: #E8F9EF;
+  --cmp-contextAlert-success-border: #AEEAC7;
+  --cmp-contextAlert-accent-bg: #E6F1FF;
+  --cmp-contextAlert-accent-border: #93C4FF;
+  --cmp-contextAlert-discovery-bg: #F4EFFF;
+  --cmp-contextAlert-discovery-border: #D9C9FF;
   --cmp-guide-gap: 4px;
   --cmp-guide-button-height: 28px;
   --cmp-guide-button-paddingX: 12px;
@@ -8233,6 +8306,8 @@
   --cmp-gnb-launcher-listBox-bg: #FFFFFF;
   --cmp-gnb-launcher-listBox-radius: 8px;
   --cmp-gnb-launcher-listBox-paddingAll: 12px;
+  --cmp-gnb-launcher-listBox-shadow: 0px 0px 24px -6px rgba(34,34,34,0.12), 4px 4px 16px -4px rgba(34,34,34,0.2);
+  --cmp-gnb-launcher-listBox-shadow-filter: drop-shadow(0px 0px 24px rgba(34,34,34,0.12)) drop-shadow(4px 4px 16px rgba(34,34,34,0.2));
   --cmp-gnb-system-panel-light-bg: #FFFFFF;
   --cmp-gnb-system-panel-light-border: #E1E1E1;
   --cmp-gnb-system-panel-dark-bg: #004177;
@@ -8397,7 +8472,6 @@
   --cmp-tree-item-rowGap: 8px;
   --cmp-tree-item-contentGap: 12px;
   --cmp-tree-item-text-default: #222222;
-  --cmp-tree-item-arrow-icon: 16px;
   --cmp-tree-connector-line-color: #E1E1E1;
   --cmp-pageBody-padding-default: 16px;
   --cmp-pageBody-padding-scrollEnd: 80px;
@@ -8451,6 +8525,8 @@
   --cmp-chipFilter-listbox-bg: #FFFFFF;
   --cmp-chipFilter-listbox-border-color: #E1E1E1;
   --cmp-chipFilter-listbox-radius: 8px;
+  --cmp-chipFilter-listbox-shadow: 0px 0px 16px -4px rgba(34,34,34,0.12), 2px 2px 6px -2px rgba(34,34,34,0.16);
+  --cmp-chipFilter-listbox-shadow-filter: drop-shadow(0px 0px 16px rgba(34,34,34,0.12)) drop-shadow(2px 2px 6px rgba(34,34,34,0.16));
   --cmp-chipFilter-listbox-top-paddingX: 12px;
   --cmp-chipFilter-listbox-top-paddingY: 8px;
   --cmp-chipFilter-listbox-top-gap: 8px;
@@ -8542,15 +8618,60 @@
   --cmp-chart-paddingAll: 36px;
   --cmp-chart-gap: 12px;
   --cmp-chart-bg: #FFFFFF;
+  --cmp-chart-title-color: #222222;
+  --cmp-chart-unit-color: #AAAAAA;
+  --cmp-chart-dataLabel-gap: 4px;
+  --cmp-chart-dataLabel-color-default: #555555;
+  --cmp-chart-opacity-default: 80%;
   --cmp-chart-axis-color: #222222;
-  --cmp-chart-grid-line-color: #E1E1E1;
+  --cmp-chart-gridline-color: #E1E1E1;
   --cmp-chart-baseline-color: #AAAAAA;
+  --cmp-chart-line-width: 4px;
+  --cmp-chart-line-opacity: 50%;
+  --cmp-chart-line-point-radius: 9999px;
+  --cmp-chart-line-point-size-default: 10px;
+  --cmp-chart-line-point-size-hover: 12px;
+  --cmp-chart-line-point-size-bg: 24px;
+  --cmp-chart-line-point-opacity-bg: 30%;
+  --cmp-chart-line-point-gap: 4px;
+  --cmp-chart-line-point-dimmed-palette-gradation-1: #5CB0F3;
+  --cmp-chart-line-point-dimmed-palette-gradation-2: #9CD1FC;
+  --cmp-chart-line-point-dimmed-palette-gradation-3: #D5EBFE;
+  --cmp-chart-line-point-dimmed-palette-gradation-4: #D5EBFE;
+  --cmp-chart-line-point-dimmed-palette-gradation-5: #EAF5FE;
+  --cmp-chart-line-point-dimmed-palette-gradation-6: #EAF5FE;
+  --cmp-chart-line-point-dimmed-palette-variation-positivePrimary: #BBDAFF;
+  --cmp-chart-line-point-dimmed-palette-variation-positiveSecondary: #A4E2FD;
+  --cmp-chart-line-point-dimmed-palette-variation-negativePrimary: #FFD3D3;
+  --cmp-chart-line-point-dimmed-palette-variation-negativeSecondary: #FFD5AF;
+  --cmp-chart-line-point-dimmed-palette-variation-neutralPrimary: #D8D8D8;
+  --cmp-chart-line-point-dimmed-palette-variation-neutralSecondary: #EEEEEE;
+  --cmp-chart-line-point-dimmed-palette-multi-blue: #BBDAFF;
+  --cmp-chart-line-point-dimmed-palette-multi-skyblue: #A4E2FD;
+  --cmp-chart-line-point-dimmed-palette-multi-yellow: #FFE99E;
+  --cmp-chart-line-point-dimmed-palette-multi-olive: #FAFAA1;
+  --cmp-chart-line-point-dimmed-palette-multi-lightRed: #FFD3D3;
+  --cmp-chart-line-point-dimmed-palette-multi-warmBlue: #A4E2FD;
+  --cmp-chart-line-point-dimmed-palette-multi-orange: #FFD5AF;
+  --cmp-chart-line-point-dimmed-palette-multi-green: #AEEAC7;
+  --cmp-chart-line-point-dimmed-palette-multi-navy: #9CD1FC;
+  --cmp-chart-line-point-dimmed-palette-multi-grey: #D8D8D8;
+  --cmp-chart-line-point-dimmed-palette-multi-red: #FFD3D3;
+  --cmp-chart-line-point-dimmed-palette-single: #BBDAFF;
+  --cmp-chart-line-area-gradation-start: 30%;
+  --cmp-chart-line-area-gradation-end: 5%;
   --cmp-chart-bar-radius: 8px;
-  --cmp-chart-bar-dataLabel-color-default: #555555;
-  --cmp-chart-bar-opacity-default: 80%;
   --cmp-chart-bar-opacity-dimmed: 60%;
   --cmp-chart-barContainer-hover-bg: #888888;
   --cmp-chart-barContainer-hover-opacity: 8%;
+  --cmp-chart-doughnut-hover-grow: 4px;
+  --cmp-chart-doughnut-hover-radius: 2px;
+  --cmp-chart-doughnut-opacity-dimmed: 40%;
+  --cmp-chart-doughnut-shadow-hover: 0px 0px 24px -6px rgba(34,34,34,0.12), 4px 4px 16px -4px rgba(34,34,34,0.2);
+  --cmp-chart-doughnut-shadow-hover-filter: drop-shadow(0px 0px 24px rgba(34,34,34,0.12)) drop-shadow(4px 4px 16px rgba(34,34,34,0.2));
+  --cmp-chart-doughnut-legend-data-default-gap: 4px;
+  --cmp-chart-doughnut-legend-data-simple-gapY: 24px;
+  --cmp-chart-doughnut-innerRatio: 0.4;
   --cmp-chart-legend-group-gap: 24px;
   --cmp-chart-legendItem-gap: 8px;
   --cmp-chart-legendItem-paddingY: 4px;
@@ -8559,11 +8680,31 @@
   --cmp-chart-chartTooltip-paddingY: 8px;
   --cmp-chart-chartTooltip-gap: 4px;
   --cmp-chart-chartTooltip-radius: 8px;
+  --cmp-chart-chartTooltip-shadow: 0px 0px 24px -6px rgba(34,34,34,0.12), 4px 4px 16px -4px rgba(34,34,34,0.2);
+  --cmp-chart-chartTooltip-shadow-filter: drop-shadow(0px 0px 24px rgba(34,34,34,0.12)) drop-shadow(4px 4px 16px rgba(34,34,34,0.2));
   --cmp-chart-chartTooltip-bg: #FFFFFF;
   --cmp-chart-chartTooltip-title-color: #555555;
   --cmp-chart-chartTooltipItem-gap: 8px;
   --cmp-chart-chartTooltipItem-label-color: #222222;
   --cmp-chart-chartTooltipItem-dataValue-color: #222222;
+  --cmp-chart-dataValue-palette-gradation-6: #5CB0F3;
+  --cmp-chart-dataValue-palette-variation-positivePrimary: #005CC9;
+  --cmp-chart-dataValue-palette-variation-positiveSecondary: #128FC7;
+  --cmp-chart-dataValue-palette-variation-negativePrimary: #FB4444;
+  --cmp-chart-dataValue-palette-variation-negativeSecondary: #FF6B00;
+  --cmp-chart-dataValue-palette-variation-neutralPrimary: #444444;
+  --cmp-chart-dataValue-palette-variation-neutralSecondary: #737373;
+  --cmp-chart-dataValue-palette-multi-blue: #005CC9;
+  --cmp-chart-dataValue-palette-multi-skyblue: #128FC7;
+  --cmp-chart-dataValue-palette-multi-yellow: #CA9612;
+  --cmp-chart-dataValue-palette-multi-olive: #838300;
+  --cmp-chart-dataValue-palette-multi-lightRed: #FB4444;
+  --cmp-chart-dataValue-palette-multi-warmBlue: #128FC7;
+  --cmp-chart-dataValue-palette-multi-orange: #FF6B00;
+  --cmp-chart-dataValue-palette-multi-green: #00973C;
+  --cmp-chart-dataValue-palette-multi-navy: #025497;
+  --cmp-chart-dataValue-palette-multi-grey: #444444;
+  --cmp-chart-dataValue-palette-multi-red: #FB4444;
   --cmp-chart-palette-gradation-1: #025497;
   --cmp-chart-palette-gradation-2: #006AC1;
   --cmp-chart-palette-gradation-3: #1F8AE1;
@@ -8826,10 +8967,10 @@
     line-height: 20px;
     text-decoration: underline;
   }
-  .typo-feedback-md-bold {
+  .typo-feedback-md-regular {
     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;
+    font-weight: 400;
     line-height: 24px;
   }
   .typo-feedback-md-medium {
@@ -8838,6 +8979,12 @@
     font-weight: 500;
     line-height: 24px;
   }
+  .typo-feedback-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-feedback-md-underline {
     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;

package/dist/theme.css

@@ -362,6 +362,8 @@
   --opacity-005: 5%;
   --opacity-008: 8%;
   --opacity-040: 40%;
+  --opacity-030: 30%;
+  --opacity-050: 50%;
   --opacity-060: 60%;
   --opacity-080: 80%;
   --z-raised: 1;
@@ -450,6 +452,7 @@
   --sys-space-field-md-paddingY: 8px;
   --sys-space-field-md-container-gap: 12px;
   --sys-space-field-md-gap: 16px;
+  --sys-space-field-vertical-gap: 8px;
   --sys-space-navigation-lg-paddingX: 32px;
   --sys-space-navigation-md-paddingX: 24px;
   --sys-space-table-padding-sm: 8px;
@@ -1266,6 +1269,8 @@
   --cmp-overlay-footer-paddingX: 20px;
   --cmp-overlay-footer-paddingY: 8px;
   --cmp-overlay-footer-gap: 16px;
+  --cmp-overlay-footer-shadow: 0px 0px 24px 0px rgba(34,34,34,0.2);
+  --cmp-overlay-footer-shadow-filter: drop-shadow(0px 0px 24px rgba(34,34,34,0.2));
   --cmp-modal-radius: 8px;
   --cmp-modal-confirm-paddingX: 32px;
   --cmp-modal-confirm-paddingY: 40px;
@@ -1316,6 +1321,25 @@
   --cmp-callout-danger-title-gap: 2px;
   --cmp-callout-danger-title-color: #FFFFFF;
   --cmp-callout-danger-title-icon: 24px;
+  --cmp-contextAlert-radius: 8px;
+  --cmp-contextAlert-border-width: 1px;
+  --cmp-contextAlert-paddingX: 12px;
+  --cmp-contextAlert-paddingY: 8px;
+  --cmp-contextAlert-gap: 8px;
+  --cmp-contextAlert-icon: 16px;
+  --cmp-contextAlert-content: #555555;
+  --cmp-contextAlert-default-bg: #F9F9F9;
+  --cmp-contextAlert-default-border: #E1E1E1;
+  --cmp-contextAlert-danger-bg: #FCEFEF;
+  --cmp-contextAlert-danger-border: #FFB5B5;
+  --cmp-contextAlert-warning-bg: #FEF1EA;
+  --cmp-contextAlert-warning-border: #FFD5AF;
+  --cmp-contextAlert-success-bg: #E8F9EF;
+  --cmp-contextAlert-success-border: #AEEAC7;
+  --cmp-contextAlert-accent-bg: #E6F1FF;
+  --cmp-contextAlert-accent-border: #93C4FF;
+  --cmp-contextAlert-discovery-bg: #F4EFFF;
+  --cmp-contextAlert-discovery-border: #D9C9FF;
   --cmp-guide-gap: 4px;
   --cmp-guide-button-height: 28px;
   --cmp-guide-button-paddingX: 12px;
@@ -1521,6 +1545,8 @@
   --cmp-gnb-launcher-listBox-bg: #FFFFFF;
   --cmp-gnb-launcher-listBox-radius: 8px;
   --cmp-gnb-launcher-listBox-paddingAll: 12px;
+  --cmp-gnb-launcher-listBox-shadow: 0px 0px 24px -6px rgba(34,34,34,0.12), 4px 4px 16px -4px rgba(34,34,34,0.2);
+  --cmp-gnb-launcher-listBox-shadow-filter: drop-shadow(0px 0px 24px rgba(34,34,34,0.12)) drop-shadow(4px 4px 16px rgba(34,34,34,0.2));
   --cmp-gnb-system-panel-light-bg: #FFFFFF;
   --cmp-gnb-system-panel-light-border: #E1E1E1;
   --cmp-gnb-system-panel-dark-bg: #004177;
@@ -1685,7 +1711,6 @@
   --cmp-tree-item-rowGap: 8px;
   --cmp-tree-item-contentGap: 12px;
   --cmp-tree-item-text-default: #222222;
-  --cmp-tree-item-arrow-icon: 16px;
   --cmp-tree-connector-line-color: #E1E1E1;
   --cmp-pageBody-padding-default: 16px;
   --cmp-pageBody-padding-scrollEnd: 80px;
@@ -1739,6 +1764,8 @@
   --cmp-chipFilter-listbox-bg: #FFFFFF;
   --cmp-chipFilter-listbox-border-color: #E1E1E1;
   --cmp-chipFilter-listbox-radius: 8px;
+  --cmp-chipFilter-listbox-shadow: 0px 0px 16px -4px rgba(34,34,34,0.12), 2px 2px 6px -2px rgba(34,34,34,0.16);
+  --cmp-chipFilter-listbox-shadow-filter: drop-shadow(0px 0px 16px rgba(34,34,34,0.12)) drop-shadow(2px 2px 6px rgba(34,34,34,0.16));
   --cmp-chipFilter-listbox-top-paddingX: 12px;
   --cmp-chipFilter-listbox-top-paddingY: 8px;
   --cmp-chipFilter-listbox-top-gap: 8px;
@@ -1830,15 +1857,60 @@
   --cmp-chart-paddingAll: 36px;
   --cmp-chart-gap: 12px;
   --cmp-chart-bg: #FFFFFF;
+  --cmp-chart-title-color: #222222;
+  --cmp-chart-unit-color: #AAAAAA;
+  --cmp-chart-dataLabel-gap: 4px;
+  --cmp-chart-dataLabel-color-default: #555555;
+  --cmp-chart-opacity-default: 80%;
   --cmp-chart-axis-color: #222222;
-  --cmp-chart-grid-line-color: #E1E1E1;
+  --cmp-chart-gridline-color: #E1E1E1;
   --cmp-chart-baseline-color: #AAAAAA;
+  --cmp-chart-line-width: 4px;
+  --cmp-chart-line-opacity: 50%;
+  --cmp-chart-line-point-radius: 9999px;
+  --cmp-chart-line-point-size-default: 10px;
+  --cmp-chart-line-point-size-hover: 12px;
+  --cmp-chart-line-point-size-bg: 24px;
+  --cmp-chart-line-point-opacity-bg: 30%;
+  --cmp-chart-line-point-gap: 4px;
+  --cmp-chart-line-point-dimmed-palette-gradation-1: #5CB0F3;
+  --cmp-chart-line-point-dimmed-palette-gradation-2: #9CD1FC;
+  --cmp-chart-line-point-dimmed-palette-gradation-3: #D5EBFE;
+  --cmp-chart-line-point-dimmed-palette-gradation-4: #D5EBFE;
+  --cmp-chart-line-point-dimmed-palette-gradation-5: #EAF5FE;
+  --cmp-chart-line-point-dimmed-palette-gradation-6: #EAF5FE;
+  --cmp-chart-line-point-dimmed-palette-variation-positivePrimary: #BBDAFF;
+  --cmp-chart-line-point-dimmed-palette-variation-positiveSecondary: #A4E2FD;
+  --cmp-chart-line-point-dimmed-palette-variation-negativePrimary: #FFD3D3;
+  --cmp-chart-line-point-dimmed-palette-variation-negativeSecondary: #FFD5AF;
+  --cmp-chart-line-point-dimmed-palette-variation-neutralPrimary: #D8D8D8;
+  --cmp-chart-line-point-dimmed-palette-variation-neutralSecondary: #EEEEEE;
+  --cmp-chart-line-point-dimmed-palette-multi-blue: #BBDAFF;
+  --cmp-chart-line-point-dimmed-palette-multi-skyblue: #A4E2FD;
+  --cmp-chart-line-point-dimmed-palette-multi-yellow: #FFE99E;
+  --cmp-chart-line-point-dimmed-palette-multi-olive: #FAFAA1;
+  --cmp-chart-line-point-dimmed-palette-multi-lightRed: #FFD3D3;
+  --cmp-chart-line-point-dimmed-palette-multi-warmBlue: #A4E2FD;
+  --cmp-chart-line-point-dimmed-palette-multi-orange: #FFD5AF;
+  --cmp-chart-line-point-dimmed-palette-multi-green: #AEEAC7;
+  --cmp-chart-line-point-dimmed-palette-multi-navy: #9CD1FC;
+  --cmp-chart-line-point-dimmed-palette-multi-grey: #D8D8D8;
+  --cmp-chart-line-point-dimmed-palette-multi-red: #FFD3D3;
+  --cmp-chart-line-point-dimmed-palette-single: #BBDAFF;
+  --cmp-chart-line-area-gradation-start: 30%;
+  --cmp-chart-line-area-gradation-end: 5%;
   --cmp-chart-bar-radius: 8px;
-  --cmp-chart-bar-dataLabel-color-default: #555555;
-  --cmp-chart-bar-opacity-default: 80%;
   --cmp-chart-bar-opacity-dimmed: 60%;
   --cmp-chart-barContainer-hover-bg: #888888;
   --cmp-chart-barContainer-hover-opacity: 8%;
+  --cmp-chart-doughnut-hover-grow: 4px;
+  --cmp-chart-doughnut-hover-radius: 2px;
+  --cmp-chart-doughnut-opacity-dimmed: 40%;
+  --cmp-chart-doughnut-shadow-hover: 0px 0px 24px -6px rgba(34,34,34,0.12), 4px 4px 16px -4px rgba(34,34,34,0.2);
+  --cmp-chart-doughnut-shadow-hover-filter: drop-shadow(0px 0px 24px rgba(34,34,34,0.12)) drop-shadow(4px 4px 16px rgba(34,34,34,0.2));
+  --cmp-chart-doughnut-legend-data-default-gap: 4px;
+  --cmp-chart-doughnut-legend-data-simple-gapY: 24px;
+  --cmp-chart-doughnut-innerRatio: 0.4;
   --cmp-chart-legend-group-gap: 24px;
   --cmp-chart-legendItem-gap: 8px;
   --cmp-chart-legendItem-paddingY: 4px;
@@ -1847,11 +1919,31 @@
   --cmp-chart-chartTooltip-paddingY: 8px;
   --cmp-chart-chartTooltip-gap: 4px;
   --cmp-chart-chartTooltip-radius: 8px;
+  --cmp-chart-chartTooltip-shadow: 0px 0px 24px -6px rgba(34,34,34,0.12), 4px 4px 16px -4px rgba(34,34,34,0.2);
+  --cmp-chart-chartTooltip-shadow-filter: drop-shadow(0px 0px 24px rgba(34,34,34,0.12)) drop-shadow(4px 4px 16px rgba(34,34,34,0.2));
   --cmp-chart-chartTooltip-bg: #FFFFFF;
   --cmp-chart-chartTooltip-title-color: #555555;
   --cmp-chart-chartTooltipItem-gap: 8px;
   --cmp-chart-chartTooltipItem-label-color: #222222;
   --cmp-chart-chartTooltipItem-dataValue-color: #222222;
+  --cmp-chart-dataValue-palette-gradation-6: #5CB0F3;
+  --cmp-chart-dataValue-palette-variation-positivePrimary: #005CC9;
+  --cmp-chart-dataValue-palette-variation-positiveSecondary: #128FC7;
+  --cmp-chart-dataValue-palette-variation-negativePrimary: #FB4444;
+  --cmp-chart-dataValue-palette-variation-negativeSecondary: #FF6B00;
+  --cmp-chart-dataValue-palette-variation-neutralPrimary: #444444;
+  --cmp-chart-dataValue-palette-variation-neutralSecondary: #737373;
+  --cmp-chart-dataValue-palette-multi-blue: #005CC9;
+  --cmp-chart-dataValue-palette-multi-skyblue: #128FC7;
+  --cmp-chart-dataValue-palette-multi-yellow: #CA9612;
+  --cmp-chart-dataValue-palette-multi-olive: #838300;
+  --cmp-chart-dataValue-palette-multi-lightRed: #FB4444;
+  --cmp-chart-dataValue-palette-multi-warmBlue: #128FC7;
+  --cmp-chart-dataValue-palette-multi-orange: #FF6B00;
+  --cmp-chart-dataValue-palette-multi-green: #00973C;
+  --cmp-chart-dataValue-palette-multi-navy: #025497;
+  --cmp-chart-dataValue-palette-multi-grey: #444444;
+  --cmp-chart-dataValue-palette-multi-red: #FB4444;
   --cmp-chart-palette-gradation-1: #025497;
   --cmp-chart-palette-gradation-2: #006AC1;
   --cmp-chart-palette-gradation-3: #1F8AE1;
@@ -2133,10 +2225,10 @@
     line-height: 20px;
     text-decoration: underline;
   }
-  .typo-feedback-md-bold {
+  .typo-feedback-md-regular {
     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;
+    font-weight: 400;
     line-height: 24px;
   }
   .typo-feedback-md-medium {
@@ -2145,6 +2237,12 @@
     font-weight: 500;
     line-height: 24px;
   }
+  .typo-feedback-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-feedback-md-underline {
     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;

package/eslint/scale.gen.mjs

@@ -10,7 +10,7 @@ export const TEXT_SIZES = [10,11,12,13,14,16,18,20,24,28,32];
 export const RADIUS = ["2","4","6","8","12","full","control-sm","control-md","feedback-xs-square","feedback-sm-square","feedback-pill","field-sm","field-md","navigation","item-bordered"];
 
 /** 타이포그래피 프리셋 클래스 */
-export const TYPO_PRESETS = ["typo-body-lg-bold","typo-body-lg-default","typo-body-lg-medium","typo-body-lg-semibold","typo-body-md-bold","typo-body-md-default","typo-body-md-medium","typo-body-md-semibold","typo-body-sm-bold","typo-body-sm-default","typo-body-sm-medium","typo-body-sm-semibold","typo-body-xs-default","typo-control-lg","typo-control-md-default","typo-control-md-underline","typo-control-sm-default","typo-control-sm-underline","typo-control-xs-bold","typo-control-xs-default","typo-control-xs-medium","typo-control-xs-underline","typo-feedback-md-bold","typo-feedback-md-medium","typo-feedback-md-underline","typo-feedback-sm-bold","typo-feedback-sm-medium","typo-feedback-sm-regular","typo-feedback-sm-semibold","typo-feedback-sm-underline","typo-feedback-xs","typo-field-lg-bold","typo-field-lg-default","typo-field-lg-medium","typo-field-md-bold","typo-field-md-default","typo-field-md-medium","typo-field-sm-bold","typo-field-sm-default","typo-field-sm-medium","typo-field-xs-default","typo-heading-lg","typo-heading-md","typo-heading-sm","typo-heading-xl","typo-heading-xs","typo-heading-xxs","typo-item-md-default","typo-item-md-selected","typo-item-sm-default","typo-item-sm-selected","typo-navigation-lg-medium","typo-navigation-lg-semibold","typo-navigation-md-bold","typo-navigation-sm-bold","typo-navigation-sm-default","typo-navigation-sm-medium","typo-navigation-xs-bold","typo-navigation-xs-medium","typo-table-accent","typo-table-body","typo-table-header"];
+export const TYPO_PRESETS = ["typo-body-lg-bold","typo-body-lg-default","typo-body-lg-medium","typo-body-lg-semibold","typo-body-md-bold","typo-body-md-default","typo-body-md-medium","typo-body-md-semibold","typo-body-sm-bold","typo-body-sm-default","typo-body-sm-medium","typo-body-sm-semibold","typo-body-xs-default","typo-control-lg","typo-control-md-default","typo-control-md-underline","typo-control-sm-default","typo-control-sm-underline","typo-control-xs-bold","typo-control-xs-default","typo-control-xs-medium","typo-control-xs-underline","typo-feedback-md-bold","typo-feedback-md-medium","typo-feedback-md-regular","typo-feedback-md-underline","typo-feedback-sm-bold","typo-feedback-sm-medium","typo-feedback-sm-regular","typo-feedback-sm-semibold","typo-feedback-sm-underline","typo-feedback-xs","typo-field-lg-bold","typo-field-lg-default","typo-field-lg-medium","typo-field-md-bold","typo-field-md-default","typo-field-md-medium","typo-field-sm-bold","typo-field-sm-default","typo-field-sm-medium","typo-field-xs-default","typo-heading-lg","typo-heading-md","typo-heading-sm","typo-heading-xl","typo-heading-xs","typo-heading-xxs","typo-item-md-default","typo-item-md-selected","typo-item-sm-default","typo-item-sm-selected","typo-navigation-lg-medium","typo-navigation-lg-semibold","typo-navigation-md-bold","typo-navigation-sm-bold","typo-navigation-sm-default","typo-navigation-sm-medium","typo-navigation-xs-bold","typo-navigation-xs-medium","typo-table-accent","typo-table-body","typo-table-header"];
 
 /** 색상 유틸리티 키 (text-*, bg-*, border-* 공통) */
 export const COLORS = ["bg-accent","bg-accentBright","bg-accentFaint","bg-accentLight","bg-brand","bg-caution","bg-danger","bg-dangerLight","bg-deep","bg-frame","bg-neutralBright","bg-neutralLight","bg-progress","bg-screen","bg-subtle","bg-success","bg-tableHeader","bg-warning","black","blue-moderate","blue-strong","blue-subtle","border-accent","border-accentLight","border-bold","border-danger","border-default","border-strong","border-success","border-warning","brilliantblue-05","brilliantblue-10","brilliantblue-20","brilliantblue-25","brilliantblue-40","brilliantblue-50","brilliantblue-60","brilliantblue-70","brilliantblue-75","brilliantblue-80","brilliantblue-85","brilliantblue-90","brilliantblue-95","brilliantblue-99","control-bg-inverseHover","danger-15","danger-20","danger-30","danger-45","danger-60","danger-70","danger-75","danger-80","danger-85","danger-90","danger-95","danger-99","danger-moderate","danger-strong","danger-subtle","darkblue-moderate","darkblue-strong","darkblue-subtle","disabled-bg","disabled-border","disabled-icon","disabled-text","divider-default","fg-accent","fg-accentLight","fg-brand","fg-danger","fg-dangerLight","fg-deep","fg-inverse","fg-primary","fg-quaternary","fg-secondary","fg-subtleCool","fg-subtleWarm","fg-success","fg-successLight","fg-tertiary","fg-warning","field-bg-default","field-bg-hover","field-bg-readOnly","field-border-danger","field-border-default","field-border-focus","field-border-hover","field-border-success","field-icon-default","field-text-default","field-text-placeholder","field-text-readOnly","green-15","green-25","green-45","green-55","green-65","green-70","green-75","green-80","green-85","green-90","green-95","green-99","green-moderate","green-strong","green-subtle","grey-05","grey-10","grey-20","grey-25","grey-30","grey-35","grey-45","grey-50","grey-55","grey-60","grey-65","grey-70","grey-80","grey-85","grey-90","grey-95","grey-moderate","grey-strong","grey-subtle","indigo-moderate","indigo-strong","indigo-subtle","lightblue-strong","lightblue-subtle","link-accent","navigation-gnb-bg-dark","navigation-gnb-bg-system","oceanblue-15","oceanblue-25","oceanblue-50","oceanblue-60","oceanblue-65","oceanblue-70","oceanblue-75","oceanblue-80","oceanblue-85","oceanblue-90","oceanblue-95","oceanblue-99","olive-05","olive-10","olive-15","olive-20","olive-30","olive-45","olive-55","olive-65","olive-70","olive-80","olive-90","olive-95","orange-10","orange-20","orange-35","orange-45","orange-55","orange-60","orange-65","orange-75","orange-85","orange-90","orange-95","orange-99","orange-moderate","orange-strong","orange-subtle","primary-05","primary-10","primary-20","primary-25","primary-40","primary-50","primary-60","primary-70","primary-75","primary-80","primary-85","primary-90","primary-95","primary-99","purple-15","purple-25","purple-45","purple-55","purple-65","purple-70","purple-75","purple-80","purple-85","purple-90","purple-95","purple-99","purple-moderate","purple-strong","purple-subtle","red-15","red-20","red-30","red-45","red-60","red-70","red-75","red-80","red-85","red-90","red-95","red-99","red-moderate","red-strong","red-subtle","steelblue-10","steelblue-25","steelblue-45","steelblue-60","steelblue-65","steelblue-70","steelblue-75","steelblue-80","steelblue-85","steelblue-90","steelblue-95","steelblue-99","success-15","success-25","success-45","success-55","success-65","success-70","success-75","success-80","success-85","success-90","success-95","success-99","success-moderate","success-strong","success-subtle","warning-10","warning-20","warning-35","warning-45","warning-55","warning-60","warning-65","warning-75","warning-85","warning-90","warning-95","warning-99","warning-moderate","warning-strong","warning-subtle","white","yellow-10","yellow-20","yellow-25","yellow-30","yellow-40","yellow-45","yellow-50","yellow-60","yellow-70","yellow-80","yellow-90","yellow-95","yellow-moderate","yellow-strong","yellow-subtle"];

package/package.json

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