builder-settings-types 0.0.316 → 0.0.317

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

@@ -1,8 +1,8 @@
-const bt = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
-let gt = (p = 21) => {
+const Et = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
+let mt = (p = 21) => {
   let t = "", e = crypto.getRandomValues(new Uint8Array(p |= 0));
   for (; p--; )
-    t += bt[e[p] & 63];
+    t += Et[e[p] & 63];
   return t;
 };
 function wt(p) {
@@ -142,18 +142,26 @@ function kt(p) {
       return "";
   }
 }
-const G = class G {
+const N = class N {
   constructor(t = {}) {
-    this.props = t, this.dataPropsPath = "", this.id = t.id || gt(), 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 || mt(), 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, G.DefaultUploadUrl = t;
+    globalThis.DefaultUploadUrl = t, N.DefaultUploadUrl = t;
   }
   static SetDefaultLanguage(t) {
-    globalThis.DefaultLanguage = t, G.DefaultLanguage = t;
+    globalThis.DefaultLanguage = t, N.DefaultLanguage = t;
+  }
+  static CurrentLanguage(t) {
+    return t !== void 0 && (N.currentLanguage = t, N.languageChangeCallbacks.forEach((e) => e(t))), N.currentLanguage || N.DefaultLanguage;
+  }
+  static onLanguageChange(t) {
+    return N.languageChangeCallbacks.add(t), () => {
+      N.languageChangeCallbacks.delete(t);
+    };
   }
   static SetGlobalVariables(t) {
-    G.GlobalVariables = { ...G.GlobalVariables, ...t };
+    N.GlobalVariables = { ...N.GlobalVariables, ...t };
   }
   destroy() {
     throw new Error("Method not implemented.");
@@ -236,25 +244,29 @@ const G = class G {
     return i.className = "input-icon " + (e || ""), i.innerHTML = t, i;
   }
 };
-G.GlobalVariables = {
-  // Global Colors (each supports solid OR gradient)
-  primary: "#00141E",
-  secondary: "#00141E",
-  tertiary: "#00141E",
-  accent: "#00141E",
-  // Text Color
+N.languageChangeCallbacks = /* @__PURE__ */ new Set(), N.GlobalVariables = {
+  primary: "#1B1958",
+  secondary: "#0D0938",
+  tertiary: "#2A1560",
+  accent: "#189541",
   "text-dark": "#00141E",
-  "text-light": "#00141E"
-};
-let x = G;
-function D(p) {
+  "text-light": "#FFFFFF"
+}, N.GlobalVariableGroups = [
+  {
+    title: "Global Colors",
+    keys: ["primary", "secondary", "tertiary", "accent"]
+  },
+  { title: "Text Color", keys: ["text-dark", "text-light"] }
+];
+let x = N;
+function G(p) {
   return p instanceof x;
 }
 function k(p) {
-  return p instanceof T;
+  return p instanceof $;
 }
 function ct(p) {
-  return D(p) || k(p);
+  return G(p) || k(p);
 }
 const ot = (p, t, e) => {
   let i = !1, s = 0, n = 0, o = 0, a = 0;
@@ -265,9 +277,9 @@ const ot = (p, t, e) => {
     o = d.left, a = d.top, document.addEventListener("mousemove", r), document.addEventListener("mouseup", c), document.body.style.userSelect = "none";
   }, r = (h) => {
     if (!i) return;
-    const d = h.clientX - s, u = h.clientY - n, f = window.innerWidth, g = window.innerHeight, m = t.offsetWidth, v = t.offsetHeight;
+    const d = h.clientX - s, u = h.clientY - n, f = window.innerWidth, m = window.innerHeight, g = t.offsetWidth, v = t.offsetHeight;
     let C = o + d, y = a + u;
-    C = Math.max(8, Math.min(f - m - 8, C)), y = Math.max(8, Math.min(g - v - 8, y)), t.style.left = `${C}px`, t.style.top = `${y}px`, e == null || e(C, y);
+    C = Math.max(8, Math.min(f - g - 8, C)), y = Math.max(8, Math.min(m - v - 8, y)), t.style.left = `${C}px`, t.style.top = `${y}px`, e == null || e(C, y);
   }, c = () => {
     i = !1, document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", c), document.body.style.userSelect = "";
   };
@@ -276,7 +288,7 @@ const ot = (p, t, e) => {
   if (!p) return null;
   let t = p.trim();
   return !t.startsWith("#") || (t = t.slice(1), t.length === 3 && (t = t.split("").map((e) => e + e).join("")), !/^[0-9a-fA-F]{6}$/.test(t)) ? null : `#${t.toUpperCase()}`;
-}, X = (p, t, e) => `#${[p, t, e].map((i) => Math.max(0, Math.min(255, i)).toString(16).padStart(2, "0")).join("")}`, V = (p) => {
+}, X = (p, t, e) => `#${[p, t, e].map((i) => Math.max(0, Math.min(255, i)).toString(16).padStart(2, "0")).join("")}`, P = (p) => {
   const t = p.replace("#", ""), e = t.length === 3 ? t.split("").map((i) => i + i).join("") : t;
   return {
     r: parseInt(e.slice(0, 2), 16),
@@ -284,7 +296,7 @@ const ot = (p, t, e) => {
     b: parseInt(e.slice(4, 6), 16)
   };
 }, z = (p) => {
-  const { r: t, g: e, b: i } = V(p), s = t / 255, n = e / 255, o = i / 255, a = Math.max(s, n, o), l = Math.min(s, n, o), r = a - l;
+  const { r: t, g: e, b: i } = P(p), s = t / 255, n = e / 255, o = i / 255, a = Math.max(s, n, o), l = Math.min(s, n, o), r = a - l;
   let c = 0;
   r !== 0 && (a === s ? c = (n - o) / r % 6 : a === n ? c = (o - s) / r + 2 : c = (s - n) / r + 4), c < 0 && (c += 6);
   const h = a === 0 ? 0 : r / a, d = a;
@@ -311,7 +323,7 @@ const ot = (p, t, e) => {
 }, st = (p, t) => {
   const e = Math.max(0, Math.min(100, t)) / 100;
   if (p.startsWith("#")) {
-    const { r: s, g: n, b: o } = V(p);
+    const { r: s, g: n, b: o } = P(p);
     return `rgba(${s}, ${n}, ${o}, ${e})`;
   }
   if (p.startsWith("rgba("))
@@ -342,7 +354,7 @@ const ot = (p, t, e) => {
   }
   const i = W(p);
   if (i) {
-    const { r: s, g: n, b: o } = V(i);
+    const { r: s, g: n, b: o } = P(i);
     return `rgba(${s}, ${n}, ${o}, ${e})`;
   }
   return p;
@@ -463,7 +475,7 @@ const ot = (p, t, e) => {
     const l = Ct(n);
     l.position = Math.max(0, Math.min(100, Math.round(o))), t.push(l);
   }), t;
-}, B = (p) => {
+}, A = (p) => {
   const t = p.stops && p.stops.length ? p.stops : [{ color: "#000000", position: 0, opacity: 100 }];
   return {
     type: p.type && ["linear", "radial", "solid"].includes(p.type) ? p.type : "linear",
@@ -474,11 +486,11 @@ const ot = (p, t, e) => {
       opacity: e.opacity === void 0 || Number.isNaN(e.opacity) ? 100 : e.opacity
     }))
   };
-}, S = (p) => {
+}, T = (p) => {
   const t = p.replace(/;$/, "").trim();
   if (Nt(t)) {
     const s = Ct(t);
-    return B({ type: "solid", angle: 0, stops: [s] });
+    return A({ type: "solid", angle: 0, stops: [s] });
   }
   const e = dt(t, "linear-gradient");
   if (e) {
@@ -499,15 +511,15 @@ const ot = (p, t, e) => {
       "to top left": 315
     }[a] ?? 90, o = s.slice(1));
     const l = pt(o);
-    return l.length ? B({ type: "linear", angle: n, stops: l }) : null;
+    return l.length ? A({ type: "linear", angle: n, stops: l }) : null;
   }
   const i = dt(t, "radial-gradient");
   if (i) {
     const s = ht(i), n = s[0] && !It(s[0]) ? s.slice(1) : s, o = pt(n);
-    return o.length ? B({ type: "radial", angle: 0, stops: o }) : null;
+    return o.length ? A({ type: "radial", angle: 0, stops: o }) : null;
   }
   return null;
-}, I = (p) => {
+}, S = (p) => {
   if (p.type === "solid") {
     const e = p.stops[0], i = e.color;
     if (i.startsWith("var(--"))
@@ -549,7 +561,7 @@ const ot = (p, t, e) => {
     const e = /* @__PURE__ */ new Set(), i = [];
     return t.forEach((s) => {
       let n = W(s);
-      n || S(s) && (n = s), n && (e.has(n) || (e.add(n), i.push(n)));
+      n || T(s) && (n = s), n && (e.has(n) || (e.add(n), i.push(n)));
     }), i.slice(0, this.MAX_COLORS);
   }
   static ensureLoaded() {
@@ -598,7 +610,7 @@ const ot = (p, t, e) => {
     if (i)
       s = "solid";
     else {
-      const l = S(t);
+      const l = T(t);
       l && (i = t, s = l.type === "solid" ? "solid" : "gradient");
     }
     if (!i) return;
@@ -637,8 +649,8 @@ const at = (p, t) => {
       const u = Vt(h);
       if (d.title = u, d.setAttribute("aria-label", `Use color: ${u}`), h.includes("gradient(")) {
         d.style.backgroundImage = h, d.style.backgroundColor = "transparent";
-        const g = S(h);
-        g && g.stops && g.stops.length > 0 && (d.style.borderColor = g.stops[0].color);
+        const m = T(h);
+        m && m.stops && m.stops.length > 0 && (d.style.borderColor = m.stops[0].color);
       } else
         d.style.backgroundColor = h, d.style.borderColor = h;
       d.addEventListener("mouseenter", () => o(d, u)), d.addEventListener("mouseleave", () => {
@@ -656,12 +668,12 @@ const at = (p, t) => {
   };
   return r(), { container: e, refresh: r };
 }, Vt = (p) => {
-  const t = S(p);
+  const t = T(p);
   if (t)
     return K(t);
   const e = W(p);
   if (e) {
-    const i = V(e);
+    const i = P(e);
     return `${e} (RGB: ${i.r}, ${i.g}, ${i.b})`;
   }
   return p;
@@ -669,11 +681,11 @@ const at = (p, t) => {
   <path fill-rule="evenodd" clip-rule="evenodd"
     d="M6.12347 4.96653L1.41158 0.254304C1.25449 0.102568 1.04409 0.0186071 0.825694 0.0205049C0.607302 0.0224037 0.398393 0.110007 0.24396 0.26445C0.0895282 0.418893 0.0019303 0.627818 3.24698e-05 0.846225C-0.00186536 1.06463 0.0820894 1.27505 0.233815 1.43215L4.9457 6.14438L0.233814 10.8566C0.0820886 11.0137 -0.00186625 11.2241 3.15434e-05 11.4425C0.00192934 11.6609 0.0895272 11.8699 0.243959 12.0243C0.398392 12.1787 0.607301 12.2663 0.825693 12.2682C1.04408 12.2701 1.25449 12.1862 1.41158 12.0344L6.12347 7.32222L10.8354 12.0344C10.9932 12.1824 11.2023 12.2632 11.4186 12.2597C11.6349 12.2562 11.8414 12.1687 11.9943 12.0156C12.1472 11.8626 12.2346 11.6561 12.2379 11.4398C12.2413 11.2234 12.1604 11.0143 12.0123 10.8566L7.30123 6.14438L12.0131 1.43215C12.0927 1.35531 12.1561 1.2634 12.1998 1.16177C12.2434 1.06014 12.2664 0.950833 12.2674 0.84023C12.2683 0.729626 12.2473 0.61994 12.2054 0.517568C12.1635 0.415196 12.1017 0.322191 12.0234 0.243979C11.9452 0.165768 11.8522 0.103916 11.7499 0.0620327C11.6475 0.0201492 11.5378 -0.000927989 11.4272 3.33052e-05C11.3166 0.000993646 11.2073 0.0239743 11.1057 0.0676297C11.0041 0.111286 10.9122 0.174745 10.8354 0.254305L6.12347 4.96653Z"
     fill="#919EAB"/>
-</svg>`, Et = `<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+</svg>`, bt = `<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path fill-rule="evenodd" clip-rule="evenodd" d="M19.1972 3.29156C18.936 3.03034 18.6259 2.82313 18.2847 2.68176C17.9434 2.54039 17.5777 2.46763 17.2083 2.46763C16.8389 2.46763 16.4731 2.54039 16.1319 2.68176C15.7906 2.82313 15.4805 3.03034 15.2194 3.29156L13.7822 4.72875C13.2585 4.4772 12.6697 4.39449 12.097 4.49207C11.5243 4.58964 10.9961 4.86267 10.5853 5.27343L9.91687 5.94281C9.74268 6.11693 9.6045 6.32366 9.51023 6.5512C9.41595 6.77873 9.36743 7.02261 9.36743 7.2689C9.36743 7.5152 9.41595 7.75907 9.51023 7.98661C9.6045 8.21414 9.74268 8.42088 9.91687 8.595L3.83625 14.6747C3.57512 14.936 3.36803 15.2462 3.2268 15.5875C3.08556 15.9288 3.01296 16.2947 3.01312 16.6641V18.3516C3.01312 18.6499 3.13165 18.9361 3.34263 19.1471C3.55361 19.358 3.83975 19.4766 4.13812 19.4766H5.82562C6.57129 19.4759 7.28618 19.1792 7.81312 18.6516L13.8937 12.5728C14.0679 12.747 14.2746 12.8852 14.5021 12.9795C14.7297 13.0737 14.9735 13.1223 15.2198 13.1223C15.4661 13.1223 15.71 13.0737 15.9375 12.9795C16.1651 12.8852 16.3718 12.747 16.5459 12.5728L17.2153 11.9025C17.6261 11.4917 17.8991 10.9635 17.9967 10.3908C18.0942 9.81811 18.0115 9.22926 17.76 8.70562L19.1972 7.26937C19.4584 7.0082 19.6656 6.69813 19.807 6.35687C19.9484 6.01561 20.0211 5.64985 20.0211 5.28047C20.0211 4.91108 19.9484 4.54532 19.807 4.20406C19.6656 3.8628 19.4584 3.55273 19.1972 3.29156ZM5.16281 16.0012L11.2425 9.92062L12.5681 11.2462L6.48844 17.3269C6.31266 17.5027 6.07424 17.6015 5.82562 17.6016H4.88812V16.6641C4.88818 16.4154 4.98698 16.177 5.16281 16.0012Z" fill="#353C47"/>
- </svg>`, Pt = `<svg width="15" height="17" viewBox="0 0 15 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+ </svg>`, Tt = `<svg width="15" height="17" viewBox="0 0 15 17" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M14.1333 12.4667H0.8M0.8 12.4667L4.13333 9.13332M0.8 12.4667L4.13333 15.8M0.8 4.13332H14.1333M14.1333 4.13332L10.8 0.799988M14.1333 4.13332L10.8 7.46665" stroke="#919EAB" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>`, Tt = `<svg width="14" height="2" viewBox="0 0 14 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+</svg>`, Pt = `<svg width="14" height="2" viewBox="0 0 14 2" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M0.8 0.800003H12.4667" stroke="#919EAB" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`, Ot = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect x="21.25" y="21.333" width="18" height="18" rx="1" transform="rotate(-180 21.25 21.333)" stroke="#637381"/>
@@ -740,7 +752,7 @@ class ut {
     const a = document.createElement("div");
     a.className = "color-picker-sliders-container";
     const l = document.createElement("button");
-    l.className = "color-picker-eyedropper", l.type = "button", l.innerHTML = Et;
+    l.className = "color-picker-eyedropper", l.type = "button", l.innerHTML = bt;
     const r = document.createElement("div");
     r.className = "color-picker-sliders-group";
     const c = document.createElement("div");
@@ -751,27 +763,27 @@ class ut {
     d.className = "color-picker-opacity", this.opacitySlider = d;
     const u = document.createElement("div");
     u.className = "color-picker-opacity-marker", this.opacityMarker = u, d.appendChild(u), r.appendChild(c), r.appendChild(d), a.appendChild(l), a.appendChild(r);
-    const f = at((E) => {
+    const f = at((b) => {
       var w;
-      this.setColor(E), (w = this.onChange) == null || w.call(this, E, this.currentOpacity);
+      this.setColor(b), (w = this.onChange) == null || w.call(this, b, this.currentOpacity);
     }, this.recentScope);
     this.recentSectionRefresh = f.refresh;
-    const g = document.createElement("div");
-    g.className = "color-picker-format-section";
-    const m = document.createElement("select");
-    m.className = "color-picker-format-select", this.select = m;
+    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 v = document.createElement("option");
     v.value = "hex", v.textContent = "HEX";
     const C = document.createElement("option");
     C.value = "rgb", C.textContent = "RGB";
     const y = document.createElement("option");
-    y.value = "hsl", y.textContent = "HSL", m.appendChild(v), m.appendChild(C), m.appendChild(y);
-    const b = document.createElement("input");
-    b.type = "text", b.className = "color-picker-color-input", b.value = this.currentColor, this.input = b;
+    y.value = "hsl", y.textContent = "HSL", g.appendChild(v), g.appendChild(C), g.appendChild(y);
+    const E = document.createElement("input");
+    E.type = "text", E.className = "color-picker-color-input", E.value = this.currentColor, this.input = E;
     const L = document.createElement("div");
     L.className = "color-picker-input-container";
-    const N = document.createElement("button");
-    return N.className = "color-picker-copy-inside", N.textContent = "Copy", L.appendChild(b), L.appendChild(N), g.appendChild(m), g.appendChild(L), t.appendChild(e), t.appendChild(n), t.appendChild(a), t.appendChild(f.container), t.appendChild(g), t.addEventListener("click", (E) => E.stopPropagation()), this.bind(n, c, d, b, m, N, l), t;
+    const I = document.createElement("button");
+    return I.className = "color-picker-copy-inside", I.textContent = "Copy", L.appendChild(E), L.appendChild(I), m.appendChild(g), m.appendChild(L), t.appendChild(e), t.appendChild(n), t.appendChild(a), t.appendChild(f.container), t.appendChild(m), t.addEventListener("click", (b) => b.stopPropagation()), this.bind(n, c, d, E, g, I, l), t;
   }
   createBackdrop() {
     const t = document.createElement("div");
@@ -782,14 +794,14 @@ class ut {
       var C;
       const d = t.getBoundingClientRect(), u = Math.max(0, Math.min(1, (h.clientX - d.left) / d.width)), f = Math.max(0, Math.min(1, (h.clientY - d.top) / d.height));
       this.colorMarker.style.left = `${u * 100}%`, this.colorMarker.style.top = `${f * 100}%`;
-      const m = this.parsePercentage(this.hueMarker.style.left || "0%") * 360, v = U(m, u, 1 - f);
+      const g = this.parsePercentage(this.hueMarker.style.left || "0%") * 360, v = U(g, u, 1 - f);
       this.currentColor = v, this.syncInput(), this.updateOpacityBg(), (C = this.onChange) == null || C.call(this, v, this.currentOpacity);
     }, r = (h) => {
       var C;
       const d = e.getBoundingClientRect();
       let u = Math.max(0, Math.min(1, (h.clientX - d.left) / d.width));
       this.hueMarker.style.left = `${u * 100}%`;
-      const f = u * 360, g = this.parsePercentage(this.colorMarker.style.left || "0%"), m = this.parsePercentage(this.colorMarker.style.top || "0%"), v = U(f, g, 1 - m);
+      const f = u * 360, m = this.parsePercentage(this.colorMarker.style.left || "0%"), g = this.parsePercentage(this.colorMarker.style.top || "0%"), v = U(f, m, 1 - g);
       this.currentColor = v, this.colorArea.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${f}, 100%, 50%))`, this.syncInput(), this.updateOpacityBg(), (C = this.onChange) == null || C.call(this, v, this.currentOpacity);
     }, c = (h) => {
       var f;
@@ -848,7 +860,7 @@ class ut {
     const t = this.select.value, { h: e, s: i, v: s } = z(this.currentColor);
     if (t === "hex") this.input.value = this.currentColor;
     else if (t === "rgb") {
-      const { r: n, g: o, b: a } = V(this.currentColor);
+      const { r: n, g: o, b: a } = P(this.currentColor);
       this.input.value = `rgb(${n}, ${o}, ${a})`;
     } else {
       const { hue: n, sat: o, lightness: a } = vt(e, i, s);
@@ -877,7 +889,7 @@ class ut {
     e && this.setColor(e);
   }
   updateOpacityBg() {
-    const { r: t, g: e, b: i } = V(this.currentColor);
+    const { r: t, g: e, b: i } = P(this.currentColor);
     this.opacitySlider.style.setProperty(
       "--base-color",
       `rgb(${t}, ${e}, ${i})`
@@ -890,8 +902,8 @@ class ut {
     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(), c = window.innerWidth, h = window.innerHeight, d = 16;
     let u = r.right + 8, f = r.top;
-    const g = c - r.right, m = r.left;
-    g >= a + d ? u = r.right + 8 : m >= a + d ? u = r.left - a - 8 : u = Math.max(d, (c - a) / 2);
+    const m = c - r.right, g = r.left;
+    m >= a + d ? u = r.right + 8 : g >= a + d ? u = r.left - a - 8 : u = Math.max(d, (c - a) / 2);
     const v = h - r.bottom, C = r.top;
     v >= l + d ? f = r.bottom + 8 : C >= l + d ? f = r.top - l - 8 : v > C ? (f = r.bottom + 8, f + l > h - d && (f = h - l - d)) : (f = r.top - l - 8, f < d && (f = d)), this.element.style.left = `${u}px`, this.element.style.top = `${f}px`;
   }
@@ -921,7 +933,7 @@ class Bt {
     const s = document.createElement("div");
     s.className = "color-picker-sliders-container embedded";
     const n = document.createElement("button");
-    n.className = "color-picker-eyedropper", n.type = "button", n.innerHTML = Et;
+    n.className = "color-picker-eyedropper", n.type = "button", n.innerHTML = bt;
     const o = document.createElement("div");
     o.className = "color-picker-sliders-group";
     const a = document.createElement("div");
@@ -932,9 +944,9 @@ class Bt {
     r.className = "color-picker-opacity embedded", this.opacitySlider = r;
     const c = document.createElement("div");
     c.className = "color-picker-opacity-marker", this.opacityMarker = c, r.appendChild(c), o.appendChild(a), o.appendChild(r), s.appendChild(n), s.appendChild(o);
-    const h = at((b) => {
-      const L = S(b);
-      L && L.type !== "solid" ? this.onColorChange(b, this.currentOpacity) : (this.setColor(b), this.onColorChange(this.currentColor, this.currentOpacity));
+    const h = at((E) => {
+      const L = T(E);
+      L && L.type !== "solid" ? this.onColorChange(E, this.currentOpacity) : (this.setColor(E), this.onColorChange(this.currentColor, this.currentOpacity));
     }, "all");
     this.recentSectionRefresh = h.refresh;
     const d = document.createElement("div");
@@ -943,10 +955,10 @@ class Bt {
     u.className = "color-picker-format-select", this.select = u;
     const f = document.createElement("option");
     f.value = "hex", f.textContent = "HEX";
-    const g = document.createElement("option");
-    g.value = "rgb", g.textContent = "RGB";
     const m = document.createElement("option");
-    m.value = "hsl", m.textContent = "HSL", u.appendChild(f), u.appendChild(g), u.appendChild(m);
+    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 v = document.createElement("input");
     v.type = "text", v.className = "color-picker-color-input", this.input = v;
     const C = document.createElement("div");
@@ -958,12 +970,12 @@ class Bt {
     const l = (h) => {
       const d = t.getBoundingClientRect(), u = Math.max(0, Math.min(1, (h.clientX - d.left) / d.width)), f = Math.max(0, Math.min(1, (h.clientY - d.top) / d.height));
       this.colorMarker.style.left = `${u * 100}%`, this.colorMarker.style.top = `${f * 100}%`;
-      const m = this.parsePercentage(this.hueMarker.style.left || "0%") * 360, v = U(m, u, 1 - f);
+      const g = this.parsePercentage(this.hueMarker.style.left || "0%") * 360, v = U(g, u, 1 - f);
       this.currentColor = v, this.syncInput(), this.updateOpacityBg(), this.queueChange();
     }, r = (h) => {
       const d = e.getBoundingClientRect(), u = Math.max(0, Math.min(1, (h.clientX - d.left) / d.width));
       this.hueMarker.style.left = `${u * 100}%`;
-      const f = u * 360, g = this.parsePercentage(this.colorMarker.style.left || "0%"), m = this.parsePercentage(this.colorMarker.style.top || "0%"), v = U(f, g, 1 - m);
+      const f = u * 360, m = this.parsePercentage(this.colorMarker.style.left || "0%"), g = this.parsePercentage(this.colorMarker.style.top || "0%"), v = U(f, m, 1 - g);
       this.currentColor = v, this.colorArea.style.background = `linear-gradient(to top, #000, transparent),
          linear-gradient(to right, #fff, hsl(${f}, 100%, 50%))`, this.syncInput(), this.updateOpacityBg(), this.queueChange();
     }, c = (h) => {
@@ -1025,7 +1037,7 @@ class Bt {
     if (t === "hex")
       this.input.value = this.currentColor;
     else if (t === "rgb") {
-      const { r: n, g: o, b: a } = V(this.currentColor);
+      const { r: n, g: o, b: a } = P(this.currentColor);
       this.input.value = `rgb(${n}, ${o}, ${a})`;
     } else {
       const { hue: n, sat: o, lightness: a } = vt(e, i, s);
@@ -1055,7 +1067,7 @@ class Bt {
     e && (this.setColor(e), this.onColorChange(this.currentColor, this.currentOpacity));
   }
   updateOpacityBg() {
-    const { r: t, g: e, b: i } = V(this.currentColor);
+    const { r: t, g: e, b: i } = P(this.currentColor);
     this.opacitySlider.style.setProperty(
       "--base-color",
       `rgb(${t}, ${e}, ${i})`
@@ -1096,7 +1108,7 @@ class Bt {
     this.initFromColor(t, e);
   }
 }
-const $ = class $ extends x {
+const V = class V extends x {
   constructor(t = {}) {
     const e = typeof t.default == "string" ? void 0 : t.default;
     super({
@@ -1107,16 +1119,10 @@ const $ = class $ extends x {
       type: "text",
       angle: "number",
       stops: "text"
-    }, 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.solidPicker = null, this.pendingSolidColor = null, this.variant = "default", this.globalLayoutMode = "list", this.globalSearchQuery = "", this.currentMode = "custom", this.linkedGlobalVariable = null, this.unlinkButton = null, this.onBackgroundClick = (i) => {
+    }, 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.variant = "default", this.globalLayoutMode = "list", this.globalSearchQuery = "", this.currentMode = "custom", this.linkedGlobalVariable = null, this.unlinkButton = null, this.onBackgroundClick = (i) => {
       var d;
       if (!this.popoverEl || !this.isPopoverOpen) return;
-      const s = i.target, n = this.popoverEl.contains(s), o = (d = this.element) == null ? void 0 : d.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"
-      ), c = s.classList.contains(
-        "color-picker-backdrop"
-      ), h = s.classList.contains(
-        "gradient-popover-backdrop"
-      );
+      const s = i.target, n = this.popoverEl.contains(s), o = (d = this.element) == null ? void 0 : d.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"), c = s.classList.contains("color-picker-backdrop"), h = s.classList.contains("gradient-popover-backdrop");
       !n && !o && !l && !r && !c && !h && this.closePopover();
     }, this.handlePopoverKeydown = (i) => {
       if (this.isPopoverOpen) {
@@ -1126,8 +1132,7 @@ const $ = class $ extends x {
         }
         if (i.key === "Enter") {
           const s = i.target;
-          if (s && (s.tagName === "INPUT" || s.tagName === "TEXTAREA"))
-            return;
+          if (s && (s.tagName === "INPUT" || s.tagName === "TEXTAREA")) return;
           i.preventDefault(), this.closePopover();
         }
       }
@@ -1170,16 +1175,16 @@ const $ = class $ extends x {
     const t = this.originalDefault;
     if (typeof t == "string") {
       if (t.startsWith("var(--"))
-        return B({
+        return A({
           type: "solid",
           angle: 0,
           stops: [{ color: t, position: 0, opacity: 100 }]
         });
-      const i = S(t);
+      const i = T(t);
       if (i)
-        return B(i);
+        return A(i);
     }
-    return B(t && typeof t == "object" ? t : {
+    return A(t && typeof t == "object" ? t : {
       type: "linear",
       angle: 90,
       stops: [
@@ -1190,11 +1195,11 @@ const $ = class $ extends x {
   }
   setValue(t) {
     let e = null;
-    typeof t == "string" ? t.startsWith("var(--") ? e = B({
+    typeof t == "string" ? t.startsWith("var(--") ? e = A({
       type: "solid",
       angle: 0,
       stops: [{ color: t, position: 0, opacity: 100 }]
-    }) : e = S(t) : t && typeof t == "object" && (e = B(t)), e || (e = this.defaultValue()), this.value = e, this.setLinkedGlobalVariableFrom(t ?? e), this.updateUI(), this.isPopoverOpen && this.refreshPopoverContent(), this.triggerChange(), this.pendingSolidColor = null, this.updateUnlinkButtonVisibility();
+    }) : e = T(t) : t && typeof t == "object" && (e = A(t)), e || (e = this.defaultValue()), this.value = e, this.setLinkedGlobalVariableFrom(t ?? e), this.updateUI(), this.isPopoverOpen && this.refreshPopoverContent(), this.triggerChange(), this.pendingSolidColor = null, this.updateUnlinkButtonVisibility();
   }
   updateUI() {
     if (this.previewEl && this.value)
@@ -1203,7 +1208,7 @@ const $ = class $ extends x {
         this.previewEl.style.background = st(i, e);
       } else {
         const t = this.resolveGradientGlobalVars(this.value);
-        this.previewEl.style.background = I(t);
+        this.previewEl.style.background = S(t);
       }
     if (this.inputEl && this.value && !this.isEditing)
       if (this.isBoundToGlobal() && this.linkedGlobalVariable) {
@@ -1224,11 +1229,12 @@ const $ = class $ extends x {
   }
   updateUnlinkButtonVisibility() {
     if (!this.unlinkButton) return;
-    this.isBoundToGlobal() ? this.unlinkButton.classList.add("visible") : this.unlinkButton.classList.remove("visible");
+    const t = this.isBoundToGlobal();
+    t ? this.unlinkButton.classList.add("visible") : this.unlinkButton.classList.remove("visible"), this.previewEl && (t ? this.previewEl.classList.add("bound") : this.previewEl.classList.remove("bound"));
   }
   cssForTextValue() {
     return this.value ? {
-      background: I(this.value),
+      background: S(this.value),
       "-webkit-background-clip": "text",
       "background-clip": "text",
       color: "transparent",
@@ -1244,7 +1250,7 @@ const $ = class $ extends x {
       s.className = "input-label", s.textContent = this.props.title, i.appendChild(s), t.appendChild(i);
     }
     const e = document.createElement("div");
-    return e.className = "gradient-input-wrapper", this.previewEl = document.createElement("div"), this.previewEl.className = "gradient-mini-preview", this.previewEl.style.background = this.value ? I(this.value) : "linear-gradient(90deg, #a84b4b 0%, #786666 100%)", this.previewEl.addEventListener("click", (i) => {
+    return e.className = "gradient-input-wrapper", this.previewEl = document.createElement("div"), this.previewEl.className = "gradient-mini-preview", this.previewEl.style.background = this.value ? S(this.value) : "linear-gradient(90deg, #a84b4b 0%, #786666 100%)", this.previewEl.addEventListener("click", (i) => {
       i.preventDefault(), i.stopPropagation(), this.openPopover();
     }), this.inputEl = document.createElement("input"), this.inputEl.type = "text", this.inputEl.className = "gradient-text-input", this.inputEl.placeholder = "Enter gradient CSS or paste color...", this.inputEl.value = this.value ? K(this.value) : "", this.inputEl.readOnly = !1, this.inputEl.addEventListener("focus", () => {
       if (this.isEditing = !0, this.value)
@@ -1260,14 +1266,11 @@ const $ = class $ extends x {
             }
           }
         } else
-          this.inputEl.value = I(this.value);
+          this.inputEl.value = S(this.value);
     }), this.inputEl.addEventListener("blur", () => {
       this.isEditing = !1, this.value && (this.inputEl.value = K(this.value));
-    }), this.inputEl.addEventListener(
-      "paste",
-      (i) => this.handlePaste(i)
-    ), this.inputEl.addEventListener("input", (i) => this.handleTextInput(i)), this.inputEl.addEventListener("keydown", (i) => {
-      i.key === "Enter" && (this.handleTextInput(i), this.inputEl.blur()), i.key === "Escape" && (this.value && (this.inputEl.value = I(this.value)), this.inputEl.blur());
+    }), this.inputEl.addEventListener("paste", (i) => this.handlePaste(i)), this.inputEl.addEventListener("input", (i) => this.handleTextInput(i)), this.inputEl.addEventListener("keydown", (i) => {
+      i.key === "Enter" && (this.handleTextInput(i), this.inputEl.blur()), i.key === "Escape" && (this.value && (this.inputEl.value = S(this.value)), this.inputEl.blur());
     }), e.appendChild(this.previewEl), this.unlinkButton = document.createElement("button"), this.unlinkButton.type = "button", this.unlinkButton.className = "gradient-unlink-button", this.unlinkButton.innerHTML = Ht, this.unlinkButton.title = "Break global color binding", this.unlinkButton.addEventListener("click", (i) => {
       i.preventDefault(), i.stopPropagation(), this.breakGlobalBinding();
     }), e.appendChild(this.unlinkButton), e.appendChild(this.inputEl), t.appendChild(e), this.createPopover(), this.element = t, this.updateUnlinkButtonVisibility(), t;
@@ -1322,18 +1325,18 @@ const $ = class $ extends x {
       this.switchType(o);
     }), t.appendChild(e), t.appendChild(i), t;
   }
-  switchType(t) {
-    var n;
+  switchType(t, e = !1) {
+    var o;
     if (!this.value) return;
-    const e = this.isBoundToGlobal(), i = this.linkedGlobalVariable;
+    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 = [
       { color: "#a84b4b", position: 0, opacity: 100 },
       { color: "#786666", position: 100, opacity: 100 }
     ]), t !== "solid" && this.value.stops.length === 1) {
-      const a = this.value.stops[0].color;
-      if (a.startsWith("var(--")) {
-        const l = this.resolveGlobalVarColor(a), r = S(l);
-        r && r.type !== "solid" && r.stops.length >= 2 ? (this.value.stops = r.stops, this.value.angle = r.angle, this.value.type = r.type) : (this.value.stops.push({
+      const l = this.value.stops[0].color;
+      if (l.startsWith("var(--")) {
+        const r = this.resolveGlobalVarColor(l), c = T(r);
+        c && c.type !== "solid" && c.stops.length >= 2 ? (this.value.stops = c.stops, this.value.angle = c.angle, this.value.type = c.type) : (this.value.stops.push({
           color: "#786666",
           position: 100,
           opacity: 100
@@ -1346,20 +1349,18 @@ const $ = class $ extends x {
         }), this.value.angle = 90;
     } else if (t !== "solid" && this.value.stops.length >= 2)
       this.value.angle || (this.value.angle = 90);
-    else if (t === "solid" && e && i) {
-      const o = this.value.stops && this.value.stops[0] ? this.value.stops[0].opacity ?? 100 : 100;
-      this.value.stops = [
-        { color: i, position: 0, opacity: o }
-      ], this.value.angle = 0;
+    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;
     }
     if (this.popoverEl) {
-      const o = this.popoverEl.querySelectorAll(".gradient-type-tab");
-      o.forEach((r) => r.classList.remove("active"));
-      const a = o[0], l = o[1];
-      t === "solid" ? a == null || a.classList.add("active") : l == null || l.classList.add("active");
+      const a = this.popoverEl.querySelectorAll(".gradient-type-tab");
+      a.forEach((c) => c.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 s = (n = this.popoverEl) == null ? void 0 : n.querySelector(".gradient-editor-content");
-    s && this.updatePopoverContent(s), this.updateUI(), this.triggerChange();
+    const n = (o = this.popoverEl) == null ? void 0 : o.querySelector(".gradient-editor-content");
+    n && this.updatePopoverContent(n), this.updateUI(), e && this.triggerChange();
   }
   updatePopoverContent(t) {
     if (t.innerHTML = "", !!this.value) {
@@ -1377,50 +1378,44 @@ const $ = class $ extends x {
       let d = {};
       try {
         d = x.GlobalVariables || {};
-      } catch (m) {
-        console.warn("Could not access Setting.GlobalVariables", m);
+      } catch (g) {
+        console.warn("Could not access Setting.GlobalVariables", g);
       }
       if (!d || Object.keys(d).length === 0) {
-        const m = document.createElement("div");
-        m.textContent = "No global colors defined", m.style.fontSize = "12px", m.style.color = "#666", m.style.padding = "8px", h.appendChild(m);
+        const g = document.createElement("div");
+        g.textContent = "No global colors defined", g.style.fontSize = "12px", g.style.color = "#666", g.style.padding = "8px", h.appendChild(g);
         return;
       }
-      const u = [
-        {
-          title: "Global Colors",
-          keys: ["primary", "secondary", "tertiary", "accent", "background"]
-        },
-        {
-          title: "Text Color",
-          keys: ["text-dark", "text-light"]
-        }
+      const u = x.GlobalVariableGroups || [
+        { title: "Global Colors", keys: ["primary", "secondary", "tertiary", "accent"] },
+        { title: "Text Color", keys: ["text-dark", "text-light"] }
       ], f = 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"), h.appendChild(g), u.forEach((m) => {
-        const v = Object.entries(d).filter(([C]) => !m.keys.includes(C) && m.title !== "Global Colors" ? !1 : m.keys.includes(C) && C.toLowerCase().includes(f));
+      let m;
+      this.globalLayoutMode === "list" ? (m = document.createElement("div"), m.className = "global-colors-list") : (m = document.createElement("div"), m.className = "global-colors-grid"), h.appendChild(m), u.forEach((g) => {
+        const v = Object.entries(d).filter(([C]) => !g.keys.includes(C) && g.title !== "Global Colors" ? !1 : g.keys.includes(C) && C.toLowerCase().includes(f));
         v.length !== 0 && v.forEach(([C, y]) => {
           if (this.globalLayoutMode === "list") {
-            const b = document.createElement("div");
-            b.className = "global-color-row";
+            const E = document.createElement("div");
+            E.className = "global-color-row";
             const L = document.createElement("div");
             L.className = "global-color-circle";
-            const N = this.resolveGlobalVarColor(y);
-            L.style.background = N, (this.linkedGlobalVariable === `var(--${C})` || e.color === `var(--${C})`) && L.classList.add("selected");
+            const I = this.resolveGlobalVarColor(y);
+            L.style.background = I, (this.linkedGlobalVariable === `var(--${C})` || e.color === `var(--${C})`) && L.classList.add("selected");
             const w = document.createElement("span");
-            w.className = "global-color-label", w.textContent = C.split("-").map((M) => M.charAt(0).toUpperCase() + M.slice(1)).join(" "), b.appendChild(L), b.appendChild(w), b.addEventListener("click", (M) => {
+            w.className = "global-color-label", w.textContent = C.split("-").map((M) => M.charAt(0).toUpperCase() + M.slice(1)).join(" "), E.appendChild(L), E.appendChild(w), E.addEventListener("click", (M) => {
               M.preventDefault();
-              const A = `var(--${C})`;
-              this.setValue(A), this.pendingSolidColor = A, i(h);
-            }), g.appendChild(b);
+              const D = `var(--${C})`;
+              this.setValue(D), this.pendingSolidColor = D, i(h);
+            }), m.appendChild(E);
           } else {
-            const b = document.createElement("div");
-            b.className = "global-color-circle";
+            const E = document.createElement("div");
+            E.className = "global-color-circle";
             const L = this.resolveGlobalVarColor(y);
-            b.style.background = L, b.title = C.split("-").map((E) => E.charAt(0).toUpperCase() + E.slice(1)).join(" "), (this.linkedGlobalVariable === `var(--${C})` || e.color === `var(--${C})`) && b.classList.add("selected"), b.addEventListener("click", (E) => {
-              E.preventDefault();
+            E.style.background = L, E.title = C.split("-").map((b) => b.charAt(0).toUpperCase() + b.slice(1)).join(" "), (this.linkedGlobalVariable === `var(--${C})` || e.color === `var(--${C})`) && E.classList.add("selected"), E.addEventListener("click", (b) => {
+              b.preventDefault();
               const w = `var(--${C})`;
               this.setValue(w), this.pendingSolidColor = w, i(h);
-            }), g.appendChild(b);
+            }), m.appendChild(E);
           }
         });
       });
@@ -1452,9 +1447,9 @@ const $ = class $ extends x {
       initialOpacity: e.opacity ?? 100,
       onColorChange: (s, n) => {
         if (this.clearGlobalBindingForCustomChange(), this.value) {
-          const o = S(s);
+          const o = T(s);
           if (o && o.type !== "solid") {
-            this.value = o, this.switchType(o.type);
+            this.value = o, this.switchType(o.type, !0);
             return;
           }
           this.value.stops[0].color = s, this.value.stops[0].opacity = n, this.updateUI(), this.triggerChange(), this.pendingSolidColor = s;
@@ -1476,25 +1471,25 @@ const $ = class $ extends x {
       const u = document.createElement("option");
       u.value = "radial", u.textContent = "Radial", h.appendChild(d), h.appendChild(u), h.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 = Pt, h.addEventListener("change", () => {
-        this.clearGlobalBindingForCustomChange(), this.switchType(h.value === "radial" ? "radial" : "linear"), e && this.updateDegreeVisibility(e);
-      }), e.addEventListener("focus", (g) => {
-        const m = g.target;
-        m.value = m.value.replace(/[^0-9-]/g, ""), setTimeout(() => m.select(), 0);
-      }), e.addEventListener("input", (g) => {
+      f.type = "button", f.className = "gradient-flip-btn", f.innerHTML = Tt, h.addEventListener("change", () => {
+        this.clearGlobalBindingForCustomChange(), this.switchType(h.value === "radial" ? "radial" : "linear", !0), e && this.updateDegreeVisibility(e);
+      }), 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 m = parseInt(g.target.value);
-        !Number.isNaN(m) && this.value && (this.value.angle = Math.max(0, Math.min(360, m)), 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 C;
         this.previewUpdateTimeout && (clearTimeout(this.previewUpdateTimeout), this.previewUpdateTimeout = null);
-        const m = g.target;
-        let v = parseInt(m.value);
-        Number.isNaN(v) && (v = ((C = this.value) == null ? void 0 : C.angle) ?? 0), v = Math.max(0, Math.min(360, v)), this.value && (this.value.angle = v), m.value = `${v}°`, this.updateGradientPreview(), this.updateUI(), this.triggerChange();
+        const g = m.target;
+        let v = parseInt(g.value);
+        Number.isNaN(v) && (v = ((C = this.value) == null ? void 0 : C.angle) ?? 0), v = Math.max(0, Math.min(360, v)), this.value && (this.value.angle = v), g.value = `${v}°`, this.updateGradientPreview(), this.updateUI(), this.triggerChange();
       }), f.addEventListener("click", () => {
-        this.clearGlobalBindingForCustomChange(), !(!this.value || !this.value.stops) && (this.value.stops.forEach((g) => {
-          g.position = 100 - g.position;
-        }), this.value.stops.sort((g, m) => g.position - m.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());
       }), c.appendChild(h), c.appendChild(e), c.appendChild(f), t.appendChild(c), this.updateDegreeVisibility(e);
     }
     const i = document.createElement("div");
@@ -1510,8 +1505,8 @@ const $ = class $ extends x {
     const l = document.createElement("div");
     l.className = "gradient-stops", t.appendChild(n), t.appendChild(l), this.updateStopsList(l);
     const r = at((c) => {
-      const h = S(c);
-      h && (this.clearGlobalBindingForCustomChange(), this.value = h, this.switchType(h.type), this.updateUI(), this.triggerChange());
+      const h = T(c);
+      h && (this.clearGlobalBindingForCustomChange(), this.value = h, this.switchType(h.type, !0), this.updateUI(), this.triggerChange());
     }, "all");
     this.recentGradientRefresh = r.refresh, t.appendChild(r.container), a.addEventListener("click", () => {
       var c;
@@ -1527,11 +1522,9 @@ const $ = class $ extends x {
     const e = t || ((i = this.popoverEl) == null ? void 0 : i.querySelector(".gradient-preview"));
     if (e && this.value)
       if (this.value.type === "solid")
-        e.style.background = I(this.value);
+        e.style.background = S(this.value);
       else {
-        const s = this.value.stops.map(
-          (n) => `${st(n.color, n.opacity ?? 100)} ${n.position}%`
-        ).join(", ");
+        const s = this.value.stops.map((n) => `${st(n.color, n.opacity ?? 100)} ${n.position}%`).join(", ");
         e.style.background = `linear-gradient(90deg, ${s})`;
       }
   }
@@ -1548,28 +1541,28 @@ const $ = class $ extends x {
       o.className = "gstop-chip";
       const a = this.resolveGlobalVarColor(i.color);
       o.style.backgroundColor = a, n.appendChild(o);
-      const l = new ut((m, v) => {
-        this.clearGlobalBindingForCustomChange(), this.value && this.value.stops[s] && (this.value.stops[s].color = m, v !== void 0 && (this.value.stops[s].opacity = v), o.style.backgroundColor = m, this.updateGradientPreview(), this.updateStopsList(), this.updateUI(), this.triggerChange());
+      const l = new ut((g, v) => {
+        this.clearGlobalBindingForCustomChange(), this.value && this.value.stops[s] && (this.value.stops[s].color = g, v !== void 0 && (this.value.stops[s].opacity = v), o.style.backgroundColor = g, this.updateGradientPreview(), this.updateStopsList(), this.updateUI(), this.triggerChange());
       }, "solid");
       let r = !1, c = !1, h = 0, d = 0;
-      const u = (m) => {
-        r = !0, c = !1, h = m.clientX, d = this.value.stops[s].position, n.classList.add("selected"), document.addEventListener("mousemove", f), document.addEventListener("mouseup", g), m.preventDefault(), m.stopPropagation();
-      }, f = (m) => {
+      const u = (g) => {
+        r = !0, c = !1, h = g.clientX, d = this.value.stops[s].position, n.classList.add("selected"), document.addEventListener("mousemove", f), document.addEventListener("mouseup", m), g.preventDefault(), g.stopPropagation();
+      }, f = (g) => {
         if (!r || !this.value) return;
-        const v = m.clientX - h;
+        const v = g.clientX - h;
         if (Math.abs(v) > 3 && (c = !0), c) {
           this.clearGlobalBindingForCustomChange();
           const C = e.getBoundingClientRect();
           let y = d + v / C.width * 100;
           y = Math.max(0, Math.min(100, y)), this.value.stops[s].position = Math.round(y), n.style.left = `${y}%`, this.updateGradientPreview();
         }
-      }, g = (m) => {
+      }, m = (g) => {
         var v;
         if (r)
-          if (r = !1, n.classList.remove("selected"), document.removeEventListener("mousemove", f), document.removeEventListener("mouseup", g), c)
+          if (r = !1, n.classList.remove("selected"), document.removeEventListener("mousemove", f), document.removeEventListener("mouseup", m), c)
             this.value && (this.value.stops.sort((C, y) => C.position - y.position), this.createHandles(t, e), this.updateStopsList()), this.updateUI(), this.triggerChange();
           else {
-            m.stopPropagation();
+            g.stopPropagation();
             const C = (v = this.value) == null ? void 0 : v.stops[s];
             C && setTimeout(() => {
               const y = this.resolveGlobalVarColor(C.color);
@@ -1584,7 +1577,7 @@ const $ = class $ extends x {
     var i;
     const e = t || ((i = this.popoverEl) == null ? void 0 : i.querySelector(".gradient-stops"));
     !e || !this.value || this.value.type === "solid" || !this.value.stops || (e.innerHTML = "", this.value.stops.forEach((s, n) => {
-      var L, N;
+      var L, I;
       const o = document.createElement("div");
       o.className = "gstop-row";
       const a = document.createElement("div");
@@ -1600,87 +1593,78 @@ const $ = class $ extends x {
       const u = document.createElement("button");
       u.type = "button", u.className = "gstop-color-copy", u.textContent = "Copy", r.appendChild(h), r.appendChild(d), r.appendChild(u);
       const f = document.createElement("button");
-      f.type = "button", f.className = "gstop-del", f.innerHTML = Tt, f.disabled = (((N = (L = this.value) == null ? void 0 : L.stops) == null ? void 0 : N.length) || 0) <= 2, o.appendChild(a), o.appendChild(r), o.appendChild(f), e.appendChild(o);
-      const g = document.createElement("span");
-      g.className = "gstop-opacity-label", g.textContent = "Opacity";
-      const m = document.createElement("div");
-      m.className = "gstop-opacity-group";
+      f.type = "button", f.className = "gstop-del", f.innerHTML = Pt, f.disabled = (((I = (L = this.value) == null ? void 0 : L.stops) == null ? void 0 : I.length) || 0) <= 2, o.appendChild(a), o.appendChild(r), o.appendChild(f), 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 v = document.createElement("input");
       v.type = "range", v.className = "gstop-opacity-slider", v.min = "0", v.max = "100", v.value = String(s.opacity ?? 100);
-      const C = V(c);
-      v.style.setProperty(
-        "--slider-color",
-        `rgb(${C.r}, ${C.g}, ${C.b})`
-      );
+      const C = P(c);
+      v.style.setProperty("--slider-color", `rgb(${C.r}, ${C.g}, ${C.b})`);
       const y = document.createElement("span");
-      y.className = "gstop-opacity-value", y.textContent = `${s.opacity ?? 100}%`, m.appendChild(v), m.appendChild(y);
-      const b = new ut((E, w) => {
-        this.clearGlobalBindingForCustomChange(), d.value = E.replace("#", "").toUpperCase(), h.style.backgroundColor = E, this.value.stops[n].color = E, w !== void 0 && (this.value.stops[n].opacity = w, v.value = String(w), y.textContent = `${w}%`);
-        const M = V(E);
-        v.style.setProperty(
-          "--slider-color",
-          `rgb(${M.r}, ${M.g}, ${M.b})`
-        ), this.updateGradientPreview(), this.createHandles(
+      y.className = "gstop-opacity-value", y.textContent = `${s.opacity ?? 100}%`, g.appendChild(v), g.appendChild(y);
+      const E = new ut((b, w) => {
+        this.clearGlobalBindingForCustomChange(), d.value = b.replace("#", "").toUpperCase(), h.style.backgroundColor = b, this.value.stops[n].color = b, w !== void 0 && (this.value.stops[n].opacity = w, v.value = String(w), y.textContent = `${w}%`);
+        const M = P(b);
+        v.style.setProperty("--slider-color", `rgb(${M.r}, ${M.g}, ${M.b})`), this.updateGradientPreview(), this.createHandles(
           this.popoverEl.querySelector(".gradient-handles"),
           this.popoverEl.querySelector(".gradient-preview")
         ), this.updateUI(), this.triggerChange();
       }, "solid");
-      d.addEventListener("click", (E) => {
-        E.preventDefault(), E.stopPropagation();
+      d.addEventListener("click", (b) => {
+        b.preventDefault(), b.stopPropagation();
         const w = this.resolveGlobalVarColor(s.color);
-        b.open(w, d, s.opacity ?? 100);
+        E.open(w, d, s.opacity ?? 100);
       }), d.addEventListener("input", () => {
         this.clearGlobalBindingForCustomChange();
-        const E = d.value.trim(), w = E.startsWith("#") ? E : `#${E}`;
+        const b = d.value.trim(), w = b.startsWith("#") ? b : `#${b}`;
         if (/^#[0-9A-Fa-f]{6}$/.test(w)) {
           this.value.stops[n].color = w, h.style.backgroundColor = w;
-          const M = V(w);
-          v.style.setProperty(
-            "--slider-color",
-            `rgb(${M.r}, ${M.g}, ${M.b})`
-          ), this.debouncedPreviewUpdate();
+          const M = P(w);
+          v.style.setProperty("--slider-color", `rgb(${M.r}, ${M.g}, ${M.b})`), this.debouncedPreviewUpdate();
         }
       }), d.addEventListener("blur", () => {
         this.previewUpdateTimeout && (clearTimeout(this.previewUpdateTimeout), this.previewUpdateTimeout = null), this.updateGradientPreview(), this.updateUI(), this.triggerChange();
-      }), u.addEventListener("click", async (E) => {
-        E.stopPropagation();
+      }), u.addEventListener("click", async (b) => {
+        b.stopPropagation();
         try {
           await navigator.clipboard.writeText(`#${d.value}`);
         } catch {
         }
-      }), l.addEventListener("focus", (E) => {
-        const w = E.target;
+      }), l.addEventListener("focus", (b) => {
+        const w = b.target;
         w.value = w.value.replace("%", ""), w.select();
-      }), l.addEventListener("input", (E) => {
+      }), l.addEventListener("input", (b) => {
         this.clearGlobalBindingForCustomChange();
-        const w = E.target, M = parseInt(w.value.replace(/[^\d]/g, ""), 10);
+        const w = b.target, M = parseInt(w.value.replace(/[^\d]/g, ""), 10);
         if (!Number.isNaN(M)) {
-          const A = Math.max(0, Math.min(100, M));
-          this.value.stops[n].position = A, w.value = `${A}%`, this.debouncedPreviewUpdate();
+          const D = Math.max(0, Math.min(100, M));
+          this.value.stops[n].position = D, w.value = `${D}%`, this.debouncedPreviewUpdate();
         }
-      }), l.addEventListener("blur", (E) => {
+      }), l.addEventListener("blur", (b) => {
         this.previewUpdateTimeout && (clearTimeout(this.previewUpdateTimeout), this.previewUpdateTimeout = null);
-        const w = E.target, M = parseInt(w.value.replace(/[^\d]/g, ""), 10);
+        const w = b.target, M = parseInt(w.value.replace(/[^\d]/g, ""), 10);
         if (Number.isNaN(M))
           w.value = `${this.value.stops[n].position}%`;
         else {
-          const A = Math.max(0, Math.min(100, M));
-          this.value.stops[n].position = A, w.value = `${A}%`;
+          const D = Math.max(0, Math.min(100, M));
+          this.value.stops[n].position = D, w.value = `${D}%`;
         }
         this.updateGradientPreview(), this.createHandles(
           this.popoverEl.querySelector(".gradient-handles"),
           this.popoverEl.querySelector(".gradient-preview")
         ), this.updateStopsList(), this.updateUI(), this.triggerChange();
       }), f.addEventListener("click", () => {
-        var E;
+        var b;
         (this.value.stops.length || 0) <= 2 || (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());
+        ), this.updateStopsList(), this.updateGradientPreview(), this.updateUI(), ((b = document.activeElement) == null ? void 0 : b.tagName) !== "INPUT" && this.repositionPopover(), this.triggerChange());
       }), v.addEventListener("input", () => {
         this.clearGlobalBindingForCustomChange();
-        const E = parseInt(v.value, 10);
-        this.value.stops[n].opacity = Math.max(0, Math.min(100, E)), y.textContent = `${this.value.stops[n].opacity}%`, this.debouncedPreviewUpdate();
+        const b = parseInt(v.value, 10);
+        this.value.stops[n].opacity = Math.max(0, Math.min(100, b)), y.textContent = `${this.value.stops[n].opacity}%`, this.debouncedPreviewUpdate();
       }), v.addEventListener("change", () => {
         this.clearGlobalBindingForCustomChange(), this.previewUpdateTimeout && (clearTimeout(this.previewUpdateTimeout), this.previewUpdateTimeout = null), this.updateGradientPreview(), this.updateUI(), this.triggerChange();
       });
@@ -1704,8 +1688,8 @@ const $ = class $ extends x {
     this.value.stops.push(n), this.value.stops.sort((o, a) => o.position - a.position);
   }
   openPopover() {
-    if (this.popoverEl && ($.openInstance && $.openInstance !== this && $.openInstance.closePopover(), !this.isPopoverOpen)) {
-      if (this.isPopoverOpen = !0, $.openInstance = this, this.backdropEl && (this.backdropEl.style.display = "block", this.backdropEl.parentElement || document.body.appendChild(this.backdropEl)), this.popoverEl.style.display = "flex", this.refreshPopoverContent(), this.element) {
+    if (this.popoverEl && (V.openInstance && V.openInstance !== this && V.openInstance.closePopover(), !this.isPopoverOpen)) {
+      if (this.isPopoverOpen = !0, V.openInstance = this, this.backdropEl && (this.backdropEl.style.display = "block", this.backdropEl.parentElement || document.body.appendChild(this.backdropEl)), this.popoverEl.style.display = "flex", this.refreshPopoverContent(), this.element) {
         const t = this.element.getBoundingClientRect(), e = 306, i = window.innerWidth, s = window.innerHeight, n = 16;
         this.popoverEl.style.position = "fixed", this.popoverEl.style.zIndex = "10000", this.popoverEl.style.left = "-9999px", this.popoverEl.style.top = "0px";
         const o = this.popoverEl.offsetHeight;
@@ -1715,10 +1699,7 @@ const $ = class $ extends x {
         const d = s - t.bottom, u = t.top;
         u >= o + n ? l = t.top - o - 8 : d >= o + n ? l = t.bottom + 8 : u > d ? (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);
+      setTimeout(() => document.addEventListener("click", this.onBackgroundClick, !0), 200), document.addEventListener("keydown", this.handlePopoverKeydown, !0);
     }
   }
   repositionPopover() {
@@ -1755,10 +1736,10 @@ const $ = class $ extends x {
     var t;
     if (!(!this.popoverEl || !this.isPopoverOpen)) {
       if (this.isPopoverOpen = !1, this.popoverPosition = null, this.backdropEl && (this.backdropEl.style.display = "none"), this.popoverEl.style.display = "none", document.removeEventListener("click", this.onBackgroundClick, !0), document.removeEventListener("keydown", this.handlePopoverKeydown, !0), this.commitPendingSolidColor(), this.value && this.value.type !== "solid") {
-        const e = I(this.value);
+        const e = S(this.value);
         R.addColor(e, "gradient"), (t = this.recentGradientRefresh) == null || t.call(this);
       }
-      this.previewUpdateTimeout && (clearTimeout(this.previewUpdateTimeout), this.previewUpdateTimeout = null), $.openInstance === this && ($.openInstance = null);
+      this.previewUpdateTimeout && (clearTimeout(this.previewUpdateTimeout), this.previewUpdateTimeout = null), V.openInstance === this && (V.openInstance = null);
     }
   }
   commitPendingSolidColor() {
@@ -1777,31 +1758,31 @@ const $ = class $ extends x {
   parseAndSet(t) {
     let e = t.trim();
     e && !e.startsWith("#") && !e.startsWith("var(") && !e.startsWith("rgb") && !e.startsWith("hsl") && !e.includes("gradient") && /^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$|^[0-9A-Fa-f]{8}$/.test(e) && (e = "#" + e, this.inputEl && (this.inputEl.value = e));
-    const i = S(e);
+    const i = T(e);
     i && this.setValue(i);
   }
   getChangePayload() {
     var t;
     if (this.value)
-      return this.isBoundToGlobal() ? ((t = this.value.stops) == null ? void 0 : t.some(
-        (i) => i.opacity !== void 0 && i.opacity !== 100
-      )) ? this.resolveGradientGlobalVars(this.value) : this.linkedGlobalVariable || void 0 : this.value;
+      return this.isBoundToGlobal() ? ((t = this.value.stops) == null ? void 0 : t.some((i) => i.opacity !== void 0 && i.opacity !== 100)) ? this.resolveGradientGlobalVars(this.value) : this.linkedGlobalVariable || void 0 : this.value;
   }
   triggerChange() {
-    var e, i;
     const t = this.getChangePayload();
-    t !== void 0 && ((e = this.onChange) == null || e.call(this, t), (i = this.detectChange) == null || i.call(this, t));
+    t !== void 0 && (this.changeDebounceTimeout && clearTimeout(this.changeDebounceTimeout), this.changeDebounceTimeout = setTimeout(() => {
+      var e, i;
+      (e = this.onChange) == null || e.call(this, t), (i = this.detectChange) == null || i.call(this, t), this.changeDebounceTimeout = null;
+    }, V.CHANGE_DEBOUNCE_DELAY));
   }
   getElement() {
     return this.element;
   }
   getValue() {
     const t = this.getChangePayload();
-    return t ? typeof t == "string" ? t : I(t) : "";
+    return t ? typeof t == "string" ? t : S(t) : "";
   }
   getCSSValue() {
     const t = this.getChangePayload();
-    return t ? typeof t == "string" ? t : I(t) : "";
+    return t ? typeof t == "string" ? t : S(t) : "";
   }
   getCSSForText() {
     return this.value ? this.cssForTextValue() : {};
@@ -1810,8 +1791,8 @@ const $ = class $ extends x {
     return this.value;
   }
 };
-$.openInstance = null;
-let j = $;
+V.openInstance = null, V.CHANGE_DEBOUNCE_DELAY = 150;
+let j = V;
 function J(p, t) {
   for (const e in p)
     if (Object.prototype.hasOwnProperty.call(p, e)) {
@@ -1822,7 +1803,7 @@ function J(p, t) {
 const Q = class Q {
   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 || gt(), 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 || 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();
   }
   propagateNestingLevel() {
     const t = this.nestingLevel + 1;
@@ -1845,7 +1826,7 @@ const Q = class Q {
   propagateDataPropsPath() {
     J(this.settings, (t, e) => {
       const i = String(t), s = this.dataPropsPath ? `${this.dataPropsPath}_${i}` : i;
-      (k(e) || D(e) && typeof e.setDataPropsPath == "function") && e.setDataPropsPath(s);
+      (k(e) || G(e) && typeof e.setDataPropsPath == "function") && e.setDataPropsPath(s);
     });
   }
   updateNestingStyles() {
@@ -1909,7 +1890,7 @@ const Q = class Q {
     const i = (e == null ? void 0 : e.preserveValues) ?? !0, s = new Set(Object.keys(this.settings)), n = Object.keys(t), o = {};
     i && n.forEach((r) => {
       const c = this.settings[r];
-      c && (k(c) ? o[r] = c.getValues() : D(c) ? o[r] = c.value : typeof c.getValues == "function" ? o[r] = c.getValues() : c.value !== void 0 && (o[r] = c.value));
+      c && (k(c) ? o[r] = c.getValues() : G(c) ? o[r] = c.value : typeof c.getValues == "function" ? o[r] = c.getValues() : c.value !== void 0 && (o[r] = c.value));
     }), s.forEach((r) => {
       n.includes(r) || this.removeSetting(r);
     }), n.forEach((r) => {
@@ -1920,7 +1901,7 @@ const Q = class Q {
         try {
           k(c) ? c.setValue(
             u
-          ) : D(c) ? (d = c.setValue) == null || d.call(c, u) : c.setValue && c.setValue(u);
+          ) : G(c) ? (d = c.setValue) == null || d.call(c, u) : c.setValue && c.setValue(u);
         } catch (f) {
           console.warn(`Could not preserve value for setting ${r}:`, f);
         }
@@ -1958,7 +1939,7 @@ const Q = class Q {
   setMobileValues(t) {
     !t || typeof t != "object" || (Object.entries(t).forEach(([e, i]) => {
       const s = this.settings[e];
-      s && (k(s) || D(s)) && typeof s.setMobileValue == "function" && s.setMobileValue(i);
+      s && (k(s) || G(s)) && typeof s.setMobileValue == "function" && s.setMobileValue(i);
     }), this.setValue(t), this.onChange && this.onChange(this.getValues()));
   }
   getMobileValues(t) {
@@ -2001,7 +1982,7 @@ const Q = class Q {
           const o = this.getValues();
           this.initialValues = o, t(o);
         }), this.changeHandlers.add(() => t(this.getValues()));
-      else if (D(s)) {
+      else if (G(s)) {
         const o = () => e();
         this.changeHandlers.add(o), s.setOnChange(o);
       } else {
@@ -2027,7 +2008,7 @@ const Q = class Q {
           ct(l) && (this.addSetting(i, l), n = l);
         }
       }
-      n && (k(n) || D(n)) && typeof n.setValue == "function" && n.setValue(s);
+      n && (k(n) || G(n)) && typeof n.setValue == "function" && n.setValue(s);
     }), setTimeout(() => {
       this.forceChildUIRefresh();
     }, 0);
@@ -2041,7 +2022,7 @@ const Q = class Q {
       const s = this.getValues();
       this.initialValues = s, (n = this.onChange) == null || n.call(this, s), this.updateVisibility();
     };
-    k(t) ? t.setOnChange(() => e()) : D(t) ? t.setOnChange(() => e()) : (i = t.setOnChange) == null || i.call(t, () => e());
+    k(t) ? t.setOnChange(() => e()) : G(t) ? t.setOnChange(() => e()) : (i = t.setOnChange) == null || i.call(t, () => e());
   }
   addSetting(t, e) {
     var s, n;
@@ -2272,7 +2253,7 @@ const Q = class Q {
             if (o.includeGetJson !== !1)
               if (n instanceof j) {
                 const a = n.getRawValue();
-                i[s] = a ? I(a) : null;
+                i[s] = a ? S(a) : null;
               } else
                 i[s] = o.value;
           }
@@ -2288,7 +2269,7 @@ const Q = class Q {
         if (s.includeGetJson === !1) return null;
         if (i instanceof j) {
           const n = i.getRawValue();
-          return n ? I(n) : null;
+          return n ? S(n) : null;
         }
         return s.value;
       }
@@ -2375,8 +2356,8 @@ const Q = class Q {
         d.stopPropagation(), d.preventDefault();
         const u = this.getNextIndexFromPrefix(this.addItemCfg.keyPrefix), f = this.addItemCfg.createItem(u);
         if (ct(f)) {
-          const g = `${this.addItemCfg.keyPrefix}${u}`;
-          this.addSetting(g, f);
+          const m = `${this.addItemCfg.keyPrefix}${u}`;
+          this.addSetting(m, f);
         }
       }), a.appendChild(c);
     }
@@ -2423,11 +2404,11 @@ const Q = class Q {
   }
 };
 Q.hiddenElements = /* @__PURE__ */ new Set();
-let T = Q;
-function be(p) {
+let $ = Q;
+function Ee(p) {
   return new At(p);
 }
-class At extends T {
+class At extends $ {
   constructor(t) {
     super(t);
     const e = Object.keys(this.settings)[0];
@@ -2489,7 +2470,7 @@ class At extends T {
   }
 }
 function Dt(p) {
-  return new T(p);
+  return new $(p);
 }
 function we(p) {
   return p;
@@ -2515,17 +2496,17 @@ class Gt extends x {
   }
 }
 const Rt = "<svg xmlns='http://www.w3.org/2000/svg' width='18' height='19' viewBox='0 0 18 19' fill='none'><path d='M8.99999 15.8542C9.79613 16.5667 10.8475 17 12 17C14.4853 17 16.5 14.9853 16.5 12.5C16.5 10.4248 15.0953 8.67769 13.1849 8.15763M4.81513 8.15762C2.9047 8.67768 1.5 10.4248 1.5 12.5C1.5 14.9853 3.51472 17 6 17C8.48528 17 10.5 14.9853 10.5 12.5C10.5 11.9146 10.3882 11.3554 10.1849 10.8424M13.5 6.5C13.5 8.98528 11.4853 11 9 11C6.51472 11 4.5 8.98528 4.5 6.5C4.5 4.01472 6.51472 2 9 2C11.4853 2 13.5 4.01472 13.5 6.5Z' stroke='#667085' stroke-linecap='round' stroke-linejoin='round'/></svg>";
-class P extends Gt {
+class O extends Gt {
   constructor(t) {
     super({
       ...t,
       icon: t.icon || Rt,
       title: t.title || "Color",
-      default: t.default ? P.normalizeColorValue(t.default) : "#000000"
+      default: t.default ? O.normalizeColorValue(t.default) : "#000000"
     }), this.inputType = "color", this.element = null, this.colorInputEl = null, this.textInputEl = null, this.detectChange = t.detectChange;
   }
   static normalizeColorValue(t) {
-    return t.startsWith("var(--") ? t : t.startsWith("#") ? P.normalizeHexValue(t) : t.includes(",") ? P.rgbToHexStatic(t) : P.normalizeHexValue(t);
+    return t.startsWith("var(--") ? t : t.startsWith("#") ? O.normalizeHexValue(t) : t.includes(",") ? O.rgbToHexStatic(t) : O.normalizeHexValue(t);
   }
   static normalizeHexValue(t) {
     return t = t.replace("#", ""), t.length === 3 && (t = t.split("").map((e) => e + e).join("")), t.length !== 6 ? (console.warn(`Invalid hex value "${t}", using default "#000000"`), "#000000") : /^[0-9A-Fa-f]{6}$/.test(t) ? `#${t.toLowerCase()}` : (console.warn(`Invalid hex value "${t}", using default "#000000"`), "#000000");
@@ -2546,7 +2527,7 @@ class P extends Gt {
       return;
     }
     if (typeof t == "string") {
-      const e = P.normalizeColorValue(t);
+      const e = O.normalizeColorValue(t);
       this.value = e, this.colorInputEl && (this.colorInputEl.value = e), this.textInputEl && (this.textInputEl.value = e), this.onChange && this.onChange(e), this.props.detectChange && this.props.detectChange(e);
     } else
       this.value = "#000000", this.colorInputEl && (this.colorInputEl.value = "#000000"), this.textInputEl && (this.textInputEl.value = "#000000"), this.onChange && this.onChange("#000000"), this.props.detectChange && this.props.detectChange("#000000");
@@ -2559,16 +2540,16 @@ class P extends Gt {
   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 m = document.createElement("span");
-        m.className = "input-icon", m.innerHTML = this.props.icon, g.appendChild(m);
+      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 m = document.createElement("span");
-        m.className = "input-label", m.textContent = this.props.title, g.appendChild(m);
+        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";
@@ -2586,41 +2567,41 @@ class P extends Gt {
       try {
         if (console.log("ColorSetting: renderGlobalOptions called"), a.innerHTML = "", !x) {
           console.error("ColorSetting: Setting class is undefined");
-          const m = document.createElement("div");
-          m.textContent = "Error: System error (Setting undefined)", a.appendChild(m);
+          const g = document.createElement("div");
+          g.textContent = "Error: System error (Setting undefined)", a.appendChild(g);
           return;
         }
-        const g = x.GlobalVariables || {};
-        if (console.log("ColorSetting: GlobalVariables:", g), !g || Object.keys(g).length === 0) {
-          const m = document.createElement("div");
-          m.textContent = "No global colors defined", m.style.gridColumn = "1 / -1", m.style.fontSize = "12px", m.style.color = "#666", a.appendChild(m);
+        const m = x.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(([m, v]) => {
+        Object.entries(m).forEach(([g, v]) => {
           const C = document.createElement("button");
-          C.className = "global-color-btn", C.title = m, C.style.width = "30px", C.style.height = "30px", C.style.borderRadius = "50%", C.style.border = "1px solid #ddd", C.style.backgroundColor = v, C.style.cursor = "pointer", this.value === `var(--${m})` && (C.style.border = "2px solid #2196f3"), C.addEventListener("click", (y) => {
-            var L, N;
+          C.className = "global-color-btn", C.title = g, C.style.width = "30px", C.style.height = "30px", C.style.borderRadius = "50%", C.style.border = "1px solid #ddd", C.style.backgroundColor = v, C.style.cursor = "pointer", this.value === `var(--${g})` && (C.style.border = "2px solid #2196f3"), C.addEventListener("click", (y) => {
+            var L, I;
             y.preventDefault();
-            const b = `var(--${m})`;
-            this.value = b, (L = this.onChange) == null || L.call(this, b), (N = this.detectChange) == null || N.call(this, b), Array.from(a.children).forEach((E) => {
-              E.style.border = "1px solid #ddd";
+            const E = `var(--${g})`;
+            this.value = E, (L = this.onChange) == null || L.call(this, E), (I = this.detectChange) == null || I.call(this, E), Array.from(a.children).forEach((b) => {
+              b.style.border = "1px solid #ddd";
             }), C.style.border = "2px solid #2196f3", h.style.backgroundColor = v;
           }), a.appendChild(C);
         });
-      } 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 m = g.value.trim();
-      if (!m)
+    const r = (m) => {
+      const g = m.value.trim();
+      if (!g)
         return e.classList.remove("error"), !0;
-      const C = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(m);
+      const C = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(g);
       return C ? e.classList.remove("error") : e.classList.add("error"), C;
     }, c = document.createElement("input");
     c.type = "color", c.className = "color-picker", c.value = this.value && !this.value.startsWith("var(--") ? this.value : "#000000", c.setAttribute("aria-label", "Choose color"), c.setAttribute("title", "Click to open color picker"), this.getDataPropsPath() && c.setAttribute("data-test-id", this.getDataPropsPath()), this.colorInputEl = c;
@@ -2628,38 +2609,38 @@ class P extends Gt {
     h.className = "color-preview";
     let d = this.value || "#000000";
     if (d.startsWith("var(--")) {
-      const g = d.replace("var(--", "").replace(")", "");
-      d = (x.GlobalVariables || {})[g] || "#000000";
+      const m = d.replace("var(--", "").replace(")", "");
+      d = (x.GlobalVariables || {})[m] || "#000000";
     }
     h.style.backgroundColor = d;
     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 = (g) => {
+    const f = (m) => {
       var v, C;
-      let m = g.trim();
-      if (m && !m.startsWith("#") && !m.startsWith("var(") && /^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(m) && (m = "#" + m, this.textInputEl && (this.textInputEl.value = m)), this.textInputEl && r(this.textInputEl)) {
-        const y = P.normalizeColorValue(m);
+      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 = O.normalizeColorValue(g);
         this.value = y, (v = this.onChange) == null || v.call(this, y), (C = this.detectChange) == null || C.call(this, y), this.colorInputEl && (this.colorInputEl.value = y), h.style.backgroundColor = y;
       }
     };
-    return this.textInputEl.addEventListener("input", (g) => {
-      const m = g.target.value;
-      f(m);
-    }), this.textInputEl.addEventListener("paste", (g) => {
+    return this.textInputEl.addEventListener("input", (m) => {
+      const g = m.target.value;
+      f(g);
+    }), this.textInputEl.addEventListener("paste", (m) => {
       var v;
-      g.preventDefault();
-      const m = ((v = g.clipboardData) == null ? void 0 : v.getData("text")) || "";
-      this.textInputEl && (this.textInputEl.value = m.trim(), f(m));
-    }), this.textInputEl.addEventListener("keydown", (g) => {
-      var m, v, C;
-      g.key === "Enter" && (g.preventDefault(), f(((m = this.textInputEl) == null ? void 0 : m.value) || ""), (v = this.textInputEl) == null || v.blur()), g.key === "Escape" && (this.textInputEl && this.value && (this.textInputEl.value = this.value), (C = this.textInputEl) == null || C.blur(), e.classList.remove("error"));
-    }), this.colorInputEl.addEventListener("input", (g) => {
+      m.preventDefault();
+      const g = ((v = m.clipboardData) == null ? void 0 : v.getData("text")) || "";
+      this.textInputEl && (this.textInputEl.value = g.trim(), f(g));
+    }), this.textInputEl.addEventListener("keydown", (m) => {
+      var g, v, C;
+      m.key === "Enter" && (m.preventDefault(), f(((g = this.textInputEl) == null ? void 0 : g.value) || ""), (v = this.textInputEl) == null || v.blur()), m.key === "Escape" && (this.textInputEl && this.value && (this.textInputEl.value = this.value), (C = this.textInputEl) == null || C.blur(), e.classList.remove("error"));
+    }), this.colorInputEl.addEventListener("input", (m) => {
       var C, y;
-      const m = g.target.value, v = P.normalizeColorValue(m);
+      const g = m.target.value, v = O.normalizeColorValue(g);
       this.value = v, (C = this.onChange) == null || C.call(this, v), (y = this.detectChange) == null || y.call(this, v), this.textInputEl && (this.textInputEl.value = v), h.style.backgroundColor = v, e.classList.remove("error");
-    }), this.colorInputEl.addEventListener("change", (g) => {
+    }), this.colorInputEl.addEventListener("change", (m) => {
       var C, y;
-      const m = g.target.value, v = P.normalizeColorValue(m);
+      const g = m.target.value, v = O.normalizeColorValue(g);
       this.value = v, (C = this.onChange) == null || C.call(this, v), (y = this.detectChange) == null || y.call(this, v), this.textInputEl && (this.textInputEl.value = v), h.style.backgroundColor = v;
     }), o.appendChild(c), o.appendChild(h), o.appendChild(u), e.appendChild(i), e.appendChild(o), e.appendChild(a), t.appendChild(e), this.element = t, t;
   }
@@ -2668,7 +2649,7 @@ class P extends Gt {
   }
   // Helper method to get normalized hex value
   getNormalizedValue() {
-    return this.value ? P.normalizeColorValue(this.value) : "#000000";
+    return this.value ? O.normalizeColorValue(this.value) : "#000000";
   }
   // Helper method to check if current value is valid hex
   isValidHex() {
@@ -2854,7 +2835,7 @@ class xe extends x {
     return e.addEventListener("input", i), e.addEventListener("change", i), e.addEventListener("blur", s), t.appendChild(e), t;
   }
 }
-class O extends x {
+class H extends x {
   constructor(t) {
     super(t), this.inputType = "number", this.inputElement = null, this.mobileValue = t.mobile, this.validateProps(), this.value = this.validateValue(this.value);
   }
@@ -2918,7 +2899,7 @@ const zt = `
   <path d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
   <path d="M9 1V17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1Z" fill="#667085" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`;
-class Ut extends O {
+class Ut extends H {
   constructor(t = {}) {
     const e = {
       title: "Opacity",
@@ -3143,14 +3124,14 @@ class ke extends x {
     this.value || (this.value = {
       width: e,
       height: i
-    }), this.minWidth = t.minWidth ?? 0, this.maxWidth = t.maxWidth, this.minHeight = t.minHeight ?? 0, this.maxHeight = t.maxHeight, this.locked = t.locked ?? !1, this.value.height > 0 && (this.aspectRatio = this.value.width / this.value.height), this.widthSetting = new O({
+    }), this.minWidth = t.minWidth ?? 0, this.maxWidth = t.maxWidth, this.minHeight = t.minHeight ?? 0, this.maxHeight = t.maxHeight, this.locked = t.locked ?? !1, this.value.height > 0 && (this.aspectRatio = this.value.width / this.value.height), this.widthSetting = new H({
       title: "Width",
       default: this.value.width,
       suffix: "px",
       minValue: this.minWidth,
       maxValue: this.maxWidth,
       icon: qt
-    }), this.heightSetting = new O({
+    }), this.heightSetting = new H({
       title: "Height",
       default: this.value.height,
       suffix: "px",
@@ -3437,7 +3418,7 @@ const Kt = `
   <path d="M7 1.5C3.96243 1.5 1.5 3.96243 1.5 7C1.5 10.0376 3.96243 12.5 7 12.5C10.0376 12.5 12.5 10.0376 12.5 7C12.5 3.96243 10.0376 1.5 7 1.5Z" stroke="#F04438" stroke-width="1.2"/>
   <path d="M8.25 5.75L5.75 8.25M5.75 5.75L8.25 8.25" stroke="#F04438" stroke-width="1.2" stroke-linecap="round"/>
 </svg>
-`, H = class H extends x {
+`, B = class B extends x {
   constructor(t = {}) {
     super(t), this.inputType = {
       imageUrl: "text",
@@ -3487,7 +3468,7 @@ const Kt = `
     s.className = "image-map-content", this.popoverEl.appendChild(s), document.body.appendChild(this.backdropEl), document.body.appendChild(this.popoverEl);
   }
   openPopover() {
-    H.openInstance && H.openInstance !== this && H.openInstance.closePopover(), this.isPopoverOpen = !0, H.openInstance = this, this.value ? this.initialValue = JSON.parse(JSON.stringify(this.value)) : this.initialValue = { imageUrl: "", markers: [] }, this.value && (this.history = [JSON.parse(JSON.stringify(this.value.markers))], this.historyIndex = 0), this.backdropEl && (this.backdropEl.style.display = "block"), this.popoverEl && (this.popoverEl.style.display = "flex"), this.positionPopover(), this.refreshPopoverContent(), setTimeout(() => {
+    B.openInstance && B.openInstance !== this && B.openInstance.closePopover(), this.isPopoverOpen = !0, B.openInstance = this, this.value ? this.initialValue = JSON.parse(JSON.stringify(this.value)) : this.initialValue = { imageUrl: "", markers: [] }, this.value && (this.history = [JSON.parse(JSON.stringify(this.value.markers))], this.historyIndex = 0), this.backdropEl && (this.backdropEl.style.display = "block"), this.popoverEl && (this.popoverEl.style.display = "flex"), this.positionPopover(), this.refreshPopoverContent(), setTimeout(() => {
       document.addEventListener("click", this.onBackgroundClick, !0);
     }, 200), document.addEventListener("keydown", this.handlePopoverKeydown, !0);
   }
@@ -3509,7 +3490,7 @@ const Kt = `
           return;
         this.initialValue && (this.value = JSON.parse(JSON.stringify(this.initialValue)), this.updateButtonDisplay(), this.triggerChange());
       }
-      this.isPopoverOpen = !1, this.draggingMarkerId = null, this.backdropEl && (this.backdropEl.style.display = "none"), this.popoverEl && (this.popoverEl.style.display = "none"), document.removeEventListener("click", this.onBackgroundClick, !0), document.removeEventListener("keydown", this.handlePopoverKeydown, !0), H.openInstance === this && (H.openInstance = null);
+      this.isPopoverOpen = !1, this.draggingMarkerId = null, this.backdropEl && (this.backdropEl.style.display = "none"), this.popoverEl && (this.popoverEl.style.display = "none"), document.removeEventListener("click", this.onBackgroundClick, !0), document.removeEventListener("keydown", this.handlePopoverKeydown, !0), B.openInstance === this && (B.openInstance = null);
     }
   }
   positionPopover() {
@@ -3594,18 +3575,18 @@ const Kt = `
     const a = ((h = this.value) == null ? void 0 : h.markers) || [], l = /* @__PURE__ */ new Map();
     a.forEach((d) => l.set(d.index, d));
     for (let d = 1; d <= i; d++) {
-      const u = l.get(d), f = !!u, g = (u == null ? void 0 : u.prizeName) || this.props.prizeMap && this.props.prizeMap[d - 1] || `Prize #${d}`, m = document.createElement("div");
-      m.className = `prize-item ${f ? "placed" : "missing"}`;
+      const u = l.get(d), f = !!u, m = (u == null ? void 0 : u.prizeName) || this.props.prizeMap && this.props.prizeMap[d - 1] || `Prize #${d}`, g = document.createElement("div");
+      g.className = `prize-item ${f ? "placed" : "missing"}`;
       const v = document.createElement("div");
       v.className = "prize-index", v.textContent = String(d);
       const C = document.createElement("div");
       C.className = "prize-label";
       const y = document.createElement("div");
       y.className = "prize-title", y.textContent = `Prize #${d}`;
-      const b = document.createElement("div");
-      b.className = "prize-subtitle", b.textContent = f ? g : "Not Placed", C.appendChild(y), C.appendChild(b);
+      const E = document.createElement("div");
+      E.className = "prize-subtitle", E.textContent = f ? m : "Not Placed", C.appendChild(y), C.appendChild(E);
       const L = document.createElement("div");
-      L.className = `prize-status ${f ? "placed" : "missing"}`, L.innerHTML = f ? ie : se, m.appendChild(v), m.appendChild(C), m.appendChild(L), o.appendChild(m);
+      L.className = `prize-status ${f ? "placed" : "missing"}`, L.innerHTML = f ? ie : se, g.appendChild(v), g.appendChild(C), g.appendChild(L), o.appendChild(g);
     }
     t.appendChild(o);
     const r = document.createElement("button");
@@ -3859,9 +3840,9 @@ const Kt = `
     this.closePopover(), (t = this.backdropEl) != null && t.parentElement && this.backdropEl.parentElement.removeChild(this.backdropEl), (e = this.popoverEl) != null && e.parentElement && this.popoverEl.parentElement.removeChild(this.popoverEl), document.removeEventListener("click", this.onBackgroundClick, !0), document.removeEventListener("keydown", this.handlePopoverKeydown, !0);
   }
 };
-H.openInstance = null;
-let mt = H;
-class ne extends O {
+B.openInstance = null;
+let gt = B;
+class ne extends H {
   constructor(t = {}) {
     super({
       ...t,
@@ -3882,7 +3863,7 @@ class ne extends O {
 const oe = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
   <path d="M9 14L9 5M9 14L6.75 12.5M9 14L11.25 12.5M9 5L6.75 6.5M9 5L11.25 6.5M15.75 2.75H2.25M15.75 16.25H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`;
-class ae extends O {
+class ae extends H {
   constructor(t = {}) {
     super({
       ...t,
@@ -4166,7 +4147,7 @@ class Ie extends x {
 const he = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
 <path d="M2.25 11.75H15.75M5.85 2.75H12.15C13.4101 2.75 14.0402 2.75 14.5215 2.99524C14.9448 3.21095 15.289 3.55516 15.5048 3.97852C15.75 4.45982 15.75 5.08988 15.75 6.35V12.65C15.75 13.9101 15.75 14.5402 15.5048 15.0215C15.289 15.4448 14.9448 15.789 14.5215 16.0048C14.0402 16.25 13.4101 16.25 12.15 16.25H5.85C4.58988 16.25 3.95982 16.25 3.47852 16.0048C3.05516 15.789 2.71095 15.4448 2.49524 15.0215C2.25 14.5402 2.25 13.9101 2.25 12.65V6.35C2.25 5.08988 2.25 4.45982 2.49524 3.97852C2.71095 3.55516 3.05516 3.21095 3.47852 2.99524C3.95982 2.75 4.58988 2.75 5.85 2.75Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`;
-class Se extends O {
+class Se extends H {
   constructor(t = {}) {
     super({
       ...t,
@@ -4183,7 +4164,7 @@ const de = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewB
 <path d="M15.75 7.25H2.25m9.9 9h-6.3c-1.26 0-1.89 0-2.371-.245a2.25 2.25 0 0 1-.984-.983c-.245-.482-.245-1.112-.245-2.372v-6.3c0-1.26 0-1.89.245-2.371a2.25 2.25 0 0 1 .984-.984c.48-.245 1.11-.245 2.371-.245h6.3c1.26 0 1.89 0 2.371.245.424.216.768.56.984.984.245.48.245 1.11.245 2.371v6.3c0 1.26 0 1.89-.245 2.371-.216.424-.56.768-.984.984-.48.245-1.11.245-2.371.245"
  stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`;
-class Ve extends O {
+class Ve extends H {
   constructor(t = {}) {
     super({
       ...t,
@@ -4196,9 +4177,9 @@ class Ve extends O {
     }), this.inputType = "number";
   }
 }
-class Pe extends x {
+class Te extends x {
   constructor(t) {
-    super(t), this.inputType = {}, this.container = null, this.defaultLanguage = "", this.uploadSettings = /* @__PURE__ */ new Map(), t.default ? this.value = { ...t.default } : this.value || (this.value = {}), this.defaultLanguage = t.languages.includes(x.DefaultLanguage) ? x.DefaultLanguage : t.languages[0];
+    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.defaultLanguage = t.languages.includes(x.DefaultLanguage) ? x.DefaultLanguage : t.languages[0];
     const e = t.defaultValue || `Enter text in ${this.capitalizeFirstLetter(this.defaultLanguage)}`;
     t.languages.forEach((i) => {
       var s, n;
@@ -4231,8 +4212,8 @@ class Pe extends x {
     const c = "...";
     let h = 0, d = e.length, u = 0;
     for (; h <= d; ) {
-      const g = Math.floor((h + d) / 2), m = e.slice(0, g).trimEnd() + c;
-      this.measureTextWidth(m, i) <= l ? (u = g, h = g + 1) : d = g - 1;
+      const m = Math.floor((h + d) / 2), g = e.slice(0, m).trimEnd() + c;
+      this.measureTextWidth(g, i) <= l ? (u = m, h = m + 1) : d = m - 1;
     }
     const f = e.slice(0, u).trimEnd() + c;
     t.placeholder = f;
@@ -4301,18 +4282,130 @@ class Pe extends x {
       }
     });
   }
+  renderContent(t) {
+    var a;
+    const e = t.querySelector(
+      ".simple-multi-language-content"
+    );
+    if (!e) return;
+    e.innerHTML = "";
+    const i = x.CurrentLanguage(), s = ((a = this.value) == null ? void 0 : a[i]) || "", n = this.createTextareaRow(i, s);
+    e.appendChild(n);
+    const o = e.querySelector(
+      ".simple-language-textarea"
+    );
+    if (o) {
+      const l = o.getAttribute("data-full-placeholder") || "";
+      l && this.adaptPlaceholderToSingleLine(o, l);
+    }
+  }
+  createPopup() {
+    const t = document.createElement("div");
+    t.classList.add("multi-language-popup-overlay"), t.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 9999;
+    `;
+    const e = document.createElement("div");
+    e.classList.add("multi-language-popup"), e.style.cssText = `
+      background: white;
+      border-radius: 8px;
+      padding: 24px;
+      max-width: 600px;
+      width: 90%;
+      max-height: 80vh;
+      overflow-y: auto;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+    `;
+    const i = document.createElement("div");
+    i.style.cssText = `
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 20px;
+    `;
+    const s = document.createElement("h3");
+    s.textContent = "All Languages", s.style.cssText = `
+      margin: 0;
+      font-size: 18px;
+      font-weight: 600;
+    `;
+    const n = document.createElement("button");
+    n.textContent = "×", n.style.cssText = `
+      background: none;
+      border: none;
+      font-size: 28px;
+      cursor: pointer;
+      color: #666;
+      padding: 0;
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      line-height: 1;
+    `, n.addEventListener("click", () => this.closePopup()), i.appendChild(s), i.appendChild(n), e.appendChild(i);
+    const o = document.createElement("div");
+    return o.classList.add("multi-language-popup-content"), this.props.languages.forEach((a) => {
+      var c;
+      const l = ((c = this.value) == null ? void 0 : c[a]) || "", r = this.createTextareaRow(a, l);
+      o.appendChild(r);
+    }), e.appendChild(o), t.appendChild(e), t.addEventListener("click", (a) => {
+      a.target === t && this.closePopup();
+    }), t;
+  }
+  showPopup() {
+    this.popup || (this.popup = this.createPopup(), document.body.appendChild(this.popup));
+  }
+  closePopup() {
+    this.popup && (document.body.removeChild(this.popup), this.popup = null);
+  }
   draw() {
     const t = document.createElement("div");
     if (t.classList.add("simple-multi-language-wrapper"), this.props.title) {
       const s = document.createElement("div");
-      s.classList.add("simple-multi-language-title"), s.textContent = this.props.title, t.appendChild(s);
+      s.classList.add("simple-multi-language-title"), s.style.cssText = `
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      `;
+      const n = document.createElement("span");
+      n.textContent = this.props.title;
+      const o = document.createElement("button");
+      o.classList.add("multi-language-eye-icon"), o.innerHTML = `
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+          <circle cx="12" cy="12" r="3"></circle>
+        </svg>
+      `, o.style.cssText = `
+        background: none;
+        border: none;
+        cursor: pointer;
+        padding: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #666;
+        transition: color 0.2s;
+      `, o.addEventListener("mouseenter", () => {
+        o.style.color = "#000";
+      }), o.addEventListener("mouseleave", () => {
+        o.style.color = "#666";
+      }), o.addEventListener("click", (a) => {
+        a.preventDefault(), this.showPopup();
+      }), s.appendChild(n), s.appendChild(o), t.appendChild(s);
     }
     const e = document.createElement("div");
-    e.classList.add("simple-multi-language-content"), this.props.languages.forEach((s) => {
-      var a;
-      const n = ((a = this.value) == null ? void 0 : a[s]) || "", o = this.createTextareaRow(s, n);
-      e.appendChild(o);
-    }), t.appendChild(e), this.container = t;
+    e.classList.add("simple-multi-language-content"), t.appendChild(e), this.container = t, this.renderContent(t), this.languageChangeUnsubscribe = x.onLanguageChange(() => {
+      this.container && this.renderContent(this.container);
+    });
     const i = () => {
       if (!this.container) return;
       this.container.querySelectorAll(
@@ -4343,7 +4436,7 @@ class Pe extends x {
     });
   }
 }
-class Te extends x {
+class Pe extends x {
   constructor(t = {}) {
     super(t), this.inputType = "select";
     const e = [
@@ -4379,13 +4472,13 @@ const pe = `
   <path d="M6 2.75H5.85C4.58988 2.75 3.95982 2.75 3.47852 2.99524C3.05516 3.21095 2.71095 3.55516 2.49524 3.97852C2.25 4.45982 2.25 5.08988 2.25 6.35V6.5M6 16.25H5.85C4.58988 16.25 3.95982 16.25 3.47852 16.0048C3.05516 15.789 2.71095 15.4448 2.49524 15.0215C2.25 14.5402 2.25 13.9101 2.25 12.65V12.5M15.75 6.5V6.35C15.75 5.08988 15.75 4.45982 15.5048 3.97852C15.289 3.55516 14.9448 3.21095 14.5215 2.99524C14.0402 2.75 13.4101 2.75 12.15 2.75H12M15.75 12.5V12.65C15.75 13.9101 15.75 14.5402 15.5048 15.0215C15.289 15.4448 14.9448 15.789 14.5215 16.0048C14.0402 16.25 13.4101 16.25 12.15 16.25H12" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
 `;
-class Oe extends T {
+class Oe extends $ {
   constructor(t) {
     super({
       title: "Border",
       collapsed: t == null ? void 0 : t.collapsed,
       settings: {
-        size: new O({
+        size: new H({
           title: "Size",
           icon: ue,
           default: (t == null ? void 0 : t.size) ?? 0,
@@ -4395,7 +4488,7 @@ class Oe extends T {
           title: "Border Color",
           default: (t == null ? void 0 : t.color) || "#000000"
         }),
-        radius: new O({
+        radius: new H({
           title: "Radius",
           icon: pe,
           default: (t == null ? void 0 : t.radius) ?? 12,
@@ -4421,11 +4514,11 @@ class Oe extends T {
     `;
   }
 }
-const me = `
+const ge = `
 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="13" viewBox="0 0 14 13" fill="none">
   <path d="M1 2.75C1 2.05109 1 1.70163 1.11418 1.42597C1.26642 1.05843 1.55843 0.766422 1.92597 0.614181C2.20163 0.5 2.55109 0.5 3.25 0.5H10.75C11.4489 0.5 11.7984 0.5 12.074 0.614181C12.4416 0.766422 12.7336 1.05843 12.8858 1.42597C13 1.70163 13 2.05109 13 2.75M4.75 12.5H9.25M7 0.5V12.5" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
-`, ge = `
+`, me = `
 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
   <path d="M3 5.75C3 5.05109 3 4.70163 3.11418 4.42597C3.26642 4.05843 3.55843 3.76642 3.92597 3.61418C4.20163 3.5 4.55109 3.5 5.25 3.5H12.75C13.4489 3.5 13.7984 3.5 14.074 3.61418C14.4416 3.76642 14.7336 4.05843 14.8858 4.42597C15 4.70163 15 5.05109 15 5.75M6 15.5H12M7.6875 3.5V15.5M10.3125 3.5V15.5" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>  
@@ -4434,7 +4527,7 @@ const me = `
   <path d="M6 5.75H12M9 5.75V13.25M5.85 16.25H12.15C13.4101 16.25 14.0402 16.25 14.5215 16.0048C14.9448 15.789 15.289 15.4448 15.5048 15.0215C15.75 14.5402 15.75 13.9101 15.75 12.65V6.35C15.75 5.08988 15.75 4.45982 15.5048 3.97852C15.289 3.55516 14.9448 3.21095 14.5215 2.99524C14.0402 2.75 13.4101 2.75 12.15 2.75H5.85C4.58988 2.75 3.95982 2.75 3.47852 2.99524C3.05516 3.21095 2.71095 3.55516 2.49524 3.97852C2.25 4.45982 2.25 5.08988 2.25 6.35V12.65C2.25 13.9101 2.25 14.5402 2.49524 15.0215C2.71095 15.4448 3.05516 15.789 3.47852 16.0048C3.95982 16.25 4.58988 16.25 5.85 16.25Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
 `;
-class $e extends T {
+class $e extends $ {
   constructor(t = {}) {
     const { showAlign: e = t.showAlign ?? !0, ...i } = t;
     super({
@@ -4448,7 +4541,7 @@ class $e extends T {
           }),
           fontFamily: new nt({
             title: "Font",
-            icon: me,
+            icon: ge,
             default: i.fontFamilyDefault ?? "Satoshi",
             options: i.fontFamilyOptions ?? [
               { name: "Alt", value: "Croco Sans Black Caps Alt" },
@@ -4461,7 +4554,7 @@ class $e extends T {
           }),
           fontWeight: new nt({
             title: "Weight",
-            icon: ge,
+            icon: me,
             default: i.fontWeightDefault ?? "400",
             options: i.fontWeightOptions ?? [
               { name: "Regular", value: "400" },
@@ -4471,7 +4564,7 @@ class $e extends T {
             getOptions: i.fontWeightGetOptions,
             getOptionsAsync: i.fontWeightGetOptionsAsync
           }),
-          fontSize: new O({
+          fontSize: new H({
             title: "Size",
             icon: ve,
             default: i.fontSizeDefault ?? 12,
@@ -4559,7 +4652,7 @@ class _ extends x {
     }), i;
   }
 }
-class He extends T {
+class He extends $ {
   constructor(t) {
     super({
       title: "Margins",
@@ -4585,7 +4678,7 @@ class He extends T {
         }),
         marginLeft: new _({
           title: "Left",
-          icon: Ee,
+          icon: be,
           suffix: "px",
           default: (t == null ? void 0 : t.marginLeft) ?? 0
         })
@@ -4608,10 +4701,10 @@ const fe = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewB
   <path d="M5.625 2.75H5.6325M5.625 9.5H5.6325M5.625 16.25H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M12.375 16.25H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 16.25H9.0075M9 12.875H9.0075M9 6.125H9.0075M2.25 2.75H2.2575M2.25 9.5H2.2575M2.25 16.25H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M15.75 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`, ye = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
   <path d="M2.25 2.75H2.2575M2.25 9.5H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M5.625 2.75H5.6325M5.625 9.5H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 2.75H15.7575M15.75 9.5H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M15.75 16.25H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>`, Ee = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
+</svg>`, be = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
   <path d="M5.625 2.75H5.6325M5.625 9.5H5.6325M5.625 16.25H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M12.375 16.25H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 16.25H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 2.75H15.7575M15.75 9.5H15.7575M15.75 16.25H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M2.25 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`;
-class Be extends T {
+class Be extends $ {
   constructor(t) {
     super({
       title: "Background Image",
@@ -4650,7 +4743,7 @@ class Be extends T {
       `;
   }
 }
-class Ae extends T {
+class Ae extends $ {
   constructor(t) {
     super({
       title: (t == null ? void 0 : t.title) ?? "Image",
@@ -4674,11 +4767,11 @@ class Ae extends T {
 }
 export {
   jt as AlignSetting,
-  Te as AnimationSetting,
+  Pe as AnimationSetting,
   Be as BackgroundSettingSet,
   Oe as BorderSettingSet,
   Le as ButtonSetting,
-  P as ColorSetting,
+  O as ColorSetting,
   F as ColorWithOpacitySetting,
   ke as DimensionSetting,
   Ie as GapSetting,
@@ -4686,18 +4779,18 @@ export {
   $e as HeaderTypographySettingSet,
   ne as HeightSetting,
   xe as HtmlSetting,
-  mt as ImageMapSetting,
+  gt as ImageMapSetting,
   Ae as ImageSettingSet,
   Se as MarginBottomSetting,
   He as MarginSettingGroup,
   Ve as MarginTopSetting,
-  Pe as MultiLanguageSetting,
-  O as NumberSetting,
+  Te as MultiLanguageSetting,
+  H as NumberSetting,
   Ut as OpacitySetting,
   Me as SelectApiSettings,
   nt as SelectSetting,
   x as Setting,
-  T as SettingGroup,
+  $ as SettingGroup,
   Gt as StringSetting,
   At as TabSettingGroup,
   At as TabsSettingGroup,
@@ -4706,8 +4799,8 @@ export {
   ae as WidthSetting,
   we as asSettingGroupWithSettings,
   Dt as createSettingGroup,
-  be as createTabSettingGroup,
-  D as isSetting,
+  Ee as createTabSettingGroup,
+  G as isSetting,
   ct as isSettingChild,
   k as isSettingGroup,
   J as iterateSettings