@mastra/playground-ui 51.3.2-alpha.0 → 51.4.0-alpha.2

package/dist/style.css

@@ -130,12 +130,10 @@
     --color-red-700: oklch(50.5% .213 27.518);
     --color-red-900: oklch(39.6% .141 25.723);
     --color-orange-400: oklch(75% .183 55.934);
-    --color-orange-500: oklch(70.5% .213 47.604);
     --color-yellow-500: oklch(79.5% .184 86.047);
     --color-emerald-200: oklch(90.5% .093 164.15);
     --color-emerald-400: oklch(76.5% .177 163.223);
     --color-emerald-500: oklch(69.6% .17 162.48);
-    --color-cyan-500: oklch(71.5% .143 215.221);
     --color-blue-200: oklch(88.2% .059 254.128);
     --color-blue-400: oklch(70.7% .165 254.624);
     --color-blue-500: oklch(62.3% .214 259.815);
@@ -143,11 +141,9 @@
     --color-purple-200: oklch(90.2% .063 306.703);
     --color-purple-400: oklch(71.4% .203 305.504);
     --color-purple-500: oklch(62.7% .265 303.9);
-    --color-pink-500: oklch(65.6% .241 354.308);
     --color-gray-100: oklch(96.7% .003 264.542);
     --color-gray-300: oklch(87.2% .01 258.338);
     --color-gray-700: oklch(37.3% .034 259.733);
-    --color-neutral-500: oklch(55.6% 0 none);
     --color-black: #000;
     --color-white: #fff;
     --breakpoint-lg: 64rem;
@@ -267,7 +263,6 @@
     --height-table-header: 28px;
     --height-table-row: 56px;
     --height-table-row-small: 40px;
-    --height-badge-default: 28px;
     --height-avatar-sm: 24px;
     --height-avatar-md: 32px;
     --height-avatar-lg: 40px;
@@ -295,7 +290,6 @@
     --color-accent1Dark: var(--accent1Dark);
     --color-accent2Dark: var(--accent2Dark);
     --color-accent3Dark: var(--accent3Dark);
-    --color-accent5Dark: var(--accent5Dark);
     --color-accent6Dark: var(--accent6Dark);
     --color-accent1Darker: var(--accent1Darker);
     --color-neutral1: var(--neutral1);
@@ -324,6 +318,23 @@
     --color-notice-info-fg: var(--notice-info-fg);
     --color-notice-note: var(--notice-note);
     --color-notice-note-fg: var(--notice-note-fg);
+    --color-badge-neutral-fg: var(--badge-neutral-fg);
+    --color-badge-green: var(--badge-green);
+    --color-badge-green-fg: var(--badge-green-fg);
+    --color-badge-red: var(--badge-red);
+    --color-badge-red-fg: var(--badge-red-fg);
+    --color-badge-blue: var(--badge-blue);
+    --color-badge-blue-fg: var(--badge-blue-fg);
+    --color-badge-yellow: var(--badge-yellow);
+    --color-badge-yellow-fg: var(--badge-yellow-fg);
+    --color-badge-purple: var(--badge-purple);
+    --color-badge-purple-fg: var(--badge-purple-fg);
+    --color-badge-orange: var(--badge-orange);
+    --color-badge-orange-fg: var(--badge-orange-fg);
+    --color-badge-cyan: var(--badge-cyan);
+    --color-badge-cyan-fg: var(--badge-cyan-fg);
+    --color-badge-pink: var(--badge-pink);
+    --color-badge-pink-fg: var(--badge-pink-fg);
     --color-green-200: var(--brand-green-200);
     --color-green-400: var(--brand-green-400);
     --color-green-500: var(--brand-green-500);
@@ -2032,6 +2043,14 @@
     height: 1lh;
   }
 
+  .h-\[18px\] {
+    height: 18px;
+  }
+
+  .h-\[22px\] {
+    height: 22px;
+  }
+
   .h-\[30vh\] {
     height: 30vh;
   }
@@ -2088,10 +2107,6 @@
     height: var(--height-avatar-sm);
   }
 
-  .h-badge-default {
-    height: var(--height-badge-default);
-  }
-
   .h-dropdown-max-height {
     height: var(--height-dropdown-max-height);
   }
@@ -3395,14 +3410,6 @@
     gap: .1rem;
   }
 
-  .gap-\[0\.4em\] {
-    gap: .4em;
-  }
-
-  .gap-\[1px\] {
-    gap: 1px;
-  }
-
   .gap-\[6px\] {
     gap: 6px;
   }
@@ -3597,6 +3604,10 @@
     border-radius: .3125rem;
   }
 
+  .rounded-\[7px\] {
+    border-radius: 7px;
+  }
+
   .rounded-\[22px\] {
     border-radius: 22px;
   }
@@ -4128,39 +4139,177 @@
     background-color: var(--color-accent3Dark);
   }
 
-  .bg-accent5 {
-    background-color: var(--color-accent5);
+  .bg-accent6Dark {
+    background-color: var(--color-accent6Dark);
   }
 
-  .bg-accent5Dark {
-    background-color: var(--color-accent5Dark);
+  .bg-badge-blue, .bg-badge-blue\/10 {
+    background-color: var(--color-badge-blue);
   }
 
-  .bg-accent6 {
-    background-color: var(--color-accent6);
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-badge-blue\/10 {
+      background-color: color-mix(in oklab, var(--color-badge-blue) 10%, transparent);
+    }
   }
 
-  .bg-accent6Dark {
-    background-color: var(--color-accent6Dark);
+  .bg-badge-blue\/20 {
+    background-color: var(--color-badge-blue);
   }
 
-  .bg-blue-500\/10 {
-    background-color: #3080ff1a;
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-badge-blue\/20 {
+      background-color: color-mix(in oklab, var(--color-badge-blue) 20%, transparent);
+    }
+  }
+
+  .bg-badge-cyan, .bg-badge-cyan\/10 {
+    background-color: var(--color-badge-cyan);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .bg-blue-500\/10 {
-      background-color: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
+    .bg-badge-cyan\/10 {
+      background-color: color-mix(in oklab, var(--color-badge-cyan) 10%, transparent);
+    }
+  }
+
+  .bg-badge-cyan\/20 {
+    background-color: var(--color-badge-cyan);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-badge-cyan\/20 {
+      background-color: color-mix(in oklab, var(--color-badge-cyan) 20%, transparent);
+    }
+  }
+
+  .bg-badge-green, .bg-badge-green\/10 {
+    background-color: var(--color-badge-green);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-badge-green\/10 {
+      background-color: color-mix(in oklab, var(--color-badge-green) 10%, transparent);
     }
   }
 
-  .bg-blue-500\/30 {
-    background-color: #3080ff4d;
+  .bg-badge-green\/20 {
+    background-color: var(--color-badge-green);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .bg-blue-500\/30 {
-      background-color: color-mix(in oklab, var(--color-blue-500) 30%, transparent);
+    .bg-badge-green\/20 {
+      background-color: color-mix(in oklab, var(--color-badge-green) 20%, transparent);
+    }
+  }
+
+  .bg-badge-orange, .bg-badge-orange\/10 {
+    background-color: var(--color-badge-orange);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-badge-orange\/10 {
+      background-color: color-mix(in oklab, var(--color-badge-orange) 10%, transparent);
+    }
+  }
+
+  .bg-badge-orange\/20 {
+    background-color: var(--color-badge-orange);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-badge-orange\/20 {
+      background-color: color-mix(in oklab, var(--color-badge-orange) 20%, transparent);
+    }
+  }
+
+  .bg-badge-pink, .bg-badge-pink\/10 {
+    background-color: var(--color-badge-pink);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-badge-pink\/10 {
+      background-color: color-mix(in oklab, var(--color-badge-pink) 10%, transparent);
+    }
+  }
+
+  .bg-badge-pink\/20 {
+    background-color: var(--color-badge-pink);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-badge-pink\/20 {
+      background-color: color-mix(in oklab, var(--color-badge-pink) 20%, transparent);
+    }
+  }
+
+  .bg-badge-purple, .bg-badge-purple\/10 {
+    background-color: var(--color-badge-purple);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-badge-purple\/10 {
+      background-color: color-mix(in oklab, var(--color-badge-purple) 10%, transparent);
+    }
+  }
+
+  .bg-badge-purple\/20 {
+    background-color: var(--color-badge-purple);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-badge-purple\/20 {
+      background-color: color-mix(in oklab, var(--color-badge-purple) 20%, transparent);
+    }
+  }
+
+  .bg-badge-red, .bg-badge-red\/10 {
+    background-color: var(--color-badge-red);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-badge-red\/10 {
+      background-color: color-mix(in oklab, var(--color-badge-red) 10%, transparent);
+    }
+  }
+
+  .bg-badge-red\/20 {
+    background-color: var(--color-badge-red);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-badge-red\/20 {
+      background-color: color-mix(in oklab, var(--color-badge-red) 20%, transparent);
+    }
+  }
+
+  .bg-badge-yellow, .bg-badge-yellow\/10 {
+    background-color: var(--color-badge-yellow);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-badge-yellow\/10 {
+      background-color: color-mix(in oklab, var(--color-badge-yellow) 10%, transparent);
+    }
+  }
+
+  .bg-badge-yellow\/20 {
+    background-color: var(--color-badge-yellow);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-badge-yellow\/20 {
+      background-color: color-mix(in oklab, var(--color-badge-yellow) 20%, transparent);
+    }
+  }
+
+  .bg-blue-500\/10 {
+    background-color: #3080ff1a;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-blue-500\/10 {
+      background-color: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
     }
   }
 
@@ -4198,26 +4347,6 @@
     }
   }
 
-  .bg-cyan-500\/10 {
-    background-color: #00b7d71a;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-cyan-500\/10 {
-      background-color: color-mix(in oklab, var(--color-cyan-500) 10%, transparent);
-    }
-  }
-
-  .bg-cyan-500\/30 {
-    background-color: #00b7d74d;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-cyan-500\/30 {
-      background-color: color-mix(in oklab, var(--color-cyan-500) 30%, transparent);
-    }
-  }
-
   .bg-emerald-500\/10 {
     background-color: #00bb7f1a;
   }
@@ -4256,40 +4385,10 @@
     }
   }
 
-  .bg-green-500\/30 {
-    background-color: var(--color-green-500);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-green-500\/30 {
-      background-color: color-mix(in oklab, var(--color-green-500) 30%, transparent);
-    }
-  }
-
   .bg-green-600 {
     background-color: var(--color-green-600);
   }
 
-  .bg-neutral-500\/10 {
-    background-color: #7373731a;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-neutral-500\/10 {
-      background-color: color-mix(in oklab, var(--color-neutral-500) 10%, transparent);
-    }
-  }
-
-  .bg-neutral-500\/30 {
-    background-color: #7373734d;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-neutral-500\/30 {
-      background-color: color-mix(in oklab, var(--color-neutral-500) 30%, transparent);
-    }
-  }
-
   .bg-neutral1 {
     background-color: var(--color-neutral1);
   }
@@ -4392,6 +4491,16 @@
     }
   }
 
+  .bg-neutral6\/\[0\.025\] {
+    background-color: var(--color-neutral6);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-neutral6\/\[0\.025\] {
+      background-color: color-mix(in oklab, var(--color-neutral6) 2.5%, transparent);
+    }
+  }
+
   .bg-notice-destructive, .bg-notice-destructive\/10 {
     background-color: var(--color-notice-destructive);
   }
@@ -4456,50 +4565,10 @@
     }
   }
 
-  .bg-orange-500\/10 {
-    background-color: #fe6e001a;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-orange-500\/10 {
-      background-color: color-mix(in oklab, var(--color-orange-500) 10%, transparent);
-    }
-  }
-
-  .bg-orange-500\/30 {
-    background-color: #fe6e004d;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-orange-500\/30 {
-      background-color: color-mix(in oklab, var(--color-orange-500) 30%, transparent);
-    }
-  }
-
   .bg-overlay {
     background-color: var(--color-overlay);
   }
 
-  .bg-pink-500\/10 {
-    background-color: #f6339a1a;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-pink-500\/10 {
-      background-color: color-mix(in oklab, var(--color-pink-500) 10%, transparent);
-    }
-  }
-
-  .bg-pink-500\/30 {
-    background-color: #f6339a4d;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-pink-500\/30 {
-      background-color: color-mix(in oklab, var(--color-pink-500) 30%, transparent);
-    }
-  }
-
   .bg-positive1, .bg-positive1\/5 {
     background-color: var(--color-positive1);
   }
@@ -4520,16 +4589,6 @@
     }
   }
 
-  .bg-purple-500\/30 {
-    background-color: #ac4bff4d;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-purple-500\/30 {
-      background-color: color-mix(in oklab, var(--color-purple-500) 30%, transparent);
-    }
-  }
-
   .bg-red-500\/5 {
     background-color: #fb2c360d;
   }
@@ -4550,16 +4609,6 @@
     }
   }
 
-  .bg-red-500\/30 {
-    background-color: #fb2c364d;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-red-500\/30 {
-      background-color: color-mix(in oklab, var(--color-red-500) 30%, transparent);
-    }
-  }
-
   .bg-red-700 {
     background-color: var(--color-red-700);
   }
@@ -4712,26 +4761,6 @@
     background-color: var(--color-yellow-500);
   }
 
-  .bg-yellow-500\/10 {
-    background-color: #edb2001a;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-yellow-500\/10 {
-      background-color: color-mix(in oklab, var(--color-yellow-500) 10%, transparent);
-    }
-  }
-
-  .bg-yellow-500\/30 {
-    background-color: #edb2004d;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-yellow-500\/30 {
-      background-color: color-mix(in oklab, var(--color-yellow-500) 30%, transparent);
-    }
-  }
-
   .bg-linear-to-b {
     --tw-gradient-position: to bottom;
   }
@@ -5100,10 +5129,6 @@
     padding-top: var(--spacing-12);
   }
 
-  .pt-\[5px\] {
-    padding-top: 5px;
-  }
-
   .pr-1 {
     padding-right: var(--spacing-1);
   }
@@ -5116,10 +5141,6 @@
     padding-right: var(--spacing-2);
   }
 
-  .pr-2\.5 {
-    padding-right: var(--spacing-2_5);
-  }
-
   .pr-3 {
     padding-right: var(--spacing-3);
   }
@@ -5200,10 +5221,6 @@
     padding-bottom: 2px;
   }
 
-  .pb-\[4px\] {
-    padding-bottom: 4px;
-  }
-
   .pl-0\! {
     padding-left: var(--spacing-0) !important;
   }
@@ -5313,26 +5330,14 @@
     font-size: .6875rem;
   }
 
-  .text-\[10\.5px\] {
-    font-size: 10.5px;
-  }
-
   .text-\[10px\] {
     font-size: 10px;
   }
 
-  .text-\[11\.5px\] {
-    font-size: 11.5px;
-  }
-
   .text-\[11px\] {
     font-size: 11px;
   }
 
-  .text-\[12\.5px\] {
-    font-size: 12.5px;
-  }
-
   .text-\[13\.5px\] {
     font-size: 13.5px;
   }
@@ -5607,6 +5612,42 @@
     color: var(--color-accent6);
   }
 
+  .text-badge-blue-fg {
+    color: var(--color-badge-blue-fg);
+  }
+
+  .text-badge-cyan-fg {
+    color: var(--color-badge-cyan-fg);
+  }
+
+  .text-badge-green-fg {
+    color: var(--color-badge-green-fg);
+  }
+
+  .text-badge-neutral-fg {
+    color: var(--color-badge-neutral-fg);
+  }
+
+  .text-badge-orange-fg {
+    color: var(--color-badge-orange-fg);
+  }
+
+  .text-badge-pink-fg {
+    color: var(--color-badge-pink-fg);
+  }
+
+  .text-badge-purple-fg {
+    color: var(--color-badge-purple-fg);
+  }
+
+  .text-badge-red-fg {
+    color: var(--color-badge-red-fg);
+  }
+
+  .text-badge-yellow-fg {
+    color: var(--color-badge-yellow-fg);
+  }
+
   .text-black {
     color: var(--color-black);
   }
@@ -5703,26 +5744,10 @@
     }
   }
 
-  .text-neutral3\/90 {
-    color: var(--color-neutral3);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .text-neutral3\/90 {
-      color: color-mix(in oklab, var(--color-neutral3) 90%, transparent);
-    }
-  }
-
-  .text-neutral4, .text-neutral4\/90 {
+  .text-neutral4 {
     color: var(--color-neutral4);
   }
 
-  @supports (color: color-mix(in lab, red, red)) {
-    .text-neutral4\/90 {
-      color: color-mix(in oklab, var(--color-neutral4) 90%, transparent);
-    }
-  }
-
   .text-neutral5 {
     color: var(--color-neutral5);
   }
@@ -6003,6 +6028,16 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
+  .inset-shadow-xs {
+    --tw-inset-shadow: inset 0 1px 1px var(--tw-inset-shadow-color, #0000000d);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .inset-ring-1 {
+    --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
   .shadow-dialog {
     box-shadow: var(--shadow-dialog);
   }
@@ -6035,6 +6070,26 @@
     }
   }
 
+  .inset-shadow-white\/5 {
+    --tw-inset-shadow-color: #ffffff0d;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .inset-shadow-white\/5 {
+      --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-white) 5%, transparent) var(--tw-inset-shadow-alpha), transparent);
+    }
+  }
+
+  .inset-ring-current\/5 {
+    --tw-inset-ring-color: currentcolor;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .inset-ring-current\/5 {
+      --tw-inset-ring-color: color-mix(in oklab, currentcolor 5%, transparent);
+    }
+  }
+
   .outline-hidden {
     --tw-outline-style: none;
     outline-style: none;
@@ -9016,6 +9071,10 @@
   }
 
   @media (prefers-reduced-motion: no-preference) {
+    .motion-safe\:animate-pulse {
+      animation: var(--animate-pulse);
+    }
+
     .motion-safe\:animate-spin {
       animation: var(--animate-spin);
     }
@@ -9046,6 +9105,10 @@
       scale: var(--tw-scale-x) var(--tw-scale-y);
     }
 
+    .motion-reduce\:animate-none {
+      animation: none;
+    }
+
     .motion-reduce\:blur-none {
       --tw-blur:  ;
       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, );
@@ -9343,6 +9406,10 @@
     .md\:px-10 {
       padding-inline: var(--spacing-10);
     }
+
+    .md\:first\:col-span-2:first-child {
+      grid-column: span 2 / span 2;
+    }
   }
 
   @media (min-width: 64rem) {
@@ -9577,6 +9644,48 @@
     }
   }
 
+  .dark\:bg-linear-to-b:is(.dark *) {
+    --tw-gradient-position: to bottom;
+  }
+
+  @supports (background-image: linear-gradient(in lab, red, red)) {
+    .dark\:bg-linear-to-b:is(.dark *) {
+      --tw-gradient-position: to bottom in oklab;
+    }
+  }
+
+  .dark\:bg-linear-to-b:is(.dark *) {
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+
+  .dark\:from-white\/3:is(.dark *) {
+    --tw-gradient-from: #ffffff08;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:from-white\/3:is(.dark *) {
+      --tw-gradient-from: color-mix(in oklab, var(--color-white) 3%, transparent);
+    }
+  }
+
+  .dark\:from-white\/3:is(.dark *) {
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .dark\:to-white\/0:is(.dark *) {
+    --tw-gradient-to: #0000;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:to-white\/0:is(.dark *) {
+      --tw-gradient-to: color-mix(in oklab, var(--color-white) 0%, transparent);
+    }
+  }
+
+  .dark\:to-white\/0:is(.dark *) {
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
   .dark\:text-black:is(.dark *) {
     color: var(--color-black);
   }
@@ -9593,6 +9702,21 @@
     opacity: 1;
   }
 
+  .dark\:inset-shadow-\[0_3px_10px_-2px_white\]:is(.dark *) {
+    --tw-inset-shadow: inset 0 3px 10px -2px var(--tw-inset-shadow-color, white);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .dark\:inset-shadow-white\/7:is(.dark *) {
+    --tw-inset-shadow-color: #ffffff12;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:inset-shadow-white\/7:is(.dark *) {
+      --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-white) 7%, transparent) var(--tw-inset-shadow-alpha), transparent);
+    }
+  }
+
   @media (hover: hover) {
     .dark\:hover\:bg-accent1\/90:is(.dark *):hover {
       background-color: var(--color-accent1);
@@ -10278,7 +10402,7 @@
     border-top-right-radius: var(--radius-none);
   }
 
-  .\[\&\>\*\:not\(\:first-child\)\]\:rounded-l-none > :not(:first-child), .\[\&\>\*\:not\(\:first-child\)\:not\(\[aria-hidden\=true\]\)\:not\(\[data-base-ui-focus-guard\]\)\:not\(\[aria-owns\]\)\]\:rounded-l-none > :not(:first-child):not([aria-hidden="true"]):not([data-base-ui-focus-guard]):not([aria-owns]) {
+  .\[\&\>\*\:not\(\:first-child\)\:not\(\[aria-hidden\=true\]\)\:not\(\[data-base-ui-focus-guard\]\)\:not\(\[aria-owns\]\)\]\:rounded-l-none > :not(:first-child):not([aria-hidden="true"]):not([data-base-ui-focus-guard]):not([aria-owns]) {
     border-top-left-radius: var(--radius-none);
     border-bottom-left-radius: var(--radius-none);
   }
@@ -10585,10 +10709,6 @@
     margin-inline: -.3em;
   }
 
-  .\[\&\>svg\]\:mx-\[-0\.2em\] > svg {
-    margin-inline: -.2em;
-  }
-
   .\[\&\>svg\]\:mt-0\.5 > svg {
     margin-top: var(--spacing-0_5);
   }
@@ -10702,11 +10822,6 @@
     flex-shrink: 0;
   }
 
-  .\[\&\>svg\]\:translate-y-\[-0\.02em\] > svg {
-    --tw-translate-y: -.02em;
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-
   .\[\&\>svg\]\:text-accent1 > svg {
     color: var(--color-accent1);
   }
@@ -10813,10 +10928,6 @@
     }
   }
 
-  .\[\&\>svg\:first-child\:last-child\]\:opacity-100 > svg:first-child:last-child {
-    opacity: 1;
-  }
-
   .\[\&\>svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 > svg:not([class*="size-"]) {
     width: var(--spacing-4);
     height: var(--spacing-4);
@@ -11013,6 +11124,23 @@
   --notice-info-fg: oklch(97% .013 224);
   --notice-note: oklch(18% 0 0);
   --notice-note-fg: oklch(99% .001 230);
+  --badge-neutral-fg: var(--neutral5);
+  --badge-green: oklch(80% .105 160);
+  --badge-green-fg: oklch(92% .05 160);
+  --badge-red: oklch(69% .24 22);
+  --badge-red-fg: oklch(95% .014 18);
+  --badge-blue: oklch(81% .12 230);
+  --badge-blue-fg: oklch(97% .013 224);
+  --badge-yellow: oklch(91% .16 105);
+  --badge-yellow-fg: oklch(97% .025 100);
+  --badge-purple: oklch(82% .12 303);
+  --badge-purple-fg: oklch(93% .045 303);
+  --badge-orange: oklch(84% .13 62);
+  --badge-orange-fg: oklch(93% .06 62);
+  --badge-cyan: oklch(84% .1 210);
+  --badge-cyan-fg: oklch(93% .05 210);
+  --badge-pink: oklch(82% .12 345);
+  --badge-pink-fg: oklch(93% .045 345);
   --brand-green-50: oklch(99% .024 138);
   --brand-green-100: oklch(97.5% .055 138);
   --brand-green-200: oklch(95.5% .105 138);
@@ -11087,6 +11215,23 @@ html.light {
   --notice-info-fg: oklch(36% .13 225);
   --notice-note: oklch(97% 0 0);
   --notice-note-fg: oklch(18% 0 0);
+  --badge-neutral-fg: var(--neutral3);
+  --badge-green: oklch(40% .095 160);
+  --badge-green-fg: oklch(35% .085 160);
+  --badge-red: oklch(55% .22 22);
+  --badge-red-fg: oklch(36% .18 22);
+  --badge-blue: oklch(55% .15 230);
+  --badge-blue-fg: oklch(36% .13 225);
+  --badge-yellow: oklch(65% .16 95);
+  --badge-yellow-fg: oklch(36% .1 95);
+  --badge-purple: oklch(40% .18 303);
+  --badge-purple-fg: oklch(37% .16 303);
+  --badge-orange: oklch(42% .13 62);
+  --badge-orange-fg: oklch(37% .12 62);
+  --badge-cyan: oklch(40% .11 210);
+  --badge-cyan-fg: oklch(35% .095 210);
+  --badge-pink: oklch(42% .17 345);
+  --badge-pink-fg: oklch(37% .15 345);
   --brand-green-50: oklch(97.8% .025 140);
   --brand-green-100: oklch(95.5% .055 140);
   --brand-green-200: oklch(91.5% .095 140);