sellmate-design-system-react 2.2.0 → 3.1.0

package/dist/styles.css

@@ -31,6 +31,9 @@
     --text-base--line-height: calc(1.5 / 1);
     --text-xl: 1.25rem;
     --text-xl--line-height: calc(1.75 / 1.25);
+    --font-weight-thin: 100;
+    --font-weight-extralight: 200;
+    --font-weight-light: 300;
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
@@ -669,6 +672,9 @@
   .top-\[16px\] {
     top: 16px;
   }
+  .top-\[64px\] {
+    top: 64px;
+  }
   .top-\[var\(--cmp-table-header-height\)\] {
     top: var(--cmp-table-header-height);
   }
@@ -699,6 +705,9 @@
   .bottom-80 {
     bottom: var(--spacing-80);
   }
+  .bottom-\[-1px\] {
+    bottom: -1px;
+  }
   .left-0 {
     left: 0;
   }
@@ -744,12 +753,18 @@
   .z-\[31\] {
     z-index: 31;
   }
+  .z-\[60\] {
+    z-index: 60;
+  }
   .z-\[1000\] {
     z-index: 1000;
   }
   .z-\[1001\] {
     z-index: 1001;
   }
+  .z-\[999999\] {
+    z-index: 999999;
+  }
   .col-start-1 {
     grid-column-start: 1;
   }
@@ -783,6 +798,9 @@
   .mx-3 {
     margin-inline: calc(var(--spacing) * 3);
   }
+  .-mt-8 {
+    margin-top: calc(var(--spacing-8) * -1);
+  }
   .-mt-px {
     margin-top: -1px;
   }
@@ -795,6 +813,9 @@
   .mt-8 {
     margin-top: var(--spacing-8);
   }
+  .mt-9 {
+    margin-top: calc(var(--spacing) * 9);
+  }
   .mt-12 {
     margin-top: var(--spacing-12);
   }
@@ -864,6 +885,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 +901,9 @@
   .h-48 {
     height: var(--spacing-48);
   }
+  .h-\[2px\] {
+    height: 2px;
+  }
   .h-\[10px\] {
     height: 10px;
   }
@@ -888,6 +919,12 @@
   .h-\[28px\] {
     height: 28px;
   }
+  .h-\[32px\] {
+    height: 32px;
+  }
+  .h-\[40px\] {
+    height: 40px;
+  }
   .h-\[48px\] {
     height: 48px;
   }
@@ -951,6 +988,12 @@
   .h-\[var\(--cmp-textinput-sm-height\)\] {
     height: var(--cmp-textinput-sm-height);
   }
+  .h-\[var\(--sys-size-\.\.\.\)\] {
+    height: var(--sys-size-...);
+  }
+  .h-\[var\(--sys-size-control-md-height\)\] {
+    height: var(--sys-size-control-md-height);
+  }
   .h-auto {
     height: auto;
   }
@@ -978,8 +1021,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 +1048,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 +1099,9 @@
   .w-\[280px\] {
     width: 280px;
   }
+  .w-\[291px\] {
+    width: 291px;
+  }
   .w-\[320px\] {
     width: 320px;
   }
@@ -1059,6 +1111,9 @@
   .w-\[500px\] {
     width: 500px;
   }
+  .w-\[528px\] {
+    width: 528px;
+  }
   .w-\[var\(--cmp-checkbox-size\)\] {
     width: var(--cmp-checkbox-size);
   }
@@ -1074,6 +1129,9 @@
   .w-\[var\(--cmp-pagination-height\)\] {
     width: var(--cmp-pagination-height);
   }
+  .w-\[var\(--sys-size-control-md-height\)\] {
+    width: var(--sys-size-control-md-height);
+  }
   .w-fit {
     width: fit-content;
   }
@@ -1092,6 +1150,9 @@
   .max-w-\[420px\] {
     max-width: 420px;
   }
+  .max-w-\[1200px\] {
+    max-width: 1200px;
+  }
   .max-w-full {
     max-width: 100%;
   }
@@ -1205,6 +1266,9 @@
   .cursor-default {
     cursor: default;
   }
+  .cursor-grab {
+    cursor: grab;
+  }
   .cursor-not-allowed {
     cursor: not-allowed;
   }
@@ -1229,6 +1293,9 @@
   .grid-cols-7 {
     grid-template-columns: repeat(7, minmax(0, 1fr));
   }
+  .grid-cols-\[200px_1fr\] {
+    grid-template-columns: 200px 1fr;
+  }
   .grid-cols-\[repeat\(7\,var\(--cmp-datepicker-calendar-day-width\)\)\] {
     grid-template-columns: repeat(7,var(--cmp-datepicker-calendar-day-width));
   }
@@ -1274,15 +1341,27 @@
   .justify-start {
     justify-content: flex-start;
   }
+  .\!gap-12 {
+    gap: var(--spacing-12) !important;
+  }
   .gap-\(--cmp-chipInput-chip-gap\) {
     gap: var(--cmp-chipInput-chip-gap);
   }
   .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);
   }
@@ -1292,12 +1371,18 @@
   .gap-4 {
     gap: var(--spacing-4);
   }
+  .gap-7 {
+    gap: calc(var(--spacing) * 7);
+  }
   .gap-8 {
     gap: var(--spacing-8);
   }
   .gap-12 {
     gap: var(--spacing-12);
   }
+  .gap-13 {
+    gap: calc(var(--spacing) * 13);
+  }
   .gap-16 {
     gap: var(--spacing-16);
   }
@@ -1319,6 +1404,9 @@
   .gap-\[12px\] {
     gap: 12px;
   }
+  .gap-\[13px\] {
+    gap: 13px;
+  }
   .gap-\[16px\] {
     gap: 16px;
   }
@@ -1490,12 +1578,21 @@
   .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;
   }
   .rounded-\[4px\] {
     border-radius: 4px;
   }
+  .rounded-\[5px\] {
+    border-radius: 5px;
+  }
   .rounded-\[6px\] {
     border-radius: 6px;
   }
@@ -1559,10 +1656,18 @@
   .rounded-none {
     border-radius: 0;
   }
+  .rounded-t {
+    border-top-left-radius: 0.25rem;
+    border-top-right-radius: 0.25rem;
+  }
   .rounded-t-none {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
+  .rounded-l {
+    border-top-left-radius: 0.25rem;
+    border-bottom-left-radius: 0.25rem;
+  }
   .rounded-l-\[4px\] {
     border-top-left-radius: 4px;
     border-bottom-left-radius: 4px;
@@ -1575,6 +1680,13 @@
     border-top-left-radius: var(--cmp-select-sm-radius);
     border-bottom-left-radius: var(--cmp-select-sm-radius);
   }
+  .rounded-tl {
+    border-top-left-radius: 0.25rem;
+  }
+  .rounded-r {
+    border-top-right-radius: 0.25rem;
+    border-bottom-right-radius: 0.25rem;
+  }
   .rounded-r-\[4px\] {
     border-top-right-radius: 4px;
     border-bottom-right-radius: 4px;
@@ -1587,6 +1699,13 @@
     border-top-right-radius: var(--cmp-select-sm-radius);
     border-bottom-right-radius: var(--cmp-select-sm-radius);
   }
+  .rounded-tr {
+    border-top-right-radius: 0.25rem;
+  }
+  .rounded-b {
+    border-bottom-right-radius: 0.25rem;
+    border-bottom-left-radius: 0.25rem;
+  }
   .rounded-b-\[8px\] {
     border-bottom-right-radius: 8px;
     border-bottom-left-radius: 8px;
@@ -1595,6 +1714,12 @@
     border-bottom-right-radius: var(--cmp-table-radius);
     border-bottom-left-radius: var(--cmp-table-radius);
   }
+  .rounded-br {
+    border-bottom-right-radius: 0.25rem;
+  }
+  .rounded-bl {
+    border-bottom-left-radius: 0.25rem;
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -1619,6 +1744,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 +1791,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;
   }
@@ -1728,6 +1872,18 @@
   .border-\[var\(--sys-color-border-default\)\] {
     border-color: var(--sys-color-border-default);
   }
+  .border-border-default {
+    border-color: var(--color-border-default);
+  }
+  .border-border-strong {
+    border-color: var(--color-border-strong);
+  }
+  .border-disabled-border {
+    border-color: var(--color-disabled-border);
+  }
+  .border-divider-default {
+    border-color: var(--color-divider-default);
+  }
   .border-gray-200 {
     border-color: var(--color-gray-200);
   }
@@ -1752,12 +1908,54 @@
   .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-\[\#\.\.\.\] {
+    background-color: #...;
+  }
   .bg-\[\#F2F2F2\] {
     background-color: #F2F2F2;
   }
+  .bg-\[\#eee\] {
+    background-color: #eee;
+  }
   .bg-\[var\(--btn-bg\)\] {
     background-color: var(--btn-bg);
   }
@@ -1809,12 +2007,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,12 +2055,36 @@
   .bg-\[var\(--sys-color-divider-default\)\] {
     background-color: var(--sys-color-divider-default);
   }
+  .bg-bg-frame {
+    background-color: var(--color-bg-frame);
+  }
+  .bg-bg-neutralBright {
+    background-color: var(--color-bg-neutralBright);
+  }
+  .bg-bg-neutralLight {
+    background-color: var(--color-bg-neutralLight);
+  }
+  .bg-bg-screen {
+    background-color: var(--color-bg-screen);
+  }
+  .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)) {
       background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
     }
   }
+  .bg-blue-subtle {
+    background-color: var(--color-blue-subtle);
+  }
+  .bg-disabled-bg {
+    background-color: var(--color-disabled-bg);
+  }
   .bg-gray-200 {
     background-color: var(--color-gray-200);
   }
@@ -1899,6 +2115,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);
   }
@@ -1914,6 +2133,12 @@
   .p-12 {
     padding: var(--spacing-12);
   }
+  .p-15 {
+    padding: calc(var(--spacing) * 15);
+  }
+  .p-16 {
+    padding: var(--spacing-16);
+  }
   .p-20 {
     padding: var(--spacing-20);
   }
@@ -1926,6 +2151,9 @@
   .p-\[8px\] {
     padding: 8px;
   }
+  .p-\[10px\] {
+    padding: 10px;
+  }
   .p-\[12px\] {
     padding: 12px;
   }
@@ -1935,9 +2163,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,12 +2172,18 @@
   .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);
   }
   .px-8 {
     padding-inline: var(--spacing-8);
   }
+  .px-11 {
+    padding-inline: calc(var(--spacing) * 11);
+  }
   .px-12 {
     padding-inline: var(--spacing-12);
   }
@@ -2028,12 +2259,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);
   }
@@ -2103,6 +2346,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;
   }
@@ -2115,6 +2361,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;
   }
@@ -2127,6 +2376,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);
   }
@@ -2170,6 +2425,9 @@
   .text-16 {
     font-size: var(--text-16);
   }
+  .text-18 {
+    font-size: var(--text-18);
+  }
   .text-20 {
     font-size: var(--text-20);
   }
@@ -2249,10 +2507,30 @@
     --tw-leading: 1;
     line-height: 1;
   }
+  .font-\[600\] {
+    --tw-font-weight: 600;
+    font-weight: 600;
+  }
+  .font-black {
+    --tw-font-weight: var(--font-weight-black);
+    font-weight: var(--font-weight-black);
+  }
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
   }
+  .font-extrabold {
+    --tw-font-weight: var(--font-weight-extrabold);
+    font-weight: var(--font-weight-extrabold);
+  }
+  .font-extralight {
+    --tw-font-weight: var(--font-weight-extralight);
+    font-weight: var(--font-weight-extralight);
+  }
+  .font-light {
+    --tw-font-weight: var(--font-weight-light);
+    font-weight: var(--font-weight-light);
+  }
   .font-medium {
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
@@ -2265,6 +2543,10 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
+  .font-thin {
+    --tw-font-weight: var(--font-weight-thin);
+    font-weight: var(--font-weight-thin);
+  }
   .tracking-wider {
     --tw-tracking: var(--tracking-wider);
     letter-spacing: var(--tracking-wider);
@@ -2311,15 +2593,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);
   }
@@ -2329,6 +2635,9 @@
   .text-\[\#0A0A0A\] {
     color: #0A0A0A;
   }
+  .text-\[\#333\] {
+    color: #333;
+  }
   .text-\[\#666\] {
     color: #666;
   }
@@ -2431,9 +2740,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);
   }
@@ -2455,6 +2761,30 @@
   .text-blue-strong {
     color: var(--color-blue-strong);
   }
+  .text-fg-accent {
+    color: var(--color-fg-accent);
+  }
+  .text-fg-danger {
+    color: var(--color-fg-danger);
+  }
+  .text-fg-inverse {
+    color: var(--color-fg-inverse);
+  }
+  .text-fg-primary {
+    color: var(--color-fg-primary);
+  }
+  .text-fg-secondary {
+    color: var(--color-fg-secondary);
+  }
+  .text-fg-success {
+    color: var(--color-fg-success);
+  }
+  .text-fg-tertiary {
+    color: var(--color-fg-tertiary);
+  }
+  .text-fg-warning {
+    color: var(--color-fg-warning);
+  }
   .text-gray-400 {
     color: var(--color-gray-400);
   }
@@ -2488,6 +2818,9 @@
   .text-inherit {
     color: inherit;
   }
+  .text-link-accent {
+    color: var(--color-link-accent);
+  }
   .text-red-75 {
     color: var(--color-red-75);
   }
@@ -2509,6 +2842,9 @@
   .underline {
     text-decoration-line: underline;
   }
+  .opacity-\(--cmp-listDraggableItem-dragging-content-opacity\) {
+    opacity: var(--cmp-listDraggableItem-dragging-content-opacity);
+  }
   .opacity-0 {
     opacity: 0%;
   }
@@ -2553,6 +2889,10 @@
     --tw-shadow: 0px 0px 24px -6px var(--tw-shadow-color, rgba(34,34,34,0.12)), 4px 8px 16px -4px 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);
   }
+  .ring {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -2645,6 +2985,9 @@
   .\[font\:inherit\] {
     font: inherit;
   }
+  .\[length\:var\(--x\)\] {
+    length: var(--x);
+  }
   .group-hover\/filepicker\:text-\[color\:var\(--cmp-filepicker-text-default\)\] {
     &:is(:where(.group\/filepicker):hover *) {
       @media (hover: hover) {
@@ -2703,6 +3046,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);
@@ -2721,6 +3094,12 @@
       display: block;
     }
   }
+  .before\:h-\[2px\] {
+    &::before {
+      content: var(--tw-content);
+      height: 2px;
+    }
+  }
   .before\:w-\[6px\] {
     &::before {
       content: var(--tw-content);
@@ -2733,6 +3112,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: '-';
@@ -2745,6 +3136,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;
@@ -2797,6 +3236,13 @@
       }
     }
   }
+  .hover\:gap-16 {
+    &:hover {
+      @media (hover: hover) {
+        gap: var(--spacing-16);
+      }
+    }
+  }
   .hover\:\!border-\[color\:var\(--cmp-radioButton-bg-hover\)\] {
     &:hover {
       @media (hover: hover) {
@@ -2811,6 +3257,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) {
@@ -2867,6 +3327,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) {
@@ -2874,6 +3341,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) {
@@ -2930,6 +3404,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) {
@@ -3040,7 +3524,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);
     }
@@ -3051,19 +3535,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 {
@@ -3254,6 +3743,20 @@
       transition-property: none;
     }
   }
+  .md\:px-24 {
+    @media (width >= 48rem) {
+      padding-inline: var(--spacing-24);
+    }
+  }
+  .hover\:md\:gap-12 {
+    &:hover {
+      @media (hover: hover) {
+        @media (width >= 48rem) {
+          gap: var(--spacing-12);
+        }
+      }
+    }
+  }
   .\[\&\:\:-webkit-scrollbar\]\:hidden {
     &::-webkit-scrollbar {
       display: none;
@@ -3376,6 +3879,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);
@@ -4321,6 +4830,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;
@@ -4394,8 +4905,23 @@
   --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 {
+  body {
+    color: var(--color-fg-primary);
+  }
   *::-webkit-scrollbar {
     width: 12px;
     height: 12px;