@accelint/design-toolkit 3.0.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,42 +803,21 @@
   .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;
   }
@@ -1009,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;
@@ -1764,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;
@@ -1985,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);
@@ -2386,6 +2284,49 @@
       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"]) *) {
@@ -2456,6 +2397,14 @@
       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"]) *) {
@@ -2575,6 +2524,62 @@
       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"]) *) {
@@ -2701,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);
@@ -2780,6 +2800,94 @@
       flex-basis: calc(1/3 * 100%);
     }
   }
+  .group-orientation-horizontal\/slider\:top-1\/2 {
+    &:is(:where(.group\/slider):where([data-orientation="horizontal"]) *) {
+      top: calc(1/2 * 100%);
+    }
+  }
+  .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-horizontal\/slider\:left-\[calc\(attr\(data-start_\%\)\*100\)\] {
+    &:is(:where(.group\/slider):where([data-orientation="horizontal"]) *) {
+      left: calc(attr(data-start %) * 100);
+    }
+  }
+  .group-orientation-horizontal\/slider\:order-2 {
+    &:is(:where(.group\/slider):where([data-orientation="horizontal"]) *) {
+      order: 2;
+    }
+  }
+  .group-orientation-horizontal\/slider\:h-\[20px\] {
+    &:is(:where(.group\/slider):where([data-orientation="horizontal"]) *) {
+      height: 20px;
+    }
+  }
+  .group-orientation-horizontal\/slider\:h-xxs {
+    &:is(:where(.group\/slider):where([data-orientation="horizontal"]) *) {
+      height: var(--spacing-xxs);
+    }
+  }
+  .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);
@@ -2801,6 +2909,128 @@
       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;
@@ -2939,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 {
@@ -3082,9 +3319,9 @@
       }
     }
   }
-  .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 {
@@ -4162,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);
@@ -4307,11 +4539,77 @@
       --icon-size: var(--icon-size-xs);
     }
   }
+  .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)));
+      }
+    }
+  }
+  .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)));
+      }
+    }
+  }
+  .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)));
+      }
+    }
+  }
+  .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)));
+      }
+    }
+  }
+  .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)));
+      }
+    }
+  }
+  .layout-grid\:grid {
+    &:where([data-layout="grid"]) {
+      display: grid;
+    }
+  }
   .layout-grid\:pl-xxl {
     &:where([data-layout="grid"]) {
       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);
@@ -4332,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;
@@ -4347,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;
@@ -4357,6 +4698,27 @@
       gap: var(--spacing-xs);
     }
   }
+  .orientation-vertical\:layout-grid\:grid-cols-\[auto_auto_auto\] {
+    &:where([data-orientation="vertical"]) {
+      &:where([data-layout="grid"]) {
+        grid-template-columns: auto auto auto;
+      }
+    }
+  }
+  .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;
+      }
+    }
+  }
+  .orientation-vertical\:layout-stack\:flex-col {
+    &:where([data-orientation="vertical"]) {
+      &:where([data-layout="stack"]) {
+        flex-direction: column;
+      }
+    }
+  }
   .focus-visible-within\:outline-highlight {
     &:where(:has([data-focus-visible], :focus-visible)) {
       outline-color: var(--color-highlight);
@@ -4975,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;
@@ -5025,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;
@@ -5210,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: "";
@@ -5228,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;
@@ -5270,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: "";
     }
   }