@eightshift/ui-components 5.0.2 → 5.0.4

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,9 +261,11 @@
   --es-radius-md: .375rem;
   --es-radius-lg: .5rem;
   --es-radius-xl: .75rem;
+  --es-radius-2xl: 1rem;
+  --es-radius-3xl: 1.5rem;
   --es-drop-shadow-sm: 0 1px 2px #00000026;
   --es-animate-spin: spin 1s linear infinite;
-  --es-blur-xs: 4px;
+  --es-blur-sm: 8px;
   --es-blur-lg: 16px;
   --es-blur-3xl: 64px;
   --es-aspect-video: 16 / 9;
@@ -613,112 +625,252 @@
     display: none !important;
   }
 
-  :root {
-    --motion-default-timing: cubic-bezier(.165, .84, .44, 1);
-    --motion-bounce: linear(0, .004, .016, .035, .063, .098, .141 13.6%, .25, .391, .563, .765, 1, .891 40.9%, .848, .813, .785, .766, .754, .75, .754, .766, .785, .813, .848, .891 68.2%, 1 72.7%, .973, .953, .941, .938, .941, .953, .973, 1, .988, .984, .988, 1);
-    --motion-spring-smooth: linear(0, .001 0.44%, .0045 0.94%, .0195 2.03%, .0446 3.19%, .0811 4.5%, .1598 6.82%, .3685 12.34%, .4693 15.17%, .5663, .6498 21.27%, .7215 24.39%, .7532 25.98%, .7829 27.65%, .8105, .8349 31.14%, .8573 32.95%, .8776 34.84%, .8964 36.87%, .9136 39.05%, .929 41.37%, .9421 43.77%, .9537 46.38%, .9636 49.14%, .9789 55.31%, .9888 62.35%, .9949 71.06%, .9982 82.52%, .9997 99.94%);
-    --motion-spring-snappy: linear(0, .0014, .0053 1.02%, .0126, .0227 2.18%, .0517 3.41%, .094 4.79%, .1865 7.26%, .4182 12.77%, .5246 15.46%, .6249, .7112, .7831 23.95%, .8146 25.4%, .844, .8699 28.45%, .8935, .9139 31.64%, .932, .9473, .9601 36.65%, .9714 38.47%, .9808 40.35%, .9948 44.49%, 1.0031 49.43%, 1.0057 53.35%, 1.0063 58.14%, 1.0014 80.78%, 1.0001 99.94%);
-    --motion-spring-bouncy: linear(0, .0018, .0069, .0151 1.74%, .0277 2.4%, .062 3.7%, .1115 5.15%, .2211 7.77%, .4778 13.21%, .5912 15.75%, .6987 18.44%, .7862 20.98%, .861 23.59%, .8926, .9205, .945 27.51%, .9671 28.89%, .9868, 1.003 31.79%, 1.0224 34.11%, 1.0358 36.58%, 1.0436 39.27%, 1.046 42.31%, 1.0446 44.71%, 1.0406 47.47%, 1.0118 61.84%, 1.0027 69.53%, .9981 80.49%, .9991 99.94%);
-    --motion-spring-bouncier: linear(0, .0023, .0088, .0194 1.59%, .035 2.17%, .078 3.33%, .1415 4.64%, .2054 5.75%, .2821 6.95%, .5912 11.45%, .7205 13.43%, .8393 15.45%, .936 17.39%, .9778, 1.015, 1.0477, 1.0759, 1.0998 22.22%, 1.1203, 1.1364, 1.1484 25.26%, 1.1586 26.61%, 1.1629 28.06%, 1.1613 29.56%, 1.1537 31.2%, 1.1434 32.6%, 1.1288 34.19%, 1.0508 41.29%, 1.0174 44.87%, 1.0025 46.89%, .9911 48.87%, .9826 50.9%, .9769 53.03%, .9735 56.02%, .9748 59.45%, .9964 72.64%, 1.0031 79.69%, 1.0042 86.83%, 1.0008 99.97%);
-    --motion-spring-bounciest: linear(0, .0032, .0131, .0294, .0524, .0824, .1192 1.54%, .2134 2.11%, .3102 2.59%, .4297 3.13%, .8732 4.95%, 1.0373, 1.1827 6.36%, 1.2972 7.01%, 1.3444, 1.3859, 1.4215, 1.4504, 1.4735, 1.4908, 1.5024, 1.5084 9.5%, 1.5091, 1.5061, 1.4993, 1.4886, 1.4745, 1.4565 11.11%, 1.4082 11.7%, 1.3585 12.2%, 1.295 12.77%, 1.0623 14.64%, .9773, .9031 16.08%, .8449 16.73%, .8014, .7701 17.95%, .7587, .7501, .7443, .7412 19.16%, .7421 19.68%, .7508 20.21%, .7672 20.77%, .7917 21.37%, .8169 21.87%, .8492 22.43%, .9681 24.32%, 1.0114, 1.0492 25.75%, 1.0789 26.41%, 1.1008, 1.1167, 1.1271, 1.1317 28.81%, 1.1314, 1.1271 29.87%, 1.1189 30.43%, 1.1063 31.03%, 1.0769 32.11%, .9941 34.72%, .9748 35.43%, .9597 36.09%, .9487, .9407, .9355, .933 38.46%, .9344 39.38%, .9421 40.38%, .9566 41.5%, .9989 44.12%, 1.0161 45.37%, 1.029 46.75%, 1.0341 48.1%, 1.0335 49.04%, 1.0295 50.05%, 1.0221 51.18%, .992 55.02%, .9854 56.38%, .9827 57.72%, .985 59.73%, 1.004 64.67%, 1.0088 67.34%, 1.0076 69.42%, .9981 74.28%, .9956 76.85%, .9961 79.06%, 1.0023 86.46%, .999 95.22%, .9994 100%);
-  }
-
-  * {
-    --motion-origin-scale-x: 100%;
-    --motion-origin-scale-y: 100%;
-    --motion-origin-translate-x: 0%;
-    --motion-origin-translate-y: 0%;
-    --motion-origin-rotate: 0deg;
-    --motion-origin-blur: 0px;
-    --motion-origin-grayscale: 0%;
-    --motion-origin-opacity: 100%;
-    --motion-origin-background-color: ;
-    --motion-origin-text-color: ;
-    --motion-end-scale-x: 100%;
-    --motion-end-scale-y: 100%;
-    --motion-end-translate-x: 0%;
-    --motion-end-translate-y: 0%;
-    --motion-end-rotate: 0deg;
-    --motion-end-blur: 0px;
-    --motion-end-grayscale: 0%;
-    --motion-end-opacity: 100%;
-    --motion-end-background-color: ;
-    --motion-end-text-color: ;
-    --motion-loop-scale-x: 100%;
-    --motion-loop-scale-y: 100%;
-    --motion-loop-translate-x: 0%;
-    --motion-loop-translate-y: 0%;
-    --motion-loop-rotate: 0deg;
-    --motion-loop-blur: 0px;
-    --motion-loop-grayscale: 0%;
-    --motion-loop-opacity: 100%;
-    --motion-loop-background-color: ;
-    --motion-loop-text-color: ;
-    --motion-duration: .7s;
-    --motion-timing: var(--motion-default-timing);
-    --motion-perceptual-duration-multiplier: 1;
-    --motion-delay: 0s;
-    --motion-loop-count: infinite;
-    --motion-scale-duration: var(--motion-duration);
-    --motion-scale-timing: var(--motion-timing);
-    --motion-scale-perceptual-duration-multiplier: var(--motion-perceptual-duration-multiplier);
-    --motion-scale-delay: var(--motion-delay);
-    --motion-scale-loop-count: var(--motion-loop-count);
-    --motion-translate-duration: var(--motion-duration);
-    --motion-translate-timing: var(--motion-timing);
-    --motion-translate-perceptual-duration-multiplier: var(--motion-perceptual-duration-multiplier);
-    --motion-translate-delay: var(--motion-delay);
-    --motion-translate-loop-count: var(--motion-loop-count);
-    --motion-rotate-duration: var(--motion-duration);
-    --motion-rotate-timing: var(--motion-timing);
-    --motion-rotate-perceptual-duration-multiplier: var(--motion-perceptual-duration-multiplier);
-    --motion-rotate-delay: var(--motion-delay);
-    --motion-rotate-loop-count: var(--motion-loop-count);
-    --motion-filter-duration: var(--motion-duration);
-    --motion-filter-timing: var(--motion-timing);
-    --motion-filter-perceptual-duration-multiplier: var(--motion-perceptual-duration-multiplier);
-    --motion-filter-delay: var(--motion-delay);
-    --motion-filter-loop-count: var(--motion-loop-count);
-    --motion-opacity-duration: var(--motion-duration);
-    --motion-opacity-timing: var(--motion-timing);
-    --motion-opacity-perceptual-duration-multiplier: var(--motion-perceptual-duration-multiplier);
-    --motion-opacity-delay: var(--motion-delay);
-    --motion-opacity-loop-count: var(--motion-loop-count);
-    --motion-background-color-duration: var(--motion-duration);
-    --motion-background-color-timing: var(--motion-timing);
-    --motion-background-color-perceptual-duration-multiplier: var(--motion-perceptual-duration-multiplier);
-    --motion-background-color-delay: var(--motion-delay);
-    --motion-background-color-loop-count: var(--motion-loop-count);
-    --motion-text-color-duration: var(--motion-duration);
-    --motion-text-color-timing: var(--motion-timing);
-    --motion-text-color-perceptual-duration-multiplier: var(--motion-perceptual-duration-multiplier);
-    --motion-text-color-delay: var(--motion-delay);
-    --motion-text-color-loop-count: var(--motion-loop-count);
-    --motion-scale-in-animation: none;
-    --motion-translate-in-animation: none;
-    --motion-rotate-in-animation: none;
-    --motion-filter-in-animation: none;
-    --motion-opacity-in-animation: none;
-    --motion-background-color-in-animation: none;
-    --motion-text-color-in-animation: none;
-    --motion-scale-out-animation: none;
-    --motion-translate-out-animation: none;
-    --motion-rotate-out-animation: none;
-    --motion-filter-out-animation: none;
-    --motion-opacity-out-animation: none;
-    --motion-background-color-out-animation: none;
-    --motion-text-color-out-animation: none;
-    --motion-scale-loop-animation: none;
-    --motion-translate-loop-animation: none;
-    --motion-rotate-loop-animation: none;
-    --motion-filter-loop-animation: none;
-    --motion-opacity-loop-animation: none;
-    --motion-background-color-loop-animation: none;
-    --motion-text-color-loop-animation: none;
-    --motion-all-enter-animations: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation);
-    --motion-all-exit-animations: var(--motion-scale-out-animation), var(--motion-translate-out-animation), var(--motion-rotate-out-animation), var(--motion-filter-out-animation), var(--motion-opacity-out-animation), var(--motion-background-color-out-animation), var(--motion-text-color-out-animation);
-    --motion-all-loop-animations: var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation);
-    --motion-all-loop-and-enter-animations: var(--motion-all-loop-animations), var(--motion-all-enter-animations);
+  @property --motion-bounce {
+    syntax: "*"; inherits: false; initial-value: linear(0, .004, .016, .035, .063, .098, .141 13.6%, .25, .391, .563, .765, 1, .891 40.9%, .848, .813, .785, .766, .754, .75, .754, .766, .785, .813, .848, .891 68.2%, 1 72.7%, .973, .953, .941, .938, .941, .953, .973, 1, .988, .984, .988, 1) ;
+  }
+
+  @property --motion-spring-smooth {
+    syntax: "*"; inherits: false; initial-value: linear(0, .001 0.44%, .0045 0.94%, .0195 2.03%, .0446 3.19%, .0811 4.5%, .1598 6.82%, .3685 12.34%, .4693 15.17%, .5663, .6498 21.27%, .7215 24.39%, .7532 25.98%, .7829 27.65%, .8105, .8349 31.14%, .8573 32.95%, .8776 34.84%, .8964 36.87%, .9136 39.05%, .929 41.37%, .9421 43.77%, .9537 46.38%, .9636 49.14%, .9789 55.31%, .9888 62.35%, .9949 71.06%, .9982 82.52%, .9997 99.94%) ;
+  }
+
+  @property --motion-spring-snappy {
+    syntax: "*"; inherits: false; initial-value: linear(0, .0014, .0053 1.02%, .0126, .0227 2.18%, .0517 3.41%, .094 4.79%, .1865 7.26%, .4182 12.77%, .5246 15.46%, .6249, .7112, .7831 23.95%, .8146 25.4%, .844, .8699 28.45%, .8935, .9139 31.64%, .932, .9473, .9601 36.65%, .9714 38.47%, .9808 40.35%, .9948 44.49%, 1.0031 49.43%, 1.0057 53.35%, 1.0063 58.14%, 1.0014 80.78%, 1.0001 99.94%) ;
+  }
+
+  @property --motion-spring-bouncy {
+    syntax: "*"; inherits: false; initial-value: linear(0, .0018, .0069, .0151 1.74%, .0277 2.4%, .062 3.7%, .1115 5.15%, .2211 7.77%, .4778 13.21%, .5912 15.75%, .6987 18.44%, .7862 20.98%, .861 23.59%, .8926, .9205, .945 27.51%, .9671 28.89%, .9868, 1.003 31.79%, 1.0224 34.11%, 1.0358 36.58%, 1.0436 39.27%, 1.046 42.31%, 1.0446 44.71%, 1.0406 47.47%, 1.0118 61.84%, 1.0027 69.53%, .9981 80.49%, .9991 99.94%) ;
+  }
+
+  @property --motion-spring-bouncier {
+    syntax: "*"; inherits: false; initial-value: linear(0, .0023, .0088, .0194 1.59%, .035 2.17%, .078 3.33%, .1415 4.64%, .2054 5.75%, .2821 6.95%, .5912 11.45%, .7205 13.43%, .8393 15.45%, .936 17.39%, .9778, 1.015, 1.0477, 1.0759, 1.0998 22.22%, 1.1203, 1.1364, 1.1484 25.26%, 1.1586 26.61%, 1.1629 28.06%, 1.1613 29.56%, 1.1537 31.2%, 1.1434 32.6%, 1.1288 34.19%, 1.0508 41.29%, 1.0174 44.87%, 1.0025 46.89%, .9911 48.87%, .9826 50.9%, .9769 53.03%, .9735 56.02%, .9748 59.45%, .9964 72.64%, 1.0031 79.69%, 1.0042 86.83%, 1.0008 99.97%) ;
+  }
+
+  @property --motion-spring-bounciest {
+    syntax: "*"; inherits: false; initial-value: linear(0, .0032, .0131, .0294, .0524, .0824, .1192 1.54%, .2134 2.11%, .3102 2.59%, .4297 3.13%, .8732 4.95%, 1.0373, 1.1827 6.36%, 1.2972 7.01%, 1.3444, 1.3859, 1.4215, 1.4504, 1.4735, 1.4908, 1.5024, 1.5084 9.5%, 1.5091, 1.5061, 1.4993, 1.4886, 1.4745, 1.4565 11.11%, 1.4082 11.7%, 1.3585 12.2%, 1.295 12.77%, 1.0623 14.64%, .9773, .9031 16.08%, .8449 16.73%, .8014, .7701 17.95%, .7587, .7501, .7443, .7412 19.16%, .7421 19.68%, .7508 20.21%, .7672 20.77%, .7917 21.37%, .8169 21.87%, .8492 22.43%, .9681 24.32%, 1.0114, 1.0492 25.75%, 1.0789 26.41%, 1.1008, 1.1167, 1.1271, 1.1317 28.81%, 1.1314, 1.1271 29.87%, 1.1189 30.43%, 1.1063 31.03%, 1.0769 32.11%, .9941 34.72%, .9748 35.43%, .9597 36.09%, .9487, .9407, .9355, .933 38.46%, .9344 39.38%, .9421 40.38%, .9566 41.5%, .9989 44.12%, 1.0161 45.37%, 1.029 46.75%, 1.0341 48.1%, 1.0335 49.04%, 1.0295 50.05%, 1.0221 51.18%, .992 55.02%, .9854 56.38%, .9827 57.72%, .985 59.73%, 1.004 64.67%, 1.0088 67.34%, 1.0076 69.42%, .9981 74.28%, .9956 76.85%, .9961 79.06%, 1.0023 86.46%, .999 95.22%, .9994 100%) ;
+  }
+
+  @property --motion-origin-scale-x {
+    syntax: "*"; inherits: false; initial-value: 100%;
+  }
+
+  @property --motion-origin-scale-y {
+    syntax: "*"; inherits: false; initial-value: 100%;
+  }
+
+  @property --motion-origin-translate-x {
+    syntax: "*"; inherits: false; initial-value: 0%;
+  }
+
+  @property --motion-origin-translate-y {
+    syntax: "*"; inherits: false; initial-value: 0%;
+  }
+
+  @property --motion-origin-rotate {
+    syntax: "*"; inherits: false; initial-value: 0deg;
+  }
+
+  @property --motion-origin-blur {
+    syntax: "*"; inherits: false; initial-value: 0px;
+  }
+
+  @property --motion-origin-grayscale {
+    syntax: "*"; inherits: false; initial-value: 0%;
+  }
+
+  @property --motion-origin-opacity {
+    syntax: "*"; inherits: false; initial-value: 100%;
+  }
+
+  @property --motion-origin-background-color {
+    syntax: "*"; inherits: false;
+  }
+
+  @property --motion-origin-text-color {
+    syntax: "*"; inherits: false;
+  }
+
+  @property --motion-end-scale-x {
+    syntax: "*"; inherits: false; initial-value: 100%;
+  }
+
+  @property --motion-end-scale-y {
+    syntax: "*"; inherits: false; initial-value: 100%;
+  }
+
+  @property --motion-end-translate-x {
+    syntax: "*"; inherits: false; initial-value: 0%;
+  }
+
+  @property --motion-end-translate-y {
+    syntax: "*"; inherits: false; initial-value: 0%;
+  }
+
+  @property --motion-end-rotate {
+    syntax: "*"; inherits: false; initial-value: 0deg;
+  }
+
+  @property --motion-end-blur {
+    syntax: "*"; inherits: false; initial-value: 0px;
+  }
+
+  @property --motion-end-grayscale {
+    syntax: "*"; inherits: false; initial-value: 0%;
+  }
+
+  @property --motion-end-opacity {
+    syntax: "*"; inherits: false; initial-value: 100%;
+  }
+
+  @property --motion-end-background-color {
+    syntax: "*"; inherits: false;
+  }
+
+  @property --motion-end-text-color {
+    syntax: "*"; inherits: false;
+  }
+
+  @property --motion-loop-scale-x {
+    syntax: "*"; inherits: false; initial-value: 100%;
+  }
+
+  @property --motion-loop-scale-y {
+    syntax: "*"; inherits: false; initial-value: 100%;
+  }
+
+  @property --motion-loop-translate-x {
+    syntax: "*"; inherits: false; initial-value: 0%;
+  }
+
+  @property --motion-loop-translate-y {
+    syntax: "*"; inherits: false; initial-value: 0%;
+  }
+
+  @property --motion-loop-rotate {
+    syntax: "*"; inherits: false; initial-value: 0deg;
+  }
+
+  @property --motion-loop-blur {
+    syntax: "*"; inherits: false; initial-value: 0px;
+  }
+
+  @property --motion-loop-grayscale {
+    syntax: "*"; inherits: false; initial-value: 0%;
+  }
+
+  @property --motion-loop-opacity {
+    syntax: "*"; inherits: false; initial-value: 100%;
+  }
+
+  @property --motion-loop-background-color {
+    syntax: "*"; inherits: false;
+  }
+
+  @property --motion-loop-text-color {
+    syntax: "*"; inherits: false;
+  }
+
+  @property --motion-duration {
+    syntax: "*"; inherits: false; initial-value: .7s;
+  }
+
+  @property --motion-timing {
+    syntax: "*"; inherits: false; initial-value: cubic-bezier(.165, .84, .44, 1) ;
+  }
+
+  @property --motion-perceptual-duration-multiplier {
+    syntax: "*"; inherits: false; initial-value: 1;
+  }
+
+  @property --motion-delay {
+    syntax: "*"; inherits: false; initial-value: 0s;
+  }
+
+  @property --motion-loop-count {
+    syntax: "*"; inherits: false; initial-value: infinite;
+  }
+
+  @property --motion-scale-in-animation {
+    syntax: "*"; inherits: false; initial-value: none;
+  }
+
+  @property --motion-translate-in-animation {
+    syntax: "*"; inherits: false; initial-value: none;
+  }
+
+  @property --motion-rotate-in-animation {
+    syntax: "*"; inherits: false; initial-value: none;
+  }
+
+  @property --motion-filter-in-animation {
+    syntax: "*"; inherits: false; initial-value: none;
+  }
+
+  @property --motion-opacity-in-animation {
+    syntax: "*"; inherits: false; initial-value: none;
+  }
+
+  @property --motion-background-color-in-animation {
+    syntax: "*"; inherits: false; initial-value: none;
+  }
+
+  @property --motion-text-color-in-animation {
+    syntax: "*"; inherits: false; initial-value: none;
+  }
+
+  @property --motion-scale-out-animation {
+    syntax: "*"; inherits: false; initial-value: none;
+  }
+
+  @property --motion-translate-out-animation {
+    syntax: "*"; inherits: false; initial-value: none;
+  }
+
+  @property --motion-rotate-out-animation {
+    syntax: "*"; inherits: false; initial-value: none;
+  }
+
+  @property --motion-filter-out-animation {
+    syntax: "*"; inherits: false; initial-value: none;
+  }
+
+  @property --motion-opacity-out-animation {
+    syntax: "*"; inherits: false; initial-value: none;
+  }
+
+  @property --motion-background-color-out-animation {
+    syntax: "*"; inherits: false; initial-value: none;
+  }
+
+  @property --motion-text-color-out-animation {
+    syntax: "*"; inherits: false; initial-value: none;
+  }
+
+  @property --motion-scale-loop-animation {
+    syntax: "*"; inherits: false; initial-value: none;
+  }
+
+  @property --motion-translate-loop-animation {
+    syntax: "*"; inherits: false; initial-value: none;
+  }
+
+  @property --motion-rotate-loop-animation {
+    syntax: "*"; inherits: false; initial-value: none;
+  }
+
+  @property --motion-filter-loop-animation {
+    syntax: "*"; inherits: false; initial-value: none;
+  }
+
+  @property --motion-opacity-loop-animation {
+    syntax: "*"; inherits: false; initial-value: none;
+  }
+
+  @property --motion-background-color-loop-animation {
+    syntax: "*"; inherits: false; initial-value: none;
+  }
+
+  @property --motion-text-color-loop-animation {
+    syntax: "*"; inherits: false; initial-value: none;
   }
 
   @media screen and (prefers-reduced-motion: no-preference) {
@@ -963,6 +1115,18 @@
     visibility: hidden;
   }
 
+  .es\:sr-only {
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    position: absolute;
+    overflow: hidden;
+  }
+
   .es\:absolute {
     position: absolute;
   }
@@ -1011,6 +1175,10 @@
     top: var(--es-spacing-3_25);
   }
 
+  .es\:top-4 {
+    top: calc(var(--es-spacing) * 4);
+  }
+
   .es\:right-0 {
     right: calc(var(--es-spacing) * 0);
   }
@@ -1019,6 +1187,10 @@
     right: calc(var(--es-spacing) * 1);
   }
 
+  .es\:right-4 {
+    right: calc(var(--es-spacing) * 4);
+  }
+
   .es\:right-6 {
     right: calc(var(--es-spacing) * 6);
   }
@@ -1147,6 +1319,10 @@
     margin-inline: auto;
   }
 
+  .es\:my-0\! {
+    margin-block: calc(var(--es-spacing) * 0) !important;
+  }
+
   .es\:my-1 {
     margin-block: calc(var(--es-spacing) * 1);
   }
@@ -1500,6 +1676,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);
   }
@@ -1810,58 +1990,58 @@
   .es\:motion-preset-spin {
     --motion-loop-rotate: 360deg;
     --motion-timing: linear;
-    --motion-rotate-loop-animation: motion-rotate-loop-reset calc(var(--motion-rotate-duration) * var(--motion-rotate-perceptual-duration-multiplier)) var(--motion-rotate-timing) var(--motion-rotate-delay) both var(--motion-rotate-loop-count);
-    animation: var(--motion-all-loop-and-enter-animations);
+    --motion-rotate-loop-animation: motion-rotate-loop-reset calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both var(--motion-rotate-loop-count, var(--motion-loop-count));
+    animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation);
   }
 
   .es\:motion-scale-in-90 {
     --motion-origin-scale-x: .9;
     --motion-origin-scale-y: .9;
-    --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration) * var(--motion-scale-perceptual-duration-multiplier)) var(--motion-scale-timing) var(--motion-scale-delay) both;
-    animation: var(--motion-all-loop-and-enter-animations);
+    --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both;
+    animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation);
   }
 
   .es\:motion-scale-in-125 {
     --motion-origin-scale-x: 1.25;
     --motion-origin-scale-y: 1.25;
-    --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration) * var(--motion-scale-perceptual-duration-multiplier)) var(--motion-scale-timing) var(--motion-scale-delay) both;
-    animation: var(--motion-all-loop-and-enter-animations);
+    --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both;
+    animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation);
   }
 
   .es\:motion-blur-in-xs {
     --motion-origin-blur: 4px;
-    --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration) * var(--motion-filter-perceptual-duration-multiplier)) var(--motion-filter-timing) var(--motion-filter-delay) both;
-    animation: var(--motion-all-loop-and-enter-animations);
+    --motion-filter-in-animation: motion-filter-in calc(var(--motion-filter-duration, var(--motion-duration)) * var(--motion-filter-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-filter-timing, var(--motion-timing)) var(--motion-filter-delay, var(--motion-delay)) both;
+    animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation);
   }
 
   .es\:motion-opacity-in {
     --motion-origin-opacity: 0;
-    --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration) * var(--motion-opacity-perceptual-duration-multiplier)) var(--motion-opacity-timing) var(--motion-opacity-delay) both;
-    animation: var(--motion-all-loop-and-enter-animations);
+    --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both;
+    animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation);
   }
 
   .es\:motion-opacity-out {
     --motion-end-opacity: 0;
-    --motion-opacity-out-animation: motion-opacity-out calc(var(--motion-opacity-duration) * var(--motion-opacity-perceptual-duration-multiplier)) var(--motion-opacity-timing) var(--motion-opacity-delay) both;
-    animation: var(--motion-all-exit-animations);
+    --motion-opacity-out-animation: motion-opacity-out calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both;
+    animation: var(--motion-scale-out-animation), var(--motion-translate-out-animation), var(--motion-rotate-out-animation), var(--motion-filter-out-animation), var(--motion-opacity-out-animation), var(--motion-background-color-out-animation), var(--motion-text-color-out-animation);
   }
 
   .es\:motion-opacity-out-0 {
     --motion-end-opacity: .001;
-    --motion-opacity-out-animation: motion-opacity-out calc(var(--motion-opacity-duration) * var(--motion-opacity-perceptual-duration-multiplier)) var(--motion-opacity-timing) var(--motion-opacity-delay) both;
-    animation: var(--motion-all-exit-animations);
+    --motion-opacity-out-animation: motion-opacity-out calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both;
+    animation: var(--motion-scale-out-animation), var(--motion-translate-out-animation), var(--motion-rotate-out-animation), var(--motion-filter-out-animation), var(--motion-opacity-out-animation), var(--motion-background-color-out-animation), var(--motion-text-color-out-animation);
   }
 
   .es\:motion-rotate-in {
     --motion-origin-rotate: 12deg;
-    --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration) * var(--motion-rotate-perceptual-duration-multiplier)) var(--motion-rotate-timing) var(--motion-rotate-delay) both;
-    animation: var(--motion-all-loop-and-enter-animations);
+    --motion-rotate-in-animation: motion-rotate-in calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both;
+    animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation);
   }
 
   .es\:motion-rotate-out {
     --motion-end-rotate: 12deg;
-    --motion-rotate-out-animation: motion-rotate-out calc(var(--motion-rotate-duration) * var(--motion-rotate-perceptual-duration-multiplier)) var(--motion-rotate-timing) var(--motion-rotate-delay) both;
-    animation: var(--motion-all-exit-animations);
+    --motion-rotate-out-animation: motion-rotate-out calc(var(--motion-rotate-duration, var(--motion-duration)) * var(--motion-rotate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-rotate-timing, var(--motion-timing)) var(--motion-rotate-delay, var(--motion-delay)) both;
+    animation: var(--motion-scale-out-animation), var(--motion-translate-out-animation), var(--motion-rotate-out-animation), var(--motion-filter-out-animation), var(--motion-opacity-out-animation), var(--motion-background-color-out-animation), var(--motion-text-color-out-animation);
   }
 
   .es\:animate-spin {
@@ -1948,6 +2128,10 @@
     flex-wrap: wrap;
   }
 
+  .es\:place-items-center {
+    place-items: center;
+  }
+
   .es\:items-center {
     align-items: center;
   }
@@ -2226,6 +2410,22 @@
     border-radius: .25rem;
   }
 
+  .es\:rounded-2xl {
+    border-radius: var(--es-radius-2xl);
+  }
+
+  .es\:rounded-3xl {
+    border-radius: var(--es-radius-3xl);
+  }
+
+  .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 +2581,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 +2613,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 +2645,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,23 +2759,13 @@
     }
   }
 
-  .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 {
+  .es\:bg-black, .es\:bg-black\/30 {
     background-color: var(--es-color-black);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .es\:bg-black\/25 {
-      background-color: color-mix(in oklab, var(--es-color-black) 25%, transparent);
+    .es\:bg-black\/30 {
+      background-color: color-mix(in oklab, var(--es-color-black) 30%, transparent);
     }
   }
 
@@ -2577,13 +2779,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 +2801,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 +2835,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 +2857,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);
     }
   }
 
@@ -2711,6 +2923,16 @@
     }
   }
 
+  .es\:bg-white\/60 {
+    background-color: var(--es-color-white);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:bg-white\/60 {
+      background-color: color-mix(in oklab, var(--es-color-white) 60%, transparent);
+    }
+  }
+
   .es\:bg-white\/85 {
     background-color: var(--es-color-white);
   }
@@ -2851,6 +3073,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 +3103,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 +3123,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 +3204,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 +3347,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);
   }
@@ -3103,6 +3359,10 @@
     padding-inline: calc(var(--es-spacing) * 4);
   }
 
+  .es\:px-5 {
+    padding-inline: calc(var(--es-spacing) * 5);
+  }
+
   .es\:py-0\.5 {
     padding-block: calc(var(--es-spacing) * .5);
   }
@@ -3260,9 +3520,9 @@
     line-height: var(--tw-leading, var(--es-text-2xl--line-height));
   }
 
-  .es\:text-base {
-    font-size: var(--es-text-base);
-    line-height: var(--tw-leading, var(--es-text-base--line-height));
+  .es\:text-base\! {
+    font-size: var(--es-text-base) !important;
+    line-height: var(--tw-leading, var(--es-text-base--line-height)) !important;
   }
 
   .es\:text-lg {
@@ -3314,6 +3574,11 @@
     font-weight: var(--es-font-weight-medium);
   }
 
+  .es\:font-medium\! {
+    --tw-font-weight: var(--es-font-weight-medium) !important;
+    font-weight: var(--es-font-weight-medium) !important;
+  }
+
   .es\:font-semibold {
     --tw-font-weight: var(--es-font-weight-semibold);
     font-weight: var(--es-font-weight-semibold);
@@ -3337,6 +3602,10 @@
     color: var(--es-color-accent-500);
   }
 
+  .es\:text-accent-600 {
+    color: var(--es-color-accent-600);
+  }
+
   .es\:text-accent-600\! {
     color: var(--es-color-accent-600) !important;
   }
@@ -3353,24 +3622,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 +3638,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,46 +3652,50 @@
     color: var(--es-color-cyan-500);
   }
 
-  .es\:text-fuchsia-500 {
-    color: var(--es-color-fuchsia-500);
+  .es\:text-emerald-500 {
+    color: var(--es-color-emerald-500);
   }
 
-  .es\:text-gray-400 {
-    color: var(--es-color-gray-400);
+  .es\:text-emerald-600 {
+    color: var(--es-color-emerald-600);
   }
 
-  .es\:text-gray-500, .es\:text-gray-500\/80 {
-    color: var(--es-color-gray-500);
+  .es\:text-emerald-950\/60 {
+    color: var(--es-color-emerald-950);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .es\:text-gray-500\/80 {
-      color: color-mix(in oklab, var(--es-color-gray-500) 80%, transparent);
+    .es\:text-emerald-950\/60 {
+      color: color-mix(in oklab, var(--es-color-emerald-950) 60%, transparent);
     }
   }
 
-  .es\:text-gray-800 {
-    color: var(--es-color-gray-800);
-  }
-
-  .es\:text-green-500 {
-    color: var(--es-color-green-500);
+  .es\:text-fuchsia-500 {
+    color: var(--es-color-fuchsia-500);
   }
 
-  .es\:text-green-900 {
-    color: var(--es-color-green-900);
+  .es\:text-gray-400 {
+    color: var(--es-color-gray-400);
   }
 
-  .es\:text-green-950\/60 {
-    color: var(--es-color-green-950);
+  .es\:text-gray-500, .es\:text-gray-500\/80 {
+    color: var(--es-color-gray-500);
   }
 
   @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-gray-500\/80 {
+      color: color-mix(in oklab, var(--es-color-gray-500) 80%, transparent);
     }
   }
 
+  .es\:text-gray-800 {
+    color: var(--es-color-gray-800);
+  }
+
+  .es\:text-green-500 {
+    color: var(--es-color-green-500);
+  }
+
   .es\:text-indigo-500 {
     color: var(--es-color-indigo-500);
   }
@@ -3453,8 +3708,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 +3730,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 +3971,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 +4021,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 +4107,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 +4175,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, );
@@ -3918,8 +4198,8 @@
     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, );
   }
 
-  .es\:backdrop-blur-xs {
-    --tw-backdrop-blur: blur(var(--es-blur-xs));
+  .es\:backdrop-blur-sm {
+    --tw-backdrop-blur: blur(var(--es-blur-sm));
     -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, );
     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, );
   }
@@ -4074,6 +4354,10 @@
     --motion-duration: 1.5s;
   }
 
+  .es\:motion-duration-1750 {
+    --motion-duration: 1.75s;
+  }
+
   .es\:no-webkit-highlight {
     -webkit-tap-highlight-color: transparent;
   }
@@ -4124,15 +4408,15 @@
     .es\:not-motion-reduce\:motion-preset-slide-down-sm {
       --motion-origin-translate-y: -5%;
       --motion-origin-opacity: 0;
-      --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration) * var(--motion-opacity-perceptual-duration-multiplier)) var(--motion-opacity-timing) var(--motion-opacity-delay) both;
-      --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration) * var(--motion-translate-perceptual-duration-multiplier)) var(--motion-translate-timing) var(--motion-translate-delay) both;
-      animation: var(--motion-all-loop-and-enter-animations);
+      --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both;
+      --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both;
+      animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation);
     }
 
     .es\:not-motion-reduce\:motion-translate-y-out-\[-2\.5\%\] {
       --motion-end-translate-y: -2.5%;
-      --motion-translate-out-animation: motion-translate-out calc(var(--motion-translate-duration) * var(--motion-translate-perceptual-duration-multiplier)) var(--motion-translate-timing) var(--motion-translate-delay) both;
-      animation: var(--motion-all-exit-animations);
+      --motion-translate-out-animation: motion-translate-out calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both;
+      animation: var(--motion-scale-out-animation), var(--motion-translate-out-animation), var(--motion-rotate-out-animation), var(--motion-filter-out-animation), var(--motion-opacity-out-animation), var(--motion-background-color-out-animation), var(--motion-text-color-out-animation);
     }
   }
 
@@ -4140,42 +4424,74 @@
     cursor: pointer;
   }
 
+  .es\:group-hover\:text-black:is(:where(.es\:group):where([data-rac])[data-hovered] *) {
+    color: var(--es-color-black);
+  }
+
   @media (hover: hover) {
-    .es\:group-hover\:text-black:is(:where(.es\:group):hover *) {
+    .es\:group-hover\:text-black:is(:where(.es\:group):where(:not([data-rac])):hover *) {
       color: var(--es-color-black);
     }
+  }
+
+  .es\:group-hover\:opacity-100:is(:where(.es\:group):where([data-rac])[data-hovered] *) {
+    opacity: 1;
+  }
 
-    .es\:group-hover\:opacity-100:is(:where(.es\:group):hover *) {
+  @media (hover: hover) {
+    .es\:group-hover\:opacity-100:is(:where(.es\:group):where(:not([data-rac])):hover *) {
       opacity: 1;
     }
   }
 
-  .es\:group-focus\:border-accent-500:is(:where(.es\:group):focus *) {
+  .es\:group-focus\:border-accent-500:is(:where(.es\:group):where([data-rac])[data-focused] *), .es\:group-focus\:border-accent-500:is(:where(.es\:group):where(:not([data-rac])):focus *) {
     border-color: var(--es-color-accent-500);
   }
 
-  .es\:group-focus\:ring-2:is(:where(.es\:group):focus *) {
+  .es\:group-focus\:ring-2:is(:where(.es\:group):where([data-rac])[data-focused] *), .es\:group-focus\:ring-2:is(:where(.es\:group):where(:not([data-rac])):focus *) {
     --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-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);
   }
 
-  .es\:group-focus\:ring-accent-500\/50:is(:where(.es\:group):focus *) {
+  .es\:group-focus\:ring-accent-500\/50:is(:where(.es\:group):where([data-rac])[data-focused] *) {
     --tw-ring-color: var(--es-color-accent-500);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .es\:group-focus\:ring-accent-500\/50:is(:where(.es\:group):focus *) {
+    .es\:group-focus\:ring-accent-500\/50:is(:where(.es\:group):where([data-rac])[data-focused] *) {
       --tw-ring-color: color-mix(in oklab, var(--es-color-accent-500) 50%, transparent);
     }
   }
 
-  .es\:group-focus\:outline-hidden:is(:where(.es\:group):focus *) {
+  .es\:group-focus\:ring-accent-500\/50:is(:where(.es\:group):where(:not([data-rac])):focus *) {
+    --tw-ring-color: var(--es-color-accent-500);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:group-focus\:ring-accent-500\/50:is(:where(.es\:group):where(:not([data-rac])):focus *) {
+      --tw-ring-color: color-mix(in oklab, var(--es-color-accent-500) 50%, transparent);
+    }
+  }
+
+  .es\:group-focus\:outline-hidden:is(:where(.es\:group):where([data-rac])[data-focused] *) {
     --tw-outline-style: none;
     outline-style: none;
   }
 
   @media (forced-colors: active) {
-    .es\:group-focus\:outline-hidden:is(:where(.es\:group):focus *) {
+    .es\:group-focus\:outline-hidden:is(:where(.es\:group):where([data-rac])[data-focused] *) {
+      outline-offset: 2px;
+      outline: 2px solid #0000;
+    }
+  }
+
+  .es\:group-focus\:outline-hidden:is(:where(.es\:group):where(:not([data-rac])):focus *) {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+
+  @media (forced-colors: active) {
+    .es\:group-focus\:outline-hidden:is(:where(.es\:group):where(:not([data-rac])):focus *) {
       outline-offset: 2px;
       outline: 2px solid #0000;
     }
@@ -4542,204 +4858,428 @@
     padding-bottom: calc(var(--es-spacing) * 0);
   }
 
-  .es\:empty\:hidden:empty {
+  .es\:empty\:hidden:where([data-rac])[data-empty], .es\:empty\:hidden:where(:not([data-rac])):empty {
     display: none;
   }
 
+  .es\:focus-within\:shadow-md:where([data-rac])[data-focus-within], .es\:focus-within\:shadow-md:where(:not([data-rac])):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);
+  }
+
+  .es\:hover\:cursor-grab:where([data-rac])[data-hovered] {
+    cursor: grab;
+  }
+
   @media (hover: hover) {
-    .es\:hover\:cursor-grab:hover {
+    .es\:hover\:cursor-grab:where(:not([data-rac])):hover {
       cursor: grab;
     }
+  }
 
-    .es\:hover\:border-accent-500:hover {
+  .es\:hover\:border-accent-500:where([data-rac])[data-hovered] {
+    border-color: var(--es-color-accent-500);
+  }
+
+  @media (hover: hover) {
+    .es\:hover\:border-accent-500:where(:not([data-rac])):hover {
       border-color: var(--es-color-accent-500);
     }
+  }
+
+  .es\:hover\:border-red-600:where([data-rac])[data-hovered] {
+    border-color: var(--es-color-red-600);
+  }
 
-    .es\:hover\:border-red-600:hover {
+  @media (hover: hover) {
+    .es\:hover\:border-red-600:where(:not([data-rac])):hover {
       border-color: var(--es-color-red-600);
     }
+  }
+
+  .es\:hover\:border-secondary-300:where([data-rac])[data-hovered] {
+    border-color: var(--es-color-secondary-300);
+  }
 
-    .es\:hover\:border-secondary-300:hover {
+  @media (hover: hover) {
+    .es\:hover\:border-secondary-300:where(:not([data-rac])):hover {
       border-color: var(--es-color-secondary-300);
     }
+  }
+
+  .es\:hover\:bg-accent-400:where([data-rac])[data-hovered] {
+    background-color: var(--es-color-accent-400);
+  }
 
-    .es\:hover\:bg-accent-400:hover {
+  @media (hover: hover) {
+    .es\:hover\:bg-accent-400:where(:not([data-rac])):hover {
       background-color: var(--es-color-accent-400);
     }
+  }
 
-    .es\:hover\:bg-red-50:hover {
+  .es\:hover\:bg-red-50:where([data-rac])[data-hovered] {
+    background-color: var(--es-color-red-50);
+  }
+
+  @media (hover: hover) {
+    .es\:hover\:bg-red-50:where(:not([data-rac])):hover {
       background-color: var(--es-color-red-50);
     }
+  }
+
+  .es\:hover\:bg-red-500\/15:where([data-rac])[data-hovered] {
+    background-color: var(--es-color-red-500);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:hover\:bg-red-500\/15:where([data-rac])[data-hovered] {
+      background-color: color-mix(in oklab, var(--es-color-red-500) 15%, transparent);
+    }
+  }
 
-    .es\:hover\:bg-red-500\/15:hover {
+  @media (hover: hover) {
+    .es\:hover\:bg-red-500\/15:where(:not([data-rac])):hover {
       background-color: var(--es-color-red-500);
     }
 
     @supports (color: color-mix(in lab, red, red)) {
-      .es\:hover\:bg-red-500\/15:hover {
+      .es\:hover\:bg-red-500\/15:where(:not([data-rac])):hover {
         background-color: color-mix(in oklab, var(--es-color-red-500) 15%, transparent);
       }
     }
+  }
+
+  .es\:hover\:bg-red-600\/5:where([data-rac])[data-hovered] {
+    background-color: var(--es-color-red-600);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:hover\:bg-red-600\/5:where([data-rac])[data-hovered] {
+      background-color: color-mix(in oklab, var(--es-color-red-600) 5%, transparent);
+    }
+  }
 
-    .es\:hover\:bg-red-600\/5:hover {
+  @media (hover: hover) {
+    .es\:hover\:bg-red-600\/5:where(:not([data-rac])):hover {
       background-color: var(--es-color-red-600);
     }
 
     @supports (color: color-mix(in lab, red, red)) {
-      .es\:hover\:bg-red-600\/5:hover {
+      .es\:hover\:bg-red-600\/5:where(:not([data-rac])):hover {
         background-color: color-mix(in oklab, var(--es-color-red-600) 5%, transparent);
       }
     }
+  }
 
-    .es\:hover\:bg-secondary-100:hover, .es\:hover\:bg-secondary-100\/75:hover {
+  .es\:hover\:bg-secondary-100:where([data-rac])[data-hovered] {
+    background-color: var(--es-color-secondary-100);
+  }
+
+  @media (hover: hover) {
+    .es\:hover\:bg-secondary-100:where(:not([data-rac])):hover {
+      background-color: var(--es-color-secondary-100);
+    }
+  }
+
+  .es\:hover\:bg-secondary-100\/75:where([data-rac])[data-hovered] {
+    background-color: var(--es-color-secondary-100);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:hover\:bg-secondary-100\/75:where([data-rac])[data-hovered] {
+      background-color: color-mix(in oklab, var(--es-color-secondary-100) 75%, transparent);
+    }
+  }
+
+  @media (hover: hover) {
+    .es\:hover\:bg-secondary-100\/75:where(:not([data-rac])):hover {
       background-color: var(--es-color-secondary-100);
     }
 
     @supports (color: color-mix(in lab, red, red)) {
-      .es\:hover\:bg-secondary-100\/75:hover {
+      .es\:hover\:bg-secondary-100\/75:where(:not([data-rac])):hover {
         background-color: color-mix(in oklab, var(--es-color-secondary-100) 75%, transparent);
       }
     }
+  }
+
+  .es\:hover\:to-secondary-100:where([data-rac])[data-hovered] {
+    --tw-gradient-to: var(--es-color-secondary-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));
+  }
 
-    .es\:hover\:to-secondary-100:hover {
+  @media (hover: hover) {
+    .es\:hover\:to-secondary-100:where(:not([data-rac])):hover {
       --tw-gradient-to: var(--es-color-secondary-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));
     }
+  }
+
+  .es\:hover\:text-accent-500:where([data-rac])[data-hovered] {
+    color: var(--es-color-accent-500);
+  }
 
-    .es\:hover\:text-accent-500:hover {
+  @media (hover: hover) {
+    .es\:hover\:text-accent-500:where(:not([data-rac])):hover {
       color: var(--es-color-accent-500);
     }
+  }
 
-    .es\:hover\:text-accent-950:hover {
+  .es\:hover\:text-accent-950:where([data-rac])[data-hovered] {
+    color: var(--es-color-accent-950);
+  }
+
+  @media (hover: hover) {
+    .es\:hover\:text-accent-950:where(:not([data-rac])):hover {
       color: var(--es-color-accent-950);
     }
+  }
 
-    .es\:hover\:text-red-600:hover {
+  .es\:hover\:text-red-600:where([data-rac])[data-hovered] {
+    color: var(--es-color-red-600);
+  }
+
+  @media (hover: hover) {
+    .es\:hover\:text-red-600:where(:not([data-rac])):hover {
       color: var(--es-color-red-600);
     }
+  }
+
+  .es\:hover\:text-red-800:where([data-rac])[data-hovered] {
+    color: var(--es-color-red-800);
+  }
 
-    .es\:hover\:text-red-800:hover {
+  @media (hover: hover) {
+    .es\:hover\:text-red-800:where(:not([data-rac])):hover {
       color: var(--es-color-red-800);
     }
+  }
+
+  .es\:hover\:text-red-900:where([data-rac])[data-hovered] {
+    color: var(--es-color-red-900);
+  }
 
-    .es\:hover\:text-red-900:hover {
+  @media (hover: hover) {
+    .es\:hover\:text-red-900:where(:not([data-rac])):hover {
       color: var(--es-color-red-900);
     }
+  }
 
-    .es\:hover\:shadow-accent-600\/50:hover {
+  .es\:hover\:shadow-accent-600\/50:where([data-rac])[data-hovered] {
+    --tw-shadow-color: var(--es-color-accent-600);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:hover\:shadow-accent-600\/50:where([data-rac])[data-hovered] {
+      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--es-color-accent-600) 50%, transparent) var(--tw-shadow-alpha), transparent);
+    }
+  }
+
+  @media (hover: hover) {
+    .es\:hover\:shadow-accent-600\/50:where(:not([data-rac])):hover {
       --tw-shadow-color: var(--es-color-accent-600);
     }
 
     @supports (color: color-mix(in lab, red, red)) {
-      .es\:hover\:shadow-accent-600\/50:hover {
+      .es\:hover\:shadow-accent-600\/50:where(:not([data-rac])):hover {
         --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--es-color-accent-600) 50%, transparent) var(--tw-shadow-alpha), transparent);
       }
     }
+  }
+
+  .es\:hover\:inset-shadow-red-100:where([data-rac])[data-hovered] {
+    --tw-inset-shadow-color: var(--es-color-red-100);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:hover\:inset-shadow-red-100:where([data-rac])[data-hovered] {
+      --tw-inset-shadow-color: color-mix(in oklab, var(--es-color-red-100) var(--tw-inset-shadow-alpha), transparent);
+    }
+  }
 
-    .es\:hover\:inset-shadow-red-100:hover {
+  @media (hover: hover) {
+    .es\:hover\:inset-shadow-red-100:where(:not([data-rac])):hover {
       --tw-inset-shadow-color: var(--es-color-red-100);
     }
 
     @supports (color: color-mix(in lab, red, red)) {
-      .es\:hover\:inset-shadow-red-100:hover {
+      .es\:hover\:inset-shadow-red-100:where(:not([data-rac])):hover {
         --tw-inset-shadow-color: color-mix(in oklab, var(--es-color-red-100) var(--tw-inset-shadow-alpha), transparent);
       }
     }
+  }
+
+  .es\:hover\:inset-shadow-secondary-100:where([data-rac])[data-hovered] {
+    --tw-inset-shadow-color: var(--es-color-secondary-100);
+  }
 
-    .es\:hover\:inset-shadow-secondary-100:hover {
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:hover\:inset-shadow-secondary-100:where([data-rac])[data-hovered] {
+      --tw-inset-shadow-color: color-mix(in oklab, var(--es-color-secondary-100) var(--tw-inset-shadow-alpha), transparent);
+    }
+  }
+
+  @media (hover: hover) {
+    .es\:hover\:inset-shadow-secondary-100:where(:not([data-rac])):hover {
       --tw-inset-shadow-color: var(--es-color-secondary-100);
     }
 
     @supports (color: color-mix(in lab, red, red)) {
-      .es\:hover\:inset-shadow-secondary-100:hover {
+      .es\:hover\:inset-shadow-secondary-100:where(:not([data-rac])):hover {
         --tw-inset-shadow-color: color-mix(in oklab, var(--es-color-secondary-100) var(--tw-inset-shadow-alpha), transparent);
       }
     }
+  }
 
-    .es\:hover\:inset-ring-red-100:hover {
+  .es\:hover\:inset-ring-red-100:where([data-rac])[data-hovered] {
+    --tw-inset-ring-color: var(--es-color-red-100);
+  }
+
+  @media (hover: hover) {
+    .es\:hover\:inset-ring-red-100:where(:not([data-rac])):hover {
       --tw-inset-ring-color: var(--es-color-red-100);
     }
+  }
+
+  .es\:hover\:inset-ring-secondary-100:where([data-rac])[data-hovered] {
+    --tw-inset-ring-color: var(--es-color-secondary-100);
+  }
 
-    .es\:hover\:inset-ring-secondary-100:hover {
+  @media (hover: hover) {
+    .es\:hover\:inset-ring-secondary-100:where(:not([data-rac])):hover {
       --tw-inset-ring-color: var(--es-color-secondary-100);
     }
+  }
+
+  .es\:hover\:outline-hidden:where([data-rac])[data-hovered] {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+
+  @media (forced-colors: active) {
+    .es\:hover\:outline-hidden:where([data-rac])[data-hovered] {
+      outline-offset: 2px;
+      outline: 2px solid #0000;
+    }
+  }
 
-    .es\:hover\:outline-hidden:hover {
+  @media (hover: hover) {
+    .es\:hover\:outline-hidden:where(:not([data-rac])):hover {
       --tw-outline-style: none;
       outline-style: none;
     }
 
     @media (forced-colors: active) {
-      .es\:hover\:outline-hidden:hover {
+      .es\:hover\:outline-hidden:where(:not([data-rac])):hover {
         outline-offset: 2px;
         outline: 2px solid #0000;
       }
     }
+  }
 
-    .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\:not-selected\:hover\:bg-secondary-100:not(:is(:disabled, [data-rac][data-disabled])):not([data-selected]):where([data-rac])[data-hovered] {
+    background-color: var(--es-color-secondary-100);
+  }
 
-    .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 {
+  @media (hover: hover) {
+    .es\:not-disabled\:not-selected\:hover\:bg-secondary-100:not(:is(:disabled, [data-rac][data-disabled])):not([data-selected]):where(:not([data-rac])):hover {
       background-color: var(--es-color-secondary-100);
     }
+  }
+
+  .es\:not-disabled\:not-selected\:hover\:text-secondary-900:not(:is(:disabled, [data-rac][data-disabled])):not([data-selected]):where([data-rac])[data-hovered] {
+    color: var(--es-color-secondary-900);
+  }
 
-    .es\:not-disabled\:not-selected\:hover\:text-secondary-900:not(:is(:disabled, [data-rac][data-disabled])):not([data-selected]):hover {
+  @media (hover: hover) {
+    .es\:not-disabled\:not-selected\:hover\:text-secondary-900:not(:is(:disabled, [data-rac][data-disabled])):not([data-selected]):where(:not([data-rac])):hover {
       color: var(--es-color-secondary-900);
     }
+  }
 
-    .es\:hover\:after\:bg-accent-500:hover:after {
+  .es\:hover\:after\:bg-accent-500:where([data-rac])[data-hovered]:after {
+    content: var(--tw-content);
+    background-color: var(--es-color-accent-500);
+  }
+
+  @media (hover: hover) {
+    .es\:hover\:after\:bg-accent-500:where(:not([data-rac])):hover:after {
       content: var(--tw-content);
       background-color: var(--es-color-accent-500);
     }
+  }
 
-    .es\:hover\:not-selected\:not-disabled\:after\:from-secondary-200:hover:not([data-selected]):not(:is(:disabled, [data-rac][data-disabled])):after {
+  .es\:hover\:not-selected\:not-disabled\:after\:from-secondary-200:where([data-rac])[data-hovered]:not([data-selected]):not(:is(:disabled, [data-rac][data-disabled])):after {
+    content: var(--tw-content);
+    --tw-gradient-from: var(--es-color-secondary-200);
+    --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));
+  }
+
+  @media (hover: hover) {
+    .es\:hover\:not-selected\:not-disabled\:after\:from-secondary-200:where(:not([data-rac])):hover:not([data-selected]):not(:is(:disabled, [data-rac][data-disabled])):after {
       content: var(--tw-content);
       --tw-gradient-from: var(--es-color-secondary-200);
       --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\:hover\:not-selected\:not-disabled\:after\:to-secondary-300:hover:not([data-selected]):not(:is(:disabled, [data-rac][data-disabled])):after {
+  .es\:hover\:not-selected\:not-disabled\:after\:to-secondary-300:where([data-rac])[data-hovered]:not([data-selected]):not(:is(:disabled, [data-rac][data-disabled])):after {
+    content: var(--tw-content);
+    --tw-gradient-to: var(--es-color-secondary-300);
+    --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));
+  }
+
+  @media (hover: hover) {
+    .es\:hover\:not-selected\:not-disabled\:after\:to-secondary-300:where(:not([data-rac])):hover:not([data-selected]):not(:is(:disabled, [data-rac][data-disabled])):after {
       content: var(--tw-content);
       --tw-gradient-to: var(--es-color-secondary-300);
       --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\:focus\:border-accent-500:focus {
+  .es\:focus\:border-accent-500:where([data-rac])[data-focused], .es\:focus\:border-accent-500:where(:not([data-rac])):focus {
     border-color: var(--es-color-accent-500);
   }
 
-  .es\:focus\:text-current:focus {
+  .es\:focus\:text-current:where([data-rac])[data-focused], .es\:focus\:text-current:where(:not([data-rac])):focus {
     color: currentColor;
   }
 
-  .es\:focus\:shadow-none\!:focus {
+  .es\:focus\:shadow-none\!:where([data-rac])[data-focused], .es\:focus\:shadow-none\!:where(:not([data-rac])):focus {
     --tw-shadow: 0 0 #0000 !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\:focus\:ring-2:focus {
+  .es\:focus\:ring-2:where([data-rac])[data-focused], .es\:focus\:ring-2:where(:not([data-rac])):focus {
     --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-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);
   }
 
-  .es\:focus\:ring-accent-500\/50:focus {
+  .es\:focus\:ring-accent-500\/50:where([data-rac])[data-focused] {
+    --tw-ring-color: var(--es-color-accent-500);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:focus\:ring-accent-500\/50:where([data-rac])[data-focused] {
+      --tw-ring-color: color-mix(in oklab, var(--es-color-accent-500) 50%, transparent);
+    }
+  }
+
+  .es\:focus\:ring-accent-500\/50:where(:not([data-rac])):focus {
     --tw-ring-color: var(--es-color-accent-500);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .es\:focus\:ring-accent-500\/50:focus {
+    .es\:focus\:ring-accent-500\/50:where(:not([data-rac])):focus {
       --tw-ring-color: color-mix(in oklab, var(--es-color-accent-500) 50%, transparent);
     }
   }
 
+  .es\:not-readonly\:focus\:shadow-md:not(:where([data-readonly], [readonly])):where([data-rac])[data-focused], .es\:not-readonly\:focus\:shadow-md:not(:where([data-readonly], [readonly])):where(:not([data-rac])):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;
   }
@@ -4764,6 +5304,10 @@
     background-color: var(--es-color-secondary-100);
   }
 
+  .es\:focus-visible\:text-accent-700:is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) {
+    color: var(--es-color-accent-700);
+  }
+
   .es\:focus-visible\:text-accent-950:is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) {
     color: var(--es-color-accent-950);
   }
@@ -4791,6 +5335,16 @@
     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\:ring-accent-500\/30:is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) {
+    --tw-ring-color: var(--es-color-accent-500);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:focus-visible\:ring-accent-500\/30:is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) {
+      --tw-ring-color: color-mix(in oklab, var(--es-color-accent-500) 30%, transparent);
+    }
+  }
+
   .es\:focus-visible\:ring-accent-500\/50:is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) {
     --tw-ring-color: var(--es-color-accent-500);
   }
@@ -4821,6 +5375,10 @@
     }
   }
 
+  .es\:focus-visible\:inset-ring-accent-100:is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) {
+    --tw-inset-ring-color: var(--es-color-accent-100);
+  }
+
   .es\:focus-visible\:inset-ring-accent-600:is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) {
     --tw-inset-ring-color: var(--es-color-accent-600);
   }
@@ -4879,6 +5437,109 @@
     color: var(--es-color-accent-500);
   }
 
+  .es\:enabled\:not-pending\:cursor-pointer:enabled:not([data-pending]) {
+    cursor: pointer;
+  }
+
+  .es\:enabled\:hover\:bg-accent-500\/5:enabled:where([data-rac])[data-hovered] {
+    background-color: var(--es-color-accent-500);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:enabled\:hover\:bg-accent-500\/5:enabled:where([data-rac])[data-hovered] {
+      background-color: color-mix(in oklab, var(--es-color-accent-500) 5%, transparent);
+    }
+  }
+
+  @media (hover: hover) {
+    .es\:enabled\:hover\:bg-accent-500\/5:enabled:where(:not([data-rac])):hover {
+      background-color: var(--es-color-accent-500);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .es\:enabled\:hover\:bg-accent-500\/5:enabled:where(:not([data-rac])):hover {
+        background-color: color-mix(in oklab, var(--es-color-accent-500) 5%, transparent);
+      }
+    }
+  }
+
+  .es\:enabled\:hover\:bg-red-500\/5:enabled:where([data-rac])[data-hovered] {
+    background-color: var(--es-color-red-500);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:enabled\:hover\:bg-red-500\/5:enabled:where([data-rac])[data-hovered] {
+      background-color: color-mix(in oklab, var(--es-color-red-500) 5%, transparent);
+    }
+  }
+
+  @media (hover: hover) {
+    .es\:enabled\:hover\:bg-red-500\/5:enabled:where(:not([data-rac])):hover {
+      background-color: var(--es-color-red-500);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .es\:enabled\:hover\:bg-red-500\/5:enabled:where(:not([data-rac])):hover {
+        background-color: color-mix(in oklab, var(--es-color-red-500) 5%, transparent);
+      }
+    }
+  }
+
+  .es\:enabled\:hover\:bg-secondary-100:enabled:where([data-rac])[data-hovered] {
+    background-color: var(--es-color-secondary-100);
+  }
+
+  @media (hover: hover) {
+    .es\:enabled\:hover\:bg-secondary-100:enabled:where(:not([data-rac])):hover {
+      background-color: var(--es-color-secondary-100);
+    }
+  }
+
+  .es\:enabled\:hover\:shadow-md:enabled:where([data-rac])[data-hovered] {
+    --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\:enabled\:hover\:shadow-md:enabled:where(:not([data-rac])):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-accent-500\/10:enabled:active {
+    background-color: var(--es-color-accent-500);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:enabled\:active\:bg-accent-500\/10:enabled:active {
+      background-color: color-mix(in oklab, var(--es-color-accent-500) 10%, transparent);
+    }
+  }
+
+  .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;
   }
@@ -5056,66 +5717,66 @@
     .es\:motion-safe\:motion-preset-slide-down-sm {
       --motion-origin-translate-y: -5%;
       --motion-origin-opacity: 0;
-      --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration) * var(--motion-opacity-perceptual-duration-multiplier)) var(--motion-opacity-timing) var(--motion-opacity-delay) both;
-      --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration) * var(--motion-translate-perceptual-duration-multiplier)) var(--motion-translate-timing) var(--motion-translate-delay) both;
-      animation: var(--motion-all-loop-and-enter-animations);
+      --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both;
+      --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both;
+      animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation);
     }
 
     .es\:motion-safe\:motion-scale-in-95 {
       --motion-origin-scale-x: .95;
       --motion-origin-scale-y: .95;
-      --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration) * var(--motion-scale-perceptual-duration-multiplier)) var(--motion-scale-timing) var(--motion-scale-delay) both;
-      animation: var(--motion-all-loop-and-enter-animations);
+      --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both;
+      animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation);
     }
 
     .es\:motion-safe\:motion-scale-out-90 {
       --motion-end-scale-x: .9;
       --motion-end-scale-y: .9;
-      --motion-scale-out-animation: motion-scale-out calc(var(--motion-scale-duration) * var(--motion-scale-perceptual-duration-multiplier)) var(--motion-scale-timing) var(--motion-scale-delay) both;
-      animation: var(--motion-all-exit-animations);
+      --motion-scale-out-animation: motion-scale-out calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both;
+      animation: var(--motion-scale-out-animation), var(--motion-translate-out-animation), var(--motion-rotate-out-animation), var(--motion-filter-out-animation), var(--motion-opacity-out-animation), var(--motion-background-color-out-animation), var(--motion-text-color-out-animation);
     }
 
     .es\:motion-safe\:motion-scale-out-95 {
       --motion-end-scale-x: .95;
       --motion-end-scale-y: .95;
-      --motion-scale-out-animation: motion-scale-out calc(var(--motion-scale-duration) * var(--motion-scale-perceptual-duration-multiplier)) var(--motion-scale-timing) var(--motion-scale-delay) both;
-      animation: var(--motion-all-exit-animations);
+      --motion-scale-out-animation: motion-scale-out calc(var(--motion-scale-duration, var(--motion-duration)) * var(--motion-scale-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-scale-timing, var(--motion-timing)) var(--motion-scale-delay, var(--motion-delay)) both;
+      animation: var(--motion-scale-out-animation), var(--motion-translate-out-animation), var(--motion-rotate-out-animation), var(--motion-filter-out-animation), var(--motion-opacity-out-animation), var(--motion-background-color-out-animation), var(--motion-text-color-out-animation);
     }
 
     .es\:motion-safe\:motion-translate-y-in-\[-0\.25rem\] {
       --motion-origin-translate-y: -.25rem;
-      --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration) * var(--motion-translate-perceptual-duration-multiplier)) var(--motion-translate-timing) var(--motion-translate-delay) both;
-      animation: var(--motion-all-loop-and-enter-animations);
+      --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both;
+      animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation);
     }
 
     .es\:motion-safe\:motion-translate-y-in-\[-5\%\] {
       --motion-origin-translate-y: -5%;
-      --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration) * var(--motion-translate-perceptual-duration-multiplier)) var(--motion-translate-timing) var(--motion-translate-delay) both;
-      animation: var(--motion-all-loop-and-enter-animations);
+      --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both;
+      animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation);
     }
 
     .es\:motion-safe\:motion-translate-y-in-\[0\.25rem\] {
       --motion-origin-translate-y: .25rem;
-      --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration) * var(--motion-translate-perceptual-duration-multiplier)) var(--motion-translate-timing) var(--motion-translate-delay) both;
-      animation: var(--motion-all-loop-and-enter-animations);
+      --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both;
+      animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation);
     }
 
     .es\:motion-safe\:motion-translate-y-out-\[-0\.25rem\] {
       --motion-end-translate-y: -.25rem;
-      --motion-translate-out-animation: motion-translate-out calc(var(--motion-translate-duration) * var(--motion-translate-perceptual-duration-multiplier)) var(--motion-translate-timing) var(--motion-translate-delay) both;
-      animation: var(--motion-all-exit-animations);
+      --motion-translate-out-animation: motion-translate-out calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both;
+      animation: var(--motion-scale-out-animation), var(--motion-translate-out-animation), var(--motion-rotate-out-animation), var(--motion-filter-out-animation), var(--motion-opacity-out-animation), var(--motion-background-color-out-animation), var(--motion-text-color-out-animation);
     }
 
     .es\:motion-safe\:motion-translate-y-out-\[-5\%\] {
       --motion-end-translate-y: -5%;
-      --motion-translate-out-animation: motion-translate-out calc(var(--motion-translate-duration) * var(--motion-translate-perceptual-duration-multiplier)) var(--motion-translate-timing) var(--motion-translate-delay) both;
-      animation: var(--motion-all-exit-animations);
+      --motion-translate-out-animation: motion-translate-out calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both;
+      animation: var(--motion-scale-out-animation), var(--motion-translate-out-animation), var(--motion-rotate-out-animation), var(--motion-filter-out-animation), var(--motion-opacity-out-animation), var(--motion-background-color-out-animation), var(--motion-text-color-out-animation);
     }
 
     .es\:motion-safe\:motion-translate-y-out-\[0\.25rem\] {
       --motion-end-translate-y: .25rem;
-      --motion-translate-out-animation: motion-translate-out calc(var(--motion-translate-duration) * var(--motion-translate-perceptual-duration-multiplier)) var(--motion-translate-timing) var(--motion-translate-delay) both;
-      animation: var(--motion-all-exit-animations);
+      --motion-translate-out-animation: motion-translate-out calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both;
+      animation: var(--motion-scale-out-animation), var(--motion-translate-out-animation), var(--motion-rotate-out-animation), var(--motion-filter-out-animation), var(--motion-opacity-out-animation), var(--motion-background-color-out-animation), var(--motion-text-color-out-animation);
     }
 
     .es\:motion-safe\:motion-ease-spring-bouncy {
@@ -5147,50 +5808,50 @@
 
     .es\:motion-safe\:data-\[placement\=bottom\]\:-motion-translate-y-in-\[5\%\][data-placement="bottom"] {
       --motion-origin-translate-y: calc(5% * -1);
-      --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration) * var(--motion-translate-perceptual-duration-multiplier)) var(--motion-translate-timing) var(--motion-translate-delay) both;
-      animation: var(--motion-all-loop-and-enter-animations);
+      --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both;
+      animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation);
     }
 
     .es\:motion-safe\:data-\[placement\=bottom\]\:motion-translate-y-out-\[-12\.5\%\][data-placement="bottom"] {
       --motion-end-translate-y: -12.5%;
-      --motion-translate-out-animation: motion-translate-out calc(var(--motion-translate-duration) * var(--motion-translate-perceptual-duration-multiplier)) var(--motion-translate-timing) var(--motion-translate-delay) both;
-      animation: var(--motion-all-exit-animations);
+      --motion-translate-out-animation: motion-translate-out calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both;
+      animation: var(--motion-scale-out-animation), var(--motion-translate-out-animation), var(--motion-rotate-out-animation), var(--motion-filter-out-animation), var(--motion-opacity-out-animation), var(--motion-background-color-out-animation), var(--motion-text-color-out-animation);
     }
 
     .es\:motion-safe\:data-\[placement\=left\]\:motion-translate-x-in-\[5\%\][data-placement="left"] {
       --motion-origin-translate-x: 5%;
-      --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration) * var(--motion-translate-perceptual-duration-multiplier)) var(--motion-translate-timing) var(--motion-translate-delay) both;
-      animation: var(--motion-all-loop-and-enter-animations);
+      --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both;
+      animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation);
     }
 
     .es\:motion-safe\:data-\[placement\=left\]\:motion-translate-x-out-\[12\.5\%\][data-placement="left"] {
       --motion-end-translate-x: 12.5%;
-      --motion-translate-out-animation: motion-translate-out calc(var(--motion-translate-duration) * var(--motion-translate-perceptual-duration-multiplier)) var(--motion-translate-timing) var(--motion-translate-delay) both;
-      animation: var(--motion-all-exit-animations);
+      --motion-translate-out-animation: motion-translate-out calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both;
+      animation: var(--motion-scale-out-animation), var(--motion-translate-out-animation), var(--motion-rotate-out-animation), var(--motion-filter-out-animation), var(--motion-opacity-out-animation), var(--motion-background-color-out-animation), var(--motion-text-color-out-animation);
     }
 
     .es\:motion-safe\:data-\[placement\=right\]\:-motion-translate-x-in-\[5\%\][data-placement="right"] {
       --motion-origin-translate-x: calc(5% * -1);
-      --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration) * var(--motion-translate-perceptual-duration-multiplier)) var(--motion-translate-timing) var(--motion-translate-delay) both;
-      animation: var(--motion-all-loop-and-enter-animations);
+      --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both;
+      animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation);
     }
 
     .es\:motion-safe\:data-\[placement\=right\]\:motion-translate-x-out-\[-12\.5\%\][data-placement="right"] {
       --motion-end-translate-x: -12.5%;
-      --motion-translate-out-animation: motion-translate-out calc(var(--motion-translate-duration) * var(--motion-translate-perceptual-duration-multiplier)) var(--motion-translate-timing) var(--motion-translate-delay) both;
-      animation: var(--motion-all-exit-animations);
+      --motion-translate-out-animation: motion-translate-out calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both;
+      animation: var(--motion-scale-out-animation), var(--motion-translate-out-animation), var(--motion-rotate-out-animation), var(--motion-filter-out-animation), var(--motion-opacity-out-animation), var(--motion-background-color-out-animation), var(--motion-text-color-out-animation);
     }
 
     .es\:motion-safe\:data-\[placement\=top\]\:motion-translate-y-in-\[5\%\][data-placement="top"] {
       --motion-origin-translate-y: 5%;
-      --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration) * var(--motion-translate-perceptual-duration-multiplier)) var(--motion-translate-timing) var(--motion-translate-delay) both;
-      animation: var(--motion-all-loop-and-enter-animations);
+      --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both;
+      animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation);
     }
 
     .es\:motion-safe\:data-\[placement\=top\]\:motion-translate-y-out-\[12\.5\%\][data-placement="top"] {
       --motion-end-translate-y: 12.5%;
-      --motion-translate-out-animation: motion-translate-out calc(var(--motion-translate-duration) * var(--motion-translate-perceptual-duration-multiplier)) var(--motion-translate-timing) var(--motion-translate-delay) both;
-      animation: var(--motion-all-exit-animations);
+      --motion-translate-out-animation: motion-translate-out calc(var(--motion-translate-duration, var(--motion-duration)) * var(--motion-translate-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-translate-timing, var(--motion-timing)) var(--motion-translate-delay, var(--motion-delay)) both;
+      animation: var(--motion-scale-out-animation), var(--motion-translate-out-animation), var(--motion-rotate-out-animation), var(--motion-filter-out-animation), var(--motion-opacity-out-animation), var(--motion-background-color-out-animation), var(--motion-text-color-out-animation);
     }
   }
 
@@ -5198,8 +5859,8 @@
     .es\:motion-reduce\:motion-preset-fade, .es\:motion-reduce\:motion-preset-fade-md {
       --motion-origin-opacity: 0;
       --motion-duration: .5s;
-      --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration) * var(--motion-opacity-perceptual-duration-multiplier)) var(--motion-opacity-timing) var(--motion-opacity-delay) both;
-      animation: var(--motion-all-loop-and-enter-animations);
+      --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both;
+      animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation);
     }
   }
 
@@ -5225,18 +5886,62 @@
     }
   }
 
-  .es\:any-focus\:outline-hidden:is(:focus-visible, [data-rac][data-focus-visible], :focus, [data-rac][data-focused]) {
-    --tw-outline-style: none;
-    outline-style: none;
+  .es\:pending\:cursor-wait[data-pending] {
+    cursor: wait;
   }
 
-  @media (forced-colors: active) {
-    .es\:any-focus\:outline-hidden:is(:focus-visible, [data-rac][data-focus-visible], :focus, [data-rac][data-focused]) {
-      outline-offset: 2px;
-      outline: 2px solid #0000;
+  .es\:pending\:shadow-none\![data-pending] {
+    --tw-shadow: 0 0 #0000 !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\:enabled\:pressed\:bg-accent-50:enabled[data-pressed] {
+    background-color: var(--es-color-accent-50);
+  }
+
+  .es\:enabled\:pressed\:bg-accent-500\/10:enabled[data-pressed] {
+    background-color: var(--es-color-accent-500);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:enabled\:pressed\:bg-accent-500\/10:enabled[data-pressed] {
+      background-color: color-mix(in oklab, var(--es-color-accent-500) 10%, transparent);
+    }
+  }
+
+  .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 +5952,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 +6019,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);
   }
 
@@ -5302,10 +6036,6 @@
     }
   }
 
-  .es\:readonly\:bg-secondary-50:where([data-readonly], [readonly]) {
-    background-color: var(--es-color-secondary-50);
-  }
-
   .es\:dragging\:scale-110\![data-dragging] {
     --tw-scale-x: 110% !important;
     --tw-scale-y: 110% !important;
@@ -5313,6 +6043,27 @@
     scale: var(--tw-scale-x) var(--tw-scale-y) !important;
   }
 
+  .es\:any-focus\:outline-hidden:is(:focus-visible, [data-rac][data-focus-visible], :focus, [data-rac][data-focused]) {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+
+  @media (forced-colors: active) {
+    .es\:any-focus\:outline-hidden:is(:focus-visible, [data-rac][data-focus-visible], :focus, [data-rac][data-focused]) {
+      outline-offset: 2px;
+      outline: 2px solid #0000;
+    }
+  }
+
+  .es\:readonly\:bg-secondary-50:where([data-readonly], [readonly]) {
+    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\:icon\:absolute > svg {
     position: absolute;
   }
@@ -5371,6 +6122,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;