@eightshift/ui-components 5.0.9 → 5.1.0

package/dist/assets/style-editor.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 @layer properties {
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
     *, :before, :after, ::backdrop {
@@ -318,7 +318,6 @@
   --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-sm: 8px;
   --es-blur-lg: 16px;
   --es-blur-3xl: 64px;
@@ -748,24 +747,16 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   top: calc(var(--es-spacing) * 4);
 }
 
-:is(body, #wpwrap #editor) .es\:right-0 {
-  right: calc(var(--es-spacing) * 0);
-}
-
 :is(body, #wpwrap #editor) .es\:right-1 {
   right: calc(var(--es-spacing) * 1);
 }
 
-:is(body, #wpwrap #editor) .es\:right-4 {
-  right: calc(var(--es-spacing) * 4);
+:is(body, #wpwrap #editor) .es\:right-2 {
+  right: calc(var(--es-spacing) * 2);
 }
 
-:is(body, #wpwrap #editor) .es\:right-6 {
-  right: calc(var(--es-spacing) * 6);
-}
-
-:is(body, #wpwrap #editor) .es\:right-16 {
-  right: calc(var(--es-spacing) * 16);
+:is(body, #wpwrap #editor) .es\:right-4 {
+  right: calc(var(--es-spacing) * 4);
 }
 
 :is(body, #wpwrap #editor) .es\:-bottom-0\.5 {
@@ -780,10 +771,6 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   left: calc(var(--es-spacing) * 0);
 }
 
-:is(body, #wpwrap #editor) .es\:left-2 {
-  left: calc(var(--es-spacing) * 2);
-}
-
 :is(body, #wpwrap #editor) .es\:left-3\.5 {
   left: calc(var(--es-spacing) * 3.5);
 }
@@ -864,6 +851,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   margin: calc(var(--es-spacing) * .5);
 }
 
+:is(body, #wpwrap #editor) .es\:m-2 {
+  margin: calc(var(--es-spacing) * 2);
+}
+
 :is(body, #wpwrap #editor) .es\:m-5 {
   margin: calc(var(--es-spacing) * 5);
 }
@@ -896,10 +887,6 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   margin-block: calc(var(--es-spacing) * 1);
 }
 
-:is(body, #wpwrap #editor) .es\:my-4 {
-  margin-block: calc(var(--es-spacing) * 4);
-}
-
 :is(body, #wpwrap #editor) .es\:my-10 {
   margin-block: calc(var(--es-spacing) * 10);
 }
@@ -940,10 +927,6 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   margin-right: calc(var(--es-spacing) * 6);
 }
 
-:is(body, #wpwrap #editor) .es\:mr-7 {
-  margin-right: calc(var(--es-spacing) * 7);
-}
-
 :is(body, #wpwrap #editor) .es\:mb-1 {
   margin-bottom: calc(var(--es-spacing) * 1);
 }
@@ -980,6 +963,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   margin-left: calc(var(--es-spacing) * 1.5);
 }
 
+:is(body, #wpwrap #editor) .es\:ml-1\.25 {
+  margin-left: calc(var(--es-spacing) * 1.25);
+}
+
 :is(body, #wpwrap #editor) .es\:ml-3 {
   margin-left: calc(var(--es-spacing) * 3);
 }
@@ -988,6 +975,13 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   margin-left: auto;
 }
 
+:is(body, #wpwrap #editor) .es\:line-clamp-1 {
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  overflow: hidden;
+}
+
 :is(body, #wpwrap #editor) .es\:block {
   display: block;
 }
@@ -1213,6 +1207,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   max-height: calc(var(--es-spacing) * 40);
 }
 
+:is(body, #wpwrap #editor) .es\:max-h-72 {
+  max-height: calc(var(--es-spacing) * 72);
+}
+
 :is(body, #wpwrap #editor) .es\:min-h-5 {
   min-height: calc(var(--es-spacing) * 5);
 }
@@ -1249,6 +1247,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   min-height: calc(var(--es-spacing) * 14);
 }
 
+:is(body, #wpwrap #editor) .es\:min-h-16 {
+  min-height: calc(var(--es-spacing) * 16);
+}
+
 :is(body, #wpwrap #editor) .es\:min-h-24 {
   min-height: calc(var(--es-spacing) * 24);
 }
@@ -1341,8 +1343,8 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   width: calc(var(--es-spacing) * 52);
 }
 
-:is(body, #wpwrap #editor) .es\:w-80 {
-  width: calc(var(--es-spacing) * 80);
+:is(body, #wpwrap #editor) .es\:w-76 {
+  width: calc(var(--es-spacing) * 76);
 }
 
 :is(body, #wpwrap #editor) .es\:w-96 {
@@ -1389,8 +1391,8 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   max-width: calc(var(--es-spacing) * 72);
 }
 
-:is(body, #wpwrap #editor) .es\:max-w-80 {
-  max-width: calc(var(--es-spacing) * 80);
+:is(body, #wpwrap #editor) .es\:max-w-76 {
+  max-width: calc(var(--es-spacing) * 76);
 }
 
 :is(body, #wpwrap #editor) .es\:max-w-96 {
@@ -1556,6 +1558,22 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   rotate: 45deg;
 }
 
+:is(body, #wpwrap #editor) .es\:motion-preset-slide-down {
+  --motion-origin-translate-y: -25%;
+  --motion-origin-opacity: 0;
+  --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);
+}
+
+:is(body, #wpwrap #editor) .es\:motion-preset-slide-up {
+  --motion-origin-translate-y: 25%;
+  --motion-origin-opacity: 0;
+  --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);
+}
+
 :is(body, #wpwrap #editor) .es\:motion-preset-spin {
   --motion-loop-rotate: 360deg;
   --motion-timing: linear;
@@ -1589,6 +1607,12 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   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);
 }
 
+:is(body, #wpwrap #editor) .es\:motion-opacity-in-0 {
+  --motion-origin-opacity: .001;
+  --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);
+}
+
 :is(body, #wpwrap #editor) .es\:motion-opacity-out {
   --motion-end-opacity: 0;
   --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;
@@ -1613,10 +1637,6 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   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);
 }
 
-:is(body, #wpwrap #editor) .es\:animate-spin {
-  animation: var(--es-animate-spin);
-}
-
 :is(body, #wpwrap #editor) .es\:cursor-default {
   cursor: default;
 }
@@ -1633,6 +1653,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   cursor: pointer;
 }
 
+:is(body, #wpwrap #editor) .es\:scroll-m-1 {
+  scroll-margin: calc(var(--es-spacing) * 1);
+}
+
 :is(body, #wpwrap #editor) .es\:list-none {
   list-style-type: none;
 }
@@ -1955,6 +1979,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   overflow-x: auto;
 }
 
+:is(body, #wpwrap #editor) .es\:overflow-x-clip {
+  overflow-x: clip;
+}
+
 :is(body, #wpwrap #editor) .es\:overflow-x-hidden {
   overflow-x: hidden;
 }
@@ -2932,6 +2960,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   padding-inline: calc(var(--es-spacing) * 5);
 }
 
+:is(body, #wpwrap #editor) .es\:py-0 {
+  padding-block: calc(var(--es-spacing) * 0);
+}
+
 :is(body, #wpwrap #editor) .es\:py-0\.5 {
   padding-block: calc(var(--es-spacing) * .5);
 }
@@ -3191,10 +3223,6 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   color: var(--es-color-accent-950);
 }
 
-:is(body, #wpwrap #editor) .es\:text-amber-950 {
-  color: var(--es-color-amber-950);
-}
-
 :is(body, #wpwrap #editor) .es\:text-black {
   color: var(--es-color-black);
 }
@@ -3361,10 +3389,6 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   color: var(--es-color-slate-500);
 }
 
-:is(body, #wpwrap #editor) .es\:text-transparent {
-  color: #0000;
-}
-
 :is(body, #wpwrap #editor) .es\:text-white {
   color: var(--es-color-white);
 }
@@ -3480,6 +3504,11 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   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\:inset-ring-0 {
+  --tw-inset-ring-shadow: inset 0 0 0 0px var(--tw-inset-ring-color, currentcolor);
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+
 :is(body, #wpwrap #editor) .es\:shadow-accent-500\/25 {
   --tw-shadow-color: var(--es-color-accent-500);
 }
@@ -3694,16 +3723,6 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   }
 }
 
-:is(body, #wpwrap #editor) .es\:inset-ring-secondary-200\/30 {
-  --tw-inset-ring-color: var(--es-color-secondary-200);
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  :is(body, #wpwrap #editor) .es\:inset-ring-secondary-200\/30 {
-    --tw-inset-ring-color: color-mix(in oklab, var(--es-color-secondary-200) 30%, transparent);
-  }
-}
-
 :is(body, #wpwrap #editor) .es\:outline-hidden {
   --tw-outline-style: none;
   outline-style: none;
@@ -3846,9 +3865,9 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   transition-duration: .3s;
 }
 
-:is(body, #wpwrap #editor) .es\:ease-\[var\(--motion-spring-snappy\)\] {
-  --tw-ease: var(--motion-spring-snappy);
-  transition-timing-function: var(--motion-spring-snappy);
+:is(body, #wpwrap #editor) .es\:ease-\[var\(--motion-spring-bouncy\)\] {
+  --tw-ease: var(--motion-spring-bouncy);
+  transition-timing-function: var(--motion-spring-bouncy);
 }
 
 :is(body, #wpwrap #editor) .es\:will-change-\[transform\,opacity\] {
@@ -3859,6 +3878,19 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   will-change: transform;
 }
 
+:is(body, #wpwrap #editor) .es\:motion-ease-spring-bouncy {
+  --motion-timing: var(--motion-spring-bouncy);
+  --motion-perceptual-duration-multiplier: 1.66;
+  --motion-filter-timing: var(--motion-spring-smooth);
+  --motion-opacity-timing: var(--motion-spring-smooth);
+  --motion-background-color-timing: var(--motion-spring-smooth);
+  --motion-text-color-timing: var(--motion-spring-smooth);
+  --motion-filter-perceptual-duration-multiplier: 1.66;
+  --motion-opacity-perceptual-duration-multiplier: 1.66;
+  --motion-background-color-perceptual-duration-multiplier: 1.66;
+  --motion-text-color-perceptual-duration-multiplier: 1.66;
+}
+
 :is(body, #wpwrap #editor) .es\:motion-ease-linear\/opacity {
   --motion-opacity-timing: linear;
   --motion-opacity-perceptual-duration-multiplier: 1;
@@ -3874,11 +3906,6 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   --motion-scale-perceptual-duration-multiplier: 1.66;
 }
 
-:is(body, #wpwrap #editor) .es\:motion-ease-spring-snappy {
-  --motion-timing: var(--motion-spring-snappy);
-  --motion-perceptual-duration-multiplier: 1.66;
-}
-
 :is(body, #wpwrap #editor) .es\:motion-ease-spring-snappy\/scale {
   --motion-scale-timing: var(--motion-spring-snappy);
   --motion-scale-perceptual-duration-multiplier: 1.66;
@@ -3969,27 +3996,7 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   padding-bottom: calc(var(--es-spacing) * 4);
 }
 
-:is(body, #wpwrap #editor) .es\:not-disabled\:cursor-pointer:not(:is(:disabled, [data-rac][data-disabled])) {
-  cursor: pointer;
-}
-
-@media not all and (prefers-reduced-motion: reduce) {
-  :is(body, #wpwrap #editor) .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-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);
-  }
-
-  :is(body, #wpwrap #editor) .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-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);
-  }
-}
-
-:is(body, #wpwrap #editor) .es\:group-not-disabled\:cursor-pointer:is(:where(.es\:group):not(:is(:disabled, [data-rac][data-disabled])) *) {
+:is(body, #wpwrap #editor) .es\:not-disabled\:cursor-pointer:not(:is(:disabled, [data-rac][data-disabled])), :is(body, #wpwrap #editor) .es\:group-not-disabled\:cursor-pointer:is(:where(.es\:group):not(:is(:disabled, [data-rac][data-disabled])) *) {
   cursor: pointer;
 }
 
@@ -4112,6 +4119,32 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   --tw-inset-ring-color: var(--es-color-accent-600);
 }
 
+:is(body, #wpwrap #editor) .es\:group-not-selected\:group-focus-visible\:bg-secondary-100:is(:where(.es\:group):not([data-selected]) *):is(:where(.es\:group):is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) *) {
+  background-color: var(--es-color-secondary-100);
+}
+
+:is(body, #wpwrap #editor) .es\:group-not-selected\:group-focus-visible\:outline-hidden:is(:where(.es\:group):not([data-selected]) *):is(:where(.es\:group):is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) *) {
+  --tw-outline-style: none;
+  outline-style: none;
+}
+
+@media (forced-colors: active) {
+  :is(body, #wpwrap #editor) .es\:group-not-selected\:group-focus-visible\:outline-hidden:is(:where(.es\:group):not([data-selected]) *):is(:where(.es\:group):is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) *) {
+    outline-offset: 2px;
+    outline: 2px solid #0000;
+  }
+}
+
+:is(body, #wpwrap #editor) .es\:group-active\:bg-accent-700\/15:is(:where(.es\:group):active *) {
+  background-color: var(--es-color-accent-700);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :is(body, #wpwrap #editor) .es\:group-active\:bg-accent-700\/15:is(:where(.es\:group):active *) {
+    background-color: color-mix(in oklab, var(--es-color-accent-700) 15%, transparent);
+  }
+}
+
 :is(body, #wpwrap #editor) .es\:group-aria-expanded\:-scale-y-100:is(:where(.es\:group)[aria-expanded="true"] *) {
   --tw-scale-y: calc(100% * -1);
   scale: var(--tw-scale-x) var(--tw-scale-y);
@@ -4143,14 +4176,24 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   }
 }
 
-:is(body, #wpwrap #editor) .es\:group-selected\:bg-accent-600:is(:where(.es\:group)[data-selected] *) {
+:is(body, #wpwrap #editor) .es\:group-selected\:bg-accent-600:is(:where(.es\:group)[data-selected] *), :is(body, #wpwrap #editor) .es\:group-selected\:bg-accent-600\/15:is(:where(.es\:group)[data-selected] *) {
   background-color: var(--es-color-accent-600);
 }
 
+@supports (color: color-mix(in lab, red, red)) {
+  :is(body, #wpwrap #editor) .es\:group-selected\:bg-accent-600\/15:is(:where(.es\:group)[data-selected] *) {
+    background-color: color-mix(in oklab, var(--es-color-accent-600) 15%, transparent);
+  }
+}
+
 :is(body, #wpwrap #editor) .es\:group-selected\:text-accent-900:is(:where(.es\:group)[data-selected] *) {
   color: var(--es-color-accent-900);
 }
 
+:is(body, #wpwrap #editor) .es\:group-selected\:text-accent-950:is(:where(.es\:group)[data-selected] *) {
+  color: var(--es-color-accent-950);
+}
+
 :is(body, #wpwrap #editor) .es\:group-selected\:text-white:is(:where(.es\:group)[data-selected] *) {
   color: var(--es-color-white);
 }
@@ -4165,12 +4208,35 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   }
 }
 
-:is(body, #wpwrap #editor) .es\:peer-disabled\:opacity-40:is(:where(.es\:peer):is(:disabled, [data-rac][data-disabled]) ~ *) {
-  opacity: .4;
+:is(body, #wpwrap #editor) .es\:group-selected\:group-focus-visible\:inset-ring:is(:where(.es\:group)[data-selected] *):is(:where(.es\:group):is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) *) {
+  --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentcolor);
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
 
-:is(body, #wpwrap #editor) .es\:peer-data-\[focused\=true\]\:invisible:is(:where(.es\:peer)[data-focused="true"] ~ *) {
-  visibility: hidden;
+:is(body, #wpwrap #editor) .es\:group-selected\:group-focus-visible\:inset-ring-accent-600\/30:is(:where(.es\:group)[data-selected] *):is(:where(.es\:group):is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) *) {
+  --tw-inset-ring-color: var(--es-color-accent-600);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :is(body, #wpwrap #editor) .es\:group-selected\:group-focus-visible\:inset-ring-accent-600\/30:is(:where(.es\:group)[data-selected] *):is(:where(.es\:group):is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) *) {
+    --tw-inset-ring-color: color-mix(in oklab, var(--es-color-accent-600) 30%, transparent);
+  }
+}
+
+:is(body, #wpwrap #editor) .es\:group-any-focus\:outline-hidden:is(:where(.es\:group):is(:focus-visible, [data-rac][data-focus-visible], :focus, [data-rac][data-focused]) *) {
+  --tw-outline-style: none;
+  outline-style: none;
+}
+
+@media (forced-colors: active) {
+  :is(body, #wpwrap #editor) .es\:group-any-focus\:outline-hidden:is(:where(.es\:group):is(:focus-visible, [data-rac][data-focus-visible], :focus, [data-rac][data-focused]) *) {
+    outline-offset: 2px;
+    outline: 2px solid #0000;
+  }
+}
+
+:is(body, #wpwrap #editor) .es\:peer-placeholder-shown\:opacity-0:is(:where(.es\:peer)[data-placeholder] ~ *), :is(body, #wpwrap #editor) .es\:peer-placeholder-shown\:opacity-0:is(:where(.es\:peer):placeholder-shown ~ *) {
+  opacity: 0;
 }
 
 :is(body, #wpwrap #editor) .es\:selection\:bg-accent-500\/20 ::selection {
@@ -4193,14 +4259,6 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   }
 }
 
-:is(body, #wpwrap #editor) .es\:selection\:bg-transparent ::selection {
-  background-color: #0000;
-}
-
-:is(body, #wpwrap #editor) .es\:selection\:bg-transparent::selection {
-  background-color: #0000;
-}
-
 :is(body, #wpwrap #editor) .es\:selection\:text-accent-950 ::selection {
   color: var(--es-color-accent-950);
 }
@@ -4209,12 +4267,8 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   color: var(--es-color-accent-950);
 }
 
-:is(body, #wpwrap #editor) .es\:selection\:text-transparent ::selection {
-  color: #0000;
-}
-
-:is(body, #wpwrap #editor) .es\:selection\:text-transparent::selection {
-  color: #0000;
+:is(body, #wpwrap #editor) .es\:placeholder\:text-secondary-500::placeholder {
+  color: var(--es-color-secondary-500);
 }
 
 :is(body, #wpwrap #editor) .es\:after\:absolute:after {
@@ -4720,49 +4774,59 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   }
 }
 
-:is(body, #wpwrap #editor) .es\:hover\:outline-hidden:where([data-rac])[data-hovered] {
-  --tw-outline-style: none;
-  outline-style: none;
+:is(body, #wpwrap #editor) .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);
 }
 
-@media (forced-colors: active) {
-  :is(body, #wpwrap #editor) .es\:hover\:outline-hidden:where([data-rac])[data-hovered] {
-    outline-offset: 2px;
-    outline: 2px solid #0000;
+@media (hover: hover) {
+  :is(body, #wpwrap #editor) .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);
   }
 }
 
-@media (hover: hover) {
-  :is(body, #wpwrap #editor) .es\:hover\:outline-hidden:where(:not([data-rac])):hover {
-    --tw-outline-style: none;
-    outline-style: none;
-  }
+:is(body, #wpwrap #editor) .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);
+}
 
-  @media (forced-colors: active) {
-    :is(body, #wpwrap #editor) .es\:hover\:outline-hidden:where(:not([data-rac])):hover {
-      outline-offset: 2px;
-      outline: 2px solid #0000;
-    }
+@media (hover: hover) {
+  :is(body, #wpwrap #editor) .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);
   }
 }
 
-:is(body, #wpwrap #editor) .es\:not-disabled\:not-selected\:hover\:bg-secondary-100:not(:is(:disabled, [data-rac][data-disabled])):not([data-selected]):where([data-rac])[data-hovered] {
+:is(body, #wpwrap #editor) .es\:group-not-selected\:hover\:bg-secondary-100:is(:where(.es\:group):not([data-selected]) *):where([data-rac])[data-hovered] {
   background-color: var(--es-color-secondary-100);
 }
 
 @media (hover: hover) {
-  :is(body, #wpwrap #editor) .es\:not-disabled\:not-selected\:hover\:bg-secondary-100:not(:is(:disabled, [data-rac][data-disabled])):not([data-selected]):where(:not([data-rac])):hover {
+  :is(body, #wpwrap #editor) .es\:group-not-selected\:hover\:bg-secondary-100:is(:where(.es\:group):not([data-selected]) *):where(:not([data-rac])):hover {
     background-color: var(--es-color-secondary-100);
   }
 }
 
-:is(body, #wpwrap #editor) .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);
+:is(body, #wpwrap #editor) .es\:group-not-selected\:hover\:outline-hidden:is(:where(.es\:group):not([data-selected]) *):where([data-rac])[data-hovered] {
+  --tw-outline-style: none;
+  outline-style: none;
+}
+
+@media (forced-colors: active) {
+  :is(body, #wpwrap #editor) .es\:group-not-selected\:hover\:outline-hidden:is(:where(.es\:group):not([data-selected]) *):where([data-rac])[data-hovered] {
+    outline-offset: 2px;
+    outline: 2px solid #0000;
+  }
 }
 
 @media (hover: hover) {
-  :is(body, #wpwrap #editor) .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);
+  :is(body, #wpwrap #editor) .es\:group-not-selected\:hover\:outline-hidden:is(:where(.es\:group):not([data-selected]) *):where(:not([data-rac])):hover {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+
+  @media (forced-colors: active) {
+    :is(body, #wpwrap #editor) .es\:group-not-selected\:hover\:outline-hidden:is(:where(.es\:group):not([data-selected]) *):where(:not([data-rac])):hover {
+      outline-offset: 2px;
+      outline: 2px solid #0000;
+    }
   }
 }
 
@@ -4810,10 +4874,6 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   border-color: var(--es-color-accent-500);
 }
 
-:is(body, #wpwrap #editor) .es\:focus\:text-current:where([data-rac])[data-focused], :is(body, #wpwrap #editor) .es\:focus\:text-current:where(:not([data-rac])):focus {
-  color: currentColor;
-}
-
 :is(body, #wpwrap #editor) .es\:focus\:shadow-none\!:where([data-rac])[data-focused], :is(body, #wpwrap #editor) .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;
@@ -5274,10 +5334,6 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   }
 }
 
-:is(body, #wpwrap #editor) .es\:has-\[svg\]\:left-1:has(:is(svg)) {
-  left: calc(var(--es-spacing) * 1);
-}
-
 :is(body, #wpwrap #editor) .es\:has-\[\>_\:only-child\]\:pb-0:has( > :only-child) {
   padding-bottom: calc(var(--es-spacing) * 0);
 }
@@ -5371,6 +5427,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
     --motion-perceptual-duration-multiplier: 1.66;
   }
 
+  :is(body, #wpwrap #editor) .es\:motion-safe\:motion-duration-200 {
+    --motion-duration: .2s;
+  }
+
   :is(body, #wpwrap #editor) .es\:motion-safe\:motion-duration-300 {
     --motion-duration: .3s;
   }
@@ -5425,7 +5485,7 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
 }
 
 @media (prefers-reduced-motion: reduce) {
-  :is(body, #wpwrap #editor) .es\:motion-reduce\:motion-preset-fade, :is(body, #wpwrap #editor) .es\:motion-reduce\:motion-preset-fade-md {
+  :is(body, #wpwrap #editor) .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-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;
@@ -5455,6 +5515,78 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   }
 }
 
+:is(body, #wpwrap #editor) .es\:placement-left\:origin-right[data-placement="left"] {
+  transform-origin: 100%;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  :is(body, #wpwrap #editor) .es\:motion-safe\: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-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);
+  }
+
+  :is(body, #wpwrap #editor) .es\:motion-safe\:placement-left\:motion-translate-x-out-\[5\%\][data-placement="left"] {
+    --motion-end-translate-x: 5%;
+    --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);
+  }
+}
+
+:is(body, #wpwrap #editor) .es\:placement-right\:origin-left[data-placement="right"] {
+  transform-origin: 0;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  :is(body, #wpwrap #editor) .es\:motion-safe\:placement-right\:motion-translate-x-in-\[-5\%\][data-placement="right"] {
+    --motion-origin-translate-x: -5%;
+    --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);
+  }
+
+  :is(body, #wpwrap #editor) .es\:motion-safe\:placement-right\:motion-translate-x-out-\[-5\%\][data-placement="right"] {
+    --motion-end-translate-x: -5%;
+    --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);
+  }
+}
+
+:is(body, #wpwrap #editor) .es\:placement-top\:origin-bottom-left[data-placement="top"] {
+  transform-origin: 0 100%;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  :is(body, #wpwrap #editor) .es\:motion-safe\: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-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);
+  }
+
+  :is(body, #wpwrap #editor) .es\:motion-safe\:placement-top\:motion-translate-y-out-\[5\%\][data-placement="top"] {
+    --motion-end-translate-y: 5%;
+    --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);
+  }
+}
+
+:is(body, #wpwrap #editor) .es\:placement-bottom\:origin-top-left[data-placement="bottom"] {
+  transform-origin: 0 0;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  :is(body, #wpwrap #editor) .es\:motion-safe\:placement-bottom\:motion-translate-y-in-\[-5\%\][data-placement="bottom"] {
+    --motion-origin-translate-y: -5%;
+    --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);
+  }
+
+  :is(body, #wpwrap #editor) .es\:motion-safe\:placement-bottom\:motion-translate-y-out-\[-5\%\][data-placement="bottom"] {
+    --motion-end-translate-y: -5%;
+    --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);
+  }
+}
+
 :is(body, #wpwrap #editor) .es\:pending\:cursor-wait[data-pending] {
   cursor: wait;
 }
@@ -5830,18 +5962,6 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   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\:\[\&_span\]\:overflow-hidden span {
-  overflow: hidden;
-}
-
-:is(body, #wpwrap #editor) .es\:\[\&_span\]\:text-nowrap span {
-  text-wrap: nowrap;
-}
-
-:is(body, #wpwrap #editor) .es\:\[\&_span\]\:text-ellipsis span {
-  text-overflow: ellipsis;
-}
-
 :is(body, #wpwrap #editor) .es\:\[\&_svg\]\:size-4\! svg {
   width: calc(var(--es-spacing) * 4) !important;
   height: calc(var(--es-spacing) * 4) !important;
@@ -5851,6 +5971,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   stroke: var(--es-color-red-500);
 }
 
+:is(body, #wpwrap #editor) .es\:\[\&\:\:-webkit-search-cancel-button\]\:hidden::-webkit-search-cancel-button {
+  display: none;
+}
+
 :is(body, #wpwrap #editor) .es\:\[\&\:has\(\>_\[data-focus-visible\=\"true\"\]\)\]\:ring-2:has( > [data-focus-visible="true"]) {
   --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);
@@ -6710,9 +6834,3 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   inherits: false;
   initial-value: "";
 }
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}