@billgangcom/theme-lib 1.8.0 → 1.8.1

package/dist/ui.es.js

@@ -1,19 +1,19 @@
-import { j as t, I as m, a as T, c as F, S as I, T as G, C as Y, b as O, B as U, v as R } from "./index-D2fsOZUo.js";
-import { g as ts, h as es, e as ss, M as ns, P as os, R as cs, d as ls, f as is } from "./index-D2fsOZUo.js";
-import j from "react";
-const W = "_wrapper_1g82c_2", X = "_alignmentBlock_1g82c_8", Z = "_title_1g82c_15", tt = "_subtitle_1g82c_22", et = "_alignmentContent_1g82c_29", st = "_alignments_1g82c_35", nt = "_alignment_1g82c_8", ot = "_circle_1g82c_54", ct = "_paddings_1g82c_61", lt = "_padding_1g82c_61", it = "_input_1g82c_79", v = {
-  wrapper: W,
-  alignmentBlock: X,
-  title: Z,
-  subtitle: tt,
-  alignmentContent: et,
-  alignments: st,
-  alignment: nt,
-  circle: ot,
-  paddings: ct,
-  padding: lt,
-  input: it
-}, at = [
+import { j as t, I as g, a as I, c as U, S as P, T as q, C as J, b as D, D as et, H as st, B as K, v as E, u as nt, d as ot } from "./index-C6aV8YdJ.js";
+import { h as rs, i as ds, f as us, M as _s, P as ps, R as ms, e as hs, g as gs } from "./index-C6aV8YdJ.js";
+import v from "react";
+const ct = "_wrapper_1g82c_2", lt = "_alignmentBlock_1g82c_8", it = "_title_1g82c_15", at = "_subtitle_1g82c_22", rt = "_alignmentContent_1g82c_29", dt = "_alignments_1g82c_35", ut = "_alignment_1g82c_8", _t = "_circle_1g82c_54", pt = "_paddings_1g82c_61", mt = "_padding_1g82c_61", ht = "_input_1g82c_79", $ = {
+  wrapper: ct,
+  alignmentBlock: lt,
+  title: it,
+  subtitle: at,
+  alignmentContent: rt,
+  alignments: dt,
+  alignment: ut,
+  circle: _t,
+  paddings: pt,
+  padding: mt,
+  input: ht
+}, gt = [
   "topLeft",
   "top",
   "topRight",
@@ -23,8 +23,8 @@ const W = "_wrapper_1g82c_2", X = "_alignmentBlock_1g82c_8", Z = "_title_1g82c_1
   "bottomLeft",
   "bottom",
   "bottomRight"
-], rt = ["left", "top", "right", "bottom"], Ve = (d) => {
-  const { alignment: s, padding: o, setPadding: n, setAlignment: l } = d;
+], xt = ["left", "top", "right", "bottom"], cs = (d) => {
+  const { alignment: s, padding: o, setPadding: c, setAlignment: l } = d;
   function e() {
     switch (s) {
       case "left":
@@ -43,22 +43,22 @@ const W = "_wrapper_1g82c_2", X = "_alignmentBlock_1g82c_8", Z = "_title_1g82c_1
         return "center";
     }
   }
-  return /* @__PURE__ */ t.jsxs("div", { className: v.layout, children: [
-    /* @__PURE__ */ t.jsx("h3", { className: v.title, children: "Layout" }),
-    /* @__PURE__ */ t.jsxs("div", { className: v.alignmentBlock, children: [
-      /* @__PURE__ */ t.jsx("h5", { className: v.subtitle, children: "Alignment" }),
-      /* @__PURE__ */ t.jsxs("div", { className: v.alignmentContent, children: [
-        /* @__PURE__ */ t.jsx("div", { className: v.alignments, children: at.map((c) => /* @__PURE__ */ t.jsxs(
+  return /* @__PURE__ */ t.jsxs("div", { className: $.layout, children: [
+    /* @__PURE__ */ t.jsx("h3", { className: $.title, children: "Layout" }),
+    /* @__PURE__ */ t.jsxs("div", { className: $.alignmentBlock, children: [
+      /* @__PURE__ */ t.jsx("h5", { className: $.subtitle, children: "Alignment" }),
+      /* @__PURE__ */ t.jsxs("div", { className: $.alignmentContent, children: [
+        /* @__PURE__ */ t.jsx("div", { className: $.alignments, children: gt.map((n) => /* @__PURE__ */ t.jsxs(
           "div",
           {
             onClick: () => {
-              l(c);
+              l(n);
             },
-            className: v.alignment,
+            className: $.alignment,
             children: [
-              c !== s && /* @__PURE__ */ t.jsx("div", { className: v.circle }),
-              c === s && /* @__PURE__ */ t.jsx(
-                m,
+              n !== s && /* @__PURE__ */ t.jsx("div", { className: $.circle }),
+              n === s && /* @__PURE__ */ t.jsx(
+                g,
                 {
                   name: `text-align-${e()}`,
                   fill: "#FF3F19",
@@ -68,25 +68,25 @@ const W = "_wrapper_1g82c_2", X = "_alignmentBlock_1g82c_8", Z = "_title_1g82c_1
               )
             ]
           },
-          c
+          n
         )) }),
-        /* @__PURE__ */ t.jsx("div", { className: v.paddings, children: rt.map((c) => /* @__PURE__ */ t.jsxs("label", { className: v.padding, children: [
+        /* @__PURE__ */ t.jsx("div", { className: $.paddings, children: xt.map((n) => /* @__PURE__ */ t.jsxs("label", { className: $.padding, children: [
           /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-            m,
+            g,
             {
-              name: `align-${c}`,
+              name: `align-${n}`,
               width: 20,
               height: 20
             }
           ) }),
           /* @__PURE__ */ t.jsx(
-            T,
+            I,
             {
               type: "text",
-              value: String(o[c]),
-              onChange: (a) => n({
+              value: String(o[n]),
+              onChange: (i) => c({
                 ...o,
-                [c]: Number(a)
+                [n]: Number(i)
               }),
               paddingless: !0,
               borderless: !0
@@ -96,116 +96,123 @@ const W = "_wrapper_1g82c_2", X = "_alignmentBlock_1g82c_8", Z = "_title_1g82c_1
       ] })
     ] })
   ] });
-}, dt = "_subtitle_2zbxx_1", ut = "_header_2zbxx_8", _t = "_text_2zbxx_9", pt = "_top_2zbxx_16", mt = "_itemsBlock_2zbxx_23", S = {
-  subtitle: dt,
-  header: ut,
-  text: _t,
-  top: pt,
-  itemsBlock: mt
-}, ht = "_typeTexts_3zlec_1", gt = "_block_3zlec_7", bt = "_active_3zlec_18", E = {
-  typeTexts: ht,
-  block: gt,
-  active: bt
-}, xt = ["bold", "italic", "underline", "strike-through", "code"], q = (d) => {
-  const { typeText: s, setTypeText: o } = d;
-  return /* @__PURE__ */ t.jsx("div", { className: E.typeTexts, children: xt.map((n) => /* @__PURE__ */ t.jsx(
+}, bt = "_subtitle_2zbxx_1", ft = "_header_2zbxx_8", vt = "_text_2zbxx_9", jt = "_top_2zbxx_16", kt = "_itemsBlock_2zbxx_23", O = {
+  subtitle: bt,
+  header: ft,
+  text: vt,
+  top: jt,
+  itemsBlock: kt
+}, yt = "_typeTexts_3zlec_1", $t = "_block_3zlec_7", wt = "_active_3zlec_18", H = {
+  typeTexts: yt,
+  block: $t,
+  active: wt
+}, Bt = ["bold", "italic", "underline", "strike-through", "code"], Q = (d) => {
+  const { typesText: s, setTypesText: o } = d;
+  return /* @__PURE__ */ t.jsx("div", { className: H.typeTexts, children: Bt.map((c) => /* @__PURE__ */ t.jsx(
     "div",
     {
-      className: F(E.block, {
-        [E.active]: s === n
+      className: U(H.block, {
+        [H.active]: s.includes(c)
       }),
-      onClick: () => o(n),
+      onClick: () => {
+        const l = [...s];
+        if (l.includes(c)) {
+          const e = l.filter((n) => n !== c);
+          o(e);
+        } else
+          l.push(c), o(l);
+      },
       children: /* @__PURE__ */ t.jsx(
-        m,
+        g,
         {
-          name: `text-${n}`,
-          fill: s === n ? "#252525" : "#757575",
+          name: `text-${c}`,
+          fill: s.includes(c) ? "#252525" : "#757575",
           width: 20,
           height: 20
         }
       )
     },
-    String(n)
+    String(c)
   )) });
-}, ft = (d) => {
+}, Nt = (d) => {
   const {
-    typeText: s,
+    typesText: s,
     isActiveText: o,
-    setIsActiveText: n,
+    setIsActiveText: c,
     text: l,
     setText: e,
-    setTypeText: c,
-    title: a,
-    subtitle: r = "Items"
+    setTypesText: n,
+    title: i,
+    subtitle: h = "Items"
   } = d;
-  return /* @__PURE__ */ t.jsxs("div", { className: S.text, children: [
-    (a || o) && /* @__PURE__ */ t.jsxs("div", { className: S.top, children: [
-      a && /* @__PURE__ */ t.jsx("h3", { className: S.title, children: a }),
-      o && n && /* @__PURE__ */ t.jsx(
-        I,
+  return /* @__PURE__ */ t.jsxs("div", { className: O.text, children: [
+    (i || o) && /* @__PURE__ */ t.jsxs("div", { className: O.top, children: [
+      i && /* @__PURE__ */ t.jsx("h3", { className: O.title, children: i }),
+      o && c && /* @__PURE__ */ t.jsx(
+        P,
         {
           current: o,
-          onChange: (u) => n(u)
+          onChange: (j) => c(j)
         }
       )
     ] }),
-    /* @__PURE__ */ t.jsxs("div", { className: S.itemsBlock, children: [
-      /* @__PURE__ */ t.jsx("h5", { className: S.subtitle, children: r }),
+    /* @__PURE__ */ t.jsxs("div", { className: O.itemsBlock, children: [
+      /* @__PURE__ */ t.jsx("h5", { className: O.subtitle, children: h }),
       /* @__PURE__ */ t.jsx(
-        G,
+        q,
         {
-          onChange: (u) => e(u),
+          onChange: (j) => e(j),
           value: l,
           maxLength: 150
         }
       ),
       /* @__PURE__ */ t.jsx(
-        q,
+        Q,
         {
-          typeText: s,
-          setTypeText: c
+          typesText: s,
+          setTypesText: n
         }
       )
     ] })
   ] });
-}, jt = "_subtitle_14b87_1", vt = "_header_14b87_8", kt = "_text_14b87_9", yt = "_productsBlock_14b87_10", $t = "_top_14b87_22", wt = "_itemsBlock_14b87_29", Nt = "_typeTexts_14b87_35", Bt = "_block_14b87_41", Ct = "_active_14b87_52", Tt = "_products_14b87_10", It = "_product_14b87_10", Pt = "_button_14b87_70", St = "_image_14b87_80", At = "_info_14b87_87", Ot = "_name_14b87_98", Lt = "_buttons_14b87_102", Rt = "_modal_14b87_108", zt = "_link_14b87_125", Et = "_modalOptions_14b87_131", b = {
-  subtitle: jt,
-  header: vt,
-  text: kt,
-  productsBlock: yt,
-  top: $t,
-  itemsBlock: wt,
-  typeTexts: Nt,
-  block: Bt,
-  active: Ct,
-  products: Tt,
-  product: It,
-  button: Pt,
-  image: St,
-  info: At,
-  name: Ot,
-  buttons: Lt,
-  modal: Rt,
-  link: zt,
-  modalOptions: Et
-}, Dt = (d) => {
-  const { activeItem: s, setActiveItem: o, popupPosition: n, modalOptions: l } = d;
-  return console.log(s, l), /* @__PURE__ */ t.jsxs(
+}, Ct = "_subtitle_1nl8x_1", Tt = "_header_1nl8x_8", It = "_text_1nl8x_9", Pt = "_productsBlock_1nl8x_10", St = "_top_1nl8x_22", At = "_itemsBlock_1nl8x_29", Ot = "_typeTexts_1nl8x_35", Lt = "_block_1nl8x_41", Dt = "_active_1nl8x_52", Rt = "_products_1nl8x_10", Et = "_product_1nl8x_10", zt = "_button_1nl8x_70", Ht = "_image_1nl8x_80", Mt = "_info_1nl8x_87", Ft = "_name_1nl8x_98", Gt = "_buttons_1nl8x_102", Yt = "_modal_1nl8x_108", Ut = "_link_1nl8x_126", qt = "_modalOptions_1nl8x_132", f = {
+  subtitle: Ct,
+  header: Tt,
+  text: It,
+  productsBlock: Pt,
+  top: St,
+  itemsBlock: At,
+  typeTexts: Ot,
+  block: Lt,
+  active: Dt,
+  products: Rt,
+  product: Et,
+  button: zt,
+  image: Ht,
+  info: Mt,
+  name: Ft,
+  buttons: Gt,
+  modal: Yt,
+  link: Ut,
+  modalOptions: qt
+}, Jt = (d) => {
+  const { activeItem: s, setActiveItem: o, popupPosition: c, modalOptions: l } = d;
+  return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: b.modal,
+      className: f.modal,
       onClick: (e) => {
         e.stopPropagation();
       },
       style: {
-        top: `${n.top}px`,
-        left: `${n.left}px`
+        top: `${c.top}px`,
+        left: `${c.left}px`
       },
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: b.top, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: f.top, children: [
           /* @__PURE__ */ t.jsx("h3", { children: s.name }),
           /* @__PURE__ */ t.jsx(
-            m,
+            g,
             {
               name: "x",
               height: 20,
@@ -215,54 +222,54 @@ const W = "_wrapper_1g82c_2", X = "_alignmentBlock_1g82c_8", Z = "_title_1g82c_1
             }
           )
         ] }),
-        /* @__PURE__ */ t.jsx("div", { className: b.modalOptions, children: l.map((e) => {
+        /* @__PURE__ */ t.jsx("div", { className: f.modalOptions, children: l.map((e) => {
           if (e.type === "image")
             return /* @__PURE__ */ t.jsx(
-              Y,
+              J,
               {
                 label: "Put up an attractive image",
-                onChange: (c) => {
-                  const a = {
+                onChange: (n) => {
+                  const i = {
                     ...s,
-                    [e.field]: c[0]
+                    [e.field]: n[0]
                   };
-                  o(a);
+                  o(i);
                 }
               }
             );
           if (e.type === "text")
             return /* @__PURE__ */ t.jsx(
-              ft,
+              Nt,
               {
-                typeText: s[e.field.type] || "bold",
-                setTypeText: (c) => {
-                  const a = {
+                typesText: s[e.field.type],
+                setTypesText: (n) => {
+                  const i = {
                     ...s,
-                    [e.field.type]: c
+                    [e.field.type]: n
                   };
-                  o(a);
+                  o(i);
                 },
                 text: s[e.field.text] || "",
-                setText: (c) => {
-                  const a = {
+                setText: (n) => {
+                  const i = {
                     ...s,
-                    [e.field.text]: c
+                    [e.field.text]: n
                   };
-                  o(a);
+                  o(i);
                 },
                 subtitle: e.label
               }
             );
           if (e.type === "input")
             return /* @__PURE__ */ t.jsx(
-              T,
+              I,
               {
-                onChange: (c) => {
-                  const a = {
+                onChange: (n) => {
+                  const i = {
                     ...s,
-                    [e.field]: c
+                    [e.field]: n
                   };
-                  o(a);
+                  o(i);
                 },
                 value: s[e.field] || "",
                 label: e.label,
@@ -270,16 +277,16 @@ const W = "_wrapper_1g82c_2", X = "_alignmentBlock_1g82c_8", Z = "_title_1g82c_1
               }
             );
           if (e.type === "inputSwitch")
-            return /* @__PURE__ */ t.jsxs("div", { className: b.link, children: [
+            return /* @__PURE__ */ t.jsxs("div", { className: f.link, children: [
               /* @__PURE__ */ t.jsx(
-                T,
+                I,
                 {
-                  onChange: (c) => {
-                    const a = {
+                  onChange: (n) => {
+                    const i = {
                       ...s,
-                      [e.field.text]: c
+                      [e.field.text]: n
                     };
-                    o(a);
+                    o(i);
                   },
                   value: s[e.field.text] || "",
                   label: e.inputLabel,
@@ -287,24 +294,31 @@ const W = "_wrapper_1g82c_2", X = "_alignmentBlock_1g82c_8", Z = "_title_1g82c_1
                 }
               ),
               /* @__PURE__ */ t.jsx(
-                I,
+                P,
                 {
                   current: !!s[e.field.switch] || !1,
-                  label: e.switchLabel
+                  label: e.switchLabel,
+                  onChange: (n) => {
+                    const i = {
+                      ...s,
+                      [e.field.switch]: n
+                    };
+                    o(i);
+                  }
                 }
               )
             ] });
           if (e.type === "list")
             return /* @__PURE__ */ t.jsx(
-              Yt,
+              Zt,
               {
                 items: s[e.field] || [],
-                setItems: (c) => {
-                  const a = {
+                setItems: (n) => {
+                  const i = {
                     ...s,
-                    [e.field]: c
+                    [e.field]: n
                   };
-                  o(a);
+                  o(i);
                 },
                 itemsType: "select",
                 draggable: e.draggable || !1,
@@ -316,15 +330,15 @@ const W = "_wrapper_1g82c_2", X = "_alignmentBlock_1g82c_8", Z = "_title_1g82c_1
             );
           if (e.type === "select")
             return /* @__PURE__ */ t.jsx(
-              O,
+              D,
               {
                 options: e.itemsOptions,
-                onChange: (c) => {
-                  const a = {
+                onChange: (n) => {
+                  const i = {
                     ...s,
-                    [e.field]: c
+                    [e.field]: n
                   };
-                  o(a);
+                  o(i);
                 },
                 label: e.label,
                 value: s[e.field] || "String"
@@ -334,83 +348,108 @@ const W = "_wrapper_1g82c_2", X = "_alignmentBlock_1g82c_8", Z = "_title_1g82c_1
       ]
     }
   );
-}, Ht = "_other_1wtgi_1", Mt = "_subtitle_1wtgi_7", Ft = "_items_1wtgi_14", D = {
-  other: Ht,
-  subtitle: Mt,
-  items: Ft
-}, Gt = (d) => {
+}, Kt = "_other_1wtgi_1", Qt = "_subtitle_1wtgi_7", Vt = "_items_1wtgi_14", M = {
+  other: Kt,
+  subtitle: Qt,
+  items: Vt
+}, Wt = (d) => {
   const { items: s, title: o = "Other" } = d;
-  return /* @__PURE__ */ t.jsxs("div", { className: D.other, children: [
-    /* @__PURE__ */ t.jsx("h5", { className: D.subtitle, children: o }),
-    /* @__PURE__ */ t.jsx("div", { className: D.items, children: s.map((n) => /* @__PURE__ */ t.jsx(
-      I,
+  return /* @__PURE__ */ t.jsxs("div", { className: M.other, children: [
+    /* @__PURE__ */ t.jsx("h5", { className: M.subtitle, children: o }),
+    /* @__PURE__ */ t.jsx("div", { className: M.items, children: s.map((c) => /* @__PURE__ */ t.jsx(
+      P,
       {
-        current: n.isItem,
-        onChange: (l) => n.setIsItem(l),
-        label: n.label,
+        current: c.isItem,
+        onChange: (l) => c.setIsItem(l),
+        label: c.label,
         hasBackground: !0,
         paddingless: !1
       }
     )) })
   ] });
-}, Yt = (d) => {
+}, Xt = (d) => {
+  const { index: s, moveProduct: o, children: c } = d, [, l] = nt({
+    accept: "product",
+    hover(i) {
+      i.index !== s && (o(i.index, s), i.index = s);
+    }
+  }), [{ isDragging: e }, n] = ot({
+    type: "product",
+    item: { index: s },
+    collect: (i) => ({
+      isDragging: i.isDragging()
+    })
+  });
+  return /* @__PURE__ */ t.jsx(
+    "div",
+    {
+      ref: (i) => n(l(i)),
+      className: `${f.product} ${e ? f.dragging : ""}`,
+      children: c
+    }
+  );
+}, Zt = (d) => {
   const {
     isActiveItems: s,
     setIsActiveItems: o,
-    items: n,
+    items: c,
     setItems: l,
     other: e,
-    title: c,
-    subtitle: a,
-    editable: r = !0,
-    draggable: u = !1,
-    withImage: p = !1,
-    deletable: y = !0,
-    addable: k = !0,
-    itemsType: x,
-    itemsPlaceholder: $ = "",
-    itemsOptions: g,
-    hasRangeSelector: L = !1,
-    rangeSelectorOptions: H,
-    modalOptions: M
-  } = d, [B, P] = j.useState(null), [J, K] = j.useState({
+    title: n,
+    subtitle: i,
+    editable: h = !0,
+    draggable: j = !1,
+    withImage: r = !1,
+    deletable: p = !0,
+    addable: u = !0,
+    itemsType: k,
+    itemsPlaceholder: x = "",
+    itemsOptions: _,
+    hasRangeSelector: R = !1,
+    rangeSelectorOptions: F,
+    modalOptions: G,
+    addableOptions: z = {}
+  } = d, [C, S] = v.useState(null), [V, W] = v.useState({
     top: 0,
     left: 0
-  });
-  j.useEffect(() => {
-    const i = () => {
-      P(null);
+  }), X = (a, y) => {
+    const w = [...c], [b] = w.splice(a, 1);
+    w.splice(y, 0, b), l(w);
+  };
+  v.useEffect(() => {
+    const a = () => {
+      S(null);
     };
-    return document.body.addEventListener("click", i), P(null), () => {
-      P(null), document.body.removeEventListener("click", i);
+    return document.body.addEventListener("click", a), S(null), () => {
+      S(null), document.body.removeEventListener("click", a);
     };
-  }, []), j.useEffect(() => {
-    if (B) {
-      const i = [...n].map((h) => h.id === B.id ? B : h);
-      l(i);
+  }, []), v.useEffect(() => {
+    if (C) {
+      const a = [...c].map((y) => y.id === C.id ? C : y);
+      l(a);
     }
-  }, [B]), console.log(n);
-  const Q = (i, h) => {
-    i.stopPropagation();
-    const N = i.target.getBoundingClientRect(), w = 100, f = window.innerHeight;
-    let z = N.top + window.scrollY;
-    z + w > f && (z = f - w - 20), K({
-      top: z - 80,
-      left: N.left - 30
-    }), P(h);
+  }, [C]);
+  const Z = (a, y) => {
+    a.stopPropagation();
+    const w = a.target.getBoundingClientRect(), b = 100, A = window.innerHeight;
+    let B = w.top + window.scrollY;
+    B + b > A && (B = A - b - 20), W({
+      top: B - 80,
+      left: w.left - 30
+    }), S(y);
   };
-  function V(i) {
-    if (p)
-      return i ? /* @__PURE__ */ t.jsx(
+  function tt(a) {
+    if (r)
+      return a ? /* @__PURE__ */ t.jsx(
         "img",
         {
-          src: `https://imagedelivery.net/${i}/w=1000`,
+          src: `https://imagedelivery.net/${a}/w=1000`,
           alt: "image",
           width: 16,
           height: 16
         }
       ) : /* @__PURE__ */ t.jsx(
-        m,
+        g,
         {
           name: "image",
           width: 16,
@@ -419,138 +458,149 @@ const W = "_wrapper_1g82c_2", X = "_alignmentBlock_1g82c_8", Z = "_title_1g82c_1
         }
       );
   }
-  return /* @__PURE__ */ t.jsxs("div", { className: b.productsBlock, children: [
-    (c || s) && /* @__PURE__ */ t.jsxs("div", { className: b.top, children: [
-      c && /* @__PURE__ */ t.jsx("h3", { className: b.title, children: c }),
-      s && /* @__PURE__ */ t.jsx(
+  const Y = (a, y) => {
+    const w = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+      j && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
+        g,
+        {
+          name: "drag",
+          hoverable: !0,
+          width: 20,
+          height: 20
+        }
+      ) }),
+      k === "select" && /* @__PURE__ */ t.jsx(
+        D,
+        {
+          onChange: (b) => {
+            const B = [...c].map((N) => N.id === a.id ? {
+              ...a,
+              name: b
+            } : N);
+            l(B);
+          },
+          value: a.name,
+          options: _,
+          leftAddon: tt(a.image)
+        }
+      ),
+      k === "input" && /* @__PURE__ */ t.jsx(
         I,
+        {
+          onChange: (b) => {
+            const B = [...c].map((N) => N.id === a.id ? {
+              ...a,
+              name: b
+            } : N);
+            l(B);
+          },
+          value: a.name,
+          placeholder: x
+        }
+      ),
+      k === "image" && /* @__PURE__ */ t.jsx(
+        J,
+        {
+          onChange: (b) => {
+            const B = [...c].map((N) => N.id === a.id ? {
+              ...a,
+              image: b[0]
+            } : N);
+            l(B);
+          }
+        }
+      ),
+      /* @__PURE__ */ t.jsxs("div", { className: f.buttons, children: [
+        h && /* @__PURE__ */ t.jsx(
+          g,
+          {
+            name: "sliders",
+            hoverable: !0,
+            width: 20,
+            height: 20,
+            onClick: (b) => Z(b, a)
+          }
+        ),
+        p && /* @__PURE__ */ t.jsx(
+          g,
+          {
+            name: "trash",
+            hoverable: !0,
+            width: 20,
+            height: 20,
+            fill: "#C12A2A",
+            onClick: () => l(c.filter((b) => b.id !== a.id))
+          }
+        )
+      ] })
+    ] });
+    return j ? /* @__PURE__ */ t.jsx(
+      Xt,
+      {
+        product: a,
+        index: y,
+        moveProduct: X,
+        children: w
+      },
+      a.id
+    ) : /* @__PURE__ */ t.jsx(
+      "div",
+      {
+        className: f.product,
+        children: w
+      },
+      a.id
+    );
+  };
+  return /* @__PURE__ */ t.jsxs("div", { className: f.productsBlock, children: [
+    (n || s !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: f.top, children: [
+      n && /* @__PURE__ */ t.jsx("h3", { className: f.title, children: n }),
+      s !== void 0 && /* @__PURE__ */ t.jsx(
+        P,
         {
           current: s,
-          onChange: (i) => o == null ? void 0 : o(i)
+          onChange: (a) => o == null ? void 0 : o(a)
         }
       )
     ] }),
-    B && r && M && /* @__PURE__ */ t.jsx(
-      Dt,
+    C && h && G && /* @__PURE__ */ t.jsx(
+      Jt,
       {
-        activeItem: B,
-        setActiveItem: P,
-        popupPosition: J,
-        modalOptions: M
+        activeItem: C,
+        setActiveItem: S,
+        popupPosition: V,
+        modalOptions: G
       }
     ),
-    L && H && /* @__PURE__ */ t.jsx(Je, { ...H }),
-    /* @__PURE__ */ t.jsxs("div", { className: b.products, children: [
-      a && /* @__PURE__ */ t.jsx("h5", { className: b.subtitle, children: a }),
-      n.map((i) => /* @__PURE__ */ t.jsxs(
-        "div",
-        {
-          className: b.product,
-          children: [
-            u && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-              m,
-              {
-                name: "drag",
-                hoverable: !0,
-                width: 20,
-                height: 20
-              }
-            ) }),
-            x === "select" && /* @__PURE__ */ t.jsx(
-              O,
-              {
-                onChange: (h) => {
-                  const w = [...n].map((f) => f.id === i.id ? {
-                    ...i,
-                    name: h
-                  } : f);
-                  l(w);
-                },
-                value: i.name,
-                options: g,
-                leftAddon: V(i.image)
-              }
-            ),
-            x === "input" && /* @__PURE__ */ t.jsx(
-              T,
-              {
-                onChange: (h) => {
-                  const w = [...n].map((f) => f.id === i.id ? {
-                    ...i,
-                    name: h
-                  } : f);
-                  l(w);
-                },
-                value: i.name,
-                placeholder: $
-              }
-            ),
-            x === "image" && /* @__PURE__ */ t.jsx(
-              Y,
-              {
-                onChange: (h) => {
-                  const w = [...n].map((f) => f.id === i.id ? {
-                    ...i,
-                    image: h[0]
-                  } : f);
-                  l(w);
-                }
-              }
-            ),
-            /* @__PURE__ */ t.jsxs("div", { className: b.buttons, children: [
-              r && /* @__PURE__ */ t.jsx(
-                m,
-                {
-                  name: "sliders",
-                  hoverable: !0,
-                  width: 20,
-                  height: 20,
-                  onClick: (h) => {
-                    Q(h, i);
-                  }
-                }
-              ),
-              y && /* @__PURE__ */ t.jsx(
-                m,
-                {
-                  name: "trash",
-                  hoverable: !0,
-                  onClick: () => {
-                    const h = n.filter((N) => N.id !== i.id);
-                    l(h);
-                  },
-                  width: 20,
-                  height: 20,
-                  fill: "#C12A2A"
-                }
-              )
-            ] })
-          ]
-        },
-        i.id
-      )),
-      k && /* @__PURE__ */ t.jsxs(
-        U,
+    R && F && /* @__PURE__ */ t.jsx(ss, { ...F }),
+    /* @__PURE__ */ t.jsxs("div", { className: f.products, children: [
+      i && /* @__PURE__ */ t.jsx("h5", { className: f.subtitle, children: i }),
+      j ? /* @__PURE__ */ t.jsx(et, { backend: st, children: c.map((a, y) => Y(a, y)) }) : c.map((a, y) => Y(a, y)),
+      u && /* @__PURE__ */ t.jsxs(
+        K,
         {
-          className: b.button,
+          className: f.button,
           size: "s",
           onClick: () => {
-            const i = [...n];
-            x === "select" ? i.push({
-              name: g[0] || `Product ${n.length + 1}`,
-              id: R()
-            }) : x === "input" ? i.push({
+            const a = [...c];
+            k === "select" ? a.push({
+              name: _[0] || `Product ${c.length + 1}`,
+              id: E(),
+              ...z
+            }) : k === "input" ? a.push({
               name: "",
-              id: R()
-            }) : i.push({
-              name: `Image ${n.length + 1}`,
-              id: R()
-            }), l(i);
+              id: E(),
+              ...z
+            }) : a.push({
+              name: `Image ${c.length + 1}`,
+              id: E(),
+              ...z
+            }), l(a);
           },
           children: [
             /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
             /* @__PURE__ */ t.jsx(
-              m,
+              g,
               {
                 name: "plus",
                 width: 16,
@@ -561,47 +611,57 @@ const W = "_wrapper_1g82c_2", X = "_alignmentBlock_1g82c_8", Z = "_title_1g82c_1
         }
       )
     ] }),
-    e !== void 0 && /* @__PURE__ */ t.jsx(Gt, { items: e })
+    e !== void 0 && /* @__PURE__ */ t.jsx(Wt, { items: e })
   ] });
-}, Ut = "_subtitle_41klp_1", qt = "_header_41klp_8", Jt = "_text_41klp_9", Kt = "_productsBlock_41klp_10", Qt = "_buttonsBlock_41klp_11", Vt = "_top_41klp_21", Wt = "_itemsBlock_41klp_28", Xt = "_typeTexts_41klp_34", Zt = "_block_41klp_40", te = "_active_41klp_51", ee = "_products_41klp_10", se = "_product_41klp_10", ne = "_button_41klp_11", oe = "_image_41klp_79", ce = "_info_41klp_86", le = "_name_41klp_97", ie = "_buttons_41klp_11", ae = "_modal_41klp_107", re = "_other_41klp_124", de = "_options_41klp_130", C = {
-  subtitle: Ut,
-  header: qt,
-  text: Jt,
-  productsBlock: Kt,
-  buttonsBlock: Qt,
-  top: Vt,
-  itemsBlock: Wt,
-  typeTexts: Xt,
-  block: Zt,
-  active: te,
-  products: ee,
-  product: se,
-  button: ne,
-  image: oe,
-  info: ce,
-  name: le,
-  buttons: ie,
-  modal: ae,
-  other: re,
-  options: de
-}, ue = (d) => {
-  const { activeButton: s, setActiveButton: o, popupPosition: n } = d, [l, e] = j.useState(s.typeText), [c, a] = j.useState(s.destination), [r, u] = j.useState(s.link || "");
-  return /* @__PURE__ */ t.jsxs(
+}, te = "_subtitle_41klp_1", ee = "_header_41klp_8", se = "_text_41klp_9", ne = "_productsBlock_41klp_10", oe = "_buttonsBlock_41klp_11", ce = "_top_41klp_21", le = "_itemsBlock_41klp_28", ie = "_typeTexts_41klp_34", ae = "_block_41klp_40", re = "_active_41klp_51", de = "_products_41klp_10", ue = "_product_41klp_10", _e = "_button_41klp_11", pe = "_image_41klp_79", me = "_info_41klp_86", he = "_name_41klp_97", ge = "_buttons_41klp_11", xe = "_modal_41klp_107", be = "_other_41klp_124", fe = "_options_41klp_130", T = {
+  subtitle: te,
+  header: ee,
+  text: se,
+  productsBlock: ne,
+  buttonsBlock: oe,
+  top: ce,
+  itemsBlock: le,
+  typeTexts: ie,
+  block: ae,
+  active: re,
+  products: de,
+  product: ue,
+  button: _e,
+  image: pe,
+  info: me,
+  name: he,
+  buttons: ge,
+  modal: xe,
+  other: be,
+  options: fe
+}, ve = (d) => {
+  const { activeButton: s, setActiveButton: o, popupPosition: c } = d, [l, e] = v.useState(s.typesText), [n, i] = v.useState(s.destination), [h, j] = v.useState(s.link || ""), [r, p] = v.useState(s.text || "");
+  return v.useEffect(() => {
+    o({
+      ...s,
+      ...{
+        text: r,
+        link: h,
+        destination: n,
+        typesText: l
+      }
+    });
+  }, [l, n, h, r]), /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: C.modal,
-      onClick: (p) => {
-        p.stopPropagation();
+      className: T.modal,
+      onClick: (u) => {
+        u.stopPropagation();
       },
       style: {
-        top: `${n.top}px`,
-        left: `${n.left}px`
+        top: `${c.top}px`,
+        left: `${c.left}px`
       },
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: C.top, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: T.top, children: [
           /* @__PURE__ */ t.jsx("h3", { children: s.type }),
           /* @__PURE__ */ t.jsx(
-            m,
+            g,
             {
               name: "x",
               height: 20,
@@ -611,18 +671,18 @@ const W = "_wrapper_1g82c_2", X = "_alignmentBlock_1g82c_8", Z = "_title_1g82c_1
             }
           )
         ] }),
-        /* @__PURE__ */ t.jsxs("div", { className: C.options, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: T.options, children: [
           /* @__PURE__ */ t.jsx(
-            O,
+            D,
             {
               label: "Destination",
-              onChange: (p) => a(p),
+              onChange: (u) => i(u),
               options: ["Go to Page", "Open Link"],
-              value: c
+              value: n
             }
           ),
-          c === "Go to Page" ? /* @__PURE__ */ t.jsx(
-            O,
+          n === "Go to Page" ? /* @__PURE__ */ t.jsx(
+            D,
             {
               label: "Go to",
               onChange: () => {
@@ -631,127 +691,131 @@ const W = "_wrapper_1g82c_2", X = "_alignmentBlock_1g82c_8", Z = "_title_1g82c_1
               value: "Homepage"
             }
           ) : /* @__PURE__ */ t.jsx(
-            T,
+            I,
             {
-              onChange: (p) => u(p),
-              value: r,
+              onChange: (u) => j(u),
+              value: h,
               placeholder: "https://",
               label: "Link"
             }
           ),
           /* @__PURE__ */ t.jsx(
-            I,
+            P,
             {
               current: !1,
               label: "Open in new tab"
             }
           ),
           /* @__PURE__ */ t.jsx(
-            G,
+            q,
             {
-              onChange: () => {
-              },
-              value: "Lorem ipsum dolor sit amet com",
+              onChange: (u) => p(u),
+              value: r,
               label: "Text",
               maxLength: 150
             }
           ),
           /* @__PURE__ */ t.jsx(
-            q,
+            Q,
             {
-              typeText: l,
-              setTypeText: e
+              typesText: l,
+              setTypesText: e
             }
           )
         ] })
       ]
     }
   );
-}, _e = "_subtitle_1y5sw_1", pe = "_header_1y5sw_8", me = "_text_1y5sw_9", he = "_productsBlock_1y5sw_10", ge = "_buttonsBlock_1y5sw_11", be = "_top_1y5sw_22", xe = "_itemsBlock_1y5sw_29", fe = "_typeTexts_1y5sw_35", je = "_block_1y5sw_41", ve = "_active_1y5sw_52", ke = "_products_1y5sw_10", ye = "_product_1y5sw_10", $e = "_button_1y5sw_11", we = "_image_1y5sw_80", Ne = "_info_1y5sw_87", Be = "_name_1y5sw_98", Ce = "_buttons_1y5sw_11", Te = "_modal_1y5sw_108", Ie = "_other_1y5sw_125", Pe = "_options_1y5sw_131", A = {
-  subtitle: _e,
-  header: pe,
-  text: me,
-  productsBlock: he,
-  buttonsBlock: ge,
-  top: be,
-  itemsBlock: xe,
-  typeTexts: fe,
-  block: je,
-  active: ve,
-  products: ke,
-  product: ye,
-  button: $e,
-  image: we,
-  info: Ne,
-  name: Be,
-  buttons: Ce,
-  modal: Te,
-  other: Ie,
-  options: Pe
-}, Se = (d) => {
-  const { buttons: s, setButtons: o } = d, [n, l] = j.useState(null), [e, c] = j.useState({
+}, je = "_subtitle_1y5sw_1", ke = "_header_1y5sw_8", ye = "_text_1y5sw_9", $e = "_productsBlock_1y5sw_10", we = "_buttonsBlock_1y5sw_11", Be = "_top_1y5sw_22", Ne = "_itemsBlock_1y5sw_29", Ce = "_typeTexts_1y5sw_35", Te = "_block_1y5sw_41", Ie = "_active_1y5sw_52", Pe = "_products_1y5sw_10", Se = "_product_1y5sw_10", Ae = "_button_1y5sw_11", Oe = "_image_1y5sw_80", Le = "_info_1y5sw_87", De = "_name_1y5sw_98", Re = "_buttons_1y5sw_11", Ee = "_modal_1y5sw_108", ze = "_other_1y5sw_125", He = "_options_1y5sw_131", L = {
+  subtitle: je,
+  header: ke,
+  text: ye,
+  productsBlock: $e,
+  buttonsBlock: we,
+  top: Be,
+  itemsBlock: Ne,
+  typeTexts: Ce,
+  block: Te,
+  active: Ie,
+  products: Pe,
+  product: Se,
+  button: Ae,
+  image: Oe,
+  info: Le,
+  name: De,
+  buttons: Re,
+  modal: Ee,
+  other: ze,
+  options: He
+}, Me = (d) => {
+  const { buttons: s, setButtons: o, deletable: c = !0, addable: l = !0 } = d, [e, n] = v.useState(null), [i, h] = v.useState({
     top: 0,
     left: 0
   });
-  j.useEffect(() => {
+  v.useEffect(() => {
     const r = () => {
-      l(null);
+      n(null);
     };
-    return document.body.addEventListener("click", r), l(null), () => {
-      l(null), document.body.removeEventListener("click", r);
+    return document.body.addEventListener("click", r), n(null), () => {
+      n(null), document.body.removeEventListener("click", r);
     };
-  }, []);
-  const a = (r, u) => {
+  }, []), v.useEffect(() => {
+    if (e) {
+      const r = [...s].map((p) => p.id === e.id ? e : p);
+      o(r);
+    }
+  }, [e]), console.log(s);
+  const j = (r, p) => {
     r.stopPropagation();
-    const p = r.target.getBoundingClientRect(), y = 490, k = window.innerHeight;
-    let x = p.top + window.scrollY;
-    x + y > k && (x = k - y - 20), c({
-      top: x,
-      left: p.left - 30
-    }), l(u);
+    const u = r.target.getBoundingClientRect(), k = 490, x = window.innerHeight;
+    let _ = u.top + window.scrollY;
+    _ + k > x && (_ = x - k - 20), h({
+      top: _,
+      left: u.left - 30
+    }), n(p);
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: A.products, children: [
-    /* @__PURE__ */ t.jsx("h5", { className: A.subtitle, children: "Button Type" }),
+  return /* @__PURE__ */ t.jsxs("div", { className: L.products, children: [
+    /* @__PURE__ */ t.jsx("h5", { className: L.subtitle, children: "Button Type" }),
     s.map((r) => /* @__PURE__ */ t.jsxs(
       "div",
       {
-        className: A.product,
+        className: L.product,
         children: [
           /* @__PURE__ */ t.jsx(
-            O,
+            D,
             {
-              onChange: (u) => {
-                const y = [...s].map((k) => k.id === r.id ? {
+              onChange: (p) => {
+                const k = [...s].map((x) => x.id === r.id ? {
                   ...r,
-                  type: u
-                } : k);
-                o(y);
+                  type: p
+                } : x);
+                o(k);
               },
               value: r.type,
               options: ["Primary", "Secondary", "Tertiary"]
             }
           ),
-          /* @__PURE__ */ t.jsxs("div", { className: A.buttons, children: [
+          /* @__PURE__ */ t.jsxs("div", { className: L.buttons, children: [
             /* @__PURE__ */ t.jsx(
-              m,
+              g,
               {
                 name: "sliders",
                 hoverable: !0,
                 width: 20,
                 height: 20,
-                onClick: (u) => {
-                  a(u, r);
+                onClick: (p) => {
+                  j(p, r);
                 }
               }
             ),
-            /* @__PURE__ */ t.jsx(
-              m,
+            c && /* @__PURE__ */ t.jsx(
+              g,
               {
                 name: "trash",
                 hoverable: !0,
                 onClick: () => {
-                  const u = s.filter((p) => p.id !== r.id);
-                  o(u);
+                  const p = s.filter((u) => u.id !== r.id);
+                  o(p);
                 },
                 width: 20,
                 height: 20,
@@ -763,32 +827,33 @@ const W = "_wrapper_1g82c_2", X = "_alignmentBlock_1g82c_8", Z = "_title_1g82c_1
       },
       r.id
     )),
-    n && /* @__PURE__ */ t.jsx(
-      ue,
+    e && /* @__PURE__ */ t.jsx(
+      ve,
       {
-        activeButton: n,
-        setActiveButton: l,
-        popupPosition: e
+        activeButton: e,
+        setActiveButton: n,
+        popupPosition: i
       }
     ),
-    /* @__PURE__ */ t.jsxs(
-      U,
+    l && /* @__PURE__ */ t.jsxs(
+      K,
       {
-        className: A.button,
+        className: L.button,
         size: "s",
         onClick: () => {
           const r = [...s];
           r.push({
             type: "Primary",
-            id: R(),
-            typeText: "bold",
-            destination: "Go to Page"
+            id: E(),
+            typesText: [],
+            destination: "Go to Page",
+            text: ""
           }), o(r);
         },
         children: [
           /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
           /* @__PURE__ */ t.jsx(
-            m,
+            g,
             {
               name: "plus",
               width: 16,
@@ -799,13 +864,13 @@ const W = "_wrapper_1g82c_2", X = "_alignmentBlock_1g82c_8", Z = "_title_1g82c_1
       }
     )
   ] });
-}, We = (d) => {
-  const { isActiveButtons: s, setIsActiveButtons: o, buttons: n, setButtons: l } = d;
-  return /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsxs("div", { className: C.buttonsBlock, children: [
-    /* @__PURE__ */ t.jsxs("div", { className: C.top, children: [
-      /* @__PURE__ */ t.jsx("h3", { className: C.title, children: "Buttons" }),
+}, ls = (d) => {
+  const { isActiveButtons: s, setIsActiveButtons: o, buttons: c, setButtons: l } = d;
+  return /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsxs("div", { className: T.buttonsBlock, children: [
+    /* @__PURE__ */ t.jsxs("div", { className: T.top, children: [
+      /* @__PURE__ */ t.jsx("h3", { className: T.title, children: "Buttons" }),
       /* @__PURE__ */ t.jsx(
-        I,
+        P,
         {
           current: s,
           onChange: (e) => o(e)
@@ -813,63 +878,63 @@ const W = "_wrapper_1g82c_2", X = "_alignmentBlock_1g82c_8", Z = "_title_1g82c_1
       )
     ] }),
     /* @__PURE__ */ t.jsx(
-      Se,
+      Me,
       {
-        buttons: n,
+        buttons: c,
         setButtons: l
       }
     )
   ] }) });
-}, Ae = "_wrapper_tn7gb_1", Oe = "_subtitle_tn7gb_7", Le = "_content_tn7gb_14", Re = "_range_tn7gb_21", ze = "_track_tn7gb_26", Ee = "_progress_tn7gb_35", De = "_dots_tn7gb_45", He = "_dot_tn7gb_45", Me = "_active_tn7gb_62", Fe = "_input_tn7gb_74", Ge = "_countBlock_tn7gb_88", Ye = "_count_tn7gb_88", Ue = "_controls_tn7gb_103", qe = "_button_tn7gb_108", _ = {
-  wrapper: Ae,
-  subtitle: Oe,
-  content: Le,
-  range: Re,
-  track: ze,
-  progress: Ee,
-  dots: De,
-  dot: He,
-  active: Me,
-  input: Fe,
-  countBlock: Ge,
-  count: Ye,
-  controls: Ue,
-  button: qe
-}, Je = (d) => {
-  const { label: s, min: o = 1, max: n = 4, step: l = 1, count: e, setCount: c } = d, [a, r] = j.useState(!1), u = Array.from({ length: (n - o) / l + 1 }), p = (e - o) / (n - o) * 100, y = () => {
-    e < n && c(e + l);
-  }, k = () => {
-    e > o && c(e - l);
-  }, x = ($) => {
-    const g = o + $ * l;
-    c(g);
+}, Fe = "_wrapper_tn7gb_1", Ge = "_subtitle_tn7gb_7", Ye = "_content_tn7gb_14", Ue = "_range_tn7gb_21", qe = "_track_tn7gb_26", Je = "_progress_tn7gb_35", Ke = "_dots_tn7gb_45", Qe = "_dot_tn7gb_45", Ve = "_active_tn7gb_62", We = "_input_tn7gb_74", Xe = "_countBlock_tn7gb_88", Ze = "_count_tn7gb_88", ts = "_controls_tn7gb_103", es = "_button_tn7gb_108", m = {
+  wrapper: Fe,
+  subtitle: Ge,
+  content: Ye,
+  range: Ue,
+  track: qe,
+  progress: Je,
+  dots: Ke,
+  dot: Qe,
+  active: Ve,
+  input: We,
+  countBlock: Xe,
+  count: Ze,
+  controls: ts,
+  button: es
+}, ss = (d) => {
+  const { label: s, min: o = 1, max: c = 4, step: l = 1, count: e, setCount: n } = d, [i, h] = v.useState(!1), j = Array.from({ length: (c - o) / l + 1 }), r = (e - o) / (c - o) * 100, p = () => {
+    e < c && n(e + l);
+  }, u = () => {
+    e > o && n(e - l);
+  }, k = (x) => {
+    const _ = o + x * l;
+    n(_);
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: _.wrapper, children: [
-    s && /* @__PURE__ */ t.jsx("h5", { className: _.subtitle, children: s }),
-    /* @__PURE__ */ t.jsxs("div", { className: _.content, children: [
-      /* @__PURE__ */ t.jsxs("div", { className: _.range, children: [
-        /* @__PURE__ */ t.jsx("div", { className: _.track }),
+  return /* @__PURE__ */ t.jsxs("div", { className: m.wrapper, children: [
+    s && /* @__PURE__ */ t.jsx("h5", { className: m.subtitle, children: s }),
+    /* @__PURE__ */ t.jsxs("div", { className: m.content, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: m.range, children: [
+        /* @__PURE__ */ t.jsx("div", { className: m.track }),
         /* @__PURE__ */ t.jsx(
           "div",
           {
-            className: _.progress,
-            style: { width: `${p}%` }
+            className: m.progress,
+            style: { width: `${r}%` }
           }
         ),
-        /* @__PURE__ */ t.jsx("div", { className: _.dots, children: u.map(($, g) => {
-          const L = g <= (e - o) / l;
+        /* @__PURE__ */ t.jsx("div", { className: m.dots, children: j.map((x, _) => {
+          const R = _ <= (e - o) / l;
           return /* @__PURE__ */ t.jsx(
             "button",
             {
-              onClick: () => x(g),
-              className: F(_.dot, {
-                [_.active]: L,
-                [_.inactive]: !L,
-                [_.dragging]: a
+              onClick: () => k(_),
+              className: U(m.dot, {
+                [m.active]: R,
+                [m.inactive]: !R,
+                [m.dragging]: i
               }),
-              "aria-label": `Set value to ${o + g * l}`
+              "aria-label": `Set value to ${o + _ * l}`
             },
-            g
+            _
           );
         }) }),
         /* @__PURE__ */ t.jsx(
@@ -877,43 +942,43 @@ const W = "_wrapper_1g82c_2", X = "_alignmentBlock_1g82c_8", Z = "_title_1g82c_1
           {
             type: "range",
             min: o,
-            max: n,
+            max: c,
             step: l,
             value: e,
-            onChange: ($) => c(Number($.target.value)),
-            onMouseDown: () => r(!0),
-            onMouseUp: () => r(!1),
-            onTouchStart: () => r(!0),
-            onTouchEnd: () => r(!1),
-            className: _.input
+            onChange: (x) => n(Number(x.target.value)),
+            onMouseDown: () => h(!0),
+            onMouseUp: () => h(!1),
+            onTouchStart: () => h(!0),
+            onTouchEnd: () => h(!1),
+            className: m.input
           }
         )
       ] }),
-      /* @__PURE__ */ t.jsxs("div", { className: _.countBlock, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: m.countBlock, children: [
         /* @__PURE__ */ t.jsx(
-          T,
+          I,
           {
             type: "number",
             min: o,
-            max: n,
+            max: c,
             paddingless: !0,
-            onChange: ($) => {
-              const g = Number($);
-              g > n ? c(n) : g < o ? c(o) : c(g);
+            onChange: (x) => {
+              const _ = Number(x);
+              _ > c ? n(c) : _ < o ? n(o) : n(_);
             },
             value: String(e)
           }
         ),
-        /* @__PURE__ */ t.jsxs("div", { className: _.controls, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: m.controls, children: [
           /* @__PURE__ */ t.jsx(
             "button",
             {
-              onClick: y,
-              disabled: e >= n,
-              className: _.button,
+              onClick: p,
+              disabled: e >= c,
+              className: m.button,
               "aria-label": "Increment count",
               children: /* @__PURE__ */ t.jsx(
-                m,
+                g,
                 {
                   name: "arrow-down",
                   width: 15,
@@ -926,12 +991,12 @@ const W = "_wrapper_1g82c_2", X = "_alignmentBlock_1g82c_8", Z = "_title_1g82c_1
           /* @__PURE__ */ t.jsx(
             "button",
             {
-              onClick: k,
+              onClick: u,
               disabled: e <= o,
-              className: _.button,
+              className: m.button,
               "aria-label": "Decrement count",
               children: /* @__PURE__ */ t.jsx(
-                m,
+                g,
                 {
                   name: "arrow-down",
                   width: 15,
@@ -946,26 +1011,26 @@ const W = "_wrapper_1g82c_2", X = "_alignmentBlock_1g82c_8", Z = "_title_1g82c_1
   ] });
 };
 export {
-  U as Button,
-  Se as ButtonTypeSettings,
-  We as ButtonsSettings,
-  ts as Checkbox,
-  Y as ChooseImage,
-  es as ChooseImageModal,
-  ss as ColorPicker,
-  m as Icon,
-  T as Input,
-  Yt as ItemsSettings,
-  Ve as LayoutSettings,
-  ns as Modal,
-  os as Picker,
-  cs as Radio,
-  Je as RangeSelector,
-  O as Select,
-  ls as Submodal,
-  I as Switch,
-  ft as TextSettings,
-  G as Textarea,
-  is as Tip,
-  q as TypeTexts
+  K as Button,
+  Me as ButtonTypeSettings,
+  ls as ButtonsSettings,
+  rs as Checkbox,
+  J as ChooseImage,
+  ds as ChooseImageModal,
+  us as ColorPicker,
+  g as Icon,
+  I as Input,
+  Zt as ItemsSettings,
+  cs as LayoutSettings,
+  _s as Modal,
+  ps as Picker,
+  ms as Radio,
+  ss as RangeSelector,
+  D as Select,
+  hs as Submodal,
+  P as Switch,
+  Nt as TextSettings,
+  q as Textarea,
+  gs as Tip,
+  Q as TypesText
 };