@accelint/design-toolkit 1.0.1 → 2.1.0

package/dist/styles.css

@@ -99,10 +99,10 @@
 @layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
+    --font-weight-light: 300;
     --font-weight-normal: 400;
     --font-weight-medium: 500;
-    --default-transition-duration: 150ms;
-    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --animate-spin: spin 1s linear infinite;
     --font-primary: "Roboto Flex", sans-serif;
     --font-display: "Roboto Mono", monospace;
     --color-surface-default: var(--neutral-10, #0b0b0b);
@@ -169,6 +169,10 @@
     --spacing-xl: 24px;
     --spacing-xxl: 40px;
     --spacing-oversized: 80px;
+    --icon-size-l: var(--spacing-xl);
+    --icon-size-m: 20px;
+    --icon-size-s: var(--spacing-l);
+    --icon-size-xs: var(--spacing-m);
   }
 }
 @layer base {
@@ -326,15 +330,36 @@
   .absolute {
     position: absolute;
   }
+  .fixed {
+    position: fixed;
+  }
   .relative {
     position: relative;
   }
   .\[inset\:var\(--badge-inset\,initial\)\] {
     inset: var(--badge-inset,initial);
   }
+  .inset-0 {
+    inset: var(--spacing-0);
+  }
+  .top-1\/2 {
+    top: calc(1/2 * 100%);
+  }
+  .top-\[6px\] {
+    top: 6px;
+  }
+  .top-\[8px\] {
+    top: 8px;
+  }
+  .top-\[50\%\] {
+    top: 50%;
+  }
   .right-\[5px\] {
     right: 5px;
   }
+  .right-\[8px\] {
+    right: 8px;
+  }
   .right-\[20px\] {
     right: 20px;
   }
@@ -344,12 +369,66 @@
   .bottom-\[20px\] {
     bottom: 20px;
   }
+  .left-1\/2 {
+    left: calc(1/2 * 100%);
+  }
+  .left-\[7px\] {
+    left: 7px;
+  }
+  .left-\[50\%\] {
+    left: 50%;
+  }
+  .left-s {
+    left: var(--spacing-s);
+  }
+  .order-1 {
+    order: 1;
+  }
+  .order-2 {
+    order: 2;
+  }
+  .order-3 {
+    order: 3;
+  }
+  .order-4 {
+    order: 4;
+  }
+  .order-5 {
+    order: 5;
+  }
   .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;
+  }
+  .col-start-1 {
+    grid-column-start: 1;
+  }
   .col-start-2 {
     grid-column-start: 2;
   }
+  .col-start-3 {
+    grid-column-start: 3;
+  }
+  .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) {
@@ -374,6 +453,9 @@
   .my-s {
     margin-block: var(--spacing-s);
   }
+  .mt-l {
+    margin-top: var(--spacing-l);
+  }
   .mt-oversized {
     margin-top: var(--spacing-oversized);
   }
@@ -383,11 +465,11 @@
   .mt-xl {
     margin-top: var(--spacing-xl);
   }
-  .mr-xs {
-    margin-right: var(--spacing-xs);
+  .mb-m {
+    margin-bottom: var(--spacing-m);
   }
-  .ml-auto {
-    margin-left: auto;
+  .mb-s {
+    margin-bottom: var(--spacing-s);
   }
   .block {
     display: block;
@@ -401,12 +483,18 @@
   .hidden {
     display: none;
   }
+  .inline {
+    display: inline;
+  }
   .inline-block {
     display: inline-block;
   }
   .inline-flex {
     display: inline-flex;
   }
+  .table {
+    display: table;
+  }
   .size-\[20px\] {
     width: 20px;
     height: 20px;
@@ -419,6 +507,10 @@
     width: 32px;
     height: 32px;
   }
+  .size-\[400px\] {
+    width: 400px;
+    height: 400px;
+  }
   .size-full {
     width: 100%;
     height: 100%;
@@ -455,8 +547,8 @@
     width: var(--spacing-xxs);
     height: var(--spacing-xxs);
   }
-  .\[height\:var\(--icon-size\)\] {
-    height: var(--icon-size);
+  .h-\[16px\] {
+    height: 16px;
   }
   .h-\[40px\] {
     height: 40px;
@@ -464,24 +556,33 @@
   .h-\[90px\] {
     height: 90px;
   }
-  .h-\[var\(--icon-size\,12px\)\] {
-    height: var(--icon-size,12px);
+  .h-\[600px\] {
+    height: 600px;
   }
-  .h-\[var\(--icon-size\,16px\)\] {
-    height: var(--icon-size,16px);
+  .h-\[800px\] {
+    height: 800px;
   }
-  .h-\[var\(--icon-size\,20px\)\] {
-    height: var(--icon-size,20px);
+  .h-\[var\(--icon-size\,var\(--icon-size-m\)\)\] {
+    height: var(--icon-size,var(--icon-size-m));
   }
-  .h-\[var\(--icon-size\,24px\)\] {
-    height: var(--icon-size,24px);
+  .h-full {
+    height: 100%;
   }
   .h-l {
     height: var(--spacing-l);
   }
+  .h-m {
+    height: var(--spacing-m);
+  }
+  .h-s {
+    height: var(--spacing-s);
+  }
   .h-xl {
     height: var(--spacing-xl);
   }
+  .h-xxs {
+    height: var(--spacing-xxs);
+  }
   .max-h-\[200px\] {
     max-height: 200px;
   }
@@ -497,21 +598,30 @@
   .min-h-xxl {
     min-height: var(--spacing-xxl);
   }
-  .\[width\:var\(--icon-size\)\] {
-    width: var(--icon-size);
-  }
   .w-\(--trigger-width\) {
     width: var(--trigger-width);
   }
   .w-\(--trigger-width\) {
     width: var(--trigger-width);
   }
+  .w-\[16px\] {
+    width: 16px;
+  }
+  .w-\[16px\] {
+    width: 16px;
+  }
   .w-\[32px\] {
     width: 32px;
   }
   .w-\[32px\] {
     width: 32px;
   }
+  .w-\[50px\] {
+    width: 50px;
+  }
+  .w-\[50px\] {
+    width: 50px;
+  }
   .w-\[80px\] {
     width: 80px;
   }
@@ -530,66 +640,134 @@
   .w-\[120px\] {
     width: 120px;
   }
+  .w-\[200px\] {
+    width: 200px;
+  }
+  .w-\[200px\] {
+    width: 200px;
+  }
   .w-\[280px\] {
     width: 280px;
   }
   .w-\[280px\] {
     width: 280px;
   }
-  .w-\[size\] {
-    width: size;
+  .w-\[300px\] {
+    width: 300px;
   }
-  .w-\[size\] {
-    width: size;
+  .w-\[300px\] {
+    width: 300px;
   }
-  .w-\[var\(--icon-size\,12px\)\] {
-    width: var(--icon-size,12px);
+  .w-\[500px\] {
+    width: 500px;
   }
-  .w-\[var\(--icon-size\,12px\)\] {
-    width: var(--icon-size,12px);
+  .w-\[500px\] {
+    width: 500px;
   }
-  .w-\[var\(--icon-size\,16px\)\] {
-    width: var(--icon-size,16px);
+  .w-\[600px\] {
+    width: 600px;
   }
-  .w-\[var\(--icon-size\,16px\)\] {
-    width: var(--icon-size,16px);
+  .w-\[600px\] {
+    width: 600px;
   }
-  .w-\[var\(--icon-size\,20px\)\] {
-    width: var(--icon-size,20px);
+  .w-\[960px\] {
+    width: 960px;
   }
-  .w-\[var\(--icon-size\,20px\)\] {
-    width: var(--icon-size,20px);
+  .w-\[960px\] {
+    width: 960px;
   }
-  .w-\[var\(--icon-size\,24px\)\] {
-    width: var(--icon-size,24px);
+  .w-\[size\] {
+    width: size;
+  }
+  .w-\[size\] {
+    width: size;
   }
-  .w-\[var\(--icon-size\,24px\)\] {
-    width: var(--icon-size,24px);
+  .w-\[var\(--icon-size\,var\(--icon-size-m\)\)\] {
+    width: var(--icon-size,var(--icon-size-m));
+  }
+  .w-\[var\(--icon-size\,var\(--icon-size-m\)\)\] {
+    width: var(--icon-size,var(--icon-size-m));
   }
   .w-content {
     width: fit-content;
   }
+  .w-fit {
+    width: fit-content;
+  }
   .w-full {
     width: 100%;
   }
+  .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-0 {
+    min-width: var(--spacing-0);
+  }
+  .min-w-\[280px\] {
+    min-width: 280px;
+  }
+  .min-w-\[320px\] {
+    min-width: 320px;
+  }
   .min-w-l {
     min-width: var(--spacing-l);
   }
+  .flex-auto {
+    flex: auto;
+  }
   .flex-none {
     flex: none;
   }
+  .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);
+  }
+  .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;
   }
@@ -611,15 +789,39 @@
   .grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
+  .grid-cols-\[10px_minmax\(100px\,_1fr\)_min-content\] {
+    grid-template-columns: 10px minmax(100px, 1fr) min-content;
+  }
   .grid-cols-\[auto_1fr\] {
     grid-template-columns: auto 1fr;
   }
-  .grid-cols-subgrid {
-    grid-template-columns: subgrid;
+  .grid-cols-\[auto_1fr_auto\] {
+    grid-template-columns: 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-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;
   }
   .flex-col {
     flex-direction: column;
   }
+  .flex-col-reverse {
+    flex-direction: column-reverse;
+  }
   .flex-row {
     flex-direction: row;
   }
@@ -659,6 +861,12 @@
   .justify-start {
     justify-content: flex-start;
   }
+  .gap-\(--spacing-xxl\) {
+    gap: var(--spacing-xxl);
+  }
+  .gap-\[11px\] {
+    gap: 11px;
+  }
   .gap-l {
     gap: var(--spacing-l);
   }
@@ -674,6 +882,9 @@
   .gap-xs {
     gap: var(--spacing-xs);
   }
+  .gap-xxl {
+    gap: var(--spacing-xxl);
+  }
   .gap-xxs {
     gap: var(--spacing-xxs);
   }
@@ -683,6 +894,9 @@
   .gap-x-oversized {
     column-gap: var(--spacing-oversized);
   }
+  .gap-x-s {
+    column-gap: var(--spacing-s);
+  }
   .gap-x-xxl {
     column-gap: var(--spacing-xxl);
   }
@@ -695,6 +909,20 @@
   .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;
+    white-space: nowrap;
+  }
   .overflow-hidden {
     overflow: hidden;
   }
@@ -725,6 +953,22 @@
   .rounded-small {
     border-radius: var(--radius-small);
   }
+  .rounded-t-large {
+    border-top-left-radius: var(--radius-large);
+    border-top-right-radius: var(--radius-large);
+  }
+  .rounded-l-large {
+    border-top-left-radius: var(--radius-large);
+    border-bottom-left-radius: var(--radius-large);
+  }
+  .rounded-r-large {
+    border-top-right-radius: var(--radius-large);
+    border-bottom-right-radius: var(--radius-large);
+  }
+  .rounded-b-large {
+    border-bottom-right-radius: var(--radius-large);
+    border-bottom-left-radius: var(--radius-large);
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -745,6 +989,9 @@
   .border-default-dark {
     border-color: var(--color-default-dark);
   }
+  .border-default-light {
+    border-color: var(--color-default-light);
+  }
   .border-highlight {
     border-color: var(--color-highlight);
   }
@@ -772,6 +1019,9 @@
   .border-static-light {
     border-color: var(--color-static-light);
   }
+  .border-transparent {
+    border-color: transparent;
+  }
   .bg-\[\#E8178A\]\/40 {
     background-color: color-mix(in oklab, #E8178A 40%, transparent);
   }
@@ -826,6 +1076,12 @@
   .bg-default-light {
     background-color: var(--color-default-light);
   }
+  .bg-default-light\/40 {
+    background-color: var(--color-default-light);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-default-light) 40%, transparent);
+    }
+  }
   .bg-disabled {
     background-color: var(--color-disabled);
   }
@@ -922,6 +1178,9 @@
   .p-0 {
     padding: var(--spacing-0);
   }
+  .p-l {
+    padding: var(--spacing-l);
+  }
   .p-m {
     padding: var(--spacing-m);
   }
@@ -931,6 +1190,9 @@
   .p-s {
     padding: var(--spacing-s);
   }
+  .p-xl {
+    padding: var(--spacing-xl);
+  }
   .p-xs {
     padding: var(--spacing-xs);
   }
@@ -949,21 +1211,39 @@
   .py-xs {
     padding-block: var(--spacing-xs);
   }
+  .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-xl {
     padding-right: var(--spacing-xl);
   }
+  .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-m {
     padding-left: var(--spacing-m);
   }
   .pl-s {
     padding-left: var(--spacing-s);
   }
-  .pl-xs {
-    padding-left: var(--spacing-xs);
-  }
   .text-center {
     text-align: center;
   }
@@ -1080,6 +1360,10 @@
     --tw-leading: 64px;
     line-height: 64px;
   }
+  .font-light {
+    --tw-font-weight: var(--font-weight-light);
+    font-weight: var(--font-weight-light);
+  }
   .font-medium {
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
@@ -1130,6 +1414,10 @@
     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);
@@ -1207,6 +1495,9 @@
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
+  .outline-offset-1 {
+    outline-offset: 1px;
+  }
   .outline-advisory-bold {
     outline-color: var(--color-advisory-bold);
   }
@@ -1216,6 +1507,12 @@
   .outline-highlight {
     outline-color: var(--color-highlight);
   }
+  .outline-highlight-bold\/40 {
+    outline-color: var(--color-highlight-bold);
+    @supports (color: color-mix(in lab, red, red)) {
+      outline-color: color-mix(in oklab, var(--color-highlight-bold) 40%, transparent);
+    }
+  }
   .outline-info-bold {
     outline-color: var(--color-info-bold);
   }
@@ -1237,17 +1534,15 @@
   .outline-serious {
     outline-color: var(--color-serious);
   }
+  .outline-static-dark {
+    outline-color: var(--color-static-dark);
+  }
   .outline-static-light {
     outline-color: var(--color-static-light);
   }
   .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-all {
-    transition-property: all;
-    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;
@@ -1277,12 +1572,33 @@
   .\[--icon-size\:24px\] {
     --icon-size: 24px;
   }
+  .\[--icon-size\:var\(--icon-size-l\)\] {
+    --icon-size: var(--icon-size-l);
+  }
+  .\[--icon-size\:var\(--icon-size-m\)\] {
+    --icon-size: var(--icon-size-m);
+  }
+  .\[--icon-size\:var\(--icon-size-s\)\] {
+    --icon-size: var(--icon-size-s);
+  }
+  .\[--icon-size\:var\(--icon-size-xs\)\] {
+    --icon-size: var(--icon-size-xs);
+  }
   .\[--icon-size\:var\(--spacing-l\)\] {
     --icon-size: var(--spacing-l);
   }
   .\[--icon-size\:var\(--spacing-xl\)\] {
     --icon-size: var(--spacing-xl);
   }
+  .\[--my-font-size\:12px\] {
+    --my-font-size: 12px;
+  }
+  .\[--my-font-size\:var\(--body-m-size\)\] {
+    --my-font-size: var(--body-m-size);
+  }
+  .\[background\:--color-default-light\] {
+    background: --color-default-light;
+  }
   .icon-default-dark {
     --icon-color: var(--color-default-dark);
   }
@@ -1295,29 +1611,17 @@
   .icon-inverse-light {
     --icon-color: var(--color-inverse-light);
   }
-  .icon-size-\[15px\] {
-    --icon-size: 15px;
-  }
-  .icon-size-l {
-    --icon-size: var(--spacing-l);
-  }
-  .icon-size-m {
-    --icon-size: var(--spacing-m);
-  }
-  .icon-size-xl {
-    --icon-size: var(--spacing-xl);
-  }
-  .not-ai-selected\:cursor-not-allowed {
+  .not-dtk-selected\:cursor-not-allowed {
     &:not(*[data-selected]) {
       cursor: not-allowed;
     }
   }
-  .not-ai-selected\:bg-interactive-disabled {
+  .not-dtk-selected\:bg-interactive-disabled {
     &:not(*[data-selected]) {
       background-color: var(--color-interactive-disabled);
     }
   }
-  .not-ai-selected\:icon-disabled {
+  .not-dtk-selected\:icon-disabled {
     &:not(*[data-selected]) {
       --icon-color: var(--color-disabled);
     }
@@ -1384,17 +1688,101 @@
       --icon-color: var(--color-default-light);
     }
   }
-  .group-ai-expanded\:rotate-180 {
+  .group-dtk-orientation-horizontal\:rounded-small {
+    &:is(:where(.group)[data-orientation="horizontal"] *) {
+      border-radius: var(--radius-small);
+    }
+  }
+  .group-dtk-orientation-horizontal\:rounded-b-none {
+    &:is(:where(.group)[data-orientation="horizontal"] *) {
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+  .group-dtk-orientation-horizontal\:rounded-b-none {
+    &:is(:where(.group)[data-orientation="horizontal"] *) {
+      border-bottom-right-radius: var(--radius-none);
+      border-bottom-left-radius: var(--radius-none);
+    }
+  }
+  .group-dtk-orientation-horizontal\:border-b {
+    &:is(:where(.group)[data-orientation="horizontal"] *) {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 1px;
+    }
+  }
+  .group-dtk-orientation-horizontal\:border-highlight {
+    &:is(:where(.group)[data-orientation="horizontal"] *) {
+      border-color: var(--color-highlight);
+    }
+  }
+  .group-dtk-orientation-horizontal\:border-interactive-disabled {
+    &:is(:where(.group)[data-orientation="horizontal"] *) {
+      border-color: var(--color-interactive-disabled);
+    }
+  }
+  .group-dtk-orientation-horizontal\:border-interactive-hover {
+    &:is(:where(.group)[data-orientation="horizontal"] *) {
+      border-color: var(--color-interactive-hover);
+    }
+  }
+  .group-dtk-orientation-horizontal\:border-static-light {
+    &:is(:where(.group)[data-orientation="horizontal"] *) {
+      border-color: var(--color-static-light);
+    }
+  }
+  .group-dtk-orientation-horizontal\:pl-0 {
+    &:is(:where(.group)[data-orientation="horizontal"] *) {
+      padding-left: var(--spacing-0);
+    }
+  }
+  .group-dtk-orientation-vertical\:border {
+    &:is(:where(.group)[data-orientation="vertical"] *) {
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+    }
+  }
+  .group-dtk-orientation-vertical\:border-interactive-hover {
+    &:is(:where(.group)[data-orientation="vertical"] *) {
+      border-color: var(--color-interactive-hover);
+    }
+  }
+  .group-dtk-orientation-vertical\:border-transparent {
+    &:is(:where(.group)[data-orientation="vertical"] *) {
+      border-color: transparent;
+    }
+  }
+  .group-dtk-orientation-vertical\:pt-0 {
+    &:is(:where(.group)[data-orientation="vertical"] *) {
+      padding-top: var(--spacing-0);
+    }
+  }
+  .group-dtk-expanded\:rotate-180 {
     &:is(:where(.group)[data-expanded] *) {
       rotate: 180deg;
     }
   }
-  .group-ai-disabled\:bg-interactive-disabled {
+  .group-dtk-empty\:hidden {
+    &:is(:where(.group)[data-empty] *) {
+      display: none;
+    }
+  }
+  .group-dtk-selected\:rotate-180 {
+    &:is(:where(.group)[data-selected] *) {
+      rotate: 180deg;
+    }
+  }
+  .group-dtk-disabled\:hidden {
+    &:is(:where(.group)[data-disabled] *) {
+      display: none;
+    }
+  }
+  .group-dtk-disabled\:bg-interactive-disabled {
     &:is(:where(.group)[data-disabled] *) {
       background-color: var(--color-interactive-disabled);
     }
   }
-  .group-ai-disabled\:outline-interactive-disabled {
+  .group-dtk-disabled\:outline-interactive-disabled {
     &:is(:where(.group)[data-disabled] *) {
       outline-color: var(--color-interactive-disabled);
     }
@@ -1519,7 +1907,7 @@
       }
     }
   }
-  .group-ai-disabled\:before\:bg-disabled {
+  .group-dtk-disabled\:before\:bg-disabled {
     &:is(:where(.group)[data-disabled] *) {
       &::before {
         content: var(--tw-content);
@@ -1597,6 +1985,11 @@
       background-color: transparent;
     }
   }
+  .focus-within\:outline-highlight {
+    &:focus-within {
+      outline-color: var(--color-highlight);
+    }
+  }
   .hover\:bg-critical-hover {
     &:hover {
       @media (hover: hover) {
@@ -1632,6 +2025,20 @@
       }
     }
   }
+  .hover\:bg-normal {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-normal);
+      }
+    }
+  }
+  .hover\:bg-serious-bold {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-serious-bold);
+      }
+    }
+  }
   .hover\:bg-serious-hover {
     &:hover {
       @media (hover: hover) {
@@ -1670,6 +2077,14 @@
       }
     }
   }
+  .hover\:outline-4 {
+    &:hover {
+      @media (hover: hover) {
+        outline-style: var(--tw-outline-style);
+        outline-width: 4px;
+      }
+    }
+  }
   .hover\:outline-interactive-disabled {
     &:hover {
       @media (hover: hover) {
@@ -1684,6 +2099,14 @@
       }
     }
   }
+  .hover\:outline-solid {
+    &:hover {
+      @media (hover: hover) {
+        --tw-outline-style: solid;
+        outline-style: solid;
+      }
+    }
+  }
   .hover\:icon-default-light {
     &:hover {
       @media (hover: hover) {
@@ -1698,7 +2121,7 @@
       }
     }
   }
-  .not-ai-selected\:hover\:bg-interactive-disabled {
+  .not-dtk-selected\:hover\:bg-interactive-disabled {
     &:not(*[data-selected]) {
       &:hover {
         @media (hover: hover) {
@@ -1731,6 +2154,11 @@
       }
     }
   }
+  .focus\:bg-highlight {
+    &:focus {
+      background-color: var(--color-highlight);
+    }
+  }
   .focus\:bg-interactive-disabled {
     &:focus {
       background-color: var(--color-interactive-disabled);
@@ -1762,6 +2190,17 @@
       --icon-color: var(--color-disabled);
     }
   }
+  .focus\:text-inverse-light {
+    &:focus {
+      color: var(--color-inverse-light);
+    }
+  }
+  .focus\:outline-4 {
+    &:focus {
+      outline-style: var(--tw-outline-style);
+      outline-width: 4px;
+    }
+  }
   .focus\:outline-highlight {
     &:focus {
       outline-color: var(--color-highlight);
@@ -1777,12 +2216,29 @@
       outline-color: var(--color-interactive-hover);
     }
   }
+  .focus\:outline-serious {
+    &:focus {
+      outline-color: var(--color-serious);
+    }
+  }
+  .focus\:outline-none {
+    &:focus {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+  }
+  .focus\:outline-solid {
+    &:focus {
+      --tw-outline-style: solid;
+      outline-style: solid;
+    }
+  }
   .focus\:icon-default-light {
     &:focus {
       --icon-color: var(--color-default-light);
     }
   }
-  .not-ai-selected\:focus\:bg-interactive-disabled {
+  .not-dtk-selected\:focus\:bg-interactive-disabled {
     &:not(*[data-selected]) {
       &:focus {
         background-color: var(--color-interactive-disabled);
@@ -1798,6 +2254,17 @@
       }
     }
   }
+  .data-selected\:outline-highlight {
+    &[data-selected] {
+      outline-color: var(--color-highlight);
+    }
+  }
+  .data-selected\:outline-solid {
+    &[data-selected] {
+      --tw-outline-style: solid;
+      outline-style: solid;
+    }
+  }
   .\*\*\:data-\[slot\=description\]\:text-body-xs {
     :is(& *) {
       &[data-slot="description"] {
@@ -1828,64 +2295,53 @@
       }
     }
   }
-  .data-\[variant\=compact\]\:gap-xs {
-    &[data-variant="compact"] {
-      gap: var(--spacing-xs);
+  .md\:grid-cols-3 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
     }
   }
-  .data-\[variant\=compact\]\:text-header-s {
-    &[data-variant="compact"] {
-      font-size: var(--header-s-size);
-      font-weight: 500;
-      letter-spacing: 0.4px;
-      line-height: var(--header-s-height);
+  .lg\:grid-cols-4 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
-  .data-\[variant\=compact\]\:icon-size-l {
-    &[data-variant="compact"] {
-      --icon-size: var(--spacing-l);
+  .dtk-orientation-horizontal\:flex-col {
+    &[data-orientation="horizontal"] {
+      flex-direction: column;
     }
   }
-  .data-\[variant\=cozy\]\:gap-s {
-    &[data-variant="cozy"] {
-      gap: var(--spacing-s);
+  .dtk-orientation-horizontal\:flex-row {
+    &[data-orientation="horizontal"] {
+      flex-direction: row;
     }
   }
-  .data-\[variant\=cozy\]\:text-header-m {
-    &[data-variant="cozy"] {
-      font-size: var(--header-m-size);
-      font-weight: 500;
-      letter-spacing: 0.25px;
-      line-height: var(--header-m-height);
+  .dtk-orientation-vertical\:gap-xs {
+    &[data-orientation="vertical"] {
+      gap: var(--spacing-xs);
     }
   }
-  .data-\[variant\=cozy\]\:icon-size-xl {
-    &[data-variant="cozy"] {
-      --icon-size: var(--spacing-xl);
+  .dtk-hover\:bg-normal {
+    &[data-hovered] {
+      background-color: var(--color-normal);
     }
   }
-  .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));
+  .dtk-focus\:bg-highlight-bold {
+    &[data-focused] {
+      background-color: var(--color-highlight-bold);
     }
   }
-  .ai-focus\:bg-highlight-bold {
+  .dtk-focus\:bg-serious-bold {
     &[data-focused] {
-      background-color: var(--color-highlight-bold);
+      background-color: var(--color-serious-bold);
     }
   }
-  .ai-focus\:fg-inverse-light {
+  .dtk-focus\:fg-inverse-light {
     &[data-focused] {
       color: var(--color-inverse-light);
       --icon-color: var(--color-inverse-light);
     }
   }
-  .ai-focus\:\*\*\:data-\[slot\=description\]\:fg-inverse-light {
+  .dtk-focus\:\*\*\:data-\[slot\=description\]\:fg-inverse-light {
     &[data-focused] {
       :is(& *) {
         &[data-slot="description"] {
@@ -1895,72 +2351,72 @@
       }
     }
   }
-  .ai-pressed\:bg-critical-hover {
+  .dtk-pressed\:bg-critical-hover {
     &[data-pressed] {
       background-color: var(--color-critical-hover);
     }
   }
-  .ai-pressed\:bg-interactive-hover-dark {
+  .dtk-pressed\:bg-interactive-hover-dark {
     &[data-pressed] {
       background-color: var(--color-interactive-hover-dark);
     }
   }
-  .ai-pressed\:bg-interactive-hover-light {
+  .dtk-pressed\:bg-interactive-hover-light {
     &[data-pressed] {
       background-color: var(--color-interactive-hover-light);
     }
   }
-  .ai-pressed\:bg-serious-hover {
+  .dtk-pressed\:bg-serious-hover {
     &[data-pressed] {
       background-color: var(--color-serious-hover);
     }
   }
-  .ai-pressed\:bg-transparent {
+  .dtk-pressed\:bg-transparent {
     &[data-pressed] {
       background-color: transparent;
     }
   }
-  .ai-pressed\:outline-interactive-hover {
+  .dtk-pressed\:outline-interactive-hover {
     &[data-pressed] {
       outline-color: var(--color-interactive-hover);
     }
   }
-  .ai-pressed\:icon-default-light {
+  .dtk-pressed\:icon-default-light {
     &[data-pressed] {
       --icon-color: var(--color-default-light);
     }
   }
-  .ai-selected\:cursor-default {
+  .dtk-selected\:cursor-default {
     &[data-selected] {
       cursor: default;
     }
   }
-  .ai-selected\:bg-highlight-subtle {
+  .dtk-selected\:bg-highlight-subtle {
     &[data-selected] {
       background-color: var(--color-highlight-subtle);
     }
   }
-  .ai-selected\:bg-transparent {
+  .dtk-selected\:bg-transparent {
     &[data-selected] {
       background-color: transparent;
     }
   }
-  .ai-selected\:outline-highlight {
+  .dtk-selected\:outline-highlight {
     &[data-selected] {
       outline-color: var(--color-highlight);
     }
   }
-  .ai-selected\:outline-interactive-disabled {
+  .dtk-selected\:outline-interactive-disabled {
     &[data-selected] {
       outline-color: var(--color-interactive-disabled);
     }
   }
-  .ai-selected\:icon-highlight {
+  .dtk-selected\:icon-highlight {
     &[data-selected] {
       --icon-color: var(--color-highlight);
     }
   }
-  .ai-selected\:hover\:bg-highlight-subtle {
+  .dtk-selected\:hover\:bg-highlight-subtle {
     &[data-selected] {
       &:hover {
         @media (hover: hover) {
@@ -1969,7 +2425,7 @@
       }
     }
   }
-  .ai-selected\:hover\:bg-transparent {
+  .dtk-selected\:hover\:bg-transparent {
     &[data-selected] {
       &:hover {
         @media (hover: hover) {
@@ -1978,47 +2434,47 @@
       }
     }
   }
-  .ai-selected\:focus\:bg-highlight-subtle {
+  .dtk-selected\:focus\:bg-highlight-subtle {
     &[data-selected] {
       &:focus {
         background-color: var(--color-highlight-subtle);
       }
     }
   }
-  .ai-selected\:focus\:bg-transparent {
+  .dtk-selected\:focus\:bg-transparent {
     &[data-selected] {
       &:focus {
         background-color: transparent;
       }
     }
   }
-  .ai-disabled\:cursor-default {
+  .dtk-disabled\:cursor-default {
     &[data-disabled] {
       cursor: default;
     }
   }
-  .ai-disabled\:cursor-not-allowed {
+  .dtk-disabled\:cursor-not-allowed {
     &[data-disabled] {
       cursor: not-allowed;
     }
   }
-  .ai-disabled\:bg-transparent {
+  .dtk-disabled\:bg-transparent {
     &[data-disabled] {
       background-color: transparent;
     }
   }
-  .ai-disabled\:fg-disabled {
+  .dtk-disabled\:fg-disabled {
     &[data-disabled] {
       color: var(--color-disabled);
       --icon-color: var(--color-disabled);
     }
   }
-  .ai-disabled\:text-interactive-disabled {
+  .dtk-disabled\:text-interactive-disabled {
     &[data-disabled] {
       color: var(--color-interactive-disabled);
     }
   }
-  .ai-disabled\:\*\*\:data-\[slot\=description\]\:fg-disabled {
+  .dtk-disabled\:\*\*\:data-\[slot\=description\]\:fg-disabled {
     &[data-disabled] {
       :is(& *) {
         &[data-slot="description"] {
@@ -2028,6 +2484,11 @@
       }
     }
   }
+  .\[\&_span\]\:pl-s {
+    & span {
+      padding-left: var(--spacing-s);
+    }
+  }
   .\[\&\:empty\]\:before\:content-\[\'CUI\'\] {
     &:empty {
       &::before {
@@ -2125,6 +2586,49 @@
       }
     }
   }
+  .\[\&\:nth-child\(3n\)\]\:bg-default-dark {
+    &:nth-child(3n) {
+      background-color: var(--color-default-dark);
+    }
+  }
+  .\[\&\>\*\]\:p-s {
+    &>* {
+      padding: var(--spacing-s);
+    }
+  }
+  .\[\&\>\*\]\:p-xs {
+    &>* {
+      padding: var(--spacing-xs);
+    }
+  }
+  .\[\&\>\*\]\:text-header-m {
+    &>* {
+      font-size: var(--header-m-size);
+      font-weight: 500;
+      letter-spacing: 0.25px;
+      line-height: var(--header-m-height);
+    }
+  }
+  .\[\&\>\*\]\:leading-\[0\] {
+    &>* {
+      --tw-leading: 0;
+      line-height: 0;
+    }
+  }
+  .dtk-orientation-horizontal\:\[\&\>\*\]\:pr-s {
+    &[data-orientation="horizontal"] {
+      &>* {
+        padding-right: var(--spacing-s);
+      }
+    }
+  }
+  .dtk-orientation-horizontal\:\[\&\>\*\]\:pl-s {
+    &[data-orientation="horizontal"] {
+      &>* {
+        padding-left: var(--spacing-s);
+      }
+    }
+  }
 }
 :root {
   --neutral-01: #ffffff;
@@ -2221,6 +2725,77 @@
   --button-xs-size: 10px;
   --button-xs-height: 12px;
 }
+@layer components {
+  .hide-cancel::-webkit-search-cancel-button {
+    display: none;
+  }
+  .queryBuilder .rule-lines::before {
+    content: '';
+    width: 10px;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    background-image: repeating-linear-gradient(to bottom, var(--neutral-04), var(--neutral-04)), repeating-linear-gradient(to right, var(--neutral-04), var(--neutral-04));
+    background-position: left -1px, center;
+    background-repeat: repeat-y, repeat-x;
+    background-size: 1px 4px, 4px 1px;
+  }
+  .queryBuilder .group > span.rule-lines:last-of-type::before {
+    content: '';
+    width: 10px;
+    position: absolute;
+    top: 0;
+    bottom: 50%;
+    left: 50%;
+    background-image: repeating-linear-gradient(to bottom,var(--neutral-04), var(--neutral-04)), repeating-linear-gradient(to right, var(--neutral-04), var(--neutral-04));
+    background-position: left -1px, bottom;
+    background-repeat: repeat-y, repeat-x;
+    background-size: 1px 4px, 4px 1px;
+  }
+  .queryBuilder .group > span.rule-lines:last-of-type:has(~ div.group)::before {
+    content: '';
+    width: 10px;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    background-image: repeating-linear-gradient(to bottom, var(--neutral-04), var(--neutral-04)), repeating-linear-gradient(to right, var(--neutral-04), var(--neutral-04));
+    background-position: left -1px, center;
+    background-repeat: repeat-y, repeat-x;
+    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-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;
@@ -2382,9 +2957,20 @@
   initial-value: "";
   inherits: false;
 }
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 @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;