@accelint/design-toolkit 2.4.3 → 2.6.0

package/dist/styles.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.4 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 @layer properties;
 @font-face {
   font-family: 'Roboto Flex';
@@ -6,7 +6,7 @@
   font-display: swap;
   font-weight: 400;
   src: url(./files/roboto-flex-cyrillic-ext-400-normal.woff2) format('woff2'), url(./files/roboto-flex-cyrillic-ext-400-normal.woff) format('woff');
-  unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
 }
 @font-face {
   font-family: 'Roboto Flex';
@@ -38,7 +38,7 @@
   font-display: swap;
   font-weight: 400;
   src: url(./files/roboto-flex-latin-ext-400-normal.woff2) format('woff2'), url(./files/roboto-flex-latin-ext-400-normal.woff) format('woff');
-  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
 }
 @font-face {
   font-family: 'Roboto Flex';
@@ -46,7 +46,7 @@
   font-display: swap;
   font-weight: 400;
   src: url(./files/roboto-flex-latin-400-normal.woff2) format('woff2'), url(./files/roboto-flex-latin-400-normal.woff) format('woff');
-  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
 }
 @font-face {
   font-family: 'Roboto Mono';
@@ -54,7 +54,7 @@
   font-display: swap;
   font-weight: 400;
   src: url(./files/roboto-mono-cyrillic-ext-400-normal.woff2) format('woff2'), url(./files/roboto-mono-cyrillic-ext-400-normal.woff) format('woff');
-  unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
 }
 @font-face {
   font-family: 'Roboto Mono';
@@ -86,7 +86,7 @@
   font-display: swap;
   font-weight: 400;
   src: url(./files/roboto-mono-latin-ext-400-normal.woff2) format('woff2'), url(./files/roboto-mono-latin-ext-400-normal.woff) format('woff');
-  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
 }
 @font-face {
   font-family: 'Roboto Mono';
@@ -94,7 +94,7 @@
   font-display: swap;
   font-weight: 400;
   src: url(./files/roboto-mono-latin-400-normal.woff2) format('woff2'), url(./files/roboto-mono-latin-400-normal.woff) format('woff');
-  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
 }
 @layer theme, base, components, utilities;
 @layer theme {
@@ -104,6 +104,9 @@
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --animate-spin: spin 1s linear infinite;
+    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --color-surface-default: var(--colors-neutral-10, #0b0b0b);
     --color-surface-raised: var(--colors-neutral-09, #222222);
     --color-surface-overlay: var(--colors-neutral-08, #2f2f31);
@@ -370,9 +373,15 @@
   }
 }
 @layer utilities {
+  .pointer-events-none {
+    pointer-events: none;
+  }
   .invisible {
     visibility: hidden;
   }
+  .visible {
+    visibility: visible;
+  }
   .absolute {
     position: absolute;
   }
@@ -391,33 +400,36 @@
   .top-1\/2 {
     top: calc(1/2 * 100%);
   }
-  .top-\[6px\] {
-    top: 6px;
-  }
-  .top-\[8px\] {
-    top: 8px;
-  }
   .top-\[50\%\] {
     top: 50%;
   }
-  .right-\[8px\] {
-    right: 8px;
-  }
-  .right-xs {
-    right: var(--spacing-xs);
+  .top-\[var\(--classification-banner-height\)\] {
+    top: var(--classification-banner-height);
   }
   .left-1\/2 {
     left: calc(1/2 * 100%);
   }
-  .left-\[7px\] {
-    left: 7px;
-  }
   .left-\[50\%\] {
     left: 50%;
   }
   .left-s {
     left: var(--spacing-s);
   }
+  .z-1 {
+    z-index: 1;
+  }
+  .z-5 {
+    z-index: 5;
+  }
+  .-order-1 {
+    order: calc(1 * -1);
+  }
+  .-order-2 {
+    order: calc(2 * -1);
+  }
+  .-order-3 {
+    order: calc(3 * -1);
+  }
   .order-1 {
     order: 1;
   }
@@ -439,6 +451,9 @@
   .\[grid-column\:2\/-1\] {
     grid-column: 2/-1;
   }
+  .col-\[var\(--drawer-main-cols\)\] {
+    grid-column: var(--drawer-main-cols);
+  }
   .col-span-2 {
     grid-column: span 2 / span 2;
   }
@@ -460,6 +475,9 @@
   .\[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;
   }
@@ -493,9 +511,15 @@
       max-width: 96rem;
     }
   }
+  .m-xl {
+    margin: var(--spacing-xl);
+  }
   .m-xs {
     margin: var(--spacing-xs);
   }
+  .-mx-xs {
+    margin-inline: calc(var(--spacing-xs) * -1);
+  }
   .my-s {
     margin-block: var(--spacing-s);
   }
@@ -520,6 +544,15 @@
   .mb-s {
     margin-bottom: var(--spacing-s);
   }
+  .mb-xl {
+    margin-bottom: var(--spacing-xl);
+  }
+  .mb-xs {
+    margin-bottom: var(--spacing-xs);
+  }
+  .-ml-s {
+    margin-left: calc(var(--spacing-s) * -1);
+  }
   .block {
     display: block;
   }
@@ -541,6 +574,9 @@
   .table {
     display: table;
   }
+  .aspect-square {
+    aspect-ratio: 1 / 1;
+  }
   .size-\[400px\] {
     width: 400px;
     height: 400px;
@@ -581,9 +617,6 @@
     width: var(--spacing-xxs);
     height: var(--spacing-xxs);
   }
-  .h-\[16px\] {
-    height: 16px;
-  }
   .h-\[40px\] {
     height: 40px;
   }
@@ -599,15 +632,24 @@
   .h-\[var\(--icon-size\,var\(--icon-size-m\)\)\] {
     height: var(--icon-size,var(--icon-size-m));
   }
+  .h-dvh {
+    height: 100dvh;
+  }
   .h-full {
     height: 100%;
   }
   .h-m {
     height: var(--spacing-m);
   }
+  .h-oversized {
+    height: var(--spacing-oversized);
+  }
   .h-s {
     height: var(--spacing-s);
   }
+  .h-screen {
+    height: 100vh;
+  }
   .h-xl {
     height: var(--spacing-xl);
   }
@@ -617,17 +659,29 @@
   .max-h-\[200px\] {
     max-height: 200px;
   }
-  .w-\(--trigger-width\) {
-    width: var(--trigger-width);
+  .max-h-full {
+    max-height: 100%;
   }
-  .w-\(--trigger-width\) {
-    width: var(--trigger-width);
+  .min-h-0 {
+    min-height: var(--spacing-0);
   }
-  .w-\[16px\] {
-    width: 16px;
+  .min-h-\[1lh\] {
+    min-height: 1lh;
+  }
+  .w-1\/2 {
+    width: calc(1/2 * 100%);
+  }
+  .w-\[1lh\] {
+    width: 1lh;
+  }
+  .w-\[1lh\] {
+    width: 1lh;
   }
-  .w-\[16px\] {
-    width: 16px;
+  .w-\[50\%\] {
+    width: 50%;
+  }
+  .w-\[50\%\] {
+    width: 50%;
   }
   .w-\[50px\] {
     width: 50px;
@@ -635,6 +689,12 @@
   .w-\[50px\] {
     width: 50px;
   }
+  .w-\[75\%\] {
+    width: 75%;
+  }
+  .w-\[75\%\] {
+    width: 75%;
+  }
   .w-\[80px\] {
     width: 80px;
   }
@@ -671,6 +731,12 @@
   .w-\[300px\] {
     width: 300px;
   }
+  .w-\[480px\] {
+    width: 480px;
+  }
+  .w-\[480px\] {
+    width: 480px;
+  }
   .w-\[500px\] {
     width: 500px;
   }
@@ -704,6 +770,9 @@
   .w-content {
     width: fit-content;
   }
+  .w-dvh {
+    width: 100dvh;
+  }
   .w-fit {
     width: fit-content;
   }
@@ -731,6 +800,9 @@
   .max-w-\[720px\] {
     max-width: 720px;
   }
+  .min-w-\(--trigger-width\) {
+    min-width: var(--trigger-width);
+  }
   .min-w-0 {
     min-width: var(--spacing-0);
   }
@@ -740,9 +812,18 @@
   .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));
+  }
   .min-w-sm {
     min-width: var(--container-sm);
   }
+  .min-w-xl {
+    min-width: var(--spacing-xl);
+  }
+  .flex-1 {
+    flex: 1;
+  }
   .flex-auto {
     flex: auto;
   }
@@ -768,19 +849,9 @@
     --tw-translate-y: 50%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
-  .scale-x-\[-1\] {
-    --tw-scale-x: -1;
-    scale: var(--tw-scale-x) var(--tw-scale-y);
-  }
-  .rotate-180 {
-    rotate: 180deg;
-  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
-  .animate-spin {
-    animation: var(--animate-spin);
-  }
   .cursor-crosshair {
     cursor: crosshair;
   }
@@ -829,6 +900,9 @@
   .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));
   }
@@ -838,6 +912,9 @@
   .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;
   }
@@ -920,6 +997,9 @@
   .gap-x-l {
     column-gap: var(--spacing-l);
   }
+  .gap-x-m {
+    column-gap: var(--spacing-m);
+  }
   .gap-x-oversized {
     column-gap: var(--spacing-oversized);
   }
@@ -1002,9 +1082,17 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
-  .border-t {
-    border-top-style: var(--tw-border-style);
-    border-top-width: 1px;
+  .border-2 {
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+  }
+  .border-b-\[3px\] {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 3px;
+  }
+  .border-dotted {
+    --tw-border-style: dotted;
+    border-style: dotted;
   }
   .border-\[\#E8178A\] {
     border-color: #E8178A;
@@ -1051,6 +1139,9 @@
   .border-transparent {
     border-color: transparent;
   }
+  .border-b-default-dark {
+    border-bottom-color: var(--color-default-dark);
+  }
   .bg-\[\#E8178A\]\/40 {
     background-color: color-mix(in oklab, #E8178A 40%, transparent);
   }
@@ -1204,9 +1295,6 @@
   .object-center {
     object-position: center;
   }
-  .p-0 {
-    padding: var(--spacing-0);
-  }
   .p-l {
     padding: var(--spacing-l);
   }
@@ -1219,9 +1307,18 @@
   .p-xl {
     padding: var(--spacing-xl);
   }
+  .p-xs {
+    padding: var(--spacing-xs);
+  }
   .p-xxs {
     padding: var(--spacing-xxs);
   }
+  .px-0 {
+    padding-inline: var(--spacing-0);
+  }
+  .px-l {
+    padding-inline: var(--spacing-l);
+  }
   .px-s {
     padding-inline: var(--spacing-s);
   }
@@ -1234,39 +1331,36 @@
   .py-xs {
     padding-block: var(--spacing-xs);
   }
+  .pt-px {
+    padding-top: 1px;
+  }
   .pt-s {
     padding-top: var(--spacing-s);
   }
   .pt-xs {
     padding-top: var(--spacing-xs);
   }
-  .pr-\[30px\] {
-    padding-right: 30px;
-  }
-  .pr-\[32px\] {
-    padding-right: 32px;
-  }
   .pr-\[calc\(var\(--room\)\+var\(--spacing-s\)\)\] {
     padding-right: calc(var(--room) + var(--spacing-s));
   }
+  .pr-px {
+    padding-right: 1px;
+  }
   .pb-s {
     padding-bottom: var(--spacing-s);
   }
   .pb-xs {
     padding-bottom: var(--spacing-xs);
   }
-  .pl-\[32px\] {
-    padding-left: 32px;
-  }
-  .pl-\[35px\] {
-    padding-left: 35px;
-  }
   .pl-s {
     padding-left: var(--spacing-s);
   }
   .text-center {
     text-align: center;
   }
+  .text-left {
+    text-align: left;
+  }
   .text-right {
     text-align: right;
   }
@@ -1431,10 +1525,6 @@
     color: var(--color-interactive-default);
     --icon-color: var(--color-interactive-default);
   }
-  .fg-interactive-hover {
-    color: var(--color-interactive-hover);
-    --icon-color: var(--color-interactive-hover);
-  }
   .fg-interactive-hover-light {
     color: var(--color-interactive-hover-light);
     --icon-color: var(--color-interactive-hover-light);
@@ -1464,9 +1554,6 @@
   .text-default-light {
     color: var(--color-default-light);
   }
-  .text-disabled {
-    color: var(--color-disabled);
-  }
   .text-highlight {
     color: var(--color-highlight);
   }
@@ -1519,9 +1606,6 @@
   .outline {
     outline-offset: -1px;
   }
-  .outline-offset-1 {
-    outline-offset: 1px;
-  }
   .outline-advisory-bold {
     outline-color: var(--color-advisory-bold);
   }
@@ -1540,9 +1624,6 @@
   .outline-interactive {
     outline-color: var(--color-interactive);
   }
-  .outline-interactive-disabled {
-    outline-color: var(--color-interactive-disabled);
-  }
   .outline-normal {
     outline-color: var(--color-normal);
   }
@@ -1561,6 +1642,11 @@
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .transition-\[grid-template-columns\,grid-template-rows\] {
+    transition-property: grid-template-columns,grid-template-rows;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .outline-none {
     --tw-outline-style: none;
     outline-style: none;
@@ -1569,6 +1655,39 @@
     -webkit-user-select: none;
     user-select: none;
   }
+  .\[--drawer-main-col-end\:4\] {
+    --drawer-main-col-end: 4;
+  }
+  .\[--drawer-main-col-start\:1\] {
+    --drawer-main-col-start: 1;
+  }
+  .\[--drawer-main-cols\:var\(--drawer-main-col-start\)\/var\(--drawer-main-col-end\)\] {
+    --drawer-main-cols: var(--drawer-main-col-start)/var(--drawer-main-col-end);
+  }
+  .\[--drawer-main-row-end\:4\] {
+    --drawer-main-row-end: 4;
+  }
+  .\[--drawer-main-row-start\:1\] {
+    --drawer-main-row-start: 1;
+  }
+  .\[--drawer-main-rows\:var\(--drawer-main-row-start\)\/var\(--drawer-main-row-end\)\] {
+    --drawer-main-rows: var(--drawer-main-row-start)/var(--drawer-main-row-end);
+  }
+  .\[--drawer-menu-size\:40px\] {
+    --drawer-menu-size: 40px;
+  }
+  .\[--drawer-size-closed\:0\] {
+    --drawer-size-closed: 0;
+  }
+  .\[--drawer-size-large\:400px\] {
+    --drawer-size-large: 400px;
+  }
+  .\[--drawer-size-medium\:200px\] {
+    --drawer-size-medium: 200px;
+  }
+  .\[--drawer-size-small\:100px\] {
+    --drawer-size-small: 100px;
+  }
   .\[--length\:attr\(data-length_type\(\<number\>\)\,0\)\] {
     --length: attr(data-length type(<number>),0);
   }
@@ -1584,6 +1703,12 @@
   .\[--room\:20px\] {
     --room: 20px;
   }
+  .\[--route-layout-grid-cols\:auto_1fr_auto\] {
+    --route-layout-grid-cols: auto 1fr auto;
+  }
+  .\[--route-layout-grid-rows\:auto_1fr_auto\] {
+    --route-layout-grid-rows: auto 1fr auto;
+  }
   .\[background\:--color-default-light\] {
     background: --color-default-light;
   }
@@ -1611,23 +1736,61 @@
   .text-shadow-2xs {
     text-shadow: 0px 1px 0px var(--tw-text-shadow-color, rgb(0 0 0 / 0.15));
   }
-  .group-not-focus-within\/input\:hidden {
-    &:is(:where(.group\/input):not(*:where([data-focus-within], :focus-within)) *) {
-      display: none;
+  .group-not-empty\/input\:group-not-focus-within\/input\:invisible {
+    &:is(:where(.group\/input):not(*:where([data-empty], :empty)) *) {
+      &:is(:where(.group\/input):not(*:where([data-focus-within], :focus-within)) *) {
+        visibility: hidden;
+      }
     }
   }
-  .group-not-has-data-\[slot\=description\]\/item\:row-span-full {
-    &:is(:where(.group\/item):not(*:has(*[data-slot="description"])) *) {
+  .group-not-has-\[\>_\[slot\=description\]\]\/menu-item\:row-span-full {
+    &:is(:where(.group\/menu-item):not(*:has(> [slot=description])) *) {
       grid-row: 1 / -1;
     }
   }
-  .group-empty\:hidden {
-    &:is(:where(.group):where([data-empty], :empty) *) {
-      display: none;
+  .group-open\/combobox-field\:rotate-180 {
+    &:is(:where(.group\/combobox-field):where([open], [data-open], :open) *) {
+      rotate: 180deg;
+    }
+  }
+  .group-open\/combobox-field\:transform {
+    &:is(:where(.group\/combobox-field):where([open], [data-open], :open) *) {
+      transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+    }
+  }
+  .group-open\/drawer\:flex {
+    &:is(:where(.group\/drawer):where([open], [data-open], :open) *) {
+      display: flex;
+    }
+  }
+  .group-open\/drawer\:rotate-180 {
+    &:is(:where(.group\/drawer):where([open], [data-open], :open) *) {
+      rotate: 180deg;
+    }
+  }
+  .group-open\/select-field\:rotate-180 {
+    &:is(:where(.group\/select-field):where([open], [data-open], :open) *) {
+      rotate: 180deg;
+    }
+  }
+  .group-empty\/input\:invisible {
+    &:is(:where(.group\/input):where([data-empty], :empty) *) {
+      visibility: hidden;
+    }
+  }
+  .group-empty\/search-field\:invisible {
+    &:is(:where(.group\/search-field):where([data-empty], :empty) *) {
+      visibility: hidden;
+    }
+  }
+  .group-hover\/menu-item\:fg-inverse-light {
+    &:is(:where(.group\/menu-item):where([data-hovered], :hover) *) {
+      color: var(--color-inverse-light);
+      --icon-color: var(--color-inverse-light);
     }
   }
-  .group-hover\/item\:fg-inverse-light {
-    &:is(:where(.group\/item):where([data-hovered], :hover) *) {
+  .group-focus\/menu-item\:fg-inverse-light {
+    &:is(:where(.group\/menu-item):where([data-focused], :focus) *) {
       color: var(--color-inverse-light);
       --icon-color: var(--color-inverse-light);
     }
@@ -1684,6 +1847,41 @@
       }
     }
   }
+  .group-enabled\/combobox-field\:fg-default-light {
+    &:is(:where(.group\/combobox-field):where(:not([disabled], [data-disabled]), :enabled) *) {
+      color: var(--color-default-light);
+      --icon-color: var(--color-default-light);
+    }
+  }
+  .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) *) {
+        outline-color: var(--color-serious);
+      }
+    }
+  }
+  .group-enabled\/options-item\:fg-default-dark {
+    &:is(:where(.group\/options-item):where(:not([disabled], [data-disabled]), :enabled) *) {
+      color: var(--color-default-dark);
+      --icon-color: var(--color-default-dark);
+    }
+  }
+  .group-enabled\/options-item\:group-hover\/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) *) {
+        color: var(--color-inverse-light);
+        --icon-color: var(--color-inverse-light);
+      }
+    }
+  }
+  .group-enabled\/options-item\:group-focus\/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) *) {
+        color: var(--color-inverse-light);
+        --icon-color: var(--color-inverse-light);
+      }
+    }
+  }
   .group-enabled\/radio\:group-hover\/radio\:outline-interactive-hover {
     &:is(:where(.group\/radio):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/radio):where([data-hovered], :hover) *) {
@@ -1733,11 +1931,6 @@
       }
     }
   }
-  .group-disabled\:hidden {
-    &:is(:where(.group):where([disabled], [data-disabled], :disabled) *) {
-      display: none;
-    }
-  }
   .group-disabled\/accordion\:cursor-not-allowed {
     &:is(:where(.group\/accordion):where([disabled], [data-disabled], :disabled) *) {
       cursor: not-allowed;
@@ -1774,6 +1967,40 @@
       }
     }
   }
+  .group-disabled\/combobox-field\:fg-disabled {
+    &:is(:where(.group\/combobox-field):where([disabled], [data-disabled], :disabled) *) {
+      color: var(--color-disabled);
+      --icon-color: var(--color-disabled);
+    }
+  }
+  .group-disabled\/combobox-field\:outline-interactive-disabled {
+    &:is(:where(.group\/combobox-field):where([disabled], [data-disabled], :disabled) *) {
+      outline-color: var(--color-interactive-disabled);
+    }
+  }
+  .group-disabled\/date-field\:fg-disabled {
+    &:is(:where(.group\/date-field):where([disabled], [data-disabled], :disabled) *) {
+      color: var(--color-disabled);
+      --icon-color: var(--color-disabled);
+    }
+  }
+  .group-disabled\/date-field\:text-disabled {
+    &:is(:where(.group\/date-field):where([disabled], [data-disabled], :disabled) *) {
+      color: var(--color-disabled);
+    }
+  }
+  .group-disabled\/menu-item\:fg-disabled {
+    &:is(:where(.group\/menu-item):where([disabled], [data-disabled], :disabled) *) {
+      color: var(--color-disabled);
+      --icon-color: var(--color-disabled);
+    }
+  }
+  .group-disabled\/options-item\:fg-disabled {
+    &:is(:where(.group\/options-item):where([disabled], [data-disabled], :disabled) *) {
+      color: var(--color-disabled);
+      --icon-color: var(--color-disabled);
+    }
+  }
   .group-disabled\/radio\:text-interactive-disabled {
     &:is(:where(.group\/radio):where([disabled], [data-disabled], :disabled) *) {
       color: var(--color-interactive-disabled);
@@ -1784,6 +2011,17 @@
       outline-color: var(--color-interactive-disabled);
     }
   }
+  .group-disabled\/search-field\:invisible {
+    &:is(:where(.group\/search-field):where([disabled], [data-disabled], :disabled) *) {
+      visibility: hidden;
+    }
+  }
+  .group-disabled\/select-field\:fg-disabled {
+    &:is(:where(.group\/select-field):where([disabled], [data-disabled], :disabled) *) {
+      color: var(--color-disabled);
+      --icon-color: var(--color-disabled);
+    }
+  }
   .group-disabled\/switch\:bg-interactive-disabled {
     &:is(:where(.group\/switch):where([disabled], [data-disabled], :disabled) *) {
       background-color: var(--color-interactive-disabled);
@@ -1821,131 +2059,533 @@
       --icon-color: var(--color-disabled);
     }
   }
-  .group-data-\[disabled\]\/item\:fg-disabled {
-    &:is(:where(.group\/item)[data-disabled] *) {
-      color: var(--color-disabled);
-      --icon-color: var(--color-disabled);
+  .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"]) *) {
+        color: var(--color-default-light);
+        --icon-color: var(--color-default-light);
+      }
     }
   }
-  .group-data-\[focused\]\/item\:fg-inverse-light {
-    &:is(:where(.group\/item)[data-focused] *) {
-      color: var(--color-inverse-light);
-      --icon-color: var(--color-inverse-light);
+  .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"]) *) {
+          color: var(--color-inverse-light);
+          --icon-color: var(--color-inverse-light);
+        }
+      }
     }
   }
-  .group-size-medium\/input\:mr-xs {
-    &:is(:where(.group\/input):where([data-size="medium"]) *) {
-      margin-right: var(--spacing-xs);
+  .group-enabled\/options-item\:group-focus\/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"]) *) {
+          color: var(--color-inverse-light);
+          --icon-color: var(--color-inverse-light);
+        }
+      }
     }
   }
-  .group-size-medium\/input\:w-\[calc\(\(var\(--length\)\*1ch\)\+\(\(var\(--length\)-1\)\*var\(--typography-body-s-spacing\)\)\+\(var\(--spacing-s\)\*2\)\+var\(--room\)\)\] {
-    &:is(:where(.group\/input):where([data-size="medium"]) *) {
-      width: calc((var(--length) * 1ch) + ((var(--length) - 1) * var(--typography-body-s-spacing)) + (var(--spacing-s) * 2) + var(--room));
+  .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"]) *) {
+        color: var(--color-serious);
+        --icon-color: var(--color-serious);
+      }
     }
   }
-  .group-size-medium\/input\:w-\[calc\(\(var\(--length\)\*1ch\)\+\(\(var\(--length\)-1\)\*var\(--typography-body-s-spacing\)\)\+\(var\(--spacing-s\)\*2\)\+var\(--room\)\)\] {
-    &:is(:where(.group\/input):where([data-size="medium"]) *) {
-      width: calc((var(--length) * 1ch) + ((var(--length) - 1) * var(--typography-body-s-spacing)) + (var(--spacing-s) * 2) + var(--room));
+  .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"]) *) {
+          color: var(--color-inverse-light);
+          --icon-color: var(--color-inverse-light);
+        }
+      }
     }
   }
-  .group-size-medium\/input\:max-w-\[400px\] {
-    &:is(:where(.group\/input):where([data-size="medium"]) *) {
-      max-width: 400px;
+  .group-enabled\/options-item\:group-focus\/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"]) *) {
+          color: var(--color-inverse-light);
+          --icon-color: var(--color-inverse-light);
+        }
+      }
     }
   }
-  .group-size-medium\/input\:min-w-\[80px\] {
-    &:is(:where(.group\/input):where([data-size="medium"]) *) {
-      min-width: 80px;
+  .group-placement-left\/drawer\:top-1\/2 {
+    &:is(:where(.group\/drawer):where([data-placement~="left"]) *) {
+      top: calc(1/2 * 100%);
     }
   }
-  .group-size-medium\/input\:min-w-\[160px\] {
-    &:is(:where(.group\/input):where([data-size="medium"]) *) {
-      min-width: 160px;
+  .group-placement-left\/drawer\:top-1\/8 {
+    &:is(:where(.group\/drawer):where([data-placement~="left"]) *) {
+      top: calc(1/8 * 100%);
     }
   }
-  .group-size-medium\/input\:text-body-s {
-    &:is(:where(.group\/input):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\:top-7\/8 {
+    &:is(:where(.group\/drawer):where([data-placement~="left"]) *) {
+      top: calc(7/8 * 100%);
     }
   }
-  .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);
-      font-weight: 400;
-      letter-spacing: var(--typography-body-s-spacing);
-      line-height: var(--typography-body-s-height);
+  .group-placement-left\/drawer\:left-full {
+    &:is(:where(.group\/drawer):where([data-placement~="left"]) *) {
+      left: 100%;
     }
   }
-  .group-size-small\/input\:mr-xxs {
-    &:is(:where(.group\/input):where([data-size="small"]) *) {
-      margin-right: var(--spacing-xxs);
+  .group-placement-left\/drawer\:w-\[var\(--drawer-menu-size\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="left"]) *) {
+      width: var(--drawer-menu-size);
     }
   }
-  .group-size-small\/input\:w-\[calc\(\(var\(--length\)\*1ch\)\+\(\(var\(--length\)-1\)\*var\(--typography-body-xs-spacing\)\)\+\(var\(--spacing-s\)\*2\)\+var\(--room\)\)\] {
-    &:is(:where(.group\/input):where([data-size="small"]) *) {
-      width: calc((var(--length) * 1ch) + ((var(--length) - 1) * var(--typography-body-xs-spacing)) + (var(--spacing-s) * 2) + var(--room));
+  .group-placement-left\/drawer\:w-\[var\(--drawer-menu-size\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="left"]) *) {
+      width: var(--drawer-menu-size);
     }
   }
-  .group-size-small\/input\:w-\[calc\(\(var\(--length\)\*1ch\)\+\(\(var\(--length\)-1\)\*var\(--typography-body-xs-spacing\)\)\+\(var\(--spacing-s\)\*2\)\+var\(--room\)\)\] {
-    &:is(:where(.group\/input):where([data-size="small"]) *) {
-      width: calc((var(--length) * 1ch) + ((var(--length) - 1) * var(--typography-body-xs-spacing)) + (var(--spacing-s) * 2) + var(--room));
+  .group-placement-left\/drawer\:-translate-y-1\/2 {
+    &:is(:where(.group\/drawer):where([data-placement~="left"]) *) {
+      --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
-  .group-size-small\/input\:max-w-\[200px\] {
-    &:is(:where(.group\/input):where([data-size="small"]) *) {
-      max-width: 200px;
+  .group-placement-left\/drawer\:-translate-y-7\/2 {
+    &:is(:where(.group\/drawer):where([data-placement~="left"]) *) {
+      --tw-translate-y: calc(calc(7/2 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
-  .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));
+  .group-placement-left\/drawer\:flex-col {
+    &:is(:where(.group\/drawer):where([data-placement~="left"]) *) {
+      flex-direction: column;
     }
   }
-  .group-size-small\/input\:text-body-xs {
-    &:is(:where(.group\/input):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-placement-left\/drawer\:items-center {
+    &:is(:where(.group\/drawer):where([data-placement~="left"]) *) {
+      align-items: center;
     }
   }
-  .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);
-      font-weight: 400;
-      letter-spacing: var(--typography-body-xs-spacing);
-      line-height: var(--typography-body-xs-height);
+  .group-placement-left\/drawer\:rounded-l-none {
+    &:is(:where(.group\/drawer):where([data-placement~="left"]) *) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
     }
   }
-  .group-orientation-horizontal\:rounded-small {
-    &:is(:where(.group):where([data-orientation="horizontal"]) *) {
-      border-radius: var(--radius-small);
+  .group-placement-left\/drawer\:rounded-l-none {
+    &:is(:where(.group\/drawer):where([data-placement~="left"]) *) {
+      border-top-left-radius: var(--radius-none);
+      border-bottom-left-radius: var(--radius-none);
     }
   }
-  .group-orientation-horizontal\:rounded-b-none {
-    &:is(:where(.group):where([data-orientation="horizontal"]) *) {
-      border-bottom-right-radius: 0;
-      border-bottom-left-radius: 0;
+  .group-placement-right\/drawer\:top-1\/2 {
+    &:is(:where(.group\/drawer):where([data-placement~="right"]) *) {
+      top: calc(1/2 * 100%);
     }
   }
-  .group-orientation-horizontal\:rounded-b-none {
-    &:is(:where(.group):where([data-orientation="horizontal"]) *) {
-      border-bottom-right-radius: var(--radius-none);
-      border-bottom-left-radius: var(--radius-none);
+  .group-placement-right\/drawer\:top-1\/8 {
+    &:is(:where(.group\/drawer):where([data-placement~="right"]) *) {
+      top: calc(1/8 * 100%);
     }
   }
-  .group-orientation-horizontal\:border-b {
-    &:is(:where(.group):where([data-orientation="horizontal"]) *) {
-      border-bottom-style: var(--tw-border-style);
-      border-bottom-width: 1px;
+  .group-placement-right\/drawer\:top-7\/8 {
+    &:is(:where(.group\/drawer):where([data-placement~="right"]) *) {
+      top: calc(7/8 * 100%);
     }
   }
-  .group-orientation-horizontal\:border-highlight {
-    &:is(:where(.group):where([data-orientation="horizontal"]) *) {
-      border-color: var(--color-highlight);
+  .group-placement-right\/drawer\:-left-\[var\(--drawer-menu-size\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="right"]) *) {
+      left: calc(var(--drawer-menu-size) * -1);
+    }
+  }
+  .group-placement-right\/drawer\:w-\[var\(--drawer-menu-size\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="right"]) *) {
+      width: var(--drawer-menu-size);
+    }
+  }
+  .group-placement-right\/drawer\:w-\[var\(--drawer-menu-size\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="right"]) *) {
+      width: var(--drawer-menu-size);
+    }
+  }
+  .group-placement-right\/drawer\:-translate-y-1\/2 {
+    &:is(:where(.group\/drawer):where([data-placement~="right"]) *) {
+      --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+      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);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .group-placement-right\/drawer\:flex-col {
+    &:is(:where(.group\/drawer):where([data-placement~="right"]) *) {
+      flex-direction: column;
+    }
+  }
+  .group-placement-right\/drawer\:items-center {
+    &:is(:where(.group\/drawer):where([data-placement~="right"]) *) {
+      align-items: center;
+    }
+  }
+  .group-placement-right\/drawer\:rounded-r-none {
+    &:is(:where(.group\/drawer):where([data-placement~="right"]) *) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+  .group-placement-right\/drawer\:rounded-r-none {
+    &:is(:where(.group\/drawer):where([data-placement~="right"]) *) {
+      border-top-right-radius: var(--radius-none);
+      border-bottom-right-radius: var(--radius-none);
+    }
+  }
+  .group-placement-top\/drawer\:bottom-0 {
+    &:is(:where(.group\/drawer):where([data-placement~="top"]) *) {
+      bottom: var(--spacing-0);
+    }
+  }
+  .group-placement-top\/drawer\:left-1\/2 {
+    &:is(:where(.group\/drawer):where([data-placement~="top"]) *) {
+      left: calc(1/2 * 100%);
+    }
+  }
+  .group-placement-top\/drawer\:left-1\/8 {
+    &:is(:where(.group\/drawer):where([data-placement~="top"]) *) {
+      left: calc(1/8 * 100%);
+    }
+  }
+  .group-placement-top\/drawer\:left-7\/8 {
+    &:is(:where(.group\/drawer):where([data-placement~="top"]) *) {
+      left: calc(7/8 * 100%);
+    }
+  }
+  .group-placement-top\/drawer\:left-\[50\%\] {
+    &:is(:where(.group\/drawer):where([data-placement~="top"]) *) {
+      left: 50%;
+    }
+  }
+  .group-placement-top\/drawer\:h-\[var\(--drawer-menu-size\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="top"]) *) {
+      height: var(--drawer-menu-size);
+    }
+  }
+  .group-placement-top\/drawer\:-translate-x-1\/2 {
+    &:is(:where(.group\/drawer):where([data-placement~="top"]) *) {
+      --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .group-placement-top\/drawer\:-translate-x-1\/8 {
+    &:is(:where(.group\/drawer):where([data-placement~="top"]) *) {
+      --tw-translate-x: calc(calc(1/8 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .group-placement-top\/drawer\:translate-x-1\/4 {
+    &:is(:where(.group\/drawer):where([data-placement~="top"]) *) {
+      --tw-translate-x: calc(1/4 * 100%);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .group-placement-top\/drawer\:translate-y-\[var\(--drawer-menu-size\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="top"]) *) {
+      --tw-translate-y: var(--drawer-menu-size);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .group-placement-top\/drawer\:transform-\[translateX\(-50\%\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="top"]) *) {
+      transform: translateX(-50%);
+    }
+  }
+  .group-placement-top\/drawer\:flex-row {
+    &:is(:where(.group\/drawer):where([data-placement~="top"]) *) {
+      flex-direction: row;
+    }
+  }
+  .group-placement-top\/drawer\:rounded-t-none {
+    &:is(:where(.group\/drawer):where([data-placement~="top"]) *) {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+  }
+  .group-placement-top\/drawer\:rounded-t-none {
+    &:is(:where(.group\/drawer):where([data-placement~="top"]) *) {
+      border-top-left-radius: var(--radius-none);
+      border-top-right-radius: var(--radius-none);
+    }
+  }
+  .group-placement-bottom\/drawer\:left-1\/2 {
+    &:is(:where(.group\/drawer):where([data-placement~="bottom"]) *) {
+      left: calc(1/2 * 100%);
+    }
+  }
+  .group-placement-bottom\/drawer\:left-1\/8 {
+    &:is(:where(.group\/drawer):where([data-placement~="bottom"]) *) {
+      left: calc(1/8 * 100%);
+    }
+  }
+  .group-placement-bottom\/drawer\:left-7\/8 {
+    &:is(:where(.group\/drawer):where([data-placement~="bottom"]) *) {
+      left: calc(7/8 * 100%);
+    }
+  }
+  .group-placement-bottom\/drawer\:left-\[50\%\] {
+    &:is(:where(.group\/drawer):where([data-placement~="bottom"]) *) {
+      left: 50%;
+    }
+  }
+  .group-placement-bottom\/drawer\:h-\[var\(--drawer-menu-size\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="bottom"]) *) {
+      height: var(--drawer-menu-size);
+    }
+  }
+  .group-placement-bottom\/drawer\:-translate-x-1\/2 {
+    &:is(:where(.group\/drawer):where([data-placement~="bottom"]) *) {
+      --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .group-placement-bottom\/drawer\:-translate-x-1\/8 {
+    &:is(:where(.group\/drawer):where([data-placement~="bottom"]) *) {
+      --tw-translate-x: calc(calc(1/8 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .group-placement-bottom\/drawer\:translate-x-1\/4 {
+    &:is(:where(.group\/drawer):where([data-placement~="bottom"]) *) {
+      --tw-translate-x: calc(1/4 * 100%);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .group-placement-bottom\/drawer\:-translate-y-\[var\(--drawer-menu-size\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="bottom"]) *) {
+      --tw-translate-y: calc(var(--drawer-menu-size) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .group-placement-bottom\/drawer\:transform-\[translateX\(-50\%\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="bottom"]) *) {
+      transform: translateX(-50%);
+    }
+  }
+  .group-placement-bottom\/drawer\:flex-row {
+    &:is(:where(.group\/drawer):where([data-placement~="bottom"]) *) {
+      flex-direction: row;
+    }
+  }
+  .group-placement-bottom\/drawer\:rounded-b-none {
+    &:is(:where(.group\/drawer):where([data-placement~="bottom"]) *) {
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+  .group-placement-bottom\/drawer\:rounded-b-none {
+    &:is(:where(.group\/drawer):where([data-placement~="bottom"]) *) {
+      border-bottom-right-radius: var(--radius-none);
+      border-bottom-left-radius: var(--radius-none);
+    }
+  }
+  .group-size-large\/options\:pt-s {
+    &:is(:where(.group\/options):where([data-size="large"]) *) {
+      padding-top: var(--spacing-s);
+    }
+  }
+  .group-size-large\/options\:pb-s {
+    &:is(:where(.group\/options):where([data-size="large"]) *) {
+      padding-bottom: var(--spacing-s);
+    }
+  }
+  .group-size-medium\/combobox-field\:text-body-s {
+    &:is(:where(.group\/combobox-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\/input\:mr-xs {
+    &:is(:where(.group\/input):where([data-size="medium"]) *) {
+      margin-right: var(--spacing-xs);
+    }
+  }
+  .group-size-medium\/input\:w-\[calc\(\(var\(--length\)\*1ch\)\+\(\(var\(--length\)-1\)\*var\(--typography-body-s-spacing\)\)\+\(var\(--spacing-s\)\*2\)\+var\(--room\)\)\] {
+    &:is(:where(.group\/input):where([data-size="medium"]) *) {
+      width: calc((var(--length) * 1ch) + ((var(--length) - 1) * var(--typography-body-s-spacing)) + (var(--spacing-s) * 2) + var(--room));
+    }
+  }
+  .group-size-medium\/input\:w-\[calc\(\(var\(--length\)\*1ch\)\+\(\(var\(--length\)-1\)\*var\(--typography-body-s-spacing\)\)\+\(var\(--spacing-s\)\*2\)\+var\(--room\)\)\] {
+    &:is(:where(.group\/input):where([data-size="medium"]) *) {
+      width: calc((var(--length) * 1ch) + ((var(--length) - 1) * var(--typography-body-s-spacing)) + (var(--spacing-s) * 2) + var(--room));
+    }
+  }
+  .group-size-medium\/input\:max-w-\[400px\] {
+    &:is(:where(.group\/input):where([data-size="medium"]) *) {
+      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;
+    }
+  }
+  .group-size-medium\/input\:text-body-s {
+    &:is(:where(.group\/input):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\/select-field\:min-w-\[220px\] {
+    &:is(:where(.group\/select-field):where([data-size="medium"]) *) {
+      min-width: 220px;
+    }
+  }
+  .group-size-medium\/select-field\:gap-s {
+    &:is(:where(.group\/select-field):where([data-size="medium"]) *) {
+      gap: var(--spacing-s);
+    }
+  }
+  .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);
+      font-weight: 400;
+      letter-spacing: var(--typography-body-s-spacing);
+      line-height: var(--typography-body-s-height);
+    }
+  }
+  .group-size-small\/combobox-field\:text-body-xs {
+    &:is(:where(.group\/combobox-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\/input\:mr-xxs {
+    &:is(:where(.group\/input):where([data-size="small"]) *) {
+      margin-right: var(--spacing-xxs);
+    }
+  }
+  .group-size-small\/input\:w-\[calc\(\(var\(--length\)\*1ch\)\+\(\(var\(--length\)-1\)\*var\(--typography-body-xs-spacing\)\)\+\(var\(--spacing-s\)\*2\)\+var\(--room\)\)\] {
+    &:is(:where(.group\/input):where([data-size="small"]) *) {
+      width: calc((var(--length) * 1ch) + ((var(--length) - 1) * var(--typography-body-xs-spacing)) + (var(--spacing-s) * 2) + var(--room));
+    }
+  }
+  .group-size-small\/input\:w-\[calc\(\(var\(--length\)\*1ch\)\+\(\(var\(--length\)-1\)\*var\(--typography-body-xs-spacing\)\)\+\(var\(--spacing-s\)\*2\)\+var\(--room\)\)\] {
+    &:is(:where(.group\/input):where([data-size="small"]) *) {
+      width: calc((var(--length) * 1ch) + ((var(--length) - 1) * var(--typography-body-xs-spacing)) + (var(--spacing-s) * 2) + var(--room));
+    }
+  }
+  .group-size-small\/input\:max-w-\[200px\] {
+    &:is(:where(.group\/input):where([data-size="small"]) *) {
+      max-width: 200px;
+    }
+  }
+  .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));
+    }
+  }
+  .group-size-small\/input\:text-body-xs {
+    &:is(:where(.group\/input):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\/options\:pt-xs {
+    &:is(:where(.group\/options):where([data-size="small"]) *) {
+      padding-top: var(--spacing-xs);
+    }
+  }
+  .group-size-small\/options\:pb-xs {
+    &:is(:where(.group\/options):where([data-size="small"]) *) {
+      padding-bottom: var(--spacing-xs);
+    }
+  }
+  .group-size-small\/select-field\:gap-xs {
+    &:is(:where(.group\/select-field):where([data-size="small"]) *) {
+      gap: var(--spacing-xs);
+    }
+  }
+  .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);
+      font-weight: 400;
+      letter-spacing: var(--typography-body-xs-spacing);
+      line-height: var(--typography-body-xs-height);
+    }
+  }
+  .group-layout-grid\/hero\:absolute {
+    &:is(:where(.group\/hero):where([data-layout="grid"]) *) {
+      position: absolute;
+    }
+  }
+  .group-layout-grid\/hero\:top-xxs {
+    &:is(:where(.group\/hero):where([data-layout="grid"]) *) {
+      top: var(--spacing-xxs);
+    }
+  }
+  .group-layout-grid\/hero\:left-xs {
+    &:is(:where(.group\/hero):where([data-layout="grid"]) *) {
+      left: var(--spacing-xs);
+    }
+  }
+  .group-layout-stack\/hero\:mb-l {
+    &:is(:where(.group\/hero):where([data-layout="stack"]) *) {
+      margin-bottom: var(--spacing-l);
+    }
+  }
+  .group-layout-stack\/hero\:size-\[48px\] {
+    &:is(:where(.group\/hero):where([data-layout="stack"]) *) {
+      width: 48px;
+      height: 48px;
+    }
+  }
+  .group-orientation-horizontal\:rounded-small {
+    &:is(:where(.group):where([data-orientation="horizontal"]) *) {
+      border-radius: var(--radius-small);
+    }
+  }
+  .group-orientation-horizontal\:rounded-b-none {
+    &:is(:where(.group):where([data-orientation="horizontal"]) *) {
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+  .group-orientation-horizontal\:rounded-b-none {
+    &:is(:where(.group):where([data-orientation="horizontal"]) *) {
+      border-bottom-right-radius: var(--radius-none);
+      border-bottom-left-radius: var(--radius-none);
+    }
+  }
+  .group-orientation-horizontal\:border-b {
+    &:is(:where(.group):where([data-orientation="horizontal"]) *) {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 1px;
+    }
+  }
+  .group-orientation-horizontal\:border-highlight {
+    &:is(:where(.group):where([data-orientation="horizontal"]) *) {
+      border-color: var(--color-highlight);
     }
   }
   .group-orientation-horizontal\:border-interactive-disabled {
@@ -2139,9 +2779,12 @@
       color: var(--color-default-dark);
     }
   }
-  .placeholder\:text-disabled {
-    &::placeholder {
-      color: var(--color-disabled);
+  .group-enabled\/combobox-field\:placeholder\:fg-default-dark {
+    &:is(:where(.group\/combobox-field):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &::placeholder {
+        color: var(--color-default-dark);
+        --icon-color: var(--color-default-dark);
+      }
     }
   }
   .group-disabled\/text-area-field\:placeholder\:text-disabled {
@@ -2287,12 +2930,6 @@
       }
     }
   }
-  .first\:border-none {
-    &:first-child {
-      --tw-border-style: none;
-      border-style: none;
-    }
-  }
   .open\:bg-highlight-bold {
     &:where([open], [data-open], :open) {
       background-color: var(--color-highlight-bold);
@@ -2309,32 +2946,9 @@
       --icon-color: var(--color-inverse-light);
     }
   }
-  .not-disabled\:read-only\:rounded-none {
-    &:not(*:where([disabled], [data-disabled], :disabled)) {
-      &:where([readonly], [data-readonly], :read-only) {
-        border-radius: 0;
-      }
-    }
-  }
-  .not-disabled\:read-only\:rounded-none {
-    &:not(*:where([disabled], [data-disabled], :disabled)) {
-      &:where([readonly], [data-readonly], :read-only) {
-        border-radius: var(--radius-none);
-      }
-    }
-  }
-  .not-disabled\:read-only\:p-0 {
-    &:not(*:where([disabled], [data-disabled], :disabled)) {
-      &:where([readonly], [data-readonly], :read-only) {
-        padding: var(--spacing-0);
-      }
-    }
-  }
-  .not-disabled\:read-only\:outline-transparent {
-    &:not(*:where([disabled], [data-disabled], :disabled)) {
-      &:where([readonly], [data-readonly], :read-only) {
-        outline-color: transparent;
-      }
+  .invalid\:outline-serious {
+    &:where([invalid], [data-invalid], :invalid) {
+      outline-color: var(--color-serious);
     }
   }
   .empty\:hidden {
@@ -2365,6 +2979,18 @@
       }
     }
   }
+  .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);
@@ -2375,6 +3001,12 @@
       background-color: var(--color-serious-bold);
     }
   }
+  .hover\:fg-default-light {
+    &:where([data-hovered], :hover) {
+      color: var(--color-default-light);
+      --icon-color: var(--color-default-light);
+    }
+  }
   .hover\:fg-interactive-hover {
     &:where([data-hovered], :hover) {
       color: var(--color-interactive-hover);
@@ -2398,12 +3030,6 @@
       outline-color: var(--color-interactive-hover);
     }
   }
-  .hover\:outline-solid {
-    &:where([data-hovered], :hover) {
-      --tw-outline-style: solid;
-      outline-style: solid;
-    }
-  }
   .group-enabled\/accordion\:hover\:bg-interactive-hover-dark {
     &:is(:where(.group\/accordion):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:where([data-hovered], :hover) {
@@ -2411,19 +3037,17 @@
       }
     }
   }
-  .group-enabled\/text-area-field\:hover\:outline-interactive-hover {
-    &:is(:where(.group\/text-area-field):where(:not([disabled], [data-disabled]), :enabled) *) {
+  .group-enabled\/combobox-field\:hover\:outline-interactive-hover {
+    &:is(:where(.group\/combobox-field):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:where([data-hovered], :hover) {
         outline-color: var(--color-interactive-hover);
       }
     }
   }
-  .not-disabled\:read-only\:hover\:outline-transparent {
-    &:not(*:where([disabled], [data-disabled], :disabled)) {
-      &:where([readonly], [data-readonly], :read-only) {
-        &:where([data-hovered], :hover) {
-          outline-color: transparent;
-        }
+  .group-enabled\/text-area-field\:hover\:outline-interactive-hover {
+    &:is(:where(.group\/text-area-field):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:where([data-hovered], :hover) {
+        outline-color: var(--color-interactive-hover);
       }
     }
   }
@@ -2442,6 +3066,18 @@
       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) {
+      color: var(--color-interactive-hover);
+      --icon-color: var(--color-interactive-hover);
+    }
+  }
   .focus\:fg-inverse-light {
     &:where([data-focused], :focus) {
       color: var(--color-inverse-light);
@@ -2459,11 +3095,6 @@
       outline-width: 4px;
     }
   }
-  .focus\:outline-highlight {
-    &:where([data-focused], :focus) {
-      outline-color: var(--color-highlight);
-    }
-  }
   .focus\:outline-interactive-hover {
     &:where([data-focused], :focus) {
       outline-color: var(--color-interactive-hover);
@@ -2475,12 +3106,6 @@
       outline-style: none;
     }
   }
-  .focus\:outline-solid {
-    &:where([data-focused], :focus) {
-      --tw-outline-style: solid;
-      outline-style: solid;
-    }
-  }
   .group-enabled\/text-area-field\:focus\:outline-highlight {
     &:is(:where(.group\/text-area-field):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:where([data-focused], :focus) {
@@ -2488,13 +3113,9 @@
       }
     }
   }
-  .not-disabled\:read-only\:focus\:outline-transparent {
-    &:not(*:where([disabled], [data-disabled], :disabled)) {
-      &:where([readonly], [data-readonly], :read-only) {
-        &:where([data-focused], :focus) {
-          outline-color: transparent;
-        }
-      }
+  .enabled\:cursor-pointer {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      cursor: pointer;
     }
   }
   .enabled\:bg-critical {
@@ -2550,6 +3171,12 @@
       --icon-color: var(--color-interactive);
     }
   }
+  .enabled\:fg-inverse-light {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      color: var(--color-inverse-light);
+      --icon-color: var(--color-inverse-light);
+    }
+  }
   .enabled\:fg-serious {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       color: var(--color-serious);
@@ -2578,6 +3205,13 @@
       }
     }
   }
+  .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\:group-hover\/input\:outline-interactive-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:is(:where(.group\/input):where([data-hovered], :hover) *) {
@@ -2592,6 +3226,13 @@
       }
     }
   }
+  .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\:hover\:bg-critical-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-hovered], :hover) {
@@ -2635,6 +3276,14 @@
       }
     }
   }
+  .enabled\:hover\:fg-inverse-light {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-hovered], :hover) {
+        color: var(--color-inverse-light);
+        --icon-color: var(--color-inverse-light);
+      }
+    }
+  }
   .enabled\:hover\:outline-interactive-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-hovered], :hover) {
@@ -2685,6 +3334,14 @@
       }
     }
   }
+  .enabled\:focus\:fg-inverse-light {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-focused], :focus) {
+        color: var(--color-inverse-light);
+        --icon-color: var(--color-inverse-light);
+      }
+    }
+  }
   .enabled\:focus\:outline-interactive-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-focused], :focus) {
@@ -2723,6 +3380,14 @@
       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 {
@@ -2730,100 +3395,237 @@
       }
     }
   }
-  .data-selected\:outline-highlight {
-    &[data-selected] {
-      outline-color: var(--color-highlight);
+  .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\:hover\:color-info\:bg-highlight-bold {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-hovered], :hover) {
+        &:where([data-color~="info"]) {
+          background-color: var(--color-highlight-bold);
+        }
+      }
+    }
+  }
+  .enabled\:focus\:color-info\:bg-highlight-bold {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-focused], :focus) {
+        &:where([data-color~="info"]) {
+          background-color: var(--color-highlight-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\:focus\:color-serious\:bg-serious-bold {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-focused], :focus) {
+        &:where([data-color~="serious"]) {
+          background-color: var(--color-serious-bold);
+        }
+      }
+    }
+  }
+  .placement-left\:left-\[attr\(data-offset-x_px\,0px\)\] {
+    &:where([data-placement~="left"]) {
+      left: attr(data-offset-x px,0px);
+    }
+  }
+  .placement-left\:col-start-1 {
+    &:where([data-placement~="left"]) {
+      grid-column-start: 1;
+    }
+  }
+  .placement-left\:col-end-2 {
+    &:where([data-placement~="left"]) {
+      grid-column-end: 2;
+    }
+  }
+  .placement-left\:row-start-2 {
+    &:where([data-placement~="left"]) {
+      grid-row-start: 2;
+    }
+  }
+  .placement-left\:row-end-3 {
+    &:where([data-placement~="left"]) {
+      grid-row-end: 3;
+    }
+  }
+  .placement-left\:-translate-x-1\/2 {
+    &:where([data-placement~="left"]) {
+      --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .group-data-\[extend\=bottom\]\/layout\:placement-left\:row-start-1 {
+    &:is(:where(.group\/layout)[data-extend="bottom"] *) {
+      &:where([data-placement~="left"]) {
+        grid-row-start: 1;
+      }
+    }
+  }
+  .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"]) {
+        grid-row-end: 4;
+      }
+    }
+  }
+  .group-data-\[extend\~\=left\]\/layout\:placement-left\:row-span-full {
+    &:is(:where(.group\/layout)[data-extend~="left"] *) {
+      &:where([data-placement~="left"]) {
+        grid-row: 1 / -1;
+      }
+    }
+  }
+  .placement-right\:right-\[attr\(data-offset-x_px\,0px\)\] {
+    &:where([data-placement~="right"]) {
+      right: attr(data-offset-x px,0px);
+    }
+  }
+  .placement-right\:col-start-3 {
+    &:where([data-placement~="right"]) {
+      grid-column-start: 3;
+    }
+  }
+  .placement-right\:col-end-4 {
+    &:where([data-placement~="right"]) {
+      grid-column-end: 4;
+    }
+  }
+  .placement-right\:row-start-2 {
+    &:where([data-placement~="right"]) {
+      grid-row-start: 2;
     }
   }
-  .data-selected\:outline-solid {
-    &[data-selected] {
-      --tw-outline-style: solid;
-      outline-style: solid;
+  .placement-right\:row-end-3 {
+    &:where([data-placement~="right"]) {
+      grid-row-end: 3;
     }
   }
-  .\*\*\:data-\[slot\=description\]\:text-body-xs {
-    :is(& *) {
-      &[data-slot="description"] {
-        font-size: var(--typography-body-xs-size);
-        font-weight: 400;
-        letter-spacing: var(--typography-body-xs-spacing);
-        line-height: var(--typography-body-xs-height);
-      }
+  .placement-right\:translate-x-1\/2 {
+    &:where([data-placement~="right"]) {
+      --tw-translate-x: calc(1/2 * 100%);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
-  .\*\*\:data-\[slot\=description\]\:fg-default-dark {
-    :is(& *) {
-      &[data-slot="description"] {
-        color: var(--color-default-dark);
-        --icon-color: var(--color-default-dark);
+  .group-data-\[extend\=bottom\]\/layout\:placement-right\:row-start-1 {
+    &:is(:where(.group\/layout)[data-extend="bottom"] *) {
+      &:where([data-placement~="right"]) {
+        grid-row-start: 1;
       }
     }
   }
-  .hover\:\*\*\:data-\[slot\=description\]\:fg-inverse-light {
-    &:where([data-hovered], :hover) {
-      :is(& *) {
-        &[data-slot="description"] {
-          color: var(--color-inverse-light);
-          --icon-color: var(--color-inverse-light);
-        }
+  .group-data-\[extend\=left\]\/layout\:placement-right\:z-1 {
+    &:is(:where(.group\/layout)[data-extend="left"] *) {
+      &:where([data-placement~="right"]) {
+        z-index: 1;
       }
     }
   }
-  .focus\:\*\*\:data-\[slot\=description\]\:fg-inverse-light {
-    &:where([data-focused], :focus) {
-      :is(& *) {
-        &[data-slot="description"] {
-          color: var(--color-inverse-light);
-          --icon-color: var(--color-inverse-light);
-        }
+  .group-data-\[extend\=right\]\/layout\:placement-right\:z-10 {
+    &:is(:where(.group\/layout)[data-extend="right"] *) {
+      &:where([data-placement~="right"]) {
+        z-index: 10;
       }
     }
   }
-  .disabled\:\*\*\:data-\[slot\=description\]\:fg-disabled {
-    &:where([disabled], [data-disabled], :disabled) {
-      :is(& *) {
-        &[data-slot="description"] {
-          color: var(--color-disabled);
-          --icon-color: var(--color-disabled);
-        }
+  .group-data-\[extend\=top\]\/layout\:placement-right\:row-end-4 {
+    &:is(:where(.group\/layout)[data-extend="top"] *) {
+      &:where([data-placement~="right"]) {
+        grid-row-end: 4;
       }
     }
   }
-  .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));
+  .group-data-\[extend\~\=right\]\/layout\:placement-right\:row-span-full {
+    &:is(:where(.group\/layout)[data-extend~="right"] *) {
+      &:where([data-placement~="right"]) {
+        grid-row: 1 / -1;
+      }
     }
   }
-  .placement-left\:left-\[attr\(data-offset-x_px\,0px\)\] {
-    &:where([data-placement~="left"]) {
-      left: attr(data-offset-x px,0px);
+  .placement-top\:top-\[attr\(data-offset-y_px\,0px\)\] {
+    &:where([data-placement~="top"]) {
+      top: attr(data-offset-y px,0px);
     }
   }
-  .placement-left\:-translate-x-1\/2 {
-    &:where([data-placement~="left"]) {
-      --tw-translate-x: calc(calc(1/2 * 100%) * -1);
-      translate: var(--tw-translate-x) var(--tw-translate-y);
+  .placement-top\:col-start-2 {
+    &:where([data-placement~="top"]) {
+      grid-column-start: 2;
     }
   }
-  .placement-right\:right-\[attr\(data-offset-x_px\,0px\)\] {
-    &:where([data-placement~="right"]) {
-      right: attr(data-offset-x px,0px);
+  .placement-top\:col-end-3 {
+    &:where([data-placement~="top"]) {
+      grid-column-end: 3;
     }
   }
-  .placement-right\:translate-x-1\/2 {
-    &:where([data-placement~="right"]) {
-      --tw-translate-x: calc(1/2 * 100%);
-      translate: var(--tw-translate-x) var(--tw-translate-y);
+  .placement-top\:row-start-1 {
+    &:where([data-placement~="top"]) {
+      grid-row-start: 1;
     }
   }
-  .placement-top\:top-\[attr\(data-offset-y_px\,0px\)\] {
+  .placement-top\:row-end-2 {
     &:where([data-placement~="top"]) {
-      top: attr(data-offset-y px,0px);
+      grid-row-end: 2;
     }
   }
   .placement-top\:-translate-y-1\/2 {
@@ -2832,17 +3634,93 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
+  .group-data-\[extend\=left\]\/layout\:placement-top\:col-end-4 {
+    &:is(:where(.group\/layout)[data-extend="left"] *) {
+      &:where([data-placement~="top"]) {
+        grid-column-end: 4;
+      }
+    }
+  }
+  .group-data-\[extend\=right\]\/layout\:placement-top\:col-start-1 {
+    &:is(:where(.group\/layout)[data-extend="right"] *) {
+      &:where([data-placement~="top"]) {
+        grid-column-start: 1;
+      }
+    }
+  }
+  .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"]) {
+        grid-column: 1 / -1;
+      }
+    }
+  }
   .placement-bottom\:bottom-\[attr\(data-offset-y_px\,0px\)\] {
     &:where([data-placement~="bottom"]) {
       bottom: attr(data-offset-y px,0px);
     }
   }
+  .placement-bottom\:col-start-2 {
+    &:where([data-placement~="bottom"]) {
+      grid-column-start: 2;
+    }
+  }
+  .placement-bottom\:col-end-3 {
+    &:where([data-placement~="bottom"]) {
+      grid-column-end: 3;
+    }
+  }
+  .placement-bottom\:row-start-3 {
+    &:where([data-placement~="bottom"]) {
+      grid-row-start: 3;
+    }
+  }
+  .placement-bottom\:row-end-4 {
+    &:where([data-placement~="bottom"]) {
+      grid-row-end: 4;
+    }
+  }
   .placement-bottom\:translate-y-1\/2 {
     &:where([data-placement~="bottom"]) {
       --tw-translate-y: calc(1/2 * 100%);
       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"]) {
+        grid-column-end: 4;
+      }
+    }
+  }
+  .group-data-\[extend\=right\]\/layout\:placement-bottom\:col-start-1 {
+    &:is(:where(.group\/layout)[data-extend="right"] *) {
+      &:where([data-placement~="bottom"]) {
+        grid-column-start: 1;
+      }
+    }
+  }
+  .group-data-\[extend\~\=bottom\]\/layout\:placement-bottom\:col-span-full {
+    &:is(:where(.group\/layout)[data-extend~="bottom"] *) {
+      &:where([data-placement~="bottom"]) {
+        grid-column: 1 / -1;
+      }
+    }
+  }
   .size-large\:gap-xs {
     &:where([data-size="large"]) {
       gap: var(--spacing-xs);
@@ -2876,6 +3754,60 @@
       --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;
@@ -2892,6 +3824,11 @@
       padding: var(--spacing-xs);
     }
   }
+  .size-medium\:px-0 {
+    &:where([data-size="medium"]) {
+      padding-inline: var(--spacing-0);
+    }
+  }
   .size-medium\:px-m {
     &:where([data-size="medium"]) {
       padding-inline: var(--spacing-m);
@@ -2912,6 +3849,11 @@
       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);
@@ -2949,6 +3891,60 @@
       --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);
@@ -2980,6 +3976,11 @@
       padding-block: var(--spacing-xs);
     }
   }
+  .size-small\:py-xxs {
+    &:where([data-size="small"]) {
+      padding-block: var(--spacing-xxs);
+    }
+  }
   .size-small\:text-body-xs {
     &:where([data-size="small"]) {
       font-size: var(--typography-body-xs-size);
@@ -3009,6 +4010,60 @@
       --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);
+        }
+      }
+    }
+  }
+  .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);
+        }
+      }
+    }
+  }
+  .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);
+        }
+      }
+    }
+  }
+  .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);
+        }
+      }
+    }
+  }
+  .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);
+        }
+      }
+    }
+  }
+  .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\:gap-xxs {
     &:where([data-size="xsmall"]) {
       gap: var(--spacing-xxs);
@@ -3047,6 +4102,31 @@
       --icon-size: var(--icon-size-xs);
     }
   }
+  .layout-grid\:pl-xxl {
+    &:where([data-layout="grid"]) {
+      padding-left: var(--spacing-xxl);
+    }
+  }
+  .layout-stack\:rounded-large {
+    &:where([data-layout="stack"]) {
+      border-radius: var(--radius-large);
+    }
+  }
+  .layout-stack\:bg-transparent-light {
+    &:where([data-layout="stack"]) {
+      background-color: var(--color-transparent-light);
+    }
+  }
+  .layout-stack\:px-l {
+    &:where([data-layout="stack"]) {
+      padding-inline: var(--spacing-l);
+    }
+  }
+  .layout-stack\:py-xl {
+    &:where([data-layout="stack"]) {
+      padding-block: var(--spacing-xl);
+    }
+  }
   .orientation-horizontal\:flex-col {
     &:where([data-orientation="horizontal"]) {
       flex-direction: column;
@@ -3072,22 +4152,80 @@
       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);
+      }
+    }
+  }
+  .placement-left\:closed\:w-\[var\(--drawer-size-closed\)\] {
+    &:where([data-placement~="left"]) {
+      &:where(:not([open], [data-open], :open)) {
+        width: var(--drawer-size-closed);
+      }
+    }
+  }
+  .placement-right\:closed\:w-\[var\(--drawer-size-closed\)\] {
+    &:where([data-placement~="right"]) {
+      &:where(:not([open], [data-open], :open)) {
+        width: var(--drawer-size-closed);
+      }
+    }
+  }
+  .placement-right\:closed\:w-\[var\(--drawer-size-closed\)\] {
+    &:where([data-placement~="right"]) {
+      &:where(:not([open], [data-open], :open)) {
+        width: var(--drawer-size-closed);
+      }
+    }
+  }
+  .placement-top\:closed\:h-\[var\(--drawer-size-closed\)\] {
+    &:where([data-placement~="top"]) {
+      &:where(:not([open], [data-open], :open)) {
+        height: var(--drawer-size-closed);
+      }
+    }
+  }
+  .placement-bottom\:closed\:h-\[var\(--drawer-size-closed\)\] {
+    &:where([data-placement~="bottom"]) {
+      &:where(:not([open], [data-open], :open)) {
+        height: var(--drawer-size-closed);
+      }
+    }
+  }
   .selected\:bg-highlight-bold {
     &:where([data-selected], :checked) {
       background-color: var(--color-highlight-bold);
     }
   }
+  .selected\:bg-highlight-subtle {
+    &:where([data-selected], :checked) {
+      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 {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
@@ -3322,6 +4460,16 @@
       background-color: var(--color-default-dark);
     }
   }
+  .\[\&\>\*\]\:pointer-events-auto {
+    &>* {
+      pointer-events: auto;
+    }
+  }
+  .\[\&\>\*\]\:my-s {
+    &>* {
+      margin-block: var(--spacing-s);
+    }
+  }
   .\[\&\>\*\]\:p-s {
     &>* {
       padding: var(--spacing-s);
@@ -3360,6 +4508,13 @@
       }
     }
   }
+  .closed\:\[\&\>\*\:not\(nav\)\]\:hidden {
+    &:where(:not([open], [data-open], :open)) {
+      &>*:not(nav) {
+        display: none;
+      }
+    }
+  }
   .\[\&\[data-placement\]\]\:absolute {
     &[data-placement] {
       position: absolute;
@@ -3507,6 +4662,19 @@ body {
   .hide-cancel::-webkit-search-cancel-button {
     display: none;
   }
+  *::-webkit-scrollbar {
+    width: var(--spacing-l);
+    height: var(--spacing-l);
+  }
+  *::-webkit-scrollbar-track {
+    background: var(--color-interactive);
+  }
+  *::-webkit-scrollbar-thumb {
+    background-color: var(--color-interactive-hover-light);
+    border-radius: var(--radius-large);
+    border: 5px solid transparent;
+    background-clip: padding-box;
+  }
   .queryBuilder .rule-lines::before {
     content: '';
     width: 10px;
@@ -3559,21 +4727,6 @@ body {
   inherits: false;
   initial-value: 0;
 }
-@property --tw-scale-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
-@property --tw-scale-y {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
-@property --tw-scale-z {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
 @property --tw-rotate-x {
   syntax: "*";
   inherits: false;
@@ -3754,15 +4907,17 @@ body {
     transform: rotate(360deg);
   }
 }
+@keyframes pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
 @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-scale-x: 1;
-      --tw-scale-y: 1;
-      --tw-scale-z: 1;
       --tw-rotate-x: initial;
       --tw-rotate-y: initial;
       --tw-rotate-z: initial;