@billgangcom/theme-lib 1.35.0 → 1.36.0

package/dist/ui.es.js

@@ -1,5 +1,5 @@
-import { j as t, I as v, c as V, 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-fMRXTmQw.js";
-import { p as fa, L as xa } from "./index-fMRXTmQw.js";
+import { j as t, I as v, c as F, a as X, S as tt, T as Ot, C as gt, b as 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 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 = {
@@ -57,7 +57,7 @@ const Ft = "_wrapper_3ibiw_2", Vt = "_alignmentBlock_3ibiw_8", Ut = "_title_3ibi
         return "AlignBottom";
     }
   }
-  const [h, n] = g.useState(null);
+  const [m, n] = g.useState(null);
   return /* @__PURE__ */ t.jsxs("div", { className: J.layout, children: [
     /* @__PURE__ */ t.jsx("h3", { className: J.title, children: "Layout" }),
     /* @__PURE__ */ t.jsxs("div", { className: J.alignmentBlock, children: [
@@ -88,8 +88,8 @@ 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: V(J.padding, {
-              [J.active]: h === o
+            className: F(J.padding, {
+              [J.active]: m === o
             }),
             onFocus: () => {
               n(o);
@@ -156,13 +156,13 @@ 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: V(vt.block, {
+      className: F(vt.block, {
         [vt.active]: c.includes(i)
       }),
       onClick: () => {
         const a = [...c];
         if (a.includes(i)) {
-          const l = a.filter((h) => h !== i);
+          const l = a.filter((m) => m !== i);
           e(l);
         } else
           a.push(i), e(a);
@@ -187,12 +187,12 @@ const Ft = "_wrapper_3ibiw_2", Vt = "_alignmentBlock_3ibiw_8", Ut = "_title_3ibi
     text: i,
     setText: a,
     setTypesText: l,
-    title: h,
+    title: m,
     subtitle: n = "Items"
   } = r;
   return /* @__PURE__ */ t.jsxs("div", { className: ht.text, children: [
-    (h || e !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: ht.top, children: [
-      h && /* @__PURE__ */ t.jsx("h3", { className: ht.title, children: h }),
+    (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,
         {
@@ -220,7 +220,7 @@ 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", z = {
+}, 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 = {
   title: he,
   subtitle: _e,
   header: pe,
@@ -247,14 +247,14 @@ const Ft = "_wrapper_3ibiw_2", Vt = "_alignmentBlock_3ibiw_8", Ut = "_title_3ibi
 }, Ee = g.forwardRef(
   (r, c) => {
     const { activeItem: e, setActiveItem: s, popupPosition: i, modalOptions: a, setIsOpenModal: l } = r;
-    function h(n, o) {
+    function m(n, o) {
       return n.length > o ? `${n.slice(0, o)}...` : n;
     }
     return /* @__PURE__ */ t.jsxs(
       "div",
       {
         ref: c,
-        className: z.modal,
+        className: H.modal,
         onClick: (n) => {
           n.stopPropagation();
         },
@@ -263,8 +263,8 @@ const Ft = "_wrapper_3ibiw_2", Vt = "_alignmentBlock_3ibiw_8", Ut = "_title_3ibi
           left: `${i.left}px`
         },
         children: [
-          /* @__PURE__ */ t.jsxs("div", { className: z.top, children: [
-            /* @__PURE__ */ t.jsx("h3", { className: z.title, children: h(e.name, 20) }),
+          /* @__PURE__ */ t.jsxs("div", { className: H.top, children: [
+            /* @__PURE__ */ t.jsx("h3", { className: H.title, children: m(e.name, 20) }),
             /* @__PURE__ */ t.jsx(
               v,
               {
@@ -278,7 +278,7 @@ const Ft = "_wrapper_3ibiw_2", Vt = "_alignmentBlock_3ibiw_8", Ut = "_title_3ibi
               }
             )
           ] }),
-          /* @__PURE__ */ t.jsx("div", { className: z.modalOptions, children: a.map((n) => {
+          /* @__PURE__ */ t.jsx("div", { className: H.modalOptions, children: a.map((n) => {
             if (n.type === "image")
               return /* @__PURE__ */ t.jsx(
                 gt,
@@ -335,7 +335,7 @@ const Ft = "_wrapper_3ibiw_2", Vt = "_alignmentBlock_3ibiw_8", Ut = "_title_3ibi
                 }
               );
             if (n.type === "inputSwitch")
-              return /* @__PURE__ */ t.jsxs("div", { className: z.link, children: [
+              return /* @__PURE__ */ t.jsxs("div", { className: H.link, children: [
                 /* @__PURE__ */ t.jsx(
                   X,
                   {
@@ -437,7 +437,7 @@ function Me({ product: r, children: c }) {
     setNodeRef: i,
     transform: a,
     transition: l,
-    isDragging: h
+    isDragging: m
   } = St({
     id: r.id
   }), n = {
@@ -449,7 +449,7 @@ function Me({ product: r, children: c }) {
     {
       ref: i,
       style: n,
-      className: `${z.product} ${h ? z.dragging : ""}`,
+      className: `${H.product} ${m ? H.dragging : ""}`,
       ...e,
       ...s,
       children: c
@@ -464,25 +464,25 @@ const He = (r) => {
     setItems: i,
     other: a,
     title: l,
-    subtitle: h,
+    subtitle: m,
     editable: n = !0,
     draggable: o = !1,
     withImage: f = !1,
-    deletable: I = !0,
-    addable: p = !0,
-    itemsType: _,
-    itemsPlaceholder: x = "",
+    deletable: N = !0,
+    addable: _ = !0,
+    itemsType: h,
+    itemsPlaceholder: p = "",
     itemsOptions: d,
-    hasRangeSelector: w = !1,
-    rangeSelectorOptions: E,
+    hasRangeSelector: C = !1,
+    rangeSelectorOptions: D,
     modalOptions: y,
     addableOptions: L = {},
     limit: B,
-    autoScrollInterval: S
-  } = r, [M, u] = g.useState(null), [D, K] = g.useState({
+    autoScrollInterval: T
+  } = r, [x, k] = g.useState(null), [V, K] = g.useState({
     top: 0,
     left: 0
-  }), [b, T] = g.useState(null), $ = g.useRef(null), [U, O] = g.useState(!1), H = $t(
+  }), [b, I] = g.useState(null), P = g.useRef(null), [U, q] = g.useState(!1), M = $t(
     It(Bt, {
       activationConstraint: {
         distance: 5
@@ -490,41 +490,41 @@ const He = (r) => {
     })
   );
   g.useEffect(() => {
-    const m = () => {
-      u(null), O(!1);
+    const u = () => {
+      k(null), q(!1);
     };
-    return document.body.addEventListener("click", m), u(null), O(!1), () => {
-      u(null), O(!1), document.body.removeEventListener("click", m);
+    return document.body.addEventListener("click", u), k(null), q(!1), () => {
+      k(null), q(!1), document.body.removeEventListener("click", u);
     };
   }, []), g.useEffect(() => {
-    if (M) {
-      const m = [...s].map((k) => k.id === M.id ? M : k);
-      i(m);
+    if (x) {
+      const u = [...s].map(($) => $.id === x.id ? x : $);
+      i(u);
     }
-  }, [M]), g.useEffect(() => {
-    if ($.current && b) {
-      const m = $.current.getBoundingClientRect().height, k = window.innerHeight;
-      let P = b.top;
-      P + m > k + window.scrollY - 200 && (P = k + window.scrollY - m - 200), P < 0 && (P = 10), K({
-        top: P,
+  }, [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
       });
     }
-  }, [$.current, b]);
-  const Z = (m, k) => {
-    m.stopPropagation();
-    const P = m.target.getBoundingClientRect();
-    T({
-      top: P.top + window.scrollY,
-      left: P.left - 30
-    }), u(k), O(!0);
+  }, [P.current, b]);
+  const Z = (u, $) => {
+    u.stopPropagation();
+    const A = u.target.getBoundingClientRect();
+    I({
+      top: A.top + window.scrollY,
+      left: A.left - 30
+    }), k($), q(!0);
   };
-  function ct(m) {
+  function ct(u) {
     if (f)
-      return m ? /* @__PURE__ */ t.jsx(
+      return u ? /* @__PURE__ */ t.jsx(
         "img",
         {
-          src: `https://imagedelivery.net/${m[0]}/w=1000`,
+          src: `https://imagedelivery.net/${u[0]}/w=1000`,
           alt: "image",
           width: 16,
           height: 16
@@ -539,18 +539,18 @@ const He = (r) => {
         }
       );
   }
-  const j = (m) => {
-    const { active: k, over: P } = m;
-    if (P && k.id !== P.id) {
-      const R = s.findIndex((A) => A.id === k.id), Y = s.findIndex((A) => A.id === P.id);
+  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 A = [...s], [lt] = A.splice(R, 1);
-        A.splice(Y, 0, lt), i(A);
+        const O = [...s], [lt] = O.splice(R, 1);
+        O.splice(Y, 0, lt), i(O);
       }
     }
-  }, q = (m, k) => {
+  }, E = (u, $) => {
     var R, Y;
-    const P = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    const A = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       o && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
         v,
         {
@@ -560,65 +560,65 @@ const He = (r) => {
           height: 20
         }
       ) }),
-      _ === "select" && d && /* @__PURE__ */ t.jsx(
+      h === "select" && d && /* @__PURE__ */ t.jsx(
         et,
         {
-          onChange: (A) => {
-            const lt = [...s], ut = d.find((ft) => ft.name === A);
+          onChange: (O) => {
+            const lt = [...s], ut = d.find((ft) => ft.name === O);
             if (!ut) return;
-            const rt = lt.map((ft) => ft.id === m.id ? {
+            const rt = lt.map((ft) => ft.id === u.id ? {
               ...ut,
-              name: A
+              name: O
             } : ft);
-            u({
-              ...m,
-              name: A
+            k({
+              ...u,
+              name: O
             }), i([...rt]);
           },
-          value: m.name,
-          options: d.filter((A) => !s.find((lt) => lt.name === A.name)).map((A) => A.name),
-          leftAddon: ct(m.images)
+          value: u.name,
+          options: d.filter((O) => !s.find((lt) => lt.name === O.name)).map((O) => O.name),
+          leftAddon: ct(u.images)
         }
       ),
-      _ === "input" && /* @__PURE__ */ t.jsx(
+      h === "input" && /* @__PURE__ */ t.jsx(
         X,
         {
-          onChange: (A) => {
-            const ut = [...s].map((rt) => rt.id === m.id ? {
-              ...m,
-              name: A
+          onChange: (O) => {
+            const ut = [...s].map((rt) => rt.id === u.id ? {
+              ...u,
+              name: O
             } : rt);
             i([...ut]);
           },
-          value: m.name,
-          placeholder: x
+          value: u.name,
+          placeholder: p
         }
       ),
-      _ === "image" && /* @__PURE__ */ t.jsx(
+      h === "image" && /* @__PURE__ */ t.jsx(
         gt,
         {
-          onChange: (A) => {
-            const ut = [...s].map((rt) => rt.id === m.id ? {
-              ...m,
-              images: A
+          onChange: (O) => {
+            const ut = [...s].map((rt) => rt.id === u.id ? {
+              ...u,
+              images: O
             } : rt);
             i([...ut]);
           },
-          activeImage: (R = s.find((A) => A.id === m.id)) != null && R.images ? (Y = s.find((A) => A.id === m.id)) == null ? void 0 : Y.images[0] : void 0
+          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
         }
       ),
-      /* @__PURE__ */ t.jsxs("div", { className: z.buttons, children: [
-        n && /* @__PURE__ */ t.jsx("div", { className: z.deleteButton, children: /* @__PURE__ */ t.jsx(
+      /* @__PURE__ */ t.jsxs("div", { className: H.buttons, children: [
+        n && /* @__PURE__ */ t.jsx("div", { className: H.deleteButton, children: /* @__PURE__ */ t.jsx(
           v,
           {
             name: "Sliders",
             hoverable: !0,
             width: 20,
             height: 20,
-            onClick: (A) => Z(A, m)
+            onClick: (O) => Z(O, u)
           }
         ) }),
-        I && /* @__PURE__ */ t.jsx("div", { className: z.deleteButton, children: /* @__PURE__ */ t.jsx(
+        N && /* @__PURE__ */ t.jsx("div", { className: H.deleteButton, children: /* @__PURE__ */ t.jsx(
           v,
           {
             name: "Trash",
@@ -626,7 +626,7 @@ const He = (r) => {
             width: 20,
             height: 20,
             fill: "#C12A2A",
-            onClick: () => i(s.filter((A) => A.id !== m.id))
+            onClick: () => i(s.filter((O) => O.id !== u.id))
           }
         ) })
       ] })
@@ -634,61 +634,61 @@ const He = (r) => {
     return o ? /* @__PURE__ */ t.jsx(
       Me,
       {
-        product: m,
-        index: k,
-        children: P
+        product: u,
+        index: $,
+        children: A
       },
-      m.id
+      u.id
     ) : /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: z.product,
-        children: P
+        className: H.product,
+        children: A
       },
-      m.id
+      u.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: H.productsBlock, children: [
+    (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,
         {
           current: c,
-          onChange: (m) => e == null ? void 0 : e(m)
+          onChange: (u) => e == null ? void 0 : e(u)
         }
       )
     ] }),
-    M && n && y && U && /* @__PURE__ */ t.jsx(
+    x && n && y && U && /* @__PURE__ */ t.jsx(
       Ee,
       {
-        ref: $,
-        activeItem: M,
-        setActiveItem: u,
-        popupPosition: D,
+        ref: P,
+        activeItem: x,
+        setActiveItem: k,
+        popupPosition: V,
         modalOptions: y,
-        setIsOpenModal: O
+        setIsOpenModal: q
       }
     ),
-    w && E && /* @__PURE__ */ t.jsx(At, { ...E }),
-    /* @__PURE__ */ t.jsxs("div", { className: z.products, children: [
-      h && /* @__PURE__ */ t.jsx("h5", { className: z.subtitle, children: h }),
+    C && D && /* @__PURE__ */ t.jsx(At, { ...D }),
+    /* @__PURE__ */ t.jsxs("div", { className: H.products, children: [
+      m && /* @__PURE__ */ t.jsx("h5", { className: H.subtitle, children: m }),
       o ? /* @__PURE__ */ t.jsx(
         Nt,
         {
-          sensors: H,
+          sensors: M,
           onDragEnd: j,
           children: /* @__PURE__ */ t.jsx(
             wt,
             {
-              items: s.map((m) => m.id),
+              items: s.map((u) => u.id),
               strategy: Ct,
-              children: s.map((m, k) => q(m, k))
+              children: s.map((u, $) => E(u, $))
             }
           )
         }
-      ) : s.map((m, k) => q(m, k)),
-      p && /* @__PURE__ */ t.jsx(
+      ) : s.map((u, $) => E(u, $)),
+      _ && /* @__PURE__ */ t.jsx(
         "div",
         {
           style: {
@@ -700,39 +700,39 @@ const He = (r) => {
             at,
             {
               withoutHover: !0,
-              className: V(z.button, {
-                [z.disabled]: !!(B && B <= s.length || s.length === (d == null ? void 0 : d.length))
+              className: F(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 m = [...s];
-                let k = null;
+                const u = [...s];
+                let $ = null;
                 if (d) {
-                  for (let P = 0; P < d.length; P++)
-                    if (!s.find((R) => R.id === d[P].id)) {
-                      k = d[P];
+                  for (let A = 0; A < d.length; A++)
+                    if (!s.find((R) => R.id === d[A].id)) {
+                      $ = d[A];
                       break;
                     }
                 }
-                _ === "select" && d ? m.push({
-                  name: k ? k.name : d[0].name,
-                  id: (k == null ? void 0 : k.id) || d[0].id,
+                h === "select" && d ? u.push({
+                  name: $ ? $.name : d[0].name,
+                  id: ($ == null ? void 0 : $.id) || d[0].id,
                   ...L
-                }) : _ === "input" ? m.push({
+                }) : h === "input" ? u.push({
                   name: "",
                   id: mt(),
                   ...L
-                }) : m.push({
+                }) : u.push({
                   name: `Image ${s.length + 1}`,
                   id: mt(),
                   ...L
-                }), i(m);
+                }), i(u);
               },
               style: {
                 width: "fit-content"
               },
-              children: /* @__PURE__ */ t.jsxs("div", { className: z.addButton, children: [
+              children: /* @__PURE__ */ t.jsxs("div", { className: H.addButton, children: [
                 /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
                 /* @__PURE__ */ t.jsx(
                   v,
@@ -749,13 +749,13 @@ const He = (r) => {
       )
     ] }),
     a !== void 0 && /* @__PURE__ */ t.jsx(jt, { items: a }),
-    S !== void 0 && /* @__PURE__ */ t.jsx(
+    T !== void 0 && /* @__PURE__ */ t.jsx(
       X,
       {
         label: "Auto scroll interval",
         type: "number",
-        value: String(S.scrollInterval),
-        onChange: (m) => S.setScrollInterval(Number(m)),
+        value: String(T.scrollInterval),
+        onChange: (u) => T.setScrollInterval(Number(u)),
         min: 0.1,
         max: 100,
         style: {
@@ -797,17 +797,17 @@ const He = (r) => {
     setItems: i,
     other: a,
     title: l,
-    subtitle: h,
+    subtitle: m,
     draggable: n = !1,
     withImage: o = !1,
     addable: f = !0,
-    itemsOptions: I,
-    hasRangeSelector: p = !1,
-    rangeSelectorOptions: _,
-    limit: x,
+    itemsOptions: N,
+    hasRangeSelector: _ = !1,
+    rangeSelectorOptions: h,
+    limit: p,
     autoScrollInterval: d
   } = r;
-  function w(y) {
+  function C(y) {
     if (o)
       return y ? /* @__PURE__ */ t.jsx(
         "img",
@@ -827,8 +827,8 @@ const He = (r) => {
         }
       );
   }
-  const E = (y) => {
-    const L = I.find((S) => S.id === y);
+  const D = (y) => {
+    const L = N.find((T) => T.id === y);
     if (!L) return;
     const B = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       n && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
@@ -843,15 +843,15 @@ const He = (r) => {
       /* @__PURE__ */ t.jsx(
         et,
         {
-          onChange: (S) => {
-            const M = [...s], u = I.find((b) => b.name === S);
-            if (!u) return;
-            const D = u.id, K = M.map((b) => b === y ? D : b);
+          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]);
           },
           value: L.name,
-          options: I.filter((S) => !s.find((M) => M === S.id)).map((S) => S.name),
-          leftAddon: w(L.images)
+          options: N.filter((T) => !s.find((x) => x === T.id)).map((T) => T.name),
+          leftAddon: C(L.images)
         }
       ),
       /* @__PURE__ */ t.jsx("div", { className: Q.buttons, children: /* @__PURE__ */ t.jsx("div", { className: Q.deleteButton, children: /* @__PURE__ */ t.jsx(
@@ -862,7 +862,7 @@ const He = (r) => {
           width: 20,
           height: 20,
           fill: "#C12A2A",
-          onClick: () => i(s.filter((S) => S !== y))
+          onClick: () => i(s.filter((T) => T !== y))
         }
       ) }) })
     ] });
@@ -886,10 +886,10 @@ const He = (r) => {
         }
       )
     ] }),
-    p && _ && /* @__PURE__ */ t.jsx(At, { ..._ }),
+    _ && h && /* @__PURE__ */ t.jsx(At, { ...h }),
     /* @__PURE__ */ t.jsxs("div", { className: Q.products, children: [
-      h && /* @__PURE__ */ t.jsx("h5", { className: Q.subtitle, children: h }),
-      s.map((y) => E(y)),
+      m && /* @__PURE__ */ t.jsx("h5", { className: Q.subtitle, children: m }),
+      s.map((y) => D(y)),
       f && /* @__PURE__ */ t.jsx(
         "div",
         {
@@ -903,22 +903,22 @@ const He = (r) => {
             at,
             {
               withoutHover: !0,
-              className: V(Q.button, {
-                [Q.disabled]: !!(x && x <= s.length || s.length === I.length)
+              className: F(Q.button, {
+                [Q.disabled]: !!(p && p <= s.length || s.length === N.length)
               }),
               size: "s",
-              disabled: !!(x && x <= s.length || s.length === I.length),
+              disabled: !!(p && p <= s.length || s.length === N.length),
               onClick: () => {
                 const y = [...s];
                 let L = null;
-                if (I) {
-                  for (let B = 0; B < I.length; B++)
-                    if (!s.find((S) => S === I[B].id)) {
-                      L = I[B];
+                if (N) {
+                  for (let B = 0; B < N.length; B++)
+                    if (!s.find((T) => T === N[B].id)) {
+                      L = N[B];
                       break;
                     }
                 }
-                y.push((L == null ? void 0 : L.id) || I[0].id), i(y);
+                y.push((L == null ? void 0 : L.id) || N[0].id), i(y);
               },
               style: {
                 width: "fit-content"
@@ -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", F = {
+}, 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 = {
   title: us,
   subtitle: ms,
   header: hs,
@@ -983,14 +983,14 @@ const He = (r) => {
 }, Os = g.forwardRef(
   (r, c) => {
     const { activeItem: e, setActiveItem: s, popupPosition: i, modalOptions: a, setIsOpenModal: l } = r;
-    function h(n, o) {
+    function m(n, o) {
       return n.length > o ? `${n.slice(0, o)}...` : n;
     }
     return /* @__PURE__ */ t.jsxs(
       "div",
       {
         ref: c,
-        className: F.modal,
+        className: z.modal,
         onClick: (n) => {
           n.stopPropagation();
         },
@@ -999,8 +999,8 @@ const He = (r) => {
           left: `${i.left}px`
         },
         children: [
-          /* @__PURE__ */ t.jsxs("div", { className: F.top, children: [
-            /* @__PURE__ */ t.jsx("h3", { className: F.title, children: h(e.name, 20) }),
+          /* @__PURE__ */ t.jsxs("div", { className: z.top, children: [
+            /* @__PURE__ */ t.jsx("h3", { className: z.title, children: m(e.name, 20) }),
             /* @__PURE__ */ t.jsx(
               v,
               {
@@ -1014,7 +1014,7 @@ const He = (r) => {
               }
             )
           ] }),
-          /* @__PURE__ */ t.jsx("div", { className: F.modalOptions, children: a.map((n) => {
+          /* @__PURE__ */ t.jsx("div", { className: z.modalOptions, children: a.map((n) => {
             if (n.type === "image")
               return /* @__PURE__ */ t.jsx(
                 gt,
@@ -1071,7 +1071,7 @@ const He = (r) => {
                 }
               );
             if (n.type === "inputSwitch")
-              return /* @__PURE__ */ t.jsxs("div", { className: F.link, children: [
+              return /* @__PURE__ */ t.jsxs("div", { className: z.link, children: [
                 /* @__PURE__ */ t.jsx(
                   X,
                   {
@@ -1126,18 +1126,18 @@ const He = (r) => {
   }
 );
 function qs(r) {
-  const { product: c, children: e } = r, { attributes: s, listeners: i, setNodeRef: a, transform: l, transition: h, isDragging: n } = St({
+  const { product: c, children: e } = r, { attributes: s, listeners: i, setNodeRef: a, transform: l, transition: m, isDragging: n } = St({
     id: c.id
   }), o = {
     transform: Tt.Transform.toString(l),
-    transition: h
+    transition: m
   };
   return /* @__PURE__ */ t.jsx(
     "div",
     {
       ref: a,
       style: o,
-      className: `${F.product} ${n ? F.dragging : ""}`,
+      className: `${z.product} ${n ? z.dragging : ""}`,
       ...s,
       ...i,
       children: e
@@ -1152,23 +1152,23 @@ const aa = (r) => {
     setItems: i,
     other: a,
     title: l,
-    subtitle: h,
+    subtitle: m,
     editable: n = !0,
     draggable: o = !1,
     withImage: f = !1,
-    deletable: I = !0,
-    addable: p = !0,
-    itemsType: _,
-    itemsPlaceholder: x = "",
+    deletable: N = !0,
+    addable: _ = !0,
+    itemsType: h,
+    itemsPlaceholder: p = "",
     itemsOptions: d,
-    hasRangeSelector: w = !1,
-    rangeSelectorOptions: E,
+    hasRangeSelector: C = !1,
+    rangeSelectorOptions: D,
     modalOptions: y,
     addableOptions: L = {}
-  } = r, [B, S] = g.useState(null), [M, u] = g.useState({
+  } = r, [B, T] = g.useState(null), [x, k] = g.useState({
     top: 0,
     left: 0
-  }), [D, K] = g.useState(null), b = g.useRef(null), [T, $] = g.useState(!1), U = $t(
+  }), [V, K] = g.useState(null), b = g.useRef(null), [I, P] = g.useState(!1), U = $t(
     It(Bt, {
       activationConstraint: {
         distance: 5
@@ -1177,35 +1177,35 @@ const aa = (r) => {
   );
   g.useEffect(() => {
     const j = () => {
-      S(null), $(!1);
+      T(null), P(!1);
     };
-    return document.body.addEventListener("click", j), S(null), $(!1), () => {
-      S(null), $(!1), document.body.removeEventListener("click", j);
+    return document.body.addEventListener("click", j), T(null), P(!1), () => {
+      T(null), P(!1), document.body.removeEventListener("click", j);
     };
   }, []), g.useEffect(() => {
     if (B) {
-      const j = [...s].map((q) => q.id === B.id ? B : q);
+      const j = [...s].map((E) => E.id === B.id ? B : E);
       i(j);
     }
   }, [B]), g.useEffect(() => {
-    if (b.current && D) {
-      const j = b.current.getBoundingClientRect().height, q = window.innerHeight;
-      let m = D.top;
-      m + j > q + window.scrollY - 200 && (m = q + window.scrollY - j - 200), m < 0 && (m = 10), u({
-        top: m,
-        left: D.left
+    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({
+        top: u,
+        left: V.left
       });
     }
-  }, [b.current, D]);
-  const O = (j, q) => {
+  }, [b.current, V]);
+  const q = (j, E) => {
     j.stopPropagation();
-    const m = j.target.getBoundingClientRect();
+    const u = j.target.getBoundingClientRect();
     K({
-      top: m.top + window.scrollY,
-      left: m.left - 30
-    }), S(q), $(!0);
+      top: u.top + window.scrollY,
+      left: u.left - 30
+    }), T(E), P(!0);
   };
-  function H(j) {
+  function M(j) {
     if (f)
       return j ? /* @__PURE__ */ t.jsx(
         "img",
@@ -1226,17 +1226,17 @@ const aa = (r) => {
       );
   }
   const Z = (j) => {
-    const { active: q, over: m } = j;
-    if (m && q.id !== m.id) {
-      const k = s.findIndex((R) => R.id === q.id), P = s.findIndex((R) => R.id === m.id);
-      if (k !== -1 && P !== -1) {
-        const R = [...s], [Y] = R.splice(k, 1);
-        R.splice(P, 0, Y), i(R);
+    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);
       }
     }
   }, ct = (j) => {
-    var m;
-    const q = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    var u;
+    const E = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       o && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
         v,
         {
@@ -1246,63 +1246,63 @@ const aa = (r) => {
           height: 20
         }
       ) }),
-      _ === "select" && d && /* @__PURE__ */ t.jsx(
+      h === "select" && d && /* @__PURE__ */ t.jsx(
         et,
         {
-          onChange: (k) => {
+          onChange: ($) => {
             const R = [...s].map((Y) => Y.id === j.id ? {
               ...j,
-              name: k
+              name: $
             } : Y);
-            S({
+            T({
               ...j,
-              name: k
+              name: $
             }), i([...R]);
           },
           value: j.name,
-          options: d.filter((k) => !s.find((P) => P.name === k)),
-          leftAddon: H(j.images)
+          options: d.filter(($) => !s.find((A) => A.name === $)),
+          leftAddon: M(j.images)
         }
       ),
-      _ === "input" && /* @__PURE__ */ t.jsx(
+      h === "input" && /* @__PURE__ */ t.jsx(
         X,
         {
-          onChange: (k) => {
+          onChange: ($) => {
             const R = [...s].map((Y) => Y.id === j.id ? {
               ...j,
-              name: k
+              name: $
             } : Y);
             i([...R]);
           },
           value: j.name,
-          placeholder: x
+          placeholder: p
         }
       ),
-      _ === "image" && /* @__PURE__ */ t.jsx(
+      h === "image" && /* @__PURE__ */ t.jsx(
         gt,
         {
-          onChange: (k) => {
+          onChange: ($) => {
             const R = [...s].map((Y) => Y.id === j.id ? {
               ...j,
-              images: k
+              images: $
             } : Y);
             i([...R]);
           },
-          activeImage: (m = s.find((k) => k.id === j.id)) == null ? void 0 : m.images[0]
+          activeImage: (u = s.find(($) => $.id === j.id)) == null ? void 0 : u.images[0]
         }
       ),
-      /* @__PURE__ */ t.jsxs("div", { className: F.buttons, children: [
-        n && /* @__PURE__ */ t.jsx("div", { className: F.deleteButton, children: /* @__PURE__ */ t.jsx(
+      /* @__PURE__ */ t.jsxs("div", { className: z.buttons, children: [
+        n && /* @__PURE__ */ t.jsx("div", { className: z.deleteButton, children: /* @__PURE__ */ t.jsx(
           v,
           {
             name: "Sliders",
             hoverable: !0,
             width: 20,
             height: 20,
-            onClick: (k) => O(k, j)
+            onClick: ($) => q($, j)
           }
         ) }),
-        I && /* @__PURE__ */ t.jsx("div", { className: F.deleteButton, children: /* @__PURE__ */ t.jsx(
+        N && /* @__PURE__ */ t.jsx("div", { className: z.deleteButton, children: /* @__PURE__ */ t.jsx(
           v,
           {
             name: "Trash",
@@ -1310,7 +1310,7 @@ const aa = (r) => {
             width: 20,
             height: 20,
             fill: "#C12A2A",
-            onClick: () => i(s.filter((k) => k.id !== j.id))
+            onClick: () => i(s.filter(($) => $.id !== j.id))
           }
         ) })
       ] })
@@ -1319,21 +1319,21 @@ const aa = (r) => {
       qs,
       {
         product: j,
-        children: q
+        children: E
       },
       j.id
     ) : /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: F.product,
-        children: q
+        className: z.product,
+        children: E
       },
       j.id
     );
   };
-  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 }),
+  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 }),
       c !== void 0 && /* @__PURE__ */ t.jsx(
         tt,
         {
@@ -1342,20 +1342,20 @@ const aa = (r) => {
         }
       )
     ] }),
-    B && n && y && T && /* @__PURE__ */ t.jsx(
+    B && n && y && I && /* @__PURE__ */ t.jsx(
       Os,
       {
         ref: b,
         activeItem: B,
-        setActiveItem: S,
-        popupPosition: M,
+        setActiveItem: T,
+        popupPosition: x,
         modalOptions: y,
-        setIsOpenModal: $
+        setIsOpenModal: P
       }
     ),
-    w && E && /* @__PURE__ */ t.jsx(At, { ...E }),
-    /* @__PURE__ */ t.jsxs("div", { className: F.products, children: [
-      h && /* @__PURE__ */ t.jsx("h5", { className: F.subtitle, children: h }),
+    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 }),
       o ? /* @__PURE__ */ t.jsx(
         Nt,
         {
@@ -1371,7 +1371,7 @@ const aa = (r) => {
           )
         }
       ) : s.map((j) => ct(j)),
-      p && /* @__PURE__ */ t.jsx(
+      _ && /* @__PURE__ */ t.jsx(
         "div",
         {
           style: {
@@ -1383,25 +1383,25 @@ const aa = (r) => {
             at,
             {
               withoutHover: !0,
-              className: F.button,
+              className: z.button,
               size: "s",
               onClick: () => {
                 const j = [...s];
-                let q = null;
+                let E = null;
                 if (d) {
-                  for (let m = 0; m < d.length; m++)
-                    if (!s.find((k) => k.name === d[m])) {
-                      q = d[m];
+                  for (let u = 0; u < d.length; u++)
+                    if (!s.find(($) => $.name === d[u])) {
+                      E = d[u];
                       break;
                     }
                 }
-                _ === "select" && d ? j.push({
-                  name: q || d[0],
+                h === "select" && d ? j.push({
+                  name: E || d[0],
                   id: mt(),
                   ...L,
                   maxSymbols: 100
                   // пример значения
-                }) : _ === "input" ? j.push({
+                }) : h === "input" ? j.push({
                   name: "",
                   id: mt(),
                   ...L,
@@ -1416,7 +1416,7 @@ const aa = (r) => {
               style: {
                 width: "fit-content"
               },
-              children: /* @__PURE__ */ t.jsxs("div", { className: F.addButton, children: [
+              children: /* @__PURE__ */ t.jsxs("div", { className: z.addButton, children: [
                 /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
                 /* @__PURE__ */ t.jsx(
                   v,
@@ -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), [h, n] = g.useState(e.destination), [o, f] = g.useState(e.page), [I, p] = g.useState(e.link || ""), [_, x] = g.useState(e.text || ""), [d, w] = g.useState(e.openInNewTab), { pages: E } = Ht();
+  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();
   return g.useEffect(() => {
     s({
       ...e,
       ...{
-        text: _,
-        link: I,
-        destination: h,
+        text: h,
+        link: N,
+        destination: m,
         typesText: a,
         page: o,
         openInNewTab: d
       }
     });
-  }, [a, h, I, _, o, d]), /* @__PURE__ */ t.jsxs(
+  }, [a, m, N, h, o, d]), /* @__PURE__ */ t.jsxs(
     "div",
     {
       className: dt.modal,
@@ -1502,23 +1502,23 @@ const aa = (r) => {
             {
               label: "Destination",
               onChange: (y) => n(y),
-              options: ["Go to Page", "Open Link"].filter((y) => y !== h),
-              value: h
+              options: ["Go to Page", "Open Link"].filter((y) => y !== m),
+              value: m
             }
           ),
-          h === "Go to Page" ? /* @__PURE__ */ t.jsx(
+          m === "Go to Page" ? /* @__PURE__ */ t.jsx(
             et,
             {
               label: "Go to",
               onChange: (y) => f(y),
-              options: E ? Object.values(E).filter((y) => y.name !== o).map((y) => y.name) : [],
+              options: D ? Object.values(D).filter((y) => y.name !== o).map((y) => y.name) : [],
               value: o
             }
           ) : /* @__PURE__ */ t.jsx(
             X,
             {
-              onChange: (y) => p(y),
-              value: I,
+              onChange: (y) => _(y),
+              value: N,
               placeholder: "https://",
               label: "Link"
             }
@@ -1528,14 +1528,14 @@ const aa = (r) => {
             {
               current: e.openInNewTab,
               label: "Open in new tab",
-              onChange: (y) => w(y)
+              onChange: (y) => C(y)
             }
           ),
           /* @__PURE__ */ t.jsx(
             Ot,
             {
-              onChange: (y) => x(y),
-              value: _,
+              onChange: (y) => p(y),
+              value: h,
               label: "Text",
               maxLength: 150
             }
@@ -1575,43 +1575,43 @@ const aa = (r) => {
   addButton: In,
   deleteButton: Nn
 }, wn = (r) => {
-  const { buttons: c, setButtons: e, deletable: s = !0, addable: i = !0 } = r, [a, l] = g.useState(null), [h, n] = g.useState({
+  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), I = g.useRef(null);
+  }), [o, f] = g.useState(null), N = g.useRef(null);
   g.useEffect(() => {
-    const _ = () => {
+    const h = () => {
       l(null);
     };
-    return document.body.addEventListener("click", _), l(null), () => {
-      l(null), document.body.removeEventListener("click", _);
+    return document.body.addEventListener("click", h), l(null), () => {
+      l(null), document.body.removeEventListener("click", h);
     };
   }, []), g.useEffect(() => {
     if (a) {
-      const _ = [...c].map((x) => x.id === a.id ? a : x);
-      e(_);
+      const h = [...c].map((p) => p.id === a.id ? a : p);
+      e(h);
     }
   }, [a]), g.useEffect(() => {
-    if (I.current && o) {
-      const _ = I.current.getBoundingClientRect().height, x = window.innerHeight;
+    if (N.current && o) {
+      const h = N.current.getBoundingClientRect().height, p = window.innerHeight;
       let d = o.top;
-      d + _ > x + window.scrollY - 200 && (d = x + window.scrollY - _ - 200), d < 0 && (d = 10), n({
+      d + h > p + window.scrollY - 200 && (d = p + window.scrollY - h - 200), d < 0 && (d = 10), n({
         top: d,
         left: o.left
       });
     }
-  }, [I.current, o]);
-  const p = (_, x) => {
-    _.stopPropagation();
-    const d = _.target.getBoundingClientRect();
+  }, [N.current, o]);
+  const _ = (h, p) => {
+    h.stopPropagation();
+    const d = h.target.getBoundingClientRect();
     f({
       top: d.top + window.scrollY,
       left: d.left - 30
-    }), l(x);
+    }), l(p);
   };
   return /* @__PURE__ */ t.jsxs("div", { className: st.products, children: [
     /* @__PURE__ */ t.jsx("h5", { className: st.subtitle, children: "Button Type" }),
-    c.map((_) => /* @__PURE__ */ t.jsxs(
+    c.map((h) => /* @__PURE__ */ t.jsxs(
       "div",
       {
         className: st.product,
@@ -1619,14 +1619,14 @@ const aa = (r) => {
           /* @__PURE__ */ t.jsx(
             et,
             {
-              onChange: (x) => {
-                const w = [...c].map((E) => E.id === _.id ? {
-                  ..._,
-                  type: x
-                } : E);
-                e(w);
+              onChange: (p) => {
+                const C = [...c].map((D) => D.id === h.id ? {
+                  ...h,
+                  type: p
+                } : D);
+                e(C);
               },
-              value: _.type,
+              value: h.type,
               options: ["Primary", "Secondary", "Tertiary"]
             }
           ),
@@ -1638,8 +1638,8 @@ const aa = (r) => {
                 hoverable: !0,
                 width: 20,
                 height: 20,
-                onClick: (x) => {
-                  p(x, _);
+                onClick: (p) => {
+                  _(p, h);
                 }
               }
             ) }),
@@ -1649,8 +1649,8 @@ const aa = (r) => {
                 name: "Trash",
                 hoverable: !0,
                 onClick: () => {
-                  const x = c.filter((d) => d.id !== _.id);
-                  e(x);
+                  const p = c.filter((d) => d.id !== h.id);
+                  e(p);
                 },
                 width: 20,
                 height: 20,
@@ -1660,15 +1660,15 @@ const aa = (r) => {
           ] })
         ]
       },
-      _.id
+      h.id
     )),
     a && /* @__PURE__ */ t.jsx(
       nn,
       {
-        ref: I,
+        ref: N,
         activeButton: a,
         setActiveButton: l,
-        popupPosition: h
+        popupPosition: m
       }
     ),
     i && /* @__PURE__ */ t.jsx(
@@ -1686,8 +1686,8 @@ const aa = (r) => {
             className: st.button,
             size: "s",
             onClick: () => {
-              const _ = [...c];
-              _.push({
+              const h = [...c];
+              h.push({
                 type: "Primary",
                 id: mt(),
                 typesText: [],
@@ -1695,7 +1695,7 @@ const aa = (r) => {
                 text: "Button Name",
                 page: "home",
                 openInNewTab: !0
-              }), e(_);
+              }), e(h);
             },
             style: {
               width: "fit-content"
@@ -1753,12 +1753,12 @@ 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, [h, n] = g.useState(!1), o = Array.from({ length: (s - e) / i + 1 }), f = (a - e) / (s - e) * 100, I = () => {
+  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 = () => {
     a < s && l(a + i);
-  }, p = () => {
+  }, _ = () => {
     a > e && l(a - i);
-  }, _ = (x) => {
-    const d = e + x * i;
+  }, h = (p) => {
+    const d = e + p * i;
     l(d);
   };
   return /* @__PURE__ */ t.jsxs("div", { className: G.wrapper, children: [
@@ -1773,16 +1773,16 @@ const aa = (r) => {
             style: { width: `${f}%` }
           }
         ),
-        /* @__PURE__ */ t.jsx("div", { className: G.dots, children: o.map((x, d) => {
-          const w = d <= (a - e) / i;
+        /* @__PURE__ */ t.jsx("div", { className: G.dots, children: o.map((p, d) => {
+          const C = d <= (a - e) / i;
           return /* @__PURE__ */ t.jsx(
             "button",
             {
-              onClick: () => _(d),
-              className: V(G.dot, {
-                [G.active]: w,
-                [G.inactive]: !w,
-                [G.dragging]: h
+              onClick: () => h(d),
+              className: F(G.dot, {
+                [G.active]: C,
+                [G.inactive]: !C,
+                [G.dragging]: m
               }),
               "aria-label": `Set value to ${e + d * i}`
             },
@@ -1797,7 +1797,7 @@ const aa = (r) => {
             max: s,
             step: i,
             value: a,
-            onChange: (x) => l(Number(x.target.value)),
+            onChange: (p) => l(Number(p.target.value)),
             onMouseDown: () => n(!0),
             onMouseUp: () => n(!1),
             onTouchStart: () => n(!0),
@@ -1814,8 +1814,8 @@ const aa = (r) => {
             min: e,
             max: s,
             paddingless: !0,
-            onChange: (x) => {
-              const d = Number(x);
+            onChange: (p) => {
+              const d = Number(p);
               d > s ? l(s) : d < e ? l(e) : l(d);
             },
             value: String(a)
@@ -1825,7 +1825,7 @@ const aa = (r) => {
           /* @__PURE__ */ t.jsx(
             "button",
             {
-              onClick: I,
+              onClick: N,
               disabled: a >= s,
               className: G.button,
               "aria-label": "Increment count",
@@ -1842,7 +1842,7 @@ const aa = (r) => {
           /* @__PURE__ */ t.jsx(
             "button",
             {
-              onClick: p,
+              onClick: _,
               disabled: a <= e,
               className: G.button,
               "aria-label": "Decrement count",
@@ -1886,7 +1886,7 @@ const aa = (r) => {
 }, di = (r) => {
   const { activeItem: c, setActiveItem: e, popupPosition: s, setIsOpenModal: i, itemsOptions: a } = r, l = a.find((n) => n.id === c.listingId);
   if (!l) return null;
-  function h(n, o) {
+  function m(n, o) {
     return n.length > o ? `${n.slice(0, o)}...` : n;
   }
   return /* @__PURE__ */ t.jsxs(
@@ -1902,7 +1902,7 @@ const aa = (r) => {
       },
       children: [
         /* @__PURE__ */ t.jsxs("div", { className: W.top, children: [
-          /* @__PURE__ */ t.jsx("h3", { children: h(l.productData.name, 20) }),
+          /* @__PURE__ */ t.jsx("h3", { children: m(l.productData.name, 20) }),
           /* @__PURE__ */ t.jsx(
             v,
             {
@@ -1935,11 +1935,11 @@ const aa = (r) => {
   );
 };
 function ui(r) {
-  const { product: c, children: e } = r, { attributes: s, listeners: i, setNodeRef: a, transform: l, transition: h, isDragging: n } = St({
+  const { product: c, children: e } = r, { attributes: s, listeners: i, setNodeRef: a, transform: l, transition: m, isDragging: n } = St({
     id: String(c.listingId)
   }), o = {
     transform: Tt.Transform.toString(l),
-    transition: h
+    transition: m
   };
   return /* @__PURE__ */ t.jsx(
     "div",
@@ -1961,20 +1961,20 @@ const la = (r) => {
     setItems: i,
     other: a,
     title: l,
-    subtitle: h,
+    subtitle: m,
     editable: n = !0,
     draggable: o = !1,
     withImage: f = !1,
-    deletable: I = !0,
-    addable: p = !0,
-    itemsType: _,
-    itemsOptions: x
-  } = r, [d, w] = g.useState(
+    deletable: N = !0,
+    addable: _ = !0,
+    itemsType: h,
+    itemsOptions: p
+  } = r, [d, C] = g.useState(
     null
-  ), [E, y] = g.useState({
+  ), [D, y] = g.useState({
     top: 0,
     left: 0
-  }), [L, B] = g.useState(!1), S = $t(
+  }), [L, B] = g.useState(!1), T = $t(
     It(Bt, {
       activationConstraint: {
         distance: 5
@@ -1983,27 +1983,27 @@ const la = (r) => {
   );
   g.useEffect(() => {
     const b = () => {
-      w(null), B(!1);
+      C(null), B(!1);
     };
-    return document.body.addEventListener("click", b), w(null), B(!1), () => {
-      w(null), B(!1), document.body.removeEventListener("click", b);
+    return document.body.addEventListener("click", b), C(null), B(!1), () => {
+      C(null), B(!1), document.body.removeEventListener("click", b);
     };
   }, []), g.useEffect(() => {
     if (d) {
-      const b = [...s].map((T) => T.listingId === d.listingId ? d : T);
+      const b = [...s].map((I) => I.listingId === d.listingId ? d : I);
       i(b);
     }
   }, [d]);
-  const M = (b, T) => {
+  const x = (b, I) => {
     b.stopPropagation();
-    const $ = b.target.getBoundingClientRect(), U = 100, O = window.innerHeight;
-    let H = $.top + window.scrollY;
-    H + U > O && (H = O - U - 20), B(!0), y({
-      top: H - 80,
-      left: $.left - 30
-    }), w(T);
+    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({
+      top: M - 80,
+      left: P.left - 30
+    }), C(I);
   };
-  function u(b) {
+  function k(b) {
     if (f)
       return b ? /* @__PURE__ */ t.jsx(
         "img",
@@ -2023,18 +2023,18 @@ const la = (r) => {
         }
       );
   }
-  const D = (b) => {
-    const { active: T, over: $ } = b;
-    if ($ && T.id !== $.id) {
-      const U = s.findIndex((H) => String(H.listingId) === T.id), O = s.findIndex((H) => String(H.listingId) === $.id);
-      if (U !== -1 && O !== -1) {
-        const H = [...s], [Z] = H.splice(U, 1);
-        H.splice(O, 0, Z), i(H);
+  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);
       }
     }
-  }, K = (b, T) => {
-    const $ = x.find((O) => b.listingId === O.id);
-    if (!$) return null;
+  }, K = (b, I) => {
+    const P = p.find((q) => b.listingId === q.id);
+    if (!P) return null;
     const U = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       o && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
         v,
@@ -2045,27 +2045,27 @@ const la = (r) => {
           height: 20
         }
       ) }),
-      _ === "select" && /* @__PURE__ */ t.jsx(
+      h === "select" && /* @__PURE__ */ t.jsx(
         et,
         {
-          onChange: (O) => {
-            const H = [...s], Z = x.find((q) => q.productData.name === O);
+          onChange: (q) => {
+            const M = [...s], Z = p.find((E) => E.productData.name === q);
             if (!Z) return;
             const ct = {
               listingId: Z.id,
               image: Z.productData.images.length > 0 ? Z.productData.images[0].cfId : ""
-            }, j = H.map((q) => q.listingId === b.listingId ? ct : q);
-            w(ct), i([...j]);
+            }, j = M.map((E) => E.listingId === b.listingId ? ct : E);
+            C(ct), i([...j]);
           },
-          value: $.productData.name,
+          value: P.productData.name,
           options: [
-            ...x.filter((O) => !s.find((H) => H.listingId === O.id)).map((O) => O.productData.name)
+            ...p.filter((q) => !s.find((M) => M.listingId === q.id)).map((q) => q.productData.name)
           ],
-          leftAddon: u(
-            b.image || $.productData.images.length > 0 && $.productData.images[0].cfId || ""
+          leftAddon: k(
+            b.image || P.productData.images.length > 0 && P.productData.images[0].cfId || ""
           )
         },
-        T
+        I
       ),
       /* @__PURE__ */ t.jsxs("div", { className: W.buttons, children: [
         n && /* @__PURE__ */ t.jsx("div", { className: W.deleteButton, children: /* @__PURE__ */ t.jsx(
@@ -2075,10 +2075,10 @@ const la = (r) => {
             hoverable: !0,
             width: 20,
             height: 20,
-            onClick: (O) => M(O, b)
+            onClick: (q) => x(q, b)
           }
         ) }),
-        I && /* @__PURE__ */ t.jsx("div", { className: W.deleteButton, children: /* @__PURE__ */ t.jsx(
+        N && /* @__PURE__ */ t.jsx("div", { className: W.deleteButton, children: /* @__PURE__ */ t.jsx(
           v,
           {
             name: "Trash",
@@ -2086,7 +2086,7 @@ const la = (r) => {
             width: 20,
             height: 20,
             fill: "#C12A2A",
-            onClick: () => i(s.filter((O) => O !== b))
+            onClick: () => i(s.filter((q) => q !== b))
           }
         ) })
       ] })
@@ -2122,30 +2122,30 @@ const la = (r) => {
       di,
       {
         activeItem: d,
-        setActiveItem: w,
+        setActiveItem: C,
         setIsOpenModal: B,
-        popupPosition: E,
-        itemsOptions: x
+        popupPosition: D,
+        itemsOptions: p
       }
     ),
     /* @__PURE__ */ t.jsxs("div", { className: W.products, children: [
-      h && /* @__PURE__ */ t.jsx("h5", { className: W.subtitle, children: h }),
+      m && /* @__PURE__ */ t.jsx("h5", { className: W.subtitle, children: m }),
       o ? /* @__PURE__ */ t.jsx(
         Nt,
         {
-          sensors: S,
-          onDragEnd: D,
+          sensors: T,
+          onDragEnd: V,
           children: /* @__PURE__ */ t.jsx(
             wt,
             {
               items: s.map((b) => String(b.listingId)),
               strategy: Ct,
-              children: s.map((b, T) => K(b, T))
+              children: s.map((b, I) => K(b, I))
             }
           )
         }
-      ) : s.map((b, T) => K(b, T)),
-      p && /* @__PURE__ */ t.jsx(
+      ) : s.map((b, I) => K(b, I)),
+      _ && /* @__PURE__ */ t.jsx(
         "div",
         {
           style: {
@@ -2161,17 +2161,17 @@ const la = (r) => {
               size: "s",
               onClick: () => {
                 const b = [...s];
-                for (let T = 0; T < x.length; T++)
-                  if (!s.find(($) => $.listingId === x[T].id)) {
+                for (let I = 0; I < p.length; I++)
+                  if (!s.find((P) => P.listingId === p[I].id)) {
                     b.push({
-                      listingId: x[T].id,
-                      image: x[T].productData.images.length > 0 ? x[T].productData.images[0].cfId : ""
+                      listingId: p[I].id,
+                      image: p[I].productData.images.length > 0 ? p[I].productData.images[0].cfId : ""
                     });
                     break;
                   }
                 i(b);
               },
-              disabled: s.length === x.length,
+              disabled: s.length === p.length,
               style: {
                 width: "fit-content"
               },
@@ -2193,7 +2193,7 @@ const la = (r) => {
     ] }),
     a !== void 0 && /* @__PURE__ */ t.jsx(jt, { 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", N = {
+}, 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 = {
   options: mi,
   price: hi,
   oldPrice: _i,
@@ -2220,97 +2220,96 @@ const la = (r) => {
 };
 var Mt = /* @__PURE__ */ ((r) => (r.ONE_TIME = "One-Time", r.RECURRING = "Subscribe & Save", r))(Mt || {});
 const ra = (r) => {
-  var S, M;
-  const { variants: c } = r, [e, s] = g.useState(c[0]), [i, a] = g.useState(e.chargeTypes[0]), l = bt(), [h, n] = g.useState(1), [o, f] = g.useState(!1), { reset: I, addProductToCart: p, getProducts: _, cart: x } = Pt(), [d, w] = g.useState(!1);
+  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);
   g.useEffect(() => {
-    w(!0);
-    const u = setTimeout(() => w(!1), 600);
-    return () => clearTimeout(u);
-  }, [h]);
-  async function E() {
-    await _(), await p({
+    d(!0);
+    const x = setTimeout(() => d(!1), 600);
+    return () => clearTimeout(x);
+  }, [m]);
+  async function C() {
+    await h(), await _({
       productId: r.id,
       productVariantId: e.id,
-      quantity: h
+      quantity: m
     });
   }
-  function y() {
-    I(), E(), l("/checkout");
+  function D() {
+    N(), C(), l("/checkout");
   }
-  console.log(x);
-  function L(u) {
-    if (u >= 864e5) {
-      const $ = Math.floor(u / 864e5);
-      return `${$} ${$ === 1 ? "day" : "days"}`;
-    } else if (u >= 36e5) {
-      const $ = Math.floor(u / 36e5);
-      return `${$} ${$ === 1 ? "hour" : "hours"}`;
-    } else if (u >= 6e4) {
-      const $ = Math.floor(u / 6e4);
-      return `${$} ${$ === 1 ? "minute" : "minutes"}`;
+  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"}`;
     } else {
-      const $ = Math.floor(u / 1e3);
-      return `${$} ${$ === 1 ? "second" : "seconds"}`;
+      const I = Math.floor(x / 1e3);
+      return `${I} ${I === 1 ? "second" : "seconds"}`;
     }
   }
-  function B(u, D) {
-    return u.length > D ? u.slice(0, D) + "..." : u;
+  function L(x, k) {
+    return x.length > k ? x.slice(0, k) + "..." : x;
   }
-  return /* @__PURE__ */ t.jsxs("div", { className: N.options, children: [
-    e.chargeTypes.length > 1 && /* @__PURE__ */ t.jsx("div", { className: N.chargeTypes, children: e.chargeTypes.map((u) => /* @__PURE__ */ t.jsx(
+  return /* @__PURE__ */ t.jsxs("div", { className: w.options, children: [
+    e.chargeTypes.length > 1 && /* @__PURE__ */ t.jsx("div", { className: w.chargeTypes, children: e.chargeTypes.map((x) => /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: V(N.charge, {
-          [N.chargeActive]: i === u
+        className: F(w.charge, {
+          [w.chargeActive]: i === x
         }),
-        onClick: () => a(u),
-        children: Mt[u]
+        onClick: () => a(x),
+        children: Mt[x]
       },
-      u
+      x
     )) }),
-    /* @__PURE__ */ t.jsx("div", { className: N.variants, children: c.map((u) => {
-      var D;
+    /* @__PURE__ */ t.jsx("div", { className: w.variants, children: c.map((x) => {
+      var k;
       return /* @__PURE__ */ t.jsxs(
         "div",
         {
-          className: V(N.variant, {
-            [N.activeVariant]: e.id === u.id
+          className: F(w.variant, {
+            [w.activeVariant]: e.id === x.id
           }),
-          onClick: () => s(u),
+          onClick: () => s(x),
           children: [
-            /* @__PURE__ */ t.jsxs("div", { className: N.variantInfo, children: [
-              /* @__PURE__ */ t.jsx("span", { className: N.title, children: B(u.name, 15) }),
+            /* @__PURE__ */ t.jsxs("div", { className: w.variantInfo, children: [
+              /* @__PURE__ */ t.jsx("span", { className: w.title, children: L(x.name, 15) }),
               /* @__PURE__ */ t.jsxs("span", { children: [
                 "$",
-                i === "ONE_TIME" ? u.price.amount : u.subscriptionSettings ? u.subscriptionSettings.price.amount : "Price Not Found"
+                i === "ONE_TIME" ? x.price.amount : x.subscriptionSettings ? x.subscriptionSettings.price.amount : "Price Not Found"
               ] })
             ] }),
-            /* @__PURE__ */ t.jsx("div", { children: i === "ONE_TIME" && /* @__PURE__ */ t.jsxs("span", { className: N.stock, children: [
-              ((D = u.quantity.restrictions) == null ? void 0 : D.max) || u.quantity.available || 0,
+            /* @__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,
               " in stock"
             ] }) })
           ]
         },
-        u.id
+        x.id
       );
     }) }),
-    i === "ONE_TIME" && /* @__PURE__ */ t.jsxs("div", { className: N.quantity, children: [
+    i === "ONE_TIME" && /* @__PURE__ */ t.jsxs("div", { className: w.quantity, children: [
       /* @__PURE__ */ t.jsx(
         "button",
         {
           onClick: () => {
-            h > 1 ? n((u) => u - 1) : n(1);
+            m > 1 ? n((x) => x - 1) : n(1);
           },
-          className: N.button,
-          disabled: e.quantity.restrictions && h <= e.quantity.restrictions.min,
+          className: w.button,
+          disabled: e.quantity.restrictions && m <= e.quantity.restrictions.min,
           children: /* @__PURE__ */ t.jsx(v, { name: "Minus" })
         }
       ),
       /* @__PURE__ */ t.jsx(
         "label",
         {
-          className: V(N.count, {
-            [N.focused]: o
+          className: F(w.count, {
+            [w.focused]: o
           }),
           onFocus: () => f(!0),
           onBlur: () => f(!1),
@@ -2318,10 +2317,10 @@ const ra = (r) => {
             X,
             {
               type: "number",
-              value: String(h),
-              onChange: (u) => n(Number(u)),
-              max: ((S = e.quantity.restrictions) == null ? void 0 : S.max) || e.quantity.available || 1 / 0,
-              min: ((M = e.quantity.restrictions) == null ? void 0 : M.min) || 0,
+              value: String(m),
+              onChange: (x) => n(Number(x)),
+              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,
               style: {
                 backgroundColor: "transparent",
                 border: "none",
@@ -2335,18 +2334,18 @@ const ra = (r) => {
         "button",
         {
           onClick: () => {
-            n((u) => u + 1);
+            n((x) => x + 1);
           },
-          className: N.button,
-          disabled: !!(e.quantity.restrictions && h >= e.quantity.restrictions.max || e.quantity.available && h >= e.quantity.available),
+          className: w.button,
+          disabled: !!(e.quantity.restrictions && m >= e.quantity.restrictions.max || e.quantity.available && m >= e.quantity.available),
           children: /* @__PURE__ */ t.jsx(v, { name: "Plus" })
         }
       )
     ] }),
-    /* @__PURE__ */ t.jsxs("div", { className: N.meta, children: [
-      /* @__PURE__ */ t.jsxs("div", { className: N.info, children: [
+    /* @__PURE__ */ t.jsxs("div", { className: w.meta, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: w.info, children: [
         /* @__PURE__ */ t.jsx("span", { children: "Delivery" }),
-        /* @__PURE__ */ t.jsxs("div", { className: N.infoRight, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: w.infoRight, children: [
           /* @__PURE__ */ t.jsx(
             v,
             {
@@ -2356,44 +2355,44 @@ const ra = (r) => {
               height: 20
             }
           ),
-          /* @__PURE__ */ t.jsx("span", { children: !e.deliveryTime || e.deliveryTime === 0 ? "Instant" : L(e.deliveryTime) })
+          /* @__PURE__ */ t.jsx("span", { children: !e.deliveryTime || e.deliveryTime === 0 ? "Instant" : y(e.deliveryTime) })
         ] })
       ] }),
-      /* @__PURE__ */ t.jsxs("div", { className: N.info, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: w.info, children: [
         /* @__PURE__ */ t.jsx("span", { children: "Price" }),
-        /* @__PURE__ */ t.jsx("div", { className: N.infoRight, children: i === "ONE_TIME" ? e.compareAtPrice && (e.compareAtPrice.amount || 0) - (e.price.amount || 0) > 0 ? /* @__PURE__ */ t.jsxs("div", { className: N.price, children: [
-          /* @__PURE__ */ t.jsxs("span", { className: V(N.newPrice, { [N.animate]: d }), children: [
+        /* @__PURE__ */ t.jsx("div", { className: w.infoRight, children: i === "ONE_TIME" ? e.compareAtPrice && (e.compareAtPrice.amount || 0) - (e.price.amount || 0) > 0 ? /* @__PURE__ */ t.jsxs("div", { className: w.price, children: [
+          /* @__PURE__ */ t.jsxs("span", { className: F(w.newPrice, { [w.animate]: p }), children: [
             "$ ",
-            (e.price.amount || 0) * h
+            (e.price.amount || 0) * m
           ] }),
-          /* @__PURE__ */ t.jsxs("span", { className: N.oldPrice, children: [
+          /* @__PURE__ */ t.jsxs("span", { className: w.oldPrice, children: [
             "$ ",
-            (e.compareAtPrice.amount || 0) * h
+            (e.compareAtPrice.amount || 0) * m
           ] })
-        ] }) : /* @__PURE__ */ t.jsxs("span", { className: V(N.newPrice, { [N.animate]: d }), children: [
+        ] }) : /* @__PURE__ */ t.jsxs("span", { className: F(w.newPrice, { [w.animate]: p }), children: [
           "$ ",
-          (e.price.amount || 0) * h
-        ] }) : e.subscriptionSettings && e.subscriptionSettings.compareAtPrice && (e.subscriptionSettings.compareAtPrice.amount || 0) - (e.subscriptionSettings.price.amount || 0) > 0 ? /* @__PURE__ */ t.jsxs("div", { className: N.price, children: [
-          /* @__PURE__ */ t.jsxs("span", { className: V(N.newPrice, { [N.animate]: d }), 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.price.amount || 0
           ] }),
-          /* @__PURE__ */ t.jsxs("span", { className: N.oldPrice, children: [
+          /* @__PURE__ */ t.jsxs("span", { className: w.oldPrice, children: [
             "$ ",
             e.subscriptionSettings.compareAtPrice.amount || 0
           ] })
-        ] }) : e.subscriptionSettings && /* @__PURE__ */ t.jsxs("span", { className: V(N.newPrice, { [N.animate]: d }), children: [
+        ] }) : e.subscriptionSettings && /* @__PURE__ */ t.jsxs("span", { className: F(w.newPrice, { [w.animate]: p }), children: [
           "$ ",
           e.subscriptionSettings.price.amount || 0
         ] }) })
       ] })
     ] }),
-    /* @__PURE__ */ t.jsxs("div", { className: N.buttons, children: [
+    /* @__PURE__ */ t.jsxs("div", { className: w.buttons, children: [
       /* @__PURE__ */ t.jsx(
         at,
         {
           type: "Primary",
-          onClick: () => y(),
+          onClick: () => D(),
           children: /* @__PURE__ */ t.jsx("span", { children: i === "ONE_TIME" ? "Buy Now" : "Subscribe Now" })
         }
       ),
@@ -2401,13 +2400,13 @@ const ra = (r) => {
         at,
         {
           type: "Secondary",
-          onClick: () => E(),
+          onClick: () => C(),
           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", C = {
+}, 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 = {
   button: qi,
   login: Ei,
   signUp: Di,
@@ -2451,17 +2450,17 @@ const ra = (r) => {
   tertiaryHovered: bo,
   content: jo
 }, kt = (r) => {
-  const { children: c, onClick: e, style: s, className: i, disabled: a = !1, type: l = "Primary" } = r, { themeSettings: h } = qt();
+  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: V(nt.button, i, {
+      className: F(nt.button, i, {
         [nt.primary]: l === "Primary",
         [nt.secondary]: l === "Secondary",
         [nt.tertiary]: l === "Tertiary",
-        [nt.primaryHovered]: l === "Primary" && !a && h.buttons.primary.hover,
-        [nt.secondaryHovered]: l === "Secondary" && !a && h.buttons.secondary.hover,
-        [nt.tertiaryHovered]: l === "Tertiary" && !a && h.buttons.tertiary.hover
+        [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
       }),
       onClick: e,
       style: {
@@ -2537,7 +2536,7 @@ const da = (r) => {
     s(l);
   }
   const a = JSON.parse(localStorage.getItem("token") || "{}");
-  return /* @__PURE__ */ t.jsxs("div", { className: C.buttons, children: [
+  return /* @__PURE__ */ t.jsxs("div", { className: S.buttons, children: [
     c && /* @__PURE__ */ t.jsx($o, {}),
     !a.data && /* @__PURE__ */ t.jsx(
       kt,
@@ -2565,42 +2564,40 @@ const da = (r) => {
   ] });
 }, $o = () => {
   const [r, c] = g.useState(!1), [e, s] = g.useState([]), { cart: i, getProducts: a } = Pt();
-  function l(p) {
-    for (let _ = 0; _ < i.parts.length; _++)
-      for (let x = 0; x < p.variants.length; x++)
-        if (i.parts[_].productVariantId === p.variants[_].id)
-          return i.parts[_].productVariantId;
+  function l(_) {
+    for (let h = 0; h < i.parts.length; h++)
+      for (let p = 0; p < _.variants.length; p++)
+        if (i.parts[h].productVariantId === _.variants[h].id)
+          return i.parts[h].productVariantId;
   }
-  function h(p) {
-    for (let _ = 0; _ < i.parts.length; _++)
-      for (let x = 0; x < p.variants.length; x++)
-        if (i.parts[_].productVariantId === p.variants[_].id)
-          return i.parts[_].quantity;
+  function m(_) {
+    for (let h = 0; h < i.parts.length; h++)
+      for (let p = 0; p < _.variants.length; p++)
+        if (i.parts[h].productVariantId === _.variants[h].id)
+          return i.parts[h].quantity;
   }
   g.useEffect(() => {
     (async () => {
-      const _ = i.parts.map((w) => String(w.productId)), d = (await a([..._])).map((w) => ({
-        ...w,
-        activeVariantId: l(w),
-        quantity: h(w)
+      const h = i.parts.map((C) => String(C.productId)), d = (await a([...h])).map((C) => ({
+        ...C,
+        activeVariantId: l(C),
+        quantity: m(C)
       }));
       s(d);
     })();
   }, [i.parts.length]);
-  function n(p) {
-    var _;
-    return !p || !(p != null && p.variants) ? !1 : (_ = p.variants.find((x) => x.id === p.activeVariantId)) == null ? void 0 : _.subscriptionSettings;
+  function n(_) {
+    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]);
-  console.log(i.parts.length > 0, e.length > 0, !n(e[0]));
-  const [f, I] = g.useState(!1);
+  const o = i.parts.length > 0 && e.length > 0 && !n(e[0]), [f, N] = g.useState(!1);
   return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
     /* @__PURE__ */ t.jsxs(
       "div",
       {
-        className: C.button,
-        onClick: (p) => {
-          p.stopPropagation(), c(!0), I(!0);
+        className: S.button,
+        onClick: (_) => {
+          _.stopPropagation(), c(!0), N(!0);
         },
         children: [
           /* @__PURE__ */ t.jsx(
@@ -2610,7 +2607,7 @@ const da = (r) => {
               fill: "var(--icon-primary)"
             }
           ),
-          o && /* @__PURE__ */ t.jsx("div", { className: C.shoppingCount, children: i.parts.length })
+          o && /* @__PURE__ */ t.jsx("div", { className: S.shoppingCount, children: i.parts.length })
         ]
       }
     ),
@@ -2618,7 +2615,7 @@ const da = (r) => {
       Et,
       {
         close: () => {
-          I(!1), setTimeout(() => {
+          N(!1), setTimeout(() => {
             c(!1);
           }, 300);
         },
@@ -2634,42 +2631,42 @@ const da = (r) => {
     )
   ] });
 }, Io = (r) => {
-  const { activeProducts: c, isCartNotEmpty: e, isOpen: s } = r, { cart: i, reset: a, getTotalAndDiscount: l, updateQuantityOfProduct: h } = Pt(), n = bt();
-  function o(p) {
-    n(p);
+  const { activeProducts: c, isCartNotEmpty: e, isOpen: s } = r, { cart: i, reset: a, getTotalAndDiscount: l, updateQuantityOfProduct: m } = Pt(), n = bt();
+  function o(_) {
+    n(_);
   }
-  function f(p) {
-    h({
-      productId: p.id,
-      productVariantId: p.activeVariantId,
-      quantity: p.quantity + 1
+  function f(_) {
+    m({
+      productId: _.id,
+      productVariantId: _.activeVariantId,
+      quantity: _.quantity + 1
     });
   }
-  function I(p) {
-    h({
-      productId: p.id,
-      productVariantId: p.activeVariantId,
-      quantity: p.quantity - 1
+  function N(_) {
+    m({
+      productId: _.id,
+      productVariantId: _.activeVariantId,
+      quantity: _.quantity - 1
     });
   }
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: V(C.modal, {
-        [C.closing]: !s
+      className: F(S.modal, {
+        [S.closing]: !s
       }),
-      onClick: (p) => p.stopPropagation(),
+      onClick: (_) => _.stopPropagation(),
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: C.top, children: [
-          /* @__PURE__ */ t.jsxs("div", { className: C.info, children: [
-            /* @__PURE__ */ t.jsx("span", { className: C.title, children: "Cart" }),
-            e && /* @__PURE__ */ t.jsx("div", { className: C.count, children: i.parts.length })
+        /* @__PURE__ */ t.jsxs("div", { className: 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.jsx(
             "button",
             {
-              className: V(C.clear, {
-                [C.activeClear]: e
+              className: F(S.clear, {
+                [S.activeClear]: e
               }),
               disabled: !e,
               onClick: a,
@@ -2677,39 +2674,39 @@ const da = (r) => {
             }
           )
         ] }),
-        e ? /* @__PURE__ */ t.jsxs("div", { className: C.cart, children: [
-          /* @__PURE__ */ t.jsx("div", { className: C.products, children: c.map((p) => /* @__PURE__ */ t.jsxs(
+        e ? /* @__PURE__ */ t.jsxs("div", { className: S.cart, children: [
+          /* @__PURE__ */ t.jsx("div", { className: S.products, children: c.map((_) => /* @__PURE__ */ t.jsxs(
             "div",
             {
-              className: C.product,
+              className: S.product,
               children: [
-                /* @__PURE__ */ t.jsxs("div", { className: C.productInfo, children: [
+                /* @__PURE__ */ t.jsxs("div", { className: S.productInfo, children: [
                   /* @__PURE__ */ t.jsx(
                     "img",
                     {
-                      src: `https://imagedelivery.net/${p.images[0].cfId}/w=500`,
+                      src: `https://imagedelivery.net/${_.images[0].cfId}/w=500`,
                       alt: "image",
                       width: "100%",
                       height: "100%",
-                      className: C.image
+                      className: S.image
                     }
                   ),
-                  /* @__PURE__ */ t.jsxs("div", { className: C.content, children: [
-                    /* @__PURE__ */ t.jsx("div", { className: C.name, children: p.name }),
-                    /* @__PURE__ */ t.jsxs("div", { className: C.price, children: [
+                  /* @__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: [
                       "$",
-                      p.variants.find((_) => _.id === p.activeVariantId).price.amount * ((p == null ? void 0 : p.quantity) || 1)
+                      _.variants.find((h) => h.id === _.activeVariantId).price.amount * ((_ == null ? void 0 : _.quantity) || 1)
                     ] })
                   ] })
                 ] }),
-                /* @__PURE__ */ t.jsxs("div", { className: C.productButtons, children: [
+                /* @__PURE__ */ t.jsxs("div", { className: S.productButtons, children: [
                   /* @__PURE__ */ t.jsx(
                     "div",
                     {
                       onClick: () => {
-                        p.quantity !== 1 && I(p);
+                        _.quantity !== 1 && N(_);
                       },
-                      className: C.productButton,
+                      className: S.productButton,
                       children: /* @__PURE__ */ t.jsx(
                         v,
                         {
@@ -2721,12 +2718,12 @@ const da = (r) => {
                       )
                     }
                   ),
-                  /* @__PURE__ */ t.jsx("div", { className: C.productCount, children: p.quantity }),
+                  /* @__PURE__ */ t.jsx("div", { className: S.productCount, children: _.quantity }),
                   /* @__PURE__ */ t.jsx(
                     "div",
                     {
-                      onClick: () => f(p),
-                      className: C.productButton,
+                      onClick: () => f(_),
+                      className: S.productButton,
                       children: /* @__PURE__ */ t.jsx(
                         v,
                         {
@@ -2741,11 +2738,11 @@ const da = (r) => {
                 ] })
               ]
             },
-            p.id
+            _.id
           )) }),
-          /* @__PURE__ */ t.jsxs("div", { className: C.bottom, children: [
-            /* @__PURE__ */ t.jsxs("div", { className: C.subtotal, children: [
-              /* @__PURE__ */ t.jsxs("div", { className: C.block, children: [
+          /* @__PURE__ */ t.jsxs("div", { className: S.bottom, children: [
+            /* @__PURE__ */ t.jsxs("div", { className: S.subtotal, children: [
+              /* @__PURE__ */ t.jsxs("div", { className: S.block, children: [
                 /* @__PURE__ */ t.jsx("span", { children: "Subtotal" }),
                 /* @__PURE__ */ t.jsx(
                   v,
@@ -2757,7 +2754,7 @@ const da = (r) => {
                   }
                 )
               ] }),
-              /* @__PURE__ */ t.jsxs("div", { className: C.total, children: [
+              /* @__PURE__ */ t.jsxs("div", { className: S.total, children: [
                 "$",
                 l().total
               ] })
@@ -2768,7 +2765,7 @@ const da = (r) => {
       ]
     }
   );
-}, No = () => /* @__PURE__ */ t.jsxs("div", { className: C.empty, children: [
+}, No = () => /* @__PURE__ */ t.jsxs("div", { className: S.empty, children: [
   /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
     v,
     {
@@ -2784,7 +2781,7 @@ const da = (r) => {
       "a",
       {
         href: "/products",
-        className: C.link,
+        className: S.link,
         children: "view products"
       }
     )
@@ -2803,7 +2800,7 @@ const da = (r) => {
   return /* @__PURE__ */ t.jsx(
     "div",
     {
-      className: C.userInfo,
+      className: S.userInfo,
       onClick: () => i("/customer-dash"),
       children: /* @__PURE__ */ t.jsx("div", { children: c || "test-email@gmail.com" })
     }
@@ -2874,7 +2871,7 @@ const da = (r) => {
           /* @__PURE__ */ t.jsx(
             "div",
             {
-              className: V(ot.copy, ot.copyText),
+              className: F(ot.copy, ot.copyText),
               onClick: i,
               children: s
             }
@@ -2898,7 +2895,7 @@ const da = (r) => {
   open: Ho,
   content: zo
 }, ma = ({ title: r, content: c }) => {
-  const [e, s] = g.useState(!1), [i, a] = g.useState(0), l = g.useRef(null), h = () => {
+  const [e, s] = g.useState(!1), [i, a] = g.useState(0), l = g.useRef(null), m = () => {
     s(!e);
   };
   return g.useEffect(() => {
@@ -2908,10 +2905,10 @@ const da = (r) => {
       "div",
       {
         className: _t.header,
-        onClick: h,
+        onClick: m,
         children: [
           /* @__PURE__ */ t.jsx("h5", { id: "h5", children: r }),
-          /* @__PURE__ */ t.jsx("div", { className: V(_t.icon, { [_t.open]: e }), children: /* @__PURE__ */ t.jsx(v, { name: "CaretDown" }) })
+          /* @__PURE__ */ t.jsx("div", { className: F(_t.icon, { [_t.open]: e }), children: /* @__PURE__ */ t.jsx(v, { name: "CaretDown" }) })
         ]
       }
     ),
@@ -2942,20 +2939,20 @@ const da = (r) => {
     value: i,
     type: a,
     min: l,
-    max: h,
+    max: m,
     placeholder: n,
     disabled: o = !1,
     required: f = !1,
-    regex: I,
-    paddingless: p = !1,
-    borderless: _ = !1,
-    editable: x = !1,
+    regex: N,
+    paddingless: _ = !1,
+    borderless: h = !1,
+    editable: p = !1,
     isSearch: d = !1
-  } = r, { themeSettings: w } = qt(), { inputs: E } = w, [y, L] = g.useState(!1);
-  function B(u, D) {
-    if (u.startsWith("#")) {
-      let T, $, U;
-      return u.length === 7 ? (T = parseInt(u.slice(1, 3), 16), $ = parseInt(u.slice(3, 5), 16), U = parseInt(u.slice(5, 7), 16)) : u.length === 4 && (T = parseInt(u[1] + u[1], 16), $ = parseInt(u[2] + u[2], 16), U = parseInt(u[3] + u[3], 16)), `rgba(${T}, ${$}, ${U}, ${D})`;
+  } = 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",
@@ -2964,14 +2961,14 @@ const da = (r) => {
       green: "#00ff00",
       blue: "#0000ff"
       // Можно добавить больше цветов
-    }[u.toLowerCase()];
-    return b ? B(b, D) : u;
+    }[k.toLowerCase()];
+    return b ? B(b, V) : k;
   }
-  function S(u) {
-    return Number(u) < 0 ? String(l) : u;
+  function T(k) {
+    return Number(k) < 0 ? String(l) : k;
   }
-  function M(u) {
-    return !f || !I ? !0 : new RegExp(I).test(u);
+  function x(k) {
+    return !f || !N ? !0 : new RegExp(N).test(k);
   }
   return /* @__PURE__ */ t.jsxs("div", { className: it.wrapper, children: [
     s && /* @__PURE__ */ t.jsx(
@@ -2987,9 +2984,9 @@ const da = (r) => {
       {
         className: it.content,
         style: {
-          paddingRight: E.general.height + 15,
+          paddingRight: D.general.height + 15,
           ...e,
-          backgroundColor: B(E.field.color, E.field.opacity / 100)
+          backgroundColor: B(D.field.color, D.field.opacity / 100)
         },
         children: [
           /* @__PURE__ */ t.jsx(
@@ -2997,23 +2994,23 @@ const da = (r) => {
             {
               id: s,
               type: a || "text",
-              onChange: (u) => {
-                if (a === "text") c(u.target.value);
+              onChange: (k) => {
+                if (a === "text") c(k.target.value);
                 else {
-                  const D = S(u.target.value);
-                  c(D);
+                  const V = T(k.target.value);
+                  c(V);
                 }
               },
               value: i,
               autoComplete: "off",
               placeholder: n || "Type something...",
-              className: V(it.input, {
-                [it.required]: y && f && !M(i),
-                [it.paddingless]: p,
-                [it.borderless]: _
+              className: F(it.input, {
+                [it.required]: y && f && !x(i),
+                [it.paddingless]: _,
+                [it.borderless]: h
               }),
               min: a === "number" ? l : void 0,
-              max: a === "number" ? h : void 0,
+              max: a === "number" ? m : void 0,
               disabled: o,
               onFocus: () => L(!0)
             }
@@ -3023,11 +3020,11 @@ const da = (r) => {
             {
               name: "MagnifyingGlass",
               fill: "var(--icon-secondary)",
-              width: E.general.height,
-              height: E.general.height
+              width: D.general.height,
+              height: D.general.height
             }
           ) }),
-          x && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
+          p && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
             v,
             {
               name: "Sliders",
@@ -3046,7 +3043,7 @@ const da = (r) => {
   textarea: Zo,
   length: ta
 }, _a = (r) => {
-  const { onChange: c, label: e, value: s, maxLength: i, placeholder: a = "Type something..." } = r, [l, h] = g.useState(s.length);
+  const { onChange: c, label: e, value: s, maxLength: i, placeholder: a = "Type something..." } = r, [l, m] = g.useState(s.length);
   return /* @__PURE__ */ t.jsxs("div", { className: xt.wrapper, children: [
     e && /* @__PURE__ */ t.jsx(
       "label",
@@ -3062,7 +3059,7 @@ const da = (r) => {
         id: e,
         defaultValue: s,
         onChange: (n) => {
-          h(n.target.value.length), c(n.target.value);
+          m(n.target.value.length), c(n.target.value);
         },
         placeholder: a,
         className: xt.textarea,