@billgangcom/theme-lib 1.10.2 → 1.11.0

package/dist/ui.es.js

@@ -1,19 +1,53 @@
-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 = [
+import { j as t, c as W, I as h, a as M, S as E, T as ot, C as st, b as z, D as ct, H as it, B as nt, v as V, u as lt, d as at } from "./index-hz9iiZsE.js";
+import { h as Fs, i as Gs, f as Us, M as Xs, P as Ys, R as Vs, e as Js, g as Ks } from "./index-hz9iiZsE.js";
+import m from "react";
+const ut = "_accordion_2tiiw_1", _t = "_header_2tiiw_9", pt = "_icon_2tiiw_16", mt = "_open_2tiiw_19", ht = "_content_2tiiw_23", U = {
+  accordion: ut,
+  header: _t,
+  icon: pt,
+  open: mt,
+  content: ht
+}, qs = ({ title: u, content: s }) => {
+  const [n, c] = m.useState(!1), [i, l] = m.useState(0), e = m.useRef(null), o = () => {
+    c(!n);
+  };
+  return m.useEffect(() => {
+    e.current && l(n ? e.current.scrollHeight : 0);
+  }, [n]), /* @__PURE__ */ t.jsxs("div", { className: U.accordion, children: [
+    /* @__PURE__ */ t.jsxs(
+      "div",
+      {
+        className: U.header,
+        onClick: o,
+        children: [
+          /* @__PURE__ */ t.jsx("h3", { children: u }),
+          /* @__PURE__ */ t.jsx("div", { className: W(U.icon, { [U.open]: n }), children: /* @__PURE__ */ t.jsx(h, { name: "CaretDown" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ t.jsx(
+      "div",
+      {
+        ref: e,
+        className: U.content,
+        style: { height: `${i}px` },
+        children: /* @__PURE__ */ t.jsx("p", { children: s })
+      }
+    )
+  ] });
+}, gt = "_wrapper_1g82c_2", xt = "_alignmentBlock_1g82c_8", bt = "_title_1g82c_15", ft = "_subtitle_1g82c_22", vt = "_alignmentContent_1g82c_29", jt = "_alignments_1g82c_35", kt = "_alignment_1g82c_8", $t = "_circle_1g82c_54", yt = "_paddings_1g82c_61", wt = "_padding_1g82c_61", Nt = "_input_1g82c_79", S = {
+  wrapper: gt,
+  alignmentBlock: xt,
+  title: bt,
+  subtitle: ft,
+  alignmentContent: vt,
+  alignments: jt,
+  alignment: kt,
+  circle: $t,
+  paddings: yt,
+  padding: wt,
+  input: Nt
+}, Bt = [
   "topLeft",
   "top",
   "topRight",
@@ -23,8 +57,8 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
   "bottomLeft",
   "bottom",
   "bottomRight"
-], kt = ["left", "top", "right", "bottom"], Is = (u) => {
-  const { alignment: s, padding: o, setPadding: c, setAlignment: i } = u;
+], Ct = ["left", "top", "right", "bottom"], Es = (u) => {
+  const { alignment: s, padding: n, setPadding: c, setAlignment: i } = u;
   function l() {
     switch (s) {
       case "left":
@@ -43,8 +77,8 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
         return "TextAlignCenter";
     }
   }
-  function e(n) {
-    switch (n) {
+  function e(o) {
+    switch (o) {
       case "left":
         return "AlignLeft";
       case "right":
@@ -60,17 +94,17 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
     /* @__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(
+        /* @__PURE__ */ t.jsx("div", { className: S.alignments, children: Bt.map((o) => /* @__PURE__ */ t.jsxs(
           "div",
           {
             onClick: () => {
-              i(n);
+              i(o);
             },
             className: S.alignment,
             children: [
-              n !== s && /* @__PURE__ */ t.jsx("div", { className: S.circle }),
-              n === s && /* @__PURE__ */ t.jsx(
-                m,
+              o !== s && /* @__PURE__ */ t.jsx("div", { className: S.circle }),
+              o === s && /* @__PURE__ */ t.jsx(
+                h,
                 {
                   name: l(),
                   fill: "#FF3F19",
@@ -80,13 +114,13 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
               )
             ]
           },
-          n
+          o
         )) }),
-        /* @__PURE__ */ t.jsx("div", { className: S.paddings, children: kt.map((n) => /* @__PURE__ */ t.jsxs("label", { className: S.padding, children: [
+        /* @__PURE__ */ t.jsx("div", { className: S.paddings, children: Ct.map((o) => /* @__PURE__ */ t.jsxs("label", { className: S.padding, children: [
           /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-            m,
+            h,
             {
-              name: e(n),
+              name: e(o),
               width: 20,
               height: 20
             }
@@ -95,10 +129,10 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
             M,
             {
               type: "text",
-              value: String(o[n]),
+              value: String(n[o]),
               onChange: (r) => c({
-                ...o,
-                [n]: Number(r)
+                ...n,
+                [o]: Number(r)
               }),
               paddingless: !0,
               borderless: !0
@@ -108,18 +142,18 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
       ] })
     ] })
   ] });
-}, $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;
+}, Tt = "_subtitle_2zbxx_1", Pt = "_header_2zbxx_8", It = "_text_2zbxx_9", At = "_top_2zbxx_16", St = "_itemsBlock_2zbxx_23", X = {
+  subtitle: Tt,
+  header: Pt,
+  text: It,
+  top: At,
+  itemsBlock: St
+}, Ot = "_typeTexts_3zlec_1", Dt = "_block_3zlec_7", Lt = "_active_3zlec_18", tt = {
+  typeTexts: Ot,
+  block: Dt,
+  active: Lt
+}, qt = ["bold", "italic", "underline", "strike-through", "code"], rt = (u) => {
+  const { typesText: s, setTypesText: n } = u;
   function c(i) {
     switch (i) {
       case "bold":
@@ -134,22 +168,22 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
         return "TextUnderline";
     }
   }
-  return /* @__PURE__ */ t.jsx("div", { className: W.typeTexts, children: It.map((i) => /* @__PURE__ */ t.jsx(
+  return /* @__PURE__ */ t.jsx("div", { className: tt.typeTexts, children: qt.map((i) => /* @__PURE__ */ t.jsx(
     "div",
     {
-      className: tt(W.block, {
-        [W.active]: s.includes(i)
+      className: W(tt.block, {
+        [tt.active]: s.includes(i)
       }),
       onClick: () => {
         const l = [...s];
         if (l.includes(i)) {
-          const e = l.filter((n) => n !== i);
-          o(e);
+          const e = l.filter((o) => o !== i);
+          n(e);
         } else
-          l.push(i), o(l);
+          l.push(i), n(l);
       },
       children: /* @__PURE__ */ t.jsx(
-        m,
+        h,
         {
           name: c(i),
           fill: s.includes(i) ? "#252525" : "#757575",
@@ -160,32 +194,32 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
     },
     String(i)
   )) });
-}, At = (u) => {
+}, Et = (u) => {
   const {
     typesText: s,
-    isActiveText: o,
+    isActiveText: n,
     setIsActiveText: c,
     text: i,
     setText: l,
     setTypesText: e,
-    title: n,
+    title: o,
     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(
+  return /* @__PURE__ */ t.jsxs("div", { className: X.text, children: [
+    (o || n !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: X.top, children: [
+      o && /* @__PURE__ */ t.jsx("h3", { className: X.title, children: o }),
+      n !== void 0 && c && /* @__PURE__ */ t.jsx(
         E,
         {
-          current: o,
+          current: n,
           onChange: (j) => c(j)
         }
       )
     ] }),
-    /* @__PURE__ */ t.jsxs("div", { className: U.itemsBlock, children: [
-      /* @__PURE__ */ t.jsx("h5", { className: U.subtitle, children: r }),
+    /* @__PURE__ */ t.jsxs("div", { className: X.itemsBlock, children: [
+      /* @__PURE__ */ t.jsx("h5", { className: X.subtitle, children: r }),
       /* @__PURE__ */ t.jsx(
-        nt,
+        ot,
         {
           onChange: (j) => l(j),
           value: i,
@@ -193,7 +227,7 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
         }
       ),
       /* @__PURE__ */ t.jsx(
-        at,
+        rt,
         {
           typesText: s,
           setTypesText: e
@@ -201,29 +235,29 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
       )
     ] })
   ] });
-}, 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;
+}, Rt = "_subtitle_11qr1_1", Ht = "_header_11qr1_8", Mt = "_text_11qr1_9", zt = "_productsBlock_11qr1_10", Ft = "_top_11qr1_22", Gt = "_itemsBlock_11qr1_29", Ut = "_typeTexts_11qr1_35", Xt = "_block_11qr1_41", Yt = "_active_11qr1_52", Vt = "_products_11qr1_10", Jt = "_product_11qr1_10", Kt = "_button_11qr1_70", Qt = "_disabled_11qr1_80", Wt = "_image_11qr1_84", Zt = "_info_11qr1_91", te = "_name_11qr1_102", ee = "_buttons_11qr1_106", se = "_modal_11qr1_112", ne = "_link_11qr1_130", oe = "_modalOptions_11qr1_136", y = {
+  subtitle: Rt,
+  header: Ht,
+  text: Mt,
+  productsBlock: zt,
+  top: Ft,
+  itemsBlock: Gt,
+  typeTexts: Ut,
+  block: Xt,
+  active: Yt,
+  products: Vt,
+  product: Jt,
+  button: Kt,
+  disabled: Qt,
+  image: Wt,
+  info: Zt,
+  name: te,
+  buttons: ee,
+  modal: se,
+  link: ne,
+  modalOptions: oe
+}, ce = (u) => {
+  const { activeItem: s, setActiveItem: n, popupPosition: c, modalOptions: i, setIsOpenModal: l } = u;
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
@@ -239,14 +273,14 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
         /* @__PURE__ */ t.jsxs("div", { className: y.top, children: [
           /* @__PURE__ */ t.jsx("h3", { children: s.name }),
           /* @__PURE__ */ t.jsx(
-            m,
+            h,
             {
               name: "X",
               height: 20,
               width: 20,
               hoverable: !0,
               onClick: () => {
-                o(null), l(!1);
+                n(null), l(!1);
               }
             }
           )
@@ -254,37 +288,37 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
         /* @__PURE__ */ t.jsx("div", { className: y.modalOptions, children: i.map((e) => {
           if (e.type === "image")
             return /* @__PURE__ */ t.jsx(
-              et,
+              st,
               {
                 label: "Put up an attractive image",
-                onChange: (n) => {
+                onChange: (o) => {
                   const r = {
                     ...s,
-                    [e.field]: n
+                    [e.field]: o
                   };
-                  o(r);
+                  n(r);
                 }
               }
             );
           if (e.type === "text")
             return /* @__PURE__ */ t.jsx(
-              At,
+              Et,
               {
                 typesText: s[e.field.type],
-                setTypesText: (n) => {
+                setTypesText: (o) => {
                   const r = {
                     ...s,
-                    [e.field.type]: n
+                    [e.field.type]: o
                   };
-                  o(r);
+                  n(r);
                 },
                 text: s[e.field.text] || "",
-                setText: (n) => {
+                setText: (o) => {
                   const r = {
                     ...s,
-                    [e.field.text]: n
+                    [e.field.text]: o
                   };
-                  o(r);
+                  n(r);
                 },
                 subtitle: e.label
               }
@@ -293,12 +327,12 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
             return /* @__PURE__ */ t.jsx(
               M,
               {
-                onChange: (n) => {
+                onChange: (o) => {
                   const r = {
                     ...s,
-                    [e.field]: n
+                    [e.field]: o
                   };
-                  o(r);
+                  n(r);
                 },
                 value: s[e.field] || "",
                 label: e.label,
@@ -310,12 +344,12 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
               /* @__PURE__ */ t.jsx(
                 M,
                 {
-                  onChange: (n) => {
+                  onChange: (o) => {
                     const r = {
                       ...s,
-                      [e.field.text]: n
+                      [e.field.text]: o
                     };
-                    o(r);
+                    n(r);
                   },
                   value: s[e.field.text] || "",
                   label: e.inputLabel,
@@ -327,27 +361,27 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
                 {
                   current: !!s[e.field.switch] || !1,
                   label: e.switchLabel,
-                  onChange: (n) => {
+                  onChange: (o) => {
                     const r = {
                       ...s,
-                      [e.field.switch]: n
+                      [e.field.switch]: o
                     };
-                    o(r);
+                    n(r);
                   }
                 }
               )
             ] });
           if (e.type === "list")
             return /* @__PURE__ */ t.jsx(
-              oe,
+              de,
               {
                 items: s[e.field] || [],
-                setItems: (n) => {
+                setItems: (o) => {
                   const r = {
                     ...s,
-                    [e.field]: n
+                    [e.field]: o
                   };
-                  o(r);
+                  n(r);
                 },
                 itemsType: "select",
                 draggable: e.draggable || !1,
@@ -362,31 +396,31 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
               z,
               {
                 options: e.itemsOptions,
-                onChange: (n) => {
+                onChange: (o) => {
                   const r = {
                     ...s,
-                    [e.field]: n
+                    [e.field]: o
                   };
-                  o(r);
+                  n(r);
                 },
                 label: e.label,
                 value: s[e.field] || "String",
-                leftAddon: e.leftAddon && e.leftAddon === "icon" && /* @__PURE__ */ t.jsx(m, { name: s[e.field] })
+                leftAddon: e.leftAddon && e.leftAddon === "icon" && /* @__PURE__ */ t.jsx(h, { name: s[e.field] })
               }
             );
         }) })
       ]
     }
   );
-}, 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(
+}, ie = "_other_1wtgi_1", le = "_subtitle_1wtgi_7", ae = "_items_1wtgi_14", et = {
+  other: ie,
+  subtitle: le,
+  items: ae
+}, dt = (u) => {
+  const { items: s, title: n = "Other" } = u;
+  return /* @__PURE__ */ t.jsxs("div", { className: et.other, children: [
+    /* @__PURE__ */ t.jsx("h5", { className: et.subtitle, children: n }),
+    /* @__PURE__ */ t.jsx("div", { className: et.items, children: s.map((c) => /* @__PURE__ */ t.jsx(
       E,
       {
         current: c.isItem,
@@ -397,74 +431,74 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
       }
     )) })
   ] });
-}, ne = (u) => {
-  const { index: s, moveProduct: o, children: c } = u, [, i] = it({
+}, re = (u) => {
+  const { index: s, moveProduct: n, children: c } = u, [, i] = lt({
     accept: "product",
-    hover(n) {
-      n.index !== s && (o(n.index, s), n.index = s);
+    hover(o) {
+      o.index !== s && (n(o.index, s), o.index = s);
     }
-  }), [{ isDragging: l }, e] = lt({
+  }), [{ isDragging: l }, e] = at({
     type: "product",
     item: { index: s },
-    collect: (n) => ({
-      isDragging: n.isDragging()
+    collect: (o) => ({
+      isDragging: o.isDragging()
     })
   });
   return /* @__PURE__ */ t.jsx(
     "div",
     {
-      ref: (n) => e(i(n)),
+      ref: (o) => e(i(o)),
       className: `${y.product} ${l ? y.dragging : ""}`,
       children: c
     }
   );
-}, oe = (u) => {
+}, de = (u) => {
   const {
     isActiveItems: s,
-    setIsActiveItems: o,
+    setIsActiveItems: n,
     items: c,
     setItems: i,
     other: l,
     title: e,
-    subtitle: n,
+    subtitle: o,
     editable: r = !0,
     draggable: j = !1,
     withImage: _ = !1,
     deletable: v = !0,
-    addable: b = !0,
+    addable: f = !0,
     itemsType: w,
-    itemsPlaceholder: h = "",
+    itemsPlaceholder: g = "",
     itemsOptions: p,
     hasRangeSelector: C = !1,
-    rangeSelectorOptions: V,
-    modalOptions: J,
+    rangeSelectorOptions: J,
+    modalOptions: K,
     addableOptions: F = {},
     limit: I
-  } = u, [D, L] = f.useState(null), [Q, K] = f.useState({
+  } = u, [D, L] = m.useState(null), [Z, Q] = m.useState({
     top: 0,
     left: 0
-  }), [d, g] = f.useState(!1), T = (a, N) => {
-    const P = [...c], [x] = P.splice(a, 1);
-    P.splice(N, 0, x), i(P);
+  }), [d, x] = m.useState(!1), T = (a, N) => {
+    const P = [...c], [b] = P.splice(a, 1);
+    P.splice(N, 0, b), i(P);
   };
-  f.useEffect(() => {
+  m.useEffect(() => {
     const a = () => {
-      L(null), g(!1);
+      L(null), x(!1);
     };
-    return document.body.addEventListener("click", a), L(null), g(!1), () => {
-      L(null), g(!1), document.body.removeEventListener("click", a);
+    return document.body.addEventListener("click", a), L(null), x(!1), () => {
+      L(null), x(!1), document.body.removeEventListener("click", a);
     };
-  }, []), f.useEffect(() => {
+  }, []), m.useEffect(() => {
     if (D) {
       const a = [...c].map((N) => N.id === D.id ? D : N);
       i(a);
     }
   }, [D]);
   const k = (a, N) => {
-    a.stopPropagation(), g(!0);
-    const P = a.target.getBoundingClientRect(), x = 500, G = window.innerHeight;
+    a.stopPropagation(), x(!0);
+    const P = a.target.getBoundingClientRect(), b = 500, G = window.innerHeight;
     let O = P.top + window.scrollY;
-    console.log(x), O + x > G && (O = G - x - 20), K({
+    console.log(b), O + b > G && (O = G - b - 20), Q({
       top: O - 80,
       left: P.left - 30
     }), L(N);
@@ -480,7 +514,7 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
           height: 16
         }
       ) : /* @__PURE__ */ t.jsx(
-        m,
+        h,
         {
           name: "Image",
           width: 16,
@@ -492,7 +526,7 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
   const A = (a, N) => {
     const P = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       j && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-        m,
+        h,
         {
           name: "DotsSixVertical",
           hoverable: !0,
@@ -503,14 +537,14 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
       w === "select" && /* @__PURE__ */ t.jsx(
         z,
         {
-          onChange: (x) => {
+          onChange: (b) => {
             const O = [...c].map((q) => q.id === a.id ? {
               ...a,
-              name: x
+              name: b
             } : q);
             L({
               ...a,
-              name: x
+              name: b
             }), i([...O]);
           },
           value: a.name,
@@ -521,24 +555,24 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
       w === "input" && /* @__PURE__ */ t.jsx(
         M,
         {
-          onChange: (x) => {
+          onChange: (b) => {
             const O = [...c].map((q) => q.id === a.id ? {
               ...a,
-              name: x
+              name: b
             } : q);
             i([...O]);
           },
           value: a.name,
-          placeholder: h
+          placeholder: g
         }
       ),
       w === "image" && /* @__PURE__ */ t.jsx(
-        et,
+        st,
         {
-          onChange: (x) => {
+          onChange: (b) => {
             const O = [...c].map((q) => q.id === a.id ? {
               ...a,
-              images: x
+              images: b
             } : q);
             i([...O]);
           }
@@ -546,30 +580,30 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
       ),
       /* @__PURE__ */ t.jsxs("div", { className: y.buttons, children: [
         r && /* @__PURE__ */ t.jsx(
-          m,
+          h,
           {
             name: "Sliders",
             hoverable: !0,
             width: 20,
             height: 20,
-            onClick: (x) => k(x, a)
+            onClick: (b) => k(b, a)
           }
         ),
         v && /* @__PURE__ */ t.jsx(
-          m,
+          h,
           {
             name: "Trash",
             hoverable: !0,
             width: 20,
             height: 20,
             fill: "#C12A2A",
-            onClick: () => i(c.filter((x) => x.id !== a.id))
+            onClick: () => i(c.filter((b) => b.id !== a.id))
           }
         )
       ] })
     ] });
     return j ? /* @__PURE__ */ t.jsx(
-      ne,
+      re,
       {
         product: a,
         index: N,
@@ -593,28 +627,28 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
         E,
         {
           current: s,
-          onChange: (a) => o == null ? void 0 : o(a)
+          onChange: (a) => n == null ? void 0 : n(a)
         }
       )
     ] }),
-    D && r && J && d && /* @__PURE__ */ t.jsx(
-      Zt,
+    D && r && K && d && /* @__PURE__ */ t.jsx(
+      ce,
       {
         activeItem: D,
         setActiveItem: L,
-        popupPosition: Q,
-        modalOptions: J,
-        setIsOpenModal: g
+        popupPosition: Z,
+        modalOptions: K,
+        setIsOpenModal: x
       }
     ),
-    C && V && /* @__PURE__ */ t.jsx(ls, { ...V }),
+    C && J && /* @__PURE__ */ t.jsx(ps, { ...J }),
     /* @__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,
+      o && /* @__PURE__ */ t.jsx("h5", { className: y.subtitle, children: o }),
+      j ? /* @__PURE__ */ t.jsx(ct, { backend: it, children: c.map((a, N) => A(a, N)) }) : c.map((a, N) => A(a, N)),
+      f && /* @__PURE__ */ t.jsxs(
+        nt,
         {
-          className: tt(y.button, {
+          className: W(y.button, {
             [y.disabled]: !!(I && I <= c.length)
           }),
           size: "s",
@@ -623,22 +657,22 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
             const a = [...c];
             w === "select" ? a.push({
               name: p[0] || `Product ${c.length + 1}`,
-              id: Y(),
+              id: V(),
               ...F
             }) : w === "input" ? a.push({
               name: "",
-              id: Y(),
+              id: V(),
               ...F
             }) : a.push({
               name: `Image ${c.length + 1}`,
-              id: Y(),
+              id: V(),
               ...F
             }), i(a);
           },
           children: [
             /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
             /* @__PURE__ */ t.jsx(
-              m,
+              h,
               {
                 name: "Plus",
                 width: 16,
@@ -649,33 +683,33 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
         }
       )
     ] }),
-    l !== void 0 && /* @__PURE__ */ t.jsx(rt, { items: l })
+    l !== void 0 && /* @__PURE__ */ t.jsx(dt, { items: l })
   ] });
-}, 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({
+}, ue = "_subtitle_41klp_1", _e = "_header_41klp_8", pe = "_text_41klp_9", me = "_productsBlock_41klp_10", he = "_buttonsBlock_41klp_11", ge = "_top_41klp_21", xe = "_itemsBlock_41klp_28", be = "_typeTexts_41klp_34", fe = "_block_41klp_40", ve = "_active_41klp_51", je = "_products_41klp_10", ke = "_product_41klp_10", $e = "_button_41klp_11", ye = "_image_41klp_79", we = "_info_41klp_86", Ne = "_name_41klp_97", Be = "_buttons_41klp_11", Ce = "_modal_41klp_107", Te = "_other_41klp_124", Pe = "_options_41klp_130", H = {
+  subtitle: ue,
+  header: _e,
+  text: pe,
+  productsBlock: me,
+  buttonsBlock: he,
+  top: ge,
+  itemsBlock: xe,
+  typeTexts: be,
+  block: fe,
+  active: ve,
+  products: je,
+  product: ke,
+  button: $e,
+  image: ye,
+  info: we,
+  name: Ne,
+  buttons: Be,
+  modal: Ce,
+  other: Te,
+  options: Pe
+}, Ie = (u) => {
+  const { activeButton: s, setActiveButton: n, popupPosition: c } = u, [i, l] = m.useState(s.typesText), [e, o] = m.useState(s.destination), [r, j] = m.useState(s.link || ""), [_, v] = m.useState(s.text || "");
+  return m.useEffect(() => {
+    n({
       ...s,
       ...{
         text: _,
@@ -688,8 +722,8 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
     "div",
     {
       className: H.modal,
-      onClick: (b) => {
-        b.stopPropagation();
+      onClick: (f) => {
+        f.stopPropagation();
       },
       style: {
         top: `${c.top}px`,
@@ -699,13 +733,13 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
         /* @__PURE__ */ t.jsxs("div", { className: H.top, children: [
           /* @__PURE__ */ t.jsx("h3", { children: s.type }),
           /* @__PURE__ */ t.jsx(
-            m,
+            h,
             {
               name: "X",
               height: 20,
               width: 20,
               hoverable: !0,
-              onClick: () => o(null)
+              onClick: () => n(null)
             }
           )
         ] }),
@@ -714,7 +748,7 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
             z,
             {
               label: "Destination",
-              onChange: (b) => n(b),
+              onChange: (f) => o(f),
               options: ["Go to Page", "Open Link"],
               value: e
             }
@@ -731,7 +765,7 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
           ) : /* @__PURE__ */ t.jsx(
             M,
             {
-              onChange: (b) => j(b),
+              onChange: (f) => j(f),
               value: r,
               placeholder: "https://",
               label: "Link"
@@ -745,16 +779,16 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
             }
           ),
           /* @__PURE__ */ t.jsx(
-            nt,
+            ot,
             {
-              onChange: (b) => v(b),
+              onChange: (f) => v(f),
               value: _,
               label: "Text",
               maxLength: 150
             }
           ),
           /* @__PURE__ */ t.jsx(
-            at,
+            rt,
             {
               typesText: i,
               setTypesText: l
@@ -764,78 +798,78 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
       ]
     }
   );
-}, 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({
+}, Ae = "_subtitle_1y5sw_1", Se = "_header_1y5sw_8", Oe = "_text_1y5sw_9", De = "_productsBlock_1y5sw_10", Le = "_buttonsBlock_1y5sw_11", qe = "_top_1y5sw_22", Ee = "_itemsBlock_1y5sw_29", Re = "_typeTexts_1y5sw_35", He = "_block_1y5sw_41", Me = "_active_1y5sw_52", ze = "_products_1y5sw_10", Fe = "_product_1y5sw_10", Ge = "_button_1y5sw_11", Ue = "_image_1y5sw_80", Xe = "_info_1y5sw_87", Ye = "_name_1y5sw_98", Ve = "_buttons_1y5sw_11", Je = "_modal_1y5sw_108", Ke = "_other_1y5sw_125", Qe = "_options_1y5sw_131", Y = {
+  subtitle: Ae,
+  header: Se,
+  text: Oe,
+  productsBlock: De,
+  buttonsBlock: Le,
+  top: qe,
+  itemsBlock: Ee,
+  typeTexts: Re,
+  block: He,
+  active: Me,
+  products: ze,
+  product: Fe,
+  button: Ge,
+  image: Ue,
+  info: Xe,
+  name: Ye,
+  buttons: Ve,
+  modal: Je,
+  other: Ke,
+  options: Qe
+}, We = (u) => {
+  const { buttons: s, setButtons: n, deletable: c = !0, addable: i = !0 } = u, [l, e] = m.useState(null), [o, r] = m.useState({
     top: 0,
     left: 0
   });
-  f.useEffect(() => {
+  m.useEffect(() => {
     const _ = () => {
       e(null);
     };
     return document.body.addEventListener("click", _), e(null), () => {
       e(null), document.body.removeEventListener("click", _);
     };
-  }, []), f.useEffect(() => {
+  }, []), m.useEffect(() => {
     if (l) {
       const _ = [...s].map((v) => v.id === l.id ? l : v);
-      o(_);
+      n(_);
     }
   }, [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({
+    const f = _.target.getBoundingClientRect(), w = 490, g = window.innerHeight;
+    let p = f.top + window.scrollY;
+    p + w > g && (p = g - w - 20), r({
       top: p,
-      left: b.left - 30
+      left: f.left - 30
     }), e(v);
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: X.products, children: [
-    /* @__PURE__ */ t.jsx("h5", { className: X.subtitle, children: "Button Type" }),
+  return /* @__PURE__ */ t.jsxs("div", { className: Y.products, children: [
+    /* @__PURE__ */ t.jsx("h5", { className: Y.subtitle, children: "Button Type" }),
     s.map((_) => /* @__PURE__ */ t.jsxs(
       "div",
       {
-        className: X.product,
+        className: Y.product,
         children: [
           /* @__PURE__ */ t.jsx(
             z,
             {
               onChange: (v) => {
-                const w = [...s].map((h) => h.id === _.id ? {
+                const w = [...s].map((g) => g.id === _.id ? {
                   ..._,
                   type: v
-                } : h);
-                o(w);
+                } : g);
+                n(w);
               },
               value: _.type,
               options: ["Primary", "Secondary", "Tertiary"]
             }
           ),
-          /* @__PURE__ */ t.jsxs("div", { className: X.buttons, children: [
+          /* @__PURE__ */ t.jsxs("div", { className: Y.buttons, children: [
             /* @__PURE__ */ t.jsx(
-              m,
+              h,
               {
                 name: "Sliders",
                 hoverable: !0,
@@ -847,13 +881,13 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
               }
             ),
             c && /* @__PURE__ */ t.jsx(
-              m,
+              h,
               {
                 name: "Trash",
                 hoverable: !0,
                 onClick: () => {
-                  const v = s.filter((b) => b.id !== _.id);
-                  o(v);
+                  const v = s.filter((f) => f.id !== _.id);
+                  n(v);
                 },
                 width: 20,
                 height: 20,
@@ -866,32 +900,32 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
       _.id
     )),
     l && /* @__PURE__ */ t.jsx(
-      we,
+      Ie,
       {
         activeButton: l,
         setActiveButton: e,
-        popupPosition: n
+        popupPosition: o
       }
     ),
     i && /* @__PURE__ */ t.jsxs(
-      st,
+      nt,
       {
-        className: X.button,
+        className: Y.button,
         size: "s",
         onClick: () => {
           const _ = [...s];
           _.push({
             type: "Primary",
-            id: Y(),
+            id: V(),
             typesText: [],
             destination: "Go to Page",
             text: ""
-          }), o(_);
+          }), n(_);
         },
         children: [
           /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
           /* @__PURE__ */ t.jsx(
-            m,
+            h,
             {
               name: "Plus",
               width: 16,
@@ -902,8 +936,8 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
       }
     )
   ] });
-}, As = (u) => {
-  const { isActiveButtons: s, setIsActiveButtons: o, buttons: c, setButtons: i } = u;
+}, Rs = (u) => {
+  const { isActiveButtons: s, setIsActiveButtons: n, 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" }),
@@ -911,40 +945,40 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
         E,
         {
           current: s,
-          onChange: (l) => o(l)
+          onChange: (l) => n(l)
         }
       )
     ] }),
     /* @__PURE__ */ t.jsx(
-      Xe,
+      We,
       {
         buttons: c,
         setButtons: i
       }
     )
   ] }) });
-}, 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 = () => {
+}, Ze = "_wrapper_tn7gb_1", ts = "_subtitle_tn7gb_7", es = "_content_tn7gb_14", ss = "_range_tn7gb_21", ns = "_track_tn7gb_26", os = "_progress_tn7gb_35", cs = "_dots_tn7gb_45", is = "_dot_tn7gb_45", ls = "_active_tn7gb_62", as = "_input_tn7gb_74", rs = "_countBlock_tn7gb_88", ds = "_count_tn7gb_88", us = "_controls_tn7gb_103", _s = "_button_tn7gb_108", $ = {
+  wrapper: Ze,
+  subtitle: ts,
+  content: es,
+  range: ss,
+  track: ns,
+  progress: os,
+  dots: cs,
+  dot: is,
+  active: ls,
+  input: as,
+  countBlock: rs,
+  count: ds,
+  controls: us,
+  button: _s
+}, ps = (u) => {
+  const { label: s, min: n = 1, max: c = 4, step: i = 1, count: l, setCount: e } = u, [o, r] = m.useState(!1), j = Array.from({ length: (c - n) / i + 1 }), _ = (l - n) / (c - n) * 100, v = () => {
     l < c && e(l + i);
-  }, b = () => {
-    l > o && e(l - i);
-  }, w = (h) => {
-    const p = o + h * i;
+  }, f = () => {
+    l > n && e(l - i);
+  }, w = (g) => {
+    const p = n + g * i;
     e(p);
   };
   return /* @__PURE__ */ t.jsxs("div", { className: $.wrapper, children: [
@@ -959,18 +993,18 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
             style: { width: `${_}%` }
           }
         ),
-        /* @__PURE__ */ t.jsx("div", { className: $.dots, children: j.map((h, p) => {
-          const C = p <= (l - o) / i;
+        /* @__PURE__ */ t.jsx("div", { className: $.dots, children: j.map((g, p) => {
+          const C = p <= (l - n) / i;
           return /* @__PURE__ */ t.jsx(
             "button",
             {
               onClick: () => w(p),
-              className: tt($.dot, {
+              className: W($.dot, {
                 [$.active]: C,
                 [$.inactive]: !C,
-                [$.dragging]: n
+                [$.dragging]: o
               }),
-              "aria-label": `Set value to ${o + p * i}`
+              "aria-label": `Set value to ${n + p * i}`
             },
             p
           );
@@ -979,11 +1013,11 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
           "input",
           {
             type: "range",
-            min: o,
+            min: n,
             max: c,
             step: i,
             value: l,
-            onChange: (h) => e(Number(h.target.value)),
+            onChange: (g) => e(Number(g.target.value)),
             onMouseDown: () => r(!0),
             onMouseUp: () => r(!1),
             onTouchStart: () => r(!0),
@@ -997,12 +1031,12 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
           M,
           {
             type: "number",
-            min: o,
+            min: n,
             max: c,
             paddingless: !0,
-            onChange: (h) => {
-              const p = Number(h);
-              p > c ? e(c) : p < o ? e(o) : e(p);
+            onChange: (g) => {
+              const p = Number(g);
+              p > c ? e(c) : p < n ? e(n) : e(p);
             },
             value: String(l)
           }
@@ -1016,7 +1050,7 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
               className: $.button,
               "aria-label": "Increment count",
               children: /* @__PURE__ */ t.jsx(
-                m,
+                h,
                 {
                   name: "CaretUp",
                   width: 15,
@@ -1028,12 +1062,12 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
           /* @__PURE__ */ t.jsx(
             "button",
             {
-              onClick: b,
-              disabled: l <= o,
+              onClick: f,
+              disabled: l <= n,
               className: $.button,
               "aria-label": "Decrement count",
               children: /* @__PURE__ */ t.jsx(
-                m,
+                h,
                 {
                   name: "CaretDown",
                   width: 15,
@@ -1046,28 +1080,28 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
       ] })
     ] })
   ] });
-}, 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;
+}, ms = "_subtitle_1nl8x_1", hs = "_header_1nl8x_8", gs = "_text_1nl8x_9", xs = "_productsBlock_1nl8x_10", bs = "_top_1nl8x_22", fs = "_itemsBlock_1nl8x_29", vs = "_typeTexts_1nl8x_35", js = "_block_1nl8x_41", ks = "_active_1nl8x_52", $s = "_products_1nl8x_10", ys = "_product_1nl8x_10", ws = "_button_1nl8x_70", Ns = "_image_1nl8x_80", Bs = "_info_1nl8x_87", Cs = "_name_1nl8x_98", Ts = "_buttons_1nl8x_102", Ps = "_modal_1nl8x_108", Is = "_link_1nl8x_126", As = "_modalOptions_1nl8x_132", B = {
+  subtitle: ms,
+  header: hs,
+  text: gs,
+  productsBlock: xs,
+  top: bs,
+  itemsBlock: fs,
+  typeTexts: vs,
+  block: js,
+  active: ks,
+  products: $s,
+  product: ys,
+  button: ws,
+  image: Ns,
+  info: Bs,
+  name: Cs,
+  buttons: Ts,
+  modal: Ps,
+  link: Is,
+  modalOptions: As
+}, Ss = (u) => {
+  const { activeItem: s, setActiveItem: n, popupPosition: c, setIsOpenModal: i } = u;
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
@@ -1083,20 +1117,20 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
         /* @__PURE__ */ t.jsxs("div", { className: B.top, children: [
           /* @__PURE__ */ t.jsx("h3", { children: s.name }),
           /* @__PURE__ */ t.jsx(
-            m,
+            h,
             {
               name: "X",
               height: 20,
               width: 20,
               hoverable: !0,
               onClick: () => {
-                i(!1), o(null);
+                i(!1), n(null);
               }
             }
           )
         ] }),
         /* @__PURE__ */ t.jsx("div", { className: B.modalOptions, children: /* @__PURE__ */ t.jsx(
-          et,
+          st,
           {
             label: "Put up an attractive image",
             onChange: (l) => {
@@ -1105,80 +1139,80 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
                 images: l,
                 imagePath: l[0]
               };
-              o(e);
+              n(e);
             }
           }
         ) })
       ]
     }
   );
-}, Cs = (u) => {
-  const { index: s, moveProduct: o, children: c } = u, [, i] = it({
+}, Os = (u) => {
+  const { index: s, moveProduct: n, children: c } = u, [, i] = lt({
     accept: "product",
-    hover(n) {
-      n.index !== s && (o(n.index, s), n.index = s);
+    hover(o) {
+      o.index !== s && (n(o.index, s), o.index = s);
     }
-  }), [{ isDragging: l }, e] = lt({
+  }), [{ isDragging: l }, e] = at({
     type: "product",
     item: { index: s },
-    collect: (n) => ({
-      isDragging: n.isDragging()
+    collect: (o) => ({
+      isDragging: o.isDragging()
     })
   });
   return /* @__PURE__ */ t.jsx(
     "div",
     {
-      ref: (n) => e(i(n)),
+      ref: (o) => e(i(o)),
       className: `${B.product} ${l ? B.dragging : ""}`,
       children: c
     }
   );
-}, Ss = (u) => {
+}, Hs = (u) => {
   const {
     isActiveItems: s,
-    setIsActiveItems: o,
+    setIsActiveItems: n,
     items: c,
     setItems: i,
     other: l,
     title: e,
-    subtitle: n,
+    subtitle: o,
     editable: r = !0,
     draggable: j = !1,
     withImage: _ = !1,
     deletable: v = !0,
-    addable: b = !0,
+    addable: f = !0,
     itemsType: w,
-    itemsOptions: h
-  } = u, [p, C] = f.useState(null), [V, J] = f.useState({
+    itemsOptions: g
+  } = u, [p, C] = m.useState(null), [J, K] = m.useState({
     top: 0,
     left: 0
-  }), [F, I] = f.useState(!1), D = (d, g) => {
+  }), [F, I] = m.useState(!1), D = (d, x) => {
     const T = [...c], [k] = T.splice(d, 1);
-    T.splice(g, 0, k), i(T);
+    T.splice(x, 0, k), i(T);
   };
-  f.useEffect(() => {
+  m.useEffect(() => {
     const d = () => {
       C(null), I(!1);
     };
     return document.body.addEventListener("click", d), C(null), I(!1), () => {
       C(null), I(!1), document.body.removeEventListener("click", d);
     };
-  }, []), f.useEffect(() => {
+  }, []), m.useEffect(() => {
     if (p) {
-      const d = [...c].map((g) => g.id === p.id ? p : g);
+      const d = [...c].map((x) => x.id === p.id ? p : x);
       i(d);
     }
   }, [p]);
-  const L = (d, g) => {
+  const L = (d, x) => {
     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({
+    A + k > R && (A = R - k - 20), I(!0), K({
       top: A - 80,
       left: T.left - 30
-    }), C(g);
+    }), C(x);
   };
-  function Q(d) {
+  function Z(d) {
     if (_)
       return d ? /* @__PURE__ */ t.jsx(
         "img",
@@ -1189,7 +1223,7 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
           height: 16
         }
       ) : /* @__PURE__ */ t.jsx(
-        m,
+        h,
         {
           name: "Image",
           width: 16,
@@ -1198,10 +1232,10 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
         }
       );
   }
-  const K = (d, g) => {
+  const Q = (d, x) => {
     const T = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       j && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-        m,
+        h,
         {
           name: "DotsSixVertical",
           hoverable: !0,
@@ -1213,18 +1247,18 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
         z,
         {
           onChange: (k) => {
-            const R = [...c], A = Number(k.split(" ")[1]), a = h.find((x) => x.id === A);
+            const R = [...c], A = Number(k.split(" ")[1]), a = g.find((b) => b.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 ? {
+            }, P = R.map((b) => b.id === d.id ? {
               ...d,
               name: k,
               listingId: A,
               stats: N
-            } : x);
+            } : b);
             C({
               ...d,
               name: k,
@@ -1232,13 +1266,13 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
             }), i([...P]);
           },
           value: d.name,
-          options: [...h.map((k) => `Product ${k.id}`)],
-          leftAddon: Q(d.images[0])
+          options: [...g.map((k) => `Product ${k.id}`)],
+          leftAddon: Z(d.images[0])
         }
       ),
       /* @__PURE__ */ t.jsxs("div", { className: B.buttons, children: [
         r && /* @__PURE__ */ t.jsx(
-          m,
+          h,
           {
             name: "Sliders",
             hoverable: !0,
@@ -1248,7 +1282,7 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
           }
         ),
         v && /* @__PURE__ */ t.jsx(
-          m,
+          h,
           {
             name: "Trash",
             hoverable: !0,
@@ -1261,10 +1295,10 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
       ] })
     ] });
     return j ? /* @__PURE__ */ t.jsx(
-      Cs,
+      Os,
       {
         product: d,
-        index: g,
+        index: x,
         moveProduct: D,
         children: T
       },
@@ -1285,46 +1319,46 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
         E,
         {
           current: s,
-          onChange: (d) => o == null ? void 0 : o(d)
+          onChange: (d) => n == null ? void 0 : n(d)
         }
       )
     ] }),
     F && p && /* @__PURE__ */ t.jsx(
-      Bs,
+      Ss,
       {
         activeItem: p,
         setActiveItem: C,
         setIsOpenModal: I,
-        popupPosition: V
+        popupPosition: J
       }
     ),
     /* @__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,
+      o && /* @__PURE__ */ t.jsx("h5", { className: B.subtitle, children: o }),
+      j ? /* @__PURE__ */ t.jsx(ct, { backend: it, children: c.map((d, x) => Q(d, x)) }) : c.map((d, x) => Q(d, x)),
+      f && /* @__PURE__ */ t.jsxs(
+        nt,
         {
           className: B.button,
           size: "s",
           onClick: () => {
-            const d = [...c], g = h[0].id;
+            const d = [...c], x = g[0].id;
             d.push({
-              name: `Product ${g}`,
-              id: Y(),
-              listingId: g,
+              name: `Product ${x}`,
+              id: V(),
+              listingId: x,
               imagePath: "",
               images: [],
               stats: {
-                ...h[0].productData.stats,
-                newPrice: h[0].productData.minPrice.amount,
-                oldPrice: h[0].productData.compareAtPrice.amount
+                ...g[0].productData.stats,
+                newPrice: g[0].productData.minPrice.amount,
+                oldPrice: g[0].productData.compareAtPrice.amount
               }
             }), i(d);
           },
           children: [
             /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
             /* @__PURE__ */ t.jsx(
-              m,
+              h,
               {
                 name: "Plus",
                 width: 16,
@@ -1335,31 +1369,32 @@ const dt = "_wrapper_1g82c_2", ut = "_alignmentBlock_1g82c_8", _t = "_title_1g82
         }
       )
     ] }),
-    l !== void 0 && /* @__PURE__ */ t.jsx(rt, { items: l })
+    l !== void 0 && /* @__PURE__ */ t.jsx(dt, { items: l })
   ] });
 };
 export {
-  st as Button,
-  Xe as ButtonTypeSettings,
-  As as ButtonsSettings,
-  Ls as Checkbox,
-  et as ChooseImage,
-  qs as ChooseImageModal,
-  Es as ColorPicker,
-  m as Icon,
+  qs as Accordion,
+  nt as Button,
+  We as ButtonTypeSettings,
+  Rs as ButtonsSettings,
+  Fs as Checkbox,
+  st as ChooseImage,
+  Gs as ChooseImageModal,
+  Us as ColorPicker,
+  h as Icon,
   M as Input,
-  oe as ItemsSettings,
-  Is as LayoutSettings,
-  Ss as ListingSelector,
-  Rs as Modal,
-  Hs as Picker,
-  Ms as Radio,
-  ls as RangeSelector,
+  de as ItemsSettings,
+  Es as LayoutSettings,
+  Hs as ListingSelector,
+  Xs as Modal,
+  Ys as Picker,
+  Vs as Radio,
+  ps as RangeSelector,
   z as Select,
-  zs as Submodal,
+  Js as Submodal,
   E as Switch,
-  At as TextSettings,
-  nt as Textarea,
-  Fs as Tip,
-  at as TypesText
+  Et as TextSettings,
+  ot as Textarea,
+  Ks as Tip,
+  rt as TypesText
 };