@eightshift/ui-components 5.0.2 → 5.0.3

package/dist/assets/style.css

@@ -82,6 +82,8 @@
   --es-text-xs--line-height: 1.3;
   --es-spacing-3_25: .8125rem;
   --es-spacing-5_5: 1.375rem;
+  --es-radius-7: .4375rem;
+  --es-radius-10: .625rem;
   --es-color-secondary-50: var(--es-color-zinc-50);
   --es-color-secondary-100: var(--es-color-zinc-100);
   --es-color-secondary-200: var(--es-color-zinc-200);
@@ -94,6 +96,7 @@
   --es-color-secondary-900: var(--es-color-zinc-900);
   --es-color-accent-50: var(--es-color-teal-50);
   --es-color-accent-100: var(--es-color-teal-100);
+  --es-color-accent-300: var(--es-color-teal-300);
   --es-color-accent-400: var(--es-color-teal-400);
   --es-color-accent-500: var(--es-color-teal-500);
   --es-color-accent-600: var(--es-color-teal-600);
@@ -104,14 +107,17 @@
   --es-color-red-50: oklch(97.1% .013 17.38);
   --es-color-red-100: oklch(93.6% .032 17.717);
   --es-color-red-200: oklch(88.5% .062 18.334);
-  --es-color-red-400: oklch(70.4% .191 22.216);
+  --es-color-red-300: oklch(80.8% .114 19.571);
   --es-color-red-500: oklch(63.7% .237 25.331);
   --es-color-red-600: oklch(57.7% .245 27.325);
   --es-color-red-700: oklch(50.5% .213 27.518);
   --es-color-red-800: oklch(44.4% .177 26.899);
   --es-color-red-900: oklch(39.6% .141 25.723);
   --es-color-red-950: oklch(25.8% .092 26.042);
+  --es-color-orange-200: oklch(90.1% .076 70.697);
   --es-color-orange-500: oklch(70.5% .213 47.604);
+  --es-color-orange-700: oklch(55.3% .195 38.402);
+  --es-color-orange-950: oklch(26.6% .079 36.259);
   --es-color-amber-50: oklch(98.7% .022 95.277);
   --es-color-amber-100: oklch(96.2% .059 95.617);
   --es-color-amber-200: oklch(92.4% .12 95.746);
@@ -137,6 +143,10 @@
   --es-color-green-800: oklch(44.8% .119 151.328);
   --es-color-green-900: oklch(39.3% .095 152.535);
   --es-color-green-950: oklch(26.6% .065 152.934);
+  --es-color-emerald-200: oklch(90.5% .093 164.15);
+  --es-color-emerald-500: oklch(69.6% .17 162.48);
+  --es-color-emerald-600: oklch(59.6% .145 163.225);
+  --es-color-emerald-950: oklch(26.2% .051 172.552);
   --es-color-teal-50: oklch(98.4% .014 180.72);
   --es-color-teal-100: oklch(95.3% .051 180.801);
   --es-color-teal-200: oklch(91% .096 180.426);
@@ -251,6 +261,7 @@
   --es-radius-md: .375rem;
   --es-radius-lg: .5rem;
   --es-radius-xl: .75rem;
+  --es-radius-2xl: 1rem;
   --es-drop-shadow-sm: 0 1px 2px #00000026;
   --es-animate-spin: spin 1s linear infinite;
   --es-blur-xs: 4px;
@@ -1500,6 +1511,10 @@
     min-height: calc(var(--es-spacing) * 12);
   }
 
+  .es\:min-h-14 {
+    min-height: calc(var(--es-spacing) * 14);
+  }
+
   .es\:min-h-24 {
     min-height: calc(var(--es-spacing) * 24);
   }
@@ -1948,6 +1963,10 @@
     flex-wrap: wrap;
   }
 
+  .es\:place-items-center {
+    place-items: center;
+  }
+
   .es\:items-center {
     align-items: center;
   }
@@ -2226,6 +2245,18 @@
     border-radius: .25rem;
   }
 
+  .es\:rounded-2xl {
+    border-radius: var(--es-radius-2xl);
+  }
+
+  .es\:rounded-7 {
+    border-radius: var(--es-radius-7);
+  }
+
+  .es\:rounded-10 {
+    border-radius: var(--es-radius-10);
+  }
+
   .es\:rounded-full {
     border-radius: 3.40282e38px;
   }
@@ -2381,12 +2412,24 @@
     }
   }
 
-  .es\:border-amber-500 {
-    border-color: var(--es-color-amber-500);
+  .es\:border-blue-400\/75 {
+    border-color: var(--es-color-blue-400);
   }
 
-  .es\:border-blue-400 {
-    border-color: var(--es-color-blue-400);
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:border-blue-400\/75 {
+      border-color: color-mix(in oklab, var(--es-color-blue-400) 75%, transparent);
+    }
+  }
+
+  .es\:border-emerald-500\/75 {
+    border-color: var(--es-color-emerald-500);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:border-emerald-500\/75 {
+      border-color: color-mix(in oklab, var(--es-color-emerald-500) 75%, transparent);
+    }
   }
 
   .es\:border-gray-100 {
@@ -2401,25 +2444,31 @@
     border-color: var(--es-color-gray-300);
   }
 
-  .es\:border-green-500 {
-    border-color: var(--es-color-green-500);
+  .es\:border-orange-500\/75 {
+    border-color: var(--es-color-orange-500);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:border-orange-500\/75 {
+      border-color: color-mix(in oklab, var(--es-color-orange-500) 75%, transparent);
+    }
   }
 
   .es\:border-red-200\! {
     border-color: var(--es-color-red-200) !important;
   }
 
-  .es\:border-red-400 {
-    border-color: var(--es-color-red-400);
+  .es\:border-red-300 {
+    border-color: var(--es-color-red-300);
   }
 
-  .es\:border-red-600\/50 {
-    border-color: var(--es-color-red-600);
+  .es\:border-red-700\/50 {
+    border-color: var(--es-color-red-700);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .es\:border-red-600\/50 {
-      border-color: color-mix(in oklab, var(--es-color-red-600) 50%, transparent);
+    .es\:border-red-700\/50 {
+      border-color: color-mix(in oklab, var(--es-color-red-700) 50%, transparent);
     }
   }
 
@@ -2427,16 +2476,10 @@
     border-color: var(--es-color-secondary-100);
   }
 
-  .es\:border-secondary-200, .es\:border-secondary-200\/50 {
+  .es\:border-secondary-200 {
     border-color: var(--es-color-secondary-200);
   }
 
-  @supports (color: color-mix(in lab, red, red)) {
-    .es\:border-secondary-200\/50 {
-      border-color: color-mix(in oklab, var(--es-color-secondary-200) 50%, transparent);
-    }
-  }
-
   .es\:border-secondary-300, .es\:border-secondary-300\/0 {
     border-color: var(--es-color-secondary-300);
   }
@@ -2547,16 +2590,6 @@
     }
   }
 
-  .es\:bg-amber-100\/5 {
-    background-color: var(--es-color-amber-100);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .es\:bg-amber-100\/5 {
-      background-color: color-mix(in oklab, var(--es-color-amber-100) 5%, transparent);
-    }
-  }
-
   .es\:bg-black, .es\:bg-black\/25 {
     background-color: var(--es-color-black);
   }
@@ -2577,13 +2610,13 @@
     }
   }
 
-  .es\:bg-blue-100\/5 {
-    background-color: var(--es-color-blue-100);
+  .es\:bg-blue-200\/5 {
+    background-color: var(--es-color-blue-200);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .es\:bg-blue-100\/5 {
-      background-color: color-mix(in oklab, var(--es-color-blue-100) 5%, transparent);
+    .es\:bg-blue-200\/5 {
+      background-color: color-mix(in oklab, var(--es-color-blue-200) 5%, transparent);
     }
   }
 
@@ -2599,22 +2632,22 @@
     background-color: var(--es-color-cyan-500);
   }
 
-  .es\:bg-fuchsia-500 {
-    background-color: var(--es-color-fuchsia-500);
+  .es\:bg-emerald-200\/5 {
+    background-color: var(--es-color-emerald-200);
   }
 
-  .es\:bg-gray-100 {
-    background-color: var(--es-color-gray-100);
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:bg-emerald-200\/5 {
+      background-color: color-mix(in oklab, var(--es-color-emerald-200) 5%, transparent);
+    }
   }
 
-  .es\:bg-green-100\/5 {
-    background-color: var(--es-color-green-100);
+  .es\:bg-fuchsia-500 {
+    background-color: var(--es-color-fuchsia-500);
   }
 
-  @supports (color: color-mix(in lab, red, red)) {
-    .es\:bg-green-100\/5 {
-      background-color: color-mix(in oklab, var(--es-color-green-100) 5%, transparent);
-    }
+  .es\:bg-gray-100 {
+    background-color: var(--es-color-gray-100);
   }
 
   .es\:bg-green-500 {
@@ -2633,6 +2666,16 @@
     background-color: var(--es-color-neutral-100);
   }
 
+  .es\:bg-orange-200\/5 {
+    background-color: var(--es-color-orange-200);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:bg-orange-200\/5 {
+      background-color: color-mix(in oklab, var(--es-color-orange-200) 5%, transparent);
+    }
+  }
+
   .es\:bg-orange-500 {
     background-color: var(--es-color-orange-500);
   }
@@ -2645,13 +2688,13 @@
     background-color: var(--es-color-red-50);
   }
 
-  .es\:bg-red-100\/5 {
-    background-color: var(--es-color-red-100);
+  .es\:bg-red-200\/5 {
+    background-color: var(--es-color-red-200);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .es\:bg-red-100\/5 {
-      background-color: color-mix(in oklab, var(--es-color-red-100) 5%, transparent);
+    .es\:bg-red-200\/5 {
+      background-color: color-mix(in oklab, var(--es-color-red-200) 5%, transparent);
     }
   }
 
@@ -2851,6 +2894,16 @@
     background-image: linear-gradient(var(--tw-gradient-stops));
   }
 
+  .es\:bg-conic {
+    --tw-gradient-position: in oklab;
+    background-image: conic-gradient(var(--tw-gradient-stops));
+  }
+
+  .es\:bg-gradient-to-br {
+    --tw-gradient-position: to bottom right in oklab;
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+
   .es\:bg-gradient-to-r {
     --tw-gradient-position: to right in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
@@ -2871,14 +2924,6 @@
     background-image: radial-gradient(var(--tw-gradient-stops, circle at 75% 50%));
   }
 
-  .es\:bg-\[conic-gradient\(var\(--tw-gradient-stops\)\)\] {
-    background-image: conic-gradient(var(--tw-gradient-stops));
-  }
-
-  .es\:bg-\[radial-gradient\(var\(--tw-gradient-stops\)\)\] {
-    background-image: radial-gradient(var(--tw-gradient-stops));
-  }
-
   .es\:from-accent-100 {
     --tw-gradient-from: var(--es-color-accent-100);
     --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));
@@ -2899,6 +2944,20 @@
     --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));
   }
 
+  .es\:from-current\/75 {
+    --tw-gradient-from: currentcolor;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:from-current\/75 {
+      --tw-gradient-from: color-mix(in oklab, currentcolor 75%, transparent);
+    }
+  }
+
+  .es\:from-current\/75 {
+    --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));
+  }
+
   .es\:from-red-50\/75 {
     --tw-gradient-from: var(--es-color-red-50);
   }
@@ -2966,6 +3025,20 @@
     --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));
   }
 
+  .es\:to-current\/10 {
+    --tw-gradient-to: currentcolor;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:to-current\/10 {
+      --tw-gradient-to: color-mix(in oklab, currentcolor 10%, transparent);
+    }
+  }
+
+  .es\:to-current\/10 {
+    --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));
+  }
+
   .es\:to-secondary-50 {
     --tw-gradient-to: var(--es-color-secondary-50);
     --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));
@@ -3095,6 +3168,10 @@
     padding-inline: calc(var(--es-spacing) * 2);
   }
 
+  .es\:px-2\.5 {
+    padding-inline: calc(var(--es-spacing) * 2.5);
+  }
+
   .es\:px-3 {
     padding-inline: calc(var(--es-spacing) * 3);
   }
@@ -3353,24 +3430,10 @@
     color: var(--es-color-accent-950);
   }
 
-  .es\:text-amber-500 {
-    color: var(--es-color-amber-500);
-  }
-
-  .es\:text-amber-900 {
-    color: var(--es-color-amber-900);
-  }
-
-  .es\:text-amber-950, .es\:text-amber-950\/60 {
+  .es\:text-amber-950 {
     color: var(--es-color-amber-950);
   }
 
-  @supports (color: color-mix(in lab, red, red)) {
-    .es\:text-amber-950\/60 {
-      color: color-mix(in oklab, var(--es-color-amber-950) 60%, transparent);
-    }
-  }
-
   .es\:text-black {
     color: var(--es-color-black);
   }
@@ -3383,10 +3446,6 @@
     color: var(--es-color-blue-500);
   }
 
-  .es\:text-blue-900 {
-    color: var(--es-color-blue-900);
-  }
-
   .es\:text-blue-950\/60 {
     color: var(--es-color-blue-950);
   }
@@ -3401,6 +3460,24 @@
     color: var(--es-color-cyan-500);
   }
 
+  .es\:text-emerald-500 {
+    color: var(--es-color-emerald-500);
+  }
+
+  .es\:text-emerald-600 {
+    color: var(--es-color-emerald-600);
+  }
+
+  .es\:text-emerald-950\/60 {
+    color: var(--es-color-emerald-950);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:text-emerald-950\/60 {
+      color: color-mix(in oklab, var(--es-color-emerald-950) 60%, transparent);
+    }
+  }
+
   .es\:text-fuchsia-500 {
     color: var(--es-color-fuchsia-500);
   }
@@ -3427,20 +3504,6 @@
     color: var(--es-color-green-500);
   }
 
-  .es\:text-green-900 {
-    color: var(--es-color-green-900);
-  }
-
-  .es\:text-green-950\/60 {
-    color: var(--es-color-green-950);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .es\:text-green-950\/60 {
-      color: color-mix(in oklab, var(--es-color-green-950) 60%, transparent);
-    }
-  }
-
   .es\:text-indigo-500 {
     color: var(--es-color-indigo-500);
   }
@@ -3453,8 +3516,18 @@
     color: var(--es-color-orange-500);
   }
 
-  .es\:text-red-400 {
-    color: var(--es-color-red-400);
+  .es\:text-orange-700 {
+    color: var(--es-color-orange-700);
+  }
+
+  .es\:text-orange-950\/60 {
+    color: var(--es-color-orange-950);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:text-orange-950\/60 {
+      color: color-mix(in oklab, var(--es-color-orange-950) 60%, transparent);
+    }
   }
 
   .es\:text-red-500 {
@@ -3465,12 +3538,8 @@
     color: var(--es-color-red-600);
   }
 
-  .es\:text-red-800 {
-    color: var(--es-color-red-800);
-  }
-
-  .es\:text-red-900 {
-    color: var(--es-color-red-900);
+  .es\:text-red-700 {
+    color: var(--es-color-red-700);
   }
 
   .es\:text-red-950\/60 {
@@ -3710,33 +3779,33 @@
     }
   }
 
-  .es\:shadow-amber-500\/15 {
-    --tw-shadow-color: var(--es-color-amber-500);
+  .es\:shadow-blue-500\/15 {
+    --tw-shadow-color: var(--es-color-blue-500);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .es\:shadow-amber-500\/15 {
-      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--es-color-amber-500) 15%, transparent) var(--tw-shadow-alpha), transparent);
+    .es\:shadow-blue-500\/15 {
+      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--es-color-blue-500) 15%, transparent) var(--tw-shadow-alpha), transparent);
     }
   }
 
-  .es\:shadow-blue-500\/15 {
-    --tw-shadow-color: var(--es-color-blue-500);
+  .es\:shadow-emerald-500\/15 {
+    --tw-shadow-color: var(--es-color-emerald-500);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .es\:shadow-blue-500\/15 {
-      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--es-color-blue-500) 15%, transparent) var(--tw-shadow-alpha), transparent);
+    .es\:shadow-emerald-500\/15 {
+      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--es-color-emerald-500) 15%, transparent) var(--tw-shadow-alpha), transparent);
     }
   }
 
-  .es\:shadow-green-500\/15 {
-    --tw-shadow-color: var(--es-color-green-500);
+  .es\:shadow-orange-500\/15 {
+    --tw-shadow-color: var(--es-color-orange-500);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .es\:shadow-green-500\/15 {
-      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--es-color-green-500) 15%, transparent) var(--tw-shadow-alpha), transparent);
+    .es\:shadow-orange-500\/15 {
+      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--es-color-orange-500) 15%, transparent) var(--tw-shadow-alpha), transparent);
     }
   }
 
@@ -3760,6 +3829,16 @@
     }
   }
 
+  .es\:shadow-red-700\/20 {
+    --tw-shadow-color: var(--es-color-red-700);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:shadow-red-700\/20 {
+      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--es-color-red-700) 20%, transparent) var(--tw-shadow-alpha), transparent);
+    }
+  }
+
   .es\:shadow-secondary-300\/25 {
     --tw-shadow-color: var(--es-color-secondary-300);
   }
@@ -3836,6 +3915,10 @@
     --tw-inset-ring-color: var(--es-color-red-100);
   }
 
+  .es\:inset-ring-secondary-50 {
+    --tw-inset-ring-color: var(--es-color-secondary-50);
+  }
+
   .es\:inset-ring-secondary-100 {
     --tw-inset-ring-color: var(--es-color-secondary-100);
   }
@@ -3900,6 +3983,11 @@
     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, );
   }
 
+  .es\:saturate-75 {
+    --tw-saturate: saturate(75%);
+    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, );
+  }
+
   .es\:backdrop-blur {
     --tw-backdrop-blur: blur(8px);
     -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
@@ -4546,6 +4634,11 @@
     display: none;
   }
 
+  .es\:focus-within\:shadow-md:focus-within {
+    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
   @media (hover: hover) {
     .es\:hover\:cursor-grab:hover {
       cursor: grab;
@@ -4676,17 +4769,7 @@
       }
     }
 
-    .es\:not-disabled\:hover\:bg-red-500\/5:not(:is(:disabled, [data-rac][data-disabled])):hover {
-      background-color: var(--es-color-red-500);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .es\:not-disabled\:hover\:bg-red-500\/5:not(:is(:disabled, [data-rac][data-disabled])):hover {
-        background-color: color-mix(in oklab, var(--es-color-red-500) 5%, transparent);
-      }
-    }
-
-    .es\:not-disabled\:hover\:bg-secondary-100:not(:is(:disabled, [data-rac][data-disabled])):hover, .es\:not-disabled\:not-selected\:hover\:bg-secondary-100:not(:is(:disabled, [data-rac][data-disabled])):not([data-selected]):hover {
+    .es\:not-disabled\:not-selected\:hover\:bg-secondary-100:not(:is(:disabled, [data-rac][data-disabled])):not([data-selected]):hover {
       background-color: var(--es-color-secondary-100);
     }
 
@@ -4740,6 +4823,11 @@
     }
   }
 
+  .es\:not-readonly\:focus\:shadow-md:not(:where([data-readonly], [readonly])):focus {
+    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
   .es\:focus-visible\:z-10:is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) {
     z-index: 10;
   }
@@ -4879,6 +4967,54 @@
     color: var(--es-color-accent-500);
   }
 
+  .es\:enabled\:cursor-pointer:enabled {
+    cursor: pointer;
+  }
+
+  @media (hover: hover) {
+    .es\:enabled\:hover\:bg-red-500\/5:enabled:hover {
+      background-color: var(--es-color-red-500);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .es\:enabled\:hover\:bg-red-500\/5:enabled:hover {
+        background-color: color-mix(in oklab, var(--es-color-red-500) 5%, transparent);
+      }
+    }
+
+    .es\:enabled\:hover\:bg-secondary-100:enabled:hover {
+      background-color: var(--es-color-secondary-100);
+    }
+
+    .es\:enabled\:hover\:shadow-md:enabled:hover {
+      --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+
+  .es\:enabled\:active\:bg-accent-50:enabled:active {
+    background-color: var(--es-color-accent-50);
+  }
+
+  .es\:enabled\:active\:bg-red-500\/10:enabled:active {
+    background-color: var(--es-color-red-500);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:enabled\:active\:bg-red-500\/10:enabled:active {
+      background-color: color-mix(in oklab, var(--es-color-red-500) 10%, transparent);
+    }
+  }
+
+  .es\:enabled\:active\:text-accent-950:enabled:active {
+    color: var(--es-color-accent-950);
+  }
+
+  .es\:enabled\:active\:shadow-sm:enabled:active {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
   .es\:disabled\:invisible:is(:disabled, [data-rac][data-disabled]) {
     visibility: hidden;
   }
@@ -5237,6 +5373,43 @@
     }
   }
 
+  .es\:enabled\:pressed\:bg-accent-50:enabled[data-pressed] {
+    background-color: var(--es-color-accent-50);
+  }
+
+  .es\:enabled\:pressed\:bg-red-500\/10:enabled[data-pressed] {
+    background-color: var(--es-color-red-500);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:enabled\:pressed\:bg-red-500\/10:enabled[data-pressed] {
+      background-color: color-mix(in oklab, var(--es-color-red-500) 10%, transparent);
+    }
+  }
+
+  .es\:enabled\:pressed\:text-accent-950:enabled[data-pressed] {
+    color: var(--es-color-accent-950);
+  }
+
+  .es\:enabled\:pressed\:shadow-sm:enabled[data-pressed] {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .es\:selected\:border-accent-400\/10[data-selected] {
+    border-color: var(--es-color-accent-400);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:selected\:border-accent-400\/10[data-selected] {
+      border-color: color-mix(in oklab, var(--es-color-accent-400) 10%, transparent);
+    }
+  }
+
+  .es\:selected\:border-accent-600[data-selected] {
+    border-color: var(--es-color-accent-600);
+  }
+
   .es\:selected\:bg-accent-50\/50[data-selected] {
     background-color: var(--es-color-accent-50);
   }
@@ -5247,18 +5420,47 @@
     }
   }
 
-  .es\:selected\:bg-accent-400\/15[data-selected] {
-    background-color: var(--es-color-accent-400);
+  .es\:selected\:bg-gradient-to-br[data-selected] {
+    --tw-gradient-position: to bottom right in oklab;
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+
+  .es\:selected\:from-accent-300\/10[data-selected] {
+    --tw-gradient-from: var(--es-color-accent-300);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .es\:selected\:bg-accent-400\/15[data-selected] {
-      background-color: color-mix(in oklab, var(--es-color-accent-400) 15%, transparent);
+    .es\:selected\:from-accent-300\/10[data-selected] {
+      --tw-gradient-from: color-mix(in oklab, var(--es-color-accent-300) 10%, transparent);
     }
   }
 
-  .es\:selected\:bg-accent-600[data-selected] {
-    background-color: var(--es-color-accent-600);
+  .es\:selected\:from-accent-300\/10[data-selected] {
+    --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));
+  }
+
+  .es\:selected\:from-accent-500[data-selected] {
+    --tw-gradient-from: var(--es-color-accent-500);
+    --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));
+  }
+
+  .es\:selected\:to-accent-400\/20[data-selected] {
+    --tw-gradient-to: var(--es-color-accent-400);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:selected\:to-accent-400\/20[data-selected] {
+      --tw-gradient-to: color-mix(in oklab, var(--es-color-accent-400) 20%, transparent);
+    }
+  }
+
+  .es\:selected\:to-accent-400\/20[data-selected] {
+    --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));
+  }
+
+  .es\:selected\:to-accent-600[data-selected] {
+    --tw-gradient-to: var(--es-color-accent-600);
+    --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));
   }
 
   .es\:selected\:text-accent-900[data-selected] {
@@ -5285,9 +5487,9 @@
     --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));
   }
 
-  .es\:selected\:after\:shadow-xs[data-selected]:after {
+  .es\:selected\:after\:shadow-sm[data-selected]:after {
     content: var(--tw-content);
-    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d);
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
@@ -5306,6 +5508,11 @@
     background-color: var(--es-color-secondary-50);
   }
 
+  .es\:readonly\:shadow-xs\!:where([data-readonly], [readonly]) {
+    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d) !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;
+  }
+
   .es\:dragging\:scale-110\![data-dragging] {
     --tw-scale-x: 110% !important;
     --tw-scale-y: 110% !important;
@@ -5371,6 +5578,11 @@
     height: calc(var(--es-spacing) * 7);
   }
 
+  .es\:icon\:size-7\! > svg {
+    width: calc(var(--es-spacing) * 7) !important;
+    height: calc(var(--es-spacing) * 7) !important;
+  }
+
   .es\:icon\:size-\[0\.8rem\] > svg {
     width: .8rem;
     height: .8rem;