builder-settings-types 0.0.378 → 0.0.380

package/dist/builder-settings-types.es.js

@@ -1,5 +1,5 @@
 const Ot = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
-let Mt = (c = 21) => {
+let dt = (c = 21) => {
   let t = "", e = crypto.getRandomValues(new Uint8Array(c |= 0));
   for (; c--; )
     t += Ot[e[c] & 63];
@@ -111,7 +111,7 @@ class Bt {
     this.observer && (this.observer.disconnect(), this.observer = void 0), this.observedElements.clear();
   }
 }
-const mt = new Bt();
+const vt = new Bt();
 function it(c) {
   if (c === null || typeof c != "object") return c;
   if (c instanceof Date) return new Date(c.getTime());
@@ -144,7 +144,7 @@ function At(c) {
 }
 const I = class I {
   constructor(t = {}) {
-    this.props = t, this.dataPropsPath = "", this.id = t.id || Mt(), this.value = this.props.default, this.desktop = this.props.default, this.title = t.title || "", this.includeGetJson = t.includeGetJson !== void 0 ? t.includeGetJson : !0;
+    this.props = t, this.dataPropsPath = "", this.id = t.id || dt(), this.value = this.props.default, this.desktop = this.props.default, this.title = t.title || "", this.includeGetJson = t.includeGetJson !== void 0 ? t.includeGetJson : !0;
   }
   static SetUploadUrl(t) {
     globalThis.DefaultUploadUrl = t, I.DefaultUploadUrl = t;
@@ -268,10 +268,10 @@ function R(c) {
 function M(c) {
   return c instanceof $;
 }
-function vt(c) {
+function ft(c) {
   return R(c) || M(c);
 }
-const dt = (c, t, e) => {
+const pt = (c, t, e) => {
   let i = !1, s = 0, n = 0, o = 0, a = 0;
   const l = (d) => {
     if (d.target.closest("button")) return;
@@ -280,9 +280,9 @@ const dt = (c, t, e) => {
     o = p.left, a = p.top, document.addEventListener("mousemove", r), document.addEventListener("mouseup", h), document.body.style.userSelect = "none";
   }, r = (d) => {
     if (!i) return;
-    const p = d.clientX - s, u = d.clientY - n, f = window.innerWidth, m = window.innerHeight, g = t.offsetWidth, C = t.offsetHeight;
+    const p = d.clientX - s, u = d.clientY - n, C = window.innerWidth, m = window.innerHeight, g = t.offsetWidth, f = t.offsetHeight;
     let v = o + p, y = a + u;
-    v = Math.max(8, Math.min(f - g - 8, v)), y = Math.max(8, Math.min(m - C - 8, y)), t.style.left = `${v}px`, t.style.top = `${y}px`, e == null || e(v, y);
+    v = Math.max(8, Math.min(C - g - 8, v)), y = Math.max(8, Math.min(m - f - 8, y)), t.style.left = `${v}px`, t.style.top = `${y}px`, e == null || e(v, y);
   }, h = () => {
     i = !1, document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", h), document.body.style.userSelect = "";
   };
@@ -432,7 +432,7 @@ const dt = (c, t, e) => {
     };
   }
   return { color: U(t) || t, position: 0, opacity: 100 };
-}, ft = (c) => {
+}, Ct = (c) => {
   const t = [];
   let e = "", i = 0;
   for (let s = 0; s < c.length; s++) {
@@ -446,7 +446,7 @@ const dt = (c, t, e) => {
     e += n;
   }
   return e.trim() && t.push(e.trim()), t;
-}, Ct = (c, t) => {
+}, yt = (c, t) => {
   const e = new RegExp(`${t}\\s*\\(`, "i"), i = c.match(e);
   if (!i) return null;
   const s = i.index + i[0].length;
@@ -467,7 +467,7 @@ const dt = (c, t, e) => {
     "contain",
     "cover"
   ].includes(t) ? !1 : /^#[0-9a-f]{3,8}$/i.test(t) || /^rgb/i.test(c) || /^hsl/i.test(c) || Dt(t);
-}, yt = (c) => {
+}, Et = (c) => {
   const t = [];
   return c.forEach((e, i) => {
     const s = e.trim();
@@ -495,9 +495,9 @@ const dt = (c, t, e) => {
     const s = Nt(t);
     return D({ type: "solid", angle: 0, stops: [s] });
   }
-  const e = Ct(t, "linear-gradient");
+  const e = yt(t, "linear-gradient");
   if (e) {
-    const s = ft(e);
+    const s = Ct(e);
     let n = 90, o = s;
     const a = s[0];
     if (a.includes("deg")) {
@@ -513,12 +513,12 @@ const dt = (c, t, e) => {
       "to top right": 45,
       "to top left": 315
     }[a] ?? 90, o = s.slice(1));
-    const l = yt(o);
+    const l = Et(o);
     return l.length ? D({ type: "linear", angle: n, stops: l }) : null;
   }
-  const i = Ct(t, "radial-gradient");
+  const i = yt(t, "radial-gradient");
   if (i) {
-    const s = ft(i), n = s[0] && !Gt(s[0]) ? s.slice(1) : s, o = yt(n);
+    const s = Ct(i), n = s[0] && !Gt(s[0]) ? s.slice(1) : s, o = Et(n);
     return o.length ? D({ type: "radial", angle: 0, stops: o }) : null;
   }
   return null;
@@ -623,7 +623,7 @@ const dt = (c, t, e) => {
 };
 X.STORAGE_KEY = "settingsLib_recentColors", X.MAX_COLORS = 18, X.colors = null;
 let z = X;
-const pt = (c, t) => {
+const ut = (c, t) => {
   const e = document.createElement("div");
   e.className = "color-picker-recent-section";
   const i = document.createElement("div");
@@ -747,7 +747,7 @@ class Zt {
     const i = document.createElement("span");
     i.textContent = "Color";
     const s = document.createElement("button");
-    s.className = "color-picker-close", s.innerHTML = Tt, s.addEventListener("click", () => this.close(!0)), e.appendChild(i), e.appendChild(s), dt(e, t);
+    s.className = "color-picker-close", s.innerHTML = Tt, s.addEventListener("click", () => this.close(!0)), e.appendChild(i), e.appendChild(s), pt(e, t);
     const n = document.createElement("div");
     n.className = "color-picker-area", this.colorArea = n;
     const o = document.createElement("div");
@@ -766,27 +766,27 @@ class Zt {
     p.className = "color-picker-opacity", this.opacitySlider = p;
     const u = document.createElement("div");
     u.className = "color-picker-opacity-marker", this.opacityMarker = u, p.appendChild(u), r.appendChild(h), r.appendChild(p), a.appendChild(l), a.appendChild(r);
-    const f = pt((E) => {
+    const C = ut((E) => {
       var L;
       this.setColor(E), (L = this.onChange) == null || L.call(this, E, this.currentOpacity);
     }, this.recentScope);
-    this.recentSectionRefresh = f.refresh;
+    this.recentSectionRefresh = C.refresh;
     const m = document.createElement("div");
     m.className = "color-picker-format-section";
     const g = document.createElement("select");
     g.className = "color-picker-format-select", this.select = g;
-    const C = document.createElement("option");
-    C.value = "hex", C.textContent = "HEX";
+    const f = document.createElement("option");
+    f.value = "hex", f.textContent = "HEX";
     const v = document.createElement("option");
     v.value = "rgb", v.textContent = "RGB";
     const y = document.createElement("option");
-    y.value = "hsl", y.textContent = "HSL", g.appendChild(C), g.appendChild(v), g.appendChild(y);
+    y.value = "hsl", y.textContent = "HSL", g.appendChild(f), g.appendChild(v), g.appendChild(y);
     const b = document.createElement("input");
     b.type = "text", b.className = "color-picker-color-input", b.value = this.currentColor, this.input = b;
     const k = document.createElement("div");
     k.className = "color-picker-input-container";
     const x = document.createElement("button");
-    return x.className = "color-picker-copy-inside", x.textContent = "Copy", k.appendChild(b), k.appendChild(x), m.appendChild(g), m.appendChild(k), t.appendChild(e), t.appendChild(n), t.appendChild(a), t.appendChild(f.container), t.appendChild(m), t.addEventListener("click", (E) => E.stopPropagation()), this.bind(n, h, p, b, g, x, l), t;
+    return x.className = "color-picker-copy-inside", x.textContent = "Copy", k.appendChild(b), k.appendChild(x), m.appendChild(g), m.appendChild(k), t.appendChild(e), t.appendChild(n), t.appendChild(a), t.appendChild(C.container), t.appendChild(m), t.addEventListener("click", (E) => E.stopPropagation()), this.bind(n, h, p, b, g, x, l), t;
   }
   createBackdrop() {
     const t = document.createElement("div");
@@ -795,37 +795,37 @@ class Zt {
   bind(t, e, i, s, n, o, a) {
     const l = (d) => {
       var v;
-      const p = t.getBoundingClientRect(), u = Math.max(0, Math.min(1, (d.clientX - p.left) / p.width)), f = Math.max(0, Math.min(1, (d.clientY - p.top) / p.height));
-      this.colorMarker.style.left = `${u * 100}%`, this.colorMarker.style.top = `${f * 100}%`;
-      const g = this.parsePercentage(this.hueMarker.style.left || "0%") * 360, C = Z(g, u, 1 - f);
-      this.currentColor = C, this.syncInput(), this.updateOpacityBg(), (v = this.onChange) == null || v.call(this, C, this.currentOpacity);
+      const p = t.getBoundingClientRect(), u = Math.max(0, Math.min(1, (d.clientX - p.left) / p.width)), C = Math.max(0, Math.min(1, (d.clientY - p.top) / p.height));
+      this.colorMarker.style.left = `${u * 100}%`, this.colorMarker.style.top = `${C * 100}%`;
+      const g = this.parsePercentage(this.hueMarker.style.left || "0%") * 360, f = Z(g, u, 1 - C);
+      this.currentColor = f, this.syncInput(), this.updateOpacityBg(), (v = this.onChange) == null || v.call(this, f, this.currentOpacity);
     }, r = (d) => {
       var v;
       const p = e.getBoundingClientRect();
       let u = Math.max(0, Math.min(1, (d.clientX - p.left) / p.width));
       this.hueMarker.style.left = `${u * 100}%`;
-      const f = u * 360, m = this.parsePercentage(this.colorMarker.style.left || "0%"), g = this.parsePercentage(this.colorMarker.style.top || "0%"), C = Z(f, m, 1 - g);
-      this.currentColor = C, this.colorArea.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${f}, 100%, 50%))`, this.syncInput(), this.updateOpacityBg(), (v = this.onChange) == null || v.call(this, C, this.currentOpacity);
+      const C = u * 360, m = this.parsePercentage(this.colorMarker.style.left || "0%"), g = this.parsePercentage(this.colorMarker.style.top || "0%"), f = Z(C, m, 1 - g);
+      this.currentColor = f, this.colorArea.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${C}, 100%, 50%))`, this.syncInput(), this.updateOpacityBg(), (v = this.onChange) == null || v.call(this, f, this.currentOpacity);
     }, h = (d) => {
-      var f;
+      var C;
       const p = i.getBoundingClientRect(), u = Math.max(0, Math.min(1, (d.clientX - p.left) / p.width));
-      this.opacityMarker.style.left = `${u * 100}%`, this.currentOpacity = Math.round(u * 100), (f = this.onChange) == null || f.call(this, this.currentColor, this.currentOpacity);
+      this.opacityMarker.style.left = `${u * 100}%`, this.currentOpacity = Math.round(u * 100), (C = this.onChange) == null || C.call(this, this.currentColor, this.currentOpacity);
     };
     t.addEventListener("mousedown", (d) => {
       d.preventDefault(), l(d);
-      const p = (f) => l(f), u = () => {
+      const p = (C) => l(C), u = () => {
         document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", u);
       };
       document.addEventListener("mousemove", p), document.addEventListener("mouseup", u);
     }), e.addEventListener("mousedown", (d) => {
       d.preventDefault(), r(d);
-      const p = (f) => r(f), u = () => {
+      const p = (C) => r(C), u = () => {
         document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", u);
       };
       document.addEventListener("mousemove", p), document.addEventListener("mouseup", u);
     }), i.addEventListener("mousedown", (d) => {
       d.preventDefault(), h(d);
-      const p = (f) => h(f), u = () => {
+      const p = (C) => h(C), u = () => {
         document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", u);
       };
       document.addEventListener("mousemove", p), document.addEventListener("mouseup", u);
@@ -907,11 +907,11 @@ class Zt {
     const { h: s, s: n, v: o } = q(t);
     this.hueMarker.style.left = `${s / 360 * 100}%`, this.colorMarker.style.left = `${n * 100}%`, this.colorMarker.style.top = `${(1 - o) * 100}%`, this.colorArea.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${s}, 100%, 50%))`, this.updateOpacityBg(), this.opacityMarker.style.left = `${this.currentOpacity}%`, (y = this.recentSectionRefresh) == null || y.call(this), this.isOpen = !0, this.backdrop.style.display = "block", this.backdrop.parentElement || document.body.appendChild(this.backdrop), this.element.style.display = "block", this.element.style.position = "fixed", this.element.style.zIndex = "10002", this.element.style.left = "-9999px", this.element.style.top = "0px", this.element.parentElement || document.body.appendChild(this.element);
     const a = this.element.offsetWidth, l = this.element.offsetHeight, r = e.getBoundingClientRect(), h = window.innerWidth, d = window.innerHeight, p = 16;
-    let u = r.right + 8, f = r.top;
+    let u = r.right + 8, C = r.top;
     const m = h - r.right, g = r.left;
     m >= a + p ? u = r.right + 8 : g >= a + p ? u = r.left - a - 8 : u = Math.max(p, (h - a) / 2);
-    const C = d - r.bottom, v = r.top;
-    C >= l + p ? f = r.bottom + 8 : v >= l + p ? f = r.top - l - 8 : C > v ? (f = r.bottom + 8, f + l > d - p && (f = d - l - p)) : (f = r.top - l - 8, f < p && (f = p)), this.element.style.left = `${u}px`, this.element.style.top = `${f}px`;
+    const f = d - r.bottom, v = r.top;
+    f >= l + p ? C = r.bottom + 8 : v >= l + p ? C = r.top - l - 8 : f > v ? (C = r.bottom + 8, C + l > d - p && (C = d - l - p)) : (C = r.top - l - 8, C < p && (C = p)), this.element.style.left = `${u}px`, this.element.style.top = `${C}px`;
   }
   close(t) {
     var e;
@@ -963,7 +963,7 @@ class Jt {
     r.className = "color-picker-opacity embedded", this.opacitySlider = r;
     const h = document.createElement("div");
     h.className = "color-picker-opacity-marker", this.opacityMarker = h, r.appendChild(h), o.appendChild(a), o.appendChild(r), s.appendChild(n), s.appendChild(o);
-    const d = pt((b) => {
+    const d = ut((b) => {
       const k = V(b);
       k && k.type !== "solid" ? this.onColorChange(b, this.currentOpacity) : (this.setColor(b), this.onColorChange(this.currentColor, this.currentOpacity));
     }, "all");
@@ -972,38 +972,38 @@ class Jt {
     p.className = "color-picker-format-section embedded";
     const u = document.createElement("select");
     u.className = "color-picker-format-select", this.select = u;
-    const f = document.createElement("option");
-    f.value = "hex", f.textContent = "HEX";
+    const C = document.createElement("option");
+    C.value = "hex", C.textContent = "HEX";
     const m = document.createElement("option");
     m.value = "rgb", m.textContent = "RGB";
     const g = document.createElement("option");
-    g.value = "hsl", g.textContent = "HSL", u.appendChild(f), u.appendChild(m), u.appendChild(g);
-    const C = document.createElement("input");
-    C.type = "text", C.className = "color-picker-color-input", this.input = C;
+    g.value = "hsl", g.textContent = "HSL", u.appendChild(C), u.appendChild(m), u.appendChild(g);
+    const f = document.createElement("input");
+    f.type = "text", f.className = "color-picker-color-input", this.input = f;
     const v = document.createElement("div");
     v.className = "color-picker-input-container";
     const y = document.createElement("button");
-    return y.className = "color-picker-copy-inside", y.textContent = "Copy", v.appendChild(C), v.appendChild(y), p.appendChild(u), p.appendChild(v), t.appendChild(e), t.appendChild(s), t.appendChild(p), t.appendChild(d.container), this.bind(e, a, r, C, u, y, n), t;
+    return y.className = "color-picker-copy-inside", y.textContent = "Copy", v.appendChild(f), v.appendChild(y), p.appendChild(u), p.appendChild(v), t.appendChild(e), t.appendChild(s), t.appendChild(p), t.appendChild(d.container), this.bind(e, a, r, f, u, y, n), t;
   }
   bind(t, e, i, s, n, o, a) {
     const l = (p, u) => {
-      const f = u || t.getBoundingClientRect(), m = Math.max(0, Math.min(1, (p.clientX - f.left) / f.width)), g = Math.max(0, Math.min(1, (p.clientY - f.top) / f.height));
+      const C = u || t.getBoundingClientRect(), m = Math.max(0, Math.min(1, (p.clientX - C.left) / C.width)), g = Math.max(0, Math.min(1, (p.clientY - C.top) / C.height));
       this.colorMarker.style.left = `${m * 100}%`, this.colorMarker.style.top = `${g * 100}%`;
       const v = this.parsePercentage(this.hueMarker.style.left || "0%") * 360, y = Z(v, m, 1 - g);
       this.currentColor = y, this.syncInput(), this.updateOpacityBg(), this.queueChange();
     }, r = (p, u) => {
-      const f = u || e.getBoundingClientRect(), m = Math.max(0, Math.min(1, (p.clientX - f.left) / f.width));
+      const C = u || e.getBoundingClientRect(), m = Math.max(0, Math.min(1, (p.clientX - C.left) / C.width));
       this.hueMarker.style.left = `${m * 100}%`;
-      const g = m * 360, C = this.parsePercentage(this.colorMarker.style.left || "0%"), v = this.parsePercentage(this.colorMarker.style.top || "0%"), y = Z(g, C, 1 - v);
+      const g = m * 360, f = this.parsePercentage(this.colorMarker.style.left || "0%"), v = this.parsePercentage(this.colorMarker.style.top || "0%"), y = Z(g, f, 1 - v);
       this.currentColor = y, this.colorArea.style.background = `linear-gradient(to top, #000, transparent),
          linear-gradient(to right, #fff, hsl(${g}, 100%, 50%))`, this.syncInput(), this.updateOpacityBg(), this.queueChange();
     }, h = (p, u) => {
-      const f = u || i.getBoundingClientRect(), m = Math.max(0, Math.min(1, (p.clientX - f.left) / f.width));
+      const C = u || i.getBoundingClientRect(), m = Math.max(0, Math.min(1, (p.clientX - C.left) / C.width));
       this.opacityMarker.style.left = `${m * 100}%`, this.currentOpacity = this.clampOpacity(m * 100), this.queueChange();
-    }, d = (p, u, f) => {
-      p.preventDefault(), this.isDragging = !0, this.cachedRect = f.getBoundingClientRect(), u(p, this.cachedRect);
+    }, d = (p, u, C) => {
+      p.preventDefault(), this.isDragging = !0, this.cachedRect = C.getBoundingClientRect(), u(p, this.cachedRect);
       let m = null, g;
-      const C = () => {
+      const f = () => {
         this.dragRafId === void 0 && (this.dragRafId = window.requestAnimationFrame(() => {
           this.dragRafId = void 0, m && this.cachedRect && u(m, this.cachedRect);
         }));
@@ -1015,7 +1015,7 @@ class Jt {
           v();
           return;
         }
-        m = y, C();
+        m = y, f();
       }, document.addEventListener("mousemove", g), document.addEventListener("mouseup", v), window.addEventListener("blur", v);
     };
     t.addEventListener("mousedown", (p) => {
@@ -1335,7 +1335,7 @@ const P = class P extends w {
       t.appendChild(l);
     }
     const i = document.createElement("button");
-    i.type = "button", i.className = "gradient-popover-close", i.innerHTML = Tt, i.addEventListener("click", () => this.closePopover()), t.appendChild(i), dt(t, this.popoverEl, (l, r) => {
+    i.type = "button", i.className = "gradient-popover-close", i.innerHTML = Tt, i.addEventListener("click", () => this.closePopover()), t.appendChild(i), pt(t, this.popoverEl, (l, r) => {
       this.popoverPosition = { left: l, top: r };
     });
     const s = document.createElement("div");
@@ -1443,11 +1443,11 @@ const P = class P extends w {
       const u = w.GlobalVariableGroups || [
         { title: "Global Colors", keys: ["primary", "secondary", "tertiary", "accent"] },
         { title: "Text Color", keys: ["text-dark", "text-light"] }
-      ], f = this.globalSearchQuery.toLowerCase();
+      ], C = this.globalSearchQuery.toLowerCase();
       let m;
       this.globalLayoutMode === "list" ? (m = document.createElement("div"), m.className = "global-colors-list") : (m = document.createElement("div"), m.className = "global-colors-grid"), d.appendChild(m), u.forEach((g) => {
-        const C = Object.entries(p).filter(([v]) => !g.keys.includes(v) && g.title !== "Global Colors" ? !1 : g.keys.includes(v) && v.toLowerCase().includes(f));
-        C.length !== 0 && C.forEach(([v, y]) => {
+        const f = Object.entries(p).filter(([v]) => !g.keys.includes(v) && g.title !== "Global Colors" ? !1 : g.keys.includes(v) && v.toLowerCase().includes(C));
+        f.length !== 0 && f.forEach(([v, y]) => {
           if (this.globalLayoutMode === "list") {
             const b = document.createElement("div");
             b.className = "global-color-row";
@@ -1524,8 +1524,8 @@ const P = class P extends w {
       p.value = "linear", p.textContent = "Linear";
       const u = document.createElement("option");
       u.value = "radial", u.textContent = "Radial", d.appendChild(p), d.appendChild(u), d.value = this.value.type === "radial" ? "radial" : "linear", e = document.createElement("input"), e.type = "text", e.inputMode = "numeric", e.className = "gradient-degree-input", e.value = `${this.value.angle ?? 90}°`, e.style.width = "75px", e.style.textAlign = "center", (!this.value.angle || this.value.stops.length < 2) && (this.value.angle = 90, e.value = "90°");
-      const f = document.createElement("button");
-      f.type = "button", f.className = "gradient-flip-btn", f.innerHTML = zt, d.addEventListener("change", () => {
+      const C = document.createElement("button");
+      C.type = "button", C.className = "gradient-flip-btn", C.innerHTML = zt, d.addEventListener("change", () => {
         this.clearGlobalBindingForCustomChange(), this.switchType(d.value === "radial" ? "radial" : "linear", !0), e && this.updateDegreeVisibility(e);
       }), e.addEventListener("focus", (m) => {
         const g = m.target;
@@ -1538,13 +1538,13 @@ const P = class P extends w {
         var v;
         this.previewUpdateTimeout && (clearTimeout(this.previewUpdateTimeout), this.previewUpdateTimeout = null);
         const g = m.target;
-        let C = parseInt(g.value);
-        Number.isNaN(C) && (C = ((v = this.value) == null ? void 0 : v.angle) ?? 0), C = Math.max(0, Math.min(360, C)), this.value && (this.value.angle = C), g.value = `${C}°`, this.updateGradientPreview(), this.updateUI(), this.triggerChange();
-      }), f.addEventListener("click", () => {
+        let f = parseInt(g.value);
+        Number.isNaN(f) && (f = ((v = this.value) == null ? void 0 : v.angle) ?? 0), f = Math.max(0, Math.min(360, f)), this.value && (this.value.angle = f), g.value = `${f}°`, this.updateGradientPreview(), this.updateUI(), this.triggerChange();
+      }), C.addEventListener("click", () => {
         this.clearGlobalBindingForCustomChange(), !(!this.value || !this.value.stops) && (this.value.stops.forEach((m) => {
           m.position = 100 - m.position;
         }), this.value.stops.sort((m, g) => m.position - g.position), this.updateGradientPreview(i), this.createHandles(s, i), this.updateStopsList(l), this.updateUI(), this.triggerChange());
-      }), h.appendChild(d), h.appendChild(e), h.appendChild(f), t.appendChild(h), this.updateDegreeVisibility(e);
+      }), h.appendChild(d), h.appendChild(e), h.appendChild(C), t.appendChild(h), this.updateDegreeVisibility(e);
     }
     const i = document.createElement("div");
     i.className = "gradient-preview", this.updateGradientPreview(i);
@@ -1554,8 +1554,8 @@ const P = class P extends w {
       const d = h.target;
       if (d.classList.contains("gstop-handle") || d.classList.contains("gstop-chip"))
         return;
-      const p = i.getBoundingClientRect(), f = (h.clientX - p.left) / p.width * 100;
-      this.clearGlobalBindingForCustomChange(), this.addStopAtPosition(f), this.updateStopsList(), this.updateGradientPreview(i), this.createHandles(s, i), this.updateUI(), ((m = document.activeElement) == null ? void 0 : m.tagName) !== "INPUT" && this.repositionPopover(), this.triggerChange();
+      const p = i.getBoundingClientRect(), C = (h.clientX - p.left) / p.width * 100;
+      this.clearGlobalBindingForCustomChange(), this.addStopAtPosition(C), this.updateStopsList(), this.updateGradientPreview(i), this.createHandles(s, i), this.updateUI(), ((m = document.activeElement) == null ? void 0 : m.tagName) !== "INPUT" && this.repositionPopover(), this.triggerChange();
     });
     const n = document.createElement("div");
     n.className = "gradient-stops-header";
@@ -1565,7 +1565,7 @@ const P = class P extends w {
     a.type = "button", a.className = "gradient-add-stop", a.textContent = "+", n.appendChild(o), n.appendChild(a);
     const l = document.createElement("div");
     l.className = "gradient-stops", t.appendChild(n), t.appendChild(l), this.updateStopsList(l);
-    const r = pt((h) => {
+    const r = ut((h) => {
       const d = V(h);
       d && (this.clearGlobalBindingForCustomChange(), this.value = d, this.switchType(d.type, !0), this.updateUI(), this.triggerChange());
     }, "all");
@@ -1604,31 +1604,31 @@ const P = class P extends w {
       o.style.backgroundColor = a, n.appendChild(o);
       let l = !1, r = !1, h = 0, d = 0;
       const p = (m) => {
-        l = !0, r = !1, h = m.clientX, d = this.value.stops[s].position, n.classList.add("selected"), document.addEventListener("mousemove", u), document.addEventListener("mouseup", f), m.preventDefault(), m.stopPropagation();
+        l = !0, r = !1, h = m.clientX, d = this.value.stops[s].position, n.classList.add("selected"), document.addEventListener("mousemove", u), document.addEventListener("mouseup", C), m.preventDefault(), m.stopPropagation();
       }, u = (m) => {
         if (!l || !this.value) return;
         const g = m.clientX - h;
         if (Math.abs(g) > 3 && (r = !0), r) {
           this.clearGlobalBindingForCustomChange();
-          const C = e.getBoundingClientRect();
-          let v = d + g / C.width * 100;
+          const f = e.getBoundingClientRect();
+          let v = d + g / f.width * 100;
           v = Math.max(0, Math.min(100, v)), this.value.stops[s].position = Math.round(v), n.style.left = `${v}%`, this.updateGradientPreview();
         }
-      }, f = (m) => {
+      }, C = (m) => {
         var g;
         if (l)
-          if (l = !1, n.classList.remove("selected"), document.removeEventListener("mousemove", u), document.removeEventListener("mouseup", f), r)
-            this.value && (this.value.stops.sort((C, v) => C.position - v.position), this.createHandles(t, e), this.updateStopsList()), this.updateUI(), this.triggerChange();
+          if (l = !1, n.classList.remove("selected"), document.removeEventListener("mousemove", u), document.removeEventListener("mouseup", C), r)
+            this.value && (this.value.stops.sort((f, v) => f.position - v.position), this.createHandles(t, e), this.updateStopsList()), this.updateUI(), this.triggerChange();
           else {
             m.stopPropagation();
-            const C = (g = this.value) == null ? void 0 : g.stops[s];
-            C && setTimeout(() => {
+            const f = (g = this.value) == null ? void 0 : g.stops[s];
+            f && setTimeout(() => {
               const v = this.getSharedStopColorPicker();
               v.getIsOpen() && v.close(!1), this.colorPickerStopIndex = s, v.setOnChange((b, k) => {
                 this.clearGlobalBindingForCustomChange(), this.value && this.value.stops[s] && (this.value.stops[s].color = b, k !== void 0 && (this.value.stops[s].opacity = k), o.style.backgroundColor = b, this.updateGradientPreview(), this.updateStopsList(), this.updateUI(), this.triggerChange());
               });
-              const y = this.resolveGlobalVarColor(C.color);
-              v.open(y, o, C.opacity ?? 100);
+              const y = this.resolveGlobalVarColor(f.color);
+              v.open(y, o, f.opacity ?? 100);
             }, 0);
           }
       };
@@ -1654,24 +1654,24 @@ const P = class P extends w {
       p.type = "text", p.className = "gstop-color-input", p.value = h.replace("#", "").toUpperCase();
       const u = document.createElement("button");
       u.type = "button", u.className = "gstop-color-copy", u.textContent = "Copy", r.appendChild(d), r.appendChild(p), r.appendChild(u);
-      const f = document.createElement("button");
-      f.type = "button", f.className = "gstop-del", f.innerHTML = Wt, f.disabled = (((k = (b = this.value) == null ? void 0 : b.stops) == null ? void 0 : k.length) || 0) <= 2, o.appendChild(a), o.appendChild(r), o.appendChild(f), e.appendChild(o);
+      const C = document.createElement("button");
+      C.type = "button", C.className = "gstop-del", C.innerHTML = Wt, C.disabled = (((k = (b = this.value) == null ? void 0 : b.stops) == null ? void 0 : k.length) || 0) <= 2, o.appendChild(a), o.appendChild(r), o.appendChild(C), e.appendChild(o);
       const m = document.createElement("span");
       m.className = "gstop-opacity-label", m.textContent = "Opacity";
       const g = document.createElement("div");
       g.className = "gstop-opacity-group";
-      const C = document.createElement("input");
-      C.type = "range", C.className = "gstop-opacity-slider", C.min = "0", C.max = "100", C.value = String(s.opacity ?? 100);
+      const f = document.createElement("input");
+      f.type = "range", f.className = "gstop-opacity-slider", f.min = "0", f.max = "100", f.value = String(s.opacity ?? 100);
       const v = N(h);
-      C.style.setProperty("--slider-color", `rgb(${v.r}, ${v.g}, ${v.b})`), C.style.setProperty("--slider-color-transparent", `rgba(${v.r}, ${v.g}, ${v.b}, 0)`);
+      f.style.setProperty("--slider-color", `rgb(${v.r}, ${v.g}, ${v.b})`), f.style.setProperty("--slider-color-transparent", `rgba(${v.r}, ${v.g}, ${v.b}, 0)`);
       const y = document.createElement("span");
-      y.className = "gstop-opacity-value", y.textContent = `${s.opacity ?? 100}%`, g.appendChild(C), g.appendChild(y), p.addEventListener("click", (x) => {
+      y.className = "gstop-opacity-value", y.textContent = `${s.opacity ?? 100}%`, g.appendChild(f), g.appendChild(y), p.addEventListener("click", (x) => {
         x.preventDefault(), x.stopPropagation();
         const E = this.getSharedStopColorPicker();
         E.getIsOpen() && E.close(!1), this.colorPickerStopIndex = n, E.setOnChange((S, G) => {
-          this.clearGlobalBindingForCustomChange(), p.value = S.replace("#", "").toUpperCase(), d.style.backgroundColor = S, this.value.stops[n].color = S, G !== void 0 && (this.value.stops[n].opacity = G, C.value = String(G), y.textContent = `${G}%`);
+          this.clearGlobalBindingForCustomChange(), p.value = S.replace("#", "").toUpperCase(), d.style.backgroundColor = S, this.value.stops[n].color = S, G !== void 0 && (this.value.stops[n].opacity = G, f.value = String(G), y.textContent = `${G}%`);
           const W = N(S);
-          C.style.setProperty("--slider-color", `rgb(${W.r}, ${W.g}, ${W.b})`), C.style.setProperty("--slider-color-transparent", `rgba(${W.r}, ${W.g}, ${W.b}, 0)`), this.updateGradientPreview(), this.createHandles(
+          f.style.setProperty("--slider-color", `rgb(${W.r}, ${W.g}, ${W.b})`), f.style.setProperty("--slider-color-transparent", `rgba(${W.r}, ${W.g}, ${W.b}, 0)`), this.updateGradientPreview(), this.createHandles(
             this.popoverEl.querySelector(".gradient-handles"),
             this.popoverEl.querySelector(".gradient-preview")
           ), this.updateUI(), this.triggerChange();
@@ -1684,7 +1684,7 @@ const P = class P extends w {
         if (/^#[0-9A-Fa-f]{6}$/.test(E)) {
           this.value.stops[n].color = E, d.style.backgroundColor = E;
           const L = N(E);
-          C.style.setProperty("--slider-color", `rgb(${L.r}, ${L.g}, ${L.b})`), C.style.setProperty("--slider-color-transparent", `rgba(${L.r}, ${L.g}, ${L.b}, 0)`), this.debouncedPreviewUpdate();
+          f.style.setProperty("--slider-color", `rgb(${L.r}, ${L.g}, ${L.b})`), f.style.setProperty("--slider-color-transparent", `rgba(${L.r}, ${L.g}, ${L.b}, 0)`), this.debouncedPreviewUpdate();
         }
       }), p.addEventListener("blur", () => {
         this.previewUpdateTimeout && (clearTimeout(this.previewUpdateTimeout), this.previewUpdateTimeout = null), this.updateGradientPreview(), this.updateUI(), this.triggerChange();
@@ -1717,17 +1717,17 @@ const P = class P extends w {
           this.popoverEl.querySelector(".gradient-handles"),
           this.popoverEl.querySelector(".gradient-preview")
         ), this.updateStopsList(), this.updateUI(), this.triggerChange();
-      }), f.addEventListener("click", () => {
+      }), C.addEventListener("click", () => {
         var x, E;
         (this.value.stops.length || 0) <= 2 || ((x = this.sharedStopColorPicker) != null && x.getIsOpen() && this.colorPickerStopIndex === n ? (this.sharedStopColorPicker.close(!1), this.colorPickerStopIndex = null) : this.colorPickerStopIndex !== null && this.colorPickerStopIndex > n && this.colorPickerStopIndex--, this.clearGlobalBindingForCustomChange(), this.value.stops.splice(n, 1), this.createHandles(
           this.popoverEl.querySelector(".gradient-handles"),
           this.popoverEl.querySelector(".gradient-preview")
         ), this.updateStopsList(), this.updateGradientPreview(), this.updateUI(), ((E = document.activeElement) == null ? void 0 : E.tagName) !== "INPUT" && this.repositionPopover(), this.triggerChange());
-      }), C.addEventListener("input", () => {
+      }), f.addEventListener("input", () => {
         this.clearGlobalBindingForCustomChange();
-        const x = parseInt(C.value, 10);
+        const x = parseInt(f.value, 10);
         this.value.stops[n].opacity = Math.max(0, Math.min(100, x)), y.textContent = `${this.value.stops[n].opacity}%`, this.debouncedPreviewUpdate();
-      }), C.addEventListener("change", () => {
+      }), f.addEventListener("change", () => {
         this.clearGlobalBindingForCustomChange(), this.previewUpdateTimeout && (clearTimeout(this.previewUpdateTimeout), this.previewUpdateTimeout = null), this.updateGradientPreview(), this.updateUI(), this.triggerChange();
       });
     }));
@@ -1755,8 +1755,8 @@ const P = class P extends w {
     if (s === n || s.position === n.position)
       o = s.color, a = s.opacity ?? 100;
     else {
-      const r = (e - s.position) / (n.position - s.position), h = N(s.color), d = N(n.color), p = Math.round(h.r + (d.r - h.r) * r), u = Math.round(h.g + (d.g - h.g) * r), f = Math.round(h.b + (d.b - h.b) * r);
-      o = `#${p.toString(16).padStart(2, "0")}${u.toString(16).padStart(2, "0")}${f.toString(16).padStart(2, "0")}`.toUpperCase(), a = Math.round((s.opacity ?? 100) + ((n.opacity ?? 100) - (s.opacity ?? 100)) * r);
+      const r = (e - s.position) / (n.position - s.position), h = N(s.color), d = N(n.color), p = Math.round(h.r + (d.r - h.r) * r), u = Math.round(h.g + (d.g - h.g) * r), C = Math.round(h.b + (d.b - h.b) * r);
+      o = `#${p.toString(16).padStart(2, "0")}${u.toString(16).padStart(2, "0")}${C.toString(16).padStart(2, "0")}`.toUpperCase(), a = Math.round((s.opacity ?? 100) + ((n.opacity ?? 100) - (s.opacity ?? 100)) * r);
     }
     const l = {
       position: Math.round(e),
@@ -1795,8 +1795,8 @@ const P = class P extends w {
         let l = e.right + 8, r = e.top;
         const h = s - e.right, d = e.left, p = i + o;
         h < p && d > h + 100 && (l = e.left - i - 8);
-        const u = n - e.bottom, f = e.top;
-        f >= a + o ? r = e.top - a - 8 : u >= a + o ? r = e.bottom + 8 : f > u ? (r = e.top - a - 8, r < o && (r = o)) : (r = e.bottom + 8, r + a > n - o && (r = n - a - o)), this.popoverEl.style.left = `${l}px`, this.popoverEl.style.top = `${r}px`;
+        const u = n - e.bottom, C = e.top;
+        C >= a + o ? r = e.top - a - 8 : u >= a + o ? r = e.bottom + 8 : C > u ? (r = e.top - a - 8, r < o && (r = o)) : (r = e.bottom + 8, r + a > n - o && (r = n - a - o)), this.popoverEl.style.left = `${l}px`, this.popoverEl.style.top = `${r}px`;
       });
     }
   }
@@ -1881,7 +1881,7 @@ function Y(c, t) {
 const ot = class ot {
   constructor(t) {
     this.elementRef = null, this.isHidden = !1, this.custom = !1, this.initialValues = {}, this.changeTimeout = null, this.isHandlingChange = !1, this.changeHandlers = /* @__PURE__ */ new Set(), this.blurTimeout = null, this.lastChangeTime = 0, this.handleBlur = () => {
-    }, this.pendingBlurHandler = null, this.originalDefaultValues = {}, this.nestingLevel = 0, this.dataPropsPath = "", this.hide = !1, this.id = t.id || Mt(), this.title = t.title, this.settings = t.settings, this.isCollapsed = t.collapsed ?? !1, this.isMain = t.main ?? !1, this.custom = t.custom ?? !1, this.nestingLevel = 0, this.includeGetJson = t.includeGetJson ?? !0, this.addItemCfg = t.addItem, this.deleteItemCfg = t.deleteItem, this.dataProps = t.dataProps, this.dataPropsPath = t.dataProps || "", this.hide = t.hide ?? !1, Object.assign(this, t.settings), this.initialValues = this.getValues(), this.originalDefaultValues = this.getDefaultValues(), this.propagateNestingLevel(), this.propagateDataPropsPath();
+    }, this.pendingBlurHandler = null, this.originalDefaultValues = {}, this.nestingLevel = 0, this.dataPropsPath = "", this.hide = !1, this.id = t.id || dt(), this.title = t.title, this.settings = t.settings, this.isCollapsed = t.collapsed ?? !1, this.isMain = t.main ?? !1, this.custom = t.custom ?? !1, this.nestingLevel = 0, this.includeGetJson = t.includeGetJson ?? !0, this.addItemCfg = t.addItem, this.deleteItemCfg = t.deleteItem, this.dataProps = t.dataProps, this.dataPropsPath = t.dataProps || "", this.hide = t.hide ?? !1, Object.assign(this, t.settings), this.initialValues = this.getValues(), this.originalDefaultValues = this.getDefaultValues(), this.propagateNestingLevel(), this.propagateDataPropsPath();
   }
   propagateNestingLevel() {
     const t = this.nestingLevel + 1;
@@ -1988,8 +1988,8 @@ const ot = class ot {
           M(h) ? h.setValue(
             u
           ) : R(h) ? (p = h.setValue) == null || p.call(h, u) : h.setValue && h.setValue(u);
-        } catch (f) {
-          console.warn(`Could not preserve value for setting ${r}:`, f);
+        } catch (C) {
+          console.warn(`Could not preserve value for setting ${r}:`, C);
         }
       }
     }), this.settings = t, this.propagateNestingLevel(), this.propagateDataPropsPath();
@@ -2091,7 +2091,7 @@ const ot = class ot {
         const o = i.slice(this.addItemCfg.keyPrefix.length), a = Number(o);
         if (Number.isFinite(a)) {
           const l = this.addItemCfg.createItem(a);
-          vt(l) && (this.addSetting(i, l), n = l);
+          ft(l) && (this.addSetting(i, l), n = l);
         }
       }
       n && (M(n) || R(n)) && typeof n.setValue == "function" && n.setValue(s);
@@ -2125,7 +2125,7 @@ const ot = class ot {
           p && t.startsWith(p) && this.addDeleteButtonToElement(l, t);
         }
         const h = o.querySelector(".sg-add-button-bottom");
-        h ? o.insertBefore(l, h) : o.appendChild(l), mt.trackElement(l), Q(l, this.nestingLevel + 1), lt(l, this.nestingLevel + 1);
+        h ? o.insertBefore(l, h) : o.appendChild(l), vt.trackElement(l), Q(l, this.nestingLevel + 1), lt(l, this.nestingLevel + 1);
         const d = l.style.display;
         l.style.display = "none", l.offsetHeight, l.style.display = d, this.updateNestingStyles();
       }
@@ -2446,14 +2446,14 @@ const ot = class ot {
     </svg>`;
       h.innerHTML = `${d}<span style="margin-left:4px;">${this.addItemCfg.buttonLabel ?? "Add"}</span>`, h.addEventListener("click", (p) => {
         p.stopPropagation(), p.preventDefault();
-        const u = this.getNextIndexFromPrefix(this.addItemCfg.keyPrefix), f = this.addItemCfg.createItem(u);
-        if (vt(f)) {
+        const u = this.getNextIndexFromPrefix(this.addItemCfg.keyPrefix), C = this.addItemCfg.createItem(u);
+        if (ft(C)) {
           const m = `${this.addItemCfg.keyPrefix}${u}`;
-          this.addSetting(m, f);
+          this.addSetting(m, C);
         }
       }), a.appendChild(h);
     }
-    return e.appendChild(i), e.appendChild(n), t.appendChild(e), t.appendChild(a), this.elementRef = t, mt.trackElement(t), setTimeout(() => {
+    return e.appendChild(i), e.appendChild(n), t.appendChild(e), t.appendChild(a), this.elementRef = t, vt.trackElement(t), setTimeout(() => {
       this.updateNestingStyles();
     }, 0), this.pendingBlurHandler && (this.pendingBlurHandler = null), t;
   }
@@ -2669,15 +2669,15 @@ class H extends Kt {
           g.textContent = "No global colors defined", g.style.gridColumn = "1 / -1", g.style.fontSize = "12px", g.style.color = "#666", a.appendChild(g);
           return;
         }
-        Object.entries(m).forEach(([g, C]) => {
+        Object.entries(m).forEach(([g, f]) => {
           const v = document.createElement("button");
-          v.className = "global-color-btn", v.title = g, v.style.width = "30px", v.style.height = "30px", v.style.borderRadius = "50%", v.style.border = "1px solid #ddd", v.style.backgroundColor = C, v.style.cursor = "pointer", this.value === `var(--${g})` && (v.style.border = "2px solid #2196f3"), v.addEventListener("click", (y) => {
+          v.className = "global-color-btn", v.title = g, v.style.width = "30px", v.style.height = "30px", v.style.borderRadius = "50%", v.style.border = "1px solid #ddd", v.style.backgroundColor = f, v.style.cursor = "pointer", this.value === `var(--${g})` && (v.style.border = "2px solid #2196f3"), v.addEventListener("click", (y) => {
             var k, x;
             y.preventDefault();
             const b = `var(--${g})`;
             this.value = b, (k = this.onChange) == null || k.call(this, b), (x = this.detectChange) == null || x.call(this, b), Array.from(a.children).forEach((E) => {
               E.style.border = "1px solid #ddd";
-            }), v.style.border = "2px solid #2196f3", d.style.backgroundColor = C;
+            }), v.style.border = "2px solid #2196f3", d.style.backgroundColor = f;
           }), a.appendChild(v);
         });
       } catch (m) {
@@ -2707,33 +2707,33 @@ class H extends Kt {
     d.style.backgroundColor = p;
     const u = document.createElement("input");
     u.type = "text", u.className = "color-text-input", u.value = this.value || "", u.placeholder = "#000000", u.setAttribute("pattern", "#[0-9A-Fa-f]{6}"), u.setAttribute("title", "Enter a hex color value (e.g., #ff0000)"), u.setAttribute("aria-label", "Hex color value"), u.setAttribute("maxlength", "7"), this.getDataPropsPath() && u.setAttribute("data-test-id", `${this.getDataPropsPath()}_text`), this.textInputEl = u;
-    const f = (m) => {
-      var C, v;
+    const C = (m) => {
+      var f, v;
       let g = m.trim();
       if (g && !g.startsWith("#") && !g.startsWith("var(") && /^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(g) && (g = "#" + g, this.textInputEl && (this.textInputEl.value = g)), this.textInputEl && r(this.textInputEl)) {
         const y = H.normalizeColorValue(g);
-        this.value = y, (C = this.onChange) == null || C.call(this, y), (v = this.detectChange) == null || v.call(this, y), this.colorInputEl && (this.colorInputEl.value = y), d.style.backgroundColor = y;
+        this.value = y, (f = this.onChange) == null || f.call(this, y), (v = this.detectChange) == null || v.call(this, y), this.colorInputEl && (this.colorInputEl.value = y), d.style.backgroundColor = y;
       }
     };
     return this.textInputEl.addEventListener("input", (m) => {
       const g = m.target.value;
-      f(g);
+      C(g);
     }), this.textInputEl.addEventListener("paste", (m) => {
-      var C;
+      var f;
       m.preventDefault();
-      const g = ((C = m.clipboardData) == null ? void 0 : C.getData("text")) || "";
-      this.textInputEl && (this.textInputEl.value = g.trim(), f(g));
+      const g = ((f = m.clipboardData) == null ? void 0 : f.getData("text")) || "";
+      this.textInputEl && (this.textInputEl.value = g.trim(), C(g));
     }), this.textInputEl.addEventListener("keydown", (m) => {
-      var g, C, v;
-      m.key === "Enter" && (m.preventDefault(), f(((g = this.textInputEl) == null ? void 0 : g.value) || ""), (C = this.textInputEl) == null || C.blur()), m.key === "Escape" && (this.textInputEl && this.value && (this.textInputEl.value = this.value), (v = this.textInputEl) == null || v.blur(), e.classList.remove("error"));
+      var g, f, v;
+      m.key === "Enter" && (m.preventDefault(), C(((g = this.textInputEl) == null ? void 0 : g.value) || ""), (f = this.textInputEl) == null || f.blur()), m.key === "Escape" && (this.textInputEl && this.value && (this.textInputEl.value = this.value), (v = this.textInputEl) == null || v.blur(), e.classList.remove("error"));
     }), this.colorInputEl.addEventListener("input", (m) => {
       var v, y;
-      const g = m.target.value, C = H.normalizeColorValue(g);
-      this.value = C, (v = this.onChange) == null || v.call(this, C), (y = this.detectChange) == null || y.call(this, C), this.textInputEl && (this.textInputEl.value = C), d.style.backgroundColor = C, e.classList.remove("error");
+      const g = m.target.value, f = H.normalizeColorValue(g);
+      this.value = f, (v = this.onChange) == null || v.call(this, f), (y = this.detectChange) == null || y.call(this, f), this.textInputEl && (this.textInputEl.value = f), d.style.backgroundColor = f, e.classList.remove("error");
     }), this.colorInputEl.addEventListener("change", (m) => {
       var v, y;
-      const g = m.target.value, C = H.normalizeColorValue(g);
-      this.value = C, (v = this.onChange) == null || v.call(this, C), (y = this.detectChange) == null || y.call(this, C), this.textInputEl && (this.textInputEl.value = C), d.style.backgroundColor = C;
+      const g = m.target.value, f = H.normalizeColorValue(g);
+      this.value = f, (v = this.onChange) == null || v.call(this, f), (y = this.detectChange) == null || y.call(this, f), this.textInputEl && (this.textInputEl.value = f), d.style.backgroundColor = f;
     }), o.appendChild(h), o.appendChild(d), o.appendChild(u), e.appendChild(i), e.appendChild(o), e.appendChild(a), t.appendChild(e), this.element = t, t;
   }
   getElement() {
@@ -3360,7 +3360,7 @@ const oe = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewB
   <circle cx="6.7" cy="6.7" r="1.5" fill="#02CC59" opacity="0.3"/>
 </svg>
 `;
-class ut extends w {
+class gt extends w {
   constructor(t = {}) {
     super(t), this.inputType = "button", this.previewWrapper = null, this.previewEl = null, this.emptyStateEl = null, this.errorContainer = null, this.messageListener = null, this.loadingSpinner = null, this.props.delete === void 0 && (this.props.delete = !0), this.props.maxFileSizeMB === void 0 && (this.props.maxFileSizeMB = 5), !this.value && t.defaultUrl && t.defaultUrl !== "" && (this.value = t.defaultUrl), this.setupMessageListener();
   }
@@ -3484,7 +3484,7 @@ const st = `
 <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
   <path d="M5 10.5L7.5 8M7.5 8L10 10.5M7.5 8V13.625M12.5 10.9643C13.2634 10.3338 13.75 9.37996 13.75 8.3125C13.75 6.41402 12.211 4.875 10.3125 4.875C10.1759 4.875 10.0482 4.80375 9.97882 4.68609C9.16379 3.30302 7.65902 2.375 5.9375 2.375C3.34867 2.375 1.25 4.47367 1.25 7.0625C1.25 8.35381 1.77215 9.52317 2.61684 10.371" stroke="#475467" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
-`, Et = `
+`, bt = `
 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
   <path d="M1.5 7.5C1.5 7.5 3.00374 5.45116 4.22538 4.22868C5.44702 3.0062 7.1352 2.25 9 2.25C12.7279 2.25 15.75 5.27208 15.75 9C15.75 12.7279 12.7279 15.75 9 15.75C5.92268 15.75 3.32633 13.6907 2.51382 10.875M1.5 7.5V3M1.5 7.5H6" stroke="#637381" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
@@ -3535,7 +3535,7 @@ const st = `
 <svg xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox="0 0 8 4" fill="none">
   <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0L2.58579 2.58579C3.36684 3.36684 4.63317 3.36683 5.41421 2.58579L8 0L0 0Z" fill="#1C252E"/>
 </svg>
-`, F = 10, bt = 5, Ee = 24, be = 50, we = 5e3, xe = 800, Le = 0.8, ke = 700, Me = [
+`, F = 10, wt = 5, Ee = 24, be = 50, we = 5e3, xe = 800, Le = 0.8, ke = 700, Me = [
   "image/jpeg",
   "image/jpg",
   "image/png",
@@ -3554,7 +3554,7 @@ function Ie(c, t) {
     error: `File size (${(c.size / 1048576).toFixed(1)}MB) exceeds ${t}MB limit.`
   } : { valid: !0 };
 }
-function wt(c, t, e) {
+function xt(c, t, e) {
   if (!c.length) return [];
   const i = t && t.width && t.height && t || e && e.width && e.height && e || null;
   return c.map((s) => {
@@ -3565,7 +3565,7 @@ function wt(c, t, e) {
 function nt(c) {
   return Number.isFinite(c) ? Math.max(0, Math.min(100, c)) : 0;
 }
-function xt(c, t, e) {
+function Lt(c, t, e) {
   const i = (c - e.left) / e.width * 100, s = (t - e.top) / e.height * 100;
   return {
     x: nt(i),
@@ -3591,7 +3591,7 @@ function Se(c, t) {
   }
   return { index: e, name: i };
 }
-const gt = class gt {
+const mt = class mt {
   static show(t, e = we) {
     this.injectStyles();
     const i = document.createElement("div");
@@ -3645,8 +3645,8 @@ const gt = class gt {
     }
   }
 };
-gt.styleInjected = !1;
-let _ = gt;
+mt.styleInjected = !1;
+let _ = mt;
 class Ne {
   constructor() {
     this.overlayElement = null, this.activePromise = null;
@@ -3781,7 +3781,7 @@ class Ve {
     this.handlers.clear(), this.cleanupMessageListener();
   }
 }
-const Lt = new Ve();
+const kt = new Ve();
 function Oe(c, t) {
   const e = document.createElement("div");
   e.className = "marker-container", e.style.left = `${c.x}%`, e.style.top = `${c.y}%`, e.setAttribute("data-marker-id", String(c.id));
@@ -3902,7 +3902,7 @@ function Ge(c, t, e) {
     const i = document.createElement("label");
     i.className = "image-map-upload-label", i.innerHTML = `
       <div class="upload-icon upload-icon-default">${st}</div>
-      <div class="upload-icon upload-icon-replace">${Et}</div>
+      <div class="upload-icon upload-icon-replace">${bt}</div>
       <span class="upload-text">Upload Image</span>
     `;
     const s = document.createElement("input");
@@ -3915,7 +3915,7 @@ function Ge(c, t, e) {
     const i = document.createElement("button");
     return i.type = "button", i.className = "image-map-upload-label", i.innerHTML = `
       <div class="upload-icon upload-icon-default">${st}</div>
-      <div class="upload-icon upload-icon-replace">${Et}</div>
+      <div class="upload-icon upload-icon-replace">${bt}</div>
       <span class="upload-text">Upload Image</span>
     `, i.addEventListener("click", () => {
       window.postMessage(
@@ -3959,7 +3959,7 @@ function Ue(c, t) {
   const n = document.createElement("h3");
   n.className = "image-map-title", n.textContent = "Prize Map", s.appendChild(n);
   const o = document.createElement("button");
-  o.type = "button", o.className = "image-map-close-btn", o.innerHTML = he, o.addEventListener("click", () => void c()), s.appendChild(o), dt(s, i, (l, r) => {
+  o.type = "button", o.className = "image-map-close-btn", o.innerHTML = he, o.addEventListener("click", () => void c()), s.appendChild(o), pt(s, i, (l, r) => {
     t(l, r);
   }), i.appendChild(s);
   const a = document.createElement("div");
@@ -3999,7 +3999,7 @@ const je = `<svg xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox
     super(t), this.inputType = {
       imageUrl: "text",
       markers: "text"
-    }, this.mainDisplayElements = null, this.popoverElements = null, this.imageElement = null, this.cursorTooltip = null, this.popoverPosition = null, this.isPopoverOpen = !1, this.confirmModal = new Ne(), this.previousImageDimensions = null, this.draggingMarkerId = null, this.historyManager = new Pe(), this.isUndoRedoOperation = !1, this.initialValue = null, this.lastMouseX = 0, this.lastMouseY = 0, this.errorTooltipEl = null, this.errorTooltipTimeoutId = null, this.props.maxMarkers = this.props.maxMarkers ?? ((e = this.props.prizeMap) == null ? void 0 : e.length) ?? F, this.props.maxFileSizeMB = this.props.maxFileSizeMB ?? bt, this.props.markerSize = this.props.markerSize ?? Ee, this.value || (this.value = { imageUrl: "", markers: [] }), Lt.registerHandler(this.id, (i) => {
+    }, this.mainDisplayElements = null, this.popoverElements = null, this.imageElement = null, this.cursorTooltip = null, this.popoverPosition = null, this.isPopoverOpen = !1, this.confirmModal = new Ne(), this.previousImageDimensions = null, this.draggingMarkerId = null, this.historyManager = new Pe(), this.isUndoRedoOperation = !1, this.initialValue = null, this.lastMouseX = 0, this.lastMouseY = 0, this.errorTooltipEl = null, this.errorTooltipTimeoutId = null, this.props.maxMarkers = this.props.maxMarkers ?? ((e = this.props.prizeMap) == null ? void 0 : e.length) ?? F, this.props.maxFileSizeMB = this.props.maxFileSizeMB ?? wt, this.props.markerSize = this.props.markerSize ?? Ee, this.value || (this.value = { imageUrl: "", markers: [] }), kt.registerHandler(this.id, (i) => {
       this.handleFileManagerImageSelected(i);
     }), this.onBackgroundClick = (i) => {
       if (this.isPopoverOpen && this.popoverElements && !this.popoverElements.popover.contains(i.target)) {
@@ -4143,12 +4143,12 @@ const je = `<svg xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox
       this.imageElement = p, h.appendChild(d);
       const u = document.createElement("div");
       u.className = "prize-list-section";
-      const f = He(
+      const C = He(
         this.value.markers,
         this.props.maxMarkers || F,
         this.props.prizeMap
       );
-      u.appendChild(f), r.appendChild(h), r.appendChild(u), t.appendChild(r);
+      u.appendChild(C), r.appendChild(h), r.appendChild(u), t.appendChild(r);
       const m = We(
         this.hasAllMarkers(),
         () => this.handleClearAllMarkers(),
@@ -4159,10 +4159,10 @@ const je = `<svg xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox
       t.appendChild(m);
       const g = h.querySelector(
         ".image-map-container"
-      ), C = u.querySelector(
+      ), f = u.querySelector(
         ".simple-prize-list"
       );
-      g && (g.scrollTop = s), C && (C.scrollTop = n), this.updateCursorTooltipContent();
+      g && (g.scrollTop = s), f && (f.scrollTop = n), this.updateCursorTooltipContent();
     } else {
       const l = Be({
         uploadMethod: this.props.upload || "file-manager",
@@ -4195,7 +4195,7 @@ const je = `<svg xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox
       const s = {
         width: i.naturalWidth || 0,
         height: i.naturalHeight || 0
-      }, n = wt(
+      }, n = xt(
         ((o = this.value) == null ? void 0 : o.markers) || [],
         e,
         s
@@ -4211,7 +4211,7 @@ const je = `<svg xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox
   handleImageUpload(t) {
     const e = this.previousImageDimensions, i = Ie(
       t,
-      this.props.maxFileSizeMB || bt
+      this.props.maxFileSizeMB || wt
     );
     if (!i.valid) {
       _.show(i.error);
@@ -4228,7 +4228,7 @@ const je = `<svg xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox
           const r = {
             width: l.naturalWidth || 0,
             height: l.naturalHeight || 0
-          }, h = wt(
+          }, h = xt(
             ((d = this.value) == null ? void 0 : d.markers) || [],
             e,
             r
@@ -4252,7 +4252,7 @@ const je = `<svg xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox
       this.showErrorTooltip(r, t.clientX, t.clientY);
       return;
     }
-    const e = this.imageElement.getBoundingClientRect(), { x: i, y: s } = xt(t.clientX, t.clientY, e), n = Vt(this.value.markers);
+    const e = this.imageElement.getBoundingClientRect(), { x: i, y: s } = Lt(t.clientX, t.clientY, e), n = Vt(this.value.markers);
     let o;
     this.props.prizeMap && this.props.prizeMap.length > 0 && (o = this.props.prizeMap[n - 1]);
     const a = {
@@ -4268,7 +4268,7 @@ const je = `<svg xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox
     var a;
     if (this.draggingMarkerId === null || !this.imageElement || !this.value)
       return;
-    const e = this.imageElement.getBoundingClientRect(), { x: i, y: s } = xt(t.clientX, t.clientY, e), n = this.value.markers.map(
+    const e = this.imageElement.getBoundingClientRect(), { x: i, y: s } = Lt(t.clientX, t.clientY, e), n = this.value.markers.map(
       (l) => l.id === this.draggingMarkerId ? { ...l, x: i, y: s } : l
     ), o = (a = this.popoverElements) == null ? void 0 : a.popover.querySelector(
       `[data-marker-id="${this.draggingMarkerId}"]`
@@ -4395,11 +4395,11 @@ const je = `<svg xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox
       this.popoverElements.backdrop
     ), this.popoverElements.popover.parentElement && this.popoverElements.popover.parentElement.removeChild(
       this.popoverElements.popover
-    )), document.removeEventListener("click", this.onBackgroundClick, !0), document.removeEventListener("keydown", this.handlePopoverKeydown, !0), Lt.unregisterHandler(this.id), this.confirmModal.cleanup();
+    )), document.removeEventListener("click", this.onBackgroundClick, !0), document.removeEventListener("keydown", this.handlePopoverKeydown, !0), kt.unregisterHandler(this.id), this.confirmModal.cleanup();
   }
 };
 A.openInstance = null;
-let kt = A;
+let Mt = A;
 class _e extends B {
   constructor(t = {}) {
     super({
@@ -4743,7 +4743,7 @@ class Ci extends B {
 }
 class yi extends w {
   constructor(t) {
-    super(t), this.inputType = {}, this.container = null, this.defaultLanguage = "", this.uploadSettings = /* @__PURE__ */ new Map(), this.popup = null, t.default ? this.value = t.default : this.value || (this.value = {});
+    super(t), this.inputType = {}, this.container = null, this.defaultLanguage = "", this.uploadSettings = /* @__PURE__ */ new Map(), this.popup = null, t.default ? this.value = t.default : this.value || (this.value = {}), this.value.$id = dt();
     const e = w.HasExplicitCurrentLanguage(), i = e ? w.CurrentLanguage() : "", s = w.DefaultLanguage;
     this.defaultLanguage = e && i && t.languages.includes(i) ? i : s && t.languages.includes(s) ? s : t.languages[0];
     const n = t.defaultValue || `Enter text in ${this.capitalizeFirstLetter(this.defaultLanguage)}`;
@@ -4781,8 +4781,8 @@ class yi extends w {
       const m = Math.floor((d + p) / 2), g = e.slice(0, m).trimEnd() + h;
       this.measureTextWidth(g, i) <= l ? (u = m, d = m + 1) : p = m - 1;
     }
-    const f = e.slice(0, u).trimEnd() + h;
-    t.placeholder = f;
+    const C = e.slice(0, u).trimEnd() + h;
+    t.placeholder = C;
   }
   autosizeTextarea(t, e = 3) {
     t.style.height = "auto";
@@ -4794,7 +4794,7 @@ class yi extends w {
     i.classList.add("simple-multi-language-row");
     const s = document.createElement("label");
     if (s.classList.add("simple-language-label"), s.textContent = t.toUpperCase(), s.setAttribute("for", `textarea-${t}`), i.appendChild(s), this.props.multiImg) {
-      const n = new ut({
+      const n = new gt({
         defaultUrl: e || "",
         title: "",
         id: `${this.id}_upload_${t}`
@@ -4943,7 +4943,6 @@ class yi extends w {
     this.popup && (document.body.removeChild(this.popup), this.popup = null);
   }
   draw() {
-    var h;
     const t = document.createElement("div");
     t.classList.add("simple-multi-language-wrapper");
     const e = document.createElement("div");
@@ -4974,49 +4973,50 @@ class yi extends w {
       s.style.color = "#000";
     }), s.addEventListener("mouseleave", () => {
       s.style.color = "#666";
-    });
-    const n = window;
-    n.textElementListeners || (n.textElementListeners = /* @__PURE__ */ new Map());
-    const o = (h = this.value) == null ? void 0 : h.$id, a = window.textElementListeners;
-    if (o && !a.has(o)) {
-      const d = (p) => {
-        const { type: u, data: f } = p.data || {};
-        u === "TEXT_ELEMENT_CLICKED" && (f == null ? void 0 : f.$id) === o && this.showPopup();
-      };
-      window.addEventListener("message", d), a.set(o, d);
-    }
-    s.addEventListener("click", (d) => {
-      d.preventDefault(), this.showPopup();
+    }), s.addEventListener("click", (a) => {
+      a.preventDefault(), this.showPopup();
     }), e.appendChild(i), e.appendChild(s), t.appendChild(e);
-    const l = document.createElement("div");
-    l.classList.add("simple-multi-language-content"), t.appendChild(l), this.container = t, this.renderContent(t), this.languageChangeUnsubscribe = w.onLanguageChange((d) => {
-      d && this.props.languages.includes(d) && (this.defaultLanguage = d), this.container && this.renderContent(this.container);
+    const n = document.createElement("div");
+    n.classList.add("simple-multi-language-content"), t.appendChild(n), this.container = t, this.renderContent(t), this.languageChangeUnsubscribe = w.onLanguageChange((a) => {
+      a && this.props.languages.includes(a) && (this.defaultLanguage = a), this.container && this.renderContent(this.container);
     });
-    const r = () => {
+    const o = () => {
       if (!this.container) return;
       this.container.querySelectorAll(
         ".simple-language-textarea"
-      ).forEach((p) => {
-        const u = p.getAttribute("data-full-placeholder") || "";
-        u && this.adaptPlaceholderToSingleLine(p, u);
+      ).forEach((l) => {
+        const r = l.getAttribute("data-full-placeholder") || "";
+        r && this.adaptPlaceholderToSingleLine(l, r);
       });
     };
-    return window.addEventListener("resize", r), t;
+    return window.addEventListener("resize", o), t;
   }
   setValue(t) {
-    super.setValue(t), this.value.$id = t.$id || this.id, this.container && this.props.languages.forEach((e) => {
-      var i;
+    var n;
+    super.setValue(t), this.value.$id = t.$id;
+    const e = window;
+    e.textElementListeners || (e.textElementListeners = /* @__PURE__ */ new Map());
+    const i = (n = this.value) == null ? void 0 : n.$id, s = window.textElementListeners;
+    if (i && !s.has(i)) {
+      const o = (a) => {
+        const { type: l, data: r } = a.data || {};
+        l === "TEXT_ELEMENT_CLICKED" && (r == null ? void 0 : r.$id) === i && this.showPopup();
+      };
+      window.addEventListener("message", o), s.set(i, o);
+    }
+    this.container && this.props.languages.forEach((o) => {
+      var a;
       if (this.props.multiImg) {
-        const s = this.uploadSettings.get(e);
-        s && s.setValue((t == null ? void 0 : t[e]) || "");
+        const l = this.uploadSettings.get(o);
+        l && l.setValue((t == null ? void 0 : t[o]) || "");
       } else {
-        const s = (i = this.container) == null ? void 0 : i.querySelector(
-          `#textarea-${e}`
+        const l = (a = this.container) == null ? void 0 : a.querySelector(
+          `#textarea-${o}`
         );
-        if (s) {
-          s.value = (t == null ? void 0 : t[e]) || "", this.autosizeTextarea(s, 3);
-          const n = s.getAttribute("data-full-placeholder") || "";
-          n && this.adaptPlaceholderToSingleLine(s, n);
+        if (l) {
+          l.value = (t == null ? void 0 : t[o]) || "", this.autosizeTextarea(l, 3);
+          const r = l.getAttribute("data-full-placeholder") || "";
+          r && this.adaptPlaceholderToSingleLine(l, r);
         }
       }
     });
@@ -5296,7 +5296,7 @@ class Li extends $ {
       title: "Background Image",
       collapsed: t == null ? void 0 : t.collapsed,
       settings: {
-        backgroundImage: new ut({
+        backgroundImage: new gt({
           ...t == null ? void 0 : t.uploadProps,
           default: (t == null ? void 0 : t.backgroundImage) ?? ""
         }),
@@ -5335,7 +5335,7 @@ class ki extends $ {
       title: (t == null ? void 0 : t.title) ?? "Image",
       collapsed: t == null ? void 0 : t.collapsed,
       settings: {
-        image: new ut({
+        image: new gt({
           ...t == null ? void 0 : t.uploadProps,
           default: (t == null ? void 0 : t.image) ?? ""
         }),
@@ -5365,7 +5365,7 @@ export {
   wi as HeaderTypographySettingSet,
   _e as HeightSetting,
   di as HtmlSetting,
-  kt as ImageMapSetting,
+  Mt as ImageMapSetting,
   ki as ImageSettingSet,
   fi as MarginBottomSetting,
   xi as MarginSettingGroup,
@@ -5381,13 +5381,13 @@ export {
   Xt as TabSettingGroup,
   Xt as TabsSettingGroup,
   mi as Toggle,
-  ut as UploadSetting,
+  gt as UploadSetting,
   Ze as WidthSetting,
   hi as asSettingGroupWithSettings,
   Yt as createSettingGroup,
   ci as createTabSettingGroup,
   R as isSetting,
-  vt as isSettingChild,
+  ft as isSettingChild,
   M as isSettingGroup,
   Y as iterateSettings
 };