@orangelogic/design-system 2.128.0 → 2.130.0

package/library/chunks/{image.CDrKFe1H.js → image.BC_hwk-b.js}

@@ -1,145 +1,146 @@
-import { r as xe, R as we, H as Y, a as ee, b as Ee } from "./resizable-component.styles.DpK0TTP5.js";
-import { c as Ce } from "./component.styles.CRO4Odto.js";
-import { a as ke } from "./index.Cpamj0jB.js";
-import { c as Le } from "./custom-element.L4WJXn1j.js";
+import { r as we, R as Ee, H as Y, a as te, b as Ce } from "./resizable-component.styles.BVhOesNE.js";
+import { c as ke } from "./component.styles.CRO4Odto.js";
+import { a as Le } from "./index.Cpamj0jB.js";
+import { c as Re } from "./custom-element.L4WJXn1j.js";
 import { d as Se } from "./debounce.DaHuiSGU.js";
-import { L as He } from "./i18n.NAH4U8Lw.js";
+import { L as $e } from "./i18n.NAH4U8Lw.js";
 import { w as Z } from "./watch.CThbualB.js";
-import { i as oe, x as k, E as $e } from "./lit-element.jLBm65_O.js";
+import { i as re, E as V, x as E } from "./lit-element.jLBm65_O.js";
 import { n as y } from "./lib-cortex-element.CVMmyPMC.js";
-import { r as H } from "./state.CSDxrqLd.js";
-import { e as K } from "./query.BBf1UFkC.js";
-import { e as L } from "./class-map.BiVq-cVR.js";
-import { o as V } from "./if-defined.BRoBj_Rp.js";
-import { i as Re } from "./keyed.C0rkKrxH.js";
+import { r as k } from "./state.CSDxrqLd.js";
+import { e as X } from "./query.BBf1UFkC.js";
+import { e as C } from "./class-map.BiVq-cVR.js";
+import { o as K } from "./if-defined.BRoBj_Rp.js";
+import { i as He } from "./keyed.C0rkKrxH.js";
 import { o as Te } from "./style-map.llVFPd__.js";
-import { n as T } from "./when.Dr1es41R.js";
+import { n as S } from "./when.Dr1es41R.js";
 import { C as Ae } from "./icon.DnBh6-56.js";
 import Oe from "../components/popup.js";
 import je from "../components/resize-observer.js";
 import Ze from "../components/skeleton.js";
-import _e from "../components/space.js";
+import Ie from "../components/space.js";
+import Me from "../components/spinner.js";
 var j = /* @__PURE__ */ ((i) => (i.Automatic = "automatic", i.Manual = "manual", i))(j || {});
 /*! medium-zoom 1.1.0 | MIT License | https://github.com/francoischalifour/medium-zoom */
-var S = Object.assign || function(i) {
+var $ = Object.assign || function(i) {
   for (var t = 1; t < arguments.length; t++) {
     var r = arguments[t];
-    for (var s in r)
-      Object.prototype.hasOwnProperty.call(r, s) && (i[s] = r[s]);
+    for (var l in r)
+      Object.prototype.hasOwnProperty.call(r, l) && (i[l] = r[l]);
   }
   return i;
-}, P = function(t) {
+}, F = function(t) {
   return t.tagName === "IMG";
-}, Ie = function(t) {
+}, Ne = function(t) {
   return NodeList.prototype.isPrototypeOf(t);
-}, F = function(t) {
+}, W = function(t) {
   return t && t.nodeType === 1;
-}, te = function(t) {
+}, ie = function(t) {
   var r = t.currentSrc || t.src;
   return r.substr(-4).toLowerCase() === ".svg";
-}, ie = function(t) {
+}, oe = function(t) {
   try {
-    return Array.isArray(t) ? t.filter(P) : Ie(t) ? [].slice.call(t).filter(P) : F(t) ? [t].filter(P) : typeof t == "string" ? [].slice.call(document.querySelectorAll(t)).filter(P) : [];
+    return Array.isArray(t) ? t.filter(F) : Ne(t) ? [].slice.call(t).filter(F) : W(t) ? [t].filter(F) : typeof t == "string" ? [].slice.call(document.querySelectorAll(t)).filter(F) : [];
   } catch {
     throw new TypeError(`The provided selector is invalid.
 Expects a CSS selector, a Node element, a NodeList or an array.
 See: https://github.com/francoischalifour/medium-zoom`);
   }
-}, Me = function(t) {
+}, Pe = function(t) {
   var r = document.createElement("div");
   return r.classList.add("medium-zoom-overlay"), r.style.background = t, r;
-}, Ne = function(t) {
-  var r = t.getBoundingClientRect(), s = r.top, c = r.left, E = r.width, C = r.height, b = t.cloneNode(), W = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, _ = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
-  return b.removeAttribute("id"), b.style.position = "absolute", b.style.top = s + W + "px", b.style.left = c + _ + "px", b.style.width = E + "px", b.style.height = C + "px", b.style.transform = "", b;
+}, Fe = function(t) {
+  var r = t.getBoundingClientRect(), l = r.top, c = r.left, L = r.width, R = r.height, b = t.cloneNode(), U = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, I = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
+  return b.removeAttribute("id"), b.style.position = "absolute", b.style.top = l + U + "px", b.style.left = c + I + "px", b.style.width = L + "px", b.style.height = R + "px", b.style.transform = "", b;
 }, A = function(t, r) {
-  var s = S({
+  var l = $({
     bubbles: !1,
     cancelable: !1,
     detail: void 0
   }, r);
   if (typeof window.CustomEvent == "function")
-    return new CustomEvent(t, s);
+    return new CustomEvent(t, l);
   var c = document.createEvent("CustomEvent");
-  return c.initCustomEvent(t, s.bubbles, s.cancelable, s.detail), c;
-}, Pe = function i(t) {
-  var r = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, s = window.Promise || function(o) {
-    function a() {
+  return c.initCustomEvent(t, l.bubbles, l.cancelable, l.detail), c;
+}, We = function i(t) {
+  var r = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, l = window.Promise || function(o) {
+    function n() {
     }
-    o(a, a);
+    o(n, n);
   }, c = function(o) {
-    var a = o.target;
-    if (a === M) {
+    var n = o.target;
+    if (n === N) {
       x();
       return;
     }
-    v.indexOf(a) !== -1 && G({ target: a });
-  }, E = function() {
-    if (!($ || !e.original)) {
+    v.indexOf(n) !== -1 && J({ target: n });
+  }, L = function() {
+    if (!(H || !e.original)) {
       var o = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
-      Math.abs(J - o) > d.scrollOffset && setTimeout(x, 150);
+      Math.abs(Q - o) > d.scrollOffset && setTimeout(x, 150);
     }
-  }, C = function(o) {
-    var a = o.key || o.keyCode;
-    (a === "Escape" || a === "Esc" || a === 27) && x();
+  }, R = function(o) {
+    var n = o.key || o.keyCode;
+    (n === "Escape" || n === "Esc" || n === 27) && x();
   }, b = function() {
-    var o = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, a = o;
-    if (o.background && (M.style.background = o.background), o.container && o.container instanceof Object && (a.container = S({}, d.container, o.container)), o.template) {
-      var m = F(o.template) ? o.template : document.querySelector(o.template);
-      a.template = m;
+    var o = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, n = o;
+    if (o.background && (N.style.background = o.background), o.container && o.container instanceof Object && (n.container = $({}, d.container, o.container)), o.template) {
+      var m = W(o.template) ? o.template : document.querySelector(o.template);
+      n.template = m;
     }
-    return d = S({}, d, a), v.forEach(function(g) {
+    return d = $({}, d, n), v.forEach(function(g) {
       g.dispatchEvent(A("medium-zoom:update", {
         detail: { zoom: u }
       }));
     }), u;
-  }, W = function() {
+  }, U = function() {
     var o = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    return i(S({}, d, o));
-  }, _ = function() {
-    for (var o = arguments.length, a = Array(o), m = 0; m < o; m++)
-      a[m] = arguments[m];
-    var g = a.reduce(function(n, f) {
-      return [].concat(n, ie(f));
+    return i($({}, d, o));
+  }, I = function() {
+    for (var o = arguments.length, n = Array(o), m = 0; m < o; m++)
+      n[m] = arguments[m];
+    var g = n.reduce(function(a, f) {
+      return [].concat(a, oe(f));
     }, []);
-    return g.filter(function(n) {
-      return v.indexOf(n) === -1;
-    }).forEach(function(n) {
-      v.push(n), n.classList.add("medium-zoom-image");
-    }), I.forEach(function(n) {
-      var f = n.type, z = n.listener, R = n.options;
+    return g.filter(function(a) {
+      return v.indexOf(a) === -1;
+    }).forEach(function(a) {
+      v.push(a), a.classList.add("medium-zoom-image");
+    }), M.forEach(function(a) {
+      var f = a.type, z = a.listener, T = a.options;
       g.forEach(function(w) {
-        w.addEventListener(f, z, R);
+        w.addEventListener(f, z, T);
       });
     }), u;
-  }, re = function() {
-    for (var o = arguments.length, a = Array(o), m = 0; m < o; m++)
-      a[m] = arguments[m];
+  }, ne = function() {
+    for (var o = arguments.length, n = Array(o), m = 0; m < o; m++)
+      n[m] = arguments[m];
     e.zoomed && x();
-    var g = a.length > 0 ? a.reduce(function(n, f) {
-      return [].concat(n, ie(f));
+    var g = n.length > 0 ? n.reduce(function(a, f) {
+      return [].concat(a, oe(f));
     }, []) : v;
-    return g.forEach(function(n) {
-      n.classList.remove("medium-zoom-image"), n.dispatchEvent(A("medium-zoom:detach", {
+    return g.forEach(function(a) {
+      a.classList.remove("medium-zoom-image"), a.dispatchEvent(A("medium-zoom:detach", {
         detail: { zoom: u }
       }));
-    }), v = v.filter(function(n) {
-      return g.indexOf(n) === -1;
+    }), v = v.filter(function(a) {
+      return g.indexOf(a) === -1;
     }), u;
-  }, ae = function(o, a) {
+  }, ae = function(o, n) {
     var m = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
     return v.forEach(function(g) {
-      g.addEventListener("medium-zoom:" + o, a, m);
-    }), I.push({ type: "medium-zoom:" + o, listener: a, options: m }), u;
-  }, ne = function(o, a) {
+      g.addEventListener("medium-zoom:" + o, n, m);
+    }), M.push({ type: "medium-zoom:" + o, listener: n, options: m }), u;
+  }, se = function(o, n) {
     var m = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
     return v.forEach(function(g) {
-      g.removeEventListener("medium-zoom:" + o, a, m);
-    }), I = I.filter(function(g) {
-      return !(g.type === "medium-zoom:" + o && g.listener.toString() === a.toString());
+      g.removeEventListener("medium-zoom:" + o, n, m);
+    }), M = M.filter(function(g) {
+      return !(g.type === "medium-zoom:" + o && g.listener.toString() === n.toString());
     }), u;
-  }, X = function() {
-    var o = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, a = o.target, m = function() {
-      var n = {
+  }, G = function() {
+    var o = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, n = o.target, m = function() {
+      var a = {
         width: document.documentElement.clientWidth,
         height: document.documentElement.clientHeight,
         left: 0,
@@ -149,27 +150,27 @@ See: https://github.com/francoischalifour/medium-zoom`);
       }, f = void 0, z = void 0;
       if (d.container)
         if (d.container instanceof Object)
-          n = S({}, n, d.container), f = n.width - n.left - n.right - d.margin * 2, z = n.height - n.top - n.bottom - d.margin * 2;
+          a = $({}, a, d.container), f = a.width - a.left - a.right - d.margin * 2, z = a.height - a.top - a.bottom - d.margin * 2;
         else {
-          var R = F(d.container) ? d.container : document.querySelector(d.container), w = R.getBoundingClientRect(), U = w.width, de = w.height, ce = w.left, me = w.top;
-          n = S({}, n, {
-            width: U,
-            height: de,
-            left: ce,
-            top: me
+          var T = W(d.container) ? d.container : document.querySelector(d.container), w = T.getBoundingClientRect(), B = w.width, ce = w.height, me = w.left, ge = w.top;
+          a = $({}, a, {
+            width: B,
+            height: ce,
+            left: me,
+            top: ge
           });
         }
-      f = f || n.width - d.margin * 2, z = z || n.height - d.margin * 2;
-      var O = e.zoomedHd || e.original, ge = te(O) ? f : O.naturalWidth || f, ue = te(O) ? z : O.naturalHeight || z, N = O.getBoundingClientRect(), pe = N.top, fe = N.left, B = N.width, D = N.height, ve = Math.min(Math.max(B, ge), f) / B, ye = Math.min(Math.max(D, ue), z) / D, q = Math.min(ve, ye), ze = (-fe + (f - B) / 2 + d.margin + n.left) / q, be = (-pe + (z - D) / 2 + d.margin + n.top) / q, Q = "scale(" + q + ") translate3d(" + ze + "px, " + be + "px, 0)";
-      e.zoomed.style.transform = Q, e.zoomedHd && (e.zoomedHd.style.transform = Q);
+      f = f || a.width - d.margin * 2, z = z || a.height - d.margin * 2;
+      var O = e.zoomedHd || e.original, ue = ie(O) ? f : O.naturalWidth || f, pe = ie(O) ? z : O.naturalHeight || z, P = O.getBoundingClientRect(), fe = P.top, ve = P.left, D = P.width, _ = P.height, ye = Math.min(Math.max(D, ue), f) / D, ze = Math.min(Math.max(_, pe), z) / _, q = Math.min(ye, ze), be = (-ve + (f - D) / 2 + d.margin + a.left) / q, xe = (-fe + (z - _) / 2 + d.margin + a.top) / q, ee = "scale(" + q + ") translate3d(" + be + "px, " + xe + "px, 0)";
+      e.zoomed.style.transform = ee, e.zoomedHd && (e.zoomedHd.style.transform = ee);
     };
-    return new s(function(g) {
-      if (a && v.indexOf(a) === -1) {
+    return new l(function(g) {
+      if (n && v.indexOf(n) === -1) {
         g(u);
         return;
       }
-      var n = function U() {
-        $ = !1, e.zoomed.removeEventListener("transitionend", U), e.original.dispatchEvent(A("medium-zoom:opened", {
+      var a = function B() {
+        H = !1, e.zoomed.removeEventListener("transitionend", B), e.original.dispatchEvent(A("medium-zoom:opened", {
           detail: { zoom: u }
         })), g(u);
       };
@@ -177,8 +178,8 @@ See: https://github.com/francoischalifour/medium-zoom`);
         g(u);
         return;
       }
-      if (a)
-        e.original = a;
+      if (n)
+        e.original = n;
       else if (v.length > 0) {
         var f = v;
         e.original = f[0];
@@ -188,18 +189,18 @@ See: https://github.com/francoischalifour/medium-zoom`);
       }
       if (e.original.dispatchEvent(A("medium-zoom:open", {
         detail: { zoom: u }
-      })), J = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, $ = !0, e.zoomed = Ne(e.original), document.body.appendChild(M), d.template) {
-        var z = F(d.template) ? d.template : document.querySelector(d.template);
+      })), Q = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, H = !0, e.zoomed = Fe(e.original), document.body.appendChild(N), d.template) {
+        var z = W(d.template) ? d.template : document.querySelector(d.template);
         e.template = document.createElement("div"), e.template.appendChild(z.content.cloneNode(!0)), document.body.appendChild(e.template);
       }
       if (e.original.parentElement && e.original.parentElement.tagName === "PICTURE" && e.original.currentSrc && (e.zoomed.src = e.original.currentSrc), document.body.appendChild(e.zoomed), window.requestAnimationFrame(function() {
         document.body.classList.add("medium-zoom--opened");
-      }), e.original.classList.add("medium-zoom-image--hidden"), e.zoomed.classList.add("medium-zoom-image--opened"), e.zoomed.addEventListener("click", x), e.zoomed.addEventListener("transitionend", n), e.original.getAttribute("data-zoom-src")) {
+      }), e.original.classList.add("medium-zoom-image--hidden"), e.zoomed.classList.add("medium-zoom-image--opened"), e.zoomed.addEventListener("click", x), e.zoomed.addEventListener("transitionend", a), e.original.getAttribute("data-zoom-src")) {
         e.zoomedHd = e.zoomed.cloneNode(), e.zoomedHd.removeAttribute("srcset"), e.zoomedHd.removeAttribute("sizes"), e.zoomedHd.removeAttribute("loading"), e.zoomedHd.src = e.zoomed.getAttribute("data-zoom-src"), e.zoomedHd.onerror = function() {
-          clearInterval(R), console.warn("Unable to reach the zoom image target " + e.zoomedHd.src), e.zoomedHd = null, m();
+          clearInterval(T), console.warn("Unable to reach the zoom image target " + e.zoomedHd.src), e.zoomedHd = null, m();
         };
-        var R = setInterval(function() {
-          e.zoomedHd.complete && (clearInterval(R), e.zoomedHd.classList.add("medium-zoom-image--opened"), e.zoomedHd.addEventListener("click", x), document.body.appendChild(e.zoomedHd), m());
+        var T = setInterval(function() {
+          e.zoomedHd.complete && (clearInterval(T), e.zoomedHd.classList.add("medium-zoom-image--opened"), e.zoomedHd.addEventListener("click", x), document.body.appendChild(e.zoomedHd), m());
         }, 10);
       } else if (e.original.hasAttribute("srcset")) {
         e.zoomedHd = e.zoomed.cloneNode(), e.zoomedHd.removeAttribute("sizes"), e.zoomedHd.removeAttribute("loading");
@@ -210,72 +211,72 @@ See: https://github.com/francoischalifour/medium-zoom`);
         m();
     });
   }, x = function() {
-    return new s(function(o) {
-      if ($ || !e.original) {
+    return new l(function(o) {
+      if (H || !e.original) {
         o(u);
         return;
       }
-      var a = function m() {
-        e.original.classList.remove("medium-zoom-image--hidden"), document.body.removeChild(e.zoomed), e.zoomedHd && document.body.removeChild(e.zoomedHd), document.body.removeChild(M), e.zoomed.classList.remove("medium-zoom-image--opened"), e.template && document.body.removeChild(e.template), $ = !1, e.zoomed.removeEventListener("transitionend", m), e.original.dispatchEvent(A("medium-zoom:closed", {
+      var n = function m() {
+        e.original.classList.remove("medium-zoom-image--hidden"), document.body.removeChild(e.zoomed), e.zoomedHd && document.body.removeChild(e.zoomedHd), document.body.removeChild(N), e.zoomed.classList.remove("medium-zoom-image--opened"), e.template && document.body.removeChild(e.template), H = !1, e.zoomed.removeEventListener("transitionend", m), e.original.dispatchEvent(A("medium-zoom:closed", {
           detail: { zoom: u }
         })), e.original = null, e.zoomed = null, e.zoomedHd = null, e.template = null, o(u);
       };
-      $ = !0, document.body.classList.remove("medium-zoom--opened"), e.zoomed.style.transform = "", e.zoomedHd && (e.zoomedHd.style.transform = ""), e.template && (e.template.style.transition = "opacity 150ms", e.template.style.opacity = 0), e.original.dispatchEvent(A("medium-zoom:close", {
+      H = !0, document.body.classList.remove("medium-zoom--opened"), e.zoomed.style.transform = "", e.zoomedHd && (e.zoomedHd.style.transform = ""), e.template && (e.template.style.transition = "opacity 150ms", e.template.style.opacity = 0), e.original.dispatchEvent(A("medium-zoom:close", {
         detail: { zoom: u }
-      })), e.zoomed.addEventListener("transitionend", a);
+      })), e.zoomed.addEventListener("transitionend", n);
     });
-  }, G = function() {
-    var o = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, a = o.target;
-    return e.original ? x() : X({ target: a });
-  }, se = function() {
-    return d;
+  }, J = function() {
+    var o = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, n = o.target;
+    return e.original ? x() : G({ target: n });
   }, le = function() {
-    return v;
+    return d;
   }, he = function() {
+    return v;
+  }, de = function() {
     return e.original;
-  }, v = [], I = [], $ = !1, J = 0, d = r, e = {
+  }, v = [], M = [], H = !1, Q = 0, d = r, e = {
     original: null,
     zoomed: null,
     zoomedHd: null,
     template: null
     // If the selector is omitted, it's replaced by the options
   };
-  Object.prototype.toString.call(t) === "[object Object]" ? d = t : (t || typeof t == "string") && _(t), d = S({
+  Object.prototype.toString.call(t) === "[object Object]" ? d = t : (t || typeof t == "string") && I(t), d = $({
     margin: 0,
     background: "#fff",
     scrollOffset: 40,
     container: null,
     template: null
   }, d);
-  var M = Me(d.background);
-  document.addEventListener("click", c), document.addEventListener("keyup", C), document.addEventListener("scroll", E), window.addEventListener("resize", x);
+  var N = Pe(d.background);
+  document.addEventListener("click", c), document.addEventListener("keyup", R), document.addEventListener("scroll", L), window.addEventListener("resize", x);
   var u = {
-    open: X,
+    open: G,
     close: x,
-    toggle: G,
+    toggle: J,
     update: b,
-    clone: W,
-    attach: _,
-    detach: re,
+    clone: U,
+    attach: I,
+    detach: ne,
     on: ae,
-    off: ne,
-    getOptions: se,
-    getImages: le,
-    getZoomedImage: he
+    off: se,
+    getOptions: le,
+    getImages: he,
+    getZoomedImage: de
   };
   return u;
 };
-function Fe(i, t) {
+function Ue(i, t) {
   t === void 0 && (t = {});
   var r = t.insertAt;
   if (!(typeof document > "u")) {
-    var s = document.head || document.getElementsByTagName("head")[0], c = document.createElement("style");
-    c.type = "text/css", r === "top" && s.firstChild ? s.insertBefore(c, s.firstChild) : s.appendChild(c), c.styleSheet ? c.styleSheet.cssText = i : c.appendChild(document.createTextNode(i));
+    var l = document.head || document.getElementsByTagName("head")[0], c = document.createElement("style");
+    c.type = "text/css", r === "top" && l.firstChild ? l.insertBefore(c, l.firstChild) : l.appendChild(c), c.styleSheet ? c.styleSheet.cssText = i : c.appendChild(document.createTextNode(i));
   }
 }
-var We = ".medium-zoom-overlay{position:fixed;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .3s;will-change:opacity}.medium-zoom--opened .medium-zoom-overlay{cursor:pointer;cursor:zoom-out;opacity:1}.medium-zoom-image{cursor:pointer;cursor:zoom-in;transition:transform .3s cubic-bezier(.2,0,.2,1)!important}.medium-zoom-image--hidden{visibility:hidden}.medium-zoom-image--opened{position:relative;cursor:pointer;cursor:zoom-out;will-change:transform}";
-Fe(We);
-const Ue = oe`:host([effect=jump]) .container,:host([effect=text-reveal]) .container,:host([effect=zoom]) .container{overflow:initial}:host([effect=jump]) .highlighter{transition:all var(--transition-duration,.5s) var(--easing,linear), transform var(--transition-transform-duration,.5s) var(--easing,linear)}:host([effect=jump]) .highlighter:hover{transform:translateY(calc(var(--highlightable-item-effect-jump-distance,0) * -1))}.highlighter--effect-text-reveal,:host([effect=zoom]) .highlighter--zoom-style-within-borders{overflow:hidden}:host([effect=zoom][zoom-style=pop-out]) .highlighter:hover{z-index:3;animation:none}:host([effect=zoom][zoom-style=pop-out]) .highlighter:not(:hover){animation:drop-z var(--transition-transform-duration) forwards}@keyframes drop-z{0%{z-index:2}99%{z-index:2}to{z-index:0}}.highlighter--can-hover:hover:after,.highlighter--selected:after,.highlighter--color-overlay:after{content:"";pointer-events:none;width:100%;height:100%;transition:all var(--transition-duration,.5s) var(--easing,linear);position:absolute;top:0;left:0}.highlighter--can-hover:hover:after,.highlighter--selected:after{outline:2px solid var(--cx-color-primary)}.highlighter--border:hover .image{border-color:var(--highlightable-item-highlight-border-color,var(--cx-color-primary))}.highlighter--color-overlay:after{border-radius:var(--border-radius,none)}.highlighter--color-overlay:hover:after{background-color:var(--highlightable-item-highlight-color-overlay-color,transparent)}.highlighter--drop-shadow:hover .image{box-shadow:var(--highlightable-item-highlight-drop-shadow,none)}.highlighter--background:hover .highlightable-item{--content-background-color:var(--highlightable-item-highlight-background,transparent);--highlightable-item-background-color:var(--highlightable-item-highlight-background,transparent)}.highlighter--opacity{opacity:var(--highlightable-item-highlight-opacity,1)}:host([effect=zoom][zoom-style=within-borders]) .highlighter .image,:host([effect=zoom][zoom-style=pop-out]) .highlighter{transition:transform var(--transition-transform-duration,.5s) var(--easing,linear)}:host([effect=zoom][zoom-style=within-borders]) .highlighter:hover .image,:host([effect=zoom][zoom-style=pop-out]) .highlighter:hover{transform:scale(var(--highlightable-item-effect-zoom-scale,1))}.highlightable-item{transition:background-color var(--transition-duration,.5s) var(--easing,linear), border-color var(--transition-duration,.5s) var(--easing,linear), box-shadow var(--transition-duration,.5s) var(--easing,linear), opacity var(--transition-duration,.5s) var(--easing,linear), transform var(--transition-transform-duration,.5s) var(--easing,linear), visibility var(--transition-duration,.5s) var(--easing,linear)}`, Be = oe`
+var Be = ".medium-zoom-overlay{position:fixed;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .3s;will-change:opacity}.medium-zoom--opened .medium-zoom-overlay{cursor:pointer;cursor:zoom-out;opacity:1}.medium-zoom-image{cursor:pointer;cursor:zoom-in;transition:transform .3s cubic-bezier(.2,0,.2,1)!important}.medium-zoom-image--hidden{visibility:hidden}.medium-zoom-image--opened{position:relative;cursor:pointer;cursor:zoom-out;will-change:transform}";
+Ue(Be);
+const De = re`:host([effect=jump]) .container,:host([effect=text-reveal]) .container,:host([effect=zoom]) .container{overflow:initial}:host([effect=jump]) .highlighter{transition:all var(--transition-duration,.5s) var(--easing,linear), transform var(--transition-transform-duration,.5s) var(--easing,linear)}:host([effect=jump]) .highlighter:hover{transform:translateY(calc(var(--highlightable-item-effect-jump-distance,0) * -1))}.highlighter--effect-text-reveal,:host([effect=zoom]) .highlighter--zoom-style-within-borders{overflow:hidden}:host([effect=zoom][zoom-style=pop-out]) .highlighter:hover{z-index:3;animation:none}:host([effect=zoom][zoom-style=pop-out]) .highlighter:not(:hover){animation:drop-z var(--transition-transform-duration) forwards}@keyframes drop-z{0%{z-index:2}99%{z-index:2}to{z-index:0}}.highlighter--can-hover:hover:after,.highlighter--selected:after,.highlighter--color-overlay:after{content:"";pointer-events:none;width:100%;height:100%;transition:all var(--transition-duration,.5s) var(--easing,linear);position:absolute;top:0;left:0}.highlighter--can-hover:hover:after,.highlighter--selected:after{outline:2px solid var(--cx-color-primary)}.highlighter--border:hover .image{border-color:var(--highlightable-item-highlight-border-color,var(--cx-color-primary))}.highlighter--color-overlay:after{border-radius:var(--border-radius,none)}.highlighter--color-overlay:hover:after{background-color:var(--highlightable-item-highlight-color-overlay-color,transparent)}.highlighter--drop-shadow:hover .image{box-shadow:var(--highlightable-item-highlight-drop-shadow,none)}.highlighter--background:hover .highlightable-item{--content-background-color:var(--highlightable-item-highlight-background,transparent);--highlightable-item-background-color:var(--highlightable-item-highlight-background,transparent)}.highlighter--opacity{opacity:var(--highlightable-item-highlight-opacity,1)}:host([effect=zoom][zoom-style=within-borders]) .highlighter .image,:host([effect=zoom][zoom-style=pop-out]) .highlighter{transition:transform var(--transition-transform-duration,.5s) var(--easing,linear)}:host([effect=zoom][zoom-style=within-borders]) .highlighter:hover .image,:host([effect=zoom][zoom-style=pop-out]) .highlighter:hover{transform:scale(var(--highlightable-item-effect-zoom-scale,1))}.highlightable-item{transition:background-color var(--transition-duration,.5s) var(--easing,linear), border-color var(--transition-duration,.5s) var(--easing,linear), box-shadow var(--transition-duration,.5s) var(--easing,linear), opacity var(--transition-duration,.5s) var(--easing,linear), transform var(--transition-transform-duration,.5s) var(--easing,linear), visibility var(--transition-duration,.5s) var(--easing,linear)}`, _e = re`
   :host {
     --justify-content: flex-start;
     --border-radius: 0px;
@@ -285,6 +286,7 @@ const Ue = oe`:host([effect=jump]) .container,:host([effect=text-reveal]) .conta
       var(--cx-color-neutral-1000),
       var(--cx-color-neutral-0)
     );
+    --fallback-icon-color: var(--cx-input-icon-color);
     --details-font-size: 16px;
     --details-letter-spacing: 0px;
     --details-line-height: 1.5;
@@ -328,7 +330,7 @@ const Ue = oe`:host([effect=jump]) .container,:host([effect=text-reveal]) .conta
     max-height: 100%;
   }
 
-  ${Ue}
+  ${De}
 
   :host([block]) {
     width: 100%;
@@ -402,6 +404,12 @@ const Ue = oe`:host([effect=jump]) .container,:host([effect=text-reveal]) .conta
     outline: none;
   }
 
+  .highlighter--centered {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
   .highlightable-item {
     background-color: var(--highlightable-item-background-color);
     display: flex;
@@ -513,22 +521,35 @@ const Ue = oe`:host([effect=jump]) .container,:host([effect=text-reveal]) .conta
     --border-radius: 0;
   }
 
+  .retry-spinner {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .retry-spinner cx-spinner {
+    font-size: var(--cx-font-size-3x-large);
+  }
+
   .fallback {
     position: relative;
   }
 
   .fallback cx-icon {
     --font-size: var(--cx-font-size-4x-large);
+    color: var(--fallback-icon-color);
   }
 `;
-var De = Object.defineProperty, qe = Object.getOwnPropertyDescriptor, h = (i, t, r, s) => {
-  for (var c = s > 1 ? void 0 : s ? qe(t, r) : t, E = i.length - 1, C; E >= 0; E--)
-    (C = i[E]) && (c = (s ? C(t, r, c) : C(c)) || c);
-  return s && c && De(t, r, c), c;
+var qe = Object.defineProperty, Ye = Object.getOwnPropertyDescriptor, h = (i, t, r, l) => {
+  for (var c = l > 1 ? void 0 : l ? Ye(t, r) : t, L = i.length - 1, R; L >= 0; L--)
+    (R = i[L]) && (c = (l ? R(t, r, c) : R(c)) || c);
+  return l && c && qe(t, r, c), c;
 };
-let l = class extends we {
+let s = class extends Ee {
   constructor() {
-    super(...arguments), this.localize = new He(this), this._retryCount = 0, this._retryTimer = null, this.isLoaded = !1, this.isError = !1, this._retryIndex = 0, this.src = "", this.placeholder = "", this.alt = "", this.objectFit = ke.Fill, this.skeleton = !1, this.fallback = !1, this.canZoom = !1, this.loading = !1, this.block = !1, this.htmlLoading = "lazy", this.clickHandlerType = j.Automatic, this.retryOnError = !1, this.maxRetries = 3, this.isZoomed = !1, this.imageRatio = 1, this.parsedAlt = "", this.parsedAltDarkMode = "", this.zoom = null, this.lastPatchedWidth = null;
+    super(...arguments), this.localize = new $e(this), this.retryCount = 0, this.retryTimer = null, this.isLoaded = !1, this.isError = !1, this.isRetrying = !1, this.retryIndex = 0, this.src = "", this.placeholder = "", this.alt = "", this.objectFit = Le.Fill, this.skeleton = !1, this.fallback = !1, this.canZoom = !1, this.loading = !1, this.block = !1, this.htmlLoading = "lazy", this.clickHandlerType = j.Automatic, this.retryOnError = !1, this.maxRetries = 3, this.isZoomed = !1, this.imageRatio = 1, this.parsedAlt = "", this.parsedAltDarkMode = "", this.zoom = null, this.lastPatchedWidth = null;
   }
   get currentAltValue() {
     return this.alt;
@@ -551,15 +572,15 @@ let l = class extends we {
   }
   get imageClass() {
     let i = "landscape", t = this.ratio;
-    const r = this.width.endsWith("%") ? this.clientWidth : Number.parseFloat(this.width), s = this.isResizing ? this.resizeSize.width : r, c = this.isResizing ? this.resizeSize.height : Number.parseFloat(this.height);
-    return s && c && (t = s / c), t > this.imageRatio && (i = "portrait"), {
+    const r = this.width.endsWith("%") ? this.clientWidth : Number.parseFloat(this.width), l = this.isResizing ? this.resizeSize.width : r, c = this.isResizing ? this.resizeSize.height : Number.parseFloat(this.height);
+    return l && c && (t = l / c), t > this.imageRatio && (i = "portrait"), {
       image: !0,
       [`image--${this.objectFit}`]: !0,
       [`image--${i}`]: !0,
       [`image--height-${this.heightMode}`]: !0,
       "image--can-zoom": this.canZoom,
       "image--has-action": this.hasZoomAction,
-      "image--hidden": !this.currentSrc && !this.placeholder || this.isError && this.fallback
+      "image--hidden": !this.currentSrc && !this.placeholder || this.isError || this.isRetrying
     };
   }
   get crossorigin() {
@@ -608,19 +629,19 @@ let l = class extends we {
     await this.updateComplete, this.requestUpdate();
   }
   handleSrcChange() {
-    this.isLoaded = !1, this.isError = !1, this._retryCount = 0, this._retryIndex = 0, this.clearRetryTimer();
+    this.isLoaded = !1, this.isError = !1, this.isRetrying = !1, this.retryCount = 0, this.retryIndex = 0, this.clearRetryTimer();
   }
   clearRetryTimer() {
-    this._retryTimer !== null && (clearTimeout(this._retryTimer), this._retryTimer = null);
+    this.retryTimer !== null && (clearTimeout(this.retryTimer), this.retryTimer = null);
   }
   scheduleRetry() {
-    const i = Math.min(1e3 * Math.pow(2, this._retryCount - 1), 1e4);
-    this._retryTimer = setTimeout(() => {
-      this._retryTimer = null, this._retryIndex += 1;
+    const i = Math.min(1e3 * Math.pow(2, this.retryCount - 1), 1e4);
+    this.retryTimer = setTimeout(() => {
+      this.retryTimer = null, this.retryIndex += 1;
     }, i);
   }
   async initZoom() {
-    this.zoomImageElement && !this.zoom && this.isLoaded && (this.zoom = Pe(this.zoomImageElement, {
+    this.zoomImageElement && !this.zoom && this.isLoaded && (this.zoom = We(this.zoomImageElement, {
       background: "light-dark(rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.8))",
       margin: 0,
       scrollOffset: 0
@@ -634,19 +655,19 @@ let l = class extends we {
     const t = i?.currentTarget ?? this.imageElement;
     if (!t)
       return;
-    const { naturalHeight: r, naturalWidth: s } = t;
-    this.imageRatio = s / r, this.isLoaded || (this.emit("cx-load"), this.isLoaded = !0, this.isError = !1);
+    const { naturalHeight: r, naturalWidth: l } = t;
+    this.imageRatio = l / r, this.isRetrying = !1, this.isLoaded || (this.emit("cx-load"), this.isLoaded = !0, this.isError = !1);
   }
   handleError() {
-    if (this.retryOnError && this._retryCount < this.maxRetries) {
-      this._retryCount += 1, this.scheduleRetry();
+    if (this.retryOnError && this.retryCount < this.maxRetries) {
+      this.retryCount += 1, this.isRetrying = !0, this.scheduleRetry();
       return;
     }
-    this.emit("cx-error"), this.isLoaded = !0, this.isError = !0;
+    this.isRetrying = !1, this.emit("cx-error"), this.isLoaded = !0, this.isError = !0;
   }
   handleSizeChange() {
-    const i = this.resizeDirection !== ee.Vertical, t = this.resizeDirection !== ee.Horizontal, r = this.isResizing ? `${this.resizeSize.width}px` : this.width, s = this.isResizing ? `${this.resizeSize.height}px` : this.height;
-    i && (this.width || this.isResizing ? this.style.setProperty("--width", r) : this.style.removeProperty("--width")), t && (this.heightMode !== Ee.Auto && (this.height || this.isResizing) ? this.style.setProperty("--height", s) : this.style.removeProperty("--height"));
+    const i = this.resizeDirection !== te.Vertical, t = this.resizeDirection !== te.Horizontal, r = this.isResizing ? `${this.resizeSize.width}px` : this.width, l = this.isResizing ? `${this.resizeSize.height}px` : this.height;
+    i && (this.width || this.isResizing ? this.style.setProperty("--width", r) : this.style.removeProperty("--width")), t && (this.heightMode !== Ce.Auto && (this.height || this.isResizing) ? this.style.setProperty("--height", l) : this.style.removeProperty("--height"));
   }
   handleResize(i) {
     const { entries: t } = i.detail;
@@ -670,138 +691,148 @@ let l = class extends we {
   }
   renderContent() {
     const i = this.currentSrc, t = this.currentAltValue;
-    return k`<div part="content" slot="anchor" class=${L(this.highlighterClass)}>${Re(
-      this._retryIndex,
-      k`<img part="image" class=${L(this.imageClass)} src=${i || this.placeholder} alt=${t} aria-label=${t} crossorigin=${V(this.crossorigin)} @load=${this.handleLoad} @error=${this.handleError} loading=${this.htmlLoading}>`
+    if (this.retryOnError) {
+      if (this.isError && this.retryCount >= this.maxRetries)
+        return V;
+    } else if (this.isError)
+      return V;
+    return E`<div part="content" slot="anchor" class=${C(this.highlighterClass)}>${He(
+      this.retryIndex,
+      E`<img part="image" class=${C(this.imageClass)} src=${i || this.placeholder} alt=${t} aria-label=${t} crossorigin=${K(this.crossorigin)} @load=${this.handleLoad} @error=${this.handleError} loading=${this.retryIndex > 0 ? "eager" : this.htmlLoading}>`
     )}</div>`;
   }
   render() {
     const i = this.hasZoomAction, t = this.currentAltValue, r = !this.currentSrc && !this.placeholder;
-    return k`<div part="base" class=${L({
+    return E`<div part="base" class=${C({
       container: !0,
       "container--empty": r,
       "container--loading": this.loading,
       "container--resizing": this.resizable && this.isResizeActive
     })} style=${Te({
       "--easing": this.easeCSSVariable
-    })} data-empty-label=${this.localize.term("emptyImage")} @click=${this.startResizing} @keydown=${this.handleKeyDown}><cx-resize-observer @cx-resize=${this.handleResize}><div part="highlighter" tabindex=${V(this.highlighterTabindex)} role=${this.highlighterRole} aria-label=${t} aria-roledescription=${this.localize.term("image")} class=${L(r ? {} : this.getHighlighterClass())} @click=${this.handleClickAction} @mouseenter=${this.handleMouseEnter} @mouseleave=${this.handleMouseLeave} @blur=${this.handleBlur}>${T(
+    })} data-empty-label=${this.localize.term("emptyImage")} @click=${this.startResizing} @keydown=${this.handleKeyDown}><cx-resize-observer @cx-resize=${this.handleResize}><div part="highlighter" tabindex=${K(this.highlighterTabindex)} role=${this.highlighterRole} aria-label=${t} aria-roledescription=${this.localize.term("image")} class=${C(r ? {} : this.getHighlighterClass(this.isError))} @click=${this.handleClickAction} @mouseenter=${this.handleMouseEnter} @mouseleave=${this.handleMouseLeave} @blur=${this.handleBlur}>${S(
       r,
-      () => $e,
-      () => T(
+      () => V,
+      () => S(
         this.effect === Y.Jump || this.effect === Y.Zoom,
-        () => k`<cx-popup class="popup-container" strategy="absolute" active placement="center" sync="both">${this.renderContent()}</cx-popup>`,
+        () => E`<cx-popup class="popup-container" strategy="absolute" active placement="center" sync="both">${this.renderContent()}</cx-popup>`,
         () => this.renderContent()
       )
-    )}<div class="zoom-image-container">${T(
+    )}<div class="zoom-image-container">${S(
       i,
-      () => k`<img part="zoom-image" class=${L({
+      () => E`<img part="zoom-image" class=${C({
         "zoom-image": !0,
         "zoom-image--hidden": !this.isZoomed
-      })} src=${this.currentSrc || this.placeholder} alt="" aria-hidden="true" decoding="async" draggable="false" crossorigin=${V(this.crossorigin)}>`
-    )}</div>${T(
-      this.skeleton && !this.isLoaded && !this.isError || this.loading,
-      () => k`<slot name="skeleton" part="skeleton"><div class=${L({
+      })} src=${this.currentSrc || this.placeholder} alt="" aria-hidden="true" decoding="async" draggable="false" crossorigin=${K(this.crossorigin)}>`
+    )}</div>${S(
+      (this.skeleton && !this.isLoaded && !this.isError || this.loading) && !this.isRetrying,
+      () => E`<slot name="skeleton" part="skeleton"><div class=${C({
         skeleton: !0
       })}><cx-skeleton effect="sheen"></cx-skeleton></div></slot>`
     )}
-          ${T(this.isError && this.fallback, () => k`<slot name="fallback" part="fallback"><cx-space class=${L({ fallback: !0 })} direction="column" align-items="center" justify-content="center"><cx-icon name="hide_image" part="fallback-icon"> </cx-icon></cx-space></slot>`)}</div></cx-resize-observer>${T(this.resizable && this.isResizeActive, () => this.renderResizer())}</div>`;
+          ${S(this.isRetrying, () => E`<div part="retry-spinner" class=${C({ "retry-spinner": !0 })}><cx-spinner></cx-spinner></div>`)}
+          ${S(this.isError, () => E`<slot name="fallback" part="fallback"><cx-space class=${C({ fallback: !0 })} direction="column" align-items="center" justify-content="center"><cx-icon name="hide_image" part="fallback-icon"> </cx-icon></cx-space></slot>`)}</div></cx-resize-observer>${S(this.resizable && this.isResizeActive, () => this.renderResizer())}</div>`;
   }
 };
-l.styles = [Ce, xe, Be];
-l.dependencies = {
+s.styles = [ke, we, _e];
+s.dependencies = {
   "cx-icon": Ae,
   "cx-popup": Oe,
   "cx-resize-observer": je,
   "cx-skeleton": Ze,
-  "cx-space": _e
+  "cx-space": Ie,
+  "cx-spinner": Me
 };
 h([
-  K(".image")
-], l.prototype, "imageElement", 2);
+  X(".image")
+], s.prototype, "imageElement", 2);
+h([
+  X(".zoom-image")
+], s.prototype, "zoomImageElement", 2);
 h([
-  K(".zoom-image")
-], l.prototype, "zoomImageElement", 2);
+  X(".highlighter")
+], s.prototype, "highlighterElement", 2);
 h([
-  K(".highlighter")
-], l.prototype, "highlighterElement", 2);
+  k()
+], s.prototype, "isLoaded", 2);
 h([
-  H()
-], l.prototype, "isLoaded", 2);
+  k()
+], s.prototype, "isError", 2);
 h([
-  H()
-], l.prototype, "isError", 2);
+  k()
+], s.prototype, "isRetrying", 2);
 h([
-  H()
-], l.prototype, "_retryIndex", 2);
+  k()
+], s.prototype, "retryIndex", 2);
 h([
   y({ reflect: !0, type: String })
-], l.prototype, "src", 2);
+], s.prototype, "src", 2);
 h([
   y({ reflect: !0, type: String })
-], l.prototype, "placeholder", 2);
+], s.prototype, "placeholder", 2);
 h([
   y({ reflect: !0, type: String })
-], l.prototype, "alt", 2);
+], s.prototype, "alt", 2);
 h([
   y({ attribute: "object-fit", reflect: !0 })
-], l.prototype, "objectFit", 2);
+], s.prototype, "objectFit", 2);
 h([
   y({ reflect: !0, type: Boolean })
-], l.prototype, "skeleton", 2);
+], s.prototype, "skeleton", 2);
 h([
   y({ reflect: !0, type: Boolean })
-], l.prototype, "fallback", 2);
+], s.prototype, "fallback", 2);
 h([
   y({ attribute: "can-zoom", reflect: !0, type: Boolean })
-], l.prototype, "canZoom", 2);
+], s.prototype, "canZoom", 2);
 h([
   y({ reflect: !0, type: Boolean })
-], l.prototype, "loading", 2);
+], s.prototype, "loading", 2);
 h([
   y({ reflect: !0, type: Boolean })
-], l.prototype, "block", 2);
+], s.prototype, "block", 2);
 h([
   y({ attribute: "html-loading", reflect: !0, type: String })
-], l.prototype, "htmlLoading", 2);
+], s.prototype, "htmlLoading", 2);
 h([
   y({ attribute: "click-handler-type", reflect: !0, type: String })
-], l.prototype, "clickHandlerType", 2);
+], s.prototype, "clickHandlerType", 2);
 h([
   y({ attribute: "retry-on-error", type: Boolean })
-], l.prototype, "retryOnError", 2);
+], s.prototype, "retryOnError", 2);
 h([
   y({ attribute: "max-retries", type: Number })
-], l.prototype, "maxRetries", 2);
+], s.prototype, "maxRetries", 2);
 h([
-  H()
-], l.prototype, "isZoomed", 2);
+  k()
+], s.prototype, "isZoomed", 2);
 h([
-  H()
-], l.prototype, "imageRatio", 2);
+  k()
+], s.prototype, "imageRatio", 2);
 h([
-  H()
-], l.prototype, "parsedAlt", 2);
+  k()
+], s.prototype, "parsedAlt", 2);
 h([
-  H()
-], l.prototype, "parsedAltDarkMode", 2);
+  k()
+], s.prototype, "parsedAltDarkMode", 2);
 h([
   Z("isLoaded"),
   Z("canZoom", { waitUntilFirstUpdate: !0 })
-], l.prototype, "handleCanZoomChange", 1);
+], s.prototype, "handleCanZoomChange", 1);
 h([
   Z("objectFit", { waitUntilFirstUpdate: !0 })
-], l.prototype, "handleObjectFitChange", 1);
+], s.prototype, "handleObjectFitChange", 1);
 h([
   Z("src"),
   Z("srcDarkMode")
-], l.prototype, "handleSrcChange", 1);
+], s.prototype, "handleSrcChange", 1);
 h([
   Se(100)
-], l.prototype, "updateLastPatchedWidth", 1);
-l = h([
-  Le("cx-image")
-], l);
+], s.prototype, "updateLastPatchedWidth", 1);
+s = h([
+  Re("cx-image")
+], s);
 export {
-  l as C,
+  s as C,
   j as a
 };