@billgangcom/theme-lib 1.37.0 → 1.39.0

package/dist/ui.es.js

@@ -1,21 +1,21 @@
-import { j as t, I as b, c as F, a as W, S as Z, T as Ot, C as gt, b as st, u as It, d as $t, D as Nt, e as wt, v as Ct, B as ct, f as _t, P as Bt, g as St, h as Tt, i as Ht, k as vt, l as Pt, m as qt, M as Et, n as Dt, o as zt } from "./index-CncZkk5o.js";
-import { p as ja, L as ya } from "./index-CncZkk5o.js";
+import { j as t, I as v, c as F, a as X, S as tt, T as Ot, C as gt, b as nt, u as It, d as kt, D as $t, e as Nt, v as wt, B as Z, f as _t, P as Ct, g as Bt, h as St, i as Ft, k as Tt, l as Pt, m as qt, M as At, n as Et, o as Dt, p as Vt } from "./index-rUpOzmAy.js";
+import { q as Ta, L as Pa } from "./index-rUpOzmAy.js";
 import p from "react";
 import "@phosphor-icons/react";
-const Ft = "_wrapper_1ibay_2", Vt = "_alignmentBlock_1ibay_8", Ut = "_title_1ibay_15", Yt = "_subtitle_1ibay_22", Gt = "_alignmentContent_1ibay_29", Wt = "_alignments_1ibay_37", Xt = "_alignment_1ibay_8", Jt = "_circle_1ibay_60", Qt = "_paddings_1ibay_67", Kt = "_padding_1ibay_67", Zt = "_active_1ibay_91", te = "_input_1ibay_98", J = {
-  wrapper: Ft,
-  alignmentBlock: Vt,
-  title: Ut,
-  subtitle: Yt,
-  alignmentContent: Gt,
-  alignments: Wt,
-  alignment: Xt,
-  circle: Jt,
-  paddings: Qt,
-  padding: Kt,
-  active: Zt,
-  input: te
-}, ee = [
+const Ut = "_wrapper_1ibay_2", Yt = "_alignmentBlock_1ibay_8", Gt = "_title_1ibay_15", Xt = "_subtitle_1ibay_22", Wt = "_alignmentContent_1ibay_29", Jt = "_alignments_1ibay_37", Qt = "_alignment_1ibay_8", Kt = "_circle_1ibay_60", Zt = "_paddings_1ibay_67", te = "_padding_1ibay_67", ee = "_active_1ibay_91", se = "_input_1ibay_98", J = {
+  wrapper: Ut,
+  alignmentBlock: Yt,
+  title: Gt,
+  subtitle: Xt,
+  alignmentContent: Wt,
+  alignments: Jt,
+  alignment: Qt,
+  circle: Kt,
+  paddings: Zt,
+  padding: te,
+  active: ee,
+  input: se
+}, ne = [
   "topLeft",
   "top",
   "topRight",
@@ -25,10 +25,10 @@ const Ft = "_wrapper_1ibay_2", Vt = "_alignmentBlock_1ibay_8", Ut = "_title_1iba
   "bottomLeft",
   "bottom",
   "bottomRight"
-], se = ["left", "top", "right", "bottom"], la = (r) => {
-  const { alignment: a, padding: e, setPadding: s, setAlignment: i } = r;
-  function o(f) {
-    switch (f) {
+], ie = ["left", "top", "right", "bottom"], ga = (r) => {
+  const { alignment: o, padding: e, setPadding: s, setAlignment: i } = r;
+  function a(g) {
+    switch (g) {
       case "left":
       case "topLeft":
       case "bottomLeft":
@@ -45,8 +45,8 @@ const Ft = "_wrapper_1ibay_2", Vt = "_alignmentBlock_1ibay_8", Ut = "_title_1iba
         return "TextAlignCenter";
     }
   }
-  function l(f) {
-    switch (f) {
+  function l(g) {
+    switch (g) {
       case "left":
         return "AlignLeft";
       case "right":
@@ -57,40 +57,40 @@ const Ft = "_wrapper_1ibay_2", Vt = "_alignmentBlock_1ibay_8", Ut = "_title_1iba
         return "AlignBottom";
     }
   }
-  const [d, n] = p.useState(null), [c, v] = p.useState(null);
+  const [d, n] = p.useState(null), [c, b] = p.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: ee.map((f) => /* @__PURE__ */ t.jsxs(
+        /* @__PURE__ */ t.jsx("div", { className: J.alignments, children: ne.map((g) => /* @__PURE__ */ t.jsxs(
           "div",
           {
             onClick: () => {
-              i(f);
+              i(g);
             },
             className: J.alignment,
             onMouseEnter: () => {
-              n(f);
+              n(g);
             },
             onMouseLeave: () => {
               n(null);
             },
             children: [
-              f !== a && d !== f && /* @__PURE__ */ t.jsx("div", { className: J.circle }),
-              f !== a && d === f && /* @__PURE__ */ t.jsx(
-                b,
+              g !== o && d !== g && /* @__PURE__ */ t.jsx("div", { className: J.circle }),
+              g !== o && d === g && /* @__PURE__ */ t.jsx(
+                v,
                 {
-                  name: o(d),
+                  name: a(d),
                   fill: "#c2c2c2",
                   width: 22,
                   height: 22
                 }
               ),
-              f === a && /* @__PURE__ */ t.jsx(
-                b,
+              g === o && /* @__PURE__ */ t.jsx(
+                v,
                 {
-                  name: o(a),
+                  name: a(o),
                   fill: "#FF3F19",
                   width: 22,
                   height: 22
@@ -98,37 +98,37 @@ const Ft = "_wrapper_1ibay_2", Vt = "_alignmentBlock_1ibay_8", Ut = "_title_1iba
               )
             ]
           },
-          f
+          g
         )) }),
-        /* @__PURE__ */ t.jsx("div", { className: J.paddings, children: se.map((f) => /* @__PURE__ */ t.jsxs(
+        /* @__PURE__ */ t.jsx("div", { className: J.paddings, children: ie.map((g) => /* @__PURE__ */ t.jsxs(
           "label",
           {
             className: F(J.padding, {
-              [J.active]: c === f
+              [J.active]: c === g
             }),
             onFocus: () => {
-              v(f);
+              b(g);
             },
             onBlur: () => {
-              v(null);
+              b(null);
             },
             children: [
               /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-                b,
+                v,
                 {
-                  name: l(f),
+                  name: l(g),
                   width: 20,
                   height: 20
                 }
               ) }),
               /* @__PURE__ */ t.jsx(
-                W,
+                X,
                 {
                   type: "number",
-                  value: String(e[f]),
-                  onChange: (m) => s({
+                  value: String(e[g]),
+                  onChange: (h) => s({
                     ...e,
-                    [f]: Number(m)
+                    [g]: Number(h)
                   }),
                   paddingless: !0,
                   borderless: !0
@@ -136,24 +136,24 @@ const Ft = "_wrapper_1ibay_2", Vt = "_alignmentBlock_1ibay_8", Ut = "_title_1iba
               )
             ]
           },
-          f
+          g
         )) })
       ] })
     ] })
   ] });
-}, ne = "_title_1jkiw_1", ie = "_subtitle_1jkiw_5", oe = "_header_1jkiw_12", ae = "_text_1jkiw_13", ce = "_top_1jkiw_20", le = "_itemsBlock_1jkiw_29", ht = {
-  title: ne,
-  subtitle: ie,
-  header: oe,
-  text: ae,
-  top: ce,
-  itemsBlock: le
-}, re = "_typeTexts_167ez_1", de = "_block_167ez_8", ue = "_active_167ez_25", jt = {
-  typeTexts: re,
-  block: de,
-  active: ue
-}, _e = ["bold", "italic", "underline", "strike-through", "code"], Lt = (r) => {
-  const { typesText: a, setTypesText: e } = r;
+}, oe = "_title_1jkiw_1", ae = "_subtitle_1jkiw_5", ce = "_header_1jkiw_12", le = "_text_1jkiw_13", re = "_top_1jkiw_20", de = "_itemsBlock_1jkiw_29", ht = {
+  title: oe,
+  subtitle: ae,
+  header: ce,
+  text: le,
+  top: re,
+  itemsBlock: de
+}, ue = "_typeTexts_167ez_1", _e = "_block_167ez_8", me = "_active_167ez_25", jt = {
+  typeTexts: ue,
+  block: _e,
+  active: me
+}, he = ["bold", "italic", "underline", "strike-through", "code"], Lt = (r) => {
+  const { typesText: o, setTypesText: e } = r;
   function s(i) {
     switch (i) {
       case "bold":
@@ -168,25 +168,25 @@ const Ft = "_wrapper_1ibay_2", Vt = "_alignmentBlock_1ibay_8", Ut = "_title_1iba
         return "TextUnderline";
     }
   }
-  return /* @__PURE__ */ t.jsx("div", { className: jt.typeTexts, children: _e.map((i) => /* @__PURE__ */ t.jsx(
+  return /* @__PURE__ */ t.jsx("div", { className: jt.typeTexts, children: he.map((i) => /* @__PURE__ */ t.jsx(
     "div",
     {
       className: F(jt.block, {
-        [jt.active]: a.includes(i)
+        [jt.active]: o.includes(i)
       }),
       onClick: () => {
-        const o = [...a];
-        if (o.includes(i)) {
-          const l = o.filter((d) => d !== i);
+        const a = [...o];
+        if (a.includes(i)) {
+          const l = a.filter((d) => d !== i);
           e(l);
         } else
-          o.push(i), e(o);
+          a.push(i), e(a);
       },
       children: /* @__PURE__ */ t.jsx(
-        b,
+        v,
         {
           name: s(i),
-          fill: a.includes(i) ? "#252525" : "#757575",
+          fill: o.includes(i) ? "#252525" : "#757575",
           width: 20,
           height: 20
         }
@@ -196,11 +196,11 @@ const Ft = "_wrapper_1ibay_2", Vt = "_alignmentBlock_1ibay_8", Ut = "_title_1iba
   )) });
 }, Rt = (r) => {
   const {
-    typesText: a,
+    typesText: o,
     isActiveText: e,
     setIsActiveText: s,
     text: i,
-    setText: o,
+    setText: a,
     setTypesText: l,
     title: d,
     subtitle: n = "Items"
@@ -209,7 +209,7 @@ const Ft = "_wrapper_1ibay_2", Vt = "_alignmentBlock_1ibay_8", Ut = "_title_1iba
     (d || e !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: ht.top, children: [
       d && /* @__PURE__ */ t.jsx("h3", { className: ht.title, children: d }),
       e !== void 0 && s && /* @__PURE__ */ t.jsx(
-        Z,
+        tt,
         {
           current: e,
           onChange: (c) => s(c)
@@ -221,7 +221,7 @@ const Ft = "_wrapper_1ibay_2", Vt = "_alignmentBlock_1ibay_8", Ut = "_title_1iba
       /* @__PURE__ */ t.jsx(
         Ot,
         {
-          onChange: (c) => o(c),
+          onChange: (c) => a(c),
           value: i,
           maxLength: 150
         }
@@ -229,48 +229,48 @@ const Ft = "_wrapper_1ibay_2", Vt = "_alignmentBlock_1ibay_8", Ut = "_title_1iba
       /* @__PURE__ */ t.jsx(
         Lt,
         {
-          typesText: a,
+          typesText: o,
           setTypesText: l
         }
       )
     ] })
   ] });
-}, he = "_title_v8pu8_1", me = "_subtitle_v8pu8_5", pe = "_header_v8pu8_12", ge = "_text_v8pu8_13", fe = "_productsBlock_v8pu8_14", xe = "_top_v8pu8_26", ve = "_itemsBlock_v8pu8_35", be = "_typeTexts_v8pu8_41", je = "_block_v8pu8_48", ye = "_active_v8pu8_61", ke = "_products_v8pu8_14", Ie = "_product_v8pu8_14", $e = "_button_v8pu8_80", Ne = "_disabled_v8pu8_91", we = "_image_v8pu8_95", Ce = "_info_v8pu8_102", Be = "_name_v8pu8_114", Se = "_buttons_v8pu8_118", Te = "_modal_v8pu8_125", Pe = "_link_v8pu8_145", Ae = "_modalOptions_v8pu8_151", Oe = "_addButton_v8pu8_164", qe = "_deleteButton_v8pu8_179", Ee = "_closeIcon_v8pu8_191", M = {
-  title: he,
-  subtitle: me,
-  header: pe,
-  text: ge,
-  productsBlock: fe,
-  top: xe,
-  itemsBlock: ve,
-  typeTexts: be,
-  block: je,
-  active: ye,
-  products: ke,
-  product: Ie,
-  button: $e,
-  disabled: Ne,
-  image: we,
-  info: Ce,
-  name: Be,
-  buttons: Se,
-  modal: Te,
-  link: Pe,
-  modalOptions: Ae,
-  addButton: Oe,
-  deleteButton: qe,
-  closeIcon: Ee
-}, De = p.forwardRef(
-  (r, a) => {
-    const { activeItem: e, setActiveItem: s, popupPosition: i, modalOptions: o, setIsOpenModal: l } = r;
+}, pe = "_title_xma5o_1", xe = "_subtitle_xma5o_5", ge = "_header_xma5o_12", fe = "_text_xma5o_13", be = "_productsBlock_xma5o_14", ve = "_top_xma5o_26", je = "_itemsBlock_xma5o_35", ye = "_typeTexts_xma5o_41", Ie = "_block_xma5o_48", ke = "_active_xma5o_61", $e = "_products_xma5o_14", Ne = "_product_xma5o_14", we = "_button_xma5o_80", Ce = "_disabled_xma5o_91", Be = "_image_xma5o_95", Se = "_info_xma5o_102", Te = "_name_xma5o_114", Pe = "_buttons_xma5o_118", Ae = "_modal_xma5o_125", Me = "_link_xma5o_145", Oe = "_modalOptions_xma5o_151", qe = "_addButton_xma5o_165", Ee = "_deleteButton_xma5o_180", De = "_closeIcon_xma5o_192", R = {
+  title: pe,
+  subtitle: xe,
+  header: ge,
+  text: fe,
+  productsBlock: be,
+  top: ve,
+  itemsBlock: je,
+  typeTexts: ye,
+  block: Ie,
+  active: ke,
+  products: $e,
+  product: Ne,
+  button: we,
+  disabled: Ce,
+  image: Be,
+  info: Se,
+  name: Te,
+  buttons: Pe,
+  modal: Ae,
+  link: Me,
+  modalOptions: Oe,
+  addButton: qe,
+  deleteButton: Ee,
+  closeIcon: De
+}, Le = p.forwardRef(
+  (r, o) => {
+    const { activeItem: e, setActiveItem: s, popupPosition: i, modalOptions: a, setIsOpenModal: l } = r;
     function d(n, c) {
       return n.length > c ? `${n.slice(0, c)}...` : n;
     }
     return /* @__PURE__ */ t.jsxs(
       "div",
       {
-        ref: a,
-        className: M.modal,
+        ref: o,
+        className: R.modal,
         onClick: (n) => {
           n.stopPropagation();
         },
@@ -279,10 +279,10 @@ const Ft = "_wrapper_1ibay_2", Vt = "_alignmentBlock_1ibay_8", Ut = "_title_1iba
           left: `${i.left}px`
         },
         children: [
-          /* @__PURE__ */ t.jsxs("div", { className: M.top, children: [
-            /* @__PURE__ */ t.jsx("h3", { className: M.title, children: d(e.name, 20) }),
-            /* @__PURE__ */ t.jsx("div", { className: M.closeIcon, children: /* @__PURE__ */ t.jsx(
-              b,
+          /* @__PURE__ */ t.jsxs("div", { className: R.top, children: [
+            /* @__PURE__ */ t.jsx("h3", { className: R.title, children: d(e.name, 20) }),
+            /* @__PURE__ */ t.jsx("div", { className: R.closeIcon, children: /* @__PURE__ */ t.jsx(
+              v,
               {
                 name: "X",
                 height: 20,
@@ -293,7 +293,7 @@ const Ft = "_wrapper_1ibay_2", Vt = "_alignmentBlock_1ibay_8", Ut = "_title_1iba
               }
             ) })
           ] }),
-          /* @__PURE__ */ t.jsx("div", { className: M.modalOptions, children: o.map((n) => {
+          /* @__PURE__ */ t.jsx("div", { className: R.modalOptions, children: a.map((n) => {
             if (n.type === "image")
               return /* @__PURE__ */ t.jsx(
                 gt,
@@ -301,11 +301,11 @@ const Ft = "_wrapper_1ibay_2", Vt = "_alignmentBlock_1ibay_8", Ut = "_title_1iba
                   label: "Put up an attractive image",
                   activeImage: e[n.field],
                   onChange: (c) => {
-                    const v = {
+                    const b = {
                       ...e,
                       [n.field]: c
                     };
-                    s(v);
+                    s(b);
                   }
                 },
                 String(n.field)
@@ -316,33 +316,33 @@ const Ft = "_wrapper_1ibay_2", Vt = "_alignmentBlock_1ibay_8", Ut = "_title_1iba
                 {
                   typesText: e[n.field.type],
                   setTypesText: (c) => {
-                    const v = {
+                    const b = {
                       ...e,
                       [n.field.type]: c
                     };
-                    s(v);
+                    s(b);
                   },
                   text: e[n.field.text] || "",
                   setText: (c) => {
-                    const v = {
+                    const b = {
                       ...e,
                       [n.field.text]: c
                     };
-                    s(v);
+                    s(b);
                   },
                   subtitle: n.label
                 }
               );
             if (n.type === "input")
               return /* @__PURE__ */ t.jsx(
-                W,
+                X,
                 {
                   onChange: (c) => {
-                    const v = {
+                    const b = {
                       ...e,
                       [n.field]: c
                     };
-                    s(v);
+                    s(b);
                   },
                   value: e[n.field] || "",
                   label: n.label,
@@ -350,16 +350,16 @@ const Ft = "_wrapper_1ibay_2", Vt = "_alignmentBlock_1ibay_8", Ut = "_title_1iba
                 }
               );
             if (n.type === "inputSwitch")
-              return /* @__PURE__ */ t.jsxs("div", { className: M.link, children: [
+              return /* @__PURE__ */ t.jsxs("div", { className: R.link, children: [
                 /* @__PURE__ */ t.jsx(
-                  W,
+                  X,
                   {
                     onChange: (c) => {
-                      const v = {
+                      const b = {
                         ...e,
                         [n.field.text]: c
                       };
-                      s(v);
+                      s(b);
                     },
                     value: e[n.field.text] || "",
                     label: n.inputLabel,
@@ -367,31 +367,31 @@ const Ft = "_wrapper_1ibay_2", Vt = "_alignmentBlock_1ibay_8", Ut = "_title_1iba
                   }
                 ),
                 /* @__PURE__ */ t.jsx(
-                  Z,
+                  tt,
                   {
                     current: !!e[n.field.switch] || !1,
                     label: n.switchLabel,
                     onChange: (c) => {
-                      const v = {
+                      const b = {
                         ...e,
                         [n.field.switch]: c
                       };
-                      s(v);
+                      s(b);
                     }
                   }
                 )
               ] });
             if (n.type === "list")
               return /* @__PURE__ */ t.jsx(
-                ze,
+                Ve,
                 {
                   items: e[n.field] || [],
                   setItems: (c) => {
-                    const v = {
+                    const b = {
                       ...e,
                       [n.field]: c
                     };
-                    s(v);
+                    s(b);
                   },
                   itemsType: "select",
                   draggable: n.draggable || !1,
@@ -404,19 +404,19 @@ const Ft = "_wrapper_1ibay_2", Vt = "_alignmentBlock_1ibay_8", Ut = "_title_1iba
               );
             if (n.type === "select")
               return /* @__PURE__ */ t.jsx(
-                st,
+                nt,
                 {
                   options: n.itemsOptions,
                   onChange: (c) => {
-                    const v = {
+                    const b = {
                       ...e,
                       [n.field]: c
                     };
-                    s(v);
+                    s(b);
                   },
                   label: n.label,
                   value: e[n.field] || "String",
-                  leftAddon: n.leftAddon && n.leftAddon === "icon" && /* @__PURE__ */ t.jsx(b, { name: e[n.field] })
+                  leftAddon: n.leftAddon && n.leftAddon === "icon" && /* @__PURE__ */ t.jsx(v, { name: e[n.field] })
                 }
               );
           }) })
@@ -424,19 +424,19 @@ const Ft = "_wrapper_1ibay_2", Vt = "_alignmentBlock_1ibay_8", Ut = "_title_1iba
       }
     );
   }
-), Le = "_other_g74jx_1", Re = "_subtitle_g74jx_7", Me = "_items_g74jx_14", yt = {
-  other: Le,
-  subtitle: Re,
-  items: Me
-}, bt = (r) => {
-  const { items: a, title: e = "Other" } = r;
+), Re = "_other_g74jx_1", He = "_subtitle_g74jx_7", ze = "_items_g74jx_14", yt = {
+  other: Re,
+  subtitle: He,
+  items: ze
+}, vt = (r) => {
+  const { items: o, title: e = "Other" } = r;
   return /* @__PURE__ */ t.jsxs("div", { className: yt.other, children: [
     /* @__PURE__ */ t.jsx("h5", { className: yt.subtitle, children: e }),
-    /* @__PURE__ */ t.jsx("div", { className: yt.items, children: a.map((s, i) => /* @__PURE__ */ t.jsx(
-      Z,
+    /* @__PURE__ */ t.jsx("div", { className: yt.items, children: o.map((s, i) => /* @__PURE__ */ t.jsx(
+      tt,
       {
         current: s.isItem,
-        onChange: (o) => s.setIsItem(o),
+        onChange: (a) => s.setIsItem(a),
         label: s.label,
         hasBackground: !0,
         paddingless: !1
@@ -445,18 +445,18 @@ const Ft = "_wrapper_1ibay_2", Vt = "_alignmentBlock_1ibay_8", Ut = "_title_1iba
     )) })
   ] });
 };
-function He({ product: r, children: a }) {
+function Fe({ product: r, children: o }) {
   const {
     attributes: e,
     listeners: s,
     setNodeRef: i,
-    transform: o,
+    transform: a,
     transition: l,
     isDragging: d
-  } = St({
+  } = Bt({
     id: r.id
   }), n = {
-    transform: Tt.Transform.toString(o),
+    transform: St.Transform.toString(a),
     transition: l
   };
   return /* @__PURE__ */ t.jsx(
@@ -464,41 +464,41 @@ function He({ product: r, children: a }) {
     {
       ref: i,
       style: n,
-      className: `${M.product} ${d ? M.dragging : ""}`,
+      className: `${R.product} ${d ? R.dragging : ""}`,
       ...e,
       ...s,
-      children: a
+      children: o
     }
   );
 }
-const ze = (r) => {
+const Ve = (r) => {
   const {
-    isActiveItems: a,
+    isActiveItems: o,
     setIsActiveItems: e,
     items: s,
     setItems: i,
-    other: o,
+    other: a,
     title: l,
     subtitle: d,
     editable: n = !0,
     draggable: c = !1,
-    withImage: v = !1,
-    deletable: f = !0,
-    addable: m = !0,
-    itemsType: h,
-    itemsPlaceholder: g = "",
+    withImage: b = !1,
+    deletable: g = !0,
+    addable: h = !0,
+    itemsType: m,
+    itemsPlaceholder: x = "",
     itemsOptions: u,
-    hasRangeSelector: w = !1,
-    rangeSelectorOptions: q,
-    modalOptions: k,
-    addableOptions: L = {},
+    hasRangeSelector: C = !1,
+    rangeSelectorOptions: O,
+    modalOptions: I,
+    addableOptions: D = {},
     limit: B,
     autoScrollInterval: S
-  } = r, [x, D] = p.useState(null), [X, tt] = p.useState({
+  } = r, [f, E] = p.useState(null), [W, et] = p.useState({
     top: 0,
     left: 0
-  }), [y, $] = p.useState(null), E = p.useRef(null), [G, A] = p.useState(!1), H = It(
-    $t(Bt, {
+  }), [y, $] = p.useState(null), q = p.useRef(null), [G, A] = p.useState(!1), H = It(
+    kt(Ct, {
       activationConstraint: {
         distance: 5
       }
@@ -506,36 +506,36 @@ const ze = (r) => {
   );
   p.useEffect(() => {
     const _ = () => {
-      D(null), A(!1);
+      E(null), A(!1);
     };
-    return document.body.addEventListener("click", _), D(null), A(!1), () => {
-      D(null), A(!1), document.body.removeEventListener("click", _);
+    return document.body.addEventListener("click", _), E(null), A(!1), () => {
+      E(null), A(!1), document.body.removeEventListener("click", _);
     };
   }, []), p.useEffect(() => {
-    if (x) {
-      const _ = [...s].map((I) => I.id === x.id ? x : I);
+    if (f) {
+      const _ = [...s].map((k) => k.id === f.id ? f : k);
       i(_);
     }
-  }, [x]), p.useEffect(() => {
-    if (E.current && y) {
-      const _ = E.current.getBoundingClientRect().height, I = window.innerHeight;
+  }, [f]), p.useEffect(() => {
+    if (q.current && y) {
+      const _ = q.current.getBoundingClientRect().height, k = window.innerHeight;
       let T = y.top;
-      T + _ > I + window.scrollY - 200 && (T = I + window.scrollY - _ - 200), T < 0 && (T = 10), tt({
+      T + _ > k + window.scrollY - 200 && (T = k + window.scrollY - _ - 200), T < 0 && (T = 10), et({
         top: T,
         left: y.left
       });
     }
-  }, [E.current, y]);
-  const K = (_, I) => {
+  }, [q.current, y]);
+  const K = (_, k) => {
     _.stopPropagation();
     const T = _.target.getBoundingClientRect();
     $({
       top: T.top + window.scrollY,
       left: T.left - 30
-    }), D(I), A(!0);
+    }), E(k), A(!0);
   };
   function lt(_) {
-    if (v)
+    if (b)
       return _ ? /* @__PURE__ */ t.jsx(
         "img",
         {
@@ -545,7 +545,7 @@ const ze = (r) => {
           height: 16
         }
       ) : /* @__PURE__ */ t.jsx(
-        b,
+        v,
         {
           name: "Image",
           width: 16,
@@ -555,19 +555,19 @@ const ze = (r) => {
       );
   }
   const j = (_) => {
-    const { active: I, over: T } = _;
-    if (T && I.id !== T.id) {
-      const R = s.findIndex((P) => P.id === I.id), U = s.findIndex((P) => P.id === T.id);
-      if (R !== -1 && U !== -1) {
-        const P = [...s], [rt] = P.splice(R, 1);
+    const { active: k, over: T } = _;
+    if (T && k.id !== T.id) {
+      const L = s.findIndex((P) => P.id === k.id), U = s.findIndex((P) => P.id === T.id);
+      if (L !== -1 && U !== -1) {
+        const P = [...s], [rt] = P.splice(L, 1);
         P.splice(U, 0, rt), i(P);
       }
     }
-  }, O = (_, I) => {
-    var R, U;
+  }, M = (_, k) => {
+    var L, U;
     const T = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       c && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-        b,
+        v,
         {
           name: "DotsSixVertical",
           hoverable: !0,
@@ -575,8 +575,8 @@ const ze = (r) => {
           height: 20
         }
       ) }),
-      h === "select" && u && /* @__PURE__ */ t.jsx(
-        st,
+      m === "select" && u && /* @__PURE__ */ t.jsx(
+        nt,
         {
           onChange: (P) => {
             const rt = [...s], ut = u.find((ft) => ft.name === P);
@@ -585,7 +585,7 @@ const ze = (r) => {
               ...ut,
               name: P
             } : ft);
-            D({
+            E({
               ..._,
               name: P
             }), i([...dt]);
@@ -595,8 +595,8 @@ const ze = (r) => {
           leftAddon: lt(_.images)
         }
       ),
-      h === "input" && /* @__PURE__ */ t.jsx(
-        W,
+      m === "input" && /* @__PURE__ */ t.jsx(
+        X,
         {
           onChange: (P) => {
             const ut = [...s].map((dt) => dt.id === _.id ? {
@@ -606,10 +606,10 @@ const ze = (r) => {
             i([...ut]);
           },
           value: _.name,
-          placeholder: g
+          placeholder: x
         }
       ),
-      h === "image" && /* @__PURE__ */ t.jsx(
+      m === "image" && /* @__PURE__ */ t.jsx(
         gt,
         {
           onChange: (P) => {
@@ -619,12 +619,12 @@ const ze = (r) => {
             } : dt);
             i([...ut]);
           },
-          activeImage: (R = s.find((P) => P.id === _.id)) != null && R.images ? (U = s.find((P) => P.id === _.id)) == null ? void 0 : U.images[0] : void 0
+          activeImage: (L = s.find((P) => P.id === _.id)) != null && L.images ? (U = s.find((P) => P.id === _.id)) == null ? void 0 : U.images[0] : void 0
         }
       ),
-      /* @__PURE__ */ t.jsxs("div", { className: M.buttons, children: [
-        n && /* @__PURE__ */ t.jsx("div", { className: M.deleteButton, children: /* @__PURE__ */ t.jsx(
-          b,
+      /* @__PURE__ */ t.jsxs("div", { className: R.buttons, children: [
+        n && /* @__PURE__ */ t.jsx("div", { className: R.deleteButton, children: /* @__PURE__ */ t.jsx(
+          v,
           {
             name: "Sliders",
             hoverable: !0,
@@ -633,8 +633,8 @@ const ze = (r) => {
             onClick: (P) => K(P, _)
           }
         ) }),
-        f && /* @__PURE__ */ t.jsx("div", { className: M.deleteButton, children: /* @__PURE__ */ t.jsx(
-          b,
+        g && /* @__PURE__ */ t.jsx("div", { className: R.deleteButton, children: /* @__PURE__ */ t.jsx(
+          v,
           {
             name: "Trash",
             hoverable: !0,
@@ -647,63 +647,63 @@ const ze = (r) => {
       ] })
     ] });
     return c ? /* @__PURE__ */ t.jsx(
-      He,
+      Fe,
       {
         product: _,
-        index: I,
+        index: k,
         children: T
       },
       _.id
     ) : /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: M.product,
+        className: R.product,
         children: T
       },
       _.id
     );
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: M.productsBlock, children: [
-    (l || a !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: M.top, children: [
-      l && /* @__PURE__ */ t.jsx("h3", { className: M.title, children: l }),
-      a !== void 0 && /* @__PURE__ */ t.jsx(
-        Z,
+  return /* @__PURE__ */ t.jsxs("div", { className: R.productsBlock, children: [
+    (l || o !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: R.top, children: [
+      l && /* @__PURE__ */ t.jsx("h3", { className: R.title, children: l }),
+      o !== void 0 && /* @__PURE__ */ t.jsx(
+        tt,
         {
-          current: a,
+          current: o,
           onChange: (_) => e == null ? void 0 : e(_)
         }
       )
     ] }),
-    x && n && k && G && /* @__PURE__ */ t.jsx(
-      De,
+    f && n && I && G && /* @__PURE__ */ t.jsx(
+      Le,
       {
-        ref: E,
-        activeItem: x,
-        setActiveItem: D,
-        popupPosition: X,
-        modalOptions: k,
+        ref: q,
+        activeItem: f,
+        setActiveItem: E,
+        popupPosition: W,
+        modalOptions: I,
         setIsOpenModal: A
       }
     ),
-    w && q && /* @__PURE__ */ t.jsx(At, { ...q }),
-    /* @__PURE__ */ t.jsxs("div", { className: M.products, children: [
-      d && /* @__PURE__ */ t.jsx("h5", { className: M.subtitle, children: d }),
+    C && O && /* @__PURE__ */ t.jsx(Mt, { ...O }),
+    /* @__PURE__ */ t.jsxs("div", { className: R.products, children: [
+      d && /* @__PURE__ */ t.jsx("h5", { className: R.subtitle, children: d }),
       c ? /* @__PURE__ */ t.jsx(
-        Nt,
+        $t,
         {
           sensors: H,
           onDragEnd: j,
           children: /* @__PURE__ */ t.jsx(
-            wt,
+            Nt,
             {
               items: s.map((_) => _.id),
-              strategy: Ct,
-              children: s.map((_, I) => O(_, I))
+              strategy: wt,
+              children: s.map((_, k) => M(_, k))
             }
           )
         }
-      ) : s.map((_, I) => O(_, I)),
-      m && /* @__PURE__ */ t.jsx(
+      ) : s.map((_, k) => M(_, k)),
+      h && /* @__PURE__ */ t.jsx(
         "div",
         {
           style: {
@@ -712,45 +712,45 @@ const ze = (r) => {
             justifyContent: "center"
           },
           children: /* @__PURE__ */ t.jsx(
-            ct,
+            Z,
             {
               withoutHover: !0,
-              className: F(M.button, {
-                [M.disabled]: !!(B && B <= s.length || s.length === (u == null ? void 0 : u.length))
+              className: F(R.button, {
+                [R.disabled]: !!(B && B <= s.length || s.length === (u == null ? void 0 : u.length))
               }),
               size: "s",
               disabled: !!(B && B <= s.length || s.length === (u == null ? void 0 : u.length)),
               onClick: () => {
                 const _ = [...s];
-                let I = null;
+                let k = null;
                 if (u) {
                   for (let T = 0; T < u.length; T++)
-                    if (!s.find((R) => R.id === u[T].id)) {
-                      I = u[T];
+                    if (!s.find((L) => L.id === u[T].id)) {
+                      k = u[T];
                       break;
                     }
                 }
-                h === "select" && u ? _.push({
-                  name: I ? I.name : u[0].name,
-                  id: (I == null ? void 0 : I.id) || u[0].id,
-                  ...L
-                }) : h === "input" ? _.push({
+                m === "select" && u ? _.push({
+                  name: k ? k.name : u[0].name,
+                  id: (k == null ? void 0 : k.id) || u[0].id,
+                  ...D
+                }) : m === "input" ? _.push({
                   name: "",
                   id: _t(),
-                  ...L
+                  ...D
                 }) : _.push({
                   name: `Image ${s.length + 1}`,
                   id: _t(),
-                  ...L
+                  ...D
                 }), i(_);
               },
               style: {
                 width: "fit-content"
               },
-              children: /* @__PURE__ */ t.jsxs("div", { className: M.addButton, children: [
+              children: /* @__PURE__ */ t.jsxs("div", { className: R.addButton, children: [
                 /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
                 /* @__PURE__ */ t.jsx(
-                  b,
+                  v,
                   {
                     name: "Plus",
                     width: 16,
@@ -763,9 +763,9 @@ const ze = (r) => {
         }
       )
     ] }),
-    o !== void 0 && /* @__PURE__ */ t.jsx(bt, { items: o }),
+    a !== void 0 && /* @__PURE__ */ t.jsx(vt, { items: a }),
     S !== void 0 && /* @__PURE__ */ t.jsx(
-      W,
+      X,
       {
         label: "Auto scroll interval",
         type: "number",
@@ -780,60 +780,60 @@ const ze = (r) => {
       }
     )
   ] });
-}, Fe = "_title_82zux_1", Ve = "_subtitle_82zux_5", Ue = "_header_82zux_12", Ye = "_text_82zux_13", Ge = "_productsBlock_82zux_14", We = "_top_82zux_26", Xe = "_itemsBlock_82zux_35", Je = "_typeTexts_82zux_41", Qe = "_block_82zux_48", Ke = "_active_82zux_61", Ze = "_products_82zux_14", ts = "_product_82zux_14", es = "_button_82zux_80", ss = "_disabled_82zux_91", ns = "_image_82zux_95", is = "_info_82zux_102", os = "_name_82zux_114", as = "_buttons_82zux_118", cs = "_modal_82zux_125", ls = "_link_82zux_145", rs = "_modalOptions_82zux_151", ds = "_addButton_82zux_157", us = "_deleteButton_82zux_179", Q = {
-  title: Fe,
-  subtitle: Ve,
-  header: Ue,
-  text: Ye,
-  productsBlock: Ge,
-  top: We,
-  itemsBlock: Xe,
-  typeTexts: Je,
-  block: Qe,
-  active: Ke,
-  products: Ze,
-  product: ts,
-  button: es,
-  disabled: ss,
-  image: ns,
-  info: is,
-  name: os,
-  buttons: as,
-  modal: cs,
-  link: ls,
-  modalOptions: rs,
-  addButton: ds,
-  deleteButton: us
-}, ra = (r) => {
+}, Ue = "_title_82zux_1", Ye = "_subtitle_82zux_5", Ge = "_header_82zux_12", Xe = "_text_82zux_13", We = "_productsBlock_82zux_14", Je = "_top_82zux_26", Qe = "_itemsBlock_82zux_35", Ke = "_typeTexts_82zux_41", Ze = "_block_82zux_48", ts = "_active_82zux_61", es = "_products_82zux_14", ss = "_product_82zux_14", ns = "_button_82zux_80", is = "_disabled_82zux_91", os = "_image_82zux_95", as = "_info_82zux_102", cs = "_name_82zux_114", ls = "_buttons_82zux_118", rs = "_modal_82zux_125", ds = "_link_82zux_145", us = "_modalOptions_82zux_151", _s = "_addButton_82zux_157", ms = "_deleteButton_82zux_179", Q = {
+  title: Ue,
+  subtitle: Ye,
+  header: Ge,
+  text: Xe,
+  productsBlock: We,
+  top: Je,
+  itemsBlock: Qe,
+  typeTexts: Ke,
+  block: Ze,
+  active: ts,
+  products: es,
+  product: ss,
+  button: ns,
+  disabled: is,
+  image: os,
+  info: as,
+  name: cs,
+  buttons: ls,
+  modal: rs,
+  link: ds,
+  modalOptions: us,
+  addButton: _s,
+  deleteButton: ms
+}, fa = (r) => {
   const {
-    isActiveItems: a,
+    isActiveItems: o,
     setIsActiveItems: e,
     items: s,
     setItems: i,
-    other: o,
+    other: a,
     title: l,
     subtitle: d,
     draggable: n = !1,
     withImage: c = !1,
-    addable: v = !0,
-    itemsOptions: f,
-    hasRangeSelector: m = !1,
-    rangeSelectorOptions: h,
-    limit: g,
+    addable: b = !0,
+    itemsOptions: g,
+    hasRangeSelector: h = !1,
+    rangeSelectorOptions: m,
+    limit: x,
     autoScrollInterval: u
   } = r;
-  function w(k) {
+  function C(I) {
     if (c)
-      return k ? /* @__PURE__ */ t.jsx(
+      return I ? /* @__PURE__ */ t.jsx(
         "img",
         {
-          src: `https://imagedelivery.net/${k[0]}/w=1000`,
+          src: `https://imagedelivery.net/${I[0]}/w=1000`,
           alt: "image",
           width: 16,
           height: 16
         }
       ) : /* @__PURE__ */ t.jsx(
-        b,
+        v,
         {
           name: "Image",
           width: 16,
@@ -842,12 +842,12 @@ const ze = (r) => {
         }
       );
   }
-  const q = (k) => {
-    const L = f.find((S) => S.id === k);
-    if (!L) return;
+  const O = (I) => {
+    const D = g.find((S) => S.id === I);
+    if (!D) return;
     const B = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       n && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-        b,
+        v,
         {
           name: "DotsSixVertical",
           hoverable: !0,
@@ -856,28 +856,28 @@ const ze = (r) => {
         }
       ) }),
       /* @__PURE__ */ t.jsx(
-        st,
+        nt,
         {
           onChange: (S) => {
-            const x = [...s], D = f.find((y) => y.name === S);
-            if (!D) return;
-            const X = D.id, tt = x.map((y) => y === k ? X : y);
-            i([...tt]);
+            const f = [...s], E = g.find((y) => y.name === S);
+            if (!E) return;
+            const W = E.id, et = f.map((y) => y === I ? W : y);
+            i([...et]);
           },
-          value: L.name,
-          options: f.filter((S) => !s.find((x) => x === S.id)).map((S) => S.name),
-          leftAddon: w(L.images)
+          value: D.name,
+          options: g.filter((S) => !s.find((f) => f === S.id)).map((S) => S.name),
+          leftAddon: C(D.images)
         }
       ),
       /* @__PURE__ */ t.jsx("div", { className: Q.buttons, children: /* @__PURE__ */ t.jsx("div", { className: Q.deleteButton, children: /* @__PURE__ */ t.jsx(
-        b,
+        v,
         {
           name: "Trash",
           hoverable: !0,
           width: 20,
           height: 20,
           fill: "#C12A2A",
-          onClick: () => i(s.filter((S) => S !== k))
+          onClick: () => i(s.filter((S) => S !== I))
         }
       ) }) })
     ] });
@@ -887,25 +887,25 @@ const ze = (r) => {
         className: Q.product,
         children: B
       },
-      k
+      I
     );
   };
   return /* @__PURE__ */ t.jsxs("div", { className: Q.productsBlock, children: [
-    (l || a !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: Q.top, children: [
+    (l || o !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: Q.top, children: [
       l && /* @__PURE__ */ t.jsx("h3", { className: Q.title, children: l }),
-      a !== void 0 && /* @__PURE__ */ t.jsx(
-        Z,
+      o !== void 0 && /* @__PURE__ */ t.jsx(
+        tt,
         {
-          current: a,
-          onChange: (k) => e == null ? void 0 : e(k)
+          current: o,
+          onChange: (I) => e == null ? void 0 : e(I)
         }
       )
     ] }),
-    m && h && /* @__PURE__ */ t.jsx(At, { ...h }),
+    h && m && /* @__PURE__ */ t.jsx(Mt, { ...m }),
     /* @__PURE__ */ t.jsxs("div", { className: Q.products, children: [
       d && /* @__PURE__ */ t.jsx("h5", { className: Q.subtitle, children: d }),
-      s.map((k) => q(k)),
-      v && /* @__PURE__ */ t.jsx(
+      s.map((I) => O(I)),
+      b && /* @__PURE__ */ t.jsx(
         "div",
         {
           style: {
@@ -915,25 +915,25 @@ const ze = (r) => {
             gap: 5
           },
           children: /* @__PURE__ */ t.jsx(
-            ct,
+            Z,
             {
               withoutHover: !0,
               className: F(Q.button, {
-                [Q.disabled]: !!(g && g <= s.length || s.length === f.length)
+                [Q.disabled]: !!(x && x <= s.length || s.length === g.length)
               }),
               size: "s",
-              disabled: !!(g && g <= s.length || s.length === f.length),
+              disabled: !!(x && x <= s.length || s.length === g.length),
               onClick: () => {
-                const k = [...s];
-                let L = null;
-                if (f) {
-                  for (let B = 0; B < f.length; B++)
-                    if (!s.find((S) => S === f[B].id)) {
-                      L = f[B];
+                const I = [...s];
+                let D = null;
+                if (g) {
+                  for (let B = 0; B < g.length; B++)
+                    if (!s.find((S) => S === g[B].id)) {
+                      D = g[B];
                       break;
                     }
                 }
-                k.push((L == null ? void 0 : L.id) || f[0].id), i(k);
+                I.push((D == null ? void 0 : D.id) || g[0].id), i(I);
               },
               style: {
                 width: "fit-content"
@@ -941,7 +941,7 @@ const ze = (r) => {
               children: /* @__PURE__ */ t.jsxs("div", { className: Q.addButton, children: [
                 /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
                 /* @__PURE__ */ t.jsx(
-                  b,
+                  v,
                   {
                     name: "Plus",
                     width: 16,
@@ -954,14 +954,14 @@ const ze = (r) => {
         }
       )
     ] }),
-    o !== void 0 && /* @__PURE__ */ t.jsx(bt, { items: o }),
+    a !== void 0 && /* @__PURE__ */ t.jsx(vt, { items: a }),
     u !== void 0 && /* @__PURE__ */ t.jsx(
-      W,
+      X,
       {
         label: "Auto scroll interval",
         type: "number",
         value: String(u.scrollInterval),
-        onChange: (k) => u.setScrollInterval(Number(k)),
+        onChange: (I) => u.setScrollInterval(Number(I)),
         min: 0.1,
         max: 100,
         style: {
@@ -971,41 +971,41 @@ const ze = (r) => {
       }
     )
   ] });
-}, _s = "_title_1lgwl_1", hs = "_subtitle_1lgwl_5", ms = "_header_1lgwl_12", ps = "_text_1lgwl_13", gs = "_productsBlock_1lgwl_14", fs = "_top_1lgwl_26", xs = "_itemsBlock_1lgwl_35", vs = "_typeTexts_1lgwl_41", bs = "_block_1lgwl_48", js = "_active_1lgwl_61", ys = "_products_1lgwl_14", ks = "_product_1lgwl_14", Is = "_button_1lgwl_80", $s = "_disabled_1lgwl_91", Ns = "_image_1lgwl_95", ws = "_info_1lgwl_102", Cs = "_name_1lgwl_114", Bs = "_buttons_1lgwl_118", Ss = "_modal_1lgwl_125", Ts = "_link_1lgwl_146", Ps = "_modalOptions_1lgwl_152", As = "_addButton_1lgwl_164", Os = "_deleteButton_1lgwl_179", qs = "_closeIcon_1lgwl_191", z = {
-  title: _s,
-  subtitle: hs,
-  header: ms,
-  text: ps,
-  productsBlock: gs,
-  top: fs,
-  itemsBlock: xs,
-  typeTexts: vs,
-  block: bs,
-  active: js,
-  products: ys,
-  product: ks,
-  button: Is,
-  disabled: $s,
-  image: Ns,
-  info: ws,
-  name: Cs,
-  buttons: Bs,
-  modal: Ss,
-  link: Ts,
-  modalOptions: Ps,
-  addButton: As,
-  deleteButton: Os,
-  closeIcon: qs
-}, Es = p.forwardRef(
-  (r, a) => {
-    const { activeItem: e, setActiveItem: s, popupPosition: i, modalOptions: o, setIsOpenModal: l } = r;
+}, hs = "_title_1vfw9_1", ps = "_subtitle_1vfw9_5", xs = "_header_1vfw9_12", gs = "_text_1vfw9_13", fs = "_productsBlock_1vfw9_14", bs = "_top_1vfw9_26", vs = "_itemsBlock_1vfw9_35", js = "_typeTexts_1vfw9_41", ys = "_block_1vfw9_48", Is = "_active_1vfw9_61", ks = "_products_1vfw9_14", $s = "_product_1vfw9_14", Ns = "_button_1vfw9_80", ws = "_disabled_1vfw9_91", Cs = "_image_1vfw9_95", Bs = "_info_1vfw9_102", Ss = "_name_1vfw9_114", Ts = "_buttons_1vfw9_118", Ps = "_modal_1vfw9_125", As = "_link_1vfw9_145", Ms = "_modalOptions_1vfw9_151", Os = "_addButton_1vfw9_164", qs = "_deleteButton_1vfw9_179", Es = "_closeIcon_1vfw9_191", z = {
+  title: hs,
+  subtitle: ps,
+  header: xs,
+  text: gs,
+  productsBlock: fs,
+  top: bs,
+  itemsBlock: vs,
+  typeTexts: js,
+  block: ys,
+  active: Is,
+  products: ks,
+  product: $s,
+  button: Ns,
+  disabled: ws,
+  image: Cs,
+  info: Bs,
+  name: Ss,
+  buttons: Ts,
+  modal: Ps,
+  link: As,
+  modalOptions: Ms,
+  addButton: Os,
+  deleteButton: qs,
+  closeIcon: Es
+}, Ds = p.forwardRef(
+  (r, o) => {
+    const { activeItem: e, setActiveItem: s, popupPosition: i, modalOptions: a, setIsOpenModal: l } = r;
     function d(n, c) {
       return n.length > c ? `${n.slice(0, c)}...` : n;
     }
     return /* @__PURE__ */ t.jsxs(
       "div",
       {
-        ref: a,
+        ref: o,
         className: z.modal,
         onClick: (n) => {
           n.stopPropagation();
@@ -1018,7 +1018,7 @@ const ze = (r) => {
           /* @__PURE__ */ t.jsxs("div", { className: z.top, children: [
             /* @__PURE__ */ t.jsx("h3", { className: z.title, children: d(e.name, 20) }),
             /* @__PURE__ */ t.jsx("div", { className: z.closeIcon, children: /* @__PURE__ */ t.jsx(
-              b,
+              v,
               {
                 name: "X",
                 height: 20,
@@ -1030,7 +1030,7 @@ const ze = (r) => {
               }
             ) })
           ] }),
-          /* @__PURE__ */ t.jsx("div", { className: z.modalOptions, children: o.map((n) => {
+          /* @__PURE__ */ t.jsx("div", { className: z.modalOptions, children: a.map((n) => {
             if (n.type === "image")
               return /* @__PURE__ */ t.jsx(
                 gt,
@@ -1038,11 +1038,11 @@ const ze = (r) => {
                   label: "Put up an attractive image",
                   activeImage: e[n.field],
                   onChange: (c) => {
-                    const v = {
+                    const b = {
                       ...e,
                       [n.field]: c
                     };
-                    s(v);
+                    s(b);
                   }
                 },
                 String(n.field)
@@ -1053,33 +1053,33 @@ const ze = (r) => {
                 {
                   typesText: e[n.field.type],
                   setTypesText: (c) => {
-                    const v = {
+                    const b = {
                       ...e,
                       [n.field.type]: c
                     };
-                    s(v);
+                    s(b);
                   },
                   text: e[n.field.text] || "",
                   setText: (c) => {
-                    const v = {
+                    const b = {
                       ...e,
                       [n.field.text]: c
                     };
-                    s(v);
+                    s(b);
                   },
                   subtitle: n.label
                 }
               );
             if (n.type === "input")
               return /* @__PURE__ */ t.jsx(
-                W,
+                X,
                 {
                   onChange: (c) => {
-                    const v = {
+                    const b = {
                       ...e,
                       [n.field]: c
                     };
-                    s(v);
+                    s(b);
                   },
                   value: e[n.field] || "",
                   label: n.label,
@@ -1089,14 +1089,14 @@ const ze = (r) => {
             if (n.type === "inputSwitch")
               return /* @__PURE__ */ t.jsxs("div", { className: z.link, children: [
                 /* @__PURE__ */ t.jsx(
-                  W,
+                  X,
                   {
                     onChange: (c) => {
-                      const v = {
+                      const b = {
                         ...e,
                         [n.field.text]: c
                       };
-                      s(v);
+                      s(b);
                     },
                     value: e[n.field.text] || "",
                     label: n.inputLabel,
@@ -1104,35 +1104,35 @@ const ze = (r) => {
                   }
                 ),
                 /* @__PURE__ */ t.jsx(
-                  Z,
+                  tt,
                   {
                     current: !!e[n.field.switch] || !1,
                     label: n.switchLabel,
                     onChange: (c) => {
-                      const v = {
+                      const b = {
                         ...e,
                         [n.field.switch]: c
                       };
-                      s(v);
+                      s(b);
                     }
                   }
                 )
               ] });
             if (n.type === "select")
               return /* @__PURE__ */ t.jsx(
-                st,
+                nt,
                 {
                   options: n.itemsOptions,
                   onChange: (c) => {
-                    const v = {
+                    const b = {
                       ...e,
                       [n.field]: c
                     };
-                    s(v);
+                    s(b);
                   },
                   label: n.label,
                   value: e[n.field] || "String",
-                  leftAddon: n.leftAddon && n.leftAddon === "icon" && /* @__PURE__ */ t.jsx(b, { name: e[n.field] })
+                  leftAddon: n.leftAddon && n.leftAddon === "icon" && /* @__PURE__ */ t.jsx(v, { name: e[n.field] })
                 }
               );
           }) })
@@ -1141,17 +1141,17 @@ const ze = (r) => {
     );
   }
 );
-function Ds(r) {
-  const { product: a, children: e } = r, { attributes: s, listeners: i, setNodeRef: o, transform: l, transition: d, isDragging: n } = St({
-    id: a.id
+function Ls(r) {
+  const { product: o, children: e } = r, { attributes: s, listeners: i, setNodeRef: a, transform: l, transition: d, isDragging: n } = Bt({
+    id: o.id
   }), c = {
-    transform: Tt.Transform.toString(l),
+    transform: St.Transform.toString(l),
     transition: d
   };
   return /* @__PURE__ */ t.jsx(
     "div",
     {
-      ref: o,
+      ref: a,
       style: c,
       className: `${z.product} ${n ? z.dragging : ""}`,
       ...s,
@@ -1160,32 +1160,32 @@ function Ds(r) {
     }
   );
 }
-const da = (r) => {
+const ba = (r) => {
   const {
-    isActiveItems: a,
+    isActiveItems: o,
     setIsActiveItems: e,
     items: s,
     setItems: i,
-    other: o,
+    other: a,
     title: l,
     subtitle: d,
     editable: n = !0,
     draggable: c = !1,
-    withImage: v = !1,
-    deletable: f = !0,
-    addable: m = !0,
-    itemsType: h,
-    itemsPlaceholder: g = "",
+    withImage: b = !1,
+    deletable: g = !0,
+    addable: h = !0,
+    itemsType: m,
+    itemsPlaceholder: x = "",
     itemsOptions: u,
-    hasRangeSelector: w = !1,
-    rangeSelectorOptions: q,
-    modalOptions: k,
-    addableOptions: L = {}
-  } = r, [B, S] = p.useState(null), [x, D] = p.useState({
+    hasRangeSelector: C = !1,
+    rangeSelectorOptions: O,
+    modalOptions: I,
+    addableOptions: D = {}
+  } = r, [B, S] = p.useState(null), [f, E] = p.useState({
     top: 0,
     left: 0
-  }), [X, tt] = p.useState(null), y = p.useRef(null), [$, E] = p.useState(!1), G = It(
-    $t(Bt, {
+  }), [W, et] = p.useState(null), y = p.useRef(null), [$, q] = p.useState(!1), G = It(
+    kt(Ct, {
       activationConstraint: {
         distance: 5
       }
@@ -1193,36 +1193,36 @@ const da = (r) => {
   );
   p.useEffect(() => {
     const j = () => {
-      S(null), E(!1);
+      S(null), q(!1);
     };
-    return document.body.addEventListener("click", j), S(null), E(!1), () => {
-      S(null), E(!1), document.body.removeEventListener("click", j);
+    return document.body.addEventListener("click", j), S(null), q(!1), () => {
+      S(null), q(!1), document.body.removeEventListener("click", j);
     };
   }, []), p.useEffect(() => {
     if (B) {
-      const j = [...s].map((O) => O.id === B.id ? B : O);
+      const j = [...s].map((M) => M.id === B.id ? B : M);
       i(j);
     }
   }, [B]), p.useEffect(() => {
-    if (y.current && X) {
-      const j = y.current.getBoundingClientRect().height, O = window.innerHeight;
-      let _ = X.top;
-      _ + j > O + window.scrollY - 200 && (_ = O + window.scrollY - j - 200), _ < 0 && (_ = 10), D({
+    if (y.current && W) {
+      const j = y.current.getBoundingClientRect().height, M = window.innerHeight;
+      let _ = W.top;
+      _ + j > M + window.scrollY - 200 && (_ = M + window.scrollY - j - 200), _ < 0 && (_ = 10), E({
         top: _,
-        left: X.left
+        left: W.left
       });
     }
-  }, [y.current, X]);
-  const A = (j, O) => {
+  }, [y.current, W]);
+  const A = (j, M) => {
     j.stopPropagation();
     const _ = j.target.getBoundingClientRect();
-    tt({
+    et({
       top: _.top + window.scrollY,
       left: _.left - 30
-    }), S(O), E(!0);
+    }), S(M), q(!0);
   };
   function H(j) {
-    if (v)
+    if (b)
       return j ? /* @__PURE__ */ t.jsx(
         "img",
         {
@@ -1232,7 +1232,7 @@ const da = (r) => {
           height: 16
         }
       ) : /* @__PURE__ */ t.jsx(
-        b,
+        v,
         {
           name: "Image",
           width: 16,
@@ -1242,19 +1242,19 @@ const da = (r) => {
       );
   }
   const K = (j) => {
-    const { active: O, over: _ } = j;
-    if (_ && O.id !== _.id) {
-      const I = s.findIndex((R) => R.id === O.id), T = s.findIndex((R) => R.id === _.id);
-      if (I !== -1 && T !== -1) {
-        const R = [...s], [U] = R.splice(I, 1);
-        R.splice(T, 0, U), i(R);
+    const { active: M, over: _ } = j;
+    if (_ && M.id !== _.id) {
+      const k = s.findIndex((L) => L.id === M.id), T = s.findIndex((L) => L.id === _.id);
+      if (k !== -1 && T !== -1) {
+        const L = [...s], [U] = L.splice(k, 1);
+        L.splice(T, 0, U), i(L);
       }
     }
   }, lt = (j) => {
     var _;
-    const O = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    const M = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       c && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-        b,
+        v,
         {
           name: "DotsSixVertical",
           hoverable: !0,
@@ -1262,132 +1262,132 @@ const da = (r) => {
           height: 20
         }
       ) }),
-      h === "select" && u && /* @__PURE__ */ t.jsx(
-        st,
+      m === "select" && u && /* @__PURE__ */ t.jsx(
+        nt,
         {
-          onChange: (I) => {
-            const R = [...s].map((U) => U.id === j.id ? {
+          onChange: (k) => {
+            const L = [...s].map((U) => U.id === j.id ? {
               ...j,
-              name: I
+              name: k
             } : U);
             S({
               ...j,
-              name: I
-            }), i([...R]);
+              name: k
+            }), i([...L]);
           },
           value: j.name,
-          options: u.filter((I) => !s.find((T) => T.name === I)),
+          options: u.filter((k) => !s.find((T) => T.name === k)),
           leftAddon: H(j.images)
         }
       ),
-      h === "input" && /* @__PURE__ */ t.jsx(
-        W,
+      m === "input" && /* @__PURE__ */ t.jsx(
+        X,
         {
-          onChange: (I) => {
-            const R = [...s].map((U) => U.id === j.id ? {
+          onChange: (k) => {
+            const L = [...s].map((U) => U.id === j.id ? {
               ...j,
-              name: I
+              name: k
             } : U);
-            i([...R]);
+            i([...L]);
           },
           value: j.name,
-          placeholder: g
+          placeholder: x
         }
       ),
-      h === "image" && /* @__PURE__ */ t.jsx(
+      m === "image" && /* @__PURE__ */ t.jsx(
         gt,
         {
-          onChange: (I) => {
-            const R = [...s].map((U) => U.id === j.id ? {
+          onChange: (k) => {
+            const L = [...s].map((U) => U.id === j.id ? {
               ...j,
-              images: I
+              images: k
             } : U);
-            i([...R]);
+            i([...L]);
           },
-          activeImage: (_ = s.find((I) => I.id === j.id)) == null ? void 0 : _.images[0]
+          activeImage: (_ = s.find((k) => k.id === j.id)) == null ? void 0 : _.images[0]
         }
       ),
       /* @__PURE__ */ t.jsxs("div", { className: z.buttons, children: [
         n && /* @__PURE__ */ t.jsx("div", { className: z.deleteButton, children: /* @__PURE__ */ t.jsx(
-          b,
+          v,
           {
             name: "Sliders",
             hoverable: !0,
             width: 20,
             height: 20,
-            onClick: (I) => A(I, j)
+            onClick: (k) => A(k, j)
           }
         ) }),
-        f && /* @__PURE__ */ t.jsx("div", { className: z.deleteButton, children: /* @__PURE__ */ t.jsx(
-          b,
+        g && /* @__PURE__ */ t.jsx("div", { className: z.deleteButton, children: /* @__PURE__ */ t.jsx(
+          v,
           {
             name: "Trash",
             hoverable: !0,
             width: 20,
             height: 20,
             fill: "#C12A2A",
-            onClick: () => i(s.filter((I) => I.id !== j.id))
+            onClick: () => i(s.filter((k) => k.id !== j.id))
           }
         ) })
       ] })
     ] });
     return c ? /* @__PURE__ */ t.jsx(
-      Ds,
+      Ls,
       {
         product: j,
-        children: O
+        children: M
       },
       j.id
     ) : /* @__PURE__ */ t.jsx(
       "div",
       {
         className: z.product,
-        children: O
+        children: M
       },
       j.id
     );
   };
   return /* @__PURE__ */ t.jsxs("div", { className: z.productsBlock, children: [
-    (l || a !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: z.top, children: [
+    (l || o !== 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(
-        Z,
+      o !== void 0 && /* @__PURE__ */ t.jsx(
+        tt,
         {
-          current: a,
+          current: o,
           onChange: (j) => e == null ? void 0 : e(j)
         }
       )
     ] }),
-    B && n && k && $ && /* @__PURE__ */ t.jsx(
-      Es,
+    B && n && I && $ && /* @__PURE__ */ t.jsx(
+      Ds,
       {
         ref: y,
         activeItem: B,
         setActiveItem: S,
-        popupPosition: x,
-        modalOptions: k,
-        setIsOpenModal: E
+        popupPosition: f,
+        modalOptions: I,
+        setIsOpenModal: q
       }
     ),
-    w && q && /* @__PURE__ */ t.jsx(At, { ...q }),
+    C && O && /* @__PURE__ */ t.jsx(Mt, { ...O }),
     /* @__PURE__ */ t.jsxs("div", { className: z.products, children: [
       d && /* @__PURE__ */ t.jsx("h5", { className: z.subtitle, children: d }),
       c ? /* @__PURE__ */ t.jsx(
-        Nt,
+        $t,
         {
           sensors: G,
           onDragEnd: K,
           children: /* @__PURE__ */ t.jsx(
-            wt,
+            Nt,
             {
               items: s.map((j) => j.id),
-              strategy: Ct,
+              strategy: wt,
               children: s.map((j) => lt(j))
             }
           )
         }
       ) : s.map((j) => lt(j)),
-      m && /* @__PURE__ */ t.jsx(
+      h && /* @__PURE__ */ t.jsx(
         "div",
         {
           style: {
@@ -1396,36 +1396,36 @@ const da = (r) => {
             justifyContent: "center"
           },
           children: /* @__PURE__ */ t.jsx(
-            ct,
+            Z,
             {
               withoutHover: !0,
               className: z.button,
               size: "s",
               onClick: () => {
                 const j = [...s];
-                let O = null;
+                let M = null;
                 if (u) {
                   for (let _ = 0; _ < u.length; _++)
-                    if (!s.find((I) => I.name === u[_])) {
-                      O = u[_];
+                    if (!s.find((k) => k.name === u[_])) {
+                      M = u[_];
                       break;
                     }
                 }
-                h === "select" && u ? j.push({
-                  name: O || u[0],
+                m === "select" && u ? j.push({
+                  name: M || u[0],
                   id: _t(),
-                  ...L,
+                  ...D,
                   maxSymbols: 100
                   // пример значения
-                }) : h === "input" ? j.push({
+                }) : m === "input" ? j.push({
                   name: "",
                   id: _t(),
-                  ...L,
+                  ...D,
                   maxSymbols: 100
                 }) : j.push({
                   name: `Image ${s.length + 1}`,
                   id: _t(),
-                  ...L,
+                  ...D,
                   maxSymbols: 100
                 }), i(j);
               },
@@ -1435,7 +1435,7 @@ const da = (r) => {
               children: /* @__PURE__ */ t.jsxs("div", { className: z.addButton, children: [
                 /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
                 /* @__PURE__ */ t.jsx(
-                  b,
+                  v,
                   {
                     name: "Plus",
                     width: 16,
@@ -1448,62 +1448,62 @@ const da = (r) => {
         }
       )
     ] }),
-    o !== void 0 && /* @__PURE__ */ t.jsx(bt, { items: o })
+    a !== void 0 && /* @__PURE__ */ t.jsx(vt, { items: a })
   ] });
-}, Ls = "_title_bn7sv_1", Rs = "_subtitle_bn7sv_5", Ms = "_header_bn7sv_12", Hs = "_text_bn7sv_13", zs = "_productsBlock_bn7sv_14", Fs = "_buttonsBlock_bn7sv_15", Vs = "_top_bn7sv_26", Us = "_itemsBlock_bn7sv_35", Ys = "_typeTexts_bn7sv_41", Gs = "_block_bn7sv_48", Ws = "_active_bn7sv_60", Xs = "_products_bn7sv_14", Js = "_product_bn7sv_14", Qs = "_button_bn7sv_15", Ks = "_image_bn7sv_90", Zs = "_info_bn7sv_97", tn = "_name_bn7sv_109", en = "_buttons_bn7sv_15", sn = "_modal_bn7sv_120", nn = "_other_bn7sv_139", on = "_options_bn7sv_145", an = "_closeIcon_bn7sv_153", at = {
-  title: Ls,
-  subtitle: Rs,
-  header: Ms,
-  text: Hs,
-  productsBlock: zs,
-  buttonsBlock: Fs,
-  top: Vs,
-  itemsBlock: Us,
-  typeTexts: Ys,
-  block: Gs,
-  active: Ws,
-  products: Xs,
-  product: Js,
-  button: Qs,
-  image: Ks,
-  info: Zs,
-  name: tn,
-  buttons: en,
-  modal: sn,
-  other: nn,
-  options: on,
-  closeIcon: an
-}, cn = p.forwardRef((r, a) => {
-  const { activeButton: e, setActiveButton: s, popupPosition: i } = r, [o, l] = p.useState(e.typesText), [d, n] = p.useState(e.destination), [c, v] = p.useState(e.page), [f, m] = p.useState(e.link || ""), [h, g] = p.useState(e.text || ""), [u, w] = p.useState(e.openInNewTab), { pages: q } = Ht();
+}, Rs = "_title_bn7sv_1", Hs = "_subtitle_bn7sv_5", zs = "_header_bn7sv_12", Fs = "_text_bn7sv_13", Vs = "_productsBlock_bn7sv_14", Us = "_buttonsBlock_bn7sv_15", Ys = "_top_bn7sv_26", Gs = "_itemsBlock_bn7sv_35", Xs = "_typeTexts_bn7sv_41", Ws = "_block_bn7sv_48", Js = "_active_bn7sv_60", Qs = "_products_bn7sv_14", Ks = "_product_bn7sv_14", Zs = "_button_bn7sv_15", tn = "_image_bn7sv_90", en = "_info_bn7sv_97", sn = "_name_bn7sv_109", nn = "_buttons_bn7sv_15", on = "_modal_bn7sv_120", an = "_other_bn7sv_139", cn = "_options_bn7sv_145", ln = "_closeIcon_bn7sv_153", ct = {
+  title: Rs,
+  subtitle: Hs,
+  header: zs,
+  text: Fs,
+  productsBlock: Vs,
+  buttonsBlock: Us,
+  top: Ys,
+  itemsBlock: Gs,
+  typeTexts: Xs,
+  block: Ws,
+  active: Js,
+  products: Qs,
+  product: Ks,
+  button: Zs,
+  image: tn,
+  info: en,
+  name: sn,
+  buttons: nn,
+  modal: on,
+  other: an,
+  options: cn,
+  closeIcon: ln
+}, rn = p.forwardRef((r, o) => {
+  const { activeButton: e, setActiveButton: s, popupPosition: i } = r, [a, l] = p.useState(e.typesText), [d, n] = p.useState(e.destination), [c, b] = p.useState(e.page), [g, h] = p.useState(e.link || ""), [m, x] = p.useState(e.text || ""), [u, C] = p.useState(e.openInNewTab), { pages: O } = Ft();
   return p.useEffect(() => {
     s({
       ...e,
       ...{
-        text: h,
-        link: f,
+        text: m,
+        link: g,
         destination: d,
-        typesText: o,
+        typesText: a,
         page: c,
         openInNewTab: u
       }
     });
-  }, [o, d, f, h, c, u]), /* @__PURE__ */ t.jsxs(
+  }, [a, d, g, m, c, u]), /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: at.modal,
-      onClick: (k) => {
-        k.stopPropagation();
+      className: ct.modal,
+      onClick: (I) => {
+        I.stopPropagation();
       },
       style: {
         top: `${i.top}px`,
         left: `${i.left}px`
       },
-      ref: a,
+      ref: o,
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: at.top, children: [
-          /* @__PURE__ */ t.jsx("h3", { className: at.title, children: e.type }),
-          /* @__PURE__ */ t.jsx("div", { className: at.closeIcon, children: /* @__PURE__ */ t.jsx(
-            b,
+        /* @__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(
+            v,
             {
               name: "X",
               height: 20,
@@ -1513,46 +1513,46 @@ const da = (r) => {
             }
           ) })
         ] }),
-        /* @__PURE__ */ t.jsxs("div", { className: at.options, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: ct.options, children: [
           /* @__PURE__ */ t.jsx(
-            st,
+            nt,
             {
               label: "Destination",
-              onChange: (k) => n(k),
-              options: ["Go to Page", "Open Link"].filter((k) => k !== d),
+              onChange: (I) => n(I),
+              options: ["Go to Page", "Open Link"].filter((I) => I !== d),
               value: d
             }
           ),
           d === "Go to Page" ? /* @__PURE__ */ t.jsx(
-            st,
+            nt,
             {
               label: "Go to",
-              onChange: (k) => v(k),
-              options: q ? Object.values(q).filter((k) => k.name !== c).map((k) => k.name) : [],
+              onChange: (I) => b(I),
+              options: O ? Object.values(O).filter((I) => I.name !== c).map((I) => I.name) : [],
               value: c
             }
           ) : /* @__PURE__ */ t.jsx(
-            W,
+            X,
             {
-              onChange: (k) => m(k),
-              value: f,
+              onChange: (I) => h(I),
+              value: g,
               placeholder: "https://",
               label: "Link"
             }
           ),
           /* @__PURE__ */ t.jsx(
-            Z,
+            tt,
             {
               current: e.openInNewTab,
               label: "Open in new tab",
-              onChange: (k) => w(k)
+              onChange: (I) => C(I)
             }
           ),
           /* @__PURE__ */ t.jsx(
             Ot,
             {
-              onChange: (k) => g(k),
-              value: h,
+              onChange: (I) => x(I),
+              value: m,
               label: "Text",
               maxLength: 150
             }
@@ -1560,7 +1560,7 @@ const da = (r) => {
           /* @__PURE__ */ t.jsx(
             Lt,
             {
-              typesText: o,
+              typesText: a,
               setTypesText: l
             }
           )
@@ -1568,106 +1568,106 @@ const da = (r) => {
       ]
     }
   );
-}), ln = "_subtitle_jql1y_1", rn = "_header_jql1y_8", dn = "_text_jql1y_9", un = "_productsBlock_jql1y_10", _n = "_buttonsBlock_jql1y_11", hn = "_top_jql1y_23", mn = "_itemsBlock_jql1y_32", pn = "_typeTexts_jql1y_38", gn = "_block_jql1y_45", fn = "_active_jql1y_58", xn = "_products_jql1y_10", vn = "_product_jql1y_10", bn = "_button_jql1y_11", jn = "_image_jql1y_88", yn = "_info_jql1y_95", kn = "_name_jql1y_107", In = "_buttons_jql1y_11", $n = "_modal_jql1y_118", Nn = "_other_jql1y_138", wn = "_options_jql1y_144", Cn = "_addButton_jql1y_150", Bn = "_deleteButton_jql1y_165", nt = {
-  subtitle: ln,
-  header: rn,
-  text: dn,
-  productsBlock: un,
-  buttonsBlock: _n,
-  top: hn,
-  itemsBlock: mn,
-  typeTexts: pn,
-  block: gn,
-  active: fn,
-  products: xn,
-  product: vn,
-  button: bn,
-  image: jn,
-  info: yn,
-  name: kn,
-  buttons: In,
-  modal: $n,
-  other: Nn,
-  options: wn,
-  addButton: Cn,
-  deleteButton: Bn
-}, Sn = (r) => {
-  const { buttons: a, setButtons: e, deletable: s = !0, addable: i = !0 } = r, [o, l] = p.useState(null), [d, n] = p.useState({
+}), dn = "_subtitle_jql1y_1", un = "_header_jql1y_8", _n = "_text_jql1y_9", mn = "_productsBlock_jql1y_10", hn = "_buttonsBlock_jql1y_11", pn = "_top_jql1y_23", xn = "_itemsBlock_jql1y_32", gn = "_typeTexts_jql1y_38", fn = "_block_jql1y_45", bn = "_active_jql1y_58", vn = "_products_jql1y_10", jn = "_product_jql1y_10", yn = "_button_jql1y_11", In = "_image_jql1y_88", kn = "_info_jql1y_95", $n = "_name_jql1y_107", Nn = "_buttons_jql1y_11", wn = "_modal_jql1y_118", Cn = "_other_jql1y_138", Bn = "_options_jql1y_144", Sn = "_addButton_jql1y_150", Tn = "_deleteButton_jql1y_165", it = {
+  subtitle: dn,
+  header: un,
+  text: _n,
+  productsBlock: mn,
+  buttonsBlock: hn,
+  top: pn,
+  itemsBlock: xn,
+  typeTexts: gn,
+  block: fn,
+  active: bn,
+  products: vn,
+  product: jn,
+  button: yn,
+  image: In,
+  info: kn,
+  name: $n,
+  buttons: Nn,
+  modal: wn,
+  other: Cn,
+  options: Bn,
+  addButton: Sn,
+  deleteButton: Tn
+}, Pn = (r) => {
+  const { buttons: o, setButtons: e, deletable: s = !0, addable: i = !0 } = r, [a, l] = p.useState(null), [d, n] = p.useState({
     top: 0,
     left: 0
-  }), [c, v] = p.useState(null), f = p.useRef(null);
+  }), [c, b] = p.useState(null), g = p.useRef(null);
   p.useEffect(() => {
-    const h = () => {
+    const m = () => {
       l(null);
     };
-    return document.body.addEventListener("click", h), l(null), () => {
-      l(null), document.body.removeEventListener("click", h);
+    return document.body.addEventListener("click", m), l(null), () => {
+      l(null), document.body.removeEventListener("click", m);
     };
   }, []), p.useEffect(() => {
-    if (o) {
-      const h = [...a].map((g) => g.id === o.id ? o : g);
-      e(h);
+    if (a) {
+      const m = [...o].map((x) => x.id === a.id ? a : x);
+      e(m);
     }
-  }, [o]), p.useEffect(() => {
-    if (f.current && c) {
-      const h = f.current.getBoundingClientRect().height, g = window.innerHeight;
+  }, [a]), p.useEffect(() => {
+    if (g.current && c) {
+      const m = g.current.getBoundingClientRect().height, x = window.innerHeight;
       let u = c.top;
-      u + h > g + window.scrollY - 200 && (u = g + window.scrollY - h - 200), u < 0 && (u = 10), n({
+      u + m > x + window.scrollY - 200 && (u = x + window.scrollY - m - 200), u < 0 && (u = 10), n({
         top: u,
         left: c.left
       });
     }
-  }, [f.current, c]);
-  const m = (h, g) => {
-    h.stopPropagation();
-    const u = h.target.getBoundingClientRect();
-    v({
+  }, [g.current, c]);
+  const h = (m, x) => {
+    m.stopPropagation();
+    const u = m.target.getBoundingClientRect();
+    b({
       top: u.top + window.scrollY,
       left: u.left - 30
-    }), l(g);
+    }), l(x);
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: nt.products, children: [
-    /* @__PURE__ */ t.jsx("h5", { className: nt.subtitle, children: "Button Type" }),
-    a.map((h) => /* @__PURE__ */ t.jsxs(
+  return /* @__PURE__ */ t.jsxs("div", { className: it.products, children: [
+    /* @__PURE__ */ t.jsx("h5", { className: it.subtitle, children: "Button Type" }),
+    o.map((m) => /* @__PURE__ */ t.jsxs(
       "div",
       {
-        className: nt.product,
+        className: it.product,
         children: [
           /* @__PURE__ */ t.jsx(
-            st,
+            nt,
             {
-              onChange: (g) => {
-                const w = [...a].map((q) => q.id === h.id ? {
-                  ...h,
-                  type: g
-                } : q);
-                e(w);
+              onChange: (x) => {
+                const C = [...o].map((O) => O.id === m.id ? {
+                  ...m,
+                  type: x
+                } : O);
+                e(C);
               },
-              value: h.type,
+              value: m.type,
               options: ["Primary", "Secondary", "Tertiary"]
             }
           ),
-          /* @__PURE__ */ t.jsxs("div", { className: nt.buttons, children: [
-            /* @__PURE__ */ t.jsx("div", { className: nt.deleteButton, children: /* @__PURE__ */ t.jsx(
-              b,
+          /* @__PURE__ */ t.jsxs("div", { className: it.buttons, children: [
+            /* @__PURE__ */ t.jsx("div", { className: it.deleteButton, children: /* @__PURE__ */ t.jsx(
+              v,
               {
                 name: "Sliders",
                 hoverable: !0,
                 width: 20,
                 height: 20,
-                onClick: (g) => {
-                  m(g, h);
+                onClick: (x) => {
+                  h(x, m);
                 }
               }
             ) }),
-            s && /* @__PURE__ */ t.jsx("div", { className: nt.deleteButton, children: /* @__PURE__ */ t.jsx(
-              b,
+            s && /* @__PURE__ */ t.jsx("div", { className: it.deleteButton, children: /* @__PURE__ */ t.jsx(
+              v,
               {
                 name: "Trash",
                 hoverable: !0,
                 onClick: () => {
-                  const g = a.filter((u) => u.id !== h.id);
-                  e(g);
+                  const x = o.filter((u) => u.id !== m.id);
+                  e(x);
                 },
                 width: 20,
                 height: 20,
@@ -1677,13 +1677,13 @@ const da = (r) => {
           ] })
         ]
       },
-      h.id
+      m.id
     )),
-    o && /* @__PURE__ */ t.jsx(
-      cn,
+    a && /* @__PURE__ */ t.jsx(
+      rn,
       {
-        ref: f,
-        activeButton: o,
+        ref: g,
+        activeButton: a,
         setActiveButton: l,
         popupPosition: d
       }
@@ -1697,14 +1697,14 @@ const da = (r) => {
           justifyContent: "center"
         },
         children: /* @__PURE__ */ t.jsx(
-          ct,
+          Z,
           {
             withoutHover: !0,
-            className: nt.button,
+            className: it.button,
             size: "s",
             onClick: () => {
-              const h = [...a];
-              h.push({
+              const m = [...o];
+              m.push({
                 type: "Primary",
                 id: _t(),
                 typesText: [],
@@ -1712,15 +1712,15 @@ const da = (r) => {
                 text: "Button Name",
                 page: "home",
                 openInNewTab: !0
-              }), e(h);
+              }), e(m);
             },
             style: {
               width: "fit-content"
             },
-            children: /* @__PURE__ */ t.jsxs("div", { className: nt.addButton, children: [
+            children: /* @__PURE__ */ t.jsxs("div", { className: it.addButton, children: [
               /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
               /* @__PURE__ */ t.jsx(
-                b,
+                v,
                 {
                   name: "Plus",
                   width: 16,
@@ -1733,53 +1733,53 @@ const da = (r) => {
       }
     )
   ] });
-}, ua = (r) => {
-  const { isActiveButtons: a, setIsActiveButtons: e, buttons: s, setButtons: i } = r;
-  return /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsxs("div", { className: at.buttonsBlock, children: [
-    /* @__PURE__ */ t.jsxs("div", { className: at.top, children: [
-      /* @__PURE__ */ t.jsx("h3", { className: at.title, children: "Buttons" }),
+}, va = (r) => {
+  const { isActiveButtons: o, setIsActiveButtons: e, buttons: s, setButtons: i } = r;
+  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" }),
       /* @__PURE__ */ t.jsx(
-        Z,
+        tt,
         {
-          current: a,
-          onChange: (o) => e(o)
+          current: o,
+          onChange: (a) => e(a)
         }
       )
     ] }),
     /* @__PURE__ */ t.jsx(
-      Sn,
+      Pn,
       {
         buttons: s,
         setButtons: i
       }
     )
   ] }) });
-}, Tn = "_wrapper_m18qi_1", Pn = "_subtitle_m18qi_7", An = "_content_m18qi_14", On = "_range_m18qi_22", qn = "_track_m18qi_27", En = "_progress_m18qi_36", Dn = "_dots_m18qi_46", Ln = "_dot_m18qi_46", Rn = "_active_m18qi_65", Mn = "_input_m18qi_77", Hn = "_countBlock_m18qi_91", zn = "_count_m18qi_91", Fn = "_controls_m18qi_107", Vn = "_button_m18qi_113", Y = {
-  wrapper: Tn,
-  subtitle: Pn,
-  content: An,
-  range: On,
-  track: qn,
-  progress: En,
-  dots: Dn,
-  dot: Ln,
-  active: Rn,
-  input: Mn,
-  countBlock: Hn,
-  count: zn,
-  controls: Fn,
-  button: Vn
-}, At = (r) => {
-  const { label: a, min: e = 1, max: s = 4, step: i = 1, count: o, setCount: l } = r, [d, n] = p.useState(!1), c = Array.from({ length: (s - e) / i + 1 }), v = (o - e) / (s - e) * 100, f = () => {
-    o < s && l(o + i);
-  }, m = () => {
-    o > e && l(o - i);
-  }, h = (g) => {
-    const u = e + g * i;
+}, An = "_wrapper_m18qi_1", Mn = "_subtitle_m18qi_7", On = "_content_m18qi_14", qn = "_range_m18qi_22", En = "_track_m18qi_27", Dn = "_progress_m18qi_36", Ln = "_dots_m18qi_46", Rn = "_dot_m18qi_46", Hn = "_active_m18qi_65", zn = "_input_m18qi_77", Fn = "_countBlock_m18qi_91", Vn = "_count_m18qi_91", Un = "_controls_m18qi_107", Yn = "_button_m18qi_113", Y = {
+  wrapper: An,
+  subtitle: Mn,
+  content: On,
+  range: qn,
+  track: En,
+  progress: Dn,
+  dots: Ln,
+  dot: Rn,
+  active: Hn,
+  input: zn,
+  countBlock: Fn,
+  count: Vn,
+  controls: Un,
+  button: Yn
+}, Mt = (r) => {
+  const { label: o, min: e = 1, max: s = 4, step: i = 1, count: a, setCount: l } = r, [d, n] = p.useState(!1), c = Array.from({ length: (s - e) / i + 1 }), b = (a - e) / (s - e) * 100, g = () => {
+    a < s && l(a + i);
+  }, h = () => {
+    a > e && l(a - i);
+  }, m = (x) => {
+    const u = e + x * i;
     l(u);
   };
   return /* @__PURE__ */ t.jsxs("div", { className: Y.wrapper, children: [
-    a && /* @__PURE__ */ t.jsx("h5", { className: Y.subtitle, children: a }),
+    o && /* @__PURE__ */ t.jsx("h5", { className: Y.subtitle, children: o }),
     /* @__PURE__ */ t.jsxs("div", { className: Y.content, children: [
       /* @__PURE__ */ t.jsxs("div", { className: Y.range, children: [
         /* @__PURE__ */ t.jsx("div", { className: Y.track }),
@@ -1787,18 +1787,18 @@ const da = (r) => {
           "div",
           {
             className: Y.progress,
-            style: { width: `${v}%` }
+            style: { width: `${b}%` }
           }
         ),
-        /* @__PURE__ */ t.jsx("div", { className: Y.dots, children: c.map((g, u) => {
-          const w = u <= (o - e) / i;
+        /* @__PURE__ */ t.jsx("div", { className: Y.dots, children: c.map((x, u) => {
+          const C = u <= (a - e) / i;
           return /* @__PURE__ */ t.jsx(
             "button",
             {
-              onClick: () => h(u),
+              onClick: () => m(u),
               className: F(Y.dot, {
-                [Y.active]: w,
-                [Y.inactive]: !w,
+                [Y.active]: C,
+                [Y.inactive]: !C,
                 [Y.dragging]: d
               }),
               "aria-label": `Set value to ${e + u * i}`
@@ -1813,8 +1813,8 @@ const da = (r) => {
             min: e,
             max: s,
             step: i,
-            value: o,
-            onChange: (g) => l(Number(g.target.value)),
+            value: a,
+            onChange: (x) => l(Number(x.target.value)),
             onMouseDown: () => n(!0),
             onMouseUp: () => n(!1),
             onTouchStart: () => n(!0),
@@ -1825,29 +1825,29 @@ const da = (r) => {
       ] }),
       /* @__PURE__ */ t.jsxs("div", { className: Y.countBlock, children: [
         /* @__PURE__ */ t.jsx(
-          W,
+          X,
           {
             type: "number",
             min: e,
             max: s,
             paddingless: !0,
-            onChange: (g) => {
-              const u = Number(g);
+            onChange: (x) => {
+              const u = Number(x);
               u > s ? l(s) : u < e ? l(e) : l(u);
             },
-            value: String(o)
+            value: String(a)
           }
         ),
         /* @__PURE__ */ t.jsxs("div", { className: Y.controls, children: [
           /* @__PURE__ */ t.jsx(
             "button",
             {
-              onClick: f,
-              disabled: o >= s,
+              onClick: g,
+              disabled: a >= s,
               className: Y.button,
               "aria-label": "Increment count",
               children: /* @__PURE__ */ t.jsx(
-                b,
+                v,
                 {
                   name: "CaretUp",
                   width: 15,
@@ -1859,12 +1859,12 @@ const da = (r) => {
           /* @__PURE__ */ t.jsx(
             "button",
             {
-              onClick: m,
-              disabled: o <= e,
+              onClick: h,
+              disabled: a <= e,
               className: Y.button,
               "aria-label": "Decrement count",
               children: /* @__PURE__ */ t.jsx(
-                b,
+                v,
                 {
                   name: "CaretDown",
                   width: 15,
@@ -1877,32 +1877,32 @@ const da = (r) => {
       ] })
     ] })
   ] });
-}, Un = "_title_12elg_1", Yn = "_subtitle_12elg_5", Gn = "_header_12elg_12", Wn = "_text_12elg_13", Xn = "_productsBlock_12elg_14", Jn = "_top_12elg_26", Qn = "_itemsBlock_12elg_35", Kn = "_typeTexts_12elg_41", Zn = "_block_12elg_48", ti = "_active_12elg_61", ei = "_products_12elg_14", si = "_product_12elg_14", ni = "_button_12elg_80", ii = "_image_12elg_91", oi = "_info_12elg_98", ai = "_name_12elg_110", ci = "_buttons_12elg_114", li = "_modal_12elg_121", ri = "_link_12elg_141", di = "_modalOptions_12elg_147", ui = "_addButton_12elg_159", _i = "_deleteButton_12elg_174", hi = "_closeIcon_12elg_186", V = {
-  title: Un,
-  subtitle: Yn,
-  header: Gn,
-  text: Wn,
-  productsBlock: Xn,
-  top: Jn,
-  itemsBlock: Qn,
-  typeTexts: Kn,
-  block: Zn,
-  active: ti,
-  products: ei,
-  product: si,
-  button: ni,
-  image: ii,
-  info: oi,
-  name: ai,
-  buttons: ci,
-  modal: li,
-  link: ri,
-  modalOptions: di,
-  addButton: ui,
-  deleteButton: _i,
-  closeIcon: hi
-}, mi = (r) => {
-  const { activeItem: a, setActiveItem: e, popupPosition: s, setIsOpenModal: i, itemsOptions: o } = r, l = o.find((n) => n.id === a.listingId);
+}, Gn = "_title_ix5ax_1", Xn = "_subtitle_ix5ax_5", Wn = "_header_ix5ax_12", Jn = "_text_ix5ax_13", Qn = "_productsBlock_ix5ax_14", Kn = "_top_ix5ax_26", Zn = "_itemsBlock_ix5ax_35", ti = "_typeTexts_ix5ax_41", ei = "_block_ix5ax_48", si = "_active_ix5ax_61", ni = "_products_ix5ax_14", ii = "_product_ix5ax_14", oi = "_button_ix5ax_80", ai = "_image_ix5ax_91", ci = "_info_ix5ax_98", li = "_name_ix5ax_110", ri = "_buttons_ix5ax_114", di = "_modal_ix5ax_121", ui = "_link_ix5ax_141", _i = "_modalOptions_ix5ax_147", mi = "_addButton_ix5ax_160", hi = "_deleteButton_ix5ax_175", pi = "_closeIcon_ix5ax_187", V = {
+  title: Gn,
+  subtitle: Xn,
+  header: Wn,
+  text: Jn,
+  productsBlock: Qn,
+  top: Kn,
+  itemsBlock: Zn,
+  typeTexts: ti,
+  block: ei,
+  active: si,
+  products: ni,
+  product: ii,
+  button: oi,
+  image: ai,
+  info: ci,
+  name: li,
+  buttons: ri,
+  modal: di,
+  link: ui,
+  modalOptions: _i,
+  addButton: mi,
+  deleteButton: hi,
+  closeIcon: pi
+}, xi = (r) => {
+  const { activeItem: o, setActiveItem: e, popupPosition: s, setIsOpenModal: i, itemsOptions: a } = r, l = a.find((n) => n.id === o.listingId);
   if (!l) return null;
   function d(n, c) {
     return n.length > c ? `${n.slice(0, c)}...` : n;
@@ -1922,7 +1922,7 @@ const da = (r) => {
         /* @__PURE__ */ t.jsxs("div", { className: V.top, children: [
           /* @__PURE__ */ t.jsx("h3", { children: d(l.productData.name, 20) }),
           /* @__PURE__ */ t.jsx("div", { className: V.closeIcon, children: /* @__PURE__ */ t.jsx(
-            b,
+            v,
             {
               name: "X",
               height: 20,
@@ -1940,7 +1940,7 @@ const da = (r) => {
             activeImage: l.productData.images.length > 0 ? l.productData.images[0].cfId : void 0,
             onChange: (n) => {
               const c = {
-                ...a,
+                ...o,
                 image: n[0]
               };
               e(c);
@@ -1951,17 +1951,17 @@ const da = (r) => {
     }
   );
 };
-function pi(r) {
-  const { product: a, children: e } = r, { attributes: s, listeners: i, setNodeRef: o, transform: l, transition: d, isDragging: n } = St({
-    id: String(a.listingId)
+function gi(r) {
+  const { product: o, children: e } = r, { attributes: s, listeners: i, setNodeRef: a, transform: l, transition: d, isDragging: n } = Bt({
+    id: String(o.listingId)
   }), c = {
-    transform: Tt.Transform.toString(l),
+    transform: St.Transform.toString(l),
     transition: d
   };
   return /* @__PURE__ */ t.jsx(
     "div",
     {
-      ref: o,
+      ref: a,
       style: c,
       className: `${V.product} ${n ? V.dragging : ""}`,
       ...s,
@@ -1970,29 +1970,29 @@ function pi(r) {
     }
   );
 }
-const _a = (r) => {
+const ja = (r) => {
   const {
-    isActiveItems: a,
+    isActiveItems: o,
     setIsActiveItems: e,
     items: s,
     setItems: i,
-    other: o,
+    other: a,
     title: l,
     subtitle: d,
     editable: n = !0,
     draggable: c = !1,
-    withImage: v = !1,
-    deletable: f = !0,
-    addable: m = !0,
-    itemsType: h,
-    itemsOptions: g
-  } = r, [u, w] = p.useState(
+    withImage: b = !1,
+    deletable: g = !0,
+    addable: h = !0,
+    itemsType: m,
+    itemsOptions: x
+  } = r, [u, C] = p.useState(
     null
-  ), [q, k] = p.useState({
+  ), [O, I] = p.useState({
     top: 0,
     left: 0
-  }), [L, B] = p.useState(!1), S = It(
-    $t(Bt, {
+  }), [D, B] = p.useState(!1), S = It(
+    kt(Ct, {
       activationConstraint: {
         distance: 5
       }
@@ -2000,10 +2000,10 @@ const _a = (r) => {
   );
   p.useEffect(() => {
     const y = () => {
-      w(null), B(!1);
+      C(null), B(!1);
     };
-    return document.body.addEventListener("click", y), w(null), B(!1), () => {
-      w(null), B(!1), document.body.removeEventListener("click", y);
+    return document.body.addEventListener("click", y), C(null), B(!1), () => {
+      C(null), B(!1), document.body.removeEventListener("click", y);
     };
   }, []), p.useEffect(() => {
     if (u) {
@@ -2011,17 +2011,17 @@ const _a = (r) => {
       i(y);
     }
   }, [u]);
-  const x = (y, $) => {
+  const f = (y, $) => {
     y.stopPropagation();
-    const E = y.target.getBoundingClientRect(), G = 100, A = window.innerHeight;
-    let H = E.top + window.scrollY;
-    H + G > A && (H = A - G - 20), B(!0), k({
+    const q = y.target.getBoundingClientRect(), G = 100, A = window.innerHeight;
+    let H = q.top + window.scrollY;
+    H + G > A && (H = A - G - 20), B(!0), I({
       top: H - 80,
-      left: E.left - 30
-    }), w($);
+      left: q.left - 30
+    }), C($);
   };
-  function D(y) {
-    if (v)
+  function E(y) {
+    if (b)
       return y ? /* @__PURE__ */ t.jsx(
         "img",
         {
@@ -2031,7 +2031,7 @@ const _a = (r) => {
           height: 16
         }
       ) : /* @__PURE__ */ t.jsx(
-        b,
+        v,
         {
           name: "Image",
           width: 16,
@@ -2040,21 +2040,21 @@ const _a = (r) => {
         }
       );
   }
-  const X = (y) => {
-    const { active: $, over: E } = y;
-    if (E && $.id !== E.id) {
-      const G = s.findIndex((H) => String(H.listingId) === $.id), A = s.findIndex((H) => String(H.listingId) === E.id);
+  const W = (y) => {
+    const { active: $, over: q } = y;
+    if (q && $.id !== q.id) {
+      const G = s.findIndex((H) => String(H.listingId) === $.id), A = s.findIndex((H) => String(H.listingId) === q.id);
       if (G !== -1 && A !== -1) {
         const H = [...s], [K] = H.splice(G, 1);
         H.splice(A, 0, K), i(H);
       }
     }
-  }, tt = (y, $) => {
-    const E = g.find((A) => y.listingId === A.id);
-    if (!E) return null;
+  }, et = (y, $) => {
+    const q = x.find((A) => y.listingId === A.id);
+    if (!q) return null;
     const G = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       c && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-        b,
+        v,
         {
           name: "DotsSixVertical",
           hoverable: !0,
@@ -2062,41 +2062,41 @@ const _a = (r) => {
           height: 20
         }
       ) }),
-      h === "select" && /* @__PURE__ */ t.jsx(
-        st,
+      m === "select" && /* @__PURE__ */ t.jsx(
+        nt,
         {
           onChange: (A) => {
-            const H = [...s], K = g.find((O) => O.productData.name === A);
+            const H = [...s], K = x.find((M) => M.productData.name === A);
             if (!K) return;
             const lt = {
               listingId: K.id,
               image: K.productData.images.length > 0 ? K.productData.images[0].cfId : ""
-            }, j = H.map((O) => O.listingId === y.listingId ? lt : O);
-            w(lt), i([...j]);
+            }, j = H.map((M) => M.listingId === y.listingId ? lt : M);
+            C(lt), i([...j]);
           },
-          value: E.productData.name,
+          value: q.productData.name,
           options: [
-            ...g.filter((A) => !s.find((H) => H.listingId === A.id)).map((A) => A.productData.name)
+            ...x.filter((A) => !s.find((H) => H.listingId === A.id)).map((A) => A.productData.name)
           ],
-          leftAddon: D(
-            y.image || E.productData.images.length > 0 && E.productData.images[0].cfId || ""
+          leftAddon: E(
+            y.image || q.productData.images.length > 0 && q.productData.images[0].cfId || ""
           )
         },
         $
       ),
       /* @__PURE__ */ t.jsxs("div", { className: V.buttons, children: [
         n && /* @__PURE__ */ t.jsx("div", { className: V.deleteButton, children: /* @__PURE__ */ t.jsx(
-          b,
+          v,
           {
             name: "Sliders",
             hoverable: !0,
             width: 20,
             height: 20,
-            onClick: (A) => x(A, y)
+            onClick: (A) => f(A, y)
           }
         ) }),
-        f && /* @__PURE__ */ t.jsx("div", { className: V.deleteButton, children: /* @__PURE__ */ t.jsx(
-          b,
+        g && /* @__PURE__ */ t.jsx("div", { className: V.deleteButton, children: /* @__PURE__ */ t.jsx(
+          v,
           {
             name: "Trash",
             hoverable: !0,
@@ -2109,7 +2109,7 @@ const _a = (r) => {
       ] })
     ] });
     return c ? /* @__PURE__ */ t.jsx(
-      pi,
+      gi,
       {
         product: y,
         children: G
@@ -2125,44 +2125,44 @@ const _a = (r) => {
     );
   };
   return /* @__PURE__ */ t.jsxs("div", { className: V.productsBlock, children: [
-    (l || a !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: V.top, children: [
+    (l || o !== 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(
-        Z,
+      o !== void 0 && /* @__PURE__ */ t.jsx(
+        tt,
         {
-          current: a,
+          current: o,
           onChange: (y) => e == null ? void 0 : e(y)
         }
       )
     ] }),
-    L && u && /* @__PURE__ */ t.jsx(
-      mi,
+    D && u && /* @__PURE__ */ t.jsx(
+      xi,
       {
         activeItem: u,
-        setActiveItem: w,
+        setActiveItem: C,
         setIsOpenModal: B,
-        popupPosition: q,
-        itemsOptions: g
+        popupPosition: O,
+        itemsOptions: x
       }
     ),
     /* @__PURE__ */ t.jsxs("div", { className: V.products, children: [
       d && /* @__PURE__ */ t.jsx("h5", { className: V.subtitle, children: d }),
       c ? /* @__PURE__ */ t.jsx(
-        Nt,
+        $t,
         {
           sensors: S,
-          onDragEnd: X,
+          onDragEnd: W,
           children: /* @__PURE__ */ t.jsx(
-            wt,
+            Nt,
             {
               items: s.map((y) => String(y.listingId)),
-              strategy: Ct,
-              children: s.map((y, $) => tt(y, $))
+              strategy: wt,
+              children: s.map((y, $) => et(y, $))
             }
           )
         }
-      ) : s.map((y, $) => tt(y, $)),
-      m && /* @__PURE__ */ t.jsx(
+      ) : s.map((y, $) => et(y, $)),
+      h && /* @__PURE__ */ t.jsx(
         "div",
         {
           style: {
@@ -2171,31 +2171,31 @@ const _a = (r) => {
             justifyContent: "center"
           },
           children: /* @__PURE__ */ t.jsx(
-            ct,
+            Z,
             {
               withoutHover: !0,
               className: V.button,
               size: "s",
               onClick: () => {
                 const y = [...s];
-                for (let $ = 0; $ < g.length; $++)
-                  if (!s.find((E) => E.listingId === g[$].id)) {
+                for (let $ = 0; $ < x.length; $++)
+                  if (!s.find((q) => q.listingId === x[$].id)) {
                     y.push({
-                      listingId: g[$].id,
-                      image: g[$].productData.images.length > 0 ? g[$].productData.images[0].cfId : ""
+                      listingId: x[$].id,
+                      image: x[$].productData.images.length > 0 ? x[$].productData.images[0].cfId : ""
                     });
                     break;
                   }
                 i(y);
               },
-              disabled: s.length === g.length,
+              disabled: s.length === x.length,
               style: {
                 width: "fit-content"
               },
               children: /* @__PURE__ */ t.jsxs("div", { className: V.addButton, children: [
                 /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
                 /* @__PURE__ */ t.jsx(
-                  b,
+                  v,
                   {
                     name: "Plus",
                     width: 16,
@@ -2208,106 +2208,106 @@ const _a = (r) => {
         }
       )
     ] }),
-    o !== void 0 && /* @__PURE__ */ t.jsx(bt, { items: o })
+    a !== void 0 && /* @__PURE__ */ t.jsx(vt, { items: a })
   ] });
-}, gi = "_options_d1lk6_1", fi = "_price_d1lk6_12", xi = "_oldPrice_d1lk6_19", vi = "_newPrice_d1lk6_27", bi = "_animate_d1lk6_34", ji = "_appearAndBounce_d1lk6_1", yi = "_meta_d1lk6_52", ki = "_info_d1lk6_58", Ii = "_infoRight_d1lk6_66", $i = "_buttons_d1lk6_73", Ni = "_variants_d1lk6_80", wi = "_variant_d1lk6_80", Ci = "_stock_d1lk6_98", Bi = "_variantInfo_d1lk6_105", Si = "_quantity_d1lk6_111", Ti = "_count_d1lk6_118", Pi = "_focused_d1lk6_135", Ai = "_button_d1lk6_73", Oi = "_activeVariant_d1lk6_161", qi = "_chargeTypes_d1lk6_165", Ei = "_charge_d1lk6_165", Di = "_chargeActive_d1lk6_190", Li = "_title_d1lk6_198", N = {
-  options: gi,
-  price: fi,
-  oldPrice: xi,
-  newPrice: vi,
-  animate: bi,
-  appearAndBounce: ji,
-  meta: yi,
-  info: ki,
-  infoRight: Ii,
-  buttons: $i,
-  variants: Ni,
-  variant: wi,
-  stock: Ci,
-  variantInfo: Bi,
-  quantity: Si,
-  count: Ti,
-  focused: Pi,
-  button: Ai,
-  activeVariant: Oi,
-  chargeTypes: qi,
-  charge: Ei,
-  chargeActive: Di,
-  title: Li
+}, fi = "_options_d1lk6_1", bi = "_price_d1lk6_12", vi = "_oldPrice_d1lk6_19", ji = "_newPrice_d1lk6_27", yi = "_animate_d1lk6_34", Ii = "_appearAndBounce_d1lk6_1", ki = "_meta_d1lk6_52", $i = "_info_d1lk6_58", Ni = "_infoRight_d1lk6_66", wi = "_buttons_d1lk6_73", Ci = "_variants_d1lk6_80", Bi = "_variant_d1lk6_80", Si = "_stock_d1lk6_98", Ti = "_variantInfo_d1lk6_105", Pi = "_quantity_d1lk6_111", Ai = "_count_d1lk6_118", Mi = "_focused_d1lk6_135", Oi = "_button_d1lk6_73", qi = "_activeVariant_d1lk6_161", Ei = "_chargeTypes_d1lk6_165", Di = "_charge_d1lk6_165", Li = "_chargeActive_d1lk6_190", Ri = "_title_d1lk6_198", N = {
+  options: fi,
+  price: bi,
+  oldPrice: vi,
+  newPrice: ji,
+  animate: yi,
+  appearAndBounce: Ii,
+  meta: ki,
+  info: $i,
+  infoRight: Ni,
+  buttons: wi,
+  variants: Ci,
+  variant: Bi,
+  stock: Si,
+  variantInfo: Ti,
+  quantity: Pi,
+  count: Ai,
+  focused: Mi,
+  button: Oi,
+  activeVariant: qi,
+  chargeTypes: Ei,
+  charge: Di,
+  chargeActive: Li,
+  title: Ri
 };
-var Mt = /* @__PURE__ */ ((r) => (r.ONE_TIME = "One-Time", r.RECURRING = "Subscribe & Save", r))(Mt || {});
-const ha = (r) => {
+var Ht = /* @__PURE__ */ ((r) => (r.ONE_TIME = "One-Time", r.RECURRING = "Subscribe & Save", r))(Ht || {});
+const ya = (r) => {
   var B, S;
-  const { variants: a } = r, [e, s] = p.useState(a[0]), [i, o] = p.useState(e.chargeTypes[0]), l = vt(), [d, n] = p.useState(1), [c, v] = p.useState(!1), { reset: f, addProductToCart: m, getProducts: h } = Pt(), [g, u] = p.useState(!1);
+  const { variants: o } = r, [e, s] = p.useState(o[0]), [i, a] = p.useState(e.chargeTypes[0]), l = Tt(), [d, n] = p.useState(1), [c, b] = p.useState(!1), { reset: g, addProductToCart: h, getProducts: m } = Pt(), [x, u] = p.useState(!1);
   p.useEffect(() => {
     u(!0);
-    const x = setTimeout(() => u(!1), 600);
-    return () => clearTimeout(x);
+    const f = setTimeout(() => u(!1), 600);
+    return () => clearTimeout(f);
   }, [d]);
-  async function w() {
-    await h(), await m({
+  async function C() {
+    await m(), await h({
       productId: r.id,
       productVariantId: e.id,
       quantity: d
     });
   }
-  function q() {
-    f(), w(), l("/checkout");
+  function O() {
+    g(), C(), l("/checkout");
   }
-  function k(x) {
-    if (x >= 864e5) {
-      const $ = Math.floor(x / 864e5);
+  function I(f) {
+    if (f >= 864e5) {
+      const $ = Math.floor(f / 864e5);
       return `${$} ${$ === 1 ? "day" : "days"}`;
-    } else if (x >= 36e5) {
-      const $ = Math.floor(x / 36e5);
+    } else if (f >= 36e5) {
+      const $ = Math.floor(f / 36e5);
       return `${$} ${$ === 1 ? "hour" : "hours"}`;
-    } else if (x >= 6e4) {
-      const $ = Math.floor(x / 6e4);
+    } else if (f >= 6e4) {
+      const $ = Math.floor(f / 6e4);
       return `${$} ${$ === 1 ? "minute" : "minutes"}`;
     } else {
-      const $ = Math.floor(x / 1e3);
+      const $ = Math.floor(f / 1e3);
       return `${$} ${$ === 1 ? "second" : "seconds"}`;
     }
   }
-  function L(x, D) {
-    return x.length > D ? x.slice(0, D) + "..." : x;
+  function D(f, E) {
+    return f.length > E ? f.slice(0, E) + "..." : f;
   }
   return /* @__PURE__ */ t.jsxs("div", { className: N.options, children: [
-    e.chargeTypes.length > 1 && /* @__PURE__ */ t.jsx("div", { className: N.chargeTypes, children: e.chargeTypes.map((x) => /* @__PURE__ */ t.jsx(
+    e.chargeTypes.length > 1 && /* @__PURE__ */ t.jsx("div", { className: N.chargeTypes, children: e.chargeTypes.map((f) => /* @__PURE__ */ t.jsx(
       "div",
       {
         className: F(N.charge, {
-          [N.chargeActive]: i === x
+          [N.chargeActive]: i === f
         }),
-        onClick: () => o(x),
-        children: Mt[x]
+        onClick: () => a(f),
+        children: Ht[f]
       },
-      x
+      f
     )) }),
-    /* @__PURE__ */ t.jsx("div", { className: N.variants, children: a.map((x) => {
-      var D;
+    /* @__PURE__ */ t.jsx("div", { className: N.variants, children: o.map((f) => {
+      var E;
       return /* @__PURE__ */ t.jsxs(
         "div",
         {
           className: F(N.variant, {
-            [N.activeVariant]: e.id === x.id
+            [N.activeVariant]: e.id === f.id
           }),
-          onClick: () => s(x),
+          onClick: () => s(f),
           children: [
             /* @__PURE__ */ t.jsxs("div", { className: N.variantInfo, children: [
-              /* @__PURE__ */ t.jsx("span", { className: N.title, children: L(x.name, 15) }),
+              /* @__PURE__ */ t.jsx("span", { className: N.title, children: D(f.name, 15) }),
               /* @__PURE__ */ t.jsxs("span", { children: [
                 "$",
-                i === "ONE_TIME" ? x.price.amount : x.subscriptionSettings ? x.subscriptionSettings.price.amount : "Price Not Found"
+                i === "ONE_TIME" ? f.price.amount : f.subscriptionSettings ? f.subscriptionSettings.price.amount : "Price Not Found"
               ] })
             ] }),
             /* @__PURE__ */ t.jsx("div", { children: i === "ONE_TIME" && /* @__PURE__ */ t.jsxs("span", { className: N.stock, children: [
-              ((D = x.quantity.restrictions) == null ? void 0 : D.max) || x.quantity.available || 0,
+              ((E = f.quantity.restrictions) == null ? void 0 : E.max) || f.quantity.available || 0,
               " in stock"
             ] }) })
           ]
         },
-        x.id
+        f.id
       );
     }) }),
     i === "ONE_TIME" && /* @__PURE__ */ t.jsxs("div", { className: N.quantity, children: [
@@ -2315,11 +2315,11 @@ const ha = (r) => {
         "button",
         {
           onClick: () => {
-            d > 1 ? n((x) => x - 1) : n(1);
+            d > 1 ? n((f) => f - 1) : n(1);
           },
           className: N.button,
           disabled: e.quantity.restrictions && d <= e.quantity.restrictions.min,
-          children: /* @__PURE__ */ t.jsx(b, { name: "Minus" })
+          children: /* @__PURE__ */ t.jsx(v, { name: "Minus" })
         }
       ),
       /* @__PURE__ */ t.jsx(
@@ -2328,14 +2328,14 @@ const ha = (r) => {
           className: F(N.count, {
             [N.focused]: c
           }),
-          onFocus: () => v(!0),
-          onBlur: () => v(!1),
+          onFocus: () => b(!0),
+          onBlur: () => b(!1),
           children: /* @__PURE__ */ t.jsx(
-            W,
+            X,
             {
               type: "number",
               value: String(d),
-              onChange: (x) => n(Number(x)),
+              onChange: (f) => n(Number(f)),
               max: ((B = e.quantity.restrictions) == null ? void 0 : B.max) || e.quantity.available || 1 / 0,
               min: ((S = e.quantity.restrictions) == null ? void 0 : S.min) || 0,
               style: {
@@ -2351,11 +2351,11 @@ const ha = (r) => {
         "button",
         {
           onClick: () => {
-            n((x) => x + 1);
+            n((f) => f + 1);
           },
           className: N.button,
           disabled: !!(e.quantity.restrictions && d >= e.quantity.restrictions.max || e.quantity.available && d >= e.quantity.available),
-          children: /* @__PURE__ */ t.jsx(b, { name: "Plus" })
+          children: /* @__PURE__ */ t.jsx(v, { name: "Plus" })
         }
       )
     ] }),
@@ -2364,7 +2364,7 @@ const ha = (r) => {
         /* @__PURE__ */ t.jsx("span", { children: "Delivery" }),
         /* @__PURE__ */ t.jsxs("div", { className: N.infoRight, children: [
           /* @__PURE__ */ t.jsx(
-            b,
+            v,
             {
               name: "Lightning",
               fill: "#FF3F19",
@@ -2372,13 +2372,13 @@ const ha = (r) => {
               height: 20
             }
           ),
-          /* @__PURE__ */ t.jsx("span", { children: !e.deliveryTime || e.deliveryTime === 0 ? "Instant" : k(e.deliveryTime) })
+          /* @__PURE__ */ t.jsx("span", { children: !e.deliveryTime || e.deliveryTime === 0 ? "Instant" : I(e.deliveryTime) })
         ] })
       ] }),
       /* @__PURE__ */ t.jsxs("div", { className: N.info, children: [
         /* @__PURE__ */ t.jsx("span", { children: "Price" }),
         /* @__PURE__ */ t.jsx("div", { className: N.infoRight, children: i === "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: F(N.newPrice, { [N.animate]: g }), children: [
+          /* @__PURE__ */ t.jsxs("span", { className: F(N.newPrice, { [N.animate]: x }), children: [
             "$ ",
             (e.price.amount || 0) * d
           ] }),
@@ -2386,11 +2386,11 @@ const ha = (r) => {
             "$ ",
             (e.compareAtPrice.amount || 0) * d
           ] })
-        ] }) : /* @__PURE__ */ t.jsxs("span", { className: F(N.newPrice, { [N.animate]: g }), children: [
+        ] }) : /* @__PURE__ */ t.jsxs("span", { className: F(N.newPrice, { [N.animate]: x }), children: [
           "$ ",
           (e.price.amount || 0) * d
         ] }) : 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: F(N.newPrice, { [N.animate]: g }), children: [
+          /* @__PURE__ */ t.jsxs("span", { className: F(N.newPrice, { [N.animate]: x }), children: [
             "$ ",
             e.subscriptionSettings.price.amount || 0
           ] }),
@@ -2398,7 +2398,7 @@ const ha = (r) => {
             "$ ",
             e.subscriptionSettings.compareAtPrice.amount || 0
           ] })
-        ] }) : e.subscriptionSettings && /* @__PURE__ */ t.jsxs("span", { className: F(N.newPrice, { [N.animate]: g }), children: [
+        ] }) : e.subscriptionSettings && /* @__PURE__ */ t.jsxs("span", { className: F(N.newPrice, { [N.animate]: x }), children: [
           "$ ",
           e.subscriptionSettings.price.amount || 0
         ] }) })
@@ -2406,326 +2406,310 @@ const ha = (r) => {
     ] }),
     /* @__PURE__ */ t.jsxs("div", { className: N.buttons, children: [
       /* @__PURE__ */ t.jsx(
-        ct,
+        Z,
         {
           type: "Primary",
-          onClick: () => q(),
+          onClick: () => O(),
           children: /* @__PURE__ */ t.jsx("span", { children: i === "ONE_TIME" ? "Buy Now" : "Subscribe Now" })
         }
       ),
       i === "ONE_TIME" && /* @__PURE__ */ t.jsx(
-        ct,
+        Z,
         {
           type: "Secondary",
-          onClick: () => w(),
+          onClick: () => C(),
           children: "Add to Cart"
         }
       )
     ] })
   ] });
-}, Ri = "_button_oyh2y_1", Mi = "_login_oyh2y_14", Hi = "_signUp_oyh2y_18", zi = "_buttons_oyh2y_23", Fi = "_modal_oyh2y_32", Vi = "_closing_oyh2y_61", Ui = "_info_oyh2y_85", Yi = "_top_oyh2y_92", Gi = "_title_oyh2y_103", Wi = "_clear_oyh2y_110", Xi = "_activeClear_oyh2y_117", Ji = "_count_oyh2y_121", Qi = "_cart_oyh2y_136", Ki = "_empty_oyh2y_144", Zi = "_product_oyh2y_170", to = "_products_oyh2y_179", eo = "_image_oyh2y_187", so = "_productInfo_oyh2y_193", no = "_content_oyh2y_200", io = "_name_oyh2y_206", oo = "_price_oyh2y_212", ao = "_productButtons_oyh2y_218", co = "_productButton_oyh2y_218", lo = "_productCount_oyh2y_238", ro = "_bottom_oyh2y_254", uo = "_subtotal_oyh2y_262", _o = "_block_oyh2y_270", ho = "_shoppingCount_oyh2y_277", mo = "_total_oyh2y_297", po = "_link_oyh2y_303", go = "_userInfo_oyh2y_310", C = {
-  button: Ri,
-  login: Mi,
-  signUp: Hi,
-  buttons: zi,
-  modal: Fi,
-  "slide-in-fade": "_slide-in-fade_oyh2y_1",
-  closing: Vi,
-  "slide-out-fade": "_slide-out-fade_oyh2y_1",
-  info: Ui,
-  top: Yi,
-  title: Gi,
-  clear: Wi,
-  activeClear: Xi,
-  count: Ji,
-  cart: Qi,
-  empty: Ki,
-  product: Zi,
-  products: to,
-  image: eo,
-  productInfo: so,
-  content: no,
-  name: io,
-  price: oo,
-  productButtons: ao,
-  productButton: co,
-  productCount: lo,
-  bottom: ro,
-  subtotal: uo,
-  block: _o,
-  shoppingCount: ho,
-  total: mo,
-  link: po,
-  userInfo: go
-}, fo = "_button_85085_1", xo = "_primary_85085_20", vo = "_primaryHovered_85085_30", bo = "_secondary_85085_34", jo = "_secondaryHovered_85085_44", yo = "_tertiary_85085_48", ko = "_tertiaryHovered_85085_58", Io = "_content_85085_62", it = {
-  button: fo,
-  primary: xo,
-  primaryHovered: vo,
-  secondary: bo,
-  secondaryHovered: jo,
-  tertiary: yo,
-  tertiaryHovered: ko,
-  content: Io
-}, kt = (r) => {
-  const { children: a, onClick: e, style: s, className: i, disabled: o = !1, type: l = "Primary" } = r, { themeSettings: d } = qt();
+}, Hi = "_button_1tdo3_1", zi = "_login_1tdo3_14", Fi = "_signUp_1tdo3_18", Vi = "_buttons_1tdo3_23", Ui = "_modal_1tdo3_32", Yi = "_closing_1tdo3_64", Gi = "_info_1tdo3_113", Xi = "_top_1tdo3_120", Wi = "_title_1tdo3_131", Ji = "_clear_1tdo3_138", Qi = "_activeClear_1tdo3_145", Ki = "_count_1tdo3_149", Zi = "_cart_1tdo3_164", to = "_empty_1tdo3_172", eo = "_product_1tdo3_198", so = "_products_1tdo3_207", no = "_image_1tdo3_215", io = "_productInfo_1tdo3_221", oo = "_content_1tdo3_228", ao = "_name_1tdo3_234", co = "_price_1tdo3_240", lo = "_productButtons_1tdo3_246", ro = "_productButton_1tdo3_246", uo = "_productCount_1tdo3_266", _o = "_bottom_1tdo3_282", mo = "_subtotal_1tdo3_290", ho = "_block_1tdo3_298", po = "_shoppingCount_1tdo3_305", xo = "_total_1tdo3_325", go = "_link_1tdo3_331", fo = "_userInfo_1tdo3_338", bo = "_pagesMobileModal_1tdo3_349", vo = "_pagesMobileModalContent_1tdo3_363", jo = "_pagesMobileModalHeader_1tdo3_369", yo = "_pagesMobileModalFooter_1tdo3_379", w = {
+  button: Hi,
+  login: zi,
+  signUp: Fi,
+  buttons: Vi,
+  modal: Ui,
+  "slide-in-fade": "_slide-in-fade_1tdo3_1",
+  "mobile-slide-in-fade": "_mobile-slide-in-fade_1tdo3_1",
+  closing: Yi,
+  "mobile-slide-out-fade": "_mobile-slide-out-fade_1tdo3_1",
+  "slide-out-fade": "_slide-out-fade_1tdo3_1",
+  info: Gi,
+  top: Xi,
+  title: Wi,
+  clear: Ji,
+  activeClear: Qi,
+  count: Ki,
+  cart: Zi,
+  empty: to,
+  product: eo,
+  products: so,
+  image: no,
+  productInfo: io,
+  content: oo,
+  name: ao,
+  price: co,
+  productButtons: lo,
+  productButton: ro,
+  productCount: uo,
+  bottom: _o,
+  subtotal: mo,
+  block: ho,
+  shoppingCount: po,
+  total: xo,
+  link: go,
+  userInfo: fo,
+  pagesMobileModal: bo,
+  pagesMobileModalContent: vo,
+  pagesMobileModalHeader: jo,
+  pagesMobileModalFooter: yo
+}, Io = "_button_85085_1", ko = "_primary_85085_20", $o = "_primaryHovered_85085_30", No = "_secondary_85085_34", wo = "_secondaryHovered_85085_44", Co = "_tertiary_85085_48", Bo = "_tertiaryHovered_85085_58", So = "_content_85085_62", ot = {
+  button: Io,
+  primary: ko,
+  primaryHovered: $o,
+  secondary: No,
+  secondaryHovered: wo,
+  tertiary: Co,
+  tertiaryHovered: Bo,
+  content: So
+}, mt = (r) => {
+  const { children: o, onClick: e, style: s, className: i, disabled: a = !1, type: l = "Primary" } = r, { themeSettings: d } = qt();
   return /* @__PURE__ */ t.jsx(
     "button",
     {
-      className: F(it.button, i, {
-        [it.primary]: l === "Primary",
-        [it.secondary]: l === "Secondary",
-        [it.tertiary]: l === "Tertiary",
-        [it.primaryHovered]: l === "Primary" && !o && d.buttons.primary.hover,
-        [it.secondaryHovered]: l === "Secondary" && !o && d.buttons.secondary.hover,
-        [it.tertiaryHovered]: l === "Tertiary" && !o && d.buttons.tertiary.hover
+      className: F(ot.button, i, {
+        [ot.primary]: l === "Primary",
+        [ot.secondary]: l === "Secondary",
+        [ot.tertiary]: l === "Tertiary",
+        [ot.primaryHovered]: l === "Primary" && !a && d.buttons.primary.hover,
+        [ot.secondaryHovered]: l === "Secondary" && !a && d.buttons.secondary.hover,
+        [ot.tertiaryHovered]: l === "Tertiary" && !a && d.buttons.tertiary.hover
       }),
       onClick: e,
       style: {
         ...s
       },
-      disabled: o,
-      children: l === "Tertiary" ? /* @__PURE__ */ t.jsxs("div", { className: it.content, children: [
+      disabled: a,
+      children: l === "Tertiary" ? /* @__PURE__ */ t.jsxs("div", { className: ot.content, children: [
+        o,
         /* @__PURE__ */ t.jsx(
-          b,
+          v,
           {
             name: "ArrowRight",
             fill: "#757575",
             width: 20,
             height: 20
           }
-        ),
-        a
-      ] }) : /* @__PURE__ */ t.jsx(t.Fragment, { children: a })
+        )
+      ] }) : /* @__PURE__ */ t.jsx(t.Fragment, { children: o })
     }
   );
 };
-class pt extends Error {
+class xt extends Error {
 }
-pt.prototype.name = "InvalidTokenError";
-function $o(r) {
-  return decodeURIComponent(atob(r).replace(/(.)/g, (a, e) => {
+xt.prototype.name = "InvalidTokenError";
+function To(r) {
+  return decodeURIComponent(atob(r).replace(/(.)/g, (o, e) => {
     let s = e.charCodeAt(0).toString(16).toUpperCase();
     return s.length < 2 && (s = "0" + s), "%" + s;
   }));
 }
-function No(r) {
-  let a = r.replace(/-/g, "+").replace(/_/g, "/");
-  switch (a.length % 4) {
+function Po(r) {
+  let o = r.replace(/-/g, "+").replace(/_/g, "/");
+  switch (o.length % 4) {
     case 0:
       break;
     case 2:
-      a += "==";
+      o += "==";
       break;
     case 3:
-      a += "=";
+      o += "=";
       break;
     default:
       throw new Error("base64 string is not of the correct length");
   }
   try {
-    return $o(a);
+    return To(o);
   } catch {
-    return atob(a);
+    return atob(o);
   }
 }
-function wo(r, a) {
+function Ao(r, o) {
   if (typeof r != "string")
-    throw new pt("Invalid token specified: must be a string");
-  a || (a = {});
-  const e = a.header === !0 ? 0 : 1, s = r.split(".")[e];
+    throw new xt("Invalid token specified: must be a string");
+  o || (o = {});
+  const e = o.header === !0 ? 0 : 1, s = r.split(".")[e];
   if (typeof s != "string")
-    throw new pt(`Invalid token specified: missing part #${e + 1}`);
+    throw new xt(`Invalid token specified: missing part #${e + 1}`);
   let i;
   try {
-    i = No(s);
-  } catch (o) {
-    throw new pt(`Invalid token specified: invalid base64 for part #${e + 1} (${o.message})`);
+    i = Po(s);
+  } catch (a) {
+    throw new xt(`Invalid token specified: invalid base64 for part #${e + 1} (${a.message})`);
   }
   try {
     return JSON.parse(i);
-  } catch (o) {
-    throw new pt(`Invalid token specified: invalid json for part #${e + 1} (${o.message})`);
+  } catch (a) {
+    throw new xt(`Invalid token specified: invalid json for part #${e + 1} (${a.message})`);
   }
 }
-const ma = (r) => {
-  const { shopping: a, signUp: e } = r, s = vt();
-  function i(l) {
-    s(l);
-  }
-  const o = JSON.parse(localStorage.getItem("token") || "{}");
-  return /* @__PURE__ */ t.jsxs("div", { className: C.buttons, children: [
-    a && /* @__PURE__ */ t.jsx(Co, {}),
-    !o.data && /* @__PURE__ */ t.jsx(
-      kt,
-      {
-        onClick: () => i("/customer-dash"),
-        type: "Secondary",
-        style: {
-          padding: 10
-        },
-        children: "Login"
-      }
-    ),
-    !o.data && e && /* @__PURE__ */ t.jsx(
-      kt,
-      {
-        onClick: () => i("/customer-dash"),
-        type: "Primary",
-        style: {
-          padding: 10
-        },
-        children: "Sign Up"
-      }
-    ),
-    o.data && /* @__PURE__ */ t.jsx(To, { token: o.data })
+const Ia = (r) => {
+  const { shopping: o, signUp: e, isShowUserInfo: s = !0 } = r;
+  return /* @__PURE__ */ t.jsxs("div", { className: w.buttons, children: [
+    o && /* @__PURE__ */ t.jsx(Mo, {}),
+    s && /* @__PURE__ */ t.jsx(zt, { signUp: e })
   ] });
-}, Co = () => {
-  const [r, a] = p.useState(!1), [e, s] = p.useState([]), { cart: i, getProducts: o } = Pt();
-  function l(m) {
-    for (let h = 0; h < i.parts.length; h++)
-      for (let g = 0; g < m.variants.length; g++)
-        if (i.parts[h].productVariantId === m.variants[h].id)
-          return i.parts[h].productVariantId;
+}, Mo = () => {
+  const [r, o] = p.useState(!1), [e, s] = p.useState([]), { cart: i, getProducts: a } = Pt();
+  function l(h) {
+    for (let m = 0; m < i.parts.length; m++)
+      for (let x = 0; x < h.variants.length; x++)
+        if (i.parts[m].productVariantId === h.variants[m].id)
+          return i.parts[m].productVariantId;
   }
-  function d(m) {
-    for (let h = 0; h < i.parts.length; h++)
-      for (let g = 0; g < m.variants.length; g++)
-        if (i.parts[h].productVariantId === m.variants[h].id)
-          return i.parts[h].quantity;
+  function d(h) {
+    for (let m = 0; m < i.parts.length; m++)
+      for (let x = 0; x < h.variants.length; x++)
+        if (i.parts[m].productVariantId === h.variants[m].id)
+          return i.parts[m].quantity;
   }
   p.useEffect(() => {
     (async () => {
-      const h = i.parts.map((w) => String(w.productId)), u = (await o([...h])).map((w) => ({
-        ...w,
-        activeVariantId: l(w),
-        quantity: d(w)
+      const m = i.parts.map((C) => String(C.productId)), u = (await a([...m])).map((C) => ({
+        ...C,
+        activeVariantId: l(C),
+        quantity: d(C)
       }));
       s(u);
     })();
   }, [i.parts.length]);
-  function n(m) {
-    var h;
-    return !m || !(m != null && m.variants) ? !1 : (h = m.variants.find((g) => g.id === m.activeVariantId)) == null ? void 0 : h.subscriptionSettings;
+  function n(h) {
+    var m;
+    return !h || !(h != null && h.variants) ? !1 : (m = h.variants.find((x) => x.id === h.activeVariantId)) == null ? void 0 : m.subscriptionSettings;
   }
-  const c = i.parts.length > 0 && e.length > 0 && !n(e[0]), [v, f] = p.useState(!1);
+  const c = i.parts.length > 0 && e.length > 0 && !n(e[0]), [b, g] = p.useState(!1);
   return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
     /* @__PURE__ */ t.jsxs(
-      "div",
+      mt,
       {
-        className: C.button,
-        onClick: (m) => {
-          m.stopPropagation(), a(!0), f(!0);
+        type: "Secondary",
+        style: {
+          padding: 10
+        },
+        onClick: (h) => {
+          h.stopPropagation(), window.location.pathname !== "/admin/builder" && (o(!0), g(!0));
         },
         children: [
           /* @__PURE__ */ t.jsx(
-            b,
+            v,
             {
               name: "Handbag",
               fill: "var(--icon-primary)"
             }
           ),
-          c && /* @__PURE__ */ t.jsx("div", { className: C.shoppingCount, children: i.parts.length })
+          c && /* @__PURE__ */ t.jsx("div", { className: w.shoppingCount, children: i.parts.length })
         ]
       }
     ),
     r && /* @__PURE__ */ t.jsx(
-      Et,
+      At,
       {
         close: () => {
-          f(!1), setTimeout(() => {
-            a(!1);
+          g(!1), setTimeout(() => {
+            o(!1);
           }, 300);
         },
+        withAnimation: !1,
         children: /* @__PURE__ */ t.jsx(
-          Bo,
+          Oo,
           {
             activeProducts: e,
             isCartNotEmpty: c,
-            isOpen: v
+            isOpen: b
           }
         )
       }
     )
   ] });
-}, Bo = (r) => {
-  const { activeProducts: a, isCartNotEmpty: e, isOpen: s } = r, { cart: i, reset: o, getTotalAndDiscount: l, updateQuantityOfProduct: d } = Pt(), n = vt();
-  function c(m) {
-    n(m);
+}, Oo = (r) => {
+  const { activeProducts: o, isCartNotEmpty: e, isOpen: s } = r, { cart: i, reset: a, getTotalAndDiscount: l, updateQuantityOfProduct: d } = Pt(), n = Tt();
+  function c(h) {
+    n(h);
   }
-  function v(m) {
+  function b(h) {
     d({
-      productId: m.id,
-      productVariantId: m.activeVariantId,
-      quantity: m.quantity + 1
+      productId: h.id,
+      productVariantId: h.activeVariantId,
+      quantity: h.quantity + 1
     });
   }
-  function f(m) {
+  function g(h) {
     d({
-      productId: m.id,
-      productVariantId: m.activeVariantId,
-      quantity: m.quantity - 1
+      productId: h.id,
+      productVariantId: h.activeVariantId,
+      quantity: h.quantity - 1
     });
   }
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: F(C.modal, {
-        [C.closing]: !s
+      className: F(w.modal, {
+        [w.closing]: !s
       }),
-      onClick: (m) => m.stopPropagation(),
+      onClick: (h) => h.stopPropagation(),
       children: [
-        /* @__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.jsxs("div", { className: w.top, children: [
+          /* @__PURE__ */ t.jsxs("div", { className: w.info, children: [
+            /* @__PURE__ */ t.jsx("span", { className: w.title, children: "Cart" }),
+            e && /* @__PURE__ */ t.jsx("div", { className: w.count, children: i.parts.length })
           ] }),
           /* @__PURE__ */ t.jsx(
             "button",
             {
-              className: F(C.clear, {
-                [C.activeClear]: e
+              className: F(w.clear, {
+                [w.activeClear]: e
               }),
               disabled: !e,
-              onClick: o,
+              onClick: a,
               children: "Clear all"
             }
           )
         ] }),
-        e ? /* @__PURE__ */ t.jsxs("div", { className: C.cart, children: [
-          /* @__PURE__ */ t.jsx("div", { className: C.products, children: a.map((m) => /* @__PURE__ */ t.jsxs(
+        e ? /* @__PURE__ */ t.jsxs("div", { className: w.cart, children: [
+          /* @__PURE__ */ t.jsx("div", { className: w.products, children: o.map((h) => /* @__PURE__ */ t.jsxs(
             "div",
             {
-              className: C.product,
+              className: w.product,
               children: [
-                /* @__PURE__ */ t.jsxs("div", { className: C.productInfo, children: [
+                /* @__PURE__ */ t.jsxs("div", { className: w.productInfo, children: [
                   /* @__PURE__ */ t.jsx(
                     "img",
                     {
-                      src: `https://imagedelivery.net/${m.images[0].cfId}/w=500`,
+                      src: `https://imagedelivery.net/${h.images[0].cfId}/w=500`,
                       alt: "image",
                       width: "100%",
                       height: "100%",
-                      className: C.image
+                      className: w.image
                     }
                   ),
-                  /* @__PURE__ */ t.jsxs("div", { className: C.content, children: [
-                    /* @__PURE__ */ t.jsx("div", { className: C.name, children: m.name }),
-                    /* @__PURE__ */ t.jsxs("div", { className: C.price, children: [
+                  /* @__PURE__ */ t.jsxs("div", { className: w.content, children: [
+                    /* @__PURE__ */ t.jsx("div", { className: w.name, children: h.name }),
+                    /* @__PURE__ */ t.jsxs("div", { className: w.price, children: [
                       "$",
-                      m.variants.find((h) => h.id === m.activeVariantId).price.amount * ((m == null ? void 0 : m.quantity) || 1)
+                      h.variants.find((m) => m.id === h.activeVariantId).price.amount * ((h == null ? void 0 : h.quantity) || 1)
                     ] })
                   ] })
                 ] }),
-                /* @__PURE__ */ t.jsxs("div", { className: C.productButtons, children: [
+                /* @__PURE__ */ t.jsxs("div", { className: w.productButtons, children: [
                   /* @__PURE__ */ t.jsx(
                     "div",
                     {
                       onClick: () => {
-                        m.quantity !== 1 && f(m);
+                        h.quantity !== 1 && g(h);
                       },
-                      className: C.productButton,
+                      className: w.productButton,
                       children: /* @__PURE__ */ t.jsx(
-                        b,
+                        v,
                         {
                           name: "Minus",
                           fill: "#757575",
@@ -2735,14 +2719,14 @@ const ma = (r) => {
                       )
                     }
                   ),
-                  /* @__PURE__ */ t.jsx("div", { className: C.productCount, children: m.quantity }),
+                  /* @__PURE__ */ t.jsx("div", { className: w.productCount, children: h.quantity }),
                   /* @__PURE__ */ t.jsx(
                     "div",
                     {
-                      onClick: () => v(m),
-                      className: C.productButton,
+                      onClick: () => b(h),
+                      className: w.productButton,
                       children: /* @__PURE__ */ t.jsx(
-                        b,
+                        v,
                         {
                           name: "Plus",
                           fill: "#757575",
@@ -2755,14 +2739,14 @@ const ma = (r) => {
                 ] })
               ]
             },
-            m.id
+            h.id
           )) }),
-          /* @__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.jsxs("div", { className: w.bottom, children: [
+            /* @__PURE__ */ t.jsxs("div", { className: w.subtotal, children: [
+              /* @__PURE__ */ t.jsxs("div", { className: w.block, children: [
                 /* @__PURE__ */ t.jsx("span", { children: "Subtotal" }),
                 /* @__PURE__ */ t.jsx(
-                  b,
+                  v,
                   {
                     name: "Info",
                     width: 20,
@@ -2771,20 +2755,20 @@ const ma = (r) => {
                   }
                 )
               ] }),
-              /* @__PURE__ */ t.jsxs("div", { className: C.total, children: [
+              /* @__PURE__ */ t.jsxs("div", { className: w.total, children: [
                 "$",
                 l().total
               ] })
             ] }),
-            /* @__PURE__ */ t.jsx(kt, { onClick: () => c("/checkout"), children: "Checkout" })
+            /* @__PURE__ */ t.jsx(mt, { onClick: () => c("/checkout"), children: "Checkout" })
           ] })
-        ] }) : /* @__PURE__ */ t.jsx(So, {})
+        ] }) : /* @__PURE__ */ t.jsx(qo, {})
       ]
     }
   );
-}, So = () => /* @__PURE__ */ t.jsxs("div", { className: C.empty, children: [
+}, qo = () => /* @__PURE__ */ t.jsxs("div", { className: w.empty, children: [
   /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-    b,
+    v,
     {
       name: "Handbag",
       fill: "var(--icon-secondary)"
@@ -2798,56 +2782,162 @@ const ma = (r) => {
       "a",
       {
         href: "/products",
-        className: C.link,
+        className: w.link,
         children: "view products"
       }
     )
   ] })
-] }), To = ({ token: r }) => {
-  const [a, e] = p.useState("test-email@gmail.com"), s = vt();
+] }), zt = ({ signUp: r }) => {
+  const o = JSON.parse(localStorage.getItem("token") || "{}"), { data: e } = o;
+  if (!e)
+    return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+      /* @__PURE__ */ t.jsx(
+        mt,
+        {
+          onClick: () => l("/customer-dash"),
+          type: "Secondary",
+          style: {
+            padding: 10
+          },
+          children: "Login"
+        }
+      ),
+      r && /* @__PURE__ */ t.jsx(
+        mt,
+        {
+          onClick: () => l("/customer-dash"),
+          type: "Primary",
+          style: {
+            padding: 10
+          },
+          children: "Sign Up"
+        }
+      )
+    ] });
+  const [s, i] = p.useState("test-email@gmail.com"), a = Tt();
   p.useEffect(() => {
     (async () => {
-      const l = wo(r);
-      e(l.email);
+      const n = Ao(e);
+      i(n.email);
     })();
-  }, [r]);
-  function i(o) {
-    s(o);
+  }, [e]);
+  function l(d) {
+    a(d);
   }
   return /* @__PURE__ */ t.jsx(
     "div",
     {
-      className: C.userInfo,
-      onClick: () => i("/customer-dash"),
-      children: /* @__PURE__ */ t.jsx("div", { children: a || "test-email@gmail.com" })
+      className: w.userInfo,
+      onClick: () => l("/customer-dash"),
+      children: /* @__PURE__ */ t.jsx("div", { children: s || "test-email@gmail.com" })
+    }
+  );
+}, Eo = ({
+  children: r,
+  logo: o,
+  setIsOpen: e,
+  signUp: s
+}) => {
+  const { setIsOpen: i } = Et(), a = () => {
+    i(!1), setTimeout(() => {
+      e(!1), i(!0);
+    }, 300);
+  };
+  return /* @__PURE__ */ t.jsxs(
+    "div",
+    {
+      className: w.pagesMobileModal,
+      onClick: (l) => l.stopPropagation(),
+      children: [
+        /* @__PURE__ */ t.jsxs("div", { className: w.pagesMobileModalHeader, children: [
+          /* @__PURE__ */ t.jsx("div", { children: o }),
+          /* @__PURE__ */ t.jsx(
+            mt,
+            {
+              type: "Secondary",
+              onClick: a,
+              children: /* @__PURE__ */ t.jsx(
+                v,
+                {
+                  name: "X",
+                  fill: "var(--icon-primary)"
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ t.jsx("div", { className: w.pagesMobileModalContent, children: r }),
+        /* @__PURE__ */ t.jsx("div", { className: w.pagesMobileModalFooter, children: /* @__PURE__ */ t.jsx(zt, { signUp: s }) })
+      ]
+    }
+  );
+}, ka = ({
+  children: r,
+  logo: o,
+  signUp: e
+}) => {
+  const [s, i] = p.useState(!1);
+  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsx(Do, { setIsOpenModal: i }),
+    s && /* @__PURE__ */ t.jsx(At, { close: () => i(!1), children: /* @__PURE__ */ t.jsx(
+      Eo,
+      {
+        logo: o,
+        setIsOpen: i,
+        signUp: e,
+        children: r
+      }
+    ) })
+  ] });
+}, Do = (r) => {
+  const { setIsOpenModal: o } = r;
+  return /* @__PURE__ */ t.jsx(
+    mt,
+    {
+      type: "Secondary",
+      style: {
+        padding: 10
+      },
+      onClick: (e) => {
+        e.stopPropagation(), o(!0);
+      },
+      children: /* @__PURE__ */ t.jsx(
+        v,
+        {
+          name: "List",
+          fill: "var(--icon-primary)"
+        }
+      )
     }
   );
-}, Po = "_share_11u0d_1", Ao = "_modal_11u0d_8", Oo = "_header_11u0d_14", qo = "_socials_11u0d_24", Eo = "_social_11u0d_24", Do = "_copy_11u0d_34", Lo = "_title_11u0d_41", Ro = "_copyWrapper_11u0d_47", Mo = "_copyText_11u0d_56", ot = {
-  share: Po,
-  modal: Ao,
-  header: Oo,
-  socials: qo,
-  social: Eo,
-  copy: Do,
-  title: Lo,
-  copyWrapper: Ro,
-  copyText: Mo
-}, pa = () => {
-  const { isOpenModal: r, setIsOpenModal: a } = Dt();
+}, Lo = "_share_xddz7_1", Ro = "_modal_xddz7_8", Ho = "_header_xddz7_20", zo = "_socials_xddz7_30", Fo = "_social_xddz7_30", Vo = "_copy_xddz7_40", Uo = "_title_xddz7_47", Yo = "_copyWrapper_xddz7_53", Go = "_copyText_xddz7_62", Xo = "_copyTextMobile_xddz7_75", Wo = "_copyTextMiniMobile_xddz7_94", at = {
+  share: Lo,
+  modal: Ro,
+  header: Ho,
+  socials: zo,
+  social: Fo,
+  copy: Vo,
+  title: Uo,
+  copyWrapper: Yo,
+  copyText: Go,
+  copyTextMobile: Xo,
+  copyTextMiniMobile: Wo
+}, $a = () => {
+  const { isOpenModal: r, setIsOpenModal: o } = Dt();
   function e() {
-    a(!0);
+    o(!0);
   }
   return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
     /* @__PURE__ */ t.jsx(
-      ct,
+      Z,
       {
-        className: ot.share,
+        className: at.share,
         onClick: (s) => {
           s.stopPropagation(), e();
         },
         type: "Secondary",
         children: /* @__PURE__ */ t.jsx(
-          b,
+          v,
           {
             name: "Share",
             fill: "#757575",
@@ -2856,76 +2946,91 @@ const ma = (r) => {
         )
       }
     ),
-    r && /* @__PURE__ */ t.jsx(Et, { close: a, children: /* @__PURE__ */ t.jsx(Ho, {}) })
+    r && /* @__PURE__ */ t.jsx(At, { close: o, children: /* @__PURE__ */ t.jsx(Jo, {}) })
   ] });
-}, Ho = () => {
-  const { setIsOpenModal: r } = Dt(), { notification: a, setNotification: e } = zt(), s = window.location.href;
-  function i() {
-    navigator.clipboard.writeText(s), e({
+}, Jo = () => {
+  const { setIsOpenModal: r } = Dt(), { notification: o, setNotification: e } = Vt(), { setIsOpen: s } = Et(), i = window.location.href;
+  function a() {
+    navigator.clipboard.writeText(i), e({
       message: "Link copied to clipboard",
       status: "success"
     });
   }
+  function l() {
+    s(!1), setTimeout(() => {
+      r(!1), s(!0);
+    }, 300);
+  }
+  function d(n, c) {
+    return n.length > c ? n.slice(0, c) + "..." : n;
+  }
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: ot.modal,
-      onClick: (o) => o.stopPropagation(),
+      className: at.modal,
+      onClick: (n) => n.stopPropagation(),
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: ot.header, children: [
-          /* @__PURE__ */ t.jsx("div", { className: ot.title, children: "Copy Product Link" }),
+        /* @__PURE__ */ t.jsxs("div", { className: at.header, children: [
+          /* @__PURE__ */ t.jsx("div", { className: at.title, children: "Copy Product Link" }),
           /* @__PURE__ */ t.jsx(
-            b,
+            v,
             {
               name: "X",
               fill: "#757575",
-              onClick: () => r(!1),
+              onClick: l,
               hoverable: !0
             }
           )
         ] }),
-        /* @__PURE__ */ t.jsxs("div", { className: ot.copyWrapper, children: [
-          /* @__PURE__ */ t.jsx(
-            "div",
+        /* @__PURE__ */ t.jsxs("div", { className: at.copyWrapper, children: [
+          /* @__PURE__ */ t.jsxs(
+            Z,
             {
-              className: F(ot.copy, ot.copyText),
-              onClick: i,
-              children: s
+              type: "Secondary",
+              onClick: a,
+              style: {
+                flex: 1
+              },
+              children: [
+                /* @__PURE__ */ t.jsx("div", { className: at.copyText, children: d(i, 100) }),
+                /* @__PURE__ */ t.jsx("div", { className: at.copyTextMobile, children: d(i, 40) }),
+                /* @__PURE__ */ t.jsx("div", { className: at.copyTextMiniMobile, children: d(i, 20) })
+              ]
             }
           ),
           /* @__PURE__ */ t.jsx(
-            "div",
+            Z,
             {
-              onClick: i,
-              className: ot.copy,
-              children: a ? /* @__PURE__ */ t.jsx(b, { name: "Check" }) : /* @__PURE__ */ t.jsx(b, { name: "Copy" })
+              type: "Secondary",
+              onClick: a,
+              children: o ? /* @__PURE__ */ t.jsx(v, { name: "Check" }) : /* @__PURE__ */ t.jsx(v, { name: "Copy" })
             }
           )
         ] })
       ]
     }
   );
-}, zo = "_accordion_1s1lq_1", Fo = "_header_1s1lq_9", Vo = "_icon_1s1lq_18", Uo = "_open_1s1lq_21", Yo = "_content_1s1lq_25", mt = {
-  accordion: zo,
-  header: Fo,
-  icon: Vo,
-  open: Uo,
-  content: Yo
-}, ga = ({ title: r, content: a }) => {
-  const [e, s] = p.useState(!1), [i, o] = p.useState(0), l = p.useRef(null), d = () => {
+}, Qo = "_accordion_1s1lq_1", Ko = "_header_1s1lq_9", Zo = "_icon_1s1lq_18", ta = "_open_1s1lq_21", ea = "_content_1s1lq_25", pt = {
+  accordion: Qo,
+  header: Ko,
+  icon: Zo,
+  open: ta,
+  content: ea
+}, Na = ({ title: r, content: o }) => {
+  const [e, s] = p.useState(!1), [i, a] = p.useState(0), l = p.useRef(null), d = () => {
     s(!e);
   };
   return p.useEffect(() => {
-    l.current && o(e ? l.current.scrollHeight : 0);
-  }, [e]), /* @__PURE__ */ t.jsxs("div", { className: mt.accordion, children: [
+    l.current && a(e ? l.current.scrollHeight : 0);
+  }, [e]), /* @__PURE__ */ t.jsxs("div", { className: pt.accordion, children: [
     /* @__PURE__ */ t.jsxs(
       "div",
       {
-        className: mt.header,
+        className: pt.header,
         onClick: d,
         children: [
           /* @__PURE__ */ t.jsx("h5", { id: "h5", children: r }),
-          /* @__PURE__ */ t.jsx("div", { className: F(mt.icon, { [mt.open]: e }), children: /* @__PURE__ */ t.jsx(b, { name: "CaretDown" }) })
+          /* @__PURE__ */ t.jsx("div", { className: F(pt.icon, { [pt.open]: e }), children: /* @__PURE__ */ t.jsx(v, { name: "CaretDown" }) })
         ]
       }
     ),
@@ -2933,50 +3038,50 @@ const ma = (r) => {
       "div",
       {
         ref: l,
-        className: mt.content,
+        className: pt.content,
         style: { height: `${i}px` },
-        children: /* @__PURE__ */ t.jsx("p", { id: "p", children: a })
+        children: /* @__PURE__ */ t.jsx("p", { id: "p", children: o })
       }
     )
   ] });
-}, Go = "_wrapper_p74l6_1", Wo = "_label_p74l6_9", Xo = "_input_p74l6_18", Jo = "_paddingless_p74l6_31", Qo = "_content_p74l6_35", Ko = "_contentBorder_p74l6_48", Zo = "_borderless_p74l6_53", ta = "_rightIcon_p74l6_58", et = {
-  wrapper: Go,
-  label: Wo,
-  input: Xo,
-  paddingless: Jo,
-  content: Qo,
-  contentBorder: Ko,
-  borderless: Zo,
-  rightIcon: ta
-}, fa = (r) => {
+}, sa = "_wrapper_p74l6_1", na = "_label_p74l6_9", ia = "_input_p74l6_18", oa = "_paddingless_p74l6_31", aa = "_content_p74l6_35", ca = "_contentBorder_p74l6_48", la = "_borderless_p74l6_53", ra = "_rightIcon_p74l6_58", st = {
+  wrapper: sa,
+  label: na,
+  input: ia,
+  paddingless: oa,
+  content: aa,
+  contentBorder: ca,
+  borderless: la,
+  rightIcon: ra
+}, wa = (r) => {
   const {
-    onChange: a,
+    onChange: o,
     style: e,
     label: s,
     value: i,
-    type: o,
+    type: a,
     min: l,
     max: d,
     placeholder: n,
     disabled: c = !1,
-    required: v = !1,
-    regex: f,
-    paddingless: m = !1,
-    borderless: h = !1,
-    editable: g = !1,
+    required: b = !1,
+    regex: g,
+    paddingless: h = !1,
+    borderless: m = !1,
+    editable: x = !1,
     isSearch: u = !1
-  } = r, { themeSettings: w } = qt(), { inputs: q } = w, [k, L] = p.useState(!1);
-  function B(x) {
-    return Number(x) < 0 ? String(l) : x;
+  } = r, { themeSettings: C } = qt(), { inputs: O } = C, [I, D] = p.useState(!1);
+  function B(f) {
+    return Number(f) < 0 ? String(l) : f;
   }
-  function S(x) {
-    return !v || !f ? !0 : new RegExp(f).test(x);
+  function S(f) {
+    return !b || !g ? !0 : new RegExp(g).test(f);
   }
-  return /* @__PURE__ */ t.jsxs("div", { className: et.wrapper, children: [
+  return /* @__PURE__ */ t.jsxs("div", { className: st.wrapper, children: [
     s && /* @__PURE__ */ t.jsx(
       "label",
       {
-        className: et.label,
+        className: st.label,
         htmlFor: s,
         children: s
       }
@@ -2984,52 +3089,52 @@ const ma = (r) => {
     /* @__PURE__ */ t.jsxs(
       "div",
       {
-        className: F(et.content, {
-          [et.contentBorder]: q.border.active
+        className: F(st.content, {
+          [st.contentBorder]: O.border.active
         }),
         style: {
-          paddingRight: q.general.height + 15,
+          paddingRight: O.general.height + 15,
           ...e,
-          background: q.field.active ? q.field.color : "transparent"
+          background: O.field.active ? O.field.color : "transparent"
         },
         children: [
           /* @__PURE__ */ t.jsx(
             "input",
             {
               id: s,
-              type: o || "text",
-              onChange: (x) => {
-                if (o === "text") a(x.target.value);
+              type: a || "text",
+              onChange: (f) => {
+                if (a === "text") o(f.target.value);
                 else {
-                  const D = B(x.target.value);
-                  a(D);
+                  const E = B(f.target.value);
+                  o(E);
                 }
               },
               value: i,
               autoComplete: "off",
               placeholder: n || "Type something...",
-              className: F(et.input, {
-                [et.required]: k && v && !S(i),
-                [et.paddingless]: m,
-                [et.borderless]: h
+              className: F(st.input, {
+                [st.required]: I && b && !S(i),
+                [st.paddingless]: h,
+                [st.borderless]: m
               }),
-              min: o === "number" ? l : void 0,
-              max: o === "number" ? d : void 0,
+              min: a === "number" ? l : void 0,
+              max: a === "number" ? d : void 0,
               disabled: c,
-              onFocus: () => L(!0)
+              onFocus: () => D(!0)
             }
           ),
-          u && /* @__PURE__ */ t.jsx("div", { className: et.rightIcon, children: /* @__PURE__ */ t.jsx(
-            b,
+          u && /* @__PURE__ */ t.jsx("div", { className: st.rightIcon, children: /* @__PURE__ */ t.jsx(
+            v,
             {
               name: "MagnifyingGlass",
               fill: "var(--icon-secondary)",
-              width: q.general.height,
-              height: q.general.height
+              width: O.general.height,
+              height: O.general.height
             }
           ) }),
-          g && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-            b,
+          x && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
+            v,
             {
               name: "Sliders",
               width: 20,
@@ -3041,18 +3146,18 @@ const ma = (r) => {
       }
     )
   ] });
-}, ea = "_wrapper_st58d_1", sa = "_label_st58d_10", na = "_textarea_st58d_18", ia = "_length_st58d_33", xt = {
-  wrapper: ea,
-  label: sa,
-  textarea: na,
-  length: ia
-}, xa = (r) => {
-  const { onChange: a, label: e, value: s, maxLength: i, placeholder: o = "Type something..." } = r, [l, d] = p.useState(s.length);
-  return /* @__PURE__ */ t.jsxs("div", { className: xt.wrapper, children: [
+}, da = "_wrapper_st58d_1", ua = "_label_st58d_10", _a = "_textarea_st58d_18", ma = "_length_st58d_33", bt = {
+  wrapper: da,
+  label: ua,
+  textarea: _a,
+  length: ma
+}, Ca = (r) => {
+  const { onChange: o, label: e, value: s, maxLength: i, placeholder: a = "Type something..." } = r, [l, d] = p.useState(s.length);
+  return /* @__PURE__ */ t.jsxs("div", { className: bt.wrapper, children: [
     e && /* @__PURE__ */ t.jsx(
       "label",
       {
-        className: xt.label,
+        className: bt.label,
         htmlFor: e,
         children: e
       }
@@ -3063,14 +3168,14 @@ const ma = (r) => {
         id: e,
         defaultValue: s,
         onChange: (n) => {
-          d(n.target.value.length), a(n.target.value);
+          d(n.target.value.length), o(n.target.value);
         },
-        placeholder: o,
-        className: xt.textarea,
+        placeholder: a,
+        className: bt.textarea,
         maxLength: i
       }
     ),
-    i && /* @__PURE__ */ t.jsxs("div", { className: xt.length, children: [
+    i && /* @__PURE__ */ t.jsxs("div", { className: bt.length, children: [
       l,
       "/",
       i
@@ -3078,34 +3183,37 @@ const ma = (r) => {
   ] });
 };
 export {
-  ga as Accordion,
-  kt as Button,
-  Sn as ButtonTypeSettings,
-  ua as ButtonsSettings,
-  ra as CategorySettings,
+  Na as Accordion,
+  Do as BurgerMenuButton,
+  mt as Button,
+  Pn as ButtonTypeSettings,
+  va as ButtonsSettings,
+  fa as CategorySettings,
   gt as ChooseImage,
-  ja as ChooseImageModal,
-  So as EmptyCart,
-  da as FormSettings,
-  ma as HeaderButtons,
-  b as Icon,
-  W as InputSettings,
-  fa as InputUI,
-  ze as ItemsSettings,
-  la as LayoutSettings,
-  _a as ListingSelector,
-  ya as Loader,
-  Et as Modal,
-  ha as ProductOptions,
-  At as RangeSelector,
-  st as Select,
-  pa as ShareLink,
-  Co as ShoppingButton,
-  Bo as ShoppingModalCart,
-  Z as Switch,
+  Ta as ChooseImageModal,
+  qo as EmptyCart,
+  ba as FormSettings,
+  Ia as HeaderButtons,
+  v as Icon,
+  X as InputSettings,
+  wa as InputUI,
+  Ve as ItemsSettings,
+  ga as LayoutSettings,
+  ja as ListingSelector,
+  Pa as Loader,
+  At as Modal,
+  ka as PagesMobileMenu,
+  Eo as PagesMobileModal,
+  ya as ProductOptions,
+  Mt as RangeSelector,
+  nt as Select,
+  $a as ShareLink,
+  Mo as ShoppingButton,
+  Oo as ShoppingModalCart,
+  tt as Switch,
   Rt as TextSettings,
   Ot as TextareaSettings,
-  xa as TextareaUI,
+  Ca as TextareaUI,
   Lt as TypesText,
-  To as UserInfo
+  zt as UserInfo
 };