builder-settings-types 0.0.92 → 0.0.94

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

@@ -1,20 +1,20 @@
-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];
+const B = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
+let I = (c = 21) => {
+  let t = "", e = crypto.getRandomValues(new Uint8Array(c |= 0));
+  for (; c--; )
+    t += B[e[c] & 63];
   return t;
 };
-function B(h, t) {
-  for (const e in h)
-    if (h.hasOwnProperty(e)) {
-      const i = h[e];
+function R(c, t) {
+  for (const e in c)
+    if (c.hasOwnProperty(e)) {
+      const i = c[e];
       t(e, i);
     }
 }
-const b = class b {
+const x = class x {
   constructor(t) {
-    this.elementRef = null, this.isHidden = !1, this.id = t.id || I(), this.title = t.title, this.settings = t.settings, this.description = t.description, this.icon = t.icon, this.isCollapsed = t.collapsed ?? !1, this.isMain = t.main ?? !1, this.hideCondition = t.hideCondition, Object.assign(this, t.settings);
+    this.elementRef = null, this.isHidden = !1, this.custom = !1, this.id = t.id || I(), this.title = t.title, this.settings = t.settings, this.description = t.description, this.icon = t.icon, this.isCollapsed = t.collapsed ?? !1, this.isMain = t.main ?? !1, this.custom = t.custom ?? !1, this.hideCondition = t.hideCondition, this.onBlur = t.onBlur, Object.assign(this, t.settings);
   }
   static hide() {
     this.hiddenElements.forEach((t) => {
@@ -27,12 +27,15 @@ const b = class b {
     });
   }
   setOnChange(t) {
-    return this.onChange = t, B(this.settings, (e, i) => {
+    return this.onChange = t, R(this.settings, (e, i) => {
       i.setOnChange((n) => {
         t(n), this.updateVisibility();
       });
     }), this;
   }
+  setOnBlur(t) {
+    return this.onBlur = t, this;
+  }
   hide() {
     this.elementRef && (this.elementRef.style.display = "none", this.isHidden = !0);
   }
@@ -45,17 +48,17 @@ const b = class b {
       for (const i in this.settings)
         if (this.settings.hasOwnProperty(i)) {
           const n = this.settings[i];
-          n instanceof b ? e[i] = n.getValues() : e[i] = n.value;
+          n instanceof x ? e[i] = n.getValues() : e[i] = n.value;
         }
       return e;
     } else {
       const e = this.settings[t];
-      return e ? e instanceof b ? e.getValues() : e.value : void 0;
+      return e ? e instanceof x ? e.getValues() : e.value : void 0;
     }
   }
   draw() {
     const t = document.createElement("div");
-    t.className = "setting-group", t.id = `setting-group-${this.id}`, b.hiddenElements.add(t), this.hideCondition && this.hideCondition() && (t.style.display = "none"), this.isMain && t.classList.add("main-group");
+    t.className = "setting-group", t.id = `setting-group-${this.id}`, x.hiddenElements.add(t), this.hideCondition && this.hideCondition() && (t.style.display = "none"), this.isMain && t.classList.add("main-group");
     const e = document.createElement("div");
     e.className = "setting-group-title", this.isCollapsed && e.classList.add("collapsed-view"), e.setAttribute("role", "button"), e.setAttribute(
       "aria-expanded",
@@ -63,75 +66,78 @@ const b = class b {
     ), e.setAttribute("tabindex", "0");
     const i = document.createElement("div");
     if (i.className = "title-section", this.icon) {
-      const r = document.createElement("span");
-      r.className = "group-icon", r.innerHTML = this.icon, i.appendChild(r);
+      const h = document.createElement("span");
+      h.className = "group-icon", h.innerHTML = this.icon, i.appendChild(h);
     }
+    this.custom && t.classList.add("custom_class");
     const n = document.createElement("h3");
     n.textContent = this.title, i.appendChild(n);
     const s = document.createElement("div");
     if (s.className = "actions-section", this.description && this.isCollapsed) {
-      const r = document.createElement("span");
-      r.className = "info-marker", r.innerHTML = `
+      const h = document.createElement("span");
+      h.className = "info-marker", h.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>
-      `, r.title = this.description, s.appendChild(r);
+      `, h.title = this.description, s.appendChild(h);
     }
-    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) {
-      const r = document.createElement("div");
-      r.className = "setting-group-description", r.textContent = this.description, a.appendChild(r);
+    `, 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 h = document.createElement("div");
+      h.className = "setting-group-description", h.textContent = this.description, o.appendChild(h);
     }
     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 h = o.querySelector(
         ".setting-group-description"
       ), u = s.querySelector(".info-marker");
       if (this.description)
         if (this.isCollapsed) {
-          if (r && r.remove(), !u) {
+          if (h && h.remove(), !u) {
             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>
-            `, p.title = this.description, s.insertBefore(p, o);
+            `, p.title = this.description, s.insertBefore(p, a);
           }
         } else {
-          if (!r) {
+          if (!h) {
             const p = document.createElement("div");
-            p.className = "setting-group-description", p.textContent = this.description, a.insertBefore(
+            p.className = "setting-group-description", p.textContent = this.description, o.insertBefore(
               p,
-              a.firstChild
+              o.firstChild
             );
           }
           u && u.remove();
         }
     };
-    if (e.onclick = l, e.onkeydown = (r) => {
-      (r.key === "Enter" || r.key === " ") && (r.preventDefault(), l());
+    if (e.onclick = l, e.onkeydown = (h) => {
+      (h.key === "Enter" || h.key === " ") && (h.preventDefault(), l());
     }, Object.keys(this.settings).length > 0) {
-      for (const r in this.settings)
-        if (this.settings.hasOwnProperty(r)) {
-          const u = this.settings[r];
-          a.appendChild(u.draw());
+      for (const h in this.settings)
+        if (this.settings.hasOwnProperty(h)) {
+          const u = this.settings[h];
+          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);
+      const h = document.createElement("div");
+      h.className = "setting-group-empty", h.textContent = "No settings in this group", o.appendChild(h);
     }
-    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, this.onBlur && t.addEventListener("mouseleave", () => {
+      this.onBlur && this.onBlur();
+    }), t;
   }
   collapse() {
     if (!this.elementRef || this.isCollapsed) return;
@@ -158,10 +164,10 @@ const b = class b {
     this.isHidden ? this.show() : this.hide();
   }
 };
-b.hiddenElements = /* @__PURE__ */ new Set();
-let v = b;
-function W(h) {
-  switch (h) {
+x.hiddenElements = /* @__PURE__ */ new Set();
+let v = x;
+function W(c) {
+  switch (c) {
     case "number":
       return 0;
     case "text":
@@ -195,45 +201,45 @@ class C {
     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);
     };
@@ -283,11 +289,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,36 +306,36 @@ class S extends H {
     e.appendChild(i), e.appendChild(n);
     const s = document.createElement("div");
     s.className = "color-input-wrapper";
-    const o = (p) => {
+    const a = (p) => {
       const g = p.value.split(",").map((N) => parseInt(N.trim()));
       if (g.length !== 3 || g.some(isNaN))
         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;
-    }, a = document.createElement("div");
-    a.className = "color-preview", a.style.backgroundColor = this.value ? `rgb(${this.value})` : "";
+    }, 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({
+    }), r = l.querySelector("input"), h = this.createInput({
       value: this.value ? this.rgbToHex(this.value) : "",
       inputType: this.inputType,
       inputClassName: "color-picker"
-    }), u = r.querySelector("input");
-    return c.oninput = (p) => {
+    }), u = h.querySelector("input");
+    return r.oninput = (p) => {
       var d;
       let g = p.target.value.trim();
-      o(c) && (this.value = g, (d = this.onChange) == null || d.call(this, g), u.value = this.rgbToHex(g), a.style.backgroundColor = `rgb(${g})`);
+      a(r) && (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), c.value = d, a.style.backgroundColor = `rgb(${d})`;
+      this.value = d, (m = this.onChange) == null || m.call(this, d), (f = this.detectChange) == null || f.call(this, d), r.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), c.value = d, a.style.backgroundColor = `rgb(${d})`;
-    }, 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;
+      this.value = d, (m = this.onChange) == null || m.call(this, d), (f = this.detectChange) == null || f.call(this, d), r.value = d, o.style.backgroundColor = `rgb(${d})`;
+    }, s.appendChild(o), s.appendChild(h), s.appendChild(l), t.appendChild(e), t.appendChild(s), this.value && (r.value = this.value, u.value = this.rgbToHex(this.value), o.style.backgroundColor = `rgb(${this.value})`), t;
   }
 }
 class w extends C {
@@ -339,9 +345,9 @@ class w extends C {
   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,
@@ -387,7 +393,7 @@ const A = `
     <polyline points="6 9 12 15 18 9"></polyline>
   </svg>
 `;
-class V extends C {
+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);
@@ -403,12 +409,12 @@ class V extends C {
     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 {
@@ -417,13 +423,13 @@ class V extends C {
     }
     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) => {
@@ -431,15 +437,15 @@ class V extends C {
     }).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((r, h) => {
+      h === e ? r.classList.add("selected") : r.classList.remove("selected");
     }));
   }
   updateOptionsList() {
@@ -516,11 +522,11 @@ class _ extends C {
         `
       }
     ].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;
   }
 }
@@ -537,7 +543,7 @@ class nt extends C {
     return e.className = "button-setting-wrapper " + (this.props.wrapperClassName || ""), e.appendChild(t), e;
   }
 }
-class ot extends C {
+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;
@@ -625,8 +631,8 @@ class ot extends C {
     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() {
@@ -657,7 +663,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"/>
@@ -689,44 +695,44 @@ class F extends C {
     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 r = this.createIcon(this.props.icon);
-        c.appendChild(r);
+      const r = document.createElement("div");
+      if (r.className = "icon-title-container", this.props.icon) {
+        const h = this.createIcon(this.props.icon);
+        r.appendChild(h);
       }
       if (this.props.title) {
-        const r = this.createLabel(this.props.title);
-        c.appendChild(r);
+        const h = this.createLabel(this.props.title);
+        r.appendChild(h);
       }
-      t.appendChild(c);
+      t.appendChild(r);
     }
     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) => {
-      var r;
-      c.stopPropagation(), this.value = "", this.updatePreviewState(null), (r = this.onChange) == null || r.call(this, "");
-    }, a.onclick = () => {
+    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 = (r) => {
+      var h;
+      r.stopPropagation(), this.value = "", this.updatePreviewState(null), (h = this.onChange) == null || h.call(this, "");
+    }, o.onclick = () => {
       l.click();
     }, l.onchange = async () => {
-      var r, u, p;
-      const c = (r = l.files) == null ? void 0 : r[0];
-      if (c)
+      var h, u, p;
+      const r = (h = l.files) == null ? void 0 : h[0];
+      if (r)
         try {
-          a.classList.add("loading"), a.disabled = !0;
+          o.classList.add("loading"), o.disabled = !0;
           const g = new FormData(), d = this.props.formFieldName || "file";
-          g.append(d, c, c.name);
+          g.append(d, r, r.name);
           const m = this.props.uploadUrl;
           if (!m)
             throw new Error("No uploadUrl provided to UploadSetting.");
@@ -735,23 +741,23 @@ class F extends C {
             body: g,
             headers: L
           })).json();
-          let x;
+          let b;
           if (this.props.parseResponse)
-            x = this.props.parseResponse(E);
-          else if (x = (u = E == null ? void 0 : E.data) == null ? void 0 : u.url, !x)
+            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 = x, this.updatePreviewState(x), (p = this.onChange) == null || p.call(this, x);
+          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 C {
+class ot extends C {
   constructor(t = {}) {
     super(t), this.inputType = "number", this.value = this.value ?? 100, this.numberSetting = new w({
       title: "Height",
@@ -797,7 +803,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 C {
+class ht 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)
@@ -822,34 +828,34 @@ class rt extends C {
       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) => {
@@ -857,14 +863,14 @@ class rt extends C {
     })), 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((r, h) => {
+        r.checked = h === e;
       });
     }
   }
@@ -890,17 +896,17 @@ class rt extends C {
     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");
@@ -909,10 +915,10 @@ class rt extends C {
       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;
   }
@@ -920,7 +926,7 @@ class rt extends C {
     this.detectChangeCallback = t;
   }
 }
-class ht extends C {
+class rt extends C {
   constructor(t) {
     super(t), this.inputType = "text", this.value = t.default ?? !1;
   }
@@ -929,12 +935,12 @@ class ht extends C {
     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");
@@ -988,9 +994,9 @@ class ct extends C {
     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 m;
         const p = this.props.minValue ?? 0, g = this.props.maxValue ?? 100;
@@ -1002,15 +1008,56 @@ class ct extends C {
       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 r = document.createElement("span");
-    return r.className = "suffix-label", r.textContent = this.props.suffix, l.appendChild(r), i.appendChild(l), i;
+    const r = l.querySelector("input.gap-setting-input");
+    r && (r.style.paddingRight = "35px");
+    const h = document.createElement("span");
+    return h.className = "suffix-label", h.textContent = this.props.suffix, l.appendChild(h), 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, r) => {
+        l instanceof HTMLElement && (r === o ? (l.classList.add("active"), l.classList.remove("slide-left", "slide-right")) : r === 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 = `
@@ -1022,7 +1069,7 @@ 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 v {
+class pt extends v {
   constructor(t) {
     super({
       title: "Border",
@@ -1078,7 +1125,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 v {
+class ut extends v {
   constructor(t = {}) {
     super({
       title: t.title || "Typography",
@@ -1091,7 +1138,7 @@ class pt extends v {
         opacity: new M({
           default: t.colorOpacityDefault ?? 100
         }),
-        fontFamily: new V({
+        fontFamily: new T({
           title: "Font",
           icon: X,
           default: t.fontFamilyDefault ?? "Satoshi",
@@ -1103,7 +1150,7 @@ class pt extends v {
           getOptions: t.fontFamilyGetOptions,
           getOptionsAsync: t.fontFamilyGetOptionsAsync
         }),
-        fontWeight: new V({
+        fontWeight: new T({
           title: "Weight",
           icon: Q,
           default: t.fontWeightDefault ?? "400",
@@ -1129,14 +1176,14 @@ class pt extends v {
     });
   }
   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};
 			`;
   }
 }
@@ -1148,11 +1195,11 @@ class k extends C {
     }), 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, r = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
+        let h = Number(o.value);
+        h < l && (h = l), h > r && (h = r), o.value = String(h);
       }));
     }, i = this.createInput({
       value: this.value,
@@ -1173,20 +1220,20 @@ class k extends C {
     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 r = Number(l);
+        isNaN(r) || (this.value = r);
       }
       this.onChange && this.onChange(this.value);
     }), i;
   }
 }
-class ut extends v {
+class gt extends v {
   constructor(t) {
     super({
       title: "Margins",
@@ -1274,16 +1321,16 @@ class st extends v {
           <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 v {
+class mt extends v {
   // Store the rendered element
   constructor(t) {
     super({
@@ -1352,7 +1399,7 @@ class gt extends v {
     }));
   }
 }
-class mt extends v {
+class Ct extends v {
   /**
    * Constructs a new BackgroundSettingSet.
    *
@@ -1405,10 +1452,10 @@ class mt extends v {
   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.
@@ -1428,25 +1475,26 @@ class mt extends v {
 }
 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,
+  ut as HeaderTypographySettingSet,
+  ot as HeightSetting,
+  gt as MarginSettingGroup,
   w as NumberSetting,
   M as OpacitySetting,
-  rt as SelectApiSettings,
-  V as SelectSetting,
+  ht as SelectApiSettings,
+  T as SelectSetting,
   C as Setting,
   v as SettingGroup,
   H as StringSetting,
-  gt as TabsContainerGroup,
-  ht as Toggle,
+  mt as TabsContainerGroup,
+  dt as TabsSettings,
+  rt as Toggle,
   F as UploadSetting,
   lt as WidthSetting,
-  B as iterateSettings
+  R as iterateSettings
 };