@eightshift/ui-components 5.4.0 → 5.5.0

package/dist/assets/style-admin.css

@@ -142,7 +142,6 @@
   --es-radius-7: .4375rem;
   --es-radius-10: .625rem;
   --es-aspect-3-2: 3 / 2;
-  --es-aspect-cinema: 21 / 9;
   --es-color-secondary-50: var(--es-color-zinc-50);
   --es-color-secondary-100: var(--es-color-zinc-100);
   --es-color-secondary-200: var(--es-color-zinc-200);
@@ -324,6 +323,7 @@
   --es-radius-2xl: 1rem;
   --es-radius-3xl: 1.5rem;
   --es-drop-shadow-sm: 0 1px 2px #00000026;
+  --es-animate-spin: spin 1s linear infinite;
   --es-blur-sm: 8px;
   --es-blur-md: 12px;
   --es-blur-lg: 16px;
@@ -1038,10 +1038,6 @@
   aspect-ratio: var(--es-aspect-3-2);
 }
 
-:is(body, body #wpwrap) .es\:aspect-cinema {
-  aspect-ratio: var(--es-aspect-cinema);
-}
-
 :is(body, body #wpwrap) .es\:aspect-video {
   aspect-ratio: var(--es-aspect-video);
 }
@@ -1631,6 +1627,13 @@
   animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation);
 }
 
+:is(body, body #wpwrap) .es\:motion-preset-fade {
+  --motion-origin-opacity: 0;
+  --motion-duration: .5s;
+  --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both;
+  animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation);
+}
+
 :is(body, body #wpwrap) .es\:motion-preset-spin {
   --motion-loop-rotate: 360deg;
   --motion-timing: linear;
@@ -1694,6 +1697,10 @@
   animation: var(--motion-scale-out-animation), var(--motion-translate-out-animation), var(--motion-rotate-out-animation), var(--motion-filter-out-animation), var(--motion-opacity-out-animation), var(--motion-background-color-out-animation), var(--motion-text-color-out-animation);
 }
 
+:is(body, body #wpwrap) .es\:animate-spin {
+  animation: var(--es-animate-spin);
+}
+
 :is(body, body #wpwrap) .es\:cursor-default {
   cursor: default;
 }
@@ -1782,6 +1789,10 @@
   grid-template-rows: auto auto;
 }
 
+:is(body, body #wpwrap) .es\:grid-rows-\[minmax\(0\,_1fr\)_auto\] {
+  grid-template-rows: minmax(0, 1fr) auto;
+}
+
 :is(body, body #wpwrap) .es\:flex-col {
   flex-direction: column;
 }
@@ -2163,6 +2174,11 @@
   border-width: 1px;
 }
 
+:is(body, body #wpwrap) .es\:border-4 {
+  border-style: var(--tw-border-style);
+  border-width: 4px;
+}
+
 :is(body, body #wpwrap) .es\:border-x {
   border-inline-style: var(--tw-border-style);
   border-inline-width: 1px;
@@ -2412,6 +2428,10 @@
   border-bottom-color: var(--es-color-secondary-200);
 }
 
+:is(body, body #wpwrap) .es\:bg-\(--es-img-dominant-color\) {
+  background-color: var(--es-img-dominant-color);
+}
+
 :is(body, body #wpwrap) .es\:bg-\[\#f1f1f1\] {
   background-color: #f1f1f1;
 }
@@ -3295,6 +3315,10 @@
   padding-top: calc(var(--es-spacing) * 2.25);
 }
 
+:is(body, body #wpwrap) .es\:pt-3 {
+  padding-top: calc(var(--es-spacing) * 3);
+}
+
 :is(body, body #wpwrap) .es\:pr-0 {
   padding-right: calc(var(--es-spacing) * 0);
 }
@@ -3347,6 +3371,10 @@
   padding-bottom: calc(var(--es-spacing) * 2.5);
 }
 
+:is(body, body #wpwrap) .es\:pb-3 {
+  padding-bottom: calc(var(--es-spacing) * 3);
+}
+
 :is(body, body #wpwrap) .es\:pb-3\.5 {
   padding-bottom: calc(var(--es-spacing) * 3.5);
 }
@@ -4333,6 +4361,11 @@
   transition-duration: .3s;
 }
 
+:is(body, body #wpwrap) .es\:duration-3000 {
+  --tw-duration: 3s;
+  transition-duration: 3s;
+}
+
 :is(body, body #wpwrap) .es\:ease-\[var\(--motion-spring-bouncy\)\] {
   --tw-ease: var(--motion-spring-bouncy);
   transition-timing-function: var(--motion-spring-bouncy);
@@ -5015,11 +5048,6 @@
   display: none;
 }
 
-:is(body, body #wpwrap) .es\:focus-within\:translate-y-0:where([data-rac])[data-focus-within], :is(body, body #wpwrap) .es\:focus-within\:translate-y-0:where(:not([data-rac])):focus-within {
-  --tw-translate-y: calc(var(--es-spacing) * 0);
-  translate: var(--tw-translate-x) var(--tw-translate-y);
-}
-
 :is(body, body #wpwrap) .es\:focus-within\:shadow-md:where([data-rac])[data-focus-within], :is(body, body #wpwrap) .es\:focus-within\:shadow-md:where(:not([data-rac])):focus-within {
   --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -6568,6 +6596,11 @@
   }
 }
 
+:is(body, body #wpwrap) .es\:has-focus-visible\:translate-y-0:has(:is(:focus-visible:not(:focus), [data-rac][data-focus-visible])), :is(body, body #wpwrap) .es\:has-aria-expanded\:translate-y-0:has([aria-expanded="true"]) {
+  --tw-translate-y: calc(var(--es-spacing) * 0);
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+}
+
 :is(body, body #wpwrap) .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);
@@ -8245,3 +8278,9 @@
   inherits: false;
   initial-value: "";
 }
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/assets/style-editor.css

@@ -142,7 +142,6 @@
   --es-radius-7: .4375rem;
   --es-radius-10: .625rem;
   --es-aspect-3-2: 3 / 2;
-  --es-aspect-cinema: 21 / 9;
   --es-color-secondary-50: var(--es-color-zinc-50);
   --es-color-secondary-100: var(--es-color-zinc-100);
   --es-color-secondary-200: var(--es-color-zinc-200);
@@ -324,6 +323,7 @@
   --es-radius-2xl: 1rem;
   --es-radius-3xl: 1.5rem;
   --es-drop-shadow-sm: 0 1px 2px #00000026;
+  --es-animate-spin: spin 1s linear infinite;
   --es-blur-sm: 8px;
   --es-blur-md: 12px;
   --es-blur-lg: 16px;
@@ -1038,10 +1038,6 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   aspect-ratio: var(--es-aspect-3-2);
 }
 
-:is(body, #wpwrap #editor) .es\:aspect-cinema {
-  aspect-ratio: var(--es-aspect-cinema);
-}
-
 :is(body, #wpwrap #editor) .es\:aspect-video {
   aspect-ratio: var(--es-aspect-video);
 }
@@ -1631,6 +1627,13 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation);
 }
 
+:is(body, #wpwrap #editor) .es\:motion-preset-fade {
+  --motion-origin-opacity: 0;
+  --motion-duration: .5s;
+  --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both;
+  animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation);
+}
+
 :is(body, #wpwrap #editor) .es\:motion-preset-spin {
   --motion-loop-rotate: 360deg;
   --motion-timing: linear;
@@ -1694,6 +1697,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   animation: var(--motion-scale-out-animation), var(--motion-translate-out-animation), var(--motion-rotate-out-animation), var(--motion-filter-out-animation), var(--motion-opacity-out-animation), var(--motion-background-color-out-animation), var(--motion-text-color-out-animation);
 }
 
+:is(body, #wpwrap #editor) .es\:animate-spin {
+  animation: var(--es-animate-spin);
+}
+
 :is(body, #wpwrap #editor) .es\:cursor-default {
   cursor: default;
 }
@@ -1782,6 +1789,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   grid-template-rows: auto auto;
 }
 
+:is(body, #wpwrap #editor) .es\:grid-rows-\[minmax\(0\,_1fr\)_auto\] {
+  grid-template-rows: minmax(0, 1fr) auto;
+}
+
 :is(body, #wpwrap #editor) .es\:flex-col {
   flex-direction: column;
 }
@@ -2163,6 +2174,11 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   border-width: 1px;
 }
 
+:is(body, #wpwrap #editor) .es\:border-4 {
+  border-style: var(--tw-border-style);
+  border-width: 4px;
+}
+
 :is(body, #wpwrap #editor) .es\:border-x {
   border-inline-style: var(--tw-border-style);
   border-inline-width: 1px;
@@ -2412,6 +2428,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   border-bottom-color: var(--es-color-secondary-200);
 }
 
+:is(body, #wpwrap #editor) .es\:bg-\(--es-img-dominant-color\) {
+  background-color: var(--es-img-dominant-color);
+}
+
 :is(body, #wpwrap #editor) .es\:bg-\[\#f1f1f1\] {
   background-color: #f1f1f1;
 }
@@ -3295,6 +3315,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   padding-top: calc(var(--es-spacing) * 2.25);
 }
 
+:is(body, #wpwrap #editor) .es\:pt-3 {
+  padding-top: calc(var(--es-spacing) * 3);
+}
+
 :is(body, #wpwrap #editor) .es\:pr-0 {
   padding-right: calc(var(--es-spacing) * 0);
 }
@@ -3347,6 +3371,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   padding-bottom: calc(var(--es-spacing) * 2.5);
 }
 
+:is(body, #wpwrap #editor) .es\:pb-3 {
+  padding-bottom: calc(var(--es-spacing) * 3);
+}
+
 :is(body, #wpwrap #editor) .es\:pb-3\.5 {
   padding-bottom: calc(var(--es-spacing) * 3.5);
 }
@@ -4333,6 +4361,11 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   transition-duration: .3s;
 }
 
+:is(body, #wpwrap #editor) .es\:duration-3000 {
+  --tw-duration: 3s;
+  transition-duration: 3s;
+}
+
 :is(body, #wpwrap #editor) .es\:ease-\[var\(--motion-spring-bouncy\)\] {
   --tw-ease: var(--motion-spring-bouncy);
   transition-timing-function: var(--motion-spring-bouncy);
@@ -5015,11 +5048,6 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   display: none;
 }
 
-:is(body, #wpwrap #editor) .es\:focus-within\:translate-y-0:where([data-rac])[data-focus-within], :is(body, #wpwrap #editor) .es\:focus-within\:translate-y-0:where(:not([data-rac])):focus-within {
-  --tw-translate-y: calc(var(--es-spacing) * 0);
-  translate: var(--tw-translate-x) var(--tw-translate-y);
-}
-
 :is(body, #wpwrap #editor) .es\:focus-within\:shadow-md:where([data-rac])[data-focus-within], :is(body, #wpwrap #editor) .es\:focus-within\:shadow-md:where(:not([data-rac])):focus-within {
   --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -6568,6 +6596,11 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   }
 }
 
+:is(body, #wpwrap #editor) .es\:has-focus-visible\:translate-y-0:has(:is(:focus-visible:not(:focus), [data-rac][data-focus-visible])), :is(body, #wpwrap #editor) .es\:has-aria-expanded\:translate-y-0:has([aria-expanded="true"]) {
+  --tw-translate-y: calc(var(--es-spacing) * 0);
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+}
+
 :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);
@@ -8245,3 +8278,9 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   inherits: false;
   initial-value: "";
 }
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/assets/style.css

@@ -142,7 +142,6 @@
   --es-radius-7: .4375rem;
   --es-radius-10: .625rem;
   --es-aspect-3-2: 3 / 2;
-  --es-aspect-cinema: 21 / 9;
   --es-color-secondary-50: var(--es-color-zinc-50);
   --es-color-secondary-100: var(--es-color-zinc-100);
   --es-color-secondary-200: var(--es-color-zinc-200);
@@ -324,6 +323,7 @@
   --es-radius-2xl: 1rem;
   --es-radius-3xl: 1.5rem;
   --es-drop-shadow-sm: 0 1px 2px #00000026;
+  --es-animate-spin: spin 1s linear infinite;
   --es-blur-sm: 8px;
   --es-blur-md: 12px;
   --es-blur-lg: 16px;
@@ -1523,10 +1523,6 @@
     aspect-ratio: var(--es-aspect-3-2);
   }
 
-  .es\:aspect-cinema {
-    aspect-ratio: var(--es-aspect-cinema);
-  }
-
   .es\:aspect-video {
     aspect-ratio: var(--es-aspect-video);
   }
@@ -2116,6 +2112,13 @@
     animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation);
   }
 
+  .es\:motion-preset-fade {
+    --motion-origin-opacity: 0;
+    --motion-duration: .5s;
+    --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both;
+    animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation);
+  }
+
   .es\:motion-preset-spin {
     --motion-loop-rotate: 360deg;
     --motion-timing: linear;
@@ -2179,6 +2182,10 @@
     animation: var(--motion-scale-out-animation), var(--motion-translate-out-animation), var(--motion-rotate-out-animation), var(--motion-filter-out-animation), var(--motion-opacity-out-animation), var(--motion-background-color-out-animation), var(--motion-text-color-out-animation);
   }
 
+  .es\:animate-spin {
+    animation: var(--es-animate-spin);
+  }
+
   .es\:cursor-default {
     cursor: default;
   }
@@ -2267,6 +2274,10 @@
     grid-template-rows: auto auto;
   }
 
+  .es\:grid-rows-\[minmax\(0\,_1fr\)_auto\] {
+    grid-template-rows: minmax(0, 1fr) auto;
+  }
+
   .es\:flex-col {
     flex-direction: column;
   }
@@ -2648,6 +2659,11 @@
     border-width: 1px;
   }
 
+  .es\:border-4 {
+    border-style: var(--tw-border-style);
+    border-width: 4px;
+  }
+
   .es\:border-x {
     border-inline-style: var(--tw-border-style);
     border-inline-width: 1px;
@@ -2897,6 +2913,10 @@
     border-bottom-color: var(--es-color-secondary-200);
   }
 
+  .es\:bg-\(--es-img-dominant-color\) {
+    background-color: var(--es-img-dominant-color);
+  }
+
   .es\:bg-\[\#f1f1f1\] {
     background-color: #f1f1f1;
   }
@@ -3780,6 +3800,10 @@
     padding-top: calc(var(--es-spacing) * 2.25);
   }
 
+  .es\:pt-3 {
+    padding-top: calc(var(--es-spacing) * 3);
+  }
+
   .es\:pr-0 {
     padding-right: calc(var(--es-spacing) * 0);
   }
@@ -3832,6 +3856,10 @@
     padding-bottom: calc(var(--es-spacing) * 2.5);
   }
 
+  .es\:pb-3 {
+    padding-bottom: calc(var(--es-spacing) * 3);
+  }
+
   .es\:pb-3\.5 {
     padding-bottom: calc(var(--es-spacing) * 3.5);
   }
@@ -4818,6 +4846,11 @@
     transition-duration: .3s;
   }
 
+  .es\:duration-3000 {
+    --tw-duration: 3s;
+    transition-duration: 3s;
+  }
+
   .es\:ease-\[var\(--motion-spring-bouncy\)\] {
     --tw-ease: var(--motion-spring-bouncy);
     transition-timing-function: var(--motion-spring-bouncy);
@@ -5500,11 +5533,6 @@
     display: none;
   }
 
-  .es\:focus-within\:translate-y-0:where([data-rac])[data-focus-within], .es\:focus-within\:translate-y-0:where(:not([data-rac])):focus-within {
-    --tw-translate-y: calc(var(--es-spacing) * 0);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-
   .es\:focus-within\:shadow-md:where([data-rac])[data-focus-within], .es\:focus-within\:shadow-md:where(:not([data-rac])):focus-within {
     --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -7053,6 +7081,11 @@
     }
   }
 
+  .es\:has-focus-visible\:translate-y-0:has(:is(:focus-visible:not(:focus), [data-rac][data-focus-visible])), .es\:has-aria-expanded\:translate-y-0:has([aria-expanded="true"]) {
+    --tw-translate-y: calc(var(--es-spacing) * 0);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
   .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);
@@ -8251,3 +8284,9 @@
   inherits: false;
   initial-value: "";
 }
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/components/index.js

@@ -50,6 +50,7 @@ import { OptionSelect } from "./option-select/option-select.js";
 import { OptionsPanel, OptionsPanelHeader, OptionsPanelIntro, OptionsPanelSection } from "./options-panel/options-panel.js";
 import { Select } from "./select/single-select.js";
 import { Slider } from "./slider/slider.js";
+import { SmartImage } from "./smart-image/smart-image.js";
 import { SolidColorPicker } from "./color-pickers/solid-color-picker.js";
 import { Spacer } from "./spacer/spacer.js";
 import { Tab, TabList, TabPanel, Tabs } from "./tabs/tabs.js";
@@ -128,6 +129,7 @@ export {
   Select,
   SelectNext,
   Slider,
+  SmartImage,
   SolidColorPicker,
   Spacer,
   SubMenuItem,

package/dist/components/placeholders/file-picker-shell.js

@@ -1,16 +1,16 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { icons } from "../../icons/icons.js";
-import "react";
+import { cloneElement } from "react";
 import "../../react-jsx-parser.min-VUl-CuCv.js";
 import { truncateMiddle } from "../../utilities/text-helpers.js";
+import { SmartImage } from "../smart-image/smart-image.js";
 /**
  * A shell for a file picker UI, handling both rich visual presentation (e.g. images) and simple file placeholders.
  *
  * @component
  * @param {Object} props - Component props.
  * @param {string} [props.url] - Current file URL.
- * @param {string} [props.fileName] - Current file name.
  * @param {ShellType} [props.type='file'] - File type icon override.
  * @param {JSX.Element} [props.icon] - Icon to display within the button.
  * @param {string} [props.className] - Classes to pass to the component.
@@ -24,9 +24,8 @@ import { truncateMiddle } from "../../utilities/text-helpers.js";
  * @example
  * <FilePickerShell
  *     className='es:w-full'
- *     url='#'
+ *     url='myfile.json'
  *     noUrlContent={<Button size='large'>Upload</Button>}
- *     fileName='myfile.json'
  * >
  *     <Button flat>Replace</Button>
  *     <Button flat>Remove</Button>
@@ -48,7 +47,6 @@ import { truncateMiddle } from "../../utilities/text-helpers.js";
 const FilePickerShell = (props) => {
   const {
     url,
-    fileName,
     type = "file",
     icon = icons.file,
     children,
@@ -59,41 +57,71 @@ const FilePickerShell = (props) => {
   if (hidden) {
     return null;
   }
-  const fullSizeVisual = type === "image";
-  return /* @__PURE__ */ jsxs(
-    "div",
+  if (!url) {
+    return noUrlContent && /* @__PURE__ */ jsx("div", { className: clsx("es:grid es:auto-cols-fr es:grid-flow-col es:gap-2 es:p-px es:w-full"), children: noUrlContent });
+  }
+  if (type !== "image") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx(
+          "es:border es:border-secondary-200 es:bg-white es:flex es:justify-between es:rounded-2xl es:isolate es:relative es:flex-col es:gap-2 es:overflow-clip es:aspect-3-2 es:group es:p-2",
+          className
+        ),
+        children: [
+          type === "file" && /* @__PURE__ */ jsxs("div", { className: "es:grow es:flex es:flex-col es:gap-2 es:text-sm es:items-center-safe es:justify-center-safe es:font-mono es:icon:size-6 es:rounded-xl es:bg-secondary-50 es:inset-ring es:inset-ring-secondary-100 es:icon:text-secondary-500", children: [
+            icon,
+            /* @__PURE__ */ jsx("span", { className: "es:line-clamp-1", children: truncateMiddle(url, 34) })
+          ] }),
+          children && /* @__PURE__ */ jsx("div", { className: "es:flex es:items-center-safe es:gap-2", children })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    SmartImage,
     {
-      className: clsx(
-        url && "es:border es:border-secondary-300 es:bg-white es:flex es:justify-between es:rounded-2xl es:isolate es:relative es:flex-col es:gap-2 es:overflow-clip",
-        fullSizeVisual && url && "es:aspect-3-2 es:group",
-        !fullSizeVisual && url && "es:p-2 es:aspect-cinema",
-        className
+      src: url,
+      alt: "",
+      className: ({ hasAnalysed, isTransparent, transparencyInfo }) => clsx(
+        hasAnalysed && transparencyInfo?.left && url && "es:pl-3",
+        hasAnalysed && transparencyInfo?.right && url && "es:pr-3",
+        hasAnalysed && transparencyInfo?.top && url && "es:pt-3",
+        hasAnalysed && transparencyInfo?.bottom && url && "es:pb-3",
+        hasAnalysed && isTransparent && "es:bg-white/60 es:object-contain es:mx-auto",
+        hasAnalysed && isTransparent && (transparencyInfo?.left || transparencyInfo?.right) && "es:w-full",
+        hasAnalysed && isTransparent && (transparencyInfo?.top || transparencyInfo?.bottom) && "es:h-full",
+        hasAnalysed && !isTransparent && "es:w-full es:aspect-3-2 es:object-cover",
+        hasAnalysed && "es:grow es:rounded-xl"
       ),
-      children: [
-        type === "image" && url && /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: url,
-            alt: "",
-            className: "es:size-full es:grow es:rounded-xl"
-          }
-        ),
-        type === "file" && url && /* @__PURE__ */ jsxs("div", { className: "es:grow es:flex es:flex-col es:gap-2 es:text-sm es:items-center-safe es:justify-center-safe es:font-mono es:icon:size-6 es:rounded-xl es:bg-secondary-50 es:inset-ring es:inset-ring-secondary-100 es:icon:text-secondary-500", children: [
-          icon,
-          /* @__PURE__ */ jsx("span", { className: "es:line-clamp-1", children: truncateMiddle(fileName, 34) })
-        ] }),
-        url && children && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: clsx(
-              "es:grid es:auto-cols-fr es:grid-flow-col es:gap-2",
-              fullSizeVisual && "es:absolute es:bottom-2 es:left-2 es:right-2 es:translate-y-[125%] es:group-hover:translate-y-0 es:focus-within:translate-y-0 es:transition-transform es:ease-spring-smooth"
-            ),
-            children
-          }
-        ),
-        !url && noUrlContent && /* @__PURE__ */ jsx("div", { className: clsx("es:grid es:auto-cols-fr es:grid-flow-col es:gap-2 es:p-px es:w-full"), children: noUrlContent })
-      ]
+      errorClassName: "es:aspect-3-2 es:rounded-2xl es:bg-gradient-to-br es:from-secondary-50 es:to-secondary-100 es:border es:border-secondary-200",
+      imageAnalysisSettings: { yFrom: 0.25, yTo: 0.75 },
+      children: ({ image, dominantColors, isDark, hasAnalysed, isTransparent }) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: clsx(
+            "es:border es:border-secondary-200 es:justify-between es:rounded-2xl es:isolate es:relative es:flex-col es:gap-y-2 es:grid es:grid-cols-1 es:overflow-clip es:aspect-3-2 es:transition",
+            hasAnalysed && !isTransparent && "es:group es:grid-rows-1",
+            hasAnalysed && isTransparent && "es:p-2 es:grid-rows-[minmax(0,_1fr)_auto] es:h-fit",
+            className
+          ),
+          style: hasAnalysed && isTransparent ? { backgroundColor: `color-mix(in srgb, ${dominantColors[0]?.color || "#ffffff"} ${dominantColors[0]?.isDark ? 10 : 80}%, #ffffff)` } : {},
+          children: [
+            image,
+            !hasAnalysed && cloneElement(icons.loader, { className: "es:animate-spin es:size-8 es:text-accent-600 es:m-auto es:duration-3000" }),
+            hasAnalysed && children && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: clsx(
+                  "es:flex es:items-center-safe es:gap-2",
+                  !isTransparent && "es:absolute es:bottom-2 es:left-2 es:right-2 es:translate-y-[125%] es:group-hover:translate-y-0 es:has-aria-expanded:translate-y-0 es:has-focus-visible:translate-y-0 es:transition-transform es:ease-spring-smooth"
+                ),
+                children: typeof children === "function" ? children({ dominantColors, isDark, isTransparent }) : children
+              }
+            )
+          ]
+        }
+      )
     }
   );
 };