builder-settings-types 0.0.281 → 0.0.282

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

@@ -1,11 +1,11 @@
-const ft = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
+const vt = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
 let ht = (c = 21) => {
   let t = "", e = crypto.getRandomValues(new Uint8Array(c |= 0));
   for (; c--; )
-    t += ft[e[c] & 63];
+    t += vt[e[c] & 63];
   return t;
 };
-function vt(c) {
+function Ct(c) {
   let t = 0, e = c.parentElement;
   for (; e; )
     e.classList.contains("setting-group") && e !== c && t++, e = e.parentElement;
@@ -21,15 +21,15 @@ function et(c, t = 0) {
     J(s, n), et(s, n);
   });
 }
-const Ct = {
+const yt = {
   maxLevel: 5,
   spacingMultiplier: 1,
   visualIndentMultiplier: 2,
   enableAutoDetection: !0
 };
-class yt {
+class Et {
   constructor(t = {}) {
-    this.observedElements = /* @__PURE__ */ new Set(), this.config = { ...Ct, ...t }, this.config.enableAutoDetection && this.setupAutoDetection();
+    this.observedElements = /* @__PURE__ */ new Set(), this.config = { ...yt, ...t }, this.config.enableAutoDetection && this.setupAutoDetection();
   }
   /**
    * Setup automatic detection using MutationObserver
@@ -63,7 +63,7 @@ class yt {
    * Update nesting for a specific element
    */
   updateElementNesting(t) {
-    const e = vt(t);
+    const e = Ct(t);
     this.applyNestingWithConfig(t, e);
   }
   /**
@@ -111,7 +111,7 @@ class yt {
     this.observer && (this.observer.disconnect(), this.observer = void 0), this.observedElements.clear();
   }
 }
-const ot = new yt();
+const ot = new Et();
 function X(c) {
   if (c === null || typeof c != "object") return c;
   if (c instanceof Date) return new Date(c.getTime());
@@ -124,7 +124,7 @@ function X(c) {
   }
   return c;
 }
-function Et(c) {
+function bt(c) {
   switch (c) {
     case "number":
       return 0;
@@ -192,7 +192,7 @@ class w {
     const i = document.createElement("div");
     i.className = t.wrapperClassName || "";
     const s = document.createElement("input");
-    this.inputEl = s, s.value = String(t.value || Et(t.inputType)), s.type = t.inputType, s.placeholder = t.placeholder || "", s.className = t.inputClassName || "", this.dataPropsPath && s.setAttribute("data-test-id", this.dataPropsPath);
+    this.inputEl = s, s.value = String(t.value || bt(t.inputType)), s.type = t.inputType, s.placeholder = t.placeholder || "", s.className = t.inputClassName || "", this.dataPropsPath && s.setAttribute("data-test-id", this.dataPropsPath);
     const n = (a) => {
       const l = a.target;
       let r = l.value;
@@ -237,7 +237,7 @@ function D(c) {
   return c instanceof w;
 }
 function L(c) {
-  return c instanceof P;
+  return c instanceof T;
 }
 function at(c) {
   return D(c) || L(c);
@@ -345,7 +345,7 @@ const Y = class Y {
       deleteItem: this.deleteItemCfg,
       dataProps: this.dataProps,
       hide: this.hide
-    }, i = wt(e);
+    }, i = xt(e);
     return i.initialValues = this.getValues(), i;
   }
   resetDefault() {
@@ -810,11 +810,11 @@ const Y = class Y {
   }
 };
 Y.hiddenElements = /* @__PURE__ */ new Set();
-let P = Y;
-function ae(c) {
-  return new bt(c);
+let T = Y;
+function le(c) {
+  return new wt(c);
 }
-class bt extends P {
+class wt extends T {
   constructor(t) {
     super(t);
     const e = Object.keys(this.settings)[0];
@@ -865,13 +865,13 @@ class bt extends P {
     return this.updateTabUI(), t;
   }
 }
-function wt(c) {
-  return new P(c);
+function xt(c) {
+  return new T(c);
 }
-function le(c) {
+function re(c) {
   return c;
 }
-class xt extends w {
+class Lt extends w {
   constructor(t = {}) {
     super(t), this.inputType = "text", t.onChange && this.setOnChange(t.onChange);
   }
@@ -891,12 +891,12 @@ class xt extends w {
     });
   }
 }
-const Lt = "<svg xmlns='http://www.w3.org/2000/svg' width='18' height='19' viewBox='0 0 18 19' fill='none'><path d='M8.99999 15.8542C9.79613 16.5667 10.8475 17 12 17C14.4853 17 16.5 14.9853 16.5 12.5C16.5 10.4248 15.0953 8.67769 13.1849 8.15763M4.81513 8.15762C2.9047 8.67768 1.5 10.4248 1.5 12.5C1.5 14.9853 3.51472 17 6 17C8.48528 17 10.5 14.9853 10.5 12.5C10.5 11.9146 10.3882 11.3554 10.1849 10.8424M13.5 6.5C13.5 8.98528 11.4853 11 9 11C6.51472 11 4.5 8.98528 4.5 6.5C4.5 4.01472 6.51472 2 9 2C11.4853 2 13.5 4.01472 13.5 6.5Z' stroke='#667085' stroke-linecap='round' stroke-linejoin='round'/></svg>";
-class M extends xt {
+const kt = "<svg xmlns='http://www.w3.org/2000/svg' width='18' height='19' viewBox='0 0 18 19' fill='none'><path d='M8.99999 15.8542C9.79613 16.5667 10.8475 17 12 17C14.4853 17 16.5 14.9853 16.5 12.5C16.5 10.4248 15.0953 8.67769 13.1849 8.15763M4.81513 8.15762C2.9047 8.67768 1.5 10.4248 1.5 12.5C1.5 14.9853 3.51472 17 6 17C8.48528 17 10.5 14.9853 10.5 12.5C10.5 11.9146 10.3882 11.3554 10.1849 10.8424M13.5 6.5C13.5 8.98528 11.4853 11 9 11C6.51472 11 4.5 8.98528 4.5 6.5C4.5 4.01472 6.51472 2 9 2C11.4853 2 13.5 4.01472 13.5 6.5Z' stroke='#667085' stroke-linecap='round' stroke-linejoin='round'/></svg>";
+class M extends Lt {
   constructor(t) {
     super({
       ...t,
-      icon: t.icon || Lt,
+      icon: t.icon || kt,
       title: t.title || "Color",
       default: t.default ? M.normalizeColorValue(t.default) : "#000000"
     }), this.inputType = "color", this.element = null, this.colorInputEl = null, this.textInputEl = null, this.detectChange = t.detectChange;
@@ -995,7 +995,7 @@ class M extends xt {
     return this.isValidHex() ? this.hexToRgb(this.value) : "0, 0, 0";
   }
 }
-const kt = `
+const Mt = `
 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
   <path d="M8.99999 15.8542C9.79613 16.5667 10.8475 17 12 17C14.4853 17 16.5 14.9853 16.5 12.5C16.5 10.4248 15.0953 8.67769 13.1849 8.15763M4.81513 8.15762C2.9047 8.67768 1.5 10.4248 1.5 12.5C1.5 14.9853 3.51472 17 6 17C8.48528 17 10.5 14.9853 10.5 12.5C10.5 11.9146 10.3882 11.3554 10.1849 10.8424M13.5 6.5C13.5 8.98528 11.4853 11 9 11C6.51472 11 4.5 8.98528 4.5 6.5C4.5 4.01472 6.51472 2 9 2C11.4853 2 13.5 4.01472 13.5 6.5Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
   <path d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z" stroke="#667085" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.5"/>
@@ -1005,7 +1005,7 @@ class R extends w {
   constructor(t = {}) {
     super({
       ...t,
-      icon: t.icon || kt,
+      icon: t.icon || Mt,
       title: t.title || "Color & Opacity",
       default: t.default || "#000000FF"
     }), this.inputType = "color", this.element = null, this.colorInputEl = null, this.textInputEl = null, this.opacityInputEl = null, this.colorPreviewEl = null, this.detectChange = t.detectChange, this.value && (this.value = R.normalizeHexWithOpacity(this.value));
@@ -1123,7 +1123,7 @@ class R extends w {
     };
   }
 }
-class re extends w {
+class ce extends w {
   constructor(t = {}) {
     super(t), this.inputType = "text", t.onChange && this.setOnChange(t.onChange);
   }
@@ -1214,12 +1214,12 @@ class I extends w {
     );
   }
 }
-const Mt = `
+const St = `
 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
   <path d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
   <path d="M9 1V17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1Z" fill="#667085" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`;
-class St extends I {
+class It extends I {
   constructor(t = {}) {
     const e = {
       title: "Opacity",
@@ -1228,7 +1228,7 @@ class St extends I {
       maxValue: 100,
       step: 1,
       default: t.default ?? 100,
-      icon: Mt,
+      icon: St,
       ...t
     };
     super(e), this.inputType = "number", this.mobileValue = t.mobile;
@@ -1240,7 +1240,7 @@ class St extends I {
     this.mobileValue = t, t !== void 0 && this.setValue(t);
   }
 }
-const It = `
+const Nt = `
   <svg xmlns="http://www.w3.org/2000/svg" class="svg-select" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
     <polyline points="6 9 12 15 18 9"></polyline>
   </svg>
@@ -1289,7 +1289,7 @@ class it extends w {
       a.onclick = (l) => this.selectOption(l, o, e), i.appendChild(a);
     }), document.body.appendChild(i);
     const s = document.createElement("div");
-    return s.classList.add("svg-container"), s.innerHTML = It, t.appendChild(s), this.optionsListEl = i, this.svgContainer = s, this.props.getOptionsAsync && (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((n) => {
+    return s.classList.add("svg-container"), s.innerHTML = Nt, t.appendChild(s), this.optionsListEl = i, this.svgContainer = s, this.props.getOptionsAsync && (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((n) => {
       this._options.push(...n), this.isLoading = !1, this.updateOptionsList(), this.updateButtonText();
     }).catch((n) => {
       console.error("Failed to fetch async options:", n), this.isLoading = !1, this.updateButtonText("Failed to load options");
@@ -1352,7 +1352,7 @@ class it extends w {
     this.clickOutsideListener && (document.removeEventListener("click", this.clickOutsideListener), this.clickOutsideListener = null), this.resizeListener && (window.removeEventListener("resize", this.resizeListener), this.resizeListener = null), this.cleanupDropdownPosition(), this.optionsListEl && this.optionsListEl.parentNode && this.optionsListEl.parentNode.removeChild(this.optionsListEl), super.destroy();
   }
 }
-class Nt extends w {
+class Vt extends w {
   constructor(t = {}) {
     super(t), this.inputType = "button", this.value || (this.value = "center");
   }
@@ -1408,7 +1408,7 @@ class Nt extends w {
     }), t.appendChild(i), t;
   }
 }
-class ce extends w {
+class he extends w {
   constructor(t) {
     super(t), this.inputType = "button", this.bgWithAlpha = "rgba(145, 158, 171, 0.08)";
   }
@@ -1437,7 +1437,7 @@ class ce extends w {
     return o.className = "button-setting-wrapper " + (this.props.wrapperClassName || ""), o.appendChild(t), o;
   }
 }
-class he extends w {
+class pe extends w {
   constructor(t = {}) {
     super(t), this.inputType = { width: "number", height: "number" }, this.aspectRatio = 1, this.isUpdating = !1;
     const e = t.width || 0, i = t.height || 0;
@@ -1450,7 +1450,7 @@ class he extends w {
       suffix: "px",
       minValue: this.minWidth,
       maxValue: this.maxWidth,
-      icon: Vt
+      icon: Tt
     }), this.heightSetting = new I({
       title: "Height",
       default: this.value.height,
@@ -1551,7 +1551,7 @@ class he extends w {
     }
   }
 }
-const Vt = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
+const Tt = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
   <path d="M4.5 9.5H13.5M4.5 9.5L6 7.25M4.5 9.5L6 11.75M13.5 9.5L12 7.25M13.5 9.5L12 11.75M15.75 16.25V2.75M2.25 16.25V2.75" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`, Pt = `<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="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
@@ -1559,16 +1559,16 @@ const Vt = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewB
 <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>
-`, Tt = `
+`, Ot = `
 <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"/>
 </svg>
-`, Ot = `
+`, Ht = `
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 12 12" fill="none">
   <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>
-`, Ht = `
+`, $t = `
 <svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29" fill="none">
   <!-- Top dot -->
   <circle cx="14.5" cy="3" r="1.5" fill="#02CC59" opacity="1"/>
@@ -1685,9 +1685,9 @@ class pt extends w {
     const s = this.value && this.value !== "";
     s || i.classList.add("no-image");
     const n = document.createElement("div");
-    if (n.className = "preview-placeholder", n.innerHTML = Tt, this.previewWrapper = document.createElement("div"), this.previewWrapper.className = "preview-wrapper", this.loadingSpinner = document.createElement("div"), this.loadingSpinner.className = "loading-spinner", this.loadingSpinner.innerHTML = Ht, this.loadingSpinner.style.display = "none", this.previewWrapper.appendChild(this.loadingSpinner), this.previewEl = document.createElement("img"), this.previewEl.className = "upload-preview", this.props.delete) {
+    if (n.className = "preview-placeholder", n.innerHTML = Ot, this.previewWrapper = document.createElement("div"), this.previewWrapper.className = "preview-wrapper", this.loadingSpinner = document.createElement("div"), this.loadingSpinner.className = "loading-spinner", this.loadingSpinner.innerHTML = $t, this.loadingSpinner.style.display = "none", this.previewWrapper.appendChild(this.loadingSpinner), this.previewEl = document.createElement("img"), this.previewEl.className = "upload-preview", this.props.delete) {
       const a = document.createElement("button");
-      a.className = "delete-button", a.type = "button", a.title = "Delete image", a.innerHTML = Ot, this.previewWrapper.appendChild(a), a.onclick = (l) => {
+      a.className = "delete-button", a.type = "button", a.title = "Delete image", a.innerHTML = Ht, this.previewWrapper.appendChild(a), a.onclick = (l) => {
         var r;
         l.stopPropagation(), this.value = "", this.updatePreviewState(null), (r = this.onChange) == null || r.call(this, ""), this.hideError();
       };
@@ -1708,14 +1708,14 @@ class pt extends w {
     }, t;
   }
 }
-class pe extends I {
+class de extends I {
   constructor(t = {}) {
     super({
       ...t,
       title: t.title || "Height",
       suffix: t.suffix || "px",
       minValue: t.minValue ?? 0,
-      icon: t.icon || $t,
+      icon: t.icon || At,
       default: t.default ?? 100
     }), this.inputType = "number", this.mobileValue = t.mobile;
   }
@@ -1726,17 +1726,17 @@ class pe extends I {
     this.mobileValue = t, t !== void 0 && this.setValue(t);
   }
 }
-const $t = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
+const At = `<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 de extends I {
+class ue extends I {
   constructor(t = {}) {
     super({
       ...t,
       title: t.title || "Width",
       suffix: t.suffix || "px",
       minValue: t.minValue ?? 0,
-      icon: t.icon || At,
+      icon: t.icon || Bt,
       default: t.default ?? 100
     }), this.inputType = "number", this.mobileValue = t.mobile;
   }
@@ -1747,14 +1747,14 @@ class de extends I {
     this.mobileValue = t, t !== void 0 && this.setValue(t);
   }
 }
-const At = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
+const Bt = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
   <path d="M4.5 9.5H13.5M4.5 9.5L6 7.25M4.5 9.5L6 11.75M13.5 9.5L12 7.25M13.5 9.5L12 11.75M15.75 16.25V2.75M2.25 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>`, Bt = `
+</svg>`, Dt = `
   <svg xmlns="http://www.w3.org/2000/svg" class="svg-select-api" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
     <polyline points="6 9 12 15 18 9"></polyline>
   </svg>
 `;
-class ue extends w {
+class ge extends w {
   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.hasInitializedOptions = !1, this.selectedOptionIndex = null, t.default !== void 0 && (this.value = t.default), this.initializeOptions(t), !t.getOptionsAsync && this.value !== void 0) {
       const e = this._options.findIndex(
@@ -1809,7 +1809,7 @@ class ue extends w {
       a.onclick = (l) => this.selectApiOption(l, o, e), i.appendChild(a);
     }), t.appendChild(i);
     const s = document.createElement("div");
-    return s.classList.add("svg-container"), s.innerHTML = Bt, t.appendChild(s), s.onclick = () => {
+    return s.classList.add("svg-container"), s.innerHTML = Dt, t.appendChild(s), s.onclick = () => {
       var n, o;
       this.isLoading || (this.isOpen = !this.isOpen, (n = this.optionsListEl) == null || n.classList.toggle("open", this.isOpen), (o = this.svgContainer) == null || o.classList.toggle("open", this.isOpen));
     }, this.optionsListEl = i, this.svgContainer = s, this.props.getOptionsAsync && !this.hasInitializedOptions ? (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((n) => {
@@ -1901,7 +1901,7 @@ class ue extends w {
     ), this.updateButtonText();
   }
 }
-class ge extends w {
+class me extends w {
   constructor(t) {
     var e, i;
     super(t), this.inputType = "text", this.value = t.default ?? ((i = (e = t.options) == null ? void 0 : e[0]) == null ? void 0 : i.value) ?? "", this.detectChangeCallback = t.detectChange;
@@ -1951,13 +1951,13 @@ class ge extends w {
     this.detectChangeCallback = t;
   }
 }
-const Dt = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+const Rt = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M13.3334 5.99996H2.66675M13.3334 9.99996H2.66675M5.33341 12.6666V3.33329M10.6667 12.6666V3.33329" stroke="#667085" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`;
-class me extends w {
+class fe extends w {
   // Store mobile value
   constructor(t = {}) {
-    t.rowGap = t.rowGap ?? !0, t.columnGap = t.columnGap ?? !0, t.title = t.title ?? "Gap", t.icon = t.icon ?? Dt, t.suffix = t.suffix ?? "px", t.minValue = t.minValue ?? 0, super(t), this.inputType = "number", this.inputValues = {}, this.mobileValue = t.mobile, this.value = this.validateValue(t.default ?? 0), t.rowGap && (this.inputValues.row = this.value), t.columnGap && (this.inputValues.column = this.value);
+    t.rowGap = t.rowGap ?? !0, t.columnGap = t.columnGap ?? !0, t.title = t.title ?? "Gap", t.icon = t.icon ?? Rt, t.suffix = t.suffix ?? "px", t.minValue = t.minValue ?? 0, super(t), this.inputType = "number", this.inputValues = {}, this.mobileValue = t.mobile, this.value = this.validateValue(t.default ?? 0), t.rowGap && (this.inputValues.row = this.value), t.columnGap && (this.inputValues.column = this.value);
   }
   draw() {
     const t = document.createElement("div");
@@ -2008,40 +2008,40 @@ class me extends w {
     this.mobileValue = t, t !== void 0 && this.setValue(t);
   }
 }
-const Rt = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
+const Ft = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
 <path d="M2.25 11.75H15.75M5.85 2.75H12.15C13.4101 2.75 14.0402 2.75 14.5215 2.99524C14.9448 3.21095 15.289 3.55516 15.5048 3.97852C15.75 4.45982 15.75 5.08988 15.75 6.35V12.65C15.75 13.9101 15.75 14.5402 15.5048 15.0215C15.289 15.4448 14.9448 15.789 14.5215 16.0048C14.0402 16.25 13.4101 16.25 12.15 16.25H5.85C4.58988 16.25 3.95982 16.25 3.47852 16.0048C3.05516 15.789 2.71095 15.4448 2.49524 15.0215C2.25 14.5402 2.25 13.9101 2.25 12.65V6.35C2.25 5.08988 2.25 4.45982 2.49524 3.97852C2.71095 3.55516 3.05516 3.21095 3.47852 2.99524C3.95982 2.75 4.58988 2.75 5.85 2.75Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`;
-class fe extends I {
+class ve extends I {
   constructor(t = {}) {
     super({
       ...t,
       minValue: t.minValue ?? 0,
       maxValue: t.maxValue ?? 1e3,
-      icon: t.icon || Rt,
+      icon: t.icon || Ft,
       title: t.title || "Margin Bottom",
       default: t.default ?? 20,
       wrapperClassName: "margin-bottom-wrapper " + (t.wrapperClassName || "")
     }), this.inputType = "number";
   }
 }
-const Ft = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
+const Ut = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
 <path d="M15.75 7.25H2.25m9.9 9h-6.3c-1.26 0-1.89 0-2.371-.245a2.25 2.25 0 0 1-.984-.983c-.245-.482-.245-1.112-.245-2.372v-6.3c0-1.26 0-1.89.245-2.371a2.25 2.25 0 0 1 .984-.984c.48-.245 1.11-.245 2.371-.245h6.3c1.26 0 1.89 0 2.371.245.424.216.768.56.984.984.245.48.245 1.11.245 2.371v6.3c0 1.26 0 1.89-.245 2.371-.216.424-.56.768-.984.984-.48.245-1.11.245-2.371.245"
  stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`;
-class ve extends I {
+class Ce extends I {
   constructor(t = {}) {
     super({
       ...t,
       minValue: t.minValue ?? 0,
       maxValue: t.maxValue ?? 1e3,
-      icon: t.icon || Ft,
+      icon: t.icon || Ut,
       title: t.title || "Margin Top",
       default: t.default ?? 20,
       wrapperClassName: "margin-top-wrapper " + (t.wrapperClassName || "")
     }), this.inputType = "number";
   }
 }
-class Ce extends w {
+class ye extends w {
   constructor(t) {
     super(t), this.inputType = {}, this.container = null, this.defaultLanguage = "", this.uploadSettings = /* @__PURE__ */ new Map(), t.default ? this.value = { ...t.default } : this.value || (this.value = {}), this.defaultLanguage = t.languages.includes(w.DefaultLanguage) ? w.DefaultLanguage : t.languages[0];
     const e = t.defaultValue || `Enter text in ${this.capitalizeFirstLetter(this.defaultLanguage)}`;
@@ -2188,7 +2188,7 @@ class Ce extends w {
     });
   }
 }
-class ye extends w {
+class Ee extends w {
   constructor(t = {}) {
     super(t), this.inputType = "select";
     const e = [
@@ -2215,7 +2215,7 @@ class ye extends w {
     this.selectSetting.destroy(), super.destroy();
   }
 }
-const Gt = (c, t) => {
+const dt = (c, t) => {
   let e = !1, i = 0, s = 0, n = 0, o = 0;
   const a = (h) => {
     if (h.target.closest("button")) return;
@@ -2231,7 +2231,7 @@ const Gt = (c, t) => {
     e = !1, document.removeEventListener("mousemove", l), document.removeEventListener("mouseup", r), document.body.style.userSelect = "";
   };
   c.addEventListener("mousedown", a);
-}, G = (c) => {
+}, U = (c) => {
   if (!c) return null;
   let t = c.trim();
   return !t.startsWith("#") || (t = t.slice(1), t.length === 3 && (t = t.split("").map((e) => e + e).join("")), !/^[0-9a-fA-F]{6}$/.test(t)) ? null : `#${t.toUpperCase()}`;
@@ -2256,7 +2256,7 @@ const Gt = (c, t) => {
     Math.round((l + o) * 255),
     Math.round((r + o) * 255)
   );
-}, Ut = (c, t, e) => {
+}, Gt = (c, t, e) => {
   const i = e * (1 - t / 2), s = i === 0 || i === 1 ? 0 : (e - i) / Math.min(i, 1 - i);
   return { hue: c, sat: s, lightness: i };
 }, Z = (c, t, e) => {
@@ -2267,7 +2267,7 @@ const Gt = (c, t) => {
     g: Math.round((a + n) * 255),
     b: Math.round((l + n) * 255)
   };
-}, dt = (c, t) => {
+}, ut = (c, t) => {
   const e = Math.max(0, Math.min(100, t)) / 100;
   if (c.startsWith("#")) {
     const { r: s, g: n, b: o } = S(c);
@@ -2299,7 +2299,7 @@ const Gt = (c, t) => {
       return `rgba(${n}, ${o}, ${a}, ${e})`;
     }
   }
-  const i = G(c);
+  const i = U(c);
   if (i) {
     const { r: s, g: n, b: o } = S(i);
     return `rgba(${s}, ${n}, ${o}, ${e})`;
@@ -2329,17 +2329,17 @@ const Gt = (c, t) => {
   "teal",
   "fuchsia",
   "transparent"
-].includes(c.toLowerCase()), ut = (c) => [
+].includes(c.toLowerCase()), gt = (c) => [
   /^#[0-9a-fA-F]{3,8}$/,
   /^rgba?\s*\([^)]+\)$/,
   /^hsla?\s*\([^)]+\)$/,
   /^[a-zA-Z]+$/
 ].some((e) => e.test(c.trim())), Wt = (c) => {
   if (typeof document > "u")
-    return ut(c) || !!G(c);
+    return gt(c) || !!U(c);
   const t = document.createElement("div");
   return t.style.color = c, t.style.color !== "";
-}, gt = (c) => {
+}, mt = (c) => {
   const t = c.trim();
   if (/^#[0-9A-Fa-f]{8}$/.test(t)) {
     const n = t.slice(1), o = parseInt(n.slice(0, 2), 16), a = parseInt(n.slice(2, 4), 16), l = parseInt(n.slice(4, 6), 16), r = parseInt(n.slice(6, 8), 16);
@@ -2375,7 +2375,7 @@ const Gt = (c, t) => {
       opacity: Math.round(l * 100)
     };
   }
-  return { color: G(t) || t, position: 0, opacity: 100 };
+  return { color: U(t) || t, position: 0, opacity: 100 };
 }, lt = (c) => {
   const t = [];
   let e = "", i = 0;
@@ -2418,8 +2418,8 @@ const Gt = (c, t) => {
     if (!s) return;
     let n = "", o = 0;
     const a = s.match(/^(.+?)\s+(\d+(?:\.\d+)?)%?\s*$/);
-    a && ut(a[1].trim()) ? (n = a[1].trim(), o = parseFloat(a[2])) : (n = s, o = c.length === 1 ? 0 : i / (c.length - 1) * 100);
-    const l = gt(n);
+    a && gt(a[1].trim()) ? (n = a[1].trim(), o = parseFloat(a[2])) : (n = s, o = c.length === 1 ? 0 : i / (c.length - 1) * 100);
+    const l = mt(n);
     l.position = Math.max(0, Math.min(100, Math.round(o))), t.push(l);
   }), t;
 }, $ = (c) => {
@@ -2436,7 +2436,7 @@ const Gt = (c, t) => {
 }, O = (c) => {
   const t = c.replace(/;$/, "").trim();
   if (Wt(t)) {
-    const s = gt(t);
+    const s = mt(t);
     return $({ type: "solid", angle: 0, stops: [s] });
   }
   const e = rt(t, "linear-gradient");
@@ -2472,13 +2472,22 @@ const Gt = (c, t) => {
     return `#${s}${n}`;
   }
   const t = c.stops.map(
-    (e) => `${dt(e.color, e.opacity ?? 100)} ${e.position}%`
+    (e) => `${ut(e.color, e.opacity ?? 100)} ${e.position}%`
   ).join(", ");
   return c.type === "radial" ? `radial-gradient(circle, ${t})` : `linear-gradient(${c.angle}deg, ${t})`;
-}, tt = (c) => {
+}, jt = (c) => Math.round(c / 100 * 255).toString(16).toUpperCase().padStart(2, "0"), tt = (c) => {
   if (c.type === "solid") {
     const t = c.stops[0];
-    return t ? t.color.replace("#", "").toUpperCase() : "Color";
+    if (t) {
+      const e = t.color.toUpperCase(), i = t.opacity ?? 100;
+      if (i === 100)
+        return e;
+      {
+        const s = jt(i);
+        return `${e}${s}`;
+      }
+    }
+    return "#000000";
   }
   return c.type === "linear" ? `Linear ${c.angle}°` : "Radial Gradient";
 }, q = class q {
@@ -2491,7 +2500,7 @@ const Gt = (c, t) => {
   static normalizeList(t) {
     const e = /* @__PURE__ */ new Set(), i = [];
     return t.forEach((s) => {
-      let n = G(s);
+      let n = U(s);
       n || O(s) && (n = s), n && (e.has(n) || (e.add(n), i.push(n)));
     }), i.slice(0, this.MAX_COLORS);
   }
@@ -2535,7 +2544,7 @@ const Gt = (c, t) => {
   }
   static addColor(t, e) {
     if (!t) return;
-    let i = G(t), s = "solid";
+    let i = U(t), s = "solid";
     if (i)
       s = "solid";
     else {
@@ -2571,20 +2580,18 @@ const st = (c, t) => {
     });
   };
   return o(), { container: e, refresh: o };
-}, mt = `<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+}, ft = `<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path fill-rule="evenodd" clip-rule="evenodd"
     d="M6.12347 4.96653L1.41158 0.254304C1.25449 0.102568 1.04409 0.0186071 0.825694 0.0205049C0.607302 0.0224037 0.398393 0.110007 0.24396 0.26445C0.0895282 0.418893 0.0019303 0.627818 3.24698e-05 0.846225C-0.00186536 1.06463 0.0820894 1.27505 0.233815 1.43215L4.9457 6.14438L0.233814 10.8566C0.0820886 11.0137 -0.00186625 11.2241 3.15434e-05 11.4425C0.00192934 11.6609 0.0895272 11.8699 0.243959 12.0243C0.398392 12.1787 0.607301 12.2663 0.825693 12.2682C1.04408 12.2701 1.25449 12.1862 1.41158 12.0344L6.12347 7.32222L10.8354 12.0344C10.9932 12.1824 11.2023 12.2632 11.4186 12.2597C11.6349 12.2562 11.8414 12.1687 11.9943 12.0156C12.1472 11.8626 12.2346 11.6561 12.2379 11.4398C12.2413 11.2234 12.1604 11.0143 12.0123 10.8566L7.30123 6.14438L12.0131 1.43215C12.0927 1.35531 12.1561 1.2634 12.1998 1.16177C12.2434 1.06014 12.2664 0.950833 12.2674 0.84023C12.2683 0.729626 12.2473 0.61994 12.2054 0.517568C12.1635 0.415196 12.1017 0.322191 12.0234 0.243979C11.9452 0.165768 11.8522 0.103916 11.7499 0.0620327C11.6475 0.0201492 11.5378 -0.000927989 11.4272 3.33052e-05C11.3166 0.000993646 11.2073 0.0239743 11.1057 0.0676297C11.0041 0.111286 10.9122 0.174745 10.8354 0.254305L6.12347 4.96653Z"
     fill="#919EAB"/>
-</svg>`, jt = `<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd"
-  d="M19.1972 3.29156C18.936 3.03034 18.6259 2.82313 18.2847 2.68176C17.9434 2.54039 17.5777 2.46763 17.2083 2.46763C16.8389 2.46763 16.4731 2.54039 16.1319 2.68176C15.7906 2.82313 15.4805 3.03034 15.2194 3.29156L13.7822 4.72875C13.2585 4.4772 12.6697 4.39449 12.097 4.49207C11.5243 4.58964 10.9961 4.86267 10.5853 5.27343L9.91687 5.94281C9.74268 6.11693 9.6045 6.32366 9.51023 6.5512C9.41595 6.77873 9.36743 7.02261 9.36743 7.2689C9.36743 7.5152 9.41595 7.75907 9.51023 7.98661C9.6045 8.21414 9.74268 8.42088 9.91687 8.595L3.83625 14.6747C3.57512 14.936 3.36803 15.2462 3.2268 15.5875C3.08556 15.9288 3.01296 16.2947 3.01312 16.6641V18.3516C3.01312 18.6499 3.13165 18.9361 3.34263 19.1471C3.55361 19.358 3.83975 19.4766 4.13812 19.4766H5.82562C6.57129 19.4759 7.28618 19.1792 7.81312 18.6516L13.8937 12.5728C14.0679 12.747 14.2746 12.8852 14.5021 12.9795C14.7297 13.0737 14.9735 13.1223 15.2198 13.1223C15.4661 13.1223 15.71 13.0737 15.9375 12.9795C16.1651 12.8852 16.3718 12.747 16.5459 12.5728L17.2153 11.9025C17.6261 11.4917 17.8991 10.9635 17.9967 10.3908C18.0942 9.81811 18.0115 9.22926 17.76 8.70562L19.1972 7.26937C19.4584 7.0082 19.6656 6.69813 19.807 6.35687C19.9484 6.01561 20.0211 5.64985 20.0211 5.28047C20.0211 4.91108 19.9484 4.54532 19.807 4.20406C19.6656 3.8628 19.4584 3.55273 19.1972 3.29156Z"
-  fill="#353C47"/>
-</svg>`, _t = `<svg width="15" height="17" viewBox="0 0 15 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+</svg>`, _t = `<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.1972 3.29156C18.936 3.03034 18.6259 2.82313 18.2847 2.68176C17.9434 2.54039 17.5777 2.46763 17.2083 2.46763C16.8389 2.46763 16.4731 2.54039 16.1319 2.68176C15.7906 2.82313 15.4805 3.03034 15.2194 3.29156L13.7822 4.72875C13.2585 4.4772 12.6697 4.39449 12.097 4.49207C11.5243 4.58964 10.9961 4.86267 10.5853 5.27343L9.91687 5.94281C9.74268 6.11693 9.6045 6.32366 9.51023 6.5512C9.41595 6.77873 9.36743 7.02261 9.36743 7.2689C9.36743 7.5152 9.41595 7.75907 9.51023 7.98661C9.6045 8.21414 9.74268 8.42088 9.91687 8.595L3.83625 14.6747C3.57512 14.936 3.36803 15.2462 3.2268 15.5875C3.08556 15.9288 3.01296 16.2947 3.01312 16.6641V18.3516C3.01312 18.6499 3.13165 18.9361 3.34263 19.1471C3.55361 19.358 3.83975 19.4766 4.13812 19.4766H5.82562C6.57129 19.4759 7.28618 19.1792 7.81312 18.6516L13.8937 12.5728C14.0679 12.747 14.2746 12.8852 14.5021 12.9795C14.7297 13.0737 14.9735 13.1223 15.2198 13.1223C15.4661 13.1223 15.71 13.0737 15.9375 12.9795C16.1651 12.8852 16.3718 12.747 16.5459 12.5728L17.2153 11.9025C17.6261 11.4917 17.8991 10.9635 17.9967 10.3908C18.0942 9.81811 18.0115 9.22926 17.76 8.70562L19.1972 7.26937C19.4584 7.0082 19.6656 6.69813 19.807 6.35687C19.9484 6.01561 20.0211 5.64985 20.0211 5.28047C20.0211 4.91108 19.9484 4.54532 19.807 4.20406C19.6656 3.8628 19.4584 3.55273 19.1972 3.29156ZM5.16281 16.0012L11.2425 9.92062L12.5681 11.2462L6.48844 17.3269C6.31266 17.5027 6.07424 17.6015 5.82562 17.6016H4.88812V16.6641C4.88818 16.4154 4.98698 16.177 5.16281 16.0012Z" fill="#353C47"/>
+ </svg>`, Jt = `<svg width="15" height="17" viewBox="0 0 15 17" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M14.1333 12.4667H0.8M0.8 12.4667L4.13333 9.13332M0.8 12.4667L4.13333 15.8M0.8 4.13332H14.1333M14.1333 4.13332L10.8 0.799988M14.1333 4.13332L10.8 7.46665" stroke="#919EAB" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>`, Jt = `<svg width="14" height="2" viewBox="0 0 14 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+</svg>`, Xt = `<svg width="14" height="2" viewBox="0 0 14 2" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M0.8 0.800003H12.4667" stroke="#919EAB" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`;
-class Xt {
+class Zt {
   constructor(t, e = "gradient") {
     this.isOpen = !1, this.currentColor = "#FF0000", this.currentOpacity = 100, this.outsideClick = (i) => {
       if (!this.isOpen) return;
@@ -2618,7 +2625,7 @@ class Xt {
     const i = document.createElement("span");
     i.textContent = "Color";
     const s = document.createElement("button");
-    s.className = "color-picker-close", s.innerHTML = mt, s.addEventListener("click", () => this.close(!0)), e.appendChild(i), e.appendChild(s), Gt(e, t);
+    s.className = "color-picker-close", s.innerHTML = ft, s.addEventListener("click", () => this.close(!0)), e.appendChild(i), e.appendChild(s), dt(e, t);
     const n = document.createElement("div");
     n.className = "color-picker-area", this.colorArea = n;
     const o = document.createElement("div");
@@ -2626,7 +2633,7 @@ class Xt {
     const a = document.createElement("div");
     a.className = "color-picker-hue-container";
     const l = document.createElement("button");
-    l.className = "color-picker-eyedropper", l.type = "button", l.innerHTML = jt;
+    l.className = "color-picker-eyedropper", l.type = "button", l.innerHTML = _t;
     const r = document.createElement("div");
     r.className = "color-picker-hue", this.hueSlider = r;
     const h = document.createElement("div");
@@ -2636,8 +2643,8 @@ class Xt {
     const d = document.createElement("div");
     d.className = "color-picker-opacity-marker", this.opacityMarker = d, p.appendChild(d);
     const u = st((B) => {
-      var U;
-      this.setColor(B), (U = this.onChange) == null || U.call(this, B, this.currentOpacity);
+      var G;
+      this.setColor(B), (G = this.onChange) == null || G.call(this, B, this.currentOpacity);
     }, this.recentScope);
     this.recentSectionRefresh = u.refresh;
     const g = document.createElement("div");
@@ -2652,10 +2659,10 @@ class Xt {
     y.value = "hsl", y.textContent = "HSL", m.appendChild(f), m.appendChild(C), m.appendChild(y);
     const E = document.createElement("input");
     E.type = "text", E.className = "color-picker-color-input", E.value = this.currentColor, this.input = E;
-    const T = document.createElement("div");
-    T.className = "color-picker-input-container";
+    const P = document.createElement("div");
+    P.className = "color-picker-input-container";
     const k = document.createElement("button");
-    return k.className = "color-picker-copy-inside", k.textContent = "Copy", T.appendChild(E), T.appendChild(k), g.appendChild(m), g.appendChild(T), t.appendChild(e), t.appendChild(n), t.appendChild(a), t.appendChild(p), t.appendChild(u.container), t.appendChild(g), t.addEventListener("click", (B) => B.stopPropagation()), this.bind(n, r, p, E, m, k, l), t;
+    return k.className = "color-picker-copy-inside", k.textContent = "Copy", P.appendChild(E), P.appendChild(k), g.appendChild(m), g.appendChild(P), t.appendChild(e), t.appendChild(n), t.appendChild(a), t.appendChild(p), t.appendChild(u.container), t.appendChild(g), t.addEventListener("click", (B) => B.stopPropagation()), this.bind(n, r, p, E, m, k, l), t;
   }
   createBackdrop() {
     const t = document.createElement("div");
@@ -2737,7 +2744,7 @@ class Xt {
       const { r: n, g: o, b: a } = S(this.currentColor);
       this.input.value = `rgb(${n}, ${o}, ${a})`;
     } else {
-      const { hue: n, sat: o, lightness: a } = Ut(e, i, s);
+      const { hue: n, sat: o, lightness: a } = Gt(e, i, s);
       this.input.value = `hsl(${Math.round(n)}, ${Math.round(
         o * 100
       )}%, ${Math.round(a * 100)}%)`;
@@ -2789,7 +2796,7 @@ class Xt {
     return this.element;
   }
 }
-class Zt {
+class Kt {
   constructor(t) {
     this.recentScope = "all", this.currentColor = t.initialColor, this.currentOpacity = t.initialOpacity, this.onColorChange = t.onColorChange, t.scope && (this.recentScope = t.scope), this.container = this.createContainer(), this.initializePicker();
   }
@@ -2984,7 +2991,7 @@ class Zt {
   }
   parseHexInput(t) {
     const e = t.startsWith("#") ? t : `#${t}`;
-    return G(e);
+    return U(e);
   }
   parseRgbInput(t) {
     const e = t.match(
@@ -3118,7 +3125,7 @@ const V = class V extends w {
     if (this.previewEl && this.value)
       if (this.value.type === "solid") {
         const t = this.value.stops[0], e = t.opacity ?? 100;
-        this.previewEl.style.background = dt(t.color, e);
+        this.previewEl.style.background = ut(t.color, e);
       } else
         this.previewEl.style.background = N(this.value);
     this.inputEl && this.value && !this.isEditing && (this.inputEl.value = tt(this.value));
@@ -3144,7 +3151,20 @@ const V = class V extends w {
     return e.className = "gradient-input-wrapper", this.previewEl = document.createElement("div"), this.previewEl.className = "gradient-mini-preview", this.previewEl.style.background = this.value ? N(this.value) : "linear-gradient(90deg, #a84b4b 0%, #786666 100%)", this.previewEl.addEventListener("click", (i) => {
       i.preventDefault(), i.stopPropagation(), this.openPopover();
     }), this.inputEl = document.createElement("input"), this.inputEl.type = "text", this.inputEl.className = "gradient-text-input", this.inputEl.placeholder = "Enter gradient CSS or paste color...", this.inputEl.value = this.value ? tt(this.value) : "", this.inputEl.readOnly = !1, this.inputEl.addEventListener("focus", () => {
-      this.isEditing = !0, this.value && (this.inputEl.value = N(this.value));
+      if (this.isEditing = !0, this.value)
+        if (this.value.type === "solid") {
+          const i = this.value.stops[0];
+          if (i) {
+            const s = i.color.toUpperCase(), n = i.opacity ?? 100;
+            if (n === 100)
+              this.inputEl.value = s;
+            else {
+              const a = Math.round(n / 100 * 255).toString(16).toUpperCase().padStart(2, "0");
+              this.inputEl.value = `${s}${a}`;
+            }
+          }
+        } else
+          this.inputEl.value = N(this.value);
     }), this.inputEl.addEventListener("blur", () => {
       this.isEditing = !1, this.value && (this.inputEl.value = tt(this.value));
     }), this.inputEl.addEventListener(
@@ -3162,11 +3182,11 @@ const V = class V extends w {
       a.stopPropagation();
     });
     const t = document.createElement("div");
-    t.className = "gradient-popover-header";
+    t.className = "gradient-popover-header", t.style.cursor = "move";
     const e = document.createElement("span");
     e.textContent = "Fill";
     const i = document.createElement("button");
-    i.type = "button", i.className = "gradient-popover-close", i.innerHTML = mt, i.addEventListener("click", () => this.closePopover()), t.appendChild(e), t.appendChild(i);
+    i.type = "button", i.className = "gradient-popover-close", i.innerHTML = ft, i.addEventListener("click", () => this.closePopover()), t.appendChild(e), t.appendChild(i), dt(t, this.popoverEl);
     const s = document.createElement("div");
     s.className = "gradient-editor";
     const n = this.createTypeTabs();
@@ -3193,7 +3213,7 @@ const V = class V extends w {
     if (this.value.type = t, t !== "solid" && (!this.value.stops || this.value.stops.length === 0) && (this.value.stops = [
       { color: "#a84b4b", position: 0, opacity: 100 },
       { color: "#786666", position: 100, opacity: 100 }
-    ]), this.popoverEl) {
+    ]), t !== "solid" && this.value.stops.length < 2 && (this.value.angle = 90), this.popoverEl) {
       const n = this.popoverEl.querySelectorAll(".gradient-type-tab");
       n.forEach((l) => l.classList.remove("active"));
       const o = n[0], a = n[1];
@@ -3207,7 +3227,7 @@ const V = class V extends w {
   }
   renderSolid(t) {
     (!this.value || !this.value.stops || !this.value.stops.length) && (this.value || (this.value = this.defaultValue()), this.value.stops = [{ color: "#000000", position: 0, opacity: 100 }]);
-    const e = this.value.stops[0], i = new Zt({
+    const e = this.value.stops[0], i = new Kt({
       initialColor: e.color,
       initialOpacity: e.opacity ?? 100,
       onColorChange: (s, n) => {
@@ -3234,9 +3254,9 @@ const V = class V extends w {
     const n = document.createElement("option");
     n.value = "radial", n.textContent = "Radial", i.appendChild(s), i.appendChild(n), i.value = this.value.type === "radial" ? "radial" : "linear";
     const o = document.createElement("input");
-    o.type = "text", o.inputMode = "numeric", o.className = "gradient-degree-input", o.value = `${this.value.angle ?? 0}°`, o.style.width = "75px", o.style.textAlign = "center";
+    o.type = "text", o.inputMode = "numeric", o.className = "gradient-degree-input", o.value = `${this.value.angle ?? 90}°`, o.style.width = "75px", o.style.textAlign = "center", (!this.value.angle || this.value.stops.length < 2) && (this.value.angle = 90, o.value = "90°");
     const a = document.createElement("button");
-    a.type = "button", a.className = "gradient-flip-btn", a.innerHTML = _t, i.addEventListener("change", () => {
+    a.type = "button", a.className = "gradient-flip-btn", a.innerHTML = Jt, i.addEventListener("change", () => {
       this.switchType(i.value === "radial" ? "radial" : "linear"), this.updateDegreeVisibility(o);
     }), o.addEventListener("focus", (m) => {
       const f = m.target;
@@ -3320,7 +3340,7 @@ const V = class V extends w {
       (n, o) => n.position - o.position
     );
     i.forEach((n, o) => {
-      var U, nt;
+      var G, nt;
       const a = this.value.stops.findIndex(
         (v, b) => v.position === n.position && v.color === n.color && v.opacity === n.opacity && this.value.stops.slice(0, b).filter(
           (x) => x.position === n.position && x.color === n.color && x.opacity === n.opacity
@@ -3342,21 +3362,21 @@ const V = class V extends w {
       const m = document.createElement("button");
       m.type = "button", m.className = "gstop-color-copy", m.textContent = "Copy", d.appendChild(u), d.appendChild(g), d.appendChild(m);
       const f = document.createElement("button");
-      f.type = "button", f.className = "gstop-del", f.innerHTML = Jt, f.disabled = (((nt = (U = this.value) == null ? void 0 : U.stops) == null ? void 0 : nt.length) || 0) <= 2, r.appendChild(h), r.appendChild(d), r.appendChild(f), e.appendChild(r);
+      f.type = "button", f.className = "gstop-del", f.innerHTML = Xt, f.disabled = (((nt = (G = this.value) == null ? void 0 : G.stops) == null ? void 0 : nt.length) || 0) <= 2, r.appendChild(h), r.appendChild(d), r.appendChild(f), e.appendChild(r);
       const C = document.createElement("span");
       C.className = "gstop-opacity-label", C.textContent = "Opacity";
       const y = document.createElement("div");
       y.className = "gstop-opacity-group";
       const E = document.createElement("input");
       E.type = "range", E.className = "gstop-opacity-slider", E.min = "0", E.max = "100", E.value = String(n.opacity ?? 100);
-      const T = S(n.color);
+      const P = S(n.color);
       E.style.setProperty(
         "--slider-color",
-        `rgb(${T.r}, ${T.g}, ${T.b})`
+        `rgb(${P.r}, ${P.g}, ${P.b})`
       );
       const k = document.createElement("span");
       k.className = "gstop-opacity-value", k.textContent = `${n.opacity ?? 100}%`, y.appendChild(E), y.appendChild(k);
-      const B = new Xt((v, b) => {
+      const B = new Zt((v, b) => {
         g.value = v.replace("#", "").toUpperCase(), u.style.backgroundColor = v, this.value.stops[l].color = v, b !== void 0 && (this.value.stops[l].opacity = b, E.value = String(b), k.textContent = `${b}%`);
         const x = S(v);
         E.style.setProperty(
@@ -3530,16 +3550,16 @@ const V = class V extends w {
 };
 V.openInstance = null;
 let K = V;
-const Kt = `
+const Yt = `
 <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"/>
 </svg>
-`, Yt = `
+`, Qt = `
 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
   <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 Ee extends P {
+class be extends T {
   constructor(t) {
     super({
       title: "Border",
@@ -3547,7 +3567,7 @@ class Ee extends P {
       settings: {
         size: new I({
           title: "Size",
-          icon: Yt,
+          icon: Qt,
           default: (t == null ? void 0 : t.size) ?? 0,
           suffix: "px"
         }),
@@ -3557,7 +3577,7 @@ class Ee extends P {
         }),
         radius: new I({
           title: "Radius",
-          icon: Kt,
+          icon: Yt,
           default: (t == null ? void 0 : t.radius) ?? 12,
           suffix: "px"
         })
@@ -3581,20 +3601,20 @@ class Ee extends P {
     `;
   }
 }
-const Qt = `
+const te = `
 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="13" viewBox="0 0 14 13" fill="none">
   <path d="M1 2.75C1 2.05109 1 1.70163 1.11418 1.42597C1.26642 1.05843 1.55843 0.766422 1.92597 0.614181C2.20163 0.5 2.55109 0.5 3.25 0.5H10.75C11.4489 0.5 11.7984 0.5 12.074 0.614181C12.4416 0.766422 12.7336 1.05843 12.8858 1.42597C13 1.70163 13 2.05109 13 2.75M4.75 12.5H9.25M7 0.5V12.5" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
-`, te = `
+`, ee = `
 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
   <path d="M3 5.75C3 5.05109 3 4.70163 3.11418 4.42597C3.26642 4.05843 3.55843 3.76642 3.92597 3.61418C4.20163 3.5 4.55109 3.5 5.25 3.5H12.75C13.4489 3.5 13.7984 3.5 14.074 3.61418C14.4416 3.76642 14.7336 4.05843 14.8858 4.42597C15 4.70163 15 5.05109 15 5.75M6 15.5H12M7.6875 3.5V15.5M10.3125 3.5V15.5" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>  
-`, ee = `
+`, ie = `
 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
   <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 be extends P {
+class we extends T {
   constructor(t = {}) {
     const { showAlign: e = t.showAlign ?? !0, ...i } = t;
     super({
@@ -3608,7 +3628,7 @@ class be extends P {
           }),
           fontFamily: new it({
             title: "Font",
-            icon: Qt,
+            icon: te,
             default: i.fontFamilyDefault ?? "Satoshi",
             options: i.fontFamilyOptions ?? [
               { name: "Alt", value: "Croco Sans Black Caps Alt" },
@@ -3621,7 +3641,7 @@ class be extends P {
           }),
           fontWeight: new it({
             title: "Weight",
-            icon: te,
+            icon: ee,
             default: i.fontWeightDefault ?? "400",
             options: i.fontWeightOptions ?? [
               { name: "Regular", value: "400" },
@@ -3633,7 +3653,7 @@ class be extends P {
           }),
           fontSize: new I({
             title: "Size",
-            icon: ee,
+            icon: ie,
             default: i.fontSizeDefault ?? 12,
             suffix: "px",
             mobile: i.fontSizeMobileDefault
@@ -3641,7 +3661,7 @@ class be extends P {
         };
         return e ? {
           ...s,
-          align: new Nt({
+          align: new Vt({
             title: "Align",
             default: i.alignDefault ?? "center"
           })
@@ -3719,7 +3739,7 @@ class _ extends w {
     }), i;
   }
 }
-class we extends P {
+class xe extends T {
   constructor(t) {
     super({
       title: "Margins",
@@ -3727,25 +3747,25 @@ class we extends P {
       settings: {
         marginTop: new _({
           title: "Top",
-          icon: ie,
+          icon: se,
           suffix: "px",
           default: (t == null ? void 0 : t.marginTop) ?? "auto"
         }),
         marginRight: new _({
           title: "Right",
-          icon: se,
+          icon: ne,
           suffix: "px",
           default: (t == null ? void 0 : t.marginRight) ?? 0
         }),
         marginBottom: new _({
           title: "Bottom",
-          icon: ne,
+          icon: oe,
           suffix: "px",
           default: (t == null ? void 0 : t.marginBottom) ?? 0
         }),
         marginLeft: new _({
           title: "Left",
-          icon: oe,
+          icon: ae,
           suffix: "px",
           default: (t == null ? void 0 : t.marginLeft) ?? 0
         })
@@ -3762,16 +3782,16 @@ class we extends P {
     `;
   }
 }
-const ie = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
+const se = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
   <path d="M2.25 16.25H2.2575M2.25 9.5H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M5.625 16.25H5.6325M5.625 9.5H5.6325M12.375 16.25H12.3825M12.375 9.5H12.3825M9 16.25H9.0075M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 16.25H15.7575M15.75 9.5H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M15.75 2.75H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>`, se = `<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.0075M2.25 2.75H2.2575M2.25 9.5H2.2575M2.25 16.25H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M15.75 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`, ne = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
-  <path d="M2.25 2.75H2.2575M2.25 9.5H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M5.625 2.75H5.6325M5.625 9.5H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 2.75H15.7575M15.75 9.5H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M15.75 16.25H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M5.625 2.75H5.6325M5.625 9.5H5.6325M5.625 16.25H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M12.375 16.25H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 16.25H9.0075M9 12.875H9.0075M9 6.125H9.0075M2.25 2.75H2.2575M2.25 9.5H2.2575M2.25 16.25H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M15.75 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`, oe = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
+  <path d="M2.25 2.75H2.2575M2.25 9.5H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M5.625 2.75H5.6325M5.625 9.5H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 2.75H15.7575M15.75 9.5H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M15.75 16.25H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`, ae = `<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 xe extends P {
+class Le extends T {
   constructor(t) {
     super({
       title: "Background Image",
@@ -3781,7 +3801,7 @@ class xe extends P {
           ...t == null ? void 0 : t.uploadProps,
           default: (t == null ? void 0 : t.backgroundImage) ?? ""
         }),
-        opacity: new St({
+        opacity: new It({
           default: (t == null ? void 0 : t.opacity) ?? 100
         }),
         backgroundColor: new R({
@@ -3811,38 +3831,38 @@ class xe extends P {
   }
 }
 export {
-  Nt as AlignSetting,
-  ye as AnimationSetting,
-  xe as BackgroundSettingSet,
-  Ee as BorderSettingSet,
-  ce as ButtonSetting,
+  Vt as AlignSetting,
+  Ee as AnimationSetting,
+  Le as BackgroundSettingSet,
+  be as BorderSettingSet,
+  he as ButtonSetting,
   M as ColorSetting,
   R as ColorWithOpacitySetting,
-  he as DimensionSetting,
-  me as GapSetting,
+  pe as DimensionSetting,
+  fe as GapSetting,
   K as GradientSetting,
-  be as HeaderTypographySettingSet,
-  pe as HeightSetting,
-  re as HtmlSetting,
-  fe as MarginBottomSetting,
-  we as MarginSettingGroup,
-  ve as MarginTopSetting,
-  Ce as MultiLanguageSetting,
+  we as HeaderTypographySettingSet,
+  de as HeightSetting,
+  ce as HtmlSetting,
+  ve as MarginBottomSetting,
+  xe as MarginSettingGroup,
+  Ce as MarginTopSetting,
+  ye as MultiLanguageSetting,
   I as NumberSetting,
-  St as OpacitySetting,
-  ue as SelectApiSettings,
+  It as OpacitySetting,
+  ge as SelectApiSettings,
   it as SelectSetting,
   w as Setting,
-  P as SettingGroup,
-  xt as StringSetting,
-  bt as TabSettingGroup,
-  bt as TabsSettingGroup,
-  ge as Toggle,
+  T as SettingGroup,
+  Lt as StringSetting,
+  wt as TabSettingGroup,
+  wt as TabsSettingGroup,
+  me as Toggle,
   pt as UploadSetting,
-  de as WidthSetting,
-  le as asSettingGroupWithSettings,
-  wt as createSettingGroup,
-  ae as createTabSettingGroup,
+  ue as WidthSetting,
+  re as asSettingGroupWithSettings,
+  xt as createSettingGroup,
+  le as createTabSettingGroup,
   D as isSetting,
   at as isSettingChild,
   L as isSettingGroup,