@orangelogic/design-system 2.94.0 → 2.95.0

package/library/chunks/{image.C3LupRuN.js → image.C-Covc0H.js}

@@ -1,33 +1,33 @@
-import { x as T, i as se, E as Le } from "./lit-element.jLBm65_O.js";
-import { C as Re, n as d } from "./lib-cortex-element.CVMmyPMC.js";
+import { x as B, i as he, E as Le } from "./lit-element.jLBm65_O.js";
+import { C as He, n as d } from "./lib-cortex-element.CVMmyPMC.js";
 import { r as H } from "./state.CSDxrqLd.js";
-import { e as X } from "./query.BBf1UFkC.js";
-import { E as He, b as de, a as $e } from "./index.Cpamj0jB.js";
+import { e as K } from "./query.BBf1UFkC.js";
+import { E as De, b as ce, a as $e } from "./index.Cpamj0jB.js";
 import { c as We } from "./component.styles.CRO4Odto.js";
 import { c as Ae } from "./custom-element.L4WJXn1j.js";
 import { d as Oe } from "./debounce.DaHuiSGU.js";
-import { L as Me } from "./i18n.W6czbRms.js";
-import { w as q } from "./watch.BCJD77bD.js";
+import { L as Be } from "./i18n.W6czbRms.js";
+import { w as X } from "./watch.BCJD77bD.js";
 import { e as j } from "./class-map.BiVq-cVR.js";
-import { o as De } from "./if-defined.BRoBj_Rp.js";
-import { o as je } from "./style-map.llVFPd__.js";
-import { n as V } from "./when.Dr1es41R.js";
-import Te from "../components/icon.js";
-import Be from "../components/popup.js";
+import { o as Me } from "./if-defined.BRoBj_Rp.js";
+import { o as Te } from "./style-map.llVFPd__.js";
+import { n as F } from "./when.Dr1es41R.js";
+import je from "../components/icon.js";
+import Ne from "../components/popup.js";
 import Ze from "../components/resize-observer.js";
 import Ie from "../components/skeleton.js";
-import Ne from "../components/space.js";
-var Pe = /* @__PURE__ */ ((e) => (e.Bottom = "bottom", e.BottomCenter = "bottom-center", e.BottomLeft = "bottom-left", e.BottomRight = "bottom-right", e.CenterCenter = "center-center", e.CenterLeft = "center-left", e.CenterRight = "center-right", e.Left = "left", e.Right = "right", e.Top = "top", e.TopCenter = "top-center", e.TopLeft = "top-left", e.TopRight = "top-right", e))(Pe || {}), Y = /* @__PURE__ */ ((e) => (e.Jump = "jump", e.None = "none", e.TextReveal = "text-reveal", e.Zoom = "zoom", e))(Y || {}), ge = /* @__PURE__ */ ((e) => (e.PopOut = "pop-out", e.WithinBorders = "within-borders", e))(ge || {}), pe = /* @__PURE__ */ ((e) => (e.Fade = "fade", e.Slide = "slide", e))(pe || {}), ne = /* @__PURE__ */ ((e) => (e.Auto = "auto", e.Fixed = "fixed", e))(ne || {}), Ve = Object.defineProperty, E = (e, t, o, h) => {
-  for (var r = void 0, g = e.length - 1, u; g >= 0; g--)
-    (u = e[g]) && (r = u(t, o, r) || r);
-  return r && Ve(t, o, r), r;
+import Ve from "../components/space.js";
+var Pe = /* @__PURE__ */ ((t) => (t.Bottom = "bottom", t.BottomCenter = "bottom-center", t.BottomLeft = "bottom-left", t.BottomRight = "bottom-right", t.CenterCenter = "center-center", t.CenterLeft = "center-left", t.CenterRight = "center-right", t.Left = "left", t.Right = "right", t.Top = "top", t.TopCenter = "top-center", t.TopLeft = "top-left", t.TopRight = "top-right", t))(Pe || {}), q = /* @__PURE__ */ ((t) => (t.Jump = "jump", t.None = "none", t.TextReveal = "text-reveal", t.Zoom = "zoom", t))(q || {}), ue = /* @__PURE__ */ ((t) => (t.PopOut = "pop-out", t.WithinBorders = "within-borders", t))(ue || {}), pe = /* @__PURE__ */ ((t) => (t.Fade = "fade", t.Slide = "slide", t))(pe || {}), se = /* @__PURE__ */ ((t) => (t.Auto = "auto", t.Fixed = "fixed", t))(se || {}), A = /* @__PURE__ */ ((t) => (t.Both = "both", t.Horizontal = "horizontal", t.Vertical = "vertical", t))(A || {}), Fe = Object.defineProperty, E = (t, e, o, h) => {
+  for (var r = void 0, m = t.length - 1, u; m >= 0; m--)
+    (u = t[m]) && (r = u(e, o, r) || r);
+  return r && Fe(e, o, r), r;
 };
-class S extends Re {
+class R extends He {
   constructor() {
-    super(...arguments), this.hasEvent = !1, this.easing = He.Linear, this.highlightBorder = !1, this.highlightColorOverlay = !1, this.highlightDropShadow = !1, this.highlightBackground = !1, this.highlightOpacity = !1, this.effect = Y.None, this.textRevealStyle = pe.Slide, this.zoomStyle = ge.WithinBorders, this.hasSlotContent = !1, this.isCustomSlot = !1, this.isHovering = !1;
+    super(...arguments), this.hasEvent = !1, this.easing = De.Linear, this.highlightBorder = !1, this.highlightColorOverlay = !1, this.highlightDropShadow = !1, this.highlightBackground = !1, this.highlightOpacity = !1, this.effect = q.None, this.textRevealStyle = pe.Slide, this.zoomStyle = ue.WithinBorders, this.hasSlotContent = !1, this.isCustomSlot = !1, this.isHovering = !1;
   }
   get easeCSSVariable() {
-    return de[this.easing] || de.linear;
+    return ce[this.easing] || ce.linear;
   }
   getHighlighterClass() {
     return {
@@ -46,8 +46,8 @@ class S extends Re {
    */
   handleSlotChange() {
     if (this.slotEl) {
-      const t = this.slotEl.assignedElements({ flatten: !0 });
-      this.hasSlotContent = t.length > 0, this.isCustomSlot = !t.some(
+      const e = this.slotEl.assignedElements({ flatten: !0 });
+      this.hasSlotContent = e.length > 0, this.isCustomSlot = !e.some(
         (o) => o.hasAttribute("data-item-id")
       );
     } else
@@ -55,84 +55,90 @@ class S extends Re {
   }
 }
 E([
-  X("slot")
-], S.prototype, "slotEl");
+  K("slot")
+], R.prototype, "slotEl");
 E([
   d({ attribute: "has-event", reflect: !0, type: Boolean })
-], S.prototype, "hasEvent");
+], R.prototype, "hasEvent");
 E([
   d({ reflect: !0, type: String })
-], S.prototype, "easing");
+], R.prototype, "easing");
 E([
   d({ attribute: "highlight-border", reflect: !0, type: Boolean })
-], S.prototype, "highlightBorder");
+], R.prototype, "highlightBorder");
 E([
   d({
     attribute: "highlight-color-overlay",
     reflect: !0,
     type: Boolean
   })
-], S.prototype, "highlightColorOverlay");
+], R.prototype, "highlightColorOverlay");
 E([
   d({
     attribute: "highlight-drop-shadow",
     reflect: !0,
     type: Boolean
   })
-], S.prototype, "highlightDropShadow");
+], R.prototype, "highlightDropShadow");
 E([
   d({ attribute: "highlight-background", reflect: !0, type: Boolean })
-], S.prototype, "highlightBackground");
+], R.prototype, "highlightBackground");
 E([
   d({ attribute: "highlight-opacity", reflect: !0, type: Boolean })
-], S.prototype, "highlightOpacity");
+], R.prototype, "highlightOpacity");
 E([
   d({ attribute: "effect", reflect: !0, type: String })
-], S.prototype, "effect");
+], R.prototype, "effect");
 E([
   d({
     attribute: "text-reveal-style",
     reflect: !0,
     type: String
   })
-], S.prototype, "textRevealStyle");
+], R.prototype, "textRevealStyle");
 E([
   d({
     attribute: "zoom-style",
     reflect: !0,
     type: String
   })
-], S.prototype, "zoomStyle");
+], R.prototype, "zoomStyle");
 E([
   H()
-], S.prototype, "hasSlotContent");
+], R.prototype, "hasSlotContent");
 E([
   H()
-], S.prototype, "isCustomSlot");
+], R.prototype, "isCustomSlot");
 E([
   H()
-], S.prototype, "isHovering");
-var Fe = Object.defineProperty, O = (e, t, o, h) => {
-  for (var r = void 0, g = e.length - 1, u; g >= 0; g--)
-    (u = e[g]) && (r = u(t, o, r) || r);
-  return r && Fe(t, o, r), r;
+], R.prototype, "isHovering");
+var _e = Object.defineProperty, O = (t, e, o, h) => {
+  for (var r = void 0, m = t.length - 1, u; m >= 0; m--)
+    (u = t[m]) && (r = u(e, o, r) || r);
+  return r && _e(e, o, r), r;
 };
-class A extends S {
+class D extends R {
   constructor() {
-    super(), this.width = "", this.height = "", this.resizable = !1, this.heightMode = ne.Fixed, this.noLimit = !1, this.parentContainer = null, this.isResizeActive = !1, this.isResizing = !1, this.resizeSize = {
+    super(), this.width = "", this.height = "", this.resizable = !1, this.heightMode = se.Fixed, this.resizeDirection = A.Both, this.noLimit = !1, this.parentContainer = null, this.isResizeActive = !1, this.isResizing = !1, this.resizeSize = {
       height: 0,
       width: 0
     }, this.maxWidth = 0, this.maxHeight = 0, this.minWidth = 0, this.minHeight = 0, this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
   }
   get ratio() {
-    const t = this.clientWidth || 0, o = this.clientHeight || 0;
-    return !t || !o ? 1 : t / o;
+    const e = this.clientWidth || 0, o = this.clientHeight || 0;
+    return !e || !o ? 1 : e / o;
   }
   get keepRatio() {
-    return this.heightMode === ne.Auto;
+    return this.heightMode === se.Auto;
   }
-  handleDocumentMouseDown(t) {
-    const o = t.composedPath();
+  get canResizeHorizontal() {
+    return this.resizeDirection !== A.Vertical;
+  }
+  get canResizeVertical() {
+    return this.resizeDirection !== A.Horizontal;
+  }
+  handleDocumentMouseDown(e) {
+    const o = e.composedPath();
     this.containingElement && !o.includes(this.containingElement) && this.stopResizing();
   }
   startResizing() {
@@ -147,54 +153,54 @@ class A extends S {
       this.handleDocumentMouseDown
     );
   }
-  handleResizeDragging(t, o = !1, h = !1) {
-    t.preventDefault(), t.stopPropagation(), this.maxWidth = Number.parseInt(getComputedStyle(this).getPropertyValue("--max-width")) || this.parentContainer?.clientWidth || this.parentElement?.clientWidth || 1 / 0, this.maxHeight = Number.parseInt(
+  handleResizeDragging(e, o = !1, h = !1) {
+    e.preventDefault(), e.stopPropagation(), this.maxWidth = Number.parseInt(getComputedStyle(this).getPropertyValue("--max-width")) || this.parentContainer?.clientWidth || this.parentElement?.clientWidth || 1 / 0, this.maxHeight = Number.parseInt(
       getComputedStyle(this).getPropertyValue("--max-height")
     ) || 1 / 0, this.minWidth = Number.parseInt(getComputedStyle(this).getPropertyValue("--min-width")) || 40, this.minHeight = Number.parseInt(
       getComputedStyle(this).getPropertyValue("--min-height")
     ) || 40, this.isResizing = !0;
-    const r = { x: t.pageX, y: t.pageY };
-    let g = 0, u = 0;
-    const C = {
+    const r = { x: e.pageX, y: e.pageY };
+    let m = 0, u = 0;
+    const x = {
       height: this.containingElement?.clientHeight || 0,
       width: this.containingElement?.clientWidth || 0
     };
     if (!this.noLimit && this.parentElement) {
-      const $ = getComputedStyle(this.parentElement), f = $.getPropertyValue("padding-left").trim() || "0px", v = $.getPropertyValue("padding-right").trim() || "0px", M = Number(f.replace("px", "")), y = Number(v.replace("px", "")), R = getComputedStyle(this.parentElement).getPropertyValue("--padding").trim() || "0px", k = Number(R.replace("px", "")), te = Math.max(
+      const $ = getComputedStyle(this.parentElement), p = $.getPropertyValue("padding-left").trim() || "0px", v = $.getPropertyValue("padding-right").trim() || "0px", M = Number(p.replace("px", "")), y = Number(v.replace("px", "")), L = getComputedStyle(this.parentElement).getPropertyValue("--padding").trim() || "0px", C = Number(L.replace("px", "")), ie = Math.max(
         M + y,
-        k * 2
+        C * 2
       );
-      this.maxWidth = Math.max(this.maxWidth - te, 0);
+      this.maxWidth = Math.max(this.maxWidth - ie, 0);
     }
     this.emit("cx-resize-start", {
       detail: {
         element: this,
-        event: t
+        event: e
       }
     });
     const Z = ($) => {
-      g = Number(C.width) + (o ? r.x - $.pageX : $.pageX - r.x), u = Number(C.height) + (h ? r.y - $.pageY : $.pageY - r.y), this.keepRatio && (u >= g / this.ratio && (u = g / this.ratio), g >= u * this.ratio && (g = u * this.ratio));
-      let f = g, v = u;
-      if (this.keepRatio) {
+      m = Number(x.width) + (o ? r.x - $.pageX : $.pageX - r.x), u = Number(x.height) + (h ? r.y - $.pageY : $.pageY - r.y), this.canResizeHorizontal || (m = Number(x.width)), this.canResizeVertical || (u = Number(x.height)), this.resizeDirection === A.Both && this.keepRatio && (u >= m / this.ratio && (u = m / this.ratio), m >= u * this.ratio && (m = u * this.ratio));
+      let p = m, v = u;
+      if (this.resizeDirection === A.Both && this.keepRatio) {
         const M = this.maxWidth ?? 1 / 0, y = this.maxHeight ?? 1 / 0;
-        let R = Math.min(f, M), k = R / this.ratio;
-        k > y && (k = y, R = k * this.ratio), f = R, v = k;
+        let L = Math.min(p, M), C = L / this.ratio;
+        C > y && (C = y, L = C * this.ratio), p = L, v = C;
       } else
-        f = this.maxWidth ? Math.min(f, this.maxWidth) : f, v = this.maxHeight ? Math.min(v, this.maxHeight) : v;
+        p = this.maxWidth ? Math.min(p, this.maxWidth) : p, v = this.maxHeight ? Math.min(v, this.maxHeight) : v;
       this.resizeSize = {
         height: Math.round(v),
-        width: Math.round(f)
-      }, this.keepRatio ? (this.minHeight && this.resizeSize.height < this.minHeight && (this.resizeSize.height = this.minHeight, this.resizeSize.width = Math.round(this.minHeight * this.ratio)), this.minWidth && this.resizeSize.width < this.minWidth && (this.resizeSize.width = this.minWidth, this.resizeSize.height = Math.round(this.minWidth / this.ratio))) : (this.minHeight && this.resizeSize.height < this.minHeight && (this.resizeSize.height = this.minHeight), this.minWidth && this.resizeSize.width < this.minWidth && (this.resizeSize.width = this.minWidth));
+        width: Math.round(p)
+      }, this.resizeDirection === A.Both && this.keepRatio ? (this.minHeight && this.resizeSize.height < this.minHeight && (this.resizeSize.height = this.minHeight, this.resizeSize.width = Math.round(this.minHeight * this.ratio)), this.minWidth && this.resizeSize.width < this.minWidth && (this.resizeSize.width = this.minWidth, this.resizeSize.height = Math.round(this.minWidth / this.ratio))) : (this.minHeight && this.resizeSize.height < this.minHeight && (this.resizeSize.height = this.minHeight), this.minWidth && this.resizeSize.width < this.minWidth && (this.resizeSize.width = this.minWidth));
     }, I = ($) => {
-      if (g > 0 && u > 0) {
-        let f = g, v = u;
-        if (this.keepRatio) {
+      if (m > 0 && u > 0) {
+        let p = m, v = u;
+        if (this.canResizeHorizontal || (p = Number(x.width)), this.canResizeVertical || (v = Number(x.height)), this.resizeDirection === A.Both && this.keepRatio) {
           const M = this.maxWidth ?? 1 / 0, y = this.maxHeight ?? 1 / 0;
-          let R = Math.min(f, M), k = R / this.ratio;
-          k > y && (k = y, R = k * this.ratio), f = R, v = k;
+          let L = Math.min(p, M), C = L / this.ratio;
+          C > y && (C = y, L = C * this.ratio), p = L, v = C;
         } else
-          f = this.maxWidth ? Math.min(f, this.maxWidth) : f, v = this.maxHeight ? Math.min(v, this.maxHeight) : v;
-        this.keepRatio ? (this.minHeight && v < this.minHeight && (v = this.minHeight, f = Math.round(this.minHeight * this.ratio)), this.minWidth && f < this.minWidth && (f = this.minWidth, v = Math.round(this.minWidth / this.ratio))) : (this.minHeight && v < this.minHeight && (v = this.minHeight), this.minWidth && f < this.minWidth && (f = this.minWidth)), this.width = `${Math.round(f)}px`, this.height = `${Math.round(v)}px`, this.resizeSize = {
+          p = this.maxWidth ? Math.min(p, this.maxWidth) : p, v = this.maxHeight ? Math.min(v, this.maxHeight) : v;
+        this.resizeDirection === A.Both && this.keepRatio ? (this.minHeight && v < this.minHeight && (v = this.minHeight, p = Math.round(this.minHeight * this.ratio)), this.minWidth && p < this.minWidth && (p = this.minWidth, v = Math.round(this.minWidth / this.ratio))) : (this.minHeight && v < this.minHeight && (v = this.minHeight), this.minWidth && p < this.minWidth && (p = this.minWidth)), this.width = `${Math.round(p)}px`, this.height = `${Math.round(v)}px`, this.resizeSize = {
           height: 0,
           width: 0
         }, this.isResizing = !1;
@@ -216,173 +222,188 @@ class A extends S {
       once: !0
     });
   }
-  handleResizeDraggingTopLeft(t) {
-    this.handleResizeDragging(t, !0, !0);
+  handleResizeDraggingTopLeft(e) {
+    this.handleResizeDragging(e, !0, !0);
+  }
+  handleResizeDraggingTopRight(e) {
+    this.handleResizeDragging(e, !1, !0);
+  }
+  handleResizeDraggingBottomLeft(e) {
+    this.handleResizeDragging(e, !0, !1);
+  }
+  handleResizeDraggingBottomRight(e) {
+    this.handleResizeDragging(e, !1, !1);
   }
-  handleResizeDraggingTopRight(t) {
-    this.handleResizeDragging(t, !1, !0);
+  handleResizeDraggingLeft(e) {
+    this.handleResizeDragging(e, !0, !1);
   }
-  handleResizeDraggingBottomLeft(t) {
-    this.handleResizeDragging(t, !0, !1);
+  handleResizeDraggingRight(e) {
+    this.handleResizeDragging(e, !1, !1);
   }
-  handleResizeDraggingBottomRight(t) {
-    this.handleResizeDragging(t, !1, !1);
+  handleResizeDraggingTop(e) {
+    this.handleResizeDragging(e, !1, !0);
+  }
+  handleResizeDraggingBottom(e) {
+    this.handleResizeDragging(e, !1, !1);
   }
   renderResizer() {
-    return T`<div class="resizer resizer--top-left" @mousedown=${this.handleResizeDraggingTopLeft}></div><div class="resizer resizer--top-right" @mousedown=${this.handleResizeDraggingTopRight}></div><div class="resizer resizer--bottom-left" @mousedown=${this.handleResizeDraggingBottomLeft}></div><div class="resizer resizer--bottom-right" @mousedown=${this.handleResizeDraggingBottomRight}></div>`;
+    return this.resizeDirection === A.Horizontal ? B`<div class="resizer resizer--left" @mousedown=${this.handleResizeDraggingLeft}></div><div class="resizer resizer--right" @mousedown=${this.handleResizeDraggingRight}></div>` : this.resizeDirection === A.Vertical ? B`<div class="resizer resizer--top" @mousedown=${this.handleResizeDraggingTop}></div><div class="resizer resizer--bottom" @mousedown=${this.handleResizeDraggingBottom}></div>` : B`<div class="resizer resizer--top-left" @mousedown=${this.handleResizeDraggingTopLeft}></div><div class="resizer resizer--top-right" @mousedown=${this.handleResizeDraggingTopRight}></div><div class="resizer resizer--bottom-left" @mousedown=${this.handleResizeDraggingBottomLeft}></div><div class="resizer resizer--bottom-right" @mousedown=${this.handleResizeDraggingBottomRight}></div>`;
   }
 }
 O([
-  X('[part="base"]')
-], A.prototype, "containingElement");
+  K('[part="base"]')
+], D.prototype, "containingElement");
 O([
   d({ reflect: !0, type: String })
-], A.prototype, "width");
+], D.prototype, "width");
 O([
   d({ reflect: !0, type: String })
-], A.prototype, "height");
+], D.prototype, "height");
 O([
   d({ type: Boolean })
-], A.prototype, "resizable");
+], D.prototype, "resizable");
 O([
   d({ attribute: "height-mode", reflect: !0, type: String })
-], A.prototype, "heightMode");
+], D.prototype, "heightMode");
+O([
+  d({ attribute: "resize-direction", reflect: !0, type: String })
+], D.prototype, "resizeDirection");
 O([
   d({ attribute: "no-limit", reflect: !0, type: Boolean })
-], A.prototype, "noLimit");
+], D.prototype, "noLimit");
 O([
   d({ attribute: !1, type: Object })
-], A.prototype, "parentContainer");
+], D.prototype, "parentContainer");
 O([
   H()
-], A.prototype, "isResizeActive");
+], D.prototype, "isResizeActive");
 O([
   H()
-], A.prototype, "isResizing");
+], D.prototype, "isResizing");
 O([
   H()
-], A.prototype, "resizeSize");
-const _e = se`.resizer{background-color:var(--cx-color-primary);z-index:100;width:8px;height:8px;position:absolute}.resizer--top-left{top:calc(-1px - var(--border-width,0px));left:calc(-1px - var(--border-width,0px));cursor:nw-resize}.resizer--top-right{top:calc(-1px - var(--border-width,0px));right:calc(-1px - var(--border-width,0px));cursor:ne-resize}.resizer--bottom-left{bottom:calc(-1px - var(--border-width,0px));left:calc(-1px - var(--border-width,0px));cursor:sw-resize}.resizer--bottom-right{bottom:calc(-1px - var(--border-width,0px));right:calc(-1px - var(--border-width,0px));cursor:se-resize}`;
-var U = /* @__PURE__ */ ((e) => (e.Automatic = "automatic", e.Manual = "manual", e))(U || {});
+], D.prototype, "resizeSize");
+const Ue = he`.resizer{background-color:var(--cx-color-primary);z-index:100;width:8px;height:8px;position:absolute}.resizer--top-left{top:calc(-1px - var(--border-width,0px));left:calc(-1px - var(--border-width,0px));cursor:nw-resize}.resizer--top-right{top:calc(-1px - var(--border-width,0px));right:calc(-1px - var(--border-width,0px));cursor:ne-resize}.resizer--bottom-left{bottom:calc(-1px - var(--border-width,0px));left:calc(-1px - var(--border-width,0px));cursor:sw-resize}.resizer--bottom-right{bottom:calc(-1px - var(--border-width,0px));right:calc(-1px - var(--border-width,0px));cursor:se-resize}.resizer--left{cursor:ew-resize;top:50%;left:0;transform:translateY(-50%)}.resizer--right{cursor:ew-resize;top:50%;right:0;transform:translateY(-50%)}.resizer--top{cursor:ns-resize;top:0;left:50%;transform:translate(-50%)}.resizer--bottom{cursor:ns-resize;bottom:0;left:50%;transform:translate(-50%)}`;
+var Y = /* @__PURE__ */ ((t) => (t.Automatic = "automatic", t.Manual = "manual", t))(Y || {});
 /*! medium-zoom 1.1.0 | MIT License | https://github.com/francoischalifour/medium-zoom */
-var B = Object.assign || function(e) {
-  for (var t = 1; t < arguments.length; t++) {
-    var o = arguments[t];
+var N = Object.assign || function(t) {
+  for (var e = 1; e < arguments.length; e++) {
+    var o = arguments[e];
     for (var h in o)
-      Object.prototype.hasOwnProperty.call(o, h) && (e[h] = o[h]);
-  }
-  return e;
-}, Q = function(t) {
-  return t.tagName === "IMG";
-}, Ue = function(t) {
-  return NodeList.prototype.isPrototypeOf(t);
-}, ee = function(t) {
-  return t && t.nodeType === 1;
-}, ce = function(t) {
-  var o = t.currentSrc || t.src;
+      Object.prototype.hasOwnProperty.call(o, h) && (t[h] = o[h]);
+  }
+  return t;
+}, ee = function(e) {
+  return e.tagName === "IMG";
+}, Ye = function(e) {
+  return NodeList.prototype.isPrototypeOf(e);
+}, te = function(e) {
+  return e && e.nodeType === 1;
+}, me = function(e) {
+  var o = e.currentSrc || e.src;
   return o.substr(-4).toLowerCase() === ".svg";
-}, me = function(t) {
+}, ge = function(e) {
   try {
-    return Array.isArray(t) ? t.filter(Q) : Ue(t) ? [].slice.call(t).filter(Q) : ee(t) ? [t].filter(Q) : typeof t == "string" ? [].slice.call(document.querySelectorAll(t)).filter(Q) : [];
+    return Array.isArray(e) ? e.filter(ee) : Ye(e) ? [].slice.call(e).filter(ee) : te(e) ? [e].filter(ee) : typeof e == "string" ? [].slice.call(document.querySelectorAll(e)).filter(ee) : [];
   } 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`);
   }
-}, Ye = function(t) {
+}, qe = function(e) {
   var o = document.createElement("div");
-  return o.classList.add("medium-zoom-overlay"), o.style.background = t, o;
-}, qe = function(t) {
-  var o = t.getBoundingClientRect(), h = o.top, r = o.left, g = o.width, u = o.height, C = t.cloneNode(), Z = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, I = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
-  return C.removeAttribute("id"), C.style.position = "absolute", C.style.top = h + Z + "px", C.style.left = r + I + "px", C.style.width = g + "px", C.style.height = u + "px", C.style.transform = "", C;
-}, F = function(t, o) {
-  var h = B({
+  return o.classList.add("medium-zoom-overlay"), o.style.background = e, o;
+}, Xe = function(e) {
+  var o = e.getBoundingClientRect(), h = o.top, r = o.left, m = o.width, u = o.height, x = e.cloneNode(), Z = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, I = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
+  return x.removeAttribute("id"), x.style.position = "absolute", x.style.top = h + Z + "px", x.style.left = r + I + "px", x.style.width = m + "px", x.style.height = u + "px", x.style.transform = "", x;
+}, _ = function(e, o) {
+  var h = N({
     bubbles: !1,
     cancelable: !1,
     detail: void 0
   }, o);
   if (typeof window.CustomEvent == "function")
-    return new CustomEvent(t, h);
+    return new CustomEvent(e, h);
   var r = document.createEvent("CustomEvent");
-  return r.initCustomEvent(t, h.bubbles, h.cancelable, h.detail), r;
-}, Xe = function e(t) {
+  return r.initCustomEvent(e, h.bubbles, h.cancelable, h.detail), r;
+}, Ke = function t(e) {
   var o = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, h = window.Promise || function(a) {
     function n() {
     }
     a(n, n);
   }, r = function(a) {
     var n = a.target;
-    if (n === J) {
+    if (n === G) {
       y();
       return;
     }
-    L.indexOf(n) !== -1 && R({ target: n });
-  }, g = function() {
-    if (!(N || !i.original)) {
+    k.indexOf(n) !== -1 && L({ target: n });
+  }, m = function() {
+    if (!(V || !i.original)) {
       var a = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
-      Math.abs(he - a) > c.scrollOffset && setTimeout(y, 150);
+      Math.abs(le - a) > c.scrollOffset && setTimeout(y, 150);
     }
   }, u = function(a) {
     var n = a.key || a.keyCode;
     (n === "Escape" || n === "Esc" || n === 27) && y();
-  }, C = function() {
+  }, x = function() {
     var a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, n = a;
-    if (a.background && (J.style.background = a.background), a.container && a.container instanceof Object && (n.container = B({}, c.container, a.container)), a.template) {
-      var p = ee(a.template) ? a.template : document.querySelector(a.template);
-      n.template = p;
+    if (a.background && (G.style.background = a.background), a.container && a.container instanceof Object && (n.container = N({}, c.container, a.container)), a.template) {
+      var f = te(a.template) ? a.template : document.querySelector(a.template);
+      n.template = f;
     }
-    return c = B({}, c, n), L.forEach(function(z) {
-      z.dispatchEvent(F("medium-zoom:update", {
+    return c = N({}, c, n), k.forEach(function(z) {
+      z.dispatchEvent(_("medium-zoom:update", {
         detail: { zoom: b }
       }));
     }), b;
   }, Z = function() {
     var a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    return e(B({}, c, a));
+    return t(N({}, c, a));
   }, I = function() {
-    for (var a = arguments.length, n = Array(a), p = 0; p < a; p++)
-      n[p] = arguments[p];
-    var z = n.reduce(function(s, w) {
-      return [].concat(s, me(w));
+    for (var a = arguments.length, n = Array(a), f = 0; f < a; f++)
+      n[f] = arguments[f];
+    var z = n.reduce(function(s, S) {
+      return [].concat(s, ge(S));
     }, []);
     return z.filter(function(s) {
-      return L.indexOf(s) === -1;
+      return k.indexOf(s) === -1;
     }).forEach(function(s) {
-      L.push(s), s.classList.add("medium-zoom-image");
-    }), K.forEach(function(s) {
-      var w = s.type, W = s.listener, P = s.options;
-      z.forEach(function(D) {
-        D.addEventListener(w, W, P);
+      k.push(s), s.classList.add("medium-zoom-image");
+    }), J.forEach(function(s) {
+      var S = s.type, W = s.listener, P = s.options;
+      z.forEach(function(T) {
+        T.addEventListener(S, W, P);
       });
     }), b;
   }, $ = function() {
-    for (var a = arguments.length, n = Array(a), p = 0; p < a; p++)
-      n[p] = arguments[p];
+    for (var a = arguments.length, n = Array(a), f = 0; f < a; f++)
+      n[f] = arguments[f];
     i.zoomed && y();
-    var z = n.length > 0 ? n.reduce(function(s, w) {
-      return [].concat(s, me(w));
-    }, []) : L;
+    var z = n.length > 0 ? n.reduce(function(s, S) {
+      return [].concat(s, ge(S));
+    }, []) : k;
     return z.forEach(function(s) {
-      s.classList.remove("medium-zoom-image"), s.dispatchEvent(F("medium-zoom:detach", {
+      s.classList.remove("medium-zoom-image"), s.dispatchEvent(_("medium-zoom:detach", {
         detail: { zoom: b }
       }));
-    }), L = L.filter(function(s) {
+    }), k = k.filter(function(s) {
       return z.indexOf(s) === -1;
     }), b;
-  }, f = function(a, n) {
-    var p = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
-    return L.forEach(function(z) {
-      z.addEventListener("medium-zoom:" + a, n, p);
-    }), K.push({ type: "medium-zoom:" + a, listener: n, options: p }), b;
+  }, p = function(a, n) {
+    var f = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
+    return k.forEach(function(z) {
+      z.addEventListener("medium-zoom:" + a, n, f);
+    }), J.push({ type: "medium-zoom:" + a, listener: n, options: f }), b;
   }, v = function(a, n) {
-    var p = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
-    return L.forEach(function(z) {
-      z.removeEventListener("medium-zoom:" + a, n, p);
-    }), K = K.filter(function(z) {
+    var f = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
+    return k.forEach(function(z) {
+      z.removeEventListener("medium-zoom:" + a, n, f);
+    }), J = J.filter(function(z) {
       return !(z.type === "medium-zoom:" + a && z.listener.toString() === n.toString());
     }), b;
   }, M = function() {
-    var a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, n = a.target, p = function() {
+    var a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, n = a.target, f = function() {
       var s = {
         width: document.documentElement.clientWidth,
         height: document.documentElement.clientHeight,
@@ -390,30 +411,30 @@ See: https://github.com/francoischalifour/medium-zoom`);
         top: 0,
         right: 0,
         bottom: 0
-      }, w = void 0, W = void 0;
+      }, S = void 0, W = void 0;
       if (c.container)
         if (c.container instanceof Object)
-          s = B({}, s, c.container), w = s.width - s.left - s.right - c.margin * 2, W = s.height - s.top - s.bottom - c.margin * 2;
+          s = N({}, s, c.container), S = s.width - s.left - s.right - c.margin * 2, W = s.height - s.top - s.bottom - c.margin * 2;
         else {
-          var P = ee(c.container) ? c.container : document.querySelector(c.container), D = P.getBoundingClientRect(), ie = D.width, fe = D.height, ve = D.left, ze = D.top;
-          s = B({}, s, {
-            width: ie,
-            height: fe,
-            left: ve,
-            top: ze
+          var P = te(c.container) ? c.container : document.querySelector(c.container), T = P.getBoundingClientRect(), oe = T.width, ve = T.height, ze = T.left, ye = T.top;
+          s = N({}, s, {
+            width: oe,
+            height: ve,
+            left: ze,
+            top: ye
           });
         }
-      w = w || s.width - c.margin * 2, W = W || s.height - c.margin * 2;
-      var _ = i.zoomedHd || i.original, ye = ce(_) ? w : _.naturalWidth || w, be = ce(_) ? W : _.naturalHeight || W, G = _.getBoundingClientRect(), xe = G.top, we = G.left, oe = G.width, re = G.height, Se = Math.min(Math.max(oe, ye), w) / oe, Ee = Math.min(Math.max(re, be), W) / re, ae = Math.min(Se, Ee), Ce = (-we + (w - oe) / 2 + c.margin + s.left) / ae, ke = (-xe + (W - re) / 2 + c.margin + s.top) / ae, le = "scale(" + ae + ") translate3d(" + Ce + "px, " + ke + "px, 0)";
-      i.zoomed.style.transform = le, i.zoomedHd && (i.zoomedHd.style.transform = le);
+      S = S || s.width - c.margin * 2, W = W || s.height - c.margin * 2;
+      var U = i.zoomedHd || i.original, be = me(U) ? S : U.naturalWidth || S, xe = me(U) ? W : U.naturalHeight || W, Q = U.getBoundingClientRect(), we = Q.top, Se = Q.left, re = Q.width, ae = Q.height, Re = Math.min(Math.max(re, be), S) / re, Ee = Math.min(Math.max(ae, xe), W) / ae, ne = Math.min(Re, Ee), Ce = (-Se + (S - re) / 2 + c.margin + s.left) / ne, ke = (-we + (W - ae) / 2 + c.margin + s.top) / ne, de = "scale(" + ne + ") translate3d(" + Ce + "px, " + ke + "px, 0)";
+      i.zoomed.style.transform = de, i.zoomedHd && (i.zoomedHd.style.transform = de);
     };
     return new h(function(z) {
-      if (n && L.indexOf(n) === -1) {
+      if (n && k.indexOf(n) === -1) {
         z(b);
         return;
       }
-      var s = function ie() {
-        N = !1, i.zoomed.removeEventListener("transitionend", ie), i.original.dispatchEvent(F("medium-zoom:opened", {
+      var s = function oe() {
+        V = !1, i.zoomed.removeEventListener("transitionend", oe), i.original.dispatchEvent(_("medium-zoom:opened", {
           detail: { zoom: b }
         })), z(b);
       };
@@ -423,103 +444,103 @@ See: https://github.com/francoischalifour/medium-zoom`);
       }
       if (n)
         i.original = n;
-      else if (L.length > 0) {
-        var w = L;
-        i.original = w[0];
+      else if (k.length > 0) {
+        var S = k;
+        i.original = S[0];
       } else {
         z(b);
         return;
       }
-      if (i.original.dispatchEvent(F("medium-zoom:open", {
+      if (i.original.dispatchEvent(_("medium-zoom:open", {
         detail: { zoom: b }
-      })), he = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, N = !0, i.zoomed = qe(i.original), document.body.appendChild(J), c.template) {
-        var W = ee(c.template) ? c.template : document.querySelector(c.template);
+      })), le = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, V = !0, i.zoomed = Xe(i.original), document.body.appendChild(G), c.template) {
+        var W = te(c.template) ? c.template : document.querySelector(c.template);
         i.template = document.createElement("div"), i.template.appendChild(W.content.cloneNode(!0)), document.body.appendChild(i.template);
       }
       if (i.original.parentElement && i.original.parentElement.tagName === "PICTURE" && i.original.currentSrc && (i.zoomed.src = i.original.currentSrc), document.body.appendChild(i.zoomed), window.requestAnimationFrame(function() {
         document.body.classList.add("medium-zoom--opened");
       }), i.original.classList.add("medium-zoom-image--hidden"), i.zoomed.classList.add("medium-zoom-image--opened"), i.zoomed.addEventListener("click", y), i.zoomed.addEventListener("transitionend", s), i.original.getAttribute("data-zoom-src")) {
         i.zoomedHd = i.zoomed.cloneNode(), i.zoomedHd.removeAttribute("srcset"), i.zoomedHd.removeAttribute("sizes"), i.zoomedHd.removeAttribute("loading"), i.zoomedHd.src = i.zoomed.getAttribute("data-zoom-src"), i.zoomedHd.onerror = function() {
-          clearInterval(P), console.warn("Unable to reach the zoom image target " + i.zoomedHd.src), i.zoomedHd = null, p();
+          clearInterval(P), console.warn("Unable to reach the zoom image target " + i.zoomedHd.src), i.zoomedHd = null, f();
         };
         var P = setInterval(function() {
-          i.zoomedHd.complete && (clearInterval(P), i.zoomedHd.classList.add("medium-zoom-image--opened"), i.zoomedHd.addEventListener("click", y), document.body.appendChild(i.zoomedHd), p());
+          i.zoomedHd.complete && (clearInterval(P), i.zoomedHd.classList.add("medium-zoom-image--opened"), i.zoomedHd.addEventListener("click", y), document.body.appendChild(i.zoomedHd), f());
         }, 10);
       } else if (i.original.hasAttribute("srcset")) {
         i.zoomedHd = i.zoomed.cloneNode(), i.zoomedHd.removeAttribute("sizes"), i.zoomedHd.removeAttribute("loading");
-        var D = i.zoomedHd.addEventListener("load", function() {
-          i.zoomedHd.removeEventListener("load", D), i.zoomedHd.classList.add("medium-zoom-image--opened"), i.zoomedHd.addEventListener("click", y), document.body.appendChild(i.zoomedHd), p();
+        var T = i.zoomedHd.addEventListener("load", function() {
+          i.zoomedHd.removeEventListener("load", T), i.zoomedHd.classList.add("medium-zoom-image--opened"), i.zoomedHd.addEventListener("click", y), document.body.appendChild(i.zoomedHd), f();
         });
       } else
-        p();
+        f();
     });
   }, y = function() {
     return new h(function(a) {
-      if (N || !i.original) {
+      if (V || !i.original) {
         a(b);
         return;
       }
-      var n = function p() {
-        i.original.classList.remove("medium-zoom-image--hidden"), document.body.removeChild(i.zoomed), i.zoomedHd && document.body.removeChild(i.zoomedHd), document.body.removeChild(J), i.zoomed.classList.remove("medium-zoom-image--opened"), i.template && document.body.removeChild(i.template), N = !1, i.zoomed.removeEventListener("transitionend", p), i.original.dispatchEvent(F("medium-zoom:closed", {
+      var n = function f() {
+        i.original.classList.remove("medium-zoom-image--hidden"), document.body.removeChild(i.zoomed), i.zoomedHd && document.body.removeChild(i.zoomedHd), document.body.removeChild(G), i.zoomed.classList.remove("medium-zoom-image--opened"), i.template && document.body.removeChild(i.template), V = !1, i.zoomed.removeEventListener("transitionend", f), i.original.dispatchEvent(_("medium-zoom:closed", {
           detail: { zoom: b }
         })), i.original = null, i.zoomed = null, i.zoomedHd = null, i.template = null, a(b);
       };
-      N = !0, document.body.classList.remove("medium-zoom--opened"), i.zoomed.style.transform = "", i.zoomedHd && (i.zoomedHd.style.transform = ""), i.template && (i.template.style.transition = "opacity 150ms", i.template.style.opacity = 0), i.original.dispatchEvent(F("medium-zoom:close", {
+      V = !0, document.body.classList.remove("medium-zoom--opened"), i.zoomed.style.transform = "", i.zoomedHd && (i.zoomedHd.style.transform = ""), i.template && (i.template.style.transition = "opacity 150ms", i.template.style.opacity = 0), i.original.dispatchEvent(_("medium-zoom:close", {
         detail: { zoom: b }
       })), i.zoomed.addEventListener("transitionend", n);
     });
-  }, R = function() {
+  }, L = function() {
     var a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, n = a.target;
     return i.original ? y() : M({ target: n });
-  }, k = function() {
+  }, C = function() {
     return c;
-  }, te = function() {
-    return L;
-  }, ue = function() {
+  }, ie = function() {
+    return k;
+  }, fe = function() {
     return i.original;
-  }, L = [], K = [], N = !1, he = 0, c = o, i = {
+  }, k = [], J = [], V = !1, le = 0, c = o, i = {
     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]" ? c = t : (t || typeof t == "string") && I(t), c = B({
+  Object.prototype.toString.call(e) === "[object Object]" ? c = e : (e || typeof e == "string") && I(e), c = N({
     margin: 0,
     background: "#fff",
     scrollOffset: 40,
     container: null,
     template: null
   }, c);
-  var J = Ye(c.background);
-  document.addEventListener("click", r), document.addEventListener("keyup", u), document.addEventListener("scroll", g), window.addEventListener("resize", y);
+  var G = qe(c.background);
+  document.addEventListener("click", r), document.addEventListener("keyup", u), document.addEventListener("scroll", m), window.addEventListener("resize", y);
   var b = {
     open: M,
     close: y,
-    toggle: R,
-    update: C,
+    toggle: L,
+    update: x,
     clone: Z,
     attach: I,
     detach: $,
-    on: f,
+    on: p,
     off: v,
-    getOptions: k,
-    getImages: te,
-    getZoomedImage: ue
+    getOptions: C,
+    getImages: ie,
+    getZoomedImage: fe
   };
   return b;
 };
-function Ke(e, t) {
-  t === void 0 && (t = {});
-  var o = t.insertAt;
+function Je(t, e) {
+  e === void 0 && (e = {});
+  var o = e.insertAt;
   if (!(typeof document > "u")) {
     var h = document.head || document.getElementsByTagName("head")[0], r = document.createElement("style");
-    r.type = "text/css", o === "top" && h.firstChild ? h.insertBefore(r, h.firstChild) : h.appendChild(r), r.styleSheet ? r.styleSheet.cssText = e : r.appendChild(document.createTextNode(e));
+    r.type = "text/css", o === "top" && h.firstChild ? h.insertBefore(r, h.firstChild) : h.appendChild(r), r.styleSheet ? r.styleSheet.cssText = t : r.appendChild(document.createTextNode(t));
   }
 }
-var Je = ".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}";
-Ke(Je);
-const Ge = se`: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)}`, Qe = se`
+var Ge = ".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}";
+Je(Ge);
+const Qe = he`: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)}`, et = he`
   :host {
     --justify-content: flex-start;
     --border-radius: 0px;
@@ -572,7 +593,7 @@ const Ge = se`:host([effect=jump]) .container,:host([effect=text-reveal]) .conta
     max-height: 100%;
   }
 
-  ${Ge}
+  ${Qe}
 
   :host([block]) {
     width: 100%;
@@ -765,14 +786,14 @@ const Ge = se`:host([effect=jump]) .container,:host([effect=text-reveal]) .conta
     --font-size: var(--cx-font-size-4x-large);
   }
 `;
-var et = Object.defineProperty, tt = Object.getOwnPropertyDescriptor, m = (e, t, o, h) => {
-  for (var r = h > 1 ? void 0 : h ? tt(t, o) : t, g = e.length - 1, u; g >= 0; g--)
-    (u = e[g]) && (r = (h ? u(t, o, r) : u(r)) || r);
-  return h && r && et(t, o, r), r;
+var tt = Object.defineProperty, it = Object.getOwnPropertyDescriptor, g = (t, e, o, h) => {
+  for (var r = h > 1 ? void 0 : h ? it(e, o) : e, m = t.length - 1, u; m >= 0; m--)
+    (u = t[m]) && (r = (h ? u(e, o, r) : u(r)) || r);
+  return h && r && tt(e, o, r), r;
 };
-let l = class extends A {
+let l = class extends D {
   constructor() {
-    super(...arguments), this.localize = new Me(this), this.isLoaded = !1, this.isError = !1, this.src = "", this.placeholder = "", this.alt = "", this.objectFit = $e.Fill, this.skeleton = !1, this.fallback = !1, this.canZoom = !1, this.loading = !1, this.block = !1, this.htmlLoading = "lazy", this.clickHandlerType = U.Automatic, this.isZoomed = !1, this.imageRatio = 1, this.parsedAlt = "", this.parsedAltDarkMode = "", this.zoom = null, this.lastPatchedWidth = null;
+    super(...arguments), this.localize = new Be(this), this.isLoaded = !1, this.isError = !1, this.src = "", this.placeholder = "", this.alt = "", this.objectFit = $e.Fill, this.skeleton = !1, this.fallback = !1, this.canZoom = !1, this.loading = !1, this.block = !1, this.htmlLoading = "lazy", this.clickHandlerType = Y.Automatic, this.isZoomed = !1, this.imageRatio = 1, this.parsedAlt = "", this.parsedAltDarkMode = "", this.zoom = null, this.lastPatchedWidth = null;
   }
   get currentAltValue() {
     return this.alt;
@@ -781,25 +802,25 @@ let l = class extends A {
     return this.src;
   }
   get highlighterTabindex() {
-    return this.hasZoomAction && this.clickHandlerType === U.Automatic ? "0" : void 0;
+    return this.hasZoomAction && this.clickHandlerType === Y.Automatic ? "0" : void 0;
   }
   get highlighterRole() {
-    return this.hasZoomAction && this.clickHandlerType === U.Automatic ? "button" : "img";
+    return this.hasZoomAction && this.clickHandlerType === Y.Automatic ? "button" : "img";
   }
   get highlighterClass() {
     return {
       "highlightable-item": !0,
-      "highlightable-item--effect-text-reveal": this.effect === Y.TextReveal,
+      "highlightable-item--effect-text-reveal": this.effect === q.TextReveal,
       [`highlightable-item--text-reveal-style-${this.textRevealStyle}`]: !0
     };
   }
   get imageClass() {
-    let e = "landscape", t = this.ratio;
+    let t = "landscape", e = this.ratio;
     const o = this.width.endsWith("%") ? this.clientWidth : Number.parseFloat(this.width), h = this.isResizing ? this.resizeSize.width : o, r = this.isResizing ? this.resizeSize.height : Number.parseFloat(this.height);
-    return h && r && (t = h / r), t > this.imageRatio && (e = "portrait"), {
+    return h && r && (e = h / r), e > this.imageRatio && (t = "portrait"), {
       image: !0,
       [`image--${this.objectFit}`]: !0,
-      [`image--${e}`]: !0,
+      [`image--${t}`]: !0,
       [`image--height-${this.heightMode}`]: !0,
       "image--can-zoom": this.canZoom,
       "image--has-action": this.hasZoomAction,
@@ -839,8 +860,8 @@ let l = class extends A {
   handleBlur() {
     this.isZoomed && this.zoom?.close();
   }
-  handleKeyDown(e) {
-    e.target === this.highlighterElement && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.highlighterElement.click());
+  handleKeyDown(t) {
+    t.target === this.highlighterElement && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.highlighterElement.click());
   }
   async handleCanZoomChange() {
     await this.updateComplete, this.hasZoomAction ? this.initZoom() : (this.zoom?.detach(), this.zoom = null);
@@ -852,7 +873,7 @@ let l = class extends A {
     this.isLoaded = !1, this.isError = !1;
   }
   async initZoom() {
-    this.zoomImageElement && !this.zoom && this.isLoaded && (this.zoom = Xe(this.zoomImageElement, {
+    this.zoomImageElement && !this.zoom && this.isLoaded && (this.zoom = Ke(this.zoomImageElement, {
       background: "light-dark(rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.8))",
       margin: 0,
       scrollOffset: 0
@@ -862,170 +883,170 @@ let l = class extends A {
       this.emit("cx-image-zoom-close"), this.isZoomed = !1;
     }));
   }
-  handleLoad(e) {
-    const t = e?.currentTarget ?? this.imageElement;
-    if (!t)
+  handleLoad(t) {
+    const e = t?.currentTarget ?? this.imageElement;
+    if (!e)
       return;
-    const { naturalHeight: o, naturalWidth: h } = t;
+    const { naturalHeight: o, naturalWidth: h } = e;
     this.imageRatio = h / o, this.isLoaded || (this.emit("cx-load"), this.isLoaded = !0, this.isError = !1);
   }
   handleError() {
     this.emit("cx-error"), this.isLoaded = !0, this.isError = !0;
   }
   handleSizeChange() {
-    const e = this.isResizing ? `${this.resizeSize.width}px` : this.width, t = this.isResizing ? `${this.resizeSize.height}px` : this.height;
-    this.width || this.isResizing ? this.style.setProperty("--width", e) : this.style.removeProperty("--width"), this.height || this.isResizing ? this.style.setProperty("--height", t) : this.style.removeProperty("--height");
+    const t = this.isResizing ? `${this.resizeSize.width}px` : this.width, e = this.isResizing ? `${this.resizeSize.height}px` : this.height;
+    this.width || this.isResizing ? this.style.setProperty("--width", t) : this.style.removeProperty("--width"), this.height || this.isResizing ? this.style.setProperty("--height", e) : this.style.removeProperty("--height");
   }
-  handleResize(e) {
-    const { entries: t } = e.detail;
-    for (const o of t)
+  handleResize(t) {
+    const { entries: e } = t.detail;
+    for (const o of e)
       o.target === this.highlighterElement && this.width.endsWith("%") && !this.isResizing && Math.abs(o.contentRect.width - (this.lastPatchedWidth ?? 0)) > 1 && this.updateLastPatchedWidth(o.contentRect.width);
   }
-  updateLastPatchedWidth(e) {
-    this.lastPatchedWidth = e, this.requestUpdate();
+  updateLastPatchedWidth(t) {
+    this.lastPatchedWidth = t, this.requestUpdate();
   }
   /**
    * Support CMS5 click action for the image.
    */
-  handleClickAction(e) {
-    !(e.target instanceof HTMLElement) || this.clickHandlerType === U.Manual || this.canZoom && this.openZoom();
+  handleClickAction(t) {
+    !(t.target instanceof HTMLElement) || this.clickHandlerType === Y.Manual || this.canZoom && this.openZoom();
   }
-  updated(e) {
-    super.updated(e), (e.has("width") || e.has("height") || e.has("resizeSize")) && this.handleSizeChange();
+  updated(t) {
+    super.updated(t), (t.has("width") || t.has("height") || t.has("resizeSize")) && this.handleSizeChange();
   }
   openZoom() {
     this.zoom && this.zoom.open();
   }
   renderContent() {
-    const e = this.currentSrc, t = this.currentAltValue;
-    return T`<div part="content" slot="anchor" class=${j(this.highlighterClass)}><img part="image" class=${j(this.imageClass)} src=${e || this.placeholder} alt=${t} aria-label=${t} crossorigin="anonymous" @load=${this.handleLoad} @error=${this.handleError} loading=${this.htmlLoading}></div>`;
+    const t = this.currentSrc, e = this.currentAltValue;
+    return B`<div part="content" slot="anchor" class=${j(this.highlighterClass)}><img part="image" class=${j(this.imageClass)} src=${t || this.placeholder} alt=${e} aria-label=${e} crossorigin="anonymous" @load=${this.handleLoad} @error=${this.handleError} loading=${this.htmlLoading}></div>`;
   }
   render() {
-    const e = this.hasZoomAction, t = this.currentAltValue, o = !this.currentSrc && !this.placeholder;
-    return T`<div part="base" class=${j({
+    const t = this.hasZoomAction, e = this.currentAltValue, o = !this.currentSrc && !this.placeholder;
+    return B`<div part="base" class=${j({
       container: !0,
       "container--empty": o,
       "container--loading": this.loading,
       "container--resizing": this.resizable && this.isResizeActive
-    })} style=${je({
+    })} 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=${De(this.highlighterTabindex)} role=${this.highlighterRole} aria-label=${t} aria-roledescription=${this.localize.term("image")} class=${j(o ? {} : this.getHighlighterClass())} @click=${this.handleClickAction} @mouseenter=${this.handleMouseEnter} @mouseleave=${this.handleMouseLeave} @blur=${this.handleBlur}>${V(
+    })} data-empty-label=${this.localize.term("emptyImage")} @click=${this.startResizing} @keydown=${this.handleKeyDown}><cx-resize-observer @cx-resize=${this.handleResize}><div part="highlighter" tabindex=${Me(this.highlighterTabindex)} role=${this.highlighterRole} aria-label=${e} aria-roledescription=${this.localize.term("image")} class=${j(o ? {} : this.getHighlighterClass())} @click=${this.handleClickAction} @mouseenter=${this.handleMouseEnter} @mouseleave=${this.handleMouseLeave} @blur=${this.handleBlur}>${F(
       o,
       () => Le,
-      () => V(
-        this.effect === Y.Jump || this.effect === Y.Zoom,
-        () => T`<cx-popup class="popup-container" strategy="absolute" active placement="center" sync="both">${this.renderContent()}</cx-popup>`,
+      () => F(
+        this.effect === q.Jump || this.effect === q.Zoom,
+        () => B`<cx-popup class="popup-container" strategy="absolute" active placement="center" sync="both">${this.renderContent()}</cx-popup>`,
         () => this.renderContent()
       )
-    )}<div class="zoom-image-container">${V(
-      e,
-      () => T`<img part="zoom-image" class=${j({
+    )}<div class="zoom-image-container">${F(
+      t,
+      () => B`<img part="zoom-image" class=${j({
         "zoom-image": !0,
         "zoom-image--hidden": !this.isZoomed
       })} src=${this.currentSrc || this.placeholder} alt="" aria-hidden="true" decoding="async" draggable="false" crossorigin="anonymous">`
-    )}</div>${V(
+    )}</div>${F(
       this.skeleton && !this.isLoaded && !this.isError || this.loading,
-      () => T`<slot name="skeleton" part="skeleton"><div class=${j({
+      () => B`<slot name="skeleton" part="skeleton"><div class=${j({
         skeleton: !0
       })}><cx-skeleton effect="sheen"></cx-skeleton></div></slot>`
     )}
-          ${V(this.isError && this.fallback, () => T`<slot name="fallback" part="fallback"><cx-space class=${j({ 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>${V(this.resizable && this.isResizeActive, () => this.renderResizer())}</div>`;
+          ${F(this.isError && this.fallback, () => B`<slot name="fallback" part="fallback"><cx-space class=${j({ 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>${F(this.resizable && this.isResizeActive, () => this.renderResizer())}</div>`;
   }
 };
-l.styles = [We, _e, Qe];
+l.styles = [We, Ue, et];
 l.dependencies = {
-  "cx-icon": Te,
-  "cx-popup": Be,
+  "cx-icon": je,
+  "cx-popup": Ne,
   "cx-resize-observer": Ze,
   "cx-skeleton": Ie,
-  "cx-space": Ne
+  "cx-space": Ve
 };
-m([
-  X(".image")
+g([
+  K(".image")
 ], l.prototype, "imageElement", 2);
-m([
-  X(".zoom-image")
+g([
+  K(".zoom-image")
 ], l.prototype, "zoomImageElement", 2);
-m([
-  X(".highlighter")
+g([
+  K(".highlighter")
 ], l.prototype, "highlighterElement", 2);
-m([
+g([
   H()
 ], l.prototype, "isLoaded", 2);
-m([
+g([
   H()
 ], l.prototype, "isError", 2);
-m([
+g([
   d({ reflect: !0, type: String })
 ], l.prototype, "src", 2);
-m([
+g([
   d({ reflect: !0, type: String })
 ], l.prototype, "placeholder", 2);
-m([
+g([
   d({ reflect: !0, type: String })
 ], l.prototype, "alt", 2);
-m([
+g([
   d({ attribute: "object-fit", reflect: !0 })
 ], l.prototype, "objectFit", 2);
-m([
+g([
   d({ reflect: !0, type: Boolean })
 ], l.prototype, "skeleton", 2);
-m([
+g([
   d({ reflect: !0, type: Boolean })
 ], l.prototype, "fallback", 2);
-m([
+g([
   d({ attribute: "can-zoom", reflect: !0, type: Boolean })
 ], l.prototype, "canZoom", 2);
-m([
+g([
   d({ reflect: !0, type: Boolean })
 ], l.prototype, "loading", 2);
-m([
+g([
   d({ reflect: !0, type: Boolean })
 ], l.prototype, "block", 2);
-m([
+g([
   d({ attribute: "html-loading", reflect: !0, type: String })
 ], l.prototype, "htmlLoading", 2);
-m([
+g([
   d({ attribute: "click-handler-type", reflect: !0, type: String })
 ], l.prototype, "clickHandlerType", 2);
-m([
+g([
   H()
 ], l.prototype, "isZoomed", 2);
-m([
+g([
   H()
 ], l.prototype, "imageRatio", 2);
-m([
+g([
   H()
 ], l.prototype, "parsedAlt", 2);
-m([
+g([
   H()
 ], l.prototype, "parsedAltDarkMode", 2);
-m([
-  q("isLoaded"),
-  q("canZoom", { waitUntilFirstUpdate: !0 })
+g([
+  X("isLoaded"),
+  X("canZoom", { waitUntilFirstUpdate: !0 })
 ], l.prototype, "handleCanZoomChange", 1);
-m([
-  q("objectFit", { waitUntilFirstUpdate: !0 })
+g([
+  X("objectFit", { waitUntilFirstUpdate: !0 })
 ], l.prototype, "handleObjectFitChange", 1);
-m([
-  q("src"),
-  q("srcDarkMode")
+g([
+  X("src"),
+  X("srcDarkMode")
 ], l.prototype, "handleSrcChange", 1);
-m([
+g([
   Oe(100)
 ], l.prototype, "updateLastPatchedWidth", 1);
-l = m([
+l = g([
   Ae("cx-image")
 ], l);
 export {
   l as C,
   Pe as H,
-  A as R,
-  S as a,
-  Y as b,
-  U as c,
+  D as R,
+  R as a,
+  q as b,
+  Y as c,
   pe as d,
-  ge as e,
-  ne as f,
-  _e as r
+  ue as e,
+  se as f,
+  Ue as r
 };