@ac-design/design-system 2.2.0 → 2.3.0

package/dist/lib/compat.css

@@ -584,6 +584,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .my-1:where([data-ac-ds], [data-ac-ds] *) {
     margin-block: var(--spacing) !important;
   }
+  .my-6:where([data-ac-ds], [data-ac-ds] *) {
+    margin-block: calc(var(--spacing) * 6) !important;
+  }
   .-mt-0\.5:where([data-ac-ds], [data-ac-ds] *) {
     margin-top: calc(var(--spacing) * -0.5) !important;
   }
@@ -831,6 +834,10 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     width: calc(var(--spacing) * 12) !important;
     height: calc(var(--spacing) * 12) !important;
   }
+  .size-14:where([data-ac-ds], [data-ac-ds] *) {
+    width: calc(var(--spacing) * 14) !important;
+    height: calc(var(--spacing) * 14) !important;
+  }
   .size-15:where([data-ac-ds], [data-ac-ds] *) {
     width: calc(var(--spacing) * 15) !important;
     height: calc(var(--spacing) * 15) !important;
@@ -953,6 +960,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .h-18:where([data-ac-ds], [data-ac-ds] *) {
     height: calc(var(--spacing) * 18) !important;
   }
+  .h-30:where([data-ac-ds], [data-ac-ds] *) {
+    height: calc(var(--spacing) * 30) !important;
+  }
   .h-32:where([data-ac-ds], [data-ac-ds] *) {
     height: calc(var(--spacing) * 32) !important;
   }
@@ -1049,6 +1059,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .w-8:where([data-ac-ds], [data-ac-ds] *) {
     width: calc(var(--spacing) * 8) !important;
   }
+  .w-8\.5:where([data-ac-ds], [data-ac-ds] *) {
+    width: calc(var(--spacing) * 8.5) !important;
+  }
   .w-9:where([data-ac-ds], [data-ac-ds] *) {
     width: calc(var(--spacing) * 9) !important;
   }
@@ -1235,6 +1248,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .min-w-10:where([data-ac-ds], [data-ac-ds] *) {
     min-width: calc(var(--spacing) * 10) !important;
   }
+  .min-w-12:where([data-ac-ds], [data-ac-ds] *) {
+    min-width: calc(var(--spacing) * 12) !important;
+  }
   .min-w-14:where([data-ac-ds], [data-ac-ds] *) {
     min-width: calc(var(--spacing) * 14) !important;
   }
@@ -1408,6 +1424,12 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     --tw-scale-z: 95% !important;
     scale: var(--tw-scale-x) var(--tw-scale-y) !important;
   }
+  .scale-100:where([data-ac-ds], [data-ac-ds] *) {
+    --tw-scale-x: 100% !important;
+    --tw-scale-y: 100% !important;
+    --tw-scale-z: 100% !important;
+    scale: var(--tw-scale-x) var(--tw-scale-y) !important;
+  }
   .scale-110:where([data-ac-ds], [data-ac-ds] *) {
     --tw-scale-x: 110% !important;
     --tw-scale-y: 110% !important;
@@ -2107,6 +2129,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
       background-color: color-mix(in oklab, var(--color-black) 80%, transparent) !important;
     }
   }
+  .bg-body:where([data-ac-ds], [data-ac-ds] *) {
+    background-color: var(--color-body) !important;
+  }
   .bg-border:where([data-ac-ds], [data-ac-ds] *) {
     background-color: var(--color-border) !important;
   }
@@ -2152,6 +2177,12 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
       background-color: color-mix(in oklab, var(--color-danger) 5%, transparent) !important;
     }
   }
+  .bg-danger\/6:where([data-ac-ds], [data-ac-ds] *) {
+    background-color: color-mix(in srgb, #ef4444 6%, transparent) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-danger) 6%, transparent) !important;
+    }
+  }
   .bg-danger\/10:where([data-ac-ds], [data-ac-ds] *) {
     background-color: color-mix(in srgb, #ef4444 10%, transparent) !important;
     @supports (color: color-mix(in lab, red, red)) {
@@ -2182,6 +2213,12 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .bg-info:where([data-ac-ds], [data-ac-ds] *) {
     background-color: var(--color-info) !important;
   }
+  .bg-info\/6:where([data-ac-ds], [data-ac-ds] *) {
+    background-color: color-mix(in srgb, #0069ff 6%, transparent) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-info) 6%, transparent) !important;
+    }
+  }
   .bg-info\/8:where([data-ac-ds], [data-ac-ds] *) {
     background-color: color-mix(in srgb, #0069ff 8%, transparent) !important;
     @supports (color: color-mix(in lab, red, red)) {
@@ -2266,6 +2303,12 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
       background-color: color-mix(in oklab, var(--color-primary) 5%, transparent) !important;
     }
   }
+  .bg-primary\/6:where([data-ac-ds], [data-ac-ds] *) {
+    background-color: color-mix(in srgb, hsl(var(--primary-hue) var(--primary-saturation) var(--primary-light)) 6%, transparent) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-primary) 6%, transparent) !important;
+    }
+  }
   .bg-primary\/8:where([data-ac-ds], [data-ac-ds] *) {
     background-color: color-mix(in srgb, hsl(var(--primary-hue) var(--primary-saturation) var(--primary-light)) 8%, transparent) !important;
     @supports (color: color-mix(in lab, red, red)) {
@@ -2344,6 +2387,12 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
       background-color: color-mix(in oklab, var(--color-success) 5%, transparent) !important;
     }
   }
+  .bg-success\/6:where([data-ac-ds], [data-ac-ds] *) {
+    background-color: color-mix(in srgb, #00a651 6%, transparent) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-success) 6%, transparent) !important;
+    }
+  }
   .bg-success\/10:where([data-ac-ds], [data-ac-ds] *) {
     background-color: color-mix(in srgb, #00a651 10%, transparent) !important;
     @supports (color: color-mix(in lab, red, red)) {
@@ -2395,6 +2444,12 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
       background-color: color-mix(in oklab, var(--color-surface-sunken) 50%, transparent) !important;
     }
   }
+  .bg-surface-sunken\/70:where([data-ac-ds], [data-ac-ds] *) {
+    background-color: color-mix(in srgb, #f0f0f0 70%, transparent) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-surface-sunken) 70%, transparent) !important;
+    }
+  }
   .bg-surface\/85:where([data-ac-ds], [data-ac-ds] *) {
     background-color: color-mix(in srgb, #ffffff 85%, transparent) !important;
     @supports (color: color-mix(in lab, red, red)) {
@@ -2428,6 +2483,12 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
       background-color: color-mix(in oklab, var(--color-warning) 5%, transparent) !important;
     }
   }
+  .bg-warning\/6:where([data-ac-ds], [data-ac-ds] *) {
+    background-color: color-mix(in srgb, #f59e0b 6%, transparent) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-warning) 6%, transparent) !important;
+    }
+  }
   .bg-warning\/10:where([data-ac-ds], [data-ac-ds] *) {
     background-color: color-mix(in srgb, #f59e0b 10%, transparent) !important;
     @supports (color: color-mix(in lab, red, red)) {
@@ -2880,6 +2941,12 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .py-20:where([data-ac-ds], [data-ac-ds] *) {
     padding-block: calc(var(--spacing) * 20) !important;
   }
+  .py-\[5px\]:where([data-ac-ds], [data-ac-ds] *) {
+    padding-block: 5px !important;
+  }
+  .py-\[7px\]:where([data-ac-ds], [data-ac-ds] *) {
+    padding-block: 7px !important;
+  }
   .pt-0:where([data-ac-ds], [data-ac-ds] *) {
     padding-top: 0px !important;
   }
@@ -2910,6 +2977,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .pt-10:where([data-ac-ds], [data-ac-ds] *) {
     padding-top: calc(var(--spacing) * 10) !important;
   }
+  .pt-\[54px\]:where([data-ac-ds], [data-ac-ds] *) {
+    padding-top: 54px !important;
+  }
   .pr-0:where([data-ac-ds], [data-ac-ds] *) {
     padding-right: 0px !important;
   }
@@ -3142,6 +3212,10 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     --tw-tracking: -0.03em !important;
     letter-spacing: -0.03em !important;
   }
+  .tracking-\[-0\.012em\]:where([data-ac-ds], [data-ac-ds] *) {
+    --tw-tracking: -0.012em !important;
+    letter-spacing: -0.012em !important;
+  }
   .tracking-\[0\.08em\]:where([data-ac-ds], [data-ac-ds] *) {
     --tw-tracking: 0.08em !important;
     letter-spacing: 0.08em !important;
@@ -3186,6 +3260,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .whitespace-pre:where([data-ac-ds], [data-ac-ds] *) {
     white-space: pre !important;
   }
+  .text-background:where([data-ac-ds], [data-ac-ds] *) {
+    color: var(--color-background) !important;
+  }
   .text-body:where([data-ac-ds], [data-ac-ds] *) {
     color: var(--color-body) !important;
   }
@@ -3944,6 +4021,14 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     border-width: 0px !important;
   }
   @media (hover: hover) {
+    .group-hover\:border-primary\/60:is(:where(.group):hover *):where([data-ac-ds], [data-ac-ds] *) {
+      border-color: color-mix(in srgb, hsl(var(--primary-hue) var(--primary-saturation) var(--primary-light)) 60%, transparent) !important;
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .group-hover\:border-primary\/60:is(:where(.group):hover *):where([data-ac-ds], [data-ac-ds] *) {
+        border-color: color-mix(in oklab, var(--color-primary) 60%, transparent) !important;
+      }
+    }
     .group-hover\:text-heading:is(:where(.group):hover *):where([data-ac-ds], [data-ac-ds] *) {
       color: var(--color-heading) !important;
     }
@@ -4174,6 +4259,14 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
         background-color: color-mix(in oklab, var(--color-accent) 60%, transparent) !important;
       }
     }
+    .hover\:bg-body\/90:hover:where([data-ac-ds], [data-ac-ds] *) {
+      background-color: color-mix(in srgb, #252525 90%, transparent) !important;
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-body\/90:hover:where([data-ac-ds], [data-ac-ds] *) {
+        background-color: color-mix(in oklab, var(--color-body) 90%, transparent) !important;
+      }
+    }
     .hover\:bg-current\/10:hover:where([data-ac-ds], [data-ac-ds] *) {
       background-color: currentcolor !important;
     }
@@ -4201,6 +4294,14 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
         background-color: color-mix(in oklab, var(--color-danger) 10%, transparent) !important;
       }
     }
+    .hover\:bg-danger\/12:hover:where([data-ac-ds], [data-ac-ds] *) {
+      background-color: color-mix(in srgb, #ef4444 12%, transparent) !important;
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-danger\/12:hover:where([data-ac-ds], [data-ac-ds] *) {
+        background-color: color-mix(in oklab, var(--color-danger) 12%, transparent) !important;
+      }
+    }
     .hover\:bg-danger\/18:hover:where([data-ac-ds], [data-ac-ds] *) {
       background-color: color-mix(in srgb, #ef4444 18%, transparent) !important;
     }
@@ -4228,6 +4329,14 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
         background-color: color-mix(in oklab, var(--color-info) 10%, transparent) !important;
       }
     }
+    .hover\:bg-info\/12:hover:where([data-ac-ds], [data-ac-ds] *) {
+      background-color: color-mix(in srgb, #0069ff 12%, transparent) !important;
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-info\/12:hover:where([data-ac-ds], [data-ac-ds] *) {
+        background-color: color-mix(in oklab, var(--color-info) 12%, transparent) !important;
+      }
+    }
     .hover\:bg-info\/18:hover:where([data-ac-ds], [data-ac-ds] *) {
       background-color: color-mix(in srgb, #0069ff 18%, transparent) !important;
     }
@@ -4255,6 +4364,14 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
         background-color: color-mix(in oklab, var(--color-primary) 10%, transparent) !important;
       }
     }
+    .hover\:bg-primary\/12:hover:where([data-ac-ds], [data-ac-ds] *) {
+      background-color: color-mix(in srgb, hsl(var(--primary-hue) var(--primary-saturation) var(--primary-light)) 12%, transparent) !important;
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-primary\/12:hover:where([data-ac-ds], [data-ac-ds] *) {
+        background-color: color-mix(in oklab, var(--color-primary) 12%, transparent) !important;
+      }
+    }
     .hover\:bg-primary\/18:hover:where([data-ac-ds], [data-ac-ds] *) {
       background-color: color-mix(in srgb, hsl(var(--primary-hue) var(--primary-saturation) var(--primary-light)) 18%, transparent) !important;
     }
@@ -4277,6 +4394,14 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
         background-color: color-mix(in oklab, var(--color-success) 10%, transparent) !important;
       }
     }
+    .hover\:bg-success\/12:hover:where([data-ac-ds], [data-ac-ds] *) {
+      background-color: color-mix(in srgb, #00a651 12%, transparent) !important;
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-success\/12:hover:where([data-ac-ds], [data-ac-ds] *) {
+        background-color: color-mix(in oklab, var(--color-success) 12%, transparent) !important;
+      }
+    }
     .hover\:bg-success\/18:hover:where([data-ac-ds], [data-ac-ds] *) {
       background-color: color-mix(in srgb, #00a651 18%, transparent) !important;
     }
@@ -4331,6 +4456,14 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
         background-color: color-mix(in oklab, var(--color-warning) 10%, transparent) !important;
       }
     }
+    .hover\:bg-warning\/12:hover:where([data-ac-ds], [data-ac-ds] *) {
+      background-color: color-mix(in srgb, #f59e0b 12%, transparent) !important;
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-warning\/12:hover:where([data-ac-ds], [data-ac-ds] *) {
+        background-color: color-mix(in oklab, var(--color-warning) 12%, transparent) !important;
+      }
+    }
     .hover\:bg-warning\/18:hover:where([data-ac-ds], [data-ac-ds] *) {
       background-color: color-mix(in srgb, #f59e0b 18%, transparent) !important;
     }
@@ -4549,6 +4682,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .disabled\:cursor-not-allowed:disabled:where([data-ac-ds], [data-ac-ds] *) {
     cursor: not-allowed !important;
   }
+  .disabled\:cursor-wait:disabled:where([data-ac-ds], [data-ac-ds] *) {
+    cursor: wait !important;
+  }
   .disabled\:bg-surface-sunken:disabled:where([data-ac-ds], [data-ac-ds] *) {
     background-color: var(--color-surface-sunken) !important;
   }
@@ -4681,6 +4817,20 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .has-\[input\:focus-visible\]\:ring-offset-surface:has(:is(input:focus-visible)):where([data-ac-ds], [data-ac-ds] *) {
     --tw-ring-offset-color: var(--color-surface) !important;
   }
+  .has-\[\>span\>input\[type\=radio\]\:focus-visible\]\:ring-2:has( > span > input[type=radio]:focus-visible):where([data-ac-ds], [data-ac-ds] *) {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
+  }
+  .has-\[\>span\>input\[type\=radio\]\:focus-visible\]\:ring-ring:has( > span > input[type=radio]:focus-visible):where([data-ac-ds], [data-ac-ds] *) {
+    --tw-ring-color: var(--color-ring) !important;
+  }
+  .has-\[\>span\>input\[type\=radio\]\:focus-visible\]\:ring-offset-2:has( > span > input[type=radio]:focus-visible):where([data-ac-ds], [data-ac-ds] *) {
+    --tw-ring-offset-width: 2px !important;
+    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
+  }
+  .has-\[\>span\>input\[type\=radio\]\:focus-visible\]\:ring-offset-background:has( > span > input[type=radio]:focus-visible):where([data-ac-ds], [data-ac-ds] *) {
+    --tw-ring-offset-color: var(--color-background) !important;
+  }
   .aria-disabled\:pointer-events-none[aria-disabled="true"]:where([data-ac-ds], [data-ac-ds] *) {
     pointer-events: none !important;
   }
@@ -5051,6 +5201,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     .md\:h-11:where([data-ac-ds], [data-ac-ds] *) {
       height: calc(var(--spacing) * 11) !important;
     }
+    .md\:h-13:where([data-ac-ds], [data-ac-ds] *) {
+      height: calc(var(--spacing) * 13) !important;
+    }
     .md\:w-60:where([data-ac-ds], [data-ac-ds] *) {
       width: calc(var(--spacing) * 60) !important;
     }
@@ -5060,6 +5213,18 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     .md\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,2fr\)\]:where([data-ac-ds], [data-ac-ds] *) {
       grid-template-columns: minmax(0,1fr) minmax(0,2fr) !important;
     }
+    .md\:flex-row:where([data-ac-ds], [data-ac-ds] *) {
+      flex-direction: row !important;
+    }
+    .md\:items-start:where([data-ac-ds], [data-ac-ds] *) {
+      align-items: flex-start !important;
+    }
+    .md\:justify-between:where([data-ac-ds], [data-ac-ds] *) {
+      justify-content: space-between !important;
+    }
+    .md\:gap-4:where([data-ac-ds], [data-ac-ds] *) {
+      gap: calc(var(--spacing) * 4) !important;
+    }
     .md\:gap-10:where([data-ac-ds], [data-ac-ds] *) {
       gap: calc(var(--spacing) * 10) !important;
     }
@@ -5109,6 +5274,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     .lg\:w-80:where([data-ac-ds], [data-ac-ds] *) {
       width: calc(var(--spacing) * 80) !important;
     }
+    .lg\:w-\[120px\]:where([data-ac-ds], [data-ac-ds] *) {
+      width: 120px !important;
+    }
     .lg\:flex-row:where([data-ac-ds], [data-ac-ds] *) {
       flex-direction: row !important;
     }
@@ -5121,6 +5289,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     .lg\:py-16:where([data-ac-ds], [data-ac-ds] *) {
       padding-block: calc(var(--spacing) * 16) !important;
     }
+    .lg\:pl-52:where([data-ac-ds], [data-ac-ds] *) {
+      padding-left: calc(var(--spacing) * 52) !important;
+    }
     .lg\:text-\[60px\]:where([data-ac-ds], [data-ac-ds] *) {
       font-size: 60px !important;
     }
@@ -5132,6 +5303,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     .xl\:w-96:where([data-ac-ds], [data-ac-ds] *) {
       width: calc(var(--spacing) * 96) !important;
     }
+    .xl\:pl-64:where([data-ac-ds], [data-ac-ds] *) {
+      padding-left: calc(var(--spacing) * 64) !important;
+    }
   }
   @container (width < 768px) {
     .\@max-3xl\:hidden:where([data-ac-ds], [data-ac-ds] *) {
@@ -5287,6 +5461,10 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     width: calc(var(--spacing) * 8) !important;
     height: calc(var(--spacing) * 8) !important;
   }
+  .\[\&_svg\]\:size-24\! svg:where([data-ac-ds], [data-ac-ds] *) {
+    width: calc(var(--spacing) * 24) !important;
+    height: calc(var(--spacing) * 24) !important;
+  }
   .\[\&_svg\]\:animate-spin svg:where([data-ac-ds], [data-ac-ds] *) {
     animation: var(--animate-spin) !important;
   }
@@ -5389,6 +5567,35 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .\[\&\>svg\]\:text-muted > svg:where([data-ac-ds], [data-ac-ds] *) {
     color: var(--color-muted) !important;
   }
+  :where(.\[\:where\(\&\)\]\:bg-danger\/5):where([data-ac-ds], [data-ac-ds] *) {
+    background-color: color-mix(in srgb, #ef4444 5%, transparent) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-danger) 5%, transparent) !important;
+    }
+  }
+  :where(.\[\:where\(\&\)\]\:bg-surface):where([data-ac-ds], [data-ac-ds] *) {
+    background-color: var(--color-surface) !important;
+  }
+  :where(.\[\:where\(\&\)\]\:bg-surface-sunken\/40):where([data-ac-ds], [data-ac-ds] *) {
+    background-color: color-mix(in srgb, #f0f0f0 40%, transparent) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-surface-sunken) 40%, transparent) !important;
+    }
+  }
+  :where(.\[\:where\(\&\)\]\:bg-transparent):where([data-ac-ds], [data-ac-ds] *) {
+    background-color: transparent !important;
+  }
+  :where(.\[\:where\(\&\)_svg\]\:size-3\.5) svg:where([data-ac-ds], [data-ac-ds] *) {
+    width: calc(var(--spacing) * 3.5) !important;
+    height: calc(var(--spacing) * 3.5) !important;
+  }
+  :where(.\[\:where\(\&\)_svg\]\:size-4) svg:where([data-ac-ds], [data-ac-ds] *) {
+    width: calc(var(--spacing) * 4) !important;
+    height: calc(var(--spacing) * 4) !important;
+  }
+  [data-testid=ac-sidebar-section] + .\[\[data-testid\=ac-sidebar-section\]\+\&\]\:mt-2\.5:where([data-ac-ds], [data-ac-ds] *) {
+    margin-top: calc(var(--spacing) * 2.5) !important;
+  }
   [data-testid=ac-sidebar-section] + .\[\[data-testid\=ac-sidebar-section\]\+\&\]\:mt-5:where([data-ac-ds], [data-ac-ds] *) {
     margin-top: calc(var(--spacing) * 5) !important;
   }
@@ -5405,6 +5612,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   [data-testid=ac-sidebar-section] + .\[\[data-testid\=ac-sidebar-section\]\+\&\]\:pt-4:where([data-ac-ds], [data-ac-ds] *) {
     padding-top: calc(var(--spacing) * 4) !important;
   }
+  [data-testid=ac-sidebar-section][data-closed] + .\[\[data-testid\=ac-sidebar-section\]\[data-closed\]\+\&\]\:mt-0:where([data-ac-ds], [data-ac-ds] *) {
+    margin-top: 0px !important;
+  }
   tr:last-child .\[tr\:last-child_\&\]\:border-0:where([data-ac-ds], [data-ac-ds] *) {
     border-style: var(--tw-border-style) !important;
     border-width: 0px !important;