@billgangcom/theme-lib 1.39.0 → 1.41.0

package/dist/ui.es.js

@@ -1,21 +1,21 @@
-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 { j as t, I as j, c as U, a as K, S as st, T as qt, b as et, C as ft, u as kt, d as $t, D as Nt, e as wt, v as Ct, B as lt, f as _t, P as Bt, g as St, h as Tt, i as Vt, k as Et, l as Pt, m as At, M as Mt, n as Dt, o as Ht, p as Ut } from "./index-DPr-RIBb.js";
+import { q as Pa, L as Aa } from "./index-DPr-RIBb.js";
+import f from "react";
 import "@phosphor-icons/react";
-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 = [
+const Yt = "_wrapper_1ibay_2", Gt = "_alignmentBlock_1ibay_8", Xt = "_title_1ibay_15", Wt = "_subtitle_1ibay_22", Jt = "_alignmentContent_1ibay_29", Qt = "_alignments_1ibay_37", Kt = "_alignment_1ibay_8", Zt = "_circle_1ibay_60", te = "_paddings_1ibay_67", ee = "_padding_1ibay_67", se = "_active_1ibay_91", ne = "_input_1ibay_98", J = {
+  wrapper: Yt,
+  alignmentBlock: Gt,
+  title: Xt,
+  subtitle: Wt,
+  alignmentContent: Jt,
+  alignments: Qt,
+  alignment: Kt,
+  circle: Zt,
+  paddings: te,
+  padding: ee,
+  active: se,
+  input: ne
+}, ie = [
   "topLeft",
   "top",
   "topRight",
@@ -25,10 +25,10 @@ const Ut = "_wrapper_1ibay_2", Yt = "_alignmentBlock_1ibay_8", Gt = "_title_1iba
   "bottomLeft",
   "bottom",
   "bottomRight"
-], ie = ["left", "top", "right", "bottom"], ga = (r) => {
-  const { alignment: o, padding: e, setPadding: s, setAlignment: i } = r;
-  function a(g) {
-    switch (g) {
+], oe = ["left", "top", "right", "bottom"], ba = (d) => {
+  const { alignment: o, padding: e, setPadding: s, setAlignment: i } = d;
+  function a(h) {
+    switch (h) {
       case "left":
       case "topLeft":
       case "bottomLeft":
@@ -45,8 +45,8 @@ const Ut = "_wrapper_1ibay_2", Yt = "_alignmentBlock_1ibay_8", Gt = "_title_1iba
         return "TextAlignCenter";
     }
   }
-  function l(g) {
-    switch (g) {
+  function l(h) {
+    switch (h) {
       case "left":
         return "AlignLeft";
       case "right":
@@ -57,38 +57,38 @@ const Ut = "_wrapper_1ibay_2", Yt = "_alignmentBlock_1ibay_8", Gt = "_title_1iba
         return "AlignBottom";
     }
   }
-  const [d, n] = p.useState(null), [c, b] = p.useState(null);
+  const [r, n] = f.useState(null), [c, x] = f.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: ne.map((g) => /* @__PURE__ */ t.jsxs(
+        /* @__PURE__ */ t.jsx("div", { className: J.alignments, children: ie.map((h) => /* @__PURE__ */ t.jsxs(
           "div",
           {
             onClick: () => {
-              i(g);
+              i(h);
             },
             className: J.alignment,
             onMouseEnter: () => {
-              n(g);
+              n(h);
             },
             onMouseLeave: () => {
               n(null);
             },
             children: [
-              g !== o && d !== g && /* @__PURE__ */ t.jsx("div", { className: J.circle }),
-              g !== o && d === g && /* @__PURE__ */ t.jsx(
-                v,
+              h !== o && r !== h && /* @__PURE__ */ t.jsx("div", { className: J.circle }),
+              h !== o && r === h && /* @__PURE__ */ t.jsx(
+                j,
                 {
-                  name: a(d),
+                  name: a(r),
                   fill: "#c2c2c2",
                   width: 22,
                   height: 22
                 }
               ),
-              g === o && /* @__PURE__ */ t.jsx(
-                v,
+              h === o && /* @__PURE__ */ t.jsx(
+                j,
                 {
                   name: a(o),
                   fill: "#FF3F19",
@@ -98,37 +98,37 @@ const Ut = "_wrapper_1ibay_2", Yt = "_alignmentBlock_1ibay_8", Gt = "_title_1iba
               )
             ]
           },
-          g
+          h
         )) }),
-        /* @__PURE__ */ t.jsx("div", { className: J.paddings, children: ie.map((g) => /* @__PURE__ */ t.jsxs(
+        /* @__PURE__ */ t.jsx("div", { className: J.paddings, children: oe.map((h) => /* @__PURE__ */ t.jsxs(
           "label",
           {
-            className: F(J.padding, {
-              [J.active]: c === g
+            className: U(J.padding, {
+              [J.active]: c === h
             }),
             onFocus: () => {
-              b(g);
+              x(h);
             },
             onBlur: () => {
-              b(null);
+              x(null);
             },
             children: [
               /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-                v,
+                j,
                 {
-                  name: l(g),
+                  name: l(h),
                   width: 20,
                   height: 20
                 }
               ) }),
               /* @__PURE__ */ t.jsx(
-                X,
+                K,
                 {
                   type: "number",
-                  value: String(e[g]),
-                  onChange: (h) => s({
+                  value: String(e[h]),
+                  onChange: (p) => s({
                     ...e,
-                    [g]: Number(h)
+                    [h]: Number(p)
                   }),
                   paddingless: !0,
                   borderless: !0
@@ -136,24 +136,24 @@ const Ut = "_wrapper_1ibay_2", Yt = "_alignmentBlock_1ibay_8", Gt = "_title_1iba
               )
             ]
           },
-          g
+          h
         )) })
       ] })
     ] })
   ] });
-}, 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,
+}, ae = "_title_1jkiw_1", ce = "_subtitle_1jkiw_5", le = "_header_1jkiw_12", re = "_text_1jkiw_13", de = "_top_1jkiw_20", ue = "_itemsBlock_1jkiw_29", ht = {
+  title: ae,
+  subtitle: ce,
+  header: le,
+  text: re,
+  top: de,
+  itemsBlock: ue
+}, me = "_typeTexts_167ez_1", _e = "_block_167ez_8", he = "_active_167ez_25", yt = {
+  typeTexts: me,
   block: _e,
-  active: me
-}, he = ["bold", "italic", "underline", "strike-through", "code"], Lt = (r) => {
-  const { typesText: o, setTypesText: e } = r;
+  active: he
+}, pe = ["bold", "italic", "underline", "strike-through", "code"], Lt = (d) => {
+  const { typesText: o, setTypesText: e } = d;
   function s(i) {
     switch (i) {
       case "bold":
@@ -168,22 +168,22 @@ const Ut = "_wrapper_1ibay_2", Yt = "_alignmentBlock_1ibay_8", Gt = "_title_1iba
         return "TextUnderline";
     }
   }
-  return /* @__PURE__ */ t.jsx("div", { className: jt.typeTexts, children: he.map((i) => /* @__PURE__ */ t.jsx(
+  return /* @__PURE__ */ t.jsx("div", { className: yt.typeTexts, children: pe.map((i) => /* @__PURE__ */ t.jsx(
     "div",
     {
-      className: F(jt.block, {
-        [jt.active]: o.includes(i)
+      className: U(yt.block, {
+        [yt.active]: o.includes(i)
       }),
       onClick: () => {
         const a = [...o];
         if (a.includes(i)) {
-          const l = a.filter((d) => d !== i);
+          const l = a.filter((r) => r !== i);
           e(l);
         } else
           a.push(i), e(a);
       },
       children: /* @__PURE__ */ t.jsx(
-        v,
+        j,
         {
           name: s(i),
           fill: o.includes(i) ? "#252525" : "#757575",
@@ -194,7 +194,15 @@ const Ut = "_wrapper_1ibay_2", Yt = "_alignmentBlock_1ibay_8", Gt = "_title_1iba
     },
     String(i)
   )) });
-}, Rt = (r) => {
+}, pt = {
+  h1: "Heading 1",
+  h2: "Heading 2",
+  h3: "Heading 3",
+  h4: "Heading 4",
+  h5: "Heading 5",
+  h6: "Heading 6",
+  p: "Paragraph"
+}, Rt = (d) => {
   const {
     typesText: o,
     isActiveText: e,
@@ -202,26 +210,28 @@ const Ut = "_wrapper_1ibay_2", Yt = "_alignmentBlock_1ibay_8", Gt = "_title_1iba
     text: i,
     setText: a,
     setTypesText: l,
-    title: d,
-    subtitle: n = "Items"
-  } = r;
+    title: r,
+    subtitle: n = "Items",
+    typeFont: c,
+    setTypeFont: x
+  } = d;
   return /* @__PURE__ */ t.jsxs("div", { className: ht.text, children: [
-    (d || e !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: ht.top, children: [
-      d && /* @__PURE__ */ t.jsx("h3", { className: ht.title, children: d }),
+    (r || e !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: ht.top, children: [
+      r && /* @__PURE__ */ t.jsx("h3", { className: ht.title, children: r }),
       e !== void 0 && s && /* @__PURE__ */ t.jsx(
-        tt,
+        st,
         {
           current: e,
-          onChange: (c) => s(c)
+          onChange: (h) => s(h)
         }
       )
     ] }),
     /* @__PURE__ */ t.jsxs("div", { className: ht.itemsBlock, children: [
       /* @__PURE__ */ t.jsx("h5", { className: ht.subtitle, children: n }),
       /* @__PURE__ */ t.jsx(
-        Ot,
+        qt,
         {
-          onChange: (c) => a(c),
+          onChange: (h) => a(h),
           value: i,
           maxLength: 150
         }
@@ -232,45 +242,60 @@ const Ut = "_wrapper_1ibay_2", Yt = "_alignmentBlock_1ibay_8", Gt = "_title_1iba
           typesText: o,
           setTypesText: l
         }
+      ),
+      /* @__PURE__ */ t.jsx(
+        et,
+        {
+          label: "Type Text",
+          options: Object.values(pt).filter(
+            (h) => h !== pt[c]
+          ),
+          onChange: (h) => x(
+            Object.keys(pt).find(
+              (p) => pt[p] === h
+            )
+          ),
+          value: pt[c]
+        }
       )
     ] })
   ] });
-}, 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) {
+}, xe = "_title_xma5o_1", ge = "_subtitle_xma5o_5", fe = "_header_xma5o_12", be = "_text_xma5o_13", ve = "_productsBlock_xma5o_14", je = "_top_xma5o_26", ye = "_itemsBlock_xma5o_35", Ie = "_typeTexts_xma5o_41", ke = "_block_xma5o_48", $e = "_active_xma5o_61", Ne = "_products_xma5o_14", we = "_product_xma5o_14", Ce = "_button_xma5o_80", Be = "_disabled_xma5o_91", Se = "_image_xma5o_95", Te = "_info_xma5o_102", Pe = "_name_xma5o_114", Ae = "_buttons_xma5o_118", Me = "_modal_xma5o_125", Oe = "_link_xma5o_145", qe = "_modalOptions_xma5o_151", Ee = "_addButton_xma5o_165", De = "_deleteButton_xma5o_180", He = "_closeIcon_xma5o_192", H = {
+  title: xe,
+  subtitle: ge,
+  header: fe,
+  text: be,
+  productsBlock: ve,
+  top: je,
+  itemsBlock: ye,
+  typeTexts: Ie,
+  block: ke,
+  active: $e,
+  products: Ne,
+  product: we,
+  button: Ce,
+  disabled: Be,
+  image: Se,
+  info: Te,
+  name: Pe,
+  buttons: Ae,
+  modal: Me,
+  link: Oe,
+  modalOptions: qe,
+  addButton: Ee,
+  deleteButton: De,
+  closeIcon: He
+}, Le = f.forwardRef(
+  (d, o) => {
+    const { activeItem: e, setActiveItem: s, popupPosition: i, modalOptions: a, setIsOpenModal: l } = d;
+    function r(n, c) {
       return n.length > c ? `${n.slice(0, c)}...` : n;
     }
     return /* @__PURE__ */ t.jsxs(
       "div",
       {
         ref: o,
-        className: R.modal,
+        className: H.modal,
         onClick: (n) => {
           n.stopPropagation();
         },
@@ -279,10 +304,10 @@ const Ut = "_wrapper_1ibay_2", Yt = "_alignmentBlock_1ibay_8", Gt = "_title_1iba
           left: `${i.left}px`
         },
         children: [
-          /* @__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,
+          /* @__PURE__ */ t.jsxs("div", { className: H.top, children: [
+            /* @__PURE__ */ t.jsx("h3", { className: H.title, children: r(e.name, 20) }),
+            /* @__PURE__ */ t.jsx("div", { className: H.closeIcon, children: /* @__PURE__ */ t.jsx(
+              j,
               {
                 name: "X",
                 height: 20,
@@ -293,19 +318,19 @@ const Ut = "_wrapper_1ibay_2", Yt = "_alignmentBlock_1ibay_8", Gt = "_title_1iba
               }
             ) })
           ] }),
-          /* @__PURE__ */ t.jsx("div", { className: R.modalOptions, children: a.map((n) => {
+          /* @__PURE__ */ t.jsx("div", { className: H.modalOptions, children: a.map((n) => {
             if (n.type === "image")
               return /* @__PURE__ */ t.jsx(
-                gt,
+                ft,
                 {
                   label: "Put up an attractive image",
                   activeImage: e[n.field],
                   onChange: (c) => {
-                    const b = {
+                    const x = {
                       ...e,
                       [n.field]: c
                     };
-                    s(b);
+                    s(x);
                   }
                 },
                 String(n.field)
@@ -316,33 +341,41 @@ const Ut = "_wrapper_1ibay_2", Yt = "_alignmentBlock_1ibay_8", Gt = "_title_1iba
                 {
                   typesText: e[n.field.type],
                   setTypesText: (c) => {
-                    const b = {
+                    const x = {
                       ...e,
                       [n.field.type]: c
                     };
-                    s(b);
+                    s(x);
                   },
                   text: e[n.field.text] || "",
                   setText: (c) => {
-                    const b = {
+                    const x = {
                       ...e,
                       [n.field.text]: c
                     };
-                    s(b);
+                    s(x);
+                  },
+                  typeFont: e[n.field.type],
+                  setTypeFont: (c) => {
+                    const x = {
+                      ...e,
+                      [n.field.type]: c
+                    };
+                    s(x);
                   },
                   subtitle: n.label
                 }
               );
             if (n.type === "input")
               return /* @__PURE__ */ t.jsx(
-                X,
+                K,
                 {
                   onChange: (c) => {
-                    const b = {
+                    const x = {
                       ...e,
                       [n.field]: c
                     };
-                    s(b);
+                    s(x);
                   },
                   value: e[n.field] || "",
                   label: n.label,
@@ -350,16 +383,16 @@ const Ut = "_wrapper_1ibay_2", Yt = "_alignmentBlock_1ibay_8", Gt = "_title_1iba
                 }
               );
             if (n.type === "inputSwitch")
-              return /* @__PURE__ */ t.jsxs("div", { className: R.link, children: [
+              return /* @__PURE__ */ t.jsxs("div", { className: H.link, children: [
                 /* @__PURE__ */ t.jsx(
-                  X,
+                  K,
                   {
                     onChange: (c) => {
-                      const b = {
+                      const x = {
                         ...e,
                         [n.field.text]: c
                       };
-                      s(b);
+                      s(x);
                     },
                     value: e[n.field.text] || "",
                     label: n.inputLabel,
@@ -367,31 +400,31 @@ const Ut = "_wrapper_1ibay_2", Yt = "_alignmentBlock_1ibay_8", Gt = "_title_1iba
                   }
                 ),
                 /* @__PURE__ */ t.jsx(
-                  tt,
+                  st,
                   {
                     current: !!e[n.field.switch] || !1,
                     label: n.switchLabel,
                     onChange: (c) => {
-                      const b = {
+                      const x = {
                         ...e,
                         [n.field.switch]: c
                       };
-                      s(b);
+                      s(x);
                     }
                   }
                 )
               ] });
             if (n.type === "list")
               return /* @__PURE__ */ t.jsx(
-                Ve,
+                Ue,
                 {
                   items: e[n.field] || [],
                   setItems: (c) => {
-                    const b = {
+                    const x = {
                       ...e,
                       [n.field]: c
                     };
-                    s(b);
+                    s(x);
                   },
                   itemsType: "select",
                   draggable: n.draggable || !1,
@@ -404,19 +437,19 @@ const Ut = "_wrapper_1ibay_2", Yt = "_alignmentBlock_1ibay_8", Gt = "_title_1iba
               );
             if (n.type === "select")
               return /* @__PURE__ */ t.jsx(
-                nt,
+                et,
                 {
                   options: n.itemsOptions,
                   onChange: (c) => {
-                    const b = {
+                    const x = {
                       ...e,
                       [n.field]: c
                     };
-                    s(b);
+                    s(x);
                   },
                   label: n.label,
                   value: e[n.field] || "String",
-                  leftAddon: n.leftAddon && n.leftAddon === "icon" && /* @__PURE__ */ t.jsx(v, { name: e[n.field] })
+                  leftAddon: n.leftAddon && n.leftAddon === "icon" && /* @__PURE__ */ t.jsx(j, { name: e[n.field] })
                 }
               );
           }) })
@@ -424,16 +457,16 @@ const Ut = "_wrapper_1ibay_2", Yt = "_alignmentBlock_1ibay_8", Gt = "_title_1iba
       }
     );
   }
-), Re = "_other_g74jx_1", He = "_subtitle_g74jx_7", ze = "_items_g74jx_14", yt = {
+), Re = "_other_g74jx_1", ze = "_subtitle_g74jx_7", Fe = "_items_g74jx_14", It = {
   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: o.map((s, i) => /* @__PURE__ */ t.jsx(
-      tt,
+  subtitle: ze,
+  items: Fe
+}, jt = (d) => {
+  const { items: o, title: e = "Other" } = d;
+  return /* @__PURE__ */ t.jsxs("div", { className: It.other, children: [
+    /* @__PURE__ */ t.jsx("h5", { className: It.subtitle, children: e }),
+    /* @__PURE__ */ t.jsx("div", { className: It.items, children: o.map((s, i) => /* @__PURE__ */ t.jsx(
+      st,
       {
         current: s.isItem,
         onChange: (a) => s.setIsItem(a),
@@ -445,18 +478,18 @@ const Ut = "_wrapper_1ibay_2", Yt = "_alignmentBlock_1ibay_8", Gt = "_title_1iba
     )) })
   ] });
 };
-function Fe({ product: r, children: o }) {
+function Ve({ product: d, children: o }) {
   const {
     attributes: e,
     listeners: s,
     setNodeRef: i,
     transform: a,
     transition: l,
-    isDragging: d
-  } = Bt({
-    id: r.id
+    isDragging: r
+  } = St({
+    id: d.id
   }), n = {
-    transform: St.Transform.toString(a),
+    transform: Tt.Transform.toString(a),
     transition: l
   };
   return /* @__PURE__ */ t.jsx(
@@ -464,14 +497,14 @@ function Fe({ product: r, children: o }) {
     {
       ref: i,
       style: n,
-      className: `${R.product} ${d ? R.dragging : ""}`,
+      className: `${H.product} ${r ? H.dragging : ""}`,
       ...e,
       ...s,
       children: o
     }
   );
 }
-const Ve = (r) => {
+const Ue = (d) => {
   const {
     isActiveItems: o,
     setIsActiveItems: e,
@@ -479,73 +512,73 @@ const Ve = (r) => {
     setItems: i,
     other: a,
     title: l,
-    subtitle: d,
+    subtitle: r,
     editable: n = !0,
     draggable: c = !1,
-    withImage: b = !1,
-    deletable: g = !0,
-    addable: h = !0,
-    itemsType: m,
-    itemsPlaceholder: x = "",
+    withImage: x = !1,
+    deletable: h = !0,
+    addable: p = !0,
+    itemsType: _,
+    itemsPlaceholder: b = "",
     itemsOptions: u,
     hasRangeSelector: C = !1,
-    rangeSelectorOptions: O,
-    modalOptions: I,
-    addableOptions: D = {},
-    limit: B,
-    autoScrollInterval: S
-  } = r, [f, E] = p.useState(null), [W, et] = p.useState({
+    rangeSelectorOptions: L,
+    modalOptions: v,
+    addableOptions: O = {},
+    limit: g,
+    autoScrollInterval: $
+  } = d, [F, q] = f.useState(null), [X, D] = f.useState({
     top: 0,
     left: 0
-  }), [y, $] = p.useState(null), q = p.useRef(null), [G, A] = p.useState(!1), H = It(
-    kt(Ct, {
+  }), [I, A] = f.useState(null), M = f.useRef(null), [W, T] = f.useState(!1), R = kt(
+    $t(Bt, {
       activationConstraint: {
         distance: 5
       }
     })
   );
-  p.useEffect(() => {
-    const _ = () => {
-      E(null), A(!1);
+  f.useEffect(() => {
+    const m = () => {
+      q(null), T(!1);
     };
-    return document.body.addEventListener("click", _), E(null), A(!1), () => {
-      E(null), A(!1), document.body.removeEventListener("click", _);
+    return document.body.addEventListener("click", m), q(null), T(!1), () => {
+      q(null), T(!1), document.body.removeEventListener("click", m);
     };
-  }, []), p.useEffect(() => {
-    if (f) {
-      const _ = [...s].map((k) => k.id === f.id ? f : k);
-      i(_);
+  }, []), f.useEffect(() => {
+    if (F) {
+      const m = [...s].map((k) => k.id === F.id ? F : k);
+      i(m);
     }
-  }, [f]), p.useEffect(() => {
-    if (q.current && y) {
-      const _ = q.current.getBoundingClientRect().height, k = window.innerHeight;
-      let T = y.top;
-      T + _ > k + window.scrollY - 200 && (T = k + window.scrollY - _ - 200), T < 0 && (T = 10), et({
-        top: T,
-        left: y.left
+  }, [F]), f.useEffect(() => {
+    if (M.current && I) {
+      const m = M.current.getBoundingClientRect().height, k = window.innerHeight;
+      let B = I.top;
+      B + m > k + window.scrollY - 200 && (B = k + window.scrollY - m - 200), B < 0 && (B = 10), D({
+        top: B,
+        left: I.left
       });
     }
-  }, [q.current, y]);
-  const K = (_, k) => {
-    _.stopPropagation();
-    const T = _.target.getBoundingClientRect();
-    $({
-      top: T.top + window.scrollY,
-      left: T.left - 30
-    }), E(k), A(!0);
+  }, [M.current, I]);
+  const Z = (m, k) => {
+    m.stopPropagation();
+    const B = m.target.getBoundingClientRect();
+    A({
+      top: B.top + window.scrollY,
+      left: B.left - 30
+    }), q(k), T(!0);
   };
-  function lt(_) {
-    if (b)
-      return _ ? /* @__PURE__ */ t.jsx(
+  function rt(m) {
+    if (x)
+      return m ? /* @__PURE__ */ t.jsx(
         "img",
         {
-          src: `https://imagedelivery.net/${_[0]}/w=1000`,
+          src: `https://imagedelivery.net/${m[0]}/w=1000`,
           alt: "image",
           width: 16,
           height: 16
         }
       ) : /* @__PURE__ */ t.jsx(
-        v,
+        j,
         {
           name: "Image",
           width: 16,
@@ -554,20 +587,20 @@ const Ve = (r) => {
         }
       );
   }
-  const j = (_) => {
-    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);
+  const y = (m) => {
+    const { active: k, over: B } = m;
+    if (B && k.id !== B.id) {
+      const E = s.findIndex((S) => S.id === k.id), Y = s.findIndex((S) => S.id === B.id);
+      if (E !== -1 && Y !== -1) {
+        const S = [...s], [dt] = S.splice(E, 1);
+        S.splice(Y, 0, dt), i(S);
       }
     }
-  }, M = (_, k) => {
-    var L, U;
-    const T = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+  }, P = (m, k) => {
+    var E, Y;
+    const B = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       c && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-        v,
+        j,
         {
           name: "DotsSixVertical",
           hoverable: !0,
@@ -575,135 +608,135 @@ const Ve = (r) => {
           height: 20
         }
       ) }),
-      m === "select" && u && /* @__PURE__ */ t.jsx(
-        nt,
+      _ === "select" && u && /* @__PURE__ */ t.jsx(
+        et,
         {
-          onChange: (P) => {
-            const rt = [...s], ut = u.find((ft) => ft.name === P);
-            if (!ut) return;
-            const dt = rt.map((ft) => ft.id === _.id ? {
-              ...ut,
-              name: P
-            } : ft);
-            E({
-              ..._,
-              name: P
-            }), i([...dt]);
+          onChange: (S) => {
+            const dt = [...s], mt = u.find((bt) => bt.name === S);
+            if (!mt) return;
+            const ut = dt.map((bt) => bt.id === m.id ? {
+              ...mt,
+              name: S
+            } : bt);
+            q({
+              ...m,
+              name: S
+            }), i([...ut]);
           },
-          value: _.name,
-          options: u.filter((P) => !s.find((rt) => rt.name === P.name)).map((P) => P.name),
-          leftAddon: lt(_.images)
+          value: m.name,
+          options: u.filter((S) => !s.find((dt) => dt.name === S.name)).map((S) => S.name),
+          leftAddon: rt(m.images)
         }
       ),
-      m === "input" && /* @__PURE__ */ t.jsx(
-        X,
+      _ === "input" && /* @__PURE__ */ t.jsx(
+        K,
         {
-          onChange: (P) => {
-            const ut = [...s].map((dt) => dt.id === _.id ? {
-              ..._,
-              name: P
-            } : dt);
-            i([...ut]);
+          onChange: (S) => {
+            const mt = [...s].map((ut) => ut.id === m.id ? {
+              ...m,
+              name: S
+            } : ut);
+            i([...mt]);
           },
-          value: _.name,
-          placeholder: x
+          value: m.name,
+          placeholder: b
         }
       ),
-      m === "image" && /* @__PURE__ */ t.jsx(
-        gt,
+      _ === "image" && /* @__PURE__ */ t.jsx(
+        ft,
         {
-          onChange: (P) => {
-            const ut = [...s].map((dt) => dt.id === _.id ? {
-              ..._,
-              images: P
-            } : dt);
-            i([...ut]);
+          onChange: (S) => {
+            const mt = [...s].map((ut) => ut.id === m.id ? {
+              ...m,
+              images: S
+            } : ut);
+            i([...mt]);
           },
-          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
+          activeImage: (E = s.find((S) => S.id === m.id)) != null && E.images ? (Y = s.find((S) => S.id === m.id)) == null ? void 0 : Y.images[0] : void 0
         }
       ),
-      /* @__PURE__ */ t.jsxs("div", { className: R.buttons, children: [
-        n && /* @__PURE__ */ t.jsx("div", { className: R.deleteButton, children: /* @__PURE__ */ t.jsx(
-          v,
+      /* @__PURE__ */ t.jsxs("div", { className: H.buttons, children: [
+        n && /* @__PURE__ */ t.jsx("div", { className: H.deleteButton, children: /* @__PURE__ */ t.jsx(
+          j,
           {
             name: "Sliders",
             hoverable: !0,
             width: 20,
             height: 20,
-            onClick: (P) => K(P, _)
+            onClick: (S) => Z(S, m)
           }
         ) }),
-        g && /* @__PURE__ */ t.jsx("div", { className: R.deleteButton, children: /* @__PURE__ */ t.jsx(
-          v,
+        h && /* @__PURE__ */ t.jsx("div", { className: H.deleteButton, children: /* @__PURE__ */ t.jsx(
+          j,
           {
             name: "Trash",
             hoverable: !0,
             width: 20,
             height: 20,
             fill: "#C12A2A",
-            onClick: () => i(s.filter((P) => P.id !== _.id))
+            onClick: () => i(s.filter((S) => S.id !== m.id))
           }
         ) })
       ] })
     ] });
     return c ? /* @__PURE__ */ t.jsx(
-      Fe,
+      Ve,
       {
-        product: _,
+        product: m,
         index: k,
-        children: T
+        children: B
       },
-      _.id
+      m.id
     ) : /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: R.product,
-        children: T
+        className: H.product,
+        children: B
       },
-      _.id
+      m.id
     );
   };
-  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 }),
+  return /* @__PURE__ */ t.jsxs("div", { className: H.productsBlock, children: [
+    (l || o !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: H.top, children: [
+      l && /* @__PURE__ */ t.jsx("h3", { className: H.title, children: l }),
       o !== void 0 && /* @__PURE__ */ t.jsx(
-        tt,
+        st,
         {
           current: o,
-          onChange: (_) => e == null ? void 0 : e(_)
+          onChange: (m) => e == null ? void 0 : e(m)
         }
       )
     ] }),
-    f && n && I && G && /* @__PURE__ */ t.jsx(
+    F && n && v && W && /* @__PURE__ */ t.jsx(
       Le,
       {
-        ref: q,
-        activeItem: f,
-        setActiveItem: E,
-        popupPosition: W,
-        modalOptions: I,
-        setIsOpenModal: A
+        ref: M,
+        activeItem: F,
+        setActiveItem: q,
+        popupPosition: X,
+        modalOptions: v,
+        setIsOpenModal: T
       }
     ),
-    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 && L && /* @__PURE__ */ t.jsx(Ot, { ...L }),
+    /* @__PURE__ */ t.jsxs("div", { className: H.products, children: [
+      r && /* @__PURE__ */ t.jsx("h5", { className: H.subtitle, children: r }),
       c ? /* @__PURE__ */ t.jsx(
-        $t,
+        Nt,
         {
-          sensors: H,
-          onDragEnd: j,
+          sensors: R,
+          onDragEnd: y,
           children: /* @__PURE__ */ t.jsx(
-            Nt,
+            wt,
             {
-              items: s.map((_) => _.id),
-              strategy: wt,
-              children: s.map((_, k) => M(_, k))
+              items: s.map((m) => m.id),
+              strategy: Ct,
+              children: s.map((m, k) => P(m, k))
             }
           )
         }
-      ) : s.map((_, k) => M(_, k)),
-      h && /* @__PURE__ */ t.jsx(
+      ) : s.map((m, k) => P(m, k)),
+      p && /* @__PURE__ */ t.jsx(
         "div",
         {
           style: {
@@ -712,45 +745,45 @@ const Ve = (r) => {
             justifyContent: "center"
           },
           children: /* @__PURE__ */ t.jsx(
-            Z,
+            lt,
             {
               withoutHover: !0,
-              className: F(R.button, {
-                [R.disabled]: !!(B && B <= s.length || s.length === (u == null ? void 0 : u.length))
+              className: U(H.button, {
+                [H.disabled]: !!(g && g <= 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)),
+              disabled: !!(g && g <= s.length || s.length === (u == null ? void 0 : u.length)),
               onClick: () => {
-                const _ = [...s];
+                const m = [...s];
                 let k = null;
                 if (u) {
-                  for (let T = 0; T < u.length; T++)
-                    if (!s.find((L) => L.id === u[T].id)) {
-                      k = u[T];
+                  for (let B = 0; B < u.length; B++)
+                    if (!s.find((E) => E.id === u[B].id)) {
+                      k = u[B];
                       break;
                     }
                 }
-                m === "select" && u ? _.push({
+                _ === "select" && u ? m.push({
                   name: k ? k.name : u[0].name,
                   id: (k == null ? void 0 : k.id) || u[0].id,
-                  ...D
-                }) : m === "input" ? _.push({
+                  ...O
+                }) : _ === "input" ? m.push({
                   name: "",
                   id: _t(),
-                  ...D
-                }) : _.push({
+                  ...O
+                }) : m.push({
                   name: `Image ${s.length + 1}`,
                   id: _t(),
-                  ...D
-                }), i(_);
+                  ...O
+                }), i(m);
               },
               style: {
                 width: "fit-content"
               },
-              children: /* @__PURE__ */ t.jsxs("div", { className: R.addButton, children: [
+              children: /* @__PURE__ */ t.jsxs("div", { className: H.addButton, children: [
                 /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
                 /* @__PURE__ */ t.jsx(
-                  v,
+                  j,
                   {
                     name: "Plus",
                     width: 16,
@@ -763,14 +796,14 @@ const Ve = (r) => {
         }
       )
     ] }),
-    a !== void 0 && /* @__PURE__ */ t.jsx(vt, { items: a }),
-    S !== void 0 && /* @__PURE__ */ t.jsx(
-      X,
+    a !== void 0 && /* @__PURE__ */ t.jsx(jt, { items: a }),
+    $ !== void 0 && /* @__PURE__ */ t.jsx(
+      K,
       {
         label: "Auto scroll interval",
         type: "number",
-        value: String(S.scrollInterval),
-        onChange: (_) => S.setScrollInterval(Number(_)),
+        value: String($.scrollInterval),
+        onChange: (m) => $.setScrollInterval(Number(m)),
         min: 0.1,
         max: 100,
         style: {
@@ -780,31 +813,31 @@ const Ve = (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,
+}, Ye = "_title_82zux_1", Ge = "_subtitle_82zux_5", Xe = "_header_82zux_12", We = "_text_82zux_13", Je = "_productsBlock_82zux_14", Qe = "_top_82zux_26", Ke = "_itemsBlock_82zux_35", Ze = "_typeTexts_82zux_41", ts = "_block_82zux_48", es = "_active_82zux_61", ss = "_products_82zux_14", ns = "_product_82zux_14", is = "_button_82zux_80", os = "_disabled_82zux_91", as = "_image_82zux_95", cs = "_info_82zux_102", ls = "_name_82zux_114", rs = "_buttons_82zux_118", ds = "_modal_82zux_125", us = "_link_82zux_145", ms = "_modalOptions_82zux_151", _s = "_addButton_82zux_157", hs = "_deleteButton_82zux_179", Q = {
+  title: Ye,
+  subtitle: Ge,
+  header: Xe,
+  text: We,
+  productsBlock: Je,
+  top: Qe,
+  itemsBlock: Ke,
+  typeTexts: Ze,
+  block: ts,
+  active: es,
+  products: ss,
+  product: ns,
+  button: is,
+  disabled: os,
+  image: as,
+  info: cs,
+  name: ls,
+  buttons: rs,
+  modal: ds,
+  link: us,
+  modalOptions: ms,
   addButton: _s,
-  deleteButton: ms
-}, fa = (r) => {
+  deleteButton: hs
+}, va = (d) => {
   const {
     isActiveItems: o,
     setIsActiveItems: e,
@@ -812,28 +845,28 @@ const Ve = (r) => {
     setItems: i,
     other: a,
     title: l,
-    subtitle: d,
+    subtitle: r,
     draggable: n = !1,
     withImage: c = !1,
-    addable: b = !0,
-    itemsOptions: g,
-    hasRangeSelector: h = !1,
-    rangeSelectorOptions: m,
-    limit: x,
+    addable: x = !0,
+    itemsOptions: h,
+    hasRangeSelector: p = !1,
+    rangeSelectorOptions: _,
+    limit: b,
     autoScrollInterval: u
-  } = r;
-  function C(I) {
+  } = d;
+  function C(v) {
     if (c)
-      return I ? /* @__PURE__ */ t.jsx(
+      return v ? /* @__PURE__ */ t.jsx(
         "img",
         {
-          src: `https://imagedelivery.net/${I[0]}/w=1000`,
+          src: `https://imagedelivery.net/${v[0]}/w=1000`,
           alt: "image",
           width: 16,
           height: 16
         }
       ) : /* @__PURE__ */ t.jsx(
-        v,
+        j,
         {
           name: "Image",
           width: 16,
@@ -842,12 +875,12 @@ const Ve = (r) => {
         }
       );
   }
-  const O = (I) => {
-    const D = g.find((S) => S.id === I);
-    if (!D) return;
-    const B = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+  const L = (v) => {
+    const O = h.find(($) => $.id === v);
+    if (!O) return;
+    const g = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       n && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-        v,
+        j,
         {
           name: "DotsSixVertical",
           hoverable: !0,
@@ -856,28 +889,28 @@ const Ve = (r) => {
         }
       ) }),
       /* @__PURE__ */ t.jsx(
-        nt,
+        et,
         {
-          onChange: (S) => {
-            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]);
+          onChange: ($) => {
+            const F = [...s], q = h.find((I) => I.name === $);
+            if (!q) return;
+            const X = q.id, D = F.map((I) => I === v ? X : I);
+            i([...D]);
           },
-          value: D.name,
-          options: g.filter((S) => !s.find((f) => f === S.id)).map((S) => S.name),
-          leftAddon: C(D.images)
+          value: O.name,
+          options: h.filter(($) => !s.find((F) => F === $.id)).map(($) => $.name),
+          leftAddon: C(O.images)
         }
       ),
       /* @__PURE__ */ t.jsx("div", { className: Q.buttons, children: /* @__PURE__ */ t.jsx("div", { className: Q.deleteButton, children: /* @__PURE__ */ t.jsx(
-        v,
+        j,
         {
           name: "Trash",
           hoverable: !0,
           width: 20,
           height: 20,
           fill: "#C12A2A",
-          onClick: () => i(s.filter((S) => S !== I))
+          onClick: () => i(s.filter(($) => $ !== v))
         }
       ) }) })
     ] });
@@ -885,27 +918,27 @@ const Ve = (r) => {
       "div",
       {
         className: Q.product,
-        children: B
+        children: g
       },
-      I
+      v
     );
   };
   return /* @__PURE__ */ t.jsxs("div", { className: Q.productsBlock, children: [
     (l || o !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: Q.top, children: [
       l && /* @__PURE__ */ t.jsx("h3", { className: Q.title, children: l }),
       o !== void 0 && /* @__PURE__ */ t.jsx(
-        tt,
+        st,
         {
           current: o,
-          onChange: (I) => e == null ? void 0 : e(I)
+          onChange: (v) => e == null ? void 0 : e(v)
         }
       )
     ] }),
-    h && m && /* @__PURE__ */ t.jsx(Mt, { ...m }),
+    p && _ && /* @__PURE__ */ t.jsx(Ot, { ..._ }),
     /* @__PURE__ */ t.jsxs("div", { className: Q.products, children: [
-      d && /* @__PURE__ */ t.jsx("h5", { className: Q.subtitle, children: d }),
-      s.map((I) => O(I)),
-      b && /* @__PURE__ */ t.jsx(
+      r && /* @__PURE__ */ t.jsx("h5", { className: Q.subtitle, children: r }),
+      s.map((v) => L(v)),
+      x && /* @__PURE__ */ t.jsx(
         "div",
         {
           style: {
@@ -915,25 +948,25 @@ const Ve = (r) => {
             gap: 5
           },
           children: /* @__PURE__ */ t.jsx(
-            Z,
+            lt,
             {
               withoutHover: !0,
-              className: F(Q.button, {
-                [Q.disabled]: !!(x && x <= s.length || s.length === g.length)
+              className: U(Q.button, {
+                [Q.disabled]: !!(b && b <= s.length || s.length === h.length)
               }),
               size: "s",
-              disabled: !!(x && x <= s.length || s.length === g.length),
+              disabled: !!(b && b <= s.length || s.length === h.length),
               onClick: () => {
-                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];
+                const v = [...s];
+                let O = null;
+                if (h) {
+                  for (let g = 0; g < h.length; g++)
+                    if (!s.find(($) => $ === h[g].id)) {
+                      O = h[g];
                       break;
                     }
                 }
-                I.push((D == null ? void 0 : D.id) || g[0].id), i(I);
+                v.push((O == null ? void 0 : O.id) || h[0].id), i(v);
               },
               style: {
                 width: "fit-content"
@@ -941,7 +974,7 @@ const Ve = (r) => {
               children: /* @__PURE__ */ t.jsxs("div", { className: Q.addButton, children: [
                 /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
                 /* @__PURE__ */ t.jsx(
-                  v,
+                  j,
                   {
                     name: "Plus",
                     width: 16,
@@ -954,14 +987,14 @@ const Ve = (r) => {
         }
       )
     ] }),
-    a !== void 0 && /* @__PURE__ */ t.jsx(vt, { items: a }),
+    a !== void 0 && /* @__PURE__ */ t.jsx(jt, { items: a }),
     u !== void 0 && /* @__PURE__ */ t.jsx(
-      X,
+      K,
       {
         label: "Auto scroll interval",
         type: "number",
         value: String(u.scrollInterval),
-        onChange: (I) => u.setScrollInterval(Number(I)),
+        onChange: (v) => u.setScrollInterval(Number(v)),
         min: 0.1,
         max: 100,
         style: {
@@ -971,35 +1004,35 @@ const Ve = (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) {
+}, ps = "_title_1vfw9_1", xs = "_subtitle_1vfw9_5", gs = "_header_1vfw9_12", fs = "_text_1vfw9_13", bs = "_productsBlock_1vfw9_14", vs = "_top_1vfw9_26", js = "_itemsBlock_1vfw9_35", ys = "_typeTexts_1vfw9_41", Is = "_block_1vfw9_48", ks = "_active_1vfw9_61", $s = "_products_1vfw9_14", Ns = "_product_1vfw9_14", ws = "_button_1vfw9_80", Cs = "_disabled_1vfw9_91", Bs = "_image_1vfw9_95", Ss = "_info_1vfw9_102", Ts = "_name_1vfw9_114", Ps = "_buttons_1vfw9_118", As = "_modal_1vfw9_125", Ms = "_link_1vfw9_145", Os = "_modalOptions_1vfw9_151", qs = "_addButton_1vfw9_164", Es = "_deleteButton_1vfw9_179", Ds = "_closeIcon_1vfw9_191", z = {
+  title: ps,
+  subtitle: xs,
+  header: gs,
+  text: fs,
+  productsBlock: bs,
+  top: vs,
+  itemsBlock: js,
+  typeTexts: ys,
+  block: Is,
+  active: ks,
+  products: $s,
+  product: Ns,
+  button: ws,
+  disabled: Cs,
+  image: Bs,
+  info: Ss,
+  name: Ts,
+  buttons: Ps,
+  modal: As,
+  link: Ms,
+  modalOptions: Os,
+  addButton: qs,
+  deleteButton: Es,
+  closeIcon: Ds
+}, Hs = f.forwardRef(
+  (d, o) => {
+    const { activeItem: e, setActiveItem: s, popupPosition: i, modalOptions: a, setIsOpenModal: l } = d;
+    function r(n, c) {
       return n.length > c ? `${n.slice(0, c)}...` : n;
     }
     return /* @__PURE__ */ t.jsxs(
@@ -1016,9 +1049,9 @@ const Ve = (r) => {
         },
         children: [
           /* @__PURE__ */ t.jsxs("div", { className: z.top, children: [
-            /* @__PURE__ */ t.jsx("h3", { className: z.title, children: d(e.name, 20) }),
+            /* @__PURE__ */ t.jsx("h3", { className: z.title, children: r(e.name, 20) }),
             /* @__PURE__ */ t.jsx("div", { className: z.closeIcon, children: /* @__PURE__ */ t.jsx(
-              v,
+              j,
               {
                 name: "X",
                 height: 20,
@@ -1033,16 +1066,16 @@ const Ve = (r) => {
           /* @__PURE__ */ t.jsx("div", { className: z.modalOptions, children: a.map((n) => {
             if (n.type === "image")
               return /* @__PURE__ */ t.jsx(
-                gt,
+                ft,
                 {
                   label: "Put up an attractive image",
                   activeImage: e[n.field],
                   onChange: (c) => {
-                    const b = {
+                    const x = {
                       ...e,
                       [n.field]: c
                     };
-                    s(b);
+                    s(x);
                   }
                 },
                 String(n.field)
@@ -1053,33 +1086,41 @@ const Ve = (r) => {
                 {
                   typesText: e[n.field.type],
                   setTypesText: (c) => {
-                    const b = {
+                    const x = {
                       ...e,
                       [n.field.type]: c
                     };
-                    s(b);
+                    s(x);
                   },
                   text: e[n.field.text] || "",
                   setText: (c) => {
-                    const b = {
+                    const x = {
                       ...e,
                       [n.field.text]: c
                     };
-                    s(b);
+                    s(x);
+                  },
+                  typeFont: e[n.field.type],
+                  setTypeFont: (c) => {
+                    const x = {
+                      ...e,
+                      [n.field.type]: c
+                    };
+                    s(x);
                   },
                   subtitle: n.label
                 }
               );
             if (n.type === "input")
               return /* @__PURE__ */ t.jsx(
-                X,
+                K,
                 {
                   onChange: (c) => {
-                    const b = {
+                    const x = {
                       ...e,
                       [n.field]: c
                     };
-                    s(b);
+                    s(x);
                   },
                   value: e[n.field] || "",
                   label: n.label,
@@ -1089,14 +1130,14 @@ const Ve = (r) => {
             if (n.type === "inputSwitch")
               return /* @__PURE__ */ t.jsxs("div", { className: z.link, children: [
                 /* @__PURE__ */ t.jsx(
-                  X,
+                  K,
                   {
                     onChange: (c) => {
-                      const b = {
+                      const x = {
                         ...e,
                         [n.field.text]: c
                       };
-                      s(b);
+                      s(x);
                     },
                     value: e[n.field.text] || "",
                     label: n.inputLabel,
@@ -1104,35 +1145,35 @@ const Ve = (r) => {
                   }
                 ),
                 /* @__PURE__ */ t.jsx(
-                  tt,
+                  st,
                   {
                     current: !!e[n.field.switch] || !1,
                     label: n.switchLabel,
                     onChange: (c) => {
-                      const b = {
+                      const x = {
                         ...e,
                         [n.field.switch]: c
                       };
-                      s(b);
+                      s(x);
                     }
                   }
                 )
               ] });
             if (n.type === "select")
               return /* @__PURE__ */ t.jsx(
-                nt,
+                et,
                 {
                   options: n.itemsOptions,
                   onChange: (c) => {
-                    const b = {
+                    const x = {
                       ...e,
                       [n.field]: c
                     };
-                    s(b);
+                    s(x);
                   },
                   label: n.label,
                   value: e[n.field] || "String",
-                  leftAddon: n.leftAddon && n.leftAddon === "icon" && /* @__PURE__ */ t.jsx(v, { name: e[n.field] })
+                  leftAddon: n.leftAddon && n.leftAddon === "icon" && /* @__PURE__ */ t.jsx(j, { name: e[n.field] })
                 }
               );
           }) })
@@ -1141,12 +1182,12 @@ const Ve = (r) => {
     );
   }
 );
-function Ls(r) {
-  const { product: o, children: e } = r, { attributes: s, listeners: i, setNodeRef: a, transform: l, transition: d, isDragging: n } = Bt({
+function Ls(d) {
+  const { product: o, children: e } = d, { attributes: s, listeners: i, setNodeRef: a, transform: l, transition: r, isDragging: n } = St({
     id: o.id
   }), c = {
-    transform: St.Transform.toString(l),
-    transition: d
+    transform: Tt.Transform.toString(l),
+    transition: r
   };
   return /* @__PURE__ */ t.jsx(
     "div",
@@ -1160,7 +1201,7 @@ function Ls(r) {
     }
   );
 }
-const ba = (r) => {
+const ja = (d) => {
   const {
     isActiveItems: o,
     setIsActiveItems: e,
@@ -1168,71 +1209,71 @@ const ba = (r) => {
     setItems: i,
     other: a,
     title: l,
-    subtitle: d,
+    subtitle: r,
     editable: n = !0,
     draggable: c = !1,
-    withImage: b = !1,
-    deletable: g = !0,
-    addable: h = !0,
-    itemsType: m,
-    itemsPlaceholder: x = "",
+    withImage: x = !1,
+    deletable: h = !0,
+    addable: p = !0,
+    itemsType: _,
+    itemsPlaceholder: b = "",
     itemsOptions: u,
     hasRangeSelector: C = !1,
-    rangeSelectorOptions: O,
-    modalOptions: I,
-    addableOptions: D = {}
-  } = r, [B, S] = p.useState(null), [f, E] = p.useState({
+    rangeSelectorOptions: L,
+    modalOptions: v,
+    addableOptions: O = {}
+  } = d, [g, $] = f.useState(null), [F, q] = f.useState({
     top: 0,
     left: 0
-  }), [W, et] = p.useState(null), y = p.useRef(null), [$, q] = p.useState(!1), G = It(
-    kt(Ct, {
+  }), [X, D] = f.useState(null), I = f.useRef(null), [A, M] = f.useState(!1), W = kt(
+    $t(Bt, {
       activationConstraint: {
         distance: 5
       }
     })
   );
-  p.useEffect(() => {
-    const j = () => {
-      S(null), q(!1);
+  f.useEffect(() => {
+    const y = () => {
+      $(null), M(!1);
     };
-    return document.body.addEventListener("click", j), S(null), q(!1), () => {
-      S(null), q(!1), document.body.removeEventListener("click", j);
+    return document.body.addEventListener("click", y), $(null), M(!1), () => {
+      $(null), M(!1), document.body.removeEventListener("click", y);
     };
-  }, []), p.useEffect(() => {
-    if (B) {
-      const j = [...s].map((M) => M.id === B.id ? B : M);
-      i(j);
+  }, []), f.useEffect(() => {
+    if (g) {
+      const y = [...s].map((P) => P.id === g.id ? g : P);
+      i(y);
     }
-  }, [B]), p.useEffect(() => {
-    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: W.left
+  }, [g]), f.useEffect(() => {
+    if (I.current && X) {
+      const y = I.current.getBoundingClientRect().height, P = window.innerHeight;
+      let m = X.top;
+      m + y > P + window.scrollY - 200 && (m = P + window.scrollY - y - 200), m < 0 && (m = 10), q({
+        top: m,
+        left: X.left
       });
     }
-  }, [y.current, W]);
-  const A = (j, M) => {
-    j.stopPropagation();
-    const _ = j.target.getBoundingClientRect();
-    et({
-      top: _.top + window.scrollY,
-      left: _.left - 30
-    }), S(M), q(!0);
+  }, [I.current, X]);
+  const T = (y, P) => {
+    y.stopPropagation();
+    const m = y.target.getBoundingClientRect();
+    D({
+      top: m.top + window.scrollY,
+      left: m.left - 30
+    }), $(P), M(!0);
   };
-  function H(j) {
-    if (b)
-      return j ? /* @__PURE__ */ t.jsx(
+  function R(y) {
+    if (x)
+      return y ? /* @__PURE__ */ t.jsx(
         "img",
         {
-          src: `https://imagedelivery.net/${j[0]}/w=1000`,
+          src: `https://imagedelivery.net/${y[0]}/w=1000`,
           alt: "image",
           width: 16,
           height: 16
         }
       ) : /* @__PURE__ */ t.jsx(
-        v,
+        j,
         {
           name: "Image",
           width: 16,
@@ -1241,20 +1282,20 @@ const ba = (r) => {
         }
       );
   }
-  const K = (j) => {
-    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);
+  const Z = (y) => {
+    const { active: P, over: m } = y;
+    if (m && P.id !== m.id) {
+      const k = s.findIndex((E) => E.id === P.id), B = s.findIndex((E) => E.id === m.id);
+      if (k !== -1 && B !== -1) {
+        const E = [...s], [Y] = E.splice(k, 1);
+        E.splice(B, 0, Y), i(E);
       }
     }
-  }, lt = (j) => {
-    var _;
-    const M = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+  }, rt = (y) => {
+    var m;
+    const P = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       c && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-        v,
+        j,
         {
           name: "DotsSixVertical",
           hoverable: !0,
@@ -1262,71 +1303,71 @@ const ba = (r) => {
           height: 20
         }
       ) }),
-      m === "select" && u && /* @__PURE__ */ t.jsx(
-        nt,
+      _ === "select" && u && /* @__PURE__ */ t.jsx(
+        et,
         {
           onChange: (k) => {
-            const L = [...s].map((U) => U.id === j.id ? {
-              ...j,
+            const E = [...s].map((Y) => Y.id === y.id ? {
+              ...y,
               name: k
-            } : U);
-            S({
-              ...j,
+            } : Y);
+            $({
+              ...y,
               name: k
-            }), i([...L]);
+            }), i([...E]);
           },
-          value: j.name,
-          options: u.filter((k) => !s.find((T) => T.name === k)),
-          leftAddon: H(j.images)
+          value: y.name,
+          options: u.filter((k) => !s.find((B) => B.name === k)),
+          leftAddon: R(y.images)
         }
       ),
-      m === "input" && /* @__PURE__ */ t.jsx(
-        X,
+      _ === "input" && /* @__PURE__ */ t.jsx(
+        K,
         {
           onChange: (k) => {
-            const L = [...s].map((U) => U.id === j.id ? {
-              ...j,
+            const E = [...s].map((Y) => Y.id === y.id ? {
+              ...y,
               name: k
-            } : U);
-            i([...L]);
+            } : Y);
+            i([...E]);
           },
-          value: j.name,
-          placeholder: x
+          value: y.name,
+          placeholder: b
         }
       ),
-      m === "image" && /* @__PURE__ */ t.jsx(
-        gt,
+      _ === "image" && /* @__PURE__ */ t.jsx(
+        ft,
         {
           onChange: (k) => {
-            const L = [...s].map((U) => U.id === j.id ? {
-              ...j,
+            const E = [...s].map((Y) => Y.id === y.id ? {
+              ...y,
               images: k
-            } : U);
-            i([...L]);
+            } : Y);
+            i([...E]);
           },
-          activeImage: (_ = s.find((k) => k.id === j.id)) == null ? void 0 : _.images[0]
+          activeImage: (m = s.find((k) => k.id === y.id)) == null ? void 0 : m.images[0]
         }
       ),
       /* @__PURE__ */ t.jsxs("div", { className: z.buttons, children: [
         n && /* @__PURE__ */ t.jsx("div", { className: z.deleteButton, children: /* @__PURE__ */ t.jsx(
-          v,
+          j,
           {
             name: "Sliders",
             hoverable: !0,
             width: 20,
             height: 20,
-            onClick: (k) => A(k, j)
+            onClick: (k) => T(k, y)
           }
         ) }),
-        g && /* @__PURE__ */ t.jsx("div", { className: z.deleteButton, children: /* @__PURE__ */ t.jsx(
-          v,
+        h && /* @__PURE__ */ t.jsx("div", { className: z.deleteButton, children: /* @__PURE__ */ t.jsx(
+          j,
           {
             name: "Trash",
             hoverable: !0,
             width: 20,
             height: 20,
             fill: "#C12A2A",
-            onClick: () => i(s.filter((k) => k.id !== j.id))
+            onClick: () => i(s.filter((k) => k.id !== y.id))
           }
         ) })
       ] })
@@ -1334,60 +1375,60 @@ const ba = (r) => {
     return c ? /* @__PURE__ */ t.jsx(
       Ls,
       {
-        product: j,
-        children: M
+        product: y,
+        children: P
       },
-      j.id
+      y.id
     ) : /* @__PURE__ */ t.jsx(
       "div",
       {
         className: z.product,
-        children: M
+        children: P
       },
-      j.id
+      y.id
     );
   };
   return /* @__PURE__ */ t.jsxs("div", { className: z.productsBlock, children: [
     (l || o !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: z.top, children: [
       l && /* @__PURE__ */ t.jsx("h3", { className: z.title, children: l }),
       o !== void 0 && /* @__PURE__ */ t.jsx(
-        tt,
+        st,
         {
           current: o,
-          onChange: (j) => e == null ? void 0 : e(j)
+          onChange: (y) => e == null ? void 0 : e(y)
         }
       )
     ] }),
-    B && n && I && $ && /* @__PURE__ */ t.jsx(
-      Ds,
+    g && n && v && A && /* @__PURE__ */ t.jsx(
+      Hs,
       {
-        ref: y,
-        activeItem: B,
-        setActiveItem: S,
-        popupPosition: f,
-        modalOptions: I,
-        setIsOpenModal: q
+        ref: I,
+        activeItem: g,
+        setActiveItem: $,
+        popupPosition: F,
+        modalOptions: v,
+        setIsOpenModal: M
       }
     ),
-    C && O && /* @__PURE__ */ t.jsx(Mt, { ...O }),
+    C && L && /* @__PURE__ */ t.jsx(Ot, { ...L }),
     /* @__PURE__ */ t.jsxs("div", { className: z.products, children: [
-      d && /* @__PURE__ */ t.jsx("h5", { className: z.subtitle, children: d }),
+      r && /* @__PURE__ */ t.jsx("h5", { className: z.subtitle, children: r }),
       c ? /* @__PURE__ */ t.jsx(
-        $t,
+        Nt,
         {
-          sensors: G,
-          onDragEnd: K,
+          sensors: W,
+          onDragEnd: Z,
           children: /* @__PURE__ */ t.jsx(
-            Nt,
+            wt,
             {
-              items: s.map((j) => j.id),
-              strategy: wt,
-              children: s.map((j) => lt(j))
+              items: s.map((y) => y.id),
+              strategy: Ct,
+              children: s.map((y) => rt(y))
             }
           )
         }
-      ) : s.map((j) => lt(j)),
-      h && /* @__PURE__ */ t.jsx(
+      ) : s.map((y) => rt(y)),
+      p && /* @__PURE__ */ t.jsx(
         "div",
         {
           style: {
@@ -1396,38 +1437,38 @@ const ba = (r) => {
             justifyContent: "center"
           },
           children: /* @__PURE__ */ t.jsx(
-            Z,
+            lt,
             {
               withoutHover: !0,
               className: z.button,
               size: "s",
               onClick: () => {
-                const j = [...s];
-                let M = null;
+                const y = [...s];
+                let P = null;
                 if (u) {
-                  for (let _ = 0; _ < u.length; _++)
-                    if (!s.find((k) => k.name === u[_])) {
-                      M = u[_];
+                  for (let m = 0; m < u.length; m++)
+                    if (!s.find((k) => k.name === u[m])) {
+                      P = u[m];
                       break;
                     }
                 }
-                m === "select" && u ? j.push({
-                  name: M || u[0],
+                _ === "select" && u ? y.push({
+                  name: P || u[0],
                   id: _t(),
-                  ...D,
+                  ...O,
                   maxSymbols: 100
                   // пример значения
-                }) : m === "input" ? j.push({
+                }) : _ === "input" ? y.push({
                   name: "",
                   id: _t(),
-                  ...D,
+                  ...O,
                   maxSymbols: 100
-                }) : j.push({
+                }) : y.push({
                   name: `Image ${s.length + 1}`,
                   id: _t(),
-                  ...D,
+                  ...O,
                   maxSymbols: 100
-                }), i(j);
+                }), i(y);
               },
               style: {
                 width: "fit-content"
@@ -1435,7 +1476,7 @@ const ba = (r) => {
               children: /* @__PURE__ */ t.jsxs("div", { className: z.addButton, children: [
                 /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
                 /* @__PURE__ */ t.jsx(
-                  v,
+                  j,
                   {
                     name: "Plus",
                     width: 16,
@@ -1448,51 +1489,51 @@ const ba = (r) => {
         }
       )
     ] }),
-    a !== void 0 && /* @__PURE__ */ t.jsx(vt, { items: a })
+    a !== void 0 && /* @__PURE__ */ t.jsx(jt, { items: a })
   ] });
-}, 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 = {
+}, Rs = "_title_bn7sv_1", zs = "_subtitle_bn7sv_5", Fs = "_header_bn7sv_12", Vs = "_text_bn7sv_13", Us = "_productsBlock_bn7sv_14", Ys = "_buttonsBlock_bn7sv_15", Gs = "_top_bn7sv_26", Xs = "_itemsBlock_bn7sv_35", Ws = "_typeTexts_bn7sv_41", Js = "_block_bn7sv_48", Qs = "_active_bn7sv_60", Ks = "_products_bn7sv_14", Zs = "_product_bn7sv_14", tn = "_button_bn7sv_15", en = "_image_bn7sv_90", sn = "_info_bn7sv_97", nn = "_name_bn7sv_109", on = "_buttons_bn7sv_15", an = "_modal_bn7sv_120", cn = "_other_bn7sv_139", ln = "_options_bn7sv_145", rn = "_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(() => {
+  subtitle: zs,
+  header: Fs,
+  text: Vs,
+  productsBlock: Us,
+  buttonsBlock: Ys,
+  top: Gs,
+  itemsBlock: Xs,
+  typeTexts: Ws,
+  block: Js,
+  active: Qs,
+  products: Ks,
+  product: Zs,
+  button: tn,
+  image: en,
+  info: sn,
+  name: nn,
+  buttons: on,
+  modal: an,
+  other: cn,
+  options: ln,
+  closeIcon: rn
+}, dn = f.forwardRef((d, o) => {
+  const { activeButton: e, setActiveButton: s, popupPosition: i } = d, [a, l] = f.useState(e.typesText), [r, n] = f.useState(e.destination), [c, x] = f.useState(e.page), [h, p] = f.useState(e.link || ""), [_, b] = f.useState(e.text || ""), [u, C] = f.useState(e.openInNewTab), { pages: L } = Vt();
+  return f.useEffect(() => {
     s({
       ...e,
       ...{
-        text: m,
-        link: g,
-        destination: d,
+        text: _,
+        link: h,
+        destination: r,
         typesText: a,
         page: c,
         openInNewTab: u
       }
     });
-  }, [a, d, g, m, c, u]), /* @__PURE__ */ t.jsxs(
+  }, [a, r, h, _, c, u]), /* @__PURE__ */ t.jsxs(
     "div",
     {
       className: ct.modal,
-      onClick: (I) => {
-        I.stopPropagation();
+      onClick: (v) => {
+        v.stopPropagation();
       },
       style: {
         top: `${i.top}px`,
@@ -1503,7 +1544,7 @@ const ba = (r) => {
         /* @__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,
+            j,
             {
               name: "X",
               height: 20,
@@ -1515,44 +1556,44 @@ const ba = (r) => {
         ] }),
         /* @__PURE__ */ t.jsxs("div", { className: ct.options, children: [
           /* @__PURE__ */ t.jsx(
-            nt,
+            et,
             {
               label: "Destination",
-              onChange: (I) => n(I),
-              options: ["Go to Page", "Open Link"].filter((I) => I !== d),
-              value: d
+              onChange: (v) => n(v),
+              options: ["Go to Page", "Open Link"].filter((v) => v !== r),
+              value: r
             }
           ),
-          d === "Go to Page" ? /* @__PURE__ */ t.jsx(
-            nt,
+          r === "Go to Page" ? /* @__PURE__ */ t.jsx(
+            et,
             {
               label: "Go to",
-              onChange: (I) => b(I),
-              options: O ? Object.values(O).filter((I) => I.name !== c).map((I) => I.name) : [],
+              onChange: (v) => x(v),
+              options: L ? Object.values(L).filter((v) => v.name !== c).map((v) => v.name) : [],
               value: c
             }
           ) : /* @__PURE__ */ t.jsx(
-            X,
+            K,
             {
-              onChange: (I) => h(I),
-              value: g,
+              onChange: (v) => p(v),
+              value: h,
               placeholder: "https://",
               label: "Link"
             }
           ),
           /* @__PURE__ */ t.jsx(
-            tt,
+            st,
             {
               current: e.openInNewTab,
               label: "Open in new tab",
-              onChange: (I) => C(I)
+              onChange: (v) => C(v)
             }
           ),
           /* @__PURE__ */ t.jsx(
-            Ot,
+            qt,
             {
-              onChange: (I) => x(I),
-              value: m,
+              onChange: (v) => b(v),
+              value: _,
               label: "Text",
               maxLength: 150
             }
@@ -1568,106 +1609,106 @@ const ba = (r) => {
       ]
     }
   );
-}), 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,
+}), un = "_subtitle_jql1y_1", mn = "_header_jql1y_8", _n = "_text_jql1y_9", hn = "_productsBlock_jql1y_10", pn = "_buttonsBlock_jql1y_11", xn = "_top_jql1y_23", gn = "_itemsBlock_jql1y_32", fn = "_typeTexts_jql1y_38", bn = "_block_jql1y_45", vn = "_active_jql1y_58", jn = "_products_jql1y_10", yn = "_product_jql1y_10", In = "_button_jql1y_11", kn = "_image_jql1y_88", $n = "_info_jql1y_95", Nn = "_name_jql1y_107", wn = "_buttons_jql1y_11", Cn = "_modal_jql1y_118", Bn = "_other_jql1y_138", Sn = "_options_jql1y_144", Tn = "_addButton_jql1y_150", Pn = "_deleteButton_jql1y_165", it = {
+  subtitle: un,
+  header: mn,
   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({
+  productsBlock: hn,
+  buttonsBlock: pn,
+  top: xn,
+  itemsBlock: gn,
+  typeTexts: fn,
+  block: bn,
+  active: vn,
+  products: jn,
+  product: yn,
+  button: In,
+  image: kn,
+  info: $n,
+  name: Nn,
+  buttons: wn,
+  modal: Cn,
+  other: Bn,
+  options: Sn,
+  addButton: Tn,
+  deleteButton: Pn
+}, An = (d) => {
+  const { buttons: o, setButtons: e, deletable: s = !0, addable: i = !0 } = d, [a, l] = f.useState(null), [r, n] = f.useState({
     top: 0,
     left: 0
-  }), [c, b] = p.useState(null), g = p.useRef(null);
-  p.useEffect(() => {
-    const m = () => {
+  }), [c, x] = f.useState(null), h = f.useRef(null);
+  f.useEffect(() => {
+    const _ = () => {
       l(null);
     };
-    return document.body.addEventListener("click", m), l(null), () => {
-      l(null), document.body.removeEventListener("click", m);
+    return document.body.addEventListener("click", _), l(null), () => {
+      l(null), document.body.removeEventListener("click", _);
     };
-  }, []), p.useEffect(() => {
+  }, []), f.useEffect(() => {
     if (a) {
-      const m = [...o].map((x) => x.id === a.id ? a : x);
-      e(m);
+      const _ = [...o].map((b) => b.id === a.id ? a : b);
+      e(_);
     }
-  }, [a]), p.useEffect(() => {
-    if (g.current && c) {
-      const m = g.current.getBoundingClientRect().height, x = window.innerHeight;
+  }, [a]), f.useEffect(() => {
+    if (h.current && c) {
+      const _ = h.current.getBoundingClientRect().height, b = window.innerHeight;
       let u = c.top;
-      u + m > x + window.scrollY - 200 && (u = x + window.scrollY - m - 200), u < 0 && (u = 10), n({
+      u + _ > b + window.scrollY - 200 && (u = b + window.scrollY - _ - 200), u < 0 && (u = 10), n({
         top: u,
         left: c.left
       });
     }
-  }, [g.current, c]);
-  const h = (m, x) => {
-    m.stopPropagation();
-    const u = m.target.getBoundingClientRect();
-    b({
+  }, [h.current, c]);
+  const p = (_, b) => {
+    _.stopPropagation();
+    const u = _.target.getBoundingClientRect();
+    x({
       top: u.top + window.scrollY,
       left: u.left - 30
-    }), l(x);
+    }), l(b);
   };
   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(
+    o.map((_) => /* @__PURE__ */ t.jsxs(
       "div",
       {
         className: it.product,
         children: [
           /* @__PURE__ */ t.jsx(
-            nt,
+            et,
             {
-              onChange: (x) => {
-                const C = [...o].map((O) => O.id === m.id ? {
-                  ...m,
-                  type: x
-                } : O);
+              onChange: (b) => {
+                const C = [...o].map((L) => L.id === _.id ? {
+                  ..._,
+                  type: b
+                } : L);
                 e(C);
               },
-              value: m.type,
+              value: _.type,
               options: ["Primary", "Secondary", "Tertiary"]
             }
           ),
           /* @__PURE__ */ t.jsxs("div", { className: it.buttons, children: [
             /* @__PURE__ */ t.jsx("div", { className: it.deleteButton, children: /* @__PURE__ */ t.jsx(
-              v,
+              j,
               {
                 name: "Sliders",
                 hoverable: !0,
                 width: 20,
                 height: 20,
-                onClick: (x) => {
-                  h(x, m);
+                onClick: (b) => {
+                  p(b, _);
                 }
               }
             ) }),
             s && /* @__PURE__ */ t.jsx("div", { className: it.deleteButton, children: /* @__PURE__ */ t.jsx(
-              v,
+              j,
               {
                 name: "Trash",
                 hoverable: !0,
                 onClick: () => {
-                  const x = o.filter((u) => u.id !== m.id);
-                  e(x);
+                  const b = o.filter((u) => u.id !== _.id);
+                  e(b);
                 },
                 width: 20,
                 height: 20,
@@ -1677,15 +1718,15 @@ const ba = (r) => {
           ] })
         ]
       },
-      m.id
+      _.id
     )),
     a && /* @__PURE__ */ t.jsx(
-      rn,
+      dn,
       {
-        ref: g,
+        ref: h,
         activeButton: a,
         setActiveButton: l,
-        popupPosition: d
+        popupPosition: r
       }
     ),
     i && /* @__PURE__ */ t.jsx(
@@ -1697,14 +1738,14 @@ const ba = (r) => {
           justifyContent: "center"
         },
         children: /* @__PURE__ */ t.jsx(
-          Z,
+          lt,
           {
             withoutHover: !0,
             className: it.button,
             size: "s",
             onClick: () => {
-              const m = [...o];
-              m.push({
+              const _ = [...o];
+              _.push({
                 type: "Primary",
                 id: _t(),
                 typesText: [],
@@ -1712,7 +1753,7 @@ const ba = (r) => {
                 text: "Button Name",
                 page: "home",
                 openInNewTab: !0
-              }), e(m);
+              }), e(_);
             },
             style: {
               width: "fit-content"
@@ -1720,7 +1761,7 @@ const ba = (r) => {
             children: /* @__PURE__ */ t.jsxs("div", { className: it.addButton, children: [
               /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
               /* @__PURE__ */ t.jsx(
-                v,
+                j,
                 {
                   name: "Plus",
                   width: 16,
@@ -1733,13 +1774,13 @@ const ba = (r) => {
       }
     )
   ] });
-}, va = (r) => {
-  const { isActiveButtons: o, setIsActiveButtons: e, buttons: s, setButtons: i } = r;
+}, ya = (d) => {
+  const { isActiveButtons: o, setIsActiveButtons: e, buttons: s, setButtons: i } = d;
   return /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsxs("div", { className: ct.buttonsBlock, children: [
     /* @__PURE__ */ t.jsxs("div", { className: ct.top, children: [
       /* @__PURE__ */ t.jsx("h3", { className: ct.title, children: "Buttons" }),
       /* @__PURE__ */ t.jsx(
-        tt,
+        st,
         {
           current: o,
           onChange: (a) => e(a)
@@ -1747,59 +1788,59 @@ const ba = (r) => {
       )
     ] }),
     /* @__PURE__ */ t.jsx(
-      Pn,
+      An,
       {
         buttons: s,
         setButtons: 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,
+}, Mn = "_wrapper_m18qi_1", On = "_subtitle_m18qi_7", qn = "_content_m18qi_14", En = "_range_m18qi_22", Dn = "_track_m18qi_27", Hn = "_progress_m18qi_36", Ln = "_dots_m18qi_46", Rn = "_dot_m18qi_46", zn = "_active_m18qi_65", Fn = "_input_m18qi_77", Vn = "_countBlock_m18qi_91", Un = "_count_m18qi_91", Yn = "_controls_m18qi_107", Gn = "_button_m18qi_113", G = {
+  wrapper: Mn,
+  subtitle: On,
+  content: qn,
+  range: En,
+  track: Dn,
+  progress: Hn,
   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 = () => {
+  active: zn,
+  input: Fn,
+  countBlock: Vn,
+  count: Un,
+  controls: Yn,
+  button: Gn
+}, Ot = (d) => {
+  const { label: o, min: e = 1, max: s = 4, step: i = 1, count: a, setCount: l } = d, [r, n] = f.useState(!1), c = Array.from({ length: (s - e) / i + 1 }), x = (a - e) / (s - e) * 100, h = () => {
     a < s && l(a + i);
-  }, h = () => {
+  }, p = () => {
     a > e && l(a - i);
-  }, m = (x) => {
-    const u = e + x * i;
+  }, _ = (b) => {
+    const u = e + b * i;
     l(u);
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: Y.wrapper, children: [
-    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 }),
+  return /* @__PURE__ */ t.jsxs("div", { className: G.wrapper, children: [
+    o && /* @__PURE__ */ t.jsx("h5", { className: G.subtitle, children: o }),
+    /* @__PURE__ */ t.jsxs("div", { className: G.content, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: G.range, children: [
+        /* @__PURE__ */ t.jsx("div", { className: G.track }),
         /* @__PURE__ */ t.jsx(
           "div",
           {
-            className: Y.progress,
-            style: { width: `${b}%` }
+            className: G.progress,
+            style: { width: `${x}%` }
           }
         ),
-        /* @__PURE__ */ t.jsx("div", { className: Y.dots, children: c.map((x, u) => {
+        /* @__PURE__ */ t.jsx("div", { className: G.dots, children: c.map((b, u) => {
           const C = u <= (a - e) / i;
           return /* @__PURE__ */ t.jsx(
             "button",
             {
-              onClick: () => m(u),
-              className: F(Y.dot, {
-                [Y.active]: C,
-                [Y.inactive]: !C,
-                [Y.dragging]: d
+              onClick: () => _(u),
+              className: U(G.dot, {
+                [G.active]: C,
+                [G.inactive]: !C,
+                [G.dragging]: r
               }),
               "aria-label": `Set value to ${e + u * i}`
             },
@@ -1814,40 +1855,40 @@ const ba = (r) => {
             max: s,
             step: i,
             value: a,
-            onChange: (x) => l(Number(x.target.value)),
+            onChange: (b) => l(Number(b.target.value)),
             onMouseDown: () => n(!0),
             onMouseUp: () => n(!1),
             onTouchStart: () => n(!0),
             onTouchEnd: () => n(!1),
-            className: Y.input
+            className: G.input
           }
         )
       ] }),
-      /* @__PURE__ */ t.jsxs("div", { className: Y.countBlock, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: G.countBlock, children: [
         /* @__PURE__ */ t.jsx(
-          X,
+          K,
           {
             type: "number",
             min: e,
             max: s,
             paddingless: !0,
-            onChange: (x) => {
-              const u = Number(x);
+            onChange: (b) => {
+              const u = Number(b);
               u > s ? l(s) : u < e ? l(e) : l(u);
             },
             value: String(a)
           }
         ),
-        /* @__PURE__ */ t.jsxs("div", { className: Y.controls, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: G.controls, children: [
           /* @__PURE__ */ t.jsx(
             "button",
             {
-              onClick: g,
+              onClick: h,
               disabled: a >= s,
-              className: Y.button,
+              className: G.button,
               "aria-label": "Increment count",
               children: /* @__PURE__ */ t.jsx(
-                v,
+                j,
                 {
                   name: "CaretUp",
                   width: 15,
@@ -1859,12 +1900,12 @@ const ba = (r) => {
           /* @__PURE__ */ t.jsx(
             "button",
             {
-              onClick: h,
+              onClick: p,
               disabled: a <= e,
-              className: Y.button,
+              className: G.button,
               "aria-label": "Decrement count",
               children: /* @__PURE__ */ t.jsx(
-                v,
+                j,
                 {
                   name: "CaretDown",
                   width: 15,
@@ -1877,34 +1918,34 @@ const ba = (r) => {
       ] })
     ] })
   ] });
-}, 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,
+}, Xn = "_title_ix5ax_1", Wn = "_subtitle_ix5ax_5", Jn = "_header_ix5ax_12", Qn = "_text_ix5ax_13", Kn = "_productsBlock_ix5ax_14", Zn = "_top_ix5ax_26", ti = "_itemsBlock_ix5ax_35", ei = "_typeTexts_ix5ax_41", si = "_block_ix5ax_48", ni = "_active_ix5ax_61", ii = "_products_ix5ax_14", oi = "_product_ix5ax_14", ai = "_button_ix5ax_80", ci = "_image_ix5ax_91", li = "_info_ix5ax_98", ri = "_name_ix5ax_110", di = "_buttons_ix5ax_114", ui = "_modal_ix5ax_121", mi = "_link_ix5ax_141", _i = "_modalOptions_ix5ax_147", hi = "_addButton_ix5ax_160", pi = "_deleteButton_ix5ax_175", xi = "_closeIcon_ix5ax_187", V = {
+  title: Xn,
+  subtitle: Wn,
+  header: Jn,
+  text: Qn,
+  productsBlock: Kn,
+  top: Zn,
+  itemsBlock: ti,
+  typeTexts: ei,
+  block: si,
+  active: ni,
+  products: ii,
+  product: oi,
+  button: ai,
+  image: ci,
+  info: li,
+  name: ri,
+  buttons: di,
+  modal: ui,
+  link: mi,
   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);
+  addButton: hi,
+  deleteButton: pi,
+  closeIcon: xi
+}, gi = (d) => {
+  const { activeItem: o, setActiveItem: e, popupPosition: s, setIsOpenModal: i, itemsOptions: a } = d, l = a.find((n) => n.id === o.listingId);
   if (!l) return null;
-  function d(n, c) {
+  function r(n, c) {
     return n.length > c ? `${n.slice(0, c)}...` : n;
   }
   return /* @__PURE__ */ t.jsxs(
@@ -1920,9 +1961,9 @@ const ba = (r) => {
       },
       children: [
         /* @__PURE__ */ t.jsxs("div", { className: V.top, children: [
-          /* @__PURE__ */ t.jsx("h3", { children: d(l.productData.name, 20) }),
+          /* @__PURE__ */ t.jsx("h3", { children: r(l.productData.name, 20) }),
           /* @__PURE__ */ t.jsx("div", { className: V.closeIcon, children: /* @__PURE__ */ t.jsx(
-            v,
+            j,
             {
               name: "X",
               height: 20,
@@ -1934,7 +1975,7 @@ const ba = (r) => {
           ) })
         ] }),
         /* @__PURE__ */ t.jsx("div", { className: V.modalOptions, children: /* @__PURE__ */ t.jsx(
-          gt,
+          ft,
           {
             label: "Put up an attractive image",
             activeImage: l.productData.images.length > 0 ? l.productData.images[0].cfId : void 0,
@@ -1951,12 +1992,12 @@ const ba = (r) => {
     }
   );
 };
-function gi(r) {
-  const { product: o, children: e } = r, { attributes: s, listeners: i, setNodeRef: a, transform: l, transition: d, isDragging: n } = Bt({
+function fi(d) {
+  const { product: o, children: e } = d, { attributes: s, listeners: i, setNodeRef: a, transform: l, transition: r, isDragging: n } = St({
     id: String(o.listingId)
   }), c = {
-    transform: St.Transform.toString(l),
-    transition: d
+    transform: Tt.Transform.toString(l),
+    transition: r
   };
   return /* @__PURE__ */ t.jsx(
     "div",
@@ -1970,7 +2011,7 @@ function gi(r) {
     }
   );
 }
-const ja = (r) => {
+const Ia = (d) => {
   const {
     isActiveItems: o,
     setIsActiveItems: e,
@@ -1978,60 +2019,60 @@ const ja = (r) => {
     setItems: i,
     other: a,
     title: l,
-    subtitle: d,
+    subtitle: r,
     editable: n = !0,
     draggable: c = !1,
-    withImage: b = !1,
-    deletable: g = !0,
-    addable: h = !0,
-    itemsType: m,
-    itemsOptions: x
-  } = r, [u, C] = p.useState(
+    withImage: x = !1,
+    deletable: h = !0,
+    addable: p = !0,
+    itemsType: _,
+    itemsOptions: b
+  } = d, [u, C] = f.useState(
     null
-  ), [O, I] = p.useState({
+  ), [L, v] = f.useState({
     top: 0,
     left: 0
-  }), [D, B] = p.useState(!1), S = It(
-    kt(Ct, {
+  }), [O, g] = f.useState(!1), $ = kt(
+    $t(Bt, {
       activationConstraint: {
         distance: 5
       }
     })
   );
-  p.useEffect(() => {
-    const y = () => {
-      C(null), B(!1);
+  f.useEffect(() => {
+    const I = () => {
+      C(null), g(!1);
     };
-    return document.body.addEventListener("click", y), C(null), B(!1), () => {
-      C(null), B(!1), document.body.removeEventListener("click", y);
+    return document.body.addEventListener("click", I), C(null), g(!1), () => {
+      C(null), g(!1), document.body.removeEventListener("click", I);
     };
-  }, []), p.useEffect(() => {
+  }, []), f.useEffect(() => {
     if (u) {
-      const y = [...s].map(($) => $.listingId === u.listingId ? u : $);
-      i(y);
+      const I = [...s].map((A) => A.listingId === u.listingId ? u : A);
+      i(I);
     }
   }, [u]);
-  const f = (y, $) => {
-    y.stopPropagation();
-    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: q.left - 30
-    }), C($);
+  const F = (I, A) => {
+    I.stopPropagation();
+    const M = I.target.getBoundingClientRect(), W = 100, T = window.innerHeight;
+    let R = M.top + window.scrollY;
+    R + W > T && (R = T - W - 20), g(!0), v({
+      top: R - 80,
+      left: M.left - 30
+    }), C(A);
   };
-  function E(y) {
-    if (b)
-      return y ? /* @__PURE__ */ t.jsx(
+  function q(I) {
+    if (x)
+      return I ? /* @__PURE__ */ t.jsx(
         "img",
         {
-          src: `https://imagedelivery.net/${y}/w=1000`,
+          src: `https://imagedelivery.net/${I}/w=1000`,
           alt: "image",
           width: 16,
           height: 16
         }
       ) : /* @__PURE__ */ t.jsx(
-        v,
+        j,
         {
           name: "Image",
           width: 16,
@@ -2040,21 +2081,21 @@ const ja = (r) => {
         }
       );
   }
-  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);
+  const X = (I) => {
+    const { active: A, over: M } = I;
+    if (M && A.id !== M.id) {
+      const W = s.findIndex((R) => String(R.listingId) === A.id), T = s.findIndex((R) => String(R.listingId) === M.id);
+      if (W !== -1 && T !== -1) {
+        const R = [...s], [Z] = R.splice(W, 1);
+        R.splice(T, 0, Z), i(R);
       }
     }
-  }, et = (y, $) => {
-    const q = x.find((A) => y.listingId === A.id);
-    if (!q) return null;
-    const G = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+  }, D = (I, A) => {
+    const M = b.find((T) => I.listingId === T.id);
+    if (!M) return null;
+    const W = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       c && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-        v,
+        j,
         {
           name: "DotsSixVertical",
           hoverable: !0,
@@ -2062,107 +2103,107 @@ const ja = (r) => {
           height: 20
         }
       ) }),
-      m === "select" && /* @__PURE__ */ t.jsx(
-        nt,
+      _ === "select" && /* @__PURE__ */ t.jsx(
+        et,
         {
-          onChange: (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((M) => M.listingId === y.listingId ? lt : M);
-            C(lt), i([...j]);
+          onChange: (T) => {
+            const R = [...s], Z = b.find((P) => P.productData.name === T);
+            if (!Z) return;
+            const rt = {
+              listingId: Z.id,
+              image: Z.productData.images.length > 0 ? Z.productData.images[0].cfId : ""
+            }, y = R.map((P) => P.listingId === I.listingId ? rt : P);
+            C(rt), i([...y]);
           },
-          value: q.productData.name,
+          value: M.productData.name,
           options: [
-            ...x.filter((A) => !s.find((H) => H.listingId === A.id)).map((A) => A.productData.name)
+            ...b.filter((T) => !s.find((R) => R.listingId === T.id)).map((T) => T.productData.name)
           ],
-          leftAddon: E(
-            y.image || q.productData.images.length > 0 && q.productData.images[0].cfId || ""
+          leftAddon: q(
+            I.image || M.productData.images.length > 0 && M.productData.images[0].cfId || ""
           )
         },
-        $
+        A
       ),
       /* @__PURE__ */ t.jsxs("div", { className: V.buttons, children: [
         n && /* @__PURE__ */ t.jsx("div", { className: V.deleteButton, children: /* @__PURE__ */ t.jsx(
-          v,
+          j,
           {
             name: "Sliders",
             hoverable: !0,
             width: 20,
             height: 20,
-            onClick: (A) => f(A, y)
+            onClick: (T) => F(T, I)
           }
         ) }),
-        g && /* @__PURE__ */ t.jsx("div", { className: V.deleteButton, children: /* @__PURE__ */ t.jsx(
-          v,
+        h && /* @__PURE__ */ t.jsx("div", { className: V.deleteButton, children: /* @__PURE__ */ t.jsx(
+          j,
           {
             name: "Trash",
             hoverable: !0,
             width: 20,
             height: 20,
             fill: "#C12A2A",
-            onClick: () => i(s.filter((A) => A !== y))
+            onClick: () => i(s.filter((T) => T !== I))
           }
         ) })
       ] })
     ] });
     return c ? /* @__PURE__ */ t.jsx(
-      gi,
+      fi,
       {
-        product: y,
-        children: G
+        product: I,
+        children: W
       },
-      y.listingId
+      I.listingId
     ) : /* @__PURE__ */ t.jsx(
       "div",
       {
         className: V.product,
-        children: G
+        children: W
       },
-      y.listingId
+      I.listingId
     );
   };
   return /* @__PURE__ */ t.jsxs("div", { className: V.productsBlock, children: [
     (l || o !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: V.top, children: [
       l && /* @__PURE__ */ t.jsx("h3", { className: V.title, children: l }),
       o !== void 0 && /* @__PURE__ */ t.jsx(
-        tt,
+        st,
         {
           current: o,
-          onChange: (y) => e == null ? void 0 : e(y)
+          onChange: (I) => e == null ? void 0 : e(I)
         }
       )
     ] }),
-    D && u && /* @__PURE__ */ t.jsx(
-      xi,
+    O && u && /* @__PURE__ */ t.jsx(
+      gi,
       {
         activeItem: u,
         setActiveItem: C,
-        setIsOpenModal: B,
-        popupPosition: O,
-        itemsOptions: x
+        setIsOpenModal: g,
+        popupPosition: L,
+        itemsOptions: b
       }
     ),
     /* @__PURE__ */ t.jsxs("div", { className: V.products, children: [
-      d && /* @__PURE__ */ t.jsx("h5", { className: V.subtitle, children: d }),
+      r && /* @__PURE__ */ t.jsx("h5", { className: V.subtitle, children: r }),
       c ? /* @__PURE__ */ t.jsx(
-        $t,
+        Nt,
         {
-          sensors: S,
-          onDragEnd: W,
+          sensors: $,
+          onDragEnd: X,
           children: /* @__PURE__ */ t.jsx(
-            Nt,
+            wt,
             {
-              items: s.map((y) => String(y.listingId)),
-              strategy: wt,
-              children: s.map((y, $) => et(y, $))
+              items: s.map((I) => String(I.listingId)),
+              strategy: Ct,
+              children: s.map((I, A) => D(I, A))
             }
           )
         }
-      ) : s.map((y, $) => et(y, $)),
-      h && /* @__PURE__ */ t.jsx(
+      ) : s.map((I, A) => D(I, A)),
+      p && /* @__PURE__ */ t.jsx(
         "div",
         {
           style: {
@@ -2171,31 +2212,31 @@ const ja = (r) => {
             justifyContent: "center"
           },
           children: /* @__PURE__ */ t.jsx(
-            Z,
+            lt,
             {
               withoutHover: !0,
               className: V.button,
               size: "s",
               onClick: () => {
-                const y = [...s];
-                for (let $ = 0; $ < x.length; $++)
-                  if (!s.find((q) => q.listingId === x[$].id)) {
-                    y.push({
-                      listingId: x[$].id,
-                      image: x[$].productData.images.length > 0 ? x[$].productData.images[0].cfId : ""
+                const I = [...s];
+                for (let A = 0; A < b.length; A++)
+                  if (!s.find((M) => M.listingId === b[A].id)) {
+                    I.push({
+                      listingId: b[A].id,
+                      image: b[A].productData.images.length > 0 ? b[A].productData.images[0].cfId : ""
                     });
                     break;
                   }
-                i(y);
+                i(I);
               },
-              disabled: s.length === x.length,
+              disabled: s.length === b.length,
               style: {
                 width: "fit-content"
               },
               children: /* @__PURE__ */ t.jsxs("div", { className: V.addButton, children: [
                 /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
                 /* @__PURE__ */ t.jsx(
-                  v,
+                  j,
                   {
                     name: "Plus",
                     width: 16,
@@ -2208,163 +2249,298 @@ const ja = (r) => {
         }
       )
     ] }),
-    a !== void 0 && /* @__PURE__ */ t.jsx(vt, { items: a })
+    a !== void 0 && /* @__PURE__ */ t.jsx(jt, { items: a })
   ] });
-}, 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,
+}, bi = "_options_6cemk_1", vi = "_price_6cemk_12", ji = "_oldPrice_6cemk_19", yi = "_newPrice_6cemk_27", Ii = "_animate_6cemk_34", ki = "_appearAndBounce_6cemk_1", $i = "_meta_6cemk_52", Ni = "_info_6cemk_58", wi = "_infoRight_6cemk_66", Ci = "_buttons_6cemk_73", Bi = "_variants_6cemk_80", Si = "_variant_6cemk_80", Ti = "_stock_6cemk_98", Pi = "_variantInfo_6cemk_105", Ai = "_quantity_6cemk_111", Mi = "_count_6cemk_118", Oi = "_focused_6cemk_135", qi = "_button_6cemk_73", Ei = "_activeVariant_6cemk_161", Di = "_chargeTypes_6cemk_165", Hi = "_charge_6cemk_165", Li = "_chargeActive_6cemk_190", Ri = "_title_6cemk_198", w = {
+  options: bi,
+  price: vi,
+  oldPrice: ji,
+  newPrice: yi,
+  animate: Ii,
+  appearAndBounce: ki,
+  meta: $i,
+  info: Ni,
+  infoRight: wi,
+  buttons: Ci,
+  variants: Bi,
+  variant: Si,
+  stock: Ti,
+  variantInfo: Pi,
+  quantity: Ai,
+  count: Mi,
+  focused: Oi,
+  button: qi,
+  activeVariant: Ei,
+  chargeTypes: Di,
+  charge: Hi,
   chargeActive: Li,
   title: Ri
+}, zi = "_wrapper_p74l6_1", Fi = "_label_p74l6_9", Vi = "_input_p74l6_18", Ui = "_paddingless_p74l6_31", Yi = "_content_p74l6_35", Gi = "_contentBorder_p74l6_48", Xi = "_borderless_p74l6_53", Wi = "_rightIcon_p74l6_58", nt = {
+  wrapper: zi,
+  label: Fi,
+  input: Vi,
+  paddingless: Ui,
+  content: Yi,
+  contentBorder: Gi,
+  borderless: Xi,
+  rightIcon: Wi
+}, Ji = (d) => {
+  const {
+    onChange: o,
+    style: e,
+    label: s,
+    value: i,
+    type: a,
+    min: l,
+    max: r,
+    placeholder: n,
+    disabled: c = !1,
+    required: x = !1,
+    regex: h,
+    paddingless: p = !1,
+    borderless: _ = !1,
+    editable: b = !1,
+    isSearch: u = !1,
+    centered: C = !1
+  } = d, { themeSettings: L } = Et(), { inputs: v } = L, [O, g] = f.useState(!1);
+  function $(q) {
+    return Number(q) < 0 ? String(l) : q;
+  }
+  function F(q) {
+    return !x || !h ? !0 : new RegExp(h).test(q);
+  }
+  return /* @__PURE__ */ t.jsxs("div", { className: nt.wrapper, children: [
+    s && /* @__PURE__ */ t.jsx(
+      "label",
+      {
+        className: nt.label,
+        htmlFor: s,
+        children: s
+      }
+    ),
+    /* @__PURE__ */ t.jsxs(
+      "div",
+      {
+        className: U(nt.content, {
+          [nt.contentBorder]: v.border.active
+        }),
+        style: {
+          paddingRight: u ? v.general.height + 15 : "auto",
+          ...e,
+          background: v.field.active ? v.field.color : "transparent"
+        },
+        children: [
+          /* @__PURE__ */ t.jsx(
+            "input",
+            {
+              id: s,
+              type: a || "text",
+              onChange: (q) => {
+                if (a === "text") o(q.target.value);
+                else {
+                  const X = $(q.target.value);
+                  o(X);
+                }
+              },
+              value: i,
+              autoComplete: "off",
+              placeholder: n || "Type something...",
+              className: U(nt.input, {
+                [nt.required]: O && x && !F(i),
+                [nt.paddingless]: p,
+                [nt.borderless]: _
+              }),
+              min: a === "number" ? l : void 0,
+              max: a === "number" ? r : void 0,
+              disabled: c,
+              onFocus: () => g(!0),
+              style: {
+                textAlign: C ? "center" : "left"
+              }
+            }
+          ),
+          u && /* @__PURE__ */ t.jsx("div", { className: nt.rightIcon, children: /* @__PURE__ */ t.jsx(
+            j,
+            {
+              name: "MagnifyingGlass",
+              fill: "var(--icon-secondary)",
+              width: v.general.height,
+              height: v.general.height
+            }
+          ) }),
+          b && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
+            j,
+            {
+              name: "Sliders",
+              width: 20,
+              height: 20,
+              hoverable: !0
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}, Qi = "_button_85085_1", Ki = "_primary_85085_20", Zi = "_primaryHovered_85085_30", to = "_secondary_85085_34", eo = "_secondaryHovered_85085_44", so = "_tertiary_85085_48", no = "_tertiaryHovered_85085_58", io = "_content_85085_62", ot = {
+  button: Qi,
+  primary: Ki,
+  primaryHovered: Zi,
+  secondary: to,
+  secondaryHovered: eo,
+  tertiary: so,
+  tertiaryHovered: no,
+  content: io
+}, tt = (d) => {
+  const { children: o, onClick: e, style: s, className: i, disabled: a = !1, type: l = "Primary" } = d, { themeSettings: r } = Et();
+  return /* @__PURE__ */ t.jsx(
+    "button",
+    {
+      className: U(ot.button, i, {
+        [ot.primary]: l === "Primary",
+        [ot.secondary]: l === "Secondary",
+        [ot.tertiary]: l === "Tertiary",
+        [ot.primaryHovered]: l === "Primary" && !a && r.buttons.primary.hover,
+        [ot.secondaryHovered]: l === "Secondary" && !a && r.buttons.secondary.hover,
+        [ot.tertiaryHovered]: l === "Tertiary" && !a && r.buttons.tertiary.hover
+      }),
+      onClick: e,
+      style: {
+        ...s
+      },
+      disabled: a,
+      children: l === "Tertiary" ? /* @__PURE__ */ t.jsxs("div", { className: ot.content, children: [
+        o,
+        /* @__PURE__ */ t.jsx(
+          j,
+          {
+            name: "ArrowRight",
+            fill: "#757575",
+            width: 20,
+            height: 20
+          }
+        )
+      ] }) : /* @__PURE__ */ t.jsx(t.Fragment, { children: o })
+    }
+  );
 };
-var Ht = /* @__PURE__ */ ((r) => (r.ONE_TIME = "One-Time", r.RECURRING = "Subscribe & Save", r))(Ht || {});
-const ya = (r) => {
-  var B, S;
-  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 f = setTimeout(() => u(!1), 600);
-    return () => clearTimeout(f);
-  }, [d]);
-  async function C() {
-    await m(), await h({
-      productId: r.id,
+var zt = /* @__PURE__ */ ((d) => (d.ONE_TIME = "One-Time", d.RECURRING = "Subscribe & Save", d))(zt || {});
+const ka = (d) => {
+  var v, O;
+  const { variants: o } = d, [e, s] = f.useState(o[0]), [i, a] = f.useState(e.chargeTypes[0]), l = Pt(), [r, n] = f.useState(1), { reset: c, addProductToCart: x, getProducts: h } = At(), [p, _] = f.useState(!1);
+  f.useEffect(() => {
+    _(!0);
+    const g = setTimeout(() => _(!1), 600);
+    return () => clearTimeout(g);
+  }, [r]);
+  async function b() {
+    await h(), await x({
+      productId: d.id,
       productVariantId: e.id,
-      quantity: d
+      quantity: r
     });
   }
-  function O() {
-    g(), C(), l("/checkout");
+  function u() {
+    c(), b(), l("/checkout");
   }
-  function I(f) {
-    if (f >= 864e5) {
-      const $ = Math.floor(f / 864e5);
-      return `${$} ${$ === 1 ? "day" : "days"}`;
-    } else if (f >= 36e5) {
-      const $ = Math.floor(f / 36e5);
-      return `${$} ${$ === 1 ? "hour" : "hours"}`;
-    } else if (f >= 6e4) {
-      const $ = Math.floor(f / 6e4);
-      return `${$} ${$ === 1 ? "minute" : "minutes"}`;
+  function C(g) {
+    if (g >= 864e5) {
+      const D = Math.floor(g / 864e5);
+      return `${D} ${D === 1 ? "day" : "days"}`;
+    } else if (g >= 36e5) {
+      const D = Math.floor(g / 36e5);
+      return `${D} ${D === 1 ? "hour" : "hours"}`;
+    } else if (g >= 6e4) {
+      const D = Math.floor(g / 6e4);
+      return `${D} ${D === 1 ? "minute" : "minutes"}`;
     } else {
-      const $ = Math.floor(f / 1e3);
-      return `${$} ${$ === 1 ? "second" : "seconds"}`;
+      const D = Math.floor(g / 1e3);
+      return `${D} ${D === 1 ? "second" : "seconds"}`;
     }
   }
-  function D(f, E) {
-    return f.length > E ? f.slice(0, E) + "..." : f;
+  function L(g, $) {
+    return g.length > $ ? g.slice(0, $) + "..." : g;
   }
-  return /* @__PURE__ */ t.jsxs("div", { className: N.options, children: [
-    e.chargeTypes.length > 1 && /* @__PURE__ */ t.jsx("div", { className: N.chargeTypes, children: e.chargeTypes.map((f) => /* @__PURE__ */ t.jsx(
+  return /* @__PURE__ */ t.jsxs("div", { className: w.options, children: [
+    e.chargeTypes.length > 1 && /* @__PURE__ */ t.jsx("div", { className: w.chargeTypes, children: e.chargeTypes.map((g) => /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: F(N.charge, {
-          [N.chargeActive]: i === f
+        className: U(w.charge, {
+          [w.chargeActive]: i === g
         }),
-        onClick: () => a(f),
-        children: Ht[f]
+        onClick: () => a(g),
+        children: zt[g]
       },
-      f
+      g
     )) }),
-    /* @__PURE__ */ t.jsx("div", { className: N.variants, children: o.map((f) => {
-      var E;
+    /* @__PURE__ */ t.jsx("div", { className: w.variants, children: o.map((g) => {
+      var $;
       return /* @__PURE__ */ t.jsxs(
         "div",
         {
-          className: F(N.variant, {
-            [N.activeVariant]: e.id === f.id
+          className: U(w.variant, {
+            [w.activeVariant]: e.id === g.id
           }),
-          onClick: () => s(f),
+          onClick: () => s(g),
           children: [
-            /* @__PURE__ */ t.jsxs("div", { className: N.variantInfo, children: [
-              /* @__PURE__ */ t.jsx("span", { className: N.title, children: D(f.name, 15) }),
+            /* @__PURE__ */ t.jsxs("div", { className: w.variantInfo, children: [
+              /* @__PURE__ */ t.jsx("span", { className: w.title, children: L(g.name, 15) }),
               /* @__PURE__ */ t.jsxs("span", { children: [
                 "$",
-                i === "ONE_TIME" ? f.price.amount : f.subscriptionSettings ? f.subscriptionSettings.price.amount : "Price Not Found"
+                i === "ONE_TIME" ? g.price.amount : g.subscriptionSettings ? g.subscriptionSettings.price.amount : "Price Not Found"
               ] })
             ] }),
-            /* @__PURE__ */ t.jsx("div", { children: i === "ONE_TIME" && /* @__PURE__ */ t.jsxs("span", { className: N.stock, children: [
-              ((E = f.quantity.restrictions) == null ? void 0 : E.max) || f.quantity.available || 0,
+            /* @__PURE__ */ t.jsx("div", { children: i === "ONE_TIME" && /* @__PURE__ */ t.jsxs("span", { className: w.stock, children: [
+              (($ = g.quantity.restrictions) == null ? void 0 : $.max) || g.quantity.available || 0,
               " in stock"
             ] }) })
           ]
         },
-        f.id
+        g.id
       );
     }) }),
-    i === "ONE_TIME" && /* @__PURE__ */ t.jsxs("div", { className: N.quantity, children: [
+    i === "ONE_TIME" && /* @__PURE__ */ t.jsxs("div", { className: w.quantity, children: [
       /* @__PURE__ */ t.jsx(
-        "button",
+        tt,
         {
+          type: "Secondary",
           onClick: () => {
-            d > 1 ? n((f) => f - 1) : n(1);
+            r > 1 ? n((g) => g - 1) : n(1);
           },
-          className: N.button,
-          disabled: e.quantity.restrictions && d <= e.quantity.restrictions.min,
-          children: /* @__PURE__ */ t.jsx(v, { name: "Minus" })
+          className: w.button,
+          disabled: e.quantity.restrictions && r <= e.quantity.restrictions.min,
+          children: /* @__PURE__ */ t.jsx(j, { name: "Minus" })
         }
       ),
       /* @__PURE__ */ t.jsx(
-        "label",
+        Ji,
         {
-          className: F(N.count, {
-            [N.focused]: c
-          }),
-          onFocus: () => b(!0),
-          onBlur: () => b(!1),
-          children: /* @__PURE__ */ t.jsx(
-            X,
-            {
-              type: "number",
-              value: String(d),
-              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: {
-                backgroundColor: "transparent",
-                border: "none",
-                textAlign: "center"
-              }
-            }
-          )
+          type: "number",
+          value: String(r),
+          onChange: (g) => n(Number(g)),
+          max: ((v = e.quantity.restrictions) == null ? void 0 : v.max) || e.quantity.available || 1 / 0,
+          min: ((O = e.quantity.restrictions) == null ? void 0 : O.min) || 0,
+          centered: !0
         }
       ),
       /* @__PURE__ */ t.jsx(
-        "button",
+        tt,
         {
+          type: "Secondary",
           onClick: () => {
-            n((f) => f + 1);
+            n((g) => g + 1);
           },
-          className: N.button,
-          disabled: !!(e.quantity.restrictions && d >= e.quantity.restrictions.max || e.quantity.available && d >= e.quantity.available),
-          children: /* @__PURE__ */ t.jsx(v, { name: "Plus" })
+          className: w.button,
+          disabled: !!(e.quantity.restrictions && r >= e.quantity.restrictions.max || e.quantity.available && r >= e.quantity.available),
+          children: /* @__PURE__ */ t.jsx(j, { name: "Plus" })
         }
       )
     ] }),
-    /* @__PURE__ */ t.jsxs("div", { className: N.meta, children: [
-      /* @__PURE__ */ t.jsxs("div", { className: N.info, children: [
+    /* @__PURE__ */ t.jsxs("div", { className: w.meta, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: w.info, children: [
         /* @__PURE__ */ t.jsx("span", { children: "Delivery" }),
-        /* @__PURE__ */ t.jsxs("div", { className: N.infoRight, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: w.infoRight, children: [
           /* @__PURE__ */ t.jsx(
-            v,
+            j,
             {
               name: "Lightning",
               fill: "#FF3F19",
@@ -2372,150 +2548,109 @@ const ya = (r) => {
               height: 20
             }
           ),
-          /* @__PURE__ */ t.jsx("span", { children: !e.deliveryTime || e.deliveryTime === 0 ? "Instant" : I(e.deliveryTime) })
+          /* @__PURE__ */ t.jsx("span", { children: !e.deliveryTime || e.deliveryTime === 0 ? "Instant" : C(e.deliveryTime) })
         ] })
       ] }),
-      /* @__PURE__ */ t.jsxs("div", { className: N.info, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: w.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]: x }), children: [
+        /* @__PURE__ */ t.jsx("div", { className: w.infoRight, children: i === "ONE_TIME" ? e.compareAtPrice && (e.compareAtPrice.amount || 0) - (e.price.amount || 0) > 0 ? /* @__PURE__ */ t.jsxs("div", { className: w.price, children: [
+          /* @__PURE__ */ t.jsxs("span", { className: U(w.newPrice, { [w.animate]: p }), children: [
             "$ ",
-            (e.price.amount || 0) * d
+            (e.price.amount || 0) * r
           ] }),
-          /* @__PURE__ */ t.jsxs("span", { className: N.oldPrice, children: [
+          /* @__PURE__ */ t.jsxs("span", { className: w.oldPrice, children: [
             "$ ",
-            (e.compareAtPrice.amount || 0) * d
+            (e.compareAtPrice.amount || 0) * r
           ] })
-        ] }) : /* @__PURE__ */ t.jsxs("span", { className: F(N.newPrice, { [N.animate]: x }), children: [
+        ] }) : /* @__PURE__ */ t.jsxs("span", { className: U(w.newPrice, { [w.animate]: p }), 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]: x }), children: [
+          (e.price.amount || 0) * r
+        ] }) : e.subscriptionSettings && e.subscriptionSettings.compareAtPrice && (e.subscriptionSettings.compareAtPrice.amount || 0) - (e.subscriptionSettings.price.amount || 0) > 0 ? /* @__PURE__ */ t.jsxs("div", { className: w.price, children: [
+          /* @__PURE__ */ t.jsxs("span", { className: U(w.newPrice, { [w.animate]: p }), children: [
             "$ ",
             e.subscriptionSettings.price.amount || 0
           ] }),
-          /* @__PURE__ */ t.jsxs("span", { className: N.oldPrice, children: [
+          /* @__PURE__ */ t.jsxs("span", { className: w.oldPrice, children: [
             "$ ",
             e.subscriptionSettings.compareAtPrice.amount || 0
           ] })
-        ] }) : e.subscriptionSettings && /* @__PURE__ */ t.jsxs("span", { className: F(N.newPrice, { [N.animate]: x }), children: [
+        ] }) : e.subscriptionSettings && /* @__PURE__ */ t.jsxs("span", { className: U(w.newPrice, { [w.animate]: p }), children: [
           "$ ",
           e.subscriptionSettings.price.amount || 0
         ] }) })
       ] })
     ] }),
-    /* @__PURE__ */ t.jsxs("div", { className: N.buttons, children: [
+    /* @__PURE__ */ t.jsxs("div", { className: w.buttons, children: [
       /* @__PURE__ */ t.jsx(
-        Z,
+        tt,
         {
           type: "Primary",
-          onClick: () => O(),
-          children: /* @__PURE__ */ t.jsx("span", { children: i === "ONE_TIME" ? "Buy Now" : "Subscribe Now" })
+          onClick: () => u(),
+          children: i === "ONE_TIME" ? "Buy Now" : "Subscribe Now"
         }
       ),
       i === "ONE_TIME" && /* @__PURE__ */ t.jsx(
-        Z,
+        tt,
         {
           type: "Secondary",
-          onClick: () => C(),
+          onClick: () => b(),
           children: "Add to Cart"
         }
       )
     ] })
   ] });
-}, 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,
+}, oo = "_button_1tdo3_1", ao = "_login_1tdo3_14", co = "_signUp_1tdo3_18", lo = "_buttons_1tdo3_23", ro = "_modal_1tdo3_32", uo = "_closing_1tdo3_64", mo = "_info_1tdo3_113", _o = "_top_1tdo3_120", ho = "_title_1tdo3_131", po = "_clear_1tdo3_138", xo = "_activeClear_1tdo3_145", go = "_count_1tdo3_149", fo = "_cart_1tdo3_164", bo = "_empty_1tdo3_172", vo = "_product_1tdo3_198", jo = "_products_1tdo3_207", yo = "_image_1tdo3_215", Io = "_productInfo_1tdo3_221", ko = "_content_1tdo3_228", $o = "_name_1tdo3_234", No = "_price_1tdo3_240", wo = "_productButtons_1tdo3_246", Co = "_productButton_1tdo3_246", Bo = "_productCount_1tdo3_266", So = "_bottom_1tdo3_282", To = "_subtotal_1tdo3_290", Po = "_block_1tdo3_298", Ao = "_shoppingCount_1tdo3_305", Mo = "_total_1tdo3_325", Oo = "_link_1tdo3_331", qo = "_userInfo_1tdo3_338", Eo = "_pagesMobileModal_1tdo3_349", Do = "_pagesMobileModalContent_1tdo3_363", Ho = "_pagesMobileModalHeader_1tdo3_369", Lo = "_pagesMobileModalFooter_1tdo3_379", N = {
+  button: oo,
+  login: ao,
+  signUp: co,
+  buttons: lo,
+  modal: ro,
   "slide-in-fade": "_slide-in-fade_1tdo3_1",
   "mobile-slide-in-fade": "_mobile-slide-in-fade_1tdo3_1",
-  closing: Yi,
+  closing: uo,
   "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(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: a,
-      children: l === "Tertiary" ? /* @__PURE__ */ t.jsxs("div", { className: ot.content, children: [
-        o,
-        /* @__PURE__ */ t.jsx(
-          v,
-          {
-            name: "ArrowRight",
-            fill: "#757575",
-            width: 20,
-            height: 20
-          }
-        )
-      ] }) : /* @__PURE__ */ t.jsx(t.Fragment, { children: o })
-    }
-  );
+  info: mo,
+  top: _o,
+  title: ho,
+  clear: po,
+  activeClear: xo,
+  count: go,
+  cart: fo,
+  empty: bo,
+  product: vo,
+  products: jo,
+  image: yo,
+  productInfo: Io,
+  content: ko,
+  name: $o,
+  price: No,
+  productButtons: wo,
+  productButton: Co,
+  productCount: Bo,
+  bottom: So,
+  subtotal: To,
+  block: Po,
+  shoppingCount: Ao,
+  total: Mo,
+  link: Oo,
+  userInfo: qo,
+  pagesMobileModal: Eo,
+  pagesMobileModalContent: Do,
+  pagesMobileModalHeader: Ho,
+  pagesMobileModalFooter: Lo
 };
-class xt extends Error {
+class gt extends Error {
 }
-xt.prototype.name = "InvalidTokenError";
-function To(r) {
-  return decodeURIComponent(atob(r).replace(/(.)/g, (o, e) => {
+gt.prototype.name = "InvalidTokenError";
+function Ro(d) {
+  return decodeURIComponent(atob(d).replace(/(.)/g, (o, e) => {
     let s = e.charCodeAt(0).toString(16).toUpperCase();
     return s.length < 2 && (s = "0" + s), "%" + s;
   }));
 }
-function Po(r) {
-  let o = r.replace(/-/g, "+").replace(/_/g, "/");
+function zo(d) {
+  let o = d.replace(/-/g, "+").replace(/_/g, "/");
   switch (o.length % 4) {
     case 0:
       break;
@@ -2529,145 +2664,145 @@ function Po(r) {
       throw new Error("base64 string is not of the correct length");
   }
   try {
-    return To(o);
+    return Ro(o);
   } catch {
     return atob(o);
   }
 }
-function Ao(r, o) {
-  if (typeof r != "string")
-    throw new xt("Invalid token specified: must be a string");
+function Fo(d, o) {
+  if (typeof d != "string")
+    throw new gt("Invalid token specified: must be a string");
   o || (o = {});
-  const e = o.header === !0 ? 0 : 1, s = r.split(".")[e];
+  const e = o.header === !0 ? 0 : 1, s = d.split(".")[e];
   if (typeof s != "string")
-    throw new xt(`Invalid token specified: missing part #${e + 1}`);
+    throw new gt(`Invalid token specified: missing part #${e + 1}`);
   let i;
   try {
-    i = Po(s);
+    i = zo(s);
   } catch (a) {
-    throw new xt(`Invalid token specified: invalid base64 for part #${e + 1} (${a.message})`);
+    throw new gt(`Invalid token specified: invalid base64 for part #${e + 1} (${a.message})`);
   }
   try {
     return JSON.parse(i);
   } catch (a) {
-    throw new xt(`Invalid token specified: invalid json for part #${e + 1} (${a.message})`);
+    throw new gt(`Invalid token specified: invalid json for part #${e + 1} (${a.message})`);
   }
 }
-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 })
+const $a = (d) => {
+  const { shopping: o, signUp: e, isShowUserInfo: s = !0 } = d;
+  return /* @__PURE__ */ t.jsxs("div", { className: N.buttons, children: [
+    o && /* @__PURE__ */ t.jsx(Vo, {}),
+    s && /* @__PURE__ */ t.jsx(Ft, { signUp: e })
   ] });
-}, 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;
+}, Vo = () => {
+  const [d, o] = f.useState(!1), [e, s] = f.useState([]), { cart: i, getProducts: a } = At();
+  function l(p) {
+    for (let _ = 0; _ < i.parts.length; _++)
+      for (let b = 0; b < p.variants.length; b++)
+        if (i.parts[_].productVariantId === p.variants[_].id)
+          return i.parts[_].productVariantId;
   }
-  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;
+  function r(p) {
+    for (let _ = 0; _ < i.parts.length; _++)
+      for (let b = 0; b < p.variants.length; b++)
+        if (i.parts[_].productVariantId === p.variants[_].id)
+          return i.parts[_].quantity;
   }
-  p.useEffect(() => {
+  f.useEffect(() => {
     (async () => {
-      const m = i.parts.map((C) => String(C.productId)), u = (await a([...m])).map((C) => ({
+      const _ = i.parts.map((C) => String(C.productId)), u = (await a([..._])).map((C) => ({
         ...C,
         activeVariantId: l(C),
-        quantity: d(C)
+        quantity: r(C)
       }));
       s(u);
     })();
   }, [i.parts.length]);
-  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;
+  function n(p) {
+    var _;
+    return !p || !(p != null && p.variants) ? !1 : (_ = p.variants.find((b) => b.id === p.activeVariantId)) == null ? void 0 : _.subscriptionSettings;
   }
-  const c = i.parts.length > 0 && e.length > 0 && !n(e[0]), [b, g] = p.useState(!1);
+  const c = i.parts.length > 0 && e.length > 0 && !n(e[0]), [x, h] = f.useState(!1);
   return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
     /* @__PURE__ */ t.jsxs(
-      mt,
+      tt,
       {
         type: "Secondary",
         style: {
           padding: 10
         },
-        onClick: (h) => {
-          h.stopPropagation(), window.location.pathname !== "/admin/builder" && (o(!0), g(!0));
+        onClick: (p) => {
+          p.stopPropagation(), window.location.pathname !== "/admin/builder" && (o(!0), h(!0));
         },
         children: [
           /* @__PURE__ */ t.jsx(
-            v,
+            j,
             {
               name: "Handbag",
               fill: "var(--icon-primary)"
             }
           ),
-          c && /* @__PURE__ */ t.jsx("div", { className: w.shoppingCount, children: i.parts.length })
+          c && /* @__PURE__ */ t.jsx("div", { className: N.shoppingCount, children: i.parts.length })
         ]
       }
     ),
-    r && /* @__PURE__ */ t.jsx(
-      At,
+    d && /* @__PURE__ */ t.jsx(
+      Mt,
       {
         close: () => {
-          g(!1), setTimeout(() => {
+          h(!1), setTimeout(() => {
             o(!1);
           }, 300);
         },
         withAnimation: !1,
         children: /* @__PURE__ */ t.jsx(
-          Oo,
+          Uo,
           {
             activeProducts: e,
             isCartNotEmpty: c,
-            isOpen: b
+            isOpen: x
           }
         )
       }
     )
   ] });
-}, 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);
+}, Uo = (d) => {
+  const { activeProducts: o, isCartNotEmpty: e, isOpen: s } = d, { cart: i, reset: a, getTotalAndDiscount: l, updateQuantityOfProduct: r } = At(), n = Pt();
+  function c(p) {
+    n(p);
   }
-  function b(h) {
-    d({
-      productId: h.id,
-      productVariantId: h.activeVariantId,
-      quantity: h.quantity + 1
+  function x(p) {
+    r({
+      productId: p.id,
+      productVariantId: p.activeVariantId,
+      quantity: p.quantity + 1
     });
   }
-  function g(h) {
-    d({
-      productId: h.id,
-      productVariantId: h.activeVariantId,
-      quantity: h.quantity - 1
+  function h(p) {
+    r({
+      productId: p.id,
+      productVariantId: p.activeVariantId,
+      quantity: p.quantity - 1
     });
   }
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: F(w.modal, {
-        [w.closing]: !s
+      className: U(N.modal, {
+        [N.closing]: !s
       }),
-      onClick: (h) => h.stopPropagation(),
+      onClick: (p) => p.stopPropagation(),
       children: [
-        /* @__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.jsxs("div", { className: N.top, children: [
+          /* @__PURE__ */ t.jsxs("div", { className: N.info, children: [
+            /* @__PURE__ */ t.jsx("span", { className: N.title, children: "Cart" }),
+            e && /* @__PURE__ */ t.jsx("div", { className: N.count, children: i.parts.length })
           ] }),
           /* @__PURE__ */ t.jsx(
             "button",
             {
-              className: F(w.clear, {
-                [w.activeClear]: e
+              className: U(N.clear, {
+                [N.activeClear]: e
               }),
               disabled: !e,
               onClick: a,
@@ -2675,41 +2810,41 @@ const Ia = (r) => {
             }
           )
         ] }),
-        e ? /* @__PURE__ */ t.jsxs("div", { className: w.cart, children: [
-          /* @__PURE__ */ t.jsx("div", { className: w.products, children: o.map((h) => /* @__PURE__ */ t.jsxs(
+        e ? /* @__PURE__ */ t.jsxs("div", { className: N.cart, children: [
+          /* @__PURE__ */ t.jsx("div", { className: N.products, children: o.map((p) => /* @__PURE__ */ t.jsxs(
             "div",
             {
-              className: w.product,
+              className: N.product,
               children: [
-                /* @__PURE__ */ t.jsxs("div", { className: w.productInfo, children: [
+                /* @__PURE__ */ t.jsxs("div", { className: N.productInfo, children: [
                   /* @__PURE__ */ t.jsx(
                     "img",
                     {
-                      src: `https://imagedelivery.net/${h.images[0].cfId}/w=500`,
+                      src: `https://imagedelivery.net/${p.images[0].cfId}/w=500`,
                       alt: "image",
                       width: "100%",
                       height: "100%",
-                      className: w.image
+                      className: N.image
                     }
                   ),
-                  /* @__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: [
+                  /* @__PURE__ */ t.jsxs("div", { className: N.content, children: [
+                    /* @__PURE__ */ t.jsx("div", { className: N.name, children: p.name }),
+                    /* @__PURE__ */ t.jsxs("div", { className: N.price, children: [
                       "$",
-                      h.variants.find((m) => m.id === h.activeVariantId).price.amount * ((h == null ? void 0 : h.quantity) || 1)
+                      p.variants.find((_) => _.id === p.activeVariantId).price.amount * ((p == null ? void 0 : p.quantity) || 1)
                     ] })
                   ] })
                 ] }),
-                /* @__PURE__ */ t.jsxs("div", { className: w.productButtons, children: [
+                /* @__PURE__ */ t.jsxs("div", { className: N.productButtons, children: [
                   /* @__PURE__ */ t.jsx(
                     "div",
                     {
                       onClick: () => {
-                        h.quantity !== 1 && g(h);
+                        p.quantity !== 1 && h(p);
                       },
-                      className: w.productButton,
+                      className: N.productButton,
                       children: /* @__PURE__ */ t.jsx(
-                        v,
+                        j,
                         {
                           name: "Minus",
                           fill: "#757575",
@@ -2719,14 +2854,14 @@ const Ia = (r) => {
                       )
                     }
                   ),
-                  /* @__PURE__ */ t.jsx("div", { className: w.productCount, children: h.quantity }),
+                  /* @__PURE__ */ t.jsx("div", { className: N.productCount, children: p.quantity }),
                   /* @__PURE__ */ t.jsx(
                     "div",
                     {
-                      onClick: () => b(h),
-                      className: w.productButton,
+                      onClick: () => x(p),
+                      className: N.productButton,
                       children: /* @__PURE__ */ t.jsx(
-                        v,
+                        j,
                         {
                           name: "Plus",
                           fill: "#757575",
@@ -2739,14 +2874,14 @@ const Ia = (r) => {
                 ] })
               ]
             },
-            h.id
+            p.id
           )) }),
-          /* @__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.jsxs("div", { className: N.bottom, children: [
+            /* @__PURE__ */ t.jsxs("div", { className: N.subtotal, children: [
+              /* @__PURE__ */ t.jsxs("div", { className: N.block, children: [
                 /* @__PURE__ */ t.jsx("span", { children: "Subtotal" }),
                 /* @__PURE__ */ t.jsx(
-                  v,
+                  j,
                   {
                     name: "Info",
                     width: 20,
@@ -2755,20 +2890,20 @@ const Ia = (r) => {
                   }
                 )
               ] }),
-              /* @__PURE__ */ t.jsxs("div", { className: w.total, children: [
+              /* @__PURE__ */ t.jsxs("div", { className: N.total, children: [
                 "$",
                 l().total
               ] })
             ] }),
-            /* @__PURE__ */ t.jsx(mt, { onClick: () => c("/checkout"), children: "Checkout" })
+            /* @__PURE__ */ t.jsx(tt, { onClick: () => c("/checkout"), children: "Checkout" })
           ] })
-        ] }) : /* @__PURE__ */ t.jsx(qo, {})
+        ] }) : /* @__PURE__ */ t.jsx(Yo, {})
       ]
     }
   );
-}, qo = () => /* @__PURE__ */ t.jsxs("div", { className: w.empty, children: [
+}, Yo = () => /* @__PURE__ */ t.jsxs("div", { className: N.empty, children: [
   /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-    v,
+    j,
     {
       name: "Handbag",
       fill: "var(--icon-secondary)"
@@ -2782,17 +2917,17 @@ const Ia = (r) => {
       "a",
       {
         href: "/products",
-        className: w.link,
+        className: N.link,
         children: "view products"
       }
     )
   ] })
-] }), zt = ({ signUp: r }) => {
+] }), Ft = ({ signUp: d }) => {
   const o = JSON.parse(localStorage.getItem("token") || "{}"), { data: e } = o;
   if (!e)
     return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       /* @__PURE__ */ t.jsx(
-        mt,
+        tt,
         {
           onClick: () => l("/customer-dash"),
           type: "Secondary",
@@ -2802,8 +2937,8 @@ const Ia = (r) => {
           children: "Login"
         }
       ),
-      r && /* @__PURE__ */ t.jsx(
-        mt,
+      d && /* @__PURE__ */ t.jsx(
+        tt,
         {
           onClick: () => l("/customer-dash"),
           type: "Primary",
@@ -2814,31 +2949,31 @@ const Ia = (r) => {
         }
       )
     ] });
-  const [s, i] = p.useState("test-email@gmail.com"), a = Tt();
-  p.useEffect(() => {
+  const [s, i] = f.useState("test-email@gmail.com"), a = Pt();
+  f.useEffect(() => {
     (async () => {
-      const n = Ao(e);
+      const n = Fo(e);
       i(n.email);
     })();
   }, [e]);
-  function l(d) {
-    a(d);
+  function l(r) {
+    a(r);
   }
   return /* @__PURE__ */ t.jsx(
     "div",
     {
-      className: w.userInfo,
+      className: N.userInfo,
       onClick: () => l("/customer-dash"),
       children: /* @__PURE__ */ t.jsx("div", { children: s || "test-email@gmail.com" })
     }
   );
-}, Eo = ({
-  children: r,
+}, Go = ({
+  children: d,
   logo: o,
   setIsOpen: e,
   signUp: s
 }) => {
-  const { setIsOpen: i } = Et(), a = () => {
+  const { setIsOpen: i } = Dt(), a = () => {
     i(!1), setTimeout(() => {
       e(!1), i(!0);
     }, 300);
@@ -2846,18 +2981,18 @@ const Ia = (r) => {
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: w.pagesMobileModal,
+      className: N.pagesMobileModal,
       onClick: (l) => l.stopPropagation(),
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: w.pagesMobileModalHeader, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: N.pagesMobileModalHeader, children: [
           /* @__PURE__ */ t.jsx("div", { children: o }),
           /* @__PURE__ */ t.jsx(
-            mt,
+            tt,
             {
               type: "Secondary",
               onClick: a,
               children: /* @__PURE__ */ t.jsx(
-                v,
+                j,
                 {
                   name: "X",
                   fill: "var(--icon-primary)"
@@ -2866,33 +3001,33 @@ const Ia = (r) => {
             }
           )
         ] }),
-        /* @__PURE__ */ t.jsx("div", { className: w.pagesMobileModalContent, children: r }),
-        /* @__PURE__ */ t.jsx("div", { className: w.pagesMobileModalFooter, children: /* @__PURE__ */ t.jsx(zt, { signUp: s }) })
+        /* @__PURE__ */ t.jsx("div", { className: N.pagesMobileModalContent, children: d }),
+        /* @__PURE__ */ t.jsx("div", { className: N.pagesMobileModalFooter, children: /* @__PURE__ */ t.jsx(Ft, { signUp: s }) })
       ]
     }
   );
-}, ka = ({
-  children: r,
+}, Na = ({
+  children: d,
   logo: o,
   signUp: e
 }) => {
-  const [s, i] = p.useState(!1);
+  const [s, i] = f.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,
+    /* @__PURE__ */ t.jsx(Xo, { setIsOpenModal: i }),
+    s && /* @__PURE__ */ t.jsx(Mt, { close: () => i(!1), children: /* @__PURE__ */ t.jsx(
+      Go,
       {
         logo: o,
         setIsOpen: i,
         signUp: e,
-        children: r
+        children: d
       }
     ) })
   ] });
-}, Do = (r) => {
-  const { setIsOpenModal: o } = r;
+}, Xo = (d) => {
+  const { setIsOpenModal: o } = d;
   return /* @__PURE__ */ t.jsx(
-    mt,
+    tt,
     {
       type: "Secondary",
       style: {
@@ -2902,7 +3037,7 @@ const Ia = (r) => {
         e.stopPropagation(), o(!0);
       },
       children: /* @__PURE__ */ t.jsx(
-        v,
+        j,
         {
           name: "List",
           fill: "var(--icon-primary)"
@@ -2910,26 +3045,26 @@ const Ia = (r) => {
       )
     }
   );
-}, 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();
+}, Wo = "_share_xddz7_1", Jo = "_modal_xddz7_8", Qo = "_header_xddz7_20", Ko = "_socials_xddz7_30", Zo = "_social_xddz7_30", ta = "_copy_xddz7_40", ea = "_title_xddz7_47", sa = "_copyWrapper_xddz7_53", na = "_copyText_xddz7_62", ia = "_copyTextMobile_xddz7_75", oa = "_copyTextMiniMobile_xddz7_94", at = {
+  share: Wo,
+  modal: Jo,
+  header: Qo,
+  socials: Ko,
+  social: Zo,
+  copy: ta,
+  title: ea,
+  copyWrapper: sa,
+  copyText: na,
+  copyTextMobile: ia,
+  copyTextMiniMobile: oa
+}, wa = () => {
+  const { isOpenModal: d, setIsOpenModal: o } = Ht();
   function e() {
     o(!0);
   }
   return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
     /* @__PURE__ */ t.jsx(
-      Z,
+      lt,
       {
         className: at.share,
         onClick: (s) => {
@@ -2937,7 +3072,7 @@ const Ia = (r) => {
         },
         type: "Secondary",
         children: /* @__PURE__ */ t.jsx(
-          v,
+          j,
           {
             name: "Share",
             fill: "#757575",
@@ -2946,10 +3081,10 @@ const Ia = (r) => {
         )
       }
     ),
-    r && /* @__PURE__ */ t.jsx(At, { close: o, children: /* @__PURE__ */ t.jsx(Jo, {}) })
+    d && /* @__PURE__ */ t.jsx(Mt, { close: o, children: /* @__PURE__ */ t.jsx(aa, {}) })
   ] });
-}, Jo = () => {
-  const { setIsOpenModal: r } = Dt(), { notification: o, setNotification: e } = Vt(), { setIsOpen: s } = Et(), i = window.location.href;
+}, aa = () => {
+  const { setIsOpenModal: d } = Ht(), { notification: o, setNotification: e } = Ut(), { setIsOpen: s } = Dt(), i = window.location.href;
   function a() {
     navigator.clipboard.writeText(i), e({
       message: "Link copied to clipboard",
@@ -2958,10 +3093,10 @@ const Ia = (r) => {
   }
   function l() {
     s(!1), setTimeout(() => {
-      r(!1), s(!0);
+      d(!1), s(!0);
     }, 300);
   }
-  function d(n, c) {
+  function r(n, c) {
     return n.length > c ? n.slice(0, c) + "..." : n;
   }
   return /* @__PURE__ */ t.jsxs(
@@ -2973,7 +3108,7 @@ const Ia = (r) => {
         /* @__PURE__ */ t.jsxs("div", { className: at.header, children: [
           /* @__PURE__ */ t.jsx("div", { className: at.title, children: "Copy Product Link" }),
           /* @__PURE__ */ t.jsx(
-            v,
+            j,
             {
               name: "X",
               fill: "#757575",
@@ -2984,7 +3119,7 @@ const Ia = (r) => {
         ] }),
         /* @__PURE__ */ t.jsxs("div", { className: at.copyWrapper, children: [
           /* @__PURE__ */ t.jsxs(
-            Z,
+            lt,
             {
               type: "Secondary",
               onClick: a,
@@ -2992,172 +3127,70 @@ const Ia = (r) => {
                 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", { className: at.copyText, children: r(i, 100) }),
+                /* @__PURE__ */ t.jsx("div", { className: at.copyTextMobile, children: r(i, 40) }),
+                /* @__PURE__ */ t.jsx("div", { className: at.copyTextMiniMobile, children: r(i, 20) })
               ]
             }
           ),
           /* @__PURE__ */ t.jsx(
-            Z,
+            lt,
             {
               type: "Secondary",
               onClick: a,
-              children: o ? /* @__PURE__ */ t.jsx(v, { name: "Check" }) : /* @__PURE__ */ t.jsx(v, { name: "Copy" })
+              children: o ? /* @__PURE__ */ t.jsx(j, { name: "Check" }) : /* @__PURE__ */ t.jsx(j, { name: "Copy" })
             }
           )
         ] })
       ]
     }
   );
-}, 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);
+}, ca = "_accordion_1s1lq_1", la = "_header_1s1lq_9", ra = "_icon_1s1lq_18", da = "_open_1s1lq_21", ua = "_content_1s1lq_25", xt = {
+  accordion: ca,
+  header: la,
+  icon: ra,
+  open: da,
+  content: ua
+}, Ca = ({ title: d, content: o, defaultOpen: e = !1 }) => {
+  const [s, i] = f.useState(e), [a, l] = f.useState(0), r = f.useRef(null), n = () => {
+    i(!s);
   };
-  return p.useEffect(() => {
-    l.current && a(e ? l.current.scrollHeight : 0);
-  }, [e]), /* @__PURE__ */ t.jsxs("div", { className: pt.accordion, children: [
+  return f.useEffect(() => {
+    r.current && l(s ? r.current.scrollHeight : 0);
+  }, [s]), /* @__PURE__ */ t.jsxs("div", { className: xt.accordion, children: [
     /* @__PURE__ */ t.jsxs(
       "div",
       {
-        className: pt.header,
-        onClick: d,
+        className: xt.header,
+        onClick: n,
         children: [
-          /* @__PURE__ */ t.jsx("h5", { id: "h5", children: r }),
-          /* @__PURE__ */ t.jsx("div", { className: F(pt.icon, { [pt.open]: e }), children: /* @__PURE__ */ t.jsx(v, { name: "CaretDown" }) })
+          /* @__PURE__ */ t.jsx("h5", { id: "h5", children: d }),
+          /* @__PURE__ */ t.jsx("div", { className: U(xt.icon, { [xt.open]: s }), children: /* @__PURE__ */ t.jsx(j, { name: "CaretDown" }) })
         ]
       }
     ),
     /* @__PURE__ */ t.jsx(
       "div",
       {
-        ref: l,
-        className: pt.content,
-        style: { height: `${i}px` },
+        ref: r,
+        className: xt.content,
+        style: { height: `${a}px` },
         children: /* @__PURE__ */ t.jsx("p", { id: "p", children: o })
       }
     )
   ] });
-}, 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: o,
-    style: e,
-    label: s,
-    value: i,
-    type: a,
-    min: l,
-    max: d,
-    placeholder: n,
-    disabled: c = !1,
-    required: b = !1,
-    regex: g,
-    paddingless: h = !1,
-    borderless: m = !1,
-    editable: x = !1,
-    isSearch: u = !1
-  } = r, { themeSettings: C } = qt(), { inputs: O } = C, [I, D] = p.useState(!1);
-  function B(f) {
-    return Number(f) < 0 ? String(l) : f;
-  }
-  function S(f) {
-    return !b || !g ? !0 : new RegExp(g).test(f);
-  }
-  return /* @__PURE__ */ t.jsxs("div", { className: st.wrapper, children: [
-    s && /* @__PURE__ */ t.jsx(
-      "label",
-      {
-        className: st.label,
-        htmlFor: s,
-        children: s
-      }
-    ),
-    /* @__PURE__ */ t.jsxs(
-      "div",
-      {
-        className: F(st.content, {
-          [st.contentBorder]: O.border.active
-        }),
-        style: {
-          paddingRight: O.general.height + 15,
-          ...e,
-          background: O.field.active ? O.field.color : "transparent"
-        },
-        children: [
-          /* @__PURE__ */ t.jsx(
-            "input",
-            {
-              id: s,
-              type: a || "text",
-              onChange: (f) => {
-                if (a === "text") o(f.target.value);
-                else {
-                  const E = B(f.target.value);
-                  o(E);
-                }
-              },
-              value: i,
-              autoComplete: "off",
-              placeholder: n || "Type something...",
-              className: F(st.input, {
-                [st.required]: I && b && !S(i),
-                [st.paddingless]: h,
-                [st.borderless]: m
-              }),
-              min: a === "number" ? l : void 0,
-              max: a === "number" ? d : void 0,
-              disabled: c,
-              onFocus: () => D(!0)
-            }
-          ),
-          u && /* @__PURE__ */ t.jsx("div", { className: st.rightIcon, children: /* @__PURE__ */ t.jsx(
-            v,
-            {
-              name: "MagnifyingGlass",
-              fill: "var(--icon-secondary)",
-              width: O.general.height,
-              height: O.general.height
-            }
-          ) }),
-          x && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-            v,
-            {
-              name: "Sliders",
-              width: 20,
-              height: 20,
-              hoverable: !0
-            }
-          ) })
-        ]
-      }
-    )
-  ] });
-}, 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: [
+}, ma = "_wrapper_st58d_1", _a = "_label_st58d_10", ha = "_textarea_st58d_18", pa = "_length_st58d_33", vt = {
+  wrapper: ma,
+  label: _a,
+  textarea: ha,
+  length: pa
+}, Ba = (d) => {
+  const { onChange: o, label: e, value: s, maxLength: i, placeholder: a = "Type something..." } = d, [l, r] = f.useState(s.length);
+  return /* @__PURE__ */ t.jsxs("div", { className: vt.wrapper, children: [
     e && /* @__PURE__ */ t.jsx(
       "label",
       {
-        className: bt.label,
+        className: vt.label,
         htmlFor: e,
         children: e
       }
@@ -3168,14 +3201,14 @@ const Ia = (r) => {
         id: e,
         defaultValue: s,
         onChange: (n) => {
-          d(n.target.value.length), o(n.target.value);
+          r(n.target.value.length), o(n.target.value);
         },
         placeholder: a,
-        className: bt.textarea,
+        className: vt.textarea,
         maxLength: i
       }
     ),
-    i && /* @__PURE__ */ t.jsxs("div", { className: bt.length, children: [
+    i && /* @__PURE__ */ t.jsxs("div", { className: vt.length, children: [
       l,
       "/",
       i
@@ -3183,37 +3216,37 @@ const Ia = (r) => {
   ] });
 };
 export {
-  Na as Accordion,
-  Do as BurgerMenuButton,
-  mt as Button,
-  Pn as ButtonTypeSettings,
-  va as ButtonsSettings,
-  fa as CategorySettings,
-  gt as ChooseImage,
-  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,
+  Ca as Accordion,
+  Xo as BurgerMenuButton,
+  tt as Button,
+  An as ButtonTypeSettings,
+  ya as ButtonsSettings,
+  va as CategorySettings,
+  ft as ChooseImage,
+  Pa as ChooseImageModal,
+  Yo as EmptyCart,
+  ja as FormSettings,
+  $a as HeaderButtons,
+  j as Icon,
+  K as InputSettings,
+  Ji as InputUI,
+  Ue as ItemsSettings,
+  ba as LayoutSettings,
+  Ia as ListingSelector,
+  Aa as Loader,
+  Mt as Modal,
+  Na as PagesMobileMenu,
+  Go as PagesMobileModal,
+  ka as ProductOptions,
+  Ot as RangeSelector,
+  et as Select,
+  wa as ShareLink,
+  Vo as ShoppingButton,
+  Uo as ShoppingModalCart,
+  st as Switch,
   Rt as TextSettings,
-  Ot as TextareaSettings,
-  Ca as TextareaUI,
+  qt as TextareaSettings,
+  Ba as TextareaUI,
   Lt as TypesText,
-  zt as UserInfo
+  Ft as UserInfo
 };