@billgangcom/theme-lib 1.44.2 → 1.44.3

package/dist/ui.es.js

@@ -1,21 +1,21 @@
-import { j as t, I as b, c as V, a as K, S as et, T as qt, b as tt, C as ft, u as $t, d as Nt, D as wt, e as St, v as Ct, B as lt, f as mt, P as Bt, g as Tt, h as Pt, i as Ft, s as Vt, k as Et, l as jt, m as At, M as Mt, n as Ut, o as Dt, p as Yt } from "./index-CbgVRiD5.js";
-import { q as Ua, L as Da } from "./index-CbgVRiD5.js";
-import x from "react";
+import { j as t, I as b, c as Y, a as tt, S as st, T as Et, b as et, C as bt, u as yt, d as kt, D as $t, e as It, v as Nt, B as ot, f as ht, P as wt, g as Ct, h as St, i as Vt, s as Yt, k as Dt, l as Bt, m as Ot, M as Mt, n as Ut, o as Ht, p as Gt } from "./index-FNbiNtjB.js";
+import { q as uc, L as _c } from "./index-FNbiNtjB.js";
+import f from "react";
 import "@phosphor-icons/react";
-const Gt = "_wrapper_1ibay_2", Xt = "_alignmentBlock_1ibay_8", Wt = "_title_1ibay_15", Jt = "_subtitle_1ibay_22", Qt = "_alignmentContent_1ibay_29", Kt = "_alignments_1ibay_37", Zt = "_alignment_1ibay_8", te = "_circle_1ibay_60", ee = "_paddings_1ibay_67", se = "_padding_1ibay_67", ne = "_active_1ibay_91", ie = "_input_1ibay_98", J = {
-  wrapper: Gt,
-  alignmentBlock: Xt,
-  title: Wt,
-  subtitle: Jt,
-  alignmentContent: Qt,
-  alignments: Kt,
-  alignment: Zt,
-  circle: te,
-  paddings: ee,
-  padding: se,
-  active: ne,
-  input: ie
-}, oe = [
+const Xt = "_wrapper_1ibay_2", Wt = "_alignmentBlock_1ibay_8", Jt = "_title_1ibay_15", Qt = "_subtitle_1ibay_22", Kt = "_alignmentContent_1ibay_29", Zt = "_alignments_1ibay_37", te = "_alignment_1ibay_8", ee = "_circle_1ibay_60", se = "_paddings_1ibay_67", ne = "_padding_1ibay_67", ie = "_active_1ibay_91", oe = "_input_1ibay_98", K = {
+  wrapper: Xt,
+  alignmentBlock: Wt,
+  title: Jt,
+  subtitle: Qt,
+  alignmentContent: Kt,
+  alignments: Zt,
+  alignment: te,
+  circle: ee,
+  paddings: se,
+  padding: ne,
+  active: ie,
+  input: oe
+}, ae = [
   "topLeft",
   "top",
   "topRight",
@@ -25,10 +25,10 @@ const Gt = "_wrapper_1ibay_2", Xt = "_alignmentBlock_1ibay_8", Wt = "_title_1iba
   "bottomLeft",
   "bottom",
   "bottomRight"
-], ae = ["left", "top", "right", "bottom"], ka = (d) => {
-  const { alignment: a, padding: e, setPadding: s, setAlignment: n } = d;
-  function c(h) {
-    switch (h) {
+], ce = ["left", "top", "right", "bottom"], Wa = (u) => {
+  const { alignment: a, padding: e, setPadding: s, setAlignment: i } = u;
+  function c(p) {
+    switch (p) {
       case "left":
       case "topLeft":
       case "bottomLeft":
@@ -45,8 +45,8 @@ const Gt = "_wrapper_1ibay_2", Xt = "_alignmentBlock_1ibay_8", Wt = "_title_1iba
         return "TextAlignCenter";
     }
   }
-  function r(h) {
-    switch (h) {
+  function l(p) {
+    switch (p) {
       case "left":
         return "AlignLeft";
       case "right":
@@ -57,28 +57,28 @@ const Gt = "_wrapper_1ibay_2", Xt = "_alignmentBlock_1ibay_8", Wt = "_title_1iba
         return "AlignBottom";
     }
   }
-  const [o, i] = x.useState(null), [l, j] = x.useState(null);
-  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: oe.map((h) => /* @__PURE__ */ t.jsxs(
+  const [o, n] = f.useState(null), [d, j] = f.useState(null);
+  return /* @__PURE__ */ t.jsxs("div", { className: K.layout, children: [
+    /* @__PURE__ */ t.jsx("h3", { className: K.title, children: "Layout" }),
+    /* @__PURE__ */ t.jsxs("div", { className: K.alignmentBlock, children: [
+      /* @__PURE__ */ t.jsx("h5", { className: K.subtitle, children: "Alignment" }),
+      /* @__PURE__ */ t.jsxs("div", { className: K.alignmentContent, children: [
+        /* @__PURE__ */ t.jsx("div", { className: K.alignments, children: ae.map((p) => /* @__PURE__ */ t.jsxs(
           "div",
           {
             onClick: () => {
-              n(h);
+              i(p);
             },
-            className: J.alignment,
+            className: K.alignment,
             onMouseEnter: () => {
-              i(h);
+              n(p);
             },
             onMouseLeave: () => {
-              i(null);
+              n(null);
             },
             children: [
-              h !== a && o !== h && /* @__PURE__ */ t.jsx("div", { className: J.circle }),
-              h !== a && o === h && /* @__PURE__ */ t.jsx(
+              p !== a && o !== p && /* @__PURE__ */ t.jsx("div", { className: K.circle }),
+              p !== a && o === p && /* @__PURE__ */ t.jsx(
                 b,
                 {
                   name: c(o),
@@ -87,7 +87,7 @@ const Gt = "_wrapper_1ibay_2", Xt = "_alignmentBlock_1ibay_8", Wt = "_title_1iba
                   height: 22
                 }
               ),
-              h === a && /* @__PURE__ */ t.jsx(
+              p === a && /* @__PURE__ */ t.jsx(
                 b,
                 {
                   name: c(a),
@@ -98,16 +98,16 @@ const Gt = "_wrapper_1ibay_2", Xt = "_alignmentBlock_1ibay_8", Wt = "_title_1iba
               )
             ]
           },
-          h
+          p
         )) }),
-        /* @__PURE__ */ t.jsx("div", { className: J.paddings, children: ae.map((h) => /* @__PURE__ */ t.jsxs(
+        /* @__PURE__ */ t.jsx("div", { className: K.paddings, children: ce.map((p) => /* @__PURE__ */ t.jsxs(
           "label",
           {
-            className: V(J.padding, {
-              [J.active]: l === h
+            className: Y(K.padding, {
+              [K.active]: d === p
             }),
             onFocus: () => {
-              j(h);
+              j(p);
             },
             onBlur: () => {
               j(null);
@@ -116,19 +116,19 @@ const Gt = "_wrapper_1ibay_2", Xt = "_alignmentBlock_1ibay_8", Wt = "_title_1iba
               /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
                 b,
                 {
-                  name: r(h),
+                  name: l(p),
                   width: 20,
                   height: 20
                 }
               ) }),
               /* @__PURE__ */ t.jsx(
-                K,
+                tt,
                 {
                   type: "number",
-                  value: String(e[h]),
-                  onChange: (p) => s({
+                  value: String(e[p]),
+                  onChange: (r) => s({
                     ...e,
-                    [h]: Number(p)
+                    [p]: Number(r)
                   }),
                   paddingless: !0,
                   borderless: !0
@@ -136,26 +136,26 @@ const Gt = "_wrapper_1ibay_2", Xt = "_alignmentBlock_1ibay_8", Wt = "_title_1iba
               )
             ]
           },
-          h
+          p
         )) })
       ] })
     ] })
   ] });
-}, ce = "_title_1jkiw_1", le = "_subtitle_1jkiw_5", re = "_header_1jkiw_12", de = "_text_1jkiw_13", ue = "_top_1jkiw_20", _e = "_itemsBlock_1jkiw_29", ht = {
-  title: ce,
-  subtitle: le,
-  header: re,
-  text: de,
-  top: ue,
-  itemsBlock: _e
-}, me = "_typeTexts_167ez_1", he = "_block_167ez_8", pe = "_active_167ez_25", kt = {
-  typeTexts: me,
-  block: he,
-  active: pe
-}, xe = ["bold", "italic", "underline", "strike-through", "code"], Ht = (d) => {
-  const { typesText: a, setTypesText: e } = d;
-  function s(n) {
-    switch (n) {
+}, le = "_title_1jkiw_1", re = "_subtitle_1jkiw_5", de = "_header_1jkiw_12", ue = "_text_1jkiw_13", _e = "_top_1jkiw_20", me = "_itemsBlock_1jkiw_29", pt = {
+  title: le,
+  subtitle: re,
+  header: de,
+  text: ue,
+  top: _e,
+  itemsBlock: me
+}, he = "_typeTexts_167ez_1", pe = "_block_167ez_8", fe = "_active_167ez_25", Pt = {
+  typeTexts: he,
+  block: pe,
+  active: fe
+}, ge = ["bold", "italic", "underline", "strike-through", "code"], Rt = (u) => {
+  const { typesText: a, setTypesText: e } = u;
+  function s(i) {
+    switch (i) {
       case "bold":
         return "TextB";
       case "italic":
@@ -168,33 +168,33 @@ const Gt = "_wrapper_1ibay_2", Xt = "_alignmentBlock_1ibay_8", Wt = "_title_1iba
         return "TextUnderline";
     }
   }
-  return /* @__PURE__ */ t.jsx("div", { className: kt.typeTexts, children: xe.map((n) => /* @__PURE__ */ t.jsx(
+  return /* @__PURE__ */ t.jsx("div", { className: Pt.typeTexts, children: ge.map((i) => /* @__PURE__ */ t.jsx(
     "div",
     {
-      className: V(kt.block, {
-        [kt.active]: a.includes(n)
+      className: Y(Pt.block, {
+        [Pt.active]: a.includes(i)
       }),
       onClick: () => {
         const c = [...a];
-        if (c.includes(n)) {
-          const r = c.filter((o) => o !== n);
-          e(r);
+        if (c.includes(i)) {
+          const l = c.filter((o) => o !== i);
+          e(l);
         } else
-          c.push(n), e(c);
+          c.push(i), e(c);
       },
       children: /* @__PURE__ */ t.jsx(
         b,
         {
-          name: s(n),
-          fill: a.includes(n) ? "#252525" : "#757575",
+          name: s(i),
+          fill: a.includes(i) ? "#252525" : "#757575",
           width: 20,
           height: 20
         }
       )
     },
-    String(n)
+    String(i)
   )) });
-}, pt = {
+}, ft = {
   h1: "Heading 1",
   h2: "Heading 2",
   h3: "Heading 3",
@@ -202,256 +202,269 @@ const Gt = "_wrapper_1ibay_2", Xt = "_alignmentBlock_1ibay_8", Wt = "_title_1iba
   h5: "Heading 5",
   h6: "Heading 6",
   p: "Paragraph"
-}, Lt = (d) => {
+}, Lt = (u) => {
   const {
     typesText: a,
     isActiveText: e,
     setIsActiveText: s,
-    text: n,
+    text: i,
     setText: c,
-    setTypesText: r,
+    setTypesText: l,
     title: o,
-    subtitle: i = "Items",
-    typeFont: l,
+    subtitle: n = "Items",
+    typeFont: d,
     setTypeFont: j
-  } = d;
-  return /* @__PURE__ */ t.jsxs("div", { className: ht.text, children: [
-    (o || e !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: ht.top, children: [
-      o && /* @__PURE__ */ t.jsx("h3", { className: ht.title, children: o }),
+  } = u;
+  return /* @__PURE__ */ t.jsxs("div", { className: pt.text, children: [
+    (o || e !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: pt.top, children: [
+      o && /* @__PURE__ */ t.jsx("h3", { className: pt.title, children: o }),
       e !== void 0 && s && /* @__PURE__ */ t.jsx(
-        et,
+        st,
         {
           current: e,
-          onChange: (h) => s(h)
+          onChange: (p) => s(p)
         }
       )
     ] }),
-    /* @__PURE__ */ t.jsxs("div", { className: ht.itemsBlock, children: [
-      /* @__PURE__ */ t.jsx("h5", { className: ht.subtitle, children: i }),
+    /* @__PURE__ */ t.jsxs("div", { className: pt.itemsBlock, children: [
+      /* @__PURE__ */ t.jsx("h5", { className: pt.subtitle, children: n }),
       /* @__PURE__ */ t.jsx(
-        qt,
+        Et,
         {
-          onChange: (h) => c(h),
-          value: n,
+          onChange: (p) => c(p),
+          value: i,
           maxLength: 150
         }
       ),
       /* @__PURE__ */ t.jsx(
-        Ht,
+        Rt,
         {
           typesText: a,
-          setTypesText: r
+          setTypesText: l
         }
       ),
       /* @__PURE__ */ t.jsx(
-        tt,
+        et,
         {
           label: "Type Text",
-          options: Object.values(pt).filter(
-            (h) => h !== pt[l]
+          options: Object.values(ft).filter(
+            (p) => p !== ft[d]
           ),
-          onChange: (h) => j(
-            Object.keys(pt).find(
-              (p) => pt[p] === h
+          onChange: (p) => j(
+            Object.keys(ft).find(
+              (r) => ft[r] === p
             )
           ),
-          value: pt[l]
+          value: ft[d]
         }
       )
     ] })
   ] });
-}, ge = "_title_roi3a_1", fe = "_subtitle_roi3a_5", be = "_header_roi3a_12", ve = "_text_roi3a_13", je = "_productsBlock_roi3a_14", ye = "_top_roi3a_26", ke = "_itemsBlock_roi3a_35", Ie = "_typeTexts_roi3a_41", $e = "_block_roi3a_48", Ne = "_active_roi3a_61", we = "_products_roi3a_14", Se = "_product_roi3a_14", Ce = "_button_roi3a_80", Be = "_disabled_roi3a_91", Te = "_image_roi3a_95", Pe = "_info_roi3a_102", Ae = "_name_roi3a_114", Me = "_buttons_roi3a_118", Oe = "_modal_roi3a_125", qe = "_link_roi3a_145", Ee = "_modalOptions_roi3a_151", Ue = "_addButton_roi3a_164", De = "_deleteButton_roi3a_179", He = "_closeIcon_roi3a_191", H = {
-  title: ge,
-  subtitle: fe,
-  header: be,
-  text: ve,
-  productsBlock: je,
-  top: ye,
-  itemsBlock: ke,
+}, xe = "_title_pef24_1", be = "_subtitle_pef24_5", ve = "_header_pef24_12", je = "_text_pef24_13", ye = "_productsBlock_pef24_14", ke = "_top_pef24_26", $e = "_itemsBlock_pef24_35", Ie = "_typeTexts_pef24_41", Ne = "_block_pef24_48", we = "_active_pef24_61", Ce = "_products_pef24_14", Se = "_product_pef24_14", Be = "_button_pef24_80", Te = "_disabled_pef24_91", Pe = "_image_pef24_95", Ae = "_info_pef24_102", Oe = "_name_pef24_114", Me = "_buttons_pef24_118", qe = "_modal_pef24_125", Ee = "_link_pef24_145", De = "_modalOptions_pef24_151", Ue = "_addButton_pef24_164", He = "_deleteButton_pef24_179", Re = "_closeIcon_pef24_191", z = {
+  title: xe,
+  subtitle: be,
+  header: ve,
+  text: je,
+  productsBlock: ye,
+  top: ke,
+  itemsBlock: $e,
   typeTexts: Ie,
-  block: $e,
-  active: Ne,
-  products: we,
+  block: Ne,
+  active: we,
+  products: Ce,
   product: Se,
-  button: Ce,
-  disabled: Be,
-  image: Te,
-  info: Pe,
-  name: Ae,
+  button: Be,
+  disabled: Te,
+  image: Pe,
+  info: Ae,
+  name: Oe,
   buttons: Me,
-  modal: Oe,
-  link: qe,
-  modalOptions: Ee,
+  modal: qe,
+  link: Ee,
+  modalOptions: De,
   addButton: Ue,
-  deleteButton: De,
-  closeIcon: He
-}, Le = x.forwardRef(
-  (d, a) => {
-    const { activeItem: e, setActiveItem: s, popupPosition: n, modalOptions: c, setIsOpenModal: r } = d;
-    function o(i, l) {
-      return i.length > l ? `${i.slice(0, l)}...` : i;
+  deleteButton: He,
+  closeIcon: Re
+}, Le = f.forwardRef(
+  (u, a) => {
+    const { activeItem: e, setActiveItem: s, popupPosition: i, modalOptions: c, setIsOpenModal: l } = u;
+    function o(n, d) {
+      return n.length > d ? `${n.slice(0, d)}...` : n;
     }
     return /* @__PURE__ */ t.jsxs(
       "div",
       {
         ref: a,
-        className: H.modal,
-        onClick: (i) => {
-          i.stopPropagation();
+        className: z.modal,
+        onClick: (n) => {
+          n.stopPropagation();
         },
         style: {
-          top: `${n.top}px`,
-          left: `${n.left}px`
+          top: `${i.top}px`,
+          left: `${i.left}px`
         },
         children: [
-          /* @__PURE__ */ t.jsxs("div", { className: H.top, children: [
-            /* @__PURE__ */ t.jsx("h3", { className: H.title, children: o(e.name["en-US"], 20) }),
-            /* @__PURE__ */ t.jsx("div", { className: H.closeIcon, children: /* @__PURE__ */ t.jsx(
+          /* @__PURE__ */ t.jsxs("div", { className: z.top, children: [
+            /* @__PURE__ */ t.jsx("h3", { className: z.title, children: o(e.name["en-US"], 20) }),
+            /* @__PURE__ */ t.jsx("div", { className: z.closeIcon, children: /* @__PURE__ */ t.jsx(
               b,
               {
                 name: "X",
                 height: 20,
                 width: 20,
                 onClick: () => {
-                  s(null), r(!1);
+                  s(null), l(!1);
                 }
               }
             ) })
           ] }),
-          /* @__PURE__ */ t.jsx("div", { className: H.modalOptions, children: c.map((i) => {
-            if (i.type === "image")
+          /* @__PURE__ */ t.jsx("div", { className: z.modalOptions, children: c.map((n) => {
+            if (n.type === "image")
               return /* @__PURE__ */ t.jsx(
-                ft,
+                bt,
                 {
                   label: "Put up an attractive image",
-                  activeImage: e[i.field],
-                  onChange: (l) => {
+                  activeImage: e[n.field],
+                  onChange: (d) => {
                     const j = {
                       ...e,
-                      [i.field]: l
+                      [n.field]: d
                     };
                     s(j);
                   }
                 },
-                String(i.field)
+                String(n.field)
               );
-            if (i.type === "text")
+            if (n.type === "text")
               return /* @__PURE__ */ t.jsx(
                 Lt,
                 {
-                  typesText: e[i.field.type],
-                  setTypesText: (l) => {
+                  typesText: e[n.field.type],
+                  setTypesText: (d) => {
                     const j = {
                       ...e,
-                      [i.field.type]: l
+                      [n.field.type]: d
                     };
                     s(j);
                   },
-                  text: e[i.field.text]["en-US"] || "",
-                  setText: (l) => {
+                  text: e[n.field.text]["en-US"] || "",
+                  setText: (d) => {
                     const j = {
                       ...e,
-                      [i.field.text]: {
-                        "en-US": l
+                      [n.field.text]: {
+                        "en-US": d
                       }
                     };
                     s(j);
                   },
-                  typeFont: e[i.field.typeFont],
-                  setTypeFont: (l) => {
+                  typeFont: e[n.field.typeFont],
+                  setTypeFont: (d) => {
                     const j = {
                       ...e,
-                      [i.field.typeFont]: l
+                      [n.field.typeFont]: d
                     };
                     s(j);
                   },
-                  subtitle: i.label
+                  subtitle: n.label
                 }
               );
-            if (i.type === "input")
+            if (n.type === "input")
               return /* @__PURE__ */ t.jsx(
-                K,
+                tt,
                 {
-                  onChange: (l) => {
+                  onChange: (d) => {
                     const j = {
                       ...e,
-                      [i.field]: l
+                      [n.field]: d
                     };
                     s(j);
                   },
-                  value: e[i.field] || "",
-                  label: i.label,
-                  placeholder: i.placeholder
+                  value: e[n.field] || "",
+                  label: n.label,
+                  placeholder: n.placeholder
                 }
               );
-            if (i.type === "inputSwitch")
-              return /* @__PURE__ */ t.jsxs("div", { className: H.link, children: [
+            if (n.type === "inputSwitch")
+              return /* @__PURE__ */ t.jsxs("div", { className: z.link, children: [
                 /* @__PURE__ */ t.jsx(
-                  K,
+                  tt,
                   {
-                    onChange: (l) => {
+                    onChange: (d) => {
                       const j = {
                         ...e,
-                        [i.field.text]: l
+                        [n.field.text]: d
                       };
                       s(j);
                     },
-                    value: e[i.field.text] || "",
-                    label: i.inputLabel,
-                    placeholder: i.placeholder
+                    value: e[n.field.text] || "",
+                    label: n.inputLabel,
+                    placeholder: n.placeholder
                   }
                 ),
                 /* @__PURE__ */ t.jsx(
-                  et,
+                  st,
                   {
-                    current: !!e[i.field.switch] || !1,
-                    label: i.switchLabel,
-                    onChange: (l) => {
+                    current: !!e[n.field.switch] || !1,
+                    label: n.switchLabel,
+                    onChange: (d) => {
                       const j = {
                         ...e,
-                        [i.field.switch]: l
+                        [n.field.switch]: d
                       };
                       s(j);
                     }
                   }
                 )
               ] });
-            if (i.type === "list")
+            if (n.type === "list")
               return /* @__PURE__ */ t.jsx(
-                Ye,
+                Ge,
                 {
-                  items: e[i.field] || [],
-                  setItems: (l) => {
+                  items: e[n.field] || [],
+                  setItems: (d) => {
                     const j = {
                       ...e,
-                      [i.field]: l
+                      [n.field]: d
                     };
                     s(j);
                   },
                   itemsType: "select",
-                  draggable: i.draggable || !1,
-                  itemsOptions: i.itemsOptions,
-                  deletable: i.deletable || !1,
-                  editable: !1,
-                  subtitle: i.label,
-                  addableOptions: i.addableOptions
+                  draggable: n.draggable || !1,
+                  itemsOptions: n.itemsOptions,
+                  deletable: n.deletable || !1,
+                  editable: n.editable || !1,
+                  subtitle: n.label,
+                  addableOptions: n.addableOptions,
+                  modalOptions: n.modalOptions
                 }
               );
-            if (i.type === "select")
+            if (n.type === "select")
               return /* @__PURE__ */ t.jsx(
-                tt,
+                et,
                 {
-                  options: i.itemsOptions,
-                  onChange: (l) => {
+                  options: n.itemsOptions,
+                  onChange: (d) => {
                     const j = {
                       ...e,
-                      [i.field]: l
+                      [n.field]: d
                     };
                     s(j);
                   },
-                  label: i.label,
-                  value: e[i.field] || "String",
-                  leftAddon: i.leftAddon && i.leftAddon === "icon" && /* @__PURE__ */ t.jsx(b, { name: e[i.field] })
+                  label: n.label,
+                  value: e[n.field] || "String",
+                  leftAddon: n.leftAddon && n.leftAddon === "icon" && /* @__PURE__ */ t.jsx(b, { name: e[n.field] }),
+                  switcher: n.switcher ? {
+                    value: !!e[n.switcher],
+                    onChange: (d) => {
+                      if (n.switcher === "isActive") {
+                        const j = {
+                          ...e,
+                          [n.switcher]: d
+                        };
+                        s(j);
+                      }
+                    }
+                  } : void 0
                 }
               );
           }) })
@@ -459,16 +472,16 @@ const Gt = "_wrapper_1ibay_2", Xt = "_alignmentBlock_1ibay_8", Wt = "_title_1iba
       }
     );
   }
-), ze = "_other_g74jx_1", Re = "_subtitle_g74jx_7", Fe = "_items_g74jx_14", It = {
+), ze = "_other_g74jx_1", Fe = "_subtitle_g74jx_7", Ve = "_items_g74jx_14", At = {
   other: ze,
-  subtitle: Re,
-  items: Fe
-}, yt = (d) => {
-  const { items: a, title: e = "Other" } = d;
-  return /* @__PURE__ */ t.jsxs("div", { className: It.other, children: [
-    /* @__PURE__ */ t.jsx("h5", { className: It.subtitle, children: e }),
-    /* @__PURE__ */ t.jsx("div", { className: It.items, children: a.map((s, n) => /* @__PURE__ */ t.jsx(
-      et,
+  subtitle: Fe,
+  items: Ve
+}, Tt = (u) => {
+  const { items: a, title: e = "Other" } = u;
+  return /* @__PURE__ */ t.jsxs("div", { className: At.other, children: [
+    /* @__PURE__ */ t.jsx("h5", { className: At.subtitle, children: e }),
+    /* @__PURE__ */ t.jsx("div", { className: At.items, children: a.map((s, i) => /* @__PURE__ */ t.jsx(
+      st,
       {
         current: s.isItem,
         onChange: (c) => s.setIsItem(c),
@@ -476,105 +489,105 @@ const Gt = "_wrapper_1ibay_2", Xt = "_alignmentBlock_1ibay_8", Wt = "_title_1iba
         hasBackground: !0,
         paddingless: !1
       },
-      n
+      i
     )) })
   ] });
 };
-function Ve({ product: d, children: a }) {
+function Ye({ product: u, children: a }) {
   const {
     attributes: e,
     listeners: s,
-    setNodeRef: n,
+    setNodeRef: i,
     transform: c,
-    transition: r,
+    transition: l,
     isDragging: o
-  } = Tt({
-    id: d.id
-  }), i = {
-    transform: Pt.Transform.toString(c),
-    transition: r
+  } = Ct({
+    id: u.id
+  }), n = {
+    transform: St.Transform.toString(c),
+    transition: l
   };
   return /* @__PURE__ */ t.jsx(
     "div",
     {
-      ref: n,
-      style: i,
-      className: `${H.product} ${o ? H.dragging : ""}`,
+      ref: i,
+      style: n,
+      className: `${z.product} ${o ? z.dragging : ""}`,
       ...e,
       ...s,
       children: a
     }
   );
 }
-const Ye = (d) => {
+const Ge = (u) => {
   const {
     isActiveItems: a,
     setIsActiveItems: e,
     items: s,
-    setItems: n,
+    setItems: i,
     other: c,
-    title: r,
+    title: l,
     subtitle: o,
-    editable: i = !0,
-    draggable: l = !1,
+    editable: n = !0,
+    draggable: d = !1,
     withImage: j = !1,
-    deletable: h = !0,
-    addable: p = !0,
-    itemsType: m,
-    itemsPlaceholder: f = "",
-    itemsOptions: u,
-    hasRangeSelector: S = !1,
-    rangeSelectorOptions: D,
-    modalOptions: I,
+    deletable: p = !0,
+    addable: r = !0,
+    itemsType: y,
+    itemsPlaceholder: h = "",
+    itemsOptions: _,
+    hasRangeSelector: w = !1,
+    rangeSelectorOptions: H,
+    modalOptions: $,
     addableOptions: g = {},
-    limit: w,
-    autoScrollInterval: E
-  } = d, [R, C] = x.useState(null), [P, st] = x.useState({
+    limit: B,
+    autoInterval: E
+  } = u, [F, T] = f.useState(null), [v, A] = f.useState({
     top: 0,
     left: 0
-  }), [y, M] = x.useState(null), B = x.useRef(null), [X, O] = x.useState(!1), L = $t(
-    Nt(Bt, {
+  }), [x, I] = f.useState(null), C = f.useRef(null), [R, O] = f.useState(!1), U = yt(
+    kt(wt, {
       activationConstraint: {
         distance: 5
       }
     })
   );
-  x.useEffect(() => {
-    const _ = () => {
-      C(null), O(!1);
+  f.useEffect(() => {
+    const m = () => {
+      T(null), O(!1);
     };
-    return document.body.addEventListener("click", _), C(null), O(!1), () => {
-      C(null), O(!1), document.body.removeEventListener("click", _);
+    return document.body.addEventListener("click", m), T(null), O(!1), () => {
+      T(null), O(!1), document.body.removeEventListener("click", m);
     };
-  }, []), x.useEffect(() => {
-    if (R) {
-      const _ = [...s].map((k) => k.id === R.id ? R : k);
-      n(_);
+  }, []), f.useEffect(() => {
+    if (F) {
+      const m = [...s].map((N) => N.id === F.id ? F : N);
+      i(m);
     }
-  }, [R]), x.useEffect(() => {
-    if (B.current && y) {
-      const _ = B.current.getBoundingClientRect().height, k = window.innerHeight;
-      let T = y.top;
-      T + _ > k + window.scrollY - 200 && (T = k + window.scrollY - _ - 200), T < 0 && (T = 10), st({
-        top: T,
-        left: y.left
+  }, [F]), f.useEffect(() => {
+    if (C.current && x) {
+      const m = C.current.getBoundingClientRect().height, N = window.innerHeight;
+      let M = x.top;
+      M + m > N + window.scrollY - 200 && (M = N + window.scrollY - m - 200), M < 0 && (M = 10), A({
+        top: M,
+        left: x.left
       });
     }
-  }, [B.current, y]);
-  const Z = (_, k) => {
-    _.stopPropagation();
-    const T = _.target.getBoundingClientRect();
-    M({
-      top: T.top + window.scrollY,
-      left: T.left - 30
-    }), C(k), O(!0);
+  }, [C.current, x]);
+  const nt = (m, N) => {
+    m.stopPropagation();
+    const M = m.target.getBoundingClientRect();
+    I({
+      top: M.top + window.scrollY - 70,
+      left: M.left - (r ? 30 : 65)
+    }), T(N), O(!0);
   };
-  function rt(_) {
+  function dt(m) {
     if (j)
-      return _ ? /* @__PURE__ */ t.jsx(
+      return m ? /* @__PURE__ */ t.jsx(
         "img",
         {
-          src: `https://imagedelivery.net/${_[0]}/w=1000`,
+          src: `https://imagedelivery.net/${m[0]}/w=1000`,
           alt: "image",
           width: 16,
           height: 16
@@ -589,19 +602,19 @@ const Ye = (d) => {
         }
       );
   }
-  const v = (_) => {
-    const { active: k, over: T } = _;
-    if (T && k.id !== T.id) {
-      const U = s.findIndex((A) => A.id === k.id), Y = s.findIndex((A) => A.id === T.id);
-      if (U !== -1 && Y !== -1) {
-        const A = [...s], [dt] = A.splice(U, 1);
-        A.splice(Y, 0, dt), n(A);
+  const k = (m) => {
+    const { active: N, over: M } = m;
+    if (M && N.id !== M.id) {
+      const L = s.findIndex((q) => q.id === N.id), X = s.findIndex((q) => q.id === M.id);
+      if (L !== -1 && X !== -1) {
+        const q = [...s], [ut] = q.splice(L, 1);
+        q.splice(X, 0, ut), i(q);
       }
     }
-  }, q = (_, k) => {
-    var U, Y;
-    const T = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-      l && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
+  }, D = (m, N) => {
+    var L, X;
+    const M = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+      d && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
         b,
         {
           name: "DotsSixVertical",
@@ -610,71 +623,73 @@ const Ye = (d) => {
           height: 20
         }
       ) }),
-      m === "select" && u && /* @__PURE__ */ t.jsx(
-        tt,
+      y === "select" && _ && /* @__PURE__ */ t.jsx(
+        et,
         {
-          onChange: (A) => {
-            const dt = [...s], _t = u.find((bt) => bt.name["en-US"] === A);
-            if (!_t) return;
-            const ut = dt.map((bt) => bt.id === _.id ? {
-              ..._t,
+          onChange: (q) => {
+            const ut = [...s], mt = _.find((vt) => vt.name["en-US"] === q);
+            if (!mt) return;
+            const _t = ut.map((vt) => vt.id === m.id ? {
+              ...mt,
               name: {
-                "en-US": A
+                "en-US": q
               }
-            } : bt);
-            C({
-              ..._,
+            } : vt);
+            T({
+              ...m,
               name: {
-                "en-US": A
+                "en-US": q
               }
-            }), n([...ut]);
+            }), i([..._t]);
           },
-          value: _.name["en-US"],
-          options: u.filter((A) => !s.find((dt) => dt.name["en-US"] === A.name["en-US"])).map((A) => A.name["en-US"]),
-          leftAddon: rt(_.images)
+          value: m.name["en-US"],
+          options: _.filter((q) => !s.find((ut) => ut.name["en-US"] === q.name["en-US"])).map((q) => q.name["en-US"]),
+          leftAddon: dt(m.images)
         }
       ),
-      m === "input" && /* @__PURE__ */ t.jsx(
-        K,
+      y === "input" && /* @__PURE__ */ t.jsx(
+        tt,
         {
-          onChange: (A) => {
-            const _t = [...s].map((ut) => ut.id === _.id ? {
-              ..._,
+          onChange: (q) => {
+            const mt = [...s].map((_t) => _t.id === m.id ? {
+              ...m,
               name: {
-                "en-US": A
+                "en-US": q
               }
-            } : ut);
-            n([..._t]);
+            } : _t);
+            i([...mt]);
           },
-          value: _.name["en-US"],
-          placeholder: f
+          value: m.name["en-US"],
+          placeholder: h
         }
       ),
-      m === "image" && /* @__PURE__ */ t.jsx(
-        ft,
+      y === "image" && /* @__PURE__ */ t.jsx(
+        bt,
         {
-          onChange: (A) => {
-            const _t = [...s].map((ut) => ut.id === _.id ? {
-              ..._,
-              images: A
-            } : ut);
-            n([..._t]);
+          onChange: (q) => {
+            const mt = [...s].map((_t) => _t.id === m.id ? {
+              ...m,
+              images: q
+            } : _t);
+            i([...mt]);
           },
-          activeImage: (U = s.find((A) => A.id === _.id)) != null && U.images ? (Y = s.find((A) => A.id === _.id)) == null ? void 0 : Y.images[0] : void 0
+          activeImage: (L = s.find((q) => q.id === m.id)) != null && L.images ? (X = s.find((q) => q.id === m.id)) == null ? void 0 : X.images[0] : void 0
         }
       ),
-      /* @__PURE__ */ t.jsxs("div", { className: H.buttons, children: [
-        i && /* @__PURE__ */ t.jsx("div", { className: H.deleteButton, children: /* @__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: (A) => Z(A, _)
+            onClick: (q) => {
+              console.log(q, m), nt(q, m);
+            }
           }
         ) }),
-        h && /* @__PURE__ */ t.jsx("div", { className: H.deleteButton, children: /* @__PURE__ */ t.jsx(
+        p && /* @__PURE__ */ t.jsx("div", { className: z.deleteButton, children: /* @__PURE__ */ t.jsx(
           b,
           {
             name: "Trash",
@@ -682,69 +697,69 @@ const Ye = (d) => {
             width: 20,
             height: 20,
             fill: "#C12A2A",
-            onClick: () => n(s.filter((A) => A.id !== _.id))
+            onClick: () => i(s.filter((q) => q.id !== m.id))
           }
         ) })
       ] })
     ] });
-    return l ? /* @__PURE__ */ t.jsx(
-      Ve,
+    return d ? /* @__PURE__ */ t.jsx(
+      Ye,
       {
-        product: _,
-        index: k,
-        children: T
+        product: m,
+        index: N,
+        children: M
       },
-      _.id
+      m.id
     ) : /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: H.product,
-        children: T
+        className: z.product,
+        children: M
       },
-      _.id
+      m.id
     );
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: H.productsBlock, children: [
-    (r || a !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: H.top, children: [
-      r && /* @__PURE__ */ t.jsx("h3", { className: H.title, children: r }),
+  return /* @__PURE__ */ t.jsxs("div", { className: z.productsBlock, children: [
+    (l || a !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: z.top, children: [
+      l && /* @__PURE__ */ t.jsx("h3", { className: z.title, children: l }),
       a !== void 0 && /* @__PURE__ */ t.jsx(
-        et,
+        st,
         {
           current: a,
-          onChange: (_) => e == null ? void 0 : e(_)
+          onChange: (m) => e == null ? void 0 : e(m)
         }
       )
     ] }),
-    R && i && I && X && /* @__PURE__ */ t.jsx(
+    F && n && $ && R && /* @__PURE__ */ t.jsx(
       Le,
       {
-        ref: B,
-        activeItem: R,
-        setActiveItem: C,
-        popupPosition: P,
-        modalOptions: I,
+        ref: C,
+        activeItem: F,
+        setActiveItem: T,
+        popupPosition: v,
+        modalOptions: $,
         setIsOpenModal: O
       }
     ),
-    S && D && /* @__PURE__ */ t.jsx(Ot, { ...D }),
-    /* @__PURE__ */ t.jsxs("div", { className: H.products, children: [
-      o && /* @__PURE__ */ t.jsx("h5", { className: H.subtitle, children: o }),
-      l ? /* @__PURE__ */ t.jsx(
-        wt,
+    w && H && /* @__PURE__ */ t.jsx(qt, { ...H }),
+    /* @__PURE__ */ t.jsxs("div", { className: z.products, children: [
+      o && /* @__PURE__ */ t.jsx("h5", { className: z.subtitle, children: o }),
+      d ? /* @__PURE__ */ t.jsx(
+        $t,
         {
-          sensors: L,
-          onDragEnd: v,
+          sensors: U,
+          onDragEnd: k,
           children: /* @__PURE__ */ t.jsx(
-            St,
+            It,
             {
-              items: s.map((_) => _.id),
-              strategy: Ct,
-              children: s.map((_, k) => q(_, k))
+              items: s.map((m) => m.id),
+              strategy: Nt,
+              children: s.map((m, N) => D(m, N))
             }
           )
         }
-      ) : s.map((_, k) => q(_, k)),
-      p && /* @__PURE__ */ t.jsx(
+      ) : s.map((m, N) => D(m, N)),
+      r && /* @__PURE__ */ t.jsx(
         "div",
         {
           style: {
@@ -753,46 +768,46 @@ const Ye = (d) => {
             justifyContent: "center"
           },
           children: /* @__PURE__ */ t.jsx(
-            lt,
+            ot,
             {
               withoutHover: !0,
-              className: V(H.button, {
-                [H.disabled]: !!(w && w <= s.length || s.length === (u == null ? void 0 : u.length))
+              className: Y(z.button, {
+                [z.disabled]: !!(B && B <= s.length || s.length === (_ == null ? void 0 : _.length))
               }),
               size: "s",
-              disabled: !!(w && w <= s.length || s.length === (u == null ? void 0 : u.length)),
+              disabled: !!(B && B <= s.length || s.length === (_ == null ? void 0 : _.length)),
               onClick: () => {
-                const _ = [...s];
-                let k = null;
-                if (u) {
-                  for (let T = 0; T < u.length; T++)
-                    if (!s.find((U) => U.id === u[T].id)) {
-                      k = u[T];
+                const m = [...s];
+                let N = null;
+                if (_) {
+                  for (let M = 0; M < _.length; M++)
+                    if (!s.find((L) => L.id === _[M].id)) {
+                      N = _[M];
                       break;
                     }
                 }
-                m === "select" && u ? _.push({
-                  name: k ? k.name : u[0].name,
-                  id: (k == null ? void 0 : k.id) || u[0].id,
+                y === "select" && _ ? m.push({
+                  name: N ? N.name : _[0].name,
+                  id: (N == null ? void 0 : N.id) || _[0].id,
                   ...g
-                }) : m === "input" ? _.push({
+                }) : y === "input" ? m.push({
                   name: {
                     "en-US": ""
                   },
-                  id: mt(),
+                  id: ht(),
                   ...g
-                }) : _.push({
+                }) : m.push({
                   name: {
                     "en-US": `Image ${s.length + 1}`
                   },
-                  id: mt(),
+                  id: ht(),
                   ...g
-                }), n(_);
+                }), i(m);
               },
               style: {
                 width: "fit-content"
               },
-              children: /* @__PURE__ */ t.jsxs("div", { className: H.addButton, children: [
+              children: /* @__PURE__ */ t.jsxs("div", { className: z.addButton, children: [
                 /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
                 /* @__PURE__ */ t.jsx(
                   b,
@@ -808,14 +823,14 @@ const Ye = (d) => {
         }
       )
     ] }),
-    c !== void 0 && /* @__PURE__ */ t.jsx(yt, { items: c }),
+    c !== void 0 && /* @__PURE__ */ t.jsx(Tt, { items: c }),
     E !== void 0 && /* @__PURE__ */ t.jsx(
-      K,
+      tt,
       {
-        label: "Auto scroll interval",
+        label: E.title || "Auto scroll interval",
         type: "number",
-        value: String(E.scrollInterval),
-        onChange: (_) => E.setScrollInterval(Number(_)),
+        value: String(E.autoInterval),
+        onChange: (m) => E.setAutoInterval(Number(m)),
         min: 0.1,
         max: 100,
         style: {
@@ -825,51 +840,51 @@ const Ye = (d) => {
       }
     )
   ] });
-}, Ge = "_title_82zux_1", Xe = "_subtitle_82zux_5", We = "_header_82zux_12", Je = "_text_82zux_13", Qe = "_productsBlock_82zux_14", Ke = "_top_82zux_26", Ze = "_itemsBlock_82zux_35", ts = "_typeTexts_82zux_41", es = "_block_82zux_48", ss = "_active_82zux_61", ns = "_products_82zux_14", is = "_product_82zux_14", os = "_button_82zux_80", as = "_disabled_82zux_91", cs = "_image_82zux_95", ls = "_info_82zux_102", rs = "_name_82zux_114", ds = "_buttons_82zux_118", us = "_modal_82zux_125", _s = "_link_82zux_145", ms = "_modalOptions_82zux_151", hs = "_addButton_82zux_157", ps = "_deleteButton_82zux_179", Q = {
-  title: Ge,
-  subtitle: Xe,
-  header: We,
-  text: Je,
-  productsBlock: Qe,
-  top: Ke,
-  itemsBlock: Ze,
-  typeTexts: ts,
-  block: es,
-  active: ss,
-  products: ns,
-  product: is,
-  button: os,
-  disabled: as,
-  image: cs,
-  info: ls,
-  name: rs,
-  buttons: ds,
-  modal: us,
-  link: _s,
-  modalOptions: ms,
-  addButton: hs,
-  deleteButton: ps
-}, Ia = (d) => {
+}, Xe = "_title_82zux_1", We = "_subtitle_82zux_5", Je = "_header_82zux_12", Qe = "_text_82zux_13", Ke = "_productsBlock_82zux_14", Ze = "_top_82zux_26", ts = "_itemsBlock_82zux_35", es = "_typeTexts_82zux_41", ss = "_block_82zux_48", ns = "_active_82zux_61", is = "_products_82zux_14", os = "_product_82zux_14", as = "_button_82zux_80", cs = "_disabled_82zux_91", ls = "_image_82zux_95", rs = "_info_82zux_102", ds = "_name_82zux_114", us = "_buttons_82zux_118", _s = "_modal_82zux_125", ms = "_link_82zux_145", hs = "_modalOptions_82zux_151", ps = "_addButton_82zux_157", fs = "_deleteButton_82zux_179", Z = {
+  title: Xe,
+  subtitle: We,
+  header: Je,
+  text: Qe,
+  productsBlock: Ke,
+  top: Ze,
+  itemsBlock: ts,
+  typeTexts: es,
+  block: ss,
+  active: ns,
+  products: is,
+  product: os,
+  button: as,
+  disabled: cs,
+  image: ls,
+  info: rs,
+  name: ds,
+  buttons: us,
+  modal: _s,
+  link: ms,
+  modalOptions: hs,
+  addButton: ps,
+  deleteButton: fs
+}, Ja = (u) => {
   const {
     isActiveItems: a,
     setIsActiveItems: e,
     items: s,
-    setItems: n,
+    setItems: i,
     other: c,
-    title: r,
+    title: l,
     subtitle: o,
-    draggable: i = !1,
-    withImage: l = !1,
+    draggable: n = !1,
+    withImage: d = !1,
     addable: j = !0,
-    itemsOptions: h,
-    hasRangeSelector: p = !1,
-    rangeSelectorOptions: m,
-    limit: f,
-    autoScrollInterval: u,
-    deletable: S
-  } = d;
-  function D(g) {
-    if (l)
+    itemsOptions: p,
+    hasRangeSelector: r = !1,
+    rangeSelectorOptions: y,
+    limit: h,
+    autoScrollInterval: _,
+    deletable: w
+  } = u;
+  function H(g) {
+    if (d)
       return g ? /* @__PURE__ */ t.jsx(
         "img",
         {
@@ -888,11 +903,11 @@ const Ye = (d) => {
         }
       );
   }
-  const I = (g, w = !1) => {
-    const E = h.find((C) => C.id === g);
+  const $ = (g, B = !1) => {
+    const E = p.find((T) => T.id === g);
     if (!E) return;
-    const R = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-      i && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
+    const F = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+      n && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
         b,
         {
           name: "DotsSixVertical",
@@ -902,20 +917,20 @@ const Ye = (d) => {
         }
       ) }),
       /* @__PURE__ */ t.jsx(
-        tt,
+        et,
         {
-          onChange: (C) => {
-            const P = [...s], st = h.find((B) => B.name === C);
-            if (!st) return;
-            const y = st.id, M = P.map((B) => B === g ? y : B);
-            n([...M]);
+          onChange: (T) => {
+            const v = [...s], A = p.find((C) => C.name === T);
+            if (!A) return;
+            const x = A.id, I = v.map((C) => C === g ? x : C);
+            i([...I]);
           },
           value: E.name,
-          options: h.filter((C) => !s.find((P) => P === C.id)).map((C) => C.name),
-          leftAddon: D(E.images)
+          options: p.filter((T) => !s.find((v) => v === T.id)).map((T) => T.name),
+          leftAddon: H(E.images)
         }
       ),
-      w && /* @__PURE__ */ t.jsx("div", { className: Q.buttons, children: /* @__PURE__ */ t.jsx("div", { className: Q.deleteButton, children: /* @__PURE__ */ t.jsx(
+      B && /* @__PURE__ */ t.jsx("div", { className: Z.buttons, children: /* @__PURE__ */ t.jsx("div", { className: Z.deleteButton, children: /* @__PURE__ */ t.jsx(
         b,
         {
           name: "Trash",
@@ -923,34 +938,34 @@ const Ye = (d) => {
           width: 20,
           height: 20,
           fill: "#C12A2A",
-          onClick: () => n(s.filter((C) => C !== g))
+          onClick: () => i(s.filter((T) => T !== g))
         }
       ) }) })
     ] });
     return /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: Q.product,
-        children: R
+        className: Z.product,
+        children: F
       },
       g
     );
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: Q.productsBlock, children: [
-    (r || a !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: Q.top, children: [
-      r && /* @__PURE__ */ t.jsx("h3", { className: Q.title, children: r }),
+  return /* @__PURE__ */ t.jsxs("div", { className: Z.productsBlock, children: [
+    (l || a !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: Z.top, children: [
+      l && /* @__PURE__ */ t.jsx("h3", { className: Z.title, children: l }),
       a !== void 0 && /* @__PURE__ */ t.jsx(
-        et,
+        st,
         {
           current: a,
           onChange: (g) => e == null ? void 0 : e(g)
         }
       )
     ] }),
-    p && m && /* @__PURE__ */ t.jsx(Ot, { ...m }),
-    /* @__PURE__ */ t.jsxs("div", { className: Q.products, children: [
-      o && /* @__PURE__ */ t.jsx("h5", { className: Q.subtitle, children: o }),
-      s.map((g) => I(g, S)),
+    r && y && /* @__PURE__ */ t.jsx(qt, { ...y }),
+    /* @__PURE__ */ t.jsxs("div", { className: Z.products, children: [
+      o && /* @__PURE__ */ t.jsx("h5", { className: Z.subtitle, children: o }),
+      s.map((g) => $(g, w)),
       j && /* @__PURE__ */ t.jsx(
         "div",
         {
@@ -961,30 +976,30 @@ const Ye = (d) => {
             gap: 5
           },
           children: /* @__PURE__ */ t.jsx(
-            lt,
+            ot,
             {
               withoutHover: !0,
-              className: V(Q.button, {
-                [Q.disabled]: !!(f && f <= s.length || s.length === h.length)
+              className: Y(Z.button, {
+                [Z.disabled]: !!(h && h <= s.length || s.length === p.length)
               }),
               size: "s",
-              disabled: !!(f && f <= s.length || s.length === h.length),
+              disabled: !!(h && h <= s.length || s.length === p.length),
               onClick: () => {
                 const g = [...s];
-                let w = null;
-                if (h) {
-                  for (let E = 0; E < h.length; E++)
-                    if (!s.find((R) => R === h[E].id)) {
-                      w = h[E];
+                let B = null;
+                if (p) {
+                  for (let E = 0; E < p.length; E++)
+                    if (!s.find((F) => F === p[E].id)) {
+                      B = p[E];
                       break;
                     }
                 }
-                g.push((w == null ? void 0 : w.id) || h[0].id), n(g);
+                g.push((B == null ? void 0 : B.id) || p[0].id), i(g);
               },
               style: {
                 width: "fit-content"
               },
-              children: /* @__PURE__ */ t.jsxs("div", { className: Q.addButton, children: [
+              children: /* @__PURE__ */ t.jsxs("div", { className: Z.addButton, children: [
                 /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
                 /* @__PURE__ */ t.jsx(
                   b,
@@ -1000,14 +1015,14 @@ const Ye = (d) => {
         }
       )
     ] }),
-    c !== void 0 && /* @__PURE__ */ t.jsx(yt, { items: c }),
-    u !== void 0 && /* @__PURE__ */ t.jsx(
-      K,
+    c !== void 0 && /* @__PURE__ */ t.jsx(Tt, { items: c }),
+    _ !== void 0 && /* @__PURE__ */ t.jsx(
+      tt,
       {
         label: "Auto scroll interval",
         type: "number",
-        value: String(u.scrollInterval),
-        onChange: (g) => u.setScrollInterval(Number(g)),
+        value: String(_.scrollInterval),
+        onChange: (g) => _.setScrollInterval(Number(g)),
         min: 0.1,
         max: 100,
         style: {
@@ -1017,50 +1032,305 @@ const Ye = (d) => {
       }
     )
   ] });
-}, xs = "_title_1vfw9_1", gs = "_subtitle_1vfw9_5", fs = "_header_1vfw9_12", bs = "_text_1vfw9_13", vs = "_productsBlock_1vfw9_14", js = "_top_1vfw9_26", ys = "_itemsBlock_1vfw9_35", ks = "_typeTexts_1vfw9_41", Is = "_block_1vfw9_48", $s = "_active_1vfw9_61", Ns = "_products_1vfw9_14", ws = "_product_1vfw9_14", Ss = "_button_1vfw9_80", Cs = "_disabled_1vfw9_91", Bs = "_image_1vfw9_95", Ts = "_info_1vfw9_102", Ps = "_name_1vfw9_114", As = "_buttons_1vfw9_118", Ms = "_modal_1vfw9_125", Os = "_link_1vfw9_145", qs = "_modalOptions_1vfw9_151", Es = "_addButton_1vfw9_164", Us = "_deleteButton_1vfw9_179", Ds = "_closeIcon_1vfw9_191", z = {
-  title: xs,
-  subtitle: gs,
-  header: fs,
-  text: bs,
-  productsBlock: vs,
-  top: js,
-  itemsBlock: ys,
-  typeTexts: ks,
+}, gs = "_title_roi3a_1", xs = "_subtitle_roi3a_5", bs = "_header_roi3a_12", vs = "_text_roi3a_13", js = "_productsBlock_roi3a_14", ys = "_top_roi3a_26", ks = "_itemsBlock_roi3a_35", $s = "_typeTexts_roi3a_41", Is = "_block_roi3a_48", Ns = "_active_roi3a_61", ws = "_products_roi3a_14", Cs = "_product_roi3a_14", Ss = "_button_roi3a_80", Bs = "_disabled_roi3a_91", Ts = "_image_roi3a_95", Ps = "_info_roi3a_102", As = "_name_roi3a_114", Os = "_buttons_roi3a_118", Ms = "_modal_roi3a_125", qs = "_link_roi3a_145", Es = "_modalOptions_roi3a_151", Ds = "_addButton_roi3a_164", Us = "_deleteButton_roi3a_179", Hs = "_closeIcon_roi3a_191", J = {
+  title: gs,
+  subtitle: xs,
+  header: bs,
+  text: vs,
+  productsBlock: js,
+  top: ys,
+  itemsBlock: ks,
+  typeTexts: $s,
   block: Is,
-  active: $s,
-  products: Ns,
-  product: ws,
+  active: Ns,
+  products: ws,
+  product: Cs,
   button: Ss,
-  disabled: Cs,
-  image: Bs,
-  info: Ts,
-  name: Ps,
-  buttons: As,
+  disabled: Bs,
+  image: Ts,
+  info: Ps,
+  name: As,
+  buttons: Os,
   modal: Ms,
-  link: Os,
-  modalOptions: qs,
-  addButton: Es,
+  link: qs,
+  modalOptions: Es,
+  addButton: Ds,
   deleteButton: Us,
-  closeIcon: Ds
-}, Hs = x.forwardRef(
-  (d, a) => {
-    const { activeItem: e, setActiveItem: s, popupPosition: n, modalOptions: c, setIsOpenModal: r } = d;
+  closeIcon: Hs
+};
+function Rs({ product: u, children: a }) {
+  const {
+    attributes: e,
+    listeners: s,
+    setNodeRef: i,
+    transform: c,
+    transition: l,
+    isDragging: o
+  } = Ct({
+    id: u.id
+  }), n = {
+    transform: St.Transform.toString(c),
+    transition: l
+  };
+  return /* @__PURE__ */ t.jsx(
+    "div",
+    {
+      ref: i,
+      style: n,
+      className: `${J.product} ${o ? J.dragging : ""}`,
+      ...e,
+      ...s,
+      children: a
+    }
+  );
+}
+const Qa = (u) => {
+  const {
+    isActiveItems: a,
+    setIsActiveItems: e,
+    items: s,
+    setItems: i,
+    title: c,
+    subtitle: l,
+    editable: o = !0,
+    draggable: n = !1,
+    deletable: d = !0,
+    addable: j = !0,
+    itemsType: p,
+    itemsOptions: r,
+    addableOptions: y = {},
+    limit: h
+  } = u, [_, w] = f.useState(null), [H, $] = f.useState(null), g = f.useRef(null), B = yt(
+    kt(wt, {
+      activationConstraint: {
+        distance: 5
+      }
+    })
+  );
+  f.useEffect(() => {
+    if (_) {
+      const v = [...s].map((A) => A.id === _.id ? _ : A);
+      i(v);
+    }
+  }, [_]), f.useEffect(() => {
+    g.current && H && (g.current.getBoundingClientRect().height, H.top);
+  }, [g.current, H]);
+  const E = (v, A) => {
+    v.stopPropagation();
+    const x = v.target.getBoundingClientRect();
+    $({
+      top: x.top + window.scrollY,
+      left: x.left - 30
+    }), w(A);
+  }, F = (v) => {
+    const { active: A, over: x } = v;
+    if (x && A.id !== x.id) {
+      const I = s.findIndex((R) => R.id === A.id), C = s.findIndex((R) => R.id === x.id);
+      if (I !== -1 && C !== -1) {
+        const R = [...s], [O] = R.splice(I, 1);
+        R.splice(C, 0, O), i(R);
+      }
+    }
+  }, T = (v, A) => {
+    const x = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+      n && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
+        b,
+        {
+          name: "DotsSixVertical",
+          hoverable: !0,
+          width: 20,
+          height: 20
+        }
+      ) }),
+      p === "select" && r && /* @__PURE__ */ t.jsx(
+        et,
+        {
+          onChange: (I) => {
+            const C = [...s], R = r.find((U) => U.name === I);
+            if (!R) return;
+            const O = C.map((U) => U.id === v.id ? {
+              ...R,
+              name: {
+                "en-US": I
+              }
+            } : U);
+            w({
+              ...v,
+              name: {
+                "en-US": I
+              }
+            }), i([...O]);
+          },
+          value: v.name,
+          options: r.filter((I) => !s.find((C) => C.name === I.name)).map((I) => I.name)
+        }
+      ),
+      /* @__PURE__ */ t.jsxs("div", { className: J.buttons, children: [
+        o && /* @__PURE__ */ t.jsx("div", { className: J.deleteButton, children: /* @__PURE__ */ t.jsx(
+          b,
+          {
+            name: "Sliders",
+            hoverable: !0,
+            width: 20,
+            height: 20,
+            onClick: (I) => E(I, v)
+          }
+        ) }),
+        d && /* @__PURE__ */ t.jsx("div", { className: J.deleteButton, children: /* @__PURE__ */ t.jsx(
+          b,
+          {
+            name: "Trash",
+            hoverable: !0,
+            width: 20,
+            height: 20,
+            fill: "#C12A2A",
+            onClick: () => i(s.filter((I) => I.id !== v.id))
+          }
+        ) })
+      ] })
+    ] });
+    return n ? /* @__PURE__ */ t.jsx(
+      Rs,
+      {
+        product: v,
+        index: A,
+        children: x
+      },
+      v.id
+    ) : /* @__PURE__ */ t.jsx(
+      "div",
+      {
+        className: J.product,
+        children: x
+      },
+      v.id
+    );
+  };
+  return /* @__PURE__ */ t.jsxs("div", { className: J.productsBlock, children: [
+    (c || a !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: J.top, children: [
+      c && /* @__PURE__ */ t.jsx("h3", { className: J.title, children: c }),
+      a !== void 0 && /* @__PURE__ */ t.jsx(
+        st,
+        {
+          current: a,
+          onChange: (v) => e == null ? void 0 : e(v)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t.jsxs("div", { className: J.products, children: [
+      l && /* @__PURE__ */ t.jsx("h5", { className: J.subtitle, children: l }),
+      n ? /* @__PURE__ */ t.jsx(
+        $t,
+        {
+          sensors: B,
+          onDragEnd: F,
+          children: /* @__PURE__ */ t.jsx(
+            It,
+            {
+              items: s.map((v) => v.id),
+              strategy: Nt,
+              children: s.map((v, A) => T(v, A))
+            }
+          )
+        }
+      ) : s.map((v, A) => T(v, A)),
+      j && /* @__PURE__ */ t.jsx(
+        "div",
+        {
+          style: {
+            width: "100%",
+            display: "flex",
+            justifyContent: "center"
+          },
+          children: /* @__PURE__ */ t.jsx(
+            ot,
+            {
+              withoutHover: !0,
+              className: Y(J.button, {
+                [J.disabled]: !!(h && h <= s.length || s.length === (r == null ? void 0 : r.length))
+              }),
+              size: "s",
+              disabled: !!(h && h <= s.length || s.length === (r == null ? void 0 : r.length)),
+              onClick: () => {
+                const v = [...s];
+                let A = null;
+                if (r) {
+                  for (let x = 0; x < r.length; x++)
+                    if (!s.find((I) => I.id === r[x].id)) {
+                      A = r[x];
+                      break;
+                    }
+                }
+                p === "select" && r && v.push({
+                  name: A ? A.name : r[0].name,
+                  id: (A == null ? void 0 : A.id) || r[0].id,
+                  ...y
+                }), i(v);
+              },
+              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
+                  }
+                )
+              ] })
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+}, Ls = "_title_1vfw9_1", zs = "_subtitle_1vfw9_5", Fs = "_header_1vfw9_12", Vs = "_text_1vfw9_13", Ys = "_productsBlock_1vfw9_14", Gs = "_top_1vfw9_26", Xs = "_itemsBlock_1vfw9_35", Ws = "_typeTexts_1vfw9_41", Js = "_block_1vfw9_48", Qs = "_active_1vfw9_61", Ks = "_products_1vfw9_14", Zs = "_product_1vfw9_14", tn = "_button_1vfw9_80", en = "_disabled_1vfw9_91", sn = "_image_1vfw9_95", nn = "_info_1vfw9_102", on = "_name_1vfw9_114", an = "_buttons_1vfw9_118", cn = "_modal_1vfw9_125", ln = "_link_1vfw9_145", rn = "_modalOptions_1vfw9_151", dn = "_addButton_1vfw9_164", un = "_deleteButton_1vfw9_179", _n = "_closeIcon_1vfw9_191", V = {
+  title: Ls,
+  subtitle: zs,
+  header: Fs,
+  text: Vs,
+  productsBlock: Ys,
+  top: Gs,
+  itemsBlock: Xs,
+  typeTexts: Ws,
+  block: Js,
+  active: Qs,
+  products: Ks,
+  product: Zs,
+  button: tn,
+  disabled: en,
+  image: sn,
+  info: nn,
+  name: on,
+  buttons: an,
+  modal: cn,
+  link: ln,
+  modalOptions: rn,
+  addButton: dn,
+  deleteButton: un,
+  closeIcon: _n
+}, mn = f.forwardRef(
+  (u, a) => {
+    const { activeItem: e, setActiveItem: s, popupPosition: i, modalOptions: c, setIsOpenModal: l } = u;
     return /* @__PURE__ */ t.jsxs(
       "div",
       {
         ref: a,
-        className: z.modal,
+        className: V.modal,
         onClick: (o) => {
           o.stopPropagation();
         },
         style: {
-          top: `${n.top}px`,
-          left: `${n.left}px`
+          top: `${i.top}px`,
+          left: `${i.left}px`
         },
         children: [
-          /* @__PURE__ */ t.jsxs("div", { className: z.top, children: [
-            /* @__PURE__ */ t.jsx("h3", { className: z.title, children: e.name["en-US"] }),
-            /* @__PURE__ */ t.jsx("div", { className: z.closeIcon, children: /* @__PURE__ */ t.jsx(
+          /* @__PURE__ */ t.jsxs("div", { className: V.top, children: [
+            /* @__PURE__ */ t.jsx("h3", { className: V.title, children: e.name["en-US"] }),
+            /* @__PURE__ */ t.jsx("div", { className: V.closeIcon, children: /* @__PURE__ */ t.jsx(
               b,
               {
                 name: "X",
@@ -1068,24 +1338,24 @@ const Ye = (d) => {
                 width: 20,
                 hoverable: !0,
                 onClick: () => {
-                  s(null), r(!1);
+                  s(null), l(!1);
                 }
               }
             ) })
           ] }),
-          /* @__PURE__ */ t.jsx("div", { className: z.modalOptions, children: c.map((o) => {
+          /* @__PURE__ */ t.jsx("div", { className: V.modalOptions, children: c.map((o) => {
             if (o.type === "image")
               return /* @__PURE__ */ t.jsx(
-                ft,
+                bt,
                 {
                   label: "Put up an attractive image",
                   activeImage: e[o.field],
-                  onChange: (i) => {
-                    const l = {
+                  onChange: (n) => {
+                    const d = {
                       ...e,
-                      [o.field]: i
+                      [o.field]: n
                     };
-                    s(l);
+                    s(d);
                   }
                 },
                 String(o.field)
@@ -1095,44 +1365,44 @@ const Ye = (d) => {
                 Lt,
                 {
                   typesText: e[o.field.type],
-                  setTypesText: (i) => {
-                    const l = {
+                  setTypesText: (n) => {
+                    const d = {
                       ...e,
-                      [o.field.type]: i
+                      [o.field.type]: n
                     };
-                    s(l);
+                    s(d);
                   },
                   text: e[o.field.text]["en-US"] || "",
-                  setText: (i) => {
-                    const l = {
+                  setText: (n) => {
+                    const d = {
                       ...e,
                       [o.field.text]: {
-                        "en-US": i
+                        "en-US": n
                       }
                     };
-                    s(l);
+                    s(d);
                   },
                   typeFont: e[o.field.type],
-                  setTypeFont: (i) => {
-                    const l = {
+                  setTypeFont: (n) => {
+                    const d = {
                       ...e,
-                      [o.field.type]: i
+                      [o.field.type]: n
                     };
-                    s(l);
+                    s(d);
                   },
                   subtitle: o.label
                 }
               );
             if (o.type === "input")
               return /* @__PURE__ */ t.jsx(
-                K,
+                tt,
                 {
-                  onChange: (i) => {
-                    const l = {
+                  onChange: (n) => {
+                    const d = {
                       ...e,
-                      [o.field]: i
+                      [o.field]: n
                     };
-                    s(l);
+                    s(d);
                   },
                   value: e[o.field] || "",
                   label: o.label,
@@ -1140,16 +1410,16 @@ const Ye = (d) => {
                 }
               );
             if (o.type === "inputSwitch")
-              return /* @__PURE__ */ t.jsxs("div", { className: z.link, children: [
+              return /* @__PURE__ */ t.jsxs("div", { className: V.link, children: [
                 /* @__PURE__ */ t.jsx(
-                  K,
+                  tt,
                   {
-                    onChange: (i) => {
-                      const l = {
+                    onChange: (n) => {
+                      const d = {
                         ...e,
-                        [o.field.text]: i
+                        [o.field.text]: n
                       };
-                      s(l);
+                      s(d);
                     },
                     value: e[o.field.text] || "",
                     label: o.inputLabel,
@@ -1157,31 +1427,31 @@ const Ye = (d) => {
                   }
                 ),
                 /* @__PURE__ */ t.jsx(
-                  et,
+                  st,
                   {
                     current: !!e[o.field.switch] || !1,
                     label: o.switchLabel,
-                    onChange: (i) => {
-                      const l = {
+                    onChange: (n) => {
+                      const d = {
                         ...e,
-                        [o.field.switch]: i
+                        [o.field.switch]: n
                       };
-                      s(l);
+                      s(d);
                     }
                   }
                 )
               ] });
             if (o.type === "select")
               return /* @__PURE__ */ t.jsx(
-                tt,
+                et,
                 {
                   options: o.itemsOptions,
-                  onChange: (i) => {
-                    const l = {
+                  onChange: (n) => {
+                    const d = {
                       ...e,
-                      [o.field]: i
+                      [o.field]: n
                     };
-                    s(l);
+                    s(d);
                   },
                   label: o.label,
                   value: e[o.field] || "String",
@@ -1194,92 +1464,92 @@ const Ye = (d) => {
     );
   }
 );
-function Ls(d) {
-  const { product: a, children: e } = d, { attributes: s, listeners: n, setNodeRef: c, transform: r, transition: o, isDragging: i } = Tt({
+function hn(u) {
+  const { product: a, children: e } = u, { attributes: s, listeners: i, setNodeRef: c, transform: l, transition: o, isDragging: n } = Ct({
     id: a.id
-  }), l = {
-    transform: Pt.Transform.toString(r),
+  }), d = {
+    transform: St.Transform.toString(l),
     transition: o
   };
   return /* @__PURE__ */ t.jsx(
     "div",
     {
       ref: c,
-      style: l,
-      className: `${z.product} ${i ? z.dragging : ""}`,
+      style: d,
+      className: `${V.product} ${n ? V.dragging : ""}`,
       ...s,
-      ...n,
+      ...i,
       children: e
     }
   );
 }
-const $a = (d) => {
+const Ka = (u) => {
   const {
     isActiveItems: a,
     setIsActiveItems: e,
     items: s,
-    setItems: n,
+    setItems: i,
     other: c,
-    title: r,
+    title: l,
     subtitle: o,
-    editable: i = !0,
-    draggable: l = !1,
+    editable: n = !0,
+    draggable: d = !1,
     withImage: j = !1,
-    deletable: h = !0,
-    addable: p = !0,
-    itemsType: m,
-    itemsPlaceholder: f = "",
-    itemsOptions: u,
-    hasRangeSelector: S = !1,
-    rangeSelectorOptions: D,
-    modalOptions: I,
+    deletable: p = !0,
+    addable: r = !0,
+    itemsType: y,
+    itemsPlaceholder: h = "",
+    itemsOptions: _,
+    hasRangeSelector: w = !1,
+    rangeSelectorOptions: H,
+    modalOptions: $,
     addableOptions: g = {}
-  } = d, [w, E] = x.useState(null), [R, C] = x.useState({
+  } = u, [B, E] = f.useState(null), [F, T] = f.useState({
     top: 0,
     left: 0
-  }), [P, st] = x.useState(null), y = x.useRef(null), [M, B] = x.useState(!1), X = $t(
-    Nt(Bt, {
+  }), [v, A] = f.useState(null), x = f.useRef(null), [I, C] = f.useState(!1), R = yt(
+    kt(wt, {
       activationConstraint: {
         distance: 5
       }
     })
   );
-  x.useEffect(() => {
-    const v = () => {
-      E(null), B(!1);
+  f.useEffect(() => {
+    const k = () => {
+      E(null), C(!1);
     };
-    return document.body.addEventListener("click", v), E(null), B(!1), () => {
-      E(null), B(!1), document.body.removeEventListener("click", v);
+    return document.body.addEventListener("click", k), E(null), C(!1), () => {
+      E(null), C(!1), document.body.removeEventListener("click", k);
     };
-  }, []), x.useEffect(() => {
-    if (w) {
-      const v = [...s].map((q) => q.id === w.id ? w : q);
-      n(v);
+  }, []), f.useEffect(() => {
+    if (B) {
+      const k = [...s].map((D) => D.id === B.id ? B : D);
+      i(k);
     }
-  }, [w]), x.useEffect(() => {
-    if (y.current && P) {
-      const v = y.current.getBoundingClientRect().height, q = window.innerHeight;
-      let _ = P.top;
-      _ + v > q + window.scrollY - 200 && (_ = q + window.scrollY - v - 200), _ < 0 && (_ = 10), C({
-        top: _,
-        left: P.left
+  }, [B]), f.useEffect(() => {
+    if (x.current && v) {
+      const k = x.current.getBoundingClientRect().height, D = window.innerHeight;
+      let m = v.top;
+      m + k > D + window.scrollY - 200 && (m = D + window.scrollY - k - 200), m < 0 && (m = 10), T({
+        top: m,
+        left: v.left
       });
     }
-  }, [y.current, P]);
-  const O = (v, q) => {
-    v.stopPropagation();
-    const _ = v.target.getBoundingClientRect();
-    st({
-      top: _.top + window.scrollY,
-      left: _.left - 30
-    }), E(q), B(!0);
+  }, [x.current, v]);
+  const O = (k, D) => {
+    k.stopPropagation();
+    const m = k.target.getBoundingClientRect();
+    A({
+      top: m.top + window.scrollY,
+      left: m.left - 30
+    }), E(D), C(!0);
   };
-  function L(v) {
+  function U(k) {
     if (j)
-      return v ? /* @__PURE__ */ t.jsx(
+      return k ? /* @__PURE__ */ t.jsx(
         "img",
         {
-          src: `https://imagedelivery.net/${v[0]}/w=1000`,
+          src: `https://imagedelivery.net/${k[0]}/w=1000`,
           alt: "image",
           width: 16,
           height: 16
@@ -1294,19 +1564,19 @@ const $a = (d) => {
         }
       );
   }
-  const Z = (v) => {
-    const { active: q, over: _ } = v;
-    if (_ && q.id !== _.id) {
-      const k = s.findIndex((U) => U.id === q.id), T = s.findIndex((U) => U.id === _.id);
-      if (k !== -1 && T !== -1) {
-        const U = [...s], [Y] = U.splice(k, 1);
-        U.splice(T, 0, Y), n(U);
+  const nt = (k) => {
+    const { active: D, over: m } = k;
+    if (m && D.id !== m.id) {
+      const N = s.findIndex((L) => L.id === D.id), M = s.findIndex((L) => L.id === m.id);
+      if (N !== -1 && M !== -1) {
+        const L = [...s], [X] = L.splice(N, 1);
+        L.splice(M, 0, X), i(L);
       }
     }
-  }, rt = (v) => {
-    var _;
-    const q = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-      l && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
+  }, dt = (k) => {
+    var m;
+    const D = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+      d && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
         b,
         {
           name: "DotsSixVertical",
@@ -1315,71 +1585,71 @@ const $a = (d) => {
           height: 20
         }
       ) }),
-      m === "select" && u && /* @__PURE__ */ t.jsx(
-        tt,
+      y === "select" && _ && /* @__PURE__ */ t.jsx(
+        et,
         {
-          onChange: (k) => {
-            const U = [...s].map((Y) => Y.id === v.id ? {
-              ...v,
+          onChange: (N) => {
+            const L = [...s].map((X) => X.id === k.id ? {
+              ...k,
               name: {
-                "en-US": k
+                "en-US": N
               }
-            } : Y);
+            } : X);
             E({
-              ...v,
+              ...k,
               name: {
-                "en-US": k
+                "en-US": N
               }
-            }), n([...U]);
+            }), i([...L]);
           },
-          value: v.name["en-US"],
-          options: u.filter(
-            (k) => !s.find((T) => T.name["en-US"] === k)
+          value: k.name["en-US"],
+          options: _.filter(
+            (N) => !s.find((M) => M.name["en-US"] === N)
           ),
-          leftAddon: L(v.images)
+          leftAddon: U(k.images)
         }
       ),
-      m === "input" && /* @__PURE__ */ t.jsx(
-        K,
+      y === "input" && /* @__PURE__ */ t.jsx(
+        tt,
         {
-          onChange: (k) => {
-            const U = [...s].map((Y) => Y.id === v.id ? {
-              ...v,
+          onChange: (N) => {
+            const L = [...s].map((X) => X.id === k.id ? {
+              ...k,
               name: {
-                "en-US": k
+                "en-US": N
               }
-            } : Y);
-            n([...U]);
+            } : X);
+            i([...L]);
           },
-          value: v.name["en-US"],
-          placeholder: f
+          value: k.name["en-US"],
+          placeholder: h
         }
       ),
-      m === "image" && /* @__PURE__ */ t.jsx(
-        ft,
+      y === "image" && /* @__PURE__ */ t.jsx(
+        bt,
         {
-          onChange: (k) => {
-            const U = [...s].map((Y) => Y.id === v.id ? {
-              ...v,
-              images: k
-            } : Y);
-            n([...U]);
+          onChange: (N) => {
+            const L = [...s].map((X) => X.id === k.id ? {
+              ...k,
+              images: N
+            } : X);
+            i([...L]);
           },
-          activeImage: (_ = s.find((k) => k.id === v.id)) == null ? void 0 : _.images[0]
+          activeImage: (m = s.find((N) => N.id === k.id)) == null ? void 0 : m.images[0]
         }
       ),
-      /* @__PURE__ */ t.jsxs("div", { className: z.buttons, children: [
-        i && /* @__PURE__ */ t.jsx("div", { className: z.deleteButton, children: /* @__PURE__ */ t.jsx(
+      /* @__PURE__ */ t.jsxs("div", { className: V.buttons, children: [
+        n && /* @__PURE__ */ t.jsx("div", { className: V.deleteButton, children: /* @__PURE__ */ t.jsx(
           b,
           {
             name: "Sliders",
             hoverable: !0,
             width: 20,
             height: 20,
-            onClick: (k) => O(k, v)
+            onClick: (N) => O(N, k)
           }
         ) }),
-        h && /* @__PURE__ */ t.jsx("div", { className: z.deleteButton, children: /* @__PURE__ */ t.jsx(
+        p && /* @__PURE__ */ t.jsx("div", { className: V.deleteButton, children: /* @__PURE__ */ t.jsx(
           b,
           {
             name: "Trash",
@@ -1387,68 +1657,68 @@ const $a = (d) => {
             width: 20,
             height: 20,
             fill: "#C12A2A",
-            onClick: () => n(s.filter((k) => k.id !== v.id))
+            onClick: () => i(s.filter((N) => N.id !== k.id))
           }
         ) })
       ] })
     ] });
-    return l ? /* @__PURE__ */ t.jsx(
-      Ls,
+    return d ? /* @__PURE__ */ t.jsx(
+      hn,
       {
-        product: v,
-        children: q
+        product: k,
+        children: D
       },
-      v.id
+      k.id
     ) : /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: z.product,
-        children: q
+        className: V.product,
+        children: D
       },
-      v.id
+      k.id
     );
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: z.productsBlock, children: [
-    (r || a !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: z.top, children: [
-      r && /* @__PURE__ */ t.jsx("h3", { className: z.title, children: r }),
+  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(
-        et,
+        st,
         {
           current: a,
-          onChange: (v) => e == null ? void 0 : e(v)
+          onChange: (k) => e == null ? void 0 : e(k)
         }
       )
     ] }),
-    w && i && I && M && /* @__PURE__ */ t.jsx(
-      Hs,
+    B && n && $ && I && /* @__PURE__ */ t.jsx(
+      mn,
       {
-        ref: y,
-        activeItem: w,
+        ref: x,
+        activeItem: B,
         setActiveItem: E,
-        popupPosition: R,
-        modalOptions: I,
-        setIsOpenModal: B
+        popupPosition: F,
+        modalOptions: $,
+        setIsOpenModal: C
       }
     ),
-    S && D && /* @__PURE__ */ t.jsx(Ot, { ...D }),
-    /* @__PURE__ */ t.jsxs("div", { className: z.products, children: [
-      o && /* @__PURE__ */ t.jsx("h5", { className: z.subtitle, children: o }),
-      l ? /* @__PURE__ */ t.jsx(
-        wt,
+    w && H && /* @__PURE__ */ t.jsx(qt, { ...H }),
+    /* @__PURE__ */ t.jsxs("div", { className: V.products, children: [
+      o && /* @__PURE__ */ t.jsx("h5", { className: V.subtitle, children: o }),
+      d ? /* @__PURE__ */ t.jsx(
+        $t,
         {
-          sensors: X,
-          onDragEnd: Z,
+          sensors: R,
+          onDragEnd: nt,
           children: /* @__PURE__ */ t.jsx(
-            St,
+            It,
             {
-              items: s.map((v) => v.id),
-              strategy: Ct,
-              children: s.map((v) => rt(v))
+              items: s.map((k) => k.id),
+              strategy: Nt,
+              children: s.map((k) => dt(k))
             }
           )
         }
-      ) : s.map((v) => rt(v)),
-      p && /* @__PURE__ */ t.jsx(
+      ) : s.map((k) => dt(k)),
+      r && /* @__PURE__ */ t.jsx(
         "div",
         {
           style: {
@@ -1457,49 +1727,49 @@ const $a = (d) => {
             justifyContent: "center"
           },
           children: /* @__PURE__ */ t.jsx(
-            lt,
+            ot,
             {
               withoutHover: !0,
-              className: z.button,
+              className: V.button,
               size: "s",
               onClick: () => {
-                const v = [...s];
-                let q = null;
-                if (u) {
-                  for (let _ = 0; _ < u.length; _++)
-                    if (!s.find((k) => k.name["en-US"] === u[_])) {
-                      q = u[_];
+                const k = [...s];
+                let D = null;
+                if (_) {
+                  for (let m = 0; m < _.length; m++)
+                    if (!s.find((N) => N.name["en-US"] === _[m])) {
+                      D = _[m];
                       break;
                     }
                 }
-                m === "select" && u ? v.push({
+                y === "select" && _ ? k.push({
                   name: {
-                    "en-US": q || u[0]
+                    "en-US": D || _[0]
                   },
-                  id: mt(),
+                  id: ht(),
                   ...g,
                   maxSymbols: 100
                   // пример значения
-                }) : m === "input" ? v.push({
+                }) : y === "input" ? k.push({
                   name: {
                     "en-US": ""
                   },
-                  id: mt(),
+                  id: ht(),
                   ...g,
                   maxSymbols: 100
-                }) : v.push({
+                }) : k.push({
                   name: {
                     "en-US": `Image ${s.length + 1}`
                   },
-                  id: mt(),
+                  id: ht(),
                   ...g,
                   maxSymbols: 100
-                }), n(v);
+                }), i(k);
               },
               style: {
                 width: "fit-content"
               },
-              children: /* @__PURE__ */ t.jsxs("div", { className: z.addButton, children: [
+              children: /* @__PURE__ */ t.jsxs("div", { className: V.addButton, children: [
                 /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
                 /* @__PURE__ */ t.jsx(
                   b,
@@ -1515,61 +1785,61 @@ const $a = (d) => {
         }
       )
     ] }),
-    c !== void 0 && /* @__PURE__ */ t.jsx(yt, { items: c })
+    c !== void 0 && /* @__PURE__ */ t.jsx(Tt, { items: c })
   ] });
-}, zs = "_title_bn7sv_1", Rs = "_subtitle_bn7sv_5", Fs = "_header_bn7sv_12", Vs = "_text_bn7sv_13", Ys = "_productsBlock_bn7sv_14", Gs = "_buttonsBlock_bn7sv_15", Xs = "_top_bn7sv_26", Ws = "_itemsBlock_bn7sv_35", Js = "_typeTexts_bn7sv_41", Qs = "_block_bn7sv_48", Ks = "_active_bn7sv_60", Zs = "_products_bn7sv_14", tn = "_product_bn7sv_14", en = "_button_bn7sv_15", sn = "_image_bn7sv_90", nn = "_info_bn7sv_97", on = "_name_bn7sv_109", an = "_buttons_bn7sv_15", cn = "_modal_bn7sv_120", ln = "_other_bn7sv_139", rn = "_options_bn7sv_145", dn = "_closeIcon_bn7sv_153", ct = {
-  title: zs,
-  subtitle: Rs,
-  header: Fs,
-  text: Vs,
-  productsBlock: Ys,
-  buttonsBlock: Gs,
-  top: Xs,
-  itemsBlock: Ws,
-  typeTexts: Js,
-  block: Qs,
-  active: Ks,
-  products: Zs,
-  product: tn,
-  button: en,
-  image: sn,
-  info: nn,
-  name: on,
-  buttons: an,
-  modal: cn,
-  other: ln,
-  options: rn,
-  closeIcon: dn
-}, un = x.forwardRef((d, a) => {
-  const { activeButton: e, setActiveButton: s, popupPosition: n } = d, [c, r] = x.useState(e.typesText), [o, i] = x.useState(e.destination), [l, j] = x.useState(e.page), [h, p] = x.useState(e.link || ""), [m, f] = x.useState(e.text || ""), [u, S] = x.useState(e.openInNewTab), { pages: D } = Ft();
-  return x.useEffect(() => {
+}, pn = "_title_bn7sv_1", fn = "_subtitle_bn7sv_5", gn = "_header_bn7sv_12", xn = "_text_bn7sv_13", bn = "_productsBlock_bn7sv_14", vn = "_buttonsBlock_bn7sv_15", jn = "_top_bn7sv_26", yn = "_itemsBlock_bn7sv_35", kn = "_typeTexts_bn7sv_41", $n = "_block_bn7sv_48", In = "_active_bn7sv_60", Nn = "_products_bn7sv_14", wn = "_product_bn7sv_14", Cn = "_button_bn7sv_15", Sn = "_image_bn7sv_90", Bn = "_info_bn7sv_97", Tn = "_name_bn7sv_109", Pn = "_buttons_bn7sv_15", An = "_modal_bn7sv_120", On = "_other_bn7sv_139", Mn = "_options_bn7sv_145", qn = "_closeIcon_bn7sv_153", rt = {
+  title: pn,
+  subtitle: fn,
+  header: gn,
+  text: xn,
+  productsBlock: bn,
+  buttonsBlock: vn,
+  top: jn,
+  itemsBlock: yn,
+  typeTexts: kn,
+  block: $n,
+  active: In,
+  products: Nn,
+  product: wn,
+  button: Cn,
+  image: Sn,
+  info: Bn,
+  name: Tn,
+  buttons: Pn,
+  modal: An,
+  other: On,
+  options: Mn,
+  closeIcon: qn
+}, En = f.forwardRef((u, a) => {
+  const { activeButton: e, setActiveButton: s, popupPosition: i } = u, [c, l] = f.useState(e.typesText), [o, n] = f.useState(e.destination), [d, j] = f.useState(e.page), [p, r] = f.useState(e.link || ""), [y, h] = f.useState(e.text || { "en-US": "" }), [_, w] = f.useState(e.openInNewTab), { pages: H } = Vt();
+  return f.useEffect(() => {
     s({
       ...e,
       ...{
-        text: m,
-        link: h,
+        text: y,
+        link: p,
         destination: o,
         typesText: c,
-        page: l,
-        openInNewTab: u
+        page: d,
+        openInNewTab: _
       }
     });
-  }, [c, o, h, m, l, u]), /* @__PURE__ */ t.jsxs(
+  }, [c, o, p, y, d, _]), console.log(y), /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: ct.modal,
-      onClick: (I) => {
-        I.stopPropagation();
+      className: rt.modal,
+      onClick: ($) => {
+        $.stopPropagation();
       },
       style: {
-        top: `${n.top}px`,
-        left: `${n.left}px`
+        top: `${i.top}px`,
+        left: `${i.left}px`
       },
       ref: a,
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: ct.top, children: [
-          /* @__PURE__ */ t.jsx("h3", { className: ct.title, children: e.type }),
-          /* @__PURE__ */ t.jsx("div", { className: ct.closeIcon, children: /* @__PURE__ */ t.jsx(
+        /* @__PURE__ */ t.jsxs("div", { className: rt.top, children: [
+          /* @__PURE__ */ t.jsx("h3", { className: rt.title, children: e.type }),
+          /* @__PURE__ */ t.jsx("div", { className: rt.closeIcon, children: /* @__PURE__ */ t.jsx(
             b,
             {
               name: "X",
@@ -1580,161 +1850,161 @@ const $a = (d) => {
             }
           ) })
         ] }),
-        /* @__PURE__ */ t.jsxs("div", { className: ct.options, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: rt.options, children: [
           /* @__PURE__ */ t.jsx(
-            tt,
+            et,
             {
               label: "Destination",
-              onChange: (I) => i(I),
-              options: ["Go to Page", "Open Link"].filter((I) => I !== o),
+              onChange: ($) => n($),
+              options: ["Go to Page", "Open Link"].filter(($) => $ !== o),
               value: o
             }
           ),
           o === "Go to Page" ? /* @__PURE__ */ t.jsx(
-            tt,
+            et,
             {
               label: "Go to",
-              onChange: (I) => j(I),
-              options: D ? Object.values(D).filter((I) => I.name !== l).map((I) => I.name) : [],
-              value: l
+              onChange: ($) => j($),
+              options: H ? Object.values(H).filter(($) => $.name !== d).map(($) => $.name) : [],
+              value: d
             }
           ) : /* @__PURE__ */ t.jsx(
-            K,
+            tt,
             {
-              onChange: (I) => p(I),
-              value: h,
+              onChange: ($) => r($),
+              value: p,
               placeholder: "https://",
               label: "Link"
             }
           ),
           /* @__PURE__ */ t.jsx(
-            et,
+            st,
             {
               current: e.openInNewTab,
               label: "Open in new tab",
-              onChange: (I) => S(I)
+              onChange: ($) => w($)
             }
           ),
           /* @__PURE__ */ t.jsx(
-            qt,
+            Et,
             {
-              onChange: (I) => f({ "en-US": I }),
-              value: m["en-US"],
+              onChange: ($) => h({ "en-US": $ }),
+              value: y["en-US"],
               label: "Text",
               maxLength: 150
             }
           ),
           /* @__PURE__ */ t.jsx(
-            Ht,
+            Rt,
             {
               typesText: c,
-              setTypesText: r
+              setTypesText: l
             }
           )
         ] })
       ]
     }
   );
-}), _n = "_subtitle_jql1y_1", mn = "_header_jql1y_8", hn = "_text_jql1y_9", pn = "_productsBlock_jql1y_10", xn = "_buttonsBlock_jql1y_11", gn = "_top_jql1y_23", fn = "_itemsBlock_jql1y_32", bn = "_typeTexts_jql1y_38", vn = "_block_jql1y_45", jn = "_active_jql1y_58", yn = "_products_jql1y_10", kn = "_product_jql1y_10", In = "_button_jql1y_11", $n = "_image_jql1y_88", Nn = "_info_jql1y_95", wn = "_name_jql1y_107", Sn = "_buttons_jql1y_11", Cn = "_modal_jql1y_118", Bn = "_other_jql1y_138", Tn = "_options_jql1y_144", Pn = "_addButton_jql1y_150", An = "_deleteButton_jql1y_165", it = {
-  subtitle: _n,
-  header: mn,
-  text: hn,
-  productsBlock: pn,
-  buttonsBlock: xn,
-  top: gn,
-  itemsBlock: fn,
-  typeTexts: bn,
-  block: vn,
-  active: jn,
-  products: yn,
-  product: kn,
-  button: In,
-  image: $n,
-  info: Nn,
-  name: wn,
-  buttons: Sn,
-  modal: Cn,
-  other: Bn,
-  options: Tn,
-  addButton: Pn,
-  deleteButton: An
-}, Mn = (d) => {
-  const { buttons: a, setButtons: e, deletable: s = !0, addable: n = !0 } = d, [c, r] = x.useState(null), [o, i] = x.useState({
+}), Dn = "_subtitle_jql1y_1", Un = "_header_jql1y_8", Hn = "_text_jql1y_9", Rn = "_productsBlock_jql1y_10", Ln = "_buttonsBlock_jql1y_11", zn = "_top_jql1y_23", Fn = "_itemsBlock_jql1y_32", Vn = "_typeTexts_jql1y_38", Yn = "_block_jql1y_45", Gn = "_active_jql1y_58", Xn = "_products_jql1y_10", Wn = "_product_jql1y_10", Jn = "_button_jql1y_11", Qn = "_image_jql1y_88", Kn = "_info_jql1y_95", Zn = "_name_jql1y_107", ti = "_buttons_jql1y_11", ei = "_modal_jql1y_118", si = "_other_jql1y_138", ni = "_options_jql1y_144", ii = "_addButton_jql1y_150", oi = "_deleteButton_jql1y_165", at = {
+  subtitle: Dn,
+  header: Un,
+  text: Hn,
+  productsBlock: Rn,
+  buttonsBlock: Ln,
+  top: zn,
+  itemsBlock: Fn,
+  typeTexts: Vn,
+  block: Yn,
+  active: Gn,
+  products: Xn,
+  product: Wn,
+  button: Jn,
+  image: Qn,
+  info: Kn,
+  name: Zn,
+  buttons: ti,
+  modal: ei,
+  other: si,
+  options: ni,
+  addButton: ii,
+  deleteButton: oi
+}, ai = (u) => {
+  const { buttons: a, setButtons: e, deletable: s = !0, addable: i = !0, editable: c = !0 } = u, [l, o] = f.useState(null), [n, d] = f.useState({
     top: 0,
     left: 0
-  }), [l, j] = x.useState(null), h = x.useRef(null);
-  x.useEffect(() => {
-    const m = () => {
-      r(null);
+  }), [j, p] = f.useState(null), r = f.useRef(null);
+  f.useEffect(() => {
+    const h = () => {
+      o(null);
     };
-    return document.body.addEventListener("click", m), r(null), () => {
-      r(null), document.body.removeEventListener("click", m);
+    return document.body.addEventListener("click", h), o(null), () => {
+      o(null), document.body.removeEventListener("click", h);
     };
-  }, []), x.useEffect(() => {
-    if (c) {
-      const m = [...a].map((f) => f.id === c.id ? c : f);
-      e(m);
+  }, []), f.useEffect(() => {
+    if (l) {
+      const h = [...a].map((_) => _.id === l.id ? l : _);
+      e(h);
     }
-  }, [c]), x.useEffect(() => {
-    if (h.current && l) {
-      const m = h.current.getBoundingClientRect().height, f = window.innerHeight;
-      let u = l.top;
-      u + m > f + window.scrollY - 200 && (u = f + window.scrollY - m - 200), u < 0 && (u = 10), i({
-        top: u,
-        left: l.left
+  }, [l]), f.useEffect(() => {
+    if (r.current && j) {
+      const h = r.current.getBoundingClientRect().height, _ = window.innerHeight;
+      let w = j.top;
+      w + h > _ + window.scrollY - 200 && (w = _ + window.scrollY - h - 200), w < 0 && (w = 10), d({
+        top: w,
+        left: j.left
       });
     }
-  }, [h.current, l]);
-  const p = (m, f) => {
-    m.stopPropagation();
-    const u = m.target.getBoundingClientRect();
-    j({
-      top: u.top + window.scrollY,
-      left: u.left - 30
-    }), r(f);
+  }, [r.current, j]);
+  const y = (h, _) => {
+    h.stopPropagation();
+    const w = h.target.getBoundingClientRect();
+    p({
+      top: w.top + window.scrollY - 70,
+      left: w.left - (i ? 30 : 65)
+    }), o(_);
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: it.products, children: [
-    /* @__PURE__ */ t.jsx("h5", { className: it.subtitle, children: "Button Type" }),
-    a.map((m) => /* @__PURE__ */ t.jsxs(
+  return /* @__PURE__ */ t.jsxs("div", { className: at.products, children: [
+    /* @__PURE__ */ t.jsx("h5", { className: at.subtitle, children: "Button Type" }),
+    a.map((h) => /* @__PURE__ */ t.jsxs(
       "div",
       {
-        className: it.product,
+        className: at.product,
         children: [
           /* @__PURE__ */ t.jsx(
-            tt,
+            et,
             {
-              onChange: (f) => {
-                const S = [...a].map((D) => D.id === m.id ? {
-                  ...m,
-                  type: f
-                } : D);
-                e(S);
+              onChange: (_) => {
+                const H = [...a].map(($) => $.id === h.id ? {
+                  ...h,
+                  type: _
+                } : $);
+                e(H);
               },
-              value: m.type,
+              value: h.type,
               options: ["Primary", "Secondary", "Tertiary"]
             }
           ),
-          /* @__PURE__ */ t.jsxs("div", { className: it.buttons, children: [
-            /* @__PURE__ */ t.jsx("div", { className: it.deleteButton, children: /* @__PURE__ */ t.jsx(
+          /* @__PURE__ */ t.jsxs("div", { className: at.buttons, children: [
+            c && /* @__PURE__ */ t.jsx("div", { className: at.deleteButton, children: /* @__PURE__ */ t.jsx(
               b,
               {
                 name: "Sliders",
                 hoverable: !0,
                 width: 20,
                 height: 20,
-                onClick: (f) => {
-                  p(f, m);
+                onClick: (_) => {
+                  y(_, h);
                 }
               }
             ) }),
-            s && /* @__PURE__ */ t.jsx("div", { className: it.deleteButton, children: /* @__PURE__ */ t.jsx(
+            s && /* @__PURE__ */ t.jsx("div", { className: at.deleteButton, children: /* @__PURE__ */ t.jsx(
               b,
               {
                 name: "Trash",
                 hoverable: !0,
                 onClick: () => {
-                  const f = a.filter((u) => u.id !== m.id);
-                  e(f);
+                  const _ = a.filter((w) => w.id !== h.id);
+                  e(_);
                 },
                 width: 20,
                 height: 20,
@@ -1744,18 +2014,18 @@ const $a = (d) => {
           ] })
         ]
       },
-      m.id
+      h.id
     )),
-    c && /* @__PURE__ */ t.jsx(
-      un,
+    l && /* @__PURE__ */ t.jsx(
+      En,
       {
-        ref: h,
-        activeButton: c,
-        setActiveButton: r,
-        popupPosition: o
+        ref: r,
+        activeButton: l,
+        setActiveButton: o,
+        popupPosition: n
       }
     ),
-    n && /* @__PURE__ */ t.jsx(
+    i && /* @__PURE__ */ t.jsx(
       "div",
       {
         style: {
@@ -1764,16 +2034,16 @@ const $a = (d) => {
           justifyContent: "center"
         },
         children: /* @__PURE__ */ t.jsx(
-          lt,
+          ot,
           {
             withoutHover: !0,
-            className: it.button,
+            className: at.button,
             size: "s",
             onClick: () => {
-              const m = [...a];
-              m.push({
+              const h = [...a];
+              h.push({
                 type: "Primary",
-                id: mt(),
+                id: ht(),
                 typesText: [],
                 destination: "Go to Page",
                 text: {
@@ -1781,12 +2051,12 @@ const $a = (d) => {
                 },
                 page: "home",
                 openInNewTab: !0
-              }), e(m);
+              }), e(h);
             },
             style: {
               width: "fit-content"
             },
-            children: /* @__PURE__ */ t.jsxs("div", { className: it.addButton, children: [
+            children: /* @__PURE__ */ t.jsxs("div", { className: at.addButton, children: [
               /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
               /* @__PURE__ */ t.jsx(
                 b,
@@ -1802,77 +2072,78 @@ const $a = (d) => {
       }
     )
   ] });
-}, Na = (d) => {
-  const { isActiveButtons: a, setIsActiveButtons: e, buttons: s, setButtons: n } = d;
-  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" }),
+}, Za = (u) => {
+  const { isActiveButtons: a, setIsActiveButtons: e, buttons: s, setButtons: i, editable: c = !0 } = u;
+  return /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsxs("div", { className: rt.buttonsBlock, children: [
+    /* @__PURE__ */ t.jsxs("div", { className: rt.top, children: [
+      /* @__PURE__ */ t.jsx("h3", { className: rt.title, children: "Buttons" }),
       /* @__PURE__ */ t.jsx(
-        et,
+        st,
         {
           current: a,
-          onChange: (c) => e(c)
+          onChange: (l) => e(l)
         }
       )
     ] }),
     /* @__PURE__ */ t.jsx(
-      Mn,
+      ai,
       {
         buttons: s,
-        setButtons: n
+        setButtons: i,
+        editable: c
       }
     )
   ] }) });
-}, On = "_wrapper_m18qi_1", qn = "_subtitle_m18qi_7", En = "_content_m18qi_14", Un = "_range_m18qi_22", Dn = "_track_m18qi_27", Hn = "_progress_m18qi_36", Ln = "_dots_m18qi_46", zn = "_dot_m18qi_46", Rn = "_active_m18qi_65", Fn = "_input_m18qi_77", Vn = "_countBlock_m18qi_91", Yn = "_count_m18qi_91", Gn = "_controls_m18qi_107", Xn = "_button_m18qi_113", G = {
-  wrapper: On,
-  subtitle: qn,
-  content: En,
-  range: Un,
-  track: Dn,
-  progress: Hn,
-  dots: Ln,
-  dot: zn,
-  active: Rn,
-  input: Fn,
-  countBlock: Vn,
-  count: Yn,
-  controls: Gn,
-  button: Xn
-}, Ot = (d) => {
-  const { label: a, min: e = 1, max: s = 4, step: n = 1, count: c, setCount: r } = d, [o, i] = x.useState(!1), l = Array.from({ length: (s - e) / n + 1 }), j = (c - e) / (s - e) * 100, h = () => {
-    c < s && r(c + n);
-  }, p = () => {
-    c > e && r(c - n);
-  }, m = (f) => {
-    const u = e + f * n;
-    r(u);
+}, ci = "_wrapper_m18qi_1", li = "_subtitle_m18qi_7", ri = "_content_m18qi_14", di = "_range_m18qi_22", ui = "_track_m18qi_27", _i = "_progress_m18qi_36", mi = "_dots_m18qi_46", hi = "_dot_m18qi_46", pi = "_active_m18qi_65", fi = "_input_m18qi_77", gi = "_countBlock_m18qi_91", xi = "_count_m18qi_91", bi = "_controls_m18qi_107", vi = "_button_m18qi_113", W = {
+  wrapper: ci,
+  subtitle: li,
+  content: ri,
+  range: di,
+  track: ui,
+  progress: _i,
+  dots: mi,
+  dot: hi,
+  active: pi,
+  input: fi,
+  countBlock: gi,
+  count: xi,
+  controls: bi,
+  button: vi
+}, qt = (u) => {
+  const { label: a, min: e = 1, max: s = 4, step: i = 1, count: c, setCount: l } = u, [o, n] = f.useState(!1), d = Array.from({ length: (s - e) / i + 1 }), j = (c - e) / (s - e) * 100, p = () => {
+    c < s && l(c + i);
+  }, r = () => {
+    c > e && l(c - i);
+  }, y = (h) => {
+    const _ = e + h * i;
+    l(_);
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: G.wrapper, children: [
-    a && /* @__PURE__ */ t.jsx("h5", { className: G.subtitle, children: a }),
-    /* @__PURE__ */ t.jsxs("div", { className: G.content, children: [
-      /* @__PURE__ */ t.jsxs("div", { className: G.range, children: [
-        /* @__PURE__ */ t.jsx("div", { className: G.track }),
+  return /* @__PURE__ */ t.jsxs("div", { className: W.wrapper, children: [
+    a && /* @__PURE__ */ t.jsx("h5", { className: W.subtitle, children: a }),
+    /* @__PURE__ */ t.jsxs("div", { className: W.content, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: W.range, children: [
+        /* @__PURE__ */ t.jsx("div", { className: W.track }),
         /* @__PURE__ */ t.jsx(
           "div",
           {
-            className: G.progress,
+            className: W.progress,
             style: { width: `${j}%` }
           }
         ),
-        /* @__PURE__ */ t.jsx("div", { className: G.dots, children: l.map((f, u) => {
-          const S = u <= (c - e) / n;
+        /* @__PURE__ */ t.jsx("div", { className: W.dots, children: d.map((h, _) => {
+          const w = _ <= (c - e) / i;
           return /* @__PURE__ */ t.jsx(
             "button",
             {
-              onClick: () => m(u),
-              className: V(G.dot, {
-                [G.active]: S,
-                [G.inactive]: !S,
-                [G.dragging]: o
+              onClick: () => y(_),
+              className: Y(W.dot, {
+                [W.active]: w,
+                [W.inactive]: !w,
+                [W.dragging]: o
               }),
-              "aria-label": `Set value to ${e + u * n}`
+              "aria-label": `Set value to ${e + _ * i}`
             },
-            u
+            _
           );
         }) }),
         /* @__PURE__ */ t.jsx(
@@ -1881,39 +2152,39 @@ const $a = (d) => {
             type: "range",
             min: e,
             max: s,
-            step: n,
+            step: i,
             value: c,
-            onChange: (f) => r(Number(f.target.value)),
-            onMouseDown: () => i(!0),
-            onMouseUp: () => i(!1),
-            onTouchStart: () => i(!0),
-            onTouchEnd: () => i(!1),
-            className: G.input
+            onChange: (h) => l(Number(h.target.value)),
+            onMouseDown: () => n(!0),
+            onMouseUp: () => n(!1),
+            onTouchStart: () => n(!0),
+            onTouchEnd: () => n(!1),
+            className: W.input
           }
         )
       ] }),
-      /* @__PURE__ */ t.jsxs("div", { className: G.countBlock, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: W.countBlock, children: [
         /* @__PURE__ */ t.jsx(
-          K,
+          tt,
           {
             type: "number",
             min: e,
             max: s,
             paddingless: !0,
-            onChange: (f) => {
-              const u = Number(f);
-              u > s ? r(s) : u < e ? r(e) : r(u);
+            onChange: (h) => {
+              const _ = Number(h);
+              _ > s ? l(s) : _ < e ? l(e) : l(_);
             },
             value: String(c)
           }
         ),
-        /* @__PURE__ */ t.jsxs("div", { className: G.controls, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: W.controls, children: [
           /* @__PURE__ */ t.jsx(
             "button",
             {
-              onClick: h,
+              onClick: p,
               disabled: c >= s,
-              className: G.button,
+              className: W.button,
               "aria-label": "Increment count",
               children: /* @__PURE__ */ t.jsx(
                 b,
@@ -1928,9 +2199,9 @@ const $a = (d) => {
           /* @__PURE__ */ t.jsx(
             "button",
             {
-              onClick: p,
+              onClick: r,
               disabled: c <= e,
-              className: G.button,
+              className: W.button,
               "aria-label": "Decrement count",
               children: /* @__PURE__ */ t.jsx(
                 b,
@@ -1946,36 +2217,36 @@ const $a = (d) => {
       ] })
     ] })
   ] });
-}, Wn = "_title_ix5ax_1", Jn = "_subtitle_ix5ax_5", Qn = "_header_ix5ax_12", Kn = "_text_ix5ax_13", Zn = "_productsBlock_ix5ax_14", ti = "_top_ix5ax_26", ei = "_itemsBlock_ix5ax_35", si = "_typeTexts_ix5ax_41", ni = "_block_ix5ax_48", ii = "_active_ix5ax_61", oi = "_products_ix5ax_14", ai = "_product_ix5ax_14", ci = "_button_ix5ax_80", li = "_image_ix5ax_91", ri = "_info_ix5ax_98", di = "_name_ix5ax_110", ui = "_buttons_ix5ax_114", _i = "_modal_ix5ax_121", mi = "_link_ix5ax_141", hi = "_modalOptions_ix5ax_147", pi = "_addButton_ix5ax_160", xi = "_deleteButton_ix5ax_175", gi = "_closeIcon_ix5ax_187", F = {
-  title: Wn,
-  subtitle: Jn,
-  header: Qn,
-  text: Kn,
-  productsBlock: Zn,
-  top: ti,
-  itemsBlock: ei,
-  typeTexts: si,
-  block: ni,
-  active: ii,
-  products: oi,
-  product: ai,
-  button: ci,
-  image: li,
-  info: ri,
-  name: di,
-  buttons: ui,
-  modal: _i,
-  link: mi,
-  modalOptions: hi,
-  addButton: pi,
-  deleteButton: xi,
-  closeIcon: gi
-}, fi = (d) => {
-  const { activeItem: a, setActiveItem: e, popupPosition: s, setIsOpenModal: n, itemsOptions: c } = d, r = c.find((o) => o.id === a.listingId);
-  return r ? /* @__PURE__ */ t.jsxs(
+}, ji = "_title_ix5ax_1", yi = "_subtitle_ix5ax_5", ki = "_header_ix5ax_12", $i = "_text_ix5ax_13", Ii = "_productsBlock_ix5ax_14", Ni = "_top_ix5ax_26", wi = "_itemsBlock_ix5ax_35", Ci = "_typeTexts_ix5ax_41", Si = "_block_ix5ax_48", Bi = "_active_ix5ax_61", Ti = "_products_ix5ax_14", Pi = "_product_ix5ax_14", Ai = "_button_ix5ax_80", Oi = "_image_ix5ax_91", Mi = "_info_ix5ax_98", qi = "_name_ix5ax_110", Ei = "_buttons_ix5ax_114", Di = "_modal_ix5ax_121", Ui = "_link_ix5ax_141", Hi = "_modalOptions_ix5ax_147", Ri = "_addButton_ix5ax_160", Li = "_deleteButton_ix5ax_175", zi = "_closeIcon_ix5ax_187", G = {
+  title: ji,
+  subtitle: yi,
+  header: ki,
+  text: $i,
+  productsBlock: Ii,
+  top: Ni,
+  itemsBlock: wi,
+  typeTexts: Ci,
+  block: Si,
+  active: Bi,
+  products: Ti,
+  product: Pi,
+  button: Ai,
+  image: Oi,
+  info: Mi,
+  name: qi,
+  buttons: Ei,
+  modal: Di,
+  link: Ui,
+  modalOptions: Hi,
+  addButton: Ri,
+  deleteButton: Li,
+  closeIcon: zi
+}, Fi = (u) => {
+  const { activeItem: a, setActiveItem: e, popupPosition: s, setIsOpenModal: i, itemsOptions: c } = u, l = c.find((o) => o.id === a.listingId);
+  return l ? /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: F.modal,
+      className: G.modal,
       onClick: (o) => {
         o.stopPropagation();
       },
@@ -1984,31 +2255,31 @@ const $a = (d) => {
         left: `${s.left}px`
       },
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: F.top, children: [
-          /* @__PURE__ */ t.jsx("h3", { children: Vt(r.productData.name) }),
-          /* @__PURE__ */ t.jsx("div", { className: F.closeIcon, children: /* @__PURE__ */ t.jsx(
+        /* @__PURE__ */ t.jsxs("div", { className: G.top, children: [
+          /* @__PURE__ */ t.jsx("h3", { children: Yt(l.productData.name) }),
+          /* @__PURE__ */ t.jsx("div", { className: G.closeIcon, children: /* @__PURE__ */ t.jsx(
             b,
             {
               name: "X",
               height: 20,
               width: 20,
               onClick: () => {
-                n(!1), e(null);
+                i(!1), e(null);
               }
             }
           ) })
         ] }),
-        /* @__PURE__ */ t.jsx("div", { className: F.modalOptions, children: /* @__PURE__ */ t.jsx(
-          ft,
+        /* @__PURE__ */ t.jsx("div", { className: G.modalOptions, children: /* @__PURE__ */ t.jsx(
+          bt,
           {
             label: "Put up an attractive image",
-            activeImage: r.productData.images.length > 0 ? r.productData.images[0].cfId : void 0,
+            activeImage: l.productData.images.length > 0 ? l.productData.images[0].cfId : void 0,
             onChange: (o) => {
-              const i = {
+              const n = {
                 ...a,
                 image: o[0]
               };
-              e(i);
+              e(n);
             }
           }
         ) })
@@ -2016,81 +2287,81 @@ const $a = (d) => {
     }
   ) : null;
 };
-function bi(d) {
-  const { product: a, children: e } = d, { attributes: s, listeners: n, setNodeRef: c, transform: r, transition: o, isDragging: i } = Tt({
+function Vi(u) {
+  const { product: a, children: e } = u, { attributes: s, listeners: i, setNodeRef: c, transform: l, transition: o, isDragging: n } = Ct({
     id: String(a.listingId)
-  }), l = {
-    transform: Pt.Transform.toString(r),
+  }), d = {
+    transform: St.Transform.toString(l),
     transition: o
   };
   return /* @__PURE__ */ t.jsx(
     "div",
     {
       ref: c,
-      style: l,
-      className: `${F.product} ${i ? F.dragging : ""}`,
+      style: d,
+      className: `${G.product} ${n ? G.dragging : ""}`,
       ...s,
-      ...n,
+      ...i,
       children: e
     }
   );
 }
-const wa = (d) => {
+const tc = (u) => {
   const {
     isActiveItems: a,
     setIsActiveItems: e,
     items: s,
-    setItems: n,
+    setItems: i,
     other: c,
-    title: r,
+    title: l,
     subtitle: o,
-    editable: i = !0,
-    draggable: l = !1,
+    editable: n = !0,
+    draggable: d = !1,
     withImage: j = !1,
-    deletable: h = !0,
-    addable: p = !0,
-    itemsType: m,
-    itemsOptions: f
-  } = d, [u, S] = x.useState(
+    deletable: p = !0,
+    addable: r = !0,
+    itemsType: y,
+    itemsOptions: h
+  } = u, [_, w] = f.useState(
     null
-  ), [D, I] = x.useState({
+  ), [H, $] = f.useState({
     top: 0,
     left: 0
-  }), [g, w] = x.useState(!1), E = $t(
-    Nt(Bt, {
+  }), [g, B] = f.useState(!1), E = yt(
+    kt(wt, {
       activationConstraint: {
         distance: 5
       }
     })
   );
-  x.useEffect(() => {
-    const y = () => {
-      S(null), w(!1);
+  f.useEffect(() => {
+    const x = () => {
+      w(null), B(!1);
     };
-    return document.body.addEventListener("click", y), S(null), w(!1), () => {
-      S(null), w(!1), document.body.removeEventListener("click", y);
+    return document.body.addEventListener("click", x), w(null), B(!1), () => {
+      w(null), B(!1), document.body.removeEventListener("click", x);
     };
-  }, []), x.useEffect(() => {
-    if (u) {
-      const y = [...s].map((M) => M.listingId === u.listingId ? u : M);
-      n(y);
+  }, []), f.useEffect(() => {
+    if (_) {
+      const x = [...s].map((I) => I.listingId === _.listingId ? _ : I);
+      i(x);
     }
-  }, [u]);
-  const R = (y, M) => {
-    y.stopPropagation();
-    const B = y.target.getBoundingClientRect(), X = 100, O = window.innerHeight;
-    let L = B.top + window.scrollY;
-    L + X > O && (L = O - X - 20), w(!0), I({
-      top: L - 80,
-      left: B.left - 30
-    }), S(M);
+  }, [_]);
+  const F = (x, I) => {
+    x.stopPropagation();
+    const C = x.target.getBoundingClientRect(), R = 100, O = window.innerHeight;
+    let U = C.top + window.scrollY;
+    U + R > O && (U = O - R - 20), B(!0), $({
+      top: U - 80,
+      left: C.left - 30
+    }), w(I);
   };
-  function C(y) {
+  function T(x) {
     if (j)
-      return y ? /* @__PURE__ */ t.jsx(
+      return x ? /* @__PURE__ */ t.jsx(
         "img",
         {
-          src: `https://imagedelivery.net/${y}/w=1000`,
+          src: `https://imagedelivery.net/${x}/w=1000`,
           alt: "image",
           width: 16,
           height: 16
@@ -2105,20 +2376,20 @@ const wa = (d) => {
         }
       );
   }
-  const P = (y) => {
-    const { active: M, over: B } = y;
-    if (B && M.id !== B.id) {
-      const X = s.findIndex((L) => String(L.listingId) === M.id), O = s.findIndex((L) => String(L.listingId) === B.id);
-      if (X !== -1 && O !== -1) {
-        const L = [...s], [Z] = L.splice(X, 1);
-        L.splice(O, 0, Z), n(L);
+  const v = (x) => {
+    const { active: I, over: C } = x;
+    if (C && I.id !== C.id) {
+      const R = s.findIndex((U) => String(U.listingId) === I.id), O = s.findIndex((U) => String(U.listingId) === C.id);
+      if (R !== -1 && O !== -1) {
+        const U = [...s], [nt] = U.splice(R, 1);
+        U.splice(O, 0, nt), i(U);
       }
     }
-  }, st = (y, M) => {
-    const B = f.find((O) => y.listingId === O.id);
-    if (!B) return null;
-    const X = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-      l && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
+  }, A = (x, I) => {
+    const C = h.find((O) => x.listingId === O.id);
+    if (!C) return null;
+    const R = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+      d && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
         b,
         {
           name: "DotsSixVertical",
@@ -2127,40 +2398,40 @@ const wa = (d) => {
           height: 20
         }
       ) }),
-      m === "select" && /* @__PURE__ */ t.jsx(
-        tt,
+      y === "select" && /* @__PURE__ */ t.jsx(
+        et,
         {
           onChange: (O) => {
-            const L = [...s], Z = f.find((q) => q.productData.name === O);
-            if (!Z) return;
-            const rt = {
-              listingId: Z.id,
-              image: Z.productData.images.length > 0 ? Z.productData.images[0].cfId : ""
-            }, v = L.map((q) => q.listingId === y.listingId ? rt : q);
-            S(rt), n([...v]);
+            const U = [...s], nt = h.find((D) => D.productData.name === O);
+            if (!nt) return;
+            const dt = {
+              listingId: nt.id,
+              image: nt.productData.images.length > 0 ? nt.productData.images[0].cfId : ""
+            }, k = U.map((D) => D.listingId === x.listingId ? dt : D);
+            w(dt), i([...k]);
           },
-          value: B.productData.name,
+          value: C.productData.name,
           options: [
-            ...f.filter((O) => !s.find((L) => L.listingId === O.id)).map((O) => O.productData.name)
+            ...h.filter((O) => !s.find((U) => U.listingId === O.id)).map((O) => O.productData.name)
           ],
-          leftAddon: C(
-            y.image || B.productData.images.length > 0 && B.productData.images[0].cfId || ""
+          leftAddon: T(
+            x.image || C.productData.images.length > 0 && C.productData.images[0].cfId || ""
           )
         },
-        M
+        I
       ),
-      /* @__PURE__ */ t.jsxs("div", { className: F.buttons, children: [
-        i && /* @__PURE__ */ t.jsx("div", { className: F.deleteButton, children: /* @__PURE__ */ t.jsx(
+      /* @__PURE__ */ t.jsxs("div", { className: G.buttons, children: [
+        n && /* @__PURE__ */ t.jsx("div", { className: G.deleteButton, children: /* @__PURE__ */ t.jsx(
           b,
           {
             name: "Sliders",
             hoverable: !0,
             width: 20,
             height: 20,
-            onClick: (O) => R(O, y)
+            onClick: (O) => F(O, x)
           }
         ) }),
-        h && /* @__PURE__ */ t.jsx("div", { className: F.deleteButton, children: /* @__PURE__ */ t.jsx(
+        p && /* @__PURE__ */ t.jsx("div", { className: G.deleteButton, children: /* @__PURE__ */ t.jsx(
           b,
           {
             name: "Trash",
@@ -2168,66 +2439,66 @@ const wa = (d) => {
             width: 20,
             height: 20,
             fill: "#C12A2A",
-            onClick: () => n(s.filter((O) => O !== y))
+            onClick: () => i(s.filter((O) => O !== x))
           }
         ) })
       ] })
     ] });
-    return l ? /* @__PURE__ */ t.jsx(
-      bi,
+    return d ? /* @__PURE__ */ t.jsx(
+      Vi,
       {
-        product: y,
-        children: X
+        product: x,
+        children: R
       },
-      y.listingId
+      x.listingId
     ) : /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: F.product,
-        children: X
+        className: G.product,
+        children: R
       },
-      y.listingId
+      x.listingId
     );
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: F.productsBlock, children: [
-    (r || a !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: F.top, children: [
-      r && /* @__PURE__ */ t.jsx("h3", { className: F.title, children: r }),
+  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(
-        et,
+        st,
         {
           current: a,
-          onChange: (y) => e == null ? void 0 : e(y)
+          onChange: (x) => e == null ? void 0 : e(x)
         }
       )
     ] }),
-    g && u && /* @__PURE__ */ t.jsx(
-      fi,
+    g && _ && /* @__PURE__ */ t.jsx(
+      Fi,
       {
-        activeItem: u,
-        setActiveItem: S,
-        setIsOpenModal: w,
-        popupPosition: D,
-        itemsOptions: f
+        activeItem: _,
+        setActiveItem: w,
+        setIsOpenModal: B,
+        popupPosition: H,
+        itemsOptions: h
       }
     ),
-    /* @__PURE__ */ t.jsxs("div", { className: F.products, children: [
-      o && /* @__PURE__ */ t.jsx("h5", { className: F.subtitle, children: o }),
-      l ? /* @__PURE__ */ t.jsx(
-        wt,
+    /* @__PURE__ */ t.jsxs("div", { className: G.products, children: [
+      o && /* @__PURE__ */ t.jsx("h5", { className: G.subtitle, children: o }),
+      d ? /* @__PURE__ */ t.jsx(
+        $t,
         {
           sensors: E,
-          onDragEnd: P,
+          onDragEnd: v,
           children: /* @__PURE__ */ t.jsx(
-            St,
+            It,
             {
-              items: s.map((y) => String(y.listingId)),
-              strategy: Ct,
-              children: s.map((y, M) => st(y, M))
+              items: s.map((x) => String(x.listingId)),
+              strategy: Nt,
+              children: s.map((x, I) => A(x, I))
             }
           )
         }
-      ) : s.map((y, M) => st(y, M)),
-      p && /* @__PURE__ */ t.jsx(
+      ) : s.map((x, I) => A(x, I)),
+      r && /* @__PURE__ */ t.jsx(
         "div",
         {
           style: {
@@ -2236,28 +2507,28 @@ const wa = (d) => {
             justifyContent: "center"
           },
           children: /* @__PURE__ */ t.jsx(
-            lt,
+            ot,
             {
               withoutHover: !0,
-              className: F.button,
+              className: G.button,
               size: "s",
               onClick: () => {
-                const y = [...s];
-                for (let M = 0; M < f.length; M++)
-                  if (!s.find((B) => B.listingId === f[M].id)) {
-                    y.push({
-                      listingId: f[M].id,
-                      image: f[M].productData.images.length > 0 ? f[M].productData.images[0].cfId : ""
+                const x = [...s];
+                for (let I = 0; I < h.length; I++)
+                  if (!s.find((C) => C.listingId === h[I].id)) {
+                    x.push({
+                      listingId: h[I].id,
+                      image: h[I].productData.images.length > 0 ? h[I].productData.images[0].cfId : ""
                     });
                     break;
                   }
-                n(y);
+                i(x);
               },
-              disabled: s.length === f.length,
+              disabled: s.length === h.length,
               style: {
                 width: "fit-content"
               },
-              children: /* @__PURE__ */ t.jsxs("div", { className: F.addButton, children: [
+              children: /* @__PURE__ */ t.jsxs("div", { className: G.addButton, children: [
                 /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
                 /* @__PURE__ */ t.jsx(
                   b,
@@ -2273,71 +2544,71 @@ const wa = (d) => {
         }
       )
     ] }),
-    c !== void 0 && /* @__PURE__ */ t.jsx(yt, { items: c })
+    c !== void 0 && /* @__PURE__ */ t.jsx(Tt, { items: c })
   ] });
-}, vi = "_options_6cemk_1", ji = "_price_6cemk_12", yi = "_oldPrice_6cemk_19", ki = "_newPrice_6cemk_27", Ii = "_animate_6cemk_34", $i = "_appearAndBounce_6cemk_1", Ni = "_meta_6cemk_52", wi = "_info_6cemk_58", Si = "_infoRight_6cemk_66", Ci = "_buttons_6cemk_73", Bi = "_variants_6cemk_80", Ti = "_variant_6cemk_80", Pi = "_stock_6cemk_98", Ai = "_variantInfo_6cemk_105", Mi = "_quantity_6cemk_111", Oi = "_count_6cemk_118", qi = "_focused_6cemk_135", Ei = "_button_6cemk_73", Ui = "_activeVariant_6cemk_161", Di = "_chargeTypes_6cemk_165", Hi = "_charge_6cemk_165", Li = "_chargeActive_6cemk_190", zi = "_title_6cemk_198", N = {
-  options: vi,
-  price: ji,
-  oldPrice: yi,
-  newPrice: ki,
-  animate: Ii,
-  appearAndBounce: $i,
-  meta: Ni,
-  info: wi,
-  infoRight: Si,
-  buttons: Ci,
-  variants: Bi,
-  variant: Ti,
-  stock: Pi,
-  variantInfo: Ai,
-  quantity: Mi,
-  count: Oi,
-  focused: qi,
-  button: Ei,
-  activeVariant: Ui,
-  chargeTypes: Di,
-  charge: Hi,
-  chargeActive: Li,
-  title: zi
-}, Ri = "_wrapper_c1dht_1", Fi = "_label_c1dht_9", Vi = "_input_c1dht_18", Yi = "_paddingless_c1dht_31", Gi = "_content_c1dht_35", Xi = "_contentBorder_c1dht_47", Wi = "_borderless_c1dht_52", Ji = "_rightIcon_c1dht_57", nt = {
-  wrapper: Ri,
-  label: Fi,
-  input: Vi,
-  paddingless: Yi,
-  content: Gi,
-  contentBorder: Xi,
-  borderless: Wi,
-  rightIcon: Ji
-}, Qi = (d) => {
+}, Yi = "_options_6cemk_1", Gi = "_price_6cemk_12", Xi = "_oldPrice_6cemk_19", Wi = "_newPrice_6cemk_27", Ji = "_animate_6cemk_34", Qi = "_appearAndBounce_6cemk_1", Ki = "_meta_6cemk_52", Zi = "_info_6cemk_58", to = "_infoRight_6cemk_66", eo = "_buttons_6cemk_73", so = "_variants_6cemk_80", no = "_variant_6cemk_80", io = "_stock_6cemk_98", oo = "_variantInfo_6cemk_105", ao = "_quantity_6cemk_111", co = "_count_6cemk_118", lo = "_focused_6cemk_135", ro = "_button_6cemk_73", uo = "_activeVariant_6cemk_161", _o = "_chargeTypes_6cemk_165", mo = "_charge_6cemk_165", ho = "_chargeActive_6cemk_190", po = "_title_6cemk_198", P = {
+  options: Yi,
+  price: Gi,
+  oldPrice: Xi,
+  newPrice: Wi,
+  animate: Ji,
+  appearAndBounce: Qi,
+  meta: Ki,
+  info: Zi,
+  infoRight: to,
+  buttons: eo,
+  variants: so,
+  variant: no,
+  stock: io,
+  variantInfo: oo,
+  quantity: ao,
+  count: co,
+  focused: lo,
+  button: ro,
+  activeVariant: uo,
+  chargeTypes: _o,
+  charge: mo,
+  chargeActive: ho,
+  title: po
+}, fo = "_wrapper_c1dht_1", go = "_label_c1dht_9", xo = "_input_c1dht_18", bo = "_paddingless_c1dht_31", vo = "_content_c1dht_35", jo = "_contentBorder_c1dht_47", yo = "_borderless_c1dht_52", ko = "_rightIcon_c1dht_57", it = {
+  wrapper: fo,
+  label: go,
+  input: xo,
+  paddingless: bo,
+  content: vo,
+  contentBorder: jo,
+  borderless: yo,
+  rightIcon: ko
+}, $o = (u) => {
   const {
     onChange: a,
     style: e,
     label: s,
-    value: n,
+    value: i,
     type: c,
-    min: r,
+    min: l,
     max: o,
-    placeholder: i,
-    disabled: l = !1,
+    placeholder: n,
+    disabled: d = !1,
     required: j = !1,
-    regex: h,
-    paddingless: p = !1,
-    borderless: m = !1,
-    editable: f = !1,
-    isSearch: u = !1,
-    centered: S = !1
-  } = d, { themeSettings: D } = Et(), { inputs: I } = D, [g, w] = x.useState(!1);
-  function E(C) {
-    return Number(C) < 0 ? String(r) : C;
+    regex: p,
+    paddingless: r = !1,
+    borderless: y = !1,
+    editable: h = !1,
+    isSearch: _ = !1,
+    centered: w = !1
+  } = u, { themeSettings: H } = Dt(), { inputs: $ } = H, [g, B] = f.useState(!1);
+  function E(T) {
+    return Number(T) < 0 ? String(l) : T;
   }
-  function R(C) {
-    return !j || !h ? !0 : new RegExp(h).test(C);
+  function F(T) {
+    return !j || !p ? !0 : new RegExp(p).test(T);
   }
-  return /* @__PURE__ */ t.jsxs("div", { className: nt.wrapper, children: [
+  return /* @__PURE__ */ t.jsxs("div", { className: it.wrapper, children: [
     s && /* @__PURE__ */ t.jsx(
       "label",
       {
-        className: nt.label,
+        className: it.label,
         htmlFor: s,
         children: s
       }
@@ -2345,13 +2616,13 @@ const wa = (d) => {
     /* @__PURE__ */ t.jsxs(
       "div",
       {
-        className: V(nt.content, {
-          [nt.contentBorder]: I.border.active
+        className: Y(it.content, {
+          [it.contentBorder]: $.border.active
         }),
         style: {
           ...e,
-          background: I.field.active ? I.field.color : "transparent",
-          padding: u ? `7px ${Number(I.general.size) + 20}px 7px 11px` : "7px 11px"
+          background: $.field.active ? $.field.color : "transparent",
+          padding: _ ? `7px ${Number($.general.size) + 20}px 7px 11px` : "7px 11px"
         },
         children: [
           /* @__PURE__ */ t.jsx(
@@ -2359,40 +2630,40 @@ const wa = (d) => {
             {
               id: s,
               type: c || "text",
-              onChange: (C) => {
-                if (c === "text") a(C.target.value);
+              onChange: (T) => {
+                if (c === "text") a(T.target.value);
                 else {
-                  const P = E(C.target.value);
-                  a(P);
+                  const v = E(T.target.value);
+                  a(v);
                 }
               },
-              value: n,
+              value: i,
               autoComplete: "off",
-              placeholder: i || "Type something...",
-              className: V(nt.input, {
-                [nt.required]: g && j && !R(n),
-                [nt.paddingless]: p,
-                [nt.borderless]: m
+              placeholder: n || "Type something...",
+              className: Y(it.input, {
+                [it.required]: g && j && !F(i),
+                [it.paddingless]: r,
+                [it.borderless]: y
               }),
-              min: c === "number" ? r : void 0,
+              min: c === "number" ? l : void 0,
               max: c === "number" ? o : void 0,
-              disabled: l,
-              onFocus: () => w(!0),
+              disabled: d,
+              onFocus: () => B(!0),
               style: {
-                textAlign: S ? "center" : "left"
+                textAlign: w ? "center" : "left"
               }
             }
           ),
-          u && /* @__PURE__ */ t.jsx("div", { className: nt.rightIcon, children: /* @__PURE__ */ t.jsx(
+          _ && /* @__PURE__ */ t.jsx("div", { className: it.rightIcon, children: /* @__PURE__ */ t.jsx(
             b,
             {
               name: "MagnifyingGlass",
               fill: "var(--icon-secondary)",
-              width: I.general.size,
-              height: I.general.size
+              width: $.general.size,
+              height: $.general.size
             }
           ) }),
-          f && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
+          h && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
             b,
             {
               name: "Sliders",
@@ -2405,34 +2676,34 @@ const wa = (d) => {
       }
     )
   ] });
-}, Ki = "_button_85085_1", Zi = "_primary_85085_20", to = "_primaryHovered_85085_30", eo = "_secondary_85085_34", so = "_secondaryHovered_85085_44", no = "_tertiary_85085_48", io = "_tertiaryHovered_85085_58", oo = "_content_85085_62", ot = {
-  button: Ki,
-  primary: Zi,
-  primaryHovered: to,
-  secondary: eo,
-  secondaryHovered: so,
-  tertiary: no,
-  tertiaryHovered: io,
-  content: oo
-}, W = (d) => {
-  const { children: a, onClick: e, style: s, className: n, disabled: c = !1, type: r = "Primary" } = d, { themeSettings: o } = Et();
+}, Io = "_button_85085_1", No = "_primary_85085_20", wo = "_primaryHovered_85085_30", Co = "_secondary_85085_34", So = "_secondaryHovered_85085_44", Bo = "_tertiary_85085_48", To = "_tertiaryHovered_85085_58", Po = "_content_85085_62", ct = {
+  button: Io,
+  primary: No,
+  primaryHovered: wo,
+  secondary: Co,
+  secondaryHovered: So,
+  tertiary: Bo,
+  tertiaryHovered: To,
+  content: Po
+}, Q = (u) => {
+  const { children: a, onClick: e, style: s, className: i, disabled: c = !1, type: l = "Primary" } = u, { themeSettings: o } = Dt();
   return /* @__PURE__ */ t.jsx(
     "button",
     {
-      className: V(ot.button, n, {
-        [ot.primary]: r === "Primary",
-        [ot.secondary]: r === "Secondary",
-        [ot.tertiary]: r === "Tertiary",
-        [ot.primaryHovered]: r === "Primary" && !c && o.buttons.primary.hover,
-        [ot.secondaryHovered]: r === "Secondary" && !c && o.buttons.secondary.hover,
-        [ot.tertiaryHovered]: r === "Tertiary" && !c && o.buttons.tertiary.hover
+      className: Y(ct.button, i, {
+        [ct.primary]: l === "Primary",
+        [ct.secondary]: l === "Secondary",
+        [ct.tertiary]: l === "Tertiary",
+        [ct.primaryHovered]: l === "Primary" && !c && o.buttons.primary.hover,
+        [ct.secondaryHovered]: l === "Secondary" && !c && o.buttons.secondary.hover,
+        [ct.tertiaryHovered]: l === "Tertiary" && !c && o.buttons.tertiary.hover
       }),
       onClick: e,
       style: {
         ...s
       },
       disabled: c,
-      children: r === "Tertiary" ? /* @__PURE__ */ t.jsxs("div", { className: ot.content, children: [
+      children: l === "Tertiary" ? /* @__PURE__ */ t.jsxs("div", { className: ct.content, children: [
         a,
         /* @__PURE__ */ t.jsx(
           b,
@@ -2447,73 +2718,73 @@ const wa = (d) => {
     }
   );
 };
-var zt = /* @__PURE__ */ ((d) => (d.ONE_TIME = "One-Time", d.RECURRING = "Subscribe & Save", d))(zt || {});
-const Sa = (d) => {
-  var D, I;
-  const { variants: a } = d, [e, s] = x.useState(a[0]), [n, c] = x.useState(e.chargeTypes[0]), r = jt(), [o, i] = x.useState(1), { reset: l, addProductToCart: j, getProducts: h } = At(), [p, m] = x.useState(!1);
-  x.useEffect(() => {
-    m(!0);
-    const g = setTimeout(() => m(!1), 600);
+var zt = /* @__PURE__ */ ((u) => (u.ONE_TIME = "One-Time", u.RECURRING = "Subscribe & Save", u))(zt || {});
+const ec = (u) => {
+  var H, $;
+  const { variants: a } = u, [e, s] = f.useState(a[0]), [i, c] = f.useState(e.chargeTypes[0]), l = Bt(), [o, n] = f.useState(1), { reset: d, addProductToCart: j, getProducts: p } = Ot(), [r, y] = f.useState(!1);
+  f.useEffect(() => {
+    y(!0);
+    const g = setTimeout(() => y(!1), 600);
     return () => clearTimeout(g);
   }, [o]);
-  async function f() {
-    await h(), await j({
-      productId: d.id,
+  async function h() {
+    await p(), await j({
+      productId: u.id,
       productVariantId: e.id,
       quantity: o
     });
   }
-  function u() {
-    l(), f(), r("/checkout");
+  function _() {
+    d(), h(), l("/checkout");
   }
-  function S(g) {
+  function w(g) {
     if (g >= 864e5) {
-      const P = Math.floor(g / 864e5);
-      return `${P} ${P === 1 ? "day" : "days"}`;
+      const v = Math.floor(g / 864e5);
+      return `${v} ${v === 1 ? "day" : "days"}`;
     } else if (g >= 36e5) {
-      const P = Math.floor(g / 36e5);
-      return `${P} ${P === 1 ? "hour" : "hours"}`;
+      const v = Math.floor(g / 36e5);
+      return `${v} ${v === 1 ? "hour" : "hours"}`;
     } else if (g >= 6e4) {
-      const P = Math.floor(g / 6e4);
-      return `${P} ${P === 1 ? "minute" : "minutes"}`;
+      const v = Math.floor(g / 6e4);
+      return `${v} ${v === 1 ? "minute" : "minutes"}`;
     } else {
-      const P = Math.floor(g / 1e3);
-      return `${P} ${P === 1 ? "second" : "seconds"}`;
+      const v = Math.floor(g / 1e3);
+      return `${v} ${v === 1 ? "second" : "seconds"}`;
     }
   }
-  return x.useEffect(() => {
-    (e.quantity.available === 0 || !e.quantity.available) && i(0);
-  }, [e.quantity.available]), console.log(e.quantity), /* @__PURE__ */ t.jsxs("div", { className: N.options, children: [
-    e.chargeTypes.length > 1 && /* @__PURE__ */ t.jsx("div", { className: N.chargeTypes, children: e.chargeTypes.map((g) => /* @__PURE__ */ t.jsx(
+  return f.useEffect(() => {
+    (e.quantity.available === 0 || !e.quantity.available) && n(0);
+  }, [e.quantity.available]), console.log(e.quantity), /* @__PURE__ */ t.jsxs("div", { className: P.options, children: [
+    e.chargeTypes.length > 1 && /* @__PURE__ */ t.jsx("div", { className: P.chargeTypes, children: e.chargeTypes.map((g) => /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: V(N.charge, {
-          [N.chargeActive]: n === g
+        className: Y(P.charge, {
+          [P.chargeActive]: i === g
         }),
         onClick: () => c(g),
         children: zt[g]
       },
       g
     )) }),
-    /* @__PURE__ */ t.jsx("div", { className: N.variants, children: a.map((g) => {
-      var w;
+    /* @__PURE__ */ t.jsx("div", { className: P.variants, children: a.map((g) => {
+      var B;
       return /* @__PURE__ */ t.jsxs(
         "div",
         {
-          className: V(N.variant, {
-            [N.activeVariant]: e.id === g.id
+          className: Y(P.variant, {
+            [P.activeVariant]: e.id === g.id
           }),
           onClick: () => s(g),
           children: [
-            /* @__PURE__ */ t.jsxs("div", { className: N.variantInfo, children: [
-              /* @__PURE__ */ t.jsx("span", { className: N.title, children: g.name }),
+            /* @__PURE__ */ t.jsxs("div", { className: P.variantInfo, children: [
+              /* @__PURE__ */ t.jsx("span", { className: P.title, children: g.name }),
               /* @__PURE__ */ t.jsxs("span", { children: [
                 "$",
-                n === "ONE_TIME" ? g.price.amount : g.subscriptionSettings ? g.subscriptionSettings.price.amount : "Price Not Found"
+                i === "ONE_TIME" ? g.price.amount : g.subscriptionSettings ? g.subscriptionSettings.price.amount : "Price Not Found"
               ] })
             ] }),
-            /* @__PURE__ */ t.jsx("div", { children: n === "ONE_TIME" && /* @__PURE__ */ t.jsxs("span", { className: N.stock, children: [
-              ((w = g.quantity.restrictions) == null ? void 0 : w.max) || g.quantity.available || 0,
+            /* @__PURE__ */ t.jsx("div", { children: i === "ONE_TIME" && /* @__PURE__ */ t.jsxs("span", { className: P.stock, children: [
+              ((B = g.quantity.restrictions) == null ? void 0 : B.max) || g.quantity.available || 0,
               " in stock"
             ] }) })
           ]
@@ -2521,48 +2792,48 @@ const Sa = (d) => {
         g.id
       );
     }) }),
-    n === "ONE_TIME" && /* @__PURE__ */ t.jsxs("div", { className: N.quantity, children: [
+    i === "ONE_TIME" && /* @__PURE__ */ t.jsxs("div", { className: P.quantity, children: [
       /* @__PURE__ */ t.jsx(
-        W,
+        Q,
         {
           type: "Secondary",
           onClick: () => {
-            o > 1 ? i((g) => g - 1) : i(1);
+            o > 1 ? n((g) => g - 1) : n(1);
           },
-          className: N.button,
+          className: P.button,
           disabled: e.quantity.available === 0 || e.quantity.restrictions && o <= e.quantity.restrictions.min || Object.keys(e.quantity.restrictions || {}).length === 0 && !e.quantity.available,
           children: /* @__PURE__ */ t.jsx(b, { name: "Minus" })
         }
       ),
       /* @__PURE__ */ t.jsx(
-        Qi,
+        $o,
         {
           type: "number",
           value: String(o),
-          onChange: (g) => i(Number(g)),
-          max: ((D = e.quantity.restrictions) == null ? void 0 : D.max) || e.quantity.available || 1 / 0,
-          min: ((I = e.quantity.restrictions) == null ? void 0 : I.min) || 0,
+          onChange: (g) => n(Number(g)),
+          max: ((H = e.quantity.restrictions) == null ? void 0 : H.max) || e.quantity.available || 1 / 0,
+          min: (($ = e.quantity.restrictions) == null ? void 0 : $.min) || 0,
           centered: !0,
           disabled: e.quantity.available === 0 || !e.quantity.available || Object.keys(e.quantity.restrictions || {}).length === 0 && !e.quantity.available
         }
       ),
       /* @__PURE__ */ t.jsx(
-        W,
+        Q,
         {
           type: "Secondary",
           onClick: () => {
-            i((g) => g + 1);
+            n((g) => g + 1);
           },
-          className: N.button,
+          className: P.button,
           disabled: !!(e.quantity.restrictions && o >= e.quantity.restrictions.max || e.quantity.available !== void 0 && o >= e.quantity.available || Object.keys(e.quantity.restrictions || {}).length === 0 && !e.quantity.available),
           children: /* @__PURE__ */ t.jsx(b, { name: "Plus" })
         }
       )
     ] }),
-    /* @__PURE__ */ t.jsxs("div", { className: N.meta, children: [
-      /* @__PURE__ */ t.jsxs("div", { className: N.info, children: [
+    /* @__PURE__ */ t.jsxs("div", { className: P.meta, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: P.info, children: [
         /* @__PURE__ */ t.jsx("span", { children: "Delivery" }),
-        /* @__PURE__ */ t.jsxs("div", { className: N.infoRight, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: P.infoRight, children: [
           /* @__PURE__ */ t.jsx(
             b,
             {
@@ -2572,111 +2843,111 @@ const Sa = (d) => {
               height: 20
             }
           ),
-          /* @__PURE__ */ t.jsx("span", { children: !e.deliveryTime || e.deliveryTime === 0 ? "Instant" : S(e.deliveryTime) })
+          /* @__PURE__ */ t.jsx("span", { children: !e.deliveryTime || e.deliveryTime === 0 ? "Instant" : w(e.deliveryTime) })
         ] })
       ] }),
-      /* @__PURE__ */ t.jsxs("div", { className: N.info, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: P.info, children: [
         /* @__PURE__ */ t.jsx("span", { children: "Price" }),
-        /* @__PURE__ */ t.jsx("div", { className: N.infoRight, children: n === "ONE_TIME" ? e.compareAtPrice && (e.compareAtPrice.amount || 0) - (e.price.amount || 0) > 0 ? /* @__PURE__ */ t.jsxs("div", { className: N.price, children: [
-          /* @__PURE__ */ t.jsxs("span", { className: V(N.newPrice, { [N.animate]: p }), children: [
+        /* @__PURE__ */ t.jsx("div", { className: P.infoRight, children: i === "ONE_TIME" ? e.compareAtPrice && (e.compareAtPrice.amount || 0) - (e.price.amount || 0) > 0 ? /* @__PURE__ */ t.jsxs("div", { className: P.price, children: [
+          /* @__PURE__ */ t.jsxs("span", { className: Y(P.newPrice, { [P.animate]: r }), children: [
             "$ ",
             (e.price.amount || 0) * o
           ] }),
-          /* @__PURE__ */ t.jsxs("span", { className: N.oldPrice, children: [
+          /* @__PURE__ */ t.jsxs("span", { className: P.oldPrice, children: [
             "$ ",
             (e.compareAtPrice.amount || 0) * o
           ] })
-        ] }) : /* @__PURE__ */ t.jsxs("span", { className: V(N.newPrice, { [N.animate]: p }), children: [
+        ] }) : /* @__PURE__ */ t.jsxs("span", { className: Y(P.newPrice, { [P.animate]: r }), 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: N.price, children: [
-          /* @__PURE__ */ t.jsxs("span", { className: V(N.newPrice, { [N.animate]: p }), children: [
+        ] }) : e.subscriptionSettings && e.subscriptionSettings.compareAtPrice && (e.subscriptionSettings.compareAtPrice.amount || 0) - (e.subscriptionSettings.price.amount || 0) > 0 ? /* @__PURE__ */ t.jsxs("div", { className: P.price, children: [
+          /* @__PURE__ */ t.jsxs("span", { className: Y(P.newPrice, { [P.animate]: r }), children: [
             "$ ",
             e.subscriptionSettings.price.amount || 0
           ] }),
-          /* @__PURE__ */ t.jsxs("span", { className: N.oldPrice, children: [
+          /* @__PURE__ */ t.jsxs("span", { className: P.oldPrice, children: [
             "$ ",
             e.subscriptionSettings.compareAtPrice.amount || 0
           ] })
-        ] }) : e.subscriptionSettings && /* @__PURE__ */ t.jsxs("span", { className: V(N.newPrice, { [N.animate]: p }), children: [
+        ] }) : e.subscriptionSettings && /* @__PURE__ */ t.jsxs("span", { className: Y(P.newPrice, { [P.animate]: r }), children: [
           "$ ",
           e.subscriptionSettings.price.amount || 0
         ] }) })
       ] })
     ] }),
-    /* @__PURE__ */ t.jsxs("div", { className: N.buttons, children: [
+    /* @__PURE__ */ t.jsxs("div", { className: P.buttons, children: [
       /* @__PURE__ */ t.jsx(
-        W,
+        Q,
         {
           type: "Primary",
-          onClick: () => u(),
+          onClick: () => _(),
           disabled: e.quantity.available === 0 || !e.quantity.available || Object.keys(e.quantity.restrictions || {}).length === 0 && !e.quantity.available,
-          children: n === "ONE_TIME" ? "Buy Now" : "Subscribe Now"
+          children: i === "ONE_TIME" ? "Buy Now" : "Subscribe Now"
         }
       ),
-      n === "ONE_TIME" && /* @__PURE__ */ t.jsx(
-        W,
+      i === "ONE_TIME" && /* @__PURE__ */ t.jsx(
+        Q,
         {
           type: "Secondary",
-          onClick: () => f(),
+          onClick: () => h(),
           disabled: e.quantity.available === 0 || !e.quantity.available || Object.keys(e.quantity.restrictions || {}).length === 0 && !e.quantity.available,
           children: "Add to Cart"
         }
       )
     ] })
   ] });
-}, ao = "_button_1tdo3_1", co = "_login_1tdo3_14", lo = "_signUp_1tdo3_18", ro = "_buttons_1tdo3_23", uo = "_modal_1tdo3_32", _o = "_closing_1tdo3_64", mo = "_info_1tdo3_113", ho = "_top_1tdo3_120", po = "_title_1tdo3_131", xo = "_clear_1tdo3_138", go = "_activeClear_1tdo3_145", fo = "_count_1tdo3_149", bo = "_cart_1tdo3_164", vo = "_empty_1tdo3_172", jo = "_product_1tdo3_198", yo = "_products_1tdo3_207", ko = "_image_1tdo3_215", Io = "_productInfo_1tdo3_221", $o = "_content_1tdo3_228", No = "_name_1tdo3_234", wo = "_price_1tdo3_240", So = "_productButtons_1tdo3_246", Co = "_productButton_1tdo3_246", Bo = "_productCount_1tdo3_266", To = "_bottom_1tdo3_282", Po = "_subtotal_1tdo3_290", Ao = "_block_1tdo3_298", Mo = "_shoppingCount_1tdo3_305", Oo = "_total_1tdo3_325", qo = "_link_1tdo3_331", Eo = "_userInfo_1tdo3_338", Uo = "_pagesMobileModal_1tdo3_349", Do = "_pagesMobileModalContent_1tdo3_363", Ho = "_pagesMobileModalHeader_1tdo3_369", Lo = "_pagesMobileModalFooter_1tdo3_379", $ = {
-  button: ao,
-  login: co,
-  signUp: lo,
-  buttons: ro,
-  modal: uo,
+}, Ao = "_button_1tdo3_1", Oo = "_login_1tdo3_14", Mo = "_signUp_1tdo3_18", qo = "_buttons_1tdo3_23", Eo = "_modal_1tdo3_32", Do = "_closing_1tdo3_64", Uo = "_info_1tdo3_113", Ho = "_top_1tdo3_120", Ro = "_title_1tdo3_131", Lo = "_clear_1tdo3_138", zo = "_activeClear_1tdo3_145", Fo = "_count_1tdo3_149", Vo = "_cart_1tdo3_164", Yo = "_empty_1tdo3_172", Go = "_product_1tdo3_198", Xo = "_products_1tdo3_207", Wo = "_image_1tdo3_215", Jo = "_productInfo_1tdo3_221", Qo = "_content_1tdo3_228", Ko = "_name_1tdo3_234", Zo = "_price_1tdo3_240", ta = "_productButtons_1tdo3_246", ea = "_productButton_1tdo3_246", sa = "_productCount_1tdo3_266", na = "_bottom_1tdo3_282", ia = "_subtotal_1tdo3_290", oa = "_block_1tdo3_298", aa = "_shoppingCount_1tdo3_305", ca = "_total_1tdo3_325", la = "_link_1tdo3_331", ra = "_userInfo_1tdo3_338", da = "_pagesMobileModal_1tdo3_349", ua = "_pagesMobileModalContent_1tdo3_363", _a = "_pagesMobileModalHeader_1tdo3_369", ma = "_pagesMobileModalFooter_1tdo3_379", S = {
+  button: Ao,
+  login: Oo,
+  signUp: Mo,
+  buttons: qo,
+  modal: Eo,
   "slide-in-fade": "_slide-in-fade_1tdo3_1",
   "mobile-slide-in-fade": "_mobile-slide-in-fade_1tdo3_1",
-  closing: _o,
+  closing: Do,
   "mobile-slide-out-fade": "_mobile-slide-out-fade_1tdo3_1",
   "slide-out-fade": "_slide-out-fade_1tdo3_1",
-  info: mo,
-  top: ho,
-  title: po,
-  clear: xo,
-  activeClear: go,
-  count: fo,
-  cart: bo,
-  empty: vo,
-  product: jo,
-  products: yo,
-  image: ko,
-  productInfo: Io,
-  content: $o,
-  name: No,
-  price: wo,
-  productButtons: So,
-  productButton: Co,
-  productCount: Bo,
-  bottom: To,
-  subtotal: Po,
-  block: Ao,
-  shoppingCount: Mo,
-  total: Oo,
-  link: qo,
-  userInfo: Eo,
-  pagesMobileModal: Uo,
-  pagesMobileModalContent: Do,
-  pagesMobileModalHeader: Ho,
-  pagesMobileModalFooter: Lo
+  info: Uo,
+  top: Ho,
+  title: Ro,
+  clear: Lo,
+  activeClear: zo,
+  count: Fo,
+  cart: Vo,
+  empty: Yo,
+  product: Go,
+  products: Xo,
+  image: Wo,
+  productInfo: Jo,
+  content: Qo,
+  name: Ko,
+  price: Zo,
+  productButtons: ta,
+  productButton: ea,
+  productCount: sa,
+  bottom: na,
+  subtotal: ia,
+  block: oa,
+  shoppingCount: aa,
+  total: ca,
+  link: la,
+  userInfo: ra,
+  pagesMobileModal: da,
+  pagesMobileModalContent: ua,
+  pagesMobileModalHeader: _a,
+  pagesMobileModalFooter: ma
 };
-class gt extends Error {
+class xt extends Error {
 }
-gt.prototype.name = "InvalidTokenError";
-function zo(d) {
-  return decodeURIComponent(atob(d).replace(/(.)/g, (a, e) => {
+xt.prototype.name = "InvalidTokenError";
+function ha(u) {
+  return decodeURIComponent(atob(u).replace(/(.)/g, (a, e) => {
     let s = e.charCodeAt(0).toString(16).toUpperCase();
     return s.length < 2 && (s = "0" + s), "%" + s;
   }));
 }
-function Ro(d) {
-  let a = d.replace(/-/g, "+").replace(/_/g, "/");
+function pa(u) {
+  let a = u.replace(/-/g, "+").replace(/_/g, "/");
   switch (a.length % 4) {
     case 0:
       break;
@@ -2690,75 +2961,75 @@ function Ro(d) {
       throw new Error("base64 string is not of the correct length");
   }
   try {
-    return zo(a);
+    return ha(a);
   } catch {
     return atob(a);
   }
 }
-function Fo(d, a) {
-  if (typeof d != "string")
-    throw new gt("Invalid token specified: must be a string");
+function fa(u, a) {
+  if (typeof u != "string")
+    throw new xt("Invalid token specified: must be a string");
   a || (a = {});
-  const e = a.header === !0 ? 0 : 1, s = d.split(".")[e];
+  const e = a.header === !0 ? 0 : 1, s = u.split(".")[e];
   if (typeof s != "string")
-    throw new gt(`Invalid token specified: missing part #${e + 1}`);
-  let n;
+    throw new xt(`Invalid token specified: missing part #${e + 1}`);
+  let i;
   try {
-    n = Ro(s);
+    i = pa(s);
   } catch (c) {
-    throw new gt(`Invalid token specified: invalid base64 for part #${e + 1} (${c.message})`);
+    throw new xt(`Invalid token specified: invalid base64 for part #${e + 1} (${c.message})`);
   }
   try {
-    return JSON.parse(n);
+    return JSON.parse(i);
   } catch (c) {
-    throw new gt(`Invalid token specified: invalid json for part #${e + 1} (${c.message})`);
+    throw new xt(`Invalid token specified: invalid json for part #${e + 1} (${c.message})`);
   }
 }
-const Ca = (d) => {
-  const { shopping: a, signUp: e, isShowUserInfo: s = !0 } = d;
-  return /* @__PURE__ */ t.jsxs("div", { className: $.buttons, children: [
-    a && /* @__PURE__ */ t.jsx(Vo, {}),
-    s && /* @__PURE__ */ t.jsx(Rt, { signUp: e })
+const sc = (u) => {
+  const { shopping: a, signUp: e, isShowUserInfo: s = !0 } = u;
+  return /* @__PURE__ */ t.jsxs("div", { className: S.buttons, children: [
+    a && /* @__PURE__ */ t.jsx(ga, {}),
+    s && /* @__PURE__ */ t.jsx(Ft, { signUp: e })
   ] });
-}, Vo = () => {
-  const [d, a] = x.useState(!1), [e, s] = x.useState([]), { cart: n, getProducts: c } = At();
-  function r(p) {
-    for (let m = 0; m < n.parts.length; m++)
-      for (let f = 0; f < p.variants.length; f++)
-        if (n.parts[m].productVariantId === p.variants[m].id)
-          return n.parts[m].productVariantId;
+}, ga = () => {
+  const [u, a] = f.useState(!1), [e, s] = f.useState([]), { cart: i, getProducts: c } = Ot();
+  function l(r) {
+    for (let y = 0; y < i.parts.length; y++)
+      for (let h = 0; h < r.variants.length; h++)
+        if (i.parts[y].productVariantId === r.variants[y].id)
+          return i.parts[y].productVariantId;
   }
-  function o(p) {
-    for (let m = 0; m < n.parts.length; m++)
-      for (let f = 0; f < p.variants.length; f++)
-        if (n.parts[m].productVariantId === p.variants[m].id)
-          return n.parts[m].quantity;
+  function o(r) {
+    for (let y = 0; y < i.parts.length; y++)
+      for (let h = 0; h < r.variants.length; h++)
+        if (i.parts[y].productVariantId === r.variants[y].id)
+          return i.parts[y].quantity;
   }
-  x.useEffect(() => {
+  f.useEffect(() => {
     (async () => {
-      const m = n.parts.map((S) => String(S.productId)), u = (await c([...m])).map((S) => ({
-        ...S,
-        activeVariantId: r(S),
-        quantity: o(S)
+      const y = i.parts.map((w) => String(w.productId)), _ = (await c([...y])).map((w) => ({
+        ...w,
+        activeVariantId: l(w),
+        quantity: o(w)
       }));
-      s(u);
+      s(_);
     })();
-  }, [n.parts.length]);
-  function i(p) {
-    var m;
-    return !p || !(p != null && p.variants) ? !1 : (m = p.variants.find((f) => f.id === p.activeVariantId)) == null ? void 0 : m.subscriptionSettings;
+  }, [i.parts.length]);
+  function n(r) {
+    var y;
+    return !r || !(r != null && r.variants) ? !1 : (y = r.variants.find((h) => h.id === r.activeVariantId)) == null ? void 0 : y.subscriptionSettings;
   }
-  const l = n.parts.length > 0 && e.length > 0 && !i(e[0]), [j, h] = x.useState(!1);
+  const d = i.parts.length > 0 && e.length > 0 && !n(e[0]), [j, p] = f.useState(!1);
   return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
     /* @__PURE__ */ t.jsxs(
-      W,
+      Q,
       {
         type: "Secondary",
         style: {
           padding: 10
         },
-        onClick: (p) => {
-          p.stopPropagation(), window.location.pathname !== "/admin/builder" && (a(!0), h(!0));
+        onClick: (r) => {
+          r.stopPropagation(), window.location.pathname !== "/admin/builder" && (a(!0), p(!0));
         },
         children: [
           /* @__PURE__ */ t.jsx(
@@ -2768,67 +3039,67 @@ const Ca = (d) => {
               fill: "var(--icon-primary)"
             }
           ),
-          l && /* @__PURE__ */ t.jsx("div", { className: $.shoppingCount, children: n.parts.length })
+          d && /* @__PURE__ */ t.jsx("div", { className: S.shoppingCount, children: i.parts.length })
         ]
       }
     ),
-    d && /* @__PURE__ */ t.jsx(
+    u && /* @__PURE__ */ t.jsx(
       Mt,
       {
         close: () => {
-          h(!1), setTimeout(() => {
+          p(!1), setTimeout(() => {
             a(!1);
           }, 300);
         },
         withAnimation: !1,
         children: /* @__PURE__ */ t.jsx(
-          Yo,
+          xa,
           {
             activeProducts: e,
-            isCartNotEmpty: l,
+            isCartNotEmpty: d,
             isOpen: j
           }
         )
       }
     )
   ] });
-}, Yo = (d) => {
-  const { activeProducts: a, isCartNotEmpty: e, isOpen: s } = d, { cart: n, reset: c, getTotalAndDiscount: r, updateQuantityOfProduct: o } = At(), i = jt();
-  function l(p) {
-    i(p);
+}, xa = (u) => {
+  const { activeProducts: a, isCartNotEmpty: e, isOpen: s } = u, { cart: i, reset: c, getTotalAndDiscount: l, updateQuantityOfProduct: o } = Ot(), n = Bt();
+  function d(r) {
+    n(r);
   }
-  function j(p) {
+  function j(r) {
     o({
-      productId: p.id,
-      productVariantId: p.activeVariantId,
-      quantity: p.quantity + 1
+      productId: r.id,
+      productVariantId: r.activeVariantId,
+      quantity: r.quantity + 1
     });
   }
-  function h(p) {
+  function p(r) {
     o({
-      productId: p.id,
-      productVariantId: p.activeVariantId,
-      quantity: p.quantity - 1
+      productId: r.id,
+      productVariantId: r.activeVariantId,
+      quantity: r.quantity - 1
     });
   }
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: V($.modal, {
-        [$.closing]: !s
+      className: Y(S.modal, {
+        [S.closing]: !s
       }),
-      onClick: (p) => p.stopPropagation(),
+      onClick: (r) => r.stopPropagation(),
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: $.top, children: [
-          /* @__PURE__ */ t.jsxs("div", { className: $.info, children: [
-            /* @__PURE__ */ t.jsx("span", { className: $.title, children: "Cart" }),
-            e && /* @__PURE__ */ t.jsx("div", { className: $.count, children: n.parts.length })
+        /* @__PURE__ */ t.jsxs("div", { className: S.top, children: [
+          /* @__PURE__ */ t.jsxs("div", { className: S.info, children: [
+            /* @__PURE__ */ t.jsx("span", { className: S.title, children: "Cart" }),
+            e && /* @__PURE__ */ t.jsx("div", { className: S.count, children: i.parts.length })
           ] }),
           /* @__PURE__ */ t.jsx(
             "button",
             {
-              className: V($.clear, {
-                [$.activeClear]: e
+              className: Y(S.clear, {
+                [S.activeClear]: e
               }),
               disabled: !e,
               onClick: c,
@@ -2836,39 +3107,39 @@ const Ca = (d) => {
             }
           )
         ] }),
-        e ? /* @__PURE__ */ t.jsxs("div", { className: $.cart, children: [
-          /* @__PURE__ */ t.jsx("div", { className: $.products, children: a.map((p) => /* @__PURE__ */ t.jsxs(
+        e ? /* @__PURE__ */ t.jsxs("div", { className: S.cart, children: [
+          /* @__PURE__ */ t.jsx("div", { className: S.products, children: a.map((r) => /* @__PURE__ */ t.jsxs(
             "div",
             {
-              className: $.product,
+              className: S.product,
               children: [
-                /* @__PURE__ */ t.jsxs("div", { className: $.productInfo, children: [
+                /* @__PURE__ */ t.jsxs("div", { className: S.productInfo, children: [
                   /* @__PURE__ */ t.jsx(
                     "img",
                     {
-                      src: `https://imagedelivery.net/${p.images[0].cfId}/w=500`,
+                      src: `https://imagedelivery.net/${r.images[0].cfId}/w=500`,
                       alt: "image",
                       width: "100%",
                       height: "100%",
-                      className: $.image
+                      className: S.image
                     }
                   ),
-                  /* @__PURE__ */ t.jsxs("div", { className: $.content, children: [
-                    /* @__PURE__ */ t.jsx("div", { className: $.name, children: p.name }),
-                    /* @__PURE__ */ t.jsxs("div", { className: $.price, children: [
+                  /* @__PURE__ */ t.jsxs("div", { className: S.content, children: [
+                    /* @__PURE__ */ t.jsx("div", { className: S.name, children: r.name }),
+                    /* @__PURE__ */ t.jsxs("div", { className: S.price, children: [
                       "$",
-                      p.variants.find((m) => m.id === p.activeVariantId).price.amount * ((p == null ? void 0 : p.quantity) || 1)
+                      r.variants.find((y) => y.id === r.activeVariantId).price.amount * ((r == null ? void 0 : r.quantity) || 1)
                     ] })
                   ] })
                 ] }),
-                /* @__PURE__ */ t.jsxs("div", { className: $.productButtons, children: [
+                /* @__PURE__ */ t.jsxs("div", { className: S.productButtons, children: [
                   /* @__PURE__ */ t.jsx(
                     "div",
                     {
                       onClick: () => {
-                        p.quantity !== 1 && h(p);
+                        r.quantity !== 1 && p(r);
                       },
-                      className: $.productButton,
+                      className: S.productButton,
                       children: /* @__PURE__ */ t.jsx(
                         b,
                         {
@@ -2880,12 +3151,12 @@ const Ca = (d) => {
                       )
                     }
                   ),
-                  /* @__PURE__ */ t.jsx("div", { className: $.productCount, children: p.quantity }),
+                  /* @__PURE__ */ t.jsx("div", { className: S.productCount, children: r.quantity }),
                   /* @__PURE__ */ t.jsx(
                     "div",
                     {
-                      onClick: () => j(p),
-                      className: $.productButton,
+                      onClick: () => j(r),
+                      className: S.productButton,
                       children: /* @__PURE__ */ t.jsx(
                         b,
                         {
@@ -2900,11 +3171,11 @@ const Ca = (d) => {
                 ] })
               ]
             },
-            p.id
+            r.id
           )) }),
-          /* @__PURE__ */ t.jsxs("div", { className: $.bottom, children: [
-            /* @__PURE__ */ t.jsxs("div", { className: $.subtotal, children: [
-              /* @__PURE__ */ t.jsxs("div", { className: $.block, children: [
+          /* @__PURE__ */ t.jsxs("div", { className: S.bottom, children: [
+            /* @__PURE__ */ t.jsxs("div", { className: S.subtotal, children: [
+              /* @__PURE__ */ t.jsxs("div", { className: S.block, children: [
                 /* @__PURE__ */ t.jsx("span", { children: "Subtotal" }),
                 /* @__PURE__ */ t.jsx(
                   b,
@@ -2916,18 +3187,18 @@ const Ca = (d) => {
                   }
                 )
               ] }),
-              /* @__PURE__ */ t.jsxs("div", { className: $.total, children: [
+              /* @__PURE__ */ t.jsxs("div", { className: S.total, children: [
                 "$",
-                r().total
+                l().total
               ] })
             ] }),
-            /* @__PURE__ */ t.jsx(W, { onClick: () => l("/checkout"), children: "Checkout" })
+            /* @__PURE__ */ t.jsx(Q, { onClick: () => d("/checkout"), children: "Checkout" })
           ] })
-        ] }) : /* @__PURE__ */ t.jsx(Go, {})
+        ] }) : /* @__PURE__ */ t.jsx(ba, {})
       ]
     }
   );
-}, Go = () => /* @__PURE__ */ t.jsxs("div", { className: $.empty, children: [
+}, ba = () => /* @__PURE__ */ t.jsxs("div", { className: S.empty, children: [
   /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
     b,
     {
@@ -2943,22 +3214,22 @@ const Ca = (d) => {
       "a",
       {
         href: "/products",
-        className: $.link,
+        className: S.link,
         children: "view products"
       }
     )
   ] })
-] }), Rt = ({ signUp: d }) => {
-  const a = JSON.parse(localStorage.getItem("token") || "{}"), { data: e } = a, s = jt();
-  function n(o) {
+] }), Ft = ({ signUp: u }) => {
+  const a = JSON.parse(localStorage.getItem("token") || "{}"), { data: e } = a, s = Bt();
+  function i(o) {
     s(o);
   }
   if (!e)
     return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       /* @__PURE__ */ t.jsx(
-        W,
+        Q,
         {
-          onClick: () => n("/customer-dash"),
+          onClick: () => i("/customer-dash"),
           type: "Secondary",
           style: {
             padding: 10
@@ -2966,10 +3237,10 @@ const Ca = (d) => {
           children: "Login"
         }
       ),
-      d && /* @__PURE__ */ t.jsx(
-        W,
+      u && /* @__PURE__ */ t.jsx(
+        Q,
         {
-          onClick: () => n("/customer-dash"),
+          onClick: () => i("/customer-dash"),
           type: "Primary",
           style: {
             padding: 10
@@ -2978,41 +3249,41 @@ const Ca = (d) => {
         }
       )
     ] });
-  const [c, r] = x.useState("test-email@gmail.com");
-  return x.useEffect(() => {
+  const [c, l] = f.useState("test-email@gmail.com");
+  return f.useEffect(() => {
     (async () => {
-      const i = Fo(e);
-      r(i.email);
+      const n = fa(e);
+      l(n.email);
     })();
   }, [e]), /* @__PURE__ */ t.jsx(
     "div",
     {
-      className: $.userInfo,
-      onClick: () => n("/customer-dash"),
+      className: S.userInfo,
+      onClick: () => i("/customer-dash"),
       children: /* @__PURE__ */ t.jsx("div", { children: c || "test-email@gmail.com" })
     }
   );
-}, Xo = ({
-  children: d,
+}, va = ({
+  children: u,
   logo: a,
   setIsOpen: e,
   signUp: s
 }) => {
-  const { setIsOpen: n } = Ut(), c = () => {
-    n(!1), setTimeout(() => {
-      e(!1), n(!0);
+  const { setIsOpen: i } = Ut(), c = () => {
+    i(!1), setTimeout(() => {
+      e(!1), i(!0);
     }, 300);
   };
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: $.pagesMobileModal,
-      onClick: (r) => r.stopPropagation(),
+      className: S.pagesMobileModal,
+      onClick: (l) => l.stopPropagation(),
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: $.pagesMobileModalHeader, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: S.pagesMobileModalHeader, children: [
           /* @__PURE__ */ t.jsx("div", { children: a }),
           /* @__PURE__ */ t.jsx(
-            W,
+            Q,
             {
               type: "Secondary",
               onClick: c,
@@ -3026,33 +3297,33 @@ const Ca = (d) => {
             }
           )
         ] }),
-        /* @__PURE__ */ t.jsx("div", { className: $.pagesMobileModalContent, children: d }),
-        /* @__PURE__ */ t.jsx("div", { className: $.pagesMobileModalFooter, children: /* @__PURE__ */ t.jsx(Rt, { signUp: s }) })
+        /* @__PURE__ */ t.jsx("div", { className: S.pagesMobileModalContent, children: u }),
+        /* @__PURE__ */ t.jsx("div", { className: S.pagesMobileModalFooter, children: /* @__PURE__ */ t.jsx(Ft, { signUp: s }) })
       ]
     }
   );
-}, Ba = ({
-  children: d,
+}, nc = ({
+  children: u,
   logo: a,
   signUp: e
 }) => {
-  const [s, n] = x.useState(!1);
+  const [s, i] = f.useState(!1);
   return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-    /* @__PURE__ */ t.jsx(Wo, { setIsOpenModal: n }),
-    s && /* @__PURE__ */ t.jsx(Mt, { close: () => n(!1), children: /* @__PURE__ */ t.jsx(
-      Xo,
+    /* @__PURE__ */ t.jsx(ja, { setIsOpenModal: i }),
+    s && /* @__PURE__ */ t.jsx(Mt, { close: () => i(!1), children: /* @__PURE__ */ t.jsx(
+      va,
       {
         logo: a,
-        setIsOpen: n,
+        setIsOpen: i,
         signUp: e,
-        children: d
+        children: u
       }
     ) })
   ] });
-}, Wo = (d) => {
-  const { setIsOpenModal: a } = d;
+}, ja = (u) => {
+  const { setIsOpenModal: a } = u;
   return /* @__PURE__ */ t.jsx(
-    W,
+    Q,
     {
       type: "Secondary",
       style: {
@@ -3070,28 +3341,28 @@ const Ca = (d) => {
       )
     }
   );
-}, Jo = "_share_xddz7_1", Qo = "_modal_xddz7_8", Ko = "_header_xddz7_20", Zo = "_socials_xddz7_30", ta = "_social_xddz7_30", ea = "_copy_xddz7_40", sa = "_title_xddz7_47", na = "_copyWrapper_xddz7_53", ia = "_copyText_xddz7_62", oa = "_copyTextMobile_xddz7_75", aa = "_copyTextMiniMobile_xddz7_94", at = {
-  share: Jo,
-  modal: Qo,
-  header: Ko,
-  socials: Zo,
-  social: ta,
-  copy: ea,
-  title: sa,
-  copyWrapper: na,
-  copyText: ia,
-  copyTextMobile: oa,
-  copyTextMiniMobile: aa
-}, Ta = () => {
-  const { isOpenModal: d, setIsOpenModal: a } = Dt();
+}, ya = "_share_xddz7_1", ka = "_modal_xddz7_8", $a = "_header_xddz7_20", Ia = "_socials_xddz7_30", Na = "_social_xddz7_30", wa = "_copy_xddz7_40", Ca = "_title_xddz7_47", Sa = "_copyWrapper_xddz7_53", Ba = "_copyText_xddz7_62", Ta = "_copyTextMobile_xddz7_75", Pa = "_copyTextMiniMobile_xddz7_94", lt = {
+  share: ya,
+  modal: ka,
+  header: $a,
+  socials: Ia,
+  social: Na,
+  copy: wa,
+  title: Ca,
+  copyWrapper: Sa,
+  copyText: Ba,
+  copyTextMobile: Ta,
+  copyTextMiniMobile: Pa
+}, ic = () => {
+  const { isOpenModal: u, setIsOpenModal: a } = Ht();
   function e() {
     a(!0);
   }
   return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
     /* @__PURE__ */ t.jsx(
-      lt,
+      ot,
       {
-        className: at.share,
+        className: lt.share,
         onClick: (s) => {
           s.stopPropagation(), e();
         },
@@ -3106,45 +3377,45 @@ const Ca = (d) => {
         )
       }
     ),
-    d && /* @__PURE__ */ t.jsx(Mt, { close: a, children: /* @__PURE__ */ t.jsx(ca, {}) })
+    u && /* @__PURE__ */ t.jsx(Mt, { close: a, children: /* @__PURE__ */ t.jsx(Aa, {}) })
   ] });
-}, ca = () => {
-  const { setIsOpenModal: d } = Dt(), { notification: a, setNotification: e } = Yt(), { setIsOpen: s } = Ut(), n = window.location.href;
+}, Aa = () => {
+  const { setIsOpenModal: u } = Ht(), { notification: a, setNotification: e } = Gt(), { setIsOpen: s } = Ut(), i = window.location.href;
   function c() {
-    navigator.clipboard.writeText(n), e({
+    navigator.clipboard.writeText(i), e({
       message: "Link copied to clipboard",
       status: "success"
     });
   }
-  function r() {
+  function l() {
     s(!1), setTimeout(() => {
-      d(!1), s(!0);
+      u(!1), s(!0);
     }, 300);
   }
-  function o(i, l) {
-    return i.length > l ? i.slice(0, l) + "..." : i;
+  function o(n, d) {
+    return n.length > d ? n.slice(0, d) + "..." : n;
   }
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: at.modal,
-      onClick: (i) => i.stopPropagation(),
+      className: lt.modal,
+      onClick: (n) => n.stopPropagation(),
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: at.header, children: [
-          /* @__PURE__ */ t.jsx("div", { className: at.title, children: "Copy Product Link" }),
+        /* @__PURE__ */ t.jsxs("div", { className: lt.header, children: [
+          /* @__PURE__ */ t.jsx("div", { className: lt.title, children: "Copy Product Link" }),
           /* @__PURE__ */ t.jsx(
             b,
             {
               name: "X",
               fill: "#757575",
-              onClick: r,
+              onClick: l,
               hoverable: !0
             }
           )
         ] }),
-        /* @__PURE__ */ t.jsxs("div", { className: at.copyWrapper, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: lt.copyWrapper, children: [
           /* @__PURE__ */ t.jsxs(
-            lt,
+            ot,
             {
               type: "Secondary",
               onClick: c,
@@ -3152,14 +3423,14 @@ const Ca = (d) => {
                 flex: 1
               },
               children: [
-                /* @__PURE__ */ t.jsx("div", { className: at.copyText, children: o(n, 100) }),
-                /* @__PURE__ */ t.jsx("div", { className: at.copyTextMobile, children: o(n, 40) }),
-                /* @__PURE__ */ t.jsx("div", { className: at.copyTextMiniMobile, children: o(n, 20) })
+                /* @__PURE__ */ t.jsx("div", { className: lt.copyText, children: o(i, 100) }),
+                /* @__PURE__ */ t.jsx("div", { className: lt.copyTextMobile, children: o(i, 40) }),
+                /* @__PURE__ */ t.jsx("div", { className: lt.copyTextMiniMobile, children: o(i, 20) })
               ]
             }
           ),
           /* @__PURE__ */ t.jsx(
-            lt,
+            ot,
             {
               type: "Secondary",
               onClick: c,
@@ -3170,27 +3441,27 @@ const Ca = (d) => {
       ]
     }
   );
-}, la = "_accordion_1s1lq_1", ra = "_header_1s1lq_9", da = "_icon_1s1lq_18", ua = "_open_1s1lq_21", _a = "_content_1s1lq_25", xt = {
-  accordion: la,
-  header: ra,
-  icon: da,
-  open: ua,
-  content: _a
-}, Pa = ({ title: d, content: a, defaultOpen: e = !1 }) => {
-  const [s, n] = x.useState(e), [c, r] = x.useState(0), o = x.useRef(null), i = () => {
-    n(!s);
+}, Oa = "_accordion_1s1lq_1", Ma = "_header_1s1lq_9", qa = "_icon_1s1lq_18", Ea = "_open_1s1lq_21", Da = "_content_1s1lq_25", gt = {
+  accordion: Oa,
+  header: Ma,
+  icon: qa,
+  open: Ea,
+  content: Da
+}, oc = ({ title: u, content: a, defaultOpen: e = !1 }) => {
+  const [s, i] = f.useState(e), [c, l] = f.useState(0), o = f.useRef(null), n = () => {
+    i(!s);
   };
-  return x.useEffect(() => {
-    o.current && r(s ? o.current.scrollHeight : 0);
-  }, [s]), /* @__PURE__ */ t.jsxs("div", { className: xt.accordion, children: [
+  return f.useEffect(() => {
+    o.current && l(s ? o.current.scrollHeight : 0);
+  }, [s]), /* @__PURE__ */ t.jsxs("div", { className: gt.accordion, children: [
     /* @__PURE__ */ t.jsxs(
       "div",
       {
-        className: xt.header,
-        onClick: i,
+        className: gt.header,
+        onClick: n,
         children: [
-          /* @__PURE__ */ t.jsx("h5", { id: "h5", children: d }),
-          /* @__PURE__ */ t.jsx("div", { className: V(xt.icon, { [xt.open]: s }), children: /* @__PURE__ */ t.jsx(b, { name: "CaretDown" }) })
+          /* @__PURE__ */ t.jsx("h5", { id: "h5", children: u }),
+          /* @__PURE__ */ t.jsx("div", { className: Y(gt.icon, { [gt.open]: s }), children: /* @__PURE__ */ t.jsx(b, { name: "CaretDown" }) })
         ]
       }
     ),
@@ -3198,15 +3469,15 @@ const Ca = (d) => {
       "div",
       {
         ref: o,
-        className: xt.content,
+        className: gt.content,
         style: { height: `${c}px` },
         children: /* @__PURE__ */ t.jsx("p", { id: "p", children: a })
       }
     )
   ] });
-}, Aa = ({ children: d, path: a, className: e, target: s = "_self", id: n }) => {
-  const c = jt(), r = /^https?:\/\//.test(a), o = (i) => {
-    r || s === "_blank" ? s === "_blank" ? window.open(a, "_blank") : window.location.href = a : (i.preventDefault(), c(a, { replace: !0 }));
+}, ac = ({ children: u, path: a, className: e, target: s = "_self", id: i }) => {
+  const c = Bt(), l = /^https?:\/\//.test(a), o = (n) => {
+    l || s === "_blank" ? s === "_blank" ? window.open(a, "_blank") : window.location.href = a : (n.preventDefault(), c(a, { replace: !0 }));
   };
   return /* @__PURE__ */ t.jsx(
     "div",
@@ -3215,16 +3486,16 @@ const Ca = (d) => {
       className: e,
       role: "link",
       style: { cursor: "pointer" },
-      id: n,
-      children: d
+      id: i,
+      children: u
     }
   );
-}, ma = "_buttonsBlock_1b2rb_1", ha = "_slideUp_1b2rb_1", pa = {
-  buttonsBlock: ma,
-  slideUp: ha
-}, Ma = () => /* @__PURE__ */ t.jsxs("div", { className: pa.buttonsBlock, children: [
+}, Ua = "_buttonsBlock_1b2rb_1", Ha = "_slideUp_1b2rb_1", Ra = {
+  buttonsBlock: Ua,
+  slideUp: Ha
+}, cc = () => /* @__PURE__ */ t.jsxs("div", { className: Ra.buttonsBlock, children: [
   /* @__PURE__ */ t.jsx(
-    W,
+    Q,
     {
       type: "Primary",
       style: {
@@ -3236,19 +3507,19 @@ const Ca = (d) => {
       children: "Add to Cart"
     }
   ),
-  /* @__PURE__ */ t.jsx(W, { type: "Secondary", children: "Buy" })
-] }), xa = "_wrapper_st58d_1", ga = "_label_st58d_10", fa = "_textarea_st58d_18", ba = "_length_st58d_33", vt = {
-  wrapper: xa,
-  label: ga,
-  textarea: fa,
-  length: ba
-}, Oa = (d) => {
-  const { onChange: a, label: e, value: s, maxLength: n, placeholder: c = "Type something..." } = d, [r, o] = x.useState(s.length);
-  return /* @__PURE__ */ t.jsxs("div", { className: vt.wrapper, children: [
+  /* @__PURE__ */ t.jsx(Q, { type: "Secondary", children: "Buy" })
+] }), La = "_wrapper_st58d_1", za = "_label_st58d_10", Fa = "_textarea_st58d_18", Va = "_length_st58d_33", jt = {
+  wrapper: La,
+  label: za,
+  textarea: Fa,
+  length: Va
+}, lc = (u) => {
+  const { onChange: a, label: e, value: s, maxLength: i, placeholder: c = "Type something..." } = u, [l, o] = f.useState(s.length);
+  return /* @__PURE__ */ t.jsxs("div", { className: jt.wrapper, children: [
     e && /* @__PURE__ */ t.jsx(
       "label",
       {
-        className: vt.label,
+        className: jt.label,
         htmlFor: e,
         children: e
       }
@@ -3258,55 +3529,56 @@ const Ca = (d) => {
       {
         id: e,
         defaultValue: s,
-        onChange: (i) => {
-          o(i.target.value.length), a(i.target.value);
+        onChange: (n) => {
+          o(n.target.value.length), a(n.target.value);
         },
         placeholder: c,
-        className: vt.textarea,
-        maxLength: n
+        className: jt.textarea,
+        maxLength: i
       }
     ),
-    n && /* @__PURE__ */ t.jsxs("div", { className: vt.length, children: [
-      r,
+    i && /* @__PURE__ */ t.jsxs("div", { className: jt.length, children: [
+      l,
       "/",
-      n
+      i
     ] })
   ] });
 };
 export {
-  Pa as Accordion,
-  Wo as BurgerMenuButton,
-  W as Button,
-  Mn as ButtonTypeSettings,
-  Na as ButtonsSettings,
-  Ia as CategorySettings,
-  ft as ChooseImage,
-  Ua as ChooseImageModal,
-  Go as EmptyCart,
-  $a as FormSettings,
-  Ca as HeaderButtons,
+  oc as Accordion,
+  ja as BurgerMenuButton,
+  Q as Button,
+  ai as ButtonTypeSettings,
+  Za as ButtonsSettings,
+  Ja as CategorySettings,
+  bt as ChooseImage,
+  uc as ChooseImageModal,
+  ba as EmptyCart,
+  Ka as FormSettings,
+  sc as HeaderButtons,
   b as Icon,
-  K as InputSettings,
-  Qi as InputUI,
-  Ye as ItemsSettings,
-  ka as LayoutSettings,
-  Aa as Link,
-  wa as ListingSelector,
-  Da as Loader,
+  tt as InputSettings,
+  $o as InputUI,
+  Ge as ItemsSettings,
+  Wa as LayoutSettings,
+  ac as Link,
+  tc as ListingSelector,
+  _c as Loader,
   Mt as Modal,
-  Ba as PagesMobileMenu,
-  Xo as PagesMobileModal,
-  Ma as ProductCardButtons,
-  Sa as ProductOptions,
-  Ot as RangeSelector,
-  tt as Select,
-  Ta as ShareLink,
-  Vo as ShoppingButton,
-  Yo as ShoppingModalCart,
-  et as Switch,
+  nc as PagesMobileMenu,
+  va as PagesMobileModal,
+  Qa as PagesSettings,
+  cc as ProductCardButtons,
+  ec as ProductOptions,
+  qt as RangeSelector,
+  et as Select,
+  ic as ShareLink,
+  ga as ShoppingButton,
+  xa as ShoppingModalCart,
+  st as Switch,
   Lt as TextSettings,
-  qt as TextareaSettings,
-  Oa as TextareaUI,
-  Ht as TypesText,
-  Rt as UserInfo
+  Et as TextareaSettings,
+  lc as TextareaUI,
+  Rt as TypesText,
+  Ft as UserInfo
 };