@billgangcom/theme-lib 1.33.1 → 1.34.0

package/dist/ui.es.js

@@ -1,8 +1,8 @@
-import { j as t, I as b, a as W, c as F, S as K, T as Ct, C as ht, b as Z, D as yt, H as kt, B as it, v as dt, u as $t, d as wt, e as qt, f as ft, g as Nt, h as Bt, M as St, i as Pt, k as Dt } from "./index-CqF7deZx.js";
-import { l as no, L as io } from "./index-CqF7deZx.js";
-import p from "react";
+import { j as t, I as b, a as W, c as V, S as K, T as Ct, C as _t, b as Z, D as yt, H as kt, B as ot, v as dt, u as $t, d as Nt, e as Ot, f as ft, g as It, h as Bt, M as St, i as Tt, k as Dt } from "./index-DIba_a6n.js";
+import { l as da, L as ua } from "./index-DIba_a6n.js";
+import g from "react";
 import "@phosphor-icons/react";
-const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5j_15", Mt = "_subtitle_9rr5j_22", Ht = "_alignmentContent_9rr5j_29", zt = "_alignments_9rr5j_37", Vt = "_alignment_9rr5j_8", Ft = "_circle_9rr5j_58", Ut = "_paddings_9rr5j_65", Yt = "_padding_9rr5j_65", Gt = "_input_9rr5j_84", J = {
+const Et = "_wrapper_1q5mp_2", Lt = "_alignmentBlock_1q5mp_8", Rt = "_title_1q5mp_15", Mt = "_subtitle_1q5mp_22", Ht = "_alignmentContent_1q5mp_29", zt = "_alignments_1q5mp_37", Vt = "_alignment_1q5mp_8", Ft = "_circle_1q5mp_58", Ut = "_paddings_1q5mp_65", Yt = "_padding_1q5mp_65", Gt = "_input_1q5mp_84", Q = {
   wrapper: Et,
   alignmentBlock: Lt,
   title: Rt,
@@ -24,10 +24,10 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
   "bottomLeft",
   "bottom",
   "bottomRight"
-], Xt = ["left", "top", "right", "bottom"], Fa = (u) => {
-  const { alignment: a, padding: e, setPadding: s, setAlignment: i } = u;
+], Xt = ["left", "top", "right", "bottom"], Qo = (d) => {
+  const { alignment: o, padding: e, setPadding: s, setAlignment: i } = d;
   function c() {
-    switch (a) {
+    switch (o) {
       case "left":
       case "topLeft":
       case "bottomLeft":
@@ -44,8 +44,8 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
         return "TextAlignCenter";
     }
   }
-  function l(o) {
-    switch (o) {
+  function l(a) {
+    switch (a) {
       case "left":
         return "AlignLeft";
       case "right":
@@ -56,21 +56,21 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
         return "AlignBottom";
     }
   }
-  return /* @__PURE__ */ t.jsxs("div", { className: J.layout, children: [
-    /* @__PURE__ */ t.jsx("h3", { className: J.title, children: "Layout" }),
-    /* @__PURE__ */ t.jsxs("div", { className: J.alignmentBlock, children: [
-      /* @__PURE__ */ t.jsx("h5", { className: J.subtitle, children: "Alignment" }),
-      /* @__PURE__ */ t.jsxs("div", { className: J.alignmentContent, children: [
-        /* @__PURE__ */ t.jsx("div", { className: J.alignments, children: Wt.map((o) => /* @__PURE__ */ t.jsxs(
+  return /* @__PURE__ */ t.jsxs("div", { className: Q.layout, children: [
+    /* @__PURE__ */ t.jsx("h3", { className: Q.title, children: "Layout" }),
+    /* @__PURE__ */ t.jsxs("div", { className: Q.alignmentBlock, children: [
+      /* @__PURE__ */ t.jsx("h5", { className: Q.subtitle, children: "Alignment" }),
+      /* @__PURE__ */ t.jsxs("div", { className: Q.alignmentContent, children: [
+        /* @__PURE__ */ t.jsx("div", { className: Q.alignments, children: Wt.map((a) => /* @__PURE__ */ t.jsxs(
           "div",
           {
             onClick: () => {
-              i(o);
+              i(a);
             },
-            className: J.alignment,
+            className: Q.alignment,
             children: [
-              o !== a && /* @__PURE__ */ t.jsx("div", { className: J.circle }),
-              o === a && /* @__PURE__ */ t.jsx(
+              a !== o && /* @__PURE__ */ t.jsx("div", { className: Q.circle }),
+              a === o && /* @__PURE__ */ t.jsx(
                 b,
                 {
                   name: c(),
@@ -81,17 +81,17 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
               )
             ]
           },
-          o
+          a
         )) }),
-        /* @__PURE__ */ t.jsx("div", { className: J.paddings, children: Xt.map((o) => /* @__PURE__ */ t.jsxs(
+        /* @__PURE__ */ t.jsx("div", { className: Q.paddings, children: Xt.map((a) => /* @__PURE__ */ t.jsxs(
           "label",
           {
-            className: J.padding,
+            className: Q.padding,
             children: [
               /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
                 b,
                 {
-                  name: l(o),
+                  name: l(a),
                   width: 20,
                   height: 20
                 }
@@ -100,10 +100,10 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
                 W,
                 {
                   type: "number",
-                  value: String(e[o]),
+                  value: String(e[a]),
                   onChange: (n) => s({
                     ...e,
-                    [o]: Number(n)
+                    [a]: Number(n)
                   }),
                   paddingless: !0,
                   borderless: !0
@@ -111,12 +111,12 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
               )
             ]
           },
-          o
+          a
         )) })
       ] })
     ] })
   ] });
-}, Jt = "_title_voimd_1", Qt = "_subtitle_voimd_5", Kt = "_header_voimd_12", Zt = "_text_voimd_13", te = "_top_voimd_20", ee = "_itemsBlock_voimd_29", ut = {
+}, Jt = "_title_1jkiw_1", Qt = "_subtitle_1jkiw_5", Kt = "_header_1jkiw_12", Zt = "_text_1jkiw_13", te = "_top_1jkiw_20", ee = "_itemsBlock_1jkiw_29", ut = {
   title: Jt,
   subtitle: Qt,
   header: Kt,
@@ -127,8 +127,8 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
   typeTexts: se,
   block: ne,
   active: ie
-}, ae = ["bold", "italic", "underline", "strike-through", "code"], Tt = (u) => {
-  const { typesText: a, setTypesText: e } = u;
+}, oe = ["bold", "italic", "underline", "strike-through", "code"], Pt = (d) => {
+  const { typesText: o, setTypesText: e } = d;
   function s(i) {
     switch (i) {
       case "bold":
@@ -143,16 +143,16 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
         return "TextUnderline";
     }
   }
-  return /* @__PURE__ */ t.jsx("div", { className: bt.typeTexts, children: ae.map((i) => /* @__PURE__ */ t.jsx(
+  return /* @__PURE__ */ t.jsx("div", { className: bt.typeTexts, children: oe.map((i) => /* @__PURE__ */ t.jsx(
     "div",
     {
-      className: F(bt.block, {
-        [bt.active]: a.includes(i)
+      className: V(bt.block, {
+        [bt.active]: o.includes(i)
       }),
       onClick: () => {
-        const c = [...a];
+        const c = [...o];
         if (c.includes(i)) {
-          const l = c.filter((o) => o !== i);
+          const l = c.filter((a) => a !== i);
           e(l);
         } else
           c.push(i), e(c);
@@ -161,7 +161,7 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
         b,
         {
           name: s(i),
-          fill: a.includes(i) ? "#252525" : "#757575",
+          fill: o.includes(i) ? "#252525" : "#757575",
           width: 20,
           height: 20
         }
@@ -169,20 +169,20 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
     },
     String(i)
   )) });
-}, At = (u) => {
+}, At = (d) => {
   const {
-    typesText: a,
+    typesText: o,
     isActiveText: e,
     setIsActiveText: s,
     text: i,
     setText: c,
     setTypesText: l,
-    title: o,
+    title: a,
     subtitle: n = "Items"
-  } = u;
+  } = d;
   return /* @__PURE__ */ t.jsxs("div", { className: ut.text, children: [
-    (o || e !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: ut.top, children: [
-      o && /* @__PURE__ */ t.jsx("h3", { className: ut.title, children: o }),
+    (a || e !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: ut.top, children: [
+      a && /* @__PURE__ */ t.jsx("h3", { className: ut.title, children: a }),
       e !== void 0 && s && /* @__PURE__ */ t.jsx(
         K,
         {
@@ -202,47 +202,48 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
         }
       ),
       /* @__PURE__ */ t.jsx(
-        Tt,
+        Pt,
         {
-          typesText: a,
+          typesText: o,
           setTypesText: l
         }
       )
     ] })
   ] });
-}, oe = "_title_vzbkd_1", ce = "_subtitle_vzbkd_5", le = "_header_vzbkd_12", re = "_text_vzbkd_13", de = "_productsBlock_vzbkd_14", ue = "_top_vzbkd_26", me = "_itemsBlock_vzbkd_35", _e = "_typeTexts_vzbkd_41", he = "_block_vzbkd_48", pe = "_active_vzbkd_61", ge = "_products_vzbkd_14", fe = "_product_vzbkd_14", xe = "_button_vzbkd_80", be = "_disabled_vzbkd_91", ve = "_image_vzbkd_95", je = "_info_vzbkd_102", ye = "_name_vzbkd_114", ke = "_buttons_vzbkd_118", $e = "_modal_vzbkd_125", we = "_link_vzbkd_145", Ne = "_modalOptions_vzbkd_151", Ie = "_addButton_vzbkd_163", H = {
-  title: oe,
+}, ae = "_title_157lh_1", ce = "_subtitle_157lh_5", le = "_header_157lh_12", re = "_text_157lh_13", de = "_productsBlock_157lh_14", ue = "_top_157lh_26", me = "_itemsBlock_157lh_35", he = "_typeTexts_157lh_41", _e = "_block_157lh_48", pe = "_active_157lh_61", ge = "_products_157lh_14", fe = "_product_157lh_14", xe = "_button_157lh_80", be = "_disabled_157lh_91", je = "_image_157lh_95", ve = "_info_157lh_102", ye = "_name_157lh_114", ke = "_buttons_157lh_118", $e = "_modal_157lh_125", Ne = "_link_157lh_145", Ie = "_modalOptions_157lh_151", we = "_addButton_157lh_163", Ce = "_deleteButton_157lh_178", H = {
+  title: ae,
   subtitle: ce,
   header: le,
   text: re,
   productsBlock: de,
   top: ue,
   itemsBlock: me,
-  typeTexts: _e,
-  block: he,
+  typeTexts: he,
+  block: _e,
   active: pe,
   products: ge,
   product: fe,
   button: xe,
   disabled: be,
-  image: ve,
-  info: je,
+  image: je,
+  info: ve,
   name: ye,
   buttons: ke,
   modal: $e,
-  link: we,
-  modalOptions: Ne,
-  addButton: Ie
-}, Ce = p.forwardRef(
-  (u, a) => {
-    const { activeItem: e, setActiveItem: s, popupPosition: i, modalOptions: c, setIsOpenModal: l } = u;
-    function o(n, r) {
+  link: Ne,
+  modalOptions: Ie,
+  addButton: we,
+  deleteButton: Ce
+}, Be = g.forwardRef(
+  (d, o) => {
+    const { activeItem: e, setActiveItem: s, popupPosition: i, modalOptions: c, setIsOpenModal: l } = d;
+    function a(n, r) {
       return n.length > r ? `${n.slice(0, r)}...` : n;
     }
     return /* @__PURE__ */ t.jsxs(
       "div",
       {
-        ref: a,
+        ref: o,
         className: H.modal,
         onClick: (n) => {
           n.stopPropagation();
@@ -253,7 +254,7 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
         },
         children: [
           /* @__PURE__ */ t.jsxs("div", { className: H.top, children: [
-            /* @__PURE__ */ t.jsx("h3", { className: H.title, children: o(e.name, 20) }),
+            /* @__PURE__ */ t.jsx("h3", { className: H.title, children: a(e.name, 20) }),
             /* @__PURE__ */ t.jsx(
               b,
               {
@@ -270,16 +271,16 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
           /* @__PURE__ */ t.jsx("div", { className: H.modalOptions, children: c.map((n) => {
             if (n.type === "image")
               return /* @__PURE__ */ t.jsx(
-                ht,
+                _t,
                 {
                   label: "Put up an attractive image",
                   activeImage: e[n.field],
                   onChange: (r) => {
-                    const m = {
+                    const x = {
                       ...e,
                       [n.field]: r
                     };
-                    s(m);
+                    s(x);
                   }
                 },
                 String(n.field)
@@ -290,19 +291,19 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
                 {
                   typesText: e[n.field.type],
                   setTypesText: (r) => {
-                    const m = {
+                    const x = {
                       ...e,
                       [n.field.type]: r
                     };
-                    s(m);
+                    s(x);
                   },
                   text: e[n.field.text] || "",
                   setText: (r) => {
-                    const m = {
+                    const x = {
                       ...e,
                       [n.field.text]: r
                     };
-                    s(m);
+                    s(x);
                   },
                   subtitle: n.label
                 }
@@ -312,11 +313,11 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
                 W,
                 {
                   onChange: (r) => {
-                    const m = {
+                    const x = {
                       ...e,
                       [n.field]: r
                     };
-                    s(m);
+                    s(x);
                   },
                   value: e[n.field] || "",
                   label: n.label,
@@ -329,11 +330,11 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
                   W,
                   {
                     onChange: (r) => {
-                      const m = {
+                      const x = {
                         ...e,
                         [n.field.text]: r
                       };
-                      s(m);
+                      s(x);
                     },
                     value: e[n.field.text] || "",
                     label: n.inputLabel,
@@ -346,26 +347,26 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
                     current: !!e[n.field.switch] || !1,
                     label: n.switchLabel,
                     onChange: (r) => {
-                      const m = {
+                      const x = {
                         ...e,
                         [n.field.switch]: r
                       };
-                      s(m);
+                      s(x);
                     }
                   }
                 )
               ] });
             if (n.type === "list")
               return /* @__PURE__ */ t.jsx(
-                Ae,
+                qe,
                 {
                   items: e[n.field] || [],
                   setItems: (r) => {
-                    const m = {
+                    const x = {
                       ...e,
                       [n.field]: r
                     };
-                    s(m);
+                    s(x);
                   },
                   itemsType: "select",
                   draggable: n.draggable || !1,
@@ -382,11 +383,11 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
                 {
                   options: n.itemsOptions,
                   onChange: (r) => {
-                    const m = {
+                    const x = {
                       ...e,
                       [n.field]: r
                     };
-                    s(m);
+                    s(x);
                   },
                   label: n.label,
                   value: e[n.field] || "String",
@@ -398,15 +399,15 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
       }
     );
   }
-), Be = "_other_g74jx_1", Se = "_subtitle_g74jx_7", Pe = "_items_g74jx_14", vt = {
-  other: Be,
-  subtitle: Se,
+), Se = "_other_g74jx_1", Te = "_subtitle_g74jx_7", Pe = "_items_g74jx_14", jt = {
+  other: Se,
+  subtitle: Te,
   items: Pe
-}, xt = (u) => {
-  const { items: a, title: e = "Other" } = u;
-  return /* @__PURE__ */ t.jsxs("div", { className: vt.other, children: [
-    /* @__PURE__ */ t.jsx("h5", { className: vt.subtitle, children: e }),
-    /* @__PURE__ */ t.jsx("div", { className: vt.items, children: a.map((s, i) => /* @__PURE__ */ t.jsx(
+}, xt = (d) => {
+  const { items: o, title: e = "Other" } = d;
+  return /* @__PURE__ */ t.jsxs("div", { className: jt.other, children: [
+    /* @__PURE__ */ t.jsx("h5", { className: jt.subtitle, children: e }),
+    /* @__PURE__ */ t.jsx("div", { className: jt.items, children: o.map((s, i) => /* @__PURE__ */ t.jsx(
       K,
       {
         current: s.isItem,
@@ -418,89 +419,89 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
       i
     )) })
   ] });
-}, Te = (u) => {
-  const { index: a, moveProduct: e, children: s } = u, [, i] = $t({
+}, Ae = (d) => {
+  const { index: o, moveProduct: e, children: s } = d, [, i] = $t({
     accept: "product",
-    hover(o) {
-      o.index !== a && (e(o.index, a), o.index = a);
+    hover(a) {
+      a.index !== o && (e(a.index, o), a.index = o);
     }
-  }), [{ isDragging: c }, l] = wt({
+  }), [{ isDragging: c }, l] = Nt({
     type: "product",
-    item: { index: a },
-    collect: (o) => ({
-      isDragging: o.isDragging()
+    item: { index: o },
+    collect: (a) => ({
+      isDragging: a.isDragging()
     })
   });
   return /* @__PURE__ */ t.jsx(
     "div",
     {
-      ref: (o) => l(i(o)),
+      ref: (a) => l(i(a)),
       className: `${H.product} ${c ? H.dragging : ""}`,
       children: s
     }
   );
-}, Ae = (u) => {
+}, qe = (d) => {
   const {
-    isActiveItems: a,
+    isActiveItems: o,
     setIsActiveItems: e,
     items: s,
     setItems: i,
     other: c,
     title: l,
-    subtitle: o,
+    subtitle: a,
     editable: n = !0,
     draggable: r = !1,
-    withImage: m = !1,
-    deletable: d = !0,
-    addable: T = !0,
-    itemsType: x,
-    itemsPlaceholder: g = "",
-    itemsOptions: h,
-    hasRangeSelector: O = !1,
+    withImage: x = !1,
+    deletable: $ = !0,
+    addable: p = !0,
+    itemsType: h,
+    itemsPlaceholder: f = "",
+    itemsOptions: m,
+    hasRangeSelector: C = !1,
     rangeSelectorOptions: q,
-    modalOptions: v,
+    modalOptions: j,
     addableOptions: E = {},
-    limit: C,
-    autoScrollInterval: B
-  } = u, [f, y] = p.useState(null), [M, $] = p.useState({
+    limit: S,
+    autoScrollInterval: T
+  } = d, [M, u] = g.useState(null), [O, k] = g.useState({
     top: 0,
     left: 0
-  }), [k, N] = p.useState(null), L = p.useRef(null), [R, U] = p.useState(!1), tt = (_, S) => {
-    const w = [...s], [X] = w.splice(_, 1);
-    w.splice(S, 0, X), i(w);
+  }), [y, L] = g.useState(null), I = g.useRef(null), [R, Y] = g.useState(!1), tt = (_, P) => {
+    const N = [...s], [X] = N.splice(_, 1);
+    N.splice(P, 0, X), i(N);
   };
-  p.useEffect(() => {
+  g.useEffect(() => {
     const _ = () => {
-      y(null), U(!1);
+      u(null), Y(!1);
     };
-    return document.body.addEventListener("click", _), y(null), U(!1), () => {
-      y(null), U(!1), document.body.removeEventListener("click", _);
+    return document.body.addEventListener("click", _), u(null), Y(!1), () => {
+      u(null), Y(!1), document.body.removeEventListener("click", _);
     };
-  }, []), p.useEffect(() => {
-    if (f) {
-      const _ = [...s].map((S) => S.id === f.id ? f : S);
+  }, []), g.useEffect(() => {
+    if (M) {
+      const _ = [...s].map((P) => P.id === M.id ? M : P);
       i(_);
     }
-  }, [f]), p.useEffect(() => {
-    if (L.current && k) {
-      const _ = L.current.getBoundingClientRect().height, S = window.innerHeight;
-      let w = k.top;
-      w + _ > S + window.scrollY - 200 && (w = S + window.scrollY - _ - 200), w < 0 && (w = 10), $({
-        top: w,
-        left: k.left
+  }, [M]), g.useEffect(() => {
+    if (I.current && y) {
+      const _ = I.current.getBoundingClientRect().height, P = window.innerHeight;
+      let N = y.top;
+      N + _ > P + window.scrollY - 200 && (N = P + window.scrollY - _ - 200), N < 0 && (N = 10), k({
+        top: N,
+        left: y.left
       });
     }
-  }, [L.current, k]);
-  const at = (_, S) => {
+  }, [I.current, y]);
+  const at = (_, P) => {
     _.stopPropagation();
-    const w = _.target.getBoundingClientRect();
-    N({
-      top: w.top + window.scrollY,
-      left: w.left - 30
-    }), y(S), U(!0);
+    const N = _.target.getBoundingClientRect();
+    L({
+      top: N.top + window.scrollY,
+      left: N.left - 30
+    }), u(P), Y(!0);
   };
-  function j(_) {
-    if (m)
+  function v(_) {
+    if (x)
       return _ ? /* @__PURE__ */ t.jsx(
         "img",
         {
@@ -519,9 +520,9 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
         }
       );
   }
-  const A = (_, S) => {
+  const A = (_, P) => {
     var X;
-    const w = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    const N = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       r && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
         b,
         {
@@ -531,55 +532,55 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
           height: 20
         }
       ) }),
-      x === "select" && /* @__PURE__ */ t.jsx(
+      h === "select" && /* @__PURE__ */ t.jsx(
         Z,
         {
           onChange: (D) => {
-            const Y = [...s], lt = h.find((pt) => pt.name === D);
-            if (!lt) return;
-            const ot = Y.map((pt) => pt.id === _.id ? {
-              ...lt,
+            const G = [...s], rt = m.find((pt) => pt.name === D);
+            if (!rt) return;
+            const ct = G.map((pt) => pt.id === _.id ? {
+              ...rt,
               name: D
             } : pt);
-            y({
+            u({
               ..._,
               name: D
-            }), i([...ot]);
+            }), i([...ct]);
           },
           value: _.name,
-          options: h.filter((D) => !s.find((Y) => Y.name === D.name)).map((D) => D.name),
-          leftAddon: j(_.images)
+          options: m.filter((D) => !s.find((G) => G.name === D.name)).map((D) => D.name),
+          leftAddon: v(_.images)
         }
       ),
-      x === "input" && /* @__PURE__ */ t.jsx(
+      h === "input" && /* @__PURE__ */ t.jsx(
         W,
         {
           onChange: (D) => {
-            const lt = [...s].map((ot) => ot.id === _.id ? {
+            const rt = [...s].map((ct) => ct.id === _.id ? {
               ..._,
               name: D
-            } : ot);
-            i([...lt]);
+            } : ct);
+            i([...rt]);
           },
           value: _.name,
-          placeholder: g
+          placeholder: f
         }
       ),
-      x === "image" && /* @__PURE__ */ t.jsx(
-        ht,
+      h === "image" && /* @__PURE__ */ t.jsx(
+        _t,
         {
           onChange: (D) => {
-            const lt = [...s].map((ot) => ot.id === _.id ? {
+            const rt = [...s].map((ct) => ct.id === _.id ? {
               ..._,
               images: D
-            } : ot);
-            i([...lt]);
+            } : ct);
+            i([...rt]);
           },
           activeImage: (X = s.find((D) => D.id === _.id)) == null ? void 0 : X.images[0]
         }
       ),
       /* @__PURE__ */ t.jsxs("div", { className: H.buttons, children: [
-        n && /* @__PURE__ */ t.jsx(
+        n && /* @__PURE__ */ t.jsx("div", { className: H.deleteButton, children: /* @__PURE__ */ t.jsx(
           b,
           {
             name: "Sliders",
@@ -588,8 +589,8 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
             height: 20,
             onClick: (D) => at(D, _)
           }
-        ),
-        d && /* @__PURE__ */ t.jsx(
+        ) }),
+        $ && /* @__PURE__ */ t.jsx("div", { className: H.deleteButton, children: /* @__PURE__ */ t.jsx(
           b,
           {
             name: "Trash",
@@ -599,111 +600,121 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
             fill: "#C12A2A",
             onClick: () => i(s.filter((D) => D.id !== _.id))
           }
-        )
+        ) })
       ] })
     ] });
     return r ? /* @__PURE__ */ t.jsx(
-      Te,
+      Ae,
       {
         product: _,
-        index: S,
+        index: P,
         moveProduct: tt,
-        children: w
+        children: N
       },
       _.id
     ) : /* @__PURE__ */ t.jsx(
       "div",
       {
         className: H.product,
-        children: w
+        children: N
       },
       _.id
     );
   };
   return /* @__PURE__ */ t.jsxs("div", { className: H.productsBlock, children: [
-    (l || a !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: H.top, children: [
+    (l || o !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: H.top, children: [
       l && /* @__PURE__ */ t.jsx("h3", { className: H.title, children: l }),
-      a !== void 0 && /* @__PURE__ */ t.jsx(
+      o !== void 0 && /* @__PURE__ */ t.jsx(
         K,
         {
-          current: a,
+          current: o,
           onChange: (_) => e == null ? void 0 : e(_)
         }
       )
     ] }),
-    f && n && v && R && /* @__PURE__ */ t.jsx(
-      Ce,
+    M && n && j && R && /* @__PURE__ */ t.jsx(
+      Be,
       {
-        ref: L,
-        activeItem: f,
-        setActiveItem: y,
-        popupPosition: M,
-        modalOptions: v,
-        setIsOpenModal: U
+        ref: I,
+        activeItem: M,
+        setActiveItem: u,
+        popupPosition: O,
+        modalOptions: j,
+        setIsOpenModal: Y
       }
     ),
-    O && q && /* @__PURE__ */ t.jsx(It, { ...q }),
+    C && q && /* @__PURE__ */ t.jsx(wt, { ...q }),
     /* @__PURE__ */ t.jsxs("div", { className: H.products, children: [
-      o && /* @__PURE__ */ t.jsx("h5", { className: H.subtitle, children: o }),
-      r ? /* @__PURE__ */ t.jsx(yt, { backend: kt, children: s.map((_, S) => A(_, S)) }) : s.map((_, S) => A(_, S)),
-      T && /* @__PURE__ */ t.jsx("div", { className: H.addButton, children: /* @__PURE__ */ t.jsxs(
-        it,
+      a && /* @__PURE__ */ t.jsx("h5", { className: H.subtitle, children: a }),
+      r ? /* @__PURE__ */ t.jsx(yt, { backend: kt, children: s.map((_, P) => A(_, P)) }) : s.map((_, P) => A(_, P)),
+      p && /* @__PURE__ */ t.jsx(
+        "div",
         {
-          withoutHover: !0,
-          className: F(H.button, {
-            [H.disabled]: !!(C && C <= s.length || s.length === (h == null ? void 0 : h.length))
-          }),
-          size: "s",
-          disabled: !!(C && C <= s.length || s.length === (h == null ? void 0 : h.length)),
-          onClick: () => {
-            const _ = [...s];
-            let S = null;
-            if (h) {
-              for (let w = 0; w < h.length; w++)
-                if (!s.find((X) => X.id === h[w].id)) {
-                  S = h[w];
-                  break;
-                }
-            }
-            x === "select" ? _.push({
-              name: S ? S.name : h[0].name,
-              id: (S == null ? void 0 : S.id) || h[0].id,
-              ...E
-            }) : x === "input" ? _.push({
-              name: "",
-              id: dt(),
-              ...E
-            }) : _.push({
-              name: `Image ${s.length + 1}`,
-              id: dt(),
-              ...E
-            }), i(_);
-          },
           style: {
-            width: "fit-content"
+            width: "100%",
+            display: "flex",
+            justifyContent: "center"
           },
-          children: [
-            /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
-            /* @__PURE__ */ t.jsx(
-              b,
-              {
-                name: "Plus",
-                width: 16,
-                height: 16
-              }
-            )
-          ]
+          children: /* @__PURE__ */ t.jsx(
+            ot,
+            {
+              withoutHover: !0,
+              className: V(H.button, {
+                [H.disabled]: !!(S && S <= s.length || s.length === (m == null ? void 0 : m.length))
+              }),
+              size: "s",
+              disabled: !!(S && S <= s.length || s.length === (m == null ? void 0 : m.length)),
+              onClick: () => {
+                const _ = [...s];
+                let P = null;
+                if (m) {
+                  for (let N = 0; N < m.length; N++)
+                    if (!s.find((X) => X.id === m[N].id)) {
+                      P = m[N];
+                      break;
+                    }
+                }
+                h === "select" ? _.push({
+                  name: P ? P.name : m[0].name,
+                  id: (P == null ? void 0 : P.id) || m[0].id,
+                  ...E
+                }) : h === "input" ? _.push({
+                  name: "",
+                  id: dt(),
+                  ...E
+                }) : _.push({
+                  name: `Image ${s.length + 1}`,
+                  id: dt(),
+                  ...E
+                }), i(_);
+              },
+              style: {
+                width: "fit-content"
+              },
+              children: /* @__PURE__ */ t.jsxs("div", { className: H.addButton, children: [
+                /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
+                /* @__PURE__ */ t.jsx(
+                  b,
+                  {
+                    name: "Plus",
+                    width: 16,
+                    height: 16
+                  }
+                )
+              ] })
+            }
+          )
         }
-      ) })
+      )
     ] }),
     c !== void 0 && /* @__PURE__ */ t.jsx(xt, { items: c }),
-    B !== void 0 && /* @__PURE__ */ t.jsx(
+    T !== void 0 && /* @__PURE__ */ t.jsx(
       W,
       {
         label: "Auto scroll interval",
         type: "number",
-        value: String(B.scrollInterval),
-        onChange: (_) => B.setScrollInterval(Number(_)),
+        value: String(T.scrollInterval),
+        onChange: (_) => T.setScrollInterval(Number(_)),
         min: 0.1,
         max: 100,
         style: {
@@ -713,53 +724,54 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
       }
     )
   ] });
-}, Oe = "_title_1jjcw_1", qe = "_subtitle_1jjcw_5", De = "_header_1jjcw_12", Ee = "_text_1jjcw_13", Le = "_productsBlock_1jjcw_14", Re = "_top_1jjcw_26", Me = "_itemsBlock_1jjcw_35", He = "_typeTexts_1jjcw_41", ze = "_block_1jjcw_48", Ve = "_active_1jjcw_61", Fe = "_products_1jjcw_14", Ue = "_product_1jjcw_14", Ye = "_button_1jjcw_80", Ge = "_disabled_1jjcw_91", We = "_image_1jjcw_95", Xe = "_info_1jjcw_102", Je = "_name_1jjcw_114", Qe = "_buttons_1jjcw_118", Ke = "_modal_1jjcw_125", Ze = "_link_1jjcw_145", ts = "_modalOptions_1jjcw_151", es = "_addButton_1jjcw_157", Q = {
+}, Oe = "_title_82zux_1", De = "_subtitle_82zux_5", Ee = "_header_82zux_12", Le = "_text_82zux_13", Re = "_productsBlock_82zux_14", Me = "_top_82zux_26", He = "_itemsBlock_82zux_35", ze = "_typeTexts_82zux_41", Ve = "_block_82zux_48", Fe = "_active_82zux_61", Ue = "_products_82zux_14", Ye = "_product_82zux_14", Ge = "_button_82zux_80", We = "_disabled_82zux_91", Xe = "_image_82zux_95", Je = "_info_82zux_102", Qe = "_name_82zux_114", Ke = "_buttons_82zux_118", Ze = "_modal_82zux_125", ts = "_link_82zux_145", es = "_modalOptions_82zux_151", ss = "_addButton_82zux_157", ns = "_deleteButton_82zux_179", J = {
   title: Oe,
-  subtitle: qe,
-  header: De,
-  text: Ee,
-  productsBlock: Le,
-  top: Re,
-  itemsBlock: Me,
-  typeTexts: He,
-  block: ze,
-  active: Ve,
-  products: Fe,
-  product: Ue,
-  button: Ye,
-  disabled: Ge,
-  image: We,
-  info: Xe,
-  name: Je,
-  buttons: Qe,
-  modal: Ke,
-  link: Ze,
-  modalOptions: ts,
-  addButton: es
-}, Ua = (u) => {
+  subtitle: De,
+  header: Ee,
+  text: Le,
+  productsBlock: Re,
+  top: Me,
+  itemsBlock: He,
+  typeTexts: ze,
+  block: Ve,
+  active: Fe,
+  products: Ue,
+  product: Ye,
+  button: Ge,
+  disabled: We,
+  image: Xe,
+  info: Je,
+  name: Qe,
+  buttons: Ke,
+  modal: Ze,
+  link: ts,
+  modalOptions: es,
+  addButton: ss,
+  deleteButton: ns
+}, Ko = (d) => {
   const {
-    isActiveItems: a,
+    isActiveItems: o,
     setIsActiveItems: e,
     items: s,
     setItems: i,
     other: c,
     title: l,
-    subtitle: o,
+    subtitle: a,
     draggable: n = !1,
     withImage: r = !1,
-    addable: m = !0,
-    itemsOptions: d,
-    hasRangeSelector: T = !1,
-    rangeSelectorOptions: x,
-    limit: g,
-    autoScrollInterval: h
-  } = u;
-  function O(v) {
+    addable: x = !0,
+    itemsOptions: $,
+    hasRangeSelector: p = !1,
+    rangeSelectorOptions: h,
+    limit: f,
+    autoScrollInterval: m
+  } = d;
+  function C(j) {
     if (r)
-      return v ? /* @__PURE__ */ t.jsx(
+      return j ? /* @__PURE__ */ t.jsx(
         "img",
         {
-          src: `https://imagedelivery.net/${v[0]}/w=1000`,
+          src: `https://imagedelivery.net/${j[0]}/w=1000`,
           alt: "image",
           width: 16,
           height: 16
@@ -774,10 +786,10 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
         }
       );
   }
-  const q = (v) => {
-    const E = d.find((B) => B.id === v);
+  const q = (j) => {
+    const E = $.find((T) => T.id === j);
     if (!E) return;
-    const C = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    const S = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       n && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
         b,
         {
@@ -790,18 +802,18 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
       /* @__PURE__ */ t.jsx(
         Z,
         {
-          onChange: (B) => {
-            const f = [...s], y = d.find((k) => k.name === B);
-            if (!y) return;
-            const M = y.id, $ = f.map((k) => k === v ? M : k);
-            i([...$]);
+          onChange: (T) => {
+            const M = [...s], u = $.find((y) => y.name === T);
+            if (!u) return;
+            const O = u.id, k = M.map((y) => y === j ? O : y);
+            i([...k]);
           },
           value: E.name,
-          options: d.filter((B) => !s.find((f) => f === B.id)).map((B) => B.name),
-          leftAddon: O(E.images)
+          options: $.filter((T) => !s.find((M) => M === T.id)).map((T) => T.name),
+          leftAddon: C(E.images)
         }
       ),
-      /* @__PURE__ */ t.jsx("div", { className: Q.buttons, children: /* @__PURE__ */ t.jsx(
+      /* @__PURE__ */ t.jsx("div", { className: J.buttons, children: /* @__PURE__ */ t.jsx("div", { className: J.deleteButton, children: /* @__PURE__ */ t.jsx(
         b,
         {
           name: "Trash",
@@ -809,80 +821,91 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
           width: 20,
           height: 20,
           fill: "#C12A2A",
-          onClick: () => i(s.filter((B) => B !== v))
+          onClick: () => i(s.filter((T) => T !== j))
         }
-      ) })
+      ) }) })
     ] });
     return /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: Q.product,
-        children: C
+        className: J.product,
+        children: S
       },
-      v
+      j
     );
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: Q.productsBlock, children: [
-    (l || a !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: Q.top, children: [
-      l && /* @__PURE__ */ t.jsx("h3", { className: Q.title, children: l }),
-      a !== void 0 && /* @__PURE__ */ t.jsx(
+  return /* @__PURE__ */ t.jsxs("div", { className: J.productsBlock, children: [
+    (l || o !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: J.top, children: [
+      l && /* @__PURE__ */ t.jsx("h3", { className: J.title, children: l }),
+      o !== void 0 && /* @__PURE__ */ t.jsx(
         K,
         {
-          current: a,
-          onChange: (v) => e == null ? void 0 : e(v)
+          current: o,
+          onChange: (j) => e == null ? void 0 : e(j)
         }
       )
     ] }),
-    T && x && /* @__PURE__ */ t.jsx(It, { ...x }),
-    /* @__PURE__ */ t.jsxs("div", { className: Q.products, children: [
-      o && /* @__PURE__ */ t.jsx("h5", { className: Q.subtitle, children: o }),
-      s.map((v) => q(v)),
-      m && /* @__PURE__ */ t.jsx("div", { className: Q.addButton, children: /* @__PURE__ */ t.jsxs(
-        it,
+    p && h && /* @__PURE__ */ t.jsx(wt, { ...h }),
+    /* @__PURE__ */ t.jsxs("div", { className: J.products, children: [
+      a && /* @__PURE__ */ t.jsx("h5", { className: J.subtitle, children: a }),
+      s.map((j) => q(j)),
+      x && /* @__PURE__ */ t.jsx(
+        "div",
         {
-          withoutHover: !0,
-          className: F(Q.button, {
-            [Q.disabled]: !!(g && g <= s.length || s.length === d.length)
-          }),
-          size: "s",
-          disabled: !!(g && g <= s.length || s.length === d.length),
-          onClick: () => {
-            const v = [...s];
-            let E = null;
-            if (d) {
-              for (let C = 0; C < d.length; C++)
-                if (!s.find((B) => B === d[C].id)) {
-                  E = d[C];
-                  break;
-                }
-            }
-            v.push((E == null ? void 0 : E.id) || d[0].id), i(v);
-          },
           style: {
-            width: "fit-content"
+            width: "100%",
+            display: "flex",
+            justifyContent: "center",
+            gap: 5
           },
-          children: [
-            /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
-            /* @__PURE__ */ t.jsx(
-              b,
-              {
-                name: "Plus",
-                width: 16,
-                height: 16
-              }
-            )
-          ]
+          children: /* @__PURE__ */ t.jsx(
+            ot,
+            {
+              withoutHover: !0,
+              className: V(J.button, {
+                [J.disabled]: !!(f && f <= s.length || s.length === $.length)
+              }),
+              size: "s",
+              disabled: !!(f && f <= s.length || s.length === $.length),
+              onClick: () => {
+                const j = [...s];
+                let E = null;
+                if ($) {
+                  for (let S = 0; S < $.length; S++)
+                    if (!s.find((T) => T === $[S].id)) {
+                      E = $[S];
+                      break;
+                    }
+                }
+                j.push((E == null ? void 0 : E.id) || $[0].id), i(j);
+              },
+              style: {
+                width: "fit-content"
+              },
+              children: /* @__PURE__ */ t.jsxs("div", { className: J.addButton, children: [
+                /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
+                /* @__PURE__ */ t.jsx(
+                  b,
+                  {
+                    name: "Plus",
+                    width: 16,
+                    height: 16
+                  }
+                )
+              ] })
+            }
+          )
         }
-      ) })
+      )
     ] }),
     c !== void 0 && /* @__PURE__ */ t.jsx(xt, { items: c }),
-    h !== void 0 && /* @__PURE__ */ t.jsx(
+    m !== void 0 && /* @__PURE__ */ t.jsx(
       W,
       {
         label: "Auto scroll interval",
         type: "number",
-        value: String(h.scrollInterval),
-        onChange: (v) => h.setScrollInterval(Number(v)),
+        value: String(m.scrollInterval),
+        onChange: (j) => m.setScrollInterval(Number(j)),
         min: 0.1,
         max: 100,
         style: {
@@ -892,40 +915,41 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
       }
     )
   ] });
-}, ss = "_title_iqcxl_1", ns = "_subtitle_iqcxl_5", is = "_header_iqcxl_12", as = "_text_iqcxl_13", os = "_productsBlock_iqcxl_14", cs = "_top_iqcxl_26", ls = "_itemsBlock_iqcxl_35", rs = "_typeTexts_iqcxl_41", ds = "_block_iqcxl_48", us = "_active_iqcxl_61", ms = "_products_iqcxl_14", _s = "_product_iqcxl_14", hs = "_button_iqcxl_80", ps = "_disabled_iqcxl_91", gs = "_image_iqcxl_95", fs = "_info_iqcxl_102", xs = "_name_iqcxl_114", bs = "_buttons_iqcxl_118", vs = "_modal_iqcxl_125", js = "_link_iqcxl_146", ys = "_modalOptions_iqcxl_152", ks = "_addButton_iqcxl_164", V = {
-  title: ss,
-  subtitle: ns,
-  header: is,
-  text: as,
-  productsBlock: os,
-  top: cs,
-  itemsBlock: ls,
-  typeTexts: rs,
-  block: ds,
-  active: us,
-  products: ms,
-  product: _s,
-  button: hs,
-  disabled: ps,
-  image: gs,
-  info: fs,
-  name: xs,
-  buttons: bs,
-  modal: vs,
-  link: js,
-  modalOptions: ys,
-  addButton: ks
-}, $s = p.forwardRef(
-  (u, a) => {
-    const { activeItem: e, setActiveItem: s, popupPosition: i, modalOptions: c, setIsOpenModal: l } = u;
-    function o(n, r) {
+}, is = "_title_1wm9m_1", os = "_subtitle_1wm9m_5", as = "_header_1wm9m_12", cs = "_text_1wm9m_13", ls = "_productsBlock_1wm9m_14", rs = "_top_1wm9m_26", ds = "_itemsBlock_1wm9m_35", us = "_typeTexts_1wm9m_41", ms = "_block_1wm9m_48", hs = "_active_1wm9m_61", _s = "_products_1wm9m_14", ps = "_product_1wm9m_14", gs = "_button_1wm9m_80", fs = "_disabled_1wm9m_91", xs = "_image_1wm9m_95", bs = "_info_1wm9m_102", js = "_name_1wm9m_114", vs = "_buttons_1wm9m_118", ys = "_modal_1wm9m_125", ks = "_link_1wm9m_146", $s = "_modalOptions_1wm9m_152", Ns = "_addButton_1wm9m_164", Is = "_deleteButton_1wm9m_179", z = {
+  title: is,
+  subtitle: os,
+  header: as,
+  text: cs,
+  productsBlock: ls,
+  top: rs,
+  itemsBlock: ds,
+  typeTexts: us,
+  block: ms,
+  active: hs,
+  products: _s,
+  product: ps,
+  button: gs,
+  disabled: fs,
+  image: xs,
+  info: bs,
+  name: js,
+  buttons: vs,
+  modal: ys,
+  link: ks,
+  modalOptions: $s,
+  addButton: Ns,
+  deleteButton: Is
+}, ws = g.forwardRef(
+  (d, o) => {
+    const { activeItem: e, setActiveItem: s, popupPosition: i, modalOptions: c, setIsOpenModal: l } = d;
+    function a(n, r) {
       return n.length > r ? `${n.slice(0, r)}...` : n;
     }
     return /* @__PURE__ */ t.jsxs(
       "div",
       {
-        ref: a,
-        className: V.modal,
+        ref: o,
+        className: z.modal,
         onClick: (n) => {
           n.stopPropagation();
         },
@@ -934,8 +958,8 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
           left: `${i.left}px`
         },
         children: [
-          /* @__PURE__ */ t.jsxs("div", { className: V.top, children: [
-            /* @__PURE__ */ t.jsx("h3", { className: V.title, children: o(e.name, 20) }),
+          /* @__PURE__ */ t.jsxs("div", { className: z.top, children: [
+            /* @__PURE__ */ t.jsx("h3", { className: z.title, children: a(e.name, 20) }),
             /* @__PURE__ */ t.jsx(
               b,
               {
@@ -949,19 +973,19 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
               }
             )
           ] }),
-          /* @__PURE__ */ t.jsx("div", { className: V.modalOptions, children: c.map((n) => {
+          /* @__PURE__ */ t.jsx("div", { className: z.modalOptions, children: c.map((n) => {
             if (n.type === "image")
               return /* @__PURE__ */ t.jsx(
-                ht,
+                _t,
                 {
                   label: "Put up an attractive image",
                   activeImage: e[n.field],
                   onChange: (r) => {
-                    const m = {
+                    const x = {
                       ...e,
                       [n.field]: r
                     };
-                    s(m);
+                    s(x);
                   }
                 },
                 String(n.field)
@@ -972,19 +996,19 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
                 {
                   typesText: e[n.field.type],
                   setTypesText: (r) => {
-                    const m = {
+                    const x = {
                       ...e,
                       [n.field.type]: r
                     };
-                    s(m);
+                    s(x);
                   },
                   text: e[n.field.text] || "",
                   setText: (r) => {
-                    const m = {
+                    const x = {
                       ...e,
                       [n.field.text]: r
                     };
-                    s(m);
+                    s(x);
                   },
                   subtitle: n.label
                 }
@@ -994,11 +1018,11 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
                 W,
                 {
                   onChange: (r) => {
-                    const m = {
+                    const x = {
                       ...e,
                       [n.field]: r
                     };
-                    s(m);
+                    s(x);
                   },
                   value: e[n.field] || "",
                   label: n.label,
@@ -1006,16 +1030,16 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
                 }
               );
             if (n.type === "inputSwitch")
-              return /* @__PURE__ */ t.jsxs("div", { className: V.link, children: [
+              return /* @__PURE__ */ t.jsxs("div", { className: z.link, children: [
                 /* @__PURE__ */ t.jsx(
                   W,
                   {
                     onChange: (r) => {
-                      const m = {
+                      const x = {
                         ...e,
                         [n.field.text]: r
                       };
-                      s(m);
+                      s(x);
                     },
                     value: e[n.field.text] || "",
                     label: n.inputLabel,
@@ -1028,11 +1052,11 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
                     current: !!e[n.field.switch] || !1,
                     label: n.switchLabel,
                     onChange: (r) => {
-                      const m = {
+                      const x = {
                         ...e,
                         [n.field.switch]: r
                       };
-                      s(m);
+                      s(x);
                     }
                   }
                 )
@@ -1043,11 +1067,11 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
                 {
                   options: n.itemsOptions,
                   onChange: (r) => {
-                    const m = {
+                    const x = {
                       ...e,
                       [n.field]: r
                     };
-                    s(m);
+                    s(x);
                   },
                   label: n.label,
                   value: e[n.field] || "String",
@@ -1059,91 +1083,91 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
       }
     );
   }
-), ws = (u) => {
-  const { index: a, moveProduct: e, children: s } = u, [, i] = $t({
+), Cs = (d) => {
+  const { index: o, moveProduct: e, children: s } = d, [, i] = $t({
     accept: "product",
-    hover(o) {
-      o.index !== a && (e(o.index, a), o.index = a);
+    hover(a) {
+      a.index !== o && (e(a.index, o), a.index = o);
     }
-  }), [{ isDragging: c }, l] = wt({
+  }), [{ isDragging: c }, l] = Nt({
     type: "product",
-    item: { index: a },
-    collect: (o) => ({
-      isDragging: o.isDragging()
+    item: { index: o },
+    collect: (a) => ({
+      isDragging: a.isDragging()
     })
   });
   return /* @__PURE__ */ t.jsx(
     "div",
     {
-      ref: (o) => l(i(o)),
-      className: `${V.product} ${c ? V.dragging : ""}`,
+      ref: (a) => l(i(a)),
+      className: `${z.product} ${c ? z.dragging : ""}`,
       children: s
     }
   );
-}, Ya = (u) => {
+}, Zo = (d) => {
   const {
-    isActiveItems: a,
+    isActiveItems: o,
     setIsActiveItems: e,
     items: s,
     setItems: i,
     other: c,
     title: l,
-    subtitle: o,
+    subtitle: a,
     editable: n = !0,
     draggable: r = !1,
-    withImage: m = !1,
-    deletable: d = !0,
-    addable: T = !0,
-    itemsType: x,
-    itemsPlaceholder: g = "",
-    itemsOptions: h,
-    hasRangeSelector: O = !1,
+    withImage: x = !1,
+    deletable: $ = !0,
+    addable: p = !0,
+    itemsType: h,
+    itemsPlaceholder: f = "",
+    itemsOptions: m,
+    hasRangeSelector: C = !1,
     rangeSelectorOptions: q,
-    modalOptions: v,
+    modalOptions: j,
     addableOptions: E = {}
-  } = u, [C, B] = p.useState(null), [f, y] = p.useState({
+  } = d, [S, T] = g.useState(null), [M, u] = g.useState({
     top: 0,
     left: 0
-  }), [M, $] = p.useState(null), k = p.useRef(null), [N, L] = p.useState(!1), R = (j, A) => {
-    const _ = [...s], [S] = _.splice(j, 1);
-    _.splice(A, 0, S), i(_);
+  }), [O, k] = g.useState(null), y = g.useRef(null), [L, I] = g.useState(!1), R = (v, A) => {
+    const _ = [...s], [P] = _.splice(v, 1);
+    _.splice(A, 0, P), i(_);
   };
-  p.useEffect(() => {
-    const j = () => {
-      B(null), L(!1);
+  g.useEffect(() => {
+    const v = () => {
+      T(null), I(!1);
     };
-    return document.body.addEventListener("click", j), B(null), L(!1), () => {
-      B(null), L(!1), document.body.removeEventListener("click", j);
+    return document.body.addEventListener("click", v), T(null), I(!1), () => {
+      T(null), I(!1), document.body.removeEventListener("click", v);
     };
-  }, []), p.useEffect(() => {
-    if (C) {
-      const j = [...s].map((A) => A.id === C.id ? C : A);
-      i(j);
+  }, []), g.useEffect(() => {
+    if (S) {
+      const v = [...s].map((A) => A.id === S.id ? S : A);
+      i(v);
     }
-  }, [C]), p.useEffect(() => {
-    if (k.current && M) {
-      const j = k.current.getBoundingClientRect().height, A = window.innerHeight;
-      let _ = M.top;
-      _ + j > A + window.scrollY - 200 && (_ = A + window.scrollY - j - 200), _ < 0 && (_ = 10), y({
+  }, [S]), g.useEffect(() => {
+    if (y.current && O) {
+      const v = y.current.getBoundingClientRect().height, A = window.innerHeight;
+      let _ = O.top;
+      _ + v > A + window.scrollY - 200 && (_ = A + window.scrollY - v - 200), _ < 0 && (_ = 10), u({
         top: _,
-        left: M.left
+        left: O.left
       });
     }
-  }, [k.current, M]);
-  const U = (j, A) => {
-    j.stopPropagation();
-    const _ = j.target.getBoundingClientRect();
-    $({
+  }, [y.current, O]);
+  const Y = (v, A) => {
+    v.stopPropagation();
+    const _ = v.target.getBoundingClientRect();
+    k({
       top: _.top + window.scrollY,
       left: _.left - 30
-    }), B(A), L(!0);
+    }), T(A), I(!0);
   };
-  function tt(j) {
-    if (m)
-      return j ? /* @__PURE__ */ t.jsx(
+  function tt(v) {
+    if (x)
+      return v ? /* @__PURE__ */ t.jsx(
         "img",
         {
-          src: `https://imagedelivery.net/${j[0]}/w=1000`,
+          src: `https://imagedelivery.net/${v[0]}/w=1000`,
           alt: "image",
           width: 16,
           height: 16
@@ -1158,8 +1182,8 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
         }
       );
   }
-  const at = (j, A) => {
-    var S;
+  const at = (v, A) => {
+    var P;
     const _ = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       r && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
         b,
@@ -1170,63 +1194,63 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
           height: 20
         }
       ) }),
-      x === "select" && /* @__PURE__ */ t.jsx(
+      h === "select" && /* @__PURE__ */ t.jsx(
         Z,
         {
-          onChange: (w) => {
-            const D = [...s].map((Y) => Y.id === j.id ? {
-              ...j,
-              name: w
-            } : Y);
-            B({
-              ...j,
-              name: w
+          onChange: (N) => {
+            const D = [...s].map((G) => G.id === v.id ? {
+              ...v,
+              name: N
+            } : G);
+            T({
+              ...v,
+              name: N
             }), i([...D]);
           },
-          value: j.name,
-          options: h.filter((w) => !s.find((X) => X.name === w)),
-          leftAddon: tt(j.images)
+          value: v.name,
+          options: m.filter((N) => !s.find((X) => X.name === N)),
+          leftAddon: tt(v.images)
         }
       ),
-      x === "input" && /* @__PURE__ */ t.jsx(
+      h === "input" && /* @__PURE__ */ t.jsx(
         W,
         {
-          onChange: (w) => {
-            const D = [...s].map((Y) => Y.id === j.id ? {
-              ...j,
-              name: w
-            } : Y);
+          onChange: (N) => {
+            const D = [...s].map((G) => G.id === v.id ? {
+              ...v,
+              name: N
+            } : G);
             i([...D]);
           },
-          value: j.name,
-          placeholder: g
+          value: v.name,
+          placeholder: f
         }
       ),
-      x === "image" && /* @__PURE__ */ t.jsx(
-        ht,
+      h === "image" && /* @__PURE__ */ t.jsx(
+        _t,
         {
-          onChange: (w) => {
-            const D = [...s].map((Y) => Y.id === j.id ? {
-              ...j,
-              images: w
-            } : Y);
+          onChange: (N) => {
+            const D = [...s].map((G) => G.id === v.id ? {
+              ...v,
+              images: N
+            } : G);
             i([...D]);
           },
-          activeImage: (S = s.find((w) => w.id === j.id)) == null ? void 0 : S.images[0]
+          activeImage: (P = s.find((N) => N.id === v.id)) == null ? void 0 : P.images[0]
         }
       ),
-      /* @__PURE__ */ t.jsxs("div", { className: V.buttons, children: [
-        n && /* @__PURE__ */ t.jsx(
+      /* @__PURE__ */ t.jsxs("div", { className: z.buttons, children: [
+        n && /* @__PURE__ */ t.jsx("div", { className: z.deleteButton, children: /* @__PURE__ */ t.jsx(
           b,
           {
             name: "Sliders",
             hoverable: !0,
             width: 20,
             height: 20,
-            onClick: (w) => U(w, j)
+            onClick: (N) => Y(N, v)
           }
-        ),
-        d && /* @__PURE__ */ t.jsx(
+        ) }),
+        $ && /* @__PURE__ */ t.jsx("div", { className: z.deleteButton, children: /* @__PURE__ */ t.jsx(
           b,
           {
             name: "Trash",
@@ -1234,155 +1258,165 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
             width: 20,
             height: 20,
             fill: "#C12A2A",
-            onClick: () => i(s.filter((w) => w.id !== j.id))
+            onClick: () => i(s.filter((N) => N.id !== v.id))
           }
-        )
+        ) })
       ] })
     ] });
     return r ? /* @__PURE__ */ t.jsx(
-      ws,
+      Cs,
       {
-        product: j,
+        product: v,
         index: A,
         moveProduct: R,
         children: _
       },
-      j.id
+      v.id
     ) : /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: V.product,
+        className: z.product,
         children: _
       },
-      j.id
+      v.id
     );
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: V.productsBlock, children: [
-    (l || a !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: V.top, children: [
-      l && /* @__PURE__ */ t.jsx("h3", { className: V.title, children: l }),
-      a !== void 0 && /* @__PURE__ */ t.jsx(
+  return /* @__PURE__ */ t.jsxs("div", { className: z.productsBlock, children: [
+    (l || o !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: z.top, children: [
+      l && /* @__PURE__ */ t.jsx("h3", { className: z.title, children: l }),
+      o !== void 0 && /* @__PURE__ */ t.jsx(
         K,
         {
-          current: a,
-          onChange: (j) => e == null ? void 0 : e(j)
+          current: o,
+          onChange: (v) => e == null ? void 0 : e(v)
         }
       )
     ] }),
-    C && n && v && N && /* @__PURE__ */ t.jsx(
-      $s,
+    S && n && j && L && /* @__PURE__ */ t.jsx(
+      ws,
       {
-        ref: k,
-        activeItem: C,
-        setActiveItem: B,
-        popupPosition: f,
-        modalOptions: v,
-        setIsOpenModal: L
+        ref: y,
+        activeItem: S,
+        setActiveItem: T,
+        popupPosition: M,
+        modalOptions: j,
+        setIsOpenModal: I
       }
     ),
-    O && q && /* @__PURE__ */ t.jsx(It, { ...q }),
-    /* @__PURE__ */ t.jsxs("div", { className: V.products, children: [
-      o && /* @__PURE__ */ t.jsx("h5", { className: V.subtitle, children: o }),
-      r ? /* @__PURE__ */ t.jsx(yt, { backend: kt, children: s.map((j, A) => at(j, A)) }) : s.map((j, A) => at(j, A)),
-      T && /* @__PURE__ */ t.jsx("div", { className: V.addButton, children: /* @__PURE__ */ t.jsxs(
-        it,
+    C && q && /* @__PURE__ */ t.jsx(wt, { ...q }),
+    /* @__PURE__ */ t.jsxs("div", { className: z.products, children: [
+      a && /* @__PURE__ */ t.jsx("h5", { className: z.subtitle, children: a }),
+      r ? /* @__PURE__ */ t.jsx(yt, { backend: kt, children: s.map((v, A) => at(v, A)) }) : s.map((v, A) => at(v, A)),
+      p && /* @__PURE__ */ t.jsx(
+        "div",
         {
-          withoutHover: !0,
-          className: V.button,
-          size: "s",
-          onClick: () => {
-            const j = [...s];
-            let A = null;
-            if (h) {
-              for (let _ = 0; _ < h.length; _++)
-                if (!s.find((S) => S.name === h[_])) {
-                  A = h[_];
-                  break;
-                }
-            }
-            x === "select" ? j.push({
-              name: A || h[0],
-              id: dt(),
-              ...E
-            }) : x === "input" ? j.push({
-              name: "",
-              id: dt(),
-              ...E
-            }) : j.push({
-              name: `Image ${s.length + 1}`,
-              id: dt(),
-              ...E
-            }), i(j);
-          },
           style: {
-            width: "fit-content"
+            width: "100%",
+            display: "flex",
+            justifyContent: "center"
           },
-          children: [
-            /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
-            /* @__PURE__ */ t.jsx(
-              b,
-              {
-                name: "Plus",
-                width: 16,
-                height: 16
-              }
-            )
-          ]
+          children: /* @__PURE__ */ t.jsx(
+            ot,
+            {
+              withoutHover: !0,
+              className: z.button,
+              size: "s",
+              onClick: () => {
+                const v = [...s];
+                let A = null;
+                if (m) {
+                  for (let _ = 0; _ < m.length; _++)
+                    if (!s.find((P) => P.name === m[_])) {
+                      A = m[_];
+                      break;
+                    }
+                }
+                h === "select" ? v.push({
+                  name: A || m[0],
+                  id: dt(),
+                  ...E
+                }) : h === "input" ? v.push({
+                  name: "",
+                  id: dt(),
+                  ...E
+                }) : v.push({
+                  name: `Image ${s.length + 1}`,
+                  id: dt(),
+                  ...E
+                }), i(v);
+              },
+              style: {
+                width: "fit-content"
+              },
+              children: /* @__PURE__ */ t.jsxs("div", { className: z.addButton, children: [
+                /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
+                /* @__PURE__ */ t.jsx(
+                  b,
+                  {
+                    name: "Plus",
+                    width: 16,
+                    height: 16
+                  }
+                )
+              ] })
+            }
+          )
         }
-      ) })
+      )
     ] }),
     c !== void 0 && /* @__PURE__ */ t.jsx(xt, { items: c })
   ] });
-}, Ns = "_title_oravb_1", Is = "_subtitle_oravb_5", Cs = "_header_oravb_12", Bs = "_text_oravb_13", Ss = "_productsBlock_oravb_14", Ps = "_buttonsBlock_oravb_15", Ts = "_top_oravb_26", As = "_itemsBlock_oravb_35", Os = "_typeTexts_oravb_41", qs = "_block_oravb_48", Ds = "_active_oravb_60", Es = "_products_oravb_14", Ls = "_product_oravb_14", Rs = "_button_oravb_15", Ms = "_image_oravb_90", Hs = "_info_oravb_97", zs = "_name_oravb_109", Vs = "_buttons_oravb_15", Fs = "_modal_oravb_120", Us = "_other_oravb_139", Ys = "_options_oravb_145", ct = {
-  title: Ns,
-  subtitle: Is,
-  header: Cs,
-  text: Bs,
-  productsBlock: Ss,
-  buttonsBlock: Ps,
-  top: Ts,
-  itemsBlock: As,
-  typeTexts: Os,
-  block: qs,
-  active: Ds,
-  products: Es,
-  product: Ls,
-  button: Rs,
-  image: Ms,
-  info: Hs,
-  name: zs,
-  buttons: Vs,
-  modal: Fs,
-  other: Us,
-  options: Ys
-}, Gs = p.forwardRef((u, a) => {
-  const { activeButton: e, setActiveButton: s, popupPosition: i } = u, [c, l] = p.useState(e.typesText), [o, n] = p.useState(e.destination), [r, m] = p.useState(e.page), [d, T] = p.useState(e.link || ""), [x, g] = p.useState(e.text || ""), [h, O] = p.useState(e.openInNewTab), { pages: q } = qt();
-  return p.useEffect(() => {
+}, Bs = "_title_174ru_1", Ss = "_subtitle_174ru_5", Ts = "_header_174ru_12", Ps = "_text_174ru_13", As = "_productsBlock_174ru_14", qs = "_buttonsBlock_174ru_15", Os = "_top_174ru_26", Ds = "_itemsBlock_174ru_35", Es = "_typeTexts_174ru_41", Ls = "_block_174ru_48", Rs = "_active_174ru_60", Ms = "_products_174ru_14", Hs = "_product_174ru_14", zs = "_button_174ru_15", Vs = "_image_174ru_90", Fs = "_info_174ru_97", Us = "_name_174ru_109", Ys = "_buttons_174ru_15", Gs = "_modal_174ru_120", Ws = "_other_174ru_139", Xs = "_options_174ru_145", lt = {
+  title: Bs,
+  subtitle: Ss,
+  header: Ts,
+  text: Ps,
+  productsBlock: As,
+  buttonsBlock: qs,
+  top: Os,
+  itemsBlock: Ds,
+  typeTexts: Es,
+  block: Ls,
+  active: Rs,
+  products: Ms,
+  product: Hs,
+  button: zs,
+  image: Vs,
+  info: Fs,
+  name: Us,
+  buttons: Ys,
+  modal: Gs,
+  other: Ws,
+  options: Xs
+}, Js = g.forwardRef((d, o) => {
+  const { activeButton: e, setActiveButton: s, popupPosition: i } = d, [c, l] = g.useState(e.typesText), [a, n] = g.useState(e.destination), [r, x] = g.useState(e.page), [$, p] = g.useState(e.link || ""), [h, f] = g.useState(e.text || ""), [m, C] = g.useState(e.openInNewTab), { pages: q } = Ot();
+  return g.useEffect(() => {
     s({
       ...e,
       ...{
-        text: x,
-        link: d,
-        destination: o,
+        text: h,
+        link: $,
+        destination: a,
         typesText: c,
         page: r,
-        openInNewTab: h
+        openInNewTab: m
       }
     });
-  }, [c, o, d, x, r, h]), /* @__PURE__ */ t.jsxs(
+  }, [c, a, $, h, r, m]), /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: ct.modal,
-      onClick: (v) => {
-        v.stopPropagation();
+      className: lt.modal,
+      onClick: (j) => {
+        j.stopPropagation();
       },
       style: {
         top: `${i.top}px`,
         left: `${i.left}px`
       },
-      ref: a,
+      ref: o,
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: ct.top, children: [
-          /* @__PURE__ */ t.jsx("h3", { className: ct.title, children: e.type }),
+        /* @__PURE__ */ t.jsxs("div", { className: lt.top, children: [
+          /* @__PURE__ */ t.jsx("h3", { className: lt.title, children: e.type }),
           /* @__PURE__ */ t.jsx(
             b,
             {
@@ -1394,29 +1428,29 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
             }
           )
         ] }),
-        /* @__PURE__ */ t.jsxs("div", { className: ct.options, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: lt.options, children: [
           /* @__PURE__ */ t.jsx(
             Z,
             {
               label: "Destination",
-              onChange: (v) => n(v),
-              options: ["Go to Page", "Open Link"].filter((v) => v !== o),
-              value: o
+              onChange: (j) => n(j),
+              options: ["Go to Page", "Open Link"].filter((j) => j !== a),
+              value: a
             }
           ),
-          o === "Go to Page" ? /* @__PURE__ */ t.jsx(
+          a === "Go to Page" ? /* @__PURE__ */ t.jsx(
             Z,
             {
               label: "Go to",
-              onChange: (v) => m(v),
-              options: q ? Object.values(q).filter((v) => v.name !== r).map((v) => v.name) : [],
+              onChange: (j) => x(j),
+              options: q ? Object.values(q).filter((j) => j.name !== r).map((j) => j.name) : [],
               value: r
             }
           ) : /* @__PURE__ */ t.jsx(
             W,
             {
-              onChange: (v) => T(v),
-              value: d,
+              onChange: (j) => p(j),
+              value: $,
               placeholder: "https://",
               label: "Link"
             }
@@ -1426,20 +1460,20 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
             {
               current: e.openInNewTab,
               label: "Open in new tab",
-              onChange: (v) => O(v)
+              onChange: (j) => C(j)
             }
           ),
           /* @__PURE__ */ t.jsx(
             Ct,
             {
-              onChange: (v) => g(v),
-              value: x,
+              onChange: (j) => f(j),
+              value: h,
               label: "Text",
               maxLength: 150
             }
           ),
           /* @__PURE__ */ t.jsx(
-            Tt,
+            Pt,
             {
               typesText: c,
               setTypesText: l
@@ -1449,231 +1483,242 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
       ]
     }
   );
-}), Ws = "_subtitle_w0d5g_1", Xs = "_header_w0d5g_8", Js = "_text_w0d5g_9", Qs = "_productsBlock_w0d5g_10", Ks = "_buttonsBlock_w0d5g_11", Zs = "_top_w0d5g_23", tn = "_itemsBlock_w0d5g_32", en = "_typeTexts_w0d5g_38", sn = "_block_w0d5g_45", nn = "_active_w0d5g_58", an = "_products_w0d5g_10", on = "_product_w0d5g_10", cn = "_button_w0d5g_11", ln = "_image_w0d5g_88", rn = "_info_w0d5g_95", dn = "_name_w0d5g_107", un = "_buttons_w0d5g_11", mn = "_modal_w0d5g_118", _n = "_other_w0d5g_138", hn = "_options_w0d5g_144", pn = "_addButton_w0d5g_150", rt = {
-  subtitle: Ws,
-  header: Xs,
-  text: Js,
-  productsBlock: Qs,
-  buttonsBlock: Ks,
-  top: Zs,
-  itemsBlock: tn,
-  typeTexts: en,
-  block: sn,
-  active: nn,
-  products: an,
-  product: on,
-  button: cn,
-  image: ln,
-  info: rn,
-  name: dn,
-  buttons: un,
-  modal: mn,
-  other: _n,
-  options: hn,
-  addButton: pn
-}, gn = (u) => {
-  const { buttons: a, setButtons: e, deletable: s = !0, addable: i = !0 } = u, [c, l] = p.useState(null), [o, n] = p.useState({
+}), Qs = "_subtitle_jql1y_1", Ks = "_header_jql1y_8", Zs = "_text_jql1y_9", tn = "_productsBlock_jql1y_10", en = "_buttonsBlock_jql1y_11", sn = "_top_jql1y_23", nn = "_itemsBlock_jql1y_32", on = "_typeTexts_jql1y_38", an = "_block_jql1y_45", cn = "_active_jql1y_58", ln = "_products_jql1y_10", rn = "_product_jql1y_10", dn = "_button_jql1y_11", un = "_image_jql1y_88", mn = "_info_jql1y_95", hn = "_name_jql1y_107", _n = "_buttons_jql1y_11", pn = "_modal_jql1y_118", gn = "_other_jql1y_138", fn = "_options_jql1y_144", xn = "_addButton_jql1y_150", bn = "_deleteButton_jql1y_165", et = {
+  subtitle: Qs,
+  header: Ks,
+  text: Zs,
+  productsBlock: tn,
+  buttonsBlock: en,
+  top: sn,
+  itemsBlock: nn,
+  typeTexts: on,
+  block: an,
+  active: cn,
+  products: ln,
+  product: rn,
+  button: dn,
+  image: un,
+  info: mn,
+  name: hn,
+  buttons: _n,
+  modal: pn,
+  other: gn,
+  options: fn,
+  addButton: xn,
+  deleteButton: bn
+}, jn = (d) => {
+  const { buttons: o, setButtons: e, deletable: s = !0, addable: i = !0 } = d, [c, l] = g.useState(null), [a, n] = g.useState({
     top: 0,
     left: 0
-  }), [r, m] = p.useState(null), d = p.useRef(null);
-  p.useEffect(() => {
-    const x = () => {
+  }), [r, x] = g.useState(null), $ = g.useRef(null);
+  g.useEffect(() => {
+    const h = () => {
       l(null);
     };
-    return document.body.addEventListener("click", x), l(null), () => {
-      l(null), document.body.removeEventListener("click", x);
+    return document.body.addEventListener("click", h), l(null), () => {
+      l(null), document.body.removeEventListener("click", h);
     };
-  }, []), p.useEffect(() => {
+  }, []), g.useEffect(() => {
     if (c) {
-      const x = [...a].map((g) => g.id === c.id ? c : g);
-      e(x);
+      const h = [...o].map((f) => f.id === c.id ? c : f);
+      e(h);
     }
-  }, [c]), p.useEffect(() => {
-    if (d.current && r) {
-      const x = d.current.getBoundingClientRect().height, g = window.innerHeight;
-      let h = r.top;
-      h + x > g + window.scrollY - 200 && (h = g + window.scrollY - x - 200), h < 0 && (h = 10), n({
-        top: h,
+  }, [c]), g.useEffect(() => {
+    if ($.current && r) {
+      const h = $.current.getBoundingClientRect().height, f = window.innerHeight;
+      let m = r.top;
+      m + h > f + window.scrollY - 200 && (m = f + window.scrollY - h - 200), m < 0 && (m = 10), n({
+        top: m,
         left: r.left
       });
     }
-  }, [d.current, r]);
-  const T = (x, g) => {
-    x.stopPropagation();
-    const h = x.target.getBoundingClientRect();
-    m({
-      top: h.top + window.scrollY,
-      left: h.left - 30
-    }), l(g);
+  }, [$.current, r]);
+  const p = (h, f) => {
+    h.stopPropagation();
+    const m = h.target.getBoundingClientRect();
+    x({
+      top: m.top + window.scrollY,
+      left: m.left - 30
+    }), l(f);
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: rt.products, children: [
-    /* @__PURE__ */ t.jsx("h5", { className: rt.subtitle, children: "Button Type" }),
-    a.map((x) => /* @__PURE__ */ t.jsxs(
+  return /* @__PURE__ */ t.jsxs("div", { className: et.products, children: [
+    /* @__PURE__ */ t.jsx("h5", { className: et.subtitle, children: "Button Type" }),
+    o.map((h) => /* @__PURE__ */ t.jsxs(
       "div",
       {
-        className: rt.product,
+        className: et.product,
         children: [
           /* @__PURE__ */ t.jsx(
             Z,
             {
-              onChange: (g) => {
-                const O = [...a].map((q) => q.id === x.id ? {
-                  ...x,
-                  type: g
+              onChange: (f) => {
+                const C = [...o].map((q) => q.id === h.id ? {
+                  ...h,
+                  type: f
                 } : q);
-                e(O);
+                e(C);
               },
-              value: x.type,
+              value: h.type,
               options: ["Primary", "Secondary", "Tertiary"]
             }
           ),
-          /* @__PURE__ */ t.jsxs("div", { className: rt.buttons, children: [
-            /* @__PURE__ */ t.jsx(
+          /* @__PURE__ */ t.jsxs("div", { className: et.buttons, children: [
+            /* @__PURE__ */ t.jsx("div", { className: et.deleteButton, children: /* @__PURE__ */ t.jsx(
               b,
               {
                 name: "Sliders",
                 hoverable: !0,
                 width: 20,
                 height: 20,
-                onClick: (g) => {
-                  T(g, x);
+                onClick: (f) => {
+                  p(f, h);
                 }
               }
-            ),
-            s && /* @__PURE__ */ t.jsx(
+            ) }),
+            s && /* @__PURE__ */ t.jsx("div", { className: et.deleteButton, children: /* @__PURE__ */ t.jsx(
               b,
               {
                 name: "Trash",
                 hoverable: !0,
                 onClick: () => {
-                  const g = a.filter((h) => h.id !== x.id);
-                  e(g);
+                  const f = o.filter((m) => m.id !== h.id);
+                  e(f);
                 },
                 width: 20,
                 height: 20,
                 fill: "#C12A2A"
               }
-            )
+            ) })
           ] })
         ]
       },
-      x.id
+      h.id
     )),
     c && /* @__PURE__ */ t.jsx(
-      Gs,
+      Js,
       {
-        ref: d,
+        ref: $,
         activeButton: c,
         setActiveButton: l,
-        popupPosition: o
+        popupPosition: a
       }
     ),
-    i && /* @__PURE__ */ t.jsx("div", { className: rt.addButton, children: /* @__PURE__ */ t.jsxs(
-      it,
+    i && /* @__PURE__ */ t.jsx(
+      "div",
       {
-        withoutHover: !0,
-        className: rt.button,
-        size: "s",
-        onClick: () => {
-          const x = [...a];
-          x.push({
-            type: "Primary",
-            id: dt(),
-            typesText: [],
-            destination: "Go to Page",
-            text: "Button Name",
-            page: "home",
-            openInNewTab: !0
-          }), e(x);
-        },
         style: {
-          width: "fit-content"
+          width: "100%",
+          display: "flex",
+          justifyContent: "center"
         },
-        children: [
-          /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
-          /* @__PURE__ */ t.jsx(
-            b,
-            {
-              name: "Plus",
-              width: 16,
-              height: 16
-            }
-          )
-        ]
+        children: /* @__PURE__ */ t.jsx(
+          ot,
+          {
+            withoutHover: !0,
+            className: et.button,
+            size: "s",
+            onClick: () => {
+              const h = [...o];
+              h.push({
+                type: "Primary",
+                id: dt(),
+                typesText: [],
+                destination: "Go to Page",
+                text: "Button Name",
+                page: "home",
+                openInNewTab: !0
+              }), e(h);
+            },
+            style: {
+              width: "fit-content"
+            },
+            children: /* @__PURE__ */ t.jsxs("div", { className: et.addButton, children: [
+              /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
+              /* @__PURE__ */ t.jsx(
+                b,
+                {
+                  name: "Plus",
+                  width: 16,
+                  height: 16
+                }
+              )
+            ] })
+          }
+        )
       }
-    ) })
+    )
   ] });
-}, Ga = (u) => {
-  const { isActiveButtons: a, setIsActiveButtons: e, buttons: s, setButtons: i } = u;
-  return /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsxs("div", { className: ct.buttonsBlock, children: [
-    /* @__PURE__ */ t.jsxs("div", { className: ct.top, children: [
-      /* @__PURE__ */ t.jsx("h3", { className: ct.title, children: "Buttons" }),
+}, ta = (d) => {
+  const { isActiveButtons: o, setIsActiveButtons: e, buttons: s, setButtons: i } = d;
+  return /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsxs("div", { className: lt.buttonsBlock, children: [
+    /* @__PURE__ */ t.jsxs("div", { className: lt.top, children: [
+      /* @__PURE__ */ t.jsx("h3", { className: lt.title, children: "Buttons" }),
       /* @__PURE__ */ t.jsx(
         K,
         {
-          current: a,
+          current: o,
           onChange: (c) => e(c)
         }
       )
     ] }),
     /* @__PURE__ */ t.jsx(
-      gn,
+      jn,
       {
         buttons: s,
         setButtons: i
       }
     )
   ] }) });
-}, fn = "_wrapper_m18qi_1", xn = "_subtitle_m18qi_7", bn = "_content_m18qi_14", vn = "_range_m18qi_22", jn = "_track_m18qi_27", yn = "_progress_m18qi_36", kn = "_dots_m18qi_46", $n = "_dot_m18qi_46", wn = "_active_m18qi_65", Nn = "_input_m18qi_77", In = "_countBlock_m18qi_91", Cn = "_count_m18qi_91", Bn = "_controls_m18qi_107", Sn = "_button_m18qi_113", z = {
-  wrapper: fn,
-  subtitle: xn,
-  content: bn,
-  range: vn,
-  track: jn,
-  progress: yn,
-  dots: kn,
-  dot: $n,
-  active: wn,
-  input: Nn,
-  countBlock: In,
-  count: Cn,
-  controls: Bn,
-  button: Sn
-}, It = (u) => {
-  const { label: a, min: e = 1, max: s = 4, step: i = 1, count: c, setCount: l } = u, [o, n] = p.useState(!1), r = Array.from({ length: (s - e) / i + 1 }), m = (c - e) / (s - e) * 100, d = () => {
+}, vn = "_wrapper_m18qi_1", yn = "_subtitle_m18qi_7", kn = "_content_m18qi_14", $n = "_range_m18qi_22", Nn = "_track_m18qi_27", In = "_progress_m18qi_36", wn = "_dots_m18qi_46", Cn = "_dot_m18qi_46", Bn = "_active_m18qi_65", Sn = "_input_m18qi_77", Tn = "_countBlock_m18qi_91", Pn = "_count_m18qi_91", An = "_controls_m18qi_107", qn = "_button_m18qi_113", F = {
+  wrapper: vn,
+  subtitle: yn,
+  content: kn,
+  range: $n,
+  track: Nn,
+  progress: In,
+  dots: wn,
+  dot: Cn,
+  active: Bn,
+  input: Sn,
+  countBlock: Tn,
+  count: Pn,
+  controls: An,
+  button: qn
+}, wt = (d) => {
+  const { label: o, min: e = 1, max: s = 4, step: i = 1, count: c, setCount: l } = d, [a, n] = g.useState(!1), r = Array.from({ length: (s - e) / i + 1 }), x = (c - e) / (s - e) * 100, $ = () => {
     c < s && l(c + i);
-  }, T = () => {
+  }, p = () => {
     c > e && l(c - i);
-  }, x = (g) => {
-    const h = e + g * i;
-    l(h);
+  }, h = (f) => {
+    const m = e + f * i;
+    l(m);
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: z.wrapper, children: [
-    a && /* @__PURE__ */ t.jsx("h5", { className: z.subtitle, children: a }),
-    /* @__PURE__ */ t.jsxs("div", { className: z.content, children: [
-      /* @__PURE__ */ t.jsxs("div", { className: z.range, children: [
-        /* @__PURE__ */ t.jsx("div", { className: z.track }),
+  return /* @__PURE__ */ t.jsxs("div", { className: F.wrapper, children: [
+    o && /* @__PURE__ */ t.jsx("h5", { className: F.subtitle, children: o }),
+    /* @__PURE__ */ t.jsxs("div", { className: F.content, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: F.range, children: [
+        /* @__PURE__ */ t.jsx("div", { className: F.track }),
         /* @__PURE__ */ t.jsx(
           "div",
           {
-            className: z.progress,
-            style: { width: `${m}%` }
+            className: F.progress,
+            style: { width: `${x}%` }
           }
         ),
-        /* @__PURE__ */ t.jsx("div", { className: z.dots, children: r.map((g, h) => {
-          const O = h <= (c - e) / i;
+        /* @__PURE__ */ t.jsx("div", { className: F.dots, children: r.map((f, m) => {
+          const C = m <= (c - e) / i;
           return /* @__PURE__ */ t.jsx(
             "button",
             {
-              onClick: () => x(h),
-              className: F(z.dot, {
-                [z.active]: O,
-                [z.inactive]: !O,
-                [z.dragging]: o
+              onClick: () => h(m),
+              className: V(F.dot, {
+                [F.active]: C,
+                [F.inactive]: !C,
+                [F.dragging]: a
               }),
-              "aria-label": `Set value to ${e + h * i}`
+              "aria-label": `Set value to ${e + m * i}`
             },
-            h
+            m
           );
         }) }),
         /* @__PURE__ */ t.jsx(
@@ -1684,16 +1729,16 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
             max: s,
             step: i,
             value: c,
-            onChange: (g) => l(Number(g.target.value)),
+            onChange: (f) => l(Number(f.target.value)),
             onMouseDown: () => n(!0),
             onMouseUp: () => n(!1),
             onTouchStart: () => n(!0),
             onTouchEnd: () => n(!1),
-            className: z.input
+            className: F.input
           }
         )
       ] }),
-      /* @__PURE__ */ t.jsxs("div", { className: z.countBlock, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: F.countBlock, children: [
         /* @__PURE__ */ t.jsx(
           W,
           {
@@ -1701,20 +1746,20 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
             min: e,
             max: s,
             paddingless: !0,
-            onChange: (g) => {
-              const h = Number(g);
-              h > s ? l(s) : h < e ? l(e) : l(h);
+            onChange: (f) => {
+              const m = Number(f);
+              m > s ? l(s) : m < e ? l(e) : l(m);
             },
             value: String(c)
           }
         ),
-        /* @__PURE__ */ t.jsxs("div", { className: z.controls, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: F.controls, children: [
           /* @__PURE__ */ t.jsx(
             "button",
             {
-              onClick: d,
+              onClick: $,
               disabled: c >= s,
-              className: z.button,
+              className: F.button,
               "aria-label": "Increment count",
               children: /* @__PURE__ */ t.jsx(
                 b,
@@ -1729,9 +1774,9 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
           /* @__PURE__ */ t.jsx(
             "button",
             {
-              onClick: T,
+              onClick: p,
               disabled: c <= e,
-              className: z.button,
+              className: F.button,
               "aria-label": "Decrement count",
               children: /* @__PURE__ */ t.jsx(
                 b,
@@ -1747,38 +1792,39 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
       ] })
     ] })
   ] });
-}, Pn = "_title_w64fy_1", Tn = "_subtitle_w64fy_5", An = "_header_w64fy_12", On = "_text_w64fy_13", qn = "_productsBlock_w64fy_14", Dn = "_top_w64fy_26", En = "_itemsBlock_w64fy_35", Ln = "_typeTexts_w64fy_41", Rn = "_block_w64fy_48", Mn = "_active_w64fy_61", Hn = "_products_w64fy_14", zn = "_product_w64fy_14", Vn = "_button_w64fy_80", Fn = "_image_w64fy_91", Un = "_info_w64fy_98", Yn = "_name_w64fy_110", Gn = "_buttons_w64fy_114", Wn = "_modal_w64fy_121", Xn = "_link_w64fy_141", Jn = "_modalOptions_w64fy_147", Qn = "_addButton_w64fy_159", G = {
-  title: Pn,
-  subtitle: Tn,
-  header: An,
-  text: On,
-  productsBlock: qn,
-  top: Dn,
-  itemsBlock: En,
-  typeTexts: Ln,
-  block: Rn,
-  active: Mn,
-  products: Hn,
-  product: zn,
-  button: Vn,
-  image: Fn,
-  info: Un,
-  name: Yn,
-  buttons: Gn,
-  modal: Wn,
-  link: Xn,
-  modalOptions: Jn,
-  addButton: Qn
-}, Kn = (u) => {
-  const { activeItem: a, setActiveItem: e, popupPosition: s, setIsOpenModal: i, itemsOptions: c } = u, l = c.find((n) => n.id === a.listingId);
+}, On = "_title_1lejm_1", Dn = "_subtitle_1lejm_5", En = "_header_1lejm_12", Ln = "_text_1lejm_13", Rn = "_productsBlock_1lejm_14", Mn = "_top_1lejm_26", Hn = "_itemsBlock_1lejm_35", zn = "_typeTexts_1lejm_41", Vn = "_block_1lejm_48", Fn = "_active_1lejm_61", Un = "_products_1lejm_14", Yn = "_product_1lejm_14", Gn = "_button_1lejm_80", Wn = "_image_1lejm_91", Xn = "_info_1lejm_98", Jn = "_name_1lejm_110", Qn = "_buttons_1lejm_114", Kn = "_modal_1lejm_121", Zn = "_link_1lejm_141", ti = "_modalOptions_1lejm_147", ei = "_addButton_1lejm_159", si = "_deleteButton_1lejm_174", U = {
+  title: On,
+  subtitle: Dn,
+  header: En,
+  text: Ln,
+  productsBlock: Rn,
+  top: Mn,
+  itemsBlock: Hn,
+  typeTexts: zn,
+  block: Vn,
+  active: Fn,
+  products: Un,
+  product: Yn,
+  button: Gn,
+  image: Wn,
+  info: Xn,
+  name: Jn,
+  buttons: Qn,
+  modal: Kn,
+  link: Zn,
+  modalOptions: ti,
+  addButton: ei,
+  deleteButton: si
+}, ni = (d) => {
+  const { activeItem: o, setActiveItem: e, popupPosition: s, setIsOpenModal: i, itemsOptions: c } = d, l = c.find((n) => n.id === o.listingId);
   if (!l) return null;
-  function o(n, r) {
+  function a(n, r) {
     return n.length > r ? `${n.slice(0, r)}...` : n;
   }
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: G.modal,
+      className: U.modal,
       onClick: (n) => {
         n.stopPropagation();
       },
@@ -1787,8 +1833,8 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
         left: `${s.left}px`
       },
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: G.top, children: [
-          /* @__PURE__ */ t.jsx("h3", { children: o(l.productData.name, 20) }),
+        /* @__PURE__ */ t.jsxs("div", { className: U.top, children: [
+          /* @__PURE__ */ t.jsx("h3", { children: a(l.productData.name, 20) }),
           /* @__PURE__ */ t.jsx(
             b,
             {
@@ -1802,14 +1848,14 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
             }
           )
         ] }),
-        /* @__PURE__ */ t.jsx("div", { className: G.modalOptions, children: /* @__PURE__ */ t.jsx(
-          ht,
+        /* @__PURE__ */ t.jsx("div", { className: U.modalOptions, children: /* @__PURE__ */ t.jsx(
+          _t,
           {
             label: "Put up an attractive image",
             activeImage: l.productData.images.length > 0 ? l.productData.images[0].cfId : void 0,
             onChange: (n) => {
               const r = {
-                ...a,
+                ...o,
                 image: n[0]
               };
               e(r);
@@ -1819,78 +1865,78 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
       ]
     }
   );
-}, Zn = (u) => {
-  const { index: a, moveProduct: e, children: s } = u, [, i] = $t({
+}, ii = (d) => {
+  const { index: o, moveProduct: e, children: s } = d, [, i] = $t({
     accept: "product",
-    hover(o) {
-      o.index !== a && (e(o.index, a), o.index = a);
+    hover(a) {
+      a.index !== o && (e(a.index, o), a.index = o);
     }
-  }), [{ isDragging: c }, l] = wt({
+  }), [{ isDragging: c }, l] = Nt({
     type: "product",
-    item: { index: a },
-    collect: (o) => ({
-      isDragging: o.isDragging()
+    item: { index: o },
+    collect: (a) => ({
+      isDragging: a.isDragging()
     })
   });
   return /* @__PURE__ */ t.jsx(
     "div",
     {
-      ref: (o) => l(i(o)),
-      className: `${G.product} ${c ? G.dragging : ""}`,
+      ref: (a) => l(i(a)),
+      className: `${U.product} ${c ? U.dragging : ""}`,
       children: s
     }
   );
-}, Wa = (u) => {
+}, ea = (d) => {
   const {
-    isActiveItems: a,
+    isActiveItems: o,
     setIsActiveItems: e,
     items: s,
     setItems: i,
     other: c,
     title: l,
-    subtitle: o,
+    subtitle: a,
     editable: n = !0,
     draggable: r = !1,
-    withImage: m = !1,
-    deletable: d = !0,
-    addable: T = !0,
-    itemsType: x,
-    itemsOptions: g
-  } = u, [h, O] = p.useState(null), [q, v] = p.useState({
+    withImage: x = !1,
+    deletable: $ = !0,
+    addable: p = !0,
+    itemsType: h,
+    itemsOptions: f
+  } = d, [m, C] = g.useState(null), [q, j] = g.useState({
     top: 0,
     left: 0
-  }), [E, C] = p.useState(!1), B = ($, k) => {
-    const N = [...s], [L] = N.splice($, 1);
-    N.splice(k, 0, L), i(N);
+  }), [E, S] = g.useState(!1), T = (k, y) => {
+    const L = [...s], [I] = L.splice(k, 1);
+    L.splice(y, 0, I), i(L);
   };
-  p.useEffect(() => {
-    const $ = () => {
-      O(null), C(!1);
+  g.useEffect(() => {
+    const k = () => {
+      C(null), S(!1);
     };
-    return document.body.addEventListener("click", $), O(null), C(!1), () => {
-      O(null), C(!1), document.body.removeEventListener("click", $);
+    return document.body.addEventListener("click", k), C(null), S(!1), () => {
+      C(null), S(!1), document.body.removeEventListener("click", k);
     };
-  }, []), p.useEffect(() => {
-    if (h) {
-      const $ = [...s].map((k) => k.listingId === h.listingId ? h : k);
-      i($);
+  }, []), g.useEffect(() => {
+    if (m) {
+      const k = [...s].map((y) => y.listingId === m.listingId ? m : y);
+      i(k);
     }
-  }, [h]);
-  const f = ($, k) => {
-    $.stopPropagation();
-    const N = $.target.getBoundingClientRect(), L = 100, R = window.innerHeight;
-    let U = N.top + window.scrollY;
-    U + L > R && (U = R - L - 20), C(!0), v({
-      top: U - 80,
-      left: N.left - 30
-    }), O(k);
+  }, [m]);
+  const M = (k, y) => {
+    k.stopPropagation();
+    const L = k.target.getBoundingClientRect(), I = 100, R = window.innerHeight;
+    let Y = L.top + window.scrollY;
+    Y + I > R && (Y = R - I - 20), S(!0), j({
+      top: Y - 80,
+      left: L.left - 30
+    }), C(y);
   };
-  function y($) {
-    if (m)
-      return $ ? /* @__PURE__ */ t.jsx(
+  function u(k) {
+    if (x)
+      return k ? /* @__PURE__ */ t.jsx(
         "img",
         {
-          src: `https://imagedelivery.net/${$}/w=1000`,
+          src: `https://imagedelivery.net/${k}/w=1000`,
           alt: "image",
           width: 16,
           height: 16
@@ -1905,10 +1951,10 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
         }
       );
   }
-  const M = ($, k) => {
-    const N = g.find((R) => $.listingId === R.id);
-    if (!N) return null;
-    const L = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+  const O = (k, y) => {
+    const L = f.find((R) => k.listingId === R.id);
+    if (!L) return null;
+    const I = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       r && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
         b,
         {
@@ -1917,41 +1963,41 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
           width: 20,
           height: 20
         }
-      ) }, k),
-      x === "select" && /* @__PURE__ */ t.jsx(
+      ) }, y),
+      h === "select" && /* @__PURE__ */ t.jsx(
         Z,
         {
           onChange: (R) => {
-            const U = [...s], tt = g.find((A) => A.productData.name === R);
+            const Y = [...s], tt = f.find((A) => A.productData.name === R);
             if (!tt) return;
             const at = {
               listingId: tt.id,
               image: tt.productData.images.length > 0 ? tt.productData.images[0].cfId : ""
-            }, j = U.map((A) => A.listingId === $.listingId ? at : A);
-            O(at), i([...j]);
+            }, v = Y.map((A) => A.listingId === k.listingId ? at : A);
+            C(at), i([...v]);
           },
-          value: N.productData.name,
+          value: L.productData.name,
           options: [
-            ...g.filter((R) => !s.find((U) => U.listingId === R.id)).map((R) => R.productData.name)
+            ...f.filter((R) => !s.find((Y) => Y.listingId === R.id)).map((R) => R.productData.name)
           ],
-          leftAddon: y(
-            $.image || N.productData.images.length > 0 && N.productData.images[0].cfId || ""
+          leftAddon: u(
+            k.image || L.productData.images.length > 0 && L.productData.images[0].cfId || ""
           )
         },
-        k
+        y
       ),
-      /* @__PURE__ */ t.jsxs("div", { className: G.buttons, children: [
-        n && /* @__PURE__ */ t.jsx(
+      /* @__PURE__ */ t.jsxs("div", { className: U.buttons, children: [
+        n && /* @__PURE__ */ t.jsx("div", { className: U.deleteButton, children: /* @__PURE__ */ t.jsx(
           b,
           {
             name: "Sliders",
             hoverable: !0,
             width: 20,
             height: 20,
-            onClick: (R) => f(R, $)
+            onClick: (R) => M(R, k)
           }
-        ),
-        d && /* @__PURE__ */ t.jsx(
+        ) }),
+        $ && /* @__PURE__ */ t.jsx("div", { className: U.deleteButton, children: /* @__PURE__ */ t.jsx(
           b,
           {
             name: "Trash",
@@ -1959,219 +2005,230 @@ const Et = "_wrapper_9rr5j_2", Lt = "_alignmentBlock_9rr5j_8", Rt = "_title_9rr5
             width: 20,
             height: 20,
             fill: "#C12A2A",
-            onClick: () => i(s.filter((R) => R !== $))
+            onClick: () => i(s.filter((R) => R !== k))
           }
-        )
+        ) })
       ] })
     ] });
     return r ? /* @__PURE__ */ t.jsx(
-      Zn,
+      ii,
       {
-        product: $,
-        index: k,
-        moveProduct: B,
-        children: L
+        product: k,
+        index: y,
+        moveProduct: T,
+        children: I
       },
-      $.listingId
+      k.listingId
     ) : /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: G.product,
-        children: L
+        className: U.product,
+        children: I
       },
-      $.listingId
+      k.listingId
     );
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: G.productsBlock, children: [
-    (l || a !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: G.top, children: [
-      l && /* @__PURE__ */ t.jsx("h3", { className: G.title, children: l }),
-      a !== void 0 && /* @__PURE__ */ t.jsx(
+  return /* @__PURE__ */ t.jsxs("div", { className: U.productsBlock, children: [
+    (l || o !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: U.top, children: [
+      l && /* @__PURE__ */ t.jsx("h3", { className: U.title, children: l }),
+      o !== void 0 && /* @__PURE__ */ t.jsx(
         K,
         {
-          current: a,
-          onChange: ($) => e == null ? void 0 : e($)
+          current: o,
+          onChange: (k) => e == null ? void 0 : e(k)
         }
       )
     ] }),
-    E && h && /* @__PURE__ */ t.jsx(
-      Kn,
+    E && m && /* @__PURE__ */ t.jsx(
+      ni,
       {
-        activeItem: h,
-        setActiveItem: O,
-        setIsOpenModal: C,
+        activeItem: m,
+        setActiveItem: C,
+        setIsOpenModal: S,
         popupPosition: q,
-        itemsOptions: g
+        itemsOptions: f
       }
     ),
-    /* @__PURE__ */ t.jsxs("div", { className: G.products, children: [
-      o && /* @__PURE__ */ t.jsx("h5", { className: G.subtitle, children: o }),
-      r ? /* @__PURE__ */ t.jsx(yt, { backend: kt, children: s.map(($, k) => M($, k)) }) : s.map(($, k) => M($, k)),
-      T && /* @__PURE__ */ t.jsx("div", { className: G.addButton, children: /* @__PURE__ */ t.jsxs(
-        it,
+    /* @__PURE__ */ t.jsxs("div", { className: U.products, children: [
+      a && /* @__PURE__ */ t.jsx("h5", { className: U.subtitle, children: a }),
+      r ? /* @__PURE__ */ t.jsx(yt, { backend: kt, children: s.map((k, y) => O(k, y)) }) : s.map((k, y) => O(k, y)),
+      p && /* @__PURE__ */ t.jsx(
+        "div",
         {
-          withoutHover: !0,
-          className: G.button,
-          size: "s",
-          onClick: () => {
-            const $ = [...s];
-            for (let k = 0; k < g.length; k++)
-              if (!s.find((N) => N.listingId === g[k].id)) {
-                $.push({
-                  listingId: g[k].id,
-                  image: g[k].productData.images.length > 0 ? g[k].productData.images[0].cfId : ""
-                });
-                break;
-              }
-            i($);
-          },
-          disabled: s.length === g.length,
           style: {
-            width: "fit-content"
+            width: "100%",
+            display: "flex",
+            justifyContent: "center"
           },
-          children: [
-            /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
-            /* @__PURE__ */ t.jsx(
-              b,
-              {
-                name: "Plus",
-                width: 16,
-                height: 16
-              }
-            )
-          ]
+          children: /* @__PURE__ */ t.jsx(
+            ot,
+            {
+              withoutHover: !0,
+              className: U.button,
+              size: "s",
+              onClick: () => {
+                const k = [...s];
+                for (let y = 0; y < f.length; y++)
+                  if (!s.find((L) => L.listingId === f[y].id)) {
+                    k.push({
+                      listingId: f[y].id,
+                      image: f[y].productData.images.length > 0 ? f[y].productData.images[0].cfId : ""
+                    });
+                    break;
+                  }
+                i(k);
+              },
+              disabled: s.length === f.length,
+              style: {
+                width: "fit-content"
+              },
+              children: /* @__PURE__ */ t.jsxs("div", { className: U.addButton, children: [
+                /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
+                /* @__PURE__ */ t.jsx(
+                  b,
+                  {
+                    name: "Plus",
+                    width: 16,
+                    height: 16
+                  }
+                )
+              ] })
+            }
+          )
         }
-      ) })
+      )
     ] }),
     c !== void 0 && /* @__PURE__ */ t.jsx(xt, { items: c })
   ] });
-}, ti = "_options_jdafm_1", ei = "_price_jdafm_12", si = "_oldPrice_jdafm_19", ni = "_newPrice_jdafm_27", ii = "_animate_jdafm_34", ai = "_appearAndBounce_jdafm_1", oi = "_meta_jdafm_52", ci = "_info_jdafm_58", li = "_infoRight_jdafm_66", ri = "_buttons_jdafm_73", di = "_variants_jdafm_80", ui = "_variant_jdafm_80", mi = "_stock_jdafm_97", _i = "_variantInfo_jdafm_104", hi = "_quantity_jdafm_110", pi = "_count_jdafm_117", gi = "_focused_jdafm_134", fi = "_button_jdafm_73", xi = "_activeVariant_jdafm_160", bi = "_chargeTypes_jdafm_164", vi = "_charge_jdafm_164", ji = "_chargeActive_jdafm_189", yi = "_title_jdafm_197", I = {
-  options: ti,
-  price: ei,
-  oldPrice: si,
-  newPrice: ni,
-  animate: ii,
-  appearAndBounce: ai,
-  meta: oi,
-  info: ci,
-  infoRight: li,
-  buttons: ri,
-  variants: di,
-  variant: ui,
-  stock: mi,
-  variantInfo: _i,
-  quantity: hi,
-  count: pi,
-  focused: gi,
-  button: fi,
-  activeVariant: xi,
-  chargeTypes: bi,
-  charge: vi,
-  chargeActive: ji,
-  title: yi
+}, oi = "_options_d1lk6_1", ai = "_price_d1lk6_12", ci = "_oldPrice_d1lk6_19", li = "_newPrice_d1lk6_27", ri = "_animate_d1lk6_34", di = "_appearAndBounce_d1lk6_1", ui = "_meta_d1lk6_52", mi = "_info_d1lk6_58", hi = "_infoRight_d1lk6_66", _i = "_buttons_d1lk6_73", pi = "_variants_d1lk6_80", gi = "_variant_d1lk6_80", fi = "_stock_d1lk6_98", xi = "_variantInfo_d1lk6_105", bi = "_quantity_d1lk6_111", ji = "_count_d1lk6_118", vi = "_focused_d1lk6_135", yi = "_button_d1lk6_73", ki = "_activeVariant_d1lk6_161", $i = "_chargeTypes_d1lk6_165", Ni = "_charge_d1lk6_165", Ii = "_chargeActive_d1lk6_190", wi = "_title_d1lk6_198", w = {
+  options: oi,
+  price: ai,
+  oldPrice: ci,
+  newPrice: li,
+  animate: ri,
+  appearAndBounce: di,
+  meta: ui,
+  info: mi,
+  infoRight: hi,
+  buttons: _i,
+  variants: pi,
+  variant: gi,
+  stock: fi,
+  variantInfo: xi,
+  quantity: bi,
+  count: ji,
+  focused: vi,
+  button: yi,
+  activeVariant: ki,
+  chargeTypes: $i,
+  charge: Ni,
+  chargeActive: Ii,
+  title: wi
 };
-var Ot = /* @__PURE__ */ ((u) => (u.ONE_TIME = "One-Time", u.RECURRING = "Subscribe & Save", u))(Ot || {});
-const Xa = (u) => {
-  var C, B;
-  const { variants: a } = u, [e, s] = p.useState(a[0]), [i, c] = p.useState(e.chargeTypes[0]), l = ft(), [o, n] = p.useState(1), [r, m] = p.useState(!1), { reset: d, addProductToCart: T, getProducts: x } = Nt(), [g, h] = p.useState(!1);
-  p.useEffect(() => {
-    h(!0);
-    const f = setTimeout(() => h(!1), 600);
-    return () => clearTimeout(f);
-  }, [o]);
-  async function O() {
-    await x(), await T({
-      productId: u.id,
+var qt = /* @__PURE__ */ ((d) => (d.ONE_TIME = "One-Time", d.RECURRING = "Subscribe & Save", d))(qt || {});
+const sa = (d) => {
+  var T, M;
+  const { variants: o } = d, [e, s] = g.useState(o[0]), [i, c] = g.useState(e.chargeTypes[0]), l = ft(), [a, n] = g.useState(1), [r, x] = g.useState(!1), { reset: $, addProductToCart: p, getProducts: h, cart: f } = It(), [m, C] = g.useState(!1);
+  g.useEffect(() => {
+    C(!0);
+    const u = setTimeout(() => C(!1), 600);
+    return () => clearTimeout(u);
+  }, [a]);
+  async function q() {
+    await h(), await p({
+      productId: d.id,
       productVariantId: e.id,
-      quantity: o
+      quantity: a
     });
   }
-  function q() {
-    d(), O(), l("/checkout");
+  function j() {
+    $(), q(), l("/checkout");
   }
-  function v(f) {
-    if (f >= 864e5) {
-      const N = Math.floor(f / 864e5);
-      return `${N} ${N === 1 ? "day" : "days"}`;
-    } else if (f >= 36e5) {
-      const N = Math.floor(f / 36e5);
-      return `${N} ${N === 1 ? "hour" : "hours"}`;
-    } else if (f >= 6e4) {
-      const N = Math.floor(f / 6e4);
-      return `${N} ${N === 1 ? "minute" : "minutes"}`;
+  console.log(f);
+  function E(u) {
+    if (u >= 864e5) {
+      const I = Math.floor(u / 864e5);
+      return `${I} ${I === 1 ? "day" : "days"}`;
+    } else if (u >= 36e5) {
+      const I = Math.floor(u / 36e5);
+      return `${I} ${I === 1 ? "hour" : "hours"}`;
+    } else if (u >= 6e4) {
+      const I = Math.floor(u / 6e4);
+      return `${I} ${I === 1 ? "minute" : "minutes"}`;
     } else {
-      const N = Math.floor(f / 1e3);
-      return `${N} ${N === 1 ? "second" : "seconds"}`;
+      const I = Math.floor(u / 1e3);
+      return `${I} ${I === 1 ? "second" : "seconds"}`;
     }
   }
-  function E(f, y) {
-    return f.length > y ? f.slice(0, y) + "..." : f;
+  function S(u, O) {
+    return u.length > O ? u.slice(0, O) + "..." : u;
   }
-  return /* @__PURE__ */ t.jsxs("div", { className: I.options, children: [
-    e.chargeTypes.length > 1 && /* @__PURE__ */ t.jsx("div", { className: I.chargeTypes, children: e.chargeTypes.map((f) => /* @__PURE__ */ t.jsx(
+  return /* @__PURE__ */ t.jsxs("div", { className: w.options, children: [
+    e.chargeTypes.length > 1 && /* @__PURE__ */ t.jsx("div", { className: w.chargeTypes, children: e.chargeTypes.map((u) => /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: F(I.charge, {
-          [I.chargeActive]: i === f
+        className: V(w.charge, {
+          [w.chargeActive]: i === u
         }),
-        onClick: () => c(f),
-        children: Ot[f]
+        onClick: () => c(u),
+        children: qt[u]
       },
-      f
+      u
     )) }),
-    /* @__PURE__ */ t.jsx("div", { className: I.variants, children: a.map((f) => {
-      var y;
+    /* @__PURE__ */ t.jsx("div", { className: w.variants, children: o.map((u) => {
+      var O;
       return /* @__PURE__ */ t.jsxs(
         "div",
         {
-          className: F(I.variant, {
-            [I.activeVariant]: e.id === f.id
+          className: V(w.variant, {
+            [w.activeVariant]: e.id === u.id
           }),
-          onClick: () => s(f),
+          onClick: () => s(u),
           children: [
-            /* @__PURE__ */ t.jsxs("div", { className: I.variantInfo, children: [
-              /* @__PURE__ */ t.jsx("span", { className: I.title, children: E(f.name, 15) }),
+            /* @__PURE__ */ t.jsxs("div", { className: w.variantInfo, children: [
+              /* @__PURE__ */ t.jsx("span", { className: w.title, children: S(u.name, 15) }),
               /* @__PURE__ */ t.jsxs("span", { children: [
                 "$",
-                i === "ONE_TIME" ? f.price.amount : f.subscriptionSettings ? f.subscriptionSettings.price.amount : "Price Not Found"
+                i === "ONE_TIME" ? u.price.amount : u.subscriptionSettings ? u.subscriptionSettings.price.amount : "Price Not Found"
               ] })
             ] }),
-            /* @__PURE__ */ t.jsx("div", { children: i === "ONE_TIME" && /* @__PURE__ */ t.jsxs("span", { className: I.stock, children: [
-              ((y = f.quantity.restrictions) == null ? void 0 : y.max) || f.quantity.available || 0,
+            /* @__PURE__ */ t.jsx("div", { children: i === "ONE_TIME" && /* @__PURE__ */ t.jsxs("span", { className: w.stock, children: [
+              ((O = u.quantity.restrictions) == null ? void 0 : O.max) || u.quantity.available || 0,
               " in stock"
             ] }) })
           ]
         },
-        f.id
+        u.id
       );
     }) }),
-    i === "ONE_TIME" && /* @__PURE__ */ t.jsxs("div", { className: I.quantity, children: [
+    i === "ONE_TIME" && /* @__PURE__ */ t.jsxs("div", { className: w.quantity, children: [
       /* @__PURE__ */ t.jsx(
         "button",
         {
           onClick: () => {
-            o > 1 ? n((f) => f - 1) : n(1);
+            a > 1 ? n((u) => u - 1) : n(1);
           },
-          className: I.button,
-          disabled: e.quantity.restrictions && o <= e.quantity.restrictions.min,
+          className: w.button,
+          disabled: e.quantity.restrictions && a <= e.quantity.restrictions.min,
           children: /* @__PURE__ */ t.jsx(b, { name: "Minus" })
         }
       ),
       /* @__PURE__ */ t.jsx(
         "label",
         {
-          className: F(I.count, {
-            [I.focused]: r
+          className: V(w.count, {
+            [w.focused]: r
           }),
-          onFocus: () => m(!0),
-          onBlur: () => m(!1),
+          onFocus: () => x(!0),
+          onBlur: () => x(!1),
           children: /* @__PURE__ */ t.jsx(
             W,
             {
               type: "number",
-              value: String(o),
-              onChange: (f) => n(Number(f)),
-              max: ((C = e.quantity.restrictions) == null ? void 0 : C.max) || e.quantity.available || 1 / 0,
-              min: ((B = e.quantity.restrictions) == null ? void 0 : B.min) || 0,
+              value: String(a),
+              onChange: (u) => n(Number(u)),
+              max: ((T = e.quantity.restrictions) == null ? void 0 : T.max) || e.quantity.available || 1 / 0,
+              min: ((M = e.quantity.restrictions) == null ? void 0 : M.min) || 0,
               style: {
                 backgroundColor: "transparent",
                 border: "none",
@@ -2185,18 +2242,18 @@ const Xa = (u) => {
         "button",
         {
           onClick: () => {
-            n((f) => f + 1);
+            n((u) => u + 1);
           },
-          className: I.button,
-          disabled: !!(e.quantity.restrictions && o >= e.quantity.restrictions.max || e.quantity.available && o >= e.quantity.available),
+          className: w.button,
+          disabled: !!(e.quantity.restrictions && a >= e.quantity.restrictions.max || e.quantity.available && a >= e.quantity.available),
           children: /* @__PURE__ */ t.jsx(b, { name: "Plus" })
         }
       )
     ] }),
-    /* @__PURE__ */ t.jsxs("div", { className: I.meta, children: [
-      /* @__PURE__ */ t.jsxs("div", { className: I.info, children: [
+    /* @__PURE__ */ t.jsxs("div", { className: w.meta, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: w.info, children: [
         /* @__PURE__ */ t.jsx("span", { children: "Delivery" }),
-        /* @__PURE__ */ t.jsxs("div", { className: I.infoRight, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: w.infoRight, children: [
           /* @__PURE__ */ t.jsx(
             b,
             {
@@ -2206,116 +2263,119 @@ const Xa = (u) => {
               height: 20
             }
           ),
-          /* @__PURE__ */ t.jsx("span", { children: !e.deliveryTime || e.deliveryTime === 0 ? "Instant" : v(e.deliveryTime) })
+          /* @__PURE__ */ t.jsx("span", { children: !e.deliveryTime || e.deliveryTime === 0 ? "Instant" : E(e.deliveryTime) })
         ] })
       ] }),
-      /* @__PURE__ */ t.jsxs("div", { className: I.info, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: w.info, children: [
         /* @__PURE__ */ t.jsx("span", { children: "Price" }),
-        /* @__PURE__ */ t.jsx("div", { className: I.infoRight, children: i === "ONE_TIME" ? e.compareAtPrice && (e.compareAtPrice.amount || 0) - (e.price.amount || 0) > 0 ? /* @__PURE__ */ t.jsxs("div", { className: I.price, children: [
-          /* @__PURE__ */ t.jsxs("span", { className: F(I.newPrice, { [I.animate]: g }), children: [
+        /* @__PURE__ */ t.jsx("div", { className: w.infoRight, children: i === "ONE_TIME" ? e.compareAtPrice && (e.compareAtPrice.amount || 0) - (e.price.amount || 0) > 0 ? /* @__PURE__ */ t.jsxs("div", { className: w.price, children: [
+          /* @__PURE__ */ t.jsxs("span", { className: V(w.newPrice, { [w.animate]: m }), children: [
             "$ ",
-            (e.price.amount || 0) * o
+            (e.price.amount || 0) * a
           ] }),
-          /* @__PURE__ */ t.jsxs("span", { className: I.oldPrice, children: [
+          /* @__PURE__ */ t.jsxs("span", { className: w.oldPrice, children: [
             "$ ",
-            (e.compareAtPrice.amount || 0) * o
+            (e.compareAtPrice.amount || 0) * a
           ] })
-        ] }) : /* @__PURE__ */ t.jsxs("span", { className: F(I.newPrice, { [I.animate]: g }), children: [
+        ] }) : /* @__PURE__ */ t.jsxs("span", { className: V(w.newPrice, { [w.animate]: m }), children: [
           "$ ",
-          (e.price.amount || 0) * o
-        ] }) : e.subscriptionSettings && e.subscriptionSettings.compareAtPrice && (e.subscriptionSettings.compareAtPrice.amount || 0) - (e.subscriptionSettings.price.amount || 0) > 0 ? /* @__PURE__ */ t.jsxs("div", { className: I.price, children: [
-          /* @__PURE__ */ t.jsxs("span", { className: F(I.newPrice, { [I.animate]: g }), children: [
+          (e.price.amount || 0) * a
+        ] }) : e.subscriptionSettings && e.subscriptionSettings.compareAtPrice && (e.subscriptionSettings.compareAtPrice.amount || 0) - (e.subscriptionSettings.price.amount || 0) > 0 ? /* @__PURE__ */ t.jsxs("div", { className: w.price, children: [
+          /* @__PURE__ */ t.jsxs("span", { className: V(w.newPrice, { [w.animate]: m }), children: [
             "$ ",
             e.subscriptionSettings.price.amount || 0
           ] }),
-          /* @__PURE__ */ t.jsxs("span", { className: I.oldPrice, children: [
+          /* @__PURE__ */ t.jsxs("span", { className: w.oldPrice, children: [
             "$ ",
             e.subscriptionSettings.compareAtPrice.amount || 0
           ] })
-        ] }) : e.subscriptionSettings && /* @__PURE__ */ t.jsxs("span", { className: F(I.newPrice, { [I.animate]: g }), children: [
+        ] }) : e.subscriptionSettings && /* @__PURE__ */ t.jsxs("span", { className: V(w.newPrice, { [w.animate]: m }), children: [
           "$ ",
           e.subscriptionSettings.price.amount || 0
         ] }) })
       ] })
     ] }),
-    /* @__PURE__ */ t.jsxs("div", { className: I.buttons, children: [
+    /* @__PURE__ */ t.jsxs("div", { className: w.buttons, children: [
       /* @__PURE__ */ t.jsx(
-        it,
+        ot,
         {
           type: "Primary",
-          onClick: () => q(),
+          onClick: () => j(),
           children: /* @__PURE__ */ t.jsx("span", { children: i === "ONE_TIME" ? "Buy Now" : "Subscribe Now" })
         }
       ),
       i === "ONE_TIME" && /* @__PURE__ */ t.jsx(
-        it,
+        ot,
         {
           type: "Secondary",
-          onClick: () => O(),
+          onClick: () => q(),
           children: "Add to Cart"
         }
       )
     ] })
   ] });
-}, ki = "_button_1861a_1", $i = "_login_1861a_14", wi = "_signUp_1861a_18", Ni = "_buttons_1861a_23", Ii = "_modal_1861a_32", Ci = "_info_1861a_60", Bi = "_top_1861a_67", Si = "_title_1861a_78", Pi = "_clear_1861a_84", Ti = "_activeClear_1861a_91", Ai = "_count_1861a_95", Oi = "_cart_1861a_110", qi = "_empty_1861a_118", Di = "_product_1861a_144", Ei = "_products_1861a_153", Li = "_image_1861a_161", Ri = "_productInfo_1861a_167", Mi = "_content_1861a_174", Hi = "_name_1861a_180", zi = "_price_1861a_186", Vi = "_productButtons_1861a_192", Fi = "_productButton_1861a_192", Ui = "_productCount_1861a_212", Yi = "_bottom_1861a_228", Gi = "_subtotal_1861a_236", Wi = "_block_1861a_244", Xi = "_shoppingCount_1861a_251", Ji = "_total_1861a_271", Qi = "_link_1861a_277", Ki = "_userInfo_1861a_284", P = {
-  button: ki,
-  login: $i,
-  signUp: wi,
-  buttons: Ni,
-  modal: Ii,
-  info: Ci,
-  top: Bi,
-  title: Si,
-  clear: Pi,
-  activeClear: Ti,
-  count: Ai,
-  cart: Oi,
-  empty: qi,
-  product: Di,
-  products: Ei,
-  image: Li,
-  productInfo: Ri,
-  content: Mi,
-  name: Hi,
-  price: zi,
-  productButtons: Vi,
-  productButton: Fi,
-  productCount: Ui,
-  bottom: Yi,
-  subtotal: Gi,
-  block: Wi,
-  shoppingCount: Xi,
-  total: Ji,
-  link: Qi,
-  userInfo: Ki
-}, Zi = "_button_bymeg_1", ta = "_primary_bymeg_19", ea = "_primaryHovered_bymeg_30", sa = "_secondary_bymeg_34", na = "_secondaryHovered_bymeg_44", ia = "_tertiary_bymeg_48", aa = "_tertiaryHovered_bymeg_58", oa = "_content_bymeg_62", et = {
-  button: Zi,
-  primary: ta,
-  primaryHovered: ea,
-  secondary: sa,
-  secondaryHovered: na,
-  tertiary: ia,
-  tertiaryHovered: aa,
-  content: oa
-}, jt = (u) => {
-  const { children: a, onClick: e, style: s, className: i, disabled: c = !1, type: l = "Primary" } = u, { themeSettings: o } = Bt();
+}, Ci = "_button_oyh2y_1", Bi = "_login_oyh2y_14", Si = "_signUp_oyh2y_18", Ti = "_buttons_oyh2y_23", Pi = "_modal_oyh2y_32", Ai = "_closing_oyh2y_61", qi = "_info_oyh2y_85", Oi = "_top_oyh2y_92", Di = "_title_oyh2y_103", Ei = "_clear_oyh2y_110", Li = "_activeClear_oyh2y_117", Ri = "_count_oyh2y_121", Mi = "_cart_oyh2y_136", Hi = "_empty_oyh2y_144", zi = "_product_oyh2y_170", Vi = "_products_oyh2y_179", Fi = "_image_oyh2y_187", Ui = "_productInfo_oyh2y_193", Yi = "_content_oyh2y_200", Gi = "_name_oyh2y_206", Wi = "_price_oyh2y_212", Xi = "_productButtons_oyh2y_218", Ji = "_productButton_oyh2y_218", Qi = "_productCount_oyh2y_238", Ki = "_bottom_oyh2y_254", Zi = "_subtotal_oyh2y_262", to = "_block_oyh2y_270", eo = "_shoppingCount_oyh2y_277", so = "_total_oyh2y_297", no = "_link_oyh2y_303", io = "_userInfo_oyh2y_310", B = {
+  button: Ci,
+  login: Bi,
+  signUp: Si,
+  buttons: Ti,
+  modal: Pi,
+  "slide-in-fade": "_slide-in-fade_oyh2y_1",
+  closing: Ai,
+  "slide-out-fade": "_slide-out-fade_oyh2y_1",
+  info: qi,
+  top: Oi,
+  title: Di,
+  clear: Ei,
+  activeClear: Li,
+  count: Ri,
+  cart: Mi,
+  empty: Hi,
+  product: zi,
+  products: Vi,
+  image: Fi,
+  productInfo: Ui,
+  content: Yi,
+  name: Gi,
+  price: Wi,
+  productButtons: Xi,
+  productButton: Ji,
+  productCount: Qi,
+  bottom: Ki,
+  subtotal: Zi,
+  block: to,
+  shoppingCount: eo,
+  total: so,
+  link: no,
+  userInfo: io
+}, oo = "_button_85085_1", ao = "_primary_85085_20", co = "_primaryHovered_85085_30", lo = "_secondary_85085_34", ro = "_secondaryHovered_85085_44", uo = "_tertiary_85085_48", mo = "_tertiaryHovered_85085_58", ho = "_content_85085_62", st = {
+  button: oo,
+  primary: ao,
+  primaryHovered: co,
+  secondary: lo,
+  secondaryHovered: ro,
+  tertiary: uo,
+  tertiaryHovered: mo,
+  content: ho
+}, vt = (d) => {
+  const { children: o, onClick: e, style: s, className: i, disabled: c = !1, type: l = "Primary" } = d, { themeSettings: a } = Bt();
   return /* @__PURE__ */ t.jsx(
     "button",
     {
-      className: F(et.button, i, {
-        [et.primary]: l === "Primary",
-        [et.secondary]: l === "Secondary",
-        [et.tertiary]: l === "Tertiary",
-        [et.primaryHovered]: l === "Primary" && !c && o.buttons.primary.hover,
-        [et.secondaryHovered]: l === "Secondary" && !c && o.buttons.secondary.hover,
-        [et.tertiaryHovered]: l === "Tertiary" && !c && o.buttons.tertiary.hover
+      className: V(st.button, i, {
+        [st.primary]: l === "Primary",
+        [st.secondary]: l === "Secondary",
+        [st.tertiary]: l === "Tertiary",
+        [st.primaryHovered]: l === "Primary" && !c && a.buttons.primary.hover,
+        [st.secondaryHovered]: l === "Secondary" && !c && a.buttons.secondary.hover,
+        [st.tertiaryHovered]: l === "Tertiary" && !c && a.buttons.tertiary.hover
       }),
       onClick: e,
       style: {
         ...s
       },
       disabled: c,
-      children: l === "Tertiary" ? /* @__PURE__ */ t.jsxs("div", { className: et.content, children: [
+      children: l === "Tertiary" ? /* @__PURE__ */ t.jsxs("div", { className: st.content, children: [
         /* @__PURE__ */ t.jsx(
           b,
           {
@@ -2325,69 +2385,69 @@ const Xa = (u) => {
             height: 20
           }
         ),
-        a
-      ] }) : /* @__PURE__ */ t.jsx(t.Fragment, { children: a })
+        o
+      ] }) : /* @__PURE__ */ t.jsx(t.Fragment, { children: o })
     }
   );
 };
-class _t extends Error {
+class ht extends Error {
 }
-_t.prototype.name = "InvalidTokenError";
-function ca(u) {
-  return decodeURIComponent(atob(u).replace(/(.)/g, (a, e) => {
+ht.prototype.name = "InvalidTokenError";
+function _o(d) {
+  return decodeURIComponent(atob(d).replace(/(.)/g, (o, e) => {
     let s = e.charCodeAt(0).toString(16).toUpperCase();
     return s.length < 2 && (s = "0" + s), "%" + s;
   }));
 }
-function la(u) {
-  let a = u.replace(/-/g, "+").replace(/_/g, "/");
-  switch (a.length % 4) {
+function po(d) {
+  let o = d.replace(/-/g, "+").replace(/_/g, "/");
+  switch (o.length % 4) {
     case 0:
       break;
     case 2:
-      a += "==";
+      o += "==";
       break;
     case 3:
-      a += "=";
+      o += "=";
       break;
     default:
       throw new Error("base64 string is not of the correct length");
   }
   try {
-    return ca(a);
+    return _o(o);
   } catch {
-    return atob(a);
+    return atob(o);
   }
 }
-function ra(u, a) {
-  if (typeof u != "string")
-    throw new _t("Invalid token specified: must be a string");
-  a || (a = {});
-  const e = a.header === !0 ? 0 : 1, s = u.split(".")[e];
+function go(d, o) {
+  if (typeof d != "string")
+    throw new ht("Invalid token specified: must be a string");
+  o || (o = {});
+  const e = o.header === !0 ? 0 : 1, s = d.split(".")[e];
   if (typeof s != "string")
-    throw new _t(`Invalid token specified: missing part #${e + 1}`);
+    throw new ht(`Invalid token specified: missing part #${e + 1}`);
   let i;
   try {
-    i = la(s);
+    i = po(s);
   } catch (c) {
-    throw new _t(`Invalid token specified: invalid base64 for part #${e + 1} (${c.message})`);
+    throw new ht(`Invalid token specified: invalid base64 for part #${e + 1} (${c.message})`);
   }
   try {
     return JSON.parse(i);
   } catch (c) {
-    throw new _t(`Invalid token specified: invalid json for part #${e + 1} (${c.message})`);
+    throw new ht(`Invalid token specified: invalid json for part #${e + 1} (${c.message})`);
   }
 }
-const Ja = (u) => {
-  const { shopping: a, signUp: e } = u, s = ft();
+const na = (d) => {
+  const { shopping: o, signUp: e } = d, s = ft();
   function i(l) {
     s(l);
   }
   const c = JSON.parse(localStorage.getItem("token") || "{}");
-  return /* @__PURE__ */ t.jsxs("div", { className: P.buttons, children: [
-    a && /* @__PURE__ */ t.jsx(da, {}),
+  return /* @__PURE__ */ t.jsxs("div", { className: B.buttons, children: [
+    o && /* @__PURE__ */ t.jsx(fo, {}),
     !c.data && /* @__PURE__ */ t.jsx(
-      jt,
+      vt,
       {
         onClick: () => i("/customer-dash"),
         type: "Secondary",
@@ -2398,7 +2458,7 @@ const Ja = (u) => {
       }
     ),
     !c.data && e && /* @__PURE__ */ t.jsx(
-      jt,
+      vt,
       {
         onClick: () => i("/customer-dash"),
         type: "Primary",
@@ -2408,44 +2468,46 @@ const Ja = (u) => {
         children: "Sign Up"
       }
     ),
-    c.data && /* @__PURE__ */ t.jsx(_a, { token: c.data })
+    c.data && /* @__PURE__ */ t.jsx(jo, { token: c.data })
   ] });
-}, da = () => {
-  const [u, a] = p.useState(!1), [e, s] = p.useState([]), { cart: i, getProducts: c } = Nt();
-  function l(m) {
-    for (let d = 0; d < i.parts.length; d++)
-      for (let T = 0; T < m.variants.length; T++)
-        if (i.parts[d].productVariantId === m.variants[d].id)
-          return i.parts[d].productVariantId;
+}, fo = () => {
+  const [d, o] = g.useState(!1), [e, s] = g.useState([]), { cart: i, getProducts: c } = It();
+  function l(p) {
+    for (let h = 0; h < i.parts.length; h++)
+      for (let f = 0; f < p.variants.length; f++)
+        if (i.parts[h].productVariantId === p.variants[h].id)
+          return i.parts[h].productVariantId;
   }
-  function o(m) {
-    for (let d = 0; d < i.parts.length; d++)
-      for (let T = 0; T < m.variants.length; T++)
-        if (i.parts[d].productVariantId === m.variants[d].id)
-          return i.parts[d].quantity;
+  function a(p) {
+    for (let h = 0; h < i.parts.length; h++)
+      for (let f = 0; f < p.variants.length; f++)
+        if (i.parts[h].productVariantId === p.variants[h].id)
+          return i.parts[h].quantity;
   }
-  p.useEffect(() => {
+  g.useEffect(() => {
     (async () => {
-      const d = i.parts.map((g) => String(g.productId)), x = (await c([...d])).map((g) => ({
-        ...g,
-        activeVariantId: l(g),
-        quantity: o(g)
+      const h = i.parts.map((C) => String(C.productId)), m = (await c([...h])).map((C) => ({
+        ...C,
+        activeVariantId: l(C),
+        quantity: a(C)
       }));
-      s(x);
+      s(m);
     })();
-  }, [i]);
-  function n(m) {
-    var d;
-    return !m || !(m != null && m.variants) ? !1 : (d = m.variants.find((T) => T.id === m.activeVariantId)) == null ? void 0 : d.subscriptionSettings;
+  }, [i.parts.length]);
+  function n(p) {
+    var h;
+    return !p || !(p != null && p.variants) ? !1 : (h = p.variants.find((f) => f.id === p.activeVariantId)) == null ? void 0 : h.subscriptionSettings;
   }
   const r = i.parts.length > 0 && e.length > 0 && !n(e[0]);
+  console.log(i.parts.length > 0, e.length > 0, !n(e[0]));
+  const [x, $] = g.useState(!1);
   return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
     /* @__PURE__ */ t.jsxs(
       "div",
       {
-        className: P.button,
-        onClick: (m) => {
-          m.stopPropagation(), window.location.pathname !== "/admin/builder" && a(!0);
+        className: B.button,
+        onClick: (p) => {
+          p.stopPropagation(), o(!0), $(!0);
         },
         children: [
           /* @__PURE__ */ t.jsx(
@@ -2455,93 +2517,106 @@ const Ja = (u) => {
               fill: "var(--icon-primary)"
             }
           ),
-          r && /* @__PURE__ */ t.jsx("div", { className: P.shoppingCount, children: i.parts.length })
+          r && /* @__PURE__ */ t.jsx("div", { className: B.shoppingCount, children: i.parts.length })
         ]
       }
     ),
-    u && /* @__PURE__ */ t.jsx(St, { close: a, children: /* @__PURE__ */ t.jsx(
-      ua,
+    d && /* @__PURE__ */ t.jsx(
+      St,
       {
-        activeProducts: e,
-        isCartNotEmpty: r
+        close: () => {
+          $(!1), setTimeout(() => {
+            o(!1);
+          }, 300);
+        },
+        children: /* @__PURE__ */ t.jsx(
+          xo,
+          {
+            activeProducts: e,
+            isCartNotEmpty: r,
+            isOpen: x
+          }
+        )
       }
-    ) })
+    )
   ] });
-}, ua = (u) => {
-  const { activeProducts: a, isCartNotEmpty: e } = u, { cart: s, reset: i, getTotalAndDiscount: c, updateQuantityOfProduct: l } = Nt(), o = ft();
-  function n(d) {
-    o(d);
+}, xo = (d) => {
+  const { activeProducts: o, isCartNotEmpty: e, isOpen: s } = d, { cart: i, reset: c, getTotalAndDiscount: l, updateQuantityOfProduct: a } = It(), n = ft();
+  function r(p) {
+    n(p);
   }
-  function r(d) {
-    l({
-      productId: d.id,
-      productVariantId: d.activeVariantId,
-      quantity: d.quantity + 1
+  function x(p) {
+    a({
+      productId: p.id,
+      productVariantId: p.activeVariantId,
+      quantity: p.quantity + 1
     });
   }
-  function m(d) {
-    l({
-      productId: d.id,
-      productVariantId: d.activeVariantId,
-      quantity: d.quantity - 1
+  function $(p) {
+    a({
+      productId: p.id,
+      productVariantId: p.activeVariantId,
+      quantity: p.quantity - 1
     });
   }
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: P.modal,
-      onClick: (d) => d.stopPropagation(),
+      className: V(B.modal, {
+        [B.closing]: !s
+      }),
+      onClick: (p) => p.stopPropagation(),
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: P.top, children: [
-          /* @__PURE__ */ t.jsxs("div", { className: P.info, children: [
-            /* @__PURE__ */ t.jsx("span", { className: P.title, children: "Cart" }),
-            e && /* @__PURE__ */ t.jsx("div", { className: P.count, children: s.parts.length })
+        /* @__PURE__ */ t.jsxs("div", { className: B.top, children: [
+          /* @__PURE__ */ t.jsxs("div", { className: B.info, children: [
+            /* @__PURE__ */ t.jsx("span", { className: B.title, children: "Cart" }),
+            e && /* @__PURE__ */ t.jsx("div", { className: B.count, children: i.parts.length })
           ] }),
           /* @__PURE__ */ t.jsx(
             "button",
             {
-              className: F(P.clear, {
-                [P.activeClear]: e
+              className: V(B.clear, {
+                [B.activeClear]: e
               }),
               disabled: !e,
-              onClick: () => i(),
+              onClick: c,
               children: "Clear all"
             }
           )
         ] }),
-        e ? /* @__PURE__ */ t.jsxs("div", { className: P.cart, children: [
-          /* @__PURE__ */ t.jsx("div", { className: P.products, children: a.map((d) => /* @__PURE__ */ t.jsxs(
+        e ? /* @__PURE__ */ t.jsxs("div", { className: B.cart, children: [
+          /* @__PURE__ */ t.jsx("div", { className: B.products, children: o.map((p) => /* @__PURE__ */ t.jsxs(
             "div",
             {
-              className: P.product,
+              className: B.product,
               children: [
-                /* @__PURE__ */ t.jsxs("div", { className: P.productInfo, children: [
+                /* @__PURE__ */ t.jsxs("div", { className: B.productInfo, children: [
                   /* @__PURE__ */ t.jsx(
                     "img",
                     {
-                      src: `https://imagedelivery.net/${d.images[0].cfId}/w=500`,
+                      src: `https://imagedelivery.net/${p.images[0].cfId}/w=500`,
                       alt: "image",
                       width: "100%",
                       height: "100%",
-                      className: P.image
+                      className: B.image
                     }
                   ),
-                  /* @__PURE__ */ t.jsxs("div", { className: P.content, children: [
-                    /* @__PURE__ */ t.jsx("div", { className: P.name, children: d.name }),
-                    /* @__PURE__ */ t.jsxs("div", { className: P.price, children: [
+                  /* @__PURE__ */ t.jsxs("div", { className: B.content, children: [
+                    /* @__PURE__ */ t.jsx("div", { className: B.name, children: p.name }),
+                    /* @__PURE__ */ t.jsxs("div", { className: B.price, children: [
                       "$",
-                      d.variants.find((T) => T.id === d.activeVariantId).price.amount * ((d == null ? void 0 : d.quantity) || 1)
+                      p.variants.find((h) => h.id === p.activeVariantId).price.amount * ((p == null ? void 0 : p.quantity) || 1)
                     ] })
                   ] })
                 ] }),
-                /* @__PURE__ */ t.jsxs("div", { className: P.productButtons, children: [
+                /* @__PURE__ */ t.jsxs("div", { className: B.productButtons, children: [
                   /* @__PURE__ */ t.jsx(
                     "div",
                     {
                       onClick: () => {
-                        d.quantity !== 1 && m(d);
+                        p.quantity !== 1 && $(p);
                       },
-                      className: P.productButton,
+                      className: B.productButton,
                       children: /* @__PURE__ */ t.jsx(
                         b,
                         {
@@ -2553,12 +2628,12 @@ const Ja = (u) => {
                       )
                     }
                   ),
-                  /* @__PURE__ */ t.jsx("div", { className: P.productCount, children: d.quantity }),
+                  /* @__PURE__ */ t.jsx("div", { className: B.productCount, children: p.quantity }),
                   /* @__PURE__ */ t.jsx(
                     "div",
                     {
-                      onClick: () => r(d),
-                      className: P.productButton,
+                      onClick: () => x(p),
+                      className: B.productButton,
                       children: /* @__PURE__ */ t.jsx(
                         b,
                         {
@@ -2573,11 +2648,11 @@ const Ja = (u) => {
                 ] })
               ]
             },
-            d.id
+            p.id
           )) }),
-          /* @__PURE__ */ t.jsxs("div", { className: P.bottom, children: [
-            /* @__PURE__ */ t.jsxs("div", { className: P.subtotal, children: [
-              /* @__PURE__ */ t.jsxs("div", { className: P.block, children: [
+          /* @__PURE__ */ t.jsxs("div", { className: B.bottom, children: [
+            /* @__PURE__ */ t.jsxs("div", { className: B.subtotal, children: [
+              /* @__PURE__ */ t.jsxs("div", { className: B.block, children: [
                 /* @__PURE__ */ t.jsx("span", { children: "Subtotal" }),
                 /* @__PURE__ */ t.jsx(
                   b,
@@ -2589,71 +2664,77 @@ const Ja = (u) => {
                   }
                 )
               ] }),
-              /* @__PURE__ */ t.jsxs("div", { className: P.total, children: [
+              /* @__PURE__ */ t.jsxs("div", { className: B.total, children: [
                 "$",
-                c().total
+                l().total
               ] })
             ] }),
-            /* @__PURE__ */ t.jsx(jt, { onClick: () => n("/checkout"), children: "Checkout" })
+            /* @__PURE__ */ t.jsx(vt, { onClick: () => r("/checkout"), children: "Checkout" })
           ] })
-        ] }) : /* @__PURE__ */ t.jsx(ma, {})
+        ] }) : /* @__PURE__ */ t.jsx(bo, {})
       ]
     }
   );
-}, ma = () => /* @__PURE__ */ t.jsxs("div", { className: P.empty, children: [
-  /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(b, { name: "Handbag" }) }),
-  /* @__PURE__ */ t.jsx("span", { children: "Your cart is empty" }),
+}, bo = () => /* @__PURE__ */ t.jsxs("div", { className: B.empty, children: [
+  /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
+    b,
+    {
+      name: "Handbag",
+      fill: "var(--icon-secondary)"
+    }
+  ) }),
+  /* @__PURE__ */ t.jsx("span", { children: "Empty Cart" }),
   /* @__PURE__ */ t.jsxs("span", { children: [
-    "Check out the store's products and add them",
+    "You don’t have any items in your shopping cart yet,",
     " ",
     /* @__PURE__ */ t.jsx(
       "a",
       {
         href: "/products",
-        className: P.link,
-        children: "here"
+        className: B.link,
+        children: "view products"
       }
     )
   ] })
-] }), _a = ({ token: u }) => {
-  const [a, e] = p.useState("test-email@gmail.com"), s = ft();
-  p.useEffect(() => {
+] }), jo = ({ token: d }) => {
+  const [o, e] = g.useState("test-email@gmail.com"), s = ft();
+  g.useEffect(() => {
     (async () => {
-      const l = ra(u);
+      const l = go(d);
       e(l.email);
     })();
-  }, [u]);
+  }, [d]);
   function i(c) {
     s(c);
   }
   return /* @__PURE__ */ t.jsx(
     "div",
     {
-      className: P.userInfo,
+      className: B.userInfo,
       onClick: () => i("/customer-dash"),
-      children: /* @__PURE__ */ t.jsx("div", { children: a || "test-email@gmail.com" })
+      children: /* @__PURE__ */ t.jsx("div", { children: o || "test-email@gmail.com" })
     }
   );
-}, ha = "_share_11u0d_1", pa = "_modal_11u0d_8", ga = "_header_11u0d_14", fa = "_socials_11u0d_24", xa = "_social_11u0d_24", ba = "_copy_11u0d_34", va = "_title_11u0d_41", ja = "_copyWrapper_11u0d_47", ya = "_copyText_11u0d_56", nt = {
-  share: ha,
-  modal: pa,
-  header: ga,
-  socials: fa,
-  social: xa,
-  copy: ba,
-  title: va,
-  copyWrapper: ja,
-  copyText: ya
-}, Qa = () => {
-  const { isOpenModal: u, setIsOpenModal: a } = Pt();
+}, vo = "_share_11u0d_1", yo = "_modal_11u0d_8", ko = "_header_11u0d_14", $o = "_socials_11u0d_24", No = "_social_11u0d_24", Io = "_copy_11u0d_34", wo = "_title_11u0d_41", Co = "_copyWrapper_11u0d_47", Bo = "_copyText_11u0d_56", it = {
+  share: vo,
+  modal: yo,
+  header: ko,
+  socials: $o,
+  social: No,
+  copy: Io,
+  title: wo,
+  copyWrapper: Co,
+  copyText: Bo
+}, ia = () => {
+  const { isOpenModal: d, setIsOpenModal: o } = Tt();
   function e() {
-    a(!0);
+    o(!0);
   }
   return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
     /* @__PURE__ */ t.jsx(
-      it,
+      ot,
       {
-        className: nt.share,
+        className: it.share,
         onClick: (s) => {
           s.stopPropagation(), e();
         },
@@ -2668,10 +2749,10 @@ const Ja = (u) => {
         )
       }
     ),
-    u && /* @__PURE__ */ t.jsx(St, { close: a, children: /* @__PURE__ */ t.jsx(ka, {}) })
+    d && /* @__PURE__ */ t.jsx(St, { close: o, children: /* @__PURE__ */ t.jsx(So, {}) })
   ] });
-}, ka = () => {
-  const { setIsOpenModal: u } = Pt(), { notification: a, setNotification: e } = Dt(), s = window.location.href;
+}, So = () => {
+  const { setIsOpenModal: d } = Tt(), { notification: o, setNotification: e } = Dt(), s = window.location.href;
   function i() {
     navigator.clipboard.writeText(s), e({
       message: "Link copied to clipboard",
@@ -2681,26 +2762,26 @@ const Ja = (u) => {
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: nt.modal,
+      className: it.modal,
       onClick: (c) => c.stopPropagation(),
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: nt.header, children: [
-          /* @__PURE__ */ t.jsx("div", { className: nt.title, children: "Share this Post" }),
+        /* @__PURE__ */ t.jsxs("div", { className: it.header, children: [
+          /* @__PURE__ */ t.jsx("div", { className: it.title, children: "Copy Product Link" }),
           /* @__PURE__ */ t.jsx(
             b,
             {
               name: "X",
               fill: "#757575",
-              onClick: () => u(!1),
+              onClick: () => d(!1),
               hoverable: !0
             }
           )
         ] }),
-        /* @__PURE__ */ t.jsxs("div", { className: nt.copyWrapper, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: it.copyWrapper, children: [
           /* @__PURE__ */ t.jsx(
             "div",
             {
-              className: F(nt.copy, nt.copyText),
+              className: V(it.copy, it.copyText),
               onClick: i,
               children: s
             }
@@ -2709,35 +2790,35 @@ const Ja = (u) => {
             "div",
             {
               onClick: i,
-              className: nt.copy,
-              children: a ? /* @__PURE__ */ t.jsx(b, { name: "Check" }) : /* @__PURE__ */ t.jsx(b, { name: "Copy" })
+              className: it.copy,
+              children: o ? /* @__PURE__ */ t.jsx(b, { name: "Check" }) : /* @__PURE__ */ t.jsx(b, { name: "Copy" })
             }
           )
         ] })
       ]
     }
   );
-}, $a = "_accordion_1s1lq_1", wa = "_header_1s1lq_9", Na = "_icon_1s1lq_18", Ia = "_open_1s1lq_21", Ca = "_content_1s1lq_25", mt = {
-  accordion: $a,
-  header: wa,
-  icon: Na,
-  open: Ia,
-  content: Ca
-}, Ka = ({ title: u, content: a }) => {
-  const [e, s] = p.useState(!1), [i, c] = p.useState(0), l = p.useRef(null), o = () => {
+}, To = "_accordion_1s1lq_1", Po = "_header_1s1lq_9", Ao = "_icon_1s1lq_18", qo = "_open_1s1lq_21", Oo = "_content_1s1lq_25", mt = {
+  accordion: To,
+  header: Po,
+  icon: Ao,
+  open: qo,
+  content: Oo
+}, oa = ({ title: d, content: o }) => {
+  const [e, s] = g.useState(!1), [i, c] = g.useState(0), l = g.useRef(null), a = () => {
     s(!e);
   };
-  return p.useEffect(() => {
+  return g.useEffect(() => {
     l.current && c(e ? l.current.scrollHeight : 0);
   }, [e]), /* @__PURE__ */ t.jsxs("div", { className: mt.accordion, children: [
     /* @__PURE__ */ t.jsxs(
       "div",
       {
         className: mt.header,
-        onClick: o,
+        onClick: a,
         children: [
-          /* @__PURE__ */ t.jsx("h5", { id: "h5", children: u }),
-          /* @__PURE__ */ t.jsx("div", { className: F(mt.icon, { [mt.open]: e }), children: /* @__PURE__ */ t.jsx(b, { name: "CaretDown" }) })
+          /* @__PURE__ */ t.jsx("h5", { id: "h5", children: d }),
+          /* @__PURE__ */ t.jsx("div", { className: V(mt.icon, { [mt.open]: e }), children: /* @__PURE__ */ t.jsx(b, { name: "CaretDown" }) })
         ]
       }
     ),
@@ -2747,63 +2828,63 @@ const Ja = (u) => {
         ref: l,
         className: mt.content,
         style: { height: `${i}px` },
-        children: /* @__PURE__ */ t.jsx("p", { id: "p", children: a })
+        children: /* @__PURE__ */ t.jsx("p", { id: "p", children: o })
       }
     )
   ] });
-}, Ba = "_wrapper_1r14x_1", Sa = "_label_1r14x_9", Pa = "_input_1r14x_18", Ta = "_required_1r14x_35", Aa = "_paddingless_1r14x_39", Oa = "_content_1r14x_43", qa = "_borderless_1r14x_58", Da = "_rightIcon_1r14x_63", st = {
-  wrapper: Ba,
-  label: Sa,
-  input: Pa,
-  required: Ta,
-  paddingless: Aa,
-  content: Oa,
-  borderless: qa,
-  rightIcon: Da
-}, Za = (u) => {
+}, Do = "_wrapper_1r14x_1", Eo = "_label_1r14x_9", Lo = "_input_1r14x_18", Ro = "_required_1r14x_35", Mo = "_paddingless_1r14x_39", Ho = "_content_1r14x_43", zo = "_borderless_1r14x_58", Vo = "_rightIcon_1r14x_63", nt = {
+  wrapper: Do,
+  label: Eo,
+  input: Lo,
+  required: Ro,
+  paddingless: Mo,
+  content: Ho,
+  borderless: zo,
+  rightIcon: Vo
+}, aa = (d) => {
   const {
-    onChange: a,
+    onChange: o,
     style: e,
     label: s,
     value: i,
     type: c,
     min: l,
-    max: o,
+    max: a,
     placeholder: n,
     disabled: r = !1,
-    required: m = !1,
-    regex: d,
-    paddingless: T = !1,
-    borderless: x = !1,
-    editable: g = !1,
-    isSearch: h = !1
-  } = u, { themeSettings: O } = Bt(), { inputs: q } = O, [v, E] = p.useState(!1);
-  function C(y, M) {
-    if (y.startsWith("#")) {
-      let N, L, R;
-      return y.length === 7 ? (N = parseInt(y.slice(1, 3), 16), L = parseInt(y.slice(3, 5), 16), R = parseInt(y.slice(5, 7), 16)) : y.length === 4 && (N = parseInt(y[1] + y[1], 16), L = parseInt(y[2] + y[2], 16), R = parseInt(y[3] + y[3], 16)), `rgba(${N}, ${L}, ${R}, ${M})`;
+    required: x = !1,
+    regex: $,
+    paddingless: p = !1,
+    borderless: h = !1,
+    editable: f = !1,
+    isSearch: m = !1
+  } = d, { themeSettings: C } = Bt(), { inputs: q } = C, [j, E] = g.useState(!1);
+  function S(u, O) {
+    if (u.startsWith("#")) {
+      let L, I, R;
+      return u.length === 7 ? (L = parseInt(u.slice(1, 3), 16), I = parseInt(u.slice(3, 5), 16), R = parseInt(u.slice(5, 7), 16)) : u.length === 4 && (L = parseInt(u[1] + u[1], 16), I = parseInt(u[2] + u[2], 16), R = parseInt(u[3] + u[3], 16)), `rgba(${L}, ${I}, ${R}, ${O})`;
     }
-    const k = {
+    const y = {
       black: "#000000",
       white: "#ffffff",
       red: "#ff0000",
       green: "#00ff00",
       blue: "#0000ff"
       // Можно добавить больше цветов
-    }[y.toLowerCase()];
-    return k ? C(k, M) : y;
+    }[u.toLowerCase()];
+    return y ? S(y, O) : u;
   }
-  function B(y) {
-    return Number(y) < 0 ? String(l) : y;
+  function T(u) {
+    return Number(u) < 0 ? String(l) : u;
   }
-  function f(y) {
-    return !m || !d ? !0 : new RegExp(d).test(y);
+  function M(u) {
+    return !x || !$ ? !0 : new RegExp($).test(u);
   }
-  return /* @__PURE__ */ t.jsxs("div", { className: st.wrapper, children: [
+  return /* @__PURE__ */ t.jsxs("div", { className: nt.wrapper, children: [
     s && /* @__PURE__ */ t.jsx(
       "label",
       {
-        className: st.label,
+        className: nt.label,
         htmlFor: s,
         children: s
       }
@@ -2811,11 +2892,11 @@ const Ja = (u) => {
     /* @__PURE__ */ t.jsxs(
       "div",
       {
-        className: st.content,
+        className: nt.content,
         style: {
           paddingRight: q.general.height + 15,
           ...e,
-          backgroundColor: C(q.field.color, q.field.opacity / 100)
+          backgroundColor: S(q.field.color, q.field.opacity / 100)
         },
         children: [
           /* @__PURE__ */ t.jsx(
@@ -2823,28 +2904,28 @@ const Ja = (u) => {
             {
               id: s,
               type: c || "text",
-              onChange: (y) => {
-                if (c === "text") a(y.target.value);
+              onChange: (u) => {
+                if (c === "text") o(u.target.value);
                 else {
-                  const M = B(y.target.value);
-                  a(M);
+                  const O = T(u.target.value);
+                  o(O);
                 }
               },
               value: i,
               autoComplete: "off",
               placeholder: n || "Type something...",
-              className: F(st.input, {
-                [st.required]: v && m && !f(i),
-                [st.paddingless]: T,
-                [st.borderless]: x
+              className: V(nt.input, {
+                [nt.required]: j && x && !M(i),
+                [nt.paddingless]: p,
+                [nt.borderless]: h
               }),
               min: c === "number" ? l : void 0,
-              max: c === "number" ? o : void 0,
+              max: c === "number" ? a : void 0,
               disabled: r,
               onFocus: () => E(!0)
             }
           ),
-          h && /* @__PURE__ */ t.jsx("div", { className: st.rightIcon, children: /* @__PURE__ */ t.jsx(
+          m && /* @__PURE__ */ t.jsx("div", { className: nt.rightIcon, children: /* @__PURE__ */ t.jsx(
             b,
             {
               name: "MagnifyingGlass",
@@ -2853,7 +2934,7 @@ const Ja = (u) => {
               height: q.general.height
             }
           ) }),
-          g && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
+          f && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
             b,
             {
               name: "Sliders",
@@ -2866,13 +2947,13 @@ const Ja = (u) => {
       }
     )
   ] });
-}, Ea = "_wrapper_st58d_1", La = "_label_st58d_10", Ra = "_textarea_st58d_18", Ma = "_length_st58d_33", gt = {
-  wrapper: Ea,
-  label: La,
-  textarea: Ra,
-  length: Ma
-}, to = (u) => {
-  const { onChange: a, label: e, value: s, maxLength: i, placeholder: c = "Type something..." } = u, [l, o] = p.useState(s.length);
+}, Fo = "_wrapper_st58d_1", Uo = "_label_st58d_10", Yo = "_textarea_st58d_18", Go = "_length_st58d_33", gt = {
+  wrapper: Fo,
+  label: Uo,
+  textarea: Yo,
+  length: Go
+}, ca = (d) => {
+  const { onChange: o, label: e, value: s, maxLength: i, placeholder: c = "Type something..." } = d, [l, a] = g.useState(s.length);
   return /* @__PURE__ */ t.jsxs("div", { className: gt.wrapper, children: [
     e && /* @__PURE__ */ t.jsx(
       "label",
@@ -2888,7 +2969,7 @@ const Ja = (u) => {
         id: e,
         defaultValue: s,
         onChange: (n) => {
-          o(n.target.value.length), a(n.target.value);
+          a(n.target.value.length), o(n.target.value);
         },
         placeholder: c,
         className: gt.textarea,
@@ -2903,34 +2984,34 @@ const Ja = (u) => {
   ] });
 };
 export {
-  Ka as Accordion,
-  jt as Button,
-  gn as ButtonTypeSettings,
-  Ga as ButtonsSettings,
-  Ua as CategorySettings,
-  ht as ChooseImage,
-  no as ChooseImageModal,
-  ma as EmptyCart,
-  Ya as FormSettings,
-  Ja as HeaderButtons,
+  oa as Accordion,
+  vt as Button,
+  jn as ButtonTypeSettings,
+  ta as ButtonsSettings,
+  Ko as CategorySettings,
+  _t as ChooseImage,
+  da as ChooseImageModal,
+  bo as EmptyCart,
+  Zo as FormSettings,
+  na as HeaderButtons,
   b as Icon,
   W as InputSettings,
-  Za as InputUI,
-  Ae as ItemsSettings,
-  Fa as LayoutSettings,
-  Wa as ListingSelector,
-  io as Loader,
+  aa as InputUI,
+  qe as ItemsSettings,
+  Qo as LayoutSettings,
+  ea as ListingSelector,
+  ua as Loader,
   St as Modal,
-  Xa as ProductOptions,
-  It as RangeSelector,
+  sa as ProductOptions,
+  wt as RangeSelector,
   Z as Select,
-  Qa as ShareLink,
-  da as ShoppingButton,
-  ua as ShoppingModalCart,
+  ia as ShareLink,
+  fo as ShoppingButton,
+  xo as ShoppingModalCart,
   K as Switch,
   At as TextSettings,
   Ct as TextareaSettings,
-  to as TextareaUI,
-  Tt as TypesText,
-  _a as UserInfo
+  ca as TextareaUI,
+  Pt as TypesText,
+  jo as UserInfo
 };