builder-settings-types 0.0.329 → 0.0.331

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

@@ -1,22 +1,22 @@
 const xt = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
-let ft = (p = 21) => {
-  let t = "", e = crypto.getRandomValues(new Uint8Array(p |= 0));
-  for (; p--; )
-    t += xt[e[p] & 63];
+let ft = (d = 21) => {
+  let t = "", e = crypto.getRandomValues(new Uint8Array(d |= 0));
+  for (; d--; )
+    t += xt[e[d] & 63];
   return t;
 };
-function Lt(p) {
-  let t = 0, e = p.parentElement;
+function Lt(d) {
+  let t = 0, e = d.parentElement;
   for (; e; )
-    e.classList.contains("setting-group") && e !== p && t++, e = e.parentElement;
+    e.classList.contains("setting-group") && e !== d && t++, e = e.parentElement;
   return t;
 }
-function _(p, t) {
+function _(d, t) {
   const e = Math.min(Math.max(t, 0), 5);
-  p.setAttribute("data-nesting-level", e.toString()), e > 0 ? p.style.setProperty("--visual-indent", `${e * 2}px`) : (p.style.removeProperty("--visual-indent"), p.style.marginLeft = "");
+  d.setAttribute("data-nesting-level", e.toString()), e > 0 ? d.style.setProperty("--visual-indent", `${e * 2}px`) : (d.style.removeProperty("--visual-indent"), d.style.marginLeft = "");
 }
-function et(p, t = 0) {
-  p.querySelectorAll(":scope > .setting-group-content > .setting-group").forEach((i) => {
+function et(d, t = 0) {
+  d.querySelectorAll(":scope > .setting-group-content > .setting-group").forEach((i) => {
     const s = i, n = t + 1;
     _(s, n), et(s, n);
   });
@@ -112,20 +112,20 @@ class Mt {
   }
 }
 const rt = new Mt();
-function Y(p) {
-  if (p === null || typeof p != "object") return p;
-  if (p instanceof Date) return new Date(p.getTime());
-  if (p instanceof Array) return p.map((t) => Y(t));
-  if (typeof p == "object") {
+function Y(d) {
+  if (d === null || typeof d != "object") return d;
+  if (d instanceof Date) return new Date(d.getTime());
+  if (d instanceof Array) return d.map((t) => Y(t));
+  if (typeof d == "object") {
     const t = {};
-    for (const e in p)
-      Object.prototype.hasOwnProperty.call(p, e) && (t[e] = Y(p[e]));
+    for (const e in d)
+      Object.prototype.hasOwnProperty.call(d, e) && (t[e] = Y(d[e]));
     return t;
   }
-  return p;
+  return d;
 }
-function It(p) {
-  switch (p) {
+function Nt(d) {
+  switch (d) {
     case "number":
       return 0;
     case "text":
@@ -206,7 +206,7 @@ const M = class M {
     const i = document.createElement("div");
     i.className = t.wrapperClassName || "";
     const s = document.createElement("input");
-    this.inputEl = s, s.value = String(t.value || It(t.inputType)), s.type = t.inputType, s.placeholder = t.placeholder || "", s.className = t.inputClassName || "", this.dataPropsPath && s.setAttribute("data-test-id", this.dataPropsPath);
+    this.inputEl = s, s.value = String(t.value || Nt(t.inputType)), s.type = t.inputType, s.placeholder = t.placeholder || "", s.className = t.inputClassName || "", this.dataPropsPath && s.setAttribute("data-test-id", this.dataPropsPath);
     const n = (a) => {
       const l = a.target;
       let r = l.value;
@@ -262,79 +262,79 @@ M.currentLanguageExplicitlySet = !1, M.languageChangeCallbacks = /* @__PURE__ */
   { title: "Text Color", keys: ["text-dark", "text-light"] }
 ];
 let w = M;
-function F(p) {
-  return p instanceof w;
+function F(d) {
+  return d instanceof w;
 }
-function L(p) {
-  return p instanceof H;
+function L(d) {
+  return d instanceof H;
 }
-function ct(p) {
-  return F(p) || L(p);
+function ct(d) {
+  return F(d) || L(d);
 }
-const ot = (p, t, e) => {
+const ot = (d, t, e) => {
   let i = !1, s = 0, n = 0, o = 0, a = 0;
-  const l = (d) => {
-    if (d.target.closest("button")) return;
-    i = !0, s = d.clientX, n = d.clientY;
-    const h = t.getBoundingClientRect();
-    o = h.left, a = h.top, document.addEventListener("mousemove", r), document.addEventListener("mouseup", c), document.body.style.userSelect = "none";
-  }, r = (d) => {
+  const l = (h) => {
+    if (h.target.closest("button")) return;
+    i = !0, s = h.clientX, n = h.clientY;
+    const p = t.getBoundingClientRect();
+    o = p.left, a = p.top, document.addEventListener("mousemove", r), document.addEventListener("mouseup", c), document.body.style.userSelect = "none";
+  }, r = (h) => {
     if (!i) return;
-    const h = d.clientX - s, g = d.clientY - n, f = window.innerWidth, m = window.innerHeight, u = t.offsetWidth, C = t.offsetHeight;
-    let v = o + h, y = a + g;
-    v = Math.max(8, Math.min(f - u - 8, v)), y = Math.max(8, Math.min(m - C - 8, y)), t.style.left = `${v}px`, t.style.top = `${y}px`, e == null || e(v, y);
+    const p = h.clientX - s, g = h.clientY - n, C = window.innerWidth, m = window.innerHeight, u = t.offsetWidth, f = t.offsetHeight;
+    let v = o + p, y = a + g;
+    v = Math.max(8, Math.min(C - u - 8, v)), y = Math.max(8, Math.min(m - f - 8, y)), t.style.left = `${v}px`, t.style.top = `${y}px`, e == null || e(v, y);
   }, c = () => {
     i = !1, document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", c), document.body.style.userSelect = "";
   };
-  p.addEventListener("mousedown", l);
-}, G = (p) => {
-  if (!p) return null;
-  let t = p.trim();
+  d.addEventListener("mousedown", l);
+}, G = (d) => {
+  if (!d) return null;
+  let t = d.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("")}`, P = (p) => {
-  const t = p.replace("#", ""), e = t.length === 3 ? t.split("").map((i) => i + i).join("") : t;
+}, X = (d, t, e) => `#${[d, t, e].map((i) => Math.max(0, Math.min(255, i)).toString(16).padStart(2, "0")).join("")}`, P = (d) => {
+  const t = d.replace("#", ""), e = t.length === 3 ? t.split("").map((i) => i + i).join("") : t;
   return {
     r: parseInt(e.slice(0, 2), 16),
     g: parseInt(e.slice(2, 4), 16),
     b: parseInt(e.slice(4, 6), 16)
   };
-}, U = (p) => {
-  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;
+}, U = (d) => {
+  const { r: t, g: e, b: i } = P(d), 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 d = a === 0 ? 0 : r / a, h = a;
-  return { h: c * 60, s: d, v: h };
-}, W = (p, t, e) => {
-  const i = (p % 360 + 360) % 360, s = e * t, n = s * (1 - Math.abs(i / 60 % 2 - 1)), o = e - s;
+  const h = a === 0 ? 0 : r / a, p = a;
+  return { h: c * 60, s: h, v: p };
+}, W = (d, t, e) => {
+  const i = (d % 360 + 360) % 360, s = e * t, n = s * (1 - Math.abs(i / 60 % 2 - 1)), o = e - s;
   let a = 0, l = 0, r = 0;
   return i < 60 ? (a = s, l = n, r = 0) : i < 120 ? (a = n, l = s, r = 0) : i < 180 ? (a = 0, l = s, r = n) : i < 240 ? (a = 0, l = n, r = s) : i < 300 ? (a = n, l = 0, r = s) : (a = s, l = 0, r = n), X(
     Math.round((a + o) * 255),
     Math.round((l + o) * 255),
     Math.round((r + o) * 255)
   );
-}, Ct = (p, t, e) => {
+}, Ct = (d, t, e) => {
   const i = e * (1 - t / 2), s = i === 0 || i === 1 ? 0 : (e - i) / Math.min(i, 1 - i);
-  return { hue: p, sat: s, lightness: i };
-}, it = (p, t, e) => {
-  const i = (1 - Math.abs(2 * e - 1)) * t, s = i * (1 - Math.abs(p / 60 % 2 - 1)), n = e - i / 2;
+  return { hue: d, sat: s, lightness: i };
+}, it = (d, t, e) => {
+  const i = (1 - Math.abs(2 * e - 1)) * t, s = i * (1 - Math.abs(d / 60 % 2 - 1)), n = e - i / 2;
   let o = 0, a = 0, l = 0;
-  return p < 60 ? (o = i, a = s, l = 0) : p < 120 ? (o = s, a = i, l = 0) : p < 180 ? (o = 0, a = i, l = s) : p < 240 ? (o = 0, a = s, l = i) : p < 300 ? (o = s, a = 0, l = i) : (o = i, a = 0, l = s), {
+  return d < 60 ? (o = i, a = s, l = 0) : d < 120 ? (o = s, a = i, l = 0) : d < 180 ? (o = 0, a = i, l = s) : d < 240 ? (o = 0, a = s, l = i) : d < 300 ? (o = s, a = 0, l = i) : (o = i, a = 0, l = s), {
     r: Math.round((o + n) * 255),
     g: Math.round((a + n) * 255),
     b: Math.round((l + n) * 255)
   };
-}, st = (p, t) => {
+}, st = (d, t) => {
   const e = Math.max(0, Math.min(100, t)) / 100;
-  if (p.startsWith("#")) {
-    const { r: s, g: n, b: o } = P(p);
+  if (d.startsWith("#")) {
+    const { r: s, g: n, b: o } = P(d);
     return `rgba(${s}, ${n}, ${o}, ${e})`;
   }
-  if (p.startsWith("rgba("))
-    return p.replace(/,\s*[\d.]+\)$/, `, ${e})`);
-  if (p.startsWith("rgb("))
-    return p.replace("rgb(", "rgba(").replace(")", `, ${e})`);
-  if (p.startsWith("hsl(")) {
-    const s = p.match(/hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)/);
+  if (d.startsWith("rgba("))
+    return d.replace(/,\s*[\d.]+\)$/, `, ${e})`);
+  if (d.startsWith("rgb("))
+    return d.replace("rgb(", "rgba(").replace(")", `, ${e})`);
+  if (d.startsWith("hsl(")) {
+    const s = d.match(/hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)/);
     if (s) {
       const { r: n, g: o, b: a } = it(
         parseInt(s[1]),
@@ -344,8 +344,8 @@ const ot = (p, t, e) => {
       return `rgba(${n}, ${o}, ${a}, ${e})`;
     }
   }
-  if (p.startsWith("hsla(")) {
-    const s = p.match(/hsla\((\d+),\s*(\d+)%,\s*(\d+)%,\s*[\d.]+\)/);
+  if (d.startsWith("hsla(")) {
+    const s = d.match(/hsla\((\d+),\s*(\d+)%,\s*(\d+)%,\s*[\d.]+\)/);
     if (s) {
       const { r: n, g: o, b: a } = it(
         parseInt(s[1]),
@@ -355,13 +355,13 @@ const ot = (p, t, e) => {
       return `rgba(${n}, ${o}, ${a}, ${e})`;
     }
   }
-  const i = G(p);
+  const i = G(d);
   if (i) {
     const { r: s, g: n, b: o } = P(i);
     return `rgba(${s}, ${n}, ${o}, ${e})`;
   }
-  return p;
-}, Nt = (p) => [
+  return d;
+}, It = (d) => [
   "red",
   "green",
   "blue",
@@ -385,18 +385,18 @@ const ot = (p, t, e) => {
   "teal",
   "fuchsia",
   "transparent"
-].includes(p.toLowerCase()), yt = (p) => [
+].includes(d.toLowerCase()), yt = (d) => [
   /^#[0-9a-fA-F]{3,8}$/,
   /^rgba?\s*\([^)]+\)$/,
   /^hsla?\s*\([^)]+\)$/,
   /^[a-zA-Z]+$/
-].some((e) => e.test(p.trim())), St = (p) => {
+].some((e) => e.test(d.trim())), St = (d) => {
   if (typeof document > "u")
-    return yt(p) || !!G(p);
+    return yt(d) || !!G(d);
   const t = document.createElement("div");
-  return t.style.color = p, t.style.color !== "";
-}, Et = (p) => {
-  const t = p.trim();
+  return t.style.color = d, t.style.color !== "";
+}, Et = (d) => {
+  const t = d.trim();
   if (/^#[0-9A-Fa-f]{8}$/.test(t)) {
     const n = t.slice(1), o = parseInt(n.slice(0, 2), 16), a = parseInt(n.slice(2, 4), 16), l = parseInt(n.slice(4, 6), 16), r = parseInt(n.slice(6, 8), 16);
     return {
@@ -432,11 +432,11 @@ const ot = (p, t, e) => {
     };
   }
   return { color: G(t) || t, position: 0, opacity: 100 };
-}, ht = (p) => {
+}, ht = (d) => {
   const t = [];
   let e = "", i = 0;
-  for (let s = 0; s < p.length; s++) {
-    const n = p[s];
+  for (let s = 0; s < d.length; s++) {
+    const n = d[s];
     if (n === "(") i++;
     else if (n === ")") i--;
     else if (n === "," && i === 0) {
@@ -446,16 +446,16 @@ const ot = (p, t, e) => {
     e += n;
   }
   return e.trim() && t.push(e.trim()), t;
-}, dt = (p, t) => {
-  const e = new RegExp(`${t}\\s*\\(`, "i"), i = p.match(e);
+}, dt = (d, t) => {
+  const e = new RegExp(`${t}\\s*\\(`, "i"), i = d.match(e);
   if (!i) return null;
   const s = i.index + i[0].length;
   let n = 1, o = s;
-  for (let a = s; a < p.length && n > 0; a++)
-    p[a] === "(" ? n++ : p[a] === ")" && n--, o = a;
-  return n === 0 ? p.substring(s, o) : null;
-}, Vt = (p) => {
-  const t = p.split(" ")[0].toLowerCase();
+  for (let a = s; a < d.length && n > 0; a++)
+    d[a] === "(" ? n++ : d[a] === ")" && n--, o = a;
+  return n === 0 ? d.substring(s, o) : null;
+}, Vt = (d) => {
+  const t = d.split(" ")[0].toLowerCase();
   return [
     "circle",
     "ellipse",
@@ -466,31 +466,31 @@ const ot = (p, t, e) => {
     "at",
     "contain",
     "cover"
-  ].includes(t) ? !1 : /^#[0-9a-f]{3,8}$/i.test(t) || /^rgb/i.test(p) || /^hsl/i.test(p) || Nt(t);
-}, pt = (p) => {
+  ].includes(t) ? !1 : /^#[0-9a-f]{3,8}$/i.test(t) || /^rgb/i.test(d) || /^hsl/i.test(d) || It(t);
+}, pt = (d) => {
   const t = [];
-  return p.forEach((e, i) => {
+  return d.forEach((e, i) => {
     const s = e.trim();
     if (!s) return;
     let n = "", o = 0;
     const a = s.match(/^(.+?)\s+(\d+(?:\.\d+)?)%?\s*$/);
-    a && yt(a[1].trim()) ? (n = a[1].trim(), o = parseFloat(a[2])) : (n = s, o = p.length === 1 ? 0 : i / (p.length - 1) * 100);
+    a && yt(a[1].trim()) ? (n = a[1].trim(), o = parseFloat(a[2])) : (n = s, o = d.length === 1 ? 0 : i / (d.length - 1) * 100);
     const l = Et(n);
     l.position = Math.max(0, Math.min(100, Math.round(o))), t.push(l);
   }), t;
-}, A = (p) => {
-  const t = p.stops && p.stops.length ? p.stops : [{ color: "#000000", position: 0, opacity: 100 }];
+}, A = (d) => {
+  const t = d.stops && d.stops.length ? d.stops : [{ color: "#000000", position: 0, opacity: 100 }];
   return {
-    type: p.type && ["linear", "radial", "solid"].includes(p.type) ? p.type : "linear",
-    angle: typeof p.angle == "number" ? p.angle : 90,
+    type: d.type && ["linear", "radial", "solid"].includes(d.type) ? d.type : "linear",
+    angle: typeof d.angle == "number" ? d.angle : 90,
     stops: t.map((e, i) => ({
       color: e.color || "#000000",
       position: typeof e.position == "number" ? e.position : t.length === 1 ? 0 : Math.round(i / (t.length - 1) * 100),
       opacity: e.opacity === void 0 || Number.isNaN(e.opacity) ? 100 : e.opacity
     }))
   };
-}, T = (p) => {
-  const t = p.replace(/;$/, "").trim();
+}, T = (d) => {
+  const t = d.replace(/;$/, "").trim();
   if (St(t)) {
     const s = Et(t);
     return A({ type: "solid", angle: 0, stops: [s] });
@@ -522,21 +522,21 @@ const ot = (p, t, e) => {
     return o.length ? A({ type: "radial", angle: 0, stops: o }) : null;
   }
   return null;
-}, S = (p) => {
-  if (p.type === "solid") {
-    const e = p.stops[0], i = e.color;
+}, S = (d) => {
+  if (d.type === "solid") {
+    const e = d.stops[0], i = e.color;
     if (i.startsWith("var(--"))
       return i;
     const s = e.opacity ?? 100, n = i.replace("#", ""), o = Math.round(s / 100 * 255).toString(16).toUpperCase().padStart(2, "0");
     return `#${n}${o}`;
   }
-  const t = p.stops.map(
+  const t = d.stops.map(
     (e) => `${st(e.color, e.opacity ?? 100)} ${e.position}%`
   ).join(", ");
-  return p.type === "radial" ? `radial-gradient(circle, ${t})` : `linear-gradient(${p.angle}deg, ${t})`;
-}, Tt = (p) => Math.round(p / 100 * 255).toString(16).toUpperCase().padStart(2, "0"), K = (p) => {
-  if (p.type === "solid") {
-    const t = p.stops[0];
+  return d.type === "radial" ? `radial-gradient(circle, ${t})` : `linear-gradient(${d.angle}deg, ${t})`;
+}, Tt = (d) => Math.round(d / 100 * 255).toString(16).toUpperCase().padStart(2, "0"), K = (d) => {
+  if (d.type === "solid") {
+    const t = d.stops[0];
     if (t) {
       const e = t.color;
       if (e.startsWith("var(--"))
@@ -552,7 +552,7 @@ const ot = (p, t, e) => {
     }
     return "#000000";
   }
-  return p.type === "linear" ? `Linear ${p.angle}°` : "Radial Gradient";
+  return d.type === "linear" ? `Linear ${d.angle}°` : "Radial Gradient";
 }, q = class q {
   static defaults() {
     return {
@@ -623,7 +623,7 @@ const ot = (p, t, e) => {
 };
 q.STORAGE_KEY = "settingsLib_recentColors", q.MAX_COLORS = 12, q.colors = null;
 let R = q;
-const at = (p, t) => {
+const at = (d, t) => {
   const e = document.createElement("div");
   e.className = "color-picker-recent-section";
   const i = document.createElement("div");
@@ -632,9 +632,9 @@ const at = (p, t) => {
   s.className = "color-picker-tooltip", s.style.display = "none", e.appendChild(s);
   const n = () => {
     s.style.display = "none";
-  }, o = (c, d) => {
-    const h = c.getBoundingClientRect();
-    s.textContent = d, s.style.left = `${h.left + h.width / 2}px`, s.style.top = `${h.bottom + 8}px`, s.style.display = "block";
+  }, o = (c, h) => {
+    const p = c.getBoundingClientRect();
+    s.textContent = h, s.style.left = `${p.left + p.width / 2}px`, s.style.top = `${p.bottom + 8}px`, s.style.display = "block";
   }, a = document.createElement("div");
   a.className = "color-picker-recent-grid";
   const l = document.createElement("div");
@@ -646,40 +646,40 @@ const at = (p, t) => {
       a.style.display = "none", l.style.display = "block";
       return;
     }
-    a.style.display = "grid", l.style.display = "none", c.forEach((d) => {
-      const h = document.createElement("button");
-      h.type = "button", h.className = "color-picker-recent-swatch";
-      const g = Pt(d);
-      if (h.title = g, h.setAttribute("aria-label", `Use color: ${g}`), d.includes("gradient(")) {
-        h.style.backgroundImage = d, h.style.backgroundColor = "transparent";
-        const m = T(d);
-        m && m.stops && m.stops.length > 0 && (h.style.borderColor = m.stops[0].color);
+    a.style.display = "grid", l.style.display = "none", c.forEach((h) => {
+      const p = document.createElement("button");
+      p.type = "button", p.className = "color-picker-recent-swatch";
+      const g = Pt(h);
+      if (p.title = g, p.setAttribute("aria-label", `Use color: ${g}`), h.includes("gradient(")) {
+        p.style.backgroundImage = h, p.style.backgroundColor = "transparent";
+        const m = T(h);
+        m && m.stops && m.stops.length > 0 && (p.style.borderColor = m.stops[0].color);
       } else
-        h.style.backgroundColor = d, h.style.borderColor = d;
-      h.addEventListener("mouseenter", () => o(h, g)), h.addEventListener("mouseleave", () => {
-        n(), h.style.boxShadow = "";
-      }), h.addEventListener("mousedown", () => {
-        h.style.boxShadow = "0px 0px 0px 2px var(--grey40)";
-      }), h.addEventListener("mouseup", () => {
+        p.style.backgroundColor = h, p.style.borderColor = h;
+      p.addEventListener("mouseenter", () => o(p, g)), p.addEventListener("mouseleave", () => {
+        n(), p.style.boxShadow = "";
+      }), p.addEventListener("mousedown", () => {
+        p.style.boxShadow = "0px 0px 0px 2px var(--grey40)";
+      }), p.addEventListener("mouseup", () => {
         setTimeout(() => {
-          h.style.boxShadow = "";
+          p.style.boxShadow = "";
         }, 150);
-      }), h.addEventListener("click", () => {
-        n(), p(d);
-      }), a.appendChild(h);
+      }), p.addEventListener("click", () => {
+        n(), d(h);
+      }), a.appendChild(p);
     });
   };
   return r(), { container: e, refresh: r };
-}, Pt = (p) => {
-  const t = T(p);
+}, Pt = (d) => {
+  const t = T(d);
   if (t)
     return K(t);
-  const e = G(p);
+  const e = G(d);
   if (e) {
     const i = P(e);
     return `${e} (RGB: ${i.r}, ${i.g}, ${i.b})`;
   }
-  return p;
+  return d;
 }, bt = `<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
   <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"
@@ -760,77 +760,77 @@ class ut {
     r.className = "color-picker-sliders-group";
     const c = document.createElement("div");
     c.className = "color-picker-hue", this.hueSlider = c;
-    const d = document.createElement("div");
-    d.className = "color-picker-hue-marker", this.hueMarker = d, c.appendChild(d);
     const h = document.createElement("div");
-    h.className = "color-picker-opacity", this.opacitySlider = h;
+    h.className = "color-picker-hue-marker", this.hueMarker = h, c.appendChild(h);
+    const p = document.createElement("div");
+    p.className = "color-picker-opacity", this.opacitySlider = p;
     const g = document.createElement("div");
-    g.className = "color-picker-opacity-marker", this.opacityMarker = g, h.appendChild(g), r.appendChild(c), r.appendChild(h), a.appendChild(l), a.appendChild(r);
-    const f = at((E) => {
+    g.className = "color-picker-opacity-marker", this.opacityMarker = g, p.appendChild(g), r.appendChild(c), r.appendChild(p), a.appendChild(l), a.appendChild(r);
+    const C = at((E) => {
       var b;
       this.setColor(E), (b = this.onChange) == null || b.call(this, E, this.currentOpacity);
     }, this.recentScope);
-    this.recentSectionRefresh = f.refresh;
+    this.recentSectionRefresh = C.refresh;
     const m = document.createElement("div");
     m.className = "color-picker-format-section";
     const u = document.createElement("select");
     u.className = "color-picker-format-select", this.select = u;
-    const C = document.createElement("option");
-    C.value = "hex", C.textContent = "HEX";
+    const f = document.createElement("option");
+    f.value = "hex", f.textContent = "HEX";
     const v = document.createElement("option");
     v.value = "rgb", v.textContent = "RGB";
     const y = document.createElement("option");
-    y.value = "hsl", y.textContent = "HSL", u.appendChild(C), u.appendChild(v), u.appendChild(y);
+    y.value = "hsl", y.textContent = "HSL", u.appendChild(f), u.appendChild(v), u.appendChild(y);
     const x = document.createElement("input");
     x.type = "text", x.className = "color-picker-color-input", x.value = this.currentColor, this.input = x;
     const k = document.createElement("div");
     k.className = "color-picker-input-container";
-    const N = document.createElement("button");
-    return N.className = "color-picker-copy-inside", N.textContent = "Copy", k.appendChild(x), k.appendChild(N), m.appendChild(u), m.appendChild(k), t.appendChild(e), t.appendChild(n), t.appendChild(a), t.appendChild(f.container), t.appendChild(m), t.addEventListener("click", (E) => E.stopPropagation()), this.bind(n, c, h, x, u, N, l), t;
+    const I = document.createElement("button");
+    return I.className = "color-picker-copy-inside", I.textContent = "Copy", k.appendChild(x), k.appendChild(I), m.appendChild(u), m.appendChild(k), t.appendChild(e), t.appendChild(n), t.appendChild(a), t.appendChild(C.container), t.appendChild(m), t.addEventListener("click", (E) => E.stopPropagation()), this.bind(n, c, p, x, u, I, l), t;
   }
   createBackdrop() {
     const t = document.createElement("div");
     return t.className = "color-picker-backdrop", t.style.display = "none", t.style.pointerEvents = "none", t;
   }
   bind(t, e, i, s, n, o, a) {
-    const l = (d) => {
+    const l = (h) => {
       var v;
-      const h = t.getBoundingClientRect(), g = Math.max(0, Math.min(1, (d.clientX - h.left) / h.width)), f = Math.max(0, Math.min(1, (d.clientY - h.top) / h.height));
-      this.colorMarker.style.left = `${g * 100}%`, this.colorMarker.style.top = `${f * 100}%`;
-      const u = this.parsePercentage(this.hueMarker.style.left || "0%") * 360, C = W(u, g, 1 - f);
-      this.currentColor = C, this.syncInput(), this.updateOpacityBg(), (v = this.onChange) == null || v.call(this, C, this.currentOpacity);
-    }, r = (d) => {
+      const p = t.getBoundingClientRect(), g = Math.max(0, Math.min(1, (h.clientX - p.left) / p.width)), C = Math.max(0, Math.min(1, (h.clientY - p.top) / p.height));
+      this.colorMarker.style.left = `${g * 100}%`, this.colorMarker.style.top = `${C * 100}%`;
+      const u = this.parsePercentage(this.hueMarker.style.left || "0%") * 360, f = W(u, g, 1 - C);
+      this.currentColor = f, this.syncInput(), this.updateOpacityBg(), (v = this.onChange) == null || v.call(this, f, this.currentOpacity);
+    }, r = (h) => {
       var v;
-      const h = e.getBoundingClientRect();
-      let g = Math.max(0, Math.min(1, (d.clientX - h.left) / h.width));
+      const p = e.getBoundingClientRect();
+      let g = Math.max(0, Math.min(1, (h.clientX - p.left) / p.width));
       this.hueMarker.style.left = `${g * 100}%`;
-      const f = g * 360, m = this.parsePercentage(this.colorMarker.style.left || "0%"), u = this.parsePercentage(this.colorMarker.style.top || "0%"), C = W(f, m, 1 - u);
-      this.currentColor = C, this.colorArea.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${f}, 100%, 50%))`, this.syncInput(), this.updateOpacityBg(), (v = this.onChange) == null || v.call(this, C, this.currentOpacity);
-    }, c = (d) => {
-      var f;
-      const h = i.getBoundingClientRect(), g = Math.max(0, Math.min(1, (d.clientX - h.left) / h.width));
-      this.opacityMarker.style.left = `${g * 100}%`, this.currentOpacity = Math.round(g * 100), (f = this.onChange) == null || f.call(this, this.currentColor, this.currentOpacity);
+      const C = g * 360, m = this.parsePercentage(this.colorMarker.style.left || "0%"), u = this.parsePercentage(this.colorMarker.style.top || "0%"), f = W(C, m, 1 - u);
+      this.currentColor = f, this.colorArea.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${C}, 100%, 50%))`, this.syncInput(), this.updateOpacityBg(), (v = this.onChange) == null || v.call(this, f, this.currentOpacity);
+    }, c = (h) => {
+      var C;
+      const p = i.getBoundingClientRect(), g = Math.max(0, Math.min(1, (h.clientX - p.left) / p.width));
+      this.opacityMarker.style.left = `${g * 100}%`, this.currentOpacity = Math.round(g * 100), (C = this.onChange) == null || C.call(this, this.currentColor, this.currentOpacity);
     };
-    t.addEventListener("mousedown", (d) => {
-      d.preventDefault(), l(d);
-      const h = (f) => l(f), g = () => {
-        document.removeEventListener("mousemove", h), document.removeEventListener("mouseup", g);
+    t.addEventListener("mousedown", (h) => {
+      h.preventDefault(), l(h);
+      const p = (C) => l(C), g = () => {
+        document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", g);
       };
-      document.addEventListener("mousemove", h), document.addEventListener("mouseup", g);
-    }), e.addEventListener("mousedown", (d) => {
-      d.preventDefault(), r(d);
-      const h = (f) => r(f), g = () => {
-        document.removeEventListener("mousemove", h), document.removeEventListener("mouseup", g);
+      document.addEventListener("mousemove", p), document.addEventListener("mouseup", g);
+    }), e.addEventListener("mousedown", (h) => {
+      h.preventDefault(), r(h);
+      const p = (C) => r(C), g = () => {
+        document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", g);
       };
-      document.addEventListener("mousemove", h), document.addEventListener("mouseup", g);
-    }), i.addEventListener("mousedown", (d) => {
-      d.preventDefault(), c(d);
-      const h = (f) => c(f), g = () => {
-        document.removeEventListener("mousemove", h), document.removeEventListener("mouseup", g);
+      document.addEventListener("mousemove", p), document.addEventListener("mouseup", g);
+    }), i.addEventListener("mousedown", (h) => {
+      h.preventDefault(), c(h);
+      const p = (C) => c(C), g = () => {
+        document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", g);
       };
-      document.addEventListener("mousemove", h), document.addEventListener("mouseup", g);
-    }), n.addEventListener("change", () => this.syncInput()), s.addEventListener("input", () => this.applyFromInput()), s.addEventListener("blur", () => this.syncInput()), s.addEventListener("keydown", (d) => {
-      d.key === "Enter" && (d.preventDefault(), this.syncInput(), s.blur());
+      document.addEventListener("mousemove", p), document.addEventListener("mouseup", g);
+    }), n.addEventListener("change", () => this.syncInput()), s.addEventListener("input", () => this.applyFromInput()), s.addEventListener("blur", () => this.syncInput()), s.addEventListener("keydown", (h) => {
+      h.key === "Enter" && (h.preventDefault(), this.syncInput(), s.blur());
     }), o.addEventListener("click", async () => {
       try {
         await navigator.clipboard.writeText(s.value);
@@ -838,14 +838,14 @@ class ut {
         s.select(), document.execCommand("copy");
       }
     }), a.addEventListener("click", async () => {
-      var d;
+      var h;
       if (!("EyeDropper" in window)) {
         alert("EyeDropper API is not supported in this browser.");
         return;
       }
       try {
-        const h = new window.EyeDropper(), { sRGBHex: g } = await h.open();
-        this.setColor(g), (d = this.onChange) == null || d.call(this, g, this.currentOpacity);
+        const p = new window.EyeDropper(), { sRGBHex: g } = await p.open();
+        this.setColor(g), (h = this.onChange) == null || h.call(this, g, this.currentOpacity);
       } catch {
       }
     }), document.addEventListener("keydown", this.keyDown, !0), setTimeout(
@@ -903,12 +903,12 @@ class ut {
     this.currentColor = t, this.currentOpacity = i ?? 100, this.syncInput();
     const { h: s, s: n, v: o } = U(t);
     this.hueMarker.style.left = `${s / 360 * 100}%`, this.colorMarker.style.left = `${n * 100}%`, this.colorMarker.style.top = `${(1 - o) * 100}%`, this.colorArea.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${s}, 100%, 50%))`, this.updateOpacityBg(), this.opacityMarker.style.left = `${this.currentOpacity}%`, (y = this.recentSectionRefresh) == null || y.call(this), this.isOpen = !0, this.backdrop.style.display = "block", this.backdrop.parentElement || document.body.appendChild(this.backdrop), this.element.style.display = "block", this.element.style.position = "fixed", this.element.style.zIndex = "10002", this.element.style.left = "-9999px", this.element.style.top = "0px", this.element.parentElement || document.body.appendChild(this.element);
-    const a = this.element.offsetWidth, l = this.element.offsetHeight, r = e.getBoundingClientRect(), c = window.innerWidth, d = window.innerHeight, h = 16;
-    let g = r.right + 8, f = r.top;
+    const a = this.element.offsetWidth, l = this.element.offsetHeight, r = e.getBoundingClientRect(), c = window.innerWidth, h = window.innerHeight, p = 16;
+    let g = r.right + 8, C = r.top;
     const m = c - r.right, u = r.left;
-    m >= a + h ? g = r.right + 8 : u >= a + h ? g = r.left - a - 8 : g = Math.max(h, (c - a) / 2);
-    const C = d - r.bottom, v = r.top;
-    C >= l + h ? f = r.bottom + 8 : v >= l + h ? f = r.top - l - 8 : C > v ? (f = r.bottom + 8, f + l > d - h && (f = d - l - h)) : (f = r.top - l - 8, f < h && (f = h)), this.element.style.left = `${g}px`, this.element.style.top = `${f}px`;
+    m >= a + p ? g = r.right + 8 : u >= a + p ? g = r.left - a - 8 : g = Math.max(p, (c - a) / 2);
+    const f = h - r.bottom, v = r.top;
+    f >= l + p ? C = r.bottom + 8 : v >= l + p ? C = r.top - l - 8 : f > v ? (C = r.bottom + 8, C + l > h - p && (C = h - l - p)) : (C = r.top - l - 8, C < p && (C = p)), this.element.style.left = `${g}px`, this.element.style.top = `${C}px`;
   }
   close(t) {
     var e;
@@ -954,47 +954,47 @@ class Dt {
     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 d = at((x) => {
+    const h = at((x) => {
       const k = T(x);
       k && k.type !== "solid" ? this.onColorChange(x, this.currentOpacity) : (this.setColor(x), this.onColorChange(this.currentColor, this.currentOpacity));
     }, "all");
-    this.recentSectionRefresh = d.refresh;
-    const h = document.createElement("div");
-    h.className = "color-picker-format-section embedded";
+    this.recentSectionRefresh = h.refresh;
+    const p = document.createElement("div");
+    p.className = "color-picker-format-section embedded";
     const g = document.createElement("select");
     g.className = "color-picker-format-select", this.select = g;
-    const f = document.createElement("option");
-    f.value = "hex", f.textContent = "HEX";
+    const C = document.createElement("option");
+    C.value = "hex", C.textContent = "HEX";
     const m = document.createElement("option");
     m.value = "rgb", m.textContent = "RGB";
     const u = document.createElement("option");
-    u.value = "hsl", u.textContent = "HSL", g.appendChild(f), g.appendChild(m), g.appendChild(u);
-    const C = document.createElement("input");
-    C.type = "text", C.className = "color-picker-color-input", this.input = C;
+    u.value = "hsl", u.textContent = "HSL", g.appendChild(C), g.appendChild(m), g.appendChild(u);
+    const f = document.createElement("input");
+    f.type = "text", f.className = "color-picker-color-input", this.input = f;
     const v = document.createElement("div");
     v.className = "color-picker-input-container";
     const y = document.createElement("button");
-    return y.className = "color-picker-copy-inside", y.textContent = "Copy", v.appendChild(C), v.appendChild(y), h.appendChild(g), h.appendChild(v), t.appendChild(e), t.appendChild(s), t.appendChild(h), t.appendChild(d.container), this.bind(e, a, r, C, g, y, n), t;
+    return y.className = "color-picker-copy-inside", y.textContent = "Copy", v.appendChild(f), v.appendChild(y), p.appendChild(g), p.appendChild(v), t.appendChild(e), t.appendChild(s), t.appendChild(p), t.appendChild(h.container), this.bind(e, a, r, f, g, y, n), t;
   }
   bind(t, e, i, s, n, o, a) {
-    const l = (h, g) => {
-      const f = g || t.getBoundingClientRect(), m = Math.max(0, Math.min(1, (h.clientX - f.left) / f.width)), u = Math.max(0, Math.min(1, (h.clientY - f.top) / f.height));
+    const l = (p, g) => {
+      const C = g || t.getBoundingClientRect(), m = Math.max(0, Math.min(1, (p.clientX - C.left) / C.width)), u = Math.max(0, Math.min(1, (p.clientY - C.top) / C.height));
       this.colorMarker.style.left = `${m * 100}%`, this.colorMarker.style.top = `${u * 100}%`;
       const v = this.parsePercentage(this.hueMarker.style.left || "0%") * 360, y = W(v, m, 1 - u);
       this.currentColor = y, this.syncInput(), this.updateOpacityBg(), this.queueChange();
-    }, r = (h, g) => {
-      const f = g || e.getBoundingClientRect(), m = Math.max(0, Math.min(1, (h.clientX - f.left) / f.width));
+    }, r = (p, g) => {
+      const C = g || e.getBoundingClientRect(), m = Math.max(0, Math.min(1, (p.clientX - C.left) / C.width));
       this.hueMarker.style.left = `${m * 100}%`;
-      const u = m * 360, C = this.parsePercentage(this.colorMarker.style.left || "0%"), v = this.parsePercentage(this.colorMarker.style.top || "0%"), y = W(u, C, 1 - v);
+      const u = m * 360, f = this.parsePercentage(this.colorMarker.style.left || "0%"), v = this.parsePercentage(this.colorMarker.style.top || "0%"), y = W(u, f, 1 - v);
       this.currentColor = y, this.colorArea.style.background = `linear-gradient(to top, #000, transparent),
          linear-gradient(to right, #fff, hsl(${u}, 100%, 50%))`, this.syncInput(), this.updateOpacityBg(), this.queueChange();
-    }, c = (h, g) => {
-      const f = g || i.getBoundingClientRect(), m = Math.max(0, Math.min(1, (h.clientX - f.left) / f.width));
+    }, c = (p, g) => {
+      const C = g || i.getBoundingClientRect(), m = Math.max(0, Math.min(1, (p.clientX - C.left) / C.width));
       this.opacityMarker.style.left = `${m * 100}%`, this.currentOpacity = this.clampOpacity(m * 100), this.queueChange();
-    }, d = (h, g, f) => {
-      h.preventDefault(), this.isDragging = !0, this.cachedRect = f.getBoundingClientRect(), g(h, this.cachedRect);
+    }, h = (p, g, C) => {
+      p.preventDefault(), this.isDragging = !0, this.cachedRect = C.getBoundingClientRect(), g(p, this.cachedRect);
       let m = null, u;
-      const C = () => {
+      const f = () => {
         this.dragRafId === void 0 && (this.dragRafId = window.requestAnimationFrame(() => {
           this.dragRafId = void 0, m && this.cachedRect && g(m, this.cachedRect);
         }));
@@ -1006,23 +1006,23 @@ class Dt {
           v();
           return;
         }
-        m = y, C();
+        m = y, f();
       }, document.addEventListener("mousemove", u), document.addEventListener("mouseup", v), window.addEventListener("blur", v);
     };
-    t.addEventListener("mousedown", (h) => {
-      d(h, l, t);
-    }), e.addEventListener("mousedown", (h) => {
-      d(h, r, e);
-    }), i.addEventListener("mousedown", (h) => {
-      d(h, c, i);
+    t.addEventListener("mousedown", (p) => {
+      h(p, l, t);
+    }), e.addEventListener("mousedown", (p) => {
+      h(p, r, e);
+    }), i.addEventListener("mousedown", (p) => {
+      h(p, c, i);
     }), n.addEventListener("change", () => {
       this.syncInput();
     }), s.addEventListener("input", () => {
       this.applyFromInput();
     }), s.addEventListener("blur", () => {
       this.syncInput();
-    }), s.addEventListener("keydown", (h) => {
-      h.key === "Enter" && (h.preventDefault(), this.syncInput(), s.blur());
+    }), s.addEventListener("keydown", (p) => {
+      p.key === "Enter" && (p.preventDefault(), this.syncInput(), s.blur());
     }), o.addEventListener("click", async () => {
       try {
         await navigator.clipboard.writeText(s.value);
@@ -1035,7 +1035,7 @@ class Dt {
         return;
       }
       try {
-        const h = new window.EyeDropper(), { sRGBHex: g } = await h.open();
+        const p = new window.EyeDropper(), { sRGBHex: g } = await p.open();
         this.setColor(g), this.onColorChange(this.currentColor, this.currentOpacity);
       } catch {
       }
@@ -1137,10 +1137,10 @@ const V = class V extends w {
       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.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 h;
+      var p;
       if (!this.popoverEl || !this.isPopoverOpen) return;
-      const s = i.target, n = this.popoverEl.contains(s), o = (h = this.element) == null ? void 0 : h.contains(s), a = document.querySelectorAll(".custom-color-picker"), l = Array.from(a).some((g) => g.contains(s)), r = s.closest(".gstop-color-input, .gradient-mini-preview, .gstop-color-preview"), c = s.classList.contains("color-picker-backdrop"), d = s.classList.contains("gradient-popover-backdrop");
-      !n && !o && !l && !r && !c && !d && this.closePopover();
+      const s = i.target, n = this.popoverEl.contains(s), o = (p = this.element) == null ? void 0 : p.contains(s), a = document.querySelectorAll(".custom-color-picker"), l = Array.from(a).some((g) => g.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) {
         if (i.key === "Escape") {
@@ -1322,8 +1322,8 @@ const V = class V extends w {
     n.appendChild(o), s.appendChild(n);
     const a = document.createElement("div");
     if (a.className = "gradient-editor-content", this.updatePopoverContent(a), s.appendChild(a), this.variant !== "global" && e) {
-      const l = e.children[0], r = e.children[1], c = (d) => {
-        this.currentMode = d, d === "custom" ? (l.classList.add("active"), r.classList.remove("active"), n.style.display = "block") : (r.classList.add("active"), l.classList.remove("active"), n.style.display = "none"), this.updatePopoverContent(a);
+      const l = e.children[0], r = e.children[1], c = (h) => {
+        this.currentMode = h, h === "custom" ? (l.classList.add("active"), r.classList.remove("active"), n.style.display = "block") : (r.classList.add("active"), l.classList.remove("active"), n.style.display = "none"), this.updatePopoverContent(a);
       };
       l.addEventListener("click", () => c("custom")), r.addEventListener("click", () => c("global")), this.isBoundToGlobal() ? (this.currentMode = "global", c("global")) : (this.currentMode = "custom", c("custom"));
     }
@@ -1390,39 +1390,39 @@ const V = class V extends w {
   }
   renderGlobalColors(t) {
     (!this.value || !this.value.stops || !this.value.stops.length) && (this.value || (this.value = this.defaultValue()), this.value.stops = [{ color: "#000000", position: 0, opacity: 100 }]);
-    const e = this.value.stops[0], i = (d) => {
-      d.innerHTML = "";
-      let h = {};
+    const e = this.value.stops[0], i = (h) => {
+      h.innerHTML = "";
+      let p = {};
       try {
-        h = w.GlobalVariables || {};
+        p = w.GlobalVariables || {};
       } catch (u) {
         console.warn("Could not access Setting.GlobalVariables", u);
       }
-      if (!h || Object.keys(h).length === 0) {
+      if (!p || Object.keys(p).length === 0) {
         const u = document.createElement("div");
-        u.textContent = "No global colors defined", u.style.fontSize = "12px", u.style.color = "#666", u.style.padding = "8px", d.appendChild(u);
+        u.textContent = "No global colors defined", u.style.fontSize = "12px", u.style.color = "#666", u.style.padding = "8px", h.appendChild(u);
         return;
       }
       const g = w.GlobalVariableGroups || [
         { title: "Global Colors", keys: ["primary", "secondary", "tertiary", "accent"] },
         { title: "Text Color", keys: ["text-dark", "text-light"] }
-      ], f = this.globalSearchQuery.toLowerCase();
+      ], C = this.globalSearchQuery.toLowerCase();
       let m;
-      this.globalLayoutMode === "list" ? (m = document.createElement("div"), m.className = "global-colors-list") : (m = document.createElement("div"), m.className = "global-colors-grid"), d.appendChild(m), g.forEach((u) => {
-        const C = Object.entries(h).filter(([v]) => !u.keys.includes(v) && u.title !== "Global Colors" ? !1 : u.keys.includes(v) && v.toLowerCase().includes(f));
-        C.length !== 0 && C.forEach(([v, y]) => {
+      this.globalLayoutMode === "list" ? (m = document.createElement("div"), m.className = "global-colors-list") : (m = document.createElement("div"), m.className = "global-colors-grid"), h.appendChild(m), g.forEach((u) => {
+        const f = Object.entries(p).filter(([v]) => !u.keys.includes(v) && u.title !== "Global Colors" ? !1 : u.keys.includes(v) && v.toLowerCase().includes(C));
+        f.length !== 0 && f.forEach(([v, y]) => {
           if (this.globalLayoutMode === "list") {
             const x = document.createElement("div");
             x.className = "global-color-row";
             const k = document.createElement("div");
             k.className = "global-color-circle";
-            const N = this.resolveGlobalVarColor(y);
-            k.style.background = N, (this.linkedGlobalVariable === `var(--${v})` || e.color === `var(--${v})`) && k.classList.add("selected");
+            const I = this.resolveGlobalVarColor(y);
+            k.style.background = I, (this.linkedGlobalVariable === `var(--${v})` || e.color === `var(--${v})`) && k.classList.add("selected");
             const b = document.createElement("span");
-            b.className = "global-color-label", b.textContent = v.split("-").map((I) => I.charAt(0).toUpperCase() + I.slice(1)).join(" "), x.appendChild(k), x.appendChild(b), x.addEventListener("click", (I) => {
-              I.preventDefault();
+            b.className = "global-color-label", b.textContent = v.split("-").map((N) => N.charAt(0).toUpperCase() + N.slice(1)).join(" "), x.appendChild(k), x.appendChild(b), x.addEventListener("click", (N) => {
+              N.preventDefault();
               const D = `var(--${v})`;
-              this.setValue(D), this.pendingSolidColor = D, i(d);
+              this.setValue(D), this.pendingSolidColor = D, i(h);
             }), m.appendChild(x);
           } else {
             const x = document.createElement("div");
@@ -1431,7 +1431,7 @@ const V = class V extends w {
             x.style.background = k, x.title = v.split("-").map((E) => E.charAt(0).toUpperCase() + E.slice(1)).join(" "), (this.linkedGlobalVariable === `var(--${v})` || e.color === `var(--${v})`) && x.classList.add("selected"), x.addEventListener("click", (E) => {
               E.preventDefault();
               const b = `var(--${v})`;
-              this.setValue(b), this.pendingSolidColor = b, i(d);
+              this.setValue(b), this.pendingSolidColor = b, i(h);
             }), m.appendChild(x);
           }
         });
@@ -1445,8 +1445,8 @@ const V = class V extends w {
     const a = document.createElement("input");
     a.type = "text", a.className = "global-search-input", a.placeholder = "Search", a.value = this.globalSearchQuery;
     const l = document.createElement("div");
-    a.addEventListener("input", (d) => {
-      this.globalSearchQuery = d.target.value, i(l);
+    a.addEventListener("input", (h) => {
+      this.globalSearchQuery = h.target.value, i(l);
     }), n.appendChild(o), n.appendChild(a);
     const r = document.createElement("button");
     r.className = "global-layout-toggle", r.type = "button";
@@ -1481,15 +1481,15 @@ const V = class V extends w {
     {
       const c = document.createElement("div");
       c.className = "gradient-subtype-inline";
-      const d = document.createElement("select");
-      d.className = "gradient-subtype-select";
-      const h = document.createElement("option");
-      h.value = "linear", h.textContent = "Linear";
+      const h = document.createElement("select");
+      h.className = "gradient-subtype-select";
+      const p = document.createElement("option");
+      p.value = "linear", p.textContent = "Linear";
       const g = document.createElement("option");
-      g.value = "radial", g.textContent = "Radial", d.appendChild(h), d.appendChild(g), d.value = this.value.type === "radial" ? "radial" : "linear", e = document.createElement("input"), e.type = "text", e.inputMode = "numeric", e.className = "gradient-degree-input", e.value = `${this.value.angle ?? 90}°`, e.style.width = "75px", e.style.textAlign = "center", (!this.value.angle || this.value.stops.length < 2) && (this.value.angle = 90, e.value = "90°");
-      const f = document.createElement("button");
-      f.type = "button", f.className = "gradient-flip-btn", f.innerHTML = Ot, d.addEventListener("change", () => {
-        this.clearGlobalBindingForCustomChange(), this.switchType(d.value === "radial" ? "radial" : "linear", !0), e && this.updateDegreeVisibility(e);
+      g.value = "radial", g.textContent = "Radial", h.appendChild(p), h.appendChild(g), 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 C = document.createElement("button");
+      C.type = "button", C.className = "gradient-flip-btn", C.innerHTML = Ot, h.addEventListener("change", () => {
+        this.clearGlobalBindingForCustomChange(), this.switchType(h.value === "radial" ? "radial" : "linear", !0), e && this.updateDegreeVisibility(e);
       }), e.addEventListener("focus", (m) => {
         const u = m.target;
         u.value = u.value.replace(/[^0-9-]/g, ""), setTimeout(() => u.select(), 0);
@@ -1501,13 +1501,13 @@ const V = class V extends w {
         var v;
         this.previewUpdateTimeout && (clearTimeout(this.previewUpdateTimeout), this.previewUpdateTimeout = null);
         const u = m.target;
-        let C = parseInt(u.value);
-        Number.isNaN(C) && (C = ((v = this.value) == null ? void 0 : v.angle) ?? 0), C = Math.max(0, Math.min(360, C)), this.value && (this.value.angle = C), u.value = `${C}°`, this.updateGradientPreview(), this.updateUI(), this.triggerChange();
-      }), f.addEventListener("click", () => {
+        let f = parseInt(u.value);
+        Number.isNaN(f) && (f = ((v = this.value) == null ? void 0 : v.angle) ?? 0), f = Math.max(0, Math.min(360, f)), this.value && (this.value.angle = f), u.value = `${f}°`, this.updateGradientPreview(), this.updateUI(), this.triggerChange();
+      }), C.addEventListener("click", () => {
         this.clearGlobalBindingForCustomChange(), !(!this.value || !this.value.stops) && (this.value.stops.forEach((m) => {
           m.position = 100 - m.position;
         }), this.value.stops.sort((m, u) => m.position - u.position), this.updateGradientPreview(i), this.createHandles(s, i), this.updateStopsList(l), this.updateUI(), this.triggerChange());
-      }), c.appendChild(d), c.appendChild(e), c.appendChild(f), t.appendChild(c), this.updateDegreeVisibility(e);
+      }), c.appendChild(h), c.appendChild(e), c.appendChild(C), t.appendChild(c), this.updateDegreeVisibility(e);
     }
     const i = document.createElement("div");
     i.className = "gradient-preview", this.updateGradientPreview(i);
@@ -1522,8 +1522,8 @@ const V = class V extends w {
     const l = document.createElement("div");
     l.className = "gradient-stops", t.appendChild(n), t.appendChild(l), this.updateStopsList(l);
     const r = at((c) => {
-      const d = T(c);
-      d && (this.clearGlobalBindingForCustomChange(), this.value = d, this.switchType(d.type, !0), 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;
@@ -1558,29 +1558,29 @@ const V = class V extends w {
       o.className = "gstop-chip";
       const a = this.resolveGlobalVarColor(i.color);
       o.style.backgroundColor = a, n.appendChild(o);
-      const l = new ut((u, C) => {
-        this.clearGlobalBindingForCustomChange(), this.value && this.value.stops[s] && (this.value.stops[s].color = u, C !== void 0 && (this.value.stops[s].opacity = C), o.style.backgroundColor = u, this.updateGradientPreview(), this.updateStopsList(), this.updateUI(), this.triggerChange());
+      const l = new ut((u, f) => {
+        this.clearGlobalBindingForCustomChange(), this.value && this.value.stops[s] && (this.value.stops[s].color = u, f !== void 0 && (this.value.stops[s].opacity = f), o.style.backgroundColor = u, this.updateGradientPreview(), this.updateStopsList(), this.updateUI(), this.triggerChange());
       }, "solid");
-      let r = !1, c = !1, d = 0, h = 0;
+      let r = !1, c = !1, h = 0, p = 0;
       const g = (u) => {
-        r = !0, c = !1, d = u.clientX, h = this.value.stops[s].position, n.classList.add("selected"), document.addEventListener("mousemove", f), document.addEventListener("mouseup", m), u.preventDefault(), u.stopPropagation();
-      }, f = (u) => {
+        r = !0, c = !1, h = u.clientX, p = this.value.stops[s].position, n.classList.add("selected"), document.addEventListener("mousemove", C), document.addEventListener("mouseup", m), u.preventDefault(), u.stopPropagation();
+      }, C = (u) => {
         if (!r || !this.value) return;
-        const C = u.clientX - d;
-        if (Math.abs(C) > 3 && (c = !0), c) {
+        const f = u.clientX - h;
+        if (Math.abs(f) > 3 && (c = !0), c) {
           this.clearGlobalBindingForCustomChange();
           const v = e.getBoundingClientRect();
-          let y = h + C / v.width * 100;
+          let y = p + f / v.width * 100;
           y = Math.max(0, Math.min(100, y)), this.value.stops[s].position = Math.round(y), n.style.left = `${y}%`, this.updateGradientPreview();
         }
       }, m = (u) => {
-        var C;
+        var f;
         if (r)
-          if (r = !1, n.classList.remove("selected"), document.removeEventListener("mousemove", f), document.removeEventListener("mouseup", m), c)
+          if (r = !1, n.classList.remove("selected"), document.removeEventListener("mousemove", C), document.removeEventListener("mouseup", m), c)
             this.value && (this.value.stops.sort((v, y) => v.position - y.position), this.createHandles(t, e), this.updateStopsList()), this.updateUI(), this.triggerChange();
           else {
             u.stopPropagation();
-            const v = (C = this.value) == null ? void 0 : C.stops[s];
+            const v = (f = this.value) == null ? void 0 : f.stops[s];
             v && setTimeout(() => {
               const y = this.resolveGlobalVarColor(v.color);
               l.open(y, o, v.opacity ?? 100);
@@ -1594,7 +1594,7 @@ const V = class V extends w {
     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 k, N;
+      var k, I;
       const o = document.createElement("div");
       o.className = "gstop-row";
       const a = document.createElement("div");
@@ -1603,50 +1603,50 @@ const V = class V extends w {
       l.type = "text", l.className = "gstop-position-input", l.value = `${s.position}%`, l.style.width = "60px", a.appendChild(l);
       const r = document.createElement("div");
       r.className = "gstop-color-container";
-      const c = this.resolveGlobalVarColor(s.color), d = document.createElement("div");
-      d.className = "gstop-color-preview", d.style.backgroundColor = c;
-      const h = document.createElement("input");
-      h.type = "text", h.className = "gstop-color-input", h.value = c.replace("#", "").toUpperCase();
+      const c = this.resolveGlobalVarColor(s.color), h = document.createElement("div");
+      h.className = "gstop-color-preview", h.style.backgroundColor = c;
+      const p = document.createElement("input");
+      p.type = "text", p.className = "gstop-color-input", p.value = c.replace("#", "").toUpperCase();
       const g = document.createElement("button");
-      g.type = "button", g.className = "gstop-color-copy", g.textContent = "Copy", r.appendChild(d), r.appendChild(h), r.appendChild(g);
-      const f = document.createElement("button");
-      f.type = "button", f.className = "gstop-del", f.innerHTML = Ht, f.disabled = (((N = (k = this.value) == null ? void 0 : k.stops) == null ? void 0 : N.length) || 0) <= 2, o.appendChild(a), o.appendChild(r), o.appendChild(f), e.appendChild(o);
+      g.type = "button", g.className = "gstop-color-copy", g.textContent = "Copy", r.appendChild(h), r.appendChild(p), r.appendChild(g);
+      const C = document.createElement("button");
+      C.type = "button", C.className = "gstop-del", C.innerHTML = Ht, C.disabled = (((I = (k = this.value) == null ? void 0 : k.stops) == null ? void 0 : I.length) || 0) <= 2, o.appendChild(a), o.appendChild(r), o.appendChild(C), e.appendChild(o);
       const m = document.createElement("span");
       m.className = "gstop-opacity-label", m.textContent = "Opacity";
       const u = document.createElement("div");
       u.className = "gstop-opacity-group";
-      const C = document.createElement("input");
-      C.type = "range", C.className = "gstop-opacity-slider", C.min = "0", C.max = "100", C.value = String(s.opacity ?? 100);
+      const f = document.createElement("input");
+      f.type = "range", f.className = "gstop-opacity-slider", f.min = "0", f.max = "100", f.value = String(s.opacity ?? 100);
       const v = P(c);
-      C.style.setProperty("--slider-color", `rgb(${v.r}, ${v.g}, ${v.b})`);
+      f.style.setProperty("--slider-color", `rgb(${v.r}, ${v.g}, ${v.b})`);
       const y = document.createElement("span");
-      y.className = "gstop-opacity-value", y.textContent = `${s.opacity ?? 100}%`, u.appendChild(C), u.appendChild(y);
+      y.className = "gstop-opacity-value", y.textContent = `${s.opacity ?? 100}%`, u.appendChild(f), u.appendChild(y);
       const x = new ut((E, b) => {
-        this.clearGlobalBindingForCustomChange(), h.value = E.replace("#", "").toUpperCase(), d.style.backgroundColor = E, this.value.stops[n].color = E, b !== void 0 && (this.value.stops[n].opacity = b, C.value = String(b), y.textContent = `${b}%`);
-        const I = P(E);
-        C.style.setProperty("--slider-color", `rgb(${I.r}, ${I.g}, ${I.b})`), this.updateGradientPreview(), this.createHandles(
+        this.clearGlobalBindingForCustomChange(), p.value = E.replace("#", "").toUpperCase(), h.style.backgroundColor = E, this.value.stops[n].color = E, b !== void 0 && (this.value.stops[n].opacity = b, f.value = String(b), y.textContent = `${b}%`);
+        const N = P(E);
+        f.style.setProperty("--slider-color", `rgb(${N.r}, ${N.g}, ${N.b})`), this.updateGradientPreview(), this.createHandles(
           this.popoverEl.querySelector(".gradient-handles"),
           this.popoverEl.querySelector(".gradient-preview")
         ), this.updateUI(), this.triggerChange();
       }, "solid");
-      h.addEventListener("click", (E) => {
+      p.addEventListener("click", (E) => {
         E.preventDefault(), E.stopPropagation();
         const b = this.resolveGlobalVarColor(s.color);
-        x.open(b, h, s.opacity ?? 100);
-      }), h.addEventListener("input", () => {
+        x.open(b, p, s.opacity ?? 100);
+      }), p.addEventListener("input", () => {
         this.clearGlobalBindingForCustomChange();
-        const E = h.value.trim(), b = E.startsWith("#") ? E : `#${E}`;
+        const E = p.value.trim(), b = E.startsWith("#") ? E : `#${E}`;
         if (/^#[0-9A-Fa-f]{6}$/.test(b)) {
-          this.value.stops[n].color = b, d.style.backgroundColor = b;
-          const I = P(b);
-          C.style.setProperty("--slider-color", `rgb(${I.r}, ${I.g}, ${I.b})`), this.debouncedPreviewUpdate();
+          this.value.stops[n].color = b, h.style.backgroundColor = b;
+          const N = P(b);
+          f.style.setProperty("--slider-color", `rgb(${N.r}, ${N.g}, ${N.b})`), this.debouncedPreviewUpdate();
         }
-      }), h.addEventListener("blur", () => {
+      }), p.addEventListener("blur", () => {
         this.previewUpdateTimeout && (clearTimeout(this.previewUpdateTimeout), this.previewUpdateTimeout = null), this.updateGradientPreview(), this.updateUI(), this.triggerChange();
       }), g.addEventListener("click", async (E) => {
         E.stopPropagation();
         try {
-          await navigator.clipboard.writeText(`#${h.value}`);
+          await navigator.clipboard.writeText(`#${p.value}`);
         } catch {
         }
       }), l.addEventListener("focus", (E) => {
@@ -1654,35 +1654,35 @@ const V = class V extends w {
         b.value = b.value.replace("%", ""), b.select();
       }), l.addEventListener("input", (E) => {
         this.clearGlobalBindingForCustomChange();
-        const b = E.target, I = parseInt(b.value.replace(/[^\d]/g, ""), 10);
-        if (!Number.isNaN(I)) {
-          const D = Math.max(0, Math.min(100, I));
+        const b = E.target, N = parseInt(b.value.replace(/[^\d]/g, ""), 10);
+        if (!Number.isNaN(N)) {
+          const D = Math.max(0, Math.min(100, N));
           this.value.stops[n].position = D, b.value = `${D}%`, this.debouncedPreviewUpdate();
         }
       }), l.addEventListener("blur", (E) => {
         this.previewUpdateTimeout && (clearTimeout(this.previewUpdateTimeout), this.previewUpdateTimeout = null);
-        const b = E.target, I = parseInt(b.value.replace(/[^\d]/g, ""), 10);
-        if (Number.isNaN(I))
+        const b = E.target, N = parseInt(b.value.replace(/[^\d]/g, ""), 10);
+        if (Number.isNaN(N))
           b.value = `${this.value.stops[n].position}%`;
         else {
-          const D = Math.max(0, Math.min(100, I));
+          const D = Math.max(0, Math.min(100, N));
           this.value.stops[n].position = D, b.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", () => {
+      }), C.addEventListener("click", () => {
         var E;
         (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());
-      }), C.addEventListener("input", () => {
+      }), f.addEventListener("input", () => {
         this.clearGlobalBindingForCustomChange();
-        const E = parseInt(C.value, 10);
+        const E = parseInt(f.value, 10);
         this.value.stops[n].opacity = Math.max(0, Math.min(100, E)), y.textContent = `${this.value.stops[n].opacity}%`, this.debouncedPreviewUpdate();
-      }), C.addEventListener("change", () => {
+      }), f.addEventListener("change", () => {
         this.clearGlobalBindingForCustomChange(), this.previewUpdateTimeout && (clearTimeout(this.previewUpdateTimeout), this.previewUpdateTimeout = null), this.updateGradientPreview(), this.updateUI(), this.triggerChange();
       });
     }));
@@ -1711,10 +1711,10 @@ const V = class V extends w {
         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;
         let a = t.right + 8, l = t.top;
-        const r = i - t.right, c = t.left, d = e + n;
-        r < d && c > r + 100 && (a = t.left - e - 8);
-        const h = s - t.bottom, g = t.top;
-        g >= o + n ? l = t.top - o - 8 : h >= o + n ? l = t.bottom + 8 : g > h ? (l = t.top - o - 8, l < n && (l = n)) : (l = t.bottom + 8, l + o > s - n && (l = s - o - n)), this.popoverEl.style.left = `${a}px`, this.popoverEl.style.top = `${l}px`, this.popoverPosition = { left: a, top: l };
+        const r = i - t.right, c = t.left, h = e + n;
+        r < h && c > r + 100 && (a = t.left - e - 8);
+        const p = s - t.bottom, g = t.top;
+        g >= o + n ? l = t.top - o - 8 : p >= o + n ? l = t.bottom + 8 : g > p ? (l = t.top - o - 8, l < n && (l = n)) : (l = t.bottom + 8, l + o > s - n && (l = s - o - n)), this.popoverEl.style.left = `${a}px`, this.popoverEl.style.top = `${l}px`, this.popoverPosition = { left: a, top: l };
       }
       setTimeout(() => document.addEventListener("click", this.onBackgroundClick, !0), 200), document.addEventListener("keydown", this.handlePopoverKeydown, !0);
     }
@@ -1732,10 +1732,10 @@ const V = class V extends w {
         this.popoverEl.style.left, this.popoverEl.style.top, this.popoverEl.style.left = "-9999px", this.popoverEl.style.top = "0px";
         const a = this.popoverEl.offsetHeight;
         let l = e.right + 8, r = e.top;
-        const c = s - e.right, d = e.left, h = i + o;
-        c < h && d > c + 100 && (l = e.left - i - 8);
-        const g = n - e.bottom, f = e.top;
-        f >= a + o ? r = e.top - a - 8 : g >= a + o ? r = e.bottom + 8 : f > g ? (r = e.top - a - 8, r < o && (r = o)) : (r = e.bottom + 8, r + a > n - o && (r = n - a - o)), this.popoverEl.style.left = `${l}px`, this.popoverEl.style.top = `${r}px`;
+        const c = s - e.right, h = e.left, p = i + o;
+        c < p && h > c + 100 && (l = e.left - i - 8);
+        const g = n - e.bottom, C = e.top;
+        C >= a + o ? r = e.top - a - 8 : g >= a + o ? r = e.bottom + 8 : C > g ? (r = e.top - a - 8, r < o && (r = o)) : (r = e.bottom + 8, r + a > n - o && (r = n - a - o)), this.popoverEl.style.left = `${l}px`, this.popoverEl.style.top = `${r}px`;
       });
     }
   }
@@ -1810,10 +1810,10 @@ const V = class V extends w {
 };
 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)) {
-      const i = p[e];
+function J(d, t) {
+  for (const e in d)
+    if (Object.prototype.hasOwnProperty.call(d, e)) {
+      const i = d[e];
       t(e, i);
     }
 }
@@ -1919,16 +1919,16 @@ const Q = class Q {
     }), s.forEach((r) => {
       n.includes(r) || this.removeSetting(r);
     }), n.forEach((r) => {
-      var h;
-      const c = t[r], d = this.settings[r];
-      if (d !== c && (d && this.removeSetting(r), this.addSetting(r, c), i && r in o)) {
+      var p;
+      const c = t[r], h = this.settings[r];
+      if (h !== c && (h && this.removeSetting(r), this.addSetting(r, c), i && r in o)) {
         const g = o[r];
         try {
           L(c) ? c.setValue(
             g
-          ) : F(c) ? (h = c.setValue) == null || h.call(c, g) : c.setValue && c.setValue(g);
-        } catch (f) {
-          console.warn(`Could not preserve value for setting ${r}:`, f);
+          ) : F(c) ? (p = c.setValue) == null || p.call(c, g) : c.setValue && c.setValue(g);
+        } catch (C) {
+          console.warn(`Could not preserve value for setting ${r}:`, C);
         }
       }
     }), this.settings = t, this.propagateNestingLevel(), this.propagateDataPropsPath();
@@ -2059,8 +2059,8 @@ const Q = class Q {
         L(e) && typeof e.setNestingLevel == "function" && e.setNestingLevel(this.nestingLevel + 1);
         const a = e.draw(), l = this.deleteItemCfg ?? this.addItemCfg;
         if (l) {
-          const d = l.keyPrefix ?? ((s = this.addItemCfg) == null ? void 0 : s.keyPrefix);
-          d && t.startsWith(d) && this.addDeleteButtonToElement(a, t);
+          const h = l.keyPrefix ?? ((s = this.addItemCfg) == null ? void 0 : s.keyPrefix);
+          h && t.startsWith(h) && this.addDeleteButtonToElement(a, t);
         }
         const r = o.querySelector(".sg-add-button-bottom");
         r ? o.insertBefore(a, r) : o.appendChild(a), rt.trackElement(a), _(a, this.nestingLevel + 1), et(a, this.nestingLevel + 1);
@@ -2212,11 +2212,11 @@ const Q = class Q {
         r(), t(!1);
       }), l.addEventListener("click", () => {
         r(), t(!0);
-      }), e.addEventListener("click", (d) => {
-        d.target === e && (r(), t(!1));
+      }), e.addEventListener("click", (h) => {
+        h.target === e && (r(), t(!1));
       });
-      const c = (d) => {
-        d.key === "Escape" && (r(), t(!1), document.removeEventListener("keydown", c));
+      const c = (h) => {
+        h.key === "Escape" && (r(), t(!1), document.removeEventListener("keydown", c));
       };
       document.addEventListener("keydown", c), o.appendChild(a), o.appendChild(l), i.appendChild(s), i.appendChild(n), i.appendChild(o), e.appendChild(i), document.body.appendChild(e), requestAnimationFrame(() => {
         e.style.opacity = "1", i.style.transform = "scale(1)";
@@ -2360,14 +2360,14 @@ const Q = class Q {
     }, Object.keys(this.settings).length > 0) {
       for (const c in this.settings)
         if (Object.prototype.hasOwnProperty.call(this.settings, c)) {
-          const d = this.settings[c];
-          L(d) && typeof d.setNestingLevel == "function" && d.setNestingLevel(this.nestingLevel + 1);
-          const h = d.draw();
-          L(d) && d.deleteItemCfg && this.addDeleteButtonToElement(
-            h,
+          const h = this.settings[c];
+          L(h) && typeof h.setNestingLevel == "function" && h.setNestingLevel(this.nestingLevel + 1);
+          const p = h.draw();
+          L(h) && h.deleteItemCfg && this.addDeleteButtonToElement(
+            p,
             c,
-            d
-          ), a.appendChild(h);
+            h
+          ), a.appendChild(p);
         }
     } else {
       const c = document.createElement("div");
@@ -2376,18 +2376,18 @@ const Q = class Q {
     if (this.addItemCfg) {
       const c = document.createElement("button");
       c.type = "button", c.className = "sg-add-button-bottom", c.style.marginTop = "8px";
-      const d = `
+      const h = `
     <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
          xmlns="http://www.w3.org/2000/svg">
       <path d="M8 3.333v9.334M3.333 8h9.334" stroke="currentColor"
             stroke-width="1.5" stroke-linecap="round"/>
     </svg>`;
-      c.innerHTML = `${d}<span style="margin-left:4px;">${this.addItemCfg.buttonLabel ?? "Add"}</span>`, c.addEventListener("click", (h) => {
-        h.stopPropagation(), h.preventDefault();
-        const g = this.getNextIndexFromPrefix(this.addItemCfg.keyPrefix), f = this.addItemCfg.createItem(g);
-        if (ct(f)) {
+      c.innerHTML = `${h}<span style="margin-left:4px;">${this.addItemCfg.buttonLabel ?? "Add"}</span>`, c.addEventListener("click", (p) => {
+        p.stopPropagation(), p.preventDefault();
+        const g = this.getNextIndexFromPrefix(this.addItemCfg.keyPrefix), C = this.addItemCfg.createItem(g);
+        if (ct(C)) {
           const m = `${this.addItemCfg.keyPrefix}${g}`;
-          this.addSetting(m, f);
+          this.addSetting(m, C);
         }
       }), a.appendChild(c);
     }
@@ -2435,8 +2435,8 @@ const Q = class Q {
 };
 Q.hiddenElements = /* @__PURE__ */ new Set();
 let H = Q;
-function Me(p) {
-  return new Ft(p);
+function Me(d) {
+  return new Ft(d);
 }
 class Ft extends H {
   constructor(t) {
@@ -2488,9 +2488,9 @@ class Ft extends H {
       r.className = "tab-button", r.type = "button", r.setAttribute("data-tab-id", a), r.textContent = a, r.addEventListener("click", () => this.switchToTab(a)), n.appendChild(r);
       const c = document.createElement("div");
       c.className = "tab-panel", this.contentContainers[a] = c;
-      const d = this.settings[a];
-      d && (L(d) && typeof d.setNestingLevel == "function" && d.setNestingLevel(this.getNestingLevel() + 1), c.appendChild(
-        d.draw()
+      const h = this.settings[a];
+      h && (L(h) && typeof h.setNestingLevel == "function" && h.setNestingLevel(this.getNestingLevel() + 1), c.appendChild(
+        h.draw()
       )), o.appendChild(c), l === 0 && !this.activeTabId && (this.activeTabId = a);
     }), e.appendChild(i), e.appendChild(n), e.appendChild(o), !this.activeTabId) {
       const a = Object.keys(this.settings)[0];
@@ -2499,11 +2499,11 @@ class Ft extends H {
     return this.updateTabUI(), t;
   }
 }
-function Gt(p) {
-  return new H(p);
+function Gt(d) {
+  return new H(d);
 }
-function Ie(p) {
-  return p;
+function Ne(d) {
+  return d;
 }
 class Rt extends w {
   constructor(t = {}) {
@@ -2546,8 +2546,8 @@ class O extends Rt {
     if (e.length !== 3 || e.some(isNaN))
       return console.warn(`Invalid RGB value "${t}", using default "#000000"`), "#000000";
     const [i, s, n] = e, o = Math.max(0, Math.min(255, i)), a = Math.max(0, Math.min(255, s)), l = Math.max(0, Math.min(255, n)), r = (c) => {
-      const d = c.toString(16);
-      return d.length === 1 ? "0" + d : d;
+      const h = c.toString(16);
+      return h.length === 1 ? "0" + h : h;
     };
     return `#${r(o)}${r(a)}${r(l)}`;
   }
@@ -2607,15 +2607,15 @@ class O extends Rt {
           u.textContent = "No global colors defined", u.style.gridColumn = "1 / -1", u.style.fontSize = "12px", u.style.color = "#666", a.appendChild(u);
           return;
         }
-        Object.entries(m).forEach(([u, C]) => {
+        Object.entries(m).forEach(([u, f]) => {
           const v = document.createElement("button");
-          v.className = "global-color-btn", v.title = u, v.style.width = "30px", v.style.height = "30px", v.style.borderRadius = "50%", v.style.border = "1px solid #ddd", v.style.backgroundColor = C, v.style.cursor = "pointer", this.value === `var(--${u})` && (v.style.border = "2px solid #2196f3"), v.addEventListener("click", (y) => {
-            var k, N;
+          v.className = "global-color-btn", v.title = u, v.style.width = "30px", v.style.height = "30px", v.style.borderRadius = "50%", v.style.border = "1px solid #ddd", v.style.backgroundColor = f, v.style.cursor = "pointer", this.value === `var(--${u})` && (v.style.border = "2px solid #2196f3"), v.addEventListener("click", (y) => {
+            var k, I;
             y.preventDefault();
             const x = `var(--${u})`;
-            this.value = x, (k = this.onChange) == null || k.call(this, x), (N = this.detectChange) == null || N.call(this, x), Array.from(a.children).forEach((E) => {
+            this.value = x, (k = this.onChange) == null || k.call(this, x), (I = this.detectChange) == null || I.call(this, x), Array.from(a.children).forEach((E) => {
               E.style.border = "1px solid #ddd";
-            }), v.style.border = "2px solid #2196f3", d.style.backgroundColor = C;
+            }), v.style.border = "2px solid #2196f3", h.style.backgroundColor = f;
           }), a.appendChild(v);
         });
       } catch (m) {
@@ -2635,44 +2635,44 @@ class O extends Rt {
       return v ? e.classList.remove("error") : e.classList.add("error"), v;
     }, 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;
-    const d = document.createElement("div");
-    d.className = "color-preview";
-    let h = this.value || "#000000";
-    if (h.startsWith("var(--")) {
-      const m = h.replace("var(--", "").replace(")", "");
-      h = (w.GlobalVariables || {})[m] || "#000000";
+    const h = document.createElement("div");
+    h.className = "color-preview";
+    let p = this.value || "#000000";
+    if (p.startsWith("var(--")) {
+      const m = p.replace("var(--", "").replace(")", "");
+      p = (w.GlobalVariables || {})[m] || "#000000";
     }
-    d.style.backgroundColor = h;
+    h.style.backgroundColor = p;
     const g = document.createElement("input");
     g.type = "text", g.className = "color-text-input", g.value = this.value || "", g.placeholder = "#000000", g.setAttribute("pattern", "#[0-9A-Fa-f]{6}"), g.setAttribute("title", "Enter a hex color value (e.g., #ff0000)"), g.setAttribute("aria-label", "Hex color value"), g.setAttribute("maxlength", "7"), this.getDataPropsPath() && g.setAttribute("data-test-id", `${this.getDataPropsPath()}_text`), this.textInputEl = g;
-    const f = (m) => {
-      var C, v;
+    const C = (m) => {
+      var f, v;
       let u = m.trim();
       if (u && !u.startsWith("#") && !u.startsWith("var(") && /^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(u) && (u = "#" + u, this.textInputEl && (this.textInputEl.value = u)), this.textInputEl && r(this.textInputEl)) {
         const y = O.normalizeColorValue(u);
-        this.value = y, (C = this.onChange) == null || C.call(this, y), (v = this.detectChange) == null || v.call(this, y), this.colorInputEl && (this.colorInputEl.value = y), d.style.backgroundColor = y;
+        this.value = y, (f = this.onChange) == null || f.call(this, y), (v = this.detectChange) == null || v.call(this, y), this.colorInputEl && (this.colorInputEl.value = y), h.style.backgroundColor = y;
       }
     };
     return this.textInputEl.addEventListener("input", (m) => {
       const u = m.target.value;
-      f(u);
+      C(u);
     }), this.textInputEl.addEventListener("paste", (m) => {
-      var C;
+      var f;
       m.preventDefault();
-      const u = ((C = m.clipboardData) == null ? void 0 : C.getData("text")) || "";
-      this.textInputEl && (this.textInputEl.value = u.trim(), f(u));
+      const u = ((f = m.clipboardData) == null ? void 0 : f.getData("text")) || "";
+      this.textInputEl && (this.textInputEl.value = u.trim(), C(u));
     }), this.textInputEl.addEventListener("keydown", (m) => {
-      var u, C, v;
-      m.key === "Enter" && (m.preventDefault(), f(((u = this.textInputEl) == null ? void 0 : u.value) || ""), (C = this.textInputEl) == null || C.blur()), m.key === "Escape" && (this.textInputEl && this.value && (this.textInputEl.value = this.value), (v = this.textInputEl) == null || v.blur(), e.classList.remove("error"));
+      var u, f, v;
+      m.key === "Enter" && (m.preventDefault(), C(((u = this.textInputEl) == null ? void 0 : u.value) || ""), (f = this.textInputEl) == null || f.blur()), m.key === "Escape" && (this.textInputEl && this.value && (this.textInputEl.value = this.value), (v = this.textInputEl) == null || v.blur(), e.classList.remove("error"));
     }), this.colorInputEl.addEventListener("input", (m) => {
       var v, y;
-      const u = m.target.value, C = O.normalizeColorValue(u);
-      this.value = C, (v = this.onChange) == null || v.call(this, C), (y = this.detectChange) == null || y.call(this, C), this.textInputEl && (this.textInputEl.value = C), d.style.backgroundColor = C, e.classList.remove("error");
+      const u = m.target.value, f = O.normalizeColorValue(u);
+      this.value = f, (v = this.onChange) == null || v.call(this, f), (y = this.detectChange) == null || y.call(this, f), this.textInputEl && (this.textInputEl.value = f), h.style.backgroundColor = f, e.classList.remove("error");
     }), this.colorInputEl.addEventListener("change", (m) => {
       var v, y;
-      const u = m.target.value, C = O.normalizeColorValue(u);
-      this.value = C, (v = this.onChange) == null || v.call(this, C), (y = this.detectChange) == null || y.call(this, C), this.textInputEl && (this.textInputEl.value = C), d.style.backgroundColor = C;
-    }), o.appendChild(c), o.appendChild(d), o.appendChild(g), e.appendChild(i), e.appendChild(o), e.appendChild(a), t.appendChild(e), this.element = t, t;
+      const u = m.target.value, f = O.normalizeColorValue(u);
+      this.value = f, (v = this.onChange) == null || v.call(this, f), (y = this.detectChange) == null || y.call(this, f), this.textInputEl && (this.textInputEl.value = f), h.style.backgroundColor = f;
+    }), o.appendChild(c), o.appendChild(h), o.appendChild(g), e.appendChild(i), e.appendChild(o), e.appendChild(a), t.appendChild(e), this.element = t, t;
   }
   getElement() {
     return this.element;
@@ -2833,7 +2833,7 @@ class z extends w {
     };
   }
 }
-class Ne extends w {
+class Ie extends w {
   constructor(t = {}) {
     super(t), this.inputType = "text", t.onChange && this.setOnChange(t.onChange);
   }
@@ -3530,12 +3530,12 @@ const gt = `
     if (t.className = "image-map-setting-wrapper", this.props.title || this.props.icon) {
       const h = document.createElement("div");
       if (h.className = "icon-container", this.props.icon) {
-        const g = this.createIcon(this.props.icon);
-        h.appendChild(g);
+        const p = this.createIcon(this.props.icon);
+        h.appendChild(p);
       }
       if (this.props.title) {
-        const g = this.createLabel(this.props.title);
-        h.appendChild(g);
+        const p = this.createLabel(this.props.title);
+        h.appendChild(p);
       }
       t.appendChild(h);
     }
@@ -3553,25 +3553,27 @@ const gt = `
     a.type = "button", a.className = "image-map-delete-btn", a.innerHTML = ie, a.addEventListener("click", (h) => {
       h.stopPropagation(), this.value = { imageUrl: "", markers: [] }, this.updateMainDisplay(), this.triggerChange();
     }), o.appendChild(a), n.appendChild(o);
-    const l = document.createElement("label");
-    l.className = "image-map-upload-label", l.innerHTML = `
+    const l = document.createElement("button");
+    l.type = "button", l.className = "image-map-upload-label", l.innerHTML = `
       <div class="upload-icon upload-icon-default">${gt}</div>
       <div class="upload-icon upload-icon-replace">${Qt}</div>
       <span class="upload-text">Upload Image</span>
-    `;
-    const r = document.createElement("input");
-    r.type = "file", r.accept = "image/jpeg,image/jpg,image/png,image/gif,image/webp", r.style.display = "none", r.addEventListener("change", (h) => {
-      var f;
-      const g = (f = h.target.files) == null ? void 0 : f[0];
-      g && this.handleImageUpload(g);
-    }), l.appendChild(r), n.appendChild(l), i.appendChild(n), e.appendChild(i);
-    const c = document.createElement("div");
-    c.className = "image-map-section";
-    const d = document.createElement("h4");
-    return d.className = "image-map-section-title", d.textContent = "Map Setup", c.appendChild(d), this.mainButton = document.createElement("button"), this.mainButton.type = "button", this.mainButton.className = "image-map-button", this.mapIconEl = document.createElement("span"), this.mapIconEl.className = "image-map-icon", this.mapIconEl.innerHTML = mt, this.mainButton.appendChild(this.mapIconEl), this.markerCountEl = document.createElement("span"), this.markerCountEl.className = "image-map-marker-count", this.mainButton.appendChild(this.markerCountEl), this.mainButton.addEventListener("click", () => {
+    `, l.addEventListener("click", () => {
+      window.postMessage(
+        {
+          type: "OPEN_FILE_MANAGER_MODAL",
+          settingId: this.id
+        },
+        "*"
+      );
+    }), n.appendChild(l), i.appendChild(n), e.appendChild(i);
+    const r = document.createElement("div");
+    r.className = "image-map-section";
+    const c = document.createElement("h4");
+    return c.className = "image-map-section-title", c.textContent = "Map Setup", r.appendChild(c), this.mainButton = document.createElement("button"), this.mainButton.type = "button", this.mainButton.className = "image-map-button", this.mapIconEl = document.createElement("span"), this.mapIconEl.className = "image-map-icon", this.mapIconEl.innerHTML = mt, this.mainButton.appendChild(this.mapIconEl), this.markerCountEl = document.createElement("span"), this.markerCountEl.className = "image-map-marker-count", this.mainButton.appendChild(this.markerCountEl), this.mainButton.addEventListener("click", () => {
       var h;
       (h = this.mainButton) != null && h.disabled || this.openPopover();
-    }), c.appendChild(this.mainButton), e.appendChild(c), t.appendChild(e), this.createPopover(), this.updateMainDisplay(), t;
+    }), r.appendChild(this.mainButton), e.appendChild(r), t.appendChild(e), this.createPopover(), this.updateMainDisplay(), t;
   }
   updateMainDisplay() {
     var s;
@@ -3651,14 +3653,14 @@ const gt = `
       r.className = "image-map-image-section", this.renderImageMapSection(r);
       const c = document.createElement("div");
       c.className = "prize-list-section", this.renderPrizeList(c), l.appendChild(r), l.appendChild(c), t.appendChild(l);
-      const d = this.renderBottomButtons();
-      t.appendChild(d);
-      const h = r.querySelector(
+      const h = this.renderBottomButtons();
+      t.appendChild(h);
+      const p = r.querySelector(
         ".image-map-container"
       ), g = c.querySelector(
         ".simple-prize-list"
       );
-      h && (h.scrollTop = s), g && (g.scrollTop = n);
+      p && (p.scrollTop = s), g && (g.scrollTop = n);
     } else
       this.renderUploadSection(t);
   }
@@ -3692,9 +3694,9 @@ const gt = `
     `;
     const o = document.createElement("input");
     o.type = "file", o.accept = "image/jpeg,image/jpg,image/png,image/gif,image/webp", o.style.display = "none", o.addEventListener("change", (c) => {
-      var h;
-      const d = (h = c.target.files) == null ? void 0 : h[0];
-      d && this.handleImageUpload(d);
+      var p;
+      const h = (p = c.target.files) == null ? void 0 : p[0];
+      h && this.handleImageUpload(h);
     }), n.appendChild(o), s.appendChild(n), e.appendChild(s);
     const a = document.createElement("h4");
     a.className = "upload-section-title", a.textContent = "Map Setup", e.appendChild(a);
@@ -3771,8 +3773,8 @@ const gt = `
       r.className = "done-btn-tooltip";
       const c = document.createElement("div");
       c.className = "done-btn-tooltip-content", c.textContent = "Map all prizes";
-      const d = document.createElement("div");
-      d.className = "done-btn-tooltip-tail", d.innerHTML = re, r.appendChild(c), r.appendChild(d), o.appendChild(r);
+      const h = document.createElement("div");
+      h.className = "done-btn-tooltip-tail", h.innerHTML = re, r.appendChild(c), r.appendChild(h), o.appendChild(r);
     }
     return s.appendChild(o), s;
   }
@@ -3783,16 +3785,16 @@ const gt = `
     const n = document.createElement("div");
     n.className = "simple-prize-list";
     for (let a = e; a >= 1; a--) {
-      const l = s.get(a), r = !!l, c = (l == null ? void 0 : l.prizeName) || this.props.prizeMap && this.props.prizeMap[a - 1] || "Prize Name", d = document.createElement("div");
-      d.className = `simple-prize-item ${r ? "placed" : ""}`;
-      const h = document.createElement("div");
-      h.className = "simple-prize-number", h.textContent = `#${a}`, d.appendChild(h);
+      const l = s.get(a), r = !!l, c = (l == null ? void 0 : l.prizeName) || this.props.prizeMap && this.props.prizeMap[a - 1] || "Prize Name", h = document.createElement("div");
+      h.className = `simple-prize-item ${r ? "placed" : ""}`;
+      const p = document.createElement("div");
+      p.className = "simple-prize-number", p.textContent = `#${a}`, h.appendChild(p);
       const g = document.createElement("div");
-      if (g.className = "simple-prize-text", g.textContent = `${c}`, d.appendChild(g), r) {
-        const f = document.createElement("div");
-        f.className = "simple-prize-check", f.innerHTML = oe, d.appendChild(f);
+      if (g.className = "simple-prize-text", g.textContent = `${c}`, h.appendChild(g), r) {
+        const C = document.createElement("div");
+        C.className = "simple-prize-check", C.innerHTML = oe, h.appendChild(C);
       }
-      n.appendChild(d);
+      n.appendChild(h);
     }
     t.appendChild(n);
   }
@@ -3839,20 +3841,20 @@ const gt = `
       if (typeof a == "string") {
         const r = new Image();
         r.onload = () => {
-          var h;
+          var p;
           const c = {
             width: r.naturalWidth || 0,
             height: r.naturalHeight || 0
-          }, d = this.scaleMarkersForNewImage(
-            ((h = this.value) == null ? void 0 : h.markers) || [],
+          }, h = this.scaleMarkersForNewImage(
+            ((p = this.value) == null ? void 0 : p.markers) || [],
             e,
             c
           );
           this.value = {
             imageUrl: a,
-            markers: d
+            markers: h
           }, this.lastImageNaturalSize = c, this.history = [
-            JSON.parse(JSON.stringify(d))
+            JSON.parse(JSON.stringify(h))
           ], this.historyIndex = 0, this.updateUndoRedoButtons(), this.updateMainDisplay(), this.isPopoverOpen && this.refreshPopoverContent(), this.triggerChange();
         }, r.onerror = () => {
           this.showError("Failed to read image file.");
@@ -3870,7 +3872,7 @@ const gt = `
       );
       return;
     }
-    const e = this.imageElement.getBoundingClientRect(), i = (t.clientX - e.left) / e.width * 100, s = (t.clientY - e.top) / e.height * 100, n = this.value.markers.map((c) => c.index).sort((c, d) => c - d);
+    const e = this.imageElement.getBoundingClientRect(), i = (t.clientX - e.left) / e.width * 100, s = (t.clientY - e.top) / e.height * 100, n = this.value.markers.map((c) => c.index).sort((c, h) => c - h);
     let o = 1;
     for (const c of n)
       if (c === o)
@@ -4078,11 +4080,11 @@ const gt = `
       r.type = "button", r.className = "confirm-btn ghost", r.textContent = "Cancel";
       const c = document.createElement("button");
       c.type = "button", c.className = "confirm-btn danger", c.textContent = "Discard";
-      const d = (h) => {
-        s.remove(), this.confirmOverlayEl = null, this.confirmPromise = null, i(h);
+      const h = (p) => {
+        s.remove(), this.confirmOverlayEl = null, this.confirmPromise = null, i(p);
       };
-      r.addEventListener("click", () => d(!1)), c.addEventListener("click", () => d(!0)), s.addEventListener("click", (h) => {
-        h.target === s && d(!1);
+      r.addEventListener("click", () => h(!1)), c.addEventListener("click", () => h(!0)), s.addEventListener("click", (p) => {
+        p.target === s && h(!1);
       }), l.appendChild(r), l.appendChild(c), n.appendChild(o), n.appendChild(a), n.appendChild(l), s.appendChild(n), document.body.appendChild(s), setTimeout(() => {
         n.classList.add("visible");
       }, 10);
@@ -4317,7 +4319,7 @@ class Pe extends w {
     const s = document.createElement("input");
     s.type = "checkbox", s.checked = ((a = (o = this.props.options) == null ? void 0 : o.find((l) => l.value === this.value)) == null ? void 0 : a.status) ?? !1, this.getDataPropsPath() && s.setAttribute("data-test-id", this.getDataPropsPath()), s.addEventListener("change", () => {
       var r, c;
-      const l = ((c = (r = this.props.options) == null ? void 0 : r.find((d) => d.status === s.checked)) == null ? void 0 : c.value) ?? "";
+      const l = ((c = (r = this.props.options) == null ? void 0 : r.find((h) => h.status === s.checked)) == null ? void 0 : c.value) ?? "";
       this.value = l, this.onChange && this.onChange(this.value), this.detectChangeCallback && this.detectChangeCallback(this.value);
     });
     const n = document.createElement("span");
@@ -4468,13 +4470,13 @@ class $e extends w {
       return;
     }
     const c = "...";
-    let d = 0, h = e.length, g = 0;
-    for (; d <= h; ) {
-      const m = Math.floor((d + h) / 2), u = e.slice(0, m).trimEnd() + c;
-      this.measureTextWidth(u, i) <= l ? (g = m, d = m + 1) : h = m - 1;
+    let h = 0, p = e.length, g = 0;
+    for (; h <= p; ) {
+      const m = Math.floor((h + p) / 2), u = e.slice(0, m).trimEnd() + c;
+      this.measureTextWidth(u, i) <= l ? (g = m, h = m + 1) : p = m - 1;
     }
-    const f = e.slice(0, g).trimEnd() + c;
-    t.placeholder = f;
+    const C = e.slice(0, g).trimEnd() + c;
+    t.placeholder = C;
   }
   autosizeTextarea(t, e = 3) {
     t.style.height = "auto";
@@ -5044,7 +5046,7 @@ export {
   j as GradientSetting,
   Fe as HeaderTypographySettingSet,
   ce as HeightSetting,
-  Ne as HtmlSetting,
+  Ie as HtmlSetting,
   vt as ImageMapSetting,
   ze as ImageSettingSet,
   He as MarginBottomSetting,
@@ -5063,7 +5065,7 @@ export {
   Pe as Toggle,
   lt as UploadSetting,
   de as WidthSetting,
-  Ie as asSettingGroupWithSettings,
+  Ne as asSettingGroupWithSettings,
   Gt as createSettingGroup,
   Me as createTabSettingGroup,
   F as isSetting,