builder-settings-types 0.0.342 → 0.0.355

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

@@ -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, m = d.clientY - n, C = window.innerWidth, g = window.innerHeight, u = t.offsetWidth, f = t.offsetHeight;
-    let v = o + p, y = a + m;
-    v = Math.max(8, Math.min(C - u - 8, v)), y = Math.max(8, Math.min(g - f - 8, y)), t.style.left = `${v}px`, t.style.top = `${y}px`, e == null || e(v, y);
+    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(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 = "";
   };
@@ -454,7 +454,7 @@ const dt = (c, t, e) => {
   for (let a = s; a < c.length && n > 0; a++)
     c[a] === "(" ? n++ : c[a] === ")" && n--, o = a;
   return n === 0 ? c.substring(s, o) : null;
-}, Ft = (c) => {
+}, Gt = (c) => {
   const t = c.split(" ")[0].toLowerCase();
   return [
     "circle",
@@ -518,7 +518,7 @@ const dt = (c, t, e) => {
   }
   const i = Ct(t, "radial-gradient");
   if (i) {
-    const s = ft(i), n = s[0] && !Ft(s[0]) ? s.slice(1) : s, o = yt(n);
+    const s = ft(i), n = s[0] && !Gt(s[0]) ? s.slice(1) : s, o = yt(n);
     return o.length ? D({ type: "radial", angle: 0, stops: o }) : null;
   }
   return null;
@@ -534,7 +534,7 @@ const dt = (c, t, e) => {
     (e) => `${ct(e.color, e.opacity ?? 100)} ${e.position}%`
   ).join(", ");
   return c.type === "radial" ? `radial-gradient(circle, ${t})` : `linear-gradient(${c.angle}deg, ${t})`;
-}, Gt = (c) => Math.round(c / 100 * 255).toString(16).toUpperCase().padStart(2, "0"), et = (c) => {
+}, Ft = (c) => Math.round(c / 100 * 255).toString(16).toUpperCase().padStart(2, "0"), et = (c) => {
   if (c.type === "solid") {
     const t = c.stops[0];
     if (t) {
@@ -546,7 +546,7 @@ const dt = (c, t, e) => {
       if (i === 100)
         return e;
       {
-        const s = Gt(i);
+        const s = Ft(i);
         return `${e}${s}`;
       }
     }
@@ -649,14 +649,14 @@ const pt = (c, t) => {
     a.style.display = "grid", l.style.display = "none", h.forEach((d) => {
       const p = document.createElement("button");
       p.type = "button", p.className = "color-picker-recent-swatch";
-      const m = Ut(d);
-      if (p.title = m, p.setAttribute("aria-label", `Use color: ${m}`), d.includes("gradient(")) {
+      const u = Ut(d);
+      if (p.title = u, p.setAttribute("aria-label", `Use color: ${u}`), d.includes("gradient(")) {
         p.style.backgroundImage = d, p.style.backgroundColor = "transparent";
-        const g = T(d);
-        g && g.stops && g.stops.length > 0 && (p.style.borderColor = g.stops[0].color);
+        const m = T(d);
+        m && m.stops && m.stops.length > 0 && (p.style.borderColor = m.stops[0].color);
       } else
         p.style.backgroundColor = d, p.style.borderColor = d;
-      p.addEventListener("mouseenter", () => o(p, m)), p.addEventListener("mouseleave", () => {
+      p.addEventListener("mouseenter", () => o(p, u)), p.addEventListener("mouseleave", () => {
         n(), p.style.boxShadow = "";
       }), p.addEventListener("mousedown", () => {
         p.style.boxShadow = "0px 0px 0px 2px var(--grey40)";
@@ -764,29 +764,29 @@ class Zt {
     d.className = "color-picker-hue-marker", this.hueMarker = d, h.appendChild(d);
     const p = document.createElement("div");
     p.className = "color-picker-opacity", this.opacitySlider = p;
-    const m = document.createElement("div");
-    m.className = "color-picker-opacity-marker", this.opacityMarker = m, p.appendChild(m), r.appendChild(h), r.appendChild(p), a.appendChild(l), a.appendChild(r);
+    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 C = pt((E) => {
       var L;
       this.setColor(E), (L = this.onChange) == null || L.call(this, E, this.currentOpacity);
     }, this.recentScope);
     this.recentSectionRefresh = C.refresh;
-    const g = document.createElement("div");
-    g.className = "color-picker-format-section";
-    const u = document.createElement("select");
-    u.className = "color-picker-format-select", this.select = u;
+    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 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", u.appendChild(f), u.appendChild(v), u.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), g.appendChild(u), g.appendChild(k), t.appendChild(e), t.appendChild(n), t.appendChild(a), t.appendChild(C.container), t.appendChild(g), t.addEventListener("click", (E) => E.stopPropagation()), this.bind(n, h, p, b, u, 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,40 +795,40 @@ class Zt {
   bind(t, e, i, s, n, o, a) {
     const l = (d) => {
       var v;
-      const p = t.getBoundingClientRect(), m = 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 = `${m * 100}%`, this.colorMarker.style.top = `${C * 100}%`;
-      const u = this.parsePercentage(this.hueMarker.style.left || "0%") * 360, f = Z(u, m, 1 - C);
+      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 m = Math.max(0, Math.min(1, (d.clientX - p.left) / p.width));
-      this.hueMarker.style.left = `${m * 100}%`;
-      const C = m * 360, g = this.parsePercentage(this.colorMarker.style.left || "0%"), u = this.parsePercentage(this.colorMarker.style.top || "0%"), f = Z(C, g, 1 - u);
+      let u = Math.max(0, Math.min(1, (d.clientX - p.left) / p.width));
+      this.hueMarker.style.left = `${u * 100}%`;
+      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 C;
-      const p = i.getBoundingClientRect(), m = Math.max(0, Math.min(1, (d.clientX - p.left) / p.width));
-      this.opacityMarker.style.left = `${m * 100}%`, this.currentOpacity = Math.round(m * 100), (C = this.onChange) == null || C.call(this, this.currentColor, this.currentOpacity);
+      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), (C = this.onChange) == null || C.call(this, this.currentColor, this.currentOpacity);
     };
     t.addEventListener("mousedown", (d) => {
       d.preventDefault(), l(d);
-      const p = (C) => l(C), m = () => {
-        document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", m);
+      const p = (C) => l(C), u = () => {
+        document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", u);
       };
-      document.addEventListener("mousemove", p), document.addEventListener("mouseup", m);
+      document.addEventListener("mousemove", p), document.addEventListener("mouseup", u);
     }), e.addEventListener("mousedown", (d) => {
       d.preventDefault(), r(d);
-      const p = (C) => r(C), m = () => {
-        document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", m);
+      const p = (C) => r(C), u = () => {
+        document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", u);
       };
-      document.addEventListener("mousemove", p), document.addEventListener("mouseup", m);
+      document.addEventListener("mousemove", p), document.addEventListener("mouseup", u);
     }), i.addEventListener("mousedown", (d) => {
       d.preventDefault(), h(d);
-      const p = (C) => h(C), m = () => {
-        document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", m);
+      const p = (C) => h(C), u = () => {
+        document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", u);
       };
-      document.addEventListener("mousemove", p), document.addEventListener("mouseup", m);
+      document.addEventListener("mousemove", p), document.addEventListener("mouseup", u);
     }), n.addEventListener("change", () => this.syncInput()), s.addEventListener("input", () => this.applyFromInput()), s.addEventListener("blur", () => this.syncInput()), s.addEventListener("keydown", (d) => {
       d.key === "Enter" && (d.preventDefault(), this.syncInput(), s.blur());
     }), o.addEventListener("click", async () => {
@@ -844,8 +844,8 @@ class Zt {
         return;
       }
       try {
-        const p = new window.EyeDropper(), { sRGBHex: m } = await p.open();
-        this.setColor(m), (d = this.onChange) == null || d.call(this, m, this.currentOpacity);
+        const p = new window.EyeDropper(), { sRGBHex: u } = await p.open();
+        this.setColor(u), (d = this.onChange) == null || d.call(this, u, this.currentOpacity);
       } catch {
       }
     }), document.addEventListener("keydown", this.keyDown, !0), setTimeout(
@@ -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 m = r.right + 8, C = r.top;
-    const g = h - r.right, u = r.left;
-    g >= a + p ? m = r.right + 8 : u >= a + p ? m = r.left - a - 8 : m = Math.max(p, (h - a) / 2);
+    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 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 = `${m}px`, this.element.style.top = `${C}px`;
+    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;
@@ -970,53 +970,53 @@ class Jt {
     this.recentSectionRefresh = d.refresh;
     const p = document.createElement("div");
     p.className = "color-picker-format-section embedded";
-    const m = document.createElement("select");
-    m.className = "color-picker-format-select", this.select = m;
+    const u = document.createElement("select");
+    u.className = "color-picker-format-select", this.select = u;
     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 = "rgb", g.textContent = "RGB";
-    const u = document.createElement("option");
-    u.value = "hsl", u.textContent = "HSL", m.appendChild(C), m.appendChild(g), m.appendChild(u);
+    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(f), v.appendChild(y), p.appendChild(m), p.appendChild(v), t.appendChild(e), t.appendChild(s), t.appendChild(p), t.appendChild(d.container), this.bind(e, a, r, f, m, 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, m) => {
-      const C = m || t.getBoundingClientRect(), g = Math.max(0, Math.min(1, (p.clientX - C.left) / C.width)), u = Math.max(0, Math.min(1, (p.clientY - C.top) / C.height));
-      this.colorMarker.style.left = `${g * 100}%`, this.colorMarker.style.top = `${u * 100}%`;
-      const v = this.parsePercentage(this.hueMarker.style.left || "0%") * 360, y = Z(v, g, 1 - u);
+    const l = (p, u) => {
+      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, m) => {
-      const C = m || e.getBoundingClientRect(), g = Math.max(0, Math.min(1, (p.clientX - C.left) / C.width));
-      this.hueMarker.style.left = `${g * 100}%`;
-      const u = g * 360, f = this.parsePercentage(this.colorMarker.style.left || "0%"), v = this.parsePercentage(this.colorMarker.style.top || "0%"), y = Z(u, f, 1 - v);
+    }, r = (p, u) => {
+      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, 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(${u}, 100%, 50%))`, this.syncInput(), this.updateOpacityBg(), this.queueChange();
-    }, h = (p, m) => {
-      const C = m || i.getBoundingClientRect(), g = Math.max(0, Math.min(1, (p.clientX - C.left) / C.width));
-      this.opacityMarker.style.left = `${g * 100}%`, this.currentOpacity = this.clampOpacity(g * 100), this.queueChange();
-    }, d = (p, m, C) => {
-      p.preventDefault(), this.isDragging = !0, this.cachedRect = C.getBoundingClientRect(), m(p, this.cachedRect);
-      let g = null, u;
+         linear-gradient(to right, #fff, hsl(${g}, 100%, 50%))`, this.syncInput(), this.updateOpacityBg(), this.queueChange();
+    }, h = (p, u) => {
+      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, C) => {
+      p.preventDefault(), this.isDragging = !0, this.cachedRect = C.getBoundingClientRect(), u(p, this.cachedRect);
+      let m = null, g;
       const f = () => {
         this.dragRafId === void 0 && (this.dragRafId = window.requestAnimationFrame(() => {
-          this.dragRafId = void 0, g && this.cachedRect && m(g, this.cachedRect);
+          this.dragRafId = void 0, m && this.cachedRect && u(m, this.cachedRect);
         }));
       }, v = () => {
-        this.isDragging && (this.isDragging = !1, this.dragRafId !== void 0 && (cancelAnimationFrame(this.dragRafId), this.dragRafId = void 0), this.cachedRect = void 0, g = null, this.flushChange(), document.removeEventListener("mousemove", u), document.removeEventListener("mouseup", v), window.removeEventListener("blur", v), this.applyPendingExternal());
+        this.isDragging && (this.isDragging = !1, this.dragRafId !== void 0 && (cancelAnimationFrame(this.dragRafId), this.dragRafId = void 0), this.cachedRect = void 0, m = null, this.flushChange(), document.removeEventListener("mousemove", g), document.removeEventListener("mouseup", v), window.removeEventListener("blur", v), this.applyPendingExternal());
       };
-      u = (y) => {
+      g = (y) => {
         if (!y.buttons) {
           v();
           return;
         }
-        g = y, f();
-      }, document.addEventListener("mousemove", u), document.addEventListener("mouseup", v), window.addEventListener("blur", v);
+        m = y, f();
+      }, document.addEventListener("mousemove", g), document.addEventListener("mouseup", v), window.addEventListener("blur", v);
     };
     t.addEventListener("mousedown", (p) => {
       d(p, l, t);
@@ -1044,8 +1044,8 @@ class Jt {
         return;
       }
       try {
-        const p = new window.EyeDropper(), { sRGBHex: m } = await p.open();
-        this.setColor(m), this.onColorChange(this.currentColor, this.currentOpacity);
+        const p = new window.EyeDropper(), { sRGBHex: u } = await p.open();
+        this.setColor(u), this.onColorChange(this.currentColor, this.currentOpacity);
       } catch {
       }
     });
@@ -1151,7 +1151,7 @@ const V = class V extends w {
     }, this.element = null, this.previewEl = null, this.inputEl = void 0, this.popoverEl = null, this.backdropEl = null, this.isPopoverOpen = !1, this.isEditing = !1, this.popoverPosition = null, this.previewUpdateTimeout = null, this.changeDebounceTimeout = null, this.solidPicker = null, this.pendingSolidColor = null, this.sharedStopColorPicker = null, this.colorPickerStopIndex = null, this.variant = "default", this.globalLayoutMode = "list", this.globalSearchQuery = "", this.currentMode = "custom", this.linkedGlobalVariable = null, this.unlinkButton = null, this.onBackgroundClick = (i) => {
       var p;
       if (!this.popoverEl || !this.isPopoverOpen) return;
-      const s = i.target, n = this.popoverEl.contains(s), o = (p = this.element) == null ? void 0 : p.contains(s), a = document.querySelectorAll(".custom-color-picker"), l = Array.from(a).some((m) => m.contains(s)), r = s.closest(".gstop-color-input, .gradient-mini-preview, .gstop-color-preview"), h = s.classList.contains("color-picker-backdrop"), d = s.classList.contains("gradient-popover-backdrop");
+      const s = i.target, n = this.popoverEl.contains(s), o = (p = this.element) == null ? void 0 : p.contains(s), a = document.querySelectorAll(".custom-color-picker"), l = Array.from(a).some((u) => u.contains(s)), r = s.closest(".gstop-color-input, .gradient-mini-preview, .gstop-color-preview"), h = s.classList.contains("color-picker-backdrop"), d = s.classList.contains("gradient-popover-backdrop");
       !n && !o && !l && !r && !h && !d && this.closePopover();
     }, this.handlePopoverKeydown = (i) => {
       var s, n;
@@ -1367,17 +1367,30 @@ const V = class V extends w {
     }), t.appendChild(e), t.appendChild(i), t;
   }
   switchType(t, e = !1) {
-    var o;
+    var l, r;
     if (!this.value) return;
-    const i = this.isBoundToGlobal(), s = this.linkedGlobalVariable;
-    if (this.value.type = t, t !== "solid" && (this.pendingSolidColor = null), t !== "solid" && (!this.value.stops || this.value.stops.length === 0) && (this.value.stops = [
+    const i = this.value.type, s = this.isBoundToGlobal(), n = this.linkedGlobalVariable;
+    this.value.type = t;
+    let o = !1;
+    if (s && n && i === "solid" != (t === "solid")) {
+      const h = this.resolveGlobalVarColor(n), d = this.value.stops && this.value.stops[0] ? this.value.stops[0].opacity ?? 100 : 100;
+      (l = this.value.stops) != null && l.length && (this.value.stops = this.value.stops.map((p) => ({
+        ...p,
+        color: p.color.startsWith("var(--") ? this.resolveGlobalVarColor(p.color) : p.color
+      }))), !this.value.stops || this.value.stops.length === 0 ? this.value.stops = [{ color: h, position: 0, opacity: d }] : this.value.stops[0] = {
+        ...this.value.stops[0],
+        color: h,
+        opacity: d
+      }, this.linkedGlobalVariable = null, o = !0;
+    }
+    if (t !== "solid" && (this.pendingSolidColor = null), t !== "solid" && (!this.value.stops || this.value.stops.length === 0) && (this.value.stops = [
       { color: "#a84b4b", position: 0, opacity: 100 },
       { color: "#786666", position: 100, opacity: 100 }
     ]), t !== "solid" && this.value.stops.length === 1) {
-      const l = this.value.stops[0].color;
-      if (l.startsWith("var(--")) {
-        const r = this.resolveGlobalVarColor(l), h = T(r);
-        h && h.type !== "solid" && h.stops.length >= 2 ? (this.value.stops = h.stops, this.value.angle = h.angle, this.value.type = h.type) : (this.value.stops.push({
+      const d = this.value.stops[0].color;
+      if (d.startsWith("var(--")) {
+        const p = this.resolveGlobalVarColor(d), u = T(p);
+        u && u.type !== "solid" && u.stops.length >= 2 ? (this.value.stops = u.stops, this.value.angle = u.angle, this.value.type = u.type) : (this.value.stops.push({
           color: "#786666",
           position: 100,
           opacity: 100
@@ -1390,18 +1403,18 @@ const V = class V extends w {
         }), this.value.angle = 90;
     } else if (t !== "solid" && this.value.stops.length >= 2)
       this.value.angle || (this.value.angle = 90);
-    else if (t === "solid" && i && s) {
-      const a = this.value.stops && this.value.stops[0] ? this.value.stops[0].opacity ?? 100 : 100;
-      this.value.stops = [{ color: s, position: 0, opacity: a }], this.value.angle = 0;
+    else if (t === "solid" && s && n) {
+      const h = this.value.stops && this.value.stops[0] ? this.value.stops[0].opacity ?? 100 : 100;
+      this.value.stops = [{ color: n, position: 0, opacity: h }], this.value.angle = 0;
     }
     if (this.popoverEl) {
-      const a = this.popoverEl.querySelectorAll(".gradient-type-tab");
-      a.forEach((h) => h.classList.remove("active"));
-      const l = a[0], r = a[1];
-      t === "solid" ? l == null || l.classList.add("active") : r == null || r.classList.add("active");
+      const h = this.popoverEl.querySelectorAll(".gradient-type-tab");
+      h.forEach((u) => u.classList.remove("active"));
+      const d = h[0], p = h[1];
+      t === "solid" ? d == null || d.classList.add("active") : p == null || p.classList.add("active");
     }
-    const n = (o = this.popoverEl) == null ? void 0 : o.querySelector(".gradient-editor-content");
-    n && this.updatePopoverContent(n), this.updateUI(), e && this.triggerChange();
+    const a = (r = this.popoverEl) == null ? void 0 : r.querySelector(".gradient-editor-content");
+    a && this.updatePopoverContent(a), this.updateUI(), (e || o || i !== t) && this.triggerChange();
   }
   updatePopoverContent(t) {
     if (t.innerHTML = "", !!this.value) {
@@ -1419,21 +1432,21 @@ const V = class V extends w {
       let p = {};
       try {
         p = w.GlobalVariables || {};
-      } catch (u) {
-        console.warn("Could not access Setting.GlobalVariables", u);
+      } catch (g) {
+        console.warn("Could not access Setting.GlobalVariables", g);
       }
       if (!p || Object.keys(p).length === 0) {
-        const u = document.createElement("div");
-        u.textContent = "No global colors defined", u.style.fontSize = "12px", u.style.color = "#666", u.style.padding = "8px", d.appendChild(u);
+        const g = document.createElement("div");
+        g.textContent = "No global colors defined", g.style.fontSize = "12px", g.style.color = "#666", g.style.padding = "8px", d.appendChild(g);
         return;
       }
-      const m = w.GlobalVariableGroups || [
+      const u = w.GlobalVariableGroups || [
         { title: "Global Colors", keys: ["primary", "secondary", "tertiary", "accent"] },
         { title: "Text Color", keys: ["text-dark", "text-light"] }
       ], C = this.globalSearchQuery.toLowerCase();
-      let g;
-      this.globalLayoutMode === "list" ? (g = document.createElement("div"), g.className = "global-colors-list") : (g = document.createElement("div"), g.className = "global-colors-grid"), d.appendChild(g), m.forEach((u) => {
-        const f = Object.entries(p).filter(([v]) => !u.keys.includes(v) && u.title !== "Global Colors" ? !1 : u.keys.includes(v) && v.toLowerCase().includes(C));
+      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 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");
@@ -1445,9 +1458,9 @@ const V = class V extends w {
             const L = document.createElement("span");
             L.className = "global-color-label", L.textContent = v.split("-").map((I) => I.charAt(0).toUpperCase() + I.slice(1)).join(" "), b.appendChild(k), b.appendChild(L), b.addEventListener("click", (I) => {
               I.preventDefault();
-              const F = `var(--${v})`;
-              this.setValue(F), this.pendingSolidColor = F, i(d);
-            }), g.appendChild(b);
+              const G = `var(--${v})`;
+              this.setValue(G), this.pendingSolidColor = G, i(d);
+            }), m.appendChild(b);
           } else {
             const b = document.createElement("div");
             b.className = "global-color-circle";
@@ -1456,7 +1469,7 @@ const V = class V extends w {
               E.preventDefault();
               const L = `var(--${v})`;
               this.setValue(L), this.pendingSolidColor = L, i(d);
-            }), g.appendChild(b);
+            }), m.appendChild(b);
           }
         });
       });
@@ -1509,40 +1522,40 @@ const V = class V extends w {
       d.className = "gradient-subtype-select";
       const p = document.createElement("option");
       p.value = "linear", p.textContent = "Linear";
-      const m = document.createElement("option");
-      m.value = "radial", m.textContent = "Radial", d.appendChild(p), d.appendChild(m), 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 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 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", (g) => {
-        const u = g.target;
-        u.value = u.value.replace(/[^0-9-]/g, ""), setTimeout(() => u.select(), 0);
-      }), e.addEventListener("input", (g) => {
+      }), e.addEventListener("focus", (m) => {
+        const g = m.target;
+        g.value = g.value.replace(/[^0-9-]/g, ""), setTimeout(() => g.select(), 0);
+      }), e.addEventListener("input", (m) => {
         this.clearGlobalBindingForCustomChange();
-        const u = parseInt(g.target.value);
-        !Number.isNaN(u) && this.value && (this.value.angle = Math.max(0, Math.min(360, u)), this.debouncedPreviewUpdate());
-      }), e.addEventListener("blur", (g) => {
+        const g = parseInt(m.target.value);
+        !Number.isNaN(g) && this.value && (this.value.angle = Math.max(0, Math.min(360, g)), this.debouncedPreviewUpdate());
+      }), e.addEventListener("blur", (m) => {
         var v;
         this.previewUpdateTimeout && (clearTimeout(this.previewUpdateTimeout), this.previewUpdateTimeout = null);
-        const u = g.target;
-        let f = parseInt(u.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), u.value = `${f}°`, this.updateGradientPreview(), this.updateUI(), this.triggerChange();
+        const g = m.target;
+        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((g) => {
-          g.position = 100 - g.position;
-        }), this.value.stops.sort((g, u) => g.position - u.position), this.updateGradientPreview(i), this.createHandles(s, i), this.updateStopsList(l), this.updateUI(), this.triggerChange());
+        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(C), t.appendChild(h), this.updateDegreeVisibility(e);
     }
     const i = document.createElement("div");
     i.className = "gradient-preview", this.updateGradientPreview(i);
     const s = document.createElement("div");
     s.className = "gradient-handles", i.appendChild(s), t.appendChild(i), this.createHandles(s, i), i.addEventListener("click", (h) => {
-      var g;
+      var m;
       const d = h.target;
       if (d.classList.contains("gstop-handle") || d.classList.contains("gstop-chip"))
         return;
       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(), ((g = document.activeElement) == null ? void 0 : g.tagName) !== "INPUT" && this.repositionPopover(), this.triggerChange();
+      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";
@@ -1590,25 +1603,25 @@ const V = class V extends w {
       const a = this.resolveGlobalVarColor(i.color);
       o.style.backgroundColor = a, n.appendChild(o);
       let l = !1, r = !1, h = 0, d = 0;
-      const p = (g) => {
-        l = !0, r = !1, h = g.clientX, d = this.value.stops[s].position, n.classList.add("selected"), document.addEventListener("mousemove", m), document.addEventListener("mouseup", C), g.preventDefault(), g.stopPropagation();
-      }, m = (g) => {
+      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", C), m.preventDefault(), m.stopPropagation();
+      }, u = (m) => {
         if (!l || !this.value) return;
-        const u = g.clientX - h;
-        if (Math.abs(u) > 3 && (r = !0), r) {
+        const g = m.clientX - h;
+        if (Math.abs(g) > 3 && (r = !0), r) {
           this.clearGlobalBindingForCustomChange();
           const f = e.getBoundingClientRect();
-          let v = d + u / f.width * 100;
+          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();
         }
-      }, C = (g) => {
-        var u;
+      }, C = (m) => {
+        var g;
         if (l)
-          if (l = !1, n.classList.remove("selected"), document.removeEventListener("mousemove", m), document.removeEventListener("mouseup", C), r)
+          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 {
-            g.stopPropagation();
-            const f = (u = this.value) == null ? void 0 : u.stops[s];
+            m.stopPropagation();
+            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) => {
@@ -1639,24 +1652,24 @@ const V = class V extends w {
       d.className = "gstop-color-preview", d.style.backgroundColor = h;
       const p = document.createElement("input");
       p.type = "text", p.className = "gstop-color-input", p.value = h.replace("#", "").toUpperCase();
-      const m = document.createElement("button");
-      m.type = "button", m.className = "gstop-color-copy", m.textContent = "Copy", r.appendChild(d), r.appendChild(p), r.appendChild(m);
+      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 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 g = document.createElement("span");
-      g.className = "gstop-opacity-label", g.textContent = "Opacity";
-      const u = document.createElement("div");
-      u.className = "gstop-opacity-group";
+      const m = document.createElement("span");
+      m.className = "gstop-opacity-label", m.textContent = "Opacity";
+      const g = document.createElement("div");
+      g.className = "gstop-opacity-group";
       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);
       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}%`, u.appendChild(f), u.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((I, F) => {
-          this.clearGlobalBindingForCustomChange(), p.value = I.replace("#", "").toUpperCase(), d.style.backgroundColor = I, this.value.stops[n].color = I, F !== void 0 && (this.value.stops[n].opacity = F, f.value = String(F), y.textContent = `${F}%`);
+        E.getIsOpen() && E.close(!1), this.colorPickerStopIndex = n, E.setOnChange((I, G) => {
+          this.clearGlobalBindingForCustomChange(), p.value = I.replace("#", "").toUpperCase(), d.style.backgroundColor = I, this.value.stops[n].color = I, G !== void 0 && (this.value.stops[n].opacity = G, f.value = String(G), y.textContent = `${G}%`);
           const j = N(I);
           f.style.setProperty("--slider-color", `rgb(${j.r}, ${j.g}, ${j.b})`), f.style.setProperty("--slider-color-transparent", `rgba(${j.r}, ${j.g}, ${j.b}, 0)`), this.updateGradientPreview(), this.createHandles(
             this.popoverEl.querySelector(".gradient-handles"),
@@ -1675,7 +1688,7 @@ const V = class V extends w {
         }
       }), p.addEventListener("blur", () => {
         this.previewUpdateTimeout && (clearTimeout(this.previewUpdateTimeout), this.previewUpdateTimeout = null), this.updateGradientPreview(), this.updateUI(), this.triggerChange();
-      }), m.addEventListener("click", async (x) => {
+      }), u.addEventListener("click", async (x) => {
         x.stopPropagation();
         try {
           await navigator.clipboard.writeText(`#${p.value}`);
@@ -1742,8 +1755,8 @@ const V = class V 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), m = 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")}${m.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 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),
@@ -1761,8 +1774,8 @@ const V = class V extends w {
         let a = t.right + 8, l = t.top;
         const r = i - t.right, h = t.left, d = e + n;
         r < d && h > r + 100 && (a = t.left - e - 8);
-        const p = s - t.bottom, m = t.top;
-        m >= o + n ? l = t.top - o - 8 : p >= o + n ? l = t.bottom + 8 : m > p ? (l = t.top - o - 8, l < n && (l = n)) : (l = t.bottom + 8, l + o > s - n && (l = s - o - n)), this.popoverEl.style.left = `${a}px`, this.popoverEl.style.top = `${l}px`, this.popoverPosition = { left: a, top: l };
+        const p = s - t.bottom, u = t.top;
+        u >= o + n ? l = t.top - o - 8 : p >= o + n ? l = t.bottom + 8 : u > p ? (l = t.top - o - 8, l < n && (l = n)) : (l = t.bottom + 8, l + o > s - n && (l = s - o - n)), this.popoverEl.style.left = `${a}px`, this.popoverEl.style.top = `${l}px`, this.popoverPosition = { left: a, top: l };
       }
       setTimeout(() => document.addEventListener("click", this.onBackgroundClick, !0), 200), document.addEventListener("keydown", this.handlePopoverKeydown, !0);
     }
@@ -1782,8 +1795,8 @@ const V = class V 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 m = n - e.bottom, C = e.top;
-        C >= a + o ? r = e.top - a - 8 : m >= a + o ? r = e.bottom + 8 : C > m ? (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`;
       });
     }
   }
@@ -1970,11 +1983,11 @@ const ot = class ot {
       var p;
       const h = t[r], d = this.settings[r];
       if (d !== h && (d && this.removeSetting(r), this.addSetting(r, h), i && r in o)) {
-        const m = o[r];
+        const u = o[r];
         try {
           M(h) ? h.setValue(
-            m
-          ) : R(h) ? (p = h.setValue) == null || p.call(h, m) : h.setValue && h.setValue(m);
+            u
+          ) : R(h) ? (p = h.setValue) == null || p.call(h, u) : h.setValue && h.setValue(u);
         } catch (C) {
           console.warn(`Could not preserve value for setting ${r}:`, C);
         }
@@ -2104,16 +2117,17 @@ const ot = class ot {
         ".setting-group-content"
       );
       if (o) {
-        M(e) && typeof e.setNestingLevel == "function" && e.setNestingLevel(this.nestingLevel + 1);
-        const a = e.draw(), l = this.deleteItemCfg ?? this.addItemCfg;
-        if (l) {
-          const d = l.keyPrefix ?? ((s = this.addItemCfg) == null ? void 0 : s.keyPrefix);
-          d && t.startsWith(d) && this.addDeleteButtonToElement(a, t);
+        const a = o.querySelector(".setting-group-empty");
+        a && a.remove(), M(e) && typeof e.setNestingLevel == "function" && e.setNestingLevel(this.nestingLevel + 1);
+        const l = e.draw(), r = this.deleteItemCfg ?? this.addItemCfg;
+        if (r) {
+          const p = r.keyPrefix ?? ((s = this.addItemCfg) == null ? void 0 : s.keyPrefix);
+          p && t.startsWith(p) && this.addDeleteButtonToElement(l, t);
         }
-        const r = o.querySelector(".sg-add-button-bottom");
-        r ? o.insertBefore(a, r) : o.appendChild(a), mt.trackElement(a), Q(a, this.nestingLevel + 1), lt(a, this.nestingLevel + 1);
-        const h = a.style.display;
-        a.style.display = "none", a.offsetHeight, a.style.display = h, this.updateNestingStyles();
+        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);
+        const d = l.style.display;
+        l.style.display = "none", l.offsetHeight, l.style.display = d, this.updateNestingStyles();
       }
     }
     const i = this.getValues();
@@ -2432,10 +2446,10 @@ 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 m = this.getNextIndexFromPrefix(this.addItemCfg.keyPrefix), C = this.addItemCfg.createItem(m);
+        const u = this.getNextIndexFromPrefix(this.addItemCfg.keyPrefix), C = this.addItemCfg.createItem(u);
         if (vt(C)) {
-          const g = `${this.addItemCfg.keyPrefix}${m}`;
-          this.addSetting(g, C);
+          const m = `${this.addItemCfg.keyPrefix}${u}`;
+          this.addSetting(m, C);
         }
       }), a.appendChild(h);
     }
@@ -2618,16 +2632,16 @@ class H extends Kt {
   draw() {
     const t = document.createElement("div");
     if (t.className = "color-setting-wrapper " + (this.props.wrapperClassName || ""), this.props.title || this.props.icon) {
-      const g = document.createElement("div");
-      if (g.className = "icon-container", this.props.icon) {
-        const u = document.createElement("span");
-        u.className = "input-icon", u.innerHTML = this.props.icon, g.appendChild(u);
+      const m = document.createElement("div");
+      if (m.className = "icon-container", this.props.icon) {
+        const g = document.createElement("span");
+        g.className = "input-icon", g.innerHTML = this.props.icon, m.appendChild(g);
       }
       if (this.props.title) {
-        const u = document.createElement("span");
-        u.className = "input-label", u.textContent = this.props.title, g.appendChild(u);
+        const g = document.createElement("span");
+        g.className = "input-label", g.textContent = this.props.title, m.appendChild(g);
       }
-      t.appendChild(g);
+      t.appendChild(m);
     }
     const e = document.createElement("div");
     e.className = "color-input-wrapper";
@@ -2645,41 +2659,41 @@ class H extends Kt {
       try {
         if (console.log("ColorSetting: renderGlobalOptions called"), a.innerHTML = "", !w) {
           console.error("ColorSetting: Setting class is undefined");
-          const u = document.createElement("div");
-          u.textContent = "Error: System error (Setting undefined)", a.appendChild(u);
+          const g = document.createElement("div");
+          g.textContent = "Error: System error (Setting undefined)", a.appendChild(g);
           return;
         }
-        const g = w.GlobalVariables || {};
-        if (console.log("ColorSetting: GlobalVariables:", g), !g || Object.keys(g).length === 0) {
-          const u = document.createElement("div");
-          u.textContent = "No global colors defined", u.style.gridColumn = "1 / -1", u.style.fontSize = "12px", u.style.color = "#666", a.appendChild(u);
+        const m = w.GlobalVariables || {};
+        if (console.log("ColorSetting: GlobalVariables:", m), !m || Object.keys(m).length === 0) {
+          const g = document.createElement("div");
+          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(g).forEach(([u, f]) => {
+        Object.entries(m).forEach(([g, f]) => {
           const v = document.createElement("button");
-          v.className = "global-color-btn", v.title = u, 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(--${u})` && (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(--${u})`;
+            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 = f;
           }), a.appendChild(v);
         });
-      } catch (g) {
-        console.error("ColorSetting: Error in renderGlobalOptions", g), a.innerHTML = "Error loading global options";
+      } catch (m) {
+        console.error("ColorSetting: Error in renderGlobalOptions", m), a.innerHTML = "Error loading global options";
       }
     };
-    l(), s.addEventListener("click", (g) => {
-      g.preventDefault(), s.classList.add("active"), n.classList.remove("active"), o.style.display = "flex", a.style.display = "none", this.value && this.value.startsWith("var(--");
-    }), n.addEventListener("click", (g) => {
-      g.preventDefault(), n.classList.add("active"), s.classList.remove("active"), o.style.display = "none", a.style.display = "grid", l();
+    l(), s.addEventListener("click", (m) => {
+      m.preventDefault(), s.classList.add("active"), n.classList.remove("active"), o.style.display = "flex", a.style.display = "none", this.value && this.value.startsWith("var(--");
+    }), n.addEventListener("click", (m) => {
+      m.preventDefault(), n.classList.add("active"), s.classList.remove("active"), o.style.display = "none", a.style.display = "grid", l();
     }), this.value && this.value.startsWith("var(--") ? n.click() : s.click();
-    const r = (g) => {
-      const u = g.value.trim();
-      if (!u)
+    const r = (m) => {
+      const g = m.value.trim();
+      if (!g)
         return e.classList.remove("error"), !0;
-      const v = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(u);
+      const v = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(g);
       return v ? e.classList.remove("error") : e.classList.add("error"), v;
     }, h = document.createElement("input");
     h.type = "color", h.className = "color-picker", h.value = this.value && !this.value.startsWith("var(--") ? this.value : "#000000", h.setAttribute("aria-label", "Choose color"), h.setAttribute("title", "Click to open color picker"), this.getDataPropsPath() && h.setAttribute("data-test-id", this.getDataPropsPath()), this.colorInputEl = h;
@@ -2687,40 +2701,40 @@ class H extends Kt {
     d.className = "color-preview";
     let p = this.value || "#000000";
     if (p.startsWith("var(--")) {
-      const g = p.replace("var(--", "").replace(")", "");
-      p = (w.GlobalVariables || {})[g] || "#000000";
+      const m = p.replace("var(--", "").replace(")", "");
+      p = (w.GlobalVariables || {})[m] || "#000000";
     }
     d.style.backgroundColor = p;
-    const m = document.createElement("input");
-    m.type = "text", m.className = "color-text-input", m.value = this.value || "", m.placeholder = "#000000", m.setAttribute("pattern", "#[0-9A-Fa-f]{6}"), m.setAttribute("title", "Enter a hex color value (e.g., #ff0000)"), m.setAttribute("aria-label", "Hex color value"), m.setAttribute("maxlength", "7"), this.getDataPropsPath() && m.setAttribute("data-test-id", `${this.getDataPropsPath()}_text`), this.textInputEl = m;
-    const C = (g) => {
+    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 C = (m) => {
       var f, v;
-      let u = g.trim();
-      if (u && !u.startsWith("#") && !u.startsWith("var(") && /^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(u) && (u = "#" + u, this.textInputEl && (this.textInputEl.value = u)), this.textInputEl && r(this.textInputEl)) {
-        const y = H.normalizeColorValue(u);
+      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, (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", (g) => {
-      const u = g.target.value;
-      C(u);
-    }), this.textInputEl.addEventListener("paste", (g) => {
+    return this.textInputEl.addEventListener("input", (m) => {
+      const g = m.target.value;
+      C(g);
+    }), this.textInputEl.addEventListener("paste", (m) => {
       var f;
-      g.preventDefault();
-      const u = ((f = g.clipboardData) == null ? void 0 : f.getData("text")) || "";
-      this.textInputEl && (this.textInputEl.value = u.trim(), C(u));
-    }), this.textInputEl.addEventListener("keydown", (g) => {
-      var u, f, v;
-      g.key === "Enter" && (g.preventDefault(), C(((u = this.textInputEl) == null ? void 0 : u.value) || ""), (f = this.textInputEl) == null || f.blur()), g.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", (g) => {
+      m.preventDefault();
+      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, 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 u = g.target.value, f = H.normalizeColorValue(u);
+      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", (g) => {
+    }), this.colorInputEl.addEventListener("change", (m) => {
       var v, y;
-      const u = g.target.value, f = H.normalizeColorValue(u);
+      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(m), e.appendChild(i), e.appendChild(o), e.appendChild(a), t.appendChild(e), this.element = t, t;
+    }), 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() {
     return this.element;
@@ -3521,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>
-`, G = 10, bt = 5, Ee = 24, be = 50, we = 5e3, xe = 800, Le = 0.8, ke = 700, Me = [
+`, F = 10, bt = 5, Ee = 24, be = 50, we = 5e3, xe = 800, Le = 0.8, ke = 700, Me = [
   "image/jpeg",
   "image/jpg",
   "image/png",
@@ -3883,7 +3897,7 @@ function Re(c, t) {
     n.stopPropagation(), t();
   }), i.appendChild(s), e.appendChild(i), e;
 }
-function Fe(c, t, e) {
+function Ge(c, t, e) {
   if (c === "input") {
     const i = document.createElement("label");
     i.className = "image-map-upload-label", i.innerHTML = `
@@ -3914,7 +3928,7 @@ function Fe(c, t, e) {
     }), i;
   }
 }
-function Ge(c, t, e, i) {
+function Fe(c, t, e, i) {
   const s = document.createElement("div");
   s.className = "image-map-container", s.addEventListener("scroll", e.onScroll);
   const n = document.createElement("div");
@@ -3983,7 +3997,7 @@ const A = class A extends w {
     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 Ve(), this.isUndoRedoOperation = !1, this.initialValue = null, this.lastMouseX = 0, this.lastMouseY = 0, this.props.maxMarkers = this.props.maxMarkers ?? ((e = this.props.prizeMap) == null ? void 0 : e.length) ?? G, 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 Ve(), this.isUndoRedoOperation = !1, this.initialValue = null, this.lastMouseX = 0, this.lastMouseY = 0, 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.handleFileManagerImageSelected(i);
     }), this.onBackgroundClick = (i) => {
       if (this.isPopoverOpen && this.popoverElements && !this.popoverElements.popover.contains(i.target)) {
@@ -4022,7 +4036,7 @@ const A = class A extends w {
       () => {
         this.value = { imageUrl: "", markers: [] }, this.mainDisplayElements && O(this.mainDisplayElements, this.value), this.triggerChange();
       }
-    ), o = this.props.upload || "file-manager", a = Fe(
+    ), o = this.props.upload || "file-manager", a = Ge(
       o,
       (h) => this.handleImageUpload(h),
       this.id
@@ -4053,7 +4067,7 @@ const A = class A extends w {
   }
   hasAllMarkers() {
     if (!this.value) return !1;
-    const t = this.props.maxMarkers || G;
+    const t = this.props.maxMarkers || F;
     return this.value.markers.length === t;
   }
   hasChanges() {
@@ -4094,7 +4108,7 @@ const A = class A extends w {
           canUndo: this.historyManager.canUndo(),
           canRedo: this.historyManager.canRedo(),
           markerCount: ((a = this.value) == null ? void 0 : a.markers.length) || 0,
-          maxMarkers: this.props.maxMarkers || G
+          maxMarkers: this.props.maxMarkers || F
         },
         {
           onUndo: () => this.undo(),
@@ -4106,7 +4120,7 @@ const A = class A extends w {
       r.className = "image-map-main-layout";
       const h = document.createElement("div");
       h.className = "image-map-image-section", this.cursorTooltip = new Pe();
-      const { container: d, imageElement: p } = Ge(
+      const { container: d, imageElement: p } = Fe(
         this.value.imageUrl,
         this.value.markers,
         {
@@ -4124,28 +4138,28 @@ const A = class A extends w {
         this.cursorTooltip
       );
       this.imageElement = p, h.appendChild(d);
-      const m = document.createElement("div");
-      m.className = "prize-list-section";
+      const u = document.createElement("div");
+      u.className = "prize-list-section";
       const C = He(
         this.value.markers,
-        this.props.maxMarkers || G,
+        this.props.maxMarkers || F,
         this.props.prizeMap
       );
-      m.appendChild(C), r.appendChild(h), r.appendChild(m), t.appendChild(r);
-      const g = We(
+      u.appendChild(C), r.appendChild(h), r.appendChild(u), t.appendChild(r);
+      const m = We(
         this.hasAllMarkers(),
         () => this.handleClearAllMarkers(),
         () => {
           this.triggerChange(), this.closePopover(!0);
         }
       );
-      t.appendChild(g);
-      const u = h.querySelector(
+      t.appendChild(m);
+      const g = h.querySelector(
         ".image-map-container"
-      ), f = m.querySelector(
+      ), f = u.querySelector(
         ".simple-prize-list"
       );
-      u && (u.scrollTop = s), f && (f.scrollTop = n), this.updateCursorTooltipContent();
+      g && (g.scrollTop = s), f && (f.scrollTop = n), this.updateCursorTooltipContent();
     } else {
       const l = Be({
         uploadMethod: this.props.upload || "file-manager",
@@ -4230,9 +4244,9 @@ const A = class A extends w {
   }
   handleImageClick(t) {
     if (this.draggingMarkerId !== null || !this.value || !this.imageElement) return;
-    if (this.value.markers.length >= (this.props.maxMarkers || G)) {
+    if (this.value.markers.length >= (this.props.maxMarkers || F)) {
       U.show(
-        `Maximum of ${this.props.maxMarkers || G} markers allowed.`
+        `Maximum of ${this.props.maxMarkers || F} markers allowed.`
       );
       return;
     }
@@ -4291,7 +4305,7 @@ const A = class A extends w {
   }
   updateCursorTooltipContent() {
     if (!this.cursorTooltip || !this.value) return;
-    const t = this.props.maxMarkers || G;
+    const t = this.props.maxMarkers || F;
     if (this.cursorTooltip.shouldShow(this.value.markers.length, t)) {
       const e = Ie(
         this.value.markers,
@@ -4359,7 +4373,11 @@ class je extends B {
       minValue: t.minValue ?? 0,
       icon: t.icon || _e,
       default: t.default ?? 100
-    }), this.inputType = "number", this.mobileValue = t.mobile;
+    }), this.inputType = "number", this.mobileValue = t.mobile, this.suffix = t.suffix || "px";
+  }
+  getValue() {
+    const t = this.value ?? 0;
+    return this.suffix === "%" ? t + this.suffix : t;
   }
   getMobileValue() {
     return this.mobileValue;
@@ -4411,9 +4429,11 @@ class ui extends w {
   }
   createOption(t, e) {
     const i = document.createElement("li");
-    i.classList.add("select-api-option"), i.textContent = t.name, i.dataset.index = String(e);
+    i.classList.add("select-api-option"), i.dataset.index = String(e);
     const s = document.createElement("input");
-    return s.type = "radio", s.classList.add("select-api-radio"), s.name = "select-api-radio-group", i.appendChild(s), this.selectedOptionIndex === e && (s.checked = !0), i;
+    s.type = "radio", s.classList.add("select-api-radio"), s.name = "select-api-radio-group", this.selectedOptionIndex === e && (s.checked = !0);
+    const n = document.createElement("span");
+    return n.classList.add("select-api-option-text"), n.textContent = t.name, i.appendChild(s), i.appendChild(n), i;
   }
   draw() {
     const t = document.createElement("div");
@@ -4720,12 +4740,12 @@ class Ci extends w {
       return;
     }
     const h = "...";
-    let d = 0, p = e.length, m = 0;
+    let d = 0, p = e.length, u = 0;
     for (; d <= p; ) {
-      const g = Math.floor((d + p) / 2), u = e.slice(0, g).trimEnd() + h;
-      this.measureTextWidth(u, i) <= l ? (m = g, d = g + 1) : p = g - 1;
+      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 C = e.slice(0, m).trimEnd() + h;
+    const C = e.slice(0, u).trimEnd() + h;
     t.placeholder = C;
   }
   autosizeTextarea(t, e = 3) {