@billgangcom/theme-lib 1.44.2 → 1.44.4

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 mt, P as wt, g as Ct, h as St, i as Vt, s as Yt, k as Ut, l as Bt, m as Ot, M as Mt, n as Dt, o as Lt, p as Gt } from "./index-_swnDkZg.js";
+import { q as uc, L as _c } from "./index-_swnDkZg.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 = (d) => {
+  const { alignment: a, padding: e, setPadding: s, setAlignment: i } = d;
+  function c(g) {
+    switch (g) {
       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(g) {
+    switch (g) {
       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), [_, v] = 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((g) => /* @__PURE__ */ t.jsxs(
           "div",
           {
             onClick: () => {
-              n(h);
+              i(g);
             },
-            className: J.alignment,
+            className: K.alignment,
             onMouseEnter: () => {
-              i(h);
+              n(g);
             },
             onMouseLeave: () => {
-              i(null);
+              n(null);
             },
             children: [
-              h !== a && o !== h && /* @__PURE__ */ t.jsx("div", { className: J.circle }),
-              h !== a && o === h && /* @__PURE__ */ t.jsx(
+              g !== a && o !== g && /* @__PURE__ */ t.jsx("div", { className: K.circle }),
+              g !== a && o === g && /* @__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(
+              g === a && /* @__PURE__ */ t.jsx(
                 b,
                 {
                   name: c(a),
@@ -98,37 +98,37 @@ const Gt = "_wrapper_1ibay_2", Xt = "_alignmentBlock_1ibay_8", Wt = "_title_1iba
               )
             ]
           },
-          h
+          g
         )) }),
-        /* @__PURE__ */ t.jsx("div", { className: J.paddings, children: ae.map((h) => /* @__PURE__ */ t.jsxs(
+        /* @__PURE__ */ t.jsx("div", { className: K.paddings, children: ce.map((g) => /* @__PURE__ */ t.jsxs(
           "label",
           {
-            className: V(J.padding, {
-              [J.active]: l === h
+            className: Y(K.padding, {
+              [K.active]: _ === g
             }),
             onFocus: () => {
-              j(h);
+              v(g);
             },
             onBlur: () => {
-              j(null);
+              v(null);
             },
             children: [
               /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
                 b,
                 {
-                  name: r(h),
+                  name: l(g),
                   width: 20,
                   height: 20
                 }
               ) }),
               /* @__PURE__ */ t.jsx(
-                K,
+                tt,
                 {
                   type: "number",
-                  value: String(e[h]),
-                  onChange: (p) => s({
+                  value: String(e[g]),
+                  onChange: (r) => s({
                     ...e,
-                    [h]: Number(p)
+                    [g]: Number(r)
                   }),
                   paddingless: !0,
                   borderless: !0
@@ -136,26 +136,26 @@ const Gt = "_wrapper_1ibay_2", Xt = "_alignmentBlock_1ibay_8", Wt = "_title_1iba
               )
             ]
           },
-          h
+          g
         )) })
       ] })
     ] })
   ] });
-}, 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,
+}, le = "_title_1jkiw_1", re = "_subtitle_1jkiw_5", de = "_header_1jkiw_12", ue = "_text_1jkiw_13", _e = "_top_1jkiw_20", me = "_itemsBlock_1jkiw_29", ht = {
+  title: le,
+  subtitle: re,
+  header: de,
+  text: ue,
+  top: _e,
+  itemsBlock: me
+}, pe = "_typeTexts_167ez_1", he = "_block_167ez_8", fe = "_active_167ez_25", Pt = {
+  typeTexts: pe,
   block: he,
-  active: pe
-}, xe = ["bold", "italic", "underline", "strike-through", "code"], Ht = (d) => {
+  active: fe
+}, ge = ["bold", "italic", "underline", "strike-through", "code"], Ht = (d) => {
   const { typesText: a, setTypesText: e } = d;
-  function s(n) {
-    switch (n) {
+  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,37 +202,37 @@ const Gt = "_wrapper_1ibay_2", Xt = "_alignmentBlock_1ibay_8", Wt = "_title_1iba
   h5: "Heading 5",
   h6: "Heading 6",
   p: "Paragraph"
-}, Lt = (d) => {
+}, Rt = (d) => {
   const {
     typesText: a,
     isActiveText: e,
     setIsActiveText: s,
-    text: n,
+    text: i,
     setText: c,
-    setTypesText: r,
+    setTypesText: l,
     title: o,
-    subtitle: i = "Items",
-    typeFont: l,
-    setTypeFont: j
+    subtitle: n = "Items",
+    typeFont: _,
+    setTypeFont: v
   } = 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 }),
       e !== void 0 && s && /* @__PURE__ */ t.jsx(
-        et,
+        st,
         {
           current: e,
-          onChange: (h) => s(h)
+          onChange: (g) => s(g)
         }
       )
     ] }),
     /* @__PURE__ */ t.jsxs("div", { className: ht.itemsBlock, children: [
-      /* @__PURE__ */ t.jsx("h5", { className: ht.subtitle, children: i }),
+      /* @__PURE__ */ t.jsx("h5", { className: ht.subtitle, children: n }),
       /* @__PURE__ */ t.jsx(
-        qt,
+        Et,
         {
-          onChange: (h) => c(h),
-          value: n,
+          onChange: (g) => c(g),
+          value: i,
           maxLength: 150
         }
       ),
@@ -240,218 +240,231 @@ const Gt = "_wrapper_1ibay_2", Xt = "_alignmentBlock_1ibay_8", Wt = "_title_1iba
         Ht,
         {
           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(
+            (g) => g !== ft[_]
           ),
-          onChange: (h) => j(
-            Object.keys(pt).find(
-              (p) => pt[p] === h
+          onChange: (g) => v(
+            Object.keys(ft).find(
+              (r) => ft[r] === g
             )
           ),
-          value: pt[l]
+          value: ft[_]
         }
       )
     ] })
   ] });
-}, 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", Ue = "_modalOptions_pef24_151", De = "_addButton_pef24_164", Le = "_deleteButton_pef24_179", He = "_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,
-  addButton: Ue,
-  deleteButton: De,
+  modal: qe,
+  link: Ee,
+  modalOptions: Ue,
+  addButton: De,
+  deleteButton: Le,
   closeIcon: He
-}, Le = x.forwardRef(
+}, Re = f.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;
+    const { activeItem: e, setActiveItem: s, popupPosition: i, modalOptions: c, setIsOpenModal: l } = d;
+    function o(n, _) {
+      return n.length > _ ? `${n.slice(0, _)}...` : 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) => {
-                    const j = {
+                  activeImage: e[n.field],
+                  onChange: (_) => {
+                    const v = {
                       ...e,
-                      [i.field]: l
+                      [n.field]: _
                     };
-                    s(j);
+                    s(v);
                   }
                 },
-                String(i.field)
+                String(n.field)
               );
-            if (i.type === "text")
+            if (n.type === "text")
               return /* @__PURE__ */ t.jsx(
-                Lt,
+                Rt,
                 {
-                  typesText: e[i.field.type],
-                  setTypesText: (l) => {
-                    const j = {
+                  typesText: e[n.field.type],
+                  setTypesText: (_) => {
+                    const v = {
                       ...e,
-                      [i.field.type]: l
+                      [n.field.type]: _
                     };
-                    s(j);
+                    s(v);
                   },
-                  text: e[i.field.text]["en-US"] || "",
-                  setText: (l) => {
-                    const j = {
+                  text: e[n.field.text]["en-US"] || "",
+                  setText: (_) => {
+                    const v = {
                       ...e,
-                      [i.field.text]: {
-                        "en-US": l
+                      [n.field.text]: {
+                        "en-US": _
                       }
                     };
-                    s(j);
+                    s(v);
                   },
-                  typeFont: e[i.field.typeFont],
-                  setTypeFont: (l) => {
-                    const j = {
+                  typeFont: e[n.field.typeFont],
+                  setTypeFont: (_) => {
+                    const v = {
                       ...e,
-                      [i.field.typeFont]: l
+                      [n.field.typeFont]: _
                     };
-                    s(j);
+                    s(v);
                   },
-                  subtitle: i.label
+                  subtitle: n.label
                 }
               );
-            if (i.type === "input")
+            if (n.type === "input")
               return /* @__PURE__ */ t.jsx(
-                K,
+                tt,
                 {
-                  onChange: (l) => {
-                    const j = {
+                  onChange: (_) => {
+                    const v = {
                       ...e,
-                      [i.field]: l
+                      [n.field]: _
                     };
-                    s(j);
+                    s(v);
                   },
-                  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) => {
-                      const j = {
+                    onChange: (_) => {
+                      const v = {
                         ...e,
-                        [i.field.text]: l
+                        [n.field.text]: _
                       };
-                      s(j);
+                      s(v);
                     },
-                    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) => {
-                      const j = {
+                    current: !!e[n.field.switch] || !1,
+                    label: n.switchLabel,
+                    onChange: (_) => {
+                      const v = {
                         ...e,
-                        [i.field.switch]: l
+                        [n.field.switch]: _
                       };
-                      s(j);
+                      s(v);
                     }
                   }
                 )
               ] });
-            if (i.type === "list")
+            if (n.type === "list")
               return /* @__PURE__ */ t.jsx(
-                Ye,
+                Ge,
                 {
-                  items: e[i.field] || [],
-                  setItems: (l) => {
-                    const j = {
+                  items: e[n.field] || [],
+                  setItems: (_) => {
+                    const v = {
                       ...e,
-                      [i.field]: l
+                      [n.field]: _
                     };
-                    s(j);
+                    s(v);
                   },
                   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) => {
-                    const j = {
+                  options: n.itemsOptions,
+                  onChange: (_) => {
+                    const v = {
                       ...e,
-                      [i.field]: l
+                      [n.field]: _
                     };
-                    s(j);
+                    s(v);
                   },
-                  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: (_) => {
+                      if (n.switcher === "isActive") {
+                        const v = {
+                          ...e,
+                          [n.switcher]: _
+                        };
+                        s(v);
+                      }
+                    }
+                  } : 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) => {
+  subtitle: Fe,
+  items: Ve
+}, Tt = (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,
+  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: d, children: a }) {
   const {
     attributes: e,
     listeners: s,
-    setNodeRef: n,
+    setNodeRef: i,
     transform: c,
-    transition: r,
+    transition: l,
     isDragging: o
-  } = Tt({
+  } = Ct({
     id: d.id
-  }), i = {
-    transform: Pt.Transform.toString(c),
-    transition: r
+  }), 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 = (d) => {
   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,
-    withImage: j = !1,
-    deletable: h = !0,
-    addable: p = !0,
-    itemsType: m,
-    itemsPlaceholder: f = "",
-    itemsOptions: u,
-    hasRangeSelector: S = !1,
-    rangeSelectorOptions: D,
-    modalOptions: I,
-    addableOptions: g = {},
-    limit: w,
-    autoScrollInterval: E
-  } = d, [R, C] = x.useState(null), [P, st] = x.useState({
+    editable: n = !0,
+    draggable: _ = !1,
+    withImage: v = !1,
+    deletable: g = !0,
+    addable: r = !0,
+    itemsType: k,
+    itemsPlaceholder: p = "",
+    itemsOptions: m,
+    hasRangeSelector: $ = !1,
+    rangeSelectorOptions: H,
+    modalOptions: q,
+    addableOptions: u = {},
+    limit: S,
+    autoInterval: E
+  } = d, [F, B] = f.useState(null), [j, P] = 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), w = f.useRef(null), [L, A] = f.useState(!1), D = yt(
+    kt(wt, {
       activationConstraint: {
         distance: 5
       }
     })
   );
-  x.useEffect(() => {
-    const _ = () => {
-      C(null), O(!1);
+  f.useEffect(() => {
+    const h = () => {
+      B(null), A(!1);
     };
-    return document.body.addEventListener("click", _), C(null), O(!1), () => {
-      C(null), O(!1), document.body.removeEventListener("click", _);
+    return document.body.addEventListener("click", h), B(null), A(!1), () => {
+      B(null), A(!1), document.body.removeEventListener("click", h);
     };
-  }, []), x.useEffect(() => {
-    if (R) {
-      const _ = [...s].map((k) => k.id === R.id ? R : k);
-      n(_);
+  }, []), f.useEffect(() => {
+    if (F) {
+      const h = [...s].map((N) => N.id === F.id ? F : N);
+      i(h);
     }
-  }, [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 (w.current && x) {
+      const h = w.current.getBoundingClientRect().height, N = window.innerHeight;
+      let O = x.top;
+      O + h > N + window.scrollY - 200 && (O = N + window.scrollY - h - 200), O < 0 && (O = 10), P({
+        top: O,
+        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);
+  }, [w.current, x]);
+  const nt = (h, N) => {
+    h.stopPropagation();
+    const O = h.target.getBoundingClientRect();
+    I({
+      top: O.top + window.scrollY - 70,
+      left: O.left - (r ? 30 : 65)
+    }), B(N), A(!0);
   };
-  function rt(_) {
-    if (j)
-      return _ ? /* @__PURE__ */ t.jsx(
+  function dt(h) {
+    if (v)
+      return h ? /* @__PURE__ */ t.jsx(
         "img",
         {
-          src: `https://imagedelivery.net/${_[0]}/w=1000`,
+          src: `https://imagedelivery.net/${h[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 y = (h) => {
+    const { active: N, over: O } = h;
+    if (O && N.id !== O.id) {
+      const R = s.findIndex((M) => M.id === N.id), X = s.findIndex((M) => M.id === O.id);
+      if (R !== -1 && X !== -1) {
+        const M = [...s], [ut] = M.splice(R, 1);
+        M.splice(X, 0, ut), i(M);
       }
     }
-  }, q = (_, k) => {
-    var U, Y;
-    const T = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-      l && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
+  }, U = (h, N) => {
+    var R, X;
+    const O = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+      _ && /* @__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,
+      k === "select" && m && /* @__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: (M) => {
+            const ut = [...s], pt = m.find((vt) => vt.name["en-US"] === M);
+            if (!pt) return;
+            const _t = ut.map((vt) => vt.id === h.id ? {
+              ...pt,
               name: {
-                "en-US": A
+                "en-US": M
               }
-            } : bt);
-            C({
-              ..._,
+            } : vt);
+            B({
+              ...h,
               name: {
-                "en-US": A
+                "en-US": M
               }
-            }), 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: h.name["en-US"],
+          options: m.filter((M) => !s.find((ut) => ut.name["en-US"] === M.name["en-US"])).map((M) => M.name["en-US"]),
+          leftAddon: dt(h.images)
         }
       ),
-      m === "input" && /* @__PURE__ */ t.jsx(
-        K,
+      k === "input" && /* @__PURE__ */ t.jsx(
+        tt,
         {
-          onChange: (A) => {
-            const _t = [...s].map((ut) => ut.id === _.id ? {
-              ..._,
+          onChange: (M) => {
+            const pt = [...s].map((_t) => _t.id === h.id ? {
+              ...h,
               name: {
-                "en-US": A
+                "en-US": M
               }
-            } : ut);
-            n([..._t]);
+            } : _t);
+            i([...pt]);
           },
-          value: _.name["en-US"],
-          placeholder: f
+          value: h.name["en-US"],
+          placeholder: p
         }
       ),
-      m === "image" && /* @__PURE__ */ t.jsx(
-        ft,
+      k === "image" && /* @__PURE__ */ t.jsx(
+        bt,
         {
-          onChange: (A) => {
-            const _t = [...s].map((ut) => ut.id === _.id ? {
-              ..._,
-              images: A
-            } : ut);
-            n([..._t]);
+          onChange: (M) => {
+            const pt = [...s].map((_t) => _t.id === h.id ? {
+              ...h,
+              images: M
+            } : _t);
+            i([...pt]);
           },
-          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: (R = s.find((M) => M.id === h.id)) != null && R.images ? (X = s.find((M) => M.id === h.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: (M) => {
+              console.log(M, h), nt(M, h);
+            }
           }
         ) }),
-        h && /* @__PURE__ */ t.jsx("div", { className: H.deleteButton, children: /* @__PURE__ */ t.jsx(
+        g && /* @__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((M) => M.id !== h.id))
           }
         ) })
       ] })
     ] });
-    return l ? /* @__PURE__ */ t.jsx(
-      Ve,
+    return _ ? /* @__PURE__ */ t.jsx(
+      Ye,
       {
-        product: _,
-        index: k,
-        children: T
+        product: h,
+        index: N,
+        children: O
       },
-      _.id
+      h.id
     ) : /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: H.product,
-        children: T
+        className: z.product,
+        children: O
       },
-      _.id
+      h.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: (h) => e == null ? void 0 : e(h)
         }
       )
     ] }),
-    R && i && I && X && /* @__PURE__ */ t.jsx(
-      Le,
+    F && n && q && L && /* @__PURE__ */ t.jsx(
+      Re,
       {
-        ref: B,
-        activeItem: R,
-        setActiveItem: C,
-        popupPosition: P,
-        modalOptions: I,
-        setIsOpenModal: O
+        ref: w,
+        activeItem: F,
+        setActiveItem: B,
+        popupPosition: j,
+        modalOptions: q,
+        setIsOpenModal: A
       }
     ),
-    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,
+    $ && H && /* @__PURE__ */ t.jsx(qt, { ...H }),
+    /* @__PURE__ */ t.jsxs("div", { className: z.products, children: [
+      o && /* @__PURE__ */ t.jsx("h5", { className: z.subtitle, children: o }),
+      _ ? /* @__PURE__ */ t.jsx(
+        $t,
         {
-          sensors: L,
-          onDragEnd: v,
+          sensors: D,
+          onDragEnd: y,
           children: /* @__PURE__ */ t.jsx(
-            St,
+            It,
             {
-              items: s.map((_) => _.id),
-              strategy: Ct,
-              children: s.map((_, k) => q(_, k))
+              items: s.map((h) => h.id),
+              strategy: Nt,
+              children: s.map((h, N) => U(h, N))
             }
           )
         }
-      ) : s.map((_, k) => q(_, k)),
-      p && /* @__PURE__ */ t.jsx(
+      ) : s.map((h, N) => U(h, 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]: !!(S && S <= s.length || s.length === (m == null ? void 0 : m.length))
               }),
               size: "s",
-              disabled: !!(w && w <= s.length || s.length === (u == null ? void 0 : u.length)),
+              disabled: !!(S && S <= s.length || s.length === (m == null ? void 0 : m.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 h = [...s];
+                let N = null;
+                if (m) {
+                  for (let O = 0; O < m.length; O++)
+                    if (!s.find((R) => R.id === m[O].id)) {
+                      N = m[O];
                       break;
                     }
                 }
-                m === "select" && u ? _.push({
-                  name: k ? k.name : u[0].name,
-                  id: (k == null ? void 0 : k.id) || u[0].id,
-                  ...g
-                }) : m === "input" ? _.push({
+                k === "select" && m ? h.push({
+                  name: N ? N.name : m[0].name,
+                  id: (N == null ? void 0 : N.id) || m[0].id,
+                  ...u
+                }) : k === "input" ? h.push({
                   name: {
                     "en-US": ""
                   },
                   id: mt(),
-                  ...g
-                }) : _.push({
+                  ...u
+                }) : h.push({
                   name: {
                     "en-US": `Image ${s.length + 1}`
                   },
                   id: mt(),
-                  ...g
-                }), n(_);
+                  ...u
+                }), i(h);
               },
               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: (h) => E.setAutoInterval(Number(h)),
         min: 0.1,
         max: 100,
         style: {
@@ -825,55 +840,55 @@ 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,
+}, 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", ps = "_modalOptions_82zux_151", hs = "_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: ps,
   addButton: hs,
-  deleteButton: ps
-}, Ia = (d) => {
+  deleteButton: fs
+}, Ja = (d) => {
   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,
-    addable: j = !0,
-    itemsOptions: h,
-    hasRangeSelector: p = !1,
-    rangeSelectorOptions: m,
-    limit: f,
-    autoScrollInterval: u,
-    deletable: S
+    draggable: n = !1,
+    withImage: _ = !1,
+    addable: v = !0,
+    itemsOptions: g,
+    hasRangeSelector: r = !1,
+    rangeSelectorOptions: k,
+    limit: p,
+    autoScrollInterval: m,
+    deletable: $
   } = d;
-  function D(g) {
-    if (l)
-      return g ? /* @__PURE__ */ t.jsx(
+  function H(u) {
+    if (_)
+      return u ? /* @__PURE__ */ t.jsx(
         "img",
         {
-          src: `https://imagedelivery.net/${g[0]}/w=1000`,
+          src: `https://imagedelivery.net/${u[0]}/w=1000`,
           alt: "image",
           width: 16,
           height: 16
@@ -888,11 +903,11 @@ const Ye = (d) => {
         }
       );
   }
-  const I = (g, w = !1) => {
-    const E = h.find((C) => C.id === g);
+  const q = (u, S = !1) => {
+    const E = g.find((B) => B.id === u);
     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: (B) => {
+            const j = [...s], P = g.find((w) => w.name === B);
+            if (!P) return;
+            const x = P.id, I = j.map((w) => w === u ? x : w);
+            i([...I]);
           },
           value: E.name,
-          options: h.filter((C) => !s.find((P) => P === C.id)).map((C) => C.name),
-          leftAddon: D(E.images)
+          options: g.filter((B) => !s.find((j) => j === B.id)).map((B) => B.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(
+      S && /* @__PURE__ */ t.jsx("div", { className: Z.buttons, children: /* @__PURE__ */ t.jsx("div", { className: Z.deleteButton, children: /* @__PURE__ */ t.jsx(
         b,
         {
           name: "Trash",
@@ -923,35 +938,35 @@ const Ye = (d) => {
           width: 20,
           height: 20,
           fill: "#C12A2A",
-          onClick: () => n(s.filter((C) => C !== g))
+          onClick: () => i(s.filter((B) => B !== u))
         }
       ) }) })
     ] });
     return /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: Q.product,
-        children: R
+        className: Z.product,
+        children: F
       },
-      g
+      u
     );
   };
-  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)
+          onChange: (u) => e == null ? void 0 : e(u)
         }
       )
     ] }),
-    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)),
-      j && /* @__PURE__ */ t.jsx(
+    r && k && /* @__PURE__ */ t.jsx(qt, { ...k }),
+    /* @__PURE__ */ t.jsxs("div", { className: Z.products, children: [
+      o && /* @__PURE__ */ t.jsx("h5", { className: Z.subtitle, children: o }),
+      s.map((u) => q(u, $)),
+      v && /* @__PURE__ */ t.jsx(
         "div",
         {
           style: {
@@ -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]: !!(p && p <= s.length || s.length === g.length)
               }),
               size: "s",
-              disabled: !!(f && f <= s.length || s.length === h.length),
+              disabled: !!(p && p <= s.length || s.length === g.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];
+                const u = [...s];
+                let S = null;
+                if (g) {
+                  for (let E = 0; E < g.length; E++)
+                    if (!s.find((F) => F === g[E].id)) {
+                      S = g[E];
                       break;
                     }
                 }
-                g.push((w == null ? void 0 : w.id) || h[0].id), n(g);
+                u.push((S == null ? void 0 : S.id) || g[0].id), i(u);
               },
               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 }),
+    m !== void 0 && /* @__PURE__ */ t.jsx(
+      tt,
       {
         label: "Auto scroll interval",
         type: "number",
-        value: String(u.scrollInterval),
-        onChange: (g) => u.setScrollInterval(Number(g)),
+        value: String(m.scrollInterval),
+        onChange: (u) => m.setScrollInterval(Number(u)),
         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", Us = "_addButton_roi3a_164", Ds = "_deleteButton_roi3a_179", Ls = "_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,
-  deleteButton: Us,
-  closeIcon: Ds
-}, Hs = x.forwardRef(
+  link: qs,
+  modalOptions: Es,
+  addButton: Us,
+  deleteButton: Ds,
+  closeIcon: Ls
+};
+function Hs({ product: d, children: a }) {
+  const {
+    attributes: e,
+    listeners: s,
+    setNodeRef: i,
+    transform: c,
+    transition: l,
+    isDragging: o
+  } = Ct({
+    id: d.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 = (d) => {
+  const {
+    isActiveItems: a,
+    setIsActiveItems: e,
+    items: s,
+    setItems: i,
+    title: c,
+    subtitle: l,
+    editable: o = !0,
+    draggable: n = !1,
+    deletable: _ = !0,
+    addable: v = !0,
+    itemsType: g,
+    itemsOptions: r,
+    addableOptions: k = {},
+    limit: p
+  } = d, [m, $] = f.useState(null), [H, q] = f.useState(null), u = f.useRef(null), S = yt(
+    kt(wt, {
+      activationConstraint: {
+        distance: 5
+      }
+    })
+  );
+  f.useEffect(() => {
+    if (m) {
+      const j = [...s].map((P) => P.id === m.id ? m : P);
+      i(j);
+    }
+  }, [m]), f.useEffect(() => {
+    u.current && H && (u.current.getBoundingClientRect().height, H.top);
+  }, [u.current, H]);
+  const E = (j, P) => {
+    j.stopPropagation();
+    const x = j.target.getBoundingClientRect();
+    q({
+      top: x.top + window.scrollY,
+      left: x.left - 30
+    }), $(P);
+  }, F = (j) => {
+    const { active: P, over: x } = j;
+    if (x && P.id !== x.id) {
+      const I = s.findIndex((L) => L.id === P.id), w = s.findIndex((L) => L.id === x.id);
+      if (I !== -1 && w !== -1) {
+        const L = [...s], [A] = L.splice(I, 1);
+        L.splice(w, 0, A), i(L);
+      }
+    }
+  }, B = (j, P) => {
+    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
+        }
+      ) }),
+      g === "select" && r && /* @__PURE__ */ t.jsx(
+        et,
+        {
+          onChange: (I) => {
+            const w = [...s], L = r.find((D) => D.name === I);
+            if (!L) return;
+            const A = w.map((D) => D.id === j.id ? {
+              ...L,
+              name: {
+                "en-US": I
+              }
+            } : D);
+            $({
+              ...j,
+              name: {
+                "en-US": I
+              }
+            }), i([...A]);
+          },
+          value: j.name,
+          options: r.filter((I) => !s.find((w) => w.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, j)
+          }
+        ) }),
+        _ && /* @__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 !== j.id))
+          }
+        ) })
+      ] })
+    ] });
+    return n ? /* @__PURE__ */ t.jsx(
+      Hs,
+      {
+        product: j,
+        index: P,
+        children: x
+      },
+      j.id
+    ) : /* @__PURE__ */ t.jsx(
+      "div",
+      {
+        className: J.product,
+        children: x
+      },
+      j.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: (j) => e == null ? void 0 : e(j)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t.jsxs("div", { className: J.products, children: [
+      l && /* @__PURE__ */ t.jsx("h5", { className: J.subtitle, children: l }),
+      n ? /* @__PURE__ */ t.jsx(
+        $t,
+        {
+          sensors: S,
+          onDragEnd: F,
+          children: /* @__PURE__ */ t.jsx(
+            It,
+            {
+              items: s.map((j) => j.id),
+              strategy: Nt,
+              children: s.map((j, P) => B(j, P))
+            }
+          )
+        }
+      ) : s.map((j, P) => B(j, P)),
+      v && /* @__PURE__ */ t.jsx(
+        "div",
+        {
+          style: {
+            width: "100%",
+            display: "flex",
+            justifyContent: "center"
+          },
+          children: /* @__PURE__ */ t.jsx(
+            ot,
+            {
+              withoutHover: !0,
+              className: Y(J.button, {
+                [J.disabled]: !!(p && p <= s.length || s.length === (r == null ? void 0 : r.length))
+              }),
+              size: "s",
+              disabled: !!(p && p <= s.length || s.length === (r == null ? void 0 : r.length)),
+              onClick: () => {
+                const j = [...s];
+                let P = null;
+                if (r) {
+                  for (let x = 0; x < r.length; x++)
+                    if (!s.find((I) => I.id === r[x].id)) {
+                      P = r[x];
+                      break;
+                    }
+                }
+                g === "select" && r && j.push({
+                  name: P ? P.name : r[0].name,
+                  id: (P == null ? void 0 : P.id) || r[0].id,
+                  ...k
+                }), i(j);
+              },
+              style: {
+                width: "fit-content"
+              },
+              children: /* @__PURE__ */ t.jsxs("div", { className: J.addButton, children: [
+                /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
+                /* @__PURE__ */ t.jsx(
+                  b,
+                  {
+                    name: "Plus",
+                    width: 16,
+                    height: 16
+                  }
+                )
+              ] })
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+}, Rs = "_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: Rs,
+  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(
   (d, a) => {
-    const { activeItem: e, setActiveItem: s, popupPosition: n, modalOptions: c, setIsOpenModal: r } = d;
+    const { activeItem: e, setActiveItem: s, popupPosition: i, modalOptions: c, setIsOpenModal: l } = d;
     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,71 +1338,71 @@ 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 _ = {
                       ...e,
-                      [o.field]: i
+                      [o.field]: n
                     };
-                    s(l);
+                    s(_);
                   }
                 },
                 String(o.field)
               );
             if (o.type === "text")
               return /* @__PURE__ */ t.jsx(
-                Lt,
+                Rt,
                 {
                   typesText: e[o.field.type],
-                  setTypesText: (i) => {
-                    const l = {
+                  setTypesText: (n) => {
+                    const _ = {
                       ...e,
-                      [o.field.type]: i
+                      [o.field.type]: n
                     };
-                    s(l);
+                    s(_);
                   },
                   text: e[o.field.text]["en-US"] || "",
-                  setText: (i) => {
-                    const l = {
+                  setText: (n) => {
+                    const _ = {
                       ...e,
                       [o.field.text]: {
-                        "en-US": i
+                        "en-US": n
                       }
                     };
-                    s(l);
+                    s(_);
                   },
                   typeFont: e[o.field.type],
-                  setTypeFont: (i) => {
-                    const l = {
+                  setTypeFont: (n) => {
+                    const _ = {
                       ...e,
-                      [o.field.type]: i
+                      [o.field.type]: n
                     };
-                    s(l);
+                    s(_);
                   },
                   subtitle: o.label
                 }
               );
             if (o.type === "input")
               return /* @__PURE__ */ t.jsx(
-                K,
+                tt,
                 {
-                  onChange: (i) => {
-                    const l = {
+                  onChange: (n) => {
+                    const _ = {
                       ...e,
-                      [o.field]: i
+                      [o.field]: n
                     };
-                    s(l);
+                    s(_);
                   },
                   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 _ = {
                         ...e,
-                        [o.field.text]: i
+                        [o.field.text]: n
                       };
-                      s(l);
+                      s(_);
                     },
                     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 _ = {
                         ...e,
-                        [o.field.switch]: i
+                        [o.field.switch]: n
                       };
-                      s(l);
+                      s(_);
                     }
                   }
                 )
               ] });
             if (o.type === "select")
               return /* @__PURE__ */ t.jsx(
-                tt,
+                et,
                 {
                   options: o.itemsOptions,
-                  onChange: (i) => {
-                    const l = {
+                  onChange: (n) => {
+                    const _ = {
                       ...e,
-                      [o.field]: i
+                      [o.field]: n
                     };
-                    s(l);
+                    s(_);
                   },
                   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 pn(d) {
+  const { product: a, children: e } = d, { attributes: s, listeners: i, setNodeRef: c, transform: l, transition: o, isDragging: n } = Ct({
     id: a.id
-  }), l = {
-    transform: Pt.Transform.toString(r),
+  }), _ = {
+    transform: St.Transform.toString(l),
     transition: o
   };
   return /* @__PURE__ */ t.jsx(
     "div",
     {
       ref: c,
-      style: l,
-      className: `${z.product} ${i ? z.dragging : ""}`,
+      style: _,
+      className: `${V.product} ${n ? V.dragging : ""}`,
       ...s,
-      ...n,
+      ...i,
       children: e
     }
   );
 }
-const $a = (d) => {
+const Ka = (d) => {
   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,
-    withImage: j = !1,
-    deletable: h = !0,
-    addable: p = !0,
-    itemsType: m,
-    itemsPlaceholder: f = "",
-    itemsOptions: u,
-    hasRangeSelector: S = !1,
-    rangeSelectorOptions: D,
-    modalOptions: I,
-    addableOptions: g = {}
-  } = d, [w, E] = x.useState(null), [R, C] = x.useState({
+    editable: n = !0,
+    draggable: _ = !1,
+    withImage: v = !1,
+    deletable: g = !0,
+    addable: r = !0,
+    itemsType: k,
+    itemsPlaceholder: p = "",
+    itemsOptions: m,
+    hasRangeSelector: $ = !1,
+    rangeSelectorOptions: H,
+    modalOptions: q,
+    addableOptions: u = {}
+  } = d, [S, E] = f.useState(null), [F, B] = f.useState({
     top: 0,
     left: 0
-  }), [P, st] = x.useState(null), y = x.useRef(null), [M, B] = x.useState(!1), X = $t(
-    Nt(Bt, {
+  }), [j, P] = f.useState(null), x = f.useRef(null), [I, w] = f.useState(!1), L = yt(
+    kt(wt, {
       activationConstraint: {
         distance: 5
       }
     })
   );
-  x.useEffect(() => {
-    const v = () => {
-      E(null), B(!1);
+  f.useEffect(() => {
+    const y = () => {
+      E(null), w(!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", y), E(null), w(!1), () => {
+      E(null), w(!1), document.body.removeEventListener("click", y);
     };
-  }, []), x.useEffect(() => {
-    if (w) {
-      const v = [...s].map((q) => q.id === w.id ? w : q);
-      n(v);
+  }, []), f.useEffect(() => {
+    if (S) {
+      const y = [...s].map((U) => U.id === S.id ? S : U);
+      i(y);
     }
-  }, [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
+  }, [S]), f.useEffect(() => {
+    if (x.current && j) {
+      const y = x.current.getBoundingClientRect().height, U = window.innerHeight;
+      let h = j.top;
+      h + y > U + window.scrollY - 200 && (h = U + window.scrollY - y - 200), h < 0 && (h = 10), B({
+        top: h,
+        left: j.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, j]);
+  const A = (y, U) => {
+    y.stopPropagation();
+    const h = y.target.getBoundingClientRect();
+    P({
+      top: h.top + window.scrollY,
+      left: h.left - 30
+    }), E(U), w(!0);
   };
-  function L(v) {
-    if (j)
-      return v ? /* @__PURE__ */ t.jsx(
+  function D(y) {
+    if (v)
+      return y ? /* @__PURE__ */ t.jsx(
         "img",
         {
-          src: `https://imagedelivery.net/${v[0]}/w=1000`,
+          src: `https://imagedelivery.net/${y[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 = (y) => {
+    const { active: U, over: h } = y;
+    if (h && U.id !== h.id) {
+      const N = s.findIndex((R) => R.id === U.id), O = s.findIndex((R) => R.id === h.id);
+      if (N !== -1 && O !== -1) {
+        const R = [...s], [X] = R.splice(N, 1);
+        R.splice(O, 0, X), i(R);
       }
     }
-  }, rt = (v) => {
-    var _;
-    const q = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-      l && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
+  }, dt = (y) => {
+    var h;
+    const U = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+      _ && /* @__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,
+      k === "select" && m && /* @__PURE__ */ t.jsx(
+        et,
         {
-          onChange: (k) => {
-            const U = [...s].map((Y) => Y.id === v.id ? {
-              ...v,
+          onChange: (N) => {
+            const R = [...s].map((X) => X.id === y.id ? {
+              ...y,
               name: {
-                "en-US": k
+                "en-US": N
               }
-            } : Y);
+            } : X);
             E({
-              ...v,
+              ...y,
               name: {
-                "en-US": k
+                "en-US": N
               }
-            }), n([...U]);
+            }), i([...R]);
           },
-          value: v.name["en-US"],
-          options: u.filter(
-            (k) => !s.find((T) => T.name["en-US"] === k)
+          value: y.name["en-US"],
+          options: m.filter(
+            (N) => !s.find((O) => O.name["en-US"] === N)
           ),
-          leftAddon: L(v.images)
+          leftAddon: D(y.images)
         }
       ),
-      m === "input" && /* @__PURE__ */ t.jsx(
-        K,
+      k === "input" && /* @__PURE__ */ t.jsx(
+        tt,
         {
-          onChange: (k) => {
-            const U = [...s].map((Y) => Y.id === v.id ? {
-              ...v,
+          onChange: (N) => {
+            const R = [...s].map((X) => X.id === y.id ? {
+              ...y,
               name: {
-                "en-US": k
+                "en-US": N
               }
-            } : Y);
-            n([...U]);
+            } : X);
+            i([...R]);
           },
-          value: v.name["en-US"],
-          placeholder: f
+          value: y.name["en-US"],
+          placeholder: p
         }
       ),
-      m === "image" && /* @__PURE__ */ t.jsx(
-        ft,
+      k === "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 R = [...s].map((X) => X.id === y.id ? {
+              ...y,
+              images: N
+            } : X);
+            i([...R]);
           },
-          activeImage: (_ = s.find((k) => k.id === v.id)) == null ? void 0 : _.images[0]
+          activeImage: (h = s.find((N) => N.id === y.id)) == null ? void 0 : h.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) => A(N, y)
           }
         ) }),
-        h && /* @__PURE__ */ t.jsx("div", { className: z.deleteButton, children: /* @__PURE__ */ t.jsx(
+        g && /* @__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 !== y.id))
           }
         ) })
       ] })
     ] });
-    return l ? /* @__PURE__ */ t.jsx(
-      Ls,
+    return _ ? /* @__PURE__ */ t.jsx(
+      pn,
       {
-        product: v,
-        children: q
+        product: y,
+        children: U
       },
-      v.id
+      y.id
     ) : /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: z.product,
-        children: q
+        className: V.product,
+        children: U
       },
-      v.id
+      y.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: (y) => e == null ? void 0 : e(y)
         }
       )
     ] }),
-    w && i && I && M && /* @__PURE__ */ t.jsx(
-      Hs,
+    S && n && q && I && /* @__PURE__ */ t.jsx(
+      mn,
       {
-        ref: y,
-        activeItem: w,
+        ref: x,
+        activeItem: S,
         setActiveItem: E,
-        popupPosition: R,
-        modalOptions: I,
-        setIsOpenModal: B
+        popupPosition: F,
+        modalOptions: q,
+        setIsOpenModal: w
       }
     ),
-    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,
+    $ && H && /* @__PURE__ */ t.jsx(qt, { ...H }),
+    /* @__PURE__ */ t.jsxs("div", { className: V.products, children: [
+      o && /* @__PURE__ */ t.jsx("h5", { className: V.subtitle, children: o }),
+      _ ? /* @__PURE__ */ t.jsx(
+        $t,
         {
-          sensors: X,
-          onDragEnd: Z,
+          sensors: L,
+          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((y) => y.id),
+              strategy: Nt,
+              children: s.map((y) => dt(y))
             }
           )
         }
-      ) : s.map((v) => rt(v)),
-      p && /* @__PURE__ */ t.jsx(
+      ) : s.map((y) => dt(y)),
+      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 y = [...s];
+                let U = null;
+                if (m) {
+                  for (let h = 0; h < m.length; h++)
+                    if (!s.find((N) => N.name["en-US"] === m[h])) {
+                      U = m[h];
                       break;
                     }
                 }
-                m === "select" && u ? v.push({
+                k === "select" && m ? y.push({
                   name: {
-                    "en-US": q || u[0]
+                    "en-US": U || m[0]
                   },
                   id: mt(),
-                  ...g,
+                  ...u,
                   maxSymbols: 100
                   // пример значения
-                }) : m === "input" ? v.push({
+                }) : k === "input" ? y.push({
                   name: {
                     "en-US": ""
                   },
                   id: mt(),
-                  ...g,
+                  ...u,
                   maxSymbols: 100
-                }) : v.push({
+                }) : y.push({
                   name: {
                     "en-US": `Image ${s.length + 1}`
                   },
                   id: mt(),
-                  ...g,
+                  ...u,
                   maxSymbols: 100
-                }), n(v);
+                }), i(y);
               },
               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(() => {
+}, hn = "_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: hn,
+  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((d, a) => {
+  const { activeButton: e, setActiveButton: s, popupPosition: i, editableLink: c = !0 } = d, [l, o] = f.useState(e.typesText), [n, _] = f.useState(e.destination), [v, g] = f.useState(e.page), [r, k] = f.useState(e.link || ""), [p, m] = f.useState(e.text || { "en-US": "" }), [$, H] = f.useState(e.openInNewTab), { pages: q } = Vt();
+  return f.useEffect(() => {
     s({
       ...e,
       ...{
-        text: m,
-        link: h,
-        destination: o,
-        typesText: c,
-        page: l,
-        openInNewTab: u
+        text: p,
+        link: r,
+        destination: n,
+        typesText: l,
+        page: v,
+        openInNewTab: $
       }
     });
-  }, [c, o, h, m, l, u]), /* @__PURE__ */ t.jsxs(
+  }, [l, n, r, p, v, $]), console.log(p), /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: ct.modal,
-      onClick: (I) => {
-        I.stopPropagation();
+      className: rt.modal,
+      onClick: (u) => {
+        u.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,46 +1850,46 @@ const $a = (d) => {
             }
           ) })
         ] }),
-        /* @__PURE__ */ t.jsxs("div", { className: ct.options, children: [
-          /* @__PURE__ */ t.jsx(
-            tt,
+        /* @__PURE__ */ t.jsxs("div", { className: rt.options, children: [
+          c && /* @__PURE__ */ t.jsx(
+            et,
             {
               label: "Destination",
-              onChange: (I) => i(I),
-              options: ["Go to Page", "Open Link"].filter((I) => I !== o),
-              value: o
+              onChange: (u) => _(u),
+              options: ["Go to Page", "Open Link"].filter((u) => u !== n),
+              value: n
             }
           ),
-          o === "Go to Page" ? /* @__PURE__ */ t.jsx(
-            tt,
+          c && (n === "Go to Page" ? /* @__PURE__ */ t.jsx(
+            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: (u) => g(u),
+              options: q ? Object.values(q).filter((u) => u.name !== v).map((u) => u.name) : [],
+              value: v
             }
           ) : /* @__PURE__ */ t.jsx(
-            K,
+            tt,
             {
-              onChange: (I) => p(I),
-              value: h,
+              onChange: (u) => k(u),
+              value: r,
               placeholder: "https://",
               label: "Link"
             }
-          ),
-          /* @__PURE__ */ t.jsx(
-            et,
+          )),
+          c && /* @__PURE__ */ t.jsx(
+            st,
             {
               current: e.openInNewTab,
               label: "Open in new tab",
-              onChange: (I) => S(I)
+              onChange: (u) => H(u)
             }
           ),
           /* @__PURE__ */ t.jsx(
-            qt,
+            Et,
             {
-              onChange: (I) => f({ "en-US": I }),
-              value: m["en-US"],
+              onChange: (u) => m({ "en-US": u }),
+              value: p["en-US"],
               label: "Text",
               maxLength: 150
             }
@@ -1627,114 +1897,114 @@ const $a = (d) => {
           /* @__PURE__ */ t.jsx(
             Ht,
             {
-              typesText: c,
-              setTypesText: r
+              typesText: l,
+              setTypesText: o
             }
           )
         ] })
       ]
     }
   );
-}), _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({
+}), Un = "_subtitle_jql1y_1", Dn = "_header_jql1y_8", Ln = "_text_jql1y_9", Hn = "_productsBlock_jql1y_10", Rn = "_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: Un,
+  header: Dn,
+  text: Ln,
+  productsBlock: Hn,
+  buttonsBlock: Rn,
+  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 = (d) => {
+  const { buttons: a, setButtons: e, deletable: s = !0, addable: i = !0, editableLink: c = !0 } = d, [l, o] = f.useState(null), [n, _] = f.useState({
     top: 0,
     left: 0
-  }), [l, j] = x.useState(null), h = x.useRef(null);
-  x.useEffect(() => {
-    const m = () => {
-      r(null);
+  }), [v, g] = f.useState(null), r = f.useRef(null);
+  f.useEffect(() => {
+    const p = () => {
+      o(null);
     };
-    return document.body.addEventListener("click", m), r(null), () => {
-      r(null), document.body.removeEventListener("click", m);
+    return document.body.addEventListener("click", p), o(null), () => {
+      o(null), document.body.removeEventListener("click", p);
     };
-  }, []), x.useEffect(() => {
-    if (c) {
-      const m = [...a].map((f) => f.id === c.id ? c : f);
-      e(m);
+  }, []), f.useEffect(() => {
+    if (l) {
+      const p = [...a].map((m) => m.id === l.id ? l : m);
+      e(p);
     }
-  }, [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 && v) {
+      const p = r.current.getBoundingClientRect().height, m = window.innerHeight;
+      let $ = v.top;
+      $ + p > m + window.scrollY - 200 && ($ = m + window.scrollY - p - 200), $ < 0 && ($ = 10), _({
+        top: $,
+        left: v.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, v]);
+  const k = (p, m) => {
+    p.stopPropagation();
+    const $ = p.target.getBoundingClientRect();
+    g({
+      top: $.top + window.scrollY - 70,
+      left: $.left - (i ? 30 : 65)
+    }), o(m);
   };
-  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((p) => /* @__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: (m) => {
+                const H = [...a].map((q) => q.id === p.id ? {
+                  ...p,
+                  type: m
+                } : q);
+                e(H);
               },
-              value: m.type,
+              value: p.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: [
+            /* @__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: (m) => {
+                  k(m, p);
                 }
               }
             ) }),
-            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 m = a.filter(($) => $.id !== p.id);
+                  e(m);
                 },
                 width: 20,
                 height: 20,
@@ -1744,18 +2014,19 @@ const $a = (d) => {
           ] })
         ]
       },
-      m.id
+      p.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,
+        editableLink: c
       }
     ),
-    n && /* @__PURE__ */ t.jsx(
+    i && /* @__PURE__ */ t.jsx(
       "div",
       {
         style: {
@@ -1764,29 +2035,39 @@ 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 p = [...a];
+              c ? p.push({
                 type: "Primary",
                 id: mt(),
                 typesText: [],
-                destination: "Go to Page",
                 text: {
                   "en-US": "Button Name"
                 },
-                page: "home",
-                openInNewTab: !0
-              }), e(m);
+                destination: "Go to Page",
+                page: "",
+                openInNewTab: !1
+              }) : p.push({
+                type: "Primary",
+                id: mt(),
+                typesText: [],
+                text: {
+                  "en-US": "Create Ticket"
+                },
+                destination: "Go to Page",
+                page: "",
+                openInNewTab: !1
+              }), e(p);
             },
             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 +2083,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 = (d) => {
+  const { isActiveButtons: a, setIsActiveButtons: e, buttons: s, setButtons: i, editableLink: c = !0 } = d;
+  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,
+        editableLink: 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", pi = "_dot_m18qi_46", hi = "_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: pi,
+  active: hi,
+  input: fi,
+  countBlock: gi,
+  count: xi,
+  controls: bi,
+  button: vi
+}, qt = (d) => {
+  const { label: a, min: e = 1, max: s = 4, step: i = 1, count: c, setCount: l } = d, [o, n] = f.useState(!1), _ = Array.from({ length: (s - e) / i + 1 }), v = (c - e) / (s - e) * 100, g = () => {
+    c < s && l(c + i);
+  }, r = () => {
+    c > e && l(c - i);
+  }, k = (p) => {
+    const m = e + p * i;
+    l(m);
   };
-  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,
-            style: { width: `${j}%` }
+            className: W.progress,
+            style: { width: `${v}%` }
           }
         ),
-        /* @__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: _.map((p, m) => {
+          const $ = m <= (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: () => k(m),
+              className: Y(W.dot, {
+                [W.active]: $,
+                [W.inactive]: !$,
+                [W.dragging]: o
               }),
-              "aria-label": `Set value to ${e + u * n}`
+              "aria-label": `Set value to ${e + m * i}`
             },
-            u
+            m
           );
         }) }),
         /* @__PURE__ */ t.jsx(
@@ -1881,39 +2163,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: (p) => l(Number(p.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: (p) => {
+              const m = Number(p);
+              m > s ? l(s) : m < e ? l(e) : l(m);
             },
             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: g,
               disabled: c >= s,
-              className: G.button,
+              className: W.button,
               "aria-label": "Increment count",
               children: /* @__PURE__ */ t.jsx(
                 b,
@@ -1928,9 +2210,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 +2228,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", Ui = "_modal_ix5ax_121", Di = "_link_ix5ax_141", Li = "_modalOptions_ix5ax_147", Hi = "_addButton_ix5ax_160", Ri = "_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: Ui,
+  link: Di,
+  modalOptions: Li,
+  addButton: Hi,
+  deleteButton: Ri,
+  closeIcon: zi
+}, Fi = (d) => {
+  const { activeItem: a, setActiveItem: e, popupPosition: s, setIsOpenModal: i, itemsOptions: c } = d, 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 +2266,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 +2298,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(d) {
+  const { product: a, children: e } = d, { attributes: s, listeners: i, setNodeRef: c, transform: l, transition: o, isDragging: n } = Ct({
     id: String(a.listingId)
-  }), l = {
-    transform: Pt.Transform.toString(r),
+  }), _ = {
+    transform: St.Transform.toString(l),
     transition: o
   };
   return /* @__PURE__ */ t.jsx(
     "div",
     {
       ref: c,
-      style: l,
-      className: `${F.product} ${i ? F.dragging : ""}`,
+      style: _,
+      className: `${G.product} ${n ? G.dragging : ""}`,
       ...s,
-      ...n,
+      ...i,
       children: e
     }
   );
 }
-const wa = (d) => {
+const tc = (d) => {
   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,
-    withImage: j = !1,
-    deletable: h = !0,
-    addable: p = !0,
-    itemsType: m,
-    itemsOptions: f
-  } = d, [u, S] = x.useState(
+    editable: n = !0,
+    draggable: _ = !1,
+    withImage: v = !1,
+    deletable: g = !0,
+    addable: r = !0,
+    itemsType: k,
+    itemsOptions: p
+  } = d, [m, $] = f.useState(
     null
-  ), [D, I] = x.useState({
+  ), [H, q] = f.useState({
     top: 0,
     left: 0
-  }), [g, w] = x.useState(!1), E = $t(
-    Nt(Bt, {
+  }), [u, S] = f.useState(!1), E = yt(
+    kt(wt, {
       activationConstraint: {
         distance: 5
       }
     })
   );
-  x.useEffect(() => {
-    const y = () => {
-      S(null), w(!1);
+  f.useEffect(() => {
+    const x = () => {
+      $(null), S(!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), $(null), S(!1), () => {
+      $(null), S(!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 (m) {
+      const x = [...s].map((I) => I.listingId === m.listingId ? m : 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);
+  }, [m]);
+  const F = (x, I) => {
+    x.stopPropagation();
+    const w = x.target.getBoundingClientRect(), L = 100, A = window.innerHeight;
+    let D = w.top + window.scrollY;
+    D + L > A && (D = A - L - 20), S(!0), q({
+      top: D - 80,
+      left: w.left - 30
+    }), $(I);
   };
-  function C(y) {
-    if (j)
-      return y ? /* @__PURE__ */ t.jsx(
+  function B(x) {
+    if (v)
+      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 +2387,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 j = (x) => {
+    const { active: I, over: w } = x;
+    if (w && I.id !== w.id) {
+      const L = s.findIndex((D) => String(D.listingId) === I.id), A = s.findIndex((D) => String(D.listingId) === w.id);
+      if (L !== -1 && A !== -1) {
+        const D = [...s], [nt] = D.splice(L, 1);
+        D.splice(A, 0, nt), i(D);
       }
     }
-  }, 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(
+  }, P = (x, I) => {
+    const w = p.find((A) => x.listingId === A.id);
+    if (!w) return null;
+    const L = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+      _ && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
         b,
         {
           name: "DotsSixVertical",
@@ -2127,40 +2409,40 @@ const wa = (d) => {
           height: 20
         }
       ) }),
-      m === "select" && /* @__PURE__ */ t.jsx(
-        tt,
+      k === "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]);
+          onChange: (A) => {
+            const D = [...s], nt = p.find((U) => U.productData.name === A);
+            if (!nt) return;
+            const dt = {
+              listingId: nt.id,
+              image: nt.productData.images.length > 0 ? nt.productData.images[0].cfId : ""
+            }, y = D.map((U) => U.listingId === x.listingId ? dt : U);
+            $(dt), i([...y]);
           },
-          value: B.productData.name,
+          value: w.productData.name,
           options: [
-            ...f.filter((O) => !s.find((L) => L.listingId === O.id)).map((O) => O.productData.name)
+            ...p.filter((A) => !s.find((D) => D.listingId === A.id)).map((A) => A.productData.name)
           ],
-          leftAddon: C(
-            y.image || B.productData.images.length > 0 && B.productData.images[0].cfId || ""
+          leftAddon: B(
+            x.image || w.productData.images.length > 0 && w.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: (A) => F(A, x)
           }
         ) }),
-        h && /* @__PURE__ */ t.jsx("div", { className: F.deleteButton, children: /* @__PURE__ */ t.jsx(
+        g && /* @__PURE__ */ t.jsx("div", { className: G.deleteButton, children: /* @__PURE__ */ t.jsx(
           b,
           {
             name: "Trash",
@@ -2168,66 +2450,66 @@ const wa = (d) => {
             width: 20,
             height: 20,
             fill: "#C12A2A",
-            onClick: () => n(s.filter((O) => O !== y))
+            onClick: () => i(s.filter((A) => A !== x))
           }
         ) })
       ] })
     ] });
-    return l ? /* @__PURE__ */ t.jsx(
-      bi,
+    return _ ? /* @__PURE__ */ t.jsx(
+      Vi,
       {
-        product: y,
-        children: X
+        product: x,
+        children: L
       },
-      y.listingId
+      x.listingId
     ) : /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: F.product,
-        children: X
+        className: G.product,
+        children: L
       },
-      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,
+    u && m && /* @__PURE__ */ t.jsx(
+      Fi,
       {
-        activeItem: u,
-        setActiveItem: S,
-        setIsOpenModal: w,
-        popupPosition: D,
-        itemsOptions: f
+        activeItem: m,
+        setActiveItem: $,
+        setIsOpenModal: S,
+        popupPosition: H,
+        itemsOptions: p
       }
     ),
-    /* @__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 }),
+      _ ? /* @__PURE__ */ t.jsx(
+        $t,
         {
           sensors: E,
-          onDragEnd: P,
+          onDragEnd: j,
           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) => P(x, I))
             }
           )
         }
-      ) : s.map((y, M) => st(y, M)),
-      p && /* @__PURE__ */ t.jsx(
+      ) : s.map((x, I) => P(x, I)),
+      r && /* @__PURE__ */ t.jsx(
         "div",
         {
           style: {
@@ -2236,28 +2518,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 < p.length; I++)
+                  if (!s.find((w) => w.listingId === p[I].id)) {
+                    x.push({
+                      listingId: p[I].id,
+                      image: p[I].productData.images.length > 0 ? p[I].productData.images[0].cfId : ""
                     });
                     break;
                   }
-                n(y);
+                i(x);
               },
-              disabled: s.length === f.length,
+              disabled: s.length === p.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 +2555,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", po = "_chargeActive_6cemk_190", ho = "_title_6cemk_198", T = {
+  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: po,
+  title: ho
+}, 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 = (d) => {
   const {
     onChange: a,
     style: e,
     label: s,
-    value: n,
+    value: i,
     type: c,
-    min: r,
+    min: l,
     max: o,
-    placeholder: i,
-    disabled: l = !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;
+    placeholder: n,
+    disabled: _ = !1,
+    required: v = !1,
+    regex: g,
+    paddingless: r = !1,
+    borderless: k = !1,
+    editable: p = !1,
+    isSearch: m = !1,
+    centered: $ = !1
+  } = d, { themeSettings: H } = Ut(), { inputs: q } = H, [u, S] = f.useState(!1);
+  function E(B) {
+    return Number(B) < 0 ? String(l) : B;
   }
-  function R(C) {
-    return !j || !h ? !0 : new RegExp(h).test(C);
+  function F(B) {
+    return !v || !g ? !0 : new RegExp(g).test(B);
   }
-  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 +2627,13 @@ const wa = (d) => {
     /* @__PURE__ */ t.jsxs(
       "div",
       {
-        className: V(nt.content, {
-          [nt.contentBorder]: I.border.active
+        className: Y(it.content, {
+          [it.contentBorder]: q.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: q.field.active ? q.field.color : "transparent",
+          padding: m ? `7px ${Number(q.general.size) + 20}px 7px 11px` : "7px 11px"
         },
         children: [
           /* @__PURE__ */ t.jsx(
@@ -2359,40 +2641,40 @@ const wa = (d) => {
             {
               id: s,
               type: c || "text",
-              onChange: (C) => {
-                if (c === "text") a(C.target.value);
+              onChange: (B) => {
+                if (c === "text") a(B.target.value);
                 else {
-                  const P = E(C.target.value);
-                  a(P);
+                  const j = E(B.target.value);
+                  a(j);
                 }
               },
-              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]: u && v && !F(i),
+                [it.paddingless]: r,
+                [it.borderless]: k
               }),
-              min: c === "number" ? r : void 0,
+              min: c === "number" ? l : void 0,
               max: c === "number" ? o : void 0,
-              disabled: l,
-              onFocus: () => w(!0),
+              disabled: _,
+              onFocus: () => S(!0),
               style: {
-                textAlign: S ? "center" : "left"
+                textAlign: $ ? "center" : "left"
               }
             }
           ),
-          u && /* @__PURE__ */ t.jsx("div", { className: nt.rightIcon, children: /* @__PURE__ */ t.jsx(
+          m && /* @__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: q.general.size,
+              height: q.general.size
             }
           ) }),
-          f && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
+          p && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
             b,
             {
               name: "Sliders",
@@ -2405,34 +2687,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 = (d) => {
+  const { children: a, onClick: e, style: s, className: i, disabled: c = !1, type: l = "Primary" } = d, { themeSettings: o } = Ut();
   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,
@@ -2448,121 +2730,121 @@ 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);
-    return () => clearTimeout(g);
+const ec = (d) => {
+  var H, q;
+  const { variants: a } = d, [e, s] = f.useState(a[0]), [i, c] = f.useState(e.chargeTypes[0]), l = Bt(), [o, n] = f.useState(1), { reset: _, addProductToCart: v, getProducts: g } = Ot(), [r, k] = f.useState(!1);
+  f.useEffect(() => {
+    k(!0);
+    const u = setTimeout(() => k(!1), 600);
+    return () => clearTimeout(u);
   }, [o]);
-  async function f() {
-    await h(), await j({
+  async function p() {
+    await g(), await v({
       productId: d.id,
       productVariantId: e.id,
       quantity: o
     });
   }
-  function u() {
-    l(), f(), r("/checkout");
+  function m() {
+    _(), p(), l("/checkout");
   }
-  function S(g) {
-    if (g >= 864e5) {
-      const P = Math.floor(g / 864e5);
-      return `${P} ${P === 1 ? "day" : "days"}`;
-    } else if (g >= 36e5) {
-      const P = Math.floor(g / 36e5);
-      return `${P} ${P === 1 ? "hour" : "hours"}`;
-    } else if (g >= 6e4) {
-      const P = Math.floor(g / 6e4);
-      return `${P} ${P === 1 ? "minute" : "minutes"}`;
+  function $(u) {
+    if (u >= 864e5) {
+      const j = Math.floor(u / 864e5);
+      return `${j} ${j === 1 ? "day" : "days"}`;
+    } else if (u >= 36e5) {
+      const j = Math.floor(u / 36e5);
+      return `${j} ${j === 1 ? "hour" : "hours"}`;
+    } else if (u >= 6e4) {
+      const j = Math.floor(u / 6e4);
+      return `${j} ${j === 1 ? "minute" : "minutes"}`;
     } else {
-      const P = Math.floor(g / 1e3);
-      return `${P} ${P === 1 ? "second" : "seconds"}`;
+      const j = Math.floor(u / 1e3);
+      return `${j} ${j === 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: T.options, children: [
+    e.chargeTypes.length > 1 && /* @__PURE__ */ t.jsx("div", { className: T.chargeTypes, children: e.chargeTypes.map((u) => /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: V(N.charge, {
-          [N.chargeActive]: n === g
+        className: Y(T.charge, {
+          [T.chargeActive]: i === u
         }),
-        onClick: () => c(g),
-        children: zt[g]
+        onClick: () => c(u),
+        children: zt[u]
       },
-      g
+      u
     )) }),
-    /* @__PURE__ */ t.jsx("div", { className: N.variants, children: a.map((g) => {
-      var w;
+    /* @__PURE__ */ t.jsx("div", { className: T.variants, children: a.map((u) => {
+      var S;
       return /* @__PURE__ */ t.jsxs(
         "div",
         {
-          className: V(N.variant, {
-            [N.activeVariant]: e.id === g.id
+          className: Y(T.variant, {
+            [T.activeVariant]: e.id === u.id
           }),
-          onClick: () => s(g),
+          onClick: () => s(u),
           children: [
-            /* @__PURE__ */ t.jsxs("div", { className: N.variantInfo, children: [
-              /* @__PURE__ */ t.jsx("span", { className: N.title, children: g.name }),
+            /* @__PURE__ */ t.jsxs("div", { className: T.variantInfo, children: [
+              /* @__PURE__ */ t.jsx("span", { className: T.title, children: u.name }),
               /* @__PURE__ */ t.jsxs("span", { children: [
                 "$",
-                n === "ONE_TIME" ? g.price.amount : g.subscriptionSettings ? g.subscriptionSettings.price.amount : "Price Not Found"
+                i === "ONE_TIME" ? u.price.amount : u.subscriptionSettings ? u.subscriptionSettings.price.amount : "Price Not Found"
               ] })
             ] }),
-            /* @__PURE__ */ t.jsx("div", { children: 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: T.stock, children: [
+              ((S = u.quantity.restrictions) == null ? void 0 : S.max) || u.quantity.available || 0,
               " in stock"
             ] }) })
           ]
         },
-        g.id
+        u.id
       );
     }) }),
-    n === "ONE_TIME" && /* @__PURE__ */ t.jsxs("div", { className: N.quantity, children: [
+    i === "ONE_TIME" && /* @__PURE__ */ t.jsxs("div", { className: T.quantity, children: [
       /* @__PURE__ */ t.jsx(
-        W,
+        Q,
         {
           type: "Secondary",
           onClick: () => {
-            o > 1 ? i((g) => g - 1) : i(1);
+            o > 1 ? n((u) => u - 1) : n(1);
           },
-          className: N.button,
+          className: T.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: (u) => n(Number(u)),
+          max: ((H = e.quantity.restrictions) == null ? void 0 : H.max) || e.quantity.available || 1 / 0,
+          min: ((q = e.quantity.restrictions) == null ? void 0 : q.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((u) => u + 1);
           },
-          className: N.button,
+          className: T.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: T.meta, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: T.info, children: [
         /* @__PURE__ */ t.jsx("span", { children: "Delivery" }),
-        /* @__PURE__ */ t.jsxs("div", { className: N.infoRight, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: T.infoRight, children: [
           /* @__PURE__ */ t.jsx(
             b,
             {
@@ -2572,110 +2854,110 @@ 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" : $(e.deliveryTime) })
         ] })
       ] }),
-      /* @__PURE__ */ t.jsxs("div", { className: N.info, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: T.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: T.infoRight, children: i === "ONE_TIME" ? e.compareAtPrice && (e.compareAtPrice.amount || 0) - (e.price.amount || 0) > 0 ? /* @__PURE__ */ t.jsxs("div", { className: T.price, children: [
+          /* @__PURE__ */ t.jsxs("span", { className: Y(T.newPrice, { [T.animate]: r }), children: [
             "$ ",
             (e.price.amount || 0) * o
           ] }),
-          /* @__PURE__ */ t.jsxs("span", { className: N.oldPrice, children: [
+          /* @__PURE__ */ t.jsxs("span", { className: T.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(T.newPrice, { [T.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: T.price, children: [
+          /* @__PURE__ */ t.jsxs("span", { className: Y(T.newPrice, { [T.animate]: r }), children: [
             "$ ",
             e.subscriptionSettings.price.amount || 0
           ] }),
-          /* @__PURE__ */ t.jsxs("span", { className: N.oldPrice, children: [
+          /* @__PURE__ */ t.jsxs("span", { className: T.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(T.newPrice, { [T.animate]: r }), children: [
           "$ ",
           e.subscriptionSettings.price.amount || 0
         ] }) })
       ] })
     ] }),
-    /* @__PURE__ */ t.jsxs("div", { className: N.buttons, children: [
+    /* @__PURE__ */ t.jsxs("div", { className: T.buttons, children: [
       /* @__PURE__ */ t.jsx(
-        W,
+        Q,
         {
           type: "Primary",
-          onClick: () => u(),
+          onClick: () => m(),
           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: () => p(),
           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", Uo = "_closing_1tdo3_64", Do = "_info_1tdo3_113", Lo = "_top_1tdo3_120", Ho = "_title_1tdo3_131", Ro = "_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", C = {
+  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: Uo,
   "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: Do,
+  top: Lo,
+  title: Ho,
+  clear: Ro,
+  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) {
+xt.prototype.name = "InvalidTokenError";
+function pa(d) {
   return decodeURIComponent(atob(d).replace(/(.)/g, (a, e) => {
     let s = e.charCodeAt(0).toString(16).toUpperCase();
     return s.length < 2 && (s = "0" + s), "%" + s;
   }));
 }
-function Ro(d) {
+function ha(d) {
   let a = d.replace(/-/g, "+").replace(/_/g, "/");
   switch (a.length % 4) {
     case 0:
@@ -2690,75 +2972,75 @@ function Ro(d) {
       throw new Error("base64 string is not of the correct length");
   }
   try {
-    return zo(a);
+    return pa(a);
   } catch {
     return atob(a);
   }
 }
-function Fo(d, a) {
+function fa(d, a) {
   if (typeof d != "string")
-    throw new gt("Invalid token specified: must be a string");
+    throw new xt("Invalid token specified: must be a string");
   a || (a = {});
   const e = a.header === !0 ? 0 : 1, s = d.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 = ha(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 sc = (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 })
+  return /* @__PURE__ */ t.jsxs("div", { className: C.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 [d, a] = f.useState(!1), [e, s] = f.useState([]), { cart: i, getProducts: c } = Ot();
+  function l(r) {
+    for (let k = 0; k < i.parts.length; k++)
+      for (let p = 0; p < r.variants.length; p++)
+        if (i.parts[k].productVariantId === r.variants[k].id)
+          return i.parts[k].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 k = 0; k < i.parts.length; k++)
+      for (let p = 0; p < r.variants.length; p++)
+        if (i.parts[k].productVariantId === r.variants[k].id)
+          return i.parts[k].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 k = i.parts.map(($) => String($.productId)), m = (await c([...k])).map(($) => ({
+        ...$,
+        activeVariantId: l($),
+        quantity: o($)
       }));
-      s(u);
+      s(m);
     })();
-  }, [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 k;
+    return !r || !(r != null && r.variants) ? !1 : (k = r.variants.find((p) => p.id === r.activeVariantId)) == null ? void 0 : k.subscriptionSettings;
   }
-  const l = n.parts.length > 0 && e.length > 0 && !i(e[0]), [j, h] = x.useState(!1);
+  const _ = i.parts.length > 0 && e.length > 0 && !n(e[0]), [v, g] = 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), g(!0));
         },
         children: [
           /* @__PURE__ */ t.jsx(
@@ -2768,7 +3050,7 @@ const Ca = (d) => {
               fill: "var(--icon-primary)"
             }
           ),
-          l && /* @__PURE__ */ t.jsx("div", { className: $.shoppingCount, children: n.parts.length })
+          _ && /* @__PURE__ */ t.jsx("div", { className: C.shoppingCount, children: i.parts.length })
         ]
       }
     ),
@@ -2776,59 +3058,59 @@ const Ca = (d) => {
       Mt,
       {
         close: () => {
-          h(!1), setTimeout(() => {
+          g(!1), setTimeout(() => {
             a(!1);
           }, 300);
         },
         withAnimation: !1,
         children: /* @__PURE__ */ t.jsx(
-          Yo,
+          xa,
           {
             activeProducts: e,
-            isCartNotEmpty: l,
-            isOpen: j
+            isCartNotEmpty: _,
+            isOpen: v
           }
         )
       }
     )
   ] });
-}, 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 = (d) => {
+  const { activeProducts: a, isCartNotEmpty: e, isOpen: s } = d, { cart: i, reset: c, getTotalAndDiscount: l, updateQuantityOfProduct: o } = Ot(), n = Bt();
+  function _(r) {
+    n(r);
   }
-  function j(p) {
+  function v(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 g(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(C.modal, {
+        [C.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: C.top, children: [
+          /* @__PURE__ */ t.jsxs("div", { className: C.info, children: [
+            /* @__PURE__ */ t.jsx("span", { className: C.title, children: "Cart" }),
+            e && /* @__PURE__ */ t.jsx("div", { className: C.count, children: i.parts.length })
           ] }),
           /* @__PURE__ */ t.jsx(
             "button",
             {
-              className: V($.clear, {
-                [$.activeClear]: e
+              className: Y(C.clear, {
+                [C.activeClear]: e
               }),
               disabled: !e,
               onClick: c,
@@ -2836,39 +3118,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: C.cart, children: [
+          /* @__PURE__ */ t.jsx("div", { className: C.products, children: a.map((r) => /* @__PURE__ */ t.jsxs(
             "div",
             {
-              className: $.product,
+              className: C.product,
               children: [
-                /* @__PURE__ */ t.jsxs("div", { className: $.productInfo, children: [
+                /* @__PURE__ */ t.jsxs("div", { className: C.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: C.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: C.content, children: [
+                    /* @__PURE__ */ t.jsx("div", { className: C.name, children: r.name }),
+                    /* @__PURE__ */ t.jsxs("div", { className: C.price, children: [
                       "$",
-                      p.variants.find((m) => m.id === p.activeVariantId).price.amount * ((p == null ? void 0 : p.quantity) || 1)
+                      r.variants.find((k) => k.id === r.activeVariantId).price.amount * ((r == null ? void 0 : r.quantity) || 1)
                     ] })
                   ] })
                 ] }),
-                /* @__PURE__ */ t.jsxs("div", { className: $.productButtons, children: [
+                /* @__PURE__ */ t.jsxs("div", { className: C.productButtons, children: [
                   /* @__PURE__ */ t.jsx(
                     "div",
                     {
                       onClick: () => {
-                        p.quantity !== 1 && h(p);
+                        r.quantity !== 1 && g(r);
                       },
-                      className: $.productButton,
+                      className: C.productButton,
                       children: /* @__PURE__ */ t.jsx(
                         b,
                         {
@@ -2880,12 +3162,12 @@ const Ca = (d) => {
                       )
                     }
                   ),
-                  /* @__PURE__ */ t.jsx("div", { className: $.productCount, children: p.quantity }),
+                  /* @__PURE__ */ t.jsx("div", { className: C.productCount, children: r.quantity }),
                   /* @__PURE__ */ t.jsx(
                     "div",
                     {
-                      onClick: () => j(p),
-                      className: $.productButton,
+                      onClick: () => v(r),
+                      className: C.productButton,
                       children: /* @__PURE__ */ t.jsx(
                         b,
                         {
@@ -2900,11 +3182,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: C.bottom, children: [
+            /* @__PURE__ */ t.jsxs("div", { className: C.subtotal, children: [
+              /* @__PURE__ */ t.jsxs("div", { className: C.block, children: [
                 /* @__PURE__ */ t.jsx("span", { children: "Subtotal" }),
                 /* @__PURE__ */ t.jsx(
                   b,
@@ -2916,18 +3198,18 @@ const Ca = (d) => {
                   }
                 )
               ] }),
-              /* @__PURE__ */ t.jsxs("div", { className: $.total, children: [
+              /* @__PURE__ */ t.jsxs("div", { className: C.total, children: [
                 "$",
-                r().total
+                l().total
               ] })
             ] }),
-            /* @__PURE__ */ t.jsx(W, { onClick: () => l("/checkout"), children: "Checkout" })
+            /* @__PURE__ */ t.jsx(Q, { onClick: () => _("/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: C.empty, children: [
   /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
     b,
     {
@@ -2943,22 +3225,22 @@ const Ca = (d) => {
       "a",
       {
         href: "/products",
-        className: $.link,
+        className: C.link,
         children: "view products"
       }
     )
   ] })
-] }), Rt = ({ signUp: d }) => {
-  const a = JSON.parse(localStorage.getItem("token") || "{}"), { data: e } = a, s = jt();
-  function n(o) {
+] }), Ft = ({ signUp: d }) => {
+  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
@@ -2967,9 +3249,9 @@ const Ca = (d) => {
         }
       ),
       d && /* @__PURE__ */ t.jsx(
-        W,
+        Q,
         {
-          onClick: () => n("/customer-dash"),
+          onClick: () => i("/customer-dash"),
           type: "Primary",
           style: {
             padding: 10
@@ -2978,41 +3260,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: C.userInfo,
+      onClick: () => i("/customer-dash"),
       children: /* @__PURE__ */ t.jsx("div", { children: c || "test-email@gmail.com" })
     }
   );
-}, Xo = ({
+}, va = ({
   children: d,
   logo: a,
   setIsOpen: e,
   signUp: s
 }) => {
-  const { setIsOpen: n } = Ut(), c = () => {
-    n(!1), setTimeout(() => {
-      e(!1), n(!0);
+  const { setIsOpen: i } = Dt(), c = () => {
+    i(!1), setTimeout(() => {
+      e(!1), i(!0);
     }, 300);
   };
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: $.pagesMobileModal,
-      onClick: (r) => r.stopPropagation(),
+      className: C.pagesMobileModal,
+      onClick: (l) => l.stopPropagation(),
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: $.pagesMobileModalHeader, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: C.pagesMobileModalHeader, children: [
           /* @__PURE__ */ t.jsx("div", { children: a }),
           /* @__PURE__ */ t.jsx(
-            W,
+            Q,
             {
               type: "Secondary",
               onClick: c,
@@ -3026,33 +3308,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: C.pagesMobileModalContent, children: d }),
+        /* @__PURE__ */ t.jsx("div", { className: C.pagesMobileModalFooter, children: /* @__PURE__ */ t.jsx(Ft, { signUp: s }) })
       ]
     }
   );
-}, Ba = ({
+}, nc = ({
   children: d,
   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
       }
     ) })
   ] });
-}, Wo = (d) => {
+}, ja = (d) => {
   const { setIsOpenModal: a } = d;
   return /* @__PURE__ */ t.jsx(
-    W,
+    Q,
     {
       type: "Secondary",
       style: {
@@ -3070,28 +3352,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: d, setIsOpenModal: a } = Lt();
   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 +3388,45 @@ const Ca = (d) => {
         )
       }
     ),
-    d && /* @__PURE__ */ t.jsx(Mt, { close: a, children: /* @__PURE__ */ t.jsx(ca, {}) })
+    d && /* @__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: d } = Lt(), { notification: a, setNotification: e } = Gt(), { setIsOpen: s } = Dt(), 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);
     }, 300);
   }
-  function o(i, l) {
-    return i.length > l ? i.slice(0, l) + "..." : i;
+  function o(n, _) {
+    return n.length > _ ? n.slice(0, _) + "..." : 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 +3434,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 +3452,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", Ua = "_content_1s1lq_25", gt = {
+  accordion: Oa,
+  header: Ma,
+  icon: qa,
+  open: Ea,
+  content: Ua
+}, oc = ({ title: d, 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("div", { className: Y(gt.icon, { [gt.open]: s }), children: /* @__PURE__ */ t.jsx(b, { name: "CaretDown" }) })
         ]
       }
     ),
@@ -3198,15 +3480,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: d, 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 +3497,16 @@ const Ca = (d) => {
       className: e,
       role: "link",
       style: { cursor: "pointer" },
-      id: n,
+      id: i,
       children: d
     }
   );
-}, ma = "_buttonsBlock_1b2rb_1", ha = "_slideUp_1b2rb_1", pa = {
-  buttonsBlock: ma,
-  slideUp: ha
-}, Ma = () => /* @__PURE__ */ t.jsxs("div", { className: pa.buttonsBlock, children: [
+}, Da = "_buttonsBlock_1b2rb_1", La = "_slideUp_1b2rb_1", Ha = {
+  buttonsBlock: Da,
+  slideUp: La
+}, cc = () => /* @__PURE__ */ t.jsxs("div", { className: Ha.buttonsBlock, children: [
   /* @__PURE__ */ t.jsx(
-    W,
+    Q,
     {
       type: "Primary",
       style: {
@@ -3236,19 +3518,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" })
+] }), Ra = "_wrapper_st58d_1", za = "_label_st58d_10", Fa = "_textarea_st58d_18", Va = "_length_st58d_33", jt = {
+  wrapper: Ra,
+  label: za,
+  textarea: Fa,
+  length: Va
+}, lc = (d) => {
+  const { onChange: a, label: e, value: s, maxLength: i, placeholder: c = "Type something..." } = d, [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 +3540,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,
-  Lt as TextSettings,
-  qt as TextareaSettings,
-  Oa as TextareaUI,
+  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,
+  Rt as TextSettings,
+  Et as TextareaSettings,
+  lc as TextareaUI,
   Ht as TypesText,
-  Rt as UserInfo
+  Ft as UserInfo
 };