@billgangcom/theme-lib 1.9.0 → 1.10.0

package/dist/ui.es.js

@@ -1,19 +1,19 @@
-import { j as t, I as m, a as R, c as Z, S as L, T as tt, C as W, b as H, D as et, H as st, B as X, v as G, u as nt, d as ot } from "./index-nLNDQXYl.js";
-import { h as As, i as Ss, f as Os, M as Ds, P as Ls, R as Es, e as Rs, g as Hs } from "./index-nLNDQXYl.js";
-import g from "react";
-const it = "_wrapper_1g82c_2", at = "_alignmentBlock_1g82c_8", rt = "_title_1g82c_15", dt = "_subtitle_1g82c_22", ut = "_alignmentContent_1g82c_29", _t = "_alignments_1g82c_35", pt = "_alignment_1g82c_8", mt = "_circle_1g82c_54", ht = "_paddings_1g82c_61", xt = "_padding_1g82c_61", gt = "_input_1g82c_79", A = {
-  wrapper: it,
-  alignmentBlock: at,
-  title: rt,
-  subtitle: dt,
-  alignmentContent: ut,
-  alignments: _t,
-  alignment: pt,
-  circle: mt,
-  paddings: ht,
-  padding: xt,
-  input: gt
-}, bt = [
+import { j as t, I as m, a as M, c as tt, S as E, T as nt, C as et, b as z, D as ot, H as ct, B as st, v as Y, u as it, d as lt } from "./index-Ca7u1mPN.js";
+import { h as Ls, i as qs, f as Es, M as Rs, P as Hs, R as Ms, e as zs, g as Fs } from "./index-Ca7u1mPN.js";
+import f from "react";
+const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82c_15", pt = "_subtitle_1g82c_22", mt = "_alignmentContent_1g82c_29", ht = "_alignments_1g82c_35", gt = "_alignment_1g82c_8", xt = "_circle_1g82c_54", bt = "_paddings_1g82c_61", ft = "_padding_1g82c_61", vt = "_input_1g82c_79", S = {
+  wrapper: dt,
+  alignmentBlock: ut,
+  title: _t,
+  subtitle: pt,
+  alignmentContent: mt,
+  alignments: ht,
+  alignment: gt,
+  circle: xt,
+  paddings: bt,
+  padding: ft,
+  input: vt
+}, jt = [
   "topLeft",
   "top",
   "topRight",
@@ -23,44 +23,56 @@ const it = "_wrapper_1g82c_2", at = "_alignmentBlock_1g82c_8", rt = "_title_1g82
   "bottomLeft",
   "bottom",
   "bottomRight"
-], ft = ["left", "top", "right", "bottom"], Bs = (d) => {
-  const { alignment: s, padding: c, setPadding: n, setAlignment: a } = d;
-  function e() {
+], kt = ["left", "top", "right", "bottom"], Is = (u) => {
+  const { alignment: s, padding: o, setPadding: c, setAlignment: i } = u;
+  function l() {
     switch (s) {
       case "left":
       case "topLeft":
       case "bottomLeft":
-        return "left";
+        return "TextAlignLeft";
       case "right":
       case "topRight":
       case "bottomRight":
-        return "right";
+        return "TextAlignRight";
       case "center":
       case "top":
       case "bottom":
-        return "center";
+        return "TextAlignCenter";
       default:
-        return "center";
+        return "TextAlignCenter";
     }
   }
-  return /* @__PURE__ */ t.jsxs("div", { className: A.layout, children: [
-    /* @__PURE__ */ t.jsx("h3", { className: A.title, children: "Layout" }),
-    /* @__PURE__ */ t.jsxs("div", { className: A.alignmentBlock, children: [
-      /* @__PURE__ */ t.jsx("h5", { className: A.subtitle, children: "Alignment" }),
-      /* @__PURE__ */ t.jsxs("div", { className: A.alignmentContent, children: [
-        /* @__PURE__ */ t.jsx("div", { className: A.alignments, children: bt.map((o) => /* @__PURE__ */ t.jsxs(
+  function e(n) {
+    switch (n) {
+      case "left":
+        return "AlignLeft";
+      case "right":
+        return "AlignRight";
+      case "top":
+        return "AlignTop";
+      case "bottom":
+        return "AlignBottom";
+    }
+  }
+  return /* @__PURE__ */ t.jsxs("div", { className: S.layout, children: [
+    /* @__PURE__ */ t.jsx("h3", { className: S.title, children: "Layout" }),
+    /* @__PURE__ */ t.jsxs("div", { className: S.alignmentBlock, children: [
+      /* @__PURE__ */ t.jsx("h5", { className: S.subtitle, children: "Alignment" }),
+      /* @__PURE__ */ t.jsxs("div", { className: S.alignmentContent, children: [
+        /* @__PURE__ */ t.jsx("div", { className: S.alignments, children: jt.map((n) => /* @__PURE__ */ t.jsxs(
           "div",
           {
             onClick: () => {
-              a(o);
+              i(n);
             },
-            className: A.alignment,
+            className: S.alignment,
             children: [
-              o !== s && /* @__PURE__ */ t.jsx("div", { className: A.circle }),
-              o === s && /* @__PURE__ */ t.jsx(
+              n !== s && /* @__PURE__ */ t.jsx("div", { className: S.circle }),
+              n === s && /* @__PURE__ */ t.jsx(
                 m,
                 {
-                  name: `text-align-${e()}`,
+                  name: l(),
                   fill: "#FF3F19",
                   width: 22,
                   height: 22
@@ -68,25 +80,25 @@ const it = "_wrapper_1g82c_2", at = "_alignmentBlock_1g82c_8", rt = "_title_1g82
               )
             ]
           },
-          o
+          n
         )) }),
-        /* @__PURE__ */ t.jsx("div", { className: A.paddings, children: ft.map((o) => /* @__PURE__ */ t.jsxs("label", { className: A.padding, children: [
+        /* @__PURE__ */ t.jsx("div", { className: S.paddings, children: kt.map((n) => /* @__PURE__ */ t.jsxs("label", { className: S.padding, children: [
           /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
             m,
             {
-              name: `align-${o}`,
+              name: e(n),
               width: 20,
               height: 20
             }
           ) }),
           /* @__PURE__ */ t.jsx(
-            R,
+            M,
             {
               type: "text",
-              value: String(c[o]),
-              onChange: (i) => n({
-                ...c,
-                [o]: Number(i)
+              value: String(o[n]),
+              onChange: (r) => c({
+                ...o,
+                [n]: Number(r)
               }),
               paddingless: !0,
               borderless: !0
@@ -96,180 +108,197 @@ const it = "_wrapper_1g82c_2", at = "_alignmentBlock_1g82c_8", rt = "_title_1g82
       ] })
     ] })
   ] });
-}, vt = "_subtitle_2zbxx_1", jt = "_header_2zbxx_8", kt = "_text_2zbxx_9", $t = "_top_2zbxx_16", yt = "_itemsBlock_2zbxx_23", M = {
-  subtitle: vt,
-  header: jt,
-  text: kt,
-  top: $t,
-  itemsBlock: yt
-}, wt = "_typeTexts_3zlec_1", Nt = "_block_3zlec_7", Bt = "_active_3zlec_18", Q = {
-  typeTexts: wt,
-  block: Nt,
-  active: Bt
-}, Ct = ["bold", "italic", "underline", "strike-through", "code"], ct = (d) => {
-  const { typesText: s, setTypesText: c } = d;
-  return /* @__PURE__ */ t.jsx("div", { className: Q.typeTexts, children: Ct.map((n) => /* @__PURE__ */ t.jsx(
+}, $t = "_subtitle_2zbxx_1", yt = "_header_2zbxx_8", wt = "_text_2zbxx_9", Nt = "_top_2zbxx_16", Bt = "_itemsBlock_2zbxx_23", U = {
+  subtitle: $t,
+  header: yt,
+  text: wt,
+  top: Nt,
+  itemsBlock: Bt
+}, Ct = "_typeTexts_3zlec_1", Tt = "_block_3zlec_7", Pt = "_active_3zlec_18", W = {
+  typeTexts: Ct,
+  block: Tt,
+  active: Pt
+}, It = ["bold", "italic", "underline", "strike-through", "code"], at = (u) => {
+  const { typesText: s, setTypesText: o } = u;
+  function c(i) {
+    switch (i) {
+      case "bold":
+        return "TextB";
+      case "italic":
+        return "TextItalic";
+      case "code":
+        return "CodeSimple";
+      case "strike-through":
+        return "TextStrikethrough";
+      case "underline":
+        return "TextUnderline";
+    }
+  }
+  return /* @__PURE__ */ t.jsx("div", { className: W.typeTexts, children: It.map((i) => /* @__PURE__ */ t.jsx(
     "div",
     {
-      className: Z(Q.block, {
-        [Q.active]: s.includes(n)
+      className: tt(W.block, {
+        [W.active]: s.includes(i)
       }),
       onClick: () => {
-        const a = [...s];
-        if (a.includes(n)) {
-          const e = a.filter((o) => o !== n);
-          c(e);
+        const l = [...s];
+        if (l.includes(i)) {
+          const e = l.filter((n) => n !== i);
+          o(e);
         } else
-          a.push(n), c(a);
+          l.push(i), o(l);
       },
       children: /* @__PURE__ */ t.jsx(
         m,
         {
-          name: `text-${n}`,
-          fill: s.includes(n) ? "#252525" : "#757575",
+          name: c(i),
+          fill: s.includes(i) ? "#252525" : "#757575",
           width: 20,
           height: 20
         }
       )
     },
-    String(n)
+    String(i)
   )) });
-}, Pt = (d) => {
+}, At = (u) => {
   const {
     typesText: s,
-    isActiveText: c,
-    setIsActiveText: n,
-    text: a,
-    setText: e,
-    setTypesText: o,
-    title: i,
-    subtitle: v = "Items"
-  } = d;
-  return /* @__PURE__ */ t.jsxs("div", { className: M.text, children: [
-    (i || c !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: M.top, children: [
-      i && /* @__PURE__ */ t.jsx("h3", { className: M.title, children: i }),
-      c !== void 0 && n && /* @__PURE__ */ t.jsx(
-        L,
+    isActiveText: o,
+    setIsActiveText: c,
+    text: i,
+    setText: l,
+    setTypesText: e,
+    title: n,
+    subtitle: r = "Items"
+  } = u;
+  return /* @__PURE__ */ t.jsxs("div", { className: U.text, children: [
+    (n || o !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: U.top, children: [
+      n && /* @__PURE__ */ t.jsx("h3", { className: U.title, children: n }),
+      o !== void 0 && c && /* @__PURE__ */ t.jsx(
+        E,
         {
-          current: c,
-          onChange: (j) => n(j)
+          current: o,
+          onChange: (j) => c(j)
         }
       )
     ] }),
-    /* @__PURE__ */ t.jsxs("div", { className: M.itemsBlock, children: [
-      /* @__PURE__ */ t.jsx("h5", { className: M.subtitle, children: v }),
+    /* @__PURE__ */ t.jsxs("div", { className: U.itemsBlock, children: [
+      /* @__PURE__ */ t.jsx("h5", { className: U.subtitle, children: r }),
       /* @__PURE__ */ t.jsx(
-        tt,
+        nt,
         {
-          onChange: (j) => e(j),
-          value: a,
+          onChange: (j) => l(j),
+          value: i,
           maxLength: 150
         }
       ),
       /* @__PURE__ */ t.jsx(
-        ct,
+        at,
         {
           typesText: s,
-          setTypesText: o
+          setTypesText: e
         }
       )
     ] })
   ] });
-}, It = "_subtitle_1nl8x_1", Tt = "_header_1nl8x_8", At = "_text_1nl8x_9", St = "_productsBlock_1nl8x_10", Ot = "_top_1nl8x_22", Dt = "_itemsBlock_1nl8x_29", Lt = "_typeTexts_1nl8x_35", Et = "_block_1nl8x_41", Rt = "_active_1nl8x_52", Ht = "_products_1nl8x_10", zt = "_product_1nl8x_10", Mt = "_button_1nl8x_70", Ft = "_image_1nl8x_80", Gt = "_info_1nl8x_87", Yt = "_name_1nl8x_98", Ut = "_buttons_1nl8x_102", qt = "_modal_1nl8x_108", Jt = "_link_1nl8x_126", Kt = "_modalOptions_1nl8x_132", N = {
-  subtitle: It,
-  header: Tt,
-  text: At,
-  productsBlock: St,
-  top: Ot,
-  itemsBlock: Dt,
-  typeTexts: Lt,
-  block: Et,
-  active: Rt,
-  products: Ht,
-  product: zt,
-  button: Mt,
-  image: Ft,
-  info: Gt,
-  name: Yt,
-  buttons: Ut,
-  modal: qt,
-  link: Jt,
-  modalOptions: Kt
-}, Qt = (d) => {
-  const { activeItem: s, setActiveItem: c, popupPosition: n, modalOptions: a } = d;
+}, St = "_subtitle_11qr1_1", Ot = "_header_11qr1_8", Dt = "_text_11qr1_9", Lt = "_productsBlock_11qr1_10", qt = "_top_11qr1_22", Et = "_itemsBlock_11qr1_29", Rt = "_typeTexts_11qr1_35", Ht = "_block_11qr1_41", Mt = "_active_11qr1_52", zt = "_products_11qr1_10", Ft = "_product_11qr1_10", Gt = "_button_11qr1_70", Ut = "_disabled_11qr1_80", Xt = "_image_11qr1_84", Yt = "_info_11qr1_91", Vt = "_name_11qr1_102", Jt = "_buttons_11qr1_106", Kt = "_modal_11qr1_112", Qt = "_link_11qr1_130", Wt = "_modalOptions_11qr1_136", y = {
+  subtitle: St,
+  header: Ot,
+  text: Dt,
+  productsBlock: Lt,
+  top: qt,
+  itemsBlock: Et,
+  typeTexts: Rt,
+  block: Ht,
+  active: Mt,
+  products: zt,
+  product: Ft,
+  button: Gt,
+  disabled: Ut,
+  image: Xt,
+  info: Yt,
+  name: Vt,
+  buttons: Jt,
+  modal: Kt,
+  link: Qt,
+  modalOptions: Wt
+}, Zt = (u) => {
+  const { activeItem: s, setActiveItem: o, popupPosition: c, modalOptions: i, setIsOpenModal: l } = u;
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: N.modal,
+      className: y.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: N.top, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: y.top, children: [
           /* @__PURE__ */ t.jsx("h3", { children: s.name }),
           /* @__PURE__ */ t.jsx(
             m,
             {
-              name: "x",
+              name: "X",
               height: 20,
               width: 20,
               hoverable: !0,
-              onClick: () => c(null)
+              onClick: () => {
+                o(null), l(!1);
+              }
             }
           )
         ] }),
-        /* @__PURE__ */ t.jsx("div", { className: N.modalOptions, children: a.map((e) => {
+        /* @__PURE__ */ t.jsx("div", { className: y.modalOptions, children: i.map((e) => {
           if (e.type === "image")
             return /* @__PURE__ */ t.jsx(
-              W,
+              et,
               {
                 label: "Put up an attractive image",
-                onChange: (o) => {
-                  const i = {
+                onChange: (n) => {
+                  const r = {
                     ...s,
-                    [e.field]: o
+                    [e.field]: n
                   };
-                  c(i);
+                  o(r);
                 }
               }
             );
           if (e.type === "text")
             return /* @__PURE__ */ t.jsx(
-              Pt,
+              At,
               {
                 typesText: s[e.field.type],
-                setTypesText: (o) => {
-                  const i = {
+                setTypesText: (n) => {
+                  const r = {
                     ...s,
-                    [e.field.type]: o
+                    [e.field.type]: n
                   };
-                  c(i);
+                  o(r);
                 },
                 text: s[e.field.text] || "",
-                setText: (o) => {
-                  const i = {
+                setText: (n) => {
+                  const r = {
                     ...s,
-                    [e.field.text]: o
+                    [e.field.text]: n
                   };
-                  c(i);
+                  o(r);
                 },
                 subtitle: e.label
               }
             );
           if (e.type === "input")
             return /* @__PURE__ */ t.jsx(
-              R,
+              M,
               {
-                onChange: (o) => {
-                  const i = {
+                onChange: (n) => {
+                  const r = {
                     ...s,
-                    [e.field]: o
+                    [e.field]: n
                   };
-                  c(i);
+                  o(r);
                 },
                 value: s[e.field] || "",
                 label: e.label,
@@ -277,16 +306,16 @@ const it = "_wrapper_1g82c_2", at = "_alignmentBlock_1g82c_8", rt = "_title_1g82
               }
             );
           if (e.type === "inputSwitch")
-            return /* @__PURE__ */ t.jsxs("div", { className: N.link, children: [
+            return /* @__PURE__ */ t.jsxs("div", { className: y.link, children: [
               /* @__PURE__ */ t.jsx(
-                R,
+                M,
                 {
-                  onChange: (o) => {
-                    const i = {
+                  onChange: (n) => {
+                    const r = {
                       ...s,
-                      [e.field.text]: o
+                      [e.field.text]: n
                     };
-                    c(i);
+                    o(r);
                   },
                   value: s[e.field.text] || "",
                   label: e.inputLabel,
@@ -294,31 +323,31 @@ const it = "_wrapper_1g82c_2", at = "_alignmentBlock_1g82c_8", rt = "_title_1g82
                 }
               ),
               /* @__PURE__ */ t.jsx(
-                L,
+                E,
                 {
                   current: !!s[e.field.switch] || !1,
                   label: e.switchLabel,
-                  onChange: (o) => {
-                    const i = {
+                  onChange: (n) => {
+                    const r = {
                       ...s,
-                      [e.field.switch]: o
+                      [e.field.switch]: n
                     };
-                    c(i);
+                    o(r);
                   }
                 }
               )
             ] });
           if (e.type === "list")
             return /* @__PURE__ */ t.jsx(
-              te,
+              oe,
               {
                 items: s[e.field] || [],
-                setItems: (o) => {
-                  const i = {
+                setItems: (n) => {
+                  const r = {
                     ...s,
-                    [e.field]: o
+                    [e.field]: n
                   };
-                  c(i);
+                  o(r);
                 },
                 itemsType: "select",
                 draggable: e.draggable || !1,
@@ -330,121 +359,122 @@ const it = "_wrapper_1g82c_2", at = "_alignmentBlock_1g82c_8", rt = "_title_1g82
             );
           if (e.type === "select")
             return /* @__PURE__ */ t.jsx(
-              H,
+              z,
               {
                 options: e.itemsOptions,
-                onChange: (o) => {
-                  const i = {
+                onChange: (n) => {
+                  const r = {
                     ...s,
-                    [e.field]: o
+                    [e.field]: n
                   };
-                  c(i);
+                  o(r);
                 },
                 label: e.label,
-                value: s[e.field] || "String"
+                value: s[e.field] || "String",
+                leftAddon: e.leftAddon && e.leftAddon === "icon" && /* @__PURE__ */ t.jsx(m, { name: s[e.field] })
               }
             );
         }) })
       ]
     }
   );
-}, Vt = "_other_1wtgi_1", Wt = "_subtitle_1wtgi_7", Xt = "_items_1wtgi_14", V = {
-  other: Vt,
-  subtitle: Wt,
-  items: Xt
-}, lt = (d) => {
-  const { items: s, title: c = "Other" } = d;
-  return /* @__PURE__ */ t.jsxs("div", { className: V.other, children: [
-    /* @__PURE__ */ t.jsx("h5", { className: V.subtitle, children: c }),
-    /* @__PURE__ */ t.jsx("div", { className: V.items, children: s.map((n) => /* @__PURE__ */ t.jsx(
-      L,
+}, te = "_other_1wtgi_1", ee = "_subtitle_1wtgi_7", se = "_items_1wtgi_14", Z = {
+  other: te,
+  subtitle: ee,
+  items: se
+}, rt = (u) => {
+  const { items: s, title: o = "Other" } = u;
+  return /* @__PURE__ */ t.jsxs("div", { className: Z.other, children: [
+    /* @__PURE__ */ t.jsx("h5", { className: Z.subtitle, children: o }),
+    /* @__PURE__ */ t.jsx("div", { className: Z.items, children: s.map((c) => /* @__PURE__ */ t.jsx(
+      E,
       {
-        current: n.isItem,
-        onChange: (a) => n.setIsItem(a),
-        label: n.label,
+        current: c.isItem,
+        onChange: (i) => c.setIsItem(i),
+        label: c.label,
         hasBackground: !0,
         paddingless: !1
       }
     )) })
   ] });
-}, Zt = (d) => {
-  const { index: s, moveProduct: c, children: n } = d, [, a] = nt({
+}, ne = (u) => {
+  const { index: s, moveProduct: o, children: c } = u, [, i] = it({
     accept: "product",
-    hover(i) {
-      i.index !== s && (c(i.index, s), i.index = s);
+    hover(n) {
+      n.index !== s && (o(n.index, s), n.index = s);
     }
-  }), [{ isDragging: e }, o] = ot({
+  }), [{ isDragging: l }, e] = lt({
     type: "product",
     item: { index: s },
-    collect: (i) => ({
-      isDragging: i.isDragging()
+    collect: (n) => ({
+      isDragging: n.isDragging()
     })
   });
   return /* @__PURE__ */ t.jsx(
     "div",
     {
-      ref: (i) => o(a(i)),
-      className: `${N.product} ${e ? N.dragging : ""}`,
-      children: n
+      ref: (n) => e(i(n)),
+      className: `${y.product} ${l ? y.dragging : ""}`,
+      children: c
     }
   );
-}, te = (d) => {
+}, oe = (u) => {
   const {
     isActiveItems: s,
-    setIsActiveItems: c,
-    items: n,
-    setItems: a,
-    other: e,
-    title: o,
-    subtitle: i,
-    editable: v = !0,
+    setIsActiveItems: o,
+    items: c,
+    setItems: i,
+    other: l,
+    title: e,
+    subtitle: n,
+    editable: r = !0,
     draggable: j = !1,
-    withImage: u = !1,
-    deletable: b = !0,
-    addable: h = !0,
+    withImage: _ = !1,
+    deletable: v = !0,
+    addable: b = !0,
     itemsType: w,
-    itemsPlaceholder: p = "",
-    itemsOptions: _,
-    hasRangeSelector: I = !1,
-    rangeSelectorOptions: Y,
-    modalOptions: U,
-    addableOptions: z = {}
-  } = d, [S, O] = g.useState(null), [J, K] = g.useState({
+    itemsPlaceholder: h = "",
+    itemsOptions: p,
+    hasRangeSelector: C = !1,
+    rangeSelectorOptions: V,
+    modalOptions: J,
+    addableOptions: F = {},
+    limit: I
+  } = u, [D, L] = f.useState(null), [Q, K] = f.useState({
     top: 0,
     left: 0
-  }), q = (l, $) => {
-    const f = [...n], [x] = f.splice(l, 1);
-    f.splice($, 0, x), a(f);
+  }), [d, g] = f.useState(!1), T = (a, N) => {
+    const P = [...c], [x] = P.splice(a, 1);
+    P.splice(N, 0, x), i(P);
   };
-  g.useEffect(() => {
-    const l = () => {
-      O(null);
+  f.useEffect(() => {
+    const a = () => {
+      L(null), g(!1);
     };
-    return document.body.addEventListener("click", l), O(null), () => {
-      O(null), document.body.removeEventListener("click", l);
+    return document.body.addEventListener("click", a), L(null), g(!1), () => {
+      L(null), g(!1), document.body.removeEventListener("click", a);
     };
-  }, []), g.useEffect(() => {
-    if (S) {
-      const l = [...n].map(($) => $.id === S.id ? S : $);
-      a(l);
+  }, []), f.useEffect(() => {
+    if (D) {
+      const a = [...c].map((N) => N.id === D.id ? D : N);
+      i(a);
     }
-  }, [S]);
-  const r = (l, $) => {
-    l.stopPropagation();
-    const f = l.target.getBoundingClientRect(), x = 100, D = window.innerHeight;
-    let T = f.top + window.scrollY;
-    T + x > D && (T = D - x - 20), K({
-      top: T - 80,
-      left: f.left - 30
-    }), O($);
+  }, [D]);
+  const k = (a, N) => {
+    a.stopPropagation(), g(!0);
+    const P = a.target.getBoundingClientRect(), x = 500, G = window.innerHeight;
+    let O = P.top + window.scrollY;
+    console.log(x), O + x > G && (O = G - x - 20), K({
+      top: O - 80,
+      left: P.left - 30
+    }), L(N);
   };
-  console.log(n);
-  function k(l) {
-    if (u)
-      return l ? /* @__PURE__ */ t.jsx(
+  function R(a) {
+    if (_)
+      return a ? /* @__PURE__ */ t.jsx(
         "img",
         {
-          src: `https://imagedelivery.net/${l[0]}/w=1000`,
+          src: `https://imagedelivery.net/${a[0]}/w=1000`,
           alt: "image",
           width: 16,
           height: 16
@@ -452,161 +482,165 @@ const it = "_wrapper_1g82c_2", at = "_alignmentBlock_1g82c_8", rt = "_title_1g82
       ) : /* @__PURE__ */ t.jsx(
         m,
         {
-          name: "image",
+          name: "Image",
           width: 16,
           height: 16,
           fill: "#757575"
         }
       );
   }
-  const P = (l, $) => {
-    const f = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+  const A = (a, N) => {
+    const P = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       j && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
         m,
         {
-          name: "drag",
+          name: "DotsSixVertical",
           hoverable: !0,
           width: 20,
           height: 20
         }
       ) }),
       w === "select" && /* @__PURE__ */ t.jsx(
-        H,
+        z,
         {
           onChange: (x) => {
-            const T = [...n].map((B) => B.id === l.id ? {
-              ...l,
+            const O = [...c].map((q) => q.id === a.id ? {
+              ...a,
               name: x
-            } : B);
-            O({
-              ...l,
+            } : q);
+            L({
+              ...a,
               name: x
-            }), a([...T]);
+            }), i([...O]);
           },
-          value: l.name,
-          options: _,
-          leftAddon: k(l.images)
+          value: a.name,
+          options: p,
+          leftAddon: R(a.images)
         }
       ),
       w === "input" && /* @__PURE__ */ t.jsx(
-        R,
+        M,
         {
           onChange: (x) => {
-            const T = [...n].map((B) => B.id === l.id ? {
-              ...l,
+            const O = [...c].map((q) => q.id === a.id ? {
+              ...a,
               name: x
-            } : B);
-            a([...T]);
+            } : q);
+            i([...O]);
           },
-          value: l.name,
-          placeholder: p
+          value: a.name,
+          placeholder: h
         }
       ),
       w === "image" && /* @__PURE__ */ t.jsx(
-        W,
+        et,
         {
           onChange: (x) => {
-            const T = [...n].map((B) => B.id === l.id ? {
-              ...l,
+            const O = [...c].map((q) => q.id === a.id ? {
+              ...a,
               image: x[0]
-            } : B);
-            a([...T]);
+            } : q);
+            i([...O]);
           }
         }
       ),
-      /* @__PURE__ */ t.jsxs("div", { className: N.buttons, children: [
-        v && /* @__PURE__ */ t.jsx(
+      /* @__PURE__ */ t.jsxs("div", { className: y.buttons, children: [
+        r && /* @__PURE__ */ t.jsx(
           m,
           {
-            name: "sliders",
+            name: "Sliders",
             hoverable: !0,
             width: 20,
             height: 20,
-            onClick: (x) => r(x, l)
+            onClick: (x) => k(x, a)
           }
         ),
-        b && /* @__PURE__ */ t.jsx(
+        v && /* @__PURE__ */ t.jsx(
           m,
           {
-            name: "trash",
+            name: "Trash",
             hoverable: !0,
             width: 20,
             height: 20,
             fill: "#C12A2A",
-            onClick: () => a(n.filter((x) => x.id !== l.id))
+            onClick: () => i(c.filter((x) => x.id !== a.id))
           }
         )
       ] })
     ] });
     return j ? /* @__PURE__ */ t.jsx(
-      Zt,
+      ne,
       {
-        product: l,
-        index: $,
-        moveProduct: q,
-        children: f
+        product: a,
+        index: N,
+        moveProduct: T,
+        children: P
       },
-      l.id
+      a.id
     ) : /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: N.product,
-        children: f
+        className: y.product,
+        children: P
       },
-      l.id
+      a.id
     );
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: N.productsBlock, children: [
-    (o || s !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: N.top, children: [
-      o && /* @__PURE__ */ t.jsx("h3", { className: N.title, children: o }),
+  return /* @__PURE__ */ t.jsxs("div", { className: y.productsBlock, children: [
+    (e || s !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: y.top, children: [
+      e && /* @__PURE__ */ t.jsx("h3", { className: y.title, children: e }),
       s !== void 0 && /* @__PURE__ */ t.jsx(
-        L,
+        E,
         {
           current: s,
-          onChange: (l) => c == null ? void 0 : c(l)
+          onChange: (a) => o == null ? void 0 : o(a)
         }
       )
     ] }),
-    S && v && U && /* @__PURE__ */ t.jsx(
-      Qt,
+    D && r && J && d && /* @__PURE__ */ t.jsx(
+      Zt,
       {
-        activeItem: S,
-        setActiveItem: O,
-        popupPosition: J,
-        modalOptions: U
+        activeItem: D,
+        setActiveItem: L,
+        popupPosition: Q,
+        modalOptions: J,
+        setIsOpenModal: g
       }
     ),
-    I && Y && /* @__PURE__ */ t.jsx(ns, { ...Y }),
-    /* @__PURE__ */ t.jsxs("div", { className: N.products, children: [
-      i && /* @__PURE__ */ t.jsx("h5", { className: N.subtitle, children: i }),
-      j ? /* @__PURE__ */ t.jsx(et, { backend: st, children: n.map((l, $) => P(l, $)) }) : n.map((l, $) => P(l, $)),
-      h && /* @__PURE__ */ t.jsxs(
-        X,
+    C && V && /* @__PURE__ */ t.jsx(ls, { ...V }),
+    /* @__PURE__ */ t.jsxs("div", { className: y.products, children: [
+      n && /* @__PURE__ */ t.jsx("h5", { className: y.subtitle, children: n }),
+      j ? /* @__PURE__ */ t.jsx(ot, { backend: ct, children: c.map((a, N) => A(a, N)) }) : c.map((a, N) => A(a, N)),
+      b && /* @__PURE__ */ t.jsxs(
+        st,
         {
-          className: N.button,
+          className: tt(y.button, {
+            [y.disabled]: !!(I && I <= c.length)
+          }),
           size: "s",
+          disabled: !!(I && I <= c.length),
           onClick: () => {
-            const l = [...n];
-            w === "select" ? l.push({
-              name: _[0] || `Product ${n.length + 1}`,
-              id: G(),
-              ...z
-            }) : w === "input" ? l.push({
+            const a = [...c];
+            w === "select" ? a.push({
+              name: p[0] || `Product ${c.length + 1}`,
+              id: Y(),
+              ...F
+            }) : w === "input" ? a.push({
               name: "",
-              id: G(),
-              ...z
-            }) : l.push({
-              name: `Image ${n.length + 1}`,
-              id: G(),
-              ...z
-            }), a(l);
+              id: Y(),
+              ...F
+            }) : a.push({
+              name: `Image ${c.length + 1}`,
+              id: Y(),
+              ...F
+            }), i(a);
           },
           children: [
             /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
             /* @__PURE__ */ t.jsx(
               m,
               {
-                name: "plus",
+                name: "Plus",
                 width: 16,
                 height: 16
               }
@@ -615,78 +649,78 @@ const it = "_wrapper_1g82c_2", at = "_alignmentBlock_1g82c_8", rt = "_title_1g82
         }
       )
     ] }),
-    e !== void 0 && /* @__PURE__ */ t.jsx(lt, { items: e })
+    l !== void 0 && /* @__PURE__ */ t.jsx(rt, { items: l })
   ] });
-}, ee = "_subtitle_41klp_1", se = "_header_41klp_8", ne = "_text_41klp_9", oe = "_productsBlock_41klp_10", ce = "_buttonsBlock_41klp_11", le = "_top_41klp_21", ie = "_itemsBlock_41klp_28", ae = "_typeTexts_41klp_34", re = "_block_41klp_40", de = "_active_41klp_51", ue = "_products_41klp_10", _e = "_product_41klp_10", pe = "_button_41klp_11", me = "_image_41klp_79", he = "_info_41klp_86", xe = "_name_41klp_97", ge = "_buttons_41klp_11", be = "_modal_41klp_107", fe = "_other_41klp_124", ve = "_options_41klp_130", E = {
-  subtitle: ee,
-  header: se,
-  text: ne,
-  productsBlock: oe,
-  buttonsBlock: ce,
-  top: le,
-  itemsBlock: ie,
-  typeTexts: ae,
-  block: re,
-  active: de,
-  products: ue,
-  product: _e,
-  button: pe,
-  image: me,
-  info: he,
-  name: xe,
-  buttons: ge,
-  modal: be,
-  other: fe,
-  options: ve
-}, je = (d) => {
-  const { activeButton: s, setActiveButton: c, popupPosition: n } = d, [a, e] = g.useState(s.typesText), [o, i] = g.useState(s.destination), [v, j] = g.useState(s.link || ""), [u, b] = g.useState(s.text || "");
-  return g.useEffect(() => {
-    c({
+}, ce = "_subtitle_41klp_1", ie = "_header_41klp_8", le = "_text_41klp_9", ae = "_productsBlock_41klp_10", re = "_buttonsBlock_41klp_11", de = "_top_41klp_21", ue = "_itemsBlock_41klp_28", _e = "_typeTexts_41klp_34", pe = "_block_41klp_40", me = "_active_41klp_51", he = "_products_41klp_10", ge = "_product_41klp_10", xe = "_button_41klp_11", be = "_image_41klp_79", fe = "_info_41klp_86", ve = "_name_41klp_97", je = "_buttons_41klp_11", ke = "_modal_41klp_107", $e = "_other_41klp_124", ye = "_options_41klp_130", H = {
+  subtitle: ce,
+  header: ie,
+  text: le,
+  productsBlock: ae,
+  buttonsBlock: re,
+  top: de,
+  itemsBlock: ue,
+  typeTexts: _e,
+  block: pe,
+  active: me,
+  products: he,
+  product: ge,
+  button: xe,
+  image: be,
+  info: fe,
+  name: ve,
+  buttons: je,
+  modal: ke,
+  other: $e,
+  options: ye
+}, we = (u) => {
+  const { activeButton: s, setActiveButton: o, popupPosition: c } = u, [i, l] = f.useState(s.typesText), [e, n] = f.useState(s.destination), [r, j] = f.useState(s.link || ""), [_, v] = f.useState(s.text || "");
+  return f.useEffect(() => {
+    o({
       ...s,
       ...{
-        text: u,
-        link: v,
-        destination: o,
-        typesText: a
+        text: _,
+        link: r,
+        destination: e,
+        typesText: i
       }
     });
-  }, [a, o, v, u]), /* @__PURE__ */ t.jsxs(
+  }, [i, e, r, _]), /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: E.modal,
-      onClick: (h) => {
-        h.stopPropagation();
+      className: H.modal,
+      onClick: (b) => {
+        b.stopPropagation();
       },
       style: {
-        top: `${n.top}px`,
-        left: `${n.left}px`
+        top: `${c.top}px`,
+        left: `${c.left}px`
       },
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: E.top, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: H.top, children: [
           /* @__PURE__ */ t.jsx("h3", { children: s.type }),
           /* @__PURE__ */ t.jsx(
             m,
             {
-              name: "x",
+              name: "X",
               height: 20,
               width: 20,
               hoverable: !0,
-              onClick: () => c(null)
+              onClick: () => o(null)
             }
           )
         ] }),
-        /* @__PURE__ */ t.jsxs("div", { className: E.options, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: H.options, children: [
           /* @__PURE__ */ t.jsx(
-            H,
+            z,
             {
               label: "Destination",
-              onChange: (h) => i(h),
+              onChange: (b) => n(b),
               options: ["Go to Page", "Open Link"],
-              value: o
+              value: e
             }
           ),
-          o === "Go to Page" ? /* @__PURE__ */ t.jsx(
-            H,
+          e === "Go to Page" ? /* @__PURE__ */ t.jsx(
+            z,
             {
               label: "Go to",
               onChange: () => {
@@ -695,131 +729,131 @@ const it = "_wrapper_1g82c_2", at = "_alignmentBlock_1g82c_8", rt = "_title_1g82
               value: "Homepage"
             }
           ) : /* @__PURE__ */ t.jsx(
-            R,
+            M,
             {
-              onChange: (h) => j(h),
-              value: v,
+              onChange: (b) => j(b),
+              value: r,
               placeholder: "https://",
               label: "Link"
             }
           ),
           /* @__PURE__ */ t.jsx(
-            L,
+            E,
             {
               current: !1,
               label: "Open in new tab"
             }
           ),
           /* @__PURE__ */ t.jsx(
-            tt,
+            nt,
             {
-              onChange: (h) => b(h),
-              value: u,
+              onChange: (b) => v(b),
+              value: _,
               label: "Text",
               maxLength: 150
             }
           ),
           /* @__PURE__ */ t.jsx(
-            ct,
+            at,
             {
-              typesText: a,
-              setTypesText: e
+              typesText: i,
+              setTypesText: l
             }
           )
         ] })
       ]
     }
   );
-}, ke = "_subtitle_1y5sw_1", $e = "_header_1y5sw_8", ye = "_text_1y5sw_9", we = "_productsBlock_1y5sw_10", Ne = "_buttonsBlock_1y5sw_11", Be = "_top_1y5sw_22", Ce = "_itemsBlock_1y5sw_29", Pe = "_typeTexts_1y5sw_35", Ie = "_block_1y5sw_41", Te = "_active_1y5sw_52", Ae = "_products_1y5sw_10", Se = "_product_1y5sw_10", Oe = "_button_1y5sw_11", De = "_image_1y5sw_80", Le = "_info_1y5sw_87", Ee = "_name_1y5sw_98", Re = "_buttons_1y5sw_11", He = "_modal_1y5sw_108", ze = "_other_1y5sw_125", Me = "_options_1y5sw_131", F = {
-  subtitle: ke,
-  header: $e,
-  text: ye,
-  productsBlock: we,
-  buttonsBlock: Ne,
-  top: Be,
-  itemsBlock: Ce,
-  typeTexts: Pe,
-  block: Ie,
-  active: Te,
-  products: Ae,
-  product: Se,
-  button: Oe,
-  image: De,
-  info: Le,
-  name: Ee,
-  buttons: Re,
-  modal: He,
-  other: ze,
-  options: Me
-}, Fe = (d) => {
-  const { buttons: s, setButtons: c, deletable: n = !0, addable: a = !0 } = d, [e, o] = g.useState(null), [i, v] = g.useState({
+}, Ne = "_subtitle_1y5sw_1", Be = "_header_1y5sw_8", Ce = "_text_1y5sw_9", Te = "_productsBlock_1y5sw_10", Pe = "_buttonsBlock_1y5sw_11", Ie = "_top_1y5sw_22", Ae = "_itemsBlock_1y5sw_29", Se = "_typeTexts_1y5sw_35", Oe = "_block_1y5sw_41", De = "_active_1y5sw_52", Le = "_products_1y5sw_10", qe = "_product_1y5sw_10", Ee = "_button_1y5sw_11", Re = "_image_1y5sw_80", He = "_info_1y5sw_87", Me = "_name_1y5sw_98", ze = "_buttons_1y5sw_11", Fe = "_modal_1y5sw_108", Ge = "_other_1y5sw_125", Ue = "_options_1y5sw_131", X = {
+  subtitle: Ne,
+  header: Be,
+  text: Ce,
+  productsBlock: Te,
+  buttonsBlock: Pe,
+  top: Ie,
+  itemsBlock: Ae,
+  typeTexts: Se,
+  block: Oe,
+  active: De,
+  products: Le,
+  product: qe,
+  button: Ee,
+  image: Re,
+  info: He,
+  name: Me,
+  buttons: ze,
+  modal: Fe,
+  other: Ge,
+  options: Ue
+}, Xe = (u) => {
+  const { buttons: s, setButtons: o, deletable: c = !0, addable: i = !0 } = u, [l, e] = f.useState(null), [n, r] = f.useState({
     top: 0,
     left: 0
   });
-  g.useEffect(() => {
-    const u = () => {
-      o(null);
+  f.useEffect(() => {
+    const _ = () => {
+      e(null);
     };
-    return document.body.addEventListener("click", u), o(null), () => {
-      o(null), document.body.removeEventListener("click", u);
+    return document.body.addEventListener("click", _), e(null), () => {
+      e(null), document.body.removeEventListener("click", _);
     };
-  }, []), g.useEffect(() => {
-    if (e) {
-      const u = [...s].map((b) => b.id === e.id ? e : b);
-      c(u);
+  }, []), f.useEffect(() => {
+    if (l) {
+      const _ = [...s].map((v) => v.id === l.id ? l : v);
+      o(_);
     }
-  }, [e]);
-  const j = (u, b) => {
-    u.stopPropagation();
-    const h = u.target.getBoundingClientRect(), w = 490, p = window.innerHeight;
-    let _ = h.top + window.scrollY;
-    _ + w > p && (_ = p - w - 20), v({
-      top: _,
-      left: h.left - 30
-    }), o(b);
+  }, [l]);
+  const j = (_, v) => {
+    _.stopPropagation();
+    const b = _.target.getBoundingClientRect(), w = 490, h = window.innerHeight;
+    let p = b.top + window.scrollY;
+    p + w > h && (p = h - w - 20), r({
+      top: p,
+      left: b.left - 30
+    }), e(v);
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: F.products, children: [
-    /* @__PURE__ */ t.jsx("h5", { className: F.subtitle, children: "Button Type" }),
-    s.map((u) => /* @__PURE__ */ t.jsxs(
+  return /* @__PURE__ */ t.jsxs("div", { className: X.products, children: [
+    /* @__PURE__ */ t.jsx("h5", { className: X.subtitle, children: "Button Type" }),
+    s.map((_) => /* @__PURE__ */ t.jsxs(
       "div",
       {
-        className: F.product,
+        className: X.product,
         children: [
           /* @__PURE__ */ t.jsx(
-            H,
+            z,
             {
-              onChange: (b) => {
-                const w = [...s].map((p) => p.id === u.id ? {
-                  ...u,
-                  type: b
-                } : p);
-                c(w);
+              onChange: (v) => {
+                const w = [...s].map((h) => h.id === _.id ? {
+                  ..._,
+                  type: v
+                } : h);
+                o(w);
               },
-              value: u.type,
+              value: _.type,
               options: ["Primary", "Secondary", "Tertiary"]
             }
           ),
-          /* @__PURE__ */ t.jsxs("div", { className: F.buttons, children: [
+          /* @__PURE__ */ t.jsxs("div", { className: X.buttons, children: [
             /* @__PURE__ */ t.jsx(
               m,
               {
-                name: "sliders",
+                name: "Sliders",
                 hoverable: !0,
                 width: 20,
                 height: 20,
-                onClick: (b) => {
-                  j(b, u);
+                onClick: (v) => {
+                  j(v, _);
                 }
               }
             ),
-            n && /* @__PURE__ */ t.jsx(
+            c && /* @__PURE__ */ t.jsx(
               m,
               {
-                name: "trash",
+                name: "Trash",
                 hoverable: !0,
                 onClick: () => {
-                  const b = s.filter((h) => h.id !== u.id);
-                  c(b);
+                  const v = s.filter((b) => b.id !== _.id);
+                  o(v);
                 },
                 width: 20,
                 height: 20,
@@ -829,37 +863,37 @@ const it = "_wrapper_1g82c_2", at = "_alignmentBlock_1g82c_8", rt = "_title_1g82
           ] })
         ]
       },
-      u.id
+      _.id
     )),
-    e && /* @__PURE__ */ t.jsx(
-      je,
+    l && /* @__PURE__ */ t.jsx(
+      we,
       {
-        activeButton: e,
-        setActiveButton: o,
-        popupPosition: i
+        activeButton: l,
+        setActiveButton: e,
+        popupPosition: n
       }
     ),
-    a && /* @__PURE__ */ t.jsxs(
-      X,
+    i && /* @__PURE__ */ t.jsxs(
+      st,
       {
-        className: F.button,
+        className: X.button,
         size: "s",
         onClick: () => {
-          const u = [...s];
-          u.push({
+          const _ = [...s];
+          _.push({
             type: "Primary",
-            id: G(),
+            id: Y(),
             typesText: [],
             destination: "Go to Page",
             text: ""
-          }), c(u);
+          }), o(_);
         },
         children: [
           /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
           /* @__PURE__ */ t.jsx(
             m,
             {
-              name: "plus",
+              name: "Plus",
               width: 16,
               height: 16
             }
@@ -868,126 +902,125 @@ const it = "_wrapper_1g82c_2", at = "_alignmentBlock_1g82c_8", rt = "_title_1g82
       }
     )
   ] });
-}, Cs = (d) => {
-  const { isActiveButtons: s, setIsActiveButtons: c, buttons: n, setButtons: a } = d;
-  return /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsxs("div", { className: E.buttonsBlock, children: [
-    /* @__PURE__ */ t.jsxs("div", { className: E.top, children: [
-      /* @__PURE__ */ t.jsx("h3", { className: E.title, children: "Buttons" }),
+}, As = (u) => {
+  const { isActiveButtons: s, setIsActiveButtons: o, buttons: c, setButtons: i } = u;
+  return /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsxs("div", { className: H.buttonsBlock, children: [
+    /* @__PURE__ */ t.jsxs("div", { className: H.top, children: [
+      /* @__PURE__ */ t.jsx("h3", { className: H.title, children: "Buttons" }),
       /* @__PURE__ */ t.jsx(
-        L,
+        E,
         {
           current: s,
-          onChange: (e) => c(e)
+          onChange: (l) => o(l)
         }
       )
     ] }),
     /* @__PURE__ */ t.jsx(
-      Fe,
+      Xe,
       {
-        buttons: n,
-        setButtons: a
+        buttons: c,
+        setButtons: i
       }
     )
   ] }) });
-}, Ge = "_wrapper_tn7gb_1", Ye = "_subtitle_tn7gb_7", Ue = "_content_tn7gb_14", qe = "_range_tn7gb_21", Je = "_track_tn7gb_26", Ke = "_progress_tn7gb_35", Qe = "_dots_tn7gb_45", Ve = "_dot_tn7gb_45", We = "_active_tn7gb_62", Xe = "_input_tn7gb_74", Ze = "_countBlock_tn7gb_88", ts = "_count_tn7gb_88", es = "_controls_tn7gb_103", ss = "_button_tn7gb_108", y = {
-  wrapper: Ge,
-  subtitle: Ye,
-  content: Ue,
-  range: qe,
-  track: Je,
-  progress: Ke,
-  dots: Qe,
-  dot: Ve,
-  active: We,
-  input: Xe,
-  countBlock: Ze,
-  count: ts,
-  controls: es,
-  button: ss
-}, ns = (d) => {
-  const { label: s, min: c = 1, max: n = 4, step: a = 1, count: e, setCount: o } = d, [i, v] = g.useState(!1), j = Array.from({ length: (n - c) / a + 1 }), u = (e - c) / (n - c) * 100, b = () => {
-    e < n && o(e + a);
-  }, h = () => {
-    e > c && o(e - a);
-  }, w = (p) => {
-    const _ = c + p * a;
-    o(_);
+}, Ye = "_wrapper_tn7gb_1", Ve = "_subtitle_tn7gb_7", Je = "_content_tn7gb_14", Ke = "_range_tn7gb_21", Qe = "_track_tn7gb_26", We = "_progress_tn7gb_35", Ze = "_dots_tn7gb_45", ts = "_dot_tn7gb_45", es = "_active_tn7gb_62", ss = "_input_tn7gb_74", ns = "_countBlock_tn7gb_88", os = "_count_tn7gb_88", cs = "_controls_tn7gb_103", is = "_button_tn7gb_108", $ = {
+  wrapper: Ye,
+  subtitle: Ve,
+  content: Je,
+  range: Ke,
+  track: Qe,
+  progress: We,
+  dots: Ze,
+  dot: ts,
+  active: es,
+  input: ss,
+  countBlock: ns,
+  count: os,
+  controls: cs,
+  button: is
+}, ls = (u) => {
+  const { label: s, min: o = 1, max: c = 4, step: i = 1, count: l, setCount: e } = u, [n, r] = f.useState(!1), j = Array.from({ length: (c - o) / i + 1 }), _ = (l - o) / (c - o) * 100, v = () => {
+    l < c && e(l + i);
+  }, b = () => {
+    l > o && e(l - i);
+  }, w = (h) => {
+    const p = o + h * i;
+    e(p);
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: y.wrapper, children: [
-    s && /* @__PURE__ */ t.jsx("h5", { className: y.subtitle, children: s }),
-    /* @__PURE__ */ t.jsxs("div", { className: y.content, children: [
-      /* @__PURE__ */ t.jsxs("div", { className: y.range, children: [
-        /* @__PURE__ */ t.jsx("div", { className: y.track }),
+  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 }),
         /* @__PURE__ */ t.jsx(
           "div",
           {
-            className: y.progress,
-            style: { width: `${u}%` }
+            className: $.progress,
+            style: { width: `${_}%` }
           }
         ),
-        /* @__PURE__ */ t.jsx("div", { className: y.dots, children: j.map((p, _) => {
-          const I = _ <= (e - c) / a;
+        /* @__PURE__ */ t.jsx("div", { className: $.dots, children: j.map((h, p) => {
+          const C = p <= (l - o) / i;
           return /* @__PURE__ */ t.jsx(
             "button",
             {
-              onClick: () => w(_),
-              className: Z(y.dot, {
-                [y.active]: I,
-                [y.inactive]: !I,
-                [y.dragging]: i
+              onClick: () => w(p),
+              className: tt($.dot, {
+                [$.active]: C,
+                [$.inactive]: !C,
+                [$.dragging]: n
               }),
-              "aria-label": `Set value to ${c + _ * a}`
+              "aria-label": `Set value to ${o + p * i}`
             },
-            _
+            p
           );
         }) }),
         /* @__PURE__ */ t.jsx(
           "input",
           {
             type: "range",
-            min: c,
-            max: n,
-            step: a,
-            value: e,
-            onChange: (p) => o(Number(p.target.value)),
-            onMouseDown: () => v(!0),
-            onMouseUp: () => v(!1),
-            onTouchStart: () => v(!0),
-            onTouchEnd: () => v(!1),
-            className: y.input
+            min: o,
+            max: c,
+            step: i,
+            value: l,
+            onChange: (h) => e(Number(h.target.value)),
+            onMouseDown: () => r(!0),
+            onMouseUp: () => r(!1),
+            onTouchStart: () => r(!0),
+            onTouchEnd: () => r(!1),
+            className: $.input
           }
         )
       ] }),
-      /* @__PURE__ */ t.jsxs("div", { className: y.countBlock, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: $.countBlock, children: [
         /* @__PURE__ */ t.jsx(
-          R,
+          M,
           {
             type: "number",
-            min: c,
-            max: n,
+            min: o,
+            max: c,
             paddingless: !0,
-            onChange: (p) => {
-              const _ = Number(p);
-              _ > n ? o(n) : _ < c ? o(c) : o(_);
+            onChange: (h) => {
+              const p = Number(h);
+              p > c ? e(c) : p < o ? e(o) : e(p);
             },
-            value: String(e)
+            value: String(l)
           }
         ),
-        /* @__PURE__ */ t.jsxs("div", { className: y.controls, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: $.controls, children: [
           /* @__PURE__ */ t.jsx(
             "button",
             {
-              onClick: b,
-              disabled: e >= n,
-              className: y.button,
+              onClick: v,
+              disabled: l >= c,
+              className: $.button,
               "aria-label": "Increment count",
               children: /* @__PURE__ */ t.jsx(
                 m,
                 {
-                  name: "arrow-down",
+                  name: "CaretUp",
                   width: 15,
-                  height: 15,
-                  rotated: !0
+                  height: 15
                 }
               )
             }
@@ -995,14 +1028,14 @@ const it = "_wrapper_1g82c_2", at = "_alignmentBlock_1g82c_8", rt = "_title_1g82
           /* @__PURE__ */ t.jsx(
             "button",
             {
-              onClick: h,
-              disabled: e <= c,
-              className: y.button,
+              onClick: b,
+              disabled: l <= o,
+              className: $.button,
               "aria-label": "Decrement count",
               children: /* @__PURE__ */ t.jsx(
                 m,
                 {
-                  name: "arrow-down",
+                  name: "CaretDown",
                   width: 15,
                   height: 15
                 }
@@ -1013,144 +1046,144 @@ const it = "_wrapper_1g82c_2", at = "_alignmentBlock_1g82c_8", rt = "_title_1g82
       ] })
     ] })
   ] });
-}, os = "_subtitle_1nl8x_1", cs = "_header_1nl8x_8", ls = "_text_1nl8x_9", is = "_productsBlock_1nl8x_10", as = "_top_1nl8x_22", rs = "_itemsBlock_1nl8x_29", ds = "_typeTexts_1nl8x_35", us = "_block_1nl8x_41", _s = "_active_1nl8x_52", ps = "_products_1nl8x_10", ms = "_product_1nl8x_10", hs = "_button_1nl8x_70", xs = "_image_1nl8x_80", gs = "_info_1nl8x_87", bs = "_name_1nl8x_98", fs = "_buttons_1nl8x_102", vs = "_modal_1nl8x_108", js = "_link_1nl8x_126", ks = "_modalOptions_1nl8x_132", C = {
-  subtitle: os,
-  header: cs,
-  text: ls,
-  productsBlock: is,
-  top: as,
-  itemsBlock: rs,
-  typeTexts: ds,
-  block: us,
-  active: _s,
-  products: ps,
-  product: ms,
-  button: hs,
-  image: xs,
-  info: gs,
-  name: bs,
-  buttons: fs,
-  modal: vs,
-  link: js,
-  modalOptions: ks
-}, $s = (d) => {
-  const { activeItem: s, setActiveItem: c, popupPosition: n, setIsOpenModal: a } = d;
+}, as = "_subtitle_1nl8x_1", rs = "_header_1nl8x_8", ds = "_text_1nl8x_9", us = "_productsBlock_1nl8x_10", _s = "_top_1nl8x_22", ps = "_itemsBlock_1nl8x_29", ms = "_typeTexts_1nl8x_35", hs = "_block_1nl8x_41", gs = "_active_1nl8x_52", xs = "_products_1nl8x_10", bs = "_product_1nl8x_10", fs = "_button_1nl8x_70", vs = "_image_1nl8x_80", js = "_info_1nl8x_87", ks = "_name_1nl8x_98", $s = "_buttons_1nl8x_102", ys = "_modal_1nl8x_108", ws = "_link_1nl8x_126", Ns = "_modalOptions_1nl8x_132", B = {
+  subtitle: as,
+  header: rs,
+  text: ds,
+  productsBlock: us,
+  top: _s,
+  itemsBlock: ps,
+  typeTexts: ms,
+  block: hs,
+  active: gs,
+  products: xs,
+  product: bs,
+  button: fs,
+  image: vs,
+  info: js,
+  name: ks,
+  buttons: $s,
+  modal: ys,
+  link: ws,
+  modalOptions: Ns
+}, Bs = (u) => {
+  const { activeItem: s, setActiveItem: o, popupPosition: c, setIsOpenModal: i } = u;
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: C.modal,
-      onClick: (e) => {
-        e.stopPropagation();
+      className: B.modal,
+      onClick: (l) => {
+        l.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: B.top, children: [
           /* @__PURE__ */ t.jsx("h3", { children: s.name }),
           /* @__PURE__ */ t.jsx(
             m,
             {
-              name: "x",
+              name: "X",
               height: 20,
               width: 20,
               hoverable: !0,
               onClick: () => {
-                a(!1), c(null);
+                i(!1), o(null);
               }
             }
           )
         ] }),
-        /* @__PURE__ */ t.jsx("div", { className: C.modalOptions, children: /* @__PURE__ */ t.jsx(
-          W,
+        /* @__PURE__ */ t.jsx("div", { className: B.modalOptions, children: /* @__PURE__ */ t.jsx(
+          et,
           {
             label: "Put up an attractive image",
-            onChange: (e) => {
-              const o = {
+            onChange: (l) => {
+              const e = {
                 ...s,
-                images: e,
-                imagePath: e[0]
+                images: l,
+                imagePath: l[0]
               };
-              c(o);
+              o(e);
             }
           }
         ) })
       ]
     }
   );
-}, ys = (d) => {
-  const { index: s, moveProduct: c, children: n } = d, [, a] = nt({
+}, Cs = (u) => {
+  const { index: s, moveProduct: o, children: c } = u, [, i] = it({
     accept: "product",
-    hover(i) {
-      i.index !== s && (c(i.index, s), i.index = s);
+    hover(n) {
+      n.index !== s && (o(n.index, s), n.index = s);
     }
-  }), [{ isDragging: e }, o] = ot({
+  }), [{ isDragging: l }, e] = lt({
     type: "product",
     item: { index: s },
-    collect: (i) => ({
-      isDragging: i.isDragging()
+    collect: (n) => ({
+      isDragging: n.isDragging()
     })
   });
   return /* @__PURE__ */ t.jsx(
     "div",
     {
-      ref: (i) => o(a(i)),
-      className: `${C.product} ${e ? C.dragging : ""}`,
-      children: n
+      ref: (n) => e(i(n)),
+      className: `${B.product} ${l ? B.dragging : ""}`,
+      children: c
     }
   );
-}, Ps = (d) => {
+}, Ss = (u) => {
   const {
     isActiveItems: s,
-    setIsActiveItems: c,
-    items: n,
-    setItems: a,
-    other: e,
-    title: o,
-    subtitle: i,
-    editable: v = !0,
+    setIsActiveItems: o,
+    items: c,
+    setItems: i,
+    other: l,
+    title: e,
+    subtitle: n,
+    editable: r = !0,
     draggable: j = !1,
-    withImage: u = !1,
-    deletable: b = !0,
-    addable: h = !0,
+    withImage: _ = !1,
+    deletable: v = !0,
+    addable: b = !0,
     itemsType: w,
-    itemsOptions: p
-  } = d, [_, I] = g.useState(null), [Y, U] = g.useState({
+    itemsOptions: h
+  } = u, [p, C] = f.useState(null), [V, J] = f.useState({
     top: 0,
     left: 0
-  }), [z, S] = g.useState(!1), O = (r, k) => {
-    const P = [...n], [l] = P.splice(r, 1);
-    P.splice(k, 0, l), a(P);
+  }), [F, I] = f.useState(!1), D = (d, g) => {
+    const T = [...c], [k] = T.splice(d, 1);
+    T.splice(g, 0, k), i(T);
   };
-  g.useEffect(() => {
-    const r = () => {
-      I(null);
+  f.useEffect(() => {
+    const d = () => {
+      C(null), I(!1);
     };
-    return document.body.addEventListener("click", r), I(null), () => {
-      I(null), document.body.removeEventListener("click", r);
+    return document.body.addEventListener("click", d), C(null), I(!1), () => {
+      C(null), I(!1), document.body.removeEventListener("click", d);
     };
-  }, []), g.useEffect(() => {
-    if (_) {
-      const r = [...n].map((k) => k.id === _.id ? _ : k);
-      a(r);
+  }, []), f.useEffect(() => {
+    if (p) {
+      const d = [...c].map((g) => g.id === p.id ? p : g);
+      i(d);
     }
-  }, [_]);
-  const J = (r, k) => {
-    r.stopPropagation();
-    const P = r.target.getBoundingClientRect(), l = 100, $ = window.innerHeight;
-    let f = P.top + window.scrollY;
-    f + l > $ && (f = $ - l - 20), S(!0), U({
-      top: f - 80,
-      left: P.left - 30
-    }), I(k);
+  }, [p]);
+  const L = (d, g) => {
+    d.stopPropagation();
+    const T = d.target.getBoundingClientRect(), k = 100, R = window.innerHeight;
+    let A = T.top + window.scrollY;
+    A + k > R && (A = R - k - 20), I(!0), J({
+      top: A - 80,
+      left: T.left - 30
+    }), C(g);
   };
-  function K(r) {
-    if (u)
-      return r ? /* @__PURE__ */ t.jsx(
+  function Q(d) {
+    if (_)
+      return d ? /* @__PURE__ */ t.jsx(
         "img",
         {
-          src: `https://imagedelivery.net/${r}/w=1000`,
+          src: `https://imagedelivery.net/${d}/w=1000`,
           alt: "image",
           width: 16,
           height: 16
@@ -1158,142 +1191,142 @@ const it = "_wrapper_1g82c_2", at = "_alignmentBlock_1g82c_8", rt = "_title_1g82
       ) : /* @__PURE__ */ t.jsx(
         m,
         {
-          name: "image",
+          name: "Image",
           width: 16,
           height: 16,
           fill: "#757575"
         }
       );
   }
-  const q = (r, k) => {
-    const P = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+  const K = (d, g) => {
+    const T = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       j && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
         m,
         {
-          name: "drag",
+          name: "DotsSixVertical",
           hoverable: !0,
           width: 20,
           height: 20
         }
       ) }),
       w === "select" && /* @__PURE__ */ t.jsx(
-        H,
+        z,
         {
-          onChange: (l) => {
-            const $ = [...n], f = Number(l.split(" ")[1]), x = p.find((B) => B.id === f);
-            if (!x) return;
-            const D = {
-              ...x.productData.stats,
-              newPrice: x.productData.minPrice.amount,
-              oldPrice: x.productData.compareAtPrice.amount
-            }, T = $.map((B) => (console.log(l, f), B.id === r.id ? {
-              ...r,
-              name: l,
-              listingId: f,
-              stats: D
-            } : B));
-            I({
-              ...r,
-              name: l,
-              listingId: f
-            }), a([...T]);
+          onChange: (k) => {
+            const R = [...c], A = Number(k.split(" ")[1]), a = h.find((x) => x.id === A);
+            if (!a) return;
+            const N = {
+              ...a.productData.stats,
+              newPrice: a.productData.minPrice.amount,
+              oldPrice: a.productData.compareAtPrice.amount
+            }, P = R.map((x) => x.id === d.id ? {
+              ...d,
+              name: k,
+              listingId: A,
+              stats: N
+            } : x);
+            C({
+              ...d,
+              name: k,
+              listingId: A
+            }), i([...P]);
           },
-          value: r.name,
-          options: [...p.map((l) => `Product ${l.id}`)],
-          leftAddon: K(r.images[0])
+          value: d.name,
+          options: [...h.map((k) => `Product ${k.id}`)],
+          leftAddon: Q(d.images[0])
         }
       ),
-      /* @__PURE__ */ t.jsxs("div", { className: C.buttons, children: [
-        v && /* @__PURE__ */ t.jsx(
+      /* @__PURE__ */ t.jsxs("div", { className: B.buttons, children: [
+        r && /* @__PURE__ */ t.jsx(
           m,
           {
-            name: "sliders",
+            name: "Sliders",
             hoverable: !0,
             width: 20,
             height: 20,
-            onClick: (l) => J(l, r)
+            onClick: (k) => L(k, d)
           }
         ),
-        b && /* @__PURE__ */ t.jsx(
+        v && /* @__PURE__ */ t.jsx(
           m,
           {
-            name: "trash",
+            name: "Trash",
             hoverable: !0,
             width: 20,
             height: 20,
             fill: "#C12A2A",
-            onClick: () => a(n.filter((l) => l.id !== r.id))
+            onClick: () => i(c.filter((k) => k.id !== d.id))
           }
         )
       ] })
     ] });
     return j ? /* @__PURE__ */ t.jsx(
-      ys,
+      Cs,
       {
-        product: r,
-        index: k,
-        moveProduct: O,
-        children: P
+        product: d,
+        index: g,
+        moveProduct: D,
+        children: T
       },
-      r.id
+      d.id
     ) : /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: C.product,
-        children: P
+        className: B.product,
+        children: T
       },
-      r.id
+      d.id
     );
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: C.productsBlock, children: [
-    (o || s !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: C.top, children: [
-      o && /* @__PURE__ */ t.jsx("h3", { className: C.title, children: o }),
+  return /* @__PURE__ */ t.jsxs("div", { className: B.productsBlock, children: [
+    (e || s !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: B.top, children: [
+      e && /* @__PURE__ */ t.jsx("h3", { className: B.title, children: e }),
       s !== void 0 && /* @__PURE__ */ t.jsx(
-        L,
+        E,
         {
           current: s,
-          onChange: (r) => c == null ? void 0 : c(r)
+          onChange: (d) => o == null ? void 0 : o(d)
         }
       )
     ] }),
-    z && _ && /* @__PURE__ */ t.jsx(
-      $s,
+    F && p && /* @__PURE__ */ t.jsx(
+      Bs,
       {
-        activeItem: _,
-        setActiveItem: I,
-        setIsOpenModal: S,
-        popupPosition: Y
+        activeItem: p,
+        setActiveItem: C,
+        setIsOpenModal: I,
+        popupPosition: V
       }
     ),
-    /* @__PURE__ */ t.jsxs("div", { className: C.products, children: [
-      i && /* @__PURE__ */ t.jsx("h5", { className: C.subtitle, children: i }),
-      j ? /* @__PURE__ */ t.jsx(et, { backend: st, children: n.map((r, k) => q(r, k)) }) : n.map((r, k) => q(r, k)),
-      h && /* @__PURE__ */ t.jsxs(
-        X,
+    /* @__PURE__ */ t.jsxs("div", { className: B.products, children: [
+      n && /* @__PURE__ */ t.jsx("h5", { className: B.subtitle, children: n }),
+      j ? /* @__PURE__ */ t.jsx(ot, { backend: ct, children: c.map((d, g) => K(d, g)) }) : c.map((d, g) => K(d, g)),
+      b && /* @__PURE__ */ t.jsxs(
+        st,
         {
-          className: C.button,
+          className: B.button,
           size: "s",
           onClick: () => {
-            const r = [...n], k = p[0].id;
-            r.push({
-              name: `Product ${k}`,
-              id: G(),
-              listingId: k,
+            const d = [...c], g = h[0].id;
+            d.push({
+              name: `Product ${g}`,
+              id: Y(),
+              listingId: g,
               imagePath: "",
               images: [],
               stats: {
-                ...p[0].productData.stats,
-                newPrice: p[0].productData.minPrice.amount,
-                oldPrice: p[0].productData.compareAtPrice.amount
+                ...h[0].productData.stats,
+                newPrice: h[0].productData.minPrice.amount,
+                oldPrice: h[0].productData.compareAtPrice.amount
               }
-            }), a(r);
+            }), i(d);
           },
           children: [
             /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
             /* @__PURE__ */ t.jsx(
               m,
               {
-                name: "plus",
+                name: "Plus",
                 width: 16,
                 height: 16
               }
@@ -1302,31 +1335,31 @@ const it = "_wrapper_1g82c_2", at = "_alignmentBlock_1g82c_8", rt = "_title_1g82
         }
       )
     ] }),
-    e !== void 0 && /* @__PURE__ */ t.jsx(lt, { items: e })
+    l !== void 0 && /* @__PURE__ */ t.jsx(rt, { items: l })
   ] });
 };
 export {
-  X as Button,
-  Fe as ButtonTypeSettings,
-  Cs as ButtonsSettings,
-  As as Checkbox,
-  W as ChooseImage,
-  Ss as ChooseImageModal,
-  Os as ColorPicker,
+  st as Button,
+  Xe as ButtonTypeSettings,
+  As as ButtonsSettings,
+  Ls as Checkbox,
+  et as ChooseImage,
+  qs as ChooseImageModal,
+  Es as ColorPicker,
   m as Icon,
-  R as Input,
-  te as ItemsSettings,
-  Bs as LayoutSettings,
-  Ps as ListingSelector,
-  Ds as Modal,
-  Ls as Picker,
-  Es as Radio,
-  ns as RangeSelector,
-  H as Select,
-  Rs as Submodal,
-  L as Switch,
-  Pt as TextSettings,
-  tt as Textarea,
-  Hs as Tip,
-  ct as TypesText
+  M as Input,
+  oe as ItemsSettings,
+  Is as LayoutSettings,
+  Ss as ListingSelector,
+  Rs as Modal,
+  Hs as Picker,
+  Ms as Radio,
+  ls as RangeSelector,
+  z as Select,
+  zs as Submodal,
+  E as Switch,
+  At as TextSettings,
+  nt as Textarea,
+  Fs as Tip,
+  at as TypesText
 };