sellmate-design-system-react 9.0.0-beta.2 → 9.0.0-beta.20

package/dist/styles.css

@@ -590,6 +590,9 @@
   .inset-y-0 {
     inset-block: 0;
   }
+  .-top-\[9999px\] {
+    top: calc(9999px * -1);
+  }
   .top-0 {
     top: 0;
   }
@@ -602,6 +605,9 @@
   .top-\[12px\] {
     top: 12px;
   }
+  .top-\[13px\] {
+    top: 13px;
+  }
   .top-\[15px\] {
     top: 15px;
   }
@@ -632,6 +638,9 @@
   .right-1\/2 {
     right: calc(1 / 2 * 100%);
   }
+  .right-\[2px\] {
+    right: 2px;
+  }
   .right-\[10px\] {
     right: 10px;
   }
@@ -650,8 +659,8 @@
   .bottom-\[-1px\] {
     bottom: -1px;
   }
-  .bottom-sd-80 {
-    bottom: var(--spacing-sd-80);
+  .bottom-\[2px\] {
+    bottom: 2px;
   }
   .left-0 {
     left: 0;
@@ -704,6 +713,9 @@
   .z-\[60\] {
     z-index: 60;
   }
+  .z-\[100\] {
+    z-index: 100;
+  }
   .z-\[9000\] {
     z-index: 9000;
   }
@@ -743,9 +755,15 @@
   .mx-3 {
     margin-inline: calc(var(--spacing) * 3);
   }
+  .mx-\[2px\] {
+    margin-inline: 2px;
+  }
   .mx-\[calc\(12px-var\(--cmp-chipFilter-chip-group\)\)\] {
     margin-inline: calc(12px - var(--cmp-chipFilter-chip-group));
   }
+  .my-\[6px\] {
+    margin-block: 6px;
+  }
   .my-auto {
     margin-block: auto;
   }
@@ -761,6 +779,9 @@
   .mt-\(--cmp-field-contents-gap\) {
     margin-top: var(--cmp-field-contents-gap);
   }
+  .mt-1 {
+    margin-top: var(--spacing);
+  }
   .mt-8 {
     margin-top: calc(var(--spacing) * 8);
   }
@@ -782,6 +803,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);
   }
@@ -800,6 +824,9 @@
   .-mr-px {
     margin-right: -1px;
   }
+  .mr-\[6px\] {
+    margin-right: 6px;
+  }
   .mr-\[8px\] {
     margin-right: 8px;
   }
@@ -888,15 +915,30 @@
   .h-11 {
     height: calc(var(--spacing) * 11);
   }
+  .h-16 {
+    height: calc(var(--spacing) * 16);
+  }
   .h-48 {
     height: calc(var(--spacing) * 48);
   }
   .h-\[2px\] {
     height: 2px;
   }
+  .h-\[3px\] {
+    height: 3px;
+  }
+  .h-\[8px\] {
+    height: 8px;
+  }
   .h-\[10px\] {
     height: 10px;
   }
+  .h-\[12px\] {
+    height: 12px;
+  }
+  .h-\[15px\] {
+    height: 15px;
+  }
   .h-\[16px\] {
     height: 16px;
   }
@@ -915,9 +957,6 @@
   .h-\[32px\] {
     height: 32px;
   }
-  .h-\[40px\] {
-    height: 40px;
-  }
   .h-\[48px\] {
     height: 48px;
   }
@@ -927,6 +966,9 @@
   .h-\[56px\] {
     height: 56px;
   }
+  .h-\[72px\] {
+    height: 72px;
+  }
   .h-\[80vh\] {
     height: 80vh;
   }
@@ -954,6 +996,9 @@
   .h-\[364px\] {
     height: 364px;
   }
+  .h-\[380px\] {
+    height: 380px;
+  }
   .h-\[420px\] {
     height: 420px;
   }
@@ -1023,6 +1068,9 @@
   .h-sd-8 {
     height: var(--spacing-sd-8);
   }
+  .h-sd-32 {
+    height: var(--spacing-sd-32);
+  }
   .h-sd-48 {
     height: var(--spacing-sd-48);
   }
@@ -1053,18 +1101,15 @@
   .min-h-\[28px\] {
     min-height: 28px;
   }
-  .min-h-\[32px\] {
-    min-height: 32px;
-  }
   .min-h-\[40px\] {
     min-height: 40px;
   }
-  .min-h-\[52px\] {
-    min-height: 52px;
-  }
   .min-h-\[60px\] {
     min-height: 60px;
   }
+  .min-h-\[80px\] {
+    min-height: 80px;
+  }
   .min-h-\[328px\] {
     min-height: 328px;
   }
@@ -1095,18 +1140,30 @@
   .w-11 {
     width: calc(var(--spacing) * 11);
   }
+  .w-60 {
+    width: calc(var(--spacing) * 60);
+  }
   .w-64 {
     width: calc(var(--spacing) * 64);
   }
+  .w-\[1px\] {
+    width: 1px;
+  }
   .w-\[4px\] {
     width: 4px;
   }
+  .w-\[8px\] {
+    width: 8px;
+  }
   .w-\[9px\] {
     width: 9px;
   }
   .w-\[10px\] {
     width: 10px;
   }
+  .w-\[12px\] {
+    width: 12px;
+  }
   .w-\[14px\] {
     width: 14px;
   }
@@ -1137,6 +1194,9 @@
   .w-\[220px\] {
     width: 220px;
   }
+  .w-\[240px\] {
+    width: 240px;
+  }
   .w-\[280px\] {
     width: 280px;
   }
@@ -1179,6 +1239,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);
   }
@@ -1191,6 +1254,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);
   }
@@ -1227,6 +1296,9 @@
   .max-w-\[calc\(100dvw-48px\)\] {
     max-width: calc(100dvw - 48px);
   }
+  .max-w-\[calc\(100vw-32px\)\] {
+    max-width: calc(100vw - 32px);
+  }
   .max-w-\[var\(--radix-dropdown-menu-content-available-width\)\] {
     max-width: var(--radix-dropdown-menu-content-available-width);
   }
@@ -1293,6 +1365,9 @@
   .flex-shrink-0 {
     flex-shrink: 0;
   }
+  .shrink {
+    flex-shrink: 1;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
@@ -1407,6 +1482,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));
   }
@@ -1434,6 +1512,9 @@
   .items-center {
     align-items: center;
   }
+  .items-end {
+    align-items: flex-end;
+  }
   .items-start {
     align-items: flex-start;
   }
@@ -1500,6 +1581,9 @@
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
+  .gap-6 {
+    gap: calc(var(--spacing) * 6);
+  }
   .gap-8 {
     gap: calc(var(--spacing) * 8);
   }
@@ -1509,6 +1593,9 @@
   .gap-13 {
     gap: calc(var(--spacing) * 13);
   }
+  .gap-\[1px\] {
+    gap: 1px;
+  }
   .gap-\[2px\] {
     gap: 2px;
   }
@@ -1605,6 +1692,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);
   }
@@ -1750,6 +1843,9 @@
   .overflow-y-hidden {
     overflow-y: hidden;
   }
+  .overscroll-contain {
+    overscroll-behavior: contain;
+  }
   .rounded {
     border-radius: 0.25rem;
   }
@@ -1765,9 +1861,15 @@
   .rounded-8 {
     border-radius: var(--radius-8);
   }
+  .rounded-\[1px\] {
+    border-radius: 1px;
+  }
   .rounded-\[2px\] {
     border-radius: 2px;
   }
+  .rounded-\[3px\] {
+    border-radius: 3px;
+  }
   .rounded-\[4px\] {
     border-radius: 4px;
   }
@@ -1798,6 +1900,9 @@
   .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);
   }
@@ -1969,9 +2074,6 @@
     --tw-border-style: solid;
     border-style: solid;
   }
-  .\!border-\[\#93C4FF\] {
-    border-color: #93C4FF !important;
-  }
   .\!border-border-accentLight {
     border-color: var(--color-border-accentLight) !important;
   }
@@ -2017,6 +2119,9 @@
   .border-\[\#E1E1E1\] {
     border-color: #E1E1E1;
   }
+  .border-\[\#e1e1e1\] {
+    border-color: #e1e1e1;
+  }
   .border-\[\#e5e7eb\] {
     border-color: #e5e7eb;
   }
@@ -2059,9 +2164,6 @@
   .border-\[color\:var\(--color-grey-30\)\] {
     border-color: var(--color-grey-30);
   }
-  .border-\[color\:var\(--color-grey-45\)\] {
-    border-color: var(--color-grey-45);
-  }
   .border-\[color\:var\(--dd-border\)\] {
     border-color: var(--dd-border);
   }
@@ -2200,6 +2302,9 @@
   .bg-\[\#FFE3F7\] {
     background-color: #FFE3F7;
   }
+  .bg-\[\#FFF4F4\] {
+    background-color: #FFF4F4;
+  }
   .bg-\[\#eee\] {
     background-color: #eee;
   }
@@ -2245,6 +2350,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);
   }
@@ -2296,6 +2407,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);
   }
@@ -2368,9 +2482,15 @@
   .bg-grey-20 {
     background-color: var(--color-grey-20);
   }
+  .bg-grey-30 {
+    background-color: var(--color-grey-30);
+  }
   .bg-grey-90 {
     background-color: var(--color-grey-90);
   }
+  .bg-primary-50 {
+    background-color: var(--color-primary-50);
+  }
   .bg-red-50 {
     background-color: var(--color-red-50);
   }
@@ -2416,6 +2536,9 @@
   .p-\[2px\] {
     padding: 2px;
   }
+  .p-\[4px\] {
+    padding: 4px;
+  }
   .p-\[8px\] {
     padding: 8px;
   }
@@ -2545,6 +2668,9 @@
   .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);
   }
@@ -2578,6 +2704,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);
   }
@@ -2662,6 +2791,9 @@
   .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);
   }
@@ -2740,6 +2872,9 @@
   .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);
   }
@@ -2776,6 +2911,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));
@@ -2796,6 +2934,9 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .text-11 {
+    font-size: var(--text-11);
+  }
   .text-12 {
     font-size: var(--text-12);
   }
@@ -2846,6 +2987,10 @@
     --tw-leading: calc(var(--spacing) * 6);
     line-height: calc(var(--spacing) * 6);
   }
+  .leading-\[0\] {
+    --tw-leading: 0;
+    line-height: 0;
+  }
   .leading-\[16px\] {
     --tw-leading: 16px;
     line-height: 16px;
@@ -3011,9 +3156,6 @@
   .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);
   }
@@ -3074,6 +3216,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);
   }
@@ -3122,9 +3273,6 @@
   .text-\[color\:var\(--cmp-progress-color-label\)\] {
     color: var(--cmp-progress-color-label);
   }
-  .text-\[color\:var\(--cmp-select-text-default\)\] {
-    color: var(--cmp-select-text-default);
-  }
   .text-\[color\:var\(--co-content\)\] {
     color: var(--co-content);
   }
@@ -3215,6 +3363,9 @@
   .text-grey-55 {
     color: var(--color-grey-55);
   }
+  .text-grey-60 {
+    color: var(--color-grey-60);
+  }
   .text-grey-65 {
     color: var(--color-grey-65);
   }
@@ -3242,6 +3393,9 @@
   .uppercase {
     text-transform: uppercase;
   }
+  .italic {
+    font-style: italic;
+  }
   .no-underline {
     text-decoration-line: none;
   }
@@ -3278,6 +3432,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);
@@ -3322,6 +3480,19 @@
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
+  .outline-2 {
+    outline-style: var(--tw-outline-style);
+    outline-width: 2px;
+  }
+  .outline-offset-\[-2px\] {
+    outline-offset: -2px;
+  }
+  .outline-\(--sys-color-border-accent\) {
+    outline-color: var(--sys-color-border-accent);
+  }
+  .outline-\[var\(--color-border-accent\)\] {
+    outline-color: var(--color-border-accent);
+  }
   .blur {
     --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,);
@@ -3442,6 +3613,13 @@
       }
     }
   }
+  .group-hover\/editor-tool\:opacity-5 {
+    &:is(:where(.group\/editor-tool):hover *) {
+      @media (hover: hover) {
+        opacity: 5%;
+      }
+    }
+  }
   .group-hover\/filepicker\:text-\[color\:var\(--cmp-filepicker-text-default\)\] {
     &:is(:where(.group\/filepicker):hover *) {
       @media (hover: hover) {
@@ -3456,6 +3634,13 @@
       }
     }
   }
+  .group-hover\/select-clear\:opacity-5 {
+    &:is(:where(.group\/select-clear):hover *) {
+      @media (hover: hover) {
+        opacity: 5%;
+      }
+    }
+  }
   .group-hover\/table-row\:bg-\[var\(--color-grey-05\)\] {
     &:is(:where(.group\/table-row):hover *) {
       @media (hover: hover) {
@@ -3488,14 +3673,14 @@
       color: var(--cmp-textinput-text-placeholder);
     }
   }
-  .placeholder\:text-\[color\:var\(--color-grey-55\)\] {
+  .placeholder\:text-\[color\:var\(--sys-color-field-text-placeholder\)\] {
     &::placeholder {
-      color: var(--color-grey-55);
+      color: var(--sys-color-field-text-placeholder);
     }
   }
-  .placeholder\:text-\[color\:var\(--sys-color-field-text-placeholder\)\] {
+  .placeholder\:text-gray-400 {
     &::placeholder {
-      color: var(--sys-color-field-text-placeholder);
+      color: var(--color-gray-400);
     }
   }
   .before\:absolute {
@@ -3648,6 +3833,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;
@@ -3855,6 +4046,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) {
@@ -3876,6 +4074,13 @@
       }
     }
   }
+  .hover\:bg-\[var\(--color-bg-neutralLight\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-bg-neutralLight);
+      }
+    }
+  }
   .hover\:bg-\[var\(--color-grey-05\)\] {
     &:hover {
       @media (hover: hover) {
@@ -3950,6 +4155,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) {
@@ -3991,6 +4203,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);
@@ -4013,6 +4230,12 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .focus-visible\:shadow-\[0_0_0_2px_var\(--cmp-toggle-border-select\)\] {
+    &:focus-visible {
+      --tw-shadow: 0 0 0 2px var(--tw-shadow-color, var(--cmp-toggle-border-select));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
   .focus-visible\:outline {
     &:focus-visible {
       outline-style: var(--tw-outline-style);
@@ -4071,6 +4294,11 @@
       color: var(--cmp-button-text-disabled);
     }
   }
+  .data-\[highlighted\]\:bg-\[var\(--color-bg-neutralLight\)\] {
+    &[data-highlighted] {
+      background-color: var(--color-bg-neutralLight);
+    }
+  }
   .data-\[highlighted\]\:bg-\[var\(--sys-color-bg-accent\)\] {
     &[data-highlighted] {
       background-color: var(--sys-color-bg-accent);
@@ -4280,6 +4508,384 @@
       }
     }
   }
+  .\[\&_\.ProseMirror\]\:min-h-full {
+    & .ProseMirror {
+      min-height: 100%;
+    }
+  }
+  .\[\&_\.ProseMirror\]\:break-words {
+    & .ProseMirror {
+      overflow-wrap: break-word;
+    }
+  }
+  .\[\&_\.ProseMirror\]\:whitespace-pre-wrap {
+    & .ProseMirror {
+      white-space: pre-wrap;
+    }
+  }
+  .\[\&_\.ProseMirror\]\:outline-none {
+    & .ProseMirror {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+  }
+  .\[\&_\.ProseMirror-selectednode\]\:outline {
+    & .ProseMirror-selectednode {
+      outline-style: var(--tw-outline-style);
+      outline-width: 1px;
+    }
+  }
+  .\[\&_\.ProseMirror-selectednode\]\:outline-2 {
+    & .ProseMirror-selectednode {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+    }
+  }
+  .\[\&_\.ProseMirror-selectednode\]\:outline-\[var\(--color-border-accent\)\] {
+    & .ProseMirror-selectednode {
+      outline-color: var(--color-border-accent);
+    }
+  }
+  .\[\&_a\]\:cursor-pointer {
+    & a {
+      cursor: pointer;
+    }
+  }
+  .\[\&_a\]\:text-\[color\:var\(--color-fg-accent\)\] {
+    & a {
+      color: var(--color-fg-accent);
+    }
+  }
+  .\[\&_a\]\:underline {
+    & a {
+      text-decoration-line: underline;
+    }
+  }
+  .\[\&_blockquote\]\:my-\[8px\] {
+    & blockquote {
+      margin-block: 8px;
+    }
+  }
+  .\[\&_blockquote\]\:border-l-\[3px\] {
+    & blockquote {
+      border-left-style: var(--tw-border-style);
+      border-left-width: 3px;
+    }
+  }
+  .\[\&_blockquote\]\:border-solid {
+    & blockquote {
+      --tw-border-style: solid;
+      border-style: solid;
+    }
+  }
+  .\[\&_blockquote\]\:border-l-\[color\:var\(--color-border-default\)\] {
+    & blockquote {
+      border-left-color: var(--color-border-default);
+    }
+  }
+  .\[\&_blockquote\]\:pl-\[12px\] {
+    & blockquote {
+      padding-left: 12px;
+    }
+  }
+  .\[\&_blockquote\]\:text-\[color\:var\(--color-fg-tertiary\)\] {
+    & blockquote {
+      color: var(--color-fg-tertiary);
+    }
+  }
+  .\[\&_code\]\:rounded-\[3px\] {
+    & code {
+      border-radius: 3px;
+    }
+  }
+  .\[\&_code\]\:bg-\[var\(--color-bg-neutralLight\)\] {
+    & code {
+      background-color: var(--color-bg-neutralLight);
+    }
+  }
+  .\[\&_code\]\:px-\[4px\] {
+    & code {
+      padding-inline: 4px;
+    }
+  }
+  .\[\&_code\]\:py-\[1px\] {
+    & code {
+      padding-block: 1px;
+    }
+  }
+  .\[\&_em\]\:italic {
+    & em {
+      font-style: italic;
+    }
+  }
+  .\[\&_h1\]\:mt-\[12px\] {
+    & h1 {
+      margin-top: 12px;
+    }
+  }
+  .\[\&_h1\]\:mb-\[4px\] {
+    & h1 {
+      margin-bottom: 4px;
+    }
+  }
+  .\[\&_h1\]\:text-\[18px\] {
+    & h1 {
+      font-size: 18px;
+    }
+  }
+  .\[\&_h1\]\:leading-\[28px\] {
+    & h1 {
+      --tw-leading: 28px;
+      line-height: 28px;
+    }
+  }
+  .\[\&_h1\]\:font-bold {
+    & h1 {
+      --tw-font-weight: var(--font-weight-bold);
+      font-weight: var(--font-weight-bold);
+    }
+  }
+  .\[\&_h2\]\:mt-\[12px\] {
+    & h2 {
+      margin-top: 12px;
+    }
+  }
+  .\[\&_h2\]\:mb-\[4px\] {
+    & h2 {
+      margin-bottom: 4px;
+    }
+  }
+  .\[\&_h2\]\:text-\[16px\] {
+    & h2 {
+      font-size: 16px;
+    }
+  }
+  .\[\&_h2\]\:leading-\[24px\] {
+    & h2 {
+      --tw-leading: 24px;
+      line-height: 24px;
+    }
+  }
+  .\[\&_h2\]\:font-bold {
+    & h2 {
+      --tw-font-weight: var(--font-weight-bold);
+      font-weight: var(--font-weight-bold);
+    }
+  }
+  .\[\&_h3\]\:mt-\[8px\] {
+    & h3 {
+      margin-top: 8px;
+    }
+  }
+  .\[\&_h3\]\:mb-\[4px\] {
+    & h3 {
+      margin-bottom: 4px;
+    }
+  }
+  .\[\&_h3\]\:text-\[14px\] {
+    & h3 {
+      font-size: 14px;
+    }
+  }
+  .\[\&_h3\]\:leading-\[22px\] {
+    & h3 {
+      --tw-leading: 22px;
+      line-height: 22px;
+    }
+  }
+  .\[\&_h3\]\:font-bold {
+    & h3 {
+      --tw-font-weight: var(--font-weight-bold);
+      font-weight: var(--font-weight-bold);
+    }
+  }
+  .\[\&_hr\]\:my-\[12px\] {
+    & hr {
+      margin-block: 12px;
+    }
+  }
+  .\[\&_hr\]\:border-t {
+    & hr {
+      border-top-style: var(--tw-border-style);
+      border-top-width: 1px;
+    }
+  }
+  .\[\&_hr\]\:border-\[color\:var\(--color-border-default\)\] {
+    & hr {
+      border-color: var(--color-border-default);
+    }
+  }
+  .\[\&_li\]\:my-0 {
+    & li {
+      margin-block: 0;
+    }
+  }
+  .\[\&_li\>p\]\:my-0 {
+    & li>p {
+      margin-block: 0;
+    }
+  }
+  .\[\&_mark\]\:rounded-\[2px\] {
+    & mark {
+      border-radius: 2px;
+    }
+  }
+  .\[\&_mark\]\:bg-transparent {
+    & mark {
+      background-color: transparent;
+    }
+  }
+  .\[\&_mark\]\:px-\[1px\] {
+    & mark {
+      padding-inline: 1px;
+    }
+  }
+  .\[\&_ol\]\:my-\[4px\] {
+    & ol {
+      margin-block: 4px;
+    }
+  }
+  .\[\&_ol\]\:list-decimal {
+    & ol {
+      list-style-type: decimal;
+    }
+  }
+  .\[\&_ol\]\:pl-\[20px\] {
+    & ol {
+      padding-left: 20px;
+    }
+  }
+  .\[\&_p\]\:my-0 {
+    & p {
+      margin-block: 0;
+    }
+  }
+  .\[\&_p\+p\]\:mt-\[4px\] {
+    & p+p {
+      margin-top: 4px;
+    }
+  }
+  .\[\&_p\.is-editor-empty\:first-child\]\:before\:pointer-events-none {
+    & p.is-editor-empty:first-child {
+      &::before {
+        content: var(--tw-content);
+        pointer-events: none;
+      }
+    }
+  }
+  .\[\&_p\.is-editor-empty\:first-child\]\:before\:float-left {
+    & p.is-editor-empty:first-child {
+      &::before {
+        content: var(--tw-content);
+        float: left;
+      }
+    }
+  }
+  .\[\&_p\.is-editor-empty\:first-child\]\:before\:h-0 {
+    & p.is-editor-empty:first-child {
+      &::before {
+        content: var(--tw-content);
+        height: 0;
+      }
+    }
+  }
+  .\[\&_p\.is-editor-empty\:first-child\]\:before\:text-\[color\:var\(--sys-color-field-text-placeholder\)\] {
+    & p.is-editor-empty:first-child {
+      &::before {
+        content: var(--tw-content);
+        color: var(--sys-color-field-text-placeholder);
+      }
+    }
+  }
+  .\[\&_p\.is-editor-empty\:first-child\]\:before\:content-\[attr\(data-placeholder\)\] {
+    & p.is-editor-empty:first-child {
+      &::before {
+        --tw-content: attr(data-placeholder);
+        content: var(--tw-content);
+      }
+    }
+  }
+  .\[\&_pre\]\:my-\[8px\] {
+    & pre {
+      margin-block: 8px;
+    }
+  }
+  .\[\&_pre\]\:rounded-\[4px\] {
+    & pre {
+      border-radius: 4px;
+    }
+  }
+  .\[\&_pre\]\:bg-\[var\(--color-bg-neutralLight\)\] {
+    & pre {
+      background-color: var(--color-bg-neutralLight);
+    }
+  }
+  .\[\&_pre\]\:p-\[12px\] {
+    & pre {
+      padding: 12px;
+    }
+  }
+  .\[\&_pre_code\]\:bg-transparent {
+    & pre code {
+      background-color: transparent;
+    }
+  }
+  .\[\&_pre_code\]\:p-0 {
+    & pre code {
+      padding: 0;
+    }
+  }
+  .\[\&_s\]\:line-through {
+    & s {
+      text-decoration-line: line-through;
+    }
+  }
+  .\[\&_strong\]\:font-bold {
+    & strong {
+      --tw-font-weight: var(--font-weight-bold);
+      font-weight: var(--font-weight-bold);
+    }
+  }
+  .\[\&_sub\]\:align-sub {
+    & sub {
+      vertical-align: sub;
+    }
+  }
+  .\[\&_sub\]\:text-\[0\.75em\] {
+    & sub {
+      font-size: 0.75em;
+    }
+  }
+  .\[\&_sup\]\:align-super {
+    & sup {
+      vertical-align: super;
+    }
+  }
+  .\[\&_sup\]\:text-\[0\.75em\] {
+    & sup {
+      font-size: 0.75em;
+    }
+  }
+  .\[\&_u\]\:underline {
+    & u {
+      text-decoration-line: underline;
+    }
+  }
+  .\[\&_ul\]\:my-\[4px\] {
+    & ul {
+      margin-block: 4px;
+    }
+  }
+  .\[\&_ul\]\:list-disc {
+    & ul {
+      list-style-type: disc;
+    }
+  }
+  .\[\&_ul\]\:pl-\[20px\] {
+    & ul {
+      padding-left: 20px;
+    }
+  }
   .\[\&\:-webkit-autofill\]\:\[box-shadow\:0_0_0_1000px_var\(--sys-color-field-bg-default\)_inset\] {
     &:-webkit-autofill {
       box-shadow: 0 0 0 1000px var(--sys-color-field-bg-default) inset;
@@ -4412,20 +5018,19 @@
       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);
     }
   }
-  .\[\&\>\*\]\:border-b {
+  .\[\&\>\*\]\:w-full {
     &>* {
-      border-bottom-style: var(--tw-border-style);
-      border-bottom-width: 1px;
-    }
-  }
-  .\[\&\>\*\]\:border-\(--cmp-listItem-border-default\) {
-    &>* {
-      border-color: var(--cmp-listItem-border-default);
+      width: 100%;
     }
   }
   .\[\&\>\*\:not\(\:last-child\)\]\:border-b {
@@ -4444,6 +5049,16 @@
       background-color: var(--cmp-listExpansionItem-title-bg-hover);
     }
   }
+  .\[\&\>div\:last-child\]\:min-h-0 {
+    &>div:last-child {
+      min-height: 0;
+    }
+  }
+  .\[\&\>div\:last-child\]\:flex-1 {
+    &>div:last-child {
+      flex: 1;
+    }
+  }
 }
 :root {
   --sys-size-control-xs-height: 24px;
@@ -4849,6 +5464,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;
@@ -4996,6 +5616,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;
@@ -5327,10 +5961,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;
@@ -5486,9 +6118,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;