sellmate-design-system-react 9.0.0-beta.47 → 9.0.0-beta.49

package/dist/styles.css

@@ -181,7 +181,6 @@
     --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;
@@ -330,6 +329,7 @@
     --radius-4: 4px;
     --radius-6: 6px;
     --radius-8: 8px;
+    --radius-12: 12px;
     --radius-full: 9999px;
     --radius-control-sm: 4px;
     --radius-control-md: 6px;
@@ -365,6 +365,7 @@
     --opacity-008: 8%;
     --opacity-040: 40%;
     --opacity-060: 60%;
+    --opacity-080: 80%;
     --z-raised: 1;
     --shadow-normal-xs: 0px 0px 16px -4px rgba(34,34,34,0.12), 2px 2px 6px -2px rgba(34,34,34,0.16);
     --shadow-normal-sm: 0px 0px 24px -6px rgba(34,34,34,0.12), 4px 4px 16px -4px rgba(34,34,34,0.2);
@@ -818,6 +819,9 @@
   .mt-\[2px\] {
     margin-top: 2px;
   }
+  .mt-\[3px\] {
+    margin-top: 3px;
+  }
   .mt-\[6px\] {
     margin-top: 6px;
   }
@@ -1012,9 +1016,6 @@
   .h-\[28px\] {
     height: 28px;
   }
-  .h-\[30px\] {
-    height: 30px;
-  }
   .h-\[32px\] {
     height: 32px;
   }
@@ -1771,6 +1772,39 @@
   .gap-\(--cmp-calendarBoard-moreButton-gap\) {
     gap: var(--cmp-calendarBoard-moreButton-gap);
   }
+  .gap-\(--cmp-chart-chartTooltip-gap\) {
+    gap: var(--cmp-chart-chartTooltip-gap);
+  }
+  .gap-\(--cmp-chart-gap\) {
+    gap: var(--cmp-chart-gap);
+  }
+  .gap-\(--cmp-chart-legend-legendItem-gap\) {
+    gap: var(--cmp-chart-legend-legendItem-gap);
+  }
+  .gap-\(--cmp-chatAttachedFile-content-gap\) {
+    gap: var(--cmp-chatAttachedFile-content-gap);
+  }
+  .gap-\(--cmp-chatAttachedFile-gap\) {
+    gap: var(--cmp-chatAttachedFile-gap);
+  }
+  .gap-\(--cmp-chatFile-gap\) {
+    gap: var(--cmp-chatFile-gap);
+  }
+  .gap-\(--cmp-chatInput-gap\) {
+    gap: var(--cmp-chatInput-gap);
+  }
+  .gap-\(--cmp-chatMessage-avatarGap\) {
+    gap: var(--cmp-chatMessage-avatarGap);
+  }
+  .gap-\(--cmp-chatMessage-contents-gap\) {
+    gap: var(--cmp-chatMessage-contents-gap);
+  }
+  .gap-\(--cmp-chatMessage-group-bubble-gap\) {
+    gap: var(--cmp-chatMessage-group-bubble-gap);
+  }
+  .gap-\(--cmp-chatMessage-subData-gap\) {
+    gap: var(--cmp-chatMessage-subData-gap);
+  }
   .gap-\(--cmp-chipInput-chip-gap\) {
     gap: var(--cmp-chipInput-chip-gap);
   }
@@ -2067,6 +2101,9 @@
       margin-block-end: calc(var(--spacing-sd-8) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .gap-x-\(--cmp-chart-legend-group-gap\) {
+    column-gap: var(--cmp-chart-legend-group-gap);
+  }
   .gap-x-\[var\(--cmp-datepicker-calendar-legend-group-gap\)\] {
     column-gap: var(--cmp-datepicker-calendar-legend-group-gap);
   }
@@ -2132,6 +2169,27 @@
   .rounded-\(--cmp-calendarBoard-radius\) {
     border-radius: var(--cmp-calendarBoard-radius);
   }
+  .rounded-\(--cmp-chart-chartTooltip-radius\) {
+    border-radius: var(--cmp-chart-chartTooltip-radius);
+  }
+  .rounded-\(--cmp-chatAttachedFile-icon-wrapper-radius\) {
+    border-radius: var(--cmp-chatAttachedFile-icon-wrapper-radius);
+  }
+  .rounded-\(--cmp-chatAttachedFile-radius\) {
+    border-radius: var(--cmp-chatAttachedFile-radius);
+  }
+  .rounded-\(--cmp-chatAvatar-radius\) {
+    border-radius: var(--cmp-chatAvatar-radius);
+  }
+  .rounded-\(--cmp-chatBubble-radius\) {
+    border-radius: var(--cmp-chatBubble-radius);
+  }
+  .rounded-\(--cmp-chatFile-icon-wrapper-radius\) {
+    border-radius: var(--cmp-chatFile-icon-wrapper-radius);
+  }
+  .rounded-\(--cmp-chatFile-radius\) {
+    border-radius: var(--cmp-chatFile-radius);
+  }
   .rounded-\(--cmp-gnb-system-accountListBox-radius\) {
     border-radius: var(--cmp-gnb-system-accountListBox-radius);
   }
@@ -2153,9 +2211,6 @@
   .rounded-\(--radius-8\) {
     border-radius: var(--radius-8);
   }
-  .rounded-4 {
-    border-radius: var(--radius-4);
-  }
   .rounded-8 {
     border-radius: var(--radius-8);
   }
@@ -2180,12 +2235,6 @@
   .rounded-\[8px\] {
     border-radius: 8px;
   }
-  .rounded-\[12px\] {
-    border-radius: 12px;
-  }
-  .rounded-\[15px\] {
-    border-radius: 15px;
-  }
   .rounded-\[24px\] {
     border-radius: 24px;
   }
@@ -2313,6 +2362,14 @@
     border-style: var(--tw-border-style);
     border-width: var(--cmp-calendarBoard-dayCard-focus-border-width);
   }
+  .border-\(length\:--cmp-chatAttachedFile-border-width\) {
+    border-style: var(--tw-border-style);
+    border-width: var(--cmp-chatAttachedFile-border-width);
+  }
+  .border-\(length\:--cmp-chatFile-border-width\) {
+    border-style: var(--tw-border-style);
+    border-width: var(--cmp-chatFile-border-width);
+  }
   .border-\(length\:--cmp-radio-borderWidth\) {
     border-style: var(--tw-border-style);
     border-width: var(--cmp-radio-borderWidth);
@@ -2400,6 +2457,15 @@
   .border-\(--cmp-calendarBoard-grid-month-border\) {
     border-color: var(--cmp-calendarBoard-grid-month-border);
   }
+  .border-\(--cmp-chatAttachedFile-border-color\) {
+    border-color: var(--cmp-chatAttachedFile-border-color);
+  }
+  .border-\(--cmp-chatFile-border-color\) {
+    border-color: var(--cmp-chatFile-border-color);
+  }
+  .border-\(--cmp-chatSystemMessage-border-color\) {
+    border-color: var(--cmp-chatSystemMessage-border-color);
+  }
   .border-\(--cmp-listDraggableItem-border-default\) {
     border-color: var(--cmp-listDraggableItem-border-default);
   }
@@ -2448,9 +2514,6 @@
   .border-\(--sys-color-border-default\) {
     border-color: var(--sys-color-border-default);
   }
-  .border-\(--sys-color-border-strong\) {
-    border-color: var(--sys-color-border-strong);
-  }
   .border-\[\#AAAAAA\] {
     border-color: #AAAAAA;
   }
@@ -2583,6 +2646,45 @@
   .bg-\(--cmp-calendarBoard-moreButton-hover-overlay-color\) {
     background-color: var(--cmp-calendarBoard-moreButton-hover-overlay-color);
   }
+  .bg-\(--cmp-chart-bg\) {
+    background-color: var(--cmp-chart-bg);
+  }
+  .bg-\(--cmp-chart-chartTooltip-bg\) {
+    background-color: var(--cmp-chart-chartTooltip-bg);
+  }
+  .bg-\(--cmp-chatAttachedFile-bg\) {
+    background-color: var(--cmp-chatAttachedFile-bg);
+  }
+  .bg-\(--cmp-chatAttachedFile-icon-wrapper-bg\) {
+    background-color: var(--cmp-chatAttachedFile-icon-wrapper-bg);
+  }
+  .bg-\(--cmp-chatAvatar-bg\) {
+    background-color: var(--cmp-chatAvatar-bg);
+  }
+  .bg-\(--cmp-chatBubble-incoming-bg\) {
+    background-color: var(--cmp-chatBubble-incoming-bg);
+  }
+  .bg-\(--cmp-chatBubble-outgoing-default-bg\) {
+    background-color: var(--cmp-chatBubble-outgoing-default-bg);
+  }
+  .bg-\(--cmp-chatBubble-outgoing-general-bg\) {
+    background-color: var(--cmp-chatBubble-outgoing-general-bg);
+  }
+  .bg-\(--cmp-chatBubble-templete-bg\) {
+    background-color: var(--cmp-chatBubble-templete-bg);
+  }
+  .bg-\(--cmp-chatFile-bg-default\) {
+    background-color: var(--cmp-chatFile-bg-default);
+  }
+  .bg-\(--cmp-chatFile-icon-wrapper-bg\) {
+    background-color: var(--cmp-chatFile-icon-wrapper-bg);
+  }
+  .bg-\(--cmp-chatInput-bg\) {
+    background-color: var(--cmp-chatInput-bg);
+  }
+  .bg-\(--cmp-chatSystemMessage-bg\) {
+    background-color: var(--cmp-chatSystemMessage-bg);
+  }
   .bg-\(--cmp-gnb-dark-bg\) {
     background-color: var(--cmp-gnb-dark-bg);
   }
@@ -2718,9 +2820,6 @@
   .bg-\(--sys-color-bg-tableHeader\) {
     background-color: var(--sys-color-bg-tableHeader);
   }
-  .bg-\(--sys-color-field-bg-default\) {
-    background-color: var(--sys-color-field-bg-default);
-  }
   .bg-\[\#\.\.\.\] {
     background-color: #...;
   }
@@ -2940,6 +3039,18 @@
       background-color: color-mix(in oklab, var(--color-white) 60%, transparent);
     }
   }
+  .p-\(--cmp-chart-paddingAll\) {
+    padding: var(--cmp-chart-paddingAll);
+  }
+  .p-\(--cmp-chatAttachedFile-icon-wrapper-padding\) {
+    padding: var(--cmp-chatAttachedFile-icon-wrapper-padding);
+  }
+  .p-\(--cmp-chatFile-icon-wrapper-padding\) {
+    padding: var(--cmp-chatFile-icon-wrapper-padding);
+  }
+  .p-\(--cmp-chatInput-padding\) {
+    padding: var(--cmp-chatInput-padding);
+  }
   .p-\(--cmp-gnb-system-panel-gap\) {
     padding: var(--cmp-gnb-system-panel-gap);
   }
@@ -3045,6 +3156,27 @@
   .px-\(--cmp-calendarBoard-item-paddingX\) {
     padding-inline: var(--cmp-calendarBoard-item-paddingX);
   }
+  .px-\(--cmp-chart-chartTooltip-paddingX\) {
+    padding-inline: var(--cmp-chart-chartTooltip-paddingX);
+  }
+  .px-\(--cmp-chatAttachedFile-paddingX\) {
+    padding-inline: var(--cmp-chatAttachedFile-paddingX);
+  }
+  .px-\(--cmp-chatBubble-paddingX\) {
+    padding-inline: var(--cmp-chatBubble-paddingX);
+  }
+  .px-\(--cmp-chatMessage-bottomButtons-paddingX\) {
+    padding-inline: var(--cmp-chatMessage-bottomButtons-paddingX);
+  }
+  .px-\(--cmp-chatMessage-name-paddingX\) {
+    padding-inline: var(--cmp-chatMessage-name-paddingX);
+  }
+  .px-\(--cmp-chatMessage-subData-paddingX\) {
+    padding-inline: var(--cmp-chatMessage-subData-paddingX);
+  }
+  .px-\(--cmp-chatSystemMessage-paddingX\) {
+    padding-inline: var(--cmp-chatSystemMessage-paddingX);
+  }
   .px-\(--cmp-chipInput-md-paddingX\) {
     padding-inline: var(--cmp-chipInput-md-paddingX);
   }
@@ -3183,6 +3315,24 @@
   .py-\(--cmp-calendarBoard-dayEvent-header-paddingY\) {
     padding-block: var(--cmp-calendarBoard-dayEvent-header-paddingY);
   }
+  .py-\(--cmp-chart-chartTooltip-paddingY\) {
+    padding-block: var(--cmp-chart-chartTooltip-paddingY);
+  }
+  .py-\(--cmp-chart-legend-legendItem-paddingY\) {
+    padding-block: var(--cmp-chart-legend-legendItem-paddingY);
+  }
+  .py-\(--cmp-chatAttachedFile-paddingY\) {
+    padding-block: var(--cmp-chatAttachedFile-paddingY);
+  }
+  .py-\(--cmp-chatBubble-paddingY\) {
+    padding-block: var(--cmp-chatBubble-paddingY);
+  }
+  .py-\(--cmp-chatFile-paddingY\) {
+    padding-block: var(--cmp-chatFile-paddingY);
+  }
+  .py-\(--cmp-chatSystemMessage-paddingY\) {
+    padding-block: var(--cmp-chatSystemMessage-paddingY);
+  }
   .py-\(--cmp-chipInput-md-paddingY\) {
     padding-block: var(--cmp-chipInput-md-paddingY);
   }
@@ -3216,6 +3366,9 @@
   .py-\(--cmp-pageHeader-bar-paddingY\) {
     padding-block: var(--cmp-pageHeader-bar-paddingY);
   }
+  .py-\(--cmp-pageHeader-plain-paddingY\) {
+    padding-block: var(--cmp-pageHeader-plain-paddingY);
+  }
   .py-\(--cmp-popup-header-paddingY\) {
     padding-block: var(--cmp-popup-header-paddingY);
   }
@@ -3306,9 +3459,6 @@
   .pt-\(--cmp-calendarBoard-grid-paddingTop\) {
     padding-top: var(--cmp-calendarBoard-grid-paddingTop);
   }
-  .pt-\(--cmp-pageHeader-plain-paddingTop\) {
-    padding-top: var(--cmp-pageHeader-plain-paddingTop);
-  }
   .pt-3 {
     padding-top: calc(var(--spacing) * 3);
   }
@@ -3324,6 +3474,9 @@
   .pt-sd-48 {
     padding-top: var(--spacing-sd-48);
   }
+  .pr-\(--cmp-chatFile-paddingRight\) {
+    padding-right: var(--cmp-chatFile-paddingRight);
+  }
   .pr-\(--cmp-listExpansionItem-title-paddingX\) {
     padding-right: var(--cmp-listExpansionItem-title-paddingX);
   }
@@ -3339,9 +3492,6 @@
   .pr-\[var\(--cmp-overlay-header-paddingX\)\] {
     padding-right: var(--cmp-overlay-header-paddingX);
   }
-  .pr-sd-8 {
-    padding-right: var(--spacing-sd-8);
-  }
   .pb-\(--cmp-calendarBoard-dayCard-grid-paddingBottom\) {
     padding-bottom: var(--cmp-calendarBoard-dayCard-grid-paddingBottom);
   }
@@ -3354,9 +3504,6 @@
   .pb-\(--cmp-calendarBoard-grid-gap\) {
     padding-bottom: var(--cmp-calendarBoard-grid-gap);
   }
-  .pb-\(--cmp-pageHeader-plain-paddingBottom\) {
-    padding-bottom: var(--cmp-pageHeader-plain-paddingBottom);
-  }
   .pb-\[4px\] {
     padding-bottom: 4px;
   }
@@ -3384,6 +3531,9 @@
   .pb-sd-48 {
     padding-bottom: var(--spacing-sd-48);
   }
+  .pl-\(--cmp-chatFile-paddingLeft\) {
+    padding-left: var(--cmp-chatFile-paddingLeft);
+  }
   .pl-\(--cmp-guide-contents-depth-paddingLeft\) {
     padding-left: var(--cmp-guide-contents-depth-paddingLeft);
   }
@@ -3408,9 +3558,6 @@
   .pl-\[var\(--cmp-overlay-header-paddingX\)\] {
     padding-left: var(--cmp-overlay-header-paddingX);
   }
-  .pl-sd-4 {
-    padding-left: var(--spacing-sd-4);
-  }
   .pl-sd-24 {
     padding-left: var(--spacing-sd-24);
   }
@@ -3686,6 +3833,42 @@
   .text-\(--cmp-calendarBoard-moreButton-label-color\) {
     color: var(--cmp-calendarBoard-moreButton-label-color);
   }
+  .text-\(--cmp-chart-axis-color\) {
+    color: var(--cmp-chart-axis-color);
+  }
+  .text-\(--cmp-chart-chartTooltip-title-color\) {
+    color: var(--cmp-chart-chartTooltip-title-color);
+  }
+  .text-\(--cmp-chart-legend-legendItem-color\) {
+    color: var(--cmp-chart-legend-legendItem-color);
+  }
+  .text-\(--cmp-chatAttachedFile-filename-color\) {
+    color: var(--cmp-chatAttachedFile-filename-color);
+  }
+  .text-\(--cmp-chatBubble-incoming-content\) {
+    color: var(--cmp-chatBubble-incoming-content);
+  }
+  .text-\(--cmp-chatBubble-outgoing-general-content\) {
+    color: var(--cmp-chatBubble-outgoing-general-content);
+  }
+  .text-\(--cmp-chatBubble-templete-content\) {
+    color: var(--cmp-chatBubble-templete-content);
+  }
+  .text-\(--cmp-chatFile-text-color\) {
+    color: var(--cmp-chatFile-text-color);
+  }
+  .text-\(--cmp-chatMessage-name-color\) {
+    color: var(--cmp-chatMessage-name-color);
+  }
+  .text-\(--cmp-chatReadMark-color\) {
+    color: var(--cmp-chatReadMark-color);
+  }
+  .text-\(--cmp-chatSystemMessage-color\) {
+    color: var(--cmp-chatSystemMessage-color);
+  }
+  .text-\(--cmp-chatTimeStamp-color\) {
+    color: var(--cmp-chatTimeStamp-color);
+  }
   .text-\(--cmp-chip-content-focus\) {
     color: var(--cmp-chip-content-focus);
   }
@@ -3785,9 +3968,6 @@
   .text-\(--sys-color-fg-deep\) {
     color: var(--sys-color-fg-deep);
   }
-  .text-\(--sys-color-fg-inverse\) {
-    color: var(--sys-color-fg-inverse);
-  }
   .text-\(--sys-color-fg-primary\) {
     color: var(--sys-color-fg-primary);
   }
@@ -4034,6 +4214,9 @@
   .opacity-\(--cmp-listDraggableItem-dragging-content-opacity\) {
     opacity: var(--cmp-listDraggableItem-dragging-content-opacity);
   }
+  .opacity-\(--opacity-060\) {
+    opacity: var(--opacity-060);
+  }
   .opacity-0 {
     opacity: 0%;
   }
@@ -4282,6 +4465,13 @@
       }
     }
   }
+  .group-hover\/chat-file\:bg-\(--sys-color-bg-frame\) {
+    &:is(:where(.group\/chat-file):hover *) {
+      @media (hover: hover) {
+        background-color: var(--sys-color-bg-frame);
+      }
+    }
+  }
   .group-hover\/editor-tool\:opacity-5 {
     &:is(:where(.group\/editor-tool):hover *) {
       @media (hover: hover) {
@@ -4620,6 +4810,13 @@
       }
     }
   }
+  .hover\:bg-\(--cmp-chatFile-bg-hover\) {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--cmp-chatFile-bg-hover);
+      }
+    }
+  }
   .hover\:bg-\(--cmp-listDraggableItem-bg-hover\) {
     &:hover {
       @media (hover: hover) {
@@ -6796,6 +6993,8 @@
   --sys-space-stack-gap-element-relaxed: 12px;
   --sys-space-stack-gap-element-wide: 16px;
   --sys-space-stack-gap-element-spacious: 24px;
+  --sys-space-stack-gap-block-normal: 12px;
+  --sys-space-stack-gap-overlap-default: -1px;
   --sys-space-field-sm-paddingX: 12px;
   --sys-space-field-sm-paddingY: 4px;
   --sys-space-field-sm-container-gap: 8px;
@@ -6846,7 +7045,6 @@
   --sys-color-bg-caution: #FFC700;
   --sys-color-bg-progress: #0075FF;
   --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;
@@ -7951,8 +8149,6 @@
   --cmp-listDraggableItem-accentStripe-width: 2px;
   --cmp-listDraggableItem-accentStripe-color: #64ABFF;
   --cmp-listDraggableItem-dragging-content-opacity: 60%;
-  --cmp-pageBody-padding-default: 16px;
-  --cmp-pageBody-padding-scrollEnd: 80px;
   --cmp-sectionHeaderCard-radius: 8px;
   --cmp-sectionHeaderCard-border: #E1E1E1;
   --cmp-sectionHeaderCard-topBorder-thickness: 2px;
@@ -7980,6 +8176,8 @@
   --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;
   --cmp-pageHeader-paddingX: 16px;
   --cmp-pageHeader-gap: 12px;
   --cmp-pageHeader-title-paddingLeft: 4px;
@@ -7989,9 +8187,8 @@
   --cmp-pageHeader-bar-paddingY: 12px;
   --cmp-pageHeader-bar-bg: #FFFFFF;
   --cmp-pageHeader-bar-border: #E1E1E1;
-  --cmp-pageHeader-plain-paddingTop: 20px;
-  --cmp-pageHeader-plain-paddingBottom: 16px;
-  --cmp-pageHeader-plain-title-gap: 4px;
+  --cmp-pageHeader-plain-paddingY: 16px;
+  --cmp-pageHeader-plain-title-gap: 2px;
   --cmp-chipFilter-bar-bg: #FFFFFF;
   --cmp-chipFilter-bar-border: #E1E1E1;
   --cmp-chipFilter-bar-paddingX: 16px;
@@ -8051,6 +8248,116 @@
   --cmp-splitter-border-color: #64ABFF;
   --cmp-image-bg: #F9F9F9;
   --cmp-image-icon: #D8D8D8;
+  --cmp-chatMessage-row-paddingInset: 40px;
+  --cmp-chatMessage-avatarGap: 12px;
+  --cmp-chatMessage-contents-gap: 4px;
+  --cmp-chatMessage-name-color: #555555;
+  --cmp-chatMessage-name-paddingX: 8px;
+  --cmp-chatMessage-message-gap: 4px;
+  --cmp-chatMessage-subData-gap: 8px;
+  --cmp-chatMessage-subData-paddingX: 8px;
+  --cmp-chatMessage-bottomButtons-paddingX: 8px;
+  --cmp-chatMessage-group-bubble-gap: 8px;
+  --cmp-chatMessage-group-message-gap: 12px;
+  --cmp-chatMessage-group-system-gap: 24px;
+  --cmp-chatBubble-paddingX: 16px;
+  --cmp-chatBubble-paddingY: 8px;
+  --cmp-chatBubble-gap: 8px;
+  --cmp-chatBubble-radius: 12px;
+  --cmp-chatBubble-incoming-bg: #EEEEEE;
+  --cmp-chatBubble-incoming-content: #222222;
+  --cmp-chatBubble-outgoing-general-bg: #025497;
+  --cmp-chatBubble-outgoing-general-content: #FFFFFF;
+  --cmp-chatBubble-outgoing-default-bg: #EFF6FF;
+  --cmp-chatBubble-outgoing-default-content: #222222;
+  --cmp-chatBubble-templete-bg: #E8F9EF;
+  --cmp-chatBubble-templete-content: #222222;
+  --cmp-chatBubble-button-gap: 8px;
+  --cmp-chatTimeStamp-color: #888888;
+  --cmp-chatReadMark-color: #FF6B00;
+  --cmp-chatFile-bg-default: #FFFFFF;
+  --cmp-chatFile-bg-hover: #F6F6F6;
+  --cmp-chatFile-border-color: #AAAAAA;
+  --cmp-chatFile-border-width: 1px;
+  --cmp-chatFile-radius: 8px;
+  --cmp-chatFile-paddingLeft: 12px;
+  --cmp-chatFile-paddingRight: 24px;
+  --cmp-chatFile-paddingY: 6px;
+  --cmp-chatFile-gap: 8px;
+  --cmp-chatFile-icon-wrapper-bg: #EFF6FF;
+  --cmp-chatFile-icon-wrapper-padding: 4px;
+  --cmp-chatFile-icon-wrapper-radius: 4px;
+  --cmp-chatFile-icon-size: 20px;
+  --cmp-chatFile-text-color: #555555;
+  --cmp-chatSystemMessage-paddingX: 16px;
+  --cmp-chatSystemMessage-paddingY: 4px;
+  --cmp-chatSystemMessage-radius: 9999px;
+  --cmp-chatSystemMessage-bg: #F9F9F9;
+  --cmp-chatSystemMessage-border-color: #E1E1E1;
+  --cmp-chatSystemMessage-color: #555555;
+  --cmp-chatAvatar-size: 32px;
+  --cmp-chatAvatar-radius: 9999px;
+  --cmp-chatAvatar-bg: #EEEEEE;
+  --cmp-chatAvatar-icon: #AAAAAA;
+  --cmp-chatInput-padding: 12px;
+  --cmp-chatInput-gap: 8px;
+  --cmp-chatInput-bg: #FFFFFF;
+  --cmp-chatInput-buttonFrame-height: 48px;
+  --cmp-chatAttachedFile-bg: #F6F6F6;
+  --cmp-chatAttachedFile-border-color: #E1E1E1;
+  --cmp-chatAttachedFile-border-width: 1px;
+  --cmp-chatAttachedFile-radius: 8px;
+  --cmp-chatAttachedFile-paddingX: 4px;
+  --cmp-chatAttachedFile-paddingY: 2px;
+  --cmp-chatAttachedFile-gap: 4px;
+  --cmp-chatAttachedFile-content-gap: 8px;
+  --cmp-chatAttachedFile-icon-wrapper-bg: #FFFFFF;
+  --cmp-chatAttachedFile-icon-wrapper-padding: 2px;
+  --cmp-chatAttachedFile-icon-wrapper-radius: 4px;
+  --cmp-chatAttachedFile-icon-size: 16px;
+  --cmp-chatAttachedFile-filename-color: #555555;
+  --cmp-chart-paddingAll: 36px;
+  --cmp-chart-gap: 12px;
+  --cmp-chart-bg: #FFFFFF;
+  --cmp-chart-axis-color: #222222;
+  --cmp-chart-grid-line-color: #E1E1E1;
+  --cmp-chart-baseline-color: #AAAAAA;
+  --cmp-chart-barContainer-hover-bg: #444444;
+  --cmp-chart-barContainer-hover-opacity: 8%;
+  --cmp-chart-legend-group-gap: 24px;
+  --cmp-chart-legend-legendItem-gap: 8px;
+  --cmp-chart-legend-legendItem-paddingY: 4px;
+  --cmp-chart-legend-legendItem-color: #555555;
+  --cmp-chart-chartTooltip-paddingX: 12px;
+  --cmp-chart-chartTooltip-paddingY: 8px;
+  --cmp-chart-chartTooltip-gap: 4px;
+  --cmp-chart-chartTooltip-radius: 8px;
+  --cmp-chart-chartTooltip-bg: #FFFFFF;
+  --cmp-chart-chartTooltip-title-color: #555555;
+  --cmp-chart-palette-gradation-1: #025497;
+  --cmp-chart-palette-gradation-2: #006AC1;
+  --cmp-chart-palette-gradation-3: #1F8AE1;
+  --cmp-chart-palette-gradation-4: #5CB0F3;
+  --cmp-chart-palette-gradation-5: #9CD1FC;
+  --cmp-chart-palette-gradation-6: #D5EBFE;
+  --cmp-chart-palette-variation-positivePrimary: #2D8DFF;
+  --cmp-chart-palette-variation-positiveSecondary: #50BFF0;
+  --cmp-chart-palette-variation-negativePrimary: #FF7C7C;
+  --cmp-chart-palette-variation-negativeSecondary: #FFA452;
+  --cmp-chart-palette-variation-neutralPrimary: #737373;
+  --cmp-chart-palette-variation-neutralSecondary: #BBBBBB;
+  --cmp-chart-palette-multi-blue: #2D8DFF;
+  --cmp-chart-palette-multi-skyblue: #50BFF0;
+  --cmp-chart-palette-multi-yellow: #EBB110;
+  --cmp-chart-palette-multi-olive: #A5A500;
+  --cmp-chart-palette-multi-lightRed: #FF7C7C;
+  --cmp-chart-palette-multi-warmBlue: #128FC7;
+  --cmp-chart-palette-multi-orange: #FF7F22;
+  --cmp-chart-palette-multi-green: #12B553;
+  --cmp-chart-palette-multi-navy: #025497;
+  --cmp-chart-palette-multi-grey: #737373;
+  --cmp-chart-palette-multi-red: #FB4444;
+  --cmp-chart-palette-single: #2D8DFF;
 }
 @layer base {
   html {