@eightshift/ui-components 2.0.1 → 2.0.2

package/dist/assets/style-admin.css

@@ -2412,6 +2412,11 @@ body #wpwrap .es\:to-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));
 }
 
+body #wpwrap .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));
+}
+
 body #wpwrap .es\:to-secondary-100 {
   --tw-gradient-to: var(--es-color-secondary-100);
   --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -2990,6 +2995,11 @@ body #wpwrap .es\:ring-2 {
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
 
+body #wpwrap .es\:ring-3 {
+  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + 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);
+}
+
 body #wpwrap .es\:shadow {
   --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);
@@ -3099,6 +3109,10 @@ body #wpwrap .es\:inset-shadow-red-50 {
   --tw-inset-shadow-color: var(--es-color-red-50);
 }
 
+body #wpwrap .es\:inset-shadow-secondary-100 {
+  --tw-inset-shadow-color: var(--es-color-secondary-100);
+}
+
 body #wpwrap .es\:inset-shadow-secondary-100\/50 {
   --tw-inset-shadow-color: color-mix(in oklab, var(--es-color-secondary-100) 50%, transparent);
 }
@@ -3123,6 +3137,10 @@ body #wpwrap .es\:inset-ring-secondary-200\/20 {
   --tw-inset-ring-color: color-mix(in oklab, var(--es-color-secondary-200) 20%, transparent);
 }
 
+body #wpwrap .es\:inset-ring-secondary-200\/30 {
+  --tw-inset-ring-color: color-mix(in oklab, var(--es-color-secondary-200) 30%, transparent);
+}
+
 body #wpwrap .es\:outline-hidden {
   outline-style: none;
 }
@@ -3392,6 +3410,10 @@ body #wpwrap .es\:not-disabled\:cursor-pointer:not(:disabled, [data-rac][data-di
   }
 }
 
+body #wpwrap .es\:group-not-disabled\:cursor-pointer:is(:where(.es\:group):not(:disabled, [data-rac][data-disabled]) *) {
+  cursor: pointer;
+}
+
 @media (hover: hover) {
   body #wpwrap .es\:group-hover\:text-black:is(:where(.es\:group):hover *) {
     color: var(--es-color-black);
@@ -3402,6 +3424,19 @@ body #wpwrap .es\:not-disabled\:cursor-pointer:not(:disabled, [data-rac][data-di
   }
 }
 
+body #wpwrap .es\:group-focus\:border-accent-500:is(:where(.es\:group):focus *) {
+  border-color: var(--es-color-accent-500);
+}
+
+body #wpwrap .es\:group-focus\:ring-2:is(:where(.es\:group):focus *) {
+  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+
+body #wpwrap .es\:group-focus\:ring-accent-500\/50:is(:where(.es\:group):focus *) {
+  --tw-ring-color: color-mix(in oklab, var(--es-color-accent-500) 50%, transparent);
+}
+
 body #wpwrap .es\:group-focus\:outline-hidden:is(:where(.es\:group):focus *) {
   outline-style: none;
 }
@@ -3417,6 +3452,10 @@ body #wpwrap .es\:group-focus-visible\:border-accent-500:is(:where(.es\:group):i
   border-color: var(--es-color-accent-500);
 }
 
+body #wpwrap .es\:group-focus-visible\:border-accent-600:is(:where(.es\:group):is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) *) {
+  border-color: var(--es-color-accent-600);
+}
+
 body #wpwrap .es\:group-focus-visible\:opacity-100:is(:where(.es\:group):is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) *) {
   opacity: 1;
 }
@@ -3426,11 +3465,6 @@ body #wpwrap .es\:group-focus-visible\:inset-shadow-xs:is(:where(.es\:group):is(
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
 
-body #wpwrap .es\:group-focus-visible\:ring:is(:where(.es\:group):is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) *) {
-  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + 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);
-}
-
 body #wpwrap .es\:group-focus-visible\:ring-2:is(:where(.es\:group):is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) *) {
   --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);
@@ -3840,6 +3874,10 @@ body #wpwrap .es\:empty\:hidden:empty {
   }
 }
 
+body #wpwrap .es\:focus\:border-accent-500:focus {
+  border-color: var(--es-color-accent-500);
+}
+
 body #wpwrap .es\:focus\:text-current:focus {
   color: currentColor;
 }
@@ -3858,17 +3896,6 @@ body #wpwrap .es\:focus\:ring-accent-500\/50:focus {
   --tw-ring-color: color-mix(in oklab, var(--es-color-accent-500) 50%, transparent);
 }
 
-body #wpwrap .es\:focus\:outline-hidden:focus {
-  outline-style: none;
-}
-
-@media (forced-colors: active) {
-  body #wpwrap .es\:focus\:outline-hidden:focus {
-    outline-offset: 2px;
-    outline: 2px solid #0000;
-  }
-}
-
 body #wpwrap .es\:focus-visible\:z-10:is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) {
   z-index: 10;
 }
@@ -3915,21 +3942,11 @@ body #wpwrap .es\:focus-visible\:inset-shadow-xs:is(:focus-visible:not(:focus),
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
 
-body #wpwrap .es\:focus-visible\:ring:is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) {
-  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + 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);
-}
-
 body #wpwrap .es\:focus-visible\:ring-2:is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) {
   --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);
 }
 
-body #wpwrap .es\:focus-visible\:ring-3:is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) {
-  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + 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);
-}
-
 body #wpwrap .es\:focus-visible\:ring-accent-500\/50:is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) {
   --tw-ring-color: color-mix(in oklab, var(--es-color-accent-500) 50%, transparent);
 }
@@ -4230,26 +4247,26 @@ body #wpwrap .es\:aria-\[expanded\=false\]\:rounded-b-lg[aria-expanded="false"]
     animation: var(--motion-all-exit-animations);
   }
 
-  body #wpwrap .es\:motion-safe\:data-\[placement\=left\]\:-motion-translate-x-in-25[data-placement="left"] {
-    --motion-origin-translate-x: calc(25% * -1);
+  body #wpwrap .es\:motion-safe\:data-\[placement\=left\]\:motion-translate-x-in-25[data-placement="left"] {
+    --motion-origin-translate-x: 25%;
     --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration) * var(--motion-translate-perceptual-duration-multiplier)) var(--motion-translate-timing) var(--motion-translate-delay) both;
     animation: var(--motion-all-loop-and-enter-animations);
   }
 
-  body #wpwrap .es\:motion-safe\:data-\[placement\=left\]\:motion-translate-x-out-\[-12\.5\%\][data-placement="left"] {
-    --motion-end-translate-x: -12.5%;
+  body #wpwrap .es\:motion-safe\:data-\[placement\=left\]\:motion-translate-x-out-\[12\.5\%\][data-placement="left"] {
+    --motion-end-translate-x: 12.5%;
     --motion-translate-out-animation: motion-translate-out calc(var(--motion-translate-duration) * var(--motion-translate-perceptual-duration-multiplier)) var(--motion-translate-timing) var(--motion-translate-delay) both;
     animation: var(--motion-all-exit-animations);
   }
 
-  body #wpwrap .es\:motion-safe\:data-\[placement\=right\]\:motion-translate-x-in-25[data-placement="right"] {
-    --motion-origin-translate-x: 25%;
+  body #wpwrap .es\:motion-safe\:data-\[placement\=right\]\:-motion-translate-x-in-25[data-placement="right"] {
+    --motion-origin-translate-x: calc(25% * -1);
     --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration) * var(--motion-translate-perceptual-duration-multiplier)) var(--motion-translate-timing) var(--motion-translate-delay) both;
     animation: var(--motion-all-loop-and-enter-animations);
   }
 
-  body #wpwrap .es\:motion-safe\:data-\[placement\=right\]\:motion-translate-x-out-\[12\.5\%\][data-placement="right"] {
-    --motion-end-translate-x: 12.5%;
+  body #wpwrap .es\:motion-safe\:data-\[placement\=right\]\:motion-translate-x-out-\[-12\.5\%\][data-placement="right"] {
+    --motion-end-translate-x: -12.5%;
     --motion-translate-out-animation: motion-translate-out calc(var(--motion-translate-duration) * var(--motion-translate-perceptual-duration-multiplier)) var(--motion-translate-timing) var(--motion-translate-delay) both;
     animation: var(--motion-all-exit-animations);
   }
@@ -4548,8 +4565,8 @@ body #wpwrap .es\:\[\&_svg_path\]\:stroke-red-500 svg path {
   stroke: var(--es-color-red-500);
 }
 
-body #wpwrap .es\:\[\&\:has\(\>_\[data-focus-visible\=\"true\"\]\)\]\:ring:has( > [data-focus-visible="true"]) {
-  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
+body #wpwrap .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);
 }
 

package/dist/assets/style-editor.css

@@ -2412,6 +2412,11 @@ 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-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));
+}
+
 :is(body, #wpwrap #editor) .es\:to-secondary-100 {
   --tw-gradient-to: var(--es-color-secondary-100);
   --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -2990,6 +2995,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\:ring-3 {
+  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + 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);
+}
+
 :is(body, #wpwrap #editor) .es\:shadow {
   --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);
@@ -3099,6 +3109,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   --tw-inset-shadow-color: var(--es-color-red-50);
 }
 
+:is(body, #wpwrap #editor) .es\:inset-shadow-secondary-100 {
+  --tw-inset-shadow-color: var(--es-color-secondary-100);
+}
+
 :is(body, #wpwrap #editor) .es\:inset-shadow-secondary-100\/50 {
   --tw-inset-shadow-color: color-mix(in oklab, var(--es-color-secondary-100) 50%, transparent);
 }
@@ -3123,6 +3137,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   --tw-inset-ring-color: color-mix(in oklab, var(--es-color-secondary-200) 20%, transparent);
 }
 
+: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 {
   outline-style: none;
 }
@@ -3392,6 +3410,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   }
 }
 
+:is(body, #wpwrap #editor) .es\:group-not-disabled\:cursor-pointer:is(:where(.es\:group):not(:disabled, [data-rac][data-disabled]) *) {
+  cursor: pointer;
+}
+
 @media (hover: hover) {
   :is(body, #wpwrap #editor) .es\:group-hover\:text-black:is(:where(.es\:group):hover *) {
     color: var(--es-color-black);
@@ -3402,6 +3424,19 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   }
 }
 
+:is(body, #wpwrap #editor) .es\:group-focus\:border-accent-500:is(:where(.es\:group):focus *) {
+  border-color: var(--es-color-accent-500);
+}
+
+:is(body, #wpwrap #editor) .es\:group-focus\:ring-2:is(:where(.es\:group):focus *) {
+  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+
+:is(body, #wpwrap #editor) .es\:group-focus\:ring-accent-500\/50:is(:where(.es\:group):focus *) {
+  --tw-ring-color: color-mix(in oklab, var(--es-color-accent-500) 50%, transparent);
+}
+
 :is(body, #wpwrap #editor) .es\:group-focus\:outline-hidden:is(:where(.es\:group):focus *) {
   outline-style: none;
 }
@@ -3417,6 +3452,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   border-color: var(--es-color-accent-500);
 }
 
+:is(body, #wpwrap #editor) .es\:group-focus-visible\:border-accent-600:is(:where(.es\:group):is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) *) {
+  border-color: var(--es-color-accent-600);
+}
+
 :is(body, #wpwrap #editor) .es\:group-focus-visible\:opacity-100:is(:where(.es\:group):is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) *) {
   opacity: 1;
 }
@@ -3426,11 +3465,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\:group-focus-visible\:ring:is(:where(.es\:group):is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) *) {
-  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + 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);
-}
-
 :is(body, #wpwrap #editor) .es\:group-focus-visible\:ring-2:is(:where(.es\:group):is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) *) {
   --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);
@@ -3840,6 +3874,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   }
 }
 
+:is(body, #wpwrap #editor) .es\:focus\:border-accent-500:focus {
+  border-color: var(--es-color-accent-500);
+}
+
 :is(body, #wpwrap #editor) .es\:focus\:text-current:focus {
   color: currentColor;
 }
@@ -3858,17 +3896,6 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   --tw-ring-color: color-mix(in oklab, var(--es-color-accent-500) 50%, transparent);
 }
 
-:is(body, #wpwrap #editor) .es\:focus\:outline-hidden:focus {
-  outline-style: none;
-}
-
-@media (forced-colors: active) {
-  :is(body, #wpwrap #editor) .es\:focus\:outline-hidden:focus {
-    outline-offset: 2px;
-    outline: 2px solid #0000;
-  }
-}
-
 :is(body, #wpwrap #editor) .es\:focus-visible\:z-10:is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) {
   z-index: 10;
 }
@@ -3915,21 +3942,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\:focus-visible\:ring:is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) {
-  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + 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);
-}
-
 :is(body, #wpwrap #editor) .es\:focus-visible\:ring-2:is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) {
   --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);
 }
 
-:is(body, #wpwrap #editor) .es\:focus-visible\:ring-3:is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) {
-  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + 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);
-}
-
 :is(body, #wpwrap #editor) .es\:focus-visible\:ring-accent-500\/50:is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) {
   --tw-ring-color: color-mix(in oklab, var(--es-color-accent-500) 50%, transparent);
 }
@@ -4230,26 +4247,26 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
     animation: var(--motion-all-exit-animations);
   }
 
-  :is(body, #wpwrap #editor) .es\:motion-safe\:data-\[placement\=left\]\:-motion-translate-x-in-25[data-placement="left"] {
-    --motion-origin-translate-x: calc(25% * -1);
+  :is(body, #wpwrap #editor) .es\:motion-safe\:data-\[placement\=left\]\:motion-translate-x-in-25[data-placement="left"] {
+    --motion-origin-translate-x: 25%;
     --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration) * var(--motion-translate-perceptual-duration-multiplier)) var(--motion-translate-timing) var(--motion-translate-delay) both;
     animation: var(--motion-all-loop-and-enter-animations);
   }
 
-  :is(body, #wpwrap #editor) .es\:motion-safe\:data-\[placement\=left\]\:motion-translate-x-out-\[-12\.5\%\][data-placement="left"] {
-    --motion-end-translate-x: -12.5%;
+  :is(body, #wpwrap #editor) .es\:motion-safe\:data-\[placement\=left\]\:motion-translate-x-out-\[12\.5\%\][data-placement="left"] {
+    --motion-end-translate-x: 12.5%;
     --motion-translate-out-animation: motion-translate-out calc(var(--motion-translate-duration) * var(--motion-translate-perceptual-duration-multiplier)) var(--motion-translate-timing) var(--motion-translate-delay) both;
     animation: var(--motion-all-exit-animations);
   }
 
-  :is(body, #wpwrap #editor) .es\:motion-safe\:data-\[placement\=right\]\:motion-translate-x-in-25[data-placement="right"] {
-    --motion-origin-translate-x: 25%;
+  :is(body, #wpwrap #editor) .es\:motion-safe\:data-\[placement\=right\]\:-motion-translate-x-in-25[data-placement="right"] {
+    --motion-origin-translate-x: calc(25% * -1);
     --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration) * var(--motion-translate-perceptual-duration-multiplier)) var(--motion-translate-timing) var(--motion-translate-delay) both;
     animation: var(--motion-all-loop-and-enter-animations);
   }
 
-  :is(body, #wpwrap #editor) .es\:motion-safe\:data-\[placement\=right\]\:motion-translate-x-out-\[12\.5\%\][data-placement="right"] {
-    --motion-end-translate-x: 12.5%;
+  :is(body, #wpwrap #editor) .es\:motion-safe\:data-\[placement\=right\]\:motion-translate-x-out-\[-12\.5\%\][data-placement="right"] {
+    --motion-end-translate-x: -12.5%;
     --motion-translate-out-animation: motion-translate-out calc(var(--motion-translate-duration) * var(--motion-translate-perceptual-duration-multiplier)) var(--motion-translate-timing) var(--motion-translate-delay) both;
     animation: var(--motion-all-exit-animations);
   }
@@ -4548,8 +4565,8 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   stroke: var(--es-color-red-500);
 }
 
-:is(body, #wpwrap #editor) .es\:\[\&\:has\(\>_\[data-focus-visible\=\"true\"\]\)\]\:ring:has( > [data-focus-visible="true"]) {
-  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
+: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);
 }
 

package/dist/assets/style.css

@@ -2778,6 +2778,11 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
 
+  .es\:to-secondary-50 {
+    --tw-gradient-to: var(--es-color-secondary-50);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
   .es\:to-secondary-100 {
     --tw-gradient-to: var(--es-color-secondary-100);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -3356,6 +3361,11 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
+  .es\:ring-3 {
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
   .es\:shadow {
     --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);
@@ -3465,6 +3475,10 @@
     --tw-inset-shadow-color: var(--es-color-red-50);
   }
 
+  .es\:inset-shadow-secondary-100 {
+    --tw-inset-shadow-color: var(--es-color-secondary-100);
+  }
+
   .es\:inset-shadow-secondary-100\/50 {
     --tw-inset-shadow-color: color-mix(in oklab, var(--es-color-secondary-100) 50%, transparent);
   }
@@ -3489,6 +3503,10 @@
     --tw-inset-ring-color: color-mix(in oklab, var(--es-color-secondary-200) 20%, transparent);
   }
 
+  .es\:inset-ring-secondary-200\/30 {
+    --tw-inset-ring-color: color-mix(in oklab, var(--es-color-secondary-200) 30%, transparent);
+  }
+
   .es\:outline-hidden {
     outline-style: none;
   }
@@ -3758,6 +3776,10 @@
     }
   }
 
+  .es\:group-not-disabled\:cursor-pointer:is(:where(.es\:group):not(:disabled, [data-rac][data-disabled]) *) {
+    cursor: pointer;
+  }
+
   @media (hover: hover) {
     .es\:group-hover\:text-black:is(:where(.es\:group):hover *) {
       color: var(--es-color-black);
@@ -3768,6 +3790,19 @@
     }
   }
 
+  .es\:group-focus\:border-accent-500:is(:where(.es\:group):focus *) {
+    border-color: var(--es-color-accent-500);
+  }
+
+  .es\:group-focus\:ring-2:is(:where(.es\:group):focus *) {
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .es\:group-focus\:ring-accent-500\/50:is(:where(.es\:group):focus *) {
+    --tw-ring-color: color-mix(in oklab, var(--es-color-accent-500) 50%, transparent);
+  }
+
   .es\:group-focus\:outline-hidden:is(:where(.es\:group):focus *) {
     outline-style: none;
   }
@@ -3783,6 +3818,10 @@
     border-color: var(--es-color-accent-500);
   }
 
+  .es\:group-focus-visible\:border-accent-600:is(:where(.es\:group):is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) *) {
+    border-color: var(--es-color-accent-600);
+  }
+
   .es\:group-focus-visible\:opacity-100:is(:where(.es\:group):is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) *) {
     opacity: 1;
   }
@@ -3792,11 +3831,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\:group-focus-visible\:ring:is(:where(.es\:group):is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) *) {
-    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-
   .es\:group-focus-visible\:ring-2:is(:where(.es\:group):is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) *) {
     --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);
@@ -4206,6 +4240,10 @@
     }
   }
 
+  .es\:focus\:border-accent-500:focus {
+    border-color: var(--es-color-accent-500);
+  }
+
   .es\:focus\:text-current:focus {
     color: currentColor;
   }
@@ -4224,17 +4262,6 @@
     --tw-ring-color: color-mix(in oklab, var(--es-color-accent-500) 50%, transparent);
   }
 
-  .es\:focus\:outline-hidden:focus {
-    outline-style: none;
-  }
-
-  @media (forced-colors: active) {
-    .es\:focus\:outline-hidden:focus {
-      outline-offset: 2px;
-      outline: 2px solid #0000;
-    }
-  }
-
   .es\:focus-visible\:z-10:is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) {
     z-index: 10;
   }
@@ -4281,21 +4308,11 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
-  .es\:focus-visible\:ring:is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) {
-    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-
   .es\:focus-visible\:ring-2:is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) {
     --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
-  .es\:focus-visible\:ring-3:is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) {
-    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-
   .es\:focus-visible\:ring-accent-500\/50:is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) {
     --tw-ring-color: color-mix(in oklab, var(--es-color-accent-500) 50%, transparent);
   }
@@ -4596,26 +4613,26 @@
       animation: var(--motion-all-exit-animations);
     }
 
-    .es\:motion-safe\:data-\[placement\=left\]\:-motion-translate-x-in-25[data-placement="left"] {
-      --motion-origin-translate-x: calc(25% * -1);
+    .es\:motion-safe\:data-\[placement\=left\]\:motion-translate-x-in-25[data-placement="left"] {
+      --motion-origin-translate-x: 25%;
       --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration) * var(--motion-translate-perceptual-duration-multiplier)) var(--motion-translate-timing) var(--motion-translate-delay) both;
       animation: var(--motion-all-loop-and-enter-animations);
     }
 
-    .es\:motion-safe\:data-\[placement\=left\]\:motion-translate-x-out-\[-12\.5\%\][data-placement="left"] {
-      --motion-end-translate-x: -12.5%;
+    .es\:motion-safe\:data-\[placement\=left\]\:motion-translate-x-out-\[12\.5\%\][data-placement="left"] {
+      --motion-end-translate-x: 12.5%;
       --motion-translate-out-animation: motion-translate-out calc(var(--motion-translate-duration) * var(--motion-translate-perceptual-duration-multiplier)) var(--motion-translate-timing) var(--motion-translate-delay) both;
       animation: var(--motion-all-exit-animations);
     }
 
-    .es\:motion-safe\:data-\[placement\=right\]\:motion-translate-x-in-25[data-placement="right"] {
-      --motion-origin-translate-x: 25%;
+    .es\:motion-safe\:data-\[placement\=right\]\:-motion-translate-x-in-25[data-placement="right"] {
+      --motion-origin-translate-x: calc(25% * -1);
       --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration) * var(--motion-translate-perceptual-duration-multiplier)) var(--motion-translate-timing) var(--motion-translate-delay) both;
       animation: var(--motion-all-loop-and-enter-animations);
     }
 
-    .es\:motion-safe\:data-\[placement\=right\]\:motion-translate-x-out-\[12\.5\%\][data-placement="right"] {
-      --motion-end-translate-x: 12.5%;
+    .es\:motion-safe\:data-\[placement\=right\]\:motion-translate-x-out-\[-12\.5\%\][data-placement="right"] {
+      --motion-end-translate-x: -12.5%;
       --motion-translate-out-animation: motion-translate-out calc(var(--motion-translate-duration) * var(--motion-translate-perceptual-duration-multiplier)) var(--motion-translate-timing) var(--motion-translate-delay) both;
       animation: var(--motion-all-exit-animations);
     }
@@ -4914,8 +4931,8 @@
     stroke: var(--es-color-red-500);
   }
 
-  .es\:\[\&\:has\(\>_\[data-focus-visible\=\"true\"\]\)\]\:ring:has( > [data-focus-visible="true"]) {
-    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
+  .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);
   }
 

package/dist/components/color-pickers/solid-color-picker.js

@@ -1307,7 +1307,7 @@ const SolidColorPicker = (props) => {
         yChannel: "lightness",
         className: clsx(
           "es:size-48 es:rounded-md es:border es:border-secondary-300 es:shadow-sm es:transition",
-          'es:[&:has(>_[data-focus-visible="true"])]:ring es:[&:has(>_[data-focus-visible="true"])]:ring-accent-500/50',
+          'es:[&:has(>_[data-focus-visible="true"])]:ring-2 es:[&:has(>_[data-focus-visible="true"])]:ring-accent-500/50',
           "es:disabled:bg-linear-to-r! es:disabled:from-white es:disabled:to-secondary-100"
         ),
         onChange: handleChange,
@@ -1328,7 +1328,7 @@ const SolidColorPicker = (props) => {
           {
             className: clsx(
               "es:h-7 es:w-48 es:rounded-md es:border es:border-secondary-300 es:shadow-sm",
-              'es:[&:has(>_[data-focus-visible="true"])]:ring es:[&:has(>_[data-focus-visible="true"])]:ring-accent-500/50',
+              'es:[&:has(>_[data-focus-visible="true"])]:ring-2 es:[&:has(>_[data-focus-visible="true"])]:ring-accent-500/50',
               "es:disabled:bg-linear-to-r! es:disabled:from-white es:disabled:to-secondary-100"
             ),
             children: /* @__PURE__ */ jsx($e2b71ec1d6016406$export$a3cc47cee1c1ccc, { className: "es:top-3.25 es:size-5 es:rounded-full es:border es:border-white es:shadow-[0_0_0_1px_black] es:transition es:dragging:scale-110! es:disabled:invisible" })
@@ -1348,7 +1348,7 @@ const SolidColorPicker = (props) => {
           {
             className: clsx(
               "es:h-7 es:w-48 es:rounded-md es:border es:border-secondary-300 es:shadow-sm",
-              'es:[&:has(>_[data-focus-visible="true"])]:ring es:[&:has(>_[data-focus-visible="true"])]:ring-accent-500/50',
+              'es:[&:has(>_[data-focus-visible="true"])]:ring-2 es:[&:has(>_[data-focus-visible="true"])]:ring-accent-500/50',
               "es:disabled:bg-linear-to-r! es:disabled:from-white es:disabled:to-secondary-100"
             ),
             style: () => {

package/dist/components/draggable/draggable-handle.js

@@ -29,9 +29,10 @@ const DraggableHandle = (props) => {
         "es:flex es:h-5 es:w-4 es:cursor-pointer es:items-center es:justify-center es:rounded es:border es:border-secondary-200 es:bg-white es:text-secondary-400 es:transition",
         "es:icon:size-4 es:icon:shrink-0",
         "es:active:border-accent-500/30 es:active:bg-accent-50 es:active:text-accent-500",
-        "es:focus:outline-hidden es:focus-visible:border-accent-500 es:focus-visible:outline-hidden es:focus-visible:ring es:focus-visible:ring-accent-500/50",
+        "es:any-focus:outline-hidden",
+        status !== "dragging" && "es:focus:border-accent-500 es:focus:ring-2 es:focus:ring-accent-500/50",
         "es:hover:text-accent-500",
-        status === "dragging" && "es:border-accent-600! es:bg-accent-500! es:text-white! es:shadow-sm es:shadow-accent-500/30",
+        status === "dragging" && "es:border-accent-600! es:bg-accent-500! es:text-white! es:shadow-sm es:shadow-accent-500/30 es:ring-3 es:ring-accent-500/50",
         className
       ),
       ref: handleRef,

package/dist/components/draggable/draggable.js

@@ -5859,20 +5859,12 @@ const Draggable3 = (props) => {
       children: /* @__PURE__ */ jsx(
         DragDropProvider,
         {
-          onDragOver: ({ operation: { source, target } }) => {
-            if (!source || !target) {
+          onDragOver: (event) => setItems((items2) => move(items2, event)),
+          onDragEnd: (event) => {
+            if (event == null ? void 0 : event.canceled) {
               return;
             }
-            setItems((items2) => move(items2, source));
-          },
-          onDragEnd: ({ operation: { source, target }, canceled }) => {
-            if (canceled) {
-              return;
-            }
-            if (!source || !target) {
-              return;
-            }
-            setItems((items2) => move(items2, source));
+            setItems((items2) => move(items2, event));
             onChange(items);
           },
           children: items.map((item, index) => /* @__PURE__ */ jsx(

package/dist/components/draggable-list/draggable-list.js

@@ -116,7 +116,8 @@ const DraggableList = (props) => {
                   "es:min-h-8 es:w-full",
                   "es:flex es:items-center es:gap-1 es:rounded-lg",
                   "es:transition-[box-shadow,background-color,filter,opacity,border-color]",
-                  "es:focus:outline-hidden es:focus-visible:ring es:focus-visible:ring-accent-500/50",
+                  "es:border es:border-transparent",
+                  "es:any-focus:outline-hidden es:focus:ring-2 es:focus:ring-accent-500/50 es:focus:border-accent-500",
                   isDisabled && "es:grayscale",
                   isDragged && "es:bg-white es:opacity-50",
                   isSelected && "es:bg-accent-50",

package/dist/components/expandable/expandable.js

@@ -266,12 +266,6 @@ const Expandable = (props) => {
     $28f4fd908f0de97f$export$74a362b31437ec83,
     {
       isExpanded: isOpen,
-      onExpandedChange: (value) => {
-        setIsOpen(value);
-        if (onOpenChange) {
-          onOpenChange(!isOpen);
-        }
-      },
       className: clsx("es:w-full es:rounded-xl es:border es:border-secondary-300/0 es:text-sm es:transition", isOpen && "es:border-secondary-300/100 es:shadow-lg", className),
       ...other,
       children: [

package/dist/components/link-input/link-input.js

@@ -162,7 +162,7 @@ const LinkInput = (props) => {
                             suggestionList.setFilterText("");
                             onChange({ url: void 0, isAnchor: false });
                           },
-                          className: "es:focus:outline-hidden",
+                          className: "es:any-focus:outline-hidden",
                           children: [
                             !(shouldShowSuggestions && suggestionList.isLoading) && /* @__PURE__ */ jsx(Tooltip, { text: __("Clear", "eightshift-ui-components"), children: /* @__PURE__ */ jsx(
                               "div",

package/dist/components/menu/menu.js

@@ -112,7 +112,7 @@ const Menu = (props) => {
         /* @__PURE__ */ jsx(
           Popover,
           {
-            className: "es:p-0! es:focus:outline-hidden",
+            className: "es:p-0! es:any-focus:outline-hidden",
             "aria-label": ariaLabel,
             wrapperClassName: clsx(!hasSubmenuItems && "es:overflow-y-auto"),
             ...popoverProps,
@@ -260,14 +260,14 @@ const SubMenuItem = (props) => {
       Popover,
       {
         "aria-label": props["aria-label"] ?? __("Submenu", "eightshift-ui-components"),
-        className: "es:p-0! es:focus:outline-hidden",
+        className: "es:p-0! es:any-focus:outline-hidden",
         offset: -1,
         ...popoverProps,
         children: /* @__PURE__ */ jsx(
           $3674c52c6b3c5bce$export$d9b273488cd8ce6f,
           {
             "aria-label": props["aria-label"] ?? __("Submenu", "eightshift-ui-components"),
-            className: "es:focus:outline-hidden",
+            className: "es:any-focus:outline-hidden",
             children
           }
         )

package/dist/components/notice/notice.js

@@ -85,7 +85,7 @@ const Notice = (props) => {
           "span",
           {
             className: clsx(
-              "es:col-span-1 es:col-start-1 es:row-span-2 es:row-start-1 es:shrink-0 es:self-center es:icon:size-7",
+              "es:col-span-1 es:col-start-1 es:row-span-2 es:row-start-1 es:shrink-0 es:icon:size-7",
               alignIconToTitle ? "es:self-baseline" : "es:self-center",
               styles[type].iconColor
             ),

package/dist/components/number-picker/number-picker.js

@@ -237,7 +237,7 @@ const NumberPicker = ({
                   {
                     onFocus: () => setIsInputFocused(true),
                     onBlur: () => setIsInputFocused(false),
-                    className: "es:col-start-2 es:row-span-2 es:border-none! es:bg-transparent es:px-0! es:py-1! es:text-sm es:tabular-nums es:shadow-none! es:outline-hidden! es:selection:bg-accent-500/20 es:selection:text-accent-950 es:focus:shadow-none! es:focus:outline-hidden",
+                    className: "es:col-start-2 es:row-span-2 es:border-none! es:bg-transparent es:px-0! es:py-1! es:text-sm es:tabular-nums es:shadow-none! es:outline-hidden! es:selection:bg-accent-500/20 es:selection:text-accent-950 es:focus:shadow-none! es:any-focus:outline-hidden",
                     placeholder,
                     style: {
                       width: fixedWidth ? `${fixedWidth}ch` : `calc(${min < 0 ? "0.75ch + " : ""}${(_d = (_c = max ?? 1e3) == null ? void 0 : _c.toString()) == null ? void 0 : _d.length} * 1ch)`

package/dist/components/repeater/repeater-item.js

@@ -44,9 +44,9 @@ const RepeaterItem = (props) => {
       ),
       labelClassName: clsx(className, isDragged ? "es:cursor-grabbing" : "es:cursor-grab"),
       headerClassName: clsx(
-        "es:transition es:rounded-md",
+        "es:transition es:rounded-lg es:border es:border-transparent",
         isSelected && "es:bg-accent-50 es:border-accent-100",
-        "es:group-focus:outline-hidden es:group-focus-visible:ring es:group-focus-visible:ring-accent-500/50"
+        "es:group-focus:outline-hidden es:group-focus:border-accent-500 es:group-focus:ring-2 es:group-focus:ring-accent-500/50"
       ),
       customOpenButton: ({ open, toggleOpen, tooltip, disabled }) => {
         return /* @__PURE__ */ jsxs("div", { className: "es:flex es:items-center es:gap-px", children: [

package/dist/components/repeater/repeater.js

@@ -160,7 +160,7 @@ const Repeater = (props) => {
               return /* @__PURE__ */ jsx(
                 "li",
                 {
-                  className: "es:group es:w-full es:list-none es:focus:outline-hidden",
+                  className: "es:group es:w-full es:list-none es:any-focus:outline-hidden",
                   ...rest,
                   children: /* @__PURE__ */ jsx(
                     RepeaterContext.Provider,

package/dist/components/select/async-multi-select.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useId } from "react";
 import { A as AsyncSelect$1 } from "../../react-select-async.esm-DcVLw9X5.js";
-import { D as DndContext, g as getDragEndHandler, S as SortableContext, a as getMultiValue, b as getMultiValueRemove } from "../../multi-select-components-CkF3LyTF.js";
+import { D as DndContext, g as getDragEndHandler, S as SortableContext, a as getMultiValue, b as getMultiValueRemove } from "../../multi-select-components-DJfz929p.js";
 import { r as restrictToParentElement } from "../../modifiers.esm-BuJQPI1X.js";
 import { CustomSelectDefaultMultiValueRemove, CustomSelectDefaultDropdownIndicator, CustomSelectDefaultClearIndicator } from "./custom-select-default-components.js";
 import { BaseControl } from "../base-control/base-control.js";

package/dist/components/select/multi-select-components.js

@@ -1,5 +1,5 @@
 import "react/jsx-runtime";
-import { g, a, b } from "../../multi-select-components-CkF3LyTF.js";
+import { g, a, b } from "../../multi-select-components-DJfz929p.js";
 import "../../lite-DVmmD_-j.js";
 export {
   g as getDragEndHandler,

package/dist/components/select/multi-select.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useId } from "react";
 import { S as StateManagedSelect$1 } from "../../react-select.esm-OZ0cmTjg.js";
-import { D as DndContext, g as getDragEndHandler, S as SortableContext, a as getMultiValue, b as getMultiValueRemove } from "../../multi-select-components-CkF3LyTF.js";
+import { D as DndContext, g as getDragEndHandler, S as SortableContext, a as getMultiValue, b as getMultiValueRemove } from "../../multi-select-components-DJfz929p.js";
 import { r as restrictToParentElement } from "../../modifiers.esm-BuJQPI1X.js";
 import { CustomSelectDefaultMultiValueRemove, CustomSelectDefaultDropdownIndicator, CustomSelectDefaultClearIndicator } from "./custom-select-default-components.js";
 import { getValue } from "./shared.js";

package/dist/components/select/styles.js

@@ -4,7 +4,7 @@ const controlStyles = {
   focus: "es:ring-2 es:ring-accent-500/50 es:border-accent-500!"
 };
 const placeholderStyles = "es:text-gray-400 es:ml-1";
-const selectInputStyles = "es:focus:outline-hidden es:[&_input]:shadow-none! es:[&_input:focus]:shadow-none!";
+const selectInputStyles = "es:any-focus:outline-hidden es:[&_input]:shadow-none! es:[&_input:focus]:shadow-none!";
 const valueContainerStyles = "es:gap-1 es:ml-1 es:my-1 es:overflow-visible!";
 const singleValueStyles = "es:ml-0.5 es:px-1";
 const multiValueStyles = clsx(

package/dist/components/select/v2/async-select.js

@@ -172,7 +172,7 @@ const __ExperimentalAsyncSelect = (props) => {
                 className: clsx(
                   "es:relative es:flex es:max-w-80 es:items-center es:gap-1 es:p-1 es:focus-visible:outline-hidden es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
                   "es:h-9 es:rounded-lg es:border es:border-secondary-300 es:bg-white es:text-sm es:shadow-xs es:transition",
-                  "es:focus:outline-hidden",
+                  "es:any-focus:outline-hidden",
                   !inline && "es:w-full",
                   disabled && "es:select-none",
                   "es:has-[[aria-haspopup=listbox][data-focus-visible=true],[aria-autocomplete=list][data-focus-visible=true]]:border-accent-500 es:has-[[aria-haspopup=listbox][data-focus-visible=true],[aria-autocomplete=list][data-focus-visible=true]]:ring-2 es:has-[[aria-haspopup=listbox][data-focus-visible=true],[aria-autocomplete=list][data-focus-visible=true]]:ring-accent-500/50"
@@ -228,14 +228,14 @@ const __ExperimentalAsyncSelect = (props) => {
           {
             className: ({ isEntering, isExiting }) => clsx(
               "es:flex es:w-80 es:min-w-9 es:max-w-80 es:flex-col es:overflow-x-hidden es:rounded-lg es:border es:border-secondary-200 es:bg-white es:text-sm es:shadow-lg",
-              "es:focus:outline-hidden",
+              "es:any-focus:outline-hidden",
               isEntering && "es:motion-safe:motion-preset-slide-down-sm es:motion-safe:motion-duration-300 es:motion-reduce:motion-preset-fade-md",
               isExiting && "es:not-motion-reduce:motion-translate-y-out-[-2.5%] es:motion-opacity-out-0 es:motion-duration-200"
             ),
             placement: "bottom left",
             triggerRef: ref,
             children: [
-              !list.isLoading && list.items.length > 0 && /* @__PURE__ */ jsx($eed445e0843c11d0$export$41f133550aa26f48, { className: "es:space-y-0.5 es:p-1 es:focus:outline-hidden", children: (item) => {
+              !list.isLoading && list.items.length > 0 && /* @__PURE__ */ jsx($eed445e0843c11d0$export$41f133550aa26f48, { className: "es:space-y-0.5 es:p-1 es:any-focus:outline-hidden", children: (item) => {
                 return /* @__PURE__ */ jsxs(
                   OptionItemBase,
                   {
@@ -282,7 +282,7 @@ const ClearButton = ({ disabled }) => {
     {
       "aria-label": __("Clear value", "eightshift-ui-components"),
       className: clsx(
-        "es:mr-7 es:flex es:h-6 es:w-8 es:items-center es:justify-center es:rounded es:text-sm es:text-secondary-600 es:transition es:hover:bg-red-50 es:hover:text-red-900 es:focus:outline-hidden es:focus:ring-2 es:focus:ring-accent-500/50 es:disabled:text-secondary-300 es:cursor-pointer",
+        "es:mr-7 es:flex es:h-6 es:w-8 es:items-center es:justify-center es:rounded es:text-sm es:text-secondary-600 es:transition es:hover:bg-red-50 es:hover:text-red-900 es:any-focus:outline-hidden es:focus:ring-2 es:focus:ring-accent-500/50 es:disabled:text-secondary-300 es:cursor-pointer",
         isEmpty ? "es:hidden" : "es:flex"
       ),
       onPress: () => state == null ? void 0 : state.setSelectedKey(null),

package/dist/components/select/v2/shared.js

@@ -10,7 +10,7 @@ const OptionItemBase = (props) => {
       textValue: (_a = props == null ? void 0 : props.value) == null ? void 0 : _a.label,
       className: clsx(
         "es:flex es:min-h-9 es:select-none es:items-center es:gap-1 es:rounded es:p-2 es:transition",
-        "es:focus:outline-hidden",
+        "es:any-focus:outline-hidden",
         "es:hover:bg-secondary-100 es:hover:outline-hidden",
         "selected:es:bg-accent-600/15 selected:es:text-accent-950",
         "es:focus-visible:bg-secondary-100 es:focus-visible:outline-hidden",

package/dist/components/slider/column-config-slider.js

@@ -162,7 +162,7 @@ const ColumnConfigSlider = (props) => {
                         i === 0 && "es:translate-y-1/2! es:self-center es:justify-self-start",
                         i === 1 && "es:translate-x-full! es:translate-y-1/2! es:self-center es:justify-self-end",
                         "es:shadow dragging:es:bg-accent-600 es:disabled:opacity-0",
-                        "es:focus-visible:ring es:focus-visible:ring-accent-500/50",
+                        "es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
                         "es:border-accent-600 es:bg-accent-500 es:shadow-accent-600/50",
                         "es:hover:cursor-grab dragging:es:cursor-grabbing"
                       ),

package/dist/components/slider/slider.js

@@ -283,7 +283,7 @@ const Slider = (props) => {
                       "es:absolute es:size-3.5 es:rounded-full es:border es:transition es:duration-300",
                       vertical ? "es:translate-x-1/2!" : "es:translate-y-1/2!",
                       "es:shadow dragging:es:bg-accent-600 es:disabled:border-secondary-200 es:disabled:bg-secondary-100 es:disabled:shadow-none",
-                      "es:focus-visible:ring es:focus-visible:ring-accent-500/50",
+                      "es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
                       "es:border-accent-600 es:bg-accent-500 es:shadow-accent-600/50",
                       "es:hover:cursor-grab dragging:es:cursor-grabbing"
                     ),

package/dist/components/tabs/tabs.js

@@ -668,7 +668,7 @@ const TabPanel2 = (props) => {
     $5e8ad37a45e1c704$export$3d96ec278d3efce4,
     {
       ...other,
-      className: clsx("es:mt-1.5 es:space-y-2.5 es:text-sm es:focus:outline-hidden", className),
+      className: clsx("es:mt-1.5 es:space-y-2.5 es:text-sm es:any-focus:outline-hidden", className),
       children
     }
   );

package/dist/components/toggle/switch.js

@@ -111,22 +111,23 @@ const Switch2 = (props) => {
       isDisabled: disabled,
       isSelected: checked ?? false,
       onChange,
-      className: "es:group es:flex es:items-center es:justify-between es:gap-2",
+      className: "es:group es:flex es:items-center es:justify-between es:gap-2 es:any-focus:outline-hidden",
       children: [
         children,
         /* @__PURE__ */ jsx("div", { className: clsx("es:flex es:shrink-0 es:items-center es:justify-center", className), children: /* @__PURE__ */ jsx(
           "div",
           {
             className: clsx(
-              "es:shrink-0 es:cursor-pointer es:no-webkit-highlight",
+              "es:shrink-0 es:group-not-disabled:cursor-pointer es:no-webkit-highlight",
               "es:h-5 es:w-9 es:p-[0.1875rem] es:rounded-full",
-              "es:outline-hidden es:bg-radial-[circle_at_75%_50%]",
+              "es:bg-radial-[circle_at_75%_50%]",
               "es:border es:inset-ring es:inset-shadow-xs",
               "es:transition",
-              "es:group-focus-visible:ring-2 es:group-focus-visible:ring-accent-500/50 es:focus-visible:ring-3 es:shadow-xs",
-              !checked && "es:border-secondary-400 es:inset-ring-secondary-100 es:from-white es:to-secondary-100",
-              checked && "es:border-accent-700/75 es:inset-ring-accent-500 es:to-accent-500 es:from-accent-600 es:shadow-accent-600/30",
-              disabled && "es:cursor-default es:border-secondary-300 es:bg-white"
+              "es:group-focus-visible:ring-2 es:group-focus-visible:ring-accent-500/50 es:group-focus-visible:border-accent-600",
+              !checked && !disabled && "es:border-secondary-400 es:inset-ring-secondary-100 es:from-white es:to-secondary-100",
+              checked && !disabled && "es:border-accent-700/75 es:inset-ring-accent-500 es:to-accent-500 es:from-accent-600 es:shadow-accent-600/30",
+              disabled && "es:cursor-default es:border-secondary-300 es:from-white es:to-secondary-50 es:inset-ring-secondary-200/30 es:inset-shadow-secondary-100",
+              !disabled && "es:shadow-xs"
             ),
             children: /* @__PURE__ */ jsx(
               "span",
@@ -134,9 +135,11 @@ const Switch2 = (props) => {
                 className: clsx(
                   "es:block es:size-3 es:rounded-full es:border es:will-change-transform es:bg-radial",
                   "es:transition es:motion-ease-spring-snappy es:ease-[var(--motion-spring-snappy)]",
-                  !checked && "es:border-secondary-500 es:from-secondary-500 es:to-secondary-600 es:scale-95",
-                  checked && "es:translate-x-4 es:border-accent-600/20 es:from-white es:to-accent-500/30 es:from-40% es:bg-white es:shadow-xs es:shadow-accent-900/60",
-                  disabled && "es:border-secondary-300 es:bg-white",
+                  !checked && "es:scale-95",
+                  !checked && !disabled && "es:border-secondary-500 es:from-secondary-500 es:to-secondary-600",
+                  checked && "es:translate-x-4",
+                  checked && !disabled && "es:border-accent-600/20 es:from-white es:to-accent-500/30 es:from-40% es:bg-white es:shadow-xs es:shadow-accent-900/60",
+                  disabled && "es:border-secondary-400 es:bg-secondary-100",
                   isIndeterminate && "es:translate-x-2 es:scale-100"
                 )
               }

package/dist/components/tooltip/tooltip.js

@@ -427,8 +427,8 @@ const Tooltip2 = (props) => {
               "es:z-20 es:select-none es:rounded-md es:border es:px-1.5 es:py-0.5 es:text-sm es:shadow es:backdrop-blur-3xl es:will-change-[transform,opacity] es:fill-mode-forwards",
               theme === "light" && "es:border-secondary-200 es:bg-white/90 es:text-secondary-700",
               theme === "dark" && "es:border-secondary-600 es:bg-black/80 es:text-secondary-100",
-              isEntering && "es:motion-opacity-in es:motion-duration-300 es:motion-safe:data-[placement=left]:-motion-translate-x-in-25 es:motion-safe:data-[placement=right]:motion-translate-x-in-25 es:motion-safe:data-[placement=top]:motion-translate-y-in-25 es:motion-safe:data-[placement=bottom]:-motion-translate-y-in-25 es:motion-ease-spring-bouncier es:motion-ease-linear/opacity",
-              isExiting && "es:motion-opacity-out es:motion-duration-200 es:motion-safe:data-[placement=left]:motion-translate-x-out-[-12.5%] es:motion-safe:data-[placement=right]:motion-translate-x-out-[12.5%] es:motion-safe:data-[placement=top]:motion-translate-y-out-[12.5%] es:motion-safe:data-[placement=bottom]:motion-translate-y-out-[-12.5%] es:motion-ease-spring-bouncier es:motion-ease-linear/opacity",
+              isEntering && "es:motion-opacity-in es:motion-duration-300 es:motion-safe:data-[placement=left]:motion-translate-x-in-25 es:motion-safe:data-[placement=right]:-motion-translate-x-in-25 es:motion-safe:data-[placement=top]:motion-translate-y-in-25 es:motion-safe:data-[placement=bottom]:-motion-translate-y-in-25 es:motion-ease-spring-bouncier es:motion-ease-linear/opacity",
+              isExiting && "es:motion-opacity-out es:motion-duration-200 es:motion-safe:data-[placement=left]:motion-translate-x-out-[12.5%] es:motion-safe:data-[placement=right]:motion-translate-x-out-[-12.5%] es:motion-safe:data-[placement=top]:motion-translate-y-out-[12.5%] es:motion-safe:data-[placement=bottom]:motion-translate-y-out-[-12.5%] es:motion-ease-spring-bouncier es:motion-ease-linear/opacity",
               className
             ),
             children: [

package/dist/{multi-select-components-CkF3LyTF.js → multi-select-components-DJfz929p.js}

@@ -3704,7 +3704,7 @@ const getMultiValue = (ComponentToRender) => {
         style,
         ref: setNodeRef,
         className: clsx(
-          "es:focus:outline-hidden",
+          "es:any-focus:outline-hidden",
           // Make non-dragged tiles have no pointer events, so you don't see hover styles on things like the remove button.
           CSS.Translate.toString(transform) && "es:[&_>_div]:pointer-events-none",
           // Make the currently grabbed item into a fancy holo-like thing.

package/package.json

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