@eightshift/ui-components 5.1.4 → 5.2.0

package/dist/assets/style-editor.css

@@ -850,6 +850,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   margin: calc(var(--es-spacing) * .5);
 }
 
+:is(body, #wpwrap #editor) .es\:m-1 {
+  margin: calc(var(--es-spacing) * 1);
+}
+
 :is(body, #wpwrap #editor) .es\:m-2 {
   margin: calc(var(--es-spacing) * 2);
 }
@@ -886,8 +890,8 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   margin-block: calc(var(--es-spacing) * 1);
 }
 
-:is(body, #wpwrap #editor) .es\:my-10 {
-  margin-block: calc(var(--es-spacing) * 10);
+:is(body, #wpwrap #editor) .es\:my-5 {
+  margin-block: calc(var(--es-spacing) * 5);
 }
 
 :is(body, #wpwrap #editor) .es\:my-auto {
@@ -1150,6 +1154,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   height: calc(var(--es-spacing) * 5);
 }
 
+:is(body, #wpwrap #editor) .es\:h-5\.5 {
+  height: var(--es-spacing-5_5);
+}
+
 :is(body, #wpwrap #editor) .es\:h-6 {
   height: calc(var(--es-spacing) * 6);
 }
@@ -1270,6 +1278,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   width: calc(var(--es-spacing) * .5);
 }
 
+:is(body, #wpwrap #editor) .es\:w-0\.75 {
+  width: calc(var(--es-spacing) * .75);
+}
+
 :is(body, #wpwrap #editor) .es\:w-1 {
   width: calc(var(--es-spacing) * 1);
 }
@@ -1510,6 +1522,11 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }
 
+:is(body, #wpwrap #editor) .es\:translate-x-7 {
+  --tw-translate-x: calc(var(--es-spacing) * 7);
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+}
+
 :is(body, #wpwrap #editor) .es\:translate-x-full\! {
   --tw-translate-x: 100% !important;
   translate: var(--tw-translate-x) var(--tw-translate-y) !important;
@@ -1525,6 +1542,11 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   translate: var(--tw-translate-x) var(--tw-translate-y) !important;
 }
 
+:is(body, #wpwrap #editor) .es\:translate-y-6 {
+  --tw-translate-y: calc(var(--es-spacing) * 6);
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+}
+
 :is(body, #wpwrap #editor) .es\:translate-y-px {
   --tw-translate-y: 1px;
   translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1644,6 +1666,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   cursor: grabbing;
 }
 
+:is(body, #wpwrap #editor) .es\:cursor-move {
+  cursor: move;
+}
+
 :is(body, #wpwrap #editor) .es\:cursor-pointer {
   cursor: pointer;
 }
@@ -1768,6 +1794,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   gap: calc(var(--es-spacing) * .5);
 }
 
+:is(body, #wpwrap #editor) .es\:gap-0\.75 {
+  gap: calc(var(--es-spacing) * .75);
+}
+
 :is(body, #wpwrap #editor) .es\:gap-1 {
   gap: calc(var(--es-spacing) * 1);
 }
@@ -2357,7 +2387,7 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   }
 }
 
-:is(body, #wpwrap #editor) .es\:bg-accent-700\/25 {
+:is(body, #wpwrap #editor) .es\:bg-accent-700, :is(body, #wpwrap #editor) .es\:bg-accent-700\/25 {
   background-color: var(--es-color-accent-700);
 }
 
@@ -2367,6 +2397,16 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   }
 }
 
+:is(body, #wpwrap #editor) .es\:bg-accent-700\/30 {
+  background-color: var(--es-color-accent-700);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :is(body, #wpwrap #editor) .es\:bg-accent-700\/30 {
+    background-color: color-mix(in oklab, var(--es-color-accent-700) 30%, transparent);
+  }
+}
+
 :is(body, #wpwrap #editor) .es\:bg-black, :is(body, #wpwrap #editor) .es\:bg-black\/30 {
   background-color: var(--es-color-black);
 }
@@ -2979,6 +3019,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   padding-block: calc(var(--es-spacing) * .25);
 }
 
+:is(body, #wpwrap #editor) .es\:py-0\.75 {
+  padding-block: calc(var(--es-spacing) * .75);
+}
+
 :is(body, #wpwrap #editor) .es\:py-1 {
   padding-block: calc(var(--es-spacing) * 1);
 }
@@ -3083,6 +3127,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   padding-bottom: calc(var(--es-spacing) * 4);
 }
 
+:is(body, #wpwrap #editor) .es\:pl-0\.75 {
+  padding-left: calc(var(--es-spacing) * .75);
+}
+
 :is(body, #wpwrap #editor) .es\:pl-1 {
   padding-left: calc(var(--es-spacing) * 1);
 }
@@ -3797,6 +3845,16 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   }
 }
 
+:is(body, #wpwrap #editor) .es\:inset-ring-secondary-200\/30 {
+  --tw-inset-ring-color: var(--es-color-secondary-200);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :is(body, #wpwrap #editor) .es\:inset-ring-secondary-200\/30 {
+    --tw-inset-ring-color: color-mix(in oklab, var(--es-color-secondary-200) 30%, transparent);
+  }
+}
+
 :is(body, #wpwrap #editor) .es\:outline-hidden {
   --tw-outline-style: none;
   outline-style: none;
@@ -4322,6 +4380,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   opacity: 0;
 }
 
+:is(body, #wpwrap #editor) .es\:peer-has-dragging\:hidden:is(:where(.es\:peer):has([data-dragging]) ~ *) {
+  display: none;
+}
+
 :is(body, #wpwrap #editor) .es\:selection\:bg-accent-500\/20 ::selection {
   background-color: var(--es-color-accent-500);
 }
@@ -4857,6 +4919,42 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   }
 }
 
+:is(body, #wpwrap #editor) .es\:not-selected\:hover\:bg-secondary-100:not([data-selected]):where([data-rac])[data-hovered] {
+  background-color: var(--es-color-secondary-100);
+}
+
+@media (hover: hover) {
+  :is(body, #wpwrap #editor) .es\:not-selected\:hover\:bg-secondary-100:not([data-selected]):where(:not([data-rac])):hover {
+    background-color: var(--es-color-secondary-100);
+  }
+}
+
+:is(body, #wpwrap #editor) .es\:not-selected\:hover\:outline-hidden:not([data-selected]):where([data-rac])[data-hovered] {
+  --tw-outline-style: none;
+  outline-style: none;
+}
+
+@media (forced-colors: active) {
+  :is(body, #wpwrap #editor) .es\:not-selected\:hover\:outline-hidden:not([data-selected]):where([data-rac])[data-hovered] {
+    outline-offset: 2px;
+    outline: 2px solid #0000;
+  }
+}
+
+@media (hover: hover) {
+  :is(body, #wpwrap #editor) .es\:not-selected\:hover\:outline-hidden:not([data-selected]):where(:not([data-rac])):hover {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+
+  @media (forced-colors: active) {
+    :is(body, #wpwrap #editor) .es\:not-selected\:hover\:outline-hidden:not([data-selected]):where(:not([data-rac])):hover {
+      outline-offset: 2px;
+      outline: 2px solid #0000;
+    }
+  }
+}
+
 :is(body, #wpwrap #editor) .es\:not-disabled\:not-selected\:hover\:bg-secondary-100:not(:is(:disabled, [data-rac][data-disabled])):not([data-selected]):where([data-rac])[data-hovered] {
   background-color: var(--es-color-secondary-100);
 }
@@ -4987,6 +5085,30 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   }
 }
 
+:is(body, #wpwrap #editor) .es\:focus\:outline-hidden:where([data-rac])[data-focused] {
+  --tw-outline-style: none;
+  outline-style: none;
+}
+
+@media (forced-colors: active) {
+  :is(body, #wpwrap #editor) .es\:focus\:outline-hidden:where([data-rac])[data-focused] {
+    outline-offset: 2px;
+    outline: 2px solid #0000;
+  }
+}
+
+:is(body, #wpwrap #editor) .es\:focus\:outline-hidden:where(:not([data-rac])):focus {
+  --tw-outline-style: none;
+  outline-style: none;
+}
+
+@media (forced-colors: active) {
+  :is(body, #wpwrap #editor) .es\:focus\:outline-hidden:where(:not([data-rac])):focus {
+    outline-offset: 2px;
+    outline: 2px solid #0000;
+  }
+}
+
 :is(body, #wpwrap #editor) .es\:not-readonly\:focus\:shadow-md:not(:where([data-readonly], [readonly])):where([data-rac])[data-focused], :is(body, #wpwrap #editor) .es\:not-readonly\:focus\:shadow-md:not(:where([data-readonly], [readonly])):where(:not([data-rac])):focus {
   --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -5091,6 +5213,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   --tw-inset-ring-color: var(--es-color-accent-100);
 }
 
+:is(body, #wpwrap #editor) .es\:focus-visible\:inset-ring-accent-500:is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) {
+  --tw-inset-ring-color: var(--es-color-accent-500);
+}
+
 :is(body, #wpwrap #editor) .es\:focus-visible\:inset-ring-accent-600:is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) {
   --tw-inset-ring-color: var(--es-color-accent-600);
 }
@@ -5121,6 +5247,22 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   }
 }
 
+:is(body, #wpwrap #editor) .es\:not-selected\:focus-visible\:bg-secondary-100:not([data-selected]):is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) {
+  background-color: var(--es-color-secondary-100);
+}
+
+:is(body, #wpwrap #editor) .es\:not-selected\:focus-visible\:outline-hidden:not([data-selected]):is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) {
+  --tw-outline-style: none;
+  outline-style: none;
+}
+
+@media (forced-colors: active) {
+  :is(body, #wpwrap #editor) .es\:not-selected\:focus-visible\:outline-hidden:not([data-selected]):is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) {
+    outline-offset: 2px;
+    outline: 2px solid #0000;
+  }
+}
+
 :is(body, #wpwrap #editor) .es\:active\:border-accent-500\/30:active {
   border-color: var(--es-color-accent-500);
 }
@@ -5390,6 +5532,21 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   }
 }
 
+:is(body, #wpwrap #editor) .es\:has-dragging\:inset-ring-1:has([data-dragging]) {
+  --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentcolor);
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+
+:is(body, #wpwrap #editor) .es\:has-dragging\:inset-ring-accent-500\/10:has([data-dragging]) {
+  --tw-inset-ring-color: var(--es-color-accent-500);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :is(body, #wpwrap #editor) .es\:has-dragging\:inset-ring-accent-500\/10:has([data-dragging]) {
+    --tw-inset-ring-color: color-mix(in oklab, var(--es-color-accent-500) 10%, transparent);
+  }
+}
+
 :is(body, #wpwrap #editor) .es\:has-icon\:pl-1:has(* > svg) {
   padding-left: calc(var(--es-spacing) * 1);
 }
@@ -5740,6 +5897,16 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   }
 }
 
+:is(body, #wpwrap #editor) .es\:selected\:bg-accent-600\/15[data-selected] {
+  background-color: var(--es-color-accent-600);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :is(body, #wpwrap #editor) .es\:selected\:bg-accent-600\/15[data-selected] {
+    background-color: color-mix(in oklab, var(--es-color-accent-600) 15%, transparent);
+  }
+}
+
 :is(body, #wpwrap #editor) .es\:selected\:bg-gradient-to-br[data-selected] {
   --tw-gradient-position: to bottom right in oklab;
   background-image: linear-gradient(var(--tw-gradient-stops));
@@ -5842,6 +6009,21 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   }
 }
 
+:is(body, #wpwrap #editor) .es\:selected\:focus-visible\:inset-ring[data-selected]:is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) {
+  --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentcolor);
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+
+:is(body, #wpwrap #editor) .es\:selected\:focus-visible\:inset-ring-accent-600\/30[data-selected]:is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) {
+  --tw-inset-ring-color: var(--es-color-accent-600);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :is(body, #wpwrap #editor) .es\:selected\:focus-visible\:inset-ring-accent-600\/30[data-selected]:is(:focus-visible:not(:focus), [data-rac][data-focus-visible]) {
+    --tw-inset-ring-color: color-mix(in oklab, var(--es-color-accent-600) 30%, transparent);
+  }
+}
+
 :is(body, #wpwrap #editor) .es\:dragging\:scale-110\![data-dragging] {
   --tw-scale-x: 110% !important;
   --tw-scale-y: 110% !important;
@@ -5849,6 +6031,43 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   scale: var(--tw-scale-x) var(--tw-scale-y) !important;
 }
 
+:is(body, #wpwrap #editor) .es\:dragging\:cursor-grabbing[data-dragging] {
+  cursor: grabbing;
+}
+
+:is(body, #wpwrap #editor) .es\:dragging\:bg-transparent[data-dragging] {
+  background-color: #0000;
+}
+
+:is(body, #wpwrap #editor) .es\:dragging\:text-accent-600\/40[data-dragging] {
+  color: var(--es-color-accent-600);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :is(body, #wpwrap #editor) .es\:dragging\:text-accent-600\/40[data-dragging] {
+    color: color-mix(in oklab, var(--es-color-accent-600) 40%, transparent);
+  }
+}
+
+:is(body, #wpwrap #editor) .es\:dragging\:inset-ring-accent-600\/20[data-dragging] {
+  --tw-inset-ring-color: var(--es-color-accent-600);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :is(body, #wpwrap #editor) .es\:dragging\:inset-ring-accent-600\/20[data-dragging] {
+    --tw-inset-ring-color: color-mix(in oklab, var(--es-color-accent-600) 20%, transparent);
+  }
+}
+
+:is(body, #wpwrap #editor) .es\:drop-target\:bg-accent-600[data-drop-target] {
+  background-color: var(--es-color-accent-600);
+}
+
+:is(body, #wpwrap #editor) .es\:any-focus\:inset-ring-0:is(:focus-visible, [data-rac][data-focus-visible], :focus, [data-rac][data-focused]) {
+  --tw-inset-ring-shadow: inset 0 0 0 0px var(--tw-inset-ring-color, currentcolor);
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+
 :is(body, #wpwrap #editor) .es\:any-focus\:outline-hidden:is(:focus-visible, [data-rac][data-focus-visible], :focus, [data-rac][data-focused]) {
   --tw-outline-style: none;
   outline-style: none;
@@ -5938,6 +6157,11 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   height: .8rem;
 }
 
+:is(body, #wpwrap #editor) .es\:icon\:size-\[1em\] > svg {
+  width: 1em;
+  height: 1em;
+}
+
 :is(body, #wpwrap #editor) .es\:icon\:size-full > svg {
   width: 100%;
   height: 100%;