@billgangcom/theme-lib 1.36.0 → 1.36.1

package/dist/ui.es.js

@@ -1,5 +1,5 @@
-import { j as t, I as v, c as F, a as X, S as tt, T as Ot, C as gt, b as et, u as $t, d as It, D as Nt, e as wt, v as Ct, B as at, f as mt, P as Bt, g as St, h as Tt, i as Ht, k as bt, l as Pt, m as qt, M as Et, n as Dt, o as zt } from "./index-DwwDB4Kw.js";
-import { p as fa, L as xa } from "./index-DwwDB4Kw.js";
+import { j as t, I as b, c as z, a as W, S as Z, T as Ot, C as gt, b as st, u as $t, d as Nt, D as It, e as wt, v as Ct, B as at, f as mt, P as Bt, g as St, h as Tt, i as Ht, k as jt, l as Pt, m as qt, M as Et, n as Dt, o as zt } from "./index-CAh3qv6L.js";
+import { p as fa, L as xa } from "./index-CAh3qv6L.js";
 import g from "react";
 import "@phosphor-icons/react";
 const Ft = "_wrapper_3ibiw_2", Vt = "_alignmentBlock_3ibiw_8", Ut = "_title_3ibiw_15", Yt = "_subtitle_3ibiw_22", Gt = "_alignmentContent_3ibiw_29", Wt = "_alignments_3ibiw_37", Xt = "_alignment_3ibiw_8", Jt = "_circle_3ibiw_63", Qt = "_paddings_3ibiw_70", Kt = "_padding_3ibiw_70", Zt = "_active_3ibiw_94", te = "_input_3ibiw_101", J = {
@@ -73,7 +73,7 @@ const Ft = "_wrapper_3ibiw_2", Vt = "_alignmentBlock_3ibiw_8", Ut = "_title_3ibi
             children: [
               o !== c && /* @__PURE__ */ t.jsx("div", { className: J.circle }),
               o === c && /* @__PURE__ */ t.jsx(
-                v,
+                b,
                 {
                   name: a(),
                   fill: "#FF3F19",
@@ -88,7 +88,7 @@ const Ft = "_wrapper_3ibiw_2", Vt = "_alignmentBlock_3ibiw_8", Ut = "_title_3ibi
         /* @__PURE__ */ t.jsx("div", { className: J.paddings, children: se.map((o) => /* @__PURE__ */ t.jsxs(
           "label",
           {
-            className: F(J.padding, {
+            className: z(J.padding, {
               [J.active]: m === o
             }),
             onFocus: () => {
@@ -99,7 +99,7 @@ const Ft = "_wrapper_3ibiw_2", Vt = "_alignmentBlock_3ibiw_8", Ut = "_title_3ibi
             },
             children: [
               /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-                v,
+                b,
                 {
                   name: l(o),
                   width: 20,
@@ -107,13 +107,13 @@ const Ft = "_wrapper_3ibiw_2", Vt = "_alignmentBlock_3ibiw_8", Ut = "_title_3ibi
                 }
               ) }),
               /* @__PURE__ */ t.jsx(
-                X,
+                W,
                 {
                   type: "number",
                   value: String(e[o]),
-                  onChange: (f) => s({
+                  onChange: (x) => s({
                     ...e,
-                    [o]: Number(f)
+                    [o]: Number(x)
                   }),
                   paddingless: !0,
                   borderless: !0
@@ -156,7 +156,7 @@ const Ft = "_wrapper_3ibiw_2", Vt = "_alignmentBlock_3ibiw_8", Ut = "_title_3ibi
   return /* @__PURE__ */ t.jsx("div", { className: vt.typeTexts, children: me.map((i) => /* @__PURE__ */ t.jsx(
     "div",
     {
-      className: F(vt.block, {
+      className: z(vt.block, {
         [vt.active]: c.includes(i)
       }),
       onClick: () => {
@@ -168,7 +168,7 @@ const Ft = "_wrapper_3ibiw_2", Vt = "_alignmentBlock_3ibiw_8", Ut = "_title_3ibi
           a.push(i), e(a);
       },
       children: /* @__PURE__ */ t.jsx(
-        v,
+        b,
         {
           name: s(i),
           fill: c.includes(i) ? "#252525" : "#757575",
@@ -194,7 +194,7 @@ const Ft = "_wrapper_3ibiw_2", Vt = "_alignmentBlock_3ibiw_8", Ut = "_title_3ibi
     (m || e !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: ht.top, children: [
       m && /* @__PURE__ */ t.jsx("h3", { className: ht.title, children: m }),
       e !== void 0 && s && /* @__PURE__ */ t.jsx(
-        tt,
+        Z,
         {
           current: e,
           onChange: (o) => s(o)
@@ -220,21 +220,21 @@ const Ft = "_wrapper_3ibiw_2", Vt = "_alignmentBlock_3ibiw_8", Ut = "_title_3ibi
       )
     ] })
   ] });
-}, he = "_title_157lh_1", _e = "_subtitle_157lh_5", pe = "_header_157lh_12", ge = "_text_157lh_13", fe = "_productsBlock_157lh_14", xe = "_top_157lh_26", be = "_itemsBlock_157lh_35", je = "_typeTexts_157lh_41", ve = "_block_157lh_48", ye = "_active_157lh_61", ke = "_products_157lh_14", $e = "_product_157lh_14", Ie = "_button_157lh_80", Ne = "_disabled_157lh_91", we = "_image_157lh_95", Ce = "_info_157lh_102", Be = "_name_157lh_114", Se = "_buttons_157lh_118", Te = "_modal_157lh_125", Pe = "_link_157lh_145", Ae = "_modalOptions_157lh_151", Oe = "_addButton_157lh_163", qe = "_deleteButton_157lh_178", H = {
+}, he = "_title_157lh_1", _e = "_subtitle_157lh_5", pe = "_header_157lh_12", ge = "_text_157lh_13", fe = "_productsBlock_157lh_14", xe = "_top_157lh_26", je = "_itemsBlock_157lh_35", be = "_typeTexts_157lh_41", ve = "_block_157lh_48", ye = "_active_157lh_61", ke = "_products_157lh_14", $e = "_product_157lh_14", Ne = "_button_157lh_80", Ie = "_disabled_157lh_91", we = "_image_157lh_95", Ce = "_info_157lh_102", Be = "_name_157lh_114", Se = "_buttons_157lh_118", Te = "_modal_157lh_125", Pe = "_link_157lh_145", Ae = "_modalOptions_157lh_151", Oe = "_addButton_157lh_163", qe = "_deleteButton_157lh_178", H = {
   title: he,
   subtitle: _e,
   header: pe,
   text: ge,
   productsBlock: fe,
   top: xe,
-  itemsBlock: be,
-  typeTexts: je,
+  itemsBlock: je,
+  typeTexts: be,
   block: ve,
   active: ye,
   products: ke,
   product: $e,
-  button: Ie,
-  disabled: Ne,
+  button: Ne,
+  disabled: Ie,
   image: we,
   info: Ce,
   name: Be,
@@ -266,7 +266,7 @@ const Ft = "_wrapper_3ibiw_2", Vt = "_alignmentBlock_3ibiw_8", Ut = "_title_3ibi
           /* @__PURE__ */ t.jsxs("div", { className: H.top, children: [
             /* @__PURE__ */ t.jsx("h3", { className: H.title, children: m(e.name, 20) }),
             /* @__PURE__ */ t.jsx(
-              v,
+              b,
               {
                 name: "X",
                 height: 20,
@@ -286,11 +286,11 @@ const Ft = "_wrapper_3ibiw_2", Vt = "_alignmentBlock_3ibiw_8", Ut = "_title_3ibi
                   label: "Put up an attractive image",
                   activeImage: e[n.field],
                   onChange: (o) => {
-                    const f = {
+                    const x = {
                       ...e,
                       [n.field]: o
                     };
-                    s(f);
+                    s(x);
                   }
                 },
                 String(n.field)
@@ -301,33 +301,33 @@ const Ft = "_wrapper_3ibiw_2", Vt = "_alignmentBlock_3ibiw_8", Ut = "_title_3ibi
                 {
                   typesText: e[n.field.type],
                   setTypesText: (o) => {
-                    const f = {
+                    const x = {
                       ...e,
                       [n.field.type]: o
                     };
-                    s(f);
+                    s(x);
                   },
                   text: e[n.field.text] || "",
                   setText: (o) => {
-                    const f = {
+                    const x = {
                       ...e,
                       [n.field.text]: o
                     };
-                    s(f);
+                    s(x);
                   },
                   subtitle: n.label
                 }
               );
             if (n.type === "input")
               return /* @__PURE__ */ t.jsx(
-                X,
+                W,
                 {
                   onChange: (o) => {
-                    const f = {
+                    const x = {
                       ...e,
                       [n.field]: o
                     };
-                    s(f);
+                    s(x);
                   },
                   value: e[n.field] || "",
                   label: n.label,
@@ -337,14 +337,14 @@ const Ft = "_wrapper_3ibiw_2", Vt = "_alignmentBlock_3ibiw_8", Ut = "_title_3ibi
             if (n.type === "inputSwitch")
               return /* @__PURE__ */ t.jsxs("div", { className: H.link, children: [
                 /* @__PURE__ */ t.jsx(
-                  X,
+                  W,
                   {
                     onChange: (o) => {
-                      const f = {
+                      const x = {
                         ...e,
                         [n.field.text]: o
                       };
-                      s(f);
+                      s(x);
                     },
                     value: e[n.field.text] || "",
                     label: n.inputLabel,
@@ -352,16 +352,16 @@ const Ft = "_wrapper_3ibiw_2", Vt = "_alignmentBlock_3ibiw_8", Ut = "_title_3ibi
                   }
                 ),
                 /* @__PURE__ */ t.jsx(
-                  tt,
+                  Z,
                   {
                     current: !!e[n.field.switch] || !1,
                     label: n.switchLabel,
                     onChange: (o) => {
-                      const f = {
+                      const x = {
                         ...e,
                         [n.field.switch]: o
                       };
-                      s(f);
+                      s(x);
                     }
                   }
                 )
@@ -372,11 +372,11 @@ const Ft = "_wrapper_3ibiw_2", Vt = "_alignmentBlock_3ibiw_8", Ut = "_title_3ibi
                 {
                   items: e[n.field] || [],
                   setItems: (o) => {
-                    const f = {
+                    const x = {
                       ...e,
                       [n.field]: o
                     };
-                    s(f);
+                    s(x);
                   },
                   itemsType: "select",
                   draggable: n.draggable || !1,
@@ -389,19 +389,19 @@ const Ft = "_wrapper_3ibiw_2", Vt = "_alignmentBlock_3ibiw_8", Ut = "_title_3ibi
               );
             if (n.type === "select")
               return /* @__PURE__ */ t.jsx(
-                et,
+                st,
                 {
                   options: n.itemsOptions,
                   onChange: (o) => {
-                    const f = {
+                    const x = {
                       ...e,
                       [n.field]: o
                     };
-                    s(f);
+                    s(x);
                   },
                   label: n.label,
                   value: e[n.field] || "String",
-                  leftAddon: n.leftAddon && n.leftAddon === "icon" && /* @__PURE__ */ t.jsx(v, { name: e[n.field] })
+                  leftAddon: n.leftAddon && n.leftAddon === "icon" && /* @__PURE__ */ t.jsx(b, { name: e[n.field] })
                 }
               );
           }) })
@@ -413,12 +413,12 @@ const Ft = "_wrapper_3ibiw_2", Vt = "_alignmentBlock_3ibiw_8", Ut = "_title_3ibi
   other: De,
   subtitle: Le,
   items: Re
-}, jt = (r) => {
+}, bt = (r) => {
   const { items: c, title: e = "Other" } = r;
   return /* @__PURE__ */ t.jsxs("div", { className: yt.other, children: [
     /* @__PURE__ */ t.jsx("h5", { className: yt.subtitle, children: e }),
     /* @__PURE__ */ t.jsx("div", { className: yt.items, children: c.map((s, i) => /* @__PURE__ */ t.jsx(
-      tt,
+      Z,
       {
         current: s.isItem,
         onChange: (a) => s.setIsItem(a),
@@ -467,23 +467,23 @@ const He = (r) => {
     subtitle: m,
     editable: n = !0,
     draggable: o = !1,
-    withImage: f = !1,
-    deletable: N = !0,
+    withImage: x = !1,
+    deletable: $ = !0,
     addable: _ = !0,
     itemsType: h,
     itemsPlaceholder: p = "",
     itemsOptions: d,
-    hasRangeSelector: C = !1,
-    rangeSelectorOptions: D,
+    hasRangeSelector: w = !1,
+    rangeSelectorOptions: q,
     modalOptions: y,
     addableOptions: L = {},
     limit: B,
-    autoScrollInterval: T
-  } = r, [x, k] = g.useState(null), [V, K] = g.useState({
+    autoScrollInterval: S
+  } = r, [f, D] = g.useState(null), [X, tt] = g.useState({
     top: 0,
     left: 0
-  }), [b, I] = g.useState(null), P = g.useRef(null), [U, q] = g.useState(!1), M = $t(
-    It(Bt, {
+  }), [v, N] = g.useState(null), E = g.useRef(null), [G, A] = g.useState(!1), M = $t(
+    Nt(Bt, {
       activationConstraint: {
         distance: 5
       }
@@ -491,36 +491,36 @@ const He = (r) => {
   );
   g.useEffect(() => {
     const u = () => {
-      k(null), q(!1);
+      D(null), A(!1);
     };
-    return document.body.addEventListener("click", u), k(null), q(!1), () => {
-      k(null), q(!1), document.body.removeEventListener("click", u);
+    return document.body.addEventListener("click", u), D(null), A(!1), () => {
+      D(null), A(!1), document.body.removeEventListener("click", u);
     };
   }, []), g.useEffect(() => {
-    if (x) {
-      const u = [...s].map(($) => $.id === x.id ? x : $);
+    if (f) {
+      const u = [...s].map((k) => k.id === f.id ? f : k);
       i(u);
     }
-  }, [x]), g.useEffect(() => {
-    if (P.current && b) {
-      const u = P.current.getBoundingClientRect().height, $ = window.innerHeight;
-      let A = b.top;
-      A + u > $ + window.scrollY - 200 && (A = $ + window.scrollY - u - 200), A < 0 && (A = 10), K({
-        top: A,
-        left: b.left
+  }, [f]), g.useEffect(() => {
+    if (E.current && v) {
+      const u = E.current.getBoundingClientRect().height, k = window.innerHeight;
+      let T = v.top;
+      T + u > k + window.scrollY - 200 && (T = k + window.scrollY - u - 200), T < 0 && (T = 10), tt({
+        top: T,
+        left: v.left
       });
     }
-  }, [P.current, b]);
-  const Z = (u, $) => {
+  }, [E.current, v]);
+  const K = (u, k) => {
     u.stopPropagation();
-    const A = u.target.getBoundingClientRect();
-    I({
-      top: A.top + window.scrollY,
-      left: A.left - 30
-    }), k($), q(!0);
+    const T = u.target.getBoundingClientRect();
+    N({
+      top: T.top + window.scrollY,
+      left: T.left - 30
+    }), D(k), A(!0);
   };
   function ct(u) {
-    if (f)
+    if (x)
       return u ? /* @__PURE__ */ t.jsx(
         "img",
         {
@@ -530,7 +530,7 @@ const He = (r) => {
           height: 16
         }
       ) : /* @__PURE__ */ t.jsx(
-        v,
+        b,
         {
           name: "Image",
           width: 16,
@@ -540,19 +540,19 @@ const He = (r) => {
       );
   }
   const j = (u) => {
-    const { active: $, over: A } = u;
-    if (A && $.id !== A.id) {
-      const R = s.findIndex((O) => O.id === $.id), Y = s.findIndex((O) => O.id === A.id);
-      if (R !== -1 && Y !== -1) {
-        const O = [...s], [lt] = O.splice(R, 1);
-        O.splice(Y, 0, lt), i(O);
+    const { active: k, over: T } = u;
+    if (T && k.id !== T.id) {
+      const R = s.findIndex((P) => P.id === k.id), V = s.findIndex((P) => P.id === T.id);
+      if (R !== -1 && V !== -1) {
+        const P = [...s], [lt] = P.splice(R, 1);
+        P.splice(V, 0, lt), i(P);
       }
     }
-  }, E = (u, $) => {
-    var R, Y;
-    const A = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+  }, O = (u, k) => {
+    var R, V;
+    const T = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       o && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-        v,
+        b,
         {
           name: "DotsSixVertical",
           hoverable: !0,
@@ -561,32 +561,32 @@ const He = (r) => {
         }
       ) }),
       h === "select" && d && /* @__PURE__ */ t.jsx(
-        et,
+        st,
         {
-          onChange: (O) => {
-            const lt = [...s], ut = d.find((ft) => ft.name === O);
+          onChange: (P) => {
+            const lt = [...s], ut = d.find((ft) => ft.name === P);
             if (!ut) return;
             const rt = lt.map((ft) => ft.id === u.id ? {
               ...ut,
-              name: O
+              name: P
             } : ft);
-            k({
+            D({
               ...u,
-              name: O
+              name: P
             }), i([...rt]);
           },
           value: u.name,
-          options: d.filter((O) => !s.find((lt) => lt.name === O.name)).map((O) => O.name),
+          options: d.filter((P) => !s.find((lt) => lt.name === P.name)).map((P) => P.name),
           leftAddon: ct(u.images)
         }
       ),
       h === "input" && /* @__PURE__ */ t.jsx(
-        X,
+        W,
         {
-          onChange: (O) => {
+          onChange: (P) => {
             const ut = [...s].map((rt) => rt.id === u.id ? {
               ...u,
-              name: O
+              name: P
             } : rt);
             i([...ut]);
           },
@@ -597,36 +597,36 @@ const He = (r) => {
       h === "image" && /* @__PURE__ */ t.jsx(
         gt,
         {
-          onChange: (O) => {
+          onChange: (P) => {
             const ut = [...s].map((rt) => rt.id === u.id ? {
               ...u,
-              images: O
+              images: P
             } : rt);
             i([...ut]);
           },
-          activeImage: (R = s.find((O) => O.id === u.id)) != null && R.images ? (Y = s.find((O) => O.id === u.id)) == null ? void 0 : Y.images[0] : void 0
+          activeImage: (R = s.find((P) => P.id === u.id)) != null && R.images ? (V = s.find((P) => P.id === u.id)) == null ? void 0 : V.images[0] : void 0
         }
       ),
       /* @__PURE__ */ t.jsxs("div", { className: H.buttons, children: [
         n && /* @__PURE__ */ t.jsx("div", { className: H.deleteButton, children: /* @__PURE__ */ t.jsx(
-          v,
+          b,
           {
             name: "Sliders",
             hoverable: !0,
             width: 20,
             height: 20,
-            onClick: (O) => Z(O, u)
+            onClick: (P) => K(P, u)
           }
         ) }),
-        N && /* @__PURE__ */ t.jsx("div", { className: H.deleteButton, children: /* @__PURE__ */ t.jsx(
-          v,
+        $ && /* @__PURE__ */ t.jsx("div", { className: H.deleteButton, children: /* @__PURE__ */ t.jsx(
+          b,
           {
             name: "Trash",
             hoverable: !0,
             width: 20,
             height: 20,
             fill: "#C12A2A",
-            onClick: () => i(s.filter((O) => O.id !== u.id))
+            onClick: () => i(s.filter((P) => P.id !== u.id))
           }
         ) })
       ] })
@@ -635,15 +635,15 @@ const He = (r) => {
       Me,
       {
         product: u,
-        index: $,
-        children: A
+        index: k,
+        children: T
       },
       u.id
     ) : /* @__PURE__ */ t.jsx(
       "div",
       {
         className: H.product,
-        children: A
+        children: T
       },
       u.id
     );
@@ -652,29 +652,29 @@ const He = (r) => {
     (l || c !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: H.top, children: [
       l && /* @__PURE__ */ t.jsx("h3", { className: H.title, children: l }),
       c !== void 0 && /* @__PURE__ */ t.jsx(
-        tt,
+        Z,
         {
           current: c,
           onChange: (u) => e == null ? void 0 : e(u)
         }
       )
     ] }),
-    x && n && y && U && /* @__PURE__ */ t.jsx(
+    f && n && y && G && /* @__PURE__ */ t.jsx(
       Ee,
       {
-        ref: P,
-        activeItem: x,
-        setActiveItem: k,
-        popupPosition: V,
+        ref: E,
+        activeItem: f,
+        setActiveItem: D,
+        popupPosition: X,
         modalOptions: y,
-        setIsOpenModal: q
+        setIsOpenModal: A
       }
     ),
-    C && D && /* @__PURE__ */ t.jsx(At, { ...D }),
+    w && q && /* @__PURE__ */ t.jsx(At, { ...q }),
     /* @__PURE__ */ t.jsxs("div", { className: H.products, children: [
       m && /* @__PURE__ */ t.jsx("h5", { className: H.subtitle, children: m }),
       o ? /* @__PURE__ */ t.jsx(
-        Nt,
+        It,
         {
           sensors: M,
           onDragEnd: j,
@@ -683,11 +683,11 @@ const He = (r) => {
             {
               items: s.map((u) => u.id),
               strategy: Ct,
-              children: s.map((u, $) => E(u, $))
+              children: s.map((u, k) => O(u, k))
             }
           )
         }
-      ) : s.map((u, $) => E(u, $)),
+      ) : s.map((u, k) => O(u, k)),
       _ && /* @__PURE__ */ t.jsx(
         "div",
         {
@@ -700,24 +700,24 @@ const He = (r) => {
             at,
             {
               withoutHover: !0,
-              className: F(H.button, {
+              className: z(H.button, {
                 [H.disabled]: !!(B && B <= s.length || s.length === (d == null ? void 0 : d.length))
               }),
               size: "s",
               disabled: !!(B && B <= s.length || s.length === (d == null ? void 0 : d.length)),
               onClick: () => {
                 const u = [...s];
-                let $ = null;
+                let k = null;
                 if (d) {
-                  for (let A = 0; A < d.length; A++)
-                    if (!s.find((R) => R.id === d[A].id)) {
-                      $ = d[A];
+                  for (let T = 0; T < d.length; T++)
+                    if (!s.find((R) => R.id === d[T].id)) {
+                      k = d[T];
                       break;
                     }
                 }
                 h === "select" && d ? u.push({
-                  name: $ ? $.name : d[0].name,
-                  id: ($ == null ? void 0 : $.id) || d[0].id,
+                  name: k ? k.name : d[0].name,
+                  id: (k == null ? void 0 : k.id) || d[0].id,
                   ...L
                 }) : h === "input" ? u.push({
                   name: "",
@@ -735,7 +735,7 @@ const He = (r) => {
               children: /* @__PURE__ */ t.jsxs("div", { className: H.addButton, children: [
                 /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
                 /* @__PURE__ */ t.jsx(
-                  v,
+                  b,
                   {
                     name: "Plus",
                     width: 16,
@@ -748,14 +748,14 @@ const He = (r) => {
         }
       )
     ] }),
-    a !== void 0 && /* @__PURE__ */ t.jsx(jt, { items: a }),
-    T !== void 0 && /* @__PURE__ */ t.jsx(
-      X,
+    a !== void 0 && /* @__PURE__ */ t.jsx(bt, { items: a }),
+    S !== void 0 && /* @__PURE__ */ t.jsx(
+      W,
       {
         label: "Auto scroll interval",
         type: "number",
-        value: String(T.scrollInterval),
-        onChange: (u) => T.setScrollInterval(Number(u)),
+        value: String(S.scrollInterval),
+        onChange: (u) => S.setScrollInterval(Number(u)),
         min: 0.1,
         max: 100,
         style: {
@@ -800,14 +800,14 @@ const He = (r) => {
     subtitle: m,
     draggable: n = !1,
     withImage: o = !1,
-    addable: f = !0,
-    itemsOptions: N,
+    addable: x = !0,
+    itemsOptions: $,
     hasRangeSelector: _ = !1,
     rangeSelectorOptions: h,
     limit: p,
     autoScrollInterval: d
   } = r;
-  function C(y) {
+  function w(y) {
     if (o)
       return y ? /* @__PURE__ */ t.jsx(
         "img",
@@ -818,7 +818,7 @@ const He = (r) => {
           height: 16
         }
       ) : /* @__PURE__ */ t.jsx(
-        v,
+        b,
         {
           name: "Image",
           width: 16,
@@ -827,12 +827,12 @@ const He = (r) => {
         }
       );
   }
-  const D = (y) => {
-    const L = N.find((T) => T.id === y);
+  const q = (y) => {
+    const L = $.find((S) => S.id === y);
     if (!L) return;
     const B = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       n && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-        v,
+        b,
         {
           name: "DotsSixVertical",
           hoverable: !0,
@@ -841,28 +841,28 @@ const He = (r) => {
         }
       ) }),
       /* @__PURE__ */ t.jsx(
-        et,
+        st,
         {
-          onChange: (T) => {
-            const x = [...s], k = N.find((b) => b.name === T);
-            if (!k) return;
-            const V = k.id, K = x.map((b) => b === y ? V : b);
-            i([...K]);
+          onChange: (S) => {
+            const f = [...s], D = $.find((v) => v.name === S);
+            if (!D) return;
+            const X = D.id, tt = f.map((v) => v === y ? X : v);
+            i([...tt]);
           },
           value: L.name,
-          options: N.filter((T) => !s.find((x) => x === T.id)).map((T) => T.name),
-          leftAddon: C(L.images)
+          options: $.filter((S) => !s.find((f) => f === S.id)).map((S) => S.name),
+          leftAddon: w(L.images)
         }
       ),
       /* @__PURE__ */ t.jsx("div", { className: Q.buttons, children: /* @__PURE__ */ t.jsx("div", { className: Q.deleteButton, children: /* @__PURE__ */ t.jsx(
-        v,
+        b,
         {
           name: "Trash",
           hoverable: !0,
           width: 20,
           height: 20,
           fill: "#C12A2A",
-          onClick: () => i(s.filter((T) => T !== y))
+          onClick: () => i(s.filter((S) => S !== y))
         }
       ) }) })
     ] });
@@ -879,7 +879,7 @@ const He = (r) => {
     (l || c !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: Q.top, children: [
       l && /* @__PURE__ */ t.jsx("h3", { className: Q.title, children: l }),
       c !== void 0 && /* @__PURE__ */ t.jsx(
-        tt,
+        Z,
         {
           current: c,
           onChange: (y) => e == null ? void 0 : e(y)
@@ -889,8 +889,8 @@ const He = (r) => {
     _ && h && /* @__PURE__ */ t.jsx(At, { ...h }),
     /* @__PURE__ */ t.jsxs("div", { className: Q.products, children: [
       m && /* @__PURE__ */ t.jsx("h5", { className: Q.subtitle, children: m }),
-      s.map((y) => D(y)),
-      f && /* @__PURE__ */ t.jsx(
+      s.map((y) => q(y)),
+      x && /* @__PURE__ */ t.jsx(
         "div",
         {
           style: {
@@ -903,22 +903,22 @@ const He = (r) => {
             at,
             {
               withoutHover: !0,
-              className: F(Q.button, {
-                [Q.disabled]: !!(p && p <= s.length || s.length === N.length)
+              className: z(Q.button, {
+                [Q.disabled]: !!(p && p <= s.length || s.length === $.length)
               }),
               size: "s",
-              disabled: !!(p && p <= s.length || s.length === N.length),
+              disabled: !!(p && p <= s.length || s.length === $.length),
               onClick: () => {
                 const y = [...s];
                 let L = null;
-                if (N) {
-                  for (let B = 0; B < N.length; B++)
-                    if (!s.find((T) => T === N[B].id)) {
-                      L = N[B];
+                if ($) {
+                  for (let B = 0; B < $.length; B++)
+                    if (!s.find((S) => S === $[B].id)) {
+                      L = $[B];
                       break;
                     }
                 }
-                y.push((L == null ? void 0 : L.id) || N[0].id), i(y);
+                y.push((L == null ? void 0 : L.id) || $[0].id), i(y);
               },
               style: {
                 width: "fit-content"
@@ -926,7 +926,7 @@ const He = (r) => {
               children: /* @__PURE__ */ t.jsxs("div", { className: Q.addButton, children: [
                 /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
                 /* @__PURE__ */ t.jsx(
-                  v,
+                  b,
                   {
                     name: "Plus",
                     width: 16,
@@ -939,9 +939,9 @@ const He = (r) => {
         }
       )
     ] }),
-    a !== void 0 && /* @__PURE__ */ t.jsx(jt, { items: a }),
+    a !== void 0 && /* @__PURE__ */ t.jsx(bt, { items: a }),
     d !== void 0 && /* @__PURE__ */ t.jsx(
-      X,
+      W,
       {
         label: "Auto scroll interval",
         type: "number",
@@ -956,7 +956,7 @@ const He = (r) => {
       }
     )
   ] });
-}, us = "_title_1wm9m_1", ms = "_subtitle_1wm9m_5", hs = "_header_1wm9m_12", _s = "_text_1wm9m_13", ps = "_productsBlock_1wm9m_14", gs = "_top_1wm9m_26", fs = "_itemsBlock_1wm9m_35", xs = "_typeTexts_1wm9m_41", bs = "_block_1wm9m_48", js = "_active_1wm9m_61", vs = "_products_1wm9m_14", ys = "_product_1wm9m_14", ks = "_button_1wm9m_80", $s = "_disabled_1wm9m_91", Is = "_image_1wm9m_95", Ns = "_info_1wm9m_102", ws = "_name_1wm9m_114", Cs = "_buttons_1wm9m_118", Bs = "_modal_1wm9m_125", Ss = "_link_1wm9m_146", Ts = "_modalOptions_1wm9m_152", Ps = "_addButton_1wm9m_164", As = "_deleteButton_1wm9m_179", z = {
+}, us = "_title_fymju_1", ms = "_subtitle_fymju_5", hs = "_header_fymju_12", _s = "_text_fymju_13", ps = "_productsBlock_fymju_14", gs = "_top_fymju_26", fs = "_itemsBlock_fymju_35", xs = "_typeTexts_fymju_41", js = "_block_fymju_48", bs = "_active_fymju_61", vs = "_products_fymju_14", ys = "_product_fymju_14", ks = "_button_fymju_80", $s = "_disabled_fymju_91", Ns = "_image_fymju_95", Is = "_info_fymju_102", ws = "_name_fymju_114", Cs = "_buttons_fymju_118", Bs = "_modal_fymju_125", Ss = "_link_fymju_146", Ts = "_modalOptions_fymju_152", Ps = "_addButton_fymju_164", As = "_deleteButton_fymju_179", F = {
   title: us,
   subtitle: ms,
   header: hs,
@@ -965,14 +965,14 @@ const He = (r) => {
   top: gs,
   itemsBlock: fs,
   typeTexts: xs,
-  block: bs,
-  active: js,
+  block: js,
+  active: bs,
   products: vs,
   product: ys,
   button: ks,
   disabled: $s,
-  image: Is,
-  info: Ns,
+  image: Ns,
+  info: Is,
   name: ws,
   buttons: Cs,
   modal: Bs,
@@ -990,7 +990,7 @@ const He = (r) => {
       "div",
       {
         ref: c,
-        className: z.modal,
+        className: F.modal,
         onClick: (n) => {
           n.stopPropagation();
         },
@@ -999,10 +999,10 @@ const He = (r) => {
           left: `${i.left}px`
         },
         children: [
-          /* @__PURE__ */ t.jsxs("div", { className: z.top, children: [
-            /* @__PURE__ */ t.jsx("h3", { className: z.title, children: m(e.name, 20) }),
+          /* @__PURE__ */ t.jsxs("div", { className: F.top, children: [
+            /* @__PURE__ */ t.jsx("h3", { className: F.title, children: m(e.name, 20) }),
             /* @__PURE__ */ t.jsx(
-              v,
+              b,
               {
                 name: "X",
                 height: 20,
@@ -1014,7 +1014,7 @@ const He = (r) => {
               }
             )
           ] }),
-          /* @__PURE__ */ t.jsx("div", { className: z.modalOptions, children: a.map((n) => {
+          /* @__PURE__ */ t.jsx("div", { className: F.modalOptions, children: a.map((n) => {
             if (n.type === "image")
               return /* @__PURE__ */ t.jsx(
                 gt,
@@ -1022,11 +1022,11 @@ const He = (r) => {
                   label: "Put up an attractive image",
                   activeImage: e[n.field],
                   onChange: (o) => {
-                    const f = {
+                    const x = {
                       ...e,
                       [n.field]: o
                     };
-                    s(f);
+                    s(x);
                   }
                 },
                 String(n.field)
@@ -1037,33 +1037,33 @@ const He = (r) => {
                 {
                   typesText: e[n.field.type],
                   setTypesText: (o) => {
-                    const f = {
+                    const x = {
                       ...e,
                       [n.field.type]: o
                     };
-                    s(f);
+                    s(x);
                   },
                   text: e[n.field.text] || "",
                   setText: (o) => {
-                    const f = {
+                    const x = {
                       ...e,
                       [n.field.text]: o
                     };
-                    s(f);
+                    s(x);
                   },
                   subtitle: n.label
                 }
               );
             if (n.type === "input")
               return /* @__PURE__ */ t.jsx(
-                X,
+                W,
                 {
                   onChange: (o) => {
-                    const f = {
+                    const x = {
                       ...e,
                       [n.field]: o
                     };
-                    s(f);
+                    s(x);
                   },
                   value: e[n.field] || "",
                   label: n.label,
@@ -1071,16 +1071,16 @@ const He = (r) => {
                 }
               );
             if (n.type === "inputSwitch")
-              return /* @__PURE__ */ t.jsxs("div", { className: z.link, children: [
+              return /* @__PURE__ */ t.jsxs("div", { className: F.link, children: [
                 /* @__PURE__ */ t.jsx(
-                  X,
+                  W,
                   {
                     onChange: (o) => {
-                      const f = {
+                      const x = {
                         ...e,
                         [n.field.text]: o
                       };
-                      s(f);
+                      s(x);
                     },
                     value: e[n.field.text] || "",
                     label: n.inputLabel,
@@ -1088,35 +1088,35 @@ const He = (r) => {
                   }
                 ),
                 /* @__PURE__ */ t.jsx(
-                  tt,
+                  Z,
                   {
                     current: !!e[n.field.switch] || !1,
                     label: n.switchLabel,
                     onChange: (o) => {
-                      const f = {
+                      const x = {
                         ...e,
                         [n.field.switch]: o
                       };
-                      s(f);
+                      s(x);
                     }
                   }
                 )
               ] });
             if (n.type === "select")
               return /* @__PURE__ */ t.jsx(
-                et,
+                st,
                 {
                   options: n.itemsOptions,
                   onChange: (o) => {
-                    const f = {
+                    const x = {
                       ...e,
                       [n.field]: o
                     };
-                    s(f);
+                    s(x);
                   },
                   label: n.label,
                   value: e[n.field] || "String",
-                  leftAddon: n.leftAddon && n.leftAddon === "icon" && /* @__PURE__ */ t.jsx(v, { name: e[n.field] })
+                  leftAddon: n.leftAddon && n.leftAddon === "icon" && /* @__PURE__ */ t.jsx(b, { name: e[n.field] })
                 }
               );
           }) })
@@ -1137,7 +1137,7 @@ function qs(r) {
     {
       ref: a,
       style: o,
-      className: `${z.product} ${n ? z.dragging : ""}`,
+      className: `${F.product} ${n ? F.dragging : ""}`,
       ...s,
       ...i,
       children: e
@@ -1155,21 +1155,21 @@ const aa = (r) => {
     subtitle: m,
     editable: n = !0,
     draggable: o = !1,
-    withImage: f = !1,
-    deletable: N = !0,
+    withImage: x = !1,
+    deletable: $ = !0,
     addable: _ = !0,
     itemsType: h,
     itemsPlaceholder: p = "",
     itemsOptions: d,
-    hasRangeSelector: C = !1,
-    rangeSelectorOptions: D,
+    hasRangeSelector: w = !1,
+    rangeSelectorOptions: q,
     modalOptions: y,
     addableOptions: L = {}
-  } = r, [B, T] = g.useState(null), [x, k] = g.useState({
+  } = r, [B, S] = g.useState(null), [f, D] = g.useState({
     top: 0,
     left: 0
-  }), [V, K] = g.useState(null), b = g.useRef(null), [I, P] = g.useState(!1), U = $t(
-    It(Bt, {
+  }), [X, tt] = g.useState(null), v = g.useRef(null), [N, E] = g.useState(!1), G = $t(
+    Nt(Bt, {
       activationConstraint: {
         distance: 5
       }
@@ -1177,36 +1177,36 @@ const aa = (r) => {
   );
   g.useEffect(() => {
     const j = () => {
-      T(null), P(!1);
+      S(null), E(!1);
     };
-    return document.body.addEventListener("click", j), T(null), P(!1), () => {
-      T(null), P(!1), document.body.removeEventListener("click", j);
+    return document.body.addEventListener("click", j), S(null), E(!1), () => {
+      S(null), E(!1), document.body.removeEventListener("click", j);
     };
   }, []), g.useEffect(() => {
     if (B) {
-      const j = [...s].map((E) => E.id === B.id ? B : E);
+      const j = [...s].map((O) => O.id === B.id ? B : O);
       i(j);
     }
   }, [B]), g.useEffect(() => {
-    if (b.current && V) {
-      const j = b.current.getBoundingClientRect().height, E = window.innerHeight;
-      let u = V.top;
-      u + j > E + window.scrollY - 200 && (u = E + window.scrollY - j - 200), u < 0 && (u = 10), k({
+    if (v.current && X) {
+      const j = v.current.getBoundingClientRect().height, O = window.innerHeight;
+      let u = X.top;
+      u + j > O + window.scrollY - 200 && (u = O + window.scrollY - j - 200), u < 0 && (u = 10), D({
         top: u,
-        left: V.left
+        left: X.left
       });
     }
-  }, [b.current, V]);
-  const q = (j, E) => {
+  }, [v.current, X]);
+  const A = (j, O) => {
     j.stopPropagation();
     const u = j.target.getBoundingClientRect();
-    K({
+    tt({
       top: u.top + window.scrollY,
       left: u.left - 30
-    }), T(E), P(!0);
+    }), S(O), E(!0);
   };
   function M(j) {
-    if (f)
+    if (x)
       return j ? /* @__PURE__ */ t.jsx(
         "img",
         {
@@ -1216,7 +1216,7 @@ const aa = (r) => {
           height: 16
         }
       ) : /* @__PURE__ */ t.jsx(
-        v,
+        b,
         {
           name: "Image",
           width: 16,
@@ -1225,20 +1225,20 @@ const aa = (r) => {
         }
       );
   }
-  const Z = (j) => {
-    const { active: E, over: u } = j;
-    if (u && E.id !== u.id) {
-      const $ = s.findIndex((R) => R.id === E.id), A = s.findIndex((R) => R.id === u.id);
-      if ($ !== -1 && A !== -1) {
-        const R = [...s], [Y] = R.splice($, 1);
-        R.splice(A, 0, Y), i(R);
+  const K = (j) => {
+    const { active: O, over: u } = j;
+    if (u && O.id !== u.id) {
+      const k = s.findIndex((R) => R.id === O.id), T = s.findIndex((R) => R.id === u.id);
+      if (k !== -1 && T !== -1) {
+        const R = [...s], [V] = R.splice(k, 1);
+        R.splice(T, 0, V), i(R);
       }
     }
   }, ct = (j) => {
     var u;
-    const E = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    const O = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       o && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-        v,
+        b,
         {
           name: "DotsSixVertical",
           hoverable: !0,
@@ -1247,31 +1247,31 @@ const aa = (r) => {
         }
       ) }),
       h === "select" && d && /* @__PURE__ */ t.jsx(
-        et,
+        st,
         {
-          onChange: ($) => {
-            const R = [...s].map((Y) => Y.id === j.id ? {
+          onChange: (k) => {
+            const R = [...s].map((V) => V.id === j.id ? {
               ...j,
-              name: $
-            } : Y);
-            T({
+              name: k
+            } : V);
+            S({
               ...j,
-              name: $
+              name: k
             }), i([...R]);
           },
           value: j.name,
-          options: d.filter(($) => !s.find((A) => A.name === $)),
+          options: d.filter((k) => !s.find((T) => T.name === k)),
           leftAddon: M(j.images)
         }
       ),
       h === "input" && /* @__PURE__ */ t.jsx(
-        X,
+        W,
         {
-          onChange: ($) => {
-            const R = [...s].map((Y) => Y.id === j.id ? {
+          onChange: (k) => {
+            const R = [...s].map((V) => V.id === j.id ? {
               ...j,
-              name: $
-            } : Y);
+              name: k
+            } : V);
             i([...R]);
           },
           value: j.name,
@@ -1281,36 +1281,36 @@ const aa = (r) => {
       h === "image" && /* @__PURE__ */ t.jsx(
         gt,
         {
-          onChange: ($) => {
-            const R = [...s].map((Y) => Y.id === j.id ? {
+          onChange: (k) => {
+            const R = [...s].map((V) => V.id === j.id ? {
               ...j,
-              images: $
-            } : Y);
+              images: k
+            } : V);
             i([...R]);
           },
-          activeImage: (u = s.find(($) => $.id === j.id)) == null ? void 0 : u.images[0]
+          activeImage: (u = s.find((k) => k.id === j.id)) == null ? void 0 : u.images[0]
         }
       ),
-      /* @__PURE__ */ t.jsxs("div", { className: z.buttons, children: [
-        n && /* @__PURE__ */ t.jsx("div", { className: z.deleteButton, children: /* @__PURE__ */ t.jsx(
-          v,
+      /* @__PURE__ */ t.jsxs("div", { className: F.buttons, children: [
+        n && /* @__PURE__ */ t.jsx("div", { className: F.deleteButton, children: /* @__PURE__ */ t.jsx(
+          b,
           {
             name: "Sliders",
             hoverable: !0,
             width: 20,
             height: 20,
-            onClick: ($) => q($, j)
+            onClick: (k) => A(k, j)
           }
         ) }),
-        N && /* @__PURE__ */ t.jsx("div", { className: z.deleteButton, children: /* @__PURE__ */ t.jsx(
-          v,
+        $ && /* @__PURE__ */ t.jsx("div", { className: F.deleteButton, children: /* @__PURE__ */ t.jsx(
+          b,
           {
             name: "Trash",
             hoverable: !0,
             width: 20,
             height: 20,
             fill: "#C12A2A",
-            onClick: () => i(s.filter(($) => $.id !== j.id))
+            onClick: () => i(s.filter((k) => k.id !== j.id))
           }
         ) })
       ] })
@@ -1319,48 +1319,48 @@ const aa = (r) => {
       qs,
       {
         product: j,
-        children: E
+        children: O
       },
       j.id
     ) : /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: z.product,
-        children: E
+        className: F.product,
+        children: O
       },
       j.id
     );
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: z.productsBlock, children: [
-    (l || c !== 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: F.productsBlock, children: [
+    (l || c !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: F.top, children: [
+      l && /* @__PURE__ */ t.jsx("h3", { className: F.title, children: l }),
       c !== void 0 && /* @__PURE__ */ t.jsx(
-        tt,
+        Z,
         {
           current: c,
           onChange: (j) => e == null ? void 0 : e(j)
         }
       )
     ] }),
-    B && n && y && I && /* @__PURE__ */ t.jsx(
+    B && n && y && N && /* @__PURE__ */ t.jsx(
       Os,
       {
-        ref: b,
+        ref: v,
         activeItem: B,
-        setActiveItem: T,
-        popupPosition: x,
+        setActiveItem: S,
+        popupPosition: f,
         modalOptions: y,
-        setIsOpenModal: P
+        setIsOpenModal: E
       }
     ),
-    C && D && /* @__PURE__ */ t.jsx(At, { ...D }),
-    /* @__PURE__ */ t.jsxs("div", { className: z.products, children: [
-      m && /* @__PURE__ */ t.jsx("h5", { className: z.subtitle, children: m }),
+    w && q && /* @__PURE__ */ t.jsx(At, { ...q }),
+    /* @__PURE__ */ t.jsxs("div", { className: F.products, children: [
+      m && /* @__PURE__ */ t.jsx("h5", { className: F.subtitle, children: m }),
       o ? /* @__PURE__ */ t.jsx(
-        Nt,
+        It,
         {
-          sensors: U,
-          onDragEnd: Z,
+          sensors: G,
+          onDragEnd: K,
           children: /* @__PURE__ */ t.jsx(
             wt,
             {
@@ -1383,20 +1383,20 @@ const aa = (r) => {
             at,
             {
               withoutHover: !0,
-              className: z.button,
+              className: F.button,
               size: "s",
               onClick: () => {
                 const j = [...s];
-                let E = null;
+                let O = null;
                 if (d) {
                   for (let u = 0; u < d.length; u++)
-                    if (!s.find(($) => $.name === d[u])) {
-                      E = d[u];
+                    if (!s.find((k) => k.name === d[u])) {
+                      O = d[u];
                       break;
                     }
                 }
                 h === "select" && d ? j.push({
-                  name: E || d[0],
+                  name: O || d[0],
                   id: mt(),
                   ...L,
                   maxSymbols: 100
@@ -1416,10 +1416,10 @@ const aa = (r) => {
               style: {
                 width: "fit-content"
               },
-              children: /* @__PURE__ */ t.jsxs("div", { className: z.addButton, children: [
+              children: /* @__PURE__ */ t.jsxs("div", { className: F.addButton, children: [
                 /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
                 /* @__PURE__ */ t.jsx(
-                  v,
+                  b,
                   {
                     name: "Plus",
                     width: 16,
@@ -1432,7 +1432,7 @@ const aa = (r) => {
         }
       )
     ] }),
-    a !== void 0 && /* @__PURE__ */ t.jsx(jt, { items: a })
+    a !== void 0 && /* @__PURE__ */ t.jsx(bt, { items: a })
   ] });
 }, Es = "_title_174ru_1", Ds = "_subtitle_174ru_5", Ls = "_header_174ru_12", Rs = "_text_174ru_13", Ms = "_productsBlock_174ru_14", Hs = "_buttonsBlock_174ru_15", zs = "_top_174ru_26", Fs = "_itemsBlock_174ru_35", Vs = "_typeTexts_174ru_41", Us = "_block_174ru_48", Ys = "_active_174ru_60", Gs = "_products_174ru_14", Ws = "_product_174ru_14", Xs = "_button_174ru_15", Js = "_image_174ru_90", Qs = "_info_174ru_97", Ks = "_name_174ru_109", Zs = "_buttons_174ru_15", tn = "_modal_174ru_120", en = "_other_174ru_139", sn = "_options_174ru_145", dt = {
   title: Es,
@@ -1457,20 +1457,20 @@ const aa = (r) => {
   other: en,
   options: sn
 }, nn = g.forwardRef((r, c) => {
-  const { activeButton: e, setActiveButton: s, popupPosition: i } = r, [a, l] = g.useState(e.typesText), [m, n] = g.useState(e.destination), [o, f] = g.useState(e.page), [N, _] = g.useState(e.link || ""), [h, p] = g.useState(e.text || ""), [d, C] = g.useState(e.openInNewTab), { pages: D } = Ht();
+  const { activeButton: e, setActiveButton: s, popupPosition: i } = r, [a, l] = g.useState(e.typesText), [m, n] = g.useState(e.destination), [o, x] = g.useState(e.page), [$, _] = g.useState(e.link || ""), [h, p] = g.useState(e.text || ""), [d, w] = g.useState(e.openInNewTab), { pages: q } = Ht();
   return g.useEffect(() => {
     s({
       ...e,
       ...{
         text: h,
-        link: N,
+        link: $,
         destination: m,
         typesText: a,
         page: o,
         openInNewTab: d
       }
     });
-  }, [a, m, N, h, o, d]), /* @__PURE__ */ t.jsxs(
+  }, [a, m, $, h, o, d]), /* @__PURE__ */ t.jsxs(
     "div",
     {
       className: dt.modal,
@@ -1486,7 +1486,7 @@ const aa = (r) => {
         /* @__PURE__ */ t.jsxs("div", { className: dt.top, children: [
           /* @__PURE__ */ t.jsx("h3", { className: dt.title, children: e.type }),
           /* @__PURE__ */ t.jsx(
-            v,
+            b,
             {
               name: "X",
               height: 20,
@@ -1498,7 +1498,7 @@ const aa = (r) => {
         ] }),
         /* @__PURE__ */ t.jsxs("div", { className: dt.options, children: [
           /* @__PURE__ */ t.jsx(
-            et,
+            st,
             {
               label: "Destination",
               onChange: (y) => n(y),
@@ -1507,28 +1507,28 @@ const aa = (r) => {
             }
           ),
           m === "Go to Page" ? /* @__PURE__ */ t.jsx(
-            et,
+            st,
             {
               label: "Go to",
-              onChange: (y) => f(y),
-              options: D ? Object.values(D).filter((y) => y.name !== o).map((y) => y.name) : [],
+              onChange: (y) => x(y),
+              options: q ? Object.values(q).filter((y) => y.name !== o).map((y) => y.name) : [],
               value: o
             }
           ) : /* @__PURE__ */ t.jsx(
-            X,
+            W,
             {
               onChange: (y) => _(y),
-              value: N,
+              value: $,
               placeholder: "https://",
               label: "Link"
             }
           ),
           /* @__PURE__ */ t.jsx(
-            tt,
+            Z,
             {
               current: e.openInNewTab,
               label: "Open in new tab",
-              onChange: (y) => C(y)
+              onChange: (y) => w(y)
             }
           ),
           /* @__PURE__ */ t.jsx(
@@ -1551,7 +1551,7 @@ const aa = (r) => {
       ]
     }
   );
-}), on = "_subtitle_jql1y_1", an = "_header_jql1y_8", cn = "_text_jql1y_9", ln = "_productsBlock_jql1y_10", rn = "_buttonsBlock_jql1y_11", dn = "_top_jql1y_23", un = "_itemsBlock_jql1y_32", mn = "_typeTexts_jql1y_38", hn = "_block_jql1y_45", _n = "_active_jql1y_58", pn = "_products_jql1y_10", gn = "_product_jql1y_10", fn = "_button_jql1y_11", xn = "_image_jql1y_88", bn = "_info_jql1y_95", jn = "_name_jql1y_107", vn = "_buttons_jql1y_11", yn = "_modal_jql1y_118", kn = "_other_jql1y_138", $n = "_options_jql1y_144", In = "_addButton_jql1y_150", Nn = "_deleteButton_jql1y_165", st = {
+}), on = "_subtitle_jql1y_1", an = "_header_jql1y_8", cn = "_text_jql1y_9", ln = "_productsBlock_jql1y_10", rn = "_buttonsBlock_jql1y_11", dn = "_top_jql1y_23", un = "_itemsBlock_jql1y_32", mn = "_typeTexts_jql1y_38", hn = "_block_jql1y_45", _n = "_active_jql1y_58", pn = "_products_jql1y_10", gn = "_product_jql1y_10", fn = "_button_jql1y_11", xn = "_image_jql1y_88", jn = "_info_jql1y_95", bn = "_name_jql1y_107", vn = "_buttons_jql1y_11", yn = "_modal_jql1y_118", kn = "_other_jql1y_138", $n = "_options_jql1y_144", Nn = "_addButton_jql1y_150", In = "_deleteButton_jql1y_165", nt = {
   subtitle: on,
   header: an,
   text: cn,
@@ -1566,19 +1566,19 @@ const aa = (r) => {
   product: gn,
   button: fn,
   image: xn,
-  info: bn,
-  name: jn,
+  info: jn,
+  name: bn,
   buttons: vn,
   modal: yn,
   other: kn,
   options: $n,
-  addButton: In,
-  deleteButton: Nn
+  addButton: Nn,
+  deleteButton: In
 }, wn = (r) => {
   const { buttons: c, setButtons: e, deletable: s = !0, addable: i = !0 } = r, [a, l] = g.useState(null), [m, n] = g.useState({
     top: 0,
     left: 0
-  }), [o, f] = g.useState(null), N = g.useRef(null);
+  }), [o, x] = g.useState(null), $ = g.useRef(null);
   g.useEffect(() => {
     const h = () => {
       l(null);
@@ -1592,47 +1592,47 @@ const aa = (r) => {
       e(h);
     }
   }, [a]), g.useEffect(() => {
-    if (N.current && o) {
-      const h = N.current.getBoundingClientRect().height, p = window.innerHeight;
+    if ($.current && o) {
+      const h = $.current.getBoundingClientRect().height, p = window.innerHeight;
       let d = o.top;
       d + h > p + window.scrollY - 200 && (d = p + window.scrollY - h - 200), d < 0 && (d = 10), n({
         top: d,
         left: o.left
       });
     }
-  }, [N.current, o]);
+  }, [$.current, o]);
   const _ = (h, p) => {
     h.stopPropagation();
     const d = h.target.getBoundingClientRect();
-    f({
+    x({
       top: d.top + window.scrollY,
       left: d.left - 30
     }), l(p);
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: st.products, children: [
-    /* @__PURE__ */ t.jsx("h5", { className: st.subtitle, children: "Button Type" }),
+  return /* @__PURE__ */ t.jsxs("div", { className: nt.products, children: [
+    /* @__PURE__ */ t.jsx("h5", { className: nt.subtitle, children: "Button Type" }),
     c.map((h) => /* @__PURE__ */ t.jsxs(
       "div",
       {
-        className: st.product,
+        className: nt.product,
         children: [
           /* @__PURE__ */ t.jsx(
-            et,
+            st,
             {
               onChange: (p) => {
-                const C = [...c].map((D) => D.id === h.id ? {
+                const w = [...c].map((q) => q.id === h.id ? {
                   ...h,
                   type: p
-                } : D);
-                e(C);
+                } : q);
+                e(w);
               },
               value: h.type,
               options: ["Primary", "Secondary", "Tertiary"]
             }
           ),
-          /* @__PURE__ */ t.jsxs("div", { className: st.buttons, children: [
-            /* @__PURE__ */ t.jsx("div", { className: st.deleteButton, children: /* @__PURE__ */ t.jsx(
-              v,
+          /* @__PURE__ */ t.jsxs("div", { className: nt.buttons, children: [
+            /* @__PURE__ */ t.jsx("div", { className: nt.deleteButton, children: /* @__PURE__ */ t.jsx(
+              b,
               {
                 name: "Sliders",
                 hoverable: !0,
@@ -1643,8 +1643,8 @@ const aa = (r) => {
                 }
               }
             ) }),
-            s && /* @__PURE__ */ t.jsx("div", { className: st.deleteButton, children: /* @__PURE__ */ t.jsx(
-              v,
+            s && /* @__PURE__ */ t.jsx("div", { className: nt.deleteButton, children: /* @__PURE__ */ t.jsx(
+              b,
               {
                 name: "Trash",
                 hoverable: !0,
@@ -1665,7 +1665,7 @@ const aa = (r) => {
     a && /* @__PURE__ */ t.jsx(
       nn,
       {
-        ref: N,
+        ref: $,
         activeButton: a,
         setActiveButton: l,
         popupPosition: m
@@ -1683,7 +1683,7 @@ const aa = (r) => {
           at,
           {
             withoutHover: !0,
-            className: st.button,
+            className: nt.button,
             size: "s",
             onClick: () => {
               const h = [...c];
@@ -1700,10 +1700,10 @@ const aa = (r) => {
             style: {
               width: "fit-content"
             },
-            children: /* @__PURE__ */ t.jsxs("div", { className: st.addButton, children: [
+            children: /* @__PURE__ */ t.jsxs("div", { className: nt.addButton, children: [
               /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
               /* @__PURE__ */ t.jsx(
-                v,
+                b,
                 {
                   name: "Plus",
                   width: 16,
@@ -1722,7 +1722,7 @@ const aa = (r) => {
     /* @__PURE__ */ t.jsxs("div", { className: dt.top, children: [
       /* @__PURE__ */ t.jsx("h3", { className: dt.title, children: "Buttons" }),
       /* @__PURE__ */ t.jsx(
-        tt,
+        Z,
         {
           current: c,
           onChange: (a) => e(a)
@@ -1737,7 +1737,7 @@ const aa = (r) => {
       }
     )
   ] }) });
-}, Cn = "_wrapper_m18qi_1", Bn = "_subtitle_m18qi_7", Sn = "_content_m18qi_14", Tn = "_range_m18qi_22", Pn = "_track_m18qi_27", An = "_progress_m18qi_36", On = "_dots_m18qi_46", qn = "_dot_m18qi_46", En = "_active_m18qi_65", Dn = "_input_m18qi_77", Ln = "_countBlock_m18qi_91", Rn = "_count_m18qi_91", Mn = "_controls_m18qi_107", Hn = "_button_m18qi_113", G = {
+}, Cn = "_wrapper_m18qi_1", Bn = "_subtitle_m18qi_7", Sn = "_content_m18qi_14", Tn = "_range_m18qi_22", Pn = "_track_m18qi_27", An = "_progress_m18qi_36", On = "_dots_m18qi_46", qn = "_dot_m18qi_46", En = "_active_m18qi_65", Dn = "_input_m18qi_77", Ln = "_countBlock_m18qi_91", Rn = "_count_m18qi_91", Mn = "_controls_m18qi_107", Hn = "_button_m18qi_113", U = {
   wrapper: Cn,
   subtitle: Bn,
   content: Sn,
@@ -1753,7 +1753,7 @@ const aa = (r) => {
   controls: Mn,
   button: Hn
 }, At = (r) => {
-  const { label: c, min: e = 1, max: s = 4, step: i = 1, count: a, setCount: l } = r, [m, n] = g.useState(!1), o = Array.from({ length: (s - e) / i + 1 }), f = (a - e) / (s - e) * 100, N = () => {
+  const { label: c, min: e = 1, max: s = 4, step: i = 1, count: a, setCount: l } = r, [m, n] = g.useState(!1), o = Array.from({ length: (s - e) / i + 1 }), x = (a - e) / (s - e) * 100, $ = () => {
     a < s && l(a + i);
   }, _ = () => {
     a > e && l(a - i);
@@ -1761,28 +1761,28 @@ const aa = (r) => {
     const d = e + p * i;
     l(d);
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: G.wrapper, children: [
-    c && /* @__PURE__ */ t.jsx("h5", { className: G.subtitle, children: c }),
-    /* @__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: U.wrapper, children: [
+    c && /* @__PURE__ */ t.jsx("h5", { className: U.subtitle, children: c }),
+    /* @__PURE__ */ t.jsxs("div", { className: U.content, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: U.range, children: [
+        /* @__PURE__ */ t.jsx("div", { className: U.track }),
         /* @__PURE__ */ t.jsx(
           "div",
           {
-            className: G.progress,
-            style: { width: `${f}%` }
+            className: U.progress,
+            style: { width: `${x}%` }
           }
         ),
-        /* @__PURE__ */ t.jsx("div", { className: G.dots, children: o.map((p, d) => {
-          const C = d <= (a - e) / i;
+        /* @__PURE__ */ t.jsx("div", { className: U.dots, children: o.map((p, d) => {
+          const w = d <= (a - e) / i;
           return /* @__PURE__ */ t.jsx(
             "button",
             {
               onClick: () => h(d),
-              className: F(G.dot, {
-                [G.active]: C,
-                [G.inactive]: !C,
-                [G.dragging]: m
+              className: z(U.dot, {
+                [U.active]: w,
+                [U.inactive]: !w,
+                [U.dragging]: m
               }),
               "aria-label": `Set value to ${e + d * i}`
             },
@@ -1802,13 +1802,13 @@ const aa = (r) => {
             onMouseUp: () => n(!1),
             onTouchStart: () => n(!0),
             onTouchEnd: () => n(!1),
-            className: G.input
+            className: U.input
           }
         )
       ] }),
-      /* @__PURE__ */ t.jsxs("div", { className: G.countBlock, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: U.countBlock, children: [
         /* @__PURE__ */ t.jsx(
-          X,
+          W,
           {
             type: "number",
             min: e,
@@ -1821,16 +1821,16 @@ const aa = (r) => {
             value: String(a)
           }
         ),
-        /* @__PURE__ */ t.jsxs("div", { className: G.controls, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: U.controls, children: [
           /* @__PURE__ */ t.jsx(
             "button",
             {
-              onClick: N,
+              onClick: $,
               disabled: a >= s,
-              className: G.button,
+              className: U.button,
               "aria-label": "Increment count",
               children: /* @__PURE__ */ t.jsx(
-                v,
+                b,
                 {
                   name: "CaretUp",
                   width: 15,
@@ -1844,10 +1844,10 @@ const aa = (r) => {
             {
               onClick: _,
               disabled: a <= e,
-              className: G.button,
+              className: U.button,
               "aria-label": "Decrement count",
               children: /* @__PURE__ */ t.jsx(
-                v,
+                b,
                 {
                   name: "CaretDown",
                   width: 15,
@@ -1860,7 +1860,7 @@ const aa = (r) => {
       ] })
     ] })
   ] });
-}, zn = "_title_1lejm_1", Fn = "_subtitle_1lejm_5", Vn = "_header_1lejm_12", Un = "_text_1lejm_13", Yn = "_productsBlock_1lejm_14", Gn = "_top_1lejm_26", Wn = "_itemsBlock_1lejm_35", Xn = "_typeTexts_1lejm_41", Jn = "_block_1lejm_48", Qn = "_active_1lejm_61", Kn = "_products_1lejm_14", Zn = "_product_1lejm_14", ti = "_button_1lejm_80", ei = "_image_1lejm_91", si = "_info_1lejm_98", ni = "_name_1lejm_110", ii = "_buttons_1lejm_114", oi = "_modal_1lejm_121", ai = "_link_1lejm_141", ci = "_modalOptions_1lejm_147", li = "_addButton_1lejm_159", ri = "_deleteButton_1lejm_174", W = {
+}, zn = "_title_1lejm_1", Fn = "_subtitle_1lejm_5", Vn = "_header_1lejm_12", Un = "_text_1lejm_13", Yn = "_productsBlock_1lejm_14", Gn = "_top_1lejm_26", Wn = "_itemsBlock_1lejm_35", Xn = "_typeTexts_1lejm_41", Jn = "_block_1lejm_48", Qn = "_active_1lejm_61", Kn = "_products_1lejm_14", Zn = "_product_1lejm_14", ti = "_button_1lejm_80", ei = "_image_1lejm_91", si = "_info_1lejm_98", ni = "_name_1lejm_110", ii = "_buttons_1lejm_114", oi = "_modal_1lejm_121", ai = "_link_1lejm_141", ci = "_modalOptions_1lejm_147", li = "_addButton_1lejm_159", ri = "_deleteButton_1lejm_174", Y = {
   title: zn,
   subtitle: Fn,
   header: Vn,
@@ -1892,7 +1892,7 @@ const aa = (r) => {
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: W.modal,
+      className: Y.modal,
       onClick: (n) => {
         n.stopPropagation();
       },
@@ -1901,10 +1901,10 @@ const aa = (r) => {
         left: `${s.left}px`
       },
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: W.top, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: Y.top, children: [
           /* @__PURE__ */ t.jsx("h3", { children: m(l.productData.name, 20) }),
           /* @__PURE__ */ t.jsx(
-            v,
+            b,
             {
               name: "X",
               height: 20,
@@ -1916,7 +1916,7 @@ const aa = (r) => {
             }
           )
         ] }),
-        /* @__PURE__ */ t.jsx("div", { className: W.modalOptions, children: /* @__PURE__ */ t.jsx(
+        /* @__PURE__ */ t.jsx("div", { className: Y.modalOptions, children: /* @__PURE__ */ t.jsx(
           gt,
           {
             label: "Put up an attractive image",
@@ -1946,7 +1946,7 @@ function ui(r) {
     {
       ref: a,
       style: o,
-      className: `${W.product} ${n ? W.dragging : ""}`,
+      className: `${Y.product} ${n ? Y.dragging : ""}`,
       ...s,
       ...i,
       children: e
@@ -1964,57 +1964,57 @@ const la = (r) => {
     subtitle: m,
     editable: n = !0,
     draggable: o = !1,
-    withImage: f = !1,
-    deletable: N = !0,
+    withImage: x = !1,
+    deletable: $ = !0,
     addable: _ = !0,
     itemsType: h,
     itemsOptions: p
-  } = r, [d, C] = g.useState(
+  } = r, [d, w] = g.useState(
     null
-  ), [D, y] = g.useState({
+  ), [q, y] = g.useState({
     top: 0,
     left: 0
-  }), [L, B] = g.useState(!1), T = $t(
-    It(Bt, {
+  }), [L, B] = g.useState(!1), S = $t(
+    Nt(Bt, {
       activationConstraint: {
         distance: 5
       }
     })
   );
   g.useEffect(() => {
-    const b = () => {
-      C(null), B(!1);
+    const v = () => {
+      w(null), B(!1);
     };
-    return document.body.addEventListener("click", b), C(null), B(!1), () => {
-      C(null), B(!1), document.body.removeEventListener("click", b);
+    return document.body.addEventListener("click", v), w(null), B(!1), () => {
+      w(null), B(!1), document.body.removeEventListener("click", v);
     };
   }, []), g.useEffect(() => {
     if (d) {
-      const b = [...s].map((I) => I.listingId === d.listingId ? d : I);
-      i(b);
+      const v = [...s].map((N) => N.listingId === d.listingId ? d : N);
+      i(v);
     }
   }, [d]);
-  const x = (b, I) => {
-    b.stopPropagation();
-    const P = b.target.getBoundingClientRect(), U = 100, q = window.innerHeight;
-    let M = P.top + window.scrollY;
-    M + U > q && (M = q - U - 20), B(!0), y({
+  const f = (v, N) => {
+    v.stopPropagation();
+    const E = v.target.getBoundingClientRect(), G = 100, A = window.innerHeight;
+    let M = E.top + window.scrollY;
+    M + G > A && (M = A - G - 20), B(!0), y({
       top: M - 80,
-      left: P.left - 30
-    }), C(I);
+      left: E.left - 30
+    }), w(N);
   };
-  function k(b) {
-    if (f)
-      return b ? /* @__PURE__ */ t.jsx(
+  function D(v) {
+    if (x)
+      return v ? /* @__PURE__ */ t.jsx(
         "img",
         {
-          src: `https://imagedelivery.net/${b}/w=1000`,
+          src: `https://imagedelivery.net/${v}/w=1000`,
           alt: "image",
           width: 16,
           height: 16
         }
       ) : /* @__PURE__ */ t.jsx(
-        v,
+        b,
         {
           name: "Image",
           width: 16,
@@ -2023,21 +2023,21 @@ const la = (r) => {
         }
       );
   }
-  const V = (b) => {
-    const { active: I, over: P } = b;
-    if (P && I.id !== P.id) {
-      const U = s.findIndex((M) => String(M.listingId) === I.id), q = s.findIndex((M) => String(M.listingId) === P.id);
-      if (U !== -1 && q !== -1) {
-        const M = [...s], [Z] = M.splice(U, 1);
-        M.splice(q, 0, Z), i(M);
+  const X = (v) => {
+    const { active: N, over: E } = v;
+    if (E && N.id !== E.id) {
+      const G = s.findIndex((M) => String(M.listingId) === N.id), A = s.findIndex((M) => String(M.listingId) === E.id);
+      if (G !== -1 && A !== -1) {
+        const M = [...s], [K] = M.splice(G, 1);
+        M.splice(A, 0, K), i(M);
       }
     }
-  }, K = (b, I) => {
-    const P = p.find((q) => b.listingId === q.id);
-    if (!P) return null;
-    const U = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+  }, tt = (v, N) => {
+    const E = p.find((A) => v.listingId === A.id);
+    if (!E) return null;
+    const G = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       o && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-        v,
+        b,
         {
           name: "DotsSixVertical",
           hoverable: !0,
@@ -2046,47 +2046,47 @@ const la = (r) => {
         }
       ) }),
       h === "select" && /* @__PURE__ */ t.jsx(
-        et,
+        st,
         {
-          onChange: (q) => {
-            const M = [...s], Z = p.find((E) => E.productData.name === q);
-            if (!Z) return;
+          onChange: (A) => {
+            const M = [...s], K = p.find((O) => O.productData.name === A);
+            if (!K) return;
             const ct = {
-              listingId: Z.id,
-              image: Z.productData.images.length > 0 ? Z.productData.images[0].cfId : ""
-            }, j = M.map((E) => E.listingId === b.listingId ? ct : E);
-            C(ct), i([...j]);
+              listingId: K.id,
+              image: K.productData.images.length > 0 ? K.productData.images[0].cfId : ""
+            }, j = M.map((O) => O.listingId === v.listingId ? ct : O);
+            w(ct), i([...j]);
           },
-          value: P.productData.name,
+          value: E.productData.name,
           options: [
-            ...p.filter((q) => !s.find((M) => M.listingId === q.id)).map((q) => q.productData.name)
+            ...p.filter((A) => !s.find((M) => M.listingId === A.id)).map((A) => A.productData.name)
           ],
-          leftAddon: k(
-            b.image || P.productData.images.length > 0 && P.productData.images[0].cfId || ""
+          leftAddon: D(
+            v.image || E.productData.images.length > 0 && E.productData.images[0].cfId || ""
           )
         },
-        I
+        N
       ),
-      /* @__PURE__ */ t.jsxs("div", { className: W.buttons, children: [
-        n && /* @__PURE__ */ t.jsx("div", { className: W.deleteButton, children: /* @__PURE__ */ t.jsx(
-          v,
+      /* @__PURE__ */ t.jsxs("div", { className: Y.buttons, children: [
+        n && /* @__PURE__ */ t.jsx("div", { className: Y.deleteButton, children: /* @__PURE__ */ t.jsx(
+          b,
           {
             name: "Sliders",
             hoverable: !0,
             width: 20,
             height: 20,
-            onClick: (q) => x(q, b)
+            onClick: (A) => f(A, v)
           }
         ) }),
-        N && /* @__PURE__ */ t.jsx("div", { className: W.deleteButton, children: /* @__PURE__ */ t.jsx(
-          v,
+        $ && /* @__PURE__ */ t.jsx("div", { className: Y.deleteButton, children: /* @__PURE__ */ t.jsx(
+          b,
           {
             name: "Trash",
             hoverable: !0,
             width: 20,
             height: 20,
             fill: "#C12A2A",
-            onClick: () => i(s.filter((q) => q !== b))
+            onClick: () => i(s.filter((A) => A !== v))
           }
         ) })
       ] })
@@ -2094,27 +2094,27 @@ const la = (r) => {
     return o ? /* @__PURE__ */ t.jsx(
       ui,
       {
-        product: b,
-        children: U
+        product: v,
+        children: G
       },
-      b.listingId
+      v.listingId
     ) : /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: W.product,
-        children: U
+        className: Y.product,
+        children: G
       },
-      b.listingId
+      v.listingId
     );
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: W.productsBlock, children: [
-    (l || c !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: W.top, children: [
-      l && /* @__PURE__ */ t.jsx("h3", { className: W.title, children: l }),
+  return /* @__PURE__ */ t.jsxs("div", { className: Y.productsBlock, children: [
+    (l || c !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: Y.top, children: [
+      l && /* @__PURE__ */ t.jsx("h3", { className: Y.title, children: l }),
       c !== void 0 && /* @__PURE__ */ t.jsx(
-        tt,
+        Z,
         {
           current: c,
-          onChange: (b) => e == null ? void 0 : e(b)
+          onChange: (v) => e == null ? void 0 : e(v)
         }
       )
     ] }),
@@ -2122,29 +2122,29 @@ const la = (r) => {
       di,
       {
         activeItem: d,
-        setActiveItem: C,
+        setActiveItem: w,
         setIsOpenModal: B,
-        popupPosition: D,
+        popupPosition: q,
         itemsOptions: p
       }
     ),
-    /* @__PURE__ */ t.jsxs("div", { className: W.products, children: [
-      m && /* @__PURE__ */ t.jsx("h5", { className: W.subtitle, children: m }),
+    /* @__PURE__ */ t.jsxs("div", { className: Y.products, children: [
+      m && /* @__PURE__ */ t.jsx("h5", { className: Y.subtitle, children: m }),
       o ? /* @__PURE__ */ t.jsx(
-        Nt,
+        It,
         {
-          sensors: T,
-          onDragEnd: V,
+          sensors: S,
+          onDragEnd: X,
           children: /* @__PURE__ */ t.jsx(
             wt,
             {
-              items: s.map((b) => String(b.listingId)),
+              items: s.map((v) => String(v.listingId)),
               strategy: Ct,
-              children: s.map((b, I) => K(b, I))
+              children: s.map((v, N) => tt(v, N))
             }
           )
         }
-      ) : s.map((b, I) => K(b, I)),
+      ) : s.map((v, N) => tt(v, N)),
       _ && /* @__PURE__ */ t.jsx(
         "div",
         {
@@ -2157,28 +2157,28 @@ const la = (r) => {
             at,
             {
               withoutHover: !0,
-              className: W.button,
+              className: Y.button,
               size: "s",
               onClick: () => {
-                const b = [...s];
-                for (let I = 0; I < p.length; I++)
-                  if (!s.find((P) => P.listingId === p[I].id)) {
-                    b.push({
-                      listingId: p[I].id,
-                      image: p[I].productData.images.length > 0 ? p[I].productData.images[0].cfId : ""
+                const v = [...s];
+                for (let N = 0; N < p.length; N++)
+                  if (!s.find((E) => E.listingId === p[N].id)) {
+                    v.push({
+                      listingId: p[N].id,
+                      image: p[N].productData.images.length > 0 ? p[N].productData.images[0].cfId : ""
                     });
                     break;
                   }
-                i(b);
+                i(v);
               },
               disabled: s.length === p.length,
               style: {
                 width: "fit-content"
               },
-              children: /* @__PURE__ */ t.jsxs("div", { className: W.addButton, children: [
+              children: /* @__PURE__ */ t.jsxs("div", { className: Y.addButton, children: [
                 /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
                 /* @__PURE__ */ t.jsx(
-                  v,
+                  b,
                   {
                     name: "Plus",
                     width: 16,
@@ -2191,9 +2191,9 @@ const la = (r) => {
         }
       )
     ] }),
-    a !== void 0 && /* @__PURE__ */ t.jsx(jt, { items: a })
+    a !== void 0 && /* @__PURE__ */ t.jsx(bt, { items: a })
   ] });
-}, mi = "_options_d1lk6_1", hi = "_price_d1lk6_12", _i = "_oldPrice_d1lk6_19", pi = "_newPrice_d1lk6_27", gi = "_animate_d1lk6_34", fi = "_appearAndBounce_d1lk6_1", xi = "_meta_d1lk6_52", bi = "_info_d1lk6_58", ji = "_infoRight_d1lk6_66", vi = "_buttons_d1lk6_73", yi = "_variants_d1lk6_80", ki = "_variant_d1lk6_80", $i = "_stock_d1lk6_98", Ii = "_variantInfo_d1lk6_105", Ni = "_quantity_d1lk6_111", wi = "_count_d1lk6_118", Ci = "_focused_d1lk6_135", Bi = "_button_d1lk6_73", Si = "_activeVariant_d1lk6_161", Ti = "_chargeTypes_d1lk6_165", Pi = "_charge_d1lk6_165", Ai = "_chargeActive_d1lk6_190", Oi = "_title_d1lk6_198", w = {
+}, mi = "_options_d1lk6_1", hi = "_price_d1lk6_12", _i = "_oldPrice_d1lk6_19", pi = "_newPrice_d1lk6_27", gi = "_animate_d1lk6_34", fi = "_appearAndBounce_d1lk6_1", xi = "_meta_d1lk6_52", ji = "_info_d1lk6_58", bi = "_infoRight_d1lk6_66", vi = "_buttons_d1lk6_73", yi = "_variants_d1lk6_80", ki = "_variant_d1lk6_80", $i = "_stock_d1lk6_98", Ni = "_variantInfo_d1lk6_105", Ii = "_quantity_d1lk6_111", wi = "_count_d1lk6_118", Ci = "_focused_d1lk6_135", Bi = "_button_d1lk6_73", Si = "_activeVariant_d1lk6_161", Ti = "_chargeTypes_d1lk6_165", Pi = "_charge_d1lk6_165", Ai = "_chargeActive_d1lk6_190", Oi = "_title_d1lk6_198", I = {
   options: mi,
   price: hi,
   oldPrice: _i,
@@ -2201,14 +2201,14 @@ const la = (r) => {
   animate: gi,
   appearAndBounce: fi,
   meta: xi,
-  info: bi,
-  infoRight: ji,
+  info: ji,
+  infoRight: bi,
   buttons: vi,
   variants: yi,
   variant: ki,
   stock: $i,
-  variantInfo: Ii,
-  quantity: Ni,
+  variantInfo: Ni,
+  quantity: Ii,
   count: wi,
   focused: Ci,
   button: Bi,
@@ -2220,107 +2220,107 @@ const la = (r) => {
 };
 var Mt = /* @__PURE__ */ ((r) => (r.ONE_TIME = "One-Time", r.RECURRING = "Subscribe & Save", r))(Mt || {});
 const ra = (r) => {
-  var B, T;
-  const { variants: c } = r, [e, s] = g.useState(c[0]), [i, a] = g.useState(e.chargeTypes[0]), l = bt(), [m, n] = g.useState(1), [o, f] = g.useState(!1), { reset: N, addProductToCart: _, getProducts: h } = Pt(), [p, d] = g.useState(!1);
+  var B, S;
+  const { variants: c } = r, [e, s] = g.useState(c[0]), [i, a] = g.useState(e.chargeTypes[0]), l = jt(), [m, n] = g.useState(1), [o, x] = g.useState(!1), { reset: $, addProductToCart: _, getProducts: h } = Pt(), [p, d] = g.useState(!1);
   g.useEffect(() => {
     d(!0);
-    const x = setTimeout(() => d(!1), 600);
-    return () => clearTimeout(x);
+    const f = setTimeout(() => d(!1), 600);
+    return () => clearTimeout(f);
   }, [m]);
-  async function C() {
+  async function w() {
     await h(), await _({
       productId: r.id,
       productVariantId: e.id,
       quantity: m
     });
   }
-  function D() {
-    N(), C(), l("/checkout");
+  function q() {
+    $(), w(), l("/checkout");
   }
-  function y(x) {
-    if (x >= 864e5) {
-      const I = Math.floor(x / 864e5);
-      return `${I} ${I === 1 ? "day" : "days"}`;
-    } else if (x >= 36e5) {
-      const I = Math.floor(x / 36e5);
-      return `${I} ${I === 1 ? "hour" : "hours"}`;
-    } else if (x >= 6e4) {
-      const I = Math.floor(x / 6e4);
-      return `${I} ${I === 1 ? "minute" : "minutes"}`;
+  function y(f) {
+    if (f >= 864e5) {
+      const N = Math.floor(f / 864e5);
+      return `${N} ${N === 1 ? "day" : "days"}`;
+    } else if (f >= 36e5) {
+      const N = Math.floor(f / 36e5);
+      return `${N} ${N === 1 ? "hour" : "hours"}`;
+    } else if (f >= 6e4) {
+      const N = Math.floor(f / 6e4);
+      return `${N} ${N === 1 ? "minute" : "minutes"}`;
     } else {
-      const I = Math.floor(x / 1e3);
-      return `${I} ${I === 1 ? "second" : "seconds"}`;
+      const N = Math.floor(f / 1e3);
+      return `${N} ${N === 1 ? "second" : "seconds"}`;
     }
   }
-  function L(x, k) {
-    return x.length > k ? x.slice(0, k) + "..." : x;
+  function L(f, D) {
+    return f.length > D ? f.slice(0, D) + "..." : f;
   }
-  return /* @__PURE__ */ t.jsxs("div", { className: w.options, children: [
-    e.chargeTypes.length > 1 && /* @__PURE__ */ t.jsx("div", { className: w.chargeTypes, children: e.chargeTypes.map((x) => /* @__PURE__ */ t.jsx(
+  return /* @__PURE__ */ t.jsxs("div", { className: I.options, children: [
+    e.chargeTypes.length > 1 && /* @__PURE__ */ t.jsx("div", { className: I.chargeTypes, children: e.chargeTypes.map((f) => /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: F(w.charge, {
-          [w.chargeActive]: i === x
+        className: z(I.charge, {
+          [I.chargeActive]: i === f
         }),
-        onClick: () => a(x),
-        children: Mt[x]
+        onClick: () => a(f),
+        children: Mt[f]
       },
-      x
+      f
     )) }),
-    /* @__PURE__ */ t.jsx("div", { className: w.variants, children: c.map((x) => {
-      var k;
+    /* @__PURE__ */ t.jsx("div", { className: I.variants, children: c.map((f) => {
+      var D;
       return /* @__PURE__ */ t.jsxs(
         "div",
         {
-          className: F(w.variant, {
-            [w.activeVariant]: e.id === x.id
+          className: z(I.variant, {
+            [I.activeVariant]: e.id === f.id
           }),
-          onClick: () => s(x),
+          onClick: () => s(f),
           children: [
-            /* @__PURE__ */ t.jsxs("div", { className: w.variantInfo, children: [
-              /* @__PURE__ */ t.jsx("span", { className: w.title, children: L(x.name, 15) }),
+            /* @__PURE__ */ t.jsxs("div", { className: I.variantInfo, children: [
+              /* @__PURE__ */ t.jsx("span", { className: I.title, children: L(f.name, 15) }),
               /* @__PURE__ */ t.jsxs("span", { children: [
                 "$",
-                i === "ONE_TIME" ? x.price.amount : x.subscriptionSettings ? x.subscriptionSettings.price.amount : "Price Not Found"
+                i === "ONE_TIME" ? f.price.amount : f.subscriptionSettings ? f.subscriptionSettings.price.amount : "Price Not Found"
               ] })
             ] }),
-            /* @__PURE__ */ t.jsx("div", { children: i === "ONE_TIME" && /* @__PURE__ */ t.jsxs("span", { className: w.stock, children: [
-              ((k = x.quantity.restrictions) == null ? void 0 : k.max) || x.quantity.available || 0,
+            /* @__PURE__ */ t.jsx("div", { children: i === "ONE_TIME" && /* @__PURE__ */ t.jsxs("span", { className: I.stock, children: [
+              ((D = f.quantity.restrictions) == null ? void 0 : D.max) || f.quantity.available || 0,
               " in stock"
             ] }) })
           ]
         },
-        x.id
+        f.id
       );
     }) }),
-    i === "ONE_TIME" && /* @__PURE__ */ t.jsxs("div", { className: w.quantity, children: [
+    i === "ONE_TIME" && /* @__PURE__ */ t.jsxs("div", { className: I.quantity, children: [
       /* @__PURE__ */ t.jsx(
         "button",
         {
           onClick: () => {
-            m > 1 ? n((x) => x - 1) : n(1);
+            m > 1 ? n((f) => f - 1) : n(1);
           },
-          className: w.button,
+          className: I.button,
           disabled: e.quantity.restrictions && m <= e.quantity.restrictions.min,
-          children: /* @__PURE__ */ t.jsx(v, { name: "Minus" })
+          children: /* @__PURE__ */ t.jsx(b, { name: "Minus" })
         }
       ),
       /* @__PURE__ */ t.jsx(
         "label",
         {
-          className: F(w.count, {
-            [w.focused]: o
+          className: z(I.count, {
+            [I.focused]: o
           }),
-          onFocus: () => f(!0),
-          onBlur: () => f(!1),
+          onFocus: () => x(!0),
+          onBlur: () => x(!1),
           children: /* @__PURE__ */ t.jsx(
-            X,
+            W,
             {
               type: "number",
               value: String(m),
-              onChange: (x) => n(Number(x)),
+              onChange: (f) => n(Number(f)),
               max: ((B = e.quantity.restrictions) == null ? void 0 : B.max) || e.quantity.available || 1 / 0,
-              min: ((T = e.quantity.restrictions) == null ? void 0 : T.min) || 0,
+              min: ((S = e.quantity.restrictions) == null ? void 0 : S.min) || 0,
               style: {
                 backgroundColor: "transparent",
                 border: "none",
@@ -2334,20 +2334,20 @@ const ra = (r) => {
         "button",
         {
           onClick: () => {
-            n((x) => x + 1);
+            n((f) => f + 1);
           },
-          className: w.button,
+          className: I.button,
           disabled: !!(e.quantity.restrictions && m >= e.quantity.restrictions.max || e.quantity.available && m >= e.quantity.available),
-          children: /* @__PURE__ */ t.jsx(v, { name: "Plus" })
+          children: /* @__PURE__ */ t.jsx(b, { name: "Plus" })
         }
       )
     ] }),
-    /* @__PURE__ */ t.jsxs("div", { className: w.meta, children: [
-      /* @__PURE__ */ t.jsxs("div", { className: w.info, children: [
+    /* @__PURE__ */ t.jsxs("div", { className: I.meta, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: I.info, children: [
         /* @__PURE__ */ t.jsx("span", { children: "Delivery" }),
-        /* @__PURE__ */ t.jsxs("div", { className: w.infoRight, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: I.infoRight, children: [
           /* @__PURE__ */ t.jsx(
-            v,
+            b,
             {
               name: "Lightning",
               fill: "#FF3F19",
@@ -2358,41 +2358,41 @@ const ra = (r) => {
           /* @__PURE__ */ t.jsx("span", { children: !e.deliveryTime || e.deliveryTime === 0 ? "Instant" : y(e.deliveryTime) })
         ] })
       ] }),
-      /* @__PURE__ */ t.jsxs("div", { className: w.info, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: I.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: F(w.newPrice, { [w.animate]: p }), children: [
+        /* @__PURE__ */ t.jsx("div", { className: I.infoRight, children: i === "ONE_TIME" ? e.compareAtPrice && (e.compareAtPrice.amount || 0) - (e.price.amount || 0) > 0 ? /* @__PURE__ */ t.jsxs("div", { className: I.price, children: [
+          /* @__PURE__ */ t.jsxs("span", { className: z(I.newPrice, { [I.animate]: p }), children: [
             "$ ",
             (e.price.amount || 0) * m
           ] }),
-          /* @__PURE__ */ t.jsxs("span", { className: w.oldPrice, children: [
+          /* @__PURE__ */ t.jsxs("span", { className: I.oldPrice, children: [
             "$ ",
             (e.compareAtPrice.amount || 0) * m
           ] })
-        ] }) : /* @__PURE__ */ t.jsxs("span", { className: F(w.newPrice, { [w.animate]: p }), children: [
+        ] }) : /* @__PURE__ */ t.jsxs("span", { className: z(I.newPrice, { [I.animate]: p }), children: [
           "$ ",
           (e.price.amount || 0) * m
-        ] }) : 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: F(w.newPrice, { [w.animate]: p }), children: [
+        ] }) : e.subscriptionSettings && e.subscriptionSettings.compareAtPrice && (e.subscriptionSettings.compareAtPrice.amount || 0) - (e.subscriptionSettings.price.amount || 0) > 0 ? /* @__PURE__ */ t.jsxs("div", { className: I.price, children: [
+          /* @__PURE__ */ t.jsxs("span", { className: z(I.newPrice, { [I.animate]: p }), children: [
             "$ ",
             e.subscriptionSettings.price.amount || 0
           ] }),
-          /* @__PURE__ */ t.jsxs("span", { className: w.oldPrice, children: [
+          /* @__PURE__ */ t.jsxs("span", { className: I.oldPrice, children: [
             "$ ",
             e.subscriptionSettings.compareAtPrice.amount || 0
           ] })
-        ] }) : e.subscriptionSettings && /* @__PURE__ */ t.jsxs("span", { className: F(w.newPrice, { [w.animate]: p }), children: [
+        ] }) : e.subscriptionSettings && /* @__PURE__ */ t.jsxs("span", { className: z(I.newPrice, { [I.animate]: p }), children: [
           "$ ",
           e.subscriptionSettings.price.amount || 0
         ] }) })
       ] })
     ] }),
-    /* @__PURE__ */ t.jsxs("div", { className: w.buttons, children: [
+    /* @__PURE__ */ t.jsxs("div", { className: I.buttons, children: [
       /* @__PURE__ */ t.jsx(
         at,
         {
           type: "Primary",
-          onClick: () => D(),
+          onClick: () => q(),
           children: /* @__PURE__ */ t.jsx("span", { children: i === "ONE_TIME" ? "Buy Now" : "Subscribe Now" })
         }
       ),
@@ -2400,13 +2400,13 @@ const ra = (r) => {
         at,
         {
           type: "Secondary",
-          onClick: () => C(),
+          onClick: () => w(),
           children: "Add to Cart"
         }
       )
     ] })
   ] });
-}, qi = "_button_oyh2y_1", Ei = "_login_oyh2y_14", Di = "_signUp_oyh2y_18", Li = "_buttons_oyh2y_23", Ri = "_modal_oyh2y_32", Mi = "_closing_oyh2y_61", Hi = "_info_oyh2y_85", zi = "_top_oyh2y_92", Fi = "_title_oyh2y_103", Vi = "_clear_oyh2y_110", Ui = "_activeClear_oyh2y_117", Yi = "_count_oyh2y_121", Gi = "_cart_oyh2y_136", Wi = "_empty_oyh2y_144", Xi = "_product_oyh2y_170", Ji = "_products_oyh2y_179", Qi = "_image_oyh2y_187", Ki = "_productInfo_oyh2y_193", Zi = "_content_oyh2y_200", to = "_name_oyh2y_206", eo = "_price_oyh2y_212", so = "_productButtons_oyh2y_218", no = "_productButton_oyh2y_218", io = "_productCount_oyh2y_238", oo = "_bottom_oyh2y_254", ao = "_subtotal_oyh2y_262", co = "_block_oyh2y_270", lo = "_shoppingCount_oyh2y_277", ro = "_total_oyh2y_297", uo = "_link_oyh2y_303", mo = "_userInfo_oyh2y_310", S = {
+}, qi = "_button_oyh2y_1", Ei = "_login_oyh2y_14", Di = "_signUp_oyh2y_18", Li = "_buttons_oyh2y_23", Ri = "_modal_oyh2y_32", Mi = "_closing_oyh2y_61", Hi = "_info_oyh2y_85", zi = "_top_oyh2y_92", Fi = "_title_oyh2y_103", Vi = "_clear_oyh2y_110", Ui = "_activeClear_oyh2y_117", Yi = "_count_oyh2y_121", Gi = "_cart_oyh2y_136", Wi = "_empty_oyh2y_144", Xi = "_product_oyh2y_170", Ji = "_products_oyh2y_179", Qi = "_image_oyh2y_187", Ki = "_productInfo_oyh2y_193", Zi = "_content_oyh2y_200", to = "_name_oyh2y_206", eo = "_price_oyh2y_212", so = "_productButtons_oyh2y_218", no = "_productButton_oyh2y_218", io = "_productCount_oyh2y_238", oo = "_bottom_oyh2y_254", ao = "_subtotal_oyh2y_262", co = "_block_oyh2y_270", lo = "_shoppingCount_oyh2y_277", ro = "_total_oyh2y_297", uo = "_link_oyh2y_303", mo = "_userInfo_oyh2y_310", C = {
   button: qi,
   login: Ei,
   signUp: Di,
@@ -2440,36 +2440,36 @@ const ra = (r) => {
   total: ro,
   link: uo,
   userInfo: mo
-}, ho = "_button_85085_1", _o = "_primary_85085_20", po = "_primaryHovered_85085_30", go = "_secondary_85085_34", fo = "_secondaryHovered_85085_44", xo = "_tertiary_85085_48", bo = "_tertiaryHovered_85085_58", jo = "_content_85085_62", nt = {
+}, ho = "_button_85085_1", _o = "_primary_85085_20", po = "_primaryHovered_85085_30", go = "_secondary_85085_34", fo = "_secondaryHovered_85085_44", xo = "_tertiary_85085_48", jo = "_tertiaryHovered_85085_58", bo = "_content_85085_62", it = {
   button: ho,
   primary: _o,
   primaryHovered: po,
   secondary: go,
   secondaryHovered: fo,
   tertiary: xo,
-  tertiaryHovered: bo,
-  content: jo
+  tertiaryHovered: jo,
+  content: bo
 }, kt = (r) => {
   const { children: c, onClick: e, style: s, className: i, disabled: a = !1, type: l = "Primary" } = r, { themeSettings: m } = qt();
   return /* @__PURE__ */ t.jsx(
     "button",
     {
-      className: F(nt.button, i, {
-        [nt.primary]: l === "Primary",
-        [nt.secondary]: l === "Secondary",
-        [nt.tertiary]: l === "Tertiary",
-        [nt.primaryHovered]: l === "Primary" && !a && m.buttons.primary.hover,
-        [nt.secondaryHovered]: l === "Secondary" && !a && m.buttons.secondary.hover,
-        [nt.tertiaryHovered]: l === "Tertiary" && !a && m.buttons.tertiary.hover
+      className: z(it.button, i, {
+        [it.primary]: l === "Primary",
+        [it.secondary]: l === "Secondary",
+        [it.tertiary]: l === "Tertiary",
+        [it.primaryHovered]: l === "Primary" && !a && m.buttons.primary.hover,
+        [it.secondaryHovered]: l === "Secondary" && !a && m.buttons.secondary.hover,
+        [it.tertiaryHovered]: l === "Tertiary" && !a && m.buttons.tertiary.hover
       }),
       onClick: e,
       style: {
         ...s
       },
       disabled: a,
-      children: l === "Tertiary" ? /* @__PURE__ */ t.jsxs("div", { className: nt.content, children: [
+      children: l === "Tertiary" ? /* @__PURE__ */ t.jsxs("div", { className: it.content, children: [
         /* @__PURE__ */ t.jsx(
-          v,
+          b,
           {
             name: "ArrowRight",
             fill: "#757575",
@@ -2531,12 +2531,12 @@ function ko(r, c) {
   }
 }
 const da = (r) => {
-  const { shopping: c, signUp: e } = r, s = bt();
+  const { shopping: c, signUp: e } = r, s = jt();
   function i(l) {
     s(l);
   }
   const a = JSON.parse(localStorage.getItem("token") || "{}");
-  return /* @__PURE__ */ t.jsxs("div", { className: S.buttons, children: [
+  return /* @__PURE__ */ t.jsxs("div", { className: C.buttons, children: [
     c && /* @__PURE__ */ t.jsx($o, {}),
     !a.data && /* @__PURE__ */ t.jsx(
       kt,
@@ -2578,10 +2578,10 @@ const da = (r) => {
   }
   g.useEffect(() => {
     (async () => {
-      const h = i.parts.map((C) => String(C.productId)), d = (await a([...h])).map((C) => ({
-        ...C,
-        activeVariantId: l(C),
-        quantity: m(C)
+      const h = i.parts.map((w) => String(w.productId)), d = (await a([...h])).map((w) => ({
+        ...w,
+        activeVariantId: l(w),
+        quantity: m(w)
       }));
       s(d);
     })();
@@ -2590,24 +2590,24 @@ const da = (r) => {
     var h;
     return !_ || !(_ != null && _.variants) ? !1 : (h = _.variants.find((p) => p.id === _.activeVariantId)) == null ? void 0 : h.subscriptionSettings;
   }
-  const o = i.parts.length > 0 && e.length > 0 && !n(e[0]), [f, N] = g.useState(!1);
+  const o = i.parts.length > 0 && e.length > 0 && !n(e[0]), [x, $] = g.useState(!1);
   return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
     /* @__PURE__ */ t.jsxs(
       "div",
       {
-        className: S.button,
+        className: C.button,
         onClick: (_) => {
-          _.stopPropagation(), c(!0), N(!0);
+          _.stopPropagation(), c(!0), $(!0);
         },
         children: [
           /* @__PURE__ */ t.jsx(
-            v,
+            b,
             {
               name: "Handbag",
               fill: "var(--icon-primary)"
             }
           ),
-          o && /* @__PURE__ */ t.jsx("div", { className: S.shoppingCount, children: i.parts.length })
+          o && /* @__PURE__ */ t.jsx("div", { className: C.shoppingCount, children: i.parts.length })
         ]
       }
     ),
@@ -2615,34 +2615,34 @@ const da = (r) => {
       Et,
       {
         close: () => {
-          N(!1), setTimeout(() => {
+          $(!1), setTimeout(() => {
             c(!1);
           }, 300);
         },
         children: /* @__PURE__ */ t.jsx(
-          Io,
+          No,
           {
             activeProducts: e,
             isCartNotEmpty: o,
-            isOpen: f
+            isOpen: x
           }
         )
       }
     )
   ] });
-}, Io = (r) => {
-  const { activeProducts: c, isCartNotEmpty: e, isOpen: s } = r, { cart: i, reset: a, getTotalAndDiscount: l, updateQuantityOfProduct: m } = Pt(), n = bt();
+}, No = (r) => {
+  const { activeProducts: c, isCartNotEmpty: e, isOpen: s } = r, { cart: i, reset: a, getTotalAndDiscount: l, updateQuantityOfProduct: m } = Pt(), n = jt();
   function o(_) {
     n(_);
   }
-  function f(_) {
+  function x(_) {
     m({
       productId: _.id,
       productVariantId: _.activeVariantId,
       quantity: _.quantity + 1
     });
   }
-  function N(_) {
+  function $(_) {
     m({
       productId: _.id,
       productVariantId: _.activeVariantId,
@@ -2652,21 +2652,21 @@ const da = (r) => {
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: F(S.modal, {
-        [S.closing]: !s
+      className: z(C.modal, {
+        [C.closing]: !s
       }),
       onClick: (_) => _.stopPropagation(),
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: S.top, children: [
-          /* @__PURE__ */ t.jsxs("div", { className: S.info, children: [
-            /* @__PURE__ */ t.jsx("span", { className: S.title, children: "Cart" }),
-            e && /* @__PURE__ */ t.jsx("div", { className: S.count, children: i.parts.length })
+        /* @__PURE__ */ t.jsxs("div", { className: C.top, children: [
+          /* @__PURE__ */ t.jsxs("div", { className: C.info, children: [
+            /* @__PURE__ */ t.jsx("span", { className: C.title, children: "Cart" }),
+            e && /* @__PURE__ */ t.jsx("div", { className: C.count, children: i.parts.length })
           ] }),
           /* @__PURE__ */ t.jsx(
             "button",
             {
-              className: F(S.clear, {
-                [S.activeClear]: e
+              className: z(C.clear, {
+                [C.activeClear]: e
               }),
               disabled: !e,
               onClick: a,
@@ -2674,13 +2674,13 @@ const da = (r) => {
             }
           )
         ] }),
-        e ? /* @__PURE__ */ t.jsxs("div", { className: S.cart, children: [
-          /* @__PURE__ */ t.jsx("div", { className: S.products, children: c.map((_) => /* @__PURE__ */ t.jsxs(
+        e ? /* @__PURE__ */ t.jsxs("div", { className: C.cart, children: [
+          /* @__PURE__ */ t.jsx("div", { className: C.products, children: c.map((_) => /* @__PURE__ */ t.jsxs(
             "div",
             {
-              className: S.product,
+              className: C.product,
               children: [
-                /* @__PURE__ */ t.jsxs("div", { className: S.productInfo, children: [
+                /* @__PURE__ */ t.jsxs("div", { className: C.productInfo, children: [
                   /* @__PURE__ */ t.jsx(
                     "img",
                     {
@@ -2688,27 +2688,27 @@ const da = (r) => {
                       alt: "image",
                       width: "100%",
                       height: "100%",
-                      className: S.image
+                      className: C.image
                     }
                   ),
-                  /* @__PURE__ */ t.jsxs("div", { className: S.content, children: [
-                    /* @__PURE__ */ t.jsx("div", { className: S.name, children: _.name }),
-                    /* @__PURE__ */ t.jsxs("div", { className: S.price, children: [
+                  /* @__PURE__ */ t.jsxs("div", { className: C.content, children: [
+                    /* @__PURE__ */ t.jsx("div", { className: C.name, children: _.name }),
+                    /* @__PURE__ */ t.jsxs("div", { className: C.price, children: [
                       "$",
                       _.variants.find((h) => h.id === _.activeVariantId).price.amount * ((_ == null ? void 0 : _.quantity) || 1)
                     ] })
                   ] })
                 ] }),
-                /* @__PURE__ */ t.jsxs("div", { className: S.productButtons, children: [
+                /* @__PURE__ */ t.jsxs("div", { className: C.productButtons, children: [
                   /* @__PURE__ */ t.jsx(
                     "div",
                     {
                       onClick: () => {
-                        _.quantity !== 1 && N(_);
+                        _.quantity !== 1 && $(_);
                       },
-                      className: S.productButton,
+                      className: C.productButton,
                       children: /* @__PURE__ */ t.jsx(
-                        v,
+                        b,
                         {
                           name: "Minus",
                           fill: "#757575",
@@ -2718,14 +2718,14 @@ const da = (r) => {
                       )
                     }
                   ),
-                  /* @__PURE__ */ t.jsx("div", { className: S.productCount, children: _.quantity }),
+                  /* @__PURE__ */ t.jsx("div", { className: C.productCount, children: _.quantity }),
                   /* @__PURE__ */ t.jsx(
                     "div",
                     {
-                      onClick: () => f(_),
-                      className: S.productButton,
+                      onClick: () => x(_),
+                      className: C.productButton,
                       children: /* @__PURE__ */ t.jsx(
-                        v,
+                        b,
                         {
                           name: "Plus",
                           fill: "#757575",
@@ -2740,12 +2740,12 @@ const da = (r) => {
             },
             _.id
           )) }),
-          /* @__PURE__ */ t.jsxs("div", { className: S.bottom, children: [
-            /* @__PURE__ */ t.jsxs("div", { className: S.subtotal, children: [
-              /* @__PURE__ */ t.jsxs("div", { className: S.block, children: [
+          /* @__PURE__ */ t.jsxs("div", { className: C.bottom, children: [
+            /* @__PURE__ */ t.jsxs("div", { className: C.subtotal, children: [
+              /* @__PURE__ */ t.jsxs("div", { className: C.block, children: [
                 /* @__PURE__ */ t.jsx("span", { children: "Subtotal" }),
                 /* @__PURE__ */ t.jsx(
-                  v,
+                  b,
                   {
                     name: "Info",
                     width: 20,
@@ -2754,20 +2754,20 @@ const da = (r) => {
                   }
                 )
               ] }),
-              /* @__PURE__ */ t.jsxs("div", { className: S.total, children: [
+              /* @__PURE__ */ t.jsxs("div", { className: C.total, children: [
                 "$",
                 l().total
               ] })
             ] }),
             /* @__PURE__ */ t.jsx(kt, { onClick: () => o("/checkout"), children: "Checkout" })
           ] })
-        ] }) : /* @__PURE__ */ t.jsx(No, {})
+        ] }) : /* @__PURE__ */ t.jsx(Io, {})
       ]
     }
   );
-}, No = () => /* @__PURE__ */ t.jsxs("div", { className: S.empty, children: [
+}, Io = () => /* @__PURE__ */ t.jsxs("div", { className: C.empty, children: [
   /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-    v,
+    b,
     {
       name: "Handbag",
       fill: "var(--icon-secondary)"
@@ -2781,13 +2781,13 @@ const da = (r) => {
       "a",
       {
         href: "/products",
-        className: S.link,
+        className: C.link,
         children: "view products"
       }
     )
   ] })
 ] }), wo = ({ token: r }) => {
-  const [c, e] = g.useState("test-email@gmail.com"), s = bt();
+  const [c, e] = g.useState("test-email@gmail.com"), s = jt();
   g.useEffect(() => {
     (async () => {
       const l = ko(r);
@@ -2800,7 +2800,7 @@ const da = (r) => {
   return /* @__PURE__ */ t.jsx(
     "div",
     {
-      className: S.userInfo,
+      className: C.userInfo,
       onClick: () => i("/customer-dash"),
       children: /* @__PURE__ */ t.jsx("div", { children: c || "test-email@gmail.com" })
     }
@@ -2830,7 +2830,7 @@ const da = (r) => {
         },
         type: "Secondary",
         children: /* @__PURE__ */ t.jsx(
-          v,
+          b,
           {
             name: "Share",
             fill: "#757575",
@@ -2858,7 +2858,7 @@ const da = (r) => {
         /* @__PURE__ */ t.jsxs("div", { className: ot.header, children: [
           /* @__PURE__ */ t.jsx("div", { className: ot.title, children: "Copy Product Link" }),
           /* @__PURE__ */ t.jsx(
-            v,
+            b,
             {
               name: "X",
               fill: "#757575",
@@ -2871,7 +2871,7 @@ const da = (r) => {
           /* @__PURE__ */ t.jsx(
             "div",
             {
-              className: F(ot.copy, ot.copyText),
+              className: z(ot.copy, ot.copyText),
               onClick: i,
               children: s
             }
@@ -2881,7 +2881,7 @@ const da = (r) => {
             {
               onClick: i,
               className: ot.copy,
-              children: c ? /* @__PURE__ */ t.jsx(v, { name: "Check" }) : /* @__PURE__ */ t.jsx(v, { name: "Copy" })
+              children: c ? /* @__PURE__ */ t.jsx(b, { name: "Check" }) : /* @__PURE__ */ t.jsx(b, { name: "Copy" })
             }
           )
         ] })
@@ -2908,7 +2908,7 @@ const da = (r) => {
         onClick: m,
         children: [
           /* @__PURE__ */ t.jsx("h5", { id: "h5", children: r }),
-          /* @__PURE__ */ t.jsx("div", { className: F(_t.icon, { [_t.open]: e }), children: /* @__PURE__ */ t.jsx(v, { name: "CaretDown" }) })
+          /* @__PURE__ */ t.jsx("div", { className: z(_t.icon, { [_t.open]: e }), children: /* @__PURE__ */ t.jsx(b, { name: "CaretDown" }) })
         ]
       }
     ),
@@ -2922,13 +2922,13 @@ const da = (r) => {
       }
     )
   ] });
-}, Fo = "_wrapper_1r14x_1", Vo = "_label_1r14x_9", Uo = "_input_1r14x_18", Yo = "_required_1r14x_35", Go = "_paddingless_1r14x_39", Wo = "_content_1r14x_43", Xo = "_borderless_1r14x_58", Jo = "_rightIcon_1r14x_63", it = {
+}, Fo = "_wrapper_p74l6_1", Vo = "_label_p74l6_9", Uo = "_input_p74l6_18", Yo = "_paddingless_p74l6_31", Go = "_content_p74l6_35", Wo = "_contentBorder_p74l6_48", Xo = "_borderless_p74l6_53", Jo = "_rightIcon_p74l6_58", et = {
   wrapper: Fo,
   label: Vo,
   input: Uo,
-  required: Yo,
-  paddingless: Go,
-  content: Wo,
+  paddingless: Yo,
+  content: Go,
+  contentBorder: Wo,
   borderless: Xo,
   rightIcon: Jo
 }, ha = (r) => {
@@ -2942,39 +2942,24 @@ const da = (r) => {
     max: m,
     placeholder: n,
     disabled: o = !1,
-    required: f = !1,
-    regex: N,
+    required: x = !1,
+    regex: $,
     paddingless: _ = !1,
     borderless: h = !1,
     editable: p = !1,
     isSearch: d = !1
-  } = r, { themeSettings: C } = qt(), { inputs: D } = C, [y, L] = g.useState(!1);
-  function B(k, V) {
-    if (k.startsWith("#")) {
-      let I, P, U;
-      return k.length === 7 ? (I = parseInt(k.slice(1, 3), 16), P = parseInt(k.slice(3, 5), 16), U = parseInt(k.slice(5, 7), 16)) : k.length === 4 && (I = parseInt(k[1] + k[1], 16), P = parseInt(k[2] + k[2], 16), U = parseInt(k[3] + k[3], 16)), `rgba(${I}, ${P}, ${U}, ${V})`;
-    }
-    const b = {
-      black: "#000000",
-      white: "#ffffff",
-      red: "#ff0000",
-      green: "#00ff00",
-      blue: "#0000ff"
-      // Можно добавить больше цветов
-    }[k.toLowerCase()];
-    return b ? B(b, V) : k;
-  }
-  function T(k) {
-    return Number(k) < 0 ? String(l) : k;
+  } = r, { themeSettings: w } = qt(), { inputs: q } = w, [y, L] = g.useState(!1);
+  function B(f) {
+    return Number(f) < 0 ? String(l) : f;
   }
-  function x(k) {
-    return !f || !N ? !0 : new RegExp(N).test(k);
+  function S(f) {
+    return !x || !$ ? !0 : new RegExp($).test(f);
   }
-  return /* @__PURE__ */ t.jsxs("div", { className: it.wrapper, children: [
+  return /* @__PURE__ */ t.jsxs("div", { className: et.wrapper, children: [
     s && /* @__PURE__ */ t.jsx(
       "label",
       {
-        className: it.label,
+        className: et.label,
         htmlFor: s,
         children: s
       }
@@ -2982,11 +2967,13 @@ const da = (r) => {
     /* @__PURE__ */ t.jsxs(
       "div",
       {
-        className: it.content,
+        className: z(et.content, {
+          [et.contentBorder]: q.border.active
+        }),
         style: {
-          paddingRight: D.general.height + 15,
+          paddingRight: q.general.height + 15,
           ...e,
-          backgroundColor: B(D.field.color, D.field.opacity / 100)
+          background: q.field.active ? q.field.color : "transparent"
         },
         children: [
           /* @__PURE__ */ t.jsx(
@@ -2994,20 +2981,20 @@ const da = (r) => {
             {
               id: s,
               type: a || "text",
-              onChange: (k) => {
-                if (a === "text") c(k.target.value);
+              onChange: (f) => {
+                if (a === "text") c(f.target.value);
                 else {
-                  const V = T(k.target.value);
-                  c(V);
+                  const D = B(f.target.value);
+                  c(D);
                 }
               },
               value: i,
               autoComplete: "off",
               placeholder: n || "Type something...",
-              className: F(it.input, {
-                [it.required]: y && f && !x(i),
-                [it.paddingless]: _,
-                [it.borderless]: h
+              className: z(et.input, {
+                [et.required]: y && x && !S(i),
+                [et.paddingless]: _,
+                [et.borderless]: h
               }),
               min: a === "number" ? l : void 0,
               max: a === "number" ? m : void 0,
@@ -3015,17 +3002,17 @@ const da = (r) => {
               onFocus: () => L(!0)
             }
           ),
-          d && /* @__PURE__ */ t.jsx("div", { className: it.rightIcon, children: /* @__PURE__ */ t.jsx(
-            v,
+          d && /* @__PURE__ */ t.jsx("div", { className: et.rightIcon, children: /* @__PURE__ */ t.jsx(
+            b,
             {
               name: "MagnifyingGlass",
               fill: "var(--icon-secondary)",
-              width: D.general.height,
-              height: D.general.height
+              width: q.general.height,
+              height: q.general.height
             }
           ) }),
           p && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-            v,
+            b,
             {
               name: "Sliders",
               width: 20,
@@ -3081,11 +3068,11 @@ export {
   oa as CategorySettings,
   gt as ChooseImage,
   fa as ChooseImageModal,
-  No as EmptyCart,
+  Io as EmptyCart,
   aa as FormSettings,
   da as HeaderButtons,
-  v as Icon,
-  X as InputSettings,
+  b as Icon,
+  W as InputSettings,
   ha as InputUI,
   He as ItemsSettings,
   ia as LayoutSettings,
@@ -3094,11 +3081,11 @@ export {
   Et as Modal,
   ra as ProductOptions,
   At as RangeSelector,
-  et as Select,
+  st as Select,
   ua as ShareLink,
   $o as ShoppingButton,
-  Io as ShoppingModalCart,
-  tt as Switch,
+  No as ShoppingModalCart,
+  Z as Switch,
   Rt as TextSettings,
   Ot as TextareaSettings,
   _a as TextareaUI,