builder-settings-types 0.0.269 → 0.0.270

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

@@ -237,7 +237,7 @@ function X(p) {
   return p instanceof T;
 }
 function H(p) {
-  return p instanceof z;
+  return p instanceof U;
 }
 function ct(p) {
   return X(p) || H(p);
@@ -810,11 +810,11 @@ const it = class it {
   }
 };
 it.hiddenElements = /* @__PURE__ */ new Set();
-let z = it;
+let U = it;
 function Zt(p) {
   return new bt(p);
 }
-class bt extends z {
+class bt extends U {
   constructor(t) {
     super(t);
     const e = Object.keys(this.settings)[0];
@@ -866,7 +866,7 @@ class bt extends z {
   }
 }
 function wt(p) {
-  return new z(p);
+  return new U(p);
 }
 function Yt(p) {
   return p;
@@ -1155,7 +1155,7 @@ class Kt extends T {
     return e.addEventListener("input", i), e.addEventListener("change", i), e.addEventListener("blur", s), t.appendChild(e), t;
   }
 }
-class U extends T {
+class z extends T {
   constructor(t) {
     super(t), this.inputType = "number", this.inputElement = null, this.mobileValue = t.mobile, this.validateProps(), this.value = this.validateValue(this.value);
   }
@@ -1219,7 +1219,7 @@ const Mt = `
   <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 U {
+class St extends z {
   constructor(t = {}) {
     const e = {
       title: "Opacity",
@@ -1450,14 +1450,14 @@ class te extends T {
     this.value || (this.value = {
       width: e,
       height: i
-    }), this.minWidth = t.minWidth ?? 0, this.maxWidth = t.maxWidth, this.minHeight = t.minHeight ?? 0, this.maxHeight = t.maxHeight, this.locked = t.locked ?? !1, this.value.height > 0 && (this.aspectRatio = this.value.width / this.value.height), this.widthSetting = new U({
+    }), this.minWidth = t.minWidth ?? 0, this.maxWidth = t.maxWidth, this.minHeight = t.minHeight ?? 0, this.maxHeight = t.maxHeight, this.locked = t.locked ?? !1, this.value.height > 0 && (this.aspectRatio = this.value.width / this.value.height), this.widthSetting = new z({
       title: "Width",
       default: this.value.width,
       suffix: "px",
       minValue: this.minWidth,
       maxValue: this.maxWidth,
       icon: Vt
-    }), this.heightSetting = new U({
+    }), this.heightSetting = new z({
       title: "Height",
       default: this.value.height,
       suffix: "px",
@@ -1714,7 +1714,7 @@ class pt extends T {
     }, t;
   }
 }
-class ee extends U {
+class ee extends z {
   constructor(t = {}) {
     super({
       ...t,
@@ -1735,7 +1735,7 @@ class ee extends U {
 const $t = `<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 ie extends U {
+class ie extends z {
   constructor(t = {}) {
     super({
       ...t,
@@ -2014,33 +2014,33 @@ class oe extends T {
     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 ae extends U {
+class ae extends z {
   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 Rt = `<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 le extends U {
+class le extends z {
   constructor(t = {}) {
     super({
       ...t,
       minValue: t.minValue ?? 0,
       maxValue: t.maxValue ?? 1e3,
-      icon: t.icon || Ft,
+      icon: t.icon || Rt,
       title: t.title || "Margin Top",
       default: t.default ?? 20,
       wrapperClassName: "margin-top-wrapper " + (t.wrapperClassName || "")
@@ -2296,7 +2296,7 @@ function lt(p, t) {
     }
     s.style.display = "grid", n.style.display = "none", a.forEach((l) => {
       const r = document.createElement("button");
-      r.type = "button", r.className = "color-picker-recent-swatch", r.title = l, r.setAttribute("aria-label", `Use color ${l}`), r.style.setProperty("--recent-color", l), r.addEventListener("click", () => p(l)), s.appendChild(r);
+      r.type = "button", r.className = "color-picker-recent-swatch", r.title = l, r.setAttribute("aria-label", `Use color ${l}`), r.style.background = l, r.style.borderColor = l, r.addEventListener("click", () => p(l)), s.appendChild(r);
     });
   };
   return o(), {
@@ -2363,12 +2363,9 @@ class ht {
     h.className = "color-picker-opacity", this.opacitySlider = h;
     const d = document.createElement("div");
     d.className = "color-picker-opacity-marker", this.opacityMarker = d, h.appendChild(d);
-    const C = lt(
-      (E) => {
-        this.setColor(E), this.queueRecentColor(E);
-      },
-      this.recentScope
-    );
+    const C = lt((E) => {
+      this.setColor(E), this.queueRecentColor(E);
+    }, this.recentScope);
     this.recentColorsSection = C;
     const u = document.createElement("div");
     u.className = "color-picker-format-section";
@@ -2645,17 +2642,39 @@ class he extends T {
       !s && !n && !a && this.closePopover();
     }, this.detectChange = t.detectChange, this.forText = t.forText || !1;
   }
-  setValue(t) {
-    t ? (this.value = t, this.value.stops && this.value.stops.forEach((e) => {
-      e.opacity === void 0 && (e.opacity = 100);
-    })) : this.value = {
+  getDefaultValue() {
+    const t = this.props.default || {
       type: "linear",
       angle: 90,
       stops: [
         { color: "#a84b4b", position: 0, opacity: 100 },
         { color: "#786666", position: 100, opacity: 100 }
       ]
-    }, this.updateUI(), this.isPopoverOpen && this.refreshPopoverContent(), this.onChange && this.onChange(this.value), this.detectChange && this.detectChange(this.value);
+    };
+    return this.normalizeGradientValue(t);
+  }
+  normalizeGradientValue(t) {
+    const e = t.stops && t.stops.length > 0 ? t.stops : [{ color: "#000000", position: 0, opacity: 100 }];
+    return {
+      type: t.type && ["linear", "radial", "solid"].includes(t.type) ? t.type : "linear",
+      angle: typeof t.angle == "number" ? t.angle : 90,
+      stops: e.map((i, s) => ({
+        color: i.color || "#000000",
+        position: typeof i.position == "number" ? i.position : e.length === 1 ? 0 : Math.round(s / (e.length - 1) * 100),
+        opacity: i.opacity === void 0 || Number.isNaN(i.opacity) ? 100 : i.opacity
+      }))
+    };
+  }
+  resolveValueFromString(t) {
+    const e = (t || "").trim();
+    if (!e)
+      return null;
+    const i = this.parseGradientCSS(e);
+    return i ? this.normalizeGradientValue(i) : null;
+  }
+  setValue(t) {
+    let e = null;
+    typeof t == "string" ? e = this.resolveValueFromString(t) : t && (e = this.normalizeGradientValue(t)), e || (e = this.getDefaultValue()), this.value = e, this.updateUI(), this.isPopoverOpen && this.refreshPopoverContent(), this.onChange && this.onChange(this.value), this.detectChange && this.detectChange(this.value);
   }
   updateUI() {
     if (this.previewElement && this.value)
@@ -2823,7 +2842,9 @@ class he extends T {
     (!this.value.stops || this.value.stops.length === 0) && (this.value.stops = [{ color: "#000000", position: 0, opacity: 100 }]);
     let i = this.value.stops[0].color || "#000000", s = this.value.stops[0].opacity !== void 0 ? this.value.stops[0].opacity : 100;
     const n = () => {
-      this.value && (!this.value.stops || this.value.stops.length === 0) && (this.value.stops = [{ color: i, position: 0, opacity: s }]);
+      this.value && (!this.value.stops || this.value.stops.length === 0) && (this.value.stops = [
+        { color: i, position: 0, opacity: s }
+      ]);
     }, o = document.createElement("div");
     o.className = "gstop-row solid-row";
     const a = document.createElement("div");
@@ -2953,12 +2974,9 @@ class he extends T {
         }
       },
       "solid"
-    ), q = lt(
-      (w) => {
-        O.applyColor(w);
-      },
-      "solid"
-    );
+    ), q = lt((w) => {
+      O.applyColor(w);
+    }, "solid");
     y = () => q.refresh(), s.appendChild(q.container), s.appendChild(C);
     const S = this.setupOpacitySlider(
       h,
@@ -3019,12 +3037,9 @@ class he extends T {
         }
       },
       "gradient"
-    ), y = lt(
-      (E) => {
-        M.applyColor(E);
-      },
-      "gradient"
-    );
+    ), y = lt((E) => {
+      M.applyColor(E);
+    }, "gradient");
     return L = () => y.refresh(), s.appendChild(y.container), s.appendChild(h), s;
   }
   setupEmbeddedColorPicker(t, e, i, s, n, o, a, l, r, c, h, d, C = "gradient") {
@@ -3047,8 +3062,8 @@ class he extends T {
           o.value = u;
           break;
         case "rgb":
-          const { r: $, g: F, b: _ } = this.hexToRgb(u);
-          o.value = `rgb(${$}, ${F}, ${_})`;
+          const { r: $, g: R, b: _ } = this.hexToRgb(u);
+          o.value = `rgb(${$}, ${R}, ${_})`;
           break;
         case "hsl":
           const { hue: G, sat: Z, lightness: st } = this.hsvToHsl(x, k, I);
@@ -3069,8 +3084,8 @@ class he extends T {
       g = Math.max(0.1, Math.min(358.9, g));
       const x = parseFloat(e.style.left || "50%") / 100, k = parseFloat(e.style.top || "50%") / 100;
       t.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${g}, 100%, 50%))`;
-      const I = x, $ = 1 - k, F = this.hsvToHex(g, I, $);
-      y(F, m);
+      const I = x, $ = 1 - k, R = this.hsvToHex(g, I, $);
+      y(R, m);
     }, N = (g) => {
       const x = t.getBoundingClientRect(), k = Math.max(0, Math.min(1, (g.clientX - x.left) / x.width)), I = Math.max(0, Math.min(1, (g.clientY - x.top) / x.height));
       e.style.left = `${k * 100}%`, e.style.top = `${I * 100}%`, S(k, 1 - I);
@@ -3100,21 +3115,21 @@ class he extends T {
       else if (k === "rgb") {
         const $ = x.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
         if ($) {
-          const F = parseInt($[1]), _ = parseInt($[2]), G = parseInt($[3]);
-          F <= 255 && _ <= 255 && G <= 255 && (I = `#${F.toString(16).padStart(2, "0")}${_.toString(16).padStart(2, "0")}${G.toString(16).padStart(2, "0")}`);
+          const R = parseInt($[1]), _ = parseInt($[2]), G = parseInt($[3]);
+          R <= 255 && _ <= 255 && G <= 255 && (I = `#${R.toString(16).padStart(2, "0")}${_.toString(16).padStart(2, "0")}${G.toString(16).padStart(2, "0")}`);
         }
       } else if (k === "hsl") {
         const $ = x.match(/hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)/);
         if ($) {
-          const F = parseInt($[1]), _ = parseInt($[2]) / 100, G = parseInt($[3]) / 100;
-          if (F <= 360 && _ <= 1 && G <= 1) {
+          const R = parseInt($[1]), _ = parseInt($[2]) / 100, G = parseInt($[3]) / 100;
+          if (R <= 360 && _ <= 1 && G <= 1) {
             const Z = G + _ * Math.min(G, 1 - G), st = Z === 0 ? 0 : 2 * (1 - G / Z);
-            I = this.hsvToHex(F, st, Z);
+            I = this.hsvToHex(R, st, Z);
           }
         }
       }
       I && O(I);
-    }, R = () => {
+    }, F = () => {
       E(), M();
     }, B = () => {
       E();
@@ -3123,14 +3138,14 @@ class he extends T {
         o.select(), document.execCommand("copy");
       });
     };
-    E(), t.addEventListener("mousedown", D), t.addEventListener("click", (g) => g.stopPropagation()), i.addEventListener("mousedown", P), i.addEventListener("click", (g) => g.stopPropagation()), n.addEventListener("change", B), o.addEventListener("input", V), o.addEventListener("blur", R), o.addEventListener("keydown", (g) => {
-      g.key === "Enter" && (g.preventDefault(), R(), o.blur());
+    E(), t.addEventListener("mousedown", D), t.addEventListener("click", (g) => g.stopPropagation()), i.addEventListener("mousedown", P), i.addEventListener("click", (g) => g.stopPropagation()), n.addEventListener("change", B), o.addEventListener("input", V), o.addEventListener("blur", F), o.addEventListener("keydown", (g) => {
+      g.key === "Enter" && (g.preventDefault(), F(), o.blur());
     }), a.addEventListener("click", gt);
     const mt = async () => {
       if ("EyeDropper" in window)
         try {
-          const k = (await new window.EyeDropper().open()).sRGBHex, { h: I, s: $, v: F } = this.hexToHsv(k);
-          s.style.left = `${I / 360 * 100}%`, e.style.left = `${$ * 100}%`, e.style.top = `${(1 - F) * 100}%`, t.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${I}, 100%, 50%))`, y(k, m), M();
+          const k = (await new window.EyeDropper().open()).sRGBHex, { h: I, s: $, v: R } = this.hexToHsv(k);
+          s.style.left = `${I / 360 * 100}%`, e.style.left = `${$ * 100}%`, e.style.top = `${(1 - R) * 100}%`, t.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${I}, 100%, 50%))`, y(k, m), M();
         } catch (g) {
           console.log("User cancelled eyedropper or error occurred:", g);
         }
@@ -3315,10 +3330,10 @@ class he extends T {
           this.value.stops[n].position = P, w.value = `${P}%`;
           const V = (A = this.popoverElement) == null ? void 0 : A.querySelector(
             ".gradient-preview"
-          ), R = V == null ? void 0 : V.querySelector(
+          ), F = V == null ? void 0 : V.querySelector(
             ".gradient-handles"
           );
-          V && R && this.createGradientHandles(R, V), this.updateGradientPreview(), this.updateUI(), this.triggerChange();
+          V && F && this.createGradientHandles(F, V), this.updateGradientPreview(), this.updateUI(), this.triggerChange();
         }
       }), l.addEventListener("focus", (S) => {
         const w = S.target, N = w.value.replace("%", "");
@@ -3356,10 +3371,10 @@ class he extends T {
             }
             const V = (A = this.popoverElement) == null ? void 0 : A.querySelector(
               ".gradient-preview"
-            ), R = V == null ? void 0 : V.querySelector(
+            ), F = V == null ? void 0 : V.querySelector(
               ".gradient-handles"
             );
-            V && R && this.createGradientHandles(R, V), this.updateGradientPreview(), this.updateUI(), this.triggerChange();
+            V && F && this.createGradientHandles(F, V), this.updateGradientPreview(), this.updateUI(), this.triggerChange();
           }
         },
         "gradient"
@@ -3384,10 +3399,10 @@ class he extends T {
           }
           const V = (A = this.popoverElement) == null ? void 0 : A.querySelector(
             ".gradient-preview"
-          ), R = V == null ? void 0 : V.querySelector(
+          ), F = V == null ? void 0 : V.querySelector(
             ".gradient-handles"
           );
-          V && R && this.createGradientHandles(R, V), this.updateGradientPreview(), this.updateUI(), this.triggerChange();
+          V && F && this.createGradientHandles(F, V), this.updateGradientPreview(), this.updateUI(), this.triggerChange();
         }
       });
       const v = () => {
@@ -3712,13 +3727,13 @@ const Gt = `
   <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 de extends z {
+class de extends U {
   constructor(t) {
     super({
       title: "Border",
       collapsed: t == null ? void 0 : t.collapsed,
       settings: {
-        size: new U({
+        size: new z({
           title: "Size",
           icon: Wt,
           default: (t == null ? void 0 : t.size) ?? 0,
@@ -3727,7 +3742,7 @@ class de extends z {
         color: new j({
           default: (t == null ? void 0 : t.color) ?? "0, 0, 30"
         }),
-        radius: new U({
+        radius: new z({
           title: "Radius",
           icon: Gt,
           default: (t == null ? void 0 : t.radius) ?? 12,
@@ -3748,11 +3763,11 @@ class de extends z {
     `;
   }
 }
-const Ut = `
+const zt = `
 <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>
-`, zt = `
+`, Ut = `
 <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>  
@@ -3761,7 +3776,7 @@ const Ut = `
   <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 pe extends z {
+class pe extends U {
   constructor(t = {}) {
     const { showAlign: e = t.showAlign ?? !0, ...i } = t;
     super({
@@ -3774,7 +3789,7 @@ class pe extends z {
           }),
           fontFamily: new at({
             title: "Font",
-            icon: Ut,
+            icon: zt,
             default: i.fontFamilyDefault ?? "Satoshi",
             options: i.fontFamilyOptions ?? [
               { name: "Alt", value: "Croco Sans Black Caps Alt" },
@@ -3787,7 +3802,7 @@ class pe extends z {
           }),
           fontWeight: new at({
             title: "Weight",
-            icon: zt,
+            icon: Ut,
             default: i.fontWeightDefault ?? "400",
             options: i.fontWeightOptions ?? [
               { name: "Regular", value: "400" },
@@ -3797,7 +3812,7 @@ class pe extends z {
             getOptions: i.fontWeightGetOptions,
             getOptionsAsync: i.fontWeightGetOptionsAsync
           }),
-          fontSize: new U({
+          fontSize: new z({
             title: "Size",
             icon: jt,
             default: i.fontSizeDefault ?? 12,
@@ -3873,7 +3888,7 @@ class Q extends T {
     }), i;
   }
 }
-class ue extends z {
+class ue extends U {
   constructor(t) {
     super({
       title: "Margins",
@@ -3925,7 +3940,7 @@ const qt = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewB
 </svg>`, Xt = `<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 ge extends z {
+class ge extends U {
   constructor(t) {
     super({
       title: "Background Image",
@@ -3982,12 +3997,12 @@ export {
   ue as MarginSettingGroup,
   le as MarginTopSetting,
   re as MultiLanguageSetting,
-  U as NumberSetting,
+  z as NumberSetting,
   St as OpacitySetting,
   se as SelectApiSettings,
   at as SelectSetting,
   T as Setting,
-  z as SettingGroup,
+  U as SettingGroup,
   xt as StringSetting,
   bt as TabSettingGroup,
   bt as TabsSettingGroup,

package/dist/chevron-down.svg

@@ -1,5 +1,5 @@
-<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="chevron-down">
-<path id="Icon" d="M4 6.5L8 10.5L12 6.5" stroke="#344054" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-</svg>
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="chevron-down">
+<path id="Icon" d="M4 6.5L8 10.5L12 6.5" stroke="#344054" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

package/dist/colors.svg

@@ -1,3 +1,3 @@
-<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-<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>
+<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<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>