@billgangcom/theme-lib 1.44.0 → 1.44.1

package/dist/ui.es.js

@@ -1,5 +1,5 @@
-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 $t, d as Nt, D as wt, e as Ct, v as Bt, B as lt, f as _t, P as St, g as Tt, h as Pt, i as Vt, k as Et, l as jt, m as At, M as Mt, n as Dt, o as Lt, p as Ut } from "./index-CsriRi8a.js";
-import { q as Aa, L as Ma } from "./index-CsriRi8a.js";
+import { j as t, I as v, c as U, a as K, S as st, T as qt, b as et, C as ft, u as $t, d as Nt, D as wt, e as Ct, v as Bt, B as lt, f as _t, P as St, g as Tt, h as Pt, i as Vt, k as Et, l as jt, m as At, M as Mt, n as Dt, o as Lt, p as Ut } from "./index-Dg3e7rFo.js";
+import { q as Aa, L as Ma } from "./index-Dg3e7rFo.js";
 import f from "react";
 import "@phosphor-icons/react";
 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 = {
@@ -27,8 +27,8 @@ const Yt = "_wrapper_1ibay_2", Gt = "_alignmentBlock_1ibay_8", Xt = "_title_1iba
   "bottomRight"
 ], oe = ["left", "top", "right", "bottom"], ba = (d) => {
   const { alignment: o, padding: e, setPadding: s, setAlignment: i } = d;
-  function a(p) {
-    switch (p) {
+  function a(h) {
+    switch (h) {
       case "left":
       case "topLeft":
       case "bottomLeft":
@@ -45,8 +45,8 @@ const Yt = "_wrapper_1ibay_2", Gt = "_alignmentBlock_1ibay_8", Xt = "_title_1iba
         return "TextAlignCenter";
     }
   }
-  function l(p) {
-    switch (p) {
+  function l(h) {
+    switch (h) {
       case "left":
         return "AlignLeft";
       case "right":
@@ -63,23 +63,23 @@ const Yt = "_wrapper_1ibay_2", Gt = "_alignmentBlock_1ibay_8", Xt = "_title_1iba
     /* @__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: ie.map((p) => /* @__PURE__ */ t.jsxs(
+        /* @__PURE__ */ t.jsx("div", { className: J.alignments, children: ie.map((h) => /* @__PURE__ */ t.jsxs(
           "div",
           {
             onClick: () => {
-              i(p);
+              i(h);
             },
             className: J.alignment,
             onMouseEnter: () => {
-              n(p);
+              n(h);
             },
             onMouseLeave: () => {
               n(null);
             },
             children: [
-              p !== o && r !== p && /* @__PURE__ */ t.jsx("div", { className: J.circle }),
-              p !== o && r === p && /* @__PURE__ */ t.jsx(
-                j,
+              h !== o && r !== h && /* @__PURE__ */ t.jsx("div", { className: J.circle }),
+              h !== o && r === h && /* @__PURE__ */ t.jsx(
+                v,
                 {
                   name: a(r),
                   fill: "#c2c2c2",
@@ -87,8 +87,8 @@ const Yt = "_wrapper_1ibay_2", Gt = "_alignmentBlock_1ibay_8", Xt = "_title_1iba
                   height: 22
                 }
               ),
-              p === o && /* @__PURE__ */ t.jsx(
-                j,
+              h === o && /* @__PURE__ */ t.jsx(
+                v,
                 {
                   name: a(o),
                   fill: "#FF3F19",
@@ -98,25 +98,25 @@ const Yt = "_wrapper_1ibay_2", Gt = "_alignmentBlock_1ibay_8", Xt = "_title_1iba
               )
             ]
           },
-          p
+          h
         )) }),
-        /* @__PURE__ */ t.jsx("div", { className: J.paddings, children: oe.map((p) => /* @__PURE__ */ t.jsxs(
+        /* @__PURE__ */ t.jsx("div", { className: J.paddings, children: oe.map((h) => /* @__PURE__ */ t.jsxs(
           "label",
           {
             className: U(J.padding, {
-              [J.active]: c === p
+              [J.active]: c === h
             }),
             onFocus: () => {
-              x(p);
+              x(h);
             },
             onBlur: () => {
               x(null);
             },
             children: [
               /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-                j,
+                v,
                 {
-                  name: l(p),
+                  name: l(h),
                   width: 20,
                   height: 20
                 }
@@ -125,10 +125,10 @@ const Yt = "_wrapper_1ibay_2", Gt = "_alignmentBlock_1ibay_8", Xt = "_title_1iba
                 K,
                 {
                   type: "number",
-                  value: String(e[p]),
-                  onChange: (h) => s({
+                  value: String(e[h]),
+                  onChange: (p) => s({
                     ...e,
-                    [p]: Number(h)
+                    [h]: Number(p)
                   }),
                   paddingless: !0,
                   borderless: !0
@@ -136,23 +136,23 @@ const Yt = "_wrapper_1ibay_2", Gt = "_alignmentBlock_1ibay_8", Xt = "_title_1iba
               )
             ]
           },
-          p
+          h
         )) })
       ] })
     ] })
   ] });
-}, ae = "_title_1jkiw_1", ce = "_subtitle_1jkiw_5", le = "_header_1jkiw_12", re = "_text_1jkiw_13", de = "_top_1jkiw_20", ue = "_itemsBlock_1jkiw_29", pt = {
+}, 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", pe = "_active_167ez_25", kt = {
+}, me = "_typeTexts_167ez_1", _e = "_block_167ez_8", he = "_active_167ez_25", kt = {
   typeTexts: me,
   block: _e,
-  active: pe
-}, he = ["bold", "italic", "underline", "strike-through", "code"], Ht = (d) => {
+  active: he
+}, pe = ["bold", "italic", "underline", "strike-through", "code"], Ht = (d) => {
   const { typesText: o, setTypesText: e } = d;
   function s(i) {
     switch (i) {
@@ -168,7 +168,7 @@ const Yt = "_wrapper_1ibay_2", Gt = "_alignmentBlock_1ibay_8", Xt = "_title_1iba
         return "TextUnderline";
     }
   }
-  return /* @__PURE__ */ t.jsx("div", { className: kt.typeTexts, children: he.map((i) => /* @__PURE__ */ t.jsx(
+  return /* @__PURE__ */ t.jsx("div", { className: kt.typeTexts, children: pe.map((i) => /* @__PURE__ */ t.jsx(
     "div",
     {
       className: U(kt.block, {
@@ -183,7 +183,7 @@ const Yt = "_wrapper_1ibay_2", Gt = "_alignmentBlock_1ibay_8", Xt = "_title_1iba
           a.push(i), e(a);
       },
       children: /* @__PURE__ */ t.jsx(
-        j,
+        v,
         {
           name: s(i),
           fill: o.includes(i) ? "#252525" : "#757575",
@@ -194,7 +194,7 @@ const Yt = "_wrapper_1ibay_2", Gt = "_alignmentBlock_1ibay_8", Xt = "_title_1iba
     },
     String(i)
   )) });
-}, ht = {
+}, pt = {
   h1: "Heading 1",
   h2: "Heading 2",
   h3: "Heading 3",
@@ -202,7 +202,7 @@ const Yt = "_wrapper_1ibay_2", Gt = "_alignmentBlock_1ibay_8", Xt = "_title_1iba
   h5: "Heading 5",
   h6: "Heading 6",
   p: "Paragraph"
-}, Rt = (d) => {
+}, zt = (d) => {
   const {
     typesText: o,
     isActiveText: e,
@@ -215,23 +215,23 @@ const Yt = "_wrapper_1ibay_2", Gt = "_alignmentBlock_1ibay_8", Xt = "_title_1iba
     typeFont: c,
     setTypeFont: x
   } = d;
-  return /* @__PURE__ */ t.jsxs("div", { className: pt.text, children: [
-    (r || e !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: pt.top, children: [
-      r && /* @__PURE__ */ t.jsx("h3", { className: pt.title, children: r }),
+  return /* @__PURE__ */ t.jsxs("div", { className: ht.text, children: [
+    (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(
         st,
         {
           current: e,
-          onChange: (p) => s(p)
+          onChange: (h) => s(h)
         }
       )
     ] }),
-    /* @__PURE__ */ t.jsxs("div", { className: pt.itemsBlock, children: [
-      /* @__PURE__ */ t.jsx("h5", { className: pt.subtitle, children: n }),
+    /* @__PURE__ */ t.jsxs("div", { className: ht.itemsBlock, children: [
+      /* @__PURE__ */ t.jsx("h5", { className: ht.subtitle, children: n }),
       /* @__PURE__ */ t.jsx(
         qt,
         {
-          onChange: (p) => a(p),
+          onChange: (h) => a(h),
           value: i,
           maxLength: 150
         }
@@ -247,15 +247,15 @@ const Yt = "_wrapper_1ibay_2", Gt = "_alignmentBlock_1ibay_8", Xt = "_title_1iba
         et,
         {
           label: "Type Text",
-          options: Object.values(ht).filter(
-            (p) => p !== ht[c]
+          options: Object.values(pt).filter(
+            (h) => h !== pt[c]
           ),
-          onChange: (p) => x(
-            Object.keys(ht).find(
-              (h) => ht[h] === p
+          onChange: (h) => x(
+            Object.keys(pt).find(
+              (p) => pt[p] === h
             )
           ),
-          value: ht[c]
+          value: pt[c]
         }
       )
     ] })
@@ -307,7 +307,7 @@ const Yt = "_wrapper_1ibay_2", Gt = "_alignmentBlock_1ibay_8", Xt = "_title_1iba
           /* @__PURE__ */ t.jsxs("div", { className: L.top, children: [
             /* @__PURE__ */ t.jsx("h3", { className: L.title, children: r(e.name, 20) }),
             /* @__PURE__ */ t.jsx("div", { className: L.closeIcon, children: /* @__PURE__ */ t.jsx(
-              j,
+              v,
               {
                 name: "X",
                 height: 20,
@@ -337,7 +337,7 @@ const Yt = "_wrapper_1ibay_2", Gt = "_alignmentBlock_1ibay_8", Xt = "_title_1iba
               );
             if (n.type === "text")
               return /* @__PURE__ */ t.jsx(
-                Rt,
+                zt,
                 {
                   typesText: e[n.field.type],
                   setTypesText: (c) => {
@@ -449,7 +449,7 @@ const Yt = "_wrapper_1ibay_2", Gt = "_alignmentBlock_1ibay_8", Xt = "_title_1iba
                   },
                   label: n.label,
                   value: e[n.field] || "String",
-                  leftAddon: n.leftAddon && n.leftAddon === "icon" && /* @__PURE__ */ t.jsx(j, { name: e[n.field] })
+                  leftAddon: n.leftAddon && n.leftAddon === "icon" && /* @__PURE__ */ t.jsx(v, { name: e[n.field] })
                 }
               );
           }) })
@@ -457,9 +457,9 @@ const Yt = "_wrapper_1ibay_2", Gt = "_alignmentBlock_1ibay_8", Xt = "_title_1iba
       }
     );
   }
-), Re = "_other_g74jx_1", ze = "_subtitle_g74jx_7", Fe = "_items_g74jx_14", It = {
-  other: Re,
-  subtitle: ze,
+), ze = "_other_g74jx_1", Re = "_subtitle_g74jx_7", Fe = "_items_g74jx_14", It = {
+  other: ze,
+  subtitle: Re,
   items: Fe
 }, yt = (d) => {
   const { items: o, title: e = "Other" } = d;
@@ -516,21 +516,21 @@ const Ue = (d) => {
     editable: n = !0,
     draggable: c = !1,
     withImage: x = !1,
-    deletable: p = !0,
-    addable: h = !0,
+    deletable: h = !0,
+    addable: p = !0,
     itemsType: _,
     itemsPlaceholder: b = "",
     itemsOptions: u,
-    hasRangeSelector: C = !1,
+    hasRangeSelector: B = !1,
     rangeSelectorOptions: H,
-    modalOptions: v,
-    addableOptions: O = {},
+    modalOptions: I,
+    addableOptions: N = {},
     limit: g,
-    autoScrollInterval: $
-  } = d, [F, q] = f.useState(null), [X, D] = f.useState({
+    autoScrollInterval: C
+  } = d, [F, S] = f.useState(null), [Y, E] = f.useState({
     top: 0,
     left: 0
-  }), [k, A] = f.useState(null), M = f.useRef(null), [W, T] = f.useState(!1), R = $t(
+  }), [y, M] = f.useState(null), T = f.useRef(null), [W, O] = f.useState(!1), z = $t(
     Nt(St, {
       activationConstraint: {
         distance: 5
@@ -539,33 +539,33 @@ const Ue = (d) => {
   );
   f.useEffect(() => {
     const m = () => {
-      q(null), T(!1);
+      S(null), O(!1);
     };
-    return document.body.addEventListener("click", m), q(null), T(!1), () => {
-      q(null), T(!1), document.body.removeEventListener("click", m);
+    return document.body.addEventListener("click", m), S(null), O(!1), () => {
+      S(null), O(!1), document.body.removeEventListener("click", m);
     };
   }, []), f.useEffect(() => {
     if (F) {
-      const m = [...s].map((I) => I.id === F.id ? F : I);
+      const m = [...s].map((k) => k.id === F.id ? F : k);
       i(m);
     }
   }, [F]), f.useEffect(() => {
-    if (M.current && k) {
-      const m = M.current.getBoundingClientRect().height, I = window.innerHeight;
-      let B = k.top;
-      B + m > I + window.scrollY - 200 && (B = I + window.scrollY - m - 200), B < 0 && (B = 10), D({
-        top: B,
-        left: k.left
+    if (T.current && y) {
+      const m = T.current.getBoundingClientRect().height, k = window.innerHeight;
+      let P = y.top;
+      P + m > k + window.scrollY - 200 && (P = k + window.scrollY - m - 200), P < 0 && (P = 10), E({
+        top: P,
+        left: y.left
       });
     }
-  }, [M.current, k]);
-  const Z = (m, I) => {
+  }, [T.current, y]);
+  const Z = (m, k) => {
     m.stopPropagation();
-    const B = m.target.getBoundingClientRect();
-    A({
-      top: B.top + window.scrollY,
-      left: B.left - 30
-    }), q(I), T(!0);
+    const P = m.target.getBoundingClientRect();
+    M({
+      top: P.top + window.scrollY,
+      left: P.left - 30
+    }), S(k), O(!0);
   };
   function rt(m) {
     if (x)
@@ -578,7 +578,7 @@ const Ue = (d) => {
           height: 16
         }
       ) : /* @__PURE__ */ t.jsx(
-        j,
+        v,
         {
           name: "Image",
           width: 16,
@@ -587,20 +587,20 @@ const Ue = (d) => {
         }
       );
   }
-  const y = (m) => {
-    const { active: I, over: B } = m;
-    if (B && I.id !== B.id) {
-      const E = s.findIndex((S) => S.id === I.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);
+  const j = (m) => {
+    const { active: k, over: P } = m;
+    if (P && k.id !== P.id) {
+      const D = s.findIndex((A) => A.id === k.id), G = s.findIndex((A) => A.id === P.id);
+      if (D !== -1 && G !== -1) {
+        const A = [...s], [dt] = A.splice(D, 1);
+        A.splice(G, 0, dt), i(A);
       }
     }
-  }, P = (m, I) => {
-    var E, Y;
-    const B = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+  }, q = (m, k) => {
+    var D, G;
+    const P = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       c && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-        j,
+        v,
         {
           name: "DotsSixVertical",
           hoverable: !0,
@@ -611,30 +611,30 @@ const Ue = (d) => {
       _ === "select" && u && /* @__PURE__ */ t.jsx(
         et,
         {
-          onChange: (S) => {
-            const dt = [...s], mt = u.find((bt) => bt.name === S);
+          onChange: (A) => {
+            const dt = [...s], mt = u.find((bt) => bt.name === A);
             if (!mt) return;
             const ut = dt.map((bt) => bt.id === m.id ? {
               ...mt,
-              name: S
+              name: A
             } : bt);
-            q({
+            S({
               ...m,
-              name: S
+              name: A
             }), i([...ut]);
           },
           value: m.name,
-          options: u.filter((S) => !s.find((dt) => dt.name === S.name)).map((S) => S.name),
+          options: u.filter((A) => !s.find((dt) => dt.name === A.name)).map((A) => A.name),
           leftAddon: rt(m.images)
         }
       ),
       _ === "input" && /* @__PURE__ */ t.jsx(
         K,
         {
-          onChange: (S) => {
+          onChange: (A) => {
             const mt = [...s].map((ut) => ut.id === m.id ? {
               ...m,
-              name: S
+              name: A
             } : ut);
             i([...mt]);
           },
@@ -645,36 +645,36 @@ const Ue = (d) => {
       _ === "image" && /* @__PURE__ */ t.jsx(
         ft,
         {
-          onChange: (S) => {
+          onChange: (A) => {
             const mt = [...s].map((ut) => ut.id === m.id ? {
               ...m,
-              images: S
+              images: A
             } : ut);
             i([...mt]);
           },
-          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
+          activeImage: (D = s.find((A) => A.id === m.id)) != null && D.images ? (G = s.find((A) => A.id === m.id)) == null ? void 0 : G.images[0] : void 0
         }
       ),
       /* @__PURE__ */ t.jsxs("div", { className: L.buttons, children: [
         n && /* @__PURE__ */ t.jsx("div", { className: L.deleteButton, children: /* @__PURE__ */ t.jsx(
-          j,
+          v,
           {
             name: "Sliders",
             hoverable: !0,
             width: 20,
             height: 20,
-            onClick: (S) => Z(S, m)
+            onClick: (A) => Z(A, m)
           }
         ) }),
-        p && /* @__PURE__ */ t.jsx("div", { className: L.deleteButton, children: /* @__PURE__ */ t.jsx(
-          j,
+        h && /* @__PURE__ */ t.jsx("div", { className: L.deleteButton, children: /* @__PURE__ */ t.jsx(
+          v,
           {
             name: "Trash",
             hoverable: !0,
             width: 20,
             height: 20,
             fill: "#C12A2A",
-            onClick: () => i(s.filter((S) => S.id !== m.id))
+            onClick: () => i(s.filter((A) => A.id !== m.id))
           }
         ) })
       ] })
@@ -683,15 +683,15 @@ const Ue = (d) => {
       Ve,
       {
         product: m,
-        index: I,
-        children: B
+        index: k,
+        children: P
       },
       m.id
     ) : /* @__PURE__ */ t.jsx(
       "div",
       {
         className: L.product,
-        children: B
+        children: P
       },
       m.id
     );
@@ -707,36 +707,36 @@ const Ue = (d) => {
         }
       )
     ] }),
-    F && n && v && W && /* @__PURE__ */ t.jsx(
+    F && n && I && W && /* @__PURE__ */ t.jsx(
       He,
       {
-        ref: M,
+        ref: T,
         activeItem: F,
-        setActiveItem: q,
-        popupPosition: X,
-        modalOptions: v,
-        setIsOpenModal: T
+        setActiveItem: S,
+        popupPosition: Y,
+        modalOptions: I,
+        setIsOpenModal: O
       }
     ),
-    C && H && /* @__PURE__ */ t.jsx(Ot, { ...H }),
+    B && H && /* @__PURE__ */ t.jsx(Ot, { ...H }),
     /* @__PURE__ */ t.jsxs("div", { className: L.products, children: [
       r && /* @__PURE__ */ t.jsx("h5", { className: L.subtitle, children: r }),
       c ? /* @__PURE__ */ t.jsx(
         wt,
         {
-          sensors: R,
-          onDragEnd: y,
+          sensors: z,
+          onDragEnd: j,
           children: /* @__PURE__ */ t.jsx(
             Ct,
             {
               items: s.map((m) => m.id),
               strategy: Bt,
-              children: s.map((m, I) => P(m, I))
+              children: s.map((m, k) => q(m, k))
             }
           )
         }
-      ) : s.map((m, I) => P(m, I)),
-      h && /* @__PURE__ */ t.jsx(
+      ) : s.map((m, k) => q(m, k)),
+      p && /* @__PURE__ */ t.jsx(
         "div",
         {
           style: {
@@ -755,26 +755,26 @@ const Ue = (d) => {
               disabled: !!(g && g <= s.length || s.length === (u == null ? void 0 : u.length)),
               onClick: () => {
                 const m = [...s];
-                let I = null;
+                let k = null;
                 if (u) {
-                  for (let B = 0; B < u.length; B++)
-                    if (!s.find((E) => E.id === u[B].id)) {
-                      I = u[B];
+                  for (let P = 0; P < u.length; P++)
+                    if (!s.find((D) => D.id === u[P].id)) {
+                      k = u[P];
                       break;
                     }
                 }
                 _ === "select" && u ? m.push({
-                  name: I ? I.name : u[0].name,
-                  id: (I == null ? void 0 : I.id) || u[0].id,
-                  ...O
+                  name: k ? k.name : u[0].name,
+                  id: (k == null ? void 0 : k.id) || u[0].id,
+                  ...N
                 }) : _ === "input" ? m.push({
                   name: "",
                   id: _t(),
-                  ...O
+                  ...N
                 }) : m.push({
                   name: `Image ${s.length + 1}`,
                   id: _t(),
-                  ...O
+                  ...N
                 }), i(m);
               },
               style: {
@@ -783,7 +783,7 @@ const Ue = (d) => {
               children: /* @__PURE__ */ t.jsxs("div", { className: L.addButton, children: [
                 /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
                 /* @__PURE__ */ t.jsx(
-                  j,
+                  v,
                   {
                     name: "Plus",
                     width: 16,
@@ -797,13 +797,13 @@ const Ue = (d) => {
       )
     ] }),
     a !== void 0 && /* @__PURE__ */ t.jsx(yt, { items: a }),
-    $ !== void 0 && /* @__PURE__ */ t.jsx(
+    C !== void 0 && /* @__PURE__ */ t.jsx(
       K,
       {
         label: "Auto scroll interval",
         type: "number",
-        value: String($.scrollInterval),
-        onChange: (m) => $.setScrollInterval(Number(m)),
+        value: String(C.scrollInterval),
+        onChange: (m) => C.setScrollInterval(Number(m)),
         min: 0.1,
         max: 100,
         style: {
@@ -813,7 +813,7 @@ const Ue = (d) => {
       }
     )
   ] });
-}, 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", ps = "_deleteButton_82zux_179", Q = {
+}, 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,
@@ -836,7 +836,7 @@ const Ue = (d) => {
   link: us,
   modalOptions: ms,
   addButton: _s,
-  deleteButton: ps
+  deleteButton: hs
 }, va = (d) => {
   const {
     isActiveItems: o,
@@ -849,24 +849,25 @@ const Ue = (d) => {
     draggable: n = !1,
     withImage: c = !1,
     addable: x = !0,
-    itemsOptions: p,
-    hasRangeSelector: h = !1,
+    itemsOptions: h,
+    hasRangeSelector: p = !1,
     rangeSelectorOptions: _,
     limit: b,
-    autoScrollInterval: u
+    autoScrollInterval: u,
+    deletable: B
   } = d;
-  function C(v) {
+  function H(N) {
     if (c)
-      return v ? /* @__PURE__ */ t.jsx(
+      return N ? /* @__PURE__ */ t.jsx(
         "img",
         {
-          src: `https://imagedelivery.net/${v[0]}/w=1000`,
+          src: `https://imagedelivery.net/${N[0]}/w=1000`,
           alt: "image",
           width: 16,
           height: 16
         }
       ) : /* @__PURE__ */ t.jsx(
-        j,
+        v,
         {
           name: "Image",
           width: 16,
@@ -875,12 +876,12 @@ const Ue = (d) => {
         }
       );
   }
-  const H = (v) => {
-    const O = p.find(($) => $.id === v);
-    if (!O) return;
-    const g = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+  const I = (N, g = !1) => {
+    const C = h.find((S) => S.id === N);
+    if (!C) return;
+    const F = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       n && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-        j,
+        v,
         {
           name: "DotsSixVertical",
           hoverable: !0,
@@ -891,26 +892,26 @@ const Ue = (d) => {
       /* @__PURE__ */ t.jsx(
         et,
         {
-          onChange: ($) => {
-            const F = [...s], q = p.find((k) => k.name === $);
-            if (!q) return;
-            const X = q.id, D = F.map((k) => k === v ? X : k);
-            i([...D]);
+          onChange: (S) => {
+            const Y = [...s], E = h.find((T) => T.name === S);
+            if (!E) return;
+            const y = E.id, M = Y.map((T) => T === N ? y : T);
+            i([...M]);
           },
-          value: O.name,
-          options: p.filter(($) => !s.find((F) => F === $.id)).map(($) => $.name),
-          leftAddon: C(O.images)
+          value: C.name,
+          options: h.filter((S) => !s.find((Y) => Y === S.id)).map((S) => S.name),
+          leftAddon: H(C.images)
         }
       ),
-      /* @__PURE__ */ t.jsx("div", { className: Q.buttons, children: /* @__PURE__ */ t.jsx("div", { className: Q.deleteButton, children: /* @__PURE__ */ t.jsx(
-        j,
+      g && /* @__PURE__ */ t.jsx("div", { className: Q.buttons, children: /* @__PURE__ */ t.jsx("div", { className: Q.deleteButton, children: /* @__PURE__ */ t.jsx(
+        v,
         {
           name: "Trash",
           hoverable: !0,
           width: 20,
           height: 20,
           fill: "#C12A2A",
-          onClick: () => i(s.filter(($) => $ !== v))
+          onClick: () => i(s.filter((S) => S !== N))
         }
       ) }) })
     ] });
@@ -918,9 +919,9 @@ const Ue = (d) => {
       "div",
       {
         className: Q.product,
-        children: g
+        children: F
       },
-      v
+      N
     );
   };
   return /* @__PURE__ */ t.jsxs("div", { className: Q.productsBlock, children: [
@@ -930,14 +931,14 @@ const Ue = (d) => {
         st,
         {
           current: o,
-          onChange: (v) => e == null ? void 0 : e(v)
+          onChange: (N) => e == null ? void 0 : e(N)
         }
       )
     ] }),
-    h && _ && /* @__PURE__ */ t.jsx(Ot, { ..._ }),
+    p && _ && /* @__PURE__ */ t.jsx(Ot, { ..._ }),
     /* @__PURE__ */ t.jsxs("div", { className: Q.products, children: [
       r && /* @__PURE__ */ t.jsx("h5", { className: Q.subtitle, children: r }),
-      s.map((v) => H(v)),
+      s.map((N) => I(N, B)),
       x && /* @__PURE__ */ t.jsx(
         "div",
         {
@@ -952,21 +953,21 @@ const Ue = (d) => {
             {
               withoutHover: !0,
               className: U(Q.button, {
-                [Q.disabled]: !!(b && b <= s.length || s.length === p.length)
+                [Q.disabled]: !!(b && b <= s.length || s.length === h.length)
               }),
               size: "s",
-              disabled: !!(b && b <= s.length || s.length === p.length),
+              disabled: !!(b && b <= s.length || s.length === h.length),
               onClick: () => {
-                const v = [...s];
-                let O = null;
-                if (p) {
-                  for (let g = 0; g < p.length; g++)
-                    if (!s.find(($) => $ === p[g].id)) {
-                      O = p[g];
+                const N = [...s];
+                let g = null;
+                if (h) {
+                  for (let C = 0; C < h.length; C++)
+                    if (!s.find((F) => F === h[C].id)) {
+                      g = h[C];
                       break;
                     }
                 }
-                v.push((O == null ? void 0 : O.id) || p[0].id), i(v);
+                N.push((g == null ? void 0 : g.id) || h[0].id), i(N);
               },
               style: {
                 width: "fit-content"
@@ -974,7 +975,7 @@ const Ue = (d) => {
               children: /* @__PURE__ */ t.jsxs("div", { className: Q.addButton, children: [
                 /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
                 /* @__PURE__ */ t.jsx(
-                  j,
+                  v,
                   {
                     name: "Plus",
                     width: 16,
@@ -994,7 +995,7 @@ const Ue = (d) => {
         label: "Auto scroll interval",
         type: "number",
         value: String(u.scrollInterval),
-        onChange: (v) => u.setScrollInterval(Number(v)),
+        onChange: (N) => u.setScrollInterval(Number(N)),
         min: 0.1,
         max: 100,
         style: {
@@ -1004,8 +1005,8 @@ const Ue = (d) => {
       }
     )
   ] });
-}, hs = "_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", ks = "_block_1vfw9_48", Is = "_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: hs,
+}, 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", ks = "_block_1vfw9_48", Is = "_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", R = {
+  title: ps,
   subtitle: xs,
   header: gs,
   text: fs,
@@ -1039,7 +1040,7 @@ const Ue = (d) => {
       "div",
       {
         ref: o,
-        className: z.modal,
+        className: R.modal,
         onClick: (n) => {
           n.stopPropagation();
         },
@@ -1048,10 +1049,10 @@ const Ue = (d) => {
           left: `${i.left}px`
         },
         children: [
-          /* @__PURE__ */ t.jsxs("div", { className: z.top, children: [
-            /* @__PURE__ */ t.jsx("h3", { className: z.title, children: r(e.name, 20) }),
-            /* @__PURE__ */ t.jsx("div", { className: z.closeIcon, children: /* @__PURE__ */ t.jsx(
-              j,
+          /* @__PURE__ */ t.jsxs("div", { className: R.top, children: [
+            /* @__PURE__ */ t.jsx("h3", { className: R.title, children: r(e.name, 20) }),
+            /* @__PURE__ */ t.jsx("div", { className: R.closeIcon, children: /* @__PURE__ */ t.jsx(
+              v,
               {
                 name: "X",
                 height: 20,
@@ -1063,7 +1064,7 @@ const Ue = (d) => {
               }
             ) })
           ] }),
-          /* @__PURE__ */ t.jsx("div", { className: z.modalOptions, children: a.map((n) => {
+          /* @__PURE__ */ t.jsx("div", { className: R.modalOptions, children: a.map((n) => {
             if (n.type === "image")
               return /* @__PURE__ */ t.jsx(
                 ft,
@@ -1082,7 +1083,7 @@ const Ue = (d) => {
               );
             if (n.type === "text")
               return /* @__PURE__ */ t.jsx(
-                Rt,
+                zt,
                 {
                   typesText: e[n.field.type],
                   setTypesText: (c) => {
@@ -1128,7 +1129,7 @@ const Ue = (d) => {
                 }
               );
             if (n.type === "inputSwitch")
-              return /* @__PURE__ */ t.jsxs("div", { className: z.link, children: [
+              return /* @__PURE__ */ t.jsxs("div", { className: R.link, children: [
                 /* @__PURE__ */ t.jsx(
                   K,
                   {
@@ -1173,7 +1174,7 @@ const Ue = (d) => {
                   },
                   label: n.label,
                   value: e[n.field] || "String",
-                  leftAddon: n.leftAddon && n.leftAddon === "icon" && /* @__PURE__ */ t.jsx(j, { name: e[n.field] })
+                  leftAddon: n.leftAddon && n.leftAddon === "icon" && /* @__PURE__ */ t.jsx(v, { name: e[n.field] })
                 }
               );
           }) })
@@ -1194,7 +1195,7 @@ function Hs(d) {
     {
       ref: a,
       style: c,
-      className: `${z.product} ${n ? z.dragging : ""}`,
+      className: `${R.product} ${n ? R.dragging : ""}`,
       ...s,
       ...i,
       children: e
@@ -1213,19 +1214,19 @@ const ja = (d) => {
     editable: n = !0,
     draggable: c = !1,
     withImage: x = !1,
-    deletable: p = !0,
-    addable: h = !0,
+    deletable: h = !0,
+    addable: p = !0,
     itemsType: _,
     itemsPlaceholder: b = "",
     itemsOptions: u,
-    hasRangeSelector: C = !1,
+    hasRangeSelector: B = !1,
     rangeSelectorOptions: H,
-    modalOptions: v,
-    addableOptions: O = {}
-  } = d, [g, $] = f.useState(null), [F, q] = f.useState({
+    modalOptions: I,
+    addableOptions: N = {}
+  } = d, [g, C] = f.useState(null), [F, S] = f.useState({
     top: 0,
     left: 0
-  }), [X, D] = f.useState(null), k = f.useRef(null), [A, M] = f.useState(!1), W = $t(
+  }), [Y, E] = f.useState(null), y = f.useRef(null), [M, T] = f.useState(!1), W = $t(
     Nt(St, {
       activationConstraint: {
         distance: 5
@@ -1233,47 +1234,47 @@ const ja = (d) => {
     })
   );
   f.useEffect(() => {
-    const y = () => {
-      $(null), M(!1);
+    const j = () => {
+      C(null), T(!1);
     };
-    return document.body.addEventListener("click", y), $(null), M(!1), () => {
-      $(null), M(!1), document.body.removeEventListener("click", y);
+    return document.body.addEventListener("click", j), C(null), T(!1), () => {
+      C(null), T(!1), document.body.removeEventListener("click", j);
     };
   }, []), f.useEffect(() => {
     if (g) {
-      const y = [...s].map((P) => P.id === g.id ? g : P);
-      i(y);
+      const j = [...s].map((q) => q.id === g.id ? g : q);
+      i(j);
     }
   }, [g]), f.useEffect(() => {
-    if (k.current && X) {
-      const y = k.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({
+    if (y.current && Y) {
+      const j = y.current.getBoundingClientRect().height, q = window.innerHeight;
+      let m = Y.top;
+      m + j > q + window.scrollY - 200 && (m = q + window.scrollY - j - 200), m < 0 && (m = 10), S({
         top: m,
-        left: X.left
+        left: Y.left
       });
     }
-  }, [k.current, X]);
-  const T = (y, P) => {
-    y.stopPropagation();
-    const m = y.target.getBoundingClientRect();
-    D({
+  }, [y.current, Y]);
+  const O = (j, q) => {
+    j.stopPropagation();
+    const m = j.target.getBoundingClientRect();
+    E({
       top: m.top + window.scrollY,
       left: m.left - 30
-    }), $(P), M(!0);
+    }), C(q), T(!0);
   };
-  function R(y) {
+  function z(j) {
     if (x)
-      return y ? /* @__PURE__ */ t.jsx(
+      return j ? /* @__PURE__ */ t.jsx(
         "img",
         {
-          src: `https://imagedelivery.net/${y[0]}/w=1000`,
+          src: `https://imagedelivery.net/${j[0]}/w=1000`,
           alt: "image",
           width: 16,
           height: 16
         }
       ) : /* @__PURE__ */ t.jsx(
-        j,
+        v,
         {
           name: "Image",
           width: 16,
@@ -1282,20 +1283,20 @@ const ja = (d) => {
         }
       );
   }
-  const Z = (y) => {
-    const { active: P, over: m } = y;
-    if (m && P.id !== m.id) {
-      const I = s.findIndex((E) => E.id === P.id), B = s.findIndex((E) => E.id === m.id);
-      if (I !== -1 && B !== -1) {
-        const E = [...s], [Y] = E.splice(I, 1);
-        E.splice(B, 0, Y), i(E);
+  const Z = (j) => {
+    const { active: q, over: m } = j;
+    if (m && q.id !== m.id) {
+      const k = s.findIndex((D) => D.id === q.id), P = s.findIndex((D) => D.id === m.id);
+      if (k !== -1 && P !== -1) {
+        const D = [...s], [G] = D.splice(k, 1);
+        D.splice(P, 0, G), i(D);
       }
     }
-  }, rt = (y) => {
+  }, rt = (j) => {
     var m;
-    const P = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    const q = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       c && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-        j,
+        v,
         {
           name: "DotsSixVertical",
           hoverable: !0,
@@ -1306,68 +1307,68 @@ const ja = (d) => {
       _ === "select" && u && /* @__PURE__ */ t.jsx(
         et,
         {
-          onChange: (I) => {
-            const E = [...s].map((Y) => Y.id === y.id ? {
-              ...y,
-              name: I
-            } : Y);
-            $({
-              ...y,
-              name: I
-            }), i([...E]);
+          onChange: (k) => {
+            const D = [...s].map((G) => G.id === j.id ? {
+              ...j,
+              name: k
+            } : G);
+            C({
+              ...j,
+              name: k
+            }), i([...D]);
           },
-          value: y.name,
-          options: u.filter((I) => !s.find((B) => B.name === I)),
-          leftAddon: R(y.images)
+          value: j.name,
+          options: u.filter((k) => !s.find((P) => P.name === k)),
+          leftAddon: z(j.images)
         }
       ),
       _ === "input" && /* @__PURE__ */ t.jsx(
         K,
         {
-          onChange: (I) => {
-            const E = [...s].map((Y) => Y.id === y.id ? {
-              ...y,
-              name: I
-            } : Y);
-            i([...E]);
+          onChange: (k) => {
+            const D = [...s].map((G) => G.id === j.id ? {
+              ...j,
+              name: k
+            } : G);
+            i([...D]);
           },
-          value: y.name,
+          value: j.name,
           placeholder: b
         }
       ),
       _ === "image" && /* @__PURE__ */ t.jsx(
         ft,
         {
-          onChange: (I) => {
-            const E = [...s].map((Y) => Y.id === y.id ? {
-              ...y,
-              images: I
-            } : Y);
-            i([...E]);
+          onChange: (k) => {
+            const D = [...s].map((G) => G.id === j.id ? {
+              ...j,
+              images: k
+            } : G);
+            i([...D]);
           },
-          activeImage: (m = s.find((I) => I.id === y.id)) == null ? void 0 : m.images[0]
+          activeImage: (m = s.find((k) => k.id === j.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(
-          j,
+      /* @__PURE__ */ t.jsxs("div", { className: R.buttons, children: [
+        n && /* @__PURE__ */ t.jsx("div", { className: R.deleteButton, children: /* @__PURE__ */ t.jsx(
+          v,
           {
             name: "Sliders",
             hoverable: !0,
             width: 20,
             height: 20,
-            onClick: (I) => T(I, y)
+            onClick: (k) => O(k, j)
           }
         ) }),
-        p && /* @__PURE__ */ t.jsx("div", { className: z.deleteButton, children: /* @__PURE__ */ t.jsx(
-          j,
+        h && /* @__PURE__ */ t.jsx("div", { className: R.deleteButton, children: /* @__PURE__ */ t.jsx(
+          v,
           {
             name: "Trash",
             hoverable: !0,
             width: 20,
             height: 20,
             fill: "#C12A2A",
-            onClick: () => i(s.filter((I) => I.id !== y.id))
+            onClick: () => i(s.filter((k) => k.id !== j.id))
           }
         ) })
       ] })
@@ -1375,44 +1376,44 @@ const ja = (d) => {
     return c ? /* @__PURE__ */ t.jsx(
       Hs,
       {
-        product: y,
-        children: P
+        product: j,
+        children: q
       },
-      y.id
+      j.id
     ) : /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: z.product,
-        children: P
+        className: R.product,
+        children: q
       },
-      y.id
+      j.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 }),
+  return /* @__PURE__ */ t.jsxs("div", { className: R.productsBlock, children: [
+    (l || o !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: R.top, children: [
+      l && /* @__PURE__ */ t.jsx("h3", { className: R.title, children: l }),
       o !== void 0 && /* @__PURE__ */ t.jsx(
         st,
         {
           current: o,
-          onChange: (y) => e == null ? void 0 : e(y)
+          onChange: (j) => e == null ? void 0 : e(j)
         }
       )
     ] }),
-    g && n && v && A && /* @__PURE__ */ t.jsx(
+    g && n && I && M && /* @__PURE__ */ t.jsx(
       Ls,
       {
-        ref: k,
+        ref: y,
         activeItem: g,
-        setActiveItem: $,
+        setActiveItem: C,
         popupPosition: F,
-        modalOptions: v,
-        setIsOpenModal: M
+        modalOptions: I,
+        setIsOpenModal: T
       }
     ),
-    C && H && /* @__PURE__ */ t.jsx(Ot, { ...H }),
-    /* @__PURE__ */ t.jsxs("div", { className: z.products, children: [
-      r && /* @__PURE__ */ t.jsx("h5", { className: z.subtitle, children: r }),
+    B && H && /* @__PURE__ */ t.jsx(Ot, { ...H }),
+    /* @__PURE__ */ t.jsxs("div", { className: R.products, children: [
+      r && /* @__PURE__ */ t.jsx("h5", { className: R.subtitle, children: r }),
       c ? /* @__PURE__ */ t.jsx(
         wt,
         {
@@ -1421,14 +1422,14 @@ const ja = (d) => {
           children: /* @__PURE__ */ t.jsx(
             Ct,
             {
-              items: s.map((y) => y.id),
+              items: s.map((j) => j.id),
               strategy: Bt,
-              children: s.map((y) => rt(y))
+              children: s.map((j) => rt(j))
             }
           )
         }
-      ) : s.map((y) => rt(y)),
-      h && /* @__PURE__ */ t.jsx(
+      ) : s.map((j) => rt(j)),
+      p && /* @__PURE__ */ t.jsx(
         "div",
         {
           style: {
@@ -1440,43 +1441,43 @@ const ja = (d) => {
             lt,
             {
               withoutHover: !0,
-              className: z.button,
+              className: R.button,
               size: "s",
               onClick: () => {
-                const y = [...s];
-                let P = null;
+                const j = [...s];
+                let q = null;
                 if (u) {
                   for (let m = 0; m < u.length; m++)
-                    if (!s.find((I) => I.name === u[m])) {
-                      P = u[m];
+                    if (!s.find((k) => k.name === u[m])) {
+                      q = u[m];
                       break;
                     }
                 }
-                _ === "select" && u ? y.push({
-                  name: P || u[0],
+                _ === "select" && u ? j.push({
+                  name: q || u[0],
                   id: _t(),
-                  ...O,
+                  ...N,
                   maxSymbols: 100
                   // пример значения
-                }) : _ === "input" ? y.push({
+                }) : _ === "input" ? j.push({
                   name: "",
                   id: _t(),
-                  ...O,
+                  ...N,
                   maxSymbols: 100
-                }) : y.push({
+                }) : j.push({
                   name: `Image ${s.length + 1}`,
                   id: _t(),
-                  ...O,
+                  ...N,
                   maxSymbols: 100
-                }), i(y);
+                }), i(j);
               },
               style: {
                 width: "fit-content"
               },
-              children: /* @__PURE__ */ t.jsxs("div", { className: z.addButton, children: [
+              children: /* @__PURE__ */ t.jsxs("div", { className: R.addButton, children: [
                 /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
                 /* @__PURE__ */ t.jsx(
-                  j,
+                  v,
                   {
                     name: "Plus",
                     width: 16,
@@ -1491,9 +1492,9 @@ const ja = (d) => {
     ] }),
     a !== void 0 && /* @__PURE__ */ t.jsx(yt, { items: a })
   ] });
-}, 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: zs,
+}, zs = "_title_bn7sv_1", Rs = "_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: zs,
+  subtitle: Rs,
   header: Fs,
   text: Vs,
   productsBlock: Us,
@@ -1515,25 +1516,25 @@ const ja = (d) => {
   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), [p, h] = f.useState(e.link || ""), [_, b] = f.useState(e.text || ""), [u, C] = f.useState(e.openInNewTab), { pages: H } = Vt();
+  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, B] = f.useState(e.openInNewTab), { pages: H } = Vt();
   return f.useEffect(() => {
     s({
       ...e,
       ...{
         text: _,
-        link: p,
+        link: h,
         destination: r,
         typesText: a,
         page: c,
         openInNewTab: u
       }
     });
-  }, [a, r, p, _, c, u]), /* @__PURE__ */ t.jsxs(
+  }, [a, r, h, _, c, u]), /* @__PURE__ */ t.jsxs(
     "div",
     {
       className: ct.modal,
-      onClick: (v) => {
-        v.stopPropagation();
+      onClick: (I) => {
+        I.stopPropagation();
       },
       style: {
         top: `${i.top}px`,
@@ -1544,7 +1545,7 @@ const ja = (d) => {
         /* @__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(
-            j,
+            v,
             {
               name: "X",
               height: 20,
@@ -1559,8 +1560,8 @@ const ja = (d) => {
             et,
             {
               label: "Destination",
-              onChange: (v) => n(v),
-              options: ["Go to Page", "Open Link"].filter((v) => v !== r),
+              onChange: (I) => n(I),
+              options: ["Go to Page", "Open Link"].filter((I) => I !== r),
               value: r
             }
           ),
@@ -1568,15 +1569,15 @@ const ja = (d) => {
             et,
             {
               label: "Go to",
-              onChange: (v) => x(v),
-              options: H ? Object.values(H).filter((v) => v.name !== c).map((v) => v.name) : [],
+              onChange: (I) => x(I),
+              options: H ? Object.values(H).filter((I) => I.name !== c).map((I) => I.name) : [],
               value: c
             }
           ) : /* @__PURE__ */ t.jsx(
             K,
             {
-              onChange: (v) => h(v),
-              value: p,
+              onChange: (I) => p(I),
+              value: h,
               placeholder: "https://",
               label: "Link"
             }
@@ -1586,13 +1587,13 @@ const ja = (d) => {
             {
               current: e.openInNewTab,
               label: "Open in new tab",
-              onChange: (v) => C(v)
+              onChange: (I) => B(I)
             }
           ),
           /* @__PURE__ */ t.jsx(
             qt,
             {
-              onChange: (v) => b(v),
+              onChange: (I) => b(I),
               value: _,
               label: "Text",
               maxLength: 150
@@ -1609,12 +1610,12 @@ const ja = (d) => {
       ]
     }
   );
-}), un = "_subtitle_jql1y_1", mn = "_header_jql1y_8", _n = "_text_jql1y_9", pn = "_productsBlock_jql1y_10", hn = "_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", kn = "_button_jql1y_11", In = "_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 = {
+}), 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", kn = "_button_jql1y_11", In = "_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: pn,
-  buttonsBlock: hn,
+  productsBlock: hn,
+  buttonsBlock: pn,
   top: xn,
   itemsBlock: gn,
   typeTexts: fn,
@@ -1636,7 +1637,7 @@ const ja = (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, x] = f.useState(null), p = f.useRef(null);
+  }), [c, x] = f.useState(null), h = f.useRef(null);
   f.useEffect(() => {
     const _ = () => {
       l(null);
@@ -1650,16 +1651,16 @@ const ja = (d) => {
       e(_);
     }
   }, [a]), f.useEffect(() => {
-    if (p.current && c) {
-      const _ = p.current.getBoundingClientRect().height, b = window.innerHeight;
+    if (h.current && c) {
+      const _ = h.current.getBoundingClientRect().height, b = window.innerHeight;
       let u = c.top;
       u + _ > b + window.scrollY - 200 && (u = b + window.scrollY - _ - 200), u < 0 && (u = 10), n({
         top: u,
         left: c.left
       });
     }
-  }, [p.current, c]);
-  const h = (_, b) => {
+  }, [h.current, c]);
+  const p = (_, b) => {
     _.stopPropagation();
     const u = _.target.getBoundingClientRect();
     x({
@@ -1678,11 +1679,11 @@ const ja = (d) => {
             et,
             {
               onChange: (b) => {
-                const C = [...o].map((H) => H.id === _.id ? {
+                const B = [...o].map((H) => H.id === _.id ? {
                   ..._,
                   type: b
                 } : H);
-                e(C);
+                e(B);
               },
               value: _.type,
               options: ["Primary", "Secondary", "Tertiary"]
@@ -1690,19 +1691,19 @@ const ja = (d) => {
           ),
           /* @__PURE__ */ t.jsxs("div", { className: it.buttons, children: [
             /* @__PURE__ */ t.jsx("div", { className: it.deleteButton, children: /* @__PURE__ */ t.jsx(
-              j,
+              v,
               {
                 name: "Sliders",
                 hoverable: !0,
                 width: 20,
                 height: 20,
                 onClick: (b) => {
-                  h(b, _);
+                  p(b, _);
                 }
               }
             ) }),
             s && /* @__PURE__ */ t.jsx("div", { className: it.deleteButton, children: /* @__PURE__ */ t.jsx(
-              j,
+              v,
               {
                 name: "Trash",
                 hoverable: !0,
@@ -1723,7 +1724,7 @@ const ja = (d) => {
     a && /* @__PURE__ */ t.jsx(
       dn,
       {
-        ref: p,
+        ref: h,
         activeButton: a,
         setActiveButton: l,
         popupPosition: r
@@ -1761,7 +1762,7 @@ const ja = (d) => {
             children: /* @__PURE__ */ t.jsxs("div", { className: it.addButton, children: [
               /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
               /* @__PURE__ */ t.jsx(
-                j,
+                v,
                 {
                   name: "Plus",
                   width: 16,
@@ -1795,7 +1796,7 @@ const ja = (d) => {
       }
     )
   ] }) });
-}, Mn = "_wrapper_m18qi_1", On = "_subtitle_m18qi_7", qn = "_content_m18qi_14", En = "_range_m18qi_22", Dn = "_track_m18qi_27", Ln = "_progress_m18qi_36", Hn = "_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 = {
+}, Mn = "_wrapper_m18qi_1", On = "_subtitle_m18qi_7", qn = "_content_m18qi_14", En = "_range_m18qi_22", Dn = "_track_m18qi_27", Ln = "_progress_m18qi_36", Hn = "_dots_m18qi_46", zn = "_dot_m18qi_46", Rn = "_active_m18qi_65", Fn = "_input_m18qi_77", Vn = "_countBlock_m18qi_91", Un = "_count_m18qi_91", Yn = "_controls_m18qi_107", Gn = "_button_m18qi_113", X = {
   wrapper: Mn,
   subtitle: On,
   content: qn,
@@ -1803,44 +1804,44 @@ const ja = (d) => {
   track: Dn,
   progress: Ln,
   dots: Hn,
-  dot: Rn,
-  active: zn,
+  dot: zn,
+  active: Rn,
   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, p = () => {
+  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);
   }, _ = (b) => {
     const u = e + b * i;
     l(u);
   };
-  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 }),
+  return /* @__PURE__ */ t.jsxs("div", { className: X.wrapper, children: [
+    o && /* @__PURE__ */ t.jsx("h5", { className: X.subtitle, children: o }),
+    /* @__PURE__ */ t.jsxs("div", { className: X.content, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: X.range, children: [
+        /* @__PURE__ */ t.jsx("div", { className: X.track }),
         /* @__PURE__ */ t.jsx(
           "div",
           {
-            className: G.progress,
+            className: X.progress,
             style: { width: `${x}%` }
           }
         ),
-        /* @__PURE__ */ t.jsx("div", { className: G.dots, children: c.map((b, u) => {
-          const C = u <= (a - e) / i;
+        /* @__PURE__ */ t.jsx("div", { className: X.dots, children: c.map((b, u) => {
+          const B = u <= (a - e) / i;
           return /* @__PURE__ */ t.jsx(
             "button",
             {
               onClick: () => _(u),
-              className: U(G.dot, {
-                [G.active]: C,
-                [G.inactive]: !C,
-                [G.dragging]: r
+              className: U(X.dot, {
+                [X.active]: B,
+                [X.inactive]: !B,
+                [X.dragging]: r
               }),
               "aria-label": `Set value to ${e + u * i}`
             },
@@ -1860,11 +1861,11 @@ const ja = (d) => {
             onMouseUp: () => n(!1),
             onTouchStart: () => n(!0),
             onTouchEnd: () => n(!1),
-            className: G.input
+            className: X.input
           }
         )
       ] }),
-      /* @__PURE__ */ t.jsxs("div", { className: G.countBlock, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: X.countBlock, children: [
         /* @__PURE__ */ t.jsx(
           K,
           {
@@ -1879,16 +1880,16 @@ const ja = (d) => {
             value: String(a)
           }
         ),
-        /* @__PURE__ */ t.jsxs("div", { className: G.controls, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: X.controls, children: [
           /* @__PURE__ */ t.jsx(
             "button",
             {
-              onClick: p,
+              onClick: h,
               disabled: a >= s,
-              className: G.button,
+              className: X.button,
               "aria-label": "Increment count",
               children: /* @__PURE__ */ t.jsx(
-                j,
+                v,
                 {
                   name: "CaretUp",
                   width: 15,
@@ -1900,12 +1901,12 @@ const ja = (d) => {
           /* @__PURE__ */ t.jsx(
             "button",
             {
-              onClick: h,
+              onClick: p,
               disabled: a <= e,
-              className: G.button,
+              className: X.button,
               "aria-label": "Decrement count",
               children: /* @__PURE__ */ t.jsx(
-                j,
+                v,
                 {
                   name: "CaretDown",
                   width: 15,
@@ -1918,7 +1919,7 @@ const ja = (d) => {
       ] })
     ] })
   ] });
-}, 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", pi = "_addButton_ix5ax_160", hi = "_deleteButton_ix5ax_175", xi = "_closeIcon_ix5ax_187", V = {
+}, 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,
@@ -1939,8 +1940,8 @@ const ja = (d) => {
   modal: ui,
   link: mi,
   modalOptions: _i,
-  addButton: pi,
-  deleteButton: hi,
+  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);
@@ -1963,7 +1964,7 @@ const ja = (d) => {
         /* @__PURE__ */ t.jsxs("div", { className: V.top, children: [
           /* @__PURE__ */ t.jsx("h3", { children: r(l.productData.name, 20) }),
           /* @__PURE__ */ t.jsx("div", { className: V.closeIcon, children: /* @__PURE__ */ t.jsx(
-            j,
+            v,
             {
               name: "X",
               height: 20,
@@ -2023,16 +2024,16 @@ const ka = (d) => {
     editable: n = !0,
     draggable: c = !1,
     withImage: x = !1,
-    deletable: p = !0,
-    addable: h = !0,
+    deletable: h = !0,
+    addable: p = !0,
     itemsType: _,
     itemsOptions: b
-  } = d, [u, C] = f.useState(
+  } = d, [u, B] = f.useState(
     null
-  ), [H, v] = f.useState({
+  ), [H, I] = f.useState({
     top: 0,
     left: 0
-  }), [O, g] = f.useState(!1), $ = $t(
+  }), [N, g] = f.useState(!1), C = $t(
     Nt(St, {
       activationConstraint: {
         distance: 5
@@ -2040,39 +2041,39 @@ const ka = (d) => {
     })
   );
   f.useEffect(() => {
-    const k = () => {
-      C(null), g(!1);
+    const y = () => {
+      B(null), g(!1);
     };
-    return document.body.addEventListener("click", k), C(null), g(!1), () => {
-      C(null), g(!1), document.body.removeEventListener("click", k);
+    return document.body.addEventListener("click", y), B(null), g(!1), () => {
+      B(null), g(!1), document.body.removeEventListener("click", y);
     };
   }, []), f.useEffect(() => {
     if (u) {
-      const k = [...s].map((A) => A.listingId === u.listingId ? u : A);
-      i(k);
+      const y = [...s].map((M) => M.listingId === u.listingId ? u : M);
+      i(y);
     }
   }, [u]);
-  const F = (k, A) => {
-    k.stopPropagation();
-    const M = k.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);
+  const F = (y, M) => {
+    y.stopPropagation();
+    const T = y.target.getBoundingClientRect(), W = 100, O = window.innerHeight;
+    let z = T.top + window.scrollY;
+    z + W > O && (z = O - W - 20), g(!0), I({
+      top: z - 80,
+      left: T.left - 30
+    }), B(M);
   };
-  function q(k) {
+  function S(y) {
     if (x)
-      return k ? /* @__PURE__ */ t.jsx(
+      return y ? /* @__PURE__ */ t.jsx(
         "img",
         {
-          src: `https://imagedelivery.net/${k}/w=1000`,
+          src: `https://imagedelivery.net/${y}/w=1000`,
           alt: "image",
           width: 16,
           height: 16
         }
       ) : /* @__PURE__ */ t.jsx(
-        j,
+        v,
         {
           name: "Image",
           width: 16,
@@ -2081,21 +2082,21 @@ const ka = (d) => {
         }
       );
   }
-  const X = (k) => {
-    const { active: A, over: M } = k;
-    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);
+  const Y = (y) => {
+    const { active: M, over: T } = y;
+    if (T && M.id !== T.id) {
+      const W = s.findIndex((z) => String(z.listingId) === M.id), O = s.findIndex((z) => String(z.listingId) === T.id);
+      if (W !== -1 && O !== -1) {
+        const z = [...s], [Z] = z.splice(W, 1);
+        z.splice(O, 0, Z), i(z);
       }
     }
-  }, D = (k, A) => {
-    const M = b.find((T) => k.listingId === T.id);
-    if (!M) return null;
+  }, E = (y, M) => {
+    const T = b.find((O) => y.listingId === O.id);
+    if (!T) return null;
     const W = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       c && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-        j,
+        v,
         {
           name: "DotsSixVertical",
           hoverable: !0,
@@ -2106,45 +2107,45 @@ const ka = (d) => {
       _ === "select" && /* @__PURE__ */ t.jsx(
         et,
         {
-          onChange: (T) => {
-            const R = [...s], Z = b.find((P) => P.productData.name === T);
+          onChange: (O) => {
+            const z = [...s], Z = b.find((q) => q.productData.name === O);
             if (!Z) return;
             const rt = {
               listingId: Z.id,
               image: Z.productData.images.length > 0 ? Z.productData.images[0].cfId : ""
-            }, y = R.map((P) => P.listingId === k.listingId ? rt : P);
-            C(rt), i([...y]);
+            }, j = z.map((q) => q.listingId === y.listingId ? rt : q);
+            B(rt), i([...j]);
           },
-          value: M.productData.name,
+          value: T.productData.name,
           options: [
-            ...b.filter((T) => !s.find((R) => R.listingId === T.id)).map((T) => T.productData.name)
+            ...b.filter((O) => !s.find((z) => z.listingId === O.id)).map((O) => O.productData.name)
           ],
-          leftAddon: q(
-            k.image || M.productData.images.length > 0 && M.productData.images[0].cfId || ""
+          leftAddon: S(
+            y.image || T.productData.images.length > 0 && T.productData.images[0].cfId || ""
           )
         },
-        A
+        M
       ),
       /* @__PURE__ */ t.jsxs("div", { className: V.buttons, children: [
         n && /* @__PURE__ */ t.jsx("div", { className: V.deleteButton, children: /* @__PURE__ */ t.jsx(
-          j,
+          v,
           {
             name: "Sliders",
             hoverable: !0,
             width: 20,
             height: 20,
-            onClick: (T) => F(T, k)
+            onClick: (O) => F(O, y)
           }
         ) }),
-        p && /* @__PURE__ */ t.jsx("div", { className: V.deleteButton, children: /* @__PURE__ */ t.jsx(
-          j,
+        h && /* @__PURE__ */ t.jsx("div", { className: V.deleteButton, children: /* @__PURE__ */ t.jsx(
+          v,
           {
             name: "Trash",
             hoverable: !0,
             width: 20,
             height: 20,
             fill: "#C12A2A",
-            onClick: () => i(s.filter((T) => T !== k))
+            onClick: () => i(s.filter((O) => O !== y))
           }
         ) })
       ] })
@@ -2152,17 +2153,17 @@ const ka = (d) => {
     return c ? /* @__PURE__ */ t.jsx(
       fi,
       {
-        product: k,
+        product: y,
         children: W
       },
-      k.listingId
+      y.listingId
     ) : /* @__PURE__ */ t.jsx(
       "div",
       {
         className: V.product,
         children: W
       },
-      k.listingId
+      y.listingId
     );
   };
   return /* @__PURE__ */ t.jsxs("div", { className: V.productsBlock, children: [
@@ -2172,15 +2173,15 @@ const ka = (d) => {
         st,
         {
           current: o,
-          onChange: (k) => e == null ? void 0 : e(k)
+          onChange: (y) => e == null ? void 0 : e(y)
         }
       )
     ] }),
-    O && u && /* @__PURE__ */ t.jsx(
+    N && u && /* @__PURE__ */ t.jsx(
       gi,
       {
         activeItem: u,
-        setActiveItem: C,
+        setActiveItem: B,
         setIsOpenModal: g,
         popupPosition: H,
         itemsOptions: b
@@ -2191,19 +2192,19 @@ const ka = (d) => {
       c ? /* @__PURE__ */ t.jsx(
         wt,
         {
-          sensors: $,
-          onDragEnd: X,
+          sensors: C,
+          onDragEnd: Y,
           children: /* @__PURE__ */ t.jsx(
             Ct,
             {
-              items: s.map((k) => String(k.listingId)),
+              items: s.map((y) => String(y.listingId)),
               strategy: Bt,
-              children: s.map((k, A) => D(k, A))
+              children: s.map((y, M) => E(y, M))
             }
           )
         }
-      ) : s.map((k, A) => D(k, A)),
-      h && /* @__PURE__ */ t.jsx(
+      ) : s.map((y, M) => E(y, M)),
+      p && /* @__PURE__ */ t.jsx(
         "div",
         {
           style: {
@@ -2218,16 +2219,16 @@ const ka = (d) => {
               className: V.button,
               size: "s",
               onClick: () => {
-                const k = [...s];
-                for (let A = 0; A < b.length; A++)
-                  if (!s.find((M) => M.listingId === b[A].id)) {
-                    k.push({
-                      listingId: b[A].id,
-                      image: b[A].productData.images.length > 0 ? b[A].productData.images[0].cfId : ""
+                const y = [...s];
+                for (let M = 0; M < b.length; M++)
+                  if (!s.find((T) => T.listingId === b[M].id)) {
+                    y.push({
+                      listingId: b[M].id,
+                      image: b[M].productData.images.length > 0 ? b[M].productData.images[0].cfId : ""
                     });
                     break;
                   }
-                i(k);
+                i(y);
               },
               disabled: s.length === b.length,
               style: {
@@ -2236,7 +2237,7 @@ const ka = (d) => {
               children: /* @__PURE__ */ t.jsxs("div", { className: V.addButton, children: [
                 /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
                 /* @__PURE__ */ t.jsx(
-                  j,
+                  v,
                   {
                     name: "Plus",
                     width: 16,
@@ -2251,7 +2252,7 @@ const ka = (d) => {
     ] }),
     a !== void 0 && /* @__PURE__ */ t.jsx(yt, { items: a })
   ] });
-}, bi = "_options_6cemk_1", vi = "_price_6cemk_12", ji = "_oldPrice_6cemk_19", yi = "_newPrice_6cemk_27", ki = "_animate_6cemk_34", Ii = "_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", Li = "_charge_6cemk_165", Hi = "_chargeActive_6cemk_190", Ri = "_title_6cemk_198", w = {
+}, bi = "_options_6cemk_1", vi = "_price_6cemk_12", ji = "_oldPrice_6cemk_19", yi = "_newPrice_6cemk_27", ki = "_animate_6cemk_34", Ii = "_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", Li = "_charge_6cemk_165", Hi = "_chargeActive_6cemk_190", zi = "_title_6cemk_198", w = {
   options: bi,
   price: vi,
   oldPrice: ji,
@@ -2274,9 +2275,9 @@ const ka = (d) => {
   chargeTypes: Di,
   charge: Li,
   chargeActive: Hi,
-  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,
+  title: zi
+}, Ri = "_wrapper_c1dht_1", Fi = "_label_c1dht_9", Vi = "_input_c1dht_18", Ui = "_paddingless_c1dht_31", Yi = "_content_c1dht_35", Gi = "_contentBorder_c1dht_47", Xi = "_borderless_c1dht_52", Wi = "_rightIcon_c1dht_57", nt = {
+  wrapper: Ri,
   label: Fi,
   input: Vi,
   paddingless: Ui,
@@ -2296,18 +2297,18 @@ const ka = (d) => {
     placeholder: n,
     disabled: c = !1,
     required: x = !1,
-    regex: p,
-    paddingless: h = !1,
+    regex: h,
+    paddingless: p = !1,
     borderless: _ = !1,
     editable: b = !1,
     isSearch: u = !1,
-    centered: C = !1
-  } = d, { themeSettings: H } = Et(), { inputs: v } = H, [O, g] = f.useState(!1);
-  function $(q) {
-    return Number(q) < 0 ? String(l) : q;
+    centered: B = !1
+  } = d, { themeSettings: H } = Et(), { inputs: I } = H, [N, g] = f.useState(!1);
+  function C(S) {
+    return Number(S) < 0 ? String(l) : S;
   }
-  function F(q) {
-    return !x || !p ? !0 : new RegExp(p).test(q);
+  function F(S) {
+    return !x || !h ? !0 : new RegExp(h).test(S);
   }
   return /* @__PURE__ */ t.jsxs("div", { className: nt.wrapper, children: [
     s && /* @__PURE__ */ t.jsx(
@@ -2322,12 +2323,12 @@ const ka = (d) => {
       "div",
       {
         className: U(nt.content, {
-          [nt.contentBorder]: v.border.active
+          [nt.contentBorder]: I.border.active
         }),
         style: {
-          paddingRight: u ? v.general.height + 15 : "auto",
           ...e,
-          background: v.field.active ? v.field.color : "transparent"
+          background: I.field.active ? I.field.color : "transparent",
+          padding: u ? `7px ${Number(I.general.size) + 20}px 7px 11px` : "7px 11px"
         },
         children: [
           /* @__PURE__ */ t.jsx(
@@ -2335,19 +2336,19 @@ const ka = (d) => {
             {
               id: s,
               type: a || "text",
-              onChange: (q) => {
-                if (a === "text") o(q.target.value);
+              onChange: (S) => {
+                if (a === "text") o(S.target.value);
                 else {
-                  const X = $(q.target.value);
-                  o(X);
+                  const Y = C(S.target.value);
+                  o(Y);
                 }
               },
               value: i,
               autoComplete: "off",
               placeholder: n || "Type something...",
               className: U(nt.input, {
-                [nt.required]: O && x && !F(i),
-                [nt.paddingless]: h,
+                [nt.required]: N && x && !F(i),
+                [nt.paddingless]: p,
                 [nt.borderless]: _
               }),
               min: a === "number" ? l : void 0,
@@ -2355,21 +2356,21 @@ const ka = (d) => {
               disabled: c,
               onFocus: () => g(!0),
               style: {
-                textAlign: C ? "center" : "left"
+                textAlign: B ? "center" : "left"
               }
             }
           ),
           u && /* @__PURE__ */ t.jsx("div", { className: nt.rightIcon, children: /* @__PURE__ */ t.jsx(
-            j,
+            v,
             {
               name: "MagnifyingGlass",
               fill: "var(--icon-secondary)",
-              width: v.general.height,
-              height: v.general.height
+              width: I.general.size,
+              height: I.general.size
             }
           ) }),
           b && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-            j,
+            v,
             {
               name: "Sliders",
               width: 20,
@@ -2411,7 +2412,7 @@ const ka = (d) => {
       children: l === "Tertiary" ? /* @__PURE__ */ t.jsxs("div", { className: ot.content, children: [
         o,
         /* @__PURE__ */ t.jsx(
-          j,
+          v,
           {
             name: "ArrowRight",
             fill: "var(--icon-tertiary)",
@@ -2423,17 +2424,17 @@ const ka = (d) => {
     }
   );
 };
-var zt = /* @__PURE__ */ ((d) => (d.ONE_TIME = "One-Time", d.RECURRING = "Subscribe & Save", d))(zt || {});
+var Rt = /* @__PURE__ */ ((d) => (d.ONE_TIME = "One-Time", d.RECURRING = "Subscribe & Save", d))(Rt || {});
 const Ia = (d) => {
-  var v, O;
-  const { variants: o } = d, [e, s] = f.useState(o[0]), [i, a] = f.useState(e.chargeTypes[0]), l = jt(), [r, n] = f.useState(1), { reset: c, addProductToCart: x, getProducts: p } = At(), [h, _] = f.useState(!1);
+  var I, N;
+  const { variants: o } = d, [e, s] = f.useState(o[0]), [i, a] = f.useState(e.chargeTypes[0]), l = jt(), [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 p(), await x({
+    await h(), await x({
       productId: d.id,
       productVariantId: e.id,
       quantity: r
@@ -2442,23 +2443,23 @@ const Ia = (d) => {
   function u() {
     c(), b(), l("/checkout");
   }
-  function C(g) {
+  function B(g) {
     if (g >= 864e5) {
-      const D = Math.floor(g / 864e5);
-      return `${D} ${D === 1 ? "day" : "days"}`;
+      const E = Math.floor(g / 864e5);
+      return `${E} ${E === 1 ? "day" : "days"}`;
     } else if (g >= 36e5) {
-      const D = Math.floor(g / 36e5);
-      return `${D} ${D === 1 ? "hour" : "hours"}`;
+      const E = Math.floor(g / 36e5);
+      return `${E} ${E === 1 ? "hour" : "hours"}`;
     } else if (g >= 6e4) {
-      const D = Math.floor(g / 6e4);
-      return `${D} ${D === 1 ? "minute" : "minutes"}`;
+      const E = Math.floor(g / 6e4);
+      return `${E} ${E === 1 ? "minute" : "minutes"}`;
     } else {
-      const D = Math.floor(g / 1e3);
-      return `${D} ${D === 1 ? "second" : "seconds"}`;
+      const E = Math.floor(g / 1e3);
+      return `${E} ${E === 1 ? "second" : "seconds"}`;
     }
   }
-  function H(g, $) {
-    return g.length > $ ? g.slice(0, $) + "..." : g;
+  function H(g, C) {
+    return g.length > C ? g.slice(0, C) + "..." : g;
   }
   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(
@@ -2468,12 +2469,12 @@ const Ia = (d) => {
           [w.chargeActive]: i === g
         }),
         onClick: () => a(g),
-        children: zt[g]
+        children: Rt[g]
       },
       g
     )) }),
     /* @__PURE__ */ t.jsx("div", { className: w.variants, children: o.map((g) => {
-      var $;
+      var C;
       return /* @__PURE__ */ t.jsxs(
         "div",
         {
@@ -2490,7 +2491,7 @@ const Ia = (d) => {
               ] })
             ] }),
             /* @__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,
+              ((C = g.quantity.restrictions) == null ? void 0 : C.max) || g.quantity.available || 0,
               " in stock"
             ] }) })
           ]
@@ -2508,7 +2509,7 @@ const Ia = (d) => {
           },
           className: w.button,
           disabled: e.quantity.restrictions && r <= e.quantity.restrictions.min,
-          children: /* @__PURE__ */ t.jsx(j, { name: "Minus" })
+          children: /* @__PURE__ */ t.jsx(v, { name: "Minus" })
         }
       ),
       /* @__PURE__ */ t.jsx(
@@ -2517,8 +2518,8 @@ const Ia = (d) => {
           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,
+          max: ((I = e.quantity.restrictions) == null ? void 0 : I.max) || e.quantity.available || 1 / 0,
+          min: ((N = e.quantity.restrictions) == null ? void 0 : N.min) || 0,
           centered: !0
         }
       ),
@@ -2531,7 +2532,7 @@ const Ia = (d) => {
           },
           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" })
+          children: /* @__PURE__ */ t.jsx(v, { name: "Plus" })
         }
       )
     ] }),
@@ -2540,7 +2541,7 @@ const Ia = (d) => {
         /* @__PURE__ */ t.jsx("span", { children: "Delivery" }),
         /* @__PURE__ */ t.jsxs("div", { className: w.infoRight, children: [
           /* @__PURE__ */ t.jsx(
-            j,
+            v,
             {
               name: "Lightning",
               fill: "#FF3F19",
@@ -2548,13 +2549,13 @@ const Ia = (d) => {
               height: 20
             }
           ),
-          /* @__PURE__ */ t.jsx("span", { children: !e.deliveryTime || e.deliveryTime === 0 ? "Instant" : C(e.deliveryTime) })
+          /* @__PURE__ */ t.jsx("span", { children: !e.deliveryTime || e.deliveryTime === 0 ? "Instant" : B(e.deliveryTime) })
         ] })
       ] }),
       /* @__PURE__ */ t.jsxs("div", { className: w.info, children: [
         /* @__PURE__ */ t.jsx("span", { children: "Price" }),
         /* @__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]: h }), children: [
+          /* @__PURE__ */ t.jsxs("span", { className: U(w.newPrice, { [w.animate]: p }), children: [
             "$ ",
             (e.price.amount || 0) * r
           ] }),
@@ -2562,11 +2563,11 @@ const Ia = (d) => {
             "$ ",
             (e.compareAtPrice.amount || 0) * r
           ] })
-        ] }) : /* @__PURE__ */ t.jsxs("span", { className: U(w.newPrice, { [w.animate]: h }), children: [
+        ] }) : /* @__PURE__ */ t.jsxs("span", { className: U(w.newPrice, { [w.animate]: p }), 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]: h }), children: [
+          /* @__PURE__ */ t.jsxs("span", { className: U(w.newPrice, { [w.animate]: p }), children: [
             "$ ",
             e.subscriptionSettings.price.amount || 0
           ] }),
@@ -2574,7 +2575,7 @@ const Ia = (d) => {
             "$ ",
             e.subscriptionSettings.compareAtPrice.amount || 0
           ] })
-        ] }) : e.subscriptionSettings && /* @__PURE__ */ t.jsxs("span", { className: U(w.newPrice, { [w.animate]: h }), children: [
+        ] }) : e.subscriptionSettings && /* @__PURE__ */ t.jsxs("span", { className: U(w.newPrice, { [w.animate]: p }), children: [
           "$ ",
           e.subscriptionSettings.price.amount || 0
         ] }) })
@@ -2599,7 +2600,7 @@ const Ia = (d) => {
       )
     ] })
   ] });
-}, 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", po = "_title_1tdo3_131", ho = "_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", ko = "_productInfo_1tdo3_221", Io = "_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", Lo = "_pagesMobileModalHeader_1tdo3_369", Ho = "_pagesMobileModalFooter_1tdo3_379", N = {
+}, 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", ko = "_productInfo_1tdo3_221", Io = "_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", Lo = "_pagesMobileModalHeader_1tdo3_369", Ho = "_pagesMobileModalFooter_1tdo3_379", $ = {
   button: oo,
   login: ao,
   signUp: co,
@@ -2612,8 +2613,8 @@ const Ia = (d) => {
   "slide-out-fade": "_slide-out-fade_1tdo3_1",
   info: mo,
   top: _o,
-  title: po,
-  clear: ho,
+  title: ho,
+  clear: po,
   activeClear: xo,
   count: go,
   cart: fo,
@@ -2643,13 +2644,13 @@ const Ia = (d) => {
 class gt extends Error {
 }
 gt.prototype.name = "InvalidTokenError";
-function Ro(d) {
+function zo(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 zo(d) {
+function Ro(d) {
   let o = d.replace(/-/g, "+").replace(/_/g, "/");
   switch (o.length % 4) {
     case 0:
@@ -2664,7 +2665,7 @@ function zo(d) {
       throw new Error("base64 string is not of the correct length");
   }
   try {
-    return Ro(o);
+    return zo(o);
   } catch {
     return atob(o);
   }
@@ -2678,7 +2679,7 @@ function Fo(d, o) {
     throw new gt(`Invalid token specified: missing part #${e + 1}`);
   let i;
   try {
-    i = zo(s);
+    i = Ro(s);
   } catch (a) {
     throw new gt(`Invalid token specified: invalid base64 for part #${e + 1} (${a.message})`);
   }
@@ -2690,39 +2691,39 @@ function Fo(d, o) {
 }
 const $a = (d) => {
   const { shopping: o, signUp: e, isShowUserInfo: s = !0 } = d;
-  return /* @__PURE__ */ t.jsxs("div", { className: N.buttons, children: [
+  return /* @__PURE__ */ t.jsxs("div", { className: $.buttons, children: [
     o && /* @__PURE__ */ t.jsx(Vo, {}),
     s && /* @__PURE__ */ t.jsx(Ft, { signUp: e })
   ] });
 }, Vo = () => {
   const [d, o] = f.useState(!1), [e, s] = f.useState([]), { cart: i, getProducts: a } = At();
-  function l(h) {
+  function l(p) {
     for (let _ = 0; _ < i.parts.length; _++)
-      for (let b = 0; b < h.variants.length; b++)
-        if (i.parts[_].productVariantId === h.variants[_].id)
+      for (let b = 0; b < p.variants.length; b++)
+        if (i.parts[_].productVariantId === p.variants[_].id)
           return i.parts[_].productVariantId;
   }
-  function r(h) {
+  function r(p) {
     for (let _ = 0; _ < i.parts.length; _++)
-      for (let b = 0; b < h.variants.length; b++)
-        if (i.parts[_].productVariantId === h.variants[_].id)
+      for (let b = 0; b < p.variants.length; b++)
+        if (i.parts[_].productVariantId === p.variants[_].id)
           return i.parts[_].quantity;
   }
   f.useEffect(() => {
     (async () => {
-      const _ = i.parts.map((C) => String(C.productId)), u = (await a([..._])).map((C) => ({
-        ...C,
-        activeVariantId: l(C),
-        quantity: r(C)
+      const _ = i.parts.map((B) => String(B.productId)), u = (await a([..._])).map((B) => ({
+        ...B,
+        activeVariantId: l(B),
+        quantity: r(B)
       }));
       s(u);
     })();
   }, [i.parts.length]);
-  function n(h) {
+  function n(p) {
     var _;
-    return !h || !(h != null && h.variants) ? !1 : (_ = h.variants.find((b) => b.id === h.activeVariantId)) == null ? void 0 : _.subscriptionSettings;
+    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]), [x, p] = f.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(
       tt,
@@ -2731,18 +2732,18 @@ const $a = (d) => {
         style: {
           padding: 10
         },
-        onClick: (h) => {
-          h.stopPropagation(), window.location.pathname !== "/admin/builder" && (o(!0), p(!0));
+        onClick: (p) => {
+          p.stopPropagation(), window.location.pathname !== "/admin/builder" && (o(!0), h(!0));
         },
         children: [
           /* @__PURE__ */ t.jsx(
-            j,
+            v,
             {
               name: "Handbag",
               fill: "var(--icon-primary)"
             }
           ),
-          c && /* @__PURE__ */ t.jsx("div", { className: N.shoppingCount, children: i.parts.length })
+          c && /* @__PURE__ */ t.jsx("div", { className: $.shoppingCount, children: i.parts.length })
         ]
       }
     ),
@@ -2750,7 +2751,7 @@ const $a = (d) => {
       Mt,
       {
         close: () => {
-          p(!1), setTimeout(() => {
+          h(!1), setTimeout(() => {
             o(!1);
           }, 300);
         },
@@ -2768,41 +2769,41 @@ const $a = (d) => {
   ] });
 }, Uo = (d) => {
   const { activeProducts: o, isCartNotEmpty: e, isOpen: s } = d, { cart: i, reset: a, getTotalAndDiscount: l, updateQuantityOfProduct: r } = At(), n = jt();
-  function c(h) {
-    n(h);
+  function c(p) {
+    n(p);
   }
-  function x(h) {
+  function x(p) {
     r({
-      productId: h.id,
-      productVariantId: h.activeVariantId,
-      quantity: h.quantity + 1
+      productId: p.id,
+      productVariantId: p.activeVariantId,
+      quantity: p.quantity + 1
     });
   }
-  function p(h) {
+  function h(p) {
     r({
-      productId: h.id,
-      productVariantId: h.activeVariantId,
-      quantity: h.quantity - 1
+      productId: p.id,
+      productVariantId: p.activeVariantId,
+      quantity: p.quantity - 1
     });
   }
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: U(N.modal, {
-        [N.closing]: !s
+      className: U($.modal, {
+        [$.closing]: !s
       }),
-      onClick: (h) => h.stopPropagation(),
+      onClick: (p) => p.stopPropagation(),
       children: [
-        /* @__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.jsxs("div", { className: $.top, children: [
+          /* @__PURE__ */ t.jsxs("div", { className: $.info, children: [
+            /* @__PURE__ */ t.jsx("span", { className: $.title, children: "Cart" }),
+            e && /* @__PURE__ */ t.jsx("div", { className: $.count, children: i.parts.length })
           ] }),
           /* @__PURE__ */ t.jsx(
             "button",
             {
-              className: U(N.clear, {
-                [N.activeClear]: e
+              className: U($.clear, {
+                [$.activeClear]: e
               }),
               disabled: !e,
               onClick: a,
@@ -2810,41 +2811,41 @@ const $a = (d) => {
             }
           )
         ] }),
-        e ? /* @__PURE__ */ t.jsxs("div", { className: N.cart, children: [
-          /* @__PURE__ */ t.jsx("div", { className: N.products, children: o.map((h) => /* @__PURE__ */ t.jsxs(
+        e ? /* @__PURE__ */ t.jsxs("div", { className: $.cart, children: [
+          /* @__PURE__ */ t.jsx("div", { className: $.products, children: o.map((p) => /* @__PURE__ */ t.jsxs(
             "div",
             {
-              className: N.product,
+              className: $.product,
               children: [
-                /* @__PURE__ */ t.jsxs("div", { className: N.productInfo, children: [
+                /* @__PURE__ */ t.jsxs("div", { className: $.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: N.image
+                      className: $.image
                     }
                   ),
-                  /* @__PURE__ */ t.jsxs("div", { className: N.content, children: [
-                    /* @__PURE__ */ t.jsx("div", { className: N.name, children: h.name }),
-                    /* @__PURE__ */ t.jsxs("div", { className: N.price, children: [
+                  /* @__PURE__ */ t.jsxs("div", { className: $.content, children: [
+                    /* @__PURE__ */ t.jsx("div", { className: $.name, children: p.name }),
+                    /* @__PURE__ */ t.jsxs("div", { className: $.price, children: [
                       "$",
-                      h.variants.find((_) => _.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: N.productButtons, children: [
+                /* @__PURE__ */ t.jsxs("div", { className: $.productButtons, children: [
                   /* @__PURE__ */ t.jsx(
                     "div",
                     {
                       onClick: () => {
-                        h.quantity !== 1 && p(h);
+                        p.quantity !== 1 && h(p);
                       },
-                      className: N.productButton,
+                      className: $.productButton,
                       children: /* @__PURE__ */ t.jsx(
-                        j,
+                        v,
                         {
                           name: "Minus",
                           fill: "#757575",
@@ -2854,14 +2855,14 @@ const $a = (d) => {
                       )
                     }
                   ),
-                  /* @__PURE__ */ t.jsx("div", { className: N.productCount, children: h.quantity }),
+                  /* @__PURE__ */ t.jsx("div", { className: $.productCount, children: p.quantity }),
                   /* @__PURE__ */ t.jsx(
                     "div",
                     {
-                      onClick: () => x(h),
-                      className: N.productButton,
+                      onClick: () => x(p),
+                      className: $.productButton,
                       children: /* @__PURE__ */ t.jsx(
-                        j,
+                        v,
                         {
                           name: "Plus",
                           fill: "#757575",
@@ -2874,14 +2875,14 @@ const $a = (d) => {
                 ] })
               ]
             },
-            h.id
+            p.id
           )) }),
-          /* @__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.jsxs("div", { className: $.bottom, children: [
+            /* @__PURE__ */ t.jsxs("div", { className: $.subtotal, children: [
+              /* @__PURE__ */ t.jsxs("div", { className: $.block, children: [
                 /* @__PURE__ */ t.jsx("span", { children: "Subtotal" }),
                 /* @__PURE__ */ t.jsx(
-                  j,
+                  v,
                   {
                     name: "Info",
                     width: 20,
@@ -2890,7 +2891,7 @@ const $a = (d) => {
                   }
                 )
               ] }),
-              /* @__PURE__ */ t.jsxs("div", { className: N.total, children: [
+              /* @__PURE__ */ t.jsxs("div", { className: $.total, children: [
                 "$",
                 l().total
               ] })
@@ -2901,9 +2902,9 @@ const $a = (d) => {
       ]
     }
   );
-}, Yo = () => /* @__PURE__ */ t.jsxs("div", { className: N.empty, children: [
+}, Yo = () => /* @__PURE__ */ t.jsxs("div", { className: $.empty, children: [
   /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-    j,
+    v,
     {
       name: "Handbag",
       fill: "var(--icon-secondary)"
@@ -2917,7 +2918,7 @@ const $a = (d) => {
       "a",
       {
         href: "/products",
-        className: N.link,
+        className: $.link,
         children: "view products"
       }
     )
@@ -2961,7 +2962,7 @@ const $a = (d) => {
   }, [e]), /* @__PURE__ */ t.jsx(
     "div",
     {
-      className: N.userInfo,
+      className: $.userInfo,
       onClick: () => i("/customer-dash"),
       children: /* @__PURE__ */ t.jsx("div", { children: a || "test-email@gmail.com" })
     }
@@ -2980,10 +2981,10 @@ const $a = (d) => {
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: N.pagesMobileModal,
+      className: $.pagesMobileModal,
       onClick: (l) => l.stopPropagation(),
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: N.pagesMobileModalHeader, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: $.pagesMobileModalHeader, children: [
           /* @__PURE__ */ t.jsx("div", { children: o }),
           /* @__PURE__ */ t.jsx(
             tt,
@@ -2991,7 +2992,7 @@ const $a = (d) => {
               type: "Secondary",
               onClick: a,
               children: /* @__PURE__ */ t.jsx(
-                j,
+                v,
                 {
                   name: "X",
                   fill: "var(--icon-primary)"
@@ -3000,8 +3001,8 @@ const $a = (d) => {
             }
           )
         ] }),
-        /* @__PURE__ */ t.jsx("div", { className: N.pagesMobileModalContent, children: d }),
-        /* @__PURE__ */ t.jsx("div", { className: N.pagesMobileModalFooter, children: /* @__PURE__ */ t.jsx(Ft, { signUp: s }) })
+        /* @__PURE__ */ t.jsx("div", { className: $.pagesMobileModalContent, children: d }),
+        /* @__PURE__ */ t.jsx("div", { className: $.pagesMobileModalFooter, children: /* @__PURE__ */ t.jsx(Ft, { signUp: s }) })
       ]
     }
   );
@@ -3036,7 +3037,7 @@ const $a = (d) => {
         e.stopPropagation(), o(!0);
       },
       children: /* @__PURE__ */ t.jsx(
-        j,
+        v,
         {
           name: "List",
           fill: "var(--icon-primary)"
@@ -3071,7 +3072,7 @@ const $a = (d) => {
         },
         type: "Secondary",
         children: /* @__PURE__ */ t.jsx(
-          j,
+          v,
           {
             name: "Share",
             fill: "#757575",
@@ -3107,7 +3108,7 @@ const $a = (d) => {
         /* @__PURE__ */ t.jsxs("div", { className: at.header, children: [
           /* @__PURE__ */ t.jsx("div", { className: at.title, children: "Copy Product Link" }),
           /* @__PURE__ */ t.jsx(
-            j,
+            v,
             {
               name: "X",
               fill: "#757575",
@@ -3137,7 +3138,7 @@ const $a = (d) => {
             {
               type: "Secondary",
               onClick: a,
-              children: o ? /* @__PURE__ */ t.jsx(j, { name: "Check" }) : /* @__PURE__ */ t.jsx(j, { name: "Copy" })
+              children: o ? /* @__PURE__ */ t.jsx(v, { name: "Check" }) : /* @__PURE__ */ t.jsx(v, { name: "Copy" })
             }
           )
         ] })
@@ -3164,7 +3165,7 @@ const $a = (d) => {
         onClick: n,
         children: [
           /* @__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", { className: U(xt.icon, { [xt.open]: s }), children: /* @__PURE__ */ t.jsx(v, { name: "CaretDown" }) })
         ]
       }
     ),
@@ -3193,11 +3194,11 @@ const $a = (d) => {
       children: d
     }
   );
-}, ma = "_wrapper_st58d_1", _a = "_label_st58d_10", pa = "_textarea_st58d_18", ha = "_length_st58d_33", vt = {
+}, ma = "_wrapper_st58d_1", _a = "_label_st58d_10", ha = "_textarea_st58d_18", pa = "_length_st58d_33", vt = {
   wrapper: ma,
   label: _a,
-  textarea: pa,
-  length: ha
+  textarea: ha,
+  length: pa
 }, Sa = (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: [
@@ -3241,7 +3242,7 @@ export {
   Yo as EmptyCart,
   ja as FormSettings,
   $a as HeaderButtons,
-  j as Icon,
+  v as Icon,
   K as InputSettings,
   Ji as InputUI,
   Ue as ItemsSettings,
@@ -3259,7 +3260,7 @@ export {
   Vo as ShoppingButton,
   Uo as ShoppingModalCart,
   st as Switch,
-  Rt as TextSettings,
+  zt as TextSettings,
   qt as TextareaSettings,
   Sa as TextareaUI,
   Ht as TypesText,