@eightshift/ui-components 5.3.2 → 5.3.3

package/dist/assets/style-admin.css

@@ -2182,6 +2182,16 @@
   border-color: var(--es-color-accent-500) !important;
 }
 
+:is(body, body #wpwrap) .es\:border-accent-500\/0 {
+  border-color: var(--es-color-accent-500);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :is(body, body #wpwrap) .es\:border-accent-500\/0 {
+    border-color: color-mix(in oklab, var(--es-color-accent-500) 0%, transparent);
+  }
+}
+
 :is(body, body #wpwrap) .es\:border-accent-500\/10 {
   border-color: var(--es-color-accent-500);
 }
@@ -2394,7 +2404,7 @@
   }
 }
 
-:is(body, body #wpwrap) .es\:bg-accent-600, :is(body, body #wpwrap) .es\:bg-accent-600\/15 {
+:is(body, body #wpwrap) .es\:bg-accent-600\/15 {
   background-color: var(--es-color-accent-600);
 }
 
@@ -3616,16 +3626,6 @@
   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, body #wpwrap) .es\:shadow-accent-500\/25 {
-  --tw-shadow-color: var(--es-color-accent-500);
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  :is(body, body #wpwrap) .es\:shadow-accent-500\/25 {
-    --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--es-color-accent-500) 25%, transparent) var(--tw-shadow-alpha), transparent);
-  }
-}
-
 :is(body, body #wpwrap) .es\:shadow-accent-500\/30 {
   --tw-shadow-color: var(--es-color-accent-500);
 }
@@ -3770,6 +3770,16 @@
   --tw-ring-color: var(--es-color-black);
 }
 
+:is(body, body #wpwrap) .es\:inset-shadow-accent-400\/0 {
+  --tw-inset-shadow-color: var(--es-color-accent-400);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :is(body, body #wpwrap) .es\:inset-shadow-accent-400\/0 {
+    --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--es-color-accent-400) 0%, transparent) var(--tw-inset-shadow-alpha), transparent);
+  }
+}
+
 :is(body, body #wpwrap) .es\:inset-shadow-accent-400\/75 {
   --tw-inset-shadow-color: var(--es-color-accent-400);
 }
@@ -3814,10 +3824,16 @@
   --tw-inset-ring-color: var(--es-color-accent-500);
 }
 
-:is(body, body #wpwrap) .es\:inset-ring-accent-600 {
+:is(body, body #wpwrap) .es\:inset-ring-accent-600, :is(body, body #wpwrap) .es\:inset-ring-accent-600\/0 {
   --tw-inset-ring-color: var(--es-color-accent-600);
 }
 
+@supports (color: color-mix(in lab, red, red)) {
+  :is(body, body #wpwrap) .es\:inset-ring-accent-600\/0 {
+    --tw-inset-ring-color: color-mix(in oklab, var(--es-color-accent-600) 0%, transparent);
+  }
+}
+
 :is(body, body #wpwrap) .es\:inset-ring-blue-100 {
   --tw-inset-ring-color: var(--es-color-blue-100);
 }
@@ -4092,16 +4108,6 @@
   user-select: none;
 }
 
-:is(body, body #wpwrap) .es\:accent-text-shadow {
-  text-shadow: 0 1px 0 var(--es-color-accent-900);
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  :is(body, body #wpwrap) .es\:accent-text-shadow {
-    text-shadow: 0 1px 0 color-mix(in oklab, var(--es-color-accent-900) 25%, transparent);
-  }
-}
-
 :is(body, body #wpwrap) .es\:motion-delay-300\/blur {
   --motion-filter-delay: .3s;
 }
@@ -4130,8 +4136,8 @@
   --motion-duration: 1.5s;
 }
 
-:is(body, body #wpwrap) .es\:motion-duration-1750 {
-  --motion-duration: 1.75s;
+:is(body, body #wpwrap) .es\:motion-duration-2000 {
+  --motion-duration: 2s;
 }
 
 :is(body, body #wpwrap) .es\:no-webkit-highlight {
@@ -4769,6 +4775,28 @@
   }
 }
 
+:is(body, body #wpwrap) .es\:hover\:bg-accent-500\/10:where([data-rac])[data-hovered] {
+  background-color: var(--es-color-accent-500);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :is(body, body #wpwrap) .es\:hover\:bg-accent-500\/10:where([data-rac])[data-hovered] {
+    background-color: color-mix(in oklab, var(--es-color-accent-500) 10%, transparent);
+  }
+}
+
+@media (hover: hover) {
+  :is(body, body #wpwrap) .es\:hover\:bg-accent-500\/10:where(:not([data-rac])):hover {
+    background-color: var(--es-color-accent-500);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :is(body, body #wpwrap) .es\:hover\:bg-accent-500\/10:where(:not([data-rac])):hover {
+      background-color: color-mix(in oklab, var(--es-color-accent-500) 10%, transparent);
+    }
+  }
+}
+
 :is(body, body #wpwrap) .es\:hover\:bg-red-50:where([data-rac])[data-hovered] {
   background-color: var(--es-color-red-50);
 }
@@ -4921,6 +4949,16 @@
   }
 }
 
+:is(body, body #wpwrap) .es\:hover\:text-accent-700:where([data-rac])[data-hovered] {
+  color: var(--es-color-accent-700);
+}
+
+@media (hover: hover) {
+  :is(body, body #wpwrap) .es\:hover\:text-accent-700:where(:not([data-rac])):hover {
+    color: var(--es-color-accent-700);
+  }
+}
+
 :is(body, body #wpwrap) .es\:hover\:text-accent-900:where([data-rac])[data-hovered] {
   color: var(--es-color-accent-900);
 }
@@ -4971,28 +5009,6 @@
   }
 }
 
-:is(body, body #wpwrap) .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)) {
-  :is(body, body #wpwrap) .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) {
-  :is(body, body #wpwrap) .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)) {
-    :is(body, body #wpwrap) .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);
-    }
-  }
-}
-
 :is(body, body #wpwrap) .es\:hover\:inset-shadow-red-100:where([data-rac])[data-hovered] {
   --tw-inset-shadow-color: var(--es-color-red-100);
 }
@@ -5499,6 +5515,10 @@
   color: var(--es-color-accent-500);
 }
 
+:is(body, body #wpwrap) .es\:active\:text-accent-950:where([data-rac])[data-active], :is(body, body #wpwrap) .es\:active\:text-accent-950:where(:not([data-rac])):active {
+  color: var(--es-color-accent-950);
+}
+
 :is(body, body #wpwrap) .es\:enabled\:not-pending\:cursor-pointer:enabled:not([data-pending]) {
   cursor: pointer;
 }
@@ -5634,10 +5654,6 @@
   border-color: var(--es-color-secondary-200);
 }
 
-:is(body, body #wpwrap) .es\:disabled\:border-secondary-300:is(:disabled, [data-rac][data-disabled]) {
-  border-color: var(--es-color-secondary-300);
-}
-
 :is(body, body #wpwrap) .es\:disabled\:border-transparent\!:is(:disabled, [data-rac][data-disabled]) {
   border-color: #0000 !important;
 }
@@ -6074,6 +6090,14 @@
   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, body #wpwrap) .es\:pressed\:bg-accent-50[data-pressed] {
+  background-color: var(--es-color-accent-50);
+}
+
+:is(body, body #wpwrap) .es\:pressed\:text-accent-950[data-pressed] {
+  color: var(--es-color-accent-950);
+}
+
 :is(body, body #wpwrap) .es\:enabled\:pressed\:bg-accent-50:enabled[data-pressed] {
   background-color: var(--es-color-accent-50);
 }
@@ -6340,6 +6364,11 @@
   height: calc(var(--es-spacing) * 3);
 }
 
+:is(body, body #wpwrap) .es\:icon\:size-3\! > svg {
+  width: calc(var(--es-spacing) * 3) !important;
+  height: calc(var(--es-spacing) * 3) !important;
+}
+
 :is(body, body #wpwrap) .es\:icon\:size-3\.5 > svg {
   width: calc(var(--es-spacing) * 3.5);
   height: calc(var(--es-spacing) * 3.5);
@@ -6408,6 +6437,10 @@
   stroke-width: 2px;
 }
 
+:is(body, body #wpwrap) .es\:icon\:stroke-2\! > svg {
+  stroke-width: 2px !important;
+}
+
 :is(body, body #wpwrap) .es\:icon\:stroke-3 > svg {
   stroke-width: 3px;
 }

package/dist/assets/style-editor.css

@@ -2182,6 +2182,16 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   border-color: var(--es-color-accent-500) !important;
 }
 
+:is(body, #wpwrap #editor) .es\:border-accent-500\/0 {
+  border-color: var(--es-color-accent-500);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :is(body, #wpwrap #editor) .es\:border-accent-500\/0 {
+    border-color: color-mix(in oklab, var(--es-color-accent-500) 0%, transparent);
+  }
+}
+
 :is(body, #wpwrap #editor) .es\:border-accent-500\/10 {
   border-color: var(--es-color-accent-500);
 }
@@ -2394,7 +2404,7 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   }
 }
 
-:is(body, #wpwrap #editor) .es\:bg-accent-600, :is(body, #wpwrap #editor) .es\:bg-accent-600\/15 {
+:is(body, #wpwrap #editor) .es\:bg-accent-600\/15 {
   background-color: var(--es-color-accent-600);
 }
 
@@ -3616,16 +3626,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);
 }
 
-:is(body, #wpwrap #editor) .es\:shadow-accent-500\/25 {
-  --tw-shadow-color: var(--es-color-accent-500);
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  :is(body, #wpwrap #editor) .es\:shadow-accent-500\/25 {
-    --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--es-color-accent-500) 25%, transparent) var(--tw-shadow-alpha), transparent);
-  }
-}
-
 :is(body, #wpwrap #editor) .es\:shadow-accent-500\/30 {
   --tw-shadow-color: var(--es-color-accent-500);
 }
@@ -3770,6 +3770,16 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   --tw-ring-color: var(--es-color-black);
 }
 
+:is(body, #wpwrap #editor) .es\:inset-shadow-accent-400\/0 {
+  --tw-inset-shadow-color: var(--es-color-accent-400);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :is(body, #wpwrap #editor) .es\:inset-shadow-accent-400\/0 {
+    --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--es-color-accent-400) 0%, transparent) var(--tw-inset-shadow-alpha), transparent);
+  }
+}
+
 :is(body, #wpwrap #editor) .es\:inset-shadow-accent-400\/75 {
   --tw-inset-shadow-color: var(--es-color-accent-400);
 }
@@ -3814,10 +3824,16 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   --tw-inset-ring-color: var(--es-color-accent-500);
 }
 
-:is(body, #wpwrap #editor) .es\:inset-ring-accent-600 {
+:is(body, #wpwrap #editor) .es\:inset-ring-accent-600, :is(body, #wpwrap #editor) .es\:inset-ring-accent-600\/0 {
   --tw-inset-ring-color: var(--es-color-accent-600);
 }
 
+@supports (color: color-mix(in lab, red, red)) {
+  :is(body, #wpwrap #editor) .es\:inset-ring-accent-600\/0 {
+    --tw-inset-ring-color: color-mix(in oklab, var(--es-color-accent-600) 0%, transparent);
+  }
+}
+
 :is(body, #wpwrap #editor) .es\:inset-ring-blue-100 {
   --tw-inset-ring-color: var(--es-color-blue-100);
 }
@@ -4092,16 +4108,6 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   user-select: none;
 }
 
-:is(body, #wpwrap #editor) .es\:accent-text-shadow {
-  text-shadow: 0 1px 0 var(--es-color-accent-900);
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  :is(body, #wpwrap #editor) .es\:accent-text-shadow {
-    text-shadow: 0 1px 0 color-mix(in oklab, var(--es-color-accent-900) 25%, transparent);
-  }
-}
-
 :is(body, #wpwrap #editor) .es\:motion-delay-300\/blur {
   --motion-filter-delay: .3s;
 }
@@ -4130,8 +4136,8 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   --motion-duration: 1.5s;
 }
 
-:is(body, #wpwrap #editor) .es\:motion-duration-1750 {
-  --motion-duration: 1.75s;
+:is(body, #wpwrap #editor) .es\:motion-duration-2000 {
+  --motion-duration: 2s;
 }
 
 :is(body, #wpwrap #editor) .es\:no-webkit-highlight {
@@ -4769,6 +4775,28 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   }
 }
 
+:is(body, #wpwrap #editor) .es\:hover\:bg-accent-500\/10:where([data-rac])[data-hovered] {
+  background-color: var(--es-color-accent-500);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :is(body, #wpwrap #editor) .es\:hover\:bg-accent-500\/10:where([data-rac])[data-hovered] {
+    background-color: color-mix(in oklab, var(--es-color-accent-500) 10%, transparent);
+  }
+}
+
+@media (hover: hover) {
+  :is(body, #wpwrap #editor) .es\:hover\:bg-accent-500\/10:where(:not([data-rac])):hover {
+    background-color: var(--es-color-accent-500);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :is(body, #wpwrap #editor) .es\:hover\:bg-accent-500\/10:where(:not([data-rac])):hover {
+      background-color: color-mix(in oklab, var(--es-color-accent-500) 10%, transparent);
+    }
+  }
+}
+
 :is(body, #wpwrap #editor) .es\:hover\:bg-red-50:where([data-rac])[data-hovered] {
   background-color: var(--es-color-red-50);
 }
@@ -4921,6 +4949,16 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   }
 }
 
+:is(body, #wpwrap #editor) .es\:hover\:text-accent-700:where([data-rac])[data-hovered] {
+  color: var(--es-color-accent-700);
+}
+
+@media (hover: hover) {
+  :is(body, #wpwrap #editor) .es\:hover\:text-accent-700:where(:not([data-rac])):hover {
+    color: var(--es-color-accent-700);
+  }
+}
+
 :is(body, #wpwrap #editor) .es\:hover\:text-accent-900:where([data-rac])[data-hovered] {
   color: var(--es-color-accent-900);
 }
@@ -4971,28 +5009,6 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   }
 }
 
-:is(body, #wpwrap #editor) .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)) {
-  :is(body, #wpwrap #editor) .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) {
-  :is(body, #wpwrap #editor) .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)) {
-    :is(body, #wpwrap #editor) .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);
-    }
-  }
-}
-
 :is(body, #wpwrap #editor) .es\:hover\:inset-shadow-red-100:where([data-rac])[data-hovered] {
   --tw-inset-shadow-color: var(--es-color-red-100);
 }
@@ -5499,6 +5515,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   color: var(--es-color-accent-500);
 }
 
+:is(body, #wpwrap #editor) .es\:active\:text-accent-950:where([data-rac])[data-active], :is(body, #wpwrap #editor) .es\:active\:text-accent-950:where(:not([data-rac])):active {
+  color: var(--es-color-accent-950);
+}
+
 :is(body, #wpwrap #editor) .es\:enabled\:not-pending\:cursor-pointer:enabled:not([data-pending]) {
   cursor: pointer;
 }
@@ -5634,10 +5654,6 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   border-color: var(--es-color-secondary-200);
 }
 
-:is(body, #wpwrap #editor) .es\:disabled\:border-secondary-300:is(:disabled, [data-rac][data-disabled]) {
-  border-color: var(--es-color-secondary-300);
-}
-
 :is(body, #wpwrap #editor) .es\:disabled\:border-transparent\!:is(:disabled, [data-rac][data-disabled]) {
   border-color: #0000 !important;
 }
@@ -6074,6 +6090,14 @@ 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\:pressed\:bg-accent-50[data-pressed] {
+  background-color: var(--es-color-accent-50);
+}
+
+:is(body, #wpwrap #editor) .es\:pressed\:text-accent-950[data-pressed] {
+  color: var(--es-color-accent-950);
+}
+
 :is(body, #wpwrap #editor) .es\:enabled\:pressed\:bg-accent-50:enabled[data-pressed] {
   background-color: var(--es-color-accent-50);
 }
@@ -6340,6 +6364,11 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   height: calc(var(--es-spacing) * 3);
 }
 
+:is(body, #wpwrap #editor) .es\:icon\:size-3\! > svg {
+  width: calc(var(--es-spacing) * 3) !important;
+  height: calc(var(--es-spacing) * 3) !important;
+}
+
 :is(body, #wpwrap #editor) .es\:icon\:size-3\.5 > svg {
   width: calc(var(--es-spacing) * 3.5);
   height: calc(var(--es-spacing) * 3.5);
@@ -6408,6 +6437,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   stroke-width: 2px;
 }
 
+:is(body, #wpwrap #editor) .es\:icon\:stroke-2\! > svg {
+  stroke-width: 2px !important;
+}
+
 :is(body, #wpwrap #editor) .es\:icon\:stroke-3 > svg {
   stroke-width: 3px;
 }

package/dist/assets/style.css

@@ -2667,6 +2667,16 @@
     border-color: var(--es-color-accent-500) !important;
   }
 
+  .es\:border-accent-500\/0 {
+    border-color: var(--es-color-accent-500);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:border-accent-500\/0 {
+      border-color: color-mix(in oklab, var(--es-color-accent-500) 0%, transparent);
+    }
+  }
+
   .es\:border-accent-500\/10 {
     border-color: var(--es-color-accent-500);
   }
@@ -2879,7 +2889,7 @@
     }
   }
 
-  .es\:bg-accent-600, .es\:bg-accent-600\/15 {
+  .es\:bg-accent-600\/15 {
     background-color: var(--es-color-accent-600);
   }
 
@@ -4101,16 +4111,6 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
-  .es\:shadow-accent-500\/25 {
-    --tw-shadow-color: var(--es-color-accent-500);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .es\:shadow-accent-500\/25 {
-      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--es-color-accent-500) 25%, transparent) var(--tw-shadow-alpha), transparent);
-    }
-  }
-
   .es\:shadow-accent-500\/30 {
     --tw-shadow-color: var(--es-color-accent-500);
   }
@@ -4255,6 +4255,16 @@
     --tw-ring-color: var(--es-color-black);
   }
 
+  .es\:inset-shadow-accent-400\/0 {
+    --tw-inset-shadow-color: var(--es-color-accent-400);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:inset-shadow-accent-400\/0 {
+      --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--es-color-accent-400) 0%, transparent) var(--tw-inset-shadow-alpha), transparent);
+    }
+  }
+
   .es\:inset-shadow-accent-400\/75 {
     --tw-inset-shadow-color: var(--es-color-accent-400);
   }
@@ -4299,10 +4309,16 @@
     --tw-inset-ring-color: var(--es-color-accent-500);
   }
 
-  .es\:inset-ring-accent-600 {
+  .es\:inset-ring-accent-600, .es\:inset-ring-accent-600\/0 {
     --tw-inset-ring-color: var(--es-color-accent-600);
   }
 
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:inset-ring-accent-600\/0 {
+      --tw-inset-ring-color: color-mix(in oklab, var(--es-color-accent-600) 0%, transparent);
+    }
+  }
+
   .es\:inset-ring-blue-100 {
     --tw-inset-ring-color: var(--es-color-blue-100);
   }
@@ -4577,16 +4593,6 @@
     user-select: none;
   }
 
-  .es\:accent-text-shadow {
-    text-shadow: 0 1px 0 var(--es-color-accent-900);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .es\:accent-text-shadow {
-      text-shadow: 0 1px 0 color-mix(in oklab, var(--es-color-accent-900) 25%, transparent);
-    }
-  }
-
   .es\:motion-delay-300\/blur {
     --motion-filter-delay: .3s;
   }
@@ -4615,8 +4621,8 @@
     --motion-duration: 1.5s;
   }
 
-  .es\:motion-duration-1750 {
-    --motion-duration: 1.75s;
+  .es\:motion-duration-2000 {
+    --motion-duration: 2s;
   }
 
   .es\:no-webkit-highlight {
@@ -5254,6 +5260,28 @@
     }
   }
 
+  .es\:hover\:bg-accent-500\/10:where([data-rac])[data-hovered] {
+    background-color: var(--es-color-accent-500);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:hover\:bg-accent-500\/10:where([data-rac])[data-hovered] {
+      background-color: color-mix(in oklab, var(--es-color-accent-500) 10%, transparent);
+    }
+  }
+
+  @media (hover: hover) {
+    .es\:hover\:bg-accent-500\/10:where(:not([data-rac])):hover {
+      background-color: var(--es-color-accent-500);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .es\:hover\:bg-accent-500\/10:where(:not([data-rac])):hover {
+        background-color: color-mix(in oklab, var(--es-color-accent-500) 10%, transparent);
+      }
+    }
+  }
+
   .es\:hover\:bg-red-50:where([data-rac])[data-hovered] {
     background-color: var(--es-color-red-50);
   }
@@ -5406,6 +5434,16 @@
     }
   }
 
+  .es\:hover\:text-accent-700:where([data-rac])[data-hovered] {
+    color: var(--es-color-accent-700);
+  }
+
+  @media (hover: hover) {
+    .es\:hover\:text-accent-700:where(:not([data-rac])):hover {
+      color: var(--es-color-accent-700);
+    }
+  }
+
   .es\:hover\:text-accent-900:where([data-rac])[data-hovered] {
     color: var(--es-color-accent-900);
   }
@@ -5456,28 +5494,6 @@
     }
   }
 
-  .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: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);
   }
@@ -5984,6 +6000,10 @@
     color: var(--es-color-accent-500);
   }
 
+  .es\:active\:text-accent-950:where([data-rac])[data-active], .es\:active\:text-accent-950:where(:not([data-rac])):active {
+    color: var(--es-color-accent-950);
+  }
+
   .es\:enabled\:not-pending\:cursor-pointer:enabled:not([data-pending]) {
     cursor: pointer;
   }
@@ -6119,10 +6139,6 @@
     border-color: var(--es-color-secondary-200);
   }
 
-  .es\:disabled\:border-secondary-300:is(:disabled, [data-rac][data-disabled]) {
-    border-color: var(--es-color-secondary-300);
-  }
-
   .es\:disabled\:border-transparent\!:is(:disabled, [data-rac][data-disabled]) {
     border-color: #0000 !important;
   }
@@ -6559,6 +6575,14 @@
     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\:pressed\:bg-accent-50[data-pressed] {
+    background-color: var(--es-color-accent-50);
+  }
+
+  .es\:pressed\:text-accent-950[data-pressed] {
+    color: var(--es-color-accent-950);
+  }
+
   .es\:enabled\:pressed\:bg-accent-50:enabled[data-pressed] {
     background-color: var(--es-color-accent-50);
   }
@@ -6825,6 +6849,11 @@
     height: calc(var(--es-spacing) * 3);
   }
 
+  .es\:icon\:size-3\! > svg {
+    width: calc(var(--es-spacing) * 3) !important;
+    height: calc(var(--es-spacing) * 3) !important;
+  }
+
   .es\:icon\:size-3\.5 > svg {
     width: calc(var(--es-spacing) * 3.5);
     height: calc(var(--es-spacing) * 3.5);
@@ -6893,6 +6922,10 @@
     stroke-width: 2px;
   }
 
+  .es\:icon\:stroke-2\! > svg {
+    stroke-width: 2px !important;
+  }
+
   .es\:icon\:stroke-3 > svg {
     stroke-width: 3px;
   }

package/dist/components/button/button.js

@@ -333,8 +333,8 @@ const Button = (props) => {
       isPending: pending,
       className: componentClasses({
         disabled: !pending && disabled,
-        hasIcon: pending || Boolean(icon),
-        iconOnly: pending || Boolean(icon && !children),
+        hasIcon: Boolean(icon),
+        iconOnly: Boolean(icon && !children),
         size,
         type
       }),
@@ -346,7 +346,11 @@ const Button = (props) => {
           icon,
           children
         ] }),
-        isPending && /* @__PURE__ */ jsxs(Fragment, { children: [
+        isPending && /* @__PURE__ */ jsxs("div", { className: "es:relative", children: [
+          /* @__PURE__ */ jsxs("div", { className: "es:invisible", children: [
+            icon,
+            children
+          ] }),
           /* @__PURE__ */ jsx(
             $0393f8ab869a0f1a$export$c17561cb55d4db30,
             {
@@ -355,7 +359,7 @@ const Button = (props) => {
               isIndeterminate: true
             }
           ),
-          cloneElement(icons.loader, { className: "es:motion-preset-spin es:motion-duration-1750" })
+          cloneElement(icons.loader, { className: "es:motion-preset-spin es:motion-duration-2000 es:absolute es:inset-0 es:m-auto" })
         ] })
       ] })
     }

package/dist/components/menu/menu.js

@@ -216,6 +216,7 @@ const MenuItem = (props) => {
     disabled,
     endIcon,
     onClick,
+    onClickNative = (event) => event?.stopPropagation(),
     shortcut,
     danger,
     primary,
@@ -252,6 +253,7 @@ const MenuItem = (props) => {
         className
       ),
       onAction: onClick,
+      onClick: onClickNative,
       children: [
         /* @__PURE__ */ jsx(
           RichLabel,
@@ -300,7 +302,7 @@ const SubMenuItem = (props) => {
   }
   return /* @__PURE__ */ jsxs($3674c52c6b3c5bce$export$ecabc99eeffab7ca, { children: [
     cloneElement(trigger, {
-      endIcon: /* @__PURE__ */ jsx("span", { className: "es:text-secondary-400 es:contrast-more:text-current", children: icons.caretRightFill })
+      endIcon: /* @__PURE__ */ jsx("span", { className: "es:text-secondary-500 es:contrast-more:text-current es:icon:size-3! es:icon:stroke-2!", children: icons.chevronRight })
     }),
     /* @__PURE__ */ jsx(
       Popover,

package/dist/components/toggle-button/toggle-button.js

@@ -178,8 +178,10 @@ const ToggleButton2 = (props) => {
       "es:btn-group-mid:rounded-none",
       "es:btn-group-h-start:rounded-r-none es:btn-group-v-start:rounded-b-none",
       "es:btn-group-h-end:rounded-l-none es:btn-group-v-end:rounded-t-none",
-      "es:enabled:hover:shadow-md es:enabled:active:shadow-sm es:enabled:pressed:shadow-sm",
-      "es:cursor-pointer",
+      "es:enabled:not-pending:cursor-pointer",
+      "es:shrink-0",
+      "es:pending:shadow-none! es:pending:cursor-wait",
+      "es:bg-radial-[at_50%_125%]",
       icon && children ? "es:justify-start" : "es:justify-center",
       className
     ],
@@ -189,10 +191,6 @@ const ToggleButton2 = (props) => {
           small: "es:icon:size-5 es:rounded-7",
           default: "es:icon:size-5 es:rounded-10",
           large: "es:icon:size-6 es:rounded-xl"
-        },
-        type: {
-          default: ["es:bg-radial-[at_50%_125%]", "es:inset-ring es:inset-shadow-xs"],
-          ghost: ["es:border-transparent es:text-secondary-700", "es:hover:bg-secondary-100", "es:disabled:border-transparent!"]
         }
       },
       compoundVariants: [
@@ -202,22 +200,22 @@ const ToggleButton2 = (props) => {
           selected: false,
           class: [
             "es:text-black",
-            "es:from-secondary-50 es:to-white",
+            "es:from-white es:to-secondary-50",
             "es:border-secondary-300",
-            "es:inset-ring-secondary-100",
-            "es:inset-shadow-secondary-100/50",
+            "es:inset-ring es:inset-ring-secondary-100",
+            "es:inset-shadow-xs es:inset-shadow-secondary-100/50",
             "es:shadow-sm",
-            "es:hover:inset-shadow-secondary-100 es:hover:to-secondary-100 es:hover:inset-ring-secondary-100",
+            "es:enabled:hover:shadow-md es:enabled:active:shadow-sm es:enabled:pressed:shadow-sm es:hover:inset-shadow-secondary-100 es:hover:to-secondary-100 es:hover:inset-ring-secondary-100",
             "es:hover:text-accent-950",
             "es:focus-visible:text-accent-950"
           ]
         },
         {
-          type: "default",
+          type: ["default", "ghost"],
           disabled: false,
           selected: true,
           class: [
-            "es:text-white es:accent-text-shadow",
+            "es:text-white",
             "es:from-accent-500 es:to-accent-600",
             "es:border-accent-700",
             "es:inset-ring es:inset-ring-accent-600",
@@ -225,18 +223,25 @@ const ToggleButton2 = (props) => {
             "es:focus-visible:border-accent-700",
             "es:focus-visible:inset-ring es:focus-visible:inset-ring-accent-600",
             "es:focus-visible:inset-shadow-xs es:focus-visible:inset-shadow-accent-400",
-            "es:shadow-sm es:shadow-accent-600/30"
+            "es:shadow es:shadow-accent-600/30 es:enabled:hover:shadow-md es:enabled:active:shadow-sm es:enabled:pressed:shadow-sm"
           ]
         },
-        {
-          disabled: true,
-          class: "es:disabled:border-secondary-300 es:disabled:text-secondary-400 es:border es:shadow-none es:disabled:inset-shadow-transparent es:disabled:inset-ring-0"
-        },
         {
           type: "ghost",
           disabled: false,
-          selected: true,
-          class: ["es:bg-accent-600 es:text-white es:border-accent-600 es:shadow-sm es:shadow-accent-500/25", "es:hover:shadow-accent-600/50"]
+          selected: false,
+          class: [
+            "es:border-accent-500/0 es:text-secondary-700",
+            "es:hover:bg-accent-500/10 es:hover:text-accent-700",
+            "es:active:bg-accent-50 es:pressed:bg-accent-50 es:active:text-accent-950 es:pressed:text-accent-950",
+            "es:focus-visible:text-accent-700",
+            "es:inset-ring es:inset-ring-accent-600/0",
+            "es:inset-shadow-xs es:inset-shadow-accent-400/0"
+          ]
+        },
+        {
+          disabled: true,
+          class: "es:disabled:border-zinc-300 es:disabled:text-zinc-400 es:border es:shadow-none es:disabled:inset-shadow-transparent es:disabled:inset-ring-0"
         },
         // Sizes.
         {

package/dist/icons/icons.js

@@ -3349,6 +3349,33 @@ const icons = {
     /* @__PURE__ */ jsx("path", { opacity: "0.6", d: "M3.439 17.562a.562.562 0 0 0 .793-.794.561.561 0 0 0-.794.793v.001Z", fill: "currentColor" }),
     /* @__PURE__ */ jsx("path", { d: "M5.077 18.657a.561.561 0 1 0-.002 0h.002Z", fill: "currentColor" }),
     /* @__PURE__ */ jsx("path", { d: "M6.5 12v2.25c0 .138.112.25.25.25H8.5", stroke: "currentColor", strokeLinecap: "round", fill: "none" })
+  ] }),
+  folderSolid: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 21 20", width: "21", height: "20", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M17.5 5a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-14a2 2 0 0 1-1.99-1.796L1.5 15V8h5.8a.501.501 0 0 0 .298-.099l2.7-2-.008-.01L11.484 5H17.5ZM6.805 3a2 2 0 0 1 1.19.393l1.993 1.476L7.135 7H1.5V5a2 2 0 0 1 2-2h3.305Z", fill: "currentColor" }) }),
+  folderOpenSolid: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 21 20", width: "21", height: "20", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M19.27 8c.256.44.348.979.2 1.522l-1.623 6A2 2 0 0 1 15.916 17H3.5c-.207 0-.407-.033-.595-.092l.076-.277 2.196-7.899A1 1 0 0 1 6.14 8h13.13ZM6.4 3c.513 0 1.008.197 1.38.55l1.234 1.175c.186.176.433.275.69.275H15.5a2 2 0 0 1 2 2H6.14a2 2 0 0 0-1.927 1.465l-2.194 7.901.004-.021A1.99 1.99 0 0 1 1.5 15V5a2 2 0 0 1 2-2h2.9Z", fill: "currentColor" }) }),
+  plusSquare: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
+    /* @__PURE__ */ jsx("rect", { x: "1.5", y: "1.5", width: "17", height: "17", rx: "2", stroke: "currentColor", fill: "none" }),
+    /* @__PURE__ */ jsx("path", { d: "M5.5 10H10m0 0h4.5M10 10V5.5m0 4.5v4.5", stroke: "currentColor", strokeLinecap: "round", fill: "none" })
+  ] }),
+  plusSquareFill: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M16.5 19a2.5 2.5 0 0 0 2.5-2.5v-13A2.5 2.5 0 0 0 16.5 1h-13A2.5 2.5 0 0 0 1 3.5v13A2.5 2.5 0 0 0 3.5 19h13ZM10 15a.5.5 0 0 1-.5-.5v-4h-4a.5.5 0 0 1 0-1h4v-4a.5.5 0 0 1 1 0v4h4a.5.5 0 0 1 0 1h-4v4a.5.5 0 0 1-.5.5Z", fill: "currentColor" }) }),
+  plusSquareFillTransparent: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: [
+    /* @__PURE__ */ jsx("rect", { x: "1", y: "1", width: "18", height: "18", rx: "2.5", fill: "currentColor", fillOpacity: "0.12" }),
+    /* @__PURE__ */ jsx("path", { d: "M5.5 10H10m0 0h4.5M10 10V5.5m0 4.5v4.5", stroke: "currentColor", strokeLinecap: "round", fill: "none" })
+  ] }),
+  sortGeneric: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: [
+    /* @__PURE__ */ jsx("path", { d: "m1 14 4.5 4.52m0 0L10 14m-4.5 4.52V3", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }),
+    /* @__PURE__ */ jsx("path", { d: "M9 3.5h10m-10 3h8m-8 3h6", stroke: "currentColor", strokeLinecap: "round", fill: "none" })
+  ] }),
+  musicNote: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: [
+    /* @__PURE__ */ jsx("ellipse", { cx: "5", cy: "17", rx: "2.5", ry: "2", fill: "currentColor", stroke: "currentColor" }),
+    /* @__PURE__ */ jsx("ellipse", { cx: "16", cy: "14", rx: "2.5", ry: "2", fill: "currentColor", stroke: "currentColor" }),
+    /* @__PURE__ */ jsx("path", { d: "M18.5 2.698V4l-11 2V4.335a1 1 0 0 1 .821-.984l9-1.637a1 1 0 0 1 1.179.984Z", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("path", { d: "M18.5 14V2.698a1 1 0 0 0-1.179-.984l-9 1.637a1 1 0 0 0-.821.984V17.25M18.5 4l-11 2", stroke: "currentColor", fill: "none" })
+  ] }),
+  wordpress: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M17.1 6.118A8.052 8.052 0 0 1 18.091 10a8.087 8.087 0 0 1-4.023 6.994l2.472-7.146c.461-1.154.615-2.077.615-2.898 0-.298-.02-.575-.055-.832Zm-5.985.088c.487-.026.926-.077.926-.077.436-.052.385-.692-.051-.667 0 0-1.311.103-2.157.103-.795 0-2.131-.103-2.131-.103-.437-.025-.488.641-.052.667 0 0 .413.051.85.077L9.76 9.66l-1.771 5.31-2.947-8.764c.488-.026.926-.077.926-.077.436-.052.385-.692-.051-.667 0 0-1.31.103-2.157.103-.152 0-.33-.004-.52-.01A8.082 8.082 0 0 1 10 1.908c2.106 0 4.024.806 5.464 2.125-.035-.003-.069-.007-.105-.007-.794 0-1.358.692-1.358 1.436 0 .667.384 1.231.794 1.898.308.539.668 1.231.668 2.232 0 .692-.267 1.496-.616 2.615l-.808 2.697-2.924-8.698ZM10 18.092a8.09 8.09 0 0 1-2.286-.33l2.428-7.055 2.487 6.815a.76.76 0 0 0 .058.111 8.074 8.074 0 0 1-2.687.459ZM1.908 10a8.06 8.06 0 0 1 .701-3.293l3.86 10.575A8.092 8.092 0 0 1 1.909 10ZM10 1c-4.963 0-9 4.037-9 9 0 4.962 4.037 9 9 9s9-4.038 9-9c0-4.963-4.037-9-9-9Z", fill: "currentColor" }) }),
+  filePdf: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: [
+    /* @__PURE__ */ jsx("path", { d: "m9.5.5 5 5H10a.5.5 0 0 1-.5-.5V.5Z", fill: "currentColor", fillOpacity: "0.3" }),
+    /* @__PURE__ */ jsx("path", { d: "m14.5 5.5-5-5m5 5H10a.5.5 0 0 1-.5-.5V.5m5 5v2m-5-7H2A1.5 1.5 0 0 0 .5 2v16A1.5 1.5 0 0 0 2 19.5h11a1.5 1.5 0 0 0 1.5-1.5v-.5", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }),
+    /* @__PURE__ */ jsx("path", { d: "M11.236 15.5H9.499v-6h1.737s2.316 0 2.316 2.842v.316c0 2.842-2.316 2.842-2.316 2.842Zm4.263 0v-3m3.184-3H15.5v3m0 0h3.04m-15.04 3v-3m0 0v-3h1.882c.434 0 2.119 0 2.118 1.5-.001 1.5-1.566 1.5-2 1.5h-2Z", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" })
   ] })
 };
 const blockIcons = {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eightshift/ui-components",
-	"version": "5.3.2",
+	"version": "5.3.3",
 	"type": "module",
 	"main": "./dist/index.js",
 	"module": "./dist/index.js",