@eightshift/ui-components 5.0.2 → 5.0.3

package/dist/assets/style-editor.css

@@ -82,6 +82,8 @@
   --es-text-xs--line-height: 1.3;
   --es-spacing-3_25: .8125rem;
   --es-spacing-5_5: 1.375rem;
+  --es-radius-7: .4375rem;
+  --es-radius-10: .625rem;
   --es-color-secondary-50: var(--es-color-zinc-50);
   --es-color-secondary-100: var(--es-color-zinc-100);
   --es-color-secondary-200: var(--es-color-zinc-200);
@@ -94,6 +96,7 @@
   --es-color-secondary-900: var(--es-color-zinc-900);
   --es-color-accent-50: var(--es-color-teal-50);
   --es-color-accent-100: var(--es-color-teal-100);
+  --es-color-accent-300: var(--es-color-teal-300);
   --es-color-accent-400: var(--es-color-teal-400);
   --es-color-accent-500: var(--es-color-teal-500);
   --es-color-accent-600: var(--es-color-teal-600);
@@ -104,14 +107,17 @@
   --es-color-red-50: oklch(97.1% .013 17.38);
   --es-color-red-100: oklch(93.6% .032 17.717);
   --es-color-red-200: oklch(88.5% .062 18.334);
-  --es-color-red-400: oklch(70.4% .191 22.216);
+  --es-color-red-300: oklch(80.8% .114 19.571);
   --es-color-red-500: oklch(63.7% .237 25.331);
   --es-color-red-600: oklch(57.7% .245 27.325);
   --es-color-red-700: oklch(50.5% .213 27.518);
   --es-color-red-800: oklch(44.4% .177 26.899);
   --es-color-red-900: oklch(39.6% .141 25.723);
   --es-color-red-950: oklch(25.8% .092 26.042);
+  --es-color-orange-200: oklch(90.1% .076 70.697);
   --es-color-orange-500: oklch(70.5% .213 47.604);
+  --es-color-orange-700: oklch(55.3% .195 38.402);
+  --es-color-orange-950: oklch(26.6% .079 36.259);
   --es-color-amber-50: oklch(98.7% .022 95.277);
   --es-color-amber-100: oklch(96.2% .059 95.617);
   --es-color-amber-200: oklch(92.4% .12 95.746);
@@ -137,6 +143,10 @@
   --es-color-green-800: oklch(44.8% .119 151.328);
   --es-color-green-900: oklch(39.3% .095 152.535);
   --es-color-green-950: oklch(26.6% .065 152.934);
+  --es-color-emerald-200: oklch(90.5% .093 164.15);
+  --es-color-emerald-500: oklch(69.6% .17 162.48);
+  --es-color-emerald-600: oklch(59.6% .145 163.225);
+  --es-color-emerald-950: oklch(26.2% .051 172.552);
   --es-color-teal-50: oklch(98.4% .014 180.72);
   --es-color-teal-100: oklch(95.3% .051 180.801);
   --es-color-teal-200: oklch(91% .096 180.426);
@@ -251,6 +261,7 @@
   --es-radius-md: .375rem;
   --es-radius-lg: .5rem;
   --es-radius-xl: .75rem;
+  --es-radius-2xl: 1rem;
   --es-drop-shadow-sm: 0 1px 2px #00000026;
   --es-animate-spin: spin 1s linear infinite;
   --es-blur-xs: 4px;
@@ -1155,6 +1166,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   min-height: calc(var(--es-spacing) * 12);
 }
 
+:is(body, #wpwrap #editor) .es\:min-h-14 {
+  min-height: calc(var(--es-spacing) * 14);
+}
+
 :is(body, #wpwrap #editor) .es\:min-h-24 {
   min-height: calc(var(--es-spacing) * 24);
 }
@@ -1603,6 +1618,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   flex-wrap: wrap;
 }
 
+:is(body, #wpwrap #editor) .es\:place-items-center {
+  place-items: center;
+}
+
 :is(body, #wpwrap #editor) .es\:items-center {
   align-items: center;
 }
@@ -1881,6 +1900,18 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   border-radius: .25rem;
 }
 
+:is(body, #wpwrap #editor) .es\:rounded-2xl {
+  border-radius: var(--es-radius-2xl);
+}
+
+:is(body, #wpwrap #editor) .es\:rounded-7 {
+  border-radius: var(--es-radius-7);
+}
+
+:is(body, #wpwrap #editor) .es\:rounded-10 {
+  border-radius: var(--es-radius-10);
+}
+
 :is(body, #wpwrap #editor) .es\:rounded-full {
   border-radius: 3.40282e38px;
 }
@@ -2036,12 +2067,24 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   }
 }
 
-:is(body, #wpwrap #editor) .es\:border-amber-500 {
-  border-color: var(--es-color-amber-500);
+:is(body, #wpwrap #editor) .es\:border-blue-400\/75 {
+  border-color: var(--es-color-blue-400);
 }
 
-:is(body, #wpwrap #editor) .es\:border-blue-400 {
-  border-color: var(--es-color-blue-400);
+@supports (color: color-mix(in lab, red, red)) {
+  :is(body, #wpwrap #editor) .es\:border-blue-400\/75 {
+    border-color: color-mix(in oklab, var(--es-color-blue-400) 75%, transparent);
+  }
+}
+
+:is(body, #wpwrap #editor) .es\:border-emerald-500\/75 {
+  border-color: var(--es-color-emerald-500);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :is(body, #wpwrap #editor) .es\:border-emerald-500\/75 {
+    border-color: color-mix(in oklab, var(--es-color-emerald-500) 75%, transparent);
+  }
 }
 
 :is(body, #wpwrap #editor) .es\:border-gray-100 {
@@ -2056,25 +2099,31 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   border-color: var(--es-color-gray-300);
 }
 
-:is(body, #wpwrap #editor) .es\:border-green-500 {
-  border-color: var(--es-color-green-500);
+:is(body, #wpwrap #editor) .es\:border-orange-500\/75 {
+  border-color: var(--es-color-orange-500);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :is(body, #wpwrap #editor) .es\:border-orange-500\/75 {
+    border-color: color-mix(in oklab, var(--es-color-orange-500) 75%, transparent);
+  }
 }
 
 :is(body, #wpwrap #editor) .es\:border-red-200\! {
   border-color: var(--es-color-red-200) !important;
 }
 
-:is(body, #wpwrap #editor) .es\:border-red-400 {
-  border-color: var(--es-color-red-400);
+:is(body, #wpwrap #editor) .es\:border-red-300 {
+  border-color: var(--es-color-red-300);
 }
 
-:is(body, #wpwrap #editor) .es\:border-red-600\/50 {
-  border-color: var(--es-color-red-600);
+:is(body, #wpwrap #editor) .es\:border-red-700\/50 {
+  border-color: var(--es-color-red-700);
 }
 
 @supports (color: color-mix(in lab, red, red)) {
-  :is(body, #wpwrap #editor) .es\:border-red-600\/50 {
-    border-color: color-mix(in oklab, var(--es-color-red-600) 50%, transparent);
+  :is(body, #wpwrap #editor) .es\:border-red-700\/50 {
+    border-color: color-mix(in oklab, var(--es-color-red-700) 50%, transparent);
   }
 }
 
@@ -2082,16 +2131,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   border-color: var(--es-color-secondary-100);
 }
 
-:is(body, #wpwrap #editor) .es\:border-secondary-200, :is(body, #wpwrap #editor) .es\:border-secondary-200\/50 {
+:is(body, #wpwrap #editor) .es\:border-secondary-200 {
   border-color: var(--es-color-secondary-200);
 }
 
-@supports (color: color-mix(in lab, red, red)) {
-  :is(body, #wpwrap #editor) .es\:border-secondary-200\/50 {
-    border-color: color-mix(in oklab, var(--es-color-secondary-200) 50%, transparent);
-  }
-}
-
 :is(body, #wpwrap #editor) .es\:border-secondary-300, :is(body, #wpwrap #editor) .es\:border-secondary-300\/0 {
   border-color: var(--es-color-secondary-300);
 }
@@ -2202,16 +2245,6 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   }
 }
 
-:is(body, #wpwrap #editor) .es\:bg-amber-100\/5 {
-  background-color: var(--es-color-amber-100);
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  :is(body, #wpwrap #editor) .es\:bg-amber-100\/5 {
-    background-color: color-mix(in oklab, var(--es-color-amber-100) 5%, transparent);
-  }
-}
-
 :is(body, #wpwrap #editor) .es\:bg-black, :is(body, #wpwrap #editor) .es\:bg-black\/25 {
   background-color: var(--es-color-black);
 }
@@ -2232,13 +2265,13 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   }
 }
 
-:is(body, #wpwrap #editor) .es\:bg-blue-100\/5 {
-  background-color: var(--es-color-blue-100);
+:is(body, #wpwrap #editor) .es\:bg-blue-200\/5 {
+  background-color: var(--es-color-blue-200);
 }
 
 @supports (color: color-mix(in lab, red, red)) {
-  :is(body, #wpwrap #editor) .es\:bg-blue-100\/5 {
-    background-color: color-mix(in oklab, var(--es-color-blue-100) 5%, transparent);
+  :is(body, #wpwrap #editor) .es\:bg-blue-200\/5 {
+    background-color: color-mix(in oklab, var(--es-color-blue-200) 5%, transparent);
   }
 }
 
@@ -2254,22 +2287,22 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   background-color: var(--es-color-cyan-500);
 }
 
-:is(body, #wpwrap #editor) .es\:bg-fuchsia-500 {
-  background-color: var(--es-color-fuchsia-500);
+:is(body, #wpwrap #editor) .es\:bg-emerald-200\/5 {
+  background-color: var(--es-color-emerald-200);
 }
 
-:is(body, #wpwrap #editor) .es\:bg-gray-100 {
-  background-color: var(--es-color-gray-100);
+@supports (color: color-mix(in lab, red, red)) {
+  :is(body, #wpwrap #editor) .es\:bg-emerald-200\/5 {
+    background-color: color-mix(in oklab, var(--es-color-emerald-200) 5%, transparent);
+  }
 }
 
-:is(body, #wpwrap #editor) .es\:bg-green-100\/5 {
-  background-color: var(--es-color-green-100);
+:is(body, #wpwrap #editor) .es\:bg-fuchsia-500 {
+  background-color: var(--es-color-fuchsia-500);
 }
 
-@supports (color: color-mix(in lab, red, red)) {
-  :is(body, #wpwrap #editor) .es\:bg-green-100\/5 {
-    background-color: color-mix(in oklab, var(--es-color-green-100) 5%, transparent);
-  }
+:is(body, #wpwrap #editor) .es\:bg-gray-100 {
+  background-color: var(--es-color-gray-100);
 }
 
 :is(body, #wpwrap #editor) .es\:bg-green-500 {
@@ -2288,6 +2321,16 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   background-color: var(--es-color-neutral-100);
 }
 
+:is(body, #wpwrap #editor) .es\:bg-orange-200\/5 {
+  background-color: var(--es-color-orange-200);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :is(body, #wpwrap #editor) .es\:bg-orange-200\/5 {
+    background-color: color-mix(in oklab, var(--es-color-orange-200) 5%, transparent);
+  }
+}
+
 :is(body, #wpwrap #editor) .es\:bg-orange-500 {
   background-color: var(--es-color-orange-500);
 }
@@ -2300,13 +2343,13 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   background-color: var(--es-color-red-50);
 }
 
-:is(body, #wpwrap #editor) .es\:bg-red-100\/5 {
-  background-color: var(--es-color-red-100);
+:is(body, #wpwrap #editor) .es\:bg-red-200\/5 {
+  background-color: var(--es-color-red-200);
 }
 
 @supports (color: color-mix(in lab, red, red)) {
-  :is(body, #wpwrap #editor) .es\:bg-red-100\/5 {
-    background-color: color-mix(in oklab, var(--es-color-red-100) 5%, transparent);
+  :is(body, #wpwrap #editor) .es\:bg-red-200\/5 {
+    background-color: color-mix(in oklab, var(--es-color-red-200) 5%, transparent);
   }
 }
 
@@ -2506,6 +2549,16 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   background-image: linear-gradient(var(--tw-gradient-stops));
 }
 
+:is(body, #wpwrap #editor) .es\:bg-conic {
+  --tw-gradient-position: in oklab;
+  background-image: conic-gradient(var(--tw-gradient-stops));
+}
+
+:is(body, #wpwrap #editor) .es\:bg-gradient-to-br {
+  --tw-gradient-position: to bottom right in oklab;
+  background-image: linear-gradient(var(--tw-gradient-stops));
+}
+
 :is(body, #wpwrap #editor) .es\:bg-gradient-to-r {
   --tw-gradient-position: to right in oklab;
   background-image: linear-gradient(var(--tw-gradient-stops));
@@ -2526,14 +2579,6 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   background-image: radial-gradient(var(--tw-gradient-stops, circle at 75% 50%));
 }
 
-:is(body, #wpwrap #editor) .es\:bg-\[conic-gradient\(var\(--tw-gradient-stops\)\)\] {
-  background-image: conic-gradient(var(--tw-gradient-stops));
-}
-
-:is(body, #wpwrap #editor) .es\:bg-\[radial-gradient\(var\(--tw-gradient-stops\)\)\] {
-  background-image: radial-gradient(var(--tw-gradient-stops));
-}
-
 :is(body, #wpwrap #editor) .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));
@@ -2554,6 +2599,20 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   --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));
 }
 
+:is(body, #wpwrap #editor) .es\:from-current\/75 {
+  --tw-gradient-from: currentcolor;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :is(body, #wpwrap #editor) .es\:from-current\/75 {
+    --tw-gradient-from: color-mix(in oklab, currentcolor 75%, transparent);
+  }
+}
+
+:is(body, #wpwrap #editor) .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));
+}
+
 :is(body, #wpwrap #editor) .es\:from-red-50\/75 {
   --tw-gradient-from: var(--es-color-red-50);
 }
@@ -2621,6 +2680,20 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   --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));
 }
 
+:is(body, #wpwrap #editor) .es\:to-current\/10 {
+  --tw-gradient-to: currentcolor;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :is(body, #wpwrap #editor) .es\:to-current\/10 {
+    --tw-gradient-to: color-mix(in oklab, currentcolor 10%, transparent);
+  }
+}
+
+:is(body, #wpwrap #editor) .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));
+}
+
 :is(body, #wpwrap #editor) .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));
@@ -2750,6 +2823,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   padding-inline: calc(var(--es-spacing) * 2);
 }
 
+:is(body, #wpwrap #editor) .es\:px-2\.5 {
+  padding-inline: calc(var(--es-spacing) * 2.5);
+}
+
 :is(body, #wpwrap #editor) .es\:px-3 {
   padding-inline: calc(var(--es-spacing) * 3);
 }
@@ -3008,24 +3085,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   color: var(--es-color-accent-950);
 }
 
-:is(body, #wpwrap #editor) .es\:text-amber-500 {
-  color: var(--es-color-amber-500);
-}
-
-:is(body, #wpwrap #editor) .es\:text-amber-900 {
-  color: var(--es-color-amber-900);
-}
-
-:is(body, #wpwrap #editor) .es\:text-amber-950, :is(body, #wpwrap #editor) .es\:text-amber-950\/60 {
+:is(body, #wpwrap #editor) .es\:text-amber-950 {
   color: var(--es-color-amber-950);
 }
 
-@supports (color: color-mix(in lab, red, red)) {
-  :is(body, #wpwrap #editor) .es\:text-amber-950\/60 {
-    color: color-mix(in oklab, var(--es-color-amber-950) 60%, transparent);
-  }
-}
-
 :is(body, #wpwrap #editor) .es\:text-black {
   color: var(--es-color-black);
 }
@@ -3038,10 +3101,6 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   color: var(--es-color-blue-500);
 }
 
-:is(body, #wpwrap #editor) .es\:text-blue-900 {
-  color: var(--es-color-blue-900);
-}
-
 :is(body, #wpwrap #editor) .es\:text-blue-950\/60 {
   color: var(--es-color-blue-950);
 }
@@ -3056,6 +3115,24 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   color: var(--es-color-cyan-500);
 }
 
+:is(body, #wpwrap #editor) .es\:text-emerald-500 {
+  color: var(--es-color-emerald-500);
+}
+
+:is(body, #wpwrap #editor) .es\:text-emerald-600 {
+  color: var(--es-color-emerald-600);
+}
+
+:is(body, #wpwrap #editor) .es\:text-emerald-950\/60 {
+  color: var(--es-color-emerald-950);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :is(body, #wpwrap #editor) .es\:text-emerald-950\/60 {
+    color: color-mix(in oklab, var(--es-color-emerald-950) 60%, transparent);
+  }
+}
+
 :is(body, #wpwrap #editor) .es\:text-fuchsia-500 {
   color: var(--es-color-fuchsia-500);
 }
@@ -3082,20 +3159,6 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   color: var(--es-color-green-500);
 }
 
-:is(body, #wpwrap #editor) .es\:text-green-900 {
-  color: var(--es-color-green-900);
-}
-
-:is(body, #wpwrap #editor) .es\:text-green-950\/60 {
-  color: var(--es-color-green-950);
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  :is(body, #wpwrap #editor) .es\:text-green-950\/60 {
-    color: color-mix(in oklab, var(--es-color-green-950) 60%, transparent);
-  }
-}
-
 :is(body, #wpwrap #editor) .es\:text-indigo-500 {
   color: var(--es-color-indigo-500);
 }
@@ -3108,8 +3171,18 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   color: var(--es-color-orange-500);
 }
 
-:is(body, #wpwrap #editor) .es\:text-red-400 {
-  color: var(--es-color-red-400);
+:is(body, #wpwrap #editor) .es\:text-orange-700 {
+  color: var(--es-color-orange-700);
+}
+
+:is(body, #wpwrap #editor) .es\:text-orange-950\/60 {
+  color: var(--es-color-orange-950);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :is(body, #wpwrap #editor) .es\:text-orange-950\/60 {
+    color: color-mix(in oklab, var(--es-color-orange-950) 60%, transparent);
+  }
 }
 
 :is(body, #wpwrap #editor) .es\:text-red-500 {
@@ -3120,12 +3193,8 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   color: var(--es-color-red-600);
 }
 
-:is(body, #wpwrap #editor) .es\:text-red-800 {
-  color: var(--es-color-red-800);
-}
-
-:is(body, #wpwrap #editor) .es\:text-red-900 {
-  color: var(--es-color-red-900);
+:is(body, #wpwrap #editor) .es\:text-red-700 {
+  color: var(--es-color-red-700);
 }
 
 :is(body, #wpwrap #editor) .es\:text-red-950\/60 {
@@ -3365,33 +3434,33 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   }
 }
 
-:is(body, #wpwrap #editor) .es\:shadow-amber-500\/15 {
-  --tw-shadow-color: var(--es-color-amber-500);
+:is(body, #wpwrap #editor) .es\:shadow-blue-500\/15 {
+  --tw-shadow-color: var(--es-color-blue-500);
 }
 
 @supports (color: color-mix(in lab, red, red)) {
-  :is(body, #wpwrap #editor) .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);
+  :is(body, #wpwrap #editor) .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);
   }
 }
 
-:is(body, #wpwrap #editor) .es\:shadow-blue-500\/15 {
-  --tw-shadow-color: var(--es-color-blue-500);
+:is(body, #wpwrap #editor) .es\:shadow-emerald-500\/15 {
+  --tw-shadow-color: var(--es-color-emerald-500);
 }
 
 @supports (color: color-mix(in lab, red, red)) {
-  :is(body, #wpwrap #editor) .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);
+  :is(body, #wpwrap #editor) .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);
   }
 }
 
-:is(body, #wpwrap #editor) .es\:shadow-green-500\/15 {
-  --tw-shadow-color: var(--es-color-green-500);
+:is(body, #wpwrap #editor) .es\:shadow-orange-500\/15 {
+  --tw-shadow-color: var(--es-color-orange-500);
 }
 
 @supports (color: color-mix(in lab, red, red)) {
-  :is(body, #wpwrap #editor) .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);
+  :is(body, #wpwrap #editor) .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);
   }
 }
 
@@ -3415,6 +3484,16 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   }
 }
 
+:is(body, #wpwrap #editor) .es\:shadow-red-700\/20 {
+  --tw-shadow-color: var(--es-color-red-700);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :is(body, #wpwrap #editor) .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);
+  }
+}
+
 :is(body, #wpwrap #editor) .es\:shadow-secondary-300\/25 {
   --tw-shadow-color: var(--es-color-secondary-300);
 }
@@ -3491,6 +3570,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   --tw-inset-ring-color: var(--es-color-red-100);
 }
 
+:is(body, #wpwrap #editor) .es\:inset-ring-secondary-50 {
+  --tw-inset-ring-color: var(--es-color-secondary-50);
+}
+
 :is(body, #wpwrap #editor) .es\:inset-ring-secondary-100 {
   --tw-inset-ring-color: var(--es-color-secondary-100);
 }
@@ -3555,6 +3638,11 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   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, );
 }
 
+:is(body, #wpwrap #editor) .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, );
+}
+
 :is(body, #wpwrap #editor) .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, );
@@ -4201,6 +4289,11 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   display: none;
 }
 
+:is(body, #wpwrap #editor) .es\:focus-within\:shadow-md:focus-within {
+  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+
 @media (hover: hover) {
   :is(body, #wpwrap #editor) .es\:hover\:cursor-grab:hover {
     cursor: grab;
@@ -4331,17 +4424,7 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
     }
   }
 
-  :is(body, #wpwrap #editor) .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)) {
-    :is(body, #wpwrap #editor) .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);
-    }
-  }
-
-  :is(body, #wpwrap #editor) .es\:not-disabled\:hover\:bg-secondary-100:not(:is(:disabled, [data-rac][data-disabled])):hover, :is(body, #wpwrap #editor) .es\:not-disabled\:not-selected\:hover\:bg-secondary-100:not(:is(:disabled, [data-rac][data-disabled])):not([data-selected]):hover {
+  :is(body, #wpwrap #editor) .es\:not-disabled\:not-selected\:hover\:bg-secondary-100:not(:is(:disabled, [data-rac][data-disabled])):not([data-selected]):hover {
     background-color: var(--es-color-secondary-100);
   }
 
@@ -4395,6 +4478,11 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   }
 }
 
+:is(body, #wpwrap #editor) .es\:not-readonly\:focus\:shadow-md:not(:where([data-readonly], [readonly])):focus {
+  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+
 :is(body, #wpwrap #editor) .es\:focus-visible\:z-10:is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) {
   z-index: 10;
 }
@@ -4534,6 +4622,54 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   color: var(--es-color-accent-500);
 }
 
+:is(body, #wpwrap #editor) .es\:enabled\:cursor-pointer:enabled {
+  cursor: pointer;
+}
+
+@media (hover: hover) {
+  :is(body, #wpwrap #editor) .es\:enabled\:hover\:bg-red-500\/5:enabled:hover {
+    background-color: var(--es-color-red-500);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :is(body, #wpwrap #editor) .es\:enabled\:hover\:bg-red-500\/5:enabled:hover {
+      background-color: color-mix(in oklab, var(--es-color-red-500) 5%, transparent);
+    }
+  }
+
+  :is(body, #wpwrap #editor) .es\:enabled\:hover\:bg-secondary-100:enabled:hover {
+    background-color: var(--es-color-secondary-100);
+  }
+
+  :is(body, #wpwrap #editor) .es\:enabled\:hover\:shadow-md:enabled:hover {
+    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+}
+
+:is(body, #wpwrap #editor) .es\:enabled\:active\:bg-accent-50:enabled:active {
+  background-color: var(--es-color-accent-50);
+}
+
+:is(body, #wpwrap #editor) .es\:enabled\:active\:bg-red-500\/10:enabled:active {
+  background-color: var(--es-color-red-500);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :is(body, #wpwrap #editor) .es\:enabled\:active\:bg-red-500\/10:enabled:active {
+    background-color: color-mix(in oklab, var(--es-color-red-500) 10%, transparent);
+  }
+}
+
+:is(body, #wpwrap #editor) .es\:enabled\:active\:text-accent-950:enabled:active {
+  color: var(--es-color-accent-950);
+}
+
+:is(body, #wpwrap #editor) .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);
+}
+
 :is(body, #wpwrap #editor) .es\:disabled\:invisible:is(:disabled, [data-rac][data-disabled]) {
   visibility: hidden;
 }
@@ -4892,6 +5028,43 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   }
 }
 
+:is(body, #wpwrap #editor) .es\:enabled\:pressed\:bg-accent-50:enabled[data-pressed] {
+  background-color: var(--es-color-accent-50);
+}
+
+:is(body, #wpwrap #editor) .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)) {
+  :is(body, #wpwrap #editor) .es\:enabled\:pressed\:bg-red-500\/10:enabled[data-pressed] {
+    background-color: color-mix(in oklab, var(--es-color-red-500) 10%, transparent);
+  }
+}
+
+:is(body, #wpwrap #editor) .es\:enabled\:pressed\:text-accent-950:enabled[data-pressed] {
+  color: var(--es-color-accent-950);
+}
+
+:is(body, #wpwrap #editor) .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);
+}
+
+:is(body, #wpwrap #editor) .es\:selected\:border-accent-400\/10[data-selected] {
+  border-color: var(--es-color-accent-400);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :is(body, #wpwrap #editor) .es\:selected\:border-accent-400\/10[data-selected] {
+    border-color: color-mix(in oklab, var(--es-color-accent-400) 10%, transparent);
+  }
+}
+
+:is(body, #wpwrap #editor) .es\:selected\:border-accent-600[data-selected] {
+  border-color: var(--es-color-accent-600);
+}
+
 :is(body, #wpwrap #editor) .es\:selected\:bg-accent-50\/50[data-selected] {
   background-color: var(--es-color-accent-50);
 }
@@ -4902,18 +5075,47 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   }
 }
 
-:is(body, #wpwrap #editor) .es\:selected\:bg-accent-400\/15[data-selected] {
-  background-color: var(--es-color-accent-400);
+:is(body, #wpwrap #editor) .es\:selected\:bg-gradient-to-br[data-selected] {
+  --tw-gradient-position: to bottom right in oklab;
+  background-image: linear-gradient(var(--tw-gradient-stops));
+}
+
+:is(body, #wpwrap #editor) .es\:selected\:from-accent-300\/10[data-selected] {
+  --tw-gradient-from: var(--es-color-accent-300);
 }
 
 @supports (color: color-mix(in lab, red, red)) {
-  :is(body, #wpwrap #editor) .es\:selected\:bg-accent-400\/15[data-selected] {
-    background-color: color-mix(in oklab, var(--es-color-accent-400) 15%, transparent);
+  :is(body, #wpwrap #editor) .es\:selected\:from-accent-300\/10[data-selected] {
+    --tw-gradient-from: color-mix(in oklab, var(--es-color-accent-300) 10%, transparent);
   }
 }
 
-:is(body, #wpwrap #editor) .es\:selected\:bg-accent-600[data-selected] {
-  background-color: var(--es-color-accent-600);
+:is(body, #wpwrap #editor) .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));
+}
+
+:is(body, #wpwrap #editor) .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));
+}
+
+:is(body, #wpwrap #editor) .es\:selected\:to-accent-400\/20[data-selected] {
+  --tw-gradient-to: var(--es-color-accent-400);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :is(body, #wpwrap #editor) .es\:selected\:to-accent-400\/20[data-selected] {
+    --tw-gradient-to: color-mix(in oklab, var(--es-color-accent-400) 20%, transparent);
+  }
+}
+
+:is(body, #wpwrap #editor) .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));
+}
+
+:is(body, #wpwrap #editor) .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));
 }
 
 :is(body, #wpwrap #editor) .es\:selected\:text-accent-900[data-selected] {
@@ -4940,9 +5142,9 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   --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));
 }
 
-:is(body, #wpwrap #editor) .es\:selected\:after\:shadow-xs[data-selected]:after {
+:is(body, #wpwrap #editor) .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);
 }
 
@@ -4961,6 +5163,11 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   background-color: var(--es-color-secondary-50);
 }
 
+:is(body, #wpwrap #editor) .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;
+}
+
 :is(body, #wpwrap #editor) .es\:dragging\:scale-110\![data-dragging] {
   --tw-scale-x: 110% !important;
   --tw-scale-y: 110% !important;
@@ -5026,6 +5233,11 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   height: calc(var(--es-spacing) * 7);
 }
 
+:is(body, #wpwrap #editor) .es\:icon\:size-7\! > svg {
+  width: calc(var(--es-spacing) * 7) !important;
+  height: calc(var(--es-spacing) * 7) !important;
+}
+
 :is(body, #wpwrap #editor) .es\:icon\:size-\[0\.8rem\] > svg {
   width: .8rem;
   height: .8rem;