builder-settings-types 0.0.91 → 0.0.93

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

@@ -1,14 +1,14 @@
 const R = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
-let I = (h = 21) => {
-  let t = "", e = crypto.getRandomValues(new Uint8Array(h |= 0));
-  for (; h--; )
-    t += R[e[h] & 63];
+let I = (c = 21) => {
+  let t = "", e = crypto.getRandomValues(new Uint8Array(c |= 0));
+  for (; c--; )
+    t += R[e[c] & 63];
   return t;
 };
-function B(h, t) {
-  for (const e in h)
-    if (h.hasOwnProperty(e)) {
-      const i = h[e];
+function B(c, t) {
+  for (const e in c)
+    if (c.hasOwnProperty(e)) {
+      const i = c[e];
       t(e, i);
     }
 }
@@ -78,42 +78,42 @@ const x = class x {
         </svg>
       `, r.title = this.description, s.appendChild(r);
     }
-    const o = document.createElement("span");
-    o.className = "setting-group-arrow", o.innerHTML = `
+    const a = document.createElement("span");
+    a.className = "setting-group-arrow", a.innerHTML = `
       <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>
-    `, this.isCollapsed && o.classList.add("rotated"), s.appendChild(o);
-    const a = document.createElement("div");
-    if (a.className = "setting-group-content", this.isCollapsed && (a.classList.add("collapsed"), e.classList.add("collapsed-view"), o.classList.add("rotated"), t.classList.add("collapsed")), this.isMain && a.classList.add("main-content"), this.description && !this.isCollapsed) {
+    `, this.isCollapsed && a.classList.add("rotated"), s.appendChild(a);
+    const o = document.createElement("div");
+    if (o.className = "setting-group-content", this.isCollapsed && (o.classList.add("collapsed"), e.classList.add("collapsed-view"), a.classList.add("rotated"), t.classList.add("collapsed")), this.isMain && o.classList.add("main-content"), this.description && !this.isCollapsed) {
       const r = document.createElement("div");
-      r.className = "setting-group-description", r.textContent = this.description, a.appendChild(r);
+      r.className = "setting-group-description", r.textContent = this.description, o.appendChild(r);
     }
     const l = () => {
-      this.isCollapsed = !this.isCollapsed, a.classList.toggle("collapsed"), e.classList.toggle("collapsed-view"), o.classList.toggle("rotated"), t.classList.toggle("collapsed", this.isCollapsed), e.setAttribute(
+      this.isCollapsed = !this.isCollapsed, o.classList.toggle("collapsed"), e.classList.toggle("collapsed-view"), a.classList.toggle("rotated"), t.classList.toggle("collapsed", this.isCollapsed), e.setAttribute(
         "aria-expanded",
         (!this.isCollapsed).toString()
       );
-      const r = a.querySelector(
+      const r = o.querySelector(
         ".setting-group-description"
       ), u = s.querySelector(".info-marker");
       if (this.description)
         if (this.isCollapsed) {
           if (r && r.remove(), !u) {
-            const d = document.createElement("span");
-            d.className = "info-marker", d.innerHTML = `
+            const p = document.createElement("span");
+            p.className = "info-marker", p.innerHTML = `
               <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M8 5.33333V8M8 10.6667H8.00667M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8Z" 
                   stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
               </svg>
-            `, d.title = this.description, s.insertBefore(d, o);
+            `, p.title = this.description, s.insertBefore(p, a);
           }
         } else {
           if (!r) {
-            const d = document.createElement("div");
-            d.className = "setting-group-description", d.textContent = this.description, a.insertBefore(
-              d,
-              a.firstChild
+            const p = document.createElement("div");
+            p.className = "setting-group-description", p.textContent = this.description, o.insertBefore(
+              p,
+              o.firstChild
             );
           }
           u && u.remove();
@@ -125,13 +125,13 @@ const x = class x {
       for (const r in this.settings)
         if (this.settings.hasOwnProperty(r)) {
           const u = this.settings[r];
-          a.appendChild(u.draw());
+          o.appendChild(u.draw());
         }
     } else {
       const r = document.createElement("div");
-      r.className = "setting-group-empty", r.textContent = "No settings in this group", a.appendChild(r);
+      r.className = "setting-group-empty", r.textContent = "No settings in this group", o.appendChild(r);
     }
-    return e.appendChild(i), e.appendChild(s), t.appendChild(e), t.appendChild(a), this.elementRef = t, t;
+    return e.appendChild(i), e.appendChild(s), t.appendChild(e), t.appendChild(o), this.elementRef = t, t;
   }
   collapse() {
     if (!this.elementRef || this.isCollapsed) return;
@@ -159,9 +159,9 @@ const x = class x {
   }
 };
 x.hiddenElements = /* @__PURE__ */ new Set();
-let f = x;
-function W(h) {
-  switch (h) {
+let v = x;
+function W(c) {
+  switch (c) {
     case "number":
       return 0;
     case "text":
@@ -178,7 +178,7 @@ function W(h) {
       return "";
   }
 }
-class m {
+class C {
   constructor(t = {}) {
     this.props = t, this.id = t.id || I(), this.value = this.props.default, this.title = t.title || "";
   }
@@ -195,45 +195,45 @@ class m {
     t = { ...this.props.inputProps, ...t };
     const e = document.createElement("div");
     if (e.className = t.wrapperClassName || "", t.title || t.icon) {
-      const o = document.createElement("div");
-      if (o.className = "icon-container", t.icon) {
-        const a = this.createIcon(t.icon, t.iconClassName);
-        o.appendChild(a);
+      const a = document.createElement("div");
+      if (a.className = "icon-container", t.icon) {
+        const o = this.createIcon(t.icon, t.iconClassName);
+        a.appendChild(o);
       }
       if (t.title) {
-        const a = this.createLabel(t.title, t.labelClassName);
-        o.appendChild(a);
+        const o = this.createLabel(t.title, t.labelClassName);
+        a.appendChild(o);
       }
-      e.appendChild(o);
+      e.appendChild(a);
     }
     const i = document.createElement("div");
     i.className = t.wrapperClassName || "";
     const n = document.createElement("input");
     this.inputEl = n, n.value = String(t.value || W(t.inputType)), n.type = t.inputType, n.placeholder = t.placeholder || "", n.className = t.inputClassName || "";
-    const s = (o) => {
-      const a = o.target;
-      let l = a.value;
+    const s = (a) => {
+      const o = a.target;
+      let l = o.value;
       switch (t.inputType) {
         case "number":
-          l = Number(a.value);
+          l = Number(o.value);
           break;
         case "color":
-          l = a.value;
+          l = o.value;
           break;
         case "date":
-          l = a.value;
+          l = o.value;
           break;
         case "select":
-          l = a.value;
+          l = o.value;
           break;
         case "text":
-          l = a.value;
+          l = o.value;
           break;
         case "button":
-          l = a.value;
+          l = o.value;
           break;
         default:
-          l = a.value;
+          l = o.value;
       }
       this.value = l, this.onChange && this.onChange(this.value), this.props.detectChange && this.props.detectChange(this.value);
     };
@@ -248,7 +248,7 @@ class m {
     return i.className = "input-icon " + (e || ""), i.innerHTML = t, i;
   }
 }
-class H extends m {
+class H extends C {
   constructor(t = {}) {
     super(t), this.inputType = "text", t.onChange && this.setOnChange(t.onChange);
   }
@@ -275,7 +275,7 @@ class S extends H {
       ...t,
       icon: t.icon || O,
       title: t.title || "Color"
-    }), this.inputType = "color";
+    }), this.inputType = "color", this.detectChange = t.detectChange;
   }
   hexToRgb(t) {
     t = t.replace("#", "");
@@ -283,11 +283,11 @@ class S extends H {
     return `${e}, ${i}, ${n}`;
   }
   rgbToHex(t) {
-    const [e, i, n] = t.split(",").map((o) => parseInt(o.trim()));
+    const [e, i, n] = t.split(",").map((a) => parseInt(a.trim()));
     if (isNaN(e) || isNaN(i) || isNaN(n)) return "#000000";
-    const s = (o) => {
-      const a = o.toString(16);
-      return a.length === 1 ? "0" + a : a;
+    const s = (a) => {
+      const o = a.toString(16);
+      return o.length === 1 ? "0" + o : o;
     };
     return `#${s(e)}${s(i)}${s(n)}`;
   }
@@ -300,44 +300,48 @@ class S extends H {
     e.appendChild(i), e.appendChild(n);
     const s = document.createElement("div");
     s.className = "color-input-wrapper";
-    const o = (d) => {
-      const g = d.value.split(",").map((N) => parseInt(N.trim()));
+    const a = (p) => {
+      const g = p.value.split(",").map((N) => parseInt(N.trim()));
       if (g.length !== 3 || g.some(isNaN))
-        return d.style.border = "1px solid red", !1;
-      const [p, C, b] = g, L = p >= 0 && p <= 255 && C >= 0 && C <= 255 && b >= 0 && b <= 255;
-      return d.style.border = L ? "" : "1px solid red", L;
-    }, a = document.createElement("div");
-    a.className = "color-preview", a.style.backgroundColor = this.value ? `rgb(${this.value})` : "";
+        return p.style.border = "1px solid red", !1;
+      const [d, m, f] = g, L = d >= 0 && d <= 255 && m >= 0 && m <= 255 && f >= 0 && f <= 255;
+      return p.style.border = L ? "" : "1px solid red", L;
+    }, o = document.createElement("div");
+    o.className = "color-preview", o.style.backgroundColor = this.value ? `rgb(${this.value})` : "";
     const l = this.createInput({
       value: this.value,
       inputType: "text",
       inputClassName: "color-text-input"
-    }), c = l.querySelector("input"), r = this.createInput({
+    }), h = l.querySelector("input"), r = this.createInput({
       value: this.value ? this.rgbToHex(this.value) : "",
       inputType: this.inputType,
       inputClassName: "color-picker"
     }), u = r.querySelector("input");
-    return c.oninput = (d) => {
-      var p;
-      let g = d.target.value.trim();
-      o(c) && (this.value = g, (p = this.onChange) == null || p.call(this, g), u.value = this.rgbToHex(g), a.style.backgroundColor = `rgb(${g})`);
-    }, u.oninput = (d) => {
-      var C;
-      const g = d.target.value, p = this.hexToRgb(g);
-      this.value = p, (C = this.onChange) == null || C.call(this, p), c.value = p, a.style.backgroundColor = `rgb(${p})`;
-    }, s.appendChild(a), s.appendChild(r), s.appendChild(l), t.appendChild(e), t.appendChild(s), this.value && (c.value = this.value, u.value = this.rgbToHex(this.value), a.style.backgroundColor = `rgb(${this.value})`), t;
+    return h.oninput = (p) => {
+      var d;
+      let g = p.target.value.trim();
+      a(h) && (this.value = g, (d = this.onChange) == null || d.call(this, g), u.value = this.rgbToHex(g), o.style.backgroundColor = `rgb(${g})`);
+    }, u.oninput = (p) => {
+      var m, f;
+      const g = p.target.value, d = this.hexToRgb(g);
+      this.value = d, (m = this.onChange) == null || m.call(this, d), (f = this.detectChange) == null || f.call(this, d), h.value = d, o.style.backgroundColor = `rgb(${d})`;
+    }, u.onchange = (p) => {
+      var m, f;
+      const g = p.target.value, d = this.hexToRgb(g);
+      this.value = d, (m = this.onChange) == null || m.call(this, d), (f = this.detectChange) == null || f.call(this, d), h.value = d, o.style.backgroundColor = `rgb(${d})`;
+    }, s.appendChild(o), s.appendChild(r), s.appendChild(l), t.appendChild(e), t.appendChild(s), this.value && (h.value = this.value, u.value = this.rgbToHex(this.value), o.style.backgroundColor = `rgb(${this.value})`), t;
   }
 }
-class v extends m {
+class w extends C {
   constructor(t = {}) {
     super(t), this.inputType = "number";
   }
   draw() {
     const t = (s) => {
       this.props.minValue !== void 0 && (s.min = String(this.props.minValue)), this.props.maxValue !== void 0 && (s.max = String(this.props.maxValue)), this.props.className && s.classList.add(this.props.className), s.addEventListener("input", () => {
-        const o = this.props.minValue ?? Number.MIN_SAFE_INTEGER, a = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
+        const a = this.props.minValue ?? Number.MIN_SAFE_INTEGER, o = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
         let l = Number(s.value);
-        l < o && (l = o), l > a && (l = a), s.value = String(l);
+        l < a && (l = a), l > o && (l = o), s.value = String(l);
       });
     }, e = this.createInput({
       value: this.value,
@@ -359,7 +363,7 @@ class v extends m {
     return n.className = "suffix-label", n.textContent = this.props.suffix, e.appendChild(n), e;
   }
 }
-class M extends v {
+class M extends w {
   constructor(t) {
     super({
       ...t,
@@ -383,7 +387,7 @@ const A = `
     <polyline points="6 9 12 15 18 9"></polyline>
   </svg>
 `;
-class V extends m {
+class T extends C {
   constructor(t = {}) {
     if (super(t), this.inputType = "select", this._options = [], this.isOpen = !1, this.selectedOptionIndex = null, this.optionsListEl = null, this.svgContainer = null, this.buttonEl = null, this.isLoading = !1, this.container = null, this.clickOutsideListener = null, t.options && (this._options = [...t.options]), t.getOptions && this._options.push(...t.getOptions()), t.getOptionsAsync && (this.isLoading = !0), this.value !== void 0) {
       const e = this._options.findIndex((i) => i.value === this.value);
@@ -399,12 +403,12 @@ class V extends m {
     if (t.classList.add("select-container"), this.container = t, this.props.icon || this.props.title) {
       const s = document.createElement("div");
       if (s.className = "icon-container", this.props.icon) {
-        const o = this.createIcon(this.props.icon);
-        s.appendChild(o);
+        const a = this.createIcon(this.props.icon);
+        s.appendChild(a);
       }
       if (this.props.title) {
-        const o = this.createLabel(this.props.title);
-        s.appendChild(o);
+        const a = this.createLabel(this.props.title);
+        s.appendChild(a);
       }
       t.appendChild(s);
     } else {
@@ -413,13 +417,13 @@ class V extends m {
     }
     const e = document.createElement("div");
     e.classList.add("select-button"), this.isLoading ? e.classList.add("loading") : e.textContent = this.selectedOptionIndex !== null ? this._options[this.selectedOptionIndex].name : this.props.placeholder || "Select an option", e.onclick = () => {
-      var s, o;
-      this.isLoading || (this.isOpen = !this.isOpen, (s = this.optionsListEl) == null || s.classList.toggle("open", this.isOpen), (o = this.svgContainer) == null || o.classList.toggle("open", this.isOpen));
+      var s, a;
+      this.isLoading || (this.isOpen = !this.isOpen, (s = this.optionsListEl) == null || s.classList.toggle("open", this.isOpen), (a = this.svgContainer) == null || a.classList.toggle("open", this.isOpen));
     }, t.appendChild(e), this.buttonEl = e;
     const i = document.createElement("ul");
-    i.classList.add("select-options"), this._options.forEach((s, o) => {
-      const a = this.createOption(s, o);
-      a.onclick = (l) => this.selectOption(l, o, e), i.appendChild(a);
+    i.classList.add("select-options"), this._options.forEach((s, a) => {
+      const o = this.createOption(s, a);
+      o.onclick = (l) => this.selectOption(l, a, e), i.appendChild(o);
     }), t.appendChild(i);
     const n = document.createElement("div");
     return n.classList.add("svg-container"), n.innerHTML = $, t.appendChild(n), this.optionsListEl = i, this.svgContainer = n, this.props.getOptionsAsync && (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((s) => {
@@ -427,15 +431,15 @@ class V extends m {
     }).catch((s) => {
       console.error("Failed to fetch async options:", s), this.isLoading = !1, this.updateButtonText("Failed to load options");
     })), this.clickOutsideListener && document.removeEventListener("click", this.clickOutsideListener), this.clickOutsideListener = (s) => {
-      var o, a;
-      this.isOpen && !t.contains(s.target) && (this.isOpen = !1, (o = this.optionsListEl) == null || o.classList.remove("open"), (a = this.svgContainer) == null || a.classList.remove("open"));
+      var a, o;
+      this.isOpen && !t.contains(s.target) && (this.isOpen = !1, (a = this.optionsListEl) == null || a.classList.remove("open"), (o = this.svgContainer) == null || o.classList.remove("open"));
     }, document.addEventListener("click", this.clickOutsideListener), t;
   }
   selectOption(t, e, i) {
-    var s, o, a;
+    var s, a, o;
     const n = this._options[e];
-    n && (this.value = n.value, (s = this.onChange) == null || s.call(this, this.value), this.selectedOptionIndex = e, this.isOpen = !1, i.textContent = n.name, (o = this.optionsListEl) == null || o.classList.remove("open"), (a = this.svgContainer) == null || a.classList.remove("open"), this.optionsListEl && this.optionsListEl.querySelectorAll(".select-option").forEach((c, r) => {
-      r === e ? c.classList.add("selected") : c.classList.remove("selected");
+    n && (this.value = n.value, (s = this.onChange) == null || s.call(this, this.value), this.selectedOptionIndex = e, this.isOpen = !1, i.textContent = n.name, (a = this.optionsListEl) == null || a.classList.remove("open"), (o = this.svgContainer) == null || o.classList.remove("open"), this.optionsListEl && this.optionsListEl.querySelectorAll(".select-option").forEach((h, r) => {
+      r === e ? h.classList.add("selected") : h.classList.remove("selected");
     }));
   }
   updateOptionsList() {
@@ -467,7 +471,7 @@ class V extends m {
     this.clickOutsideListener && (document.removeEventListener("click", this.clickOutsideListener), this.clickOutsideListener = null), super.destroy();
   }
 }
-class _ extends m {
+class _ extends C {
   constructor(t = {}) {
     super(t), this.inputType = "button", this.value || (this.value = "center");
   }
@@ -512,15 +516,15 @@ class _ extends m {
         `
       }
     ].forEach((s) => {
-      const o = document.createElement("button");
-      o.className = "align-option-button", o.innerHTML = s.icon, this.value === s.name && o.classList.add("selected"), o.addEventListener("click", () => {
-        var a;
-        i.querySelectorAll(".align-option-button").forEach((l) => l.classList.remove("selected")), o.classList.add("selected"), this.value = s.name, (a = this.onChange) == null || a.call(this, this.value);
-      }), i.appendChild(o);
+      const a = document.createElement("button");
+      a.className = "align-option-button", a.innerHTML = s.icon, this.value === s.name && a.classList.add("selected"), a.addEventListener("click", () => {
+        var o;
+        i.querySelectorAll(".align-option-button").forEach((l) => l.classList.remove("selected")), a.classList.add("selected"), this.value = s.name, (o = this.onChange) == null || o.call(this, this.value);
+      }), i.appendChild(a);
     }), t.appendChild(i), t;
   }
 }
-class nt extends m {
+class nt extends C {
   constructor(t) {
     super(t), this.inputType = "button";
   }
@@ -533,21 +537,21 @@ class nt extends m {
     return e.className = "button-setting-wrapper " + (this.props.wrapperClassName || ""), e.appendChild(t), e;
   }
 }
-class ot extends m {
+class at extends C {
   constructor(t = {}) {
     super(t), this.inputType = { width: "number", height: "number" }, this.aspectRatio = 1, this.isUpdating = !1;
     const e = t.width || 100, i = t.height || 100;
     this.value || (this.value = {
       width: e,
       height: i
-    }), this.minWidth = Math.max(1, t.minWidth || 1), this.maxWidth = t.maxWidth, this.minHeight = Math.max(1, t.minHeight || 1), this.maxHeight = t.maxHeight, this.locked = t.locked ?? !1, (!this.value.width || this.value.width < 1) && (this.value.width = 1), (!this.value.height || this.value.height < 1) && (this.value.height = 1), this.value.height > 0 && (this.aspectRatio = this.value.width / this.value.height), this.widthSetting = new v({
+    }), this.minWidth = Math.max(1, t.minWidth || 1), this.maxWidth = t.maxWidth, this.minHeight = Math.max(1, t.minHeight || 1), this.maxHeight = t.maxHeight, this.locked = t.locked ?? !1, (!this.value.width || this.value.width < 1) && (this.value.width = 1), (!this.value.height || this.value.height < 1) && (this.value.height = 1), this.value.height > 0 && (this.aspectRatio = this.value.width / this.value.height), this.widthSetting = new w({
       title: "Width",
       default: this.value.width,
       suffix: "px",
       minValue: this.minWidth,
       maxValue: this.maxWidth,
       icon: j
-    }), this.heightSetting = new v({
+    }), this.heightSetting = new w({
       title: "Height",
       default: this.value.height,
       suffix: "px",
@@ -621,8 +625,8 @@ class ot extends m {
     return s.className = "dimension-lock-icon", s.setAttribute("type", "button"), s.setAttribute("aria-pressed", String(this.locked)), s.setAttribute(
       "aria-label",
       this.locked ? "Unlock aspect ratio" : "Lock aspect ratio"
-    ), s.title = this.locked ? "Unlock aspect ratio" : "Lock aspect ratio", s.innerHTML = this.getLockSVG(this.locked), s.onclick = (o) => {
-      o.preventDefault(), this.toggleLock(s);
+    ), s.title = this.locked ? "Unlock aspect ratio" : "Lock aspect ratio", s.innerHTML = this.getLockSVG(this.locked), s.onclick = (a) => {
+      a.preventDefault(), this.toggleLock(s);
     }, n.appendChild(s), t.appendChild(e), t.appendChild(n), t.appendChild(i), t;
   }
   isLocked() {
@@ -653,7 +657,7 @@ const j = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBo
 <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
   <path d="M5 10.5L7.5 8M7.5 8L10 10.5M7.5 8V13.625M12.5 10.9643C13.2634 10.3338 13.75 9.37996 13.75 8.3125C13.75 6.41402 12.211 4.875 10.3125 4.875C10.1759 4.875 10.0482 4.80375 9.97882 4.68609C9.16379 3.30302 7.65902 2.375 5.9375 2.375C3.34867 2.375 1.25 4.47367 1.25 7.0625C1.25 8.35381 1.77215 9.52317 2.61684 10.371" stroke="#475467" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
-`, T = `
+`, V = `
 <svg width="91" height="71" viewBox="0 0 91 71" fill="none" xmlns="http://www.w3.org/2000/svg">
   <rect width="91" height="71" rx="4" fill="#F2F4F7"/>
   <path d="M37 31.5L39.5 29M39.5 29L42 31.5M39.5 29V34.625M44.5 31.9643C45.2634 31.3338 45.75 30.38 45.75 29.3125C45.75 27.414 44.211 25.875 42.3125 25.875C42.1759 25.875 42.0482 25.8037 41.9788 25.6861C41.1638 24.303 39.659 23.375 37.9375 23.375C35.3487 23.375 33.25 25.4737 33.25 28.0625C33.25 29.3538 33.7721 30.5232 34.6168 31.371" stroke="#475467" stroke-linecap="round" stroke-linejoin="round"/>
@@ -663,7 +667,7 @@ const j = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBo
   <path d="M8 3V2.6C8 2.03995 8 1.75992 7.89101 1.54601C7.79513 1.35785 7.64215 1.20487 7.45399 1.10899C7.24008 1 6.96005 1 6.4 1H5.6C5.03995 1 4.75992 1 4.54601 1.10899C4.35785 1.20487 4.20487 1.35785 4.10899 1.54601C4 1.75992 4 2.03995 4 2.6V3M5 5.75V8.25M7 5.75V8.25M1.5 3H10.5M9.5 3V8.6C9.5 9.44008 9.5 9.86012 9.33651 10.181C9.1927 10.4632 8.96323 10.6927 8.68099 10.8365C8.36012 11 7.94008 11 7.1 11H4.9C4.05992 11 3.63988 11 3.31901 10.8365C3.03677 10.6927 2.8073 10.4632 2.66349 10.181C2.5 9.86012 2.5 9.44008 2.5 8.6V3" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
 `;
-class F extends m {
+class F extends C {
   constructor(t = {}) {
     super(t), this.inputType = "button", this.previewWrapper = null, this.previewEl = null, this.emptyStateEl = null, !this.value && t.defaultUrl && t.defaultUrl !== "" && (this.value = t.defaultUrl);
   }
@@ -685,71 +689,71 @@ class F extends m {
     t.className = "upload-setting-wrapper";
     const e = !!(this.props.title || this.props.icon);
     if (e || t.classList.add("no-label"), e) {
-      const c = document.createElement("div");
-      if (c.className = "icon-title-container", this.props.icon) {
+      const h = document.createElement("div");
+      if (h.className = "icon-title-container", this.props.icon) {
         const r = this.createIcon(this.props.icon);
-        c.appendChild(r);
+        h.appendChild(r);
       }
       if (this.props.title) {
         const r = this.createLabel(this.props.title);
-        c.appendChild(r);
+        h.appendChild(r);
       }
-      t.appendChild(c);
+      t.appendChild(h);
     }
     const i = document.createElement("div");
     i.className = "preview-button-container";
     const n = this.value && this.value !== "";
     n || i.classList.add("no-image");
     const s = document.createElement("div");
-    s.className = "preview-placeholder", s.innerHTML = T, this.previewWrapper = document.createElement("div"), this.previewWrapper.className = "preview-wrapper", this.emptyStateEl = document.createElement("div"), this.emptyStateEl.className = "empty-state", this.emptyStateEl.innerHTML = T, this.previewEl = document.createElement("img"), this.previewEl.className = "upload-preview";
-    const o = document.createElement("button");
-    o.className = "delete-button", o.type = "button", o.title = "Delete image", o.innerHTML = q, this.previewWrapper.appendChild(this.emptyStateEl), this.previewWrapper.appendChild(this.previewEl), this.previewWrapper.appendChild(o);
+    s.className = "preview-placeholder", s.innerHTML = V, this.previewWrapper = document.createElement("div"), this.previewWrapper.className = "preview-wrapper", this.emptyStateEl = document.createElement("div"), this.emptyStateEl.className = "empty-state", this.emptyStateEl.innerHTML = V, this.previewEl = document.createElement("img"), this.previewEl.className = "upload-preview";
     const a = document.createElement("button");
-    a.className = "upload-button", a.innerHTML = `
+    a.className = "delete-button", a.type = "button", a.title = "Delete image", a.innerHTML = q, this.previewWrapper.appendChild(this.emptyStateEl), this.previewWrapper.appendChild(this.previewEl), this.previewWrapper.appendChild(a);
+    const o = document.createElement("button");
+    o.className = "upload-button", o.innerHTML = `
       <span class="upload-icon">${y}</span>
       <span class="upload-label">Upload</span>
     `;
     const l = document.createElement("input");
-    return l.type = "file", l.accept = "image/*", l.style.display = "none", i.appendChild(s), i.appendChild(this.previewWrapper), i.appendChild(a), t.appendChild(i), t.appendChild(l), n ? this.updatePreviewState(this.value) : this.updatePreviewState(null), o.onclick = (c) => {
+    return l.type = "file", l.accept = "image/*", l.style.display = "none", i.appendChild(s), i.appendChild(this.previewWrapper), i.appendChild(o), t.appendChild(i), t.appendChild(l), n ? this.updatePreviewState(this.value) : this.updatePreviewState(null), a.onclick = (h) => {
       var r;
-      c.stopPropagation(), this.value = "", this.updatePreviewState(null), (r = this.onChange) == null || r.call(this, "");
-    }, a.onclick = () => {
+      h.stopPropagation(), this.value = "", this.updatePreviewState(null), (r = this.onChange) == null || r.call(this, "");
+    }, o.onclick = () => {
       l.click();
     }, l.onchange = async () => {
-      var r, u, d;
-      const c = (r = l.files) == null ? void 0 : r[0];
-      if (c)
+      var r, u, p;
+      const h = (r = l.files) == null ? void 0 : r[0];
+      if (h)
         try {
-          a.classList.add("loading"), a.disabled = !0;
-          const g = new FormData(), p = this.props.formFieldName || "file";
-          g.append(p, c, c.name);
-          const C = this.props.uploadUrl;
-          if (!C)
+          o.classList.add("loading"), o.disabled = !0;
+          const g = new FormData(), d = this.props.formFieldName || "file";
+          g.append(d, h, h.name);
+          const m = this.props.uploadUrl;
+          if (!m)
             throw new Error("No uploadUrl provided to UploadSetting.");
-          const b = this.props.requestMethod || "POST", L = { ...this.props.requestHeaders || {} }, E = await (await fetch(C, {
-            method: b,
+          const f = this.props.requestMethod || "POST", L = { ...this.props.requestHeaders || {} }, E = await (await fetch(m, {
+            method: f,
             body: g,
             headers: L
           })).json();
-          let w;
+          let b;
           if (this.props.parseResponse)
-            w = this.props.parseResponse(E);
-          else if (w = (u = E == null ? void 0 : E.data) == null ? void 0 : u.url, !w)
+            b = this.props.parseResponse(E);
+          else if (b = (u = E == null ? void 0 : E.data) == null ? void 0 : u.url, !b)
             throw new Error(
               "No URL found in response. Provide a parseResponse if needed."
             );
-          this.value = w, this.updatePreviewState(w), (d = this.onChange) == null || d.call(this, w);
+          this.value = b, this.updatePreviewState(b), (p = this.onChange) == null || p.call(this, b);
         } catch (g) {
           console.error("Error uploading file:", g), this.updatePreviewState(null);
         } finally {
-          a.classList.remove("loading"), a.disabled = !1;
+          o.classList.remove("loading"), o.disabled = !1;
         }
     }, t;
   }
 }
-class at extends m {
+class ot extends C {
   constructor(t = {}) {
-    super(t), this.inputType = "number", this.value = this.value ?? 100, this.numberSetting = new v({
+    super(t), this.inputType = "number", this.value = this.value ?? 100, this.numberSetting = new w({
       title: "Height",
       default: this.value,
       suffix: "px",
@@ -768,9 +772,9 @@ class at extends m {
 const z = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
   <path d="M9 14L9 5M9 14L6.75 12.5M9 14L11.25 12.5M9 5L6.75 6.5M9 5L11.25 6.5M15.75 2.75H2.25M15.75 16.25H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`;
-class lt extends m {
+class lt extends C {
   constructor(t = {}) {
-    super(t), this.inputType = "number", this.value = this.value ?? 100, this.numberSetting = new v({
+    super(t), this.inputType = "number", this.value = this.value ?? 100, this.numberSetting = new w({
       title: "Width",
       default: this.value,
       suffix: "px",
@@ -793,7 +797,7 @@ const U = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBo
     <polyline points="6 9 12 15 18 9"></polyline>
   </svg>
 `;
-class rt extends m {
+class rt extends C {
   constructor(t = {}) {
     super(t), this.inputType = "select", this._options = [], this.isOpen = !1, this.selectedOptionIndex = null, this.optionsListEl = null, this.svgContainer = null, this.buttonEl = null, this.isLoading = !1, this.container = null, this.hasInitializedOptions = !1, this.initializeOptions(t), t.default !== void 0 && (this.value = t.default, this.selectedOptionIndex = this._options.findIndex(
       (e) => JSON.stringify(e.value) === JSON.stringify(t.default)
@@ -818,34 +822,34 @@ class rt extends m {
       e.classList.add("has-label");
       const s = document.createElement("div");
       s.className = "select-label", s.textContent = this.props.title, e.appendChild(s);
-      const o = document.createElement("span");
-      o.className = "select-value", this.isLoading ? o.textContent = this.props.loadingText || "Loading options..." : o.textContent = this.selectedOptionIndex !== null ? this._options[this.selectedOptionIndex].name : "Select an option", e.appendChild(o);
+      const a = document.createElement("span");
+      a.className = "select-value", this.isLoading ? a.textContent = this.props.loadingText || "Loading options..." : a.textContent = this.selectedOptionIndex !== null ? this._options[this.selectedOptionIndex].name : "Select an option", e.appendChild(a);
     } else {
       const s = document.createElement("span");
       this.isLoading ? s.textContent = this.props.loadingText || "Loading options..." : s.textContent = this.selectedOptionIndex !== null ? this._options[this.selectedOptionIndex].name : "Select an option", e.appendChild(s);
     }
     e.onclick = () => {
-      var s, o;
-      this.isLoading || (this.isOpen = !this.isOpen, (s = this.optionsListEl) == null || s.classList.toggle("open", this.isOpen), (o = this.svgContainer) == null || o.classList.toggle("open", this.isOpen));
+      var s, a;
+      this.isLoading || (this.isOpen = !this.isOpen, (s = this.optionsListEl) == null || s.classList.toggle("open", this.isOpen), (a = this.svgContainer) == null || a.classList.toggle("open", this.isOpen));
     }, t.appendChild(e), this.buttonEl = e;
     const i = document.createElement("ul");
-    i.classList.add("select-api-options"), this._options.forEach((s, o) => {
-      const a = this.createOption(s, o);
-      a.onclick = (l) => this.selectApiOption(l, o, e), i.appendChild(a);
+    i.classList.add("select-api-options"), this._options.forEach((s, a) => {
+      const o = this.createOption(s, a);
+      o.onclick = (l) => this.selectApiOption(l, a, e), i.appendChild(o);
     }), t.appendChild(i);
     const n = document.createElement("div");
     return n.classList.add("svg-container"), n.innerHTML = D, t.appendChild(n), n.onclick = () => {
-      var s, o;
-      this.isLoading || (this.isOpen = !this.isOpen, (s = this.optionsListEl) == null || s.classList.toggle("open", this.isOpen), (o = this.svgContainer) == null || o.classList.toggle("open", this.isOpen));
+      var s, a;
+      this.isLoading || (this.isOpen = !this.isOpen, (s = this.optionsListEl) == null || s.classList.toggle("open", this.isOpen), (a = this.svgContainer) == null || a.classList.toggle("open", this.isOpen));
     }, this.optionsListEl = i, this.svgContainer = n, this.props.getOptionsAsync && !this.hasInitializedOptions ? (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((s) => {
       this._options.push(...s), this.isLoading = !1, this.value !== void 0 && this.selectedOptionIndex === null && (this.selectedOptionIndex = this._options.findIndex(
-        (o) => JSON.stringify(o.value) === JSON.stringify(this.value)
+        (a) => JSON.stringify(a.value) === JSON.stringify(this.value)
       )), this.updateOptionsList(), this.updateButtonText();
     }).catch((s) => {
       console.error("Failed to fetch async options:", s), this.isLoading = !1, this.updateButtonText("Failed to load options");
     })) : this.props.getOptionsAsync && this._options.length <= 1 && (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((s) => {
-      const o = new Set(this._options.map((l) => JSON.stringify(l.value))), a = s.filter((l) => !o.has(JSON.stringify(l.value)));
-      this._options.push(...a), this.isLoading = !1, this.value !== void 0 && this.selectedOptionIndex === null && (this.selectedOptionIndex = this._options.findIndex(
+      const a = new Set(this._options.map((l) => JSON.stringify(l.value))), o = s.filter((l) => !a.has(JSON.stringify(l.value)));
+      this._options.push(...o), this.isLoading = !1, this.value !== void 0 && this.selectedOptionIndex === null && (this.selectedOptionIndex = this._options.findIndex(
         (l) => JSON.stringify(l.value) === JSON.stringify(this.value)
       )), this.updateOptionsList(), this.updateButtonText();
     }).catch((s) => {
@@ -853,14 +857,14 @@ class rt extends m {
     })), t;
   }
   selectApiOption(t, e, i) {
-    var s, o;
+    var s, a;
     const n = this._options[e];
     if (n) {
-      const a = n.value;
-      this.value = a, this.onChange && this.onChange(a), this.detectChangeCallback && this.detectChangeCallback(a), this.selectedOptionIndex = e, this.isOpen = !1, this.updateButtonText(), (s = this.optionsListEl) == null || s.classList.remove("open"), (o = this.svgContainer) == null || o.classList.remove("open"), this.optionsListEl && this.optionsListEl.querySelectorAll(
+      const o = n.value;
+      this.value = o, this.onChange && this.onChange(o), this.detectChangeCallback && this.detectChangeCallback(o), this.selectedOptionIndex = e, this.isOpen = !1, this.updateButtonText(), (s = this.optionsListEl) == null || s.classList.remove("open"), (a = this.svgContainer) == null || a.classList.remove("open"), this.optionsListEl && this.optionsListEl.querySelectorAll(
         ".select-api-radio"
-      ).forEach((c, r) => {
-        c.checked = r === e;
+      ).forEach((h, r) => {
+        h.checked = r === e;
       });
     }
   }
@@ -886,17 +890,17 @@ class rt extends m {
     const e = this.buttonEl.querySelector(".select-value"), i = this.buttonEl.classList.contains("has-label"), n = this.buttonEl.querySelector(".select-label");
     if (this.isLoading) {
       this.buttonEl.classList.add("loading");
-      const o = this.props.loadingText || "Loading options...";
+      const a = this.props.loadingText || "Loading options...";
       if (e)
-        e.textContent = o;
+        e.textContent = a;
       else if (i && this.props.title && !n) {
         this.buttonEl.innerHTML = "";
-        const a = document.createElement("div");
-        a.className = "select-label", a.textContent = this.props.title, this.buttonEl.appendChild(a);
+        const o = document.createElement("div");
+        o.className = "select-label", o.textContent = this.props.title, this.buttonEl.appendChild(o);
         const l = document.createElement("span");
-        l.className = "select-value", l.textContent = o, this.buttonEl.appendChild(l);
+        l.className = "select-value", l.textContent = a, this.buttonEl.appendChild(l);
       } else
-        this.buttonEl.textContent = o;
+        this.buttonEl.textContent = a;
       return;
     }
     this.buttonEl.classList.remove("loading", "error");
@@ -905,10 +909,10 @@ class rt extends m {
       e.textContent = s;
     else if (i && this.props.title && !n) {
       this.buttonEl.innerHTML = "";
-      const o = document.createElement("div");
-      o.className = "select-label", o.textContent = this.props.title, this.buttonEl.appendChild(o);
-      const a = document.createElement("span");
-      a.className = "select-value", a.textContent = s, this.buttonEl.appendChild(a);
+      const a = document.createElement("div");
+      a.className = "select-label", a.textContent = this.props.title, this.buttonEl.appendChild(a);
+      const o = document.createElement("span");
+      o.className = "select-value", o.textContent = s, this.buttonEl.appendChild(o);
     } else
       this.buttonEl.textContent = s;
   }
@@ -916,7 +920,7 @@ class rt extends m {
     this.detectChangeCallback = t;
   }
 }
-class ht extends m {
+class ht extends C {
   constructor(t) {
     super(t), this.inputType = "text", this.value = t.default ?? !1;
   }
@@ -925,12 +929,12 @@ class ht extends m {
     t.className = "toggle-setting-container", this.props.icon && t.classList.add("toggle-with-icon");
     const e = document.createElement("div");
     if (e.className = "toggle-label", this.props.icon) {
-      const o = document.createElement("span");
-      o.className = "toggle-icon", o.innerHTML = this.props.icon, e.appendChild(o);
+      const a = document.createElement("span");
+      a.className = "toggle-icon", a.innerHTML = this.props.icon, e.appendChild(a);
     }
     if (this.props.title) {
-      const o = document.createElement("span");
-      o.textContent = this.props.title, e.appendChild(o);
+      const a = document.createElement("span");
+      a.textContent = this.props.title, e.appendChild(a);
     }
     t.appendChild(e);
     const i = document.createElement("label");
@@ -946,7 +950,7 @@ class ht extends m {
 const Z = `<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M1.25 7.5H1.2575M4.625 7.5H4.6325M11.375 7.5H11.3825M8 7.5H8.0075M14.75 7.5H14.7575M14.75 14.25V13.65C14.75 12.8099 14.75 12.3899 14.5865 12.069C14.4427 11.7868 14.2132 11.5573 13.931 11.4135C13.6101 11.25 13.1901 11.25 12.35 11.25H3.65C2.80992 11.25 2.38988 11.25 2.06901 11.4135C1.78677 11.5573 1.5573 11.7868 1.41349 12.069C1.25 12.3899 1.25 12.8099 1.25 13.65V14.25M14.75 0.75V1.35C14.75 2.19008 14.75 2.61012 14.5865 2.93099C14.4427 3.21323 14.2132 3.4427 13.931 3.58651C13.6101 3.75 13.1901 3.75 12.35 3.75H3.65C2.80992 3.75 2.38988 3.75 2.06901 3.58651C1.78677 3.4427 1.5573 3.21323 1.41349 2.93099C1.25 2.61012 1.25 2.19008 1.25 1.35V0.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`;
-class ct extends m {
+class ct extends C {
   constructor(t = {}) {
     super(t), this.inputType = "number", this.inputValues = {};
   }
@@ -984,31 +988,72 @@ class ct extends m {
     n.classList.add("gap-label-container");
     const s = document.createElement("div");
     s.classList.add("gap-setting-icon"), s.innerHTML = this.props.icon || Z, n.appendChild(s);
-    const o = document.createElement("label");
-    o.classList.add("gap-input-label"), o.textContent = t, n.appendChild(o), i.appendChild(n);
-    const a = (u) => {
+    const a = document.createElement("label");
+    a.classList.add("gap-input-label"), a.textContent = t, n.appendChild(a), i.appendChild(n);
+    const o = (u) => {
       this.props.minValue !== void 0 && (u.min = String(this.props.minValue)), this.props.maxValue !== void 0 && (u.max = String(this.props.maxValue)), this.props.className && u.classList.add(this.props.className), u.addEventListener("input", () => {
-        var C;
-        const d = this.props.minValue ?? 0, g = this.props.maxValue ?? 100;
-        let p = Number(u.value);
-        p < d && (p = d), p > g && (p = g), u.value = String(p), this.value = p, this.inputValues[t] = p, console.log(`Gap Setting (${t}): ${p}${this.props.suffix || ""}`), (C = this.onChange) == null || C.call(this, p);
+        var m;
+        const p = this.props.minValue ?? 0, g = this.props.maxValue ?? 100;
+        let d = Number(u.value);
+        d < p && (d = p), d > g && (d = g), u.value = String(d), this.value = d, this.inputValues[t] = d, console.log(`Gap Setting (${t}): ${d}${this.props.suffix || ""}`), (m = this.onChange) == null || m.call(this, d);
       });
     }, l = this.createInput({
       value: e,
       inputType: this.inputType,
       inputClassName: "gap-setting-input " + (this.props.inputClassName || ""),
       wrapperClassName: "gap-setting-inner-wrapper " + (this.props.wrapperClassName || ""),
-      inputCustomizer: a
+      inputCustomizer: o
     });
     if (!this.props.suffix || this.props.suffix === "none")
       return i.appendChild(l), i;
     l.classList.add("suffix-wrapper");
-    const c = l.querySelector("input.gap-setting-input");
-    c && (c.style.paddingRight = "35px");
+    const h = l.querySelector("input.gap-setting-input");
+    h && (h.style.paddingRight = "35px");
     const r = document.createElement("span");
     return r.className = "suffix-label", r.textContent = this.props.suffix, l.appendChild(r), i.appendChild(l), i;
   }
 }
+class dt extends C {
+  constructor(t) {
+    var e;
+    if (!t.tabs)
+      throw new Error("Tabs array is required for TabsSettings");
+    super(t), this.inputType = "tabs", this.tabs = [], this.activeTabId = "", this.tabsContainer = null, this.contentContainer = null, this.previousTabId = "", this.tabs = t.tabs, this.activeTabId = t.activeTabId || ((e = this.tabs[0]) == null ? void 0 : e.id) || "", this.previousTabId = this.activeTabId, t.onChange && this.setOnChange(t.onChange);
+  }
+  draw() {
+    const t = document.createElement("div");
+    t.classList.add("tabs-settings-container"), this.props.className && t.classList.add(this.props.className);
+    const e = document.createElement("div");
+    e.classList.add("tabs-header"), this.tabsContainer = e, this.tabs.forEach((n) => {
+      const s = document.createElement("button");
+      s.classList.add("tab-button"), n.id === this.activeTabId && s.classList.add("active"), s.textContent = n.label, s.onclick = () => this.handleTabClick(n.id), e.appendChild(s);
+    }), t.appendChild(e);
+    const i = document.createElement("div");
+    return i.classList.add("tab-content"), this.contentContainer = i, this.tabs.forEach((n) => {
+      const s = document.createElement("div");
+      s.classList.add("tab-panel"), n.id === this.activeTabId && s.classList.add("active"), n.content instanceof v ? s.appendChild(n.content.draw()) : s.appendChild(n.content), i.appendChild(s);
+    }), t.appendChild(i), t;
+  }
+  handleTabClick(t) {
+    var i, n;
+    if (t === this.activeTabId) return;
+    this.previousTabId = this.activeTabId, this.activeTabId = t;
+    const e = (i = this.tabsContainer) == null ? void 0 : i.querySelectorAll(".tab-button");
+    if (e == null || e.forEach((s) => {
+      var a;
+      s instanceof HTMLElement && s.classList.toggle("active", s.textContent === ((a = this.tabs.find((o) => o.id === t)) == null ? void 0 : a.label));
+    }), this.contentContainer) {
+      const s = this.contentContainer.querySelectorAll(".tab-panel"), a = this.tabs.findIndex((l) => l.id === this.previousTabId), o = this.tabs.findIndex((l) => l.id === t);
+      s.forEach((l, h) => {
+        l instanceof HTMLElement && (h === o ? (l.classList.add("active"), l.classList.remove("slide-left", "slide-right")) : h === a ? (l.classList.remove("active"), l.classList.add(o > a ? "slide-left" : "slide-right")) : l.classList.remove("active", "slide-left", "slide-right"));
+      });
+    }
+    (n = this.onChangeCallback) == null || n.call(this, t);
+  }
+  setOnChange(t) {
+    return this.onChangeCallback = t, this;
+  }
+}
 const J = `
 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
   <path d="M5.625 9.5H5.6325M12.375 9.5H12.3825M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M2.25 6.35L2.25 12.65C2.25 13.9101 2.25 14.5402 2.49524 15.0215C2.71095 15.4448 3.05516 15.789 3.47852 16.0048C3.95982 16.25 4.58988 16.25 5.85 16.25H12.15C13.4101 16.25 14.0402 16.25 14.5215 16.0048C14.9448 15.789 15.289 15.4448 15.5048 15.0215C15.75 14.5402 15.75 13.9101 15.75 12.65V6.35C15.75 5.08988 15.75 4.45982 15.5048 3.97852C15.289 3.55516 14.9448 3.21095 14.5215 2.99524C14.0402 2.75 13.4101 2.75 12.15 2.75L5.85 2.75C4.58988 2.75 3.95982 2.75 3.47852 2.99524C3.05516 3.21095 2.71095 3.55516 2.49524 3.97852C2.25 4.45982 2.25 5.08988 2.25 6.35Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
@@ -1018,14 +1063,14 @@ const J = `
   <path d="M6 2.75H5.85C4.58988 2.75 3.95982 2.75 3.47852 2.99524C3.05516 3.21095 2.71095 3.55516 2.49524 3.97852C2.25 4.45982 2.25 5.08988 2.25 6.35V6.5M6 16.25H5.85C4.58988 16.25 3.95982 16.25 3.47852 16.0048C3.05516 15.789 2.71095 15.4448 2.49524 15.0215C2.25 14.5402 2.25 13.9101 2.25 12.65V12.5M15.75 6.5V6.35C15.75 5.08988 15.75 4.45982 15.5048 3.97852C15.289 3.55516 14.9448 3.21095 14.5215 2.99524C14.0402 2.75 13.4101 2.75 12.15 2.75H12M15.75 12.5V12.65C15.75 13.9101 15.75 14.5402 15.5048 15.0215C15.289 15.4448 14.9448 15.789 14.5215 16.0048C14.0402 16.25 13.4101 16.25 12.15 16.25H12" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
 `;
-class dt extends f {
+class pt extends v {
   constructor(t) {
     super({
       title: "Border",
       collapsed: t == null ? void 0 : t.collapsed,
       hideCondition: t == null ? void 0 : t.hideCondition,
       settings: {
-        size: new v({
+        size: new w({
           title: "Size",
           icon: P,
           default: (t == null ? void 0 : t.size) ?? 0,
@@ -1039,7 +1084,7 @@ class dt extends f {
           minValue: 0,
           maxValue: 100
         }),
-        radius: new v({
+        radius: new w({
           title: "Radius",
           icon: J,
           default: (t == null ? void 0 : t.radius) ?? 12,
@@ -1074,7 +1119,7 @@ const X = `
   <path d="M6 5.75H12M9 5.75V13.25M5.85 16.25H12.15C13.4101 16.25 14.0402 16.25 14.5215 16.0048C14.9448 15.789 15.289 15.4448 15.5048 15.0215C15.75 14.5402 15.75 13.9101 15.75 12.65V6.35C15.75 5.08988 15.75 4.45982 15.5048 3.97852C15.289 3.55516 14.9448 3.21095 14.5215 2.99524C14.0402 2.75 13.4101 2.75 12.15 2.75H5.85C4.58988 2.75 3.95982 2.75 3.47852 2.99524C3.05516 3.21095 2.71095 3.55516 2.49524 3.97852C2.25 4.45982 2.25 5.08988 2.25 6.35V12.65C2.25 13.9101 2.25 14.5402 2.49524 15.0215C2.71095 15.4448 3.05516 15.789 3.47852 16.0048C3.95982 16.25 4.58988 16.25 5.85 16.25Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
 `;
-class pt extends f {
+class ut extends v {
   constructor(t = {}) {
     super({
       title: t.title || "Typography",
@@ -1087,7 +1132,7 @@ class pt extends f {
         opacity: new M({
           default: t.colorOpacityDefault ?? 100
         }),
-        fontFamily: new V({
+        fontFamily: new T({
           title: "Font",
           icon: X,
           default: t.fontFamilyDefault ?? "Satoshi",
@@ -1099,7 +1144,7 @@ class pt extends f {
           getOptions: t.fontFamilyGetOptions,
           getOptionsAsync: t.fontFamilyGetOptionsAsync
         }),
-        fontWeight: new V({
+        fontWeight: new T({
           title: "Weight",
           icon: Q,
           default: t.fontWeightDefault ?? "400",
@@ -1111,7 +1156,7 @@ class pt extends f {
           getOptions: t.fontWeightGetOptions,
           getOptionsAsync: t.fontWeightGetOptionsAsync
         }),
-        fontSize: new v({
+        fontSize: new w({
           title: "Size",
           icon: Y,
           default: t.fontSizeDefault ?? 12,
@@ -1125,18 +1170,18 @@ class pt extends f {
     });
   }
   getCssCode() {
-    const t = this.settings.color.value ?? "#000000", e = this.settings.opacity.value ?? 100, i = this.settings.fontFamily.value ?? "Satoshi", n = this.settings.fontWeight.value ?? "bold", s = this.settings.fontSize.value ?? 12, o = this.settings.align.value ?? "left";
+    const t = this.settings.color.value ?? "#000000", e = this.settings.opacity.value ?? 100, i = this.settings.fontFamily.value ?? "Satoshi", n = this.settings.fontWeight.value ?? "bold", s = this.settings.fontSize.value ?? 12, a = this.settings.align.value ?? "left";
     return `
 				color: ${t};
 				opacity: ${e / 100};  
 				font-family: ${i};
 				font-weight: ${n};
 				font-size: ${s}px;
-				text-align: ${o};
+				text-align: ${a};
 			`;
   }
 }
-class k extends m {
+class k extends C {
   constructor(t) {
     super({
       ...t,
@@ -1144,11 +1189,11 @@ class k extends m {
     }), this.inputType = "number", this.value = t.default !== void 0 ? t.default : "auto";
   }
   draw() {
-    const t = this.value === "auto" ? "text" : "number", e = (a) => {
-      this.value !== "auto" && (this.props.minValue !== void 0 && (a.min = String(this.props.minValue)), this.props.maxValue !== void 0 && (a.max = String(this.props.maxValue)), this.props.className && a.classList.add(this.props.className), a.addEventListener("input", () => {
-        const l = this.props.minValue ?? Number.MIN_SAFE_INTEGER, c = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
-        let r = Number(a.value);
-        r < l && (r = l), r > c && (r = c), a.value = String(r);
+    const t = this.value === "auto" ? "text" : "number", e = (o) => {
+      this.value !== "auto" && (this.props.minValue !== void 0 && (o.min = String(this.props.minValue)), this.props.maxValue !== void 0 && (o.max = String(this.props.maxValue)), this.props.className && o.classList.add(this.props.className), o.addEventListener("input", () => {
+        const l = this.props.minValue ?? Number.MIN_SAFE_INTEGER, h = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
+        let r = Number(o.value);
+        r < l && (r = l), r > h && (r = h), o.value = String(r);
       }));
     }, i = this.createInput({
       value: this.value,
@@ -1169,20 +1214,20 @@ class k extends m {
     n && (n.style.paddingRight = "35px");
     const s = document.createElement("span");
     s.className = "suffix-label", s.textContent = this.props.suffix, i.appendChild(s);
-    const o = i.querySelector("input");
-    return o && (o.oninput = (a) => {
-      const l = a.target.value.trim();
+    const a = i.querySelector("input");
+    return a && (a.oninput = (o) => {
+      const l = o.target.value.trim();
       if (l.toLowerCase() === "auto")
         this.value = "auto";
       else {
-        const c = Number(l);
-        isNaN(c) || (this.value = c);
+        const h = Number(l);
+        isNaN(h) || (this.value = h);
       }
       this.onChange && this.onChange(this.value);
     }), i;
   }
 }
-class ut extends f {
+class gt extends v {
   constructor(t) {
     super({
       title: "Margins",
@@ -1235,7 +1280,7 @@ const K = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBo
 </svg>`, it = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
   <path d="M5.625 2.75H5.6325M5.625 9.5H5.6325M5.625 16.25H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M12.375 16.25H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 16.25H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 2.75H15.7575M15.75 9.5H15.7575M15.75 16.25H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M2.25 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`;
-class st extends f {
+class st extends v {
   constructor(t, e, i) {
     super({
       title: `Tab ${t + 1}`,
@@ -1270,16 +1315,16 @@ class st extends f {
           <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path>
         </svg>
       `, s.onclick = () => {
-        var a;
-        return (a = this.onDeleteCallback) == null ? void 0 : a.call(this);
+        var o;
+        return (o = this.onDeleteCallback) == null ? void 0 : o.call(this);
       }, n.appendChild(s);
-      const o = i.querySelector("h3");
-      o ? o.insertAdjacentElement("afterend", n) : i.appendChild(n);
+      const a = i.querySelector("h3");
+      a ? a.insertAdjacentElement("afterend", n) : i.appendChild(n);
     }
     return t;
   }
 }
-class gt extends f {
+class mt extends v {
   // Store the rendered element
   constructor(t) {
     super({
@@ -1348,7 +1393,7 @@ class gt extends f {
     }));
   }
 }
-class mt extends f {
+class Ct extends v {
   /**
    * Constructs a new BackgroundSettingSet.
    *
@@ -1401,10 +1446,10 @@ class mt extends f {
   draw() {
     const t = super.draw(), e = t.querySelector(".setting-group-content");
     if (!e) return t;
-    const i = Array.from(e.children), [n, s, o, a] = i;
+    const i = Array.from(e.children), [n, s, a, o] = i;
     e.innerHTML = "", e.appendChild(n), e.appendChild(s);
     const l = document.createElement("div");
-    return l.className = "bgset-or-label", l.textContent = "OR", e.appendChild(l), e.appendChild(o), e.appendChild(a), t;
+    return l.className = "bgset-or-label", l.textContent = "OR", e.appendChild(l), e.appendChild(a), e.appendChild(o), t;
   }
   /**
    * Helper method to generate CSS based on the current settings.
@@ -1424,23 +1469,24 @@ class mt extends f {
 }
 export {
   _ as AlignSetting,
-  mt as BackgroundSettingSet,
-  dt as BorderSettingSet,
+  Ct as BackgroundSettingSet,
+  pt as BorderSettingSet,
   nt as ButtonSetting,
   S as ColorSetting,
-  ot as DimensionSetting,
+  at as DimensionSetting,
   ct as GapSetting,
-  pt as HeaderTypographySettingSet,
-  at as HeightSetting,
-  ut as MarginSettingGroup,
-  v as NumberSetting,
+  ut as HeaderTypographySettingSet,
+  ot as HeightSetting,
+  gt as MarginSettingGroup,
+  w as NumberSetting,
   M as OpacitySetting,
   rt as SelectApiSettings,
-  V as SelectSetting,
-  m as Setting,
-  f as SettingGroup,
+  T as SelectSetting,
+  C as Setting,
+  v as SettingGroup,
   H as StringSetting,
-  gt as TabsContainerGroup,
+  mt as TabsContainerGroup,
+  dt as TabsSettings,
   ht as Toggle,
   F as UploadSetting,
   lt as WidthSetting,