sellmate-design-system-react 8.1.0 → 9.0.0-beta.10

package/dist/styles.css

@@ -194,6 +194,7 @@
     --color-fg-subtleCool: #025497;
     --color-fg-deep: #004290;
     --color-fg-success: #00973C;
+    --color-fg-successLight: #12B553;
     --color-fg-dangerLight: #FB4444;
     --color-fg-accent: #0075FF;
     --color-fg-accentLight: #64ABFF;
@@ -589,6 +590,9 @@
   .inset-y-0 {
     inset-block: 0;
   }
+  .-top-\[9999px\] {
+    top: calc(9999px * -1);
+  }
   .top-0 {
     top: 0;
   }
@@ -601,6 +605,9 @@
   .top-\[12px\] {
     top: 12px;
   }
+  .top-\[13px\] {
+    top: 13px;
+  }
   .top-\[15px\] {
     top: 15px;
   }
@@ -631,6 +638,9 @@
   .right-1\/2 {
     right: calc(1 / 2 * 100%);
   }
+  .right-\[2px\] {
+    right: 2px;
+  }
   .right-\[10px\] {
     right: 10px;
   }
@@ -649,8 +659,8 @@
   .bottom-\[-1px\] {
     bottom: -1px;
   }
-  .bottom-sd-80 {
-    bottom: var(--spacing-sd-80);
+  .bottom-\[2px\] {
+    bottom: 2px;
   }
   .left-0 {
     left: 0;
@@ -703,6 +713,9 @@
   .z-\[60\] {
     z-index: 60;
   }
+  .z-\[100\] {
+    z-index: 100;
+  }
   .z-\[9000\] {
     z-index: 9000;
   }
@@ -742,6 +755,9 @@
   .mx-3 {
     margin-inline: calc(var(--spacing) * 3);
   }
+  .mx-\[calc\(12px-var\(--cmp-chipFilter-chip-group\)\)\] {
+    margin-inline: calc(12px - var(--cmp-chipFilter-chip-group));
+  }
   .my-auto {
     margin-block: auto;
   }
@@ -763,6 +779,9 @@
   .mt-9 {
     margin-top: calc(var(--spacing) * 9);
   }
+  .mt-\[2px\] {
+    margin-top: 2px;
+  }
   .mt-\[8px\] {
     margin-top: 8px;
   }
@@ -775,6 +794,9 @@
   .mt-sd-2 {
     margin-top: var(--spacing-sd-2);
   }
+  .mt-sd-4 {
+    margin-top: var(--spacing-sd-4);
+  }
   .mt-sd-8 {
     margin-top: var(--spacing-sd-8);
   }
@@ -811,6 +833,9 @@
   .ml-\[220px\] {
     margin-left: 220px;
   }
+  .ml-\[calc\(12px-var\(--cmp-chipFilter-chip-group\)\)\] {
+    margin-left: calc(12px - var(--cmp-chipFilter-chip-group));
+  }
   .ml-auto {
     margin-left: auto;
   }
@@ -851,6 +876,10 @@
     width: var(--cmp-tree-item-arrow-icon);
     height: var(--cmp-tree-item-arrow-icon);
   }
+  .size-\[16px\] {
+    width: 16px;
+    height: 16px;
+  }
   .size-\[24px\] {
     width: 24px;
     height: 24px;
@@ -859,6 +888,9 @@
     width: 100%;
     height: 100%;
   }
+  .h-\(--cmp-pageHeader-bar-height\) {
+    height: var(--cmp-pageHeader-bar-height);
+  }
   .h-\(--cmp-sectionHeaderCard-topBorder-thickness\) {
     height: var(--cmp-sectionHeaderCard-topBorder-thickness);
   }
@@ -877,9 +909,18 @@
   .h-\[2px\] {
     height: 2px;
   }
+  .h-\[8px\] {
+    height: 8px;
+  }
   .h-\[10px\] {
     height: 10px;
   }
+  .h-\[12px\] {
+    height: 12px;
+  }
+  .h-\[15px\] {
+    height: 15px;
+  }
   .h-\[16px\] {
     height: 16px;
   }
@@ -910,8 +951,8 @@
   .h-\[56px\] {
     height: 56px;
   }
-  .h-\[80px\] {
-    height: 80px;
+  .h-\[72px\] {
+    height: 72px;
   }
   .h-\[80vh\] {
     height: 80vh;
@@ -940,6 +981,12 @@
   .h-\[364px\] {
     height: 364px;
   }
+  .h-\[380px\] {
+    height: 380px;
+  }
+  .h-\[420px\] {
+    height: 420px;
+  }
   .h-\[600px\] {
     height: 600px;
   }
@@ -1006,11 +1053,20 @@
   .h-sd-8 {
     height: var(--spacing-sd-8);
   }
+  .h-sd-32 {
+    height: var(--spacing-sd-32);
+  }
   .h-sd-48 {
     height: var(--spacing-sd-48);
   }
-  .max-h-\[calc\(100dvh-48px\)\] {
-    max-height: calc(100dvh - 48px);
+  .max-h-\[85dvh\] {
+    max-height: 85dvh;
+  }
+  .max-h-\[220px\] {
+    max-height: 220px;
+  }
+  .max-h-\[240px\] {
+    max-height: 240px;
   }
   .min-h-\(--cmp-chipInput-md-minHeight\) {
     min-height: var(--cmp-chipInput-md-minHeight);
@@ -1030,9 +1086,6 @@
   .min-h-\[28px\] {
     min-height: 28px;
   }
-  .min-h-\[32px\] {
-    min-height: 32px;
-  }
   .min-h-\[40px\] {
     min-height: 40px;
   }
@@ -1045,8 +1098,11 @@
   .min-h-\[328px\] {
     min-height: 328px;
   }
-  .min-h-\[min\(320px\,calc\(100dvh-48px\)\)\] {
-    min-height: min(320px, calc(100dvh - 48px));
+  .min-h-\[364px\] {
+    min-height: 364px;
+  }
+  .min-h-\[min\(320px\,85dvh\)\] {
+    min-height: min(320px, 85dvh);
   }
   .min-h-\[var\(--cmp-datepicker-calendar-day-circle-size\)\] {
     min-height: var(--cmp-datepicker-calendar-day-circle-size);
@@ -1075,12 +1131,18 @@
   .w-\[4px\] {
     width: 4px;
   }
+  .w-\[8px\] {
+    width: 8px;
+  }
   .w-\[9px\] {
     width: 9px;
   }
   .w-\[10px\] {
     width: 10px;
   }
+  .w-\[12px\] {
+    width: 12px;
+  }
   .w-\[14px\] {
     width: 14px;
   }
@@ -1105,15 +1167,15 @@
   .w-\[61px\] {
     width: 61px;
   }
-  .w-\[80px\] {
-    width: 80px;
-  }
   .w-\[200px\] {
     width: 200px;
   }
   .w-\[220px\] {
     width: 220px;
   }
+  .w-\[240px\] {
+    width: 240px;
+  }
   .w-\[280px\] {
     width: 280px;
   }
@@ -1156,6 +1218,9 @@
   .w-\[calc\(14px\+var\(--cmp-tree-item-arrow-icon\)\)\] {
     width: calc(14px + var(--cmp-tree-item-arrow-icon));
   }
+  .w-\[var\(--border-width-1\)\] {
+    width: var(--border-width-1);
+  }
   .w-\[var\(--cmp-checkbox-size\)\] {
     width: var(--cmp-checkbox-size);
   }
@@ -1168,6 +1233,12 @@
   .w-\[var\(--cmp-datepicker-calendar-day-width\)\] {
     width: var(--cmp-datepicker-calendar-day-width);
   }
+  .w-\[var\(--cmp-datepicker-mode-year-width\)\] {
+    width: var(--cmp-datepicker-mode-year-width);
+  }
+  .w-\[var\(--cmp-datepicker-mode-yearMonth-column-width\)\] {
+    width: var(--cmp-datepicker-mode-yearMonth-column-width);
+  }
   .w-\[var\(--cmp-pagination-height\)\] {
     width: var(--cmp-pagination-height);
   }
@@ -1204,15 +1275,18 @@
   .max-w-\[calc\(100dvw-48px\)\] {
     max-width: calc(100dvw - 48px);
   }
+  .max-w-\[var\(--radix-dropdown-menu-content-available-width\)\] {
+    max-width: var(--radix-dropdown-menu-content-available-width);
+  }
+  .max-w-\[var\(--radix-popover-content-available-width\)\] {
+    max-width: var(--radix-popover-content-available-width);
+  }
   .max-w-full {
     max-width: 100%;
   }
   .max-w-md {
     max-width: var(--container-md);
   }
-  .min-w-\(--radix-popover-trigger-width\) {
-    min-width: var(--radix-popover-trigger-width);
-  }
   .min-w-0 {
     min-width: 0;
   }
@@ -1228,17 +1302,26 @@
   .min-w-\[160px\] {
     min-width: 160px;
   }
+  .min-w-\[180px\] {
+    min-width: 180px;
+  }
   .min-w-\[calc\(var\(--cmp-pagination-height\)\*2\+var\(--cmp-pagination-move-gap\)\)\] {
     min-width: calc(var(--cmp-pagination-height) * 2 + var(--cmp-pagination-move-gap));
   }
+  .min-w-\[min\(160px\,var\(--radix-popover-content-available-width\)\)\] {
+    min-width: min(160px, var(--radix-popover-content-available-width));
+  }
   .min-w-\[min\(480px\,calc\(100dvw-48px\)\)\] {
     min-width: min(480px, calc(100dvw - 48px));
   }
   .min-w-\[min\(520px\,calc\(100dvw-48px\)\)\] {
     min-width: min(520px, calc(100dvw - 48px));
   }
-  .min-w-\[var\(--radix-dropdown-menu-trigger-width\)\] {
-    min-width: var(--radix-dropdown-menu-trigger-width);
+  .min-w-\[min\(var\(--radix-dropdown-menu-trigger-width\)\,var\(--radix-dropdown-menu-content-available-width\)\)\] {
+    min-width: min(var(--radix-dropdown-menu-trigger-width), var(--radix-dropdown-menu-content-available-width));
+  }
+  .min-w-\[min\(var\(--radix-popover-trigger-width\)\,var\(--radix-popover-content-available-width\)\)\] {
+    min-width: min(var(--radix-popover-trigger-width), var(--radix-popover-content-available-width));
   }
   .min-w-px {
     min-width: 1px;
@@ -1258,6 +1341,9 @@
   .flex-shrink-0 {
     flex-shrink: 0;
   }
+  .shrink {
+    flex-shrink: 1;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
@@ -1372,6 +1458,9 @@
   .grid-cols-\[200px_1fr\] {
     grid-template-columns: 200px 1fr;
   }
+  .grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1fr\)\] {
+    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
+  }
   .grid-cols-\[repeat\(7\,var\(--cmp-datepicker-calendar-day-width\)\)\] {
     grid-template-columns: repeat(7,var(--cmp-datepicker-calendar-day-width));
   }
@@ -1399,6 +1488,9 @@
   .items-center {
     align-items: center;
   }
+  .items-end {
+    align-items: flex-end;
+  }
   .items-start {
     align-items: flex-start;
   }
@@ -1441,6 +1533,12 @@
   .gap-\(--cmp-listItem-gap\) {
     gap: var(--cmp-listItem-gap);
   }
+  .gap-\(--cmp-pageHeader-gap\) {
+    gap: var(--cmp-pageHeader-gap);
+  }
+  .gap-\(--cmp-pageHeader-plain-title-gap\) {
+    gap: var(--cmp-pageHeader-plain-title-gap);
+  }
   .gap-\(--cmp-sectionHeaderCard-header-gap\) {
     gap: var(--cmp-sectionHeaderCard-header-gap);
   }
@@ -1507,6 +1605,9 @@
   .gap-\[var\(--\.\.\.\)\] {
     gap: var(--...);
   }
+  .gap-\[var\(--chipfilter-bar-gap\)\] {
+    gap: var(--chipfilter-bar-gap);
+  }
   .gap-\[var\(--cmp-callout-body-gap\)\] {
     gap: var(--cmp-callout-body-gap);
   }
@@ -1522,6 +1623,18 @@
   .gap-\[var\(--cmp-chip-gap\)\] {
     gap: var(--cmp-chip-gap);
   }
+  .gap-\[var\(--cmp-chipFilter-addButton-gap\)\] {
+    gap: var(--cmp-chipFilter-addButton-gap);
+  }
+  .gap-\[var\(--cmp-chipFilter-chip-group\)\] {
+    gap: var(--cmp-chipFilter-chip-group);
+  }
+  .gap-\[var\(--cmp-chipFilter-listbox-bottom-gap\)\] {
+    gap: var(--cmp-chipFilter-listbox-bottom-gap);
+  }
+  .gap-\[var\(--cmp-chipFilter-listbox-top-gap\)\] {
+    gap: var(--cmp-chipFilter-listbox-top-gap);
+  }
   .gap-\[var\(--cmp-datepicker-calendar-day-dot-gap\)\] {
     gap: var(--cmp-datepicker-calendar-day-dot-gap);
   }
@@ -1549,6 +1662,12 @@
   .gap-\[var\(--cmp-datepicker-calendar-time-unit-gap\)\] {
     gap: var(--cmp-datepicker-calendar-time-unit-gap);
   }
+  .gap-\[var\(--cmp-datepicker-mode-item-gap\)\] {
+    gap: var(--cmp-datepicker-mode-item-gap);
+  }
+  .gap-\[var\(--cmp-datepicker-mode-yearMonth-gap\)\] {
+    gap: var(--cmp-datepicker-mode-yearMonth-gap);
+  }
   .gap-\[var\(--cmp-filepicker-md-gap\)\] {
     gap: var(--cmp-filepicker-md-gap);
   }
@@ -1662,6 +1781,9 @@
   .self-center {
     align-self: center;
   }
+  .self-start {
+    align-self: flex-start;
+  }
   .self-stretch {
     align-self: stretch;
   }
@@ -1691,6 +1813,9 @@
   .overflow-y-hidden {
     overflow-y: hidden;
   }
+  .overscroll-contain {
+    overscroll-behavior: contain;
+  }
   .rounded {
     border-radius: 0.25rem;
   }
@@ -1739,9 +1864,15 @@
   .rounded-\[var\(--cmp-datepicker-calendar-time-radius\)\] {
     border-radius: var(--cmp-datepicker-calendar-time-radius);
   }
+  .rounded-\[var\(--cmp-datepicker-mode-radius\)\] {
+    border-radius: var(--cmp-datepicker-mode-radius);
+  }
   .rounded-\[var\(--cmp-datepicker-sm-radius\)\] {
     border-radius: var(--cmp-datepicker-sm-radius);
   }
+  .rounded-\[var\(--cmp-ghostButton-radius-sm\)\] {
+    border-radius: var(--cmp-ghostButton-radius-sm);
+  }
   .rounded-\[var\(--cmp-guide-button-radius\)\] {
     border-radius: var(--cmp-guide-button-radius);
   }
@@ -1907,9 +2038,6 @@
     --tw-border-style: solid;
     border-style: solid;
   }
-  .\!border-\[\#93C4FF\] {
-    border-color: #93C4FF !important;
-  }
   .\!border-border-accentLight {
     border-color: var(--color-border-accentLight) !important;
   }
@@ -1934,6 +2062,9 @@
   .border-\(--cmp-listItem-bordered-border-selected\) {
     border-color: var(--cmp-listItem-bordered-border-selected);
   }
+  .border-\(--cmp-pageHeader-bar-border\) {
+    border-color: var(--cmp-pageHeader-bar-border);
+  }
   .border-\(--cmp-sectionHeaderCard-header-border\) {
     border-color: var(--cmp-sectionHeaderCard-header-border);
   }
@@ -2006,6 +2137,9 @@
   .border-\[color\:var\(--sys-color-border-default\)\] {
     border-color: var(--sys-color-border-default);
   }
+  .border-\[color\:var\(--sys-color-field-border-default\)\] {
+    border-color: var(--sys-color-field-border-default);
+  }
   .border-\[var\(--cmp-table-border-color\)\] {
     border-color: var(--cmp-table-border-color);
   }
@@ -2045,6 +2179,9 @@
   .border-transparent {
     border-color: transparent;
   }
+  .bg-\(--cmp-image-bg\) {
+    background-color: var(--cmp-image-bg);
+  }
   .bg-\(--cmp-listBox-bg\) {
     background-color: var(--cmp-listBox-bg);
   }
@@ -2084,6 +2221,9 @@
   .bg-\(--cmp-listItem-bg-selected\) {
     background-color: var(--cmp-listItem-bg-selected);
   }
+  .bg-\(--cmp-pageHeader-bar-bg\) {
+    background-color: var(--cmp-pageHeader-bar-bg);
+  }
   .bg-\(--cmp-sectionHeaderCard-header-bg\) {
     background-color: var(--cmp-sectionHeaderCard-header-bg);
   }
@@ -2126,6 +2266,9 @@
   .bg-\[\#FFE3F7\] {
     background-color: #FFE3F7;
   }
+  .bg-\[\#FFF4F4\] {
+    background-color: #FFF4F4;
+  }
   .bg-\[\#eee\] {
     background-color: #eee;
   }
@@ -2138,6 +2281,12 @@
   .bg-\[var\(--cb-bg\)\] {
     background-color: var(--cb-bg);
   }
+  .bg-\[var\(--chipfilter-bar-bg\)\] {
+    background-color: var(--chipfilter-bar-bg);
+  }
+  .bg-\[var\(--chipfilter-bar-border\)\] {
+    background-color: var(--chipfilter-bar-border);
+  }
   .bg-\[var\(--cmp-checkbox-bg-disabled\)\] {
     background-color: var(--cmp-checkbox-bg-disabled);
   }
@@ -2147,6 +2296,9 @@
   .bg-\[var\(--cmp-checkbox-unchecked-bg-default\)\] {
     background-color: var(--cmp-checkbox-unchecked-bg-default);
   }
+  .bg-\[var\(--cmp-chipFilter-addButton-bg\)\] {
+    background-color: var(--cmp-chipFilter-addButton-bg);
+  }
   .bg-\[var\(--cmp-datepicker-bg-default\)\] {
     background-color: var(--cmp-datepicker-bg-default);
   }
@@ -2162,6 +2314,12 @@
   .bg-\[var\(--cmp-datepicker-calendar-time-bg-selected\)\] {
     background-color: var(--cmp-datepicker-calendar-time-bg-selected);
   }
+  .bg-\[var\(--cmp-datepicker-mode-bg\)\] {
+    background-color: var(--cmp-datepicker-mode-bg);
+  }
+  .bg-\[var\(--cmp-datepicker-mode-item-bg-default\)\] {
+    background-color: var(--cmp-datepicker-mode-item-bg-default);
+  }
   .bg-\[var\(--cmp-drawer-bg\)\] {
     background-color: var(--cmp-drawer-bg);
   }
@@ -2213,6 +2371,9 @@
   .bg-\[var\(--color-grey-15\)\] {
     background-color: var(--color-grey-15);
   }
+  .bg-\[var\(--color-grey-45\)\] {
+    background-color: var(--color-grey-45);
+  }
   .bg-\[var\(--color-white\)\] {
     background-color: var(--color-white);
   }
@@ -2234,6 +2395,9 @@
   .bg-\[var\(--sys-color-divider-default\)\] {
     background-color: var(--sys-color-divider-default);
   }
+  .bg-\[var\(--sys-color-field-bg-default\)\] {
+    background-color: var(--sys-color-field-bg-default);
+  }
   .bg-bg-frame {
     background-color: var(--color-bg-frame);
   }
@@ -2318,6 +2482,9 @@
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
+  .p-10 {
+    padding: calc(var(--spacing) * 10);
+  }
   .p-16 {
     padding: calc(var(--spacing) * 16);
   }
@@ -2393,6 +2560,9 @@
   .px-\(--cmp-listDraggableItem-paddingX\) {
     padding-inline: var(--cmp-listDraggableItem-paddingX);
   }
+  .px-\(--cmp-pageHeader-paddingX\) {
+    padding-inline: var(--cmp-pageHeader-paddingX);
+  }
   .px-\(--cmp-popup-header-paddingX\) {
     padding-inline: var(--cmp-popup-header-paddingX);
   }
@@ -2426,6 +2596,9 @@
   .px-\[32px\] {
     padding-inline: 32px;
   }
+  .px-\[var\(--chipfilter-bar-padding-x\)\] {
+    padding-inline: var(--chipfilter-bar-padding-x);
+  }
   .px-\[var\(--cmp-callout-body-paddingX\)\] {
     padding-inline: var(--cmp-callout-body-paddingX);
   }
@@ -2435,9 +2608,24 @@
   .px-\[var\(--cmp-chip-paddingX\)\] {
     padding-inline: var(--cmp-chip-paddingX);
   }
+  .px-\[var\(--cmp-chipFilter-addButton-paddingX\)\] {
+    padding-inline: var(--cmp-chipFilter-addButton-paddingX);
+  }
+  .px-\[var\(--cmp-chipFilter-chip-paddingX\)\] {
+    padding-inline: var(--cmp-chipFilter-chip-paddingX);
+  }
+  .px-\[var\(--cmp-chipFilter-listbox-bottom-paddingX\)\] {
+    padding-inline: var(--cmp-chipFilter-listbox-bottom-paddingX);
+  }
+  .px-\[var\(--cmp-chipFilter-listbox-top-paddingX\)\] {
+    padding-inline: var(--cmp-chipFilter-listbox-top-paddingX);
+  }
   .px-\[var\(--cmp-datepicker-calendar-time-paddingX\)\] {
     padding-inline: var(--cmp-datepicker-calendar-time-paddingX);
   }
+  .px-\[var\(--cmp-datepicker-mode-item-paddingX\)\] {
+    padding-inline: var(--cmp-datepicker-mode-item-paddingX);
+  }
   .px-\[var\(--cmp-guide-button-paddingX\)\] {
     padding-inline: var(--cmp-guide-button-paddingX);
   }
@@ -2471,6 +2659,9 @@
   .px-sd-8 {
     padding-inline: var(--spacing-sd-8);
   }
+  .px-sd-10 {
+    padding-inline: var(--spacing-sd-10);
+  }
   .px-sd-12 {
     padding-inline: var(--spacing-sd-12);
   }
@@ -2507,6 +2698,9 @@
   .py-\(--cmp-listItem-paddingY-normal\) {
     padding-block: var(--cmp-listItem-paddingY-normal);
   }
+  .py-\(--cmp-pageHeader-bar-paddingY\) {
+    padding-block: var(--cmp-pageHeader-bar-paddingY);
+  }
   .py-\(--cmp-popup-header-paddingY\) {
     padding-block: var(--cmp-popup-header-paddingY);
   }
@@ -2531,15 +2725,30 @@
   .py-\[40px\] {
     padding-block: 40px;
   }
+  .py-\[var\(--chipfilter-bar-padding-y\)\] {
+    padding-block: var(--chipfilter-bar-padding-y);
+  }
   .py-\[var\(--cmp-callout-body-paddingY\)\] {
     padding-block: var(--cmp-callout-body-paddingY);
   }
+  .py-\[var\(--cmp-chipFilter-listbox-bottom-paddingY\)\] {
+    padding-block: var(--cmp-chipFilter-listbox-bottom-paddingY);
+  }
+  .py-\[var\(--cmp-chipFilter-listbox-list-paddingY\)\] {
+    padding-block: var(--cmp-chipFilter-listbox-list-paddingY);
+  }
+  .py-\[var\(--cmp-chipFilter-listbox-top-paddingY\)\] {
+    padding-block: var(--cmp-chipFilter-listbox-top-paddingY);
+  }
   .py-\[var\(--cmp-datepicker-calendar-day-dot-paddingY\)\] {
     padding-block: var(--cmp-datepicker-calendar-day-dot-paddingY);
   }
   .py-\[var\(--cmp-datepicker-calendar-time-paddingY\)\] {
     padding-block: var(--cmp-datepicker-calendar-time-paddingY);
   }
+  .py-\[var\(--cmp-datepicker-mode-item-paddingY\)\] {
+    padding-block: var(--cmp-datepicker-mode-item-paddingY);
+  }
   .py-\[var\(--cmp-overlay-footer-paddingY\)\] {
     padding-block: var(--cmp-overlay-footer-paddingY);
   }
@@ -2570,9 +2779,15 @@
   .py-sd-24 {
     padding-block: var(--spacing-sd-24);
   }
+  .pt-\(--cmp-pageHeader-plain-paddingTop\) {
+    padding-top: var(--cmp-pageHeader-plain-paddingTop);
+  }
   .pt-3 {
     padding-top: calc(var(--spacing) * 3);
   }
+  .pt-\[var\(--cmp-chipFilter-listbox-list-paddingY\)\] {
+    padding-top: var(--cmp-chipFilter-listbox-list-paddingY);
+  }
   .pt-sd-16 {
     padding-top: var(--spacing-sd-16);
   }
@@ -2594,6 +2809,15 @@
   .pr-\[var\(--cmp-overlay-header-paddingX\)\] {
     padding-right: var(--cmp-overlay-header-paddingX);
   }
+  .pb-\(--cmp-pageHeader-plain-paddingBottom\) {
+    padding-bottom: var(--cmp-pageHeader-plain-paddingBottom);
+  }
+  .pb-\[4px\] {
+    padding-bottom: 4px;
+  }
+  .pb-\[var\(--cmp-chipFilter-listbox-list-paddingY\)\] {
+    padding-bottom: var(--cmp-chipFilter-listbox-list-paddingY);
+  }
   .pb-\[var\(--cmp-modal-action-body-paddingBottom\)\] {
     padding-bottom: var(--cmp-modal-action-body-paddingBottom);
   }
@@ -2603,9 +2827,15 @@
   .pb-sd-16 {
     padding-bottom: var(--spacing-sd-16);
   }
+  .pb-sd-48 {
+    padding-bottom: var(--spacing-sd-48);
+  }
   .pl-\(--cmp-guide-contents-depth-paddingLeft\) {
     padding-left: var(--cmp-guide-contents-depth-paddingLeft);
   }
+  .pl-\(--cmp-pageHeader-title-paddingLeft\) {
+    padding-left: var(--cmp-pageHeader-title-paddingLeft);
+  }
   .pl-\[16px\] {
     padding-left: 16px;
   }
@@ -2636,6 +2866,9 @@
   .align-middle {
     vertical-align: middle;
   }
+  .font-base {
+    font-family: var(--font-base);
+  }
   .text-base {
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
@@ -2862,12 +3095,15 @@
   .text-\(--cmp-listItem-text-selected\) {
     color: var(--cmp-listItem-text-selected);
   }
+  .text-\(--cmp-pageHeader-subtitle-text\) {
+    color: var(--cmp-pageHeader-subtitle-text);
+  }
+  .text-\(--cmp-pageHeader-title-text\) {
+    color: var(--cmp-pageHeader-title-text);
+  }
   .text-\(--cmp-tree-item-text-default\) {
     color: var(--cmp-tree-item-text-default);
   }
-  .text-\(--cmp-tree-item-text-selected\) {
-    color: var(--cmp-tree-item-text-selected);
-  }
   .text-\(--color-grey-65\) {
     color: var(--color-grey-65);
   }
@@ -2898,6 +3134,9 @@
   .text-\[\#0A0A0A\] {
     color: #0A0A0A;
   }
+  .text-\[\#6b7280\] {
+    color: #6b7280;
+  }
   .text-\[\#333\] {
     color: #333;
   }
@@ -2925,6 +3164,15 @@
   .text-\[color\:var\(--cmp-datepicker-calendar-week-color\)\] {
     color: var(--cmp-datepicker-calendar-week-color);
   }
+  .text-\[color\:var\(--cmp-datepicker-mode-item-content-default\)\] {
+    color: var(--cmp-datepicker-mode-item-content-default);
+  }
+  .text-\[color\:var\(--cmp-datepicker-mode-item-content-disabled\)\] {
+    color: var(--cmp-datepicker-mode-item-content-disabled);
+  }
+  .text-\[color\:var\(--cmp-datepicker-mode-item-content-selected\)\] {
+    color: var(--cmp-datepicker-mode-item-content-selected);
+  }
   .text-\[color\:var\(--cmp-datepicker-text-default\)\] {
     color: var(--cmp-datepicker-text-default);
   }
@@ -2997,6 +3245,9 @@
   .text-\[color\:var\(--sys-color-fg-secondary\)\] {
     color: var(--sys-color-fg-secondary);
   }
+  .text-\[color\:var\(--sys-color-field-text-default\)\] {
+    color: var(--sys-color-field-text-default);
+  }
   .text-\[var\(--cmp-field-hint-color\)\] {
     color: var(--cmp-field-hint-color);
   }
@@ -3105,6 +3356,9 @@
   .opacity-40 {
     opacity: 40%;
   }
+  .opacity-50 {
+    opacity: 50%;
+  }
   .opacity-60 {
     opacity: 60%;
   }
@@ -3123,6 +3377,10 @@
     --tw-shadow: 0 2px 4px var(--tw-shadow-color, rgba(0,0,0,0.16));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[0_8px_16px_rgba\(15_23_42_\/_0\.12\)\] {
+    --tw-shadow: 0 8px 16px var(--tw-shadow-color, rgba(15 23 42 / 0.12));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[2px_2px_12px_2px_rgba\(0\,0\,0\,0\.1\)\] {
     --tw-shadow: 2px 2px 12px 2px var(--tw-shadow-color, rgba(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);
@@ -3143,6 +3401,10 @@
     --tw-shadow: var(--shadow-spread-md);
     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 {
+    --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);
+  }
   .shadow-none {
     --tw-shadow: 0 0 #0000;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3167,6 +3429,9 @@
     --tw-blur: blur(8px);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .filter {
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3258,6 +3523,13 @@
   .\[length\:var\(--x\)\] {
     length: var(--x);
   }
+  .group-hover\:visible {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        visibility: visible;
+      }
+    }
+  }
   .group-hover\:bg-\(--cmp-splitter-border-color\) {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -3265,6 +3537,14 @@
       }
     }
   }
+  .group-hover\:font-bold {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        --tw-font-weight: var(--font-weight-bold);
+        font-weight: var(--font-weight-bold);
+      }
+    }
+  }
   .group-hover\/filepicker\:text-\[color\:var\(--cmp-filepicker-text-default\)\] {
     &:is(:where(.group\/filepicker):hover *) {
       @media (hover: hover) {
@@ -3321,6 +3601,11 @@
       color: var(--sys-color-field-text-placeholder);
     }
   }
+  .placeholder\:text-gray-400 {
+    &::placeholder {
+      color: var(--color-gray-400);
+    }
+  }
   .before\:absolute {
     &::before {
       content: var(--tw-content);
@@ -3471,6 +3756,12 @@
       content: var(--tw-content);
     }
   }
+  .last\:border-b-0 {
+    &:last-child {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 0px;
+    }
+  }
   .autofill\:\[box-shadow\:0_0_0_1000px_var\(--sys-color-field-bg-default\)_inset\] {
     &:autofill {
       box-shadow: 0 0 0 1000px var(--sys-color-field-bg-default) inset;
@@ -3678,6 +3969,13 @@
       }
     }
   }
+  .hover\:bg-\[var\(--cmp-datepicker-mode-item-bg-hover\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--cmp-datepicker-mode-item-bg-hover);
+      }
+    }
+  }
   .hover\:bg-\[var\(--cmp-listBoxItem-bg-hover\)\] {
     &:hover {
       @media (hover: hover) {
@@ -3744,6 +4042,14 @@
       }
     }
   }
+  .hover\:font-bold {
+    &:hover {
+      @media (hover: hover) {
+        --tw-font-weight: var(--font-weight-bold);
+        font-weight: var(--font-weight-bold);
+      }
+    }
+  }
   .hover\:\!text-\[color\:var\(--cmp-radioButton-content-hover\)\] {
     &:hover {
       @media (hover: hover) {
@@ -3765,6 +4071,13 @@
       }
     }
   }
+  .hover\:text-\[color\:var\(--cmp-datepicker-mode-item-content-hover\)\] {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--cmp-datepicker-mode-item-content-hover);
+      }
+    }
+  }
   .hover\:text-\[color\:var\(--cmp-listBoxItem-content-hover\)\] {
     &:hover {
       @media (hover: hover) {
@@ -3806,6 +4119,11 @@
       border-color: var(--cmp-datepicker-border-focus);
     }
   }
+  .focus\:border-gray-400 {
+    &:focus {
+      border-color: var(--color-gray-400);
+    }
+  }
   .focus-visible\:bg-\[var\(--cmp-listBoxItem-bg-hover\)\] {
     &:focus-visible {
       background-color: var(--cmp-listBoxItem-bg-hover);
@@ -4227,11 +4545,32 @@
       border-left: 1px solid var(--sys-color-border-default);
     }
   }
+  .\[\&\:\:-webkit-search-cancel-button\]\:hidden {
+    &::-webkit-search-cancel-button {
+      display: none;
+    }
+  }
   .\[\&\:has\(\>button\:hover\)\]\:border-border-strong {
     &:has(>button:hover) {
       border-color: var(--color-border-strong);
     }
   }
+  .\[\&\>\*\]\:w-full {
+    &>* {
+      width: 100%;
+    }
+  }
+  .\[\&\>\*\]\:border-b {
+    &>* {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 1px;
+    }
+  }
+  .\[\&\>\*\]\:border-\(--cmp-listItem-border-default\) {
+    &>* {
+      border-color: var(--cmp-listItem-border-default);
+    }
+  }
   .\[\&\>\*\:not\(\:last-child\)\]\:border-b {
     &>*:not(:last-child) {
       border-bottom-style: var(--tw-border-style);
@@ -4363,6 +4702,7 @@
   --sys-color-fg-subtleCool: #025497;
   --sys-color-fg-deep: #004290;
   --sys-color-fg-success: #00973C;
+  --sys-color-fg-successLight: #12B553;
   --sys-color-fg-dangerLight: #FB4444;
   --sys-color-fg-accent: #0075FF;
   --sys-color-fg-accentLight: #64ABFF;
@@ -4516,8 +4856,10 @@
   --cmp-switch-bg-disabled-on: #BBDAFF;
   --cmp-switch-bg-disabled-off: #E1E1E1;
   --cmp-switch-gap: 6px;
-  --cmp-toggle-height: 28px;
-  --cmp-toggle-paddingX: 12px;
+  --cmp-toggle-xs-height: 24px;
+  --cmp-toggle-xs-paddingX: 8px;
+  --cmp-toggle-sm-height: 28px;
+  --cmp-toggle-sm-paddingX: 12px;
   --cmp-toggle-radius: 9999px;
   --cmp-toggle-border-width: 1px;
   --cmp-toggle-border-default: #CCCCCC;
@@ -4650,6 +4992,11 @@
   --cmp-field-errorMessage-color: #E30000;
   --cmp-field-contents-gap: 4px;
   --cmp-field-message-paddingX: 8px;
+  --cmp-field-width-xs: 80px;
+  --cmp-field-width-sm: 120px;
+  --cmp-field-width-md: 160px;
+  --cmp-field-width-lg: 240px;
+  --cmp-field-width-xl: 480px;
   --cmp-textinput-sm-height: 28px;
   --cmp-textinput-sm-paddingX: 12px;
   --cmp-textinput-sm-paddingY: 4px;
@@ -4797,6 +5144,20 @@
   --cmp-datepicker-calendar-time-gap: 12px;
   --cmp-datepicker-calendar-time-section-gap: 12px;
   --cmp-datepicker-calendar-time-unit-gap: 2px;
+  --cmp-datepicker-mode-bg: #FFFFFF;
+  --cmp-datepicker-mode-radius: 4px;
+  --cmp-datepicker-mode-year-width: 120px;
+  --cmp-datepicker-mode-yearMonth-column-width: 64px;
+  --cmp-datepicker-mode-yearMonth-gap: 4px;
+  --cmp-datepicker-mode-item-paddingY: 4px;
+  --cmp-datepicker-mode-item-paddingX: 12px;
+  --cmp-datepicker-mode-item-gap: 8px;
+  --cmp-datepicker-mode-item-bg-default: #FFFFFF;
+  --cmp-datepicker-mode-item-bg-hover: #0075FF;
+  --cmp-datepicker-mode-item-content-default: #222222;
+  --cmp-datepicker-mode-item-content-hover: #FFFFFF;
+  --cmp-datepicker-mode-item-content-disabled: #888888;
+  --cmp-datepicker-mode-item-content-selected: #0075FF;
   --cmp-chip-height: 24px;
   --cmp-chip-paddingX: 8px;
   --cmp-chip-gap: 4px;
@@ -5047,9 +5408,10 @@
   --cmp-progress-circular-gap: 8px;
   --cmp-progress-color-track: #EEEEEE;
   --cmp-progress-color-label: #555555;
-  --cmp-progress-active-color: #2D8DFF;
-  --cmp-progress-success-color: #12B553;
-  --cmp-progress-error-color: #FB4444;
+  --cmp-progress-color-active: #2D8DFF;
+  --cmp-progress-color-success: #12B553;
+  --cmp-progress-color-error: #FB4444;
+  --cmp-progress-color-neutral: #D8D8D8;
   --cmp-progress-bar-text: #FFFFFF;
   --cmp-progress-inverse-color: #FFFFFF;
   --cmp-progress-inverse-opacity: 40%;
@@ -5127,10 +5489,8 @@
   --cmp-stepper-vertical-title-paddingTop: 12px;
   --cmp-stepper-vertical-title-paddingBottom: 6px;
   --cmp-stepper-vertical-title-text: #004290;
-  --cmp-tab-main-lg-height: 44px;
-  --cmp-tab-main-lg-paddingX: 32px;
-  --cmp-tab-main-md-height: 36px;
-  --cmp-tab-main-md-paddingX: 24px;
+  --cmp-tab-main-height: 36px;
+  --cmp-tab-main-paddingX: 24px;
   --cmp-tab-main-gap: 8px;
   --cmp-tab-main-container-gap: 4px;
   --cmp-tab-main-radius: 6px;
@@ -5286,9 +5646,8 @@
   --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: 16px;
-  --cmp-tree-connector-line-color: #AAAAAA;
+  --cmp-tree-connector-line-color: #E1E1E1;
   --cmp-pageHeader-paddingX: 16px;
   --cmp-pageHeader-gap: 12px;
   --cmp-pageHeader-title-paddingLeft: 4px;
@@ -5358,6 +5717,8 @@
   --cmp-splitter-border-width: 4px;
   --cmp-splitter-border-padding: 4px;
   --cmp-splitter-border-color: #64ABFF;
+  --cmp-image-bg: #F9F9F9;
+  --cmp-image-icon: #D8D8D8;
 }
 @layer base {
   body {