@accelint/design-toolkit 2.6.0 → 4.0.0

package/dist/styles.css

@@ -397,24 +397,9 @@
   .inset-0 {
     inset: var(--spacing-0);
   }
-  .top-1\/2 {
-    top: calc(1/2 * 100%);
-  }
-  .top-\[50\%\] {
-    top: 50%;
-  }
   .top-\[var\(--classification-banner-height\)\] {
     top: var(--classification-banner-height);
   }
-  .left-1\/2 {
-    left: calc(1/2 * 100%);
-  }
-  .left-\[50\%\] {
-    left: 50%;
-  }
-  .left-s {
-    left: var(--spacing-s);
-  }
   .z-1 {
     z-index: 1;
   }
@@ -433,9 +418,6 @@
   .order-1 {
     order: 1;
   }
-  .order-2 {
-    order: 2;
-  }
   .order-3 {
     order: 3;
   }
@@ -454,12 +436,6 @@
   .col-\[var\(--drawer-main-cols\)\] {
     grid-column: var(--drawer-main-cols);
   }
-  .col-span-2 {
-    grid-column: span 2 / span 2;
-  }
-  .col-span-3 {
-    grid-column: span 3 / span 3;
-  }
   .col-span-full {
     grid-column: 1 / -1;
   }
@@ -469,30 +445,12 @@
   .col-start-2 {
     grid-column-start: 2;
   }
-  .col-start-3 {
-    grid-column-start: 3;
-  }
   .\[grid-row\:1\] {
     grid-row: 1;
   }
   .row-\[var\(--drawer-main-rows\)\] {
     grid-row: var(--drawer-main-rows);
   }
-  .row-span-3 {
-    grid-row: span 3 / span 3;
-  }
-  .row-start-1 {
-    grid-row-start: 1;
-  }
-  .row-start-2 {
-    grid-row-start: 2;
-  }
-  .row-start-3 {
-    grid-row-start: 3;
-  }
-  .row-start-4 {
-    grid-row-start: 4;
-  }
   .container {
     width: 100%;
     @media (width >= 40rem) {
@@ -538,9 +496,6 @@
   .mt-xl {
     margin-top: var(--spacing-xl);
   }
-  .mb-m {
-    margin-bottom: var(--spacing-m);
-  }
   .mb-s {
     margin-bottom: var(--spacing-s);
   }
@@ -644,18 +599,12 @@
   .h-oversized {
     height: var(--spacing-oversized);
   }
-  .h-s {
-    height: var(--spacing-s);
-  }
   .h-screen {
     height: 100vh;
   }
   .h-xl {
     height: var(--spacing-xl);
   }
-  .h-xxs {
-    height: var(--spacing-xxs);
-  }
   .max-h-\[200px\] {
     max-height: 200px;
   }
@@ -782,36 +731,21 @@
   .w-m {
     width: var(--spacing-m);
   }
-  .w-s {
-    width: var(--spacing-s);
-  }
   .w-xl {
     width: var(--spacing-xl);
   }
-  .w-xxs {
-    width: var(--spacing-xxs);
-  }
   .max-w-\[160px\] {
     max-width: 160px;
   }
   .max-w-\[280px\] {
     max-width: 280px;
   }
-  .max-w-\[720px\] {
-    max-width: 720px;
-  }
   .min-w-\(--trigger-width\) {
     min-width: var(--trigger-width);
   }
   .min-w-0 {
     min-width: var(--spacing-0);
   }
-  .min-w-\[280px\] {
-    min-width: 280px;
-  }
-  .min-w-\[320px\] {
-    min-width: 320px;
-  }
   .min-w-\[calc\(var\(--trigger-width\)\+\(var\(--spacing-s\)\*2\)\)\] {
     min-width: calc(var(--trigger-width) + (var(--spacing-s) * 2));
   }
@@ -833,22 +767,6 @@
   .grow {
     flex-grow: 1;
   }
-  .translate-x-\[40\%\] {
-    --tw-translate-x: 40%;
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-  .-translate-y-1\/2 {
-    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-  .translate-y-1\/2 {
-    --tw-translate-y: calc(1/2 * 100%);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-  .translate-y-\[50\%\] {
-    --tw-translate-y: 50%;
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
@@ -885,51 +803,30 @@
   .grid-cols-\[auto_1fr\] {
     grid-template-columns: auto 1fr;
   }
-  .grid-cols-\[auto_1fr_auto\] {
-    grid-template-columns: auto 1fr auto;
-  }
   .grid-cols-\[auto_auto_1fr_auto\] {
     grid-template-columns: auto auto 1fr auto;
   }
-  .grid-cols-\[auto_auto_1fr_auto_auto\] {
-    grid-template-columns: auto auto 1fr auto auto;
-  }
-  .grid-cols-\[auto_auto_auto\] {
-    grid-template-columns: auto auto auto;
-  }
   .grid-cols-\[minmax\(100px\,_1fr\)_min-content\] {
     grid-template-columns: minmax(100px, 1fr) min-content;
   }
   .grid-cols-\[var\(--route-layout-grid-cols\)\] {
     grid-template-columns: var(--route-layout-grid-cols);
   }
-  .grid-rows-1 {
-    grid-template-rows: repeat(1, minmax(0, 1fr));
-  }
-  .grid-rows-\[auto_auto_1fr_auto\] {
-    grid-template-rows: auto auto 1fr auto;
-  }
-  .grid-rows-\[auto_auto_auto\] {
-    grid-template-rows: auto auto auto;
-  }
   .grid-rows-\[var\(--route-layout-grid-rows\)\] {
     grid-template-rows: var(--route-layout-grid-rows);
   }
   .flex-col {
     flex-direction: column;
   }
-  .flex-col-reverse {
-    flex-direction: column-reverse;
-  }
   .flex-row {
     flex-direction: row;
   }
+  .flex-row-reverse {
+    flex-direction: row-reverse;
+  }
   .flex-wrap {
     flex-wrap: wrap;
   }
-  .items-baseline {
-    align-items: baseline;
-  }
   .items-center {
     align-items: center;
   }
@@ -939,12 +836,6 @@
   .items-start {
     align-items: flex-start;
   }
-  .items-stretch {
-    align-items: stretch;
-  }
-  .justify-around {
-    justify-content: space-around;
-  }
   .justify-between {
     justify-content: space-between;
   }
@@ -954,9 +845,6 @@
   .justify-end {
     justify-content: flex-end;
   }
-  .justify-evenly {
-    justify-content: space-evenly;
-  }
   .justify-start {
     justify-content: flex-start;
   }
@@ -1018,15 +906,6 @@
   .gap-y-xxl {
     row-gap: var(--spacing-xxl);
   }
-  .self-end {
-    align-self: flex-end;
-  }
-  .justify-self-center {
-    justify-self: center;
-  }
-  .justify-self-end {
-    justify-self: flex-end;
-  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1295,6 +1174,9 @@
   .object-center {
     object-position: center;
   }
+  .\!p-xs {
+    padding: var(--spacing-xs) !important;
+  }
   .p-l {
     padding: var(--spacing-l);
   }
@@ -1676,9 +1558,6 @@
   .\[--drawer-menu-size\:40px\] {
     --drawer-menu-size: 40px;
   }
-  .\[--drawer-size-closed\:0\] {
-    --drawer-size-closed: 0;
-  }
   .\[--drawer-size-large\:400px\] {
     --drawer-size-large: 400px;
   }
@@ -1773,6 +1652,11 @@
       rotate: 180deg;
     }
   }
+  .group-invalid\/date-field\:outline-serious {
+    &:is(:where(.group\/date-field):where([invalid], [data-invalid], :invalid) *) {
+      outline-color: var(--color-serious);
+    }
+  }
   .group-empty\/input\:invisible {
     &:is(:where(.group\/input):where([data-empty], :empty) *) {
       visibility: hidden;
@@ -1789,8 +1673,8 @@
       --icon-color: var(--color-inverse-light);
     }
   }
-  .group-focus\/menu-item\:fg-inverse-light {
-    &:is(:where(.group\/menu-item):where([data-focused], :focus) *) {
+  .group-focus-visible\/menu-item\:fg-inverse-light {
+    &:is(:where(.group\/menu-item):where([data-focus-visible], :focus-visible) *) {
       color: var(--color-inverse-light);
       --icon-color: var(--color-inverse-light);
     }
@@ -1831,17 +1715,17 @@
       }
     }
   }
-  .group-enabled\/checkbox\:group-focus\/checkbox\:outline-interactive-hover {
+  .group-enabled\/checkbox\:group-focus-visible\/checkbox\:outline-interactive-hover {
     &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
-      &:is(:where(.group\/checkbox):where([data-focused], :focus) *) {
+      &:is(:where(.group\/checkbox):where([data-focus-visible], :focus-visible) *) {
         outline-color: var(--color-interactive-hover);
       }
     }
   }
-  .group-enabled\/checkbox\:group-indeterminate\/checkbox\:group-focus\/checkbox\:outline-interactive-hover {
+  .group-enabled\/checkbox\:group-indeterminate\/checkbox\:group-focus-visible\/checkbox\:outline-interactive-hover {
     &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/checkbox):where([data-indeterminate], :indeterminate) *) {
-        &:is(:where(.group\/checkbox):where([data-focused], :focus) *) {
+        &:is(:where(.group\/checkbox):where([data-focus-visible], :focus-visible) *) {
           outline-color: var(--color-interactive-hover);
         }
       }
@@ -1853,6 +1737,11 @@
       --icon-color: var(--color-default-light);
     }
   }
+  .group-enabled\/combobox-field\:outline-interactive {
+    &:is(:where(.group\/combobox-field):where(:not([disabled], [data-disabled]), :enabled) *) {
+      outline-color: var(--color-interactive);
+    }
+  }
   .group-enabled\/combobox-field\:group-invalid\/combobox-field\:outline-serious {
     &:is(:where(.group\/combobox-field):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/combobox-field):where([invalid], [data-invalid], :invalid) *) {
@@ -1874,9 +1763,9 @@
       }
     }
   }
-  .group-enabled\/options-item\:group-focus\/options-item\:fg-inverse-light {
+  .group-enabled\/options-item\:group-focus-visible\/options-item\:fg-inverse-light {
     &:is(:where(.group\/options-item):where(:not([disabled], [data-disabled]), :enabled) *) {
-      &:is(:where(.group\/options-item):where([data-focused], :focus) *) {
+      &:is(:where(.group\/options-item):where([data-focus-visible], :focus-visible) *) {
         color: var(--color-inverse-light);
         --icon-color: var(--color-inverse-light);
       }
@@ -1889,9 +1778,9 @@
       }
     }
   }
-  .group-enabled\/radio\:group-focus\/radio\:outline-interactive-hover {
+  .group-enabled\/radio\:group-focus-visible\/radio\:outline-interactive-hover {
     &:is(:where(.group\/radio):where(:not([disabled], [data-disabled]), :enabled) *) {
-      &:is(:where(.group\/radio):where([data-focused], :focus) *) {
+      &:is(:where(.group\/radio):where([data-focus-visible], :focus-visible) *) {
         outline-color: var(--color-interactive-hover);
       }
     }
@@ -1910,16 +1799,16 @@
       }
     }
   }
-  .group-enabled\/switch\:group-focus\/switch\:bg-interactive-hover-dark {
+  .group-enabled\/switch\:group-focus-visible\/switch\:bg-interactive-hover-dark {
     &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
-      &:is(:where(.group\/switch):where([data-focused], :focus) *) {
+      &:is(:where(.group\/switch):where([data-focus-visible], :focus-visible) *) {
         background-color: var(--color-interactive-hover-dark);
       }
     }
   }
-  .group-enabled\/switch\:group-focus\/switch\:outline-interactive-hover {
+  .group-enabled\/switch\:group-focus-visible\/switch\:outline-interactive-hover {
     &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
-      &:is(:where(.group\/switch):where([data-focused], :focus) *) {
+      &:is(:where(.group\/switch):where([data-focus-visible], :focus-visible) *) {
         outline-color: var(--color-interactive-hover);
       }
     }
@@ -1989,6 +1878,11 @@
       color: var(--color-disabled);
     }
   }
+  .group-disabled\/date-field\:outline-interactive-disabled {
+    &:is(:where(.group\/date-field):where([disabled], [data-disabled], :disabled) *) {
+      outline-color: var(--color-interactive-disabled);
+    }
+  }
   .group-disabled\/menu-item\:fg-disabled {
     &:is(:where(.group\/menu-item):where([disabled], [data-disabled], :disabled) *) {
       color: var(--color-disabled);
@@ -2061,7 +1955,7 @@
   }
   .group-enabled\/options-item\:group-color-info\/options-item\:fg-default-light {
     &:is(:where(.group\/options-item):where(:not([disabled], [data-disabled]), :enabled) *) {
-      &:is(:where(.group\/options-item):where([data-color~="info"]) *) {
+      &:is(:where(.group\/options-item):where([data-color="info"]) *) {
         color: var(--color-default-light);
         --icon-color: var(--color-default-light);
       }
@@ -2070,17 +1964,17 @@
   .group-enabled\/options-item\:group-hover\/options-item\:group-color-info\/options-item\:fg-inverse-light {
     &:is(:where(.group\/options-item):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/options-item):where([data-hovered], :hover) *) {
-        &:is(:where(.group\/options-item):where([data-color~="info"]) *) {
+        &:is(:where(.group\/options-item):where([data-color="info"]) *) {
           color: var(--color-inverse-light);
           --icon-color: var(--color-inverse-light);
         }
       }
     }
   }
-  .group-enabled\/options-item\:group-focus\/options-item\:group-color-info\/options-item\:fg-inverse-light {
+  .group-enabled\/options-item\:group-focus-visible\/options-item\:group-color-info\/options-item\:fg-inverse-light {
     &:is(:where(.group\/options-item):where(:not([disabled], [data-disabled]), :enabled) *) {
-      &:is(:where(.group\/options-item):where([data-focused], :focus) *) {
-        &:is(:where(.group\/options-item):where([data-color~="info"]) *) {
+      &:is(:where(.group\/options-item):where([data-focus-visible], :focus-visible) *) {
+        &:is(:where(.group\/options-item):where([data-color="info"]) *) {
           color: var(--color-inverse-light);
           --icon-color: var(--color-inverse-light);
         }
@@ -2089,7 +1983,7 @@
   }
   .group-enabled\/options-item\:group-color-serious\/options-item\:fg-serious {
     &:is(:where(.group\/options-item):where(:not([disabled], [data-disabled]), :enabled) *) {
-      &:is(:where(.group\/options-item):where([data-color~="serious"]) *) {
+      &:is(:where(.group\/options-item):where([data-color="serious"]) *) {
         color: var(--color-serious);
         --icon-color: var(--color-serious);
       }
@@ -2098,17 +1992,17 @@
   .group-enabled\/options-item\:group-hover\/options-item\:group-color-serious\/options-item\:fg-inverse-light {
     &:is(:where(.group\/options-item):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/options-item):where([data-hovered], :hover) *) {
-        &:is(:where(.group\/options-item):where([data-color~="serious"]) *) {
+        &:is(:where(.group\/options-item):where([data-color="serious"]) *) {
           color: var(--color-inverse-light);
           --icon-color: var(--color-inverse-light);
         }
       }
     }
   }
-  .group-enabled\/options-item\:group-focus\/options-item\:group-color-serious\/options-item\:fg-inverse-light {
+  .group-enabled\/options-item\:group-focus-visible\/options-item\:group-color-serious\/options-item\:fg-inverse-light {
     &:is(:where(.group\/options-item):where(:not([disabled], [data-disabled]), :enabled) *) {
-      &:is(:where(.group\/options-item):where([data-focused], :focus) *) {
-        &:is(:where(.group\/options-item):where([data-color~="serious"]) *) {
+      &:is(:where(.group\/options-item):where([data-focus-visible], :focus-visible) *) {
+        &:is(:where(.group\/options-item):where([data-color="serious"]) *) {
           color: var(--color-inverse-light);
           --icon-color: var(--color-inverse-light);
         }
@@ -2215,12 +2109,6 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
-  .group-placement-right\/drawer\:-translate-y-1\/8 {
-    &:is(:where(.group\/drawer):where([data-placement~="right"]) *) {
-      --tw-translate-y: calc(calc(1/8 * 100%) * -1);
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
-  }
   .group-placement-right\/drawer\:-translate-y-7\/8 {
     &:is(:where(.group\/drawer):where([data-placement~="right"]) *) {
       --tw-translate-y: calc(calc(7/8 * 100%) * -1);
@@ -2396,6 +2284,91 @@
       border-bottom-left-radius: var(--radius-none);
     }
   }
+  .group-size-large\/dialog\:mt-xl {
+    &:is(:where(.group\/dialog):where([data-size="large"]) *) {
+      margin-top: var(--spacing-xl);
+    }
+  }
+  .group-size-large\/dialog\:mb-m {
+    &:is(:where(.group\/dialog):where([data-size="large"]) *) {
+      margin-bottom: var(--spacing-m);
+    }
+  }
+  .group-size-large\/dialog\:min-w-\[320px\] {
+    &:is(:where(.group\/dialog):where([data-size="large"]) *) {
+      min-width: 320px;
+    }
+  }
+  .group-size-large\/dialog\:gap-l {
+    &:is(:where(.group\/dialog):where([data-size="large"]) *) {
+      gap: var(--spacing-l);
+    }
+  }
+  .group-size-large\/dialog\:rounded-large {
+    &:is(:where(.group\/dialog):where([data-size="large"]) *) {
+      border-radius: var(--radius-large);
+    }
+  }
+  .group-size-large\/dialog\:rounded-medium {
+    &:is(:where(.group\/dialog):where([data-size="large"]) *) {
+      border-radius: var(--radius-medium);
+    }
+  }
+  .group-size-large\/dialog\:p-xl {
+    &:is(:where(.group\/dialog):where([data-size="large"]) *) {
+      padding: var(--spacing-xl);
+    }
+  }
+  .group-size-large\/dialog\:text-header-l {
+    &:is(:where(.group\/dialog):where([data-size="large"]) *) {
+      font-size: var(--typography-header-l-size);
+      font-weight: 500;
+      letter-spacing: var(--typography-header-l-spacing);
+      line-height: var(--typography-header-l-height);
+    }
+  }
+  .group-placement-left\/drawer\:group-size-large\/drawer\:w-\[var\(--drawer-size-large\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="left"]) *) {
+      &:is(:where(.group\/drawer):where([data-size="large"]) *) {
+        width: var(--drawer-size-large);
+      }
+    }
+  }
+  .group-placement-left\/drawer\:group-size-large\/drawer\:w-\[var\(--drawer-size-large\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="left"]) *) {
+      &:is(:where(.group\/drawer):where([data-size="large"]) *) {
+        width: var(--drawer-size-large);
+      }
+    }
+  }
+  .group-placement-right\/drawer\:group-size-large\/drawer\:w-\[var\(--drawer-size-large\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="right"]) *) {
+      &:is(:where(.group\/drawer):where([data-size="large"]) *) {
+        width: var(--drawer-size-large);
+      }
+    }
+  }
+  .group-placement-right\/drawer\:group-size-large\/drawer\:w-\[var\(--drawer-size-large\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="right"]) *) {
+      &:is(:where(.group\/drawer):where([data-size="large"]) *) {
+        width: var(--drawer-size-large);
+      }
+    }
+  }
+  .group-placement-top\/drawer\:group-size-large\/drawer\:h-\[var\(--drawer-size-large\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="top"]) *) {
+      &:is(:where(.group\/drawer):where([data-size="large"]) *) {
+        height: var(--drawer-size-large);
+      }
+    }
+  }
+  .group-placement-bottom\/drawer\:group-size-large\/drawer\:h-\[var\(--drawer-size-large\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="bottom"]) *) {
+      &:is(:where(.group\/drawer):where([data-size="large"]) *) {
+        height: var(--drawer-size-large);
+      }
+    }
+  }
   .group-size-large\/options\:pt-s {
     &:is(:where(.group\/options):where([data-size="large"]) *) {
       padding-top: var(--spacing-s);
@@ -2406,6 +2379,16 @@
       padding-bottom: var(--spacing-s);
     }
   }
+  .group-size-medium\/combobox-field\:max-w-\[400px\] {
+    &:is(:where(.group\/combobox-field):where([data-size="medium"]) *) {
+      max-width: 400px;
+    }
+  }
+  .group-size-medium\/combobox-field\:min-w-\[160px\] {
+    &:is(:where(.group\/combobox-field):where([data-size="medium"]) *) {
+      min-width: 160px;
+    }
+  }
   .group-size-medium\/combobox-field\:text-body-s {
     &:is(:where(.group\/combobox-field):where([data-size="medium"]) *) {
       font-size: var(--typography-body-s-size);
@@ -2414,6 +2397,56 @@
       line-height: var(--typography-body-s-height);
     }
   }
+  .group-size-medium\/date-field\:text-body-s {
+    &:is(:where(.group\/date-field):where([data-size="medium"]) *) {
+      font-size: var(--typography-body-s-size);
+      font-weight: 400;
+      letter-spacing: var(--typography-body-s-spacing);
+      line-height: var(--typography-body-s-height);
+    }
+  }
+  .group-placement-left\/drawer\:group-size-medium\/drawer\:w-\[var\(--drawer-size-medium\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="left"]) *) {
+      &:is(:where(.group\/drawer):where([data-size="medium"]) *) {
+        width: var(--drawer-size-medium);
+      }
+    }
+  }
+  .group-placement-left\/drawer\:group-size-medium\/drawer\:w-\[var\(--drawer-size-medium\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="left"]) *) {
+      &:is(:where(.group\/drawer):where([data-size="medium"]) *) {
+        width: var(--drawer-size-medium);
+      }
+    }
+  }
+  .group-placement-right\/drawer\:group-size-medium\/drawer\:w-\[var\(--drawer-size-medium\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="right"]) *) {
+      &:is(:where(.group\/drawer):where([data-size="medium"]) *) {
+        width: var(--drawer-size-medium);
+      }
+    }
+  }
+  .group-placement-right\/drawer\:group-size-medium\/drawer\:w-\[var\(--drawer-size-medium\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="right"]) *) {
+      &:is(:where(.group\/drawer):where([data-size="medium"]) *) {
+        width: var(--drawer-size-medium);
+      }
+    }
+  }
+  .group-placement-top\/drawer\:group-size-medium\/drawer\:h-\[var\(--drawer-size-medium\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="top"]) *) {
+      &:is(:where(.group\/drawer):where([data-size="medium"]) *) {
+        height: var(--drawer-size-medium);
+      }
+    }
+  }
+  .group-placement-bottom\/drawer\:group-size-medium\/drawer\:h-\[var\(--drawer-size-medium\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="bottom"]) *) {
+      &:is(:where(.group\/drawer):where([data-size="medium"]) *) {
+        height: var(--drawer-size-medium);
+      }
+    }
+  }
   .group-size-medium\/input\:mr-xs {
     &:is(:where(.group\/input):where([data-size="medium"]) *) {
       margin-right: var(--spacing-xs);
@@ -2434,11 +2467,6 @@
       max-width: 400px;
     }
   }
-  .group-size-medium\/input\:min-w-\[80px\] {
-    &:is(:where(.group\/input):where([data-size="medium"]) *) {
-      min-width: 80px;
-    }
-  }
   .group-size-medium\/input\:min-w-\[160px\] {
     &:is(:where(.group\/input):where([data-size="medium"]) *) {
       min-width: 160px;
@@ -2462,6 +2490,14 @@
       gap: var(--spacing-s);
     }
   }
+  .group-size-medium\/select-field\:text-body-s {
+    &:is(:where(.group\/select-field):where([data-size="medium"]) *) {
+      font-size: var(--typography-body-s-size);
+      font-weight: 400;
+      letter-spacing: var(--typography-body-s-spacing);
+      line-height: var(--typography-body-s-height);
+    }
+  }
   .group-size-medium\/text-area-field\:text-body-s {
     &:is(:where(.group\/text-area-field):where([data-size="medium"]) *) {
       font-size: var(--typography-body-s-size);
@@ -2470,6 +2506,16 @@
       line-height: var(--typography-body-s-height);
     }
   }
+  .group-size-small\/combobox-field\:max-w-\[200px\] {
+    &:is(:where(.group\/combobox-field):where([data-size="small"]) *) {
+      max-width: 200px;
+    }
+  }
+  .group-size-small\/combobox-field\:min-w-\[80px\] {
+    &:is(:where(.group\/combobox-field):where([data-size="small"]) *) {
+      min-width: 80px;
+    }
+  }
   .group-size-small\/combobox-field\:text-body-xs {
     &:is(:where(.group\/combobox-field):where([data-size="small"]) *) {
       font-size: var(--typography-body-xs-size);
@@ -2478,6 +2524,104 @@
       line-height: var(--typography-body-xs-height);
     }
   }
+  .group-size-small\/date-field\:text-body-xs {
+    &:is(:where(.group\/date-field):where([data-size="small"]) *) {
+      font-size: var(--typography-body-xs-size);
+      font-weight: 400;
+      letter-spacing: var(--typography-body-xs-spacing);
+      line-height: var(--typography-body-xs-height);
+    }
+  }
+  .group-size-small\/dialog\:mt-l {
+    &:is(:where(.group\/dialog):where([data-size="small"]) *) {
+      margin-top: var(--spacing-l);
+    }
+  }
+  .group-size-small\/dialog\:mb-s {
+    &:is(:where(.group\/dialog):where([data-size="small"]) *) {
+      margin-bottom: var(--spacing-s);
+    }
+  }
+  .group-size-small\/dialog\:w-\[280px\] {
+    &:is(:where(.group\/dialog):where([data-size="small"]) *) {
+      width: 280px;
+    }
+  }
+  .group-size-small\/dialog\:w-\[280px\] {
+    &:is(:where(.group\/dialog):where([data-size="small"]) *) {
+      width: 280px;
+    }
+  }
+  .group-size-small\/dialog\:max-w-\[720px\] {
+    &:is(:where(.group\/dialog):where([data-size="small"]) *) {
+      max-width: 720px;
+    }
+  }
+  .group-size-small\/dialog\:gap-xs {
+    &:is(:where(.group\/dialog):where([data-size="small"]) *) {
+      gap: var(--spacing-xs);
+    }
+  }
+  .group-size-small\/dialog\:rounded-medium {
+    &:is(:where(.group\/dialog):where([data-size="small"]) *) {
+      border-radius: var(--radius-medium);
+    }
+  }
+  .group-size-small\/dialog\:p-l {
+    &:is(:where(.group\/dialog):where([data-size="small"]) *) {
+      padding: var(--spacing-l);
+    }
+  }
+  .group-size-small\/dialog\:text-header-m {
+    &:is(:where(.group\/dialog):where([data-size="small"]) *) {
+      font-size: var(--typography-header-m-size);
+      font-weight: 500;
+      letter-spacing: var(--typography-header-m-spacing);
+      line-height: var(--typography-header-m-height);
+    }
+  }
+  .group-placement-left\/drawer\:group-size-small\/drawer\:w-\[var\(--drawer-size-small\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="left"]) *) {
+      &:is(:where(.group\/drawer):where([data-size="small"]) *) {
+        width: var(--drawer-size-small);
+      }
+    }
+  }
+  .group-placement-left\/drawer\:group-size-small\/drawer\:w-\[var\(--drawer-size-small\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="left"]) *) {
+      &:is(:where(.group\/drawer):where([data-size="small"]) *) {
+        width: var(--drawer-size-small);
+      }
+    }
+  }
+  .group-placement-right\/drawer\:group-size-small\/drawer\:w-\[var\(--drawer-size-small\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="right"]) *) {
+      &:is(:where(.group\/drawer):where([data-size="small"]) *) {
+        width: var(--drawer-size-small);
+      }
+    }
+  }
+  .group-placement-right\/drawer\:group-size-small\/drawer\:w-\[var\(--drawer-size-small\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="right"]) *) {
+      &:is(:where(.group\/drawer):where([data-size="small"]) *) {
+        width: var(--drawer-size-small);
+      }
+    }
+  }
+  .group-placement-top\/drawer\:group-size-small\/drawer\:h-\[var\(--drawer-size-small\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="top"]) *) {
+      &:is(:where(.group\/drawer):where([data-size="small"]) *) {
+        height: var(--drawer-size-small);
+      }
+    }
+  }
+  .group-placement-bottom\/drawer\:group-size-small\/drawer\:h-\[var\(--drawer-size-small\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="bottom"]) *) {
+      &:is(:where(.group\/drawer):where([data-size="small"]) *) {
+        height: var(--drawer-size-small);
+      }
+    }
+  }
   .group-size-small\/input\:mr-xxs {
     &:is(:where(.group\/input):where([data-size="small"]) *) {
       margin-right: var(--spacing-xxs);
@@ -2498,6 +2642,11 @@
       max-width: 200px;
     }
   }
+  .group-size-small\/input\:min-w-\[80px\] {
+    &:is(:where(.group\/input):where([data-size="small"]) *) {
+      min-width: 80px;
+    }
+  }
   .group-size-small\/input\:min-w-\[calc\(2ch\+\(\(var\(--length\)-1\)\*var\(--typography-body-xs-spacing\)\)\+\(var\(--spacing-s\)\*2\)\+var\(--room\)\)\] {
     &:is(:where(.group\/input):where([data-size="small"]) *) {
       min-width: calc(2ch + ((var(--length) - 1) * var(--typography-body-xs-spacing)) + (var(--spacing-s) * 2) + var(--room));
@@ -2526,6 +2675,14 @@
       gap: var(--spacing-xs);
     }
   }
+  .group-size-small\/select-field\:text-body-xs {
+    &:is(:where(.group\/select-field):where([data-size="small"]) *) {
+      font-size: var(--typography-body-xs-size);
+      font-weight: 400;
+      letter-spacing: var(--typography-body-xs-spacing);
+      line-height: var(--typography-body-xs-height);
+    }
+  }
   .group-size-small\/text-area-field\:text-body-xs {
     &:is(:where(.group\/text-area-field):where([data-size="small"]) *) {
       font-size: var(--typography-body-xs-size);
@@ -2549,6 +2706,21 @@
       left: var(--spacing-xs);
     }
   }
+  .group-layout-grid\/slider\:col-start-1 {
+    &:is(:where(.group\/slider):where([data-layout="grid"]) *) {
+      grid-column-start: 1;
+    }
+  }
+  .group-layout-grid\/slider\:col-start-3 {
+    &:is(:where(.group\/slider):where([data-layout="grid"]) *) {
+      grid-column-start: 3;
+    }
+  }
+  .group-layout-grid\/slider\:row-start-1 {
+    &:is(:where(.group\/slider):where([data-layout="grid"]) *) {
+      grid-row-start: 1;
+    }
+  }
   .group-layout-stack\/hero\:mb-l {
     &:is(:where(.group\/hero):where([data-layout="stack"]) *) {
       margin-bottom: var(--spacing-l);
@@ -2628,38 +2800,248 @@
       flex-basis: calc(1/3 * 100%);
     }
   }
-  .group-orientation-vertical\:border {
-    &:is(:where(.group):where([data-orientation="vertical"]) *) {
-      border-style: var(--tw-border-style);
-      border-width: 1px;
+  .group-orientation-horizontal\/slider\:top-1\/2 {
+    &:is(:where(.group\/slider):where([data-orientation="horizontal"]) *) {
+      top: calc(1/2 * 100%);
     }
   }
-  .group-orientation-vertical\:border-interactive-hover {
-    &:is(:where(.group):where([data-orientation="vertical"]) *) {
-      border-color: var(--color-interactive-hover);
+  .group-orientation-horizontal\/slider\:right-\[calc\(100\%-attr\(data-end_\%\)\*100\)\] {
+    &:is(:where(.group\/slider):where([data-orientation="horizontal"]) *) {
+      right: calc(100% - attr(data-end %) * 100);
     }
   }
-  .group-orientation-vertical\:border-transparent {
-    &:is(:where(.group):where([data-orientation="vertical"]) *) {
-      border-color: transparent;
+  .group-orientation-horizontal\/slider\:left-\[calc\(attr\(data-start_\%\)\*100\)\] {
+    &:is(:where(.group\/slider):where([data-orientation="horizontal"]) *) {
+      left: calc(attr(data-start %) * 100);
     }
   }
-  .group-orientation-vertical\:pt-0 {
-    &:is(:where(.group):where([data-orientation="vertical"]) *) {
-      padding-top: var(--spacing-0);
+  .group-orientation-horizontal\/slider\:order-2 {
+    &:is(:where(.group\/slider):where([data-orientation="horizontal"]) *) {
+      order: 2;
     }
   }
-  .group-expanded\/accordion\:rotate-180 {
-    &:is(:where(.group\/accordion):where([expanded], [data-expanded]) *) {
-      rotate: 180deg;
+  .group-orientation-horizontal\/slider\:h-\[20px\] {
+    &:is(:where(.group\/slider):where([data-orientation="horizontal"]) *) {
+      height: 20px;
     }
   }
-  .group-selected\:rotate-180 {
-    &:is(:where(.group):where([data-selected], :checked) *) {
-      rotate: 180deg;
+  .group-orientation-horizontal\/slider\:h-xxs {
+    &:is(:where(.group\/slider):where([data-orientation="horizontal"]) *) {
+      height: var(--spacing-xxs);
     }
   }
-  .group-enabled\/checkbox\:group-selected\/checkbox\:bg-highlight {
+  .group-orientation-horizontal\/slider\:w-full {
+    &:is(:where(.group\/slider):where([data-orientation="horizontal"]) *) {
+      width: 100%;
+    }
+  }
+  .group-orientation-horizontal\/slider\:-translate-y-1\/2 {
+    &:is(:where(.group\/slider):where([data-orientation="horizontal"]) *) {
+      --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .group-orientation-horizontal\/slider\:flex-row {
+    &:is(:where(.group\/slider):where([data-orientation="horizontal"]) *) {
+      flex-direction: row;
+    }
+  }
+  .group-orientation-horizontal\/slider\:group-layout-grid\/slider\:col-span-3 {
+    &:is(:where(.group\/slider):where([data-orientation="horizontal"]) *) {
+      &:is(:where(.group\/slider):where([data-layout="grid"]) *) {
+        grid-column: span 3 / span 3;
+      }
+    }
+  }
+  .group-orientation-horizontal\/slider\:group-layout-grid\/slider\:col-start-1 {
+    &:is(:where(.group\/slider):where([data-orientation="horizontal"]) *) {
+      &:is(:where(.group\/slider):where([data-layout="grid"]) *) {
+        grid-column-start: 1;
+      }
+    }
+  }
+  .group-orientation-horizontal\/slider\:group-layout-grid\/slider\:col-start-3 {
+    &:is(:where(.group\/slider):where([data-orientation="horizontal"]) *) {
+      &:is(:where(.group\/slider):where([data-layout="grid"]) *) {
+        grid-column-start: 3;
+      }
+    }
+  }
+  .group-orientation-horizontal\/slider\:group-layout-grid\/slider\:row-start-2 {
+    &:is(:where(.group\/slider):where([data-orientation="horizontal"]) *) {
+      &:is(:where(.group\/slider):where([data-layout="grid"]) *) {
+        grid-row-start: 2;
+      }
+    }
+  }
+  .group-orientation-horizontal\/slider\:group-layout-grid\/slider\:row-start-3 {
+    &:is(:where(.group\/slider):where([data-orientation="horizontal"]) *) {
+      &:is(:where(.group\/slider):where([data-layout="grid"]) *) {
+        grid-row-start: 3;
+      }
+    }
+  }
+  .group-orientation-horizontal\/slider\:group-layout-grid\/slider\:justify-self-end {
+    &:is(:where(.group\/slider):where([data-orientation="horizontal"]) *) {
+      &:is(:where(.group\/slider):where([data-layout="grid"]) *) {
+        justify-self: flex-end;
+      }
+    }
+  }
+  .group-orientation-vertical\:border {
+    &:is(:where(.group):where([data-orientation="vertical"]) *) {
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+    }
+  }
+  .group-orientation-vertical\:border-interactive-hover {
+    &:is(:where(.group):where([data-orientation="vertical"]) *) {
+      border-color: var(--color-interactive-hover);
+    }
+  }
+  .group-orientation-vertical\:border-transparent {
+    &:is(:where(.group):where([data-orientation="vertical"]) *) {
+      border-color: transparent;
+    }
+  }
+  .group-orientation-vertical\:pt-0 {
+    &:is(:where(.group):where([data-orientation="vertical"]) *) {
+      padding-top: var(--spacing-0);
+    }
+  }
+  .group-orientation-vertical\/slider\:top-\[calc\(100\%-attr\(data-end_\%\)\*100\)\] {
+    &:is(:where(.group\/slider):where([data-orientation="vertical"]) *) {
+      top: calc(100% - attr(data-end %) * 100);
+    }
+  }
+  .group-orientation-vertical\/slider\:bottom-\[calc\(attr\(data-start_\%\)\*100\)\] {
+    &:is(:where(.group\/slider):where([data-orientation="vertical"]) *) {
+      bottom: calc(attr(data-start %) * 100);
+    }
+  }
+  .group-orientation-vertical\/slider\:left-1\/2 {
+    &:is(:where(.group\/slider):where([data-orientation="vertical"]) *) {
+      left: calc(1/2 * 100%);
+    }
+  }
+  .group-orientation-vertical\/slider\:order-2 {
+    &:is(:where(.group\/slider):where([data-orientation="vertical"]) *) {
+      order: 2;
+    }
+  }
+  .group-orientation-vertical\/slider\:order-4 {
+    &:is(:where(.group\/slider):where([data-orientation="vertical"]) *) {
+      order: 4;
+    }
+  }
+  .group-orientation-vertical\/slider\:col-start-1 {
+    &:is(:where(.group\/slider):where([data-orientation="vertical"]) *) {
+      grid-column-start: 1;
+    }
+  }
+  .group-orientation-vertical\/slider\:row-start-4 {
+    &:is(:where(.group\/slider):where([data-orientation="vertical"]) *) {
+      grid-row-start: 4;
+    }
+  }
+  .group-orientation-vertical\/slider\:h-full {
+    &:is(:where(.group\/slider):where([data-orientation="vertical"]) *) {
+      height: 100%;
+    }
+  }
+  .group-orientation-vertical\/slider\:w-\[20px\] {
+    &:is(:where(.group\/slider):where([data-orientation="vertical"]) *) {
+      width: 20px;
+    }
+  }
+  .group-orientation-vertical\/slider\:w-\[20px\] {
+    &:is(:where(.group\/slider):where([data-orientation="vertical"]) *) {
+      width: 20px;
+    }
+  }
+  .group-orientation-vertical\/slider\:w-xxs {
+    &:is(:where(.group\/slider):where([data-orientation="vertical"]) *) {
+      width: var(--spacing-xxs);
+    }
+  }
+  .group-orientation-vertical\/slider\:-translate-x-1\/2 {
+    &:is(:where(.group\/slider):where([data-orientation="vertical"]) *) {
+      --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .group-orientation-vertical\/slider\:flex-col-reverse {
+    &:is(:where(.group\/slider):where([data-orientation="vertical"]) *) {
+      flex-direction: column-reverse;
+    }
+  }
+  .group-orientation-vertical\/slider\:group-layout-grid\/slider\:col-span-2 {
+    &:is(:where(.group\/slider):where([data-orientation="vertical"]) *) {
+      &:is(:where(.group\/slider):where([data-layout="grid"]) *) {
+        grid-column: span 2 / span 2;
+      }
+    }
+  }
+  .group-orientation-vertical\/slider\:group-layout-grid\/slider\:col-start-1 {
+    &:is(:where(.group\/slider):where([data-orientation="vertical"]) *) {
+      &:is(:where(.group\/slider):where([data-layout="grid"]) *) {
+        grid-column-start: 1;
+      }
+    }
+  }
+  .group-orientation-vertical\/slider\:group-layout-grid\/slider\:col-start-2 {
+    &:is(:where(.group\/slider):where([data-orientation="vertical"]) *) {
+      &:is(:where(.group\/slider):where([data-layout="grid"]) *) {
+        grid-column-start: 2;
+      }
+    }
+  }
+  .group-orientation-vertical\/slider\:group-layout-grid\/slider\:row-span-3 {
+    &:is(:where(.group\/slider):where([data-orientation="vertical"]) *) {
+      &:is(:where(.group\/slider):where([data-layout="grid"]) *) {
+        grid-row: span 3 / span 3;
+      }
+    }
+  }
+  .group-orientation-vertical\/slider\:group-layout-grid\/slider\:row-start-2 {
+    &:is(:where(.group\/slider):where([data-orientation="vertical"]) *) {
+      &:is(:where(.group\/slider):where([data-layout="grid"]) *) {
+        grid-row-start: 2;
+      }
+    }
+  }
+  .group-orientation-vertical\/slider\:group-layout-grid\/slider\:row-start-4 {
+    &:is(:where(.group\/slider):where([data-orientation="vertical"]) *) {
+      &:is(:where(.group\/slider):where([data-layout="grid"]) *) {
+        grid-row-start: 4;
+      }
+    }
+  }
+  .group-orientation-vertical\/slider\:group-layout-grid\/slider\:self-end {
+    &:is(:where(.group\/slider):where([data-orientation="vertical"]) *) {
+      &:is(:where(.group\/slider):where([data-layout="grid"]) *) {
+        align-self: flex-end;
+      }
+    }
+  }
+  .group-orientation-vertical\/slider\:group-layout-grid\/slider\:justify-self-end {
+    &:is(:where(.group\/slider):where([data-orientation="vertical"]) *) {
+      &:is(:where(.group\/slider):where([data-layout="grid"]) *) {
+        justify-self: flex-end;
+      }
+    }
+  }
+  .group-expanded\/accordion\:rotate-180 {
+    &:is(:where(.group\/accordion):where([expanded], [data-expanded]) *) {
+      rotate: 180deg;
+    }
+  }
+  .group-selected\:rotate-180 {
+    &:is(:where(.group):where([data-selected], :checked) *) {
+      rotate: 180deg;
+    }
+  }
+  .group-enabled\/checkbox\:group-selected\/checkbox\:bg-highlight {
     &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/checkbox):where([data-selected], :checked) *) {
         background-color: var(--color-highlight);
@@ -2682,10 +3064,10 @@
       }
     }
   }
-  .group-enabled\/checkbox\:group-selected\/checkbox\:group-focus\/checkbox\:outline-interactive-hover {
+  .group-enabled\/checkbox\:group-selected\/checkbox\:group-focus-visible\/checkbox\:outline-interactive-hover {
     &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/checkbox):where([data-selected], :checked) *) {
-        &:is(:where(.group\/checkbox):where([data-focused], :focus) *) {
+        &:is(:where(.group\/checkbox):where([data-focus-visible], :focus-visible) *) {
           outline-color: var(--color-interactive-hover);
         }
       }
@@ -2722,10 +3104,10 @@
       }
     }
   }
-  .group-enabled\/radio\:group-selected\/radio\:group-focus\/radio\:outline-interactive-hover {
+  .group-enabled\/radio\:group-selected\/radio\:group-focus-visible\/radio\:outline-interactive-hover {
     &:is(:where(.group\/radio):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/radio):where([data-selected], :checked) *) {
-        &:is(:where(.group\/radio):where([data-focused], :focus) *) {
+        &:is(:where(.group\/radio):where([data-focus-visible], :focus-visible) *) {
           outline-color: var(--color-interactive-hover);
         }
       }
@@ -2756,19 +3138,19 @@
       }
     }
   }
-  .group-enabled\/switch\:group-selected\/switch\:group-focus\/switch\:bg-highlight-subtle {
+  .group-enabled\/switch\:group-selected\/switch\:group-focus-visible\/switch\:bg-highlight-subtle {
     &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/switch):where([data-selected], :checked) *) {
-        &:is(:where(.group\/switch):where([data-focused], :focus) *) {
+        &:is(:where(.group\/switch):where([data-focus-visible], :focus-visible) *) {
           background-color: var(--color-highlight-subtle);
         }
       }
     }
   }
-  .group-enabled\/switch\:group-selected\/switch\:group-focus\/switch\:outline-interactive-hover {
+  .group-enabled\/switch\:group-selected\/switch\:group-focus-visible\/switch\:outline-interactive-hover {
     &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/switch):where([data-selected], :checked) *) {
-        &:is(:where(.group\/switch):where([data-focused], :focus) *) {
+        &:is(:where(.group\/switch):where([data-focus-visible], :focus-visible) *) {
           outline-color: var(--color-interactive-hover);
         }
       }
@@ -2787,6 +3169,13 @@
       }
     }
   }
+  .group-disabled\/date-field\:placeholder\:text-disabled {
+    &:is(:where(.group\/date-field):where([disabled], [data-disabled], :disabled) *) {
+      &::placeholder {
+        color: var(--color-disabled);
+      }
+    }
+  }
   .group-disabled\/text-area-field\:placeholder\:text-disabled {
     &:is(:where(.group\/text-area-field):where([disabled], [data-disabled], :disabled) *) {
       &::placeholder {
@@ -2842,9 +3231,9 @@
       }
     }
   }
-  .group-enabled\/switch\:group-focus\/switch\:before\:bg-interactive-hover {
+  .group-enabled\/switch\:group-focus-visible\/switch\:before\:bg-interactive-hover {
     &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
-      &:is(:where(.group\/switch):where([data-focused], :focus) *) {
+      &:is(:where(.group\/switch):where([data-focus-visible], :focus-visible) *) {
         &::before {
           content: var(--tw-content);
           background-color: var(--color-interactive-hover);
@@ -2918,10 +3307,10 @@
       }
     }
   }
-  .group-enabled\/switch\:group-selected\/switch\:group-focus\/switch\:before\:bg-highlight {
+  .group-enabled\/switch\:group-selected\/switch\:group-focus-visible\/switch\:before\:bg-highlight {
     &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/switch):where([data-selected], :checked) *) {
-        &:is(:where(.group\/switch):where([data-focused], :focus) *) {
+        &:is(:where(.group\/switch):where([data-focus-visible], :focus-visible) *) {
           &::before {
             content: var(--tw-content);
             background-color: var(--color-highlight);
@@ -2930,25 +3319,9 @@
       }
     }
   }
-  .open\:bg-highlight-bold {
-    &:where([open], [data-open], :open) {
-      background-color: var(--color-highlight-bold);
-    }
-  }
-  .open\:bg-serious-bold {
-    &:where([open], [data-open], :open) {
-      background-color: var(--color-serious-bold);
-    }
-  }
-  .open\:fg-inverse-light {
-    &:where([open], [data-open], :open) {
-      color: var(--color-inverse-light);
-      --icon-color: var(--color-inverse-light);
-    }
-  }
-  .invalid\:outline-serious {
-    &:where([invalid], [data-invalid], :invalid) {
-      outline-color: var(--color-serious);
+  .placeholder-shown\:text-default-dark {
+    &:where([data-placeholder], :placeholder-shown) {
+      color: var(--color-default-dark);
     }
   }
   .empty\:hidden {
@@ -2967,40 +3340,11 @@
       padding-inline: var(--spacing-none);
     }
   }
-  .focus-within\:outline-highlight {
-    &:where([data-focus-within], :focus-within) {
-      outline-color: var(--color-highlight);
-    }
-  }
-  .group-enabled\/accordion\:focus-within\:bg-interactive-hover-dark {
-    &:is(:where(.group\/accordion):where(:not([disabled], [data-disabled]), :enabled) *) {
-      &:where([data-focus-within], :focus-within) {
-        background-color: var(--color-interactive-hover-dark);
-      }
-    }
-  }
-  .group-enabled\/combobox-field\:focus-within\:outline-highlight {
-    &:is(:where(.group\/combobox-field):where(:not([disabled], [data-disabled]), :enabled) *) {
-      &:where([data-focus-within], :focus-within) {
-        outline-color: var(--color-highlight);
-      }
-    }
-  }
   .hover\:\!bg-transparent {
     &:where([data-hovered], :hover) {
       background-color: transparent !important;
     }
   }
-  .hover\:bg-highlight-bold {
-    &:where([data-hovered], :hover) {
-      background-color: var(--color-highlight-bold);
-    }
-  }
-  .hover\:bg-serious-bold {
-    &:where([data-hovered], :hover) {
-      background-color: var(--color-serious-bold);
-    }
-  }
   .hover\:fg-default-light {
     &:where([data-hovered], :hover) {
       color: var(--color-default-light);
@@ -3013,12 +3357,6 @@
       --icon-color: var(--color-interactive-hover);
     }
   }
-  .hover\:fg-inverse-light {
-    &:where([data-hovered], :hover) {
-      color: var(--color-inverse-light);
-      --icon-color: var(--color-inverse-light);
-    }
-  }
   .hover\:outline-4 {
     &:where([data-hovered], :hover) {
       outline-style: var(--tw-outline-style);
@@ -3051,64 +3389,48 @@
       }
     }
   }
-  .focus\:bg-highlight {
-    &:where([data-focused], :focus) {
-      background-color: var(--color-highlight);
-    }
-  }
-  .focus\:bg-highlight-bold {
-    &:where([data-focused], :focus) {
-      background-color: var(--color-highlight-bold);
-    }
-  }
-  .focus\:bg-serious-bold {
-    &:where([data-focused], :focus) {
-      background-color: var(--color-serious-bold);
-    }
-  }
   .focus\:fg-default-light {
     &:where([data-focused], :focus) {
       color: var(--color-default-light);
       --icon-color: var(--color-default-light);
     }
   }
-  .focus\:fg-interactive-hover {
-    &:where([data-focused], :focus) {
+  .focus-visible\:bg-highlight {
+    &:where([data-focus-visible], :focus-visible) {
+      background-color: var(--color-highlight);
+    }
+  }
+  .focus-visible\:fg-interactive-hover {
+    &:where([data-focus-visible], :focus-visible) {
       color: var(--color-interactive-hover);
       --icon-color: var(--color-interactive-hover);
     }
   }
-  .focus\:fg-inverse-light {
-    &:where([data-focused], :focus) {
+  .focus-visible\:text-inverse-light {
+    &:where([data-focus-visible], :focus-visible) {
       color: var(--color-inverse-light);
-      --icon-color: var(--color-inverse-light);
     }
   }
-  .focus\:text-inverse-light {
-    &:where([data-focused], :focus) {
-      color: var(--color-inverse-light);
-    }
-  }
-  .focus\:outline-4 {
-    &:where([data-focused], :focus) {
+  .focus-visible\:outline-4 {
+    &:where([data-focus-visible], :focus-visible) {
       outline-style: var(--tw-outline-style);
       outline-width: 4px;
     }
   }
-  .focus\:outline-interactive-hover {
-    &:where([data-focused], :focus) {
+  .focus-visible\:outline-interactive-hover {
+    &:where([data-focus-visible], :focus-visible) {
       outline-color: var(--color-interactive-hover);
     }
   }
-  .focus\:outline-none {
-    &:where([data-focused], :focus) {
+  .focus-visible\:outline-none {
+    &:where([data-focus-visible], :focus-visible) {
       --tw-outline-style: none;
       outline-style: none;
     }
   }
-  .group-enabled\/text-area-field\:focus\:outline-highlight {
+  .group-enabled\/text-area-field\:focus-visible\:outline-highlight {
     &:is(:where(.group\/text-area-field):where(:not([disabled], [data-disabled]), :enabled) *) {
-      &:where([data-focused], :focus) {
+      &:where([data-focus-visible], :focus-visible) {
         outline-color: var(--color-highlight);
       }
     }
@@ -3118,355 +3440,679 @@
       cursor: pointer;
     }
   }
-  .enabled\:bg-critical {
+  .enabled\:bg-transparent {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      background-color: var(--color-critical);
+      background-color: transparent;
     }
   }
-  .enabled\:bg-critical-subtle {
+  .enabled\:fg-default-light {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      background-color: var(--color-critical-subtle);
+      color: var(--color-default-light);
+      --icon-color: var(--color-default-light);
     }
   }
-  .enabled\:bg-interactive-default {
+  .enabled\:fg-interactive {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      background-color: var(--color-interactive-default);
+      color: var(--color-interactive);
+      --icon-color: var(--color-interactive);
     }
   }
-  .enabled\:bg-serious {
+  .enabled\:group-invalid\/input\:outline-serious {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      background-color: var(--color-serious);
+      &:is(:where(.group\/input):where([invalid], [data-invalid], :invalid) *) {
+        outline-color: var(--color-serious);
+      }
+    }
+  }
+  .group-invalid\/select-field\:enabled\:outline-serious {
+    &:is(:where(.group\/select-field):where([invalid], [data-invalid], :invalid) *) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        outline-color: var(--color-serious);
+      }
     }
   }
-  .enabled\:bg-serious-subtle {
+  .enabled\:group-hover\/input\:outline-interactive-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      background-color: var(--color-serious-subtle);
+      &:is(:where(.group\/input):where([data-hovered], :hover) *) {
+        outline-color: var(--color-interactive-hover);
+      }
     }
   }
-  .enabled\:bg-surface-default {
+  .group-focus-visible\/select-field\:enabled\:outline-highlight-bold {
+    &:is(:where(.group\/select-field):where([data-focus-visible], :focus-visible) *) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        outline-color: var(--color-highlight-bold);
+      }
+    }
+  }
+  .enabled\:group-focus-visible-within\/input\:outline-highlight {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      background-color: var(--color-surface-default);
+      &:is(:where(.group\/input):where(:has([data-focus-visible], :focus-visible)) *) {
+        outline-color: var(--color-highlight);
+      }
     }
   }
-  .enabled\:bg-transparent {
+  .enabled\:hover\:bg-transparent {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      background-color: transparent;
+      &:where([data-hovered], :hover) {
+        background-color: transparent;
+      }
     }
   }
-  .enabled\:fg-critical {
+  .enabled\:hover\:fg-interactive-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      color: var(--color-critical);
-      --icon-color: var(--color-critical);
+      &:where([data-hovered], :hover) {
+        color: var(--color-interactive-hover);
+        --icon-color: var(--color-interactive-hover);
+      }
     }
   }
-  .enabled\:fg-default-light {
+  .enabled\:hover\:fg-inverse-light {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      color: var(--color-default-light);
-      --icon-color: var(--color-default-light);
+      &:where([data-hovered], :hover) {
+        color: var(--color-inverse-light);
+        --icon-color: var(--color-inverse-light);
+      }
     }
   }
-  .enabled\:fg-interactive {
+  .enabled\:hover\:outline-interactive-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      color: var(--color-interactive);
-      --icon-color: var(--color-interactive);
+      &:where([data-hovered], :hover) {
+        outline-color: var(--color-interactive-hover);
+      }
     }
   }
-  .enabled\:fg-inverse-light {
+  .enabled\:focus-visible\:bg-transparent {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      color: var(--color-inverse-light);
-      --icon-color: var(--color-inverse-light);
+      &:where([data-focus-visible], :focus-visible) {
+        background-color: transparent;
+      }
     }
   }
-  .enabled\:fg-serious {
+  .enabled\:focus-visible\:fg-interactive-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      color: var(--color-serious);
-      --icon-color: var(--color-serious);
+      &:where([data-focus-visible], :focus-visible) {
+        color: var(--color-interactive-hover);
+        --icon-color: var(--color-interactive-hover);
+      }
     }
   }
-  .enabled\:outline-critical {
+  .enabled\:focus-visible\:fg-inverse-light {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      outline-color: var(--color-critical);
+      &:where([data-focus-visible], :focus-visible) {
+        color: var(--color-inverse-light);
+        --icon-color: var(--color-inverse-light);
+      }
     }
   }
-  .enabled\:outline-interactive {
+  .enabled\:focus-visible\:outline-interactive-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      outline-color: var(--color-interactive);
+      &:where([data-focus-visible], :focus-visible) {
+        outline-color: var(--color-interactive-hover);
+      }
+    }
+  }
+  .disabled\:cursor-not-allowed {
+    &:where([disabled], [data-disabled], :disabled) {
+      cursor: not-allowed;
+    }
+  }
+  .disabled\:bg-interactive-disabled {
+    &:where([disabled], [data-disabled], :disabled) {
+      background-color: var(--color-interactive-disabled);
+    }
+  }
+  .disabled\:bg-transparent {
+    &:where([disabled], [data-disabled], :disabled) {
+      background-color: transparent;
+    }
+  }
+  .disabled\:fg-disabled {
+    &:where([disabled], [data-disabled], :disabled) {
+      color: var(--color-disabled);
+      --icon-color: var(--color-disabled);
+    }
+  }
+  .disabled\:text-disabled {
+    &:where([disabled], [data-disabled], :disabled) {
+      color: var(--color-disabled);
+    }
+  }
+  .disabled\:outline-interactive-disabled {
+    &:where([disabled], [data-disabled], :disabled) {
+      outline-color: var(--color-interactive-disabled);
+    }
+  }
+  .disabled\:placeholder\:fg-disabled {
+    &:where([disabled], [data-disabled], :disabled) {
+      &::placeholder {
+        color: var(--color-disabled);
+        --icon-color: var(--color-disabled);
+      }
+    }
+  }
+  .disabled\:placeholder\:text-disabled {
+    &:where([disabled], [data-disabled], :disabled) {
+      &::placeholder {
+        color: var(--color-disabled);
+      }
+    }
+  }
+  .data-\[push\~\=bottom\]\:\[--drawer-main-row-end\:3\] {
+    &[data-push~="bottom"] {
+      --drawer-main-row-end: 3;
+    }
+  }
+  .data-\[push\~\=left\]\:\[--drawer-main-col-start\:2\] {
+    &[data-push~="left"] {
+      --drawer-main-col-start: 2;
+    }
+  }
+  .data-\[push\~\=right\]\:\[--drawer-main-col-end\:3\] {
+    &[data-push~="right"] {
+      --drawer-main-col-end: 3;
+    }
+  }
+  .data-\[push\~\=top\]\:\[--drawer-main-row-start\:2\] {
+    &[data-push~="top"] {
+      --drawer-main-row-start: 2;
+    }
+  }
+  .motion-safe\:animate-pulse {
+    @media (prefers-reduced-motion: no-preference) {
+      animation: var(--animate-pulse);
+    }
+  }
+  .motion-safe\:animate-spin {
+    @media (prefers-reduced-motion: no-preference) {
+      animation: var(--animate-spin);
+    }
+  }
+  .md\:grid-cols-3 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+  .lg\:grid-cols-4 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
-  .enabled\:outline-serious {
+  .enabled\:color-info\:bg-interactive-default {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      outline-color: var(--color-serious);
+      &:where([data-color="info"]) {
+        background-color: var(--color-interactive-default);
+      }
     }
   }
-  .enabled\:group-invalid\/input\:outline-serious {
+  .enabled\:color-info\:bg-surface-default {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:is(:where(.group\/input):where([invalid], [data-invalid], :invalid) *) {
-        outline-color: var(--color-serious);
+      &:where([data-color="info"]) {
+        background-color: var(--color-surface-default);
       }
     }
   }
-  .group-invalid\/select-field\:enabled\:outline-serious {
-    &:is(:where(.group\/select-field):where([invalid], [data-invalid], :invalid) *) {
+  .color-info\:enabled\:fg-default-light {
+    &:where([data-color="info"]) {
       &:where(:not([disabled], [data-disabled]), :enabled) {
-        outline-color: var(--color-serious);
+        color: var(--color-default-light);
+        --icon-color: var(--color-default-light);
       }
     }
   }
-  .enabled\:group-hover\/input\:outline-interactive-hover {
+  .enabled\:color-info\:fg-default-light {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:is(:where(.group\/input):where([data-hovered], :hover) *) {
-        outline-color: var(--color-interactive-hover);
+      &:where([data-color="info"]) {
+        color: var(--color-default-light);
+        --icon-color: var(--color-default-light);
       }
     }
   }
-  .enabled\:group-focus\/input\:outline-highlight {
+  .enabled\:color-info\:fg-interactive {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:is(:where(.group\/input):where([data-focused], :focus) *) {
-        outline-color: var(--color-highlight);
+      &:where([data-color="info"]) {
+        color: var(--color-interactive);
+        --icon-color: var(--color-interactive);
       }
     }
   }
-  .group-focus\/select-field\:enabled\:outline-highlight-bold {
-    &:is(:where(.group\/select-field):where([data-focused], :focus) *) {
-      &:where(:not([disabled], [data-disabled]), :enabled) {
-        outline-color: var(--color-highlight-bold);
+  .enabled\:color-info\:fg-inverse-light {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-color="info"]) {
+        color: var(--color-inverse-light);
+        --icon-color: var(--color-inverse-light);
       }
     }
   }
-  .enabled\:hover\:bg-critical-hover {
+  .enabled\:color-info\:outline-interactive {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-hovered], :hover) {
-        background-color: var(--color-critical-hover);
+      &:where([data-color="info"]) {
+        outline-color: var(--color-interactive);
+      }
+    }
+  }
+  .color-info\:enabled\:open\:bg-highlight-bold {
+    &:where([data-color="info"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([open], [data-open], :open) {
+          background-color: var(--color-highlight-bold);
+        }
       }
     }
   }
-  .enabled\:hover\:bg-interactive-hover-dark {
+  .color-info\:enabled\:open\:fg-inverse-light {
+    &:where([data-color="info"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([open], [data-open], :open) {
+          color: var(--color-inverse-light);
+          --icon-color: var(--color-inverse-light);
+        }
+      }
+    }
+  }
+  .color-info\:enabled\:hover\:bg-highlight-bold {
+    &:where([data-color="info"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-hovered], :hover) {
+          background-color: var(--color-highlight-bold);
+        }
+      }
+    }
+  }
+  .enabled\:hover\:color-info\:bg-highlight-bold {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-hovered], :hover) {
-        background-color: var(--color-interactive-hover-dark);
+        &:where([data-color="info"]) {
+          background-color: var(--color-highlight-bold);
+        }
       }
     }
   }
-  .enabled\:hover\:bg-interactive-hover-light {
+  .enabled\:hover\:color-info\:bg-interactive-hover-dark {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-hovered], :hover) {
-        background-color: var(--color-interactive-hover-light);
+        &:where([data-color="info"]) {
+          background-color: var(--color-interactive-hover-dark);
+        }
       }
     }
   }
-  .enabled\:hover\:bg-serious-hover {
+  .enabled\:hover\:color-info\:bg-interactive-hover-light {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-hovered], :hover) {
-        background-color: var(--color-serious-hover);
+        &:where([data-color="info"]) {
+          background-color: var(--color-interactive-hover-light);
+        }
       }
     }
   }
-  .enabled\:hover\:bg-transparent {
+  .color-info\:enabled\:hover\:fg-inverse-light {
+    &:where([data-color="info"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-hovered], :hover) {
+          color: var(--color-inverse-light);
+          --icon-color: var(--color-inverse-light);
+        }
+      }
+    }
+  }
+  .enabled\:hover\:color-info\:fg-interactive-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-hovered], :hover) {
-        background-color: transparent;
+        &:where([data-color="info"]) {
+          color: var(--color-interactive-hover);
+          --icon-color: var(--color-interactive-hover);
+        }
       }
     }
   }
-  .enabled\:hover\:fg-interactive-hover {
+  .enabled\:hover\:color-info\:outline-interactive-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-hovered], :hover) {
-        color: var(--color-interactive-hover);
-        --icon-color: var(--color-interactive-hover);
+        &:where([data-color="info"]) {
+          outline-color: var(--color-interactive-hover);
+        }
       }
     }
   }
-  .enabled\:hover\:fg-inverse-light {
+  .color-info\:enabled\:focus-visible\:bg-highlight-bold {
+    &:where([data-color="info"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-focus-visible], :focus-visible) {
+          background-color: var(--color-highlight-bold);
+        }
+      }
+    }
+  }
+  .enabled\:focus-visible\:color-info\:bg-highlight-bold {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-hovered], :hover) {
-        color: var(--color-inverse-light);
-        --icon-color: var(--color-inverse-light);
+      &:where([data-focus-visible], :focus-visible) {
+        &:where([data-color="info"]) {
+          background-color: var(--color-highlight-bold);
+        }
       }
     }
   }
-  .enabled\:hover\:outline-interactive-hover {
+  .enabled\:focus-visible\:color-info\:bg-interactive-hover-dark {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-hovered], :hover) {
-        outline-color: var(--color-interactive-hover);
+      &:where([data-focus-visible], :focus-visible) {
+        &:where([data-color="info"]) {
+          background-color: var(--color-interactive-hover-dark);
+        }
       }
     }
   }
-  .enabled\:focus\:bg-critical-hover {
+  .enabled\:focus-visible\:color-info\:bg-interactive-hover-light {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-focused], :focus) {
-        background-color: var(--color-critical-hover);
+      &:where([data-focus-visible], :focus-visible) {
+        &:where([data-color="info"]) {
+          background-color: var(--color-interactive-hover-light);
+        }
+      }
+    }
+  }
+  .color-info\:enabled\:focus-visible\:fg-inverse-light {
+    &:where([data-color="info"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-focus-visible], :focus-visible) {
+          color: var(--color-inverse-light);
+          --icon-color: var(--color-inverse-light);
+        }
       }
     }
   }
-  .enabled\:focus\:bg-interactive-hover-dark {
+  .enabled\:focus-visible\:color-info\:fg-interactive-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-focused], :focus) {
-        background-color: var(--color-interactive-hover-dark);
+      &:where([data-focus-visible], :focus-visible) {
+        &:where([data-color="info"]) {
+          color: var(--color-interactive-hover);
+          --icon-color: var(--color-interactive-hover);
+        }
       }
     }
   }
-  .enabled\:focus\:bg-interactive-hover-light {
+  .enabled\:focus-visible\:color-info\:outline-interactive-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-focused], :focus) {
-        background-color: var(--color-interactive-hover-light);
+      &:where([data-focus-visible], :focus-visible) {
+        &:where([data-color="info"]) {
+          outline-color: var(--color-interactive-hover);
+        }
       }
     }
   }
-  .enabled\:focus\:bg-serious-hover {
+  .enabled\:color-serious\:bg-serious {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-focused], :focus) {
-        background-color: var(--color-serious-hover);
+      &:where([data-color="serious"]) {
+        background-color: var(--color-serious);
       }
     }
   }
-  .enabled\:focus\:bg-transparent {
+  .enabled\:color-serious\:bg-serious-subtle {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-focused], :focus) {
-        background-color: transparent;
+      &:where([data-color="serious"]) {
+        background-color: var(--color-serious-subtle);
       }
     }
   }
-  .enabled\:focus\:fg-interactive-hover {
+  .color-serious\:enabled\:fg-serious {
+    &:where([data-color="serious"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        color: var(--color-serious);
+        --icon-color: var(--color-serious);
+      }
+    }
+  }
+  .enabled\:color-serious\:fg-default-light {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-focused], :focus) {
-        color: var(--color-interactive-hover);
-        --icon-color: var(--color-interactive-hover);
+      &:where([data-color="serious"]) {
+        color: var(--color-default-light);
+        --icon-color: var(--color-default-light);
       }
     }
   }
-  .enabled\:focus\:fg-inverse-light {
+  .enabled\:color-serious\:fg-inverse-light {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-focused], :focus) {
+      &:where([data-color="serious"]) {
         color: var(--color-inverse-light);
         --icon-color: var(--color-inverse-light);
       }
     }
   }
-  .enabled\:focus\:outline-interactive-hover {
+  .enabled\:color-serious\:fg-serious {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-focused], :focus) {
-        outline-color: var(--color-interactive-hover);
+      &:where([data-color="serious"]) {
+        color: var(--color-serious);
+        --icon-color: var(--color-serious);
       }
     }
   }
-  .disabled\:cursor-not-allowed {
-    &:where([disabled], [data-disabled], :disabled) {
-      cursor: not-allowed;
+  .enabled\:color-serious\:outline-serious {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-color="serious"]) {
+        outline-color: var(--color-serious);
+      }
     }
   }
-  .disabled\:bg-interactive-disabled {
-    &:where([disabled], [data-disabled], :disabled) {
-      background-color: var(--color-interactive-disabled);
+  .color-serious\:enabled\:open\:bg-serious-bold {
+    &:where([data-color="serious"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([open], [data-open], :open) {
+          background-color: var(--color-serious-bold);
+        }
+      }
     }
   }
-  .disabled\:bg-transparent {
-    &:where([disabled], [data-disabled], :disabled) {
-      background-color: transparent;
+  .color-serious\:enabled\:open\:fg-inverse-light {
+    &:where([data-color="serious"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([open], [data-open], :open) {
+          color: var(--color-inverse-light);
+          --icon-color: var(--color-inverse-light);
+        }
+      }
+    }
+  }
+  .color-serious\:enabled\:hover\:bg-serious-bold {
+    &:where([data-color="serious"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-hovered], :hover) {
+          background-color: var(--color-serious-bold);
+        }
+      }
+    }
+  }
+  .enabled\:hover\:color-serious\:bg-serious-bold {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-hovered], :hover) {
+        &:where([data-color="serious"]) {
+          background-color: var(--color-serious-bold);
+        }
+      }
+    }
+  }
+  .enabled\:hover\:color-serious\:bg-serious-hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-hovered], :hover) {
+        &:where([data-color="serious"]) {
+          background-color: var(--color-serious-hover);
+        }
+      }
+    }
+  }
+  .color-serious\:enabled\:hover\:fg-inverse-light {
+    &:where([data-color="serious"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-hovered], :hover) {
+          color: var(--color-inverse-light);
+          --icon-color: var(--color-inverse-light);
+        }
+      }
+    }
+  }
+  .enabled\:hover\:color-serious\:fg-interactive-hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-hovered], :hover) {
+        &:where([data-color="serious"]) {
+          color: var(--color-interactive-hover);
+          --icon-color: var(--color-interactive-hover);
+        }
+      }
+    }
+  }
+  .enabled\:hover\:color-serious\:outline-interactive-hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-hovered], :hover) {
+        &:where([data-color="serious"]) {
+          outline-color: var(--color-interactive-hover);
+        }
+      }
     }
   }
-  .disabled\:fg-disabled {
-    &:where([disabled], [data-disabled], :disabled) {
-      color: var(--color-disabled);
-      --icon-color: var(--color-disabled);
+  .color-serious\:enabled\:focus-visible\:bg-serious-bold {
+    &:where([data-color="serious"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-focus-visible], :focus-visible) {
+          background-color: var(--color-serious-bold);
+        }
+      }
     }
   }
-  .disabled\:text-disabled {
-    &:where([disabled], [data-disabled], :disabled) {
-      color: var(--color-disabled);
+  .enabled\:focus-visible\:color-serious\:bg-serious-bold {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-focus-visible], :focus-visible) {
+        &:where([data-color="serious"]) {
+          background-color: var(--color-serious-bold);
+        }
+      }
     }
   }
-  .disabled\:outline-interactive-disabled {
-    &:where([disabled], [data-disabled], :disabled) {
-      outline-color: var(--color-interactive-disabled);
+  .enabled\:focus-visible\:color-serious\:bg-serious-hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-focus-visible], :focus-visible) {
+        &:where([data-color="serious"]) {
+          background-color: var(--color-serious-hover);
+        }
+      }
     }
   }
-  .disabled\:placeholder\:fg-disabled {
-    &:where([disabled], [data-disabled], :disabled) {
-      &::placeholder {
-        color: var(--color-disabled);
-        --icon-color: var(--color-disabled);
+  .color-serious\:enabled\:focus-visible\:fg-inverse-light {
+    &:where([data-color="serious"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-focus-visible], :focus-visible) {
+          color: var(--color-inverse-light);
+          --icon-color: var(--color-inverse-light);
+        }
       }
     }
   }
-  .disabled\:placeholder\:text-disabled {
-    &:where([disabled], [data-disabled], :disabled) {
-      &::placeholder {
-        color: var(--color-disabled);
+  .enabled\:focus-visible\:color-serious\:fg-interactive-hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-focus-visible], :focus-visible) {
+        &:where([data-color="serious"]) {
+          color: var(--color-interactive-hover);
+          --icon-color: var(--color-interactive-hover);
+        }
       }
     }
   }
-  .data-\[push\~\=bottom\]\:\[--drawer-main-row-end\:3\] {
-    &[data-push~="bottom"] {
-      --drawer-main-row-end: 3;
+  .enabled\:focus-visible\:color-serious\:outline-interactive-hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-focus-visible], :focus-visible) {
+        &:where([data-color="serious"]) {
+          outline-color: var(--color-interactive-hover);
+        }
+      }
     }
   }
-  .data-\[push\~\=left\]\:\[--drawer-main-col-start\:2\] {
-    &[data-push~="left"] {
-      --drawer-main-col-start: 2;
+  .enabled\:color-critical\:bg-critical {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-color="critical"]) {
+        background-color: var(--color-critical);
+      }
     }
   }
-  .data-\[push\~\=right\]\:\[--drawer-main-col-end\:3\] {
-    &[data-push~="right"] {
-      --drawer-main-col-end: 3;
+  .enabled\:color-critical\:bg-critical-subtle {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-color="critical"]) {
+        background-color: var(--color-critical-subtle);
+      }
     }
   }
-  .data-\[push\~\=top\]\:\[--drawer-main-row-start\:2\] {
-    &[data-push~="top"] {
-      --drawer-main-row-start: 2;
+  .enabled\:color-critical\:fg-critical {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-color="critical"]) {
+        color: var(--color-critical);
+        --icon-color: var(--color-critical);
+      }
     }
   }
-  .motion-safe\:animate-pulse {
-    @media (prefers-reduced-motion: no-preference) {
-      animation: var(--animate-pulse);
+  .enabled\:color-critical\:fg-default-light {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-color="critical"]) {
+        color: var(--color-default-light);
+        --icon-color: var(--color-default-light);
+      }
     }
   }
-  .motion-safe\:animate-spin {
-    @media (prefers-reduced-motion: no-preference) {
-      animation: var(--animate-spin);
+  .enabled\:color-critical\:outline-critical {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-color="critical"]) {
+        outline-color: var(--color-critical);
+      }
     }
   }
-  .md\:grid-cols-3 {
-    @media (width >= 48rem) {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
+  .enabled\:hover\:color-critical\:bg-critical-hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-hovered], :hover) {
+        &:where([data-color="critical"]) {
+          background-color: var(--color-critical-hover);
+        }
+      }
     }
   }
-  .lg\:grid-cols-4 {
-    @media (width >= 64rem) {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
+  .enabled\:hover\:color-critical\:fg-interactive-hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-hovered], :hover) {
+        &:where([data-color="critical"]) {
+          color: var(--color-interactive-hover);
+          --icon-color: var(--color-interactive-hover);
+        }
+      }
     }
   }
-  .enabled\:hover\:color-info\:bg-highlight-bold {
+  .enabled\:hover\:color-critical\:outline-interactive-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-hovered], :hover) {
-        &:where([data-color~="info"]) {
-          background-color: var(--color-highlight-bold);
+        &:where([data-color="critical"]) {
+          outline-color: var(--color-interactive-hover);
         }
       }
     }
   }
-  .enabled\:focus\:color-info\:bg-highlight-bold {
+  .enabled\:focus-visible\:color-critical\:bg-critical-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-focused], :focus) {
-        &:where([data-color~="info"]) {
-          background-color: var(--color-highlight-bold);
+      &:where([data-focus-visible], :focus-visible) {
+        &:where([data-color="critical"]) {
+          background-color: var(--color-critical-hover);
         }
       }
     }
   }
-  .enabled\:hover\:color-serious\:bg-serious-bold {
+  .enabled\:focus-visible\:color-critical\:fg-interactive-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-hovered], :hover) {
-        &:where([data-color~="serious"]) {
-          background-color: var(--color-serious-bold);
+      &:where([data-focus-visible], :focus-visible) {
+        &:where([data-color="critical"]) {
+          color: var(--color-interactive-hover);
+          --icon-color: var(--color-interactive-hover);
         }
       }
     }
   }
-  .enabled\:focus\:color-serious\:bg-serious-bold {
+  .enabled\:focus-visible\:color-critical\:outline-interactive-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-focused], :focus) {
-        &:where([data-color~="serious"]) {
-          background-color: var(--color-serious-bold);
+      &:where([data-focus-visible], :focus-visible) {
+        &:where([data-color="critical"]) {
+          outline-color: var(--color-interactive-hover);
         }
       }
     }
@@ -3509,20 +4155,6 @@
       }
     }
   }
-  .group-data-\[extend\=left\]\/layout\:placement-left\:z-10 {
-    &:is(:where(.group\/layout)[data-extend="left"] *) {
-      &:where([data-placement~="left"]) {
-        z-index: 10;
-      }
-    }
-  }
-  .group-data-\[extend\=right\]\/layout\:placement-left\:z-1 {
-    &:is(:where(.group\/layout)[data-extend="right"] *) {
-      &:where([data-placement~="left"]) {
-        z-index: 1;
-      }
-    }
-  }
   .group-data-\[extend\=top\]\/layout\:placement-left\:row-end-4 {
     &:is(:where(.group\/layout)[data-extend="top"] *) {
       &:where([data-placement~="left"]) {
@@ -3575,20 +4207,6 @@
       }
     }
   }
-  .group-data-\[extend\=left\]\/layout\:placement-right\:z-1 {
-    &:is(:where(.group\/layout)[data-extend="left"] *) {
-      &:where([data-placement~="right"]) {
-        z-index: 1;
-      }
-    }
-  }
-  .group-data-\[extend\=right\]\/layout\:placement-right\:z-10 {
-    &:is(:where(.group\/layout)[data-extend="right"] *) {
-      &:where([data-placement~="right"]) {
-        z-index: 10;
-      }
-    }
-  }
   .group-data-\[extend\=top\]\/layout\:placement-right\:row-end-4 {
     &:is(:where(.group\/layout)[data-extend="top"] *) {
       &:where([data-placement~="right"]) {
@@ -3648,13 +4266,6 @@
       }
     }
   }
-  .group-data-\[extend\~\=top\]\/layout\:placement-top\:z-10 {
-    &:is(:where(.group\/layout)[data-extend~="top"] *) {
-      &:where([data-placement~="top"]) {
-        z-index: 10;
-      }
-    }
-  }
   .group-data-\[extend\~\=top\]\/layout\:placement-top\:col-span-full {
     &:is(:where(.group\/layout)[data-extend~="top"] *) {
       &:where([data-placement~="top"]) {
@@ -3693,13 +4304,6 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
-  .group-data-\[extend\=bottom\]\/layout\:placement-bottom\:z-10 {
-    &:is(:where(.group\/layout)[data-extend="bottom"] *) {
-      &:where([data-placement~="bottom"]) {
-        z-index: 10;
-      }
-    }
-  }
   .group-data-\[extend\=left\]\/layout\:placement-bottom\:col-end-4 {
     &:is(:where(.group\/layout)[data-extend="left"] *) {
       &:where([data-placement~="bottom"]) {
@@ -3754,60 +4358,6 @@
       --icon-size: var(--icon-size-l);
     }
   }
-  .placement-left\:open\:size-large\:w-\[var\(--drawer-size-large\)\] {
-    &:where([data-placement~="left"]) {
-      &:where([open], [data-open], :open) {
-        &:where([data-size="large"]) {
-          width: var(--drawer-size-large);
-        }
-      }
-    }
-  }
-  .placement-left\:open\:size-large\:w-\[var\(--drawer-size-large\)\] {
-    &:where([data-placement~="left"]) {
-      &:where([open], [data-open], :open) {
-        &:where([data-size="large"]) {
-          width: var(--drawer-size-large);
-        }
-      }
-    }
-  }
-  .placement-right\:open\:size-large\:w-\[var\(--drawer-size-large\)\] {
-    &:where([data-placement~="right"]) {
-      &:where([open], [data-open], :open) {
-        &:where([data-size="large"]) {
-          width: var(--drawer-size-large);
-        }
-      }
-    }
-  }
-  .placement-right\:open\:size-large\:w-\[var\(--drawer-size-large\)\] {
-    &:where([data-placement~="right"]) {
-      &:where([open], [data-open], :open) {
-        &:where([data-size="large"]) {
-          width: var(--drawer-size-large);
-        }
-      }
-    }
-  }
-  .placement-top\:open\:size-large\:h-\[var\(--drawer-size-large\)\] {
-    &:where([data-placement~="top"]) {
-      &:where([open], [data-open], :open) {
-        &:where([data-size="large"]) {
-          height: var(--drawer-size-large);
-        }
-      }
-    }
-  }
-  .placement-bottom\:open\:size-large\:h-\[var\(--drawer-size-large\)\] {
-    &:where([data-placement~="bottom"]) {
-      &:where([open], [data-open], :open) {
-        &:where([data-size="large"]) {
-          height: var(--drawer-size-large);
-        }
-      }
-    }
-  }
   .size-medium\:size-\[32px\] {
     &:where([data-size="medium"]) {
       width: 32px;
@@ -3849,11 +4399,6 @@
       padding-block: var(--spacing-xs);
     }
   }
-  .size-medium\:pl-\[32px\] {
-    &:where([data-size="medium"]) {
-      padding-left: 32px;
-    }
-  }
   .size-medium\:text-body-s {
     &:where([data-size="medium"]) {
       font-size: var(--typography-body-s-size);
@@ -3891,60 +4436,6 @@
       --icon-size: var(--icon-size-m);
     }
   }
-  .placement-left\:open\:size-medium\:w-\[var\(--drawer-size-medium\)\] {
-    &:where([data-placement~="left"]) {
-      &:where([open], [data-open], :open) {
-        &:where([data-size="medium"]) {
-          width: var(--drawer-size-medium);
-        }
-      }
-    }
-  }
-  .placement-left\:open\:size-medium\:w-\[var\(--drawer-size-medium\)\] {
-    &:where([data-placement~="left"]) {
-      &:where([open], [data-open], :open) {
-        &:where([data-size="medium"]) {
-          width: var(--drawer-size-medium);
-        }
-      }
-    }
-  }
-  .placement-right\:open\:size-medium\:w-\[var\(--drawer-size-medium\)\] {
-    &:where([data-placement~="right"]) {
-      &:where([open], [data-open], :open) {
-        &:where([data-size="medium"]) {
-          width: var(--drawer-size-medium);
-        }
-      }
-    }
-  }
-  .placement-right\:open\:size-medium\:w-\[var\(--drawer-size-medium\)\] {
-    &:where([data-placement~="right"]) {
-      &:where([open], [data-open], :open) {
-        &:where([data-size="medium"]) {
-          width: var(--drawer-size-medium);
-        }
-      }
-    }
-  }
-  .placement-top\:open\:size-medium\:h-\[var\(--drawer-size-medium\)\] {
-    &:where([data-placement~="top"]) {
-      &:where([open], [data-open], :open) {
-        &:where([data-size="medium"]) {
-          height: var(--drawer-size-medium);
-        }
-      }
-    }
-  }
-  .placement-bottom\:open\:size-medium\:h-\[var\(--drawer-size-medium\)\] {
-    &:where([data-placement~="bottom"]) {
-      &:where([open], [data-open], :open) {
-        &:where([data-size="medium"]) {
-          height: var(--drawer-size-medium);
-        }
-      }
-    }
-  }
   .size-small\:size-xl {
     &:where([data-size="small"]) {
       width: var(--spacing-xl);
@@ -4010,96 +4501,103 @@
       --icon-size: var(--icon-size-s);
     }
   }
-  .placement-left\:open\:size-small\:w-\[var\(--drawer-size-small\)\] {
-    &:where([data-placement~="left"]) {
-      &:where([open], [data-open], :open) {
-        &:where([data-size="small"]) {
-          width: var(--drawer-size-small);
-        }
-      }
+  .size-xsmall\:gap-xxs {
+    &:where([data-size="xsmall"]) {
+      gap: var(--spacing-xxs);
     }
   }
-  .placement-left\:open\:size-small\:w-\[var\(--drawer-size-small\)\] {
-    &:where([data-placement~="left"]) {
-      &:where([open], [data-open], :open) {
-        &:where([data-size="small"]) {
-          width: var(--drawer-size-small);
-        }
-      }
+  .size-xsmall\:rounded-small {
+    &:where([data-size="xsmall"]) {
+      border-radius: var(--radius-small);
     }
   }
-  .placement-right\:open\:size-small\:w-\[var\(--drawer-size-small\)\] {
-    &:where([data-placement~="right"]) {
-      &:where([open], [data-open], :open) {
-        &:where([data-size="small"]) {
-          width: var(--drawer-size-small);
-        }
-      }
+  .size-xsmall\:p-xxs {
+    &:where([data-size="xsmall"]) {
+      padding: var(--spacing-xxs);
     }
   }
-  .placement-right\:open\:size-small\:w-\[var\(--drawer-size-small\)\] {
-    &:where([data-placement~="right"]) {
-      &:where([open], [data-open], :open) {
-        &:where([data-size="small"]) {
-          width: var(--drawer-size-small);
-        }
-      }
+  .size-xsmall\:px-s {
+    &:where([data-size="xsmall"]) {
+      padding-inline: var(--spacing-s);
     }
   }
-  .placement-top\:open\:size-small\:h-\[var\(--drawer-size-small\)\] {
-    &:where([data-placement~="top"]) {
-      &:where([open], [data-open], :open) {
-        &:where([data-size="small"]) {
-          height: var(--drawer-size-small);
-        }
-      }
+  .size-xsmall\:py-xs {
+    &:where([data-size="xsmall"]) {
+      padding-block: var(--spacing-xs);
     }
   }
-  .placement-bottom\:open\:size-small\:h-\[var\(--drawer-size-small\)\] {
-    &:where([data-placement~="bottom"]) {
-      &:where([open], [data-open], :open) {
-        &:where([data-size="small"]) {
-          height: var(--drawer-size-small);
-        }
-      }
+  .size-xsmall\:text-button-xs {
+    &:where([data-size="xsmall"]) {
+      font-size: var(--typography-button-xs-size);
+      font-weight: bold;
+      letter-spacing: var(--typography-button-xs-spacing);
+      line-height: var(--typography-button-xs-height);
     }
   }
-  .size-xsmall\:gap-xxs {
+  .size-xsmall\:\[--icon-size\:var\(--icon-size-xs\)\] {
     &:where([data-size="xsmall"]) {
-      gap: var(--spacing-xxs);
+      --icon-size: var(--icon-size-xs);
     }
   }
-  .size-xsmall\:rounded-small {
-    &:where([data-size="xsmall"]) {
-      border-radius: var(--radius-small);
+  .group-size-medium\/date-field\:type-month\:w-\[calc\(2ch\+\(2\*var\(--typography-body-s-spacing\)\)\)\] {
+    &:is(:where(.group\/date-field):where([data-size="medium"]) *) {
+      &:where([data-type="month"]) {
+        width: calc(2ch + (2 * var(--typography-body-s-spacing)));
+      }
     }
   }
-  .size-xsmall\:p-xxs {
-    &:where([data-size="xsmall"]) {
-      padding: var(--spacing-xxs);
+  .group-size-medium\/date-field\:type-month\:w-\[calc\(2ch\+\(2\*var\(--typography-body-s-spacing\)\)\)\] {
+    &:is(:where(.group\/date-field):where([data-size="medium"]) *) {
+      &:where([data-type="month"]) {
+        width: calc(2ch + (2 * var(--typography-body-s-spacing)));
+      }
     }
   }
-  .size-xsmall\:px-s {
-    &:where([data-size="xsmall"]) {
-      padding-inline: var(--spacing-s);
+  .group-size-medium\/date-field\:type-month\:w-\[calc\(3ch\+\(3\*var\(--typography-body-s-spacing\)\)\)\] {
+    &:is(:where(.group\/date-field):where([data-size="medium"]) *) {
+      &:where([data-type="month"]) {
+        width: calc(3ch + (3 * var(--typography-body-s-spacing)));
+      }
+    }
+  }
+  .group-size-medium\/date-field\:type-month\:w-\[calc\(3ch\+\(3\*var\(--typography-body-s-spacing\)\)\)\] {
+    &:is(:where(.group\/date-field):where([data-size="medium"]) *) {
+      &:where([data-type="month"]) {
+        width: calc(3ch + (3 * var(--typography-body-s-spacing)));
+      }
+    }
+  }
+  .group-size-small\/date-field\:type-month\:w-\[calc\(2ch\+\(2\*var\(--typography-body-xs-spacing\)\)\)\] {
+    &:is(:where(.group\/date-field):where([data-size="small"]) *) {
+      &:where([data-type="month"]) {
+        width: calc(2ch + (2 * var(--typography-body-xs-spacing)));
+      }
+    }
+  }
+  .group-size-small\/date-field\:type-month\:w-\[calc\(2ch\+\(2\*var\(--typography-body-xs-spacing\)\)\)\] {
+    &:is(:where(.group\/date-field):where([data-size="small"]) *) {
+      &:where([data-type="month"]) {
+        width: calc(2ch + (2 * var(--typography-body-xs-spacing)));
+      }
     }
   }
-  .size-xsmall\:py-xs {
-    &:where([data-size="xsmall"]) {
-      padding-block: var(--spacing-xs);
+  .group-size-small\/date-field\:type-month\:w-\[calc\(3ch\+\(3\*var\(--typography-body-xs-spacing\)\)\)\] {
+    &:is(:where(.group\/date-field):where([data-size="small"]) *) {
+      &:where([data-type="month"]) {
+        width: calc(3ch + (3 * var(--typography-body-xs-spacing)));
+      }
     }
   }
-  .size-xsmall\:text-button-xs {
-    &:where([data-size="xsmall"]) {
-      font-size: var(--typography-button-xs-size);
-      font-weight: bold;
-      letter-spacing: var(--typography-button-xs-spacing);
-      line-height: var(--typography-button-xs-height);
+  .group-size-small\/date-field\:type-month\:w-\[calc\(3ch\+\(3\*var\(--typography-body-xs-spacing\)\)\)\] {
+    &:is(:where(.group\/date-field):where([data-size="small"]) *) {
+      &:where([data-type="month"]) {
+        width: calc(3ch + (3 * var(--typography-body-xs-spacing)));
+      }
     }
   }
-  .size-xsmall\:\[--icon-size\:var\(--icon-size-xs\)\] {
-    &:where([data-size="xsmall"]) {
-      --icon-size: var(--icon-size-xs);
+  .layout-grid\:grid {
+    &:where([data-layout="grid"]) {
+      display: grid;
     }
   }
   .layout-grid\:pl-xxl {
@@ -4107,6 +4605,11 @@
       padding-left: var(--spacing-xxl);
     }
   }
+  .layout-stack\:flex {
+    &:where([data-layout="stack"]) {
+      display: flex;
+    }
+  }
   .layout-stack\:rounded-large {
     &:where([data-layout="stack"]) {
       border-radius: var(--radius-large);
@@ -4127,6 +4630,11 @@
       padding-block: var(--spacing-xl);
     }
   }
+  .orientation-horizontal\:h-xl {
+    &:where([data-orientation="horizontal"]) {
+      height: var(--spacing-xl);
+    }
+  }
   .orientation-horizontal\:flex-col {
     &:where([data-orientation="horizontal"]) {
       flex-direction: column;
@@ -4142,6 +4650,44 @@
       flex-wrap: wrap;
     }
   }
+  .orientation-horizontal\:layout-grid\:grid-cols-\[auto_1fr_auto\] {
+    &:where([data-orientation="horizontal"]) {
+      &:where([data-layout="grid"]) {
+        grid-template-columns: auto 1fr auto;
+      }
+    }
+  }
+  .orientation-horizontal\:layout-grid\:grid-rows-\[auto_auto_auto\] {
+    &:where([data-orientation="horizontal"]) {
+      &:where([data-layout="grid"]) {
+        grid-template-rows: auto auto auto;
+      }
+    }
+  }
+  .orientation-horizontal\:layout-stack\:w-full {
+    &:where([data-orientation="horizontal"]) {
+      &:where([data-layout="stack"]) {
+        width: 100%;
+      }
+    }
+  }
+  .orientation-horizontal\:layout-stack\:items-center {
+    &:where([data-orientation="horizontal"]) {
+      &:where([data-layout="stack"]) {
+        align-items: center;
+      }
+    }
+  }
+  .orientation-vertical\:h-full {
+    &:where([data-orientation="vertical"]) {
+      height: 100%;
+    }
+  }
+  .orientation-vertical\:w-fit {
+    &:where([data-orientation="vertical"]) {
+      width: fit-content;
+    }
+  }
   .orientation-vertical\:flex-col {
     &:where([data-orientation="vertical"]) {
       flex-direction: column;
@@ -4152,51 +4698,49 @@
       gap: var(--spacing-xs);
     }
   }
-  .placement-left\:closed\:w-\[var\(--drawer-size-closed\)\] {
-    &:where([data-placement~="left"]) {
-      &:where(:not([open], [data-open], :open)) {
-        width: var(--drawer-size-closed);
+  .orientation-vertical\:layout-grid\:grid-cols-\[auto_auto_auto\] {
+    &:where([data-orientation="vertical"]) {
+      &:where([data-layout="grid"]) {
+        grid-template-columns: auto auto auto;
       }
     }
   }
-  .placement-left\:closed\:w-\[var\(--drawer-size-closed\)\] {
-    &:where([data-placement~="left"]) {
-      &:where(:not([open], [data-open], :open)) {
-        width: var(--drawer-size-closed);
+  .orientation-vertical\:layout-grid\:grid-rows-\[auto_auto_1fr_auto\] {
+    &:where([data-orientation="vertical"]) {
+      &:where([data-layout="grid"]) {
+        grid-template-rows: auto auto 1fr auto;
       }
     }
   }
-  .placement-right\:closed\:w-\[var\(--drawer-size-closed\)\] {
-    &:where([data-placement~="right"]) {
-      &:where(:not([open], [data-open], :open)) {
-        width: var(--drawer-size-closed);
+  .orientation-vertical\:layout-stack\:flex-col {
+    &:where([data-orientation="vertical"]) {
+      &:where([data-layout="stack"]) {
+        flex-direction: column;
       }
     }
   }
-  .placement-right\:closed\:w-\[var\(--drawer-size-closed\)\] {
-    &:where([data-placement~="right"]) {
-      &:where(:not([open], [data-open], :open)) {
-        width: var(--drawer-size-closed);
-      }
+  .focus-visible-within\:outline-highlight {
+    &:where(:has([data-focus-visible], :focus-visible)) {
+      outline-color: var(--color-highlight);
     }
   }
-  .placement-top\:closed\:h-\[var\(--drawer-size-closed\)\] {
-    &:where([data-placement~="top"]) {
-      &:where(:not([open], [data-open], :open)) {
-        height: var(--drawer-size-closed);
+  .group-enabled\/accordion\:focus-visible-within\:bg-interactive-hover-dark {
+    &:is(:where(.group\/accordion):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:where(:has([data-focus-visible], :focus-visible)) {
+        background-color: var(--color-interactive-hover-dark);
       }
     }
   }
-  .placement-bottom\:closed\:h-\[var\(--drawer-size-closed\)\] {
-    &:where([data-placement~="bottom"]) {
-      &:where(:not([open], [data-open], :open)) {
-        height: var(--drawer-size-closed);
+  .group-enabled\/combobox-field\:focus-visible-within\:outline-highlight {
+    &:is(:where(.group\/combobox-field):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:where(:has([data-focus-visible], :focus-visible)) {
+        outline-color: var(--color-highlight);
       }
     }
   }
-  .selected\:bg-highlight-bold {
+  .selected\:cursor-default {
     &:where([data-selected], :checked) {
-      background-color: var(--color-highlight-bold);
+      cursor: default;
     }
   }
   .selected\:bg-highlight-subtle {
@@ -4204,167 +4748,305 @@
       background-color: var(--color-highlight-subtle);
     }
   }
-  .selected\:bg-serious-bold {
-    &:where([data-selected], :checked) {
-      background-color: var(--color-serious-bold);
-    }
-  }
   .selected\:fg-highlight {
     &:where([data-selected], :checked) {
       color: var(--color-highlight);
       --icon-color: var(--color-highlight);
     }
   }
-  .selected\:fg-inverse-light {
-    &:where([data-selected], :checked) {
-      color: var(--color-inverse-light);
-      --icon-color: var(--color-inverse-light);
-    }
-  }
   .selected\:outline-highlight {
     &:where([data-selected], :checked) {
       outline-color: var(--color-highlight);
     }
   }
-  .enabled\:selected\:bg-critical-subtle {
+  .enabled\:selected\:bg-highlight-subtle {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
-        background-color: var(--color-critical-subtle);
+        background-color: var(--color-highlight-subtle);
       }
     }
   }
-  .enabled\:selected\:bg-highlight-subtle {
+  .enabled\:selected\:fg-highlight {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
-        background-color: var(--color-highlight-subtle);
+        color: var(--color-highlight);
+        --icon-color: var(--color-highlight);
       }
     }
   }
-  .enabled\:selected\:bg-info-subtle {
+  .enabled\:selected\:outline-highlight {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
-        background-color: var(--color-info-subtle);
+        outline-color: var(--color-highlight);
       }
     }
   }
-  .enabled\:selected\:bg-serious-subtle {
+  .enabled\:selected\:hover\:fg-highlight {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
-        background-color: var(--color-serious-subtle);
+        &:where([data-hovered], :hover) {
+          color: var(--color-highlight);
+          --icon-color: var(--color-highlight);
+        }
       }
     }
   }
-  .enabled\:selected\:fg-highlight {
+  .enabled\:selected\:hover\:outline-interactive-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
-        color: var(--color-highlight);
-        --icon-color: var(--color-highlight);
+        &:where([data-hovered], :hover) {
+          outline-color: var(--color-interactive-hover);
+        }
       }
     }
   }
-  .enabled\:selected\:outline-highlight {
+  .enabled\:selected\:focus-visible\:fg-highlight {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
-        outline-color: var(--color-highlight);
+        &:where([data-focus-visible], :focus-visible) {
+          color: var(--color-highlight);
+          --icon-color: var(--color-highlight);
+        }
       }
     }
   }
-  .enabled\:selected\:hover\:bg-critical-hover {
+  .enabled\:selected\:focus-visible\:outline-interactive-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
-        &:where([data-hovered], :hover) {
-          background-color: var(--color-critical-hover);
+        &:where([data-focus-visible], :focus-visible) {
+          outline-color: var(--color-interactive-hover);
+        }
+      }
+    }
+  }
+  .disabled\:selected\:bg-interactive-disabled {
+    &:where([disabled], [data-disabled], :disabled) {
+      &:where([data-selected], :checked) {
+        background-color: var(--color-interactive-disabled);
+      }
+    }
+  }
+  .color-info\:enabled\:selected\:bg-highlight-bold {
+    &:where([data-color="info"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-selected], :checked) {
+          background-color: var(--color-highlight-bold);
+        }
+      }
+    }
+  }
+  .enabled\:selected\:color-info\:bg-info-subtle {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
+        &:where([data-color="info"]) {
+          background-color: var(--color-info-subtle);
+        }
+      }
+    }
+  }
+  .color-info\:enabled\:selected\:fg-inverse-light {
+    &:where([data-color="info"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-selected], :checked) {
+          color: var(--color-inverse-light);
+          --icon-color: var(--color-inverse-light);
+        }
+      }
+    }
+  }
+  .enabled\:selected\:color-info\:outline-highlight {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
+        &:where([data-color="info"]) {
+          outline-color: var(--color-highlight);
         }
       }
     }
   }
-  .enabled\:selected\:hover\:bg-interactive-hover-light {
+  .enabled\:selected\:hover\:color-info\:bg-interactive-hover-light {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
         &:where([data-hovered], :hover) {
-          background-color: var(--color-interactive-hover-light);
+          &:where([data-color="info"]) {
+            background-color: var(--color-interactive-hover-light);
+          }
         }
       }
     }
   }
-  .enabled\:selected\:hover\:bg-serious-hover {
+  .enabled\:selected\:hover\:color-info\:outline-interactive-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
         &:where([data-hovered], :hover) {
-          background-color: var(--color-serious-hover);
+          &:where([data-color="info"]) {
+            outline-color: var(--color-interactive-hover);
+          }
         }
       }
     }
   }
-  .enabled\:selected\:hover\:fg-highlight {
+  .enabled\:selected\:focus-visible\:color-info\:bg-interactive-hover-light {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
+        &:where([data-focus-visible], :focus-visible) {
+          &:where([data-color="info"]) {
+            background-color: var(--color-interactive-hover-light);
+          }
+        }
+      }
+    }
+  }
+  .enabled\:selected\:focus-visible\:color-info\:outline-interactive-hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
+        &:where([data-focus-visible], :focus-visible) {
+          &:where([data-color="info"]) {
+            outline-color: var(--color-interactive-hover);
+          }
+        }
+      }
+    }
+  }
+  .color-serious\:enabled\:selected\:bg-serious-bold {
+    &:where([data-color="serious"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-selected], :checked) {
+          background-color: var(--color-serious-bold);
+        }
+      }
+    }
+  }
+  .enabled\:selected\:color-serious\:bg-serious-subtle {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
+        &:where([data-color="serious"]) {
+          background-color: var(--color-serious-subtle);
+        }
+      }
+    }
+  }
+  .color-serious\:enabled\:selected\:fg-inverse-light {
+    &:where([data-color="serious"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-selected], :checked) {
+          color: var(--color-inverse-light);
+          --icon-color: var(--color-inverse-light);
+        }
+      }
+    }
+  }
+  .enabled\:selected\:color-serious\:outline-highlight {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
+        &:where([data-color="serious"]) {
+          outline-color: var(--color-highlight);
+        }
+      }
+    }
+  }
+  .enabled\:selected\:hover\:color-serious\:bg-serious-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
         &:where([data-hovered], :hover) {
-          color: var(--color-highlight);
-          --icon-color: var(--color-highlight);
+          &:where([data-color="serious"]) {
+            background-color: var(--color-serious-hover);
+          }
         }
       }
     }
   }
-  .enabled\:selected\:hover\:outline-interactive-hover {
+  .enabled\:selected\:hover\:color-serious\:outline-interactive-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
         &:where([data-hovered], :hover) {
-          outline-color: var(--color-interactive-hover);
+          &:where([data-color="serious"]) {
+            outline-color: var(--color-interactive-hover);
+          }
         }
       }
     }
   }
-  .enabled\:selected\:focus\:bg-critical-hover {
+  .enabled\:selected\:focus-visible\:color-serious\:bg-serious-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
-        &:where([data-focused], :focus) {
-          background-color: var(--color-critical-hover);
+        &:where([data-focus-visible], :focus-visible) {
+          &:where([data-color="serious"]) {
+            background-color: var(--color-serious-hover);
+          }
         }
       }
     }
   }
-  .enabled\:selected\:focus\:bg-interactive-hover-light {
+  .enabled\:selected\:focus-visible\:color-serious\:outline-interactive-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
-        &:where([data-focused], :focus) {
-          background-color: var(--color-interactive-hover-light);
+        &:where([data-focus-visible], :focus-visible) {
+          &:where([data-color="serious"]) {
+            outline-color: var(--color-interactive-hover);
+          }
         }
       }
     }
   }
-  .enabled\:selected\:focus\:bg-serious-hover {
+  .enabled\:selected\:color-critical\:bg-critical-subtle {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
-        &:where([data-focused], :focus) {
-          background-color: var(--color-serious-hover);
+        &:where([data-color="critical"]) {
+          background-color: var(--color-critical-subtle);
         }
       }
     }
   }
-  .enabled\:selected\:focus\:fg-highlight {
+  .enabled\:selected\:color-critical\:outline-highlight {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
-        &:where([data-focused], :focus) {
-          color: var(--color-highlight);
-          --icon-color: var(--color-highlight);
+        &:where([data-color="critical"]) {
+          outline-color: var(--color-highlight);
         }
       }
     }
   }
-  .enabled\:selected\:focus\:outline-interactive-hover {
+  .enabled\:selected\:hover\:color-critical\:bg-critical-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
-        &:where([data-focused], :focus) {
-          outline-color: var(--color-interactive-hover);
+        &:where([data-hovered], :hover) {
+          &:where([data-color="critical"]) {
+            background-color: var(--color-critical-hover);
+          }
         }
       }
     }
   }
-  .disabled\:selected\:bg-interactive-disabled {
-    &:where([disabled], [data-disabled], :disabled) {
+  .enabled\:selected\:hover\:color-critical\:outline-interactive-hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
-        background-color: var(--color-interactive-disabled);
+        &:where([data-hovered], :hover) {
+          &:where([data-color="critical"]) {
+            outline-color: var(--color-interactive-hover);
+          }
+        }
+      }
+    }
+  }
+  .enabled\:selected\:focus-visible\:color-critical\:bg-critical-hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
+        &:where([data-focus-visible], :focus-visible) {
+          &:where([data-color="critical"]) {
+            background-color: var(--color-critical-hover);
+          }
+        }
+      }
+    }
+  }
+  .enabled\:selected\:focus-visible\:color-critical\:outline-interactive-hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
+        &:where([data-focus-visible], :focus-visible) {
+          &:where([data-color="critical"]) {
+            outline-color: var(--color-interactive-hover);
+          }
+        }
       }
     }
   }
@@ -4508,13 +5190,6 @@
       }
     }
   }
-  .closed\:\[\&\>\*\:not\(nav\)\]\:hidden {
-    &:where(:not([open], [data-open], :open)) {
-      &>*:not(nav) {
-        display: none;
-      }
-    }
-  }
   .\[\&\[data-placement\]\]\:absolute {
     &[data-placement] {
       position: absolute;
@@ -4662,14 +5337,14 @@ body {
   .hide-cancel::-webkit-search-cancel-button {
     display: none;
   }
-  *::-webkit-scrollbar {
+  ::-webkit-scrollbar {
     width: var(--spacing-l);
     height: var(--spacing-l);
   }
-  *::-webkit-scrollbar-track {
+  ::-webkit-scrollbar-track {
     background: var(--color-interactive);
   }
-  *::-webkit-scrollbar-thumb {
+  ::-webkit-scrollbar-thumb {
     background-color: var(--color-interactive-hover-light);
     border-radius: var(--radius-large);
     border: 5px solid transparent;
@@ -4712,21 +5387,6 @@ body {
     background-size: 1px 4px, 4px 1px;
   }
 }
-@property --tw-translate-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-@property --tw-translate-y {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-@property --tw-translate-z {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
 @property --tw-rotate-x {
   syntax: "*";
   inherits: false;
@@ -4897,6 +5557,21 @@ body {
   inherits: false;
   initial-value: 100%;
 }
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-content {
   syntax: "*";
   initial-value: "";
@@ -4915,9 +5590,6 @@ body {
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
-      --tw-translate-x: 0;
-      --tw-translate-y: 0;
-      --tw-translate-z: 0;
       --tw-rotate-x: initial;
       --tw-rotate-y: initial;
       --tw-rotate-z: initial;
@@ -4957,6 +5629,9 @@ body {
       --tw-drop-shadow-size: initial;
       --tw-text-shadow-color: initial;
       --tw-text-shadow-alpha: 100%;
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
       --tw-content: "";
     }
   }