sellmate-design-system-react 2.1.2 → 3.0.0

package/dist/styles.css

@@ -699,6 +699,9 @@
   .bottom-80 {
     bottom: var(--spacing-80);
   }
+  .bottom-\[-1px\] {
+    bottom: -1px;
+  }
   .left-0 {
     left: 0;
   }
@@ -750,6 +753,9 @@
   .z-\[1001\] {
     z-index: 1001;
   }
+  .z-\[999999\] {
+    z-index: 999999;
+  }
   .col-start-1 {
     grid-column-start: 1;
   }
@@ -864,6 +870,13 @@
   .table {
     display: table;
   }
+  .size-\[24px\] {
+    width: 24px;
+    height: 24px;
+  }
+  .h-\(--cmp-sectionHeaderCard-topBorder-thickness\) {
+    height: var(--cmp-sectionHeaderCard-topBorder-thickness);
+  }
   .h-8 {
     height: var(--spacing-8);
   }
@@ -873,6 +886,9 @@
   .h-48 {
     height: var(--spacing-48);
   }
+  .h-\[2px\] {
+    height: 2px;
+  }
   .h-\[10px\] {
     height: 10px;
   }
@@ -888,6 +904,12 @@
   .h-\[28px\] {
     height: 28px;
   }
+  .h-\[32px\] {
+    height: 32px;
+  }
+  .h-\[40px\] {
+    height: 40px;
+  }
   .h-\[48px\] {
     height: 48px;
   }
@@ -978,8 +1000,8 @@
   .min-h-0 {
     min-height: 0;
   }
-  .min-h-8 {
-    min-height: var(--spacing-8);
+  .min-h-6 {
+    min-height: var(--spacing-6);
   }
   .min-h-10 {
     min-height: var(--spacing-10);
@@ -1005,6 +1027,12 @@
   .min-h-screen {
     min-height: 100vh;
   }
+  .w-\(--cmp-listDraggableItem-accentStripe-width\) {
+    width: var(--cmp-listDraggableItem-accentStripe-width);
+  }
+  .w-\(--cmp-listItem-accentStripe-width\) {
+    width: var(--cmp-listItem-accentStripe-width);
+  }
   .w-8 {
     width: var(--spacing-8);
   }
@@ -1050,6 +1078,9 @@
   .w-\[280px\] {
     width: 280px;
   }
+  .w-\[291px\] {
+    width: 291px;
+  }
   .w-\[320px\] {
     width: 320px;
   }
@@ -1059,6 +1090,9 @@
   .w-\[500px\] {
     width: 500px;
   }
+  .w-\[528px\] {
+    width: 528px;
+  }
   .w-\[var\(--cmp-checkbox-size\)\] {
     width: var(--cmp-checkbox-size);
   }
@@ -1205,6 +1239,9 @@
   .cursor-default {
     cursor: default;
   }
+  .cursor-grab {
+    cursor: grab;
+  }
   .cursor-not-allowed {
     cursor: not-allowed;
   }
@@ -1280,9 +1317,18 @@
   .gap-\(--cmp-field-addonLabel-gap\) {
     gap: var(--cmp-field-addonLabel-gap);
   }
+  .gap-\(--cmp-list-group-gap\) {
+    gap: var(--cmp-list-group-gap);
+  }
+  .gap-\(--cmp-listDraggableItem-gap\) {
+    gap: var(--cmp-listDraggableItem-gap);
+  }
   .gap-\(--cmp-listExpansionItem-title-gap\) {
     gap: var(--cmp-listExpansionItem-title-gap);
   }
+  .gap-\(--cmp-listItem-gap\) {
+    gap: var(--cmp-listItem-gap);
+  }
   .gap-2 {
     gap: var(--spacing-2);
   }
@@ -1490,6 +1536,12 @@
   .rounded-\(--cmp-listBox-radius\) {
     border-radius: var(--cmp-listBox-radius);
   }
+  .rounded-\(--cmp-listDraggableItem-radius-bordered\) {
+    border-radius: var(--cmp-listDraggableItem-radius-bordered);
+  }
+  .rounded-\(--cmp-listItem-radius-bordered\) {
+    border-radius: var(--cmp-listItem-radius-bordered);
+  }
   .rounded-\[2px\] {
     border-radius: 2px;
   }
@@ -1619,6 +1671,10 @@
     border-style: var(--tw-border-style);
     border-width: var(--cmp-guide-button-border-width);
   }
+  .border-\[length\:var\(--cmp-listDraggableItem-bordered-dragging-border-width\)\] {
+    border-style: var(--tw-border-style);
+    border-width: var(--cmp-listDraggableItem-bordered-dragging-border-width);
+  }
   .border-\[length\:var\(--cmp-table-border-width\)\] {
     border-style: var(--tw-border-style);
     border-width: var(--cmp-table-border-width);
@@ -1662,12 +1718,27 @@
   .\!border-\[\#93C4FF\] {
     border-color: #93C4FF !important;
   }
+  .border-\(--cmp-listDraggableItem-border-default\) {
+    border-color: var(--cmp-listDraggableItem-border-default);
+  }
+  .border-\(--cmp-listDraggableItem-bordered-border-selected\) {
+    border-color: var(--cmp-listDraggableItem-bordered-border-selected);
+  }
+  .border-\(--cmp-listDraggableItem-bordered-dragging-border-color\) {
+    border-color: var(--cmp-listDraggableItem-bordered-dragging-border-color);
+  }
   .border-\(--cmp-listExpansionItem-title-border\) {
     border-color: var(--cmp-listExpansionItem-title-border);
   }
+  .border-\(--cmp-listItem-border-default\) {
+    border-color: var(--cmp-listItem-border-default);
+  }
   .border-\(--field-bc\) {
     border-color: var(--field-bc);
   }
+  .border-\(--sys-color-border-default\) {
+    border-color: var(--sys-color-border-default);
+  }
   .border-\[\#E1E1E1\] {
     border-color: #E1E1E1;
   }
@@ -1752,9 +1823,45 @@
   .bg-\(--cmp-listBoxItem-bg-hover\) {
     background-color: var(--cmp-listBoxItem-bg-hover);
   }
+  .bg-\(--cmp-listDraggableItem-accentStripe-color\) {
+    background-color: var(--cmp-listDraggableItem-accentStripe-color);
+  }
+  .bg-\(--cmp-listDraggableItem-bg-default\) {
+    background-color: var(--cmp-listDraggableItem-bg-default);
+  }
+  .bg-\(--cmp-listDraggableItem-bg-selected\) {
+    background-color: var(--cmp-listDraggableItem-bg-selected);
+  }
+  .bg-\(--cmp-listDraggableItem-bordered-dragging-bg\) {
+    background-color: var(--cmp-listDraggableItem-bordered-dragging-bg);
+  }
+  .bg-\(--cmp-listExpansionItem-body-bg\) {
+    background-color: var(--cmp-listExpansionItem-body-bg);
+  }
+  .bg-\(--cmp-listExpansionItem-title-bg-default\) {
+    background-color: var(--cmp-listExpansionItem-title-bg-default);
+  }
   .bg-\(--cmp-listExpansionItem-title-bg-expanded\) {
     background-color: var(--cmp-listExpansionItem-title-bg-expanded);
   }
+  .bg-\(--cmp-listItem-accentStripe-color\) {
+    background-color: var(--cmp-listItem-accentStripe-color);
+  }
+  .bg-\(--cmp-listItem-bg-default\) {
+    background-color: var(--cmp-listItem-bg-default);
+  }
+  .bg-\(--cmp-sectionHeaderCard-topBorder-color-accent\) {
+    background-color: var(--cmp-sectionHeaderCard-topBorder-color-accent);
+  }
+  .bg-\(--cmp-sectionHeaderCard-topBorder-color-default\) {
+    background-color: var(--cmp-sectionHeaderCard-topBorder-color-default);
+  }
+  .bg-\(--sys-color-bg-frame\) {
+    background-color: var(--sys-color-bg-frame);
+  }
+  .bg-\(--sys-color-bg-neutralLight\) {
+    background-color: var(--sys-color-bg-neutralLight);
+  }
   .bg-\[\#F2F2F2\] {
     background-color: #F2F2F2;
   }
@@ -1809,12 +1916,6 @@
   .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);
   }
@@ -1863,6 +1964,12 @@
   .bg-\[var\(--sys-color-divider-default\)\] {
     background-color: var(--sys-color-divider-default);
   }
+  .bg-black\/5 {
+    background-color: color-mix(in srgb, #000000 5%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 5%, transparent);
+    }
+  }
   .bg-black\/40 {
     background-color: color-mix(in srgb, #000000 40%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1899,6 +2006,9 @@
       background-color: color-mix(in oklab, var(--color-white) 60%, transparent);
     }
   }
+  .p-\(--cmp-list-group-padding\) {
+    padding: var(--cmp-list-group-padding);
+  }
   .p-\(--cmp-listExpansionItem-body-padding\) {
     padding: var(--cmp-listExpansionItem-body-padding);
   }
@@ -1935,9 +2045,6 @@
   .p-\[var\(--cmp-datepicker-calendar-paddingXY\)\] {
     padding: var(--cmp-datepicker-calendar-paddingXY);
   }
-  .p-\[var\(--cmp-listExpansionItem-body-padding\)\] {
-    padding: var(--cmp-listExpansionItem-body-padding);
-  }
   .px-\(--cmp-chipInput-md-paddingX\) {
     padding-inline: var(--cmp-chipInput-md-paddingX);
   }
@@ -1947,6 +2054,9 @@
   .px-\(--cmp-field-addonLabel-paddingX\) {
     padding-inline: var(--cmp-field-addonLabel-paddingX);
   }
+  .px-\(--cmp-listDraggableItem-paddingX\) {
+    padding-inline: var(--cmp-listDraggableItem-paddingX);
+  }
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
@@ -2028,12 +2138,24 @@
   .py-\(--cmp-chipInput-sm-paddingY\) {
     padding-block: var(--cmp-chipInput-sm-paddingY);
   }
+  .py-\(--cmp-listDraggableItem-paddingY-dense\) {
+    padding-block: var(--cmp-listDraggableItem-paddingY-dense);
+  }
+  .py-\(--cmp-listDraggableItem-paddingY-normal\) {
+    padding-block: var(--cmp-listDraggableItem-paddingY-normal);
+  }
   .py-\(--cmp-listExpansionItem-title-paddingY-dense\) {
     padding-block: var(--cmp-listExpansionItem-title-paddingY-dense);
   }
   .py-\(--cmp-listExpansionItem-title-paddingY-normal\) {
     padding-block: var(--cmp-listExpansionItem-title-paddingY-normal);
   }
+  .py-\(--cmp-listItem-paddingY-dense\) {
+    padding-block: var(--cmp-listItem-paddingY-dense);
+  }
+  .py-\(--cmp-listItem-paddingY-normal\) {
+    padding-block: var(--cmp-listItem-paddingY-normal);
+  }
   .py-1 {
     padding-block: var(--spacing);
   }
@@ -2055,6 +2177,9 @@
   .py-16 {
     padding-block: var(--spacing-16);
   }
+  .py-24 {
+    padding-block: var(--spacing-24);
+  }
   .py-\[4px\] {
     padding-block: 4px;
   }
@@ -2100,6 +2225,9 @@
   .pr-\(--cmp-listExpansionItem-title-paddingX\) {
     padding-right: var(--cmp-listExpansionItem-title-paddingX);
   }
+  .pr-\(--cmp-listItem-paddingX\) {
+    padding-right: var(--cmp-listItem-paddingX);
+  }
   .pr-\[12px\] {
     padding-right: 12px;
   }
@@ -2112,6 +2240,9 @@
   .pl-\(--cmp-listExpansionItem-title-paddingX\) {
     padding-left: var(--cmp-listExpansionItem-title-paddingX);
   }
+  .pl-\(--cmp-listItem-paddingX\) {
+    padding-left: var(--cmp-listItem-paddingX);
+  }
   .pl-\[26px\] {
     padding-left: 26px;
   }
@@ -2124,6 +2255,12 @@
   .pl-\[calc\(var\(--cmp-listExpansionItem-title-paddingX\)\+64px\)\] {
     padding-left: calc(var(--cmp-listExpansionItem-title-paddingX) + 64px);
   }
+  .pl-\[calc\(var\(--cmp-listItem-paddingX\)\+32px\)\] {
+    padding-left: calc(var(--cmp-listItem-paddingX) + 32px);
+  }
+  .pl-\[calc\(var\(--cmp-listItem-paddingX\)\+64px\)\] {
+    padding-left: calc(var(--cmp-listItem-paddingX) + 64px);
+  }
   .pl-\[var\(--cmp-overlay-header-paddingX\)\] {
     padding-left: var(--cmp-overlay-header-paddingX);
   }
@@ -2308,15 +2445,39 @@
   .text-\(--cmp-listBoxItem-content-selected\) {
     color: var(--cmp-listBoxItem-content-selected);
   }
+  .text-\(--cmp-listDraggableItem-text-default\) {
+    color: var(--cmp-listDraggableItem-text-default);
+  }
+  .text-\(--cmp-listDraggableItem-text-selected\) {
+    color: var(--cmp-listDraggableItem-text-selected);
+  }
+  .text-\(--cmp-listExpansionItem-title-text-default\) {
+    color: var(--cmp-listExpansionItem-title-text-default);
+  }
   .text-\(--cmp-listExpansionItem-title-text-expanded\) {
     color: var(--cmp-listExpansionItem-title-text-expanded);
   }
+  .text-\(--cmp-listItem-text-default\) {
+    color: var(--cmp-listItem-text-default);
+  }
   .text-\(--color-grey-65\) {
     color: var(--color-grey-65);
   }
   .text-\(--color-var\) {
     color: var(--color-var);
   }
+  .text-\(--sys-color-disabled-text\) {
+    color: var(--sys-color-disabled-text);
+  }
+  .text-\(--sys-color-fg-brand\) {
+    color: var(--sys-color-fg-brand);
+  }
+  .text-\(--sys-color-fg-primary\) {
+    color: var(--sys-color-fg-primary);
+  }
+  .text-\(--sys-color-fg-secondary\) {
+    color: var(--sys-color-fg-secondary);
+  }
   .text-\(--sys-color-fg-warning\) {
     color: var(--sys-color-fg-warning);
   }
@@ -2428,9 +2589,6 @@
   .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);
   }
@@ -2506,6 +2664,9 @@
   .underline {
     text-decoration-line: underline;
   }
+  .opacity-\(--cmp-listDraggableItem-dragging-content-opacity\) {
+    opacity: var(--cmp-listDraggableItem-dragging-content-opacity);
+  }
   .opacity-0 {
     opacity: 0%;
   }
@@ -2700,6 +2861,36 @@
       color: var(--sys-color-field-text-placeholder);
     }
   }
+  .before\:absolute {
+    &::before {
+      content: var(--tw-content);
+      position: absolute;
+    }
+  }
+  .before\:top-0 {
+    &::before {
+      content: var(--tw-content);
+      top: 0;
+    }
+  }
+  .before\:right-0 {
+    &::before {
+      content: var(--tw-content);
+      right: 0;
+    }
+  }
+  .before\:left-0 {
+    &::before {
+      content: var(--tw-content);
+      left: 0;
+    }
+  }
+  .before\:z-10 {
+    &::before {
+      content: var(--tw-content);
+      z-index: 10;
+    }
+  }
   .before\:mr-\[12px\] {
     &::before {
       content: var(--tw-content);
@@ -2718,6 +2909,12 @@
       display: block;
     }
   }
+  .before\:h-\[2px\] {
+    &::before {
+      content: var(--tw-content);
+      height: 2px;
+    }
+  }
   .before\:w-\[6px\] {
     &::before {
       content: var(--tw-content);
@@ -2730,6 +2927,18 @@
       flex-shrink: 0;
     }
   }
+  .before\:bg-\(--sys-color-border-accent\) {
+    &::before {
+      content: var(--tw-content);
+      background-color: var(--sys-color-border-accent);
+    }
+  }
+  .before\:content-\[\'\'\] {
+    &::before {
+      --tw-content: '';
+      content: var(--tw-content);
+    }
+  }
   .before\:content-\[\'-\'\] {
     &::before {
       --tw-content: '-';
@@ -2742,6 +2951,54 @@
       content: var(--tw-content);
     }
   }
+  .after\:absolute {
+    &::after {
+      content: var(--tw-content);
+      position: absolute;
+    }
+  }
+  .after\:right-0 {
+    &::after {
+      content: var(--tw-content);
+      right: 0;
+    }
+  }
+  .after\:bottom-0 {
+    &::after {
+      content: var(--tw-content);
+      bottom: 0;
+    }
+  }
+  .after\:left-0 {
+    &::after {
+      content: var(--tw-content);
+      left: 0;
+    }
+  }
+  .after\:z-10 {
+    &::after {
+      content: var(--tw-content);
+      z-index: 10;
+    }
+  }
+  .after\:h-\[2px\] {
+    &::after {
+      content: var(--tw-content);
+      height: 2px;
+    }
+  }
+  .after\:bg-\(--sys-color-border-accent\) {
+    &::after {
+      content: var(--tw-content);
+      background-color: var(--sys-color-border-accent);
+    }
+  }
+  .after\:content-\[\'\'\] {
+    &::after {
+      --tw-content: '';
+      content: var(--tw-content);
+    }
+  }
   .empty\:hidden {
     &:empty {
       display: none;
@@ -2808,6 +3065,20 @@
       }
     }
   }
+  .hover\:border-\(--cmp-listDraggableItem-bordered-border-hover\) {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--cmp-listDraggableItem-bordered-border-hover);
+      }
+    }
+  }
+  .hover\:border-\(--cmp-listItem-bordered-border-hover\) {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--cmp-listItem-bordered-border-hover);
+      }
+    }
+  }
   .hover\:border-\(--sys-color-field-border-focus\) {
     &:hover {
       @media (hover: hover) {
@@ -2864,6 +3135,13 @@
       }
     }
   }
+  .hover\:bg-\(--cmp-listDraggableItem-bg-hover\) {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--cmp-listDraggableItem-bg-hover);
+      }
+    }
+  }
   .hover\:bg-\(--cmp-listExpansionItem-title-bg-hover\) {
     &:hover {
       @media (hover: hover) {
@@ -2871,6 +3149,13 @@
       }
     }
   }
+  .hover\:bg-\(--cmp-listItem-bg-hover\) {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--cmp-listItem-bg-hover);
+      }
+    }
+  }
   .hover\:bg-\[var\(--btn-bg-hover\)\] {
     &:hover {
       @media (hover: hover) {
@@ -2927,6 +3212,16 @@
       }
     }
   }
+  .hover\:bg-black\/5 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #000000 5%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-black) 5%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-gray-100 {
     &:hover {
       @media (hover: hover) {
@@ -3037,7 +3332,7 @@
       outline-width: 2px;
     }
   }
-  .focus-visible\:outline-\[var\(--sys-color-border-accent\)\] {
+  .focus-visible\:outline-\(--sys-color-border-accent\) {
     &:focus-visible {
       outline-color: var(--sys-color-border-accent);
     }
@@ -3048,19 +3343,24 @@
       outline-style: none;
     }
   }
+  .active\:cursor-grabbing {
+    &:active {
+      cursor: grabbing;
+    }
+  }
   .disabled\:cursor-not-allowed {
     &:disabled {
       cursor: not-allowed;
     }
   }
-  .disabled\:text-\[color\:var\(--cmp-listBoxItem-content-disabled\)\] {
+  .disabled\:text-\(--sys-color-disabled-text\) {
     &:disabled {
-      color: var(--cmp-listBoxItem-content-disabled);
+      color: var(--sys-color-disabled-text);
     }
   }
-  .disabled\:text-\[var\(--sys-color-disabled-text\)\] {
+  .disabled\:text-\[color\:var\(--cmp-listBoxItem-content-disabled\)\] {
     &:disabled {
-      color: var(--sys-color-disabled-text);
+      color: var(--cmp-listBoxItem-content-disabled);
     }
   }
   .has-\[\>div\:empty\]\:hidden {
@@ -3373,6 +3673,12 @@
       border-color: #AAAAAA;
     }
   }
+  .\[\&\>\*\:not\(\:last-child\)\]\:border-b {
+    &>*:not(:last-child) {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 1px;
+    }
+  }
   .\[\&\>button\]\:bg-\[var\(--sys-color-bg-tableHeader\)\] {
     &>button {
       background-color: var(--sys-color-bg-tableHeader);
@@ -4318,6 +4624,8 @@
   --cmp-gnb-rail-item-radius: 8px;
   --cmp-gnb-rail-item-icon: 24px;
   --cmp-gnb-rail-item-width: 44px;
+  --cmp-list-group-gap: 8px;
+  --cmp-list-group-padding: 16px;
   --cmp-listItem-paddingX: 16px;
   --cmp-listItem-paddingY-normal: 8px;
   --cmp-listItem-paddingY-dense: 4px;
@@ -4391,6 +4699,18 @@
   --cmp-sectionHeaderCard-required-icon: 16px;
   --cmp-sectionHeaderCard-subtitle-color: #555555;
   --cmp-sectionHeaderCard-body-bg: #FFFFFF;
+  --cmp-tree-item-bg-default: #FFFFFF;
+  --cmp-tree-item-bg-hover: #F9F9F9;
+  --cmp-tree-item-border-default: #E1E1E1;
+  --cmp-tree-item-border-width-default: 1px;
+  --cmp-tree-item-paddingX: 16px;
+  --cmp-tree-item-paddingY: 4px;
+  --cmp-tree-item-rowGap: 8px;
+  --cmp-tree-item-contentGap: 12px;
+  --cmp-tree-item-text-default: #222222;
+  --cmp-tree-item-text-selected: #0075FF;
+  --cmp-tree-item-arrow-icon: 12px;
+  --cmp-tree-connector-line-color: #AAAAAA;
 }
 @layer base {
   *::-webkit-scrollbar {

package/dist/theme.css

@@ -1344,6 +1344,8 @@
   --cmp-gnb-rail-item-radius: 8px;
   --cmp-gnb-rail-item-icon: 24px;
   --cmp-gnb-rail-item-width: 44px;
+  --cmp-list-group-gap: 8px;
+  --cmp-list-group-padding: 16px;
   --cmp-listItem-paddingX: 16px;
   --cmp-listItem-paddingY-normal: 8px;
   --cmp-listItem-paddingY-dense: 4px;
@@ -1417,6 +1419,18 @@
   --cmp-sectionHeaderCard-required-icon: 16px;
   --cmp-sectionHeaderCard-subtitle-color: #555555;
   --cmp-sectionHeaderCard-body-bg: #FFFFFF;
+  --cmp-tree-item-bg-default: #FFFFFF;
+  --cmp-tree-item-bg-hover: #F9F9F9;
+  --cmp-tree-item-border-default: #E1E1E1;
+  --cmp-tree-item-border-width-default: 1px;
+  --cmp-tree-item-paddingX: 16px;
+  --cmp-tree-item-paddingY: 4px;
+  --cmp-tree-item-rowGap: 8px;
+  --cmp-tree-item-contentGap: 12px;
+  --cmp-tree-item-text-default: #222222;
+  --cmp-tree-item-text-selected: #0075FF;
+  --cmp-tree-item-arrow-icon: 12px;
+  --cmp-tree-connector-line-color: #AAAAAA;
 }
 
 /* 전역 스크롤바 — overflow(auto/scroll)로 스크롤이 생기는 모든 요소에 SScrollArea 기본 스크롤바를 자동 적용.

package/package.json

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