@accelint/design-toolkit 1.0.0 → 2.0.0

package/dist/styles.css

@@ -99,8 +99,10 @@
 @layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
+    --font-weight-light: 300;
     --font-weight-normal: 400;
     --font-weight-medium: 500;
+    --animate-spin: spin 1s linear infinite;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --font-primary: "Roboto Flex", sans-serif;
@@ -326,21 +328,51 @@
   .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;
+  }
   .right-\[5px\] {
     right: 5px;
   }
+  .right-\[8px\] {
+    right: 8px;
+  }
   .right-\[20px\] {
     right: 20px;
   }
+  .right-xs {
+    right: var(--spacing-xs);
+  }
   .bottom-\[20px\] {
     bottom: 20px;
   }
+  .left-\[7px\] {
+    left: 7px;
+  }
+  .left-s {
+    left: var(--spacing-s);
+  }
+  .col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+  .col-span-full {
+    grid-column: 1 / -1;
+  }
   .container {
     width: 100%;
     @media (width >= 40rem) {
@@ -359,12 +391,33 @@
       max-width: 96rem;
     }
   }
+  .m-xs {
+    margin: var(--spacing-xs);
+  }
+  .my-s {
+    margin-block: var(--spacing-s);
+  }
+  .mt-l {
+    margin-top: var(--spacing-l);
+  }
   .mt-oversized {
     margin-top: var(--spacing-oversized);
   }
+  .mt-s {
+    margin-top: var(--spacing-s);
+  }
   .mt-xl {
     margin-top: var(--spacing-xl);
   }
+  .mr-s {
+    margin-right: var(--spacing-s);
+  }
+  .mb-m {
+    margin-bottom: var(--spacing-m);
+  }
+  .mb-s {
+    margin-bottom: var(--spacing-s);
+  }
   .ml-auto {
     margin-left: auto;
   }
@@ -377,12 +430,18 @@
   .grid {
     display: grid;
   }
+  .hidden {
+    display: none;
+  }
   .inline-block {
     display: inline-block;
   }
   .inline-flex {
     display: inline-flex;
   }
+  .table {
+    display: table;
+  }
   .size-\[20px\] {
     width: 20px;
     height: 20px;
@@ -434,12 +493,21 @@
   .\[height\:var\(--icon-size\)\] {
     height: var(--icon-size);
   }
+  .h-\[16px\] {
+    height: 16px;
+  }
   .h-\[40px\] {
     height: 40px;
   }
   .h-\[90px\] {
     height: 90px;
   }
+  .h-\[600px\] {
+    height: 600px;
+  }
+  .h-\[800px\] {
+    height: 800px;
+  }
   .h-\[var\(--icon-size\,12px\)\] {
     height: var(--icon-size,12px);
   }
@@ -452,12 +520,18 @@
   .h-\[var\(--icon-size\,24px\)\] {
     height: var(--icon-size,24px);
   }
+  .h-full {
+    height: 100%;
+  }
   .h-l {
     height: var(--spacing-l);
   }
   .h-xl {
     height: var(--spacing-xl);
   }
+  .max-h-\[200px\] {
+    max-height: 200px;
+  }
   .min-h-\[20px\] {
     min-height: 20px;
   }
@@ -473,6 +547,18 @@
   .\[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;
   }
@@ -503,6 +589,30 @@
   .w-\[280px\] {
     width: 280px;
   }
+  .w-\[300px\] {
+    width: 300px;
+  }
+  .w-\[300px\] {
+    width: 300px;
+  }
+  .w-\[500px\] {
+    width: 500px;
+  }
+  .w-\[500px\] {
+    width: 500px;
+  }
+  .w-\[600px\] {
+    width: 600px;
+  }
+  .w-\[600px\] {
+    width: 600px;
+  }
+  .w-\[960px\] {
+    width: 960px;
+  }
+  .w-\[960px\] {
+    width: 960px;
+  }
   .w-\[size\] {
     width: size;
   }
@@ -536,6 +646,9 @@
   .w-content {
     width: fit-content;
   }
+  .w-fit {
+    width: fit-content;
+  }
   .w-full {
     width: 100%;
   }
@@ -545,15 +658,44 @@
   .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-none {
     flex: none;
   }
+  .-translate-y-1\/2 {
+    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+    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;
   }
@@ -575,6 +717,15 @@
   .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-\[minmax\(100px\,_1fr\)_min-content\] {
+    grid-template-columns: minmax(100px, 1fr) min-content;
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -641,6 +792,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);
   }
@@ -653,9 +807,20 @@
   .gap-y-xxl {
     row-gap: var(--spacing-xxl);
   }
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   .overflow-hidden {
     overflow: hidden;
   }
+  .overflow-x-clip {
+    overflow-x: clip;
+  }
+  .overflow-y-auto {
+    overflow-y: auto;
+  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -677,10 +842,30 @@
   .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;
   }
+  .border-t {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+  }
   .border-\[\#E8178A\] {
     border-color: #E8178A;
   }
@@ -690,6 +875,12 @@
   .border-critical {
     border-color: var(--color-critical);
   }
+  .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);
   }
@@ -717,6 +908,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);
   }
@@ -867,6 +1061,9 @@
   .p-0 {
     padding: var(--spacing-0);
   }
+  .p-l {
+    padding: var(--spacing-l);
+  }
   .p-m {
     padding: var(--spacing-m);
   }
@@ -876,6 +1073,9 @@
   .p-s {
     padding: var(--spacing-s);
   }
+  .p-xl {
+    padding: var(--spacing-xl);
+  }
   .p-xs {
     padding: var(--spacing-xs);
   }
@@ -894,15 +1094,30 @@
   .py-xs {
     padding-block: var(--spacing-xs);
   }
+  .pr-\[30px\] {
+    padding-right: 30px;
+  }
+  .pr-\[32px\] {
+    padding-right: 32px;
+  }
   .pr-xl {
     padding-right: var(--spacing-xl);
   }
+  .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;
   }
@@ -1019,6 +1234,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);
@@ -1069,6 +1288,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);
@@ -1146,6 +1369,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);
   }
@@ -1176,6 +1402,12 @@
   .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,);
   }
@@ -1240,6 +1472,9 @@
   .icon-size-m {
     --icon-size: var(--spacing-m);
   }
+  .icon-size-xl {
+    --icon-size: var(--spacing-xl);
+  }
   .not-ai-selected\:cursor-not-allowed {
     &:not(*[data-selected]) {
       cursor: not-allowed;
@@ -1317,11 +1552,90 @@
       --icon-color: var(--color-default-light);
     }
   }
+  .group-ai-orientation-horizontal\:rounded-small {
+    &:is(:where(.group)[data-orientation="horizontal"] *) {
+      border-radius: var(--radius-small);
+    }
+  }
+  .group-ai-orientation-horizontal\:rounded-b-none {
+    &:is(:where(.group)[data-orientation="horizontal"] *) {
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+  .group-ai-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-ai-orientation-horizontal\:border-b {
+    &:is(:where(.group)[data-orientation="horizontal"] *) {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 1px;
+    }
+  }
+  .group-ai-orientation-horizontal\:border-highlight {
+    &:is(:where(.group)[data-orientation="horizontal"] *) {
+      border-color: var(--color-highlight);
+    }
+  }
+  .group-ai-orientation-horizontal\:border-interactive-disabled {
+    &:is(:where(.group)[data-orientation="horizontal"] *) {
+      border-color: var(--color-interactive-disabled);
+    }
+  }
+  .group-ai-orientation-horizontal\:border-interactive-hover {
+    &:is(:where(.group)[data-orientation="horizontal"] *) {
+      border-color: var(--color-interactive-hover);
+    }
+  }
+  .group-ai-orientation-horizontal\:border-static-light {
+    &:is(:where(.group)[data-orientation="horizontal"] *) {
+      border-color: var(--color-static-light);
+    }
+  }
+  .group-ai-orientation-horizontal\:pl-0 {
+    &:is(:where(.group)[data-orientation="horizontal"] *) {
+      padding-left: var(--spacing-0);
+    }
+  }
+  .group-ai-orientation-vertical\:border {
+    &:is(:where(.group)[data-orientation="vertical"] *) {
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+    }
+  }
+  .group-ai-orientation-vertical\:border-interactive-hover {
+    &:is(:where(.group)[data-orientation="vertical"] *) {
+      border-color: var(--color-interactive-hover);
+    }
+  }
+  .group-ai-orientation-vertical\:border-transparent {
+    &:is(:where(.group)[data-orientation="vertical"] *) {
+      border-color: transparent;
+    }
+  }
+  .group-ai-orientation-vertical\:pt-0 {
+    &:is(:where(.group)[data-orientation="vertical"] *) {
+      padding-top: var(--spacing-0);
+    }
+  }
   .group-ai-expanded\:rotate-180 {
     &:is(:where(.group)[data-expanded] *) {
       rotate: 180deg;
     }
   }
+  .group-ai-empty\:hidden {
+    &:is(:where(.group)[data-empty] *) {
+      display: none;
+    }
+  }
+  .group-ai-disabled\:hidden {
+    &:is(:where(.group)[data-disabled] *) {
+      display: none;
+    }
+  }
   .group-ai-disabled\:bg-interactive-disabled {
     &:is(:where(.group)[data-disabled] *) {
       background-color: var(--color-interactive-disabled);
@@ -1460,6 +1774,40 @@
       }
     }
   }
+  .first\:border-none {
+    &:first-child {
+      --tw-border-style: none;
+      border-style: none;
+    }
+  }
+  .not-disabled\:read-only\:rounded-none {
+    &:not(*:disabled) {
+      &:read-only {
+        border-radius: 0;
+      }
+    }
+  }
+  .not-disabled\:read-only\:rounded-none {
+    &:not(*:disabled) {
+      &:read-only {
+        border-radius: var(--radius-none);
+      }
+    }
+  }
+  .not-disabled\:read-only\:p-0 {
+    &:not(*:disabled) {
+      &:read-only {
+        padding: var(--spacing-0);
+      }
+    }
+  }
+  .not-disabled\:read-only\:outline-transparent {
+    &:not(*:disabled) {
+      &:read-only {
+        outline-color: transparent;
+      }
+    }
+  }
   .empty\:\[inset\:var\(--badge-empty-inset\,initial\)\] {
     &:empty {
       inset: var(--badge-empty-inset,initial);
@@ -1496,6 +1844,11 @@
       background-color: transparent;
     }
   }
+  .focus-within\:outline-highlight {
+    &:focus-within {
+      outline-color: var(--color-highlight);
+    }
+  }
   .hover\:bg-critical-hover {
     &:hover {
       @media (hover: hover) {
@@ -1503,6 +1856,13 @@
       }
     }
   }
+  .hover\:bg-highlight-bold {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-highlight-bold);
+      }
+    }
+  }
   .hover\:bg-interactive-disabled {
     &:hover {
       @media (hover: hover) {
@@ -1554,6 +1914,14 @@
       }
     }
   }
+  .hover\:fg-inverse-light {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-inverse-light);
+        --icon-color: var(--color-inverse-light);
+      }
+    }
+  }
   .hover\:outline-interactive-disabled {
     &:hover {
       @media (hover: hover) {
@@ -1568,6 +1936,14 @@
       }
     }
   }
+  .hover\:outline-solid {
+    &:hover {
+      @media (hover: hover) {
+        --tw-outline-style: solid;
+        outline-style: solid;
+      }
+    }
+  }
   .hover\:icon-default-light {
     &:hover {
       @media (hover: hover) {
@@ -1591,6 +1967,17 @@
       }
     }
   }
+  .not-disabled\:read-only\:hover\:outline-transparent {
+    &:not(*:disabled) {
+      &:read-only {
+        &:hover {
+          @media (hover: hover) {
+            outline-color: transparent;
+          }
+        }
+      }
+    }
+  }
   .focus\:bg-critical-hover {
     &:focus {
       background-color: var(--color-critical-hover);
@@ -1604,6 +1991,11 @@
       }
     }
   }
+  .focus\:bg-highlight {
+    &:focus {
+      background-color: var(--color-highlight);
+    }
+  }
   .focus\:bg-interactive-disabled {
     &:focus {
       background-color: var(--color-interactive-disabled);
@@ -1635,6 +2027,11 @@
       --icon-color: var(--color-disabled);
     }
   }
+  .focus\:text-inverse-light {
+    &:focus {
+      color: var(--color-inverse-light);
+    }
+  }
   .focus\:outline-highlight {
     &:focus {
       outline-color: var(--color-highlight);
@@ -1650,6 +2047,23 @@
       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);
@@ -1662,6 +2076,56 @@
       }
     }
   }
+  .not-disabled\:read-only\:focus\:outline-transparent {
+    &:not(*:disabled) {
+      &:read-only {
+        &:focus {
+          outline-color: transparent;
+        }
+      }
+    }
+  }
+  .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"] {
+        font-size: var(--body-xs-size);
+        font-weight: 400;
+        letter-spacing: 0.5px;
+        line-height: var(--body-xs-height);
+      }
+    }
+  }
+  .\*\*\:data-\[slot\=description\]\:fg-default-dark {
+    :is(& *) {
+      &[data-slot="description"] {
+        color: var(--color-default-dark);
+        --icon-color: var(--color-default-dark);
+      }
+    }
+  }
+  .hover\:\*\*\:data-\[slot\=description\]\:fg-inverse-light {
+    &:hover {
+      @media (hover: hover) {
+        :is(& *) {
+          &[data-slot="description"] {
+            color: var(--color-inverse-light);
+            --icon-color: var(--color-inverse-light);
+          }
+        }
+      }
+    }
+  }
   .data-\[variant\=compact\]\:gap-xs {
     &[data-variant="compact"] {
       gap: var(--spacing-xs);
@@ -1708,6 +2172,42 @@
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
+  .ai-orientation-horizontal\:flex-col {
+    &[data-orientation="horizontal"] {
+      flex-direction: column;
+    }
+  }
+  .ai-orientation-horizontal\:flex-row {
+    &[data-orientation="horizontal"] {
+      flex-direction: row;
+    }
+  }
+  .ai-orientation-vertical\:gap-xs {
+    &[data-orientation="vertical"] {
+      gap: var(--spacing-xs);
+    }
+  }
+  .ai-focus\:bg-highlight-bold {
+    &[data-focused] {
+      background-color: var(--color-highlight-bold);
+    }
+  }
+  .ai-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 {
+    &[data-focused] {
+      :is(& *) {
+        &[data-slot="description"] {
+          color: var(--color-inverse-light);
+          --icon-color: var(--color-inverse-light);
+        }
+      }
+    }
+  }
   .ai-pressed\:bg-critical-hover {
     &[data-pressed] {
       background-color: var(--color-critical-hover);
@@ -1815,11 +2315,32 @@
       cursor: not-allowed;
     }
   }
+  .ai-disabled\:bg-transparent {
+    &[data-disabled] {
+      background-color: transparent;
+    }
+  }
+  .ai-disabled\:fg-disabled {
+    &[data-disabled] {
+      color: var(--color-disabled);
+      --icon-color: var(--color-disabled);
+    }
+  }
   .ai-disabled\:text-interactive-disabled {
     &[data-disabled] {
       color: var(--color-interactive-disabled);
     }
   }
+  .ai-disabled\:\*\*\:data-\[slot\=description\]\:fg-disabled {
+    &[data-disabled] {
+      :is(& *) {
+        &[data-slot="description"] {
+          color: var(--color-disabled);
+          --icon-color: var(--color-disabled);
+        }
+      }
+    }
+  }
   .\[\&\:empty\]\:before\:content-\[\'CUI\'\] {
     &:empty {
       &::before {
@@ -1917,6 +2438,44 @@
       }
     }
   }
+  .\[\&\>\*\]\: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;
+    }
+  }
+  .ai-orientation-horizontal\:\[\&\>\*\]\:pr-s {
+    &[data-orientation="horizontal"] {
+      &>* {
+        padding-right: var(--spacing-s);
+      }
+    }
+  }
+  .ai-orientation-horizontal\:\[\&\>\*\]\:pl-s {
+    &[data-orientation="horizontal"] {
+      &>* {
+        padding-left: var(--spacing-s);
+      }
+    }
+  }
 }
 :root {
   --neutral-01: #ffffff;
@@ -2013,6 +2572,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;
@@ -2174,9 +2804,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;