@billgangcom/theme-lib 1.63.0 → 1.65.0

package/dist/ui.es.js

@@ -1,21 +1,21 @@
-import { j as t, I as f, c as W, a as ut, S as it, R as kt, B as ot, O as mt, d as at, u as ht, e as pt, P as _t, D as gt, f as ft, v as xt, g as bt, C as jt, h as F, i as wt, k as st, l as $t, m as Bt, n as Pt, o as rt, p as G, L as Mt, r as lt, t as vt, w as H, x as Tt, M as yt, y as Nt, z as qt, A as It, E as At, F as Ot } from "./index-DV89YV-L.js";
-import { N as bi, H as ji, K as vi, G as yi, T as ki, J as Ni } from "./index-DV89YV-L.js";
-import _ from "react";
+import { j as t, I as j, c as V, a as yt, u as ut, d as mt, P as ht, S as ot, R as St, D as pt, e as _t, v as gt, B as ct, O as It, f as rt, g as ft, C as xt, h as H, i as Pt, k as at, l as Tt, m as lt, n as Mt, o as jt, p as G, L as At, r as vt, t as dt, s as Nt, w as F, x as Ot, M as kt, y as $t, z as Et, A as wt, E as qt, F as Dt, G as Rt } from "./index-BPn2qi_o.js";
+import { Q as Zi, J as ta, N as ea, H as na, T as sa, K as ia } from "./index-BPn2qi_o.js";
+import x from "react";
 import "@phosphor-icons/react";
-const Et = "_wrapper_1vmyb_2", Dt = "_alignmentBlock_1vmyb_8", Rt = "_title_1vmyb_15", Lt = "_subtitle_1vmyb_22", zt = "_alignmentContent_1vmyb_29", Ut = "_alignments_1vmyb_37", Ht = "_alignment_1vmyb_8", Ft = "_circle_1vmyb_60", Vt = "_paddings_1vmyb_67", Yt = "_padding_1vmyb_67", Gt = "_active_1vmyb_91", Wt = "_input_1vmyb_98", J = {
-  wrapper: Et,
-  alignmentBlock: Dt,
-  title: Rt,
-  subtitle: Lt,
-  alignmentContent: zt,
-  alignments: Ut,
-  alignment: Ht,
-  circle: Ft,
-  paddings: Vt,
-  padding: Yt,
-  active: Gt,
-  input: Wt
-}, Jt = [
+const Lt = "_wrapper_1vmyb_2", zt = "_alignmentBlock_1vmyb_8", Ft = "_title_1vmyb_15", Vt = "_subtitle_1vmyb_22", Ut = "_alignmentContent_1vmyb_29", Ht = "_alignments_1vmyb_37", Yt = "_alignment_1vmyb_8", Wt = "_circle_1vmyb_60", Gt = "_paddings_1vmyb_67", Qt = "_padding_1vmyb_67", Xt = "_active_1vmyb_91", Jt = "_input_1vmyb_98", J = {
+  wrapper: Lt,
+  alignmentBlock: zt,
+  title: Ft,
+  subtitle: Vt,
+  alignmentContent: Ut,
+  alignments: Ht,
+  alignment: Yt,
+  circle: Wt,
+  paddings: Gt,
+  padding: Qt,
+  active: Xt,
+  input: Jt
+}, Kt = [
   "topLeft",
   "top",
   "topRight",
@@ -25,10 +25,10 @@ const Et = "_wrapper_1vmyb_2", Dt = "_alignmentBlock_1vmyb_8", Rt = "_title_1vmy
   "bottomLeft",
   "bottom",
   "bottomRight"
-], Xt = ["left", "top", "right", "bottom"], ni = (r) => {
-  const { alignment: s, padding: e, setPadding: n, setAlignment: i } = r;
-  function d(c) {
-    switch (c) {
+], Zt = ["left", "top", "right", "bottom"], Oi = (o) => {
+  const { alignment: s, padding: e, setPadding: n, setAlignment: i } = o;
+  function c(l) {
+    switch (l) {
       case "left":
       case "topLeft":
       case "bottomLeft":
@@ -45,8 +45,8 @@ const Et = "_wrapper_1vmyb_2", Dt = "_alignmentBlock_1vmyb_8", Rt = "_title_1vmy
         return "TextAlignCenter";
     }
   }
-  function u(c) {
-    switch (c) {
+  function u(l) {
+    switch (l) {
       case "left":
         return "AlignLeft";
       case "right":
@@ -57,40 +57,40 @@ const Et = "_wrapper_1vmyb_2", Dt = "_alignmentBlock_1vmyb_8", Rt = "_title_1vmy
         return "AlignBottom";
     }
   }
-  const [o, m] = _.useState(null), [g, C] = _.useState(null);
+  const [r, m] = x.useState(null), [p, B] = x.useState(null);
   return /* @__PURE__ */ t.jsxs("div", { className: J.layout, children: [
     /* @__PURE__ */ t.jsx("h3", { className: J.title, children: "Layout (for Desktop version)" }),
     /* @__PURE__ */ t.jsxs("div", { className: J.alignmentBlock, children: [
       /* @__PURE__ */ t.jsx("h5", { className: J.subtitle, children: "Alignment" }),
       /* @__PURE__ */ t.jsxs("div", { className: J.alignmentContent, children: [
-        /* @__PURE__ */ t.jsx("div", { className: J.alignments, children: Jt.map((c) => /* @__PURE__ */ t.jsxs(
+        /* @__PURE__ */ t.jsx("div", { className: J.alignments, children: Kt.map((l) => /* @__PURE__ */ t.jsxs(
           "div",
           {
             onClick: () => {
-              i(c);
+              i(l);
             },
             className: J.alignment,
             onMouseEnter: () => {
-              m(c);
+              m(l);
             },
             onMouseLeave: () => {
               m(null);
             },
             children: [
-              c !== s && o !== c && /* @__PURE__ */ t.jsx("div", { className: J.circle }),
-              c !== s && o === c && /* @__PURE__ */ t.jsx(
-                f,
+              l !== s && r !== l && /* @__PURE__ */ t.jsx("div", { className: J.circle }),
+              l !== s && r === l && /* @__PURE__ */ t.jsx(
+                j,
                 {
-                  name: d(o),
+                  name: c(r),
                   fill: "#c2c2c2",
                   width: 22,
                   height: 22
                 }
               ),
-              c === s && /* @__PURE__ */ t.jsx(
-                f,
+              l === s && /* @__PURE__ */ t.jsx(
+                j,
                 {
-                  name: d(s),
+                  name: c(s),
                   fill: "#FF3F19",
                   width: 22,
                   height: 22
@@ -98,37 +98,37 @@ const Et = "_wrapper_1vmyb_2", Dt = "_alignmentBlock_1vmyb_8", Rt = "_title_1vmy
               )
             ]
           },
-          c
+          l
         )) }),
-        /* @__PURE__ */ t.jsx("div", { className: J.paddings, children: Xt.map((c) => /* @__PURE__ */ t.jsxs(
+        /* @__PURE__ */ t.jsx("div", { className: J.paddings, children: Zt.map((l) => /* @__PURE__ */ t.jsxs(
           "label",
           {
-            className: W(J.padding, {
-              [J.active]: g === c
+            className: V(J.padding, {
+              [J.active]: p === l
             }),
             onFocus: () => {
-              C(c);
+              B(l);
             },
             onBlur: () => {
-              C(null);
+              B(null);
             },
             children: [
               /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-                f,
+                j,
                 {
-                  name: u(c),
+                  name: u(l),
                   width: 20,
                   height: 20
                 }
               ) }),
               /* @__PURE__ */ t.jsx(
-                ut,
+                yt,
                 {
                   type: "number",
-                  value: String(e[c]),
-                  onChange: (l) => n({
+                  value: String(e[l]),
+                  onChange: (a) => n({
                     ...e,
-                    [c]: Math.min(Number(l), 999)
+                    [l]: Math.min(Number(a), 999)
                   }),
                   max: 999,
                   paddingless: !0,
@@ -137,66 +137,109 @@ const Et = "_wrapper_1vmyb_2", Dt = "_alignmentBlock_1vmyb_8", Rt = "_title_1vmy
               )
             ]
           },
-          c
+          l
         )) })
       ] })
     ] })
   ] });
-}, Kt = "_title_82zux_1", Qt = "_subtitle_82zux_5", Zt = "_header_82zux_12", te = "_text_82zux_13", ee = "_productsBlock_82zux_14", ne = "_top_82zux_26", se = "_itemsBlock_82zux_35", ie = "_typeTexts_82zux_41", oe = "_block_82zux_48", ae = "_active_82zux_61", ce = "_products_82zux_14", le = "_product_82zux_14", re = "_button_82zux_80", de = "_disabled_82zux_91", ue = "_image_82zux_95", me = "_info_82zux_102", he = "_name_82zux_114", pe = "_buttons_82zux_118", _e = "_modal_82zux_125", ge = "_link_82zux_145", fe = "_modalOptions_82zux_151", xe = "_addButton_82zux_157", be = "_deleteButton_82zux_179", X = {
-  title: Kt,
-  subtitle: Qt,
-  header: Zt,
-  text: te,
-  productsBlock: ee,
-  top: ne,
-  itemsBlock: se,
-  typeTexts: ie,
-  block: oe,
-  active: ae,
-  products: ce,
-  product: le,
-  button: re,
-  disabled: de,
-  image: ue,
-  info: me,
-  name: he,
-  buttons: pe,
-  modal: _e,
-  link: ge,
-  modalOptions: fe,
-  addButton: xe,
-  deleteButton: be
-}, si = (r) => {
+}, te = "_title_82zux_1", ee = "_subtitle_82zux_5", ne = "_header_82zux_12", se = "_text_82zux_13", ie = "_productsBlock_82zux_14", ae = "_top_82zux_26", oe = "_itemsBlock_82zux_35", ce = "_typeTexts_82zux_41", re = "_block_82zux_48", le = "_active_82zux_61", de = "_products_82zux_14", ue = "_product_82zux_14", me = "_button_82zux_80", he = "_disabled_82zux_91", pe = "_image_82zux_95", _e = "_info_82zux_102", ge = "_name_82zux_114", fe = "_buttons_82zux_118", xe = "_modal_82zux_125", ve = "_link_82zux_145", je = "_modalOptions_82zux_151", be = "_addButton_82zux_157", ye = "_deleteButton_82zux_179", Q = {
+  title: te,
+  subtitle: ee,
+  header: ne,
+  text: se,
+  productsBlock: ie,
+  top: ae,
+  itemsBlock: oe,
+  typeTexts: ce,
+  block: re,
+  active: le,
+  products: de,
+  product: ue,
+  button: me,
+  disabled: he,
+  image: pe,
+  info: _e,
+  name: ge,
+  buttons: fe,
+  modal: xe,
+  link: ve,
+  modalOptions: je,
+  addButton: be,
+  deleteButton: ye
+};
+function Ie({ id: o, children: s }) {
+  const {
+    attributes: e,
+    listeners: n,
+    setNodeRef: i,
+    transform: c,
+    transition: u,
+    isDragging: r
+  } = ft({
+    id: o
+  }), m = {
+    transform: xt.Transform.toString(c),
+    transition: u
+  };
+  return /* @__PURE__ */ t.jsx(
+    "div",
+    {
+      ref: i,
+      style: m,
+      className: `${Q.product} ${r ? Q.dragging : ""}`,
+      ...e,
+      ...n,
+      children: s
+    }
+  );
+}
+const Ei = (o) => {
   const {
     isActiveItems: s,
     setIsActiveItems: e,
     items: n,
     setItems: i,
-    other: d,
+    other: c,
     title: u,
-    subtitle: o,
+    subtitle: r,
     draggable: m = !1,
-    withImage: g = !1,
-    addable: C = !0,
-    itemsOptions: c,
-    hasRangeSelector: l = !1,
-    rangeSelectorOptions: T,
-    limit: $,
-    autoScrollInterval: M,
-    deletable: x
-  } = r;
-  function N(j) {
-    if (g)
-      return j ? /* @__PURE__ */ t.jsx(
+    withImage: p = !1,
+    addable: B = !0,
+    itemsOptions: l,
+    hasRangeSelector: a = !1,
+    rangeSelectorOptions: b,
+    limit: d,
+    autoScrollInterval: S,
+    deletable: g
+  } = o, k = ut(
+    mt(ht, {
+      activationConstraint: {
+        distance: 5
+      }
+    })
+  ), q = (v) => {
+    console.log("Trigger?");
+    const { active: M, over: O } = v;
+    if (O && M.id !== O.id) {
+      const I = n.findIndex(($) => $ === M.id), h = n.findIndex(($) => $ === O.id);
+      if (I !== -1 && h !== -1) {
+        const $ = [...n], [P] = $.splice(I, 1);
+        $.splice(h, 0, P), i($);
+      }
+    }
+  };
+  function E(v) {
+    if (p)
+      return v ? /* @__PURE__ */ t.jsx(
         "img",
         {
-          src: `https://imagedelivery.net/${j[0]}/w=1000`,
+          src: `https://imagedelivery.net/${v[0]}/w=1000`,
           alt: "image",
           width: 16,
           height: 16
         }
       ) : /* @__PURE__ */ t.jsx(
-        f,
+        j,
         {
           name: "Image",
           width: 16,
@@ -205,12 +248,12 @@ const Et = "_wrapper_1vmyb_2", Dt = "_alignmentBlock_1vmyb_8", Rt = "_title_1vmy
         }
       );
   }
-  const a = (j, R = !1) => {
-    const w = c.find((S) => S.id === j);
-    if (!w) return;
-    const z = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+  const f = (v, M = !1) => {
+    const O = l.find((h) => h.id === v);
+    if (!O) return;
+    const I = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       m && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-        f,
+        j,
         {
           name: "DotsSixVertical",
           hoverable: !0,
@@ -219,56 +262,77 @@ const Et = "_wrapper_1vmyb_2", Dt = "_alignmentBlock_1vmyb_8", Rt = "_title_1vmy
         }
       ) }),
       /* @__PURE__ */ t.jsx(
-        at,
+        rt,
         {
-          onChange: (S) => {
-            const v = [...n], I = c.find((p) => p.name === S);
-            if (!I) return;
-            const q = I.id, B = v.map((p) => p === j ? q : p);
-            i([...B]);
+          onChange: (h) => {
+            const $ = [...n], P = l.find((A) => A.name === h);
+            if (!P) return;
+            const y = P.id, N = $.map((A) => A === v ? y : A);
+            i([...N]);
           },
-          value: w.name,
-          options: c.filter((S) => !n.find((v) => v === S.id)).map((S) => S.name),
-          leftAddon: N(w.images)
+          value: O.name,
+          options: l.filter((h) => !n.find(($) => $ === h.id)).map((h) => h.name),
+          leftAddon: E(O.images)
         }
       ),
-      R && /* @__PURE__ */ t.jsx("div", { className: X.buttons, children: /* @__PURE__ */ t.jsx("div", { className: X.deleteButton, children: /* @__PURE__ */ t.jsx(
-        f,
+      M && /* @__PURE__ */ t.jsx("div", { className: Q.buttons, children: /* @__PURE__ */ t.jsx("div", { className: Q.deleteButton, children: /* @__PURE__ */ t.jsx(
+        j,
         {
           name: "Trash",
           hoverable: !0,
           width: 20,
           height: 20,
           fill: "#C12A2A",
-          onClick: () => i(n.filter((S) => S !== j))
+          onClick: () => i(n.filter((h) => h !== v))
         }
       ) }) })
     ] });
-    return /* @__PURE__ */ t.jsx(
+    return m ? /* @__PURE__ */ t.jsx(
+      Ie,
+      {
+        id: v,
+        children: I
+      },
+      v
+    ) : /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: X.product,
-        children: z
+        className: Q.product,
+        children: I
       },
-      j
+      v
     );
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: X.productsBlock, children: [
-    (u || s !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: X.top, children: [
-      u && /* @__PURE__ */ t.jsx("h3", { className: X.title, children: u }),
+  return /* @__PURE__ */ t.jsxs("div", { className: Q.productsBlock, children: [
+    (u || s !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: Q.top, children: [
+      u && /* @__PURE__ */ t.jsx("h3", { className: Q.title, children: u }),
       s !== void 0 && /* @__PURE__ */ t.jsx(
-        it,
+        ot,
         {
           current: s,
-          onChange: (j) => e == null ? void 0 : e(j)
+          onChange: (v) => e == null ? void 0 : e(v)
         }
       )
     ] }),
-    l && T && /* @__PURE__ */ t.jsx(kt, { ...T }),
-    /* @__PURE__ */ t.jsxs("div", { className: X.products, children: [
-      o && /* @__PURE__ */ t.jsx("h5", { className: X.subtitle, children: o }),
-      n.map((j) => a(j, x)),
-      C && /* @__PURE__ */ t.jsx(
+    a && b && /* @__PURE__ */ t.jsx(St, { ...b }),
+    /* @__PURE__ */ t.jsxs("div", { className: Q.products, children: [
+      r && /* @__PURE__ */ t.jsx("h5", { className: Q.subtitle, children: r }),
+      m ? /* @__PURE__ */ t.jsx(
+        pt,
+        {
+          sensors: k,
+          onDragEnd: q,
+          children: /* @__PURE__ */ t.jsx(
+            _t,
+            {
+              items: n,
+              strategy: gt,
+              children: n.map((v) => f(v, g))
+            }
+          )
+        }
+      ) : n.map((v) => f(v, g)),
+      B && /* @__PURE__ */ t.jsx(
         "div",
         {
           style: {
@@ -278,33 +342,33 @@ const Et = "_wrapper_1vmyb_2", Dt = "_alignmentBlock_1vmyb_8", Rt = "_title_1vmy
             gap: 5
           },
           children: /* @__PURE__ */ t.jsx(
-            ot,
+            ct,
             {
               withoutHover: !0,
-              className: W(X.button, {
-                [X.disabled]: !!($ && $ <= n.length || n.length === c.length)
+              className: V(Q.button, {
+                [Q.disabled]: !!(d && d <= n.length || n.length === l.length)
               }),
               size: "s",
-              disabled: !!($ && $ <= n.length || n.length === c.length),
+              disabled: !!(d && d <= n.length || n.length === l.length),
               onClick: () => {
-                const j = [...n];
-                let R = null;
-                if (c) {
-                  for (let w = 0; w < c.length; w++)
-                    if (!n.find((z) => z === c[w].id)) {
-                      R = c[w];
+                const v = [...n];
+                let M = null;
+                if (l) {
+                  for (let O = 0; O < l.length; O++)
+                    if (!n.find((I) => I === l[O].id)) {
+                      M = l[O];
                       break;
                     }
                 }
-                j.push((R == null ? void 0 : R.id) || c[0].id), i(j);
+                v.push((M == null ? void 0 : M.id) || l[0].id), i(v);
               },
               style: {
                 width: "fit-content"
               },
-              children: /* @__PURE__ */ t.jsxs("div", { className: X.addButton, children: [
+              children: /* @__PURE__ */ t.jsxs("div", { className: Q.addButton, children: [
                 /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
                 /* @__PURE__ */ t.jsx(
-                  f,
+                  j,
                   {
                     name: "Plus",
                     width: 16,
@@ -317,14 +381,14 @@ const Et = "_wrapper_1vmyb_2", Dt = "_alignmentBlock_1vmyb_8", Rt = "_title_1vmy
         }
       )
     ] }),
-    d !== void 0 && /* @__PURE__ */ t.jsx(mt, { items: d }),
-    M !== void 0 && /* @__PURE__ */ t.jsx(
-      ut,
+    c !== void 0 && /* @__PURE__ */ t.jsx(It, { items: c }),
+    S !== void 0 && /* @__PURE__ */ t.jsx(
+      yt,
       {
         label: "Auto scroll interval",
         type: "number",
-        value: String(M.scrollInterval),
-        onChange: (j) => M.setScrollInterval(Number(j)),
+        value: String(S.scrollInterval),
+        onChange: (v) => S.setScrollInterval(Number(v)),
         min: 0.1,
         max: 100,
         style: {
@@ -334,44 +398,44 @@ const Et = "_wrapper_1vmyb_2", Dt = "_alignmentBlock_1vmyb_8", Rt = "_title_1vmy
       }
     )
   ] });
-}, je = "_title_roi3a_1", ve = "_subtitle_roi3a_5", ye = "_header_roi3a_12", ke = "_text_roi3a_13", Ne = "_productsBlock_roi3a_14", Ie = "_top_roi3a_26", Se = "_itemsBlock_roi3a_35", Ce = "_typeTexts_roi3a_41", we = "_block_roi3a_48", $e = "_active_roi3a_61", Be = "_products_roi3a_14", Pe = "_product_roi3a_14", Me = "_button_roi3a_80", Te = "_disabled_roi3a_91", qe = "_image_roi3a_95", Ae = "_info_roi3a_102", Oe = "_name_roi3a_114", Ee = "_buttons_roi3a_118", De = "_modal_roi3a_125", Re = "_link_roi3a_145", Le = "_modalOptions_roi3a_151", ze = "_addButton_roi3a_164", Ue = "_deleteButton_roi3a_179", He = "_closeIcon_roi3a_191", V = {
-  title: je,
-  subtitle: ve,
-  header: ye,
-  text: ke,
-  productsBlock: Ne,
-  top: Ie,
-  itemsBlock: Se,
-  typeTexts: Ce,
-  block: we,
-  active: $e,
-  products: Be,
-  product: Pe,
-  button: Me,
-  disabled: Te,
-  image: qe,
-  info: Ae,
-  name: Oe,
-  buttons: Ee,
-  modal: De,
-  link: Re,
-  modalOptions: Le,
-  addButton: ze,
-  deleteButton: Ue,
-  closeIcon: He
+}, Ne = "_title_roi3a_1", ke = "_subtitle_roi3a_5", Ce = "_header_roi3a_12", Se = "_text_roi3a_13", $e = "_productsBlock_roi3a_14", we = "_top_roi3a_26", qe = "_itemsBlock_roi3a_35", Be = "_typeTexts_roi3a_41", Pe = "_block_roi3a_48", Te = "_active_roi3a_61", Me = "_products_roi3a_14", Ae = "_product_roi3a_14", Oe = "_button_roi3a_80", Ee = "_disabled_roi3a_91", De = "_image_roi3a_95", Re = "_info_roi3a_102", Le = "_name_roi3a_114", ze = "_buttons_roi3a_118", Fe = "_modal_roi3a_125", Ve = "_link_roi3a_145", Ue = "_modalOptions_roi3a_151", He = "_addButton_roi3a_164", Ye = "_deleteButton_roi3a_179", We = "_closeIcon_roi3a_191", Y = {
+  title: Ne,
+  subtitle: ke,
+  header: Ce,
+  text: Se,
+  productsBlock: $e,
+  top: we,
+  itemsBlock: qe,
+  typeTexts: Be,
+  block: Pe,
+  active: Te,
+  products: Me,
+  product: Ae,
+  button: Oe,
+  disabled: Ee,
+  image: De,
+  info: Re,
+  name: Le,
+  buttons: ze,
+  modal: Fe,
+  link: Ve,
+  modalOptions: Ue,
+  addButton: He,
+  deleteButton: Ye,
+  closeIcon: We
 };
-function Fe({ product: r, children: s }) {
+function Ge({ product: o, children: s }) {
   const {
     attributes: e,
     listeners: n,
     setNodeRef: i,
-    transform: d,
+    transform: c,
     transition: u,
-    isDragging: o
-  } = bt({
-    id: r.id
+    isDragging: r
+  } = ft({
+    id: o.id
   }), m = {
-    transform: jt.Transform.toString(d),
+    transform: xt.Transform.toString(c),
     transition: u
   };
   return /* @__PURE__ */ t.jsx(
@@ -379,64 +443,64 @@ function Fe({ product: r, children: s }) {
     {
       ref: i,
       style: m,
-      className: `${V.product} ${o ? V.dragging : ""}`,
+      className: `${Y.product} ${r ? Y.dragging : ""}`,
       ...e,
       ...n,
       children: s
     }
   );
 }
-const ii = (r) => {
+const Di = (o) => {
   const {
     isActiveItems: s,
     setIsActiveItems: e,
     items: n,
     setItems: i,
-    title: d,
+    title: c,
     subtitle: u,
-    editable: o = !0,
+    editable: r = !0,
     draggable: m = !1,
-    deletable: g = !0,
-    addable: C = !0,
-    itemsType: c,
-    itemsOptions: l,
-    addableOptions: T = {},
-    limit: $
-  } = r, [M, x] = _.useState(null), [N, a] = _.useState(null), j = _.useRef(null), R = ht(
-    pt(_t, {
+    deletable: p = !0,
+    addable: B = !0,
+    itemsType: l,
+    itemsOptions: a,
+    addableOptions: b = {},
+    limit: d
+  } = o, [S, g] = x.useState(null), [k, q] = x.useState(null), E = x.useRef(null), f = ut(
+    mt(ht, {
       activationConstraint: {
         distance: 5
       }
     })
   );
-  _.useEffect(() => {
-    if (M) {
-      const v = [...n].map((I) => I.id === M.id ? M : I);
-      i(v);
+  x.useEffect(() => {
+    if (S) {
+      const I = [...n].map((h) => h.id === S.id ? S : h);
+      i(I);
     }
-  }, [M]), _.useEffect(() => {
-    j.current && N && (j.current.getBoundingClientRect().height, N.top);
-  }, [j.current, N]);
-  const w = (v, I) => {
-    v.stopPropagation();
-    const q = v.target.getBoundingClientRect();
-    a({
-      top: q.top + window.scrollY,
-      left: q.left - 30
-    }), x(I);
-  }, z = (v) => {
-    const { active: I, over: q } = v;
-    if (q && I.id !== q.id) {
-      const B = n.findIndex((b) => b.id === I.id), p = n.findIndex((b) => b.id === q.id);
-      if (B !== -1 && p !== -1) {
-        const b = [...n], [A] = b.splice(B, 1);
-        b.splice(p, 0, A), i(b);
+  }, [S]), x.useEffect(() => {
+    E.current && k && (E.current.getBoundingClientRect().height, k.top);
+  }, [E.current, k]);
+  const v = (I, h) => {
+    I.stopPropagation();
+    const $ = I.target.getBoundingClientRect();
+    q({
+      top: $.top + window.scrollY,
+      left: $.left - 30
+    }), g(h);
+  }, M = (I) => {
+    const { active: h, over: $ } = I;
+    if ($ && h.id !== $.id) {
+      const P = n.findIndex((N) => N.id === h.id), y = n.findIndex((N) => N.id === $.id);
+      if (P !== -1 && y !== -1) {
+        const N = [...n], [A] = N.splice(P, 1);
+        N.splice(y, 0, A), i(N);
       }
     }
-  }, S = (v, I) => {
-    const q = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+  }, O = (I, h) => {
+    const $ = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       m && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-        f,
+        j,
         {
           name: "DotsSixVertical",
           hoverable: !0,
@@ -444,99 +508,99 @@ const ii = (r) => {
           height: 20
         }
       ) }),
-      c === "select" && l && /* @__PURE__ */ t.jsx(
-        at,
+      l === "select" && a && /* @__PURE__ */ t.jsx(
+        rt,
         {
-          onChange: (B) => {
-            const p = [...n], b = l.find((U) => U.name === B);
-            if (!b) return;
-            const A = p.map((U) => U.id === v.id ? {
-              ...b,
+          onChange: (P) => {
+            const y = [...n], N = a.find((U) => U.name === P);
+            if (!N) return;
+            const A = y.map((U) => U.id === I.id ? {
+              ...N,
               name: {
-                "en-US": B
+                "en-US": P
               }
             } : U);
-            x({
-              ...v,
+            g({
+              ...I,
               name: {
-                "en-US": B
+                "en-US": P
               }
             }), i([...A]);
           },
-          value: v.name,
-          options: l.filter((B) => !n.find((p) => p.name === B.name)).map((B) => B.name)
+          value: I.name,
+          options: a.filter((P) => !n.find((y) => y.name === P.name)).map((P) => P.name)
         }
       ),
-      /* @__PURE__ */ t.jsxs("div", { className: V.buttons, children: [
-        o && /* @__PURE__ */ t.jsx("div", { className: V.deleteButton, children: /* @__PURE__ */ t.jsx(
-          f,
+      /* @__PURE__ */ t.jsxs("div", { className: Y.buttons, children: [
+        r && /* @__PURE__ */ t.jsx("div", { className: Y.deleteButton, children: /* @__PURE__ */ t.jsx(
+          j,
           {
             name: "Sliders",
             hoverable: !0,
             width: 20,
             height: 20,
-            onClick: (B) => w(B, v)
+            onClick: (P) => v(P, I)
           }
         ) }),
-        g && /* @__PURE__ */ t.jsx("div", { className: V.deleteButton, children: /* @__PURE__ */ t.jsx(
-          f,
+        p && /* @__PURE__ */ t.jsx("div", { className: Y.deleteButton, children: /* @__PURE__ */ t.jsx(
+          j,
           {
             name: "Trash",
             hoverable: !0,
             width: 20,
             height: 20,
             fill: "#C12A2A",
-            onClick: () => i(n.filter((B) => B.id !== v.id))
+            onClick: () => i(n.filter((P) => P.id !== I.id))
           }
         ) })
       ] })
     ] });
     return m ? /* @__PURE__ */ t.jsx(
-      Fe,
+      Ge,
       {
-        product: v,
-        index: I,
-        children: q
+        product: I,
+        index: h,
+        children: $
       },
-      v.id
+      I.id
     ) : /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: V.product,
-        children: q
+        className: Y.product,
+        children: $
       },
-      v.id
+      I.id
     );
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: V.productsBlock, children: [
-    (d || s !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: V.top, children: [
-      d && /* @__PURE__ */ t.jsx("h3", { className: V.title, children: d }),
+  return /* @__PURE__ */ t.jsxs("div", { className: Y.productsBlock, children: [
+    (c || s !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: Y.top, children: [
+      c && /* @__PURE__ */ t.jsx("h3", { className: Y.title, children: c }),
       s !== void 0 && /* @__PURE__ */ t.jsx(
-        it,
+        ot,
         {
           current: s,
-          onChange: (v) => e == null ? void 0 : e(v)
+          onChange: (I) => e == null ? void 0 : e(I)
         }
       )
     ] }),
-    /* @__PURE__ */ t.jsxs("div", { className: V.products, children: [
-      u && /* @__PURE__ */ t.jsx("h5", { className: V.subtitle, children: u }),
+    /* @__PURE__ */ t.jsxs("div", { className: Y.products, children: [
+      u && /* @__PURE__ */ t.jsx("h5", { className: Y.subtitle, children: u }),
       m ? /* @__PURE__ */ t.jsx(
-        gt,
+        pt,
         {
-          sensors: R,
-          onDragEnd: z,
+          sensors: f,
+          onDragEnd: M,
           children: /* @__PURE__ */ t.jsx(
-            ft,
+            _t,
             {
-              items: n.map((v) => v.id),
-              strategy: xt,
-              children: n.map((v, I) => S(v, I))
+              items: n.map((I) => I.id),
+              strategy: gt,
+              children: n.map((I, h) => O(I, h))
             }
           )
         }
-      ) : n.map((v, I) => S(v, I)),
-      C && /* @__PURE__ */ t.jsx(
+      ) : n.map((I, h) => O(I, h)),
+      B && /* @__PURE__ */ t.jsx(
         "div",
         {
           style: {
@@ -545,37 +609,37 @@ const ii = (r) => {
             justifyContent: "center"
           },
           children: /* @__PURE__ */ t.jsx(
-            ot,
+            ct,
             {
               withoutHover: !0,
-              className: W(V.button, {
-                [V.disabled]: !!($ && $ <= n.length || n.length === (l == null ? void 0 : l.length))
+              className: V(Y.button, {
+                [Y.disabled]: !!(d && d <= n.length || n.length === (a == null ? void 0 : a.length))
               }),
               size: "s",
-              disabled: !!($ && $ <= n.length || n.length === (l == null ? void 0 : l.length)),
+              disabled: !!(d && d <= n.length || n.length === (a == null ? void 0 : a.length)),
               onClick: () => {
-                const v = [...n];
-                let I = null;
-                if (l) {
-                  for (let q = 0; q < l.length; q++)
-                    if (!n.find((B) => B.id === l[q].id)) {
-                      I = l[q];
+                const I = [...n];
+                let h = null;
+                if (a) {
+                  for (let $ = 0; $ < a.length; $++)
+                    if (!n.find((P) => P.id === a[$].id)) {
+                      h = a[$];
                       break;
                     }
                 }
-                c === "select" && l && v.push({
-                  name: I ? I.name : l[0].name,
-                  id: (I == null ? void 0 : I.id) || l[0].id,
-                  ...T
-                }), i(v);
+                l === "select" && a && I.push({
+                  name: h ? h.name : a[0].name,
+                  id: (h == null ? void 0 : h.id) || a[0].id,
+                  ...b
+                }), i(I);
               },
               style: {
                 width: "fit-content"
               },
-              children: /* @__PURE__ */ t.jsxs("div", { className: V.addButton, children: [
+              children: /* @__PURE__ */ t.jsxs("div", { className: Y.addButton, children: [
                 /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
                 /* @__PURE__ */ t.jsx(
-                  f,
+                  j,
                   {
                     name: "Plus",
                     width: 16,
@@ -590,99 +654,99 @@ const ii = (r) => {
     ] })
   ] });
 };
-function Ve(r) {
-  const { product: s, children: e } = r, { attributes: n, listeners: i, setNodeRef: d, transform: u, transition: o, isDragging: m } = bt({
+function Qe(o) {
+  const { product: s, children: e } = o, { attributes: n, listeners: i, setNodeRef: c, transform: u, transition: r, isDragging: m } = ft({
     id: s.id
-  }), g = {
-    transform: jt.Transform.toString(u),
-    transition: o
+  }), p = {
+    transform: xt.Transform.toString(u),
+    transition: r
   };
   return /* @__PURE__ */ t.jsx(
     "div",
     {
-      ref: d,
-      style: g,
-      className: `${F.product} ${m ? F.dragging : ""}`,
+      ref: c,
+      style: p,
+      className: `${H.product} ${m ? H.dragging : ""}`,
       ...n,
       ...i,
       children: e
     }
   );
 }
-const oi = (r) => {
+const Ri = (o) => {
   const {
     isActiveItems: s,
     setIsActiveItems: e,
     items: n,
     setItems: i,
-    other: d,
+    other: c,
     title: u,
-    subtitle: o,
+    subtitle: r,
     editable: m = !0,
-    draggable: g = !1,
-    withImage: C = !1,
-    deletable: c = !0,
-    addable: l = !0,
-    itemsType: T,
-    itemsPlaceholder: $ = "",
-    itemsOptions: M,
-    hasRangeSelector: x = !1,
-    rangeSelectorOptions: N,
-    modalOptions: a,
-    addableOptions: j = {},
-    limit: R
-  } = r, [w, z] = _.useState(null), [S, v] = _.useState({
+    draggable: p = !1,
+    withImage: B = !1,
+    deletable: l = !0,
+    addable: a = !0,
+    itemsType: b,
+    itemsPlaceholder: d = "",
+    itemsOptions: S,
+    hasRangeSelector: g = !1,
+    rangeSelectorOptions: k,
+    modalOptions: q,
+    addableOptions: E = {},
+    limit: f
+  } = o, [v, M] = x.useState(null), [O, I] = x.useState({
     top: 0,
     left: 0
-  }), [I, q] = _.useState(null), B = _.useRef(null), [p, b] = _.useState(!1), A = ht(
-    pt(_t, {
+  }), [h, $] = x.useState(null), P = x.useRef(null), [y, N] = x.useState(!1), A = ut(
+    mt(ht, {
       activationConstraint: {
         distance: 5
       }
     })
   );
-  _.useEffect(() => {
-    const h = () => {
-      z(null), b(!1);
+  x.useEffect(() => {
+    const _ = () => {
+      M(null), N(!1);
     };
-    return document.body.addEventListener("click", h), z(null), b(!1), () => {
-      z(null), b(!1), document.body.removeEventListener("click", h);
+    return document.body.addEventListener("click", _), M(null), N(!1), () => {
+      M(null), N(!1), document.body.removeEventListener("click", _);
     };
-  }, []), _.useEffect(() => {
-    if (w) {
-      const h = [...n].map((E) => E.id === w.id ? w : E);
-      i(h);
+  }, []), x.useEffect(() => {
+    if (v) {
+      const _ = [...n].map((R) => R.id === v.id ? v : R);
+      i(_);
     }
-  }, [w]), _.useEffect(() => {
-    if (B.current && I) {
-      const h = B.current.getBoundingClientRect().height, E = window.innerHeight;
-      let P = I.top;
-      P + h > E + window.scrollY - 200 && (P = E + window.scrollY - h - 200), P < 0 && (P = 10), v({
-        top: P,
-        left: I.left
+  }, [v]), x.useEffect(() => {
+    if (P.current && h) {
+      const _ = P.current.getBoundingClientRect().height, R = window.innerHeight;
+      let T = h.top;
+      T + _ > R + window.scrollY - 200 && (T = R + window.scrollY - _ - 200), T < 0 && (T = 10), I({
+        top: T,
+        left: h.left
       });
     }
-  }, [B.current, I]);
-  const U = (h, E) => {
-    h.stopPropagation();
-    const P = h.target.getBoundingClientRect();
-    q({
-      top: P.top + window.scrollY,
-      left: P.left - 30
-    }), z(E), b(!0);
+  }, [P.current, h]);
+  const U = (_, R) => {
+    _.stopPropagation();
+    const T = _.target.getBoundingClientRect();
+    $({
+      top: T.top + window.scrollY,
+      left: T.left - 30
+    }), M(R), N(!0);
   };
-  function O(h) {
-    if (C)
-      return h ? /* @__PURE__ */ t.jsx(
+  function D(_) {
+    if (B)
+      return _ ? /* @__PURE__ */ t.jsx(
         "img",
         {
-          src: `https://imagedelivery.net/${h[0]}/w=1000`,
+          src: `https://imagedelivery.net/${_[0]}/w=1000`,
           alt: "image",
           width: 16,
           height: 16
         }
       ) : /* @__PURE__ */ t.jsx(
-        f,
+        j,
         {
           name: "Image",
           width: 16,
@@ -691,20 +755,20 @@ const oi = (r) => {
         }
       );
   }
-  const L = (h) => {
-    const { active: E, over: P } = h;
-    if (P && E.id !== P.id) {
-      const D = n.findIndex((Y) => Y.id === E.id), et = n.findIndex((Y) => Y.id === P.id);
-      if (D !== -1 && et !== -1) {
-        const Y = [...n], [K] = Y.splice(D, 1);
-        Y.splice(et, 0, K), i(Y);
+  const z = (_) => {
+    const { active: R, over: T } = _;
+    if (T && R.id !== T.id) {
+      const L = n.findIndex((W) => W.id === R.id), nt = n.findIndex((W) => W.id === T.id);
+      if (L !== -1 && nt !== -1) {
+        const W = [...n], [K] = W.splice(L, 1);
+        W.splice(nt, 0, K), i(W);
       }
     }
-  }, Q = (h) => {
-    var P;
-    const E = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-      g && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-        f,
+  }, Z = (_) => {
+    var T;
+    const R = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+      p && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
+        j,
         {
           name: "DotsSixVertical",
           hoverable: !0,
@@ -712,140 +776,140 @@ const oi = (r) => {
           height: 20
         }
       ) }),
-      T === "select" && M && /* @__PURE__ */ t.jsx(
-        at,
+      b === "select" && S && /* @__PURE__ */ t.jsx(
+        rt,
         {
-          onChange: (D) => {
-            const Y = [...n].map((K) => K.id === h.id ? {
-              ...h,
+          onChange: (L) => {
+            const W = [...n].map((K) => K.id === _.id ? {
+              ..._,
               name: {
-                "en-US": D
+                "en-US": L
               }
             } : K);
-            z({
-              ...h,
+            M({
+              ..._,
               name: {
-                "en-US": D
+                "en-US": L
               }
-            }), i([...Y]);
+            }), i([...W]);
           },
-          value: h.name["en-US"],
-          options: M.filter(
-            (D) => !n.find((et) => et.name["en-US"] === D)
+          value: _.name["en-US"],
+          options: S.filter(
+            (L) => !n.find((nt) => nt.name["en-US"] === L)
           ),
-          leftAddon: O(h.images)
+          leftAddon: D(_.images)
         }
       ),
-      T === "input" && /* @__PURE__ */ t.jsx(
-        ut,
+      b === "input" && /* @__PURE__ */ t.jsx(
+        yt,
         {
-          onChange: (D) => {
-            const Y = [...n].map((K) => K.id === h.id ? {
-              ...h,
+          onChange: (L) => {
+            const W = [...n].map((K) => K.id === _.id ? {
+              ..._,
               name: {
-                "en-US": D
+                "en-US": L
               }
             } : K);
-            i([...Y]);
+            i([...W]);
           },
-          value: h.name["en-US"],
-          placeholder: $
+          value: _.name["en-US"],
+          placeholder: d
         }
       ),
-      T === "image" && /* @__PURE__ */ t.jsx(
-        $t,
+      b === "image" && /* @__PURE__ */ t.jsx(
+        Tt,
         {
-          onChange: (D) => {
-            const Y = [...n].map((K) => K.id === h.id ? {
-              ...h,
-              images: D
+          onChange: (L) => {
+            const W = [...n].map((K) => K.id === _.id ? {
+              ..._,
+              images: L
             } : K);
-            i([...Y]);
+            i([...W]);
           },
-          activeImage: (P = n.find((D) => D.id === h.id)) == null ? void 0 : P.images[0]
+          activeImage: (T = n.find((L) => L.id === _.id)) == null ? void 0 : T.images[0]
         }
       ),
-      /* @__PURE__ */ t.jsxs("div", { className: F.buttons, children: [
-        m && /* @__PURE__ */ t.jsx("div", { className: F.deleteButton, children: /* @__PURE__ */ t.jsx(
-          f,
+      /* @__PURE__ */ t.jsxs("div", { className: H.buttons, children: [
+        m && /* @__PURE__ */ t.jsx("div", { className: H.deleteButton, children: /* @__PURE__ */ t.jsx(
+          j,
           {
             name: "Sliders",
             hoverable: !0,
             width: 20,
             height: 20,
-            onClick: (D) => U(D, h)
+            onClick: (L) => U(L, _)
           }
         ) }),
-        c && /* @__PURE__ */ t.jsx("div", { className: F.deleteButton, children: /* @__PURE__ */ t.jsx(
-          f,
+        l && /* @__PURE__ */ t.jsx("div", { className: H.deleteButton, children: /* @__PURE__ */ t.jsx(
+          j,
           {
             name: "Trash",
             hoverable: !0,
             width: 20,
             height: 20,
             fill: "#C12A2A",
-            onClick: () => i(n.filter((D) => D.id !== h.id))
+            onClick: () => i(n.filter((L) => L.id !== _.id))
           }
         ) })
       ] })
     ] });
-    return g ? /* @__PURE__ */ t.jsx(
-      Ve,
+    return p ? /* @__PURE__ */ t.jsx(
+      Qe,
       {
-        product: h,
-        children: E
+        product: _,
+        children: R
       },
-      h.id
+      _.id
     ) : /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: F.product,
-        children: E
+        className: H.product,
+        children: R
       },
-      h.id
+      _.id
     );
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: F.productsBlock, children: [
-    (u || s !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: F.top, children: [
-      u && /* @__PURE__ */ t.jsx("h3", { className: F.title, children: u }),
+  return /* @__PURE__ */ t.jsxs("div", { className: H.productsBlock, children: [
+    (u || s !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: H.top, children: [
+      u && /* @__PURE__ */ t.jsx("h3", { className: H.title, children: u }),
       s !== void 0 && /* @__PURE__ */ t.jsx(
-        it,
+        ot,
         {
           current: s,
-          onChange: (h) => e == null ? void 0 : e(h)
+          onChange: (_) => e == null ? void 0 : e(_)
         }
       )
     ] }),
-    w && m && a && p && /* @__PURE__ */ t.jsx(
-      wt,
+    v && m && q && y && /* @__PURE__ */ t.jsx(
+      Pt,
       {
-        ref: B,
-        activeItem: w,
-        setActiveItem: z,
-        popupPosition: S,
-        modalOptions: a,
-        setIsOpenModal: b
+        ref: P,
+        activeItem: v,
+        setActiveItem: M,
+        popupPosition: O,
+        modalOptions: q,
+        setIsOpenModal: N
       }
     ),
-    x && N && /* @__PURE__ */ t.jsx(kt, { ...N }),
-    /* @__PURE__ */ t.jsxs("div", { className: F.products, children: [
-      o && /* @__PURE__ */ t.jsx("h5", { className: F.subtitle, children: o }),
-      g ? /* @__PURE__ */ t.jsx(
-        gt,
+    g && k && /* @__PURE__ */ t.jsx(St, { ...k }),
+    /* @__PURE__ */ t.jsxs("div", { className: H.products, children: [
+      r && /* @__PURE__ */ t.jsx("h5", { className: H.subtitle, children: r }),
+      p ? /* @__PURE__ */ t.jsx(
+        pt,
         {
           sensors: A,
-          onDragEnd: L,
+          onDragEnd: z,
           children: /* @__PURE__ */ t.jsx(
-            ft,
+            _t,
             {
-              items: n.map((h) => h.id),
-              strategy: xt,
-              children: n.map((h) => Q(h))
+              items: n.map((_) => _.id),
+              strategy: gt,
+              children: n.map((_) => Z(_))
             }
           )
         }
-      ) : n.map((h) => Q(h)),
-      l && /* @__PURE__ */ t.jsx(
+      ) : n.map((_) => Z(_)),
+      a && /* @__PURE__ */ t.jsx(
         "div",
         {
           style: {
@@ -854,55 +918,55 @@ const oi = (r) => {
             justifyContent: "center"
           },
           children: /* @__PURE__ */ t.jsx(
-            ot,
+            ct,
             {
               withoutHover: !0,
-              className: W(F.button, {
-                [F.disabled]: !!(R && R <= n.length)
+              className: V(H.button, {
+                [H.disabled]: !!(f && f <= n.length)
               }),
               size: "s",
-              disabled: !!(R && R <= n.length),
+              disabled: !!(f && f <= n.length),
               onClick: () => {
-                const h = [...n];
-                let E = null;
-                if (M) {
-                  for (let P = 0; P < M.length; P++)
-                    if (!n.find((D) => D.name["en-US"] === M[P])) {
-                      E = M[P];
+                const _ = [...n];
+                let R = null;
+                if (S) {
+                  for (let T = 0; T < S.length; T++)
+                    if (!n.find((L) => L.name["en-US"] === S[T])) {
+                      R = S[T];
                       break;
                     }
                 }
-                T === "select" && M ? h.push({
+                b === "select" && S ? _.push({
                   name: {
-                    "en-US": E || M[0]
+                    "en-US": R || S[0]
                   },
-                  id: st(),
-                  ...j,
+                  id: at(),
+                  ...E,
                   maxSymbols: 100
                   // пример значения
-                }) : T === "input" ? h.push({
+                }) : b === "input" ? _.push({
                   name: {
                     "en-US": ""
                   },
-                  id: st(),
-                  ...j,
+                  id: at(),
+                  ...E,
                   maxSymbols: 100
-                }) : h.push({
+                }) : _.push({
                   name: {
                     "en-US": `Image ${n.length + 1}`
                   },
-                  id: st(),
-                  ...j,
+                  id: at(),
+                  ...E,
                   maxSymbols: 100
-                }), i(h);
+                }), i(_);
               },
               style: {
                 width: "fit-content"
               },
-              children: /* @__PURE__ */ t.jsxs("div", { className: F.addButton, children: [
+              children: /* @__PURE__ */ t.jsxs("div", { className: H.addButton, children: [
                 /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
                 /* @__PURE__ */ t.jsx(
-                  f,
+                  j,
                   {
                     name: "Plus",
                     width: 16,
@@ -915,120 +979,120 @@ const oi = (r) => {
         }
       )
     ] }),
-    d !== void 0 && /* @__PURE__ */ t.jsx(mt, { items: d })
+    c !== void 0 && /* @__PURE__ */ t.jsx(It, { items: c })
   ] });
-}, Ye = "_subtitle_jql1y_1", Ge = "_header_jql1y_8", We = "_text_jql1y_9", Je = "_productsBlock_jql1y_10", Xe = "_buttonsBlock_jql1y_11", Ke = "_top_jql1y_23", Qe = "_itemsBlock_jql1y_32", Ze = "_typeTexts_jql1y_38", tn = "_block_jql1y_45", en = "_active_jql1y_58", nn = "_products_jql1y_10", sn = "_product_jql1y_10", on = "_button_jql1y_11", an = "_image_jql1y_88", cn = "_info_jql1y_95", ln = "_name_jql1y_107", rn = "_buttons_jql1y_11", dn = "_modal_jql1y_118", un = "_other_jql1y_138", mn = "_options_jql1y_144", hn = "_addButton_jql1y_150", pn = "_deleteButton_jql1y_165", Z = {
-  subtitle: Ye,
-  header: Ge,
-  text: We,
-  productsBlock: Je,
-  buttonsBlock: Xe,
-  top: Ke,
-  itemsBlock: Qe,
-  typeTexts: Ze,
-  block: tn,
-  active: en,
-  products: nn,
-  product: sn,
-  button: on,
-  image: an,
-  info: cn,
-  name: ln,
-  buttons: rn,
-  modal: dn,
-  other: un,
-  options: mn,
-  addButton: hn,
-  deleteButton: pn
-}, _n = (r) => {
-  const { buttons: s, setButtons: e, deletable: n = !0, addable: i = !0, editableLink: d = !0 } = r, { pages: u } = Bt(), [o, m] = _.useState(null), [g, C] = _.useState({
+}, Xe = "_subtitle_jql1y_1", Je = "_header_jql1y_8", Ke = "_text_jql1y_9", Ze = "_productsBlock_jql1y_10", tn = "_buttonsBlock_jql1y_11", en = "_top_jql1y_23", nn = "_itemsBlock_jql1y_32", sn = "_typeTexts_jql1y_38", an = "_block_jql1y_45", on = "_active_jql1y_58", cn = "_products_jql1y_10", rn = "_product_jql1y_10", ln = "_button_jql1y_11", dn = "_image_jql1y_88", un = "_info_jql1y_95", mn = "_name_jql1y_107", hn = "_buttons_jql1y_11", pn = "_modal_jql1y_118", _n = "_other_jql1y_138", gn = "_options_jql1y_144", fn = "_addButton_jql1y_150", xn = "_deleteButton_jql1y_165", tt = {
+  subtitle: Xe,
+  header: Je,
+  text: Ke,
+  productsBlock: Ze,
+  buttonsBlock: tn,
+  top: en,
+  itemsBlock: nn,
+  typeTexts: sn,
+  block: an,
+  active: on,
+  products: cn,
+  product: rn,
+  button: ln,
+  image: dn,
+  info: un,
+  name: mn,
+  buttons: hn,
+  modal: pn,
+  other: _n,
+  options: gn,
+  addButton: fn,
+  deleteButton: xn
+}, vn = (o) => {
+  const { buttons: s, setButtons: e, deletable: n = !0, addable: i = !0, editableLink: c = !0 } = o, { pages: u } = lt(), [r, m] = x.useState(null), [p, B] = x.useState({
     top: 0,
     left: 0
-  }), [c, l] = _.useState(null), T = _.useRef(null);
-  _.useEffect(() => {
-    if (o) {
-      const x = [...s].map((N) => N.id === o.id ? o : N);
-      e(x);
+  }), [l, a] = x.useState(null), b = x.useRef(null);
+  x.useEffect(() => {
+    if (r) {
+      const g = [...s].map((k) => k.id === r.id ? r : k);
+      e(g);
     }
-  }, [o]), _.useEffect(() => {
-    if (T.current && c) {
-      const x = T.current.getBoundingClientRect().height, N = window.innerHeight;
-      let a = c.top;
-      a + x > N + window.scrollY - 200 && (a = N + window.scrollY - x - 200), a < 0 && (a = 10), C({
-        top: a,
-        left: c.left
+  }, [r]), x.useEffect(() => {
+    if (b.current && l) {
+      const g = b.current.getBoundingClientRect().height, k = window.innerHeight;
+      let q = l.top;
+      q + g > k + window.scrollY - 200 && (q = k + window.scrollY - g - 200), q < 0 && (q = 10), B({
+        top: q,
+        left: l.left
       });
     }
-  }, [T.current, c]);
-  const $ = (x, N) => {
-    x.stopPropagation();
-    const a = x.target.getBoundingClientRect();
-    l({
-      top: a.top + window.scrollY - 70,
-      left: a.left - (i ? 30 : 65)
-    }), m(N);
-  }, M = (x, N) => {
-    const a = [...s], j = {
-      ...x,
+  }, [b.current, l]);
+  const d = (g, k) => {
+    g.stopPropagation();
+    const q = g.target.getBoundingClientRect();
+    a({
+      top: q.top + window.scrollY - 70,
+      left: q.left - (i ? 30 : 65)
+    }), m(k);
+  }, S = (g, k) => {
+    const q = [...s], E = {
+      ...g,
       id: Math.random().toString(36).substr(2, 9)
       // Генерируем новый уникальный ID
     };
-    a.splice(N + 1, 0, j), e(a);
+    q.splice(k + 1, 0, E), e(q);
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: Z.products, children: [
-    /* @__PURE__ */ t.jsx("h5", { className: Z.subtitle, children: "Button Type" }),
-    s.map((x, N) => /* @__PURE__ */ t.jsxs(
+  return /* @__PURE__ */ t.jsxs("div", { className: tt.products, children: [
+    /* @__PURE__ */ t.jsx("h5", { className: tt.subtitle, children: "Button Type" }),
+    s.map((g, k) => /* @__PURE__ */ t.jsxs(
       "div",
       {
-        className: Z.product,
+        className: tt.product,
         children: [
           /* @__PURE__ */ t.jsx(
-            at,
+            rt,
             {
-              onChange: (a) => {
-                const R = [...s].map((w) => w.id === x.id ? {
-                  ...x,
-                  type: a
-                } : w);
-                e(R);
+              onChange: (q) => {
+                const f = [...s].map((v) => v.id === g.id ? {
+                  ...g,
+                  type: q
+                } : v);
+                e(f);
               },
-              value: x.type,
+              value: g.type,
               options: ["Primary", "Secondary", "Tertiary"]
             }
           ),
-          /* @__PURE__ */ t.jsxs("div", { className: Z.buttons, children: [
-            /* @__PURE__ */ t.jsx("div", { className: Z.deleteButton, children: /* @__PURE__ */ t.jsx(
-              f,
+          /* @__PURE__ */ t.jsxs("div", { className: tt.buttons, children: [
+            /* @__PURE__ */ t.jsx("div", { className: tt.deleteButton, children: /* @__PURE__ */ t.jsx(
+              j,
               {
                 name: "Copy",
                 hoverable: !0,
                 width: 20,
                 height: 20,
                 onClick: () => {
-                  M(x, N);
+                  S(g, k);
                 }
               }
             ) }),
-            /* @__PURE__ */ t.jsx("div", { className: Z.deleteButton, children: /* @__PURE__ */ t.jsx(
-              f,
+            /* @__PURE__ */ t.jsx("div", { className: tt.deleteButton, children: /* @__PURE__ */ t.jsx(
+              j,
               {
                 name: "Sliders",
                 hoverable: !0,
                 width: 20,
                 height: 20,
-                onClick: (a) => {
-                  $(a, x);
+                onClick: (q) => {
+                  d(q, g);
                 }
               }
             ) }),
-            n && /* @__PURE__ */ t.jsx("div", { className: Z.deleteButton, children: /* @__PURE__ */ t.jsx(
-              f,
+            n && /* @__PURE__ */ t.jsx("div", { className: tt.deleteButton, children: /* @__PURE__ */ t.jsx(
+              j,
               {
                 name: "Trash",
                 hoverable: !0,
                 onClick: () => {
-                  const a = s.filter((j) => j.id !== x.id);
-                  e(a);
+                  const q = s.filter((E) => E.id !== g.id);
+                  e(q);
                 },
                 width: 20,
                 height: 20,
@@ -1038,16 +1102,16 @@ const oi = (r) => {
           ] })
         ]
       },
-      x.id
+      g.id
     )),
-    o && /* @__PURE__ */ t.jsx(
-      Pt,
+    r && /* @__PURE__ */ t.jsx(
+      Mt,
       {
-        ref: T,
-        activeButton: o,
+        ref: b,
+        activeButton: r,
         setActiveButton: m,
-        popupPosition: g,
-        editableLink: d
+        popupPosition: p,
+        editableLink: c
       }
     ),
     i && /* @__PURE__ */ t.jsx(
@@ -1059,16 +1123,16 @@ const oi = (r) => {
           justifyContent: "center"
         },
         children: /* @__PURE__ */ t.jsx(
-          ot,
+          ct,
           {
             withoutHover: !0,
-            className: Z.button,
+            className: tt.button,
             size: "s",
             onClick: () => {
-              const x = [...s];
-              d ? x.push({
+              const g = [...s];
+              c ? g.push({
                 type: "Primary",
-                id: st(),
+                id: at(),
                 typesText: [],
                 text: {
                   "en-US": "Button Name"
@@ -1076,9 +1140,9 @@ const oi = (r) => {
                 destination: "Go to Page",
                 page: u ? Object.values(u)[0].path : "/",
                 openInNewTab: !1
-              }) : x.push({
+              }) : g.push({
                 type: "Primary",
-                id: st(),
+                id: at(),
                 typesText: [],
                 text: {
                   "en-US": "Create Ticket"
@@ -1086,15 +1150,15 @@ const oi = (r) => {
                 destination: "Go to Page",
                 page: u ? Object.values(u)[0].path : "/",
                 openInNewTab: !1
-              }), e(x);
+              }), e(g);
             },
             style: {
               width: "fit-content"
             },
-            children: /* @__PURE__ */ t.jsxs("div", { className: Z.addButton, children: [
+            children: /* @__PURE__ */ t.jsxs("div", { className: tt.addButton, children: [
               /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
               /* @__PURE__ */ t.jsx(
-                f,
+                j,
                 {
                   name: "Plus",
                   width: 16,
@@ -1107,21 +1171,21 @@ const oi = (r) => {
       }
     )
   ] });
-}, ai = (r) => {
+}, Li = (o) => {
   const {
     isActiveButtons: s,
     setIsActiveButtons: e,
     buttons: n,
     setButtons: i,
-    editableLink: d = !0,
+    editableLink: c = !0,
     addable: u = !0,
-    deletable: o = !0
-  } = r;
-  return /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsxs("div", { className: rt.buttonsBlock, children: [
-    /* @__PURE__ */ t.jsxs("div", { className: rt.top, children: [
-      /* @__PURE__ */ t.jsx("h3", { className: rt.title, children: "Buttons" }),
+    deletable: r = !0
+  } = o;
+  return /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsxs("div", { className: jt.buttonsBlock, children: [
+    /* @__PURE__ */ t.jsxs("div", { className: jt.top, children: [
+      /* @__PURE__ */ t.jsx("h3", { className: jt.title, children: "Buttons" }),
       /* @__PURE__ */ t.jsx(
-        it,
+        ot,
         {
           current: s,
           onChange: (m) => e(m)
@@ -1129,29 +1193,29 @@ const oi = (r) => {
       )
     ] }),
     s && /* @__PURE__ */ t.jsx(
-      _n,
+      vn,
       {
         buttons: n,
         setButtons: i,
-        editableLink: d,
+        editableLink: c,
         addable: u,
-        deletable: o
+        deletable: r
       }
     )
   ] }) });
 };
-function gn(r) {
-  const { product: s, children: e } = r, { attributes: n, listeners: i, setNodeRef: d, transform: u, transition: o, isDragging: m } = bt({
+function jn(o) {
+  const { product: s, children: e } = o, { attributes: n, listeners: i, setNodeRef: c, transform: u, transition: r, isDragging: m } = ft({
     id: String(s.listingId)
-  }), g = {
-    transform: jt.Transform.toString(u),
-    transition: o
+  }), p = {
+    transform: xt.Transform.toString(u),
+    transition: r
   };
   return /* @__PURE__ */ t.jsx(
     "div",
     {
-      ref: d,
-      style: g,
+      ref: c,
+      style: p,
       className: `${G.product} ${m ? G.dragging : ""}`,
       ...n,
       ...i,
@@ -1159,69 +1223,69 @@ function gn(r) {
     }
   );
 }
-const ci = (r) => {
+const zi = (o) => {
   const {
     isActiveItems: s,
     setIsActiveItems: e,
     items: n,
     setItems: i,
-    other: d,
+    other: c,
     title: u,
-    subtitle: o,
+    subtitle: r,
     editable: m = !0,
-    draggable: g = !1,
-    withImage: C = !1,
-    deletable: c = !0,
-    addable: l = !0,
-    itemsType: T,
-    itemsOptions: $,
-    limit: M
-  } = r, [x, N] = _.useState(
+    draggable: p = !1,
+    withImage: B = !1,
+    deletable: l = !0,
+    addable: a = !0,
+    itemsType: b,
+    itemsOptions: d,
+    limit: S
+  } = o, [g, k] = x.useState(
     null
-  ), [a, j] = _.useState({
+  ), [q, E] = x.useState({
     top: 0,
     left: 0
-  }), [R, w] = _.useState(!1), z = ht(
-    pt(_t, {
+  }), [f, v] = x.useState(!1), M = ut(
+    mt(ht, {
       activationConstraint: {
         distance: 5
       }
     })
   );
-  _.useEffect(() => {
-    const p = () => {
-      N(null), w(!1);
+  x.useEffect(() => {
+    const y = () => {
+      k(null), v(!1);
     };
-    return document.body.addEventListener("click", p), N(null), w(!1), () => {
-      N(null), w(!1), document.body.removeEventListener("click", p);
+    return document.body.addEventListener("click", y), k(null), v(!1), () => {
+      k(null), v(!1), document.body.removeEventListener("click", y);
     };
-  }, []), _.useEffect(() => {
-    if (x) {
-      const p = [...n].map((b) => b.listingId === x.listingId ? x : b);
-      i(p);
+  }, []), x.useEffect(() => {
+    if (g) {
+      const y = [...n].map((N) => N.listingId === g.listingId ? g : N);
+      i(y);
     }
-  }, [x]);
-  const S = (p, b) => {
-    p.stopPropagation();
-    const A = p.target.getBoundingClientRect(), U = 100, O = window.innerHeight;
-    let L = A.top + window.scrollY;
-    L + U > O && (L = O - U - 20), w(!0), j({
-      top: L - 80,
+  }, [g]);
+  const O = (y, N) => {
+    y.stopPropagation();
+    const A = y.target.getBoundingClientRect(), U = 100, D = window.innerHeight;
+    let z = A.top + window.scrollY;
+    z + U > D && (z = D - U - 20), v(!0), E({
+      top: z - 80,
       left: A.left - 30
-    }), N(b);
+    }), k(N);
   };
-  function v(p) {
-    if (C)
-      return p ? /* @__PURE__ */ t.jsx(
+  function I(y) {
+    if (B)
+      return y ? /* @__PURE__ */ t.jsx(
         "img",
         {
-          src: `https://imagedelivery.net/${p}/w=1000`,
+          src: `https://imagedelivery.net/${y}/w=1000`,
           alt: "image",
           width: 16,
           height: 16
         }
       ) : /* @__PURE__ */ t.jsx(
-        f,
+        j,
         {
           name: "Image",
           width: 16,
@@ -1230,21 +1294,21 @@ const ci = (r) => {
         }
       );
   }
-  const I = (p) => {
-    const { active: b, over: A } = p;
-    if (A && b.id !== A.id) {
-      const U = n.findIndex((L) => String(L.listingId) === b.id), O = n.findIndex((L) => String(L.listingId) === A.id);
-      if (U !== -1 && O !== -1) {
-        const L = [...n], [Q] = L.splice(U, 1);
-        L.splice(O, 0, Q), i(L);
+  const h = (y) => {
+    const { active: N, over: A } = y;
+    if (A && N.id !== A.id) {
+      const U = n.findIndex((z) => String(z.listingId) === N.id), D = n.findIndex((z) => String(z.listingId) === A.id);
+      if (U !== -1 && D !== -1) {
+        const z = [...n], [Z] = z.splice(U, 1);
+        z.splice(D, 0, Z), i(z);
       }
     }
-  }, q = (p, b) => {
-    const A = $.find((O) => p.listingId === O.id);
+  }, $ = (y, N) => {
+    const A = d.find((D) => y.listingId === D.id);
     if (!A) return null;
     const U = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-      g && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-        f,
+      p && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
+        j,
         {
           name: "DotsSixVertical",
           hoverable: !0,
@@ -1252,108 +1316,108 @@ const ci = (r) => {
           height: 20
         }
       ) }),
-      T === "select" && /* @__PURE__ */ t.jsx(
-        at,
+      b === "select" && /* @__PURE__ */ t.jsx(
+        rt,
         {
-          onChange: (O) => {
-            const L = [...n], Q = $.find((P) => P.productData.name === O);
-            if (!Q) return;
-            const h = {
-              listingId: Q.id,
-              image: Q.productData.images.length > 0 ? Q.productData.images[0].cfId : ""
-            }, E = L.map((P) => P.listingId === p.listingId ? h : P);
-            N(h), i([...E]);
+          onChange: (D) => {
+            const z = [...n], Z = d.find((T) => T.productData.name === D);
+            if (!Z) return;
+            const _ = {
+              listingId: Z.id,
+              image: Z.productData.images.length > 0 ? Z.productData.images[0].cfId : ""
+            }, R = z.map((T) => T.listingId === y.listingId ? _ : T);
+            k(_), i([...R]);
           },
           value: A.productData.name,
           options: [
-            ...$.filter((O) => !n.find((L) => L.listingId === O.id)).map((O) => O.productData.name)
+            ...d.filter((D) => !n.find((z) => z.listingId === D.id)).map((D) => D.productData.name)
           ],
-          leftAddon: v(
-            p.image || A.productData.images.length > 0 && A.productData.images[0].cfId || ""
+          leftAddon: I(
+            y.image || A.productData.images.length > 0 && A.productData.images[0].cfId || ""
           )
         },
-        b
+        N
       ),
       /* @__PURE__ */ t.jsxs("div", { className: G.buttons, children: [
         m && /* @__PURE__ */ t.jsx("div", { className: G.deleteButton, children: /* @__PURE__ */ t.jsx(
-          f,
+          j,
           {
             name: "Sliders",
             hoverable: !0,
             width: 20,
             height: 20,
-            onClick: (O) => S(O, p)
+            onClick: (D) => O(D, y)
           }
         ) }),
-        c && /* @__PURE__ */ t.jsx("div", { className: G.deleteButton, children: /* @__PURE__ */ t.jsx(
-          f,
+        l && /* @__PURE__ */ t.jsx("div", { className: G.deleteButton, children: /* @__PURE__ */ t.jsx(
+          j,
           {
             name: "Trash",
             hoverable: !0,
             width: 20,
             height: 20,
             fill: "#C12A2A",
-            onClick: () => i(n.filter((O) => O !== p))
+            onClick: () => i(n.filter((D) => D !== y))
           }
         ) })
       ] })
     ] });
-    return g ? /* @__PURE__ */ t.jsx(
-      gn,
+    return p ? /* @__PURE__ */ t.jsx(
+      jn,
       {
-        product: p,
+        product: y,
         children: U
       },
-      p.listingId
+      y.listingId
     ) : /* @__PURE__ */ t.jsx(
       "div",
       {
         className: G.product,
         children: U
       },
-      p.listingId
+      y.listingId
     );
-  }, B = _.useRef(null);
+  }, P = x.useRef(null);
   return /* @__PURE__ */ t.jsxs("div", { className: G.productsBlock, children: [
     (u || s !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: G.top, children: [
       u && /* @__PURE__ */ t.jsx("h3", { className: G.title, children: u }),
       s !== void 0 && /* @__PURE__ */ t.jsx(
-        it,
+        ot,
         {
           current: s,
-          onChange: (p) => e == null ? void 0 : e(p)
+          onChange: (y) => e == null ? void 0 : e(y)
         }
       )
     ] }),
-    R && x && /* @__PURE__ */ t.jsx(
-      Mt,
+    f && g && /* @__PURE__ */ t.jsx(
+      At,
       {
-        ref: B,
-        activeItem: x,
-        setActiveItem: N,
-        setIsOpenModal: w,
-        popupPosition: a,
-        itemsOptions: $
+        ref: P,
+        activeItem: g,
+        setActiveItem: k,
+        setIsOpenModal: v,
+        popupPosition: q,
+        itemsOptions: d
       }
     ),
     s && /* @__PURE__ */ t.jsxs("div", { className: G.products, children: [
-      o && /* @__PURE__ */ t.jsx("h5", { className: G.subtitle, children: o }),
-      g ? /* @__PURE__ */ t.jsx(
-        gt,
+      r && /* @__PURE__ */ t.jsx("h5", { className: G.subtitle, children: r }),
+      p ? /* @__PURE__ */ t.jsx(
+        pt,
         {
-          sensors: z,
-          onDragEnd: I,
+          sensors: M,
+          onDragEnd: h,
           children: /* @__PURE__ */ t.jsx(
-            ft,
+            _t,
             {
-              items: n.map((p) => String(p.listingId)),
-              strategy: xt,
-              children: n.map((p, b) => q(p, b))
+              items: n.map((y) => String(y.listingId)),
+              strategy: gt,
+              children: n.map((y, N) => $(y, N))
             }
           )
         }
-      ) : n.map((p, b) => q(p, b)),
-      l && /* @__PURE__ */ t.jsx(
+      ) : n.map((y, N) => $(y, N)),
+      a && /* @__PURE__ */ t.jsx(
         "div",
         {
           style: {
@@ -1362,31 +1426,31 @@ const ci = (r) => {
             justifyContent: "center"
           },
           children: /* @__PURE__ */ t.jsx(
-            ot,
+            ct,
             {
               withoutHover: !0,
               className: G.button,
               size: "s",
               onClick: () => {
-                const p = [...n];
-                for (let b = 0; b < $.length; b++)
-                  if (!n.find((A) => A.listingId === $[b].id)) {
-                    p.push({
-                      listingId: $[b].id,
-                      image: $[b].productData.images.length > 0 ? $[b].productData.images[0].cfId : ""
+                const y = [...n];
+                for (let N = 0; N < d.length; N++)
+                  if (!n.find((A) => A.listingId === d[N].id)) {
+                    y.push({
+                      listingId: d[N].id,
+                      image: d[N].productData.images.length > 0 ? d[N].productData.images[0].cfId : ""
                     });
                     break;
                   }
-                i(p);
+                i(y);
               },
-              disabled: n.length === (M || $.length),
+              disabled: n.length === (S || d.length),
               style: {
                 width: "fit-content"
               },
               children: /* @__PURE__ */ t.jsxs("div", { className: G.addButton, children: [
                 /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
                 /* @__PURE__ */ t.jsx(
-                  f,
+                  j,
                   {
                     name: "Plus",
                     width: 16,
@@ -1399,151 +1463,154 @@ const ci = (r) => {
         }
       )
     ] }),
-    s && d !== void 0 && /* @__PURE__ */ t.jsx(mt, { items: d })
+    s && c !== void 0 && /* @__PURE__ */ t.jsx(It, { items: c })
   ] });
-}, fn = "_options_6cemk_1", xn = "_price_6cemk_12", bn = "_oldPrice_6cemk_19", jn = "_newPrice_6cemk_27", vn = "_animate_6cemk_34", yn = "_appearAndBounce_6cemk_1", kn = "_meta_6cemk_52", Nn = "_info_6cemk_58", In = "_infoRight_6cemk_66", Sn = "_buttons_6cemk_73", Cn = "_variants_6cemk_80", wn = "_variant_6cemk_80", $n = "_stock_6cemk_98", Bn = "_variantInfo_6cemk_105", Pn = "_quantity_6cemk_111", Mn = "_count_6cemk_118", Tn = "_focused_6cemk_135", qn = "_button_6cemk_73", An = "_activeVariant_6cemk_161", On = "_chargeTypes_6cemk_165", En = "_charge_6cemk_165", Dn = "_chargeActive_6cemk_190", Rn = "_title_6cemk_198", k = {
-  options: fn,
-  price: xn,
-  oldPrice: bn,
-  newPrice: jn,
-  animate: vn,
-  appearAndBounce: yn,
-  meta: kn,
-  info: Nn,
-  infoRight: In,
-  buttons: Sn,
-  variants: Cn,
-  variant: wn,
-  stock: $n,
-  variantInfo: Bn,
-  quantity: Pn,
-  count: Mn,
-  focused: Tn,
-  button: qn,
-  activeVariant: An,
-  chargeTypes: On,
-  charge: En,
-  chargeActive: Dn,
-  title: Rn
+}, bn = "_options_1vlf9_1", yn = "_price_1vlf9_13", In = "_oldPrice_1vlf9_20", Nn = "_newPrice_1vlf9_28", kn = "_animate_1vlf9_35", Cn = "_appearAndBounce_1vlf9_1", Sn = "_meta_1vlf9_53", $n = "_info_1vlf9_59", wn = "_infoRight_1vlf9_67", qn = "_buttons_1vlf9_74", Bn = "_variants_1vlf9_81", Pn = "_variant_1vlf9_81", Tn = "_stock_1vlf9_99", Mn = "_variantInfo_1vlf9_106", An = "_quantity_1vlf9_112", On = "_count_1vlf9_119", En = "_focused_1vlf9_136", Dn = "_button_1vlf9_74", Rn = "_activeVariant_1vlf9_162", Ln = "_chargeTypes_1vlf9_166", zn = "_charge_1vlf9_166", Fn = "_chargeActive_1vlf9_191", Vn = "_title_1vlf9_199", w = {
+  options: bn,
+  price: yn,
+  oldPrice: In,
+  newPrice: Nn,
+  animate: kn,
+  appearAndBounce: Cn,
+  meta: Sn,
+  info: $n,
+  infoRight: wn,
+  buttons: qn,
+  variants: Bn,
+  variant: Pn,
+  stock: Tn,
+  variantInfo: Mn,
+  quantity: An,
+  count: On,
+  focused: En,
+  button: Dn,
+  activeVariant: Rn,
+  chargeTypes: Ln,
+  charge: zn,
+  chargeActive: Fn,
+  title: Vn
 };
-var St = /* @__PURE__ */ ((r) => (r.ONE_TIME = "One-Time", r.RECURRING = "Subscribe & Save", r))(St || {});
-const li = (r) => {
-  var x, N;
-  const { variants: s } = r, [e, n] = _.useState(s[0]), [i, d] = _.useState(e.chargeTypes[0]), u = lt(), [o, m] = _.useState(1), { reset: g, addProductToCart: C } = vt(), [c, l] = _.useState(!1);
-  _.useEffect(() => {
-    l(!0);
-    const a = setTimeout(() => l(!1), 600);
-    return () => clearTimeout(a);
-  }, [o]);
-  async function T() {
-    await C({
-      productId: r.id,
+var Ct = /* @__PURE__ */ ((o) => (o.ONE_TIME = "One-Time", o.RECURRING = "Subscribe & Save", o))(Ct || {});
+const Un = (o) => {
+  var q, E;
+  const { variants: s } = o, [e, n] = x.useState(s[0]), [i, c] = x.useState(
+    e.chargeTypes ? e.chargeTypes[0] : "ONE_TIME"
+  ), u = vt(), [r, m] = x.useState(1), { products: p, cart: B, reset: l, addProductToCart: a } = dt(), [b, d] = x.useState(!1);
+  console.log(B), x.useEffect(() => {
+    d(!0);
+    const f = setTimeout(() => d(!1), 600);
+    return () => clearTimeout(f);
+  }, [r]);
+  async function S() {
+    console.log("Products P", p), await a({
+      productId: o.id,
       productVariantId: e.id,
-      quantity: o
+      quantity: r
     });
   }
-  function $() {
-    g(), T(), u("/checkout");
+  function g() {
+    l(), S(), u("/checkout");
   }
-  function M(a) {
-    if (a >= 864e5) {
-      const S = Math.floor(a / 864e5);
-      return `${S} ${S === 1 ? "day" : "days"}`;
-    } else if (a >= 36e5) {
-      const S = Math.floor(a / 36e5);
-      return `${S} ${S === 1 ? "hour" : "hours"}`;
-    } else if (a >= 6e4) {
-      const S = Math.floor(a / 6e4);
-      return `${S} ${S === 1 ? "minute" : "minutes"}`;
+  function k(f) {
+    if (f >= 864e5) {
+      const h = Math.floor(f / 864e5);
+      return `${h} ${h === 1 ? "day" : "days"}`;
+    } else if (f >= 36e5) {
+      const h = Math.floor(f / 36e5);
+      return `${h} ${h === 1 ? "hour" : "hours"}`;
+    } else if (f >= 6e4) {
+      const h = Math.floor(f / 6e4);
+      return `${h} ${h === 1 ? "minute" : "minutes"}`;
     } else {
-      const S = Math.floor(a / 1e3);
-      return `${S} ${S === 1 ? "second" : "seconds"}`;
+      const h = Math.floor(f / 1e3);
+      return `${h} ${h === 1 ? "second" : "seconds"}`;
     }
   }
-  return _.useEffect(() => {
-    (e.quantity.available === 0 || !e.quantity.available) && m(0);
-  }, [e.quantity.available]), /* @__PURE__ */ t.jsxs("div", { className: k.options, children: [
-    e.chargeTypes.length > 1 && /* @__PURE__ */ t.jsx("div", { className: k.chargeTypes, children: e.chargeTypes.map((a) => /* @__PURE__ */ t.jsx(
+  return x.useEffect(() => {
+    e.quantity && e.quantity.available === 0 && m(0);
+  }, [e.quantity.available]), /* @__PURE__ */ t.jsxs("div", { className: w.options, children: [
+    e.chargeTypes && e.chargeTypes.length > 1 && /* @__PURE__ */ t.jsx("div", { className: w.chargeTypes, children: e.chargeTypes.map((f) => /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: W(k.charge, {
-          [k.chargeActive]: i === a
+        className: V(w.charge, {
+          [w.chargeActive]: i === f
         }),
-        onClick: () => d(a),
-        children: St[a]
+        onClick: () => c(f),
+        children: Ct[f]
       },
-      a
+      f
     )) }),
-    /* @__PURE__ */ t.jsx("div", { className: k.variants, children: s.map((a) => {
-      var j;
+    /* @__PURE__ */ t.jsx("div", { className: w.variants, children: s.map((f) => {
+      var v, M;
       return /* @__PURE__ */ t.jsxs(
         "div",
         {
-          className: W(k.variant, {
-            [k.activeVariant]: e.id === a.id
+          className: V(w.variant, {
+            [w.activeVariant]: e.id === f.id
           }),
-          onClick: () => n(a),
+          onClick: () => n(f),
           children: [
-            /* @__PURE__ */ t.jsxs("div", { className: k.variantInfo, children: [
-              /* @__PURE__ */ t.jsx("span", { className: k.title, children: a.name }),
+            /* @__PURE__ */ t.jsxs("div", { className: w.variantInfo, children: [
+              /* @__PURE__ */ t.jsx("span", { className: w.title, children: Nt(f.name) }),
               /* @__PURE__ */ t.jsxs("span", { children: [
                 "$",
-                i === "ONE_TIME" ? a.price.amount : a.subscriptionSettings ? a.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: k.stock, children: [
-              ((j = a.quantity.restrictions) == null ? void 0 : j.max) || a.quantity.available || 0,
-              " in stock"
+            /* @__PURE__ */ t.jsx("div", { children: i === "ONE_TIME" && /* @__PURE__ */ t.jsxs("span", { className: w.stock, children: [
+              (v = f.quantity.restrictions) != null && v.max || f.quantity.available !== void 0 ? ((M = f.quantity.restrictions) == null ? void 0 : M.max) || f.quantity.available : "∞",
+              " ",
+              "in stock"
             ] }) })
           ]
         },
-        a.id
+        f.id
       );
     }) }),
-    i === "ONE_TIME" && /* @__PURE__ */ t.jsxs("div", { className: k.quantity, children: [
+    i === "ONE_TIME" && /* @__PURE__ */ t.jsxs("div", { className: w.quantity, children: [
       /* @__PURE__ */ t.jsx(
-        H,
+        F,
         {
           type: "Secondary",
           onClick: () => {
-            o > 1 ? m((a) => a - 1) : m(1);
+            r > 1 ? m((f) => f - 1) : m(1);
           },
-          className: k.button,
-          disabled: e.quantity.available === 0 || e.quantity.restrictions && o <= e.quantity.restrictions.min || Object.keys(e.quantity.restrictions || {}).length === 0 && !e.quantity.available,
-          children: /* @__PURE__ */ t.jsx(f, { name: "Minus" })
+          className: w.button,
+          disabled: e.quantity.available && e.quantity.restrictions && r <= e.quantity.restrictions.min || e.quantity.available === 0,
+          children: /* @__PURE__ */ t.jsx(j, { name: "Minus" })
         }
       ),
       /* @__PURE__ */ t.jsx(
-        Tt,
+        Ot,
         {
           type: "number",
-          value: String(o),
-          onChange: (a) => m(Number(a)),
-          max: ((x = e.quantity.restrictions) == null ? void 0 : x.max) || e.quantity.available || 1 / 0,
-          min: ((N = e.quantity.restrictions) == null ? void 0 : N.min) || 0,
+          value: String(r),
+          onChange: (f) => m(Number(f)),
+          max: ((q = e.quantity.restrictions) == null ? void 0 : q.max) || e.quantity.available || Number.POSITIVE_INFINITY,
+          min: ((E = e.quantity.restrictions) == null ? void 0 : E.min) || 0,
           centered: !0,
-          disabled: e.quantity.available === 0 || !e.quantity.available || Object.keys(e.quantity.restrictions || {}).length === 0 && !e.quantity.available
+          disabled: e.quantity && e.quantity.available === 0 || Object.keys(e.quantity.restrictions || {}).length !== 0 && r >= e.quantity.restrictions.max
         }
       ),
       /* @__PURE__ */ t.jsx(
-        H,
+        F,
         {
           type: "Secondary",
           onClick: () => {
-            m((a) => a + 1);
+            m((f) => f + 1);
           },
-          className: k.button,
-          disabled: !!(e.quantity.restrictions && o >= e.quantity.restrictions.max || e.quantity.available !== void 0 && o >= e.quantity.available || Object.keys(e.quantity.restrictions || {}).length === 0 && !e.quantity.available),
-          children: /* @__PURE__ */ t.jsx(f, { name: "Plus" })
+          className: w.button,
+          disabled: !!(e.quantity.available && e.quantity.restrictions && r >= e.quantity.restrictions.max || e.quantity.available === 0),
+          children: /* @__PURE__ */ t.jsx(j, { name: "Plus" })
         }
       )
     ] }),
-    /* @__PURE__ */ t.jsxs("div", { className: k.meta, children: [
-      /* @__PURE__ */ t.jsxs("div", { className: k.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: k.infoRight, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: w.infoRight, children: [
           /* @__PURE__ */ t.jsx(
-            f,
+            j,
             {
               name: "Lightning",
               fill: "#FF3F19",
@@ -1551,234 +1618,269 @@ const li = (r) => {
               height: 20
             }
           ),
-          /* @__PURE__ */ t.jsx("span", { children: !e.deliveryTime || e.deliveryTime === 0 ? "Instant" : M(e.deliveryTime) })
+          /* @__PURE__ */ t.jsx("span", { children: !e.deliveryTime || e.deliveryTime === 0 ? "Instant" : k(e.deliveryTime) })
         ] })
       ] }),
-      /* @__PURE__ */ t.jsxs("div", { className: k.info, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: w.info, children: [
         /* @__PURE__ */ t.jsx("span", { children: "Price" }),
-        /* @__PURE__ */ t.jsx("div", { className: k.infoRight, children: i === "ONE_TIME" ? e.compareAtPrice && (e.compareAtPrice.amount || 0) - (e.price.amount || 0) > 0 ? /* @__PURE__ */ t.jsxs("div", { className: k.price, children: [
-          /* @__PURE__ */ t.jsxs("span", { className: W(k.newPrice, { [k.animate]: c }), 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: V(w.newPrice, { [w.animate]: b }), children: [
             "$ ",
-            (e.price.amount || 0) * o
+            (e.price.amount || 0) * r
           ] }),
-          /* @__PURE__ */ t.jsxs("span", { className: k.oldPrice, children: [
+          /* @__PURE__ */ t.jsxs("span", { className: w.oldPrice, children: [
             "$ ",
-            (e.compareAtPrice.amount || 0) * o
+            (e.compareAtPrice.amount || 0) * r
           ] })
-        ] }) : /* @__PURE__ */ t.jsxs("span", { className: W(k.newPrice, { [k.animate]: c }), children: [
+        ] }) : /* @__PURE__ */ t.jsxs("span", { className: V(w.newPrice, { [w.animate]: b }), children: [
           "$ ",
-          (e.price.amount || 0) * o
-        ] }) : e.subscriptionSettings && e.subscriptionSettings.compareAtPrice && (e.subscriptionSettings.compareAtPrice.amount || 0) - (e.subscriptionSettings.price.amount || 0) > 0 ? /* @__PURE__ */ t.jsxs("div", { className: k.price, children: [
-          /* @__PURE__ */ t.jsxs("span", { className: W(k.newPrice, { [k.animate]: c }), children: [
+          (e.price.amount || 0) * r
+        ] }) : e.subscriptionSettings && e.subscriptionSettings.compareAtPrice && (e.subscriptionSettings.compareAtPrice.amount || 0) - (e.subscriptionSettings.price.amount || 0) > 0 ? /* @__PURE__ */ t.jsxs("div", { className: w.price, children: [
+          /* @__PURE__ */ t.jsxs("span", { className: V(w.newPrice, { [w.animate]: b }), children: [
             "$ ",
             e.subscriptionSettings.price.amount || 0
           ] }),
-          /* @__PURE__ */ t.jsxs("span", { className: k.oldPrice, children: [
+          /* @__PURE__ */ t.jsxs("span", { className: w.oldPrice, children: [
             "$ ",
             e.subscriptionSettings.compareAtPrice.amount || 0
           ] })
-        ] }) : e.subscriptionSettings && /* @__PURE__ */ t.jsxs("span", { className: W(k.newPrice, { [k.animate]: c }), children: [
+        ] }) : e.subscriptionSettings && /* @__PURE__ */ t.jsxs("span", { className: V(w.newPrice, { [w.animate]: b }), children: [
           "$ ",
           e.subscriptionSettings.price.amount || 0
         ] }) })
       ] })
     ] }),
-    /* @__PURE__ */ t.jsxs("div", { className: k.buttons, children: [
+    /* @__PURE__ */ t.jsxs("div", { className: w.buttons, children: [
       /* @__PURE__ */ t.jsx(
-        H,
+        F,
         {
           type: "Primary",
-          onClick: () => $(),
-          disabled: e.quantity.available === 0 || !e.quantity.available || Object.keys(e.quantity.restrictions || {}).length === 0 && !e.quantity.available,
+          onClick: () => g(),
+          disabled: e.quantity && e.quantity.available === 0,
           children: i === "ONE_TIME" ? "Buy Now" : "Subscribe Now"
         }
       ),
       i === "ONE_TIME" && /* @__PURE__ */ t.jsx(
-        H,
+        F,
         {
           type: "Secondary",
-          onClick: () => T(),
-          disabled: e.quantity.available === 0 || !e.quantity.available || Object.keys(e.quantity.restrictions || {}).length === 0 && !e.quantity.available,
+          onClick: () => S(),
+          disabled: e.quantity && e.quantity.available === 0,
           children: "Add to Cart"
         }
       )
     ] })
   ] });
-}, Ln = "_button_ekti4_1", zn = "_login_ekti4_14", Un = "_signUp_ekti4_18", Hn = "_buttons_ekti4_23", Fn = "_modal_ekti4_32", Vn = "_closing_ekti4_64", Yn = "_info_ekti4_113", Gn = "_top_ekti4_120", Wn = "_title_ekti4_131", Jn = "_clear_ekti4_138", Xn = "_activeClear_ekti4_145", Kn = "_count_ekti4_149", Qn = "_cart_ekti4_164", Zn = "_empty_ekti4_172", ts = "_product_ekti4_198", es = "_products_ekti4_207", ns = "_image_ekti4_215", ss = "_productInfo_ekti4_221", is = "_content_ekti4_228", os = "_name_ekti4_234", as = "_price_ekti4_240", cs = "_productButtons_ekti4_246", ls = "_productButton_ekti4_246", rs = "_productCount_ekti4_266", ds = "_bottom_ekti4_282", us = "_subtotal_ekti4_290", ms = "_block_ekti4_298", hs = "_shoppingCount_ekti4_305", ps = "_total_ekti4_325", _s = "_link_ekti4_331", gs = "_userInfo_ekti4_338", fs = "_pagesMobileModal_ekti4_349", xs = "_pagesMobileModalContent_ekti4_363", bs = "_pagesMobileModalHeader_ekti4_369", js = "_pagesMobileModalFooter_ekti4_379", y = {
-  button: Ln,
-  login: zn,
-  signUp: Un,
-  buttons: Hn,
-  modal: Fn,
-  "slide-in-fade": "_slide-in-fade_ekti4_1",
-  "mobile-slide-in-fade": "_mobile-slide-in-fade_ekti4_1",
-  closing: Vn,
-  "mobile-slide-out-fade": "_mobile-slide-out-fade_ekti4_1",
-  "slide-out-fade": "_slide-out-fade_ekti4_1",
-  info: Yn,
-  top: Gn,
-  title: Wn,
-  clear: Jn,
-  activeClear: Xn,
-  count: Kn,
-  cart: Qn,
-  empty: Zn,
-  product: ts,
-  products: es,
-  image: ns,
-  productInfo: ss,
-  content: is,
-  name: os,
-  price: as,
-  productButtons: cs,
-  productButton: ls,
-  productCount: rs,
-  bottom: ds,
-  subtotal: us,
-  block: ms,
-  shoppingCount: hs,
-  total: ps,
-  link: _s,
-  userInfo: gs,
-  pagesMobileModal: fs,
-  pagesMobileModalContent: xs,
-  pagesMobileModalHeader: bs,
-  pagesMobileModalFooter: js
-}, ri = (r) => {
-  const { shopping: s, signUp: e, isShowUserInfo: n = !0 } = r;
-  return /* @__PURE__ */ t.jsxs("div", { className: y.buttons, children: [
-    s && /* @__PURE__ */ t.jsx(vs, {}),
-    n && /* @__PURE__ */ t.jsx(Ct, { signUp: e })
+}, Hn = "_button_14q75_1", Yn = "_login_14q75_14", Wn = "_signUp_14q75_18", Gn = "_buttons_14q75_23", Qn = "_modal_14q75_32", Xn = "_closing_14q75_64", Jn = "_info_14q75_113", Kn = "_top_14q75_120", Zn = "_title_14q75_131", ts = "_clear_14q75_138", es = "_activeClear_14q75_145", ns = "_count_14q75_149", ss = "_cart_14q75_164", is = "_empty_14q75_172", as = "_product_14q75_198", os = "_products_14q75_207", cs = "_image_14q75_215", rs = "_productInfo_14q75_230", ls = "_content_14q75_237", ds = "_name_14q75_243", us = "_price_14q75_249", ms = "_productButtons_14q75_255", hs = "_productButton_14q75_255", ps = "_productCount_14q75_272", _s = "_bottom_14q75_289", gs = "_subtotal_14q75_297", fs = "_block_14q75_305", xs = "_shoppingCount_14q75_312", vs = "_total_14q75_332", js = "_link_14q75_338", bs = "_userInfo_14q75_345", ys = "_pagesMobileModal_14q75_356", Is = "_pagesMobileModalContent_14q75_370", Ns = "_pagesMobileModalHeader_14q75_376", ks = "_pagesMobileModalFooter_14q75_386", C = {
+  button: Hn,
+  login: Yn,
+  signUp: Wn,
+  buttons: Gn,
+  modal: Qn,
+  "slide-in-fade": "_slide-in-fade_14q75_1",
+  "mobile-slide-in-fade": "_mobile-slide-in-fade_14q75_1",
+  closing: Xn,
+  "mobile-slide-out-fade": "_mobile-slide-out-fade_14q75_1",
+  "slide-out-fade": "_slide-out-fade_14q75_1",
+  info: Jn,
+  top: Kn,
+  title: Zn,
+  clear: ts,
+  activeClear: es,
+  count: ns,
+  cart: ss,
+  empty: is,
+  product: as,
+  products: os,
+  image: cs,
+  productInfo: rs,
+  content: ls,
+  name: ds,
+  price: us,
+  productButtons: ms,
+  productButton: hs,
+  productCount: ps,
+  bottom: _s,
+  subtotal: gs,
+  block: fs,
+  shoppingCount: xs,
+  total: vs,
+  link: js,
+  userInfo: bs,
+  pagesMobileModal: ys,
+  pagesMobileModalContent: Is,
+  pagesMobileModalHeader: Ns,
+  pagesMobileModalFooter: ks
+}, Fi = (o) => {
+  const { shopping: s, signUp: e, isShowUserInfo: n = !0 } = o;
+  return /* @__PURE__ */ t.jsxs("div", { className: C.buttons, children: [
+    s && /* @__PURE__ */ t.jsx(Cs, {}),
+    n && /* @__PURE__ */ t.jsx(Bt, { signUp: e })
   ] });
-}, vs = () => {
-  const [r, s] = _.useState(!1), [e, n] = _.useState([]), { cart: i } = vt();
-  function d(g) {
-    var C;
-    return !g || !(g != null && g.variants) ? !1 : (C = g.variants.find((c) => c.id === g.activeVariantId)) == null ? void 0 : C.subscriptionSettings;
+}, Cs = () => {
+  const [o, s] = x.useState(!1), [e, n] = x.useState([]), { cart: i } = dt(), { pageContext: c } = lt();
+  function u(a) {
+    if (a.variants.length > 0) {
+      for (let b = 0; b < i.parts.length; b++)
+        for (let d = 0; d < a.variants.length; d++)
+          if (a.variants[d] && i.parts[b].productVariantId === a.variants[d].id)
+            return i.parts[b].productVariantId;
+    }
+    return a.variants[0].id;
+  }
+  function r(a) {
+    for (let b = 0; b < i.parts.length; b++)
+      for (let d = 0; d < a.variants.length; d++)
+        if (a.variants[d] && i.parts[b].productVariantId === a.variants[d].id)
+          return i.parts[b].quantity;
   }
-  const u = i.parts.length > 0 && e.length > 0 && !d(e[0]), [o, m] = _.useState(!1);
+  x.useEffect(() => {
+    (async () => {
+      var g;
+      const b = i.parts.map((k) => String(k.productId)), S = (((g = c == null ? void 0 : c.products) == null ? void 0 : g.filter((k) => b.includes(String(k.id)))) || []).map((k) => ({
+        ...k,
+        activeVariantId: u(k),
+        quantity: r(k)
+      }));
+      n(S);
+    })();
+  }, [i.parts]);
+  function m(a) {
+    var b;
+    return !a || !(a != null && a.variants) ? !1 : (b = a.variants.find((d) => d.id === a.activeVariantId)) == null ? void 0 : b.subscriptionSettings;
+  }
+  const p = i.parts.length > 0 && e.length > 0 && !m(e[0]), [B, l] = x.useState(!1);
   return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
     /* @__PURE__ */ t.jsxs(
-      H,
+      F,
       {
         type: "Secondary",
         style: {
-          padding: 10
+          padding: 10,
+          position: "relative"
         },
-        onClick: (g) => {
-          g.stopPropagation(), window.location.pathname.includes("/admin/builder") || (s(!0), m(!0));
+        onClick: (a) => {
+          a.stopPropagation(), window.location.pathname.includes("/admin/builder") || (s(!0), l(!0));
         },
         children: [
           /* @__PURE__ */ t.jsx(
-            f,
+            j,
             {
               name: "Handbag",
               fill: "var(--text-primary)"
             }
           ),
-          u && /* @__PURE__ */ t.jsx("div", { className: y.shoppingCount, children: i.parts.length })
+          p && /* @__PURE__ */ t.jsx("div", { className: C.shoppingCount, children: i.parts.length })
         ]
       }
     ),
-    r && /* @__PURE__ */ t.jsx(
-      yt,
+    o && /* @__PURE__ */ t.jsx(
+      kt,
       {
         close: () => {
-          m(!1), setTimeout(() => {
+          l(!1), setTimeout(() => {
             s(!1);
           }, 300);
         },
         withAnimation: !1,
         children: /* @__PURE__ */ t.jsx(
-          ys,
+          Ss,
           {
             activeProducts: e,
-            isCartNotEmpty: u,
-            isOpen: o
+            isCartNotEmpty: p,
+            isOpen: B
           }
         )
       }
     )
   ] });
-}, ys = (r) => {
-  const { activeProducts: s, isCartNotEmpty: e, isOpen: n } = r, { cart: i, reset: d, getTotalAndDiscount: u, updateQuantityOfProduct: o } = vt(), m = lt();
-  function g(l) {
-    m(l);
+}, Ss = (o) => {
+  const { activeProducts: s, isCartNotEmpty: e, isOpen: n } = o, { cart: i, reset: c, getTotalAndDiscount: u, updateQuantityOfProduct: r } = dt(), m = vt();
+  function p(a) {
+    m(a);
   }
-  function C(l) {
-    o({
-      productId: l.id,
-      productVariantId: l.activeVariantId,
-      quantity: l.quantity + 1
+  function B(a) {
+    a.quantity && r({
+      productId: a.id,
+      productVariantId: a.activeVariantId,
+      quantity: a.quantity + 1
     });
   }
-  function c(l) {
-    o({
-      productId: l.id,
-      productVariantId: l.activeVariantId,
-      quantity: l.quantity - 1
+  function l(a) {
+    a.quantity && r({
+      productId: a.id,
+      productVariantId: a.activeVariantId,
+      quantity: a.quantity - 1
     });
   }
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: W(y.modal, {
-        [y.closing]: !n
+      className: V(C.modal, {
+        [C.closing]: !n
       }),
-      onClick: (l) => l.stopPropagation(),
+      onClick: (a) => a.stopPropagation(),
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: y.top, children: [
-          /* @__PURE__ */ t.jsxs("div", { className: y.info, children: [
-            /* @__PURE__ */ t.jsx("span", { className: y.title, children: "Cart" }),
-            e && /* @__PURE__ */ t.jsx("div", { className: y.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: W(y.clear, {
-                [y.activeClear]: e
+              className: V(C.clear, {
+                [C.activeClear]: e
               }),
               disabled: !e,
-              onClick: d,
+              onClick: c,
               children: "Clear all"
             }
           )
         ] }),
-        e ? /* @__PURE__ */ t.jsxs("div", { className: y.cart, children: [
-          /* @__PURE__ */ t.jsx("div", { className: y.products, children: s.map((l) => /* @__PURE__ */ t.jsxs(
+        e ? /* @__PURE__ */ t.jsxs("div", { className: C.cart, children: [
+          /* @__PURE__ */ t.jsx("div", { className: C.products, children: s.map((a) => /* @__PURE__ */ t.jsxs(
             "div",
             {
-              className: y.product,
+              className: C.product,
               children: [
-                /* @__PURE__ */ t.jsxs("div", { className: y.productInfo, children: [
-                  /* @__PURE__ */ t.jsx(
+                /* @__PURE__ */ t.jsxs("div", { className: C.productInfo, children: [
+                  a.images.length > 0 ? /* @__PURE__ */ t.jsx(
                     "img",
                     {
-                      src: `https://imagedelivery.net/${l.images[0].cfId}/w=500`,
+                      src: `https://imagedelivery.net/${a.images[0].cfId}/w=500`,
                       alt: "image",
                       width: "100%",
                       height: "100%",
-                      className: y.image
+                      className: C.image
                     }
-                  ),
-                  /* @__PURE__ */ t.jsxs("div", { className: y.content, children: [
-                    /* @__PURE__ */ t.jsx("div", { className: y.name, children: l.name }),
-                    /* @__PURE__ */ t.jsxs("div", { className: y.price, children: [
+                  ) : /* @__PURE__ */ t.jsx("div", { className: C.image, children: /* @__PURE__ */ t.jsx(
+                    j,
+                    {
+                      name: "Image",
+                      fill: "var(--text-secondary)"
+                    }
+                  ) }),
+                  /* @__PURE__ */ t.jsxs("div", { className: C.content, children: [
+                    /* @__PURE__ */ t.jsx("div", { className: C.name, children: Nt(a.name) }),
+                    /* @__PURE__ */ t.jsxs("div", { className: C.price, children: [
                       "$",
-                      l.variants.find((T) => T.id === l.activeVariantId).price.amount * ((l == null ? void 0 : l.quantity) || 1)
+                      a.variants.find((b) => b.id === a.activeVariantId).price.amount * ((a == null ? void 0 : a.quantity) || 1)
                     ] })
                   ] })
                 ] }),
-                /* @__PURE__ */ t.jsxs("div", { className: y.productButtons, children: [
+                /* @__PURE__ */ t.jsxs("div", { className: C.productButtons, children: [
                   /* @__PURE__ */ t.jsx(
-                    "div",
+                    F,
                     {
+                      type: "Secondary",
                       onClick: () => {
-                        l.quantity !== 1 && c(l);
+                        a.quantity !== 1 && l(a);
                       },
-                      className: y.productButton,
+                      className: C.productButton,
+                      disabled: a.quantity === 1,
                       children: /* @__PURE__ */ t.jsx(
-                        f,
+                        j,
                         {
                           name: "Minus",
                           fill: "#757575",
@@ -1788,14 +1890,16 @@ const li = (r) => {
                       )
                     }
                   ),
-                  /* @__PURE__ */ t.jsx("div", { className: y.productCount, children: l.quantity }),
+                  /* @__PURE__ */ t.jsx("div", { className: C.productCount, children: a.quantity }),
                   /* @__PURE__ */ t.jsx(
-                    "div",
+                    F,
                     {
-                      onClick: () => C(l),
-                      className: y.productButton,
+                      type: "Secondary",
+                      onClick: () => B(a),
+                      className: C.productButton,
+                      disabled: a.quantity === a.variants.find((b) => b.id === a.activeVariantId).quantity.available,
                       children: /* @__PURE__ */ t.jsx(
-                        f,
+                        j,
                         {
                           name: "Plus",
                           fill: "#757575",
@@ -1808,14 +1912,14 @@ const li = (r) => {
                 ] })
               ]
             },
-            l.id
+            a.id
           )) }),
-          /* @__PURE__ */ t.jsxs("div", { className: y.bottom, children: [
-            /* @__PURE__ */ t.jsxs("div", { className: y.subtotal, children: [
-              /* @__PURE__ */ t.jsxs("div", { className: y.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(
-                  f,
+                  j,
                   {
                     name: "Info",
                     width: 20,
@@ -1824,20 +1928,20 @@ const li = (r) => {
                   }
                 )
               ] }),
-              /* @__PURE__ */ t.jsxs("div", { className: y.total, children: [
+              /* @__PURE__ */ t.jsxs("div", { className: C.total, children: [
                 "$",
                 u().total
               ] })
             ] }),
-            /* @__PURE__ */ t.jsx(H, { onClick: () => g("/checkout"), children: "Checkout" })
+            /* @__PURE__ */ t.jsx(F, { onClick: () => p("/checkout"), children: "Checkout" })
           ] })
-        ] }) : /* @__PURE__ */ t.jsx(ks, {})
+        ] }) : /* @__PURE__ */ t.jsx($s, {})
       ]
     }
   );
-}, ks = () => /* @__PURE__ */ t.jsxs("div", { className: y.empty, children: [
+}, $s = () => /* @__PURE__ */ t.jsxs("div", { className: C.empty, children: [
   /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-    f,
+    j,
     {
       name: "Handbag",
       fill: "var(--text-secondary)"
@@ -1851,23 +1955,23 @@ const li = (r) => {
       "a",
       {
         href: "/products",
-        className: y.link,
+        className: C.link,
         children: "view products"
       }
     )
   ] })
-] }), Ct = ({ signUp: r, close: s }) => {
-  const e = JSON.parse(localStorage.getItem("token") || "{}"), { data: n } = e, i = lt();
-  function d(m) {
+] }), Bt = ({ signUp: o, close: s }) => {
+  const e = JSON.parse(localStorage.getItem("token") || "{}"), { data: n } = e, i = vt();
+  function c(m) {
     window.location.pathname.includes("/admin/builder") || i(m);
   }
   if (!n)
     return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       /* @__PURE__ */ t.jsx(
-        H,
+        F,
         {
           onClick: () => {
-            d("/customer-dash"), s == null || s();
+            c("/customer-dash"), s == null || s();
           },
           type: "Secondary",
           style: {
@@ -1876,11 +1980,11 @@ const li = (r) => {
           children: "Login"
         }
       ),
-      r && /* @__PURE__ */ t.jsx(
-        H,
+      o && /* @__PURE__ */ t.jsx(
+        F,
         {
           onClick: () => {
-            d("/customer-dash"), s == null || s();
+            c("/customer-dash"), s == null || s();
           },
           type: "Primary",
           style: {
@@ -1891,29 +1995,29 @@ const li = (r) => {
         }
       )
     ] });
-  const [u, o] = _.useState("test-email@gmail.com");
-  return _.useEffect(() => {
+  const [u, r] = x.useState("test-email@gmail.com");
+  return x.useEffect(() => {
     (async () => {
-      const g = qt(n);
-      o(g.email);
+      const p = Et(n);
+      r(p.email);
     })();
   }, [n]), /* @__PURE__ */ t.jsx(
     "div",
     {
-      className: y.userInfo,
+      className: C.userInfo,
       onClick: () => {
-        d("/customer-dash"), s == null || s();
+        c("/customer-dash"), s == null || s();
       },
       children: /* @__PURE__ */ t.jsx("div", { children: u || "test-email@gmail.com" })
     }
   );
-}, Ns = ({
-  children: r,
+}, ws = ({
+  children: o,
   logo: s,
   setIsOpen: e,
   signUp: n
 }) => {
-  const { setIsOpen: i } = Nt(), d = () => {
+  const { setIsOpen: i } = $t(), c = () => {
     i(!1), setTimeout(() => {
       e(!1), i(!0);
     }, 300);
@@ -1921,18 +2025,18 @@ const li = (r) => {
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: y.pagesMobileModal,
+      className: C.pagesMobileModal,
       onClick: (u) => u.stopPropagation(),
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: y.pagesMobileModalHeader, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: C.pagesMobileModalHeader, children: [
           /* @__PURE__ */ t.jsx("div", { children: s }),
           /* @__PURE__ */ t.jsx(
-            H,
+            F,
             {
               type: "Secondary",
-              onClick: d,
+              onClick: c,
               children: /* @__PURE__ */ t.jsx(
-                f,
+                j,
                 {
                   name: "X",
                   fill: "var(--text-primary)"
@@ -1941,39 +2045,39 @@ const li = (r) => {
             }
           )
         ] }),
-        /* @__PURE__ */ t.jsx("div", { className: y.pagesMobileModalContent, children: r }),
-        /* @__PURE__ */ t.jsx("div", { className: y.pagesMobileModalFooter, children: /* @__PURE__ */ t.jsx(
-          Ct,
+        /* @__PURE__ */ t.jsx("div", { className: C.pagesMobileModalContent, children: o }),
+        /* @__PURE__ */ t.jsx("div", { className: C.pagesMobileModalFooter, children: /* @__PURE__ */ t.jsx(
+          Bt,
           {
             signUp: n,
-            close: d
+            close: c
           }
         ) })
       ]
     }
   );
-}, di = ({
-  children: r,
+}, Vi = ({
+  children: o,
   logo: s,
   signUp: e
 }) => {
-  const [n, i] = _.useState(!1);
+  const [n, i] = x.useState(!1);
   return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-    /* @__PURE__ */ t.jsx(Is, { setIsOpenModal: i }),
-    n && /* @__PURE__ */ t.jsx(yt, { close: () => i(!1), children: /* @__PURE__ */ t.jsx(
-      Ns,
+    /* @__PURE__ */ t.jsx(qs, { setIsOpenModal: i }),
+    n && /* @__PURE__ */ t.jsx(kt, { close: () => i(!1), children: /* @__PURE__ */ t.jsx(
+      ws,
       {
         logo: s,
         setIsOpen: i,
         signUp: e,
-        children: r
+        children: o
       }
     ) })
   ] });
-}, Is = (r) => {
-  const { setIsOpenModal: s } = r;
+}, qs = (o) => {
+  const { setIsOpenModal: s } = o;
   return /* @__PURE__ */ t.jsx(
-    H,
+    F,
     {
       type: "Secondary",
       style: {
@@ -1983,7 +2087,7 @@ const li = (r) => {
         e.stopPropagation(), window.location.pathname.includes("/admin/builder") || s(!0);
       },
       children: /* @__PURE__ */ t.jsx(
-        f,
+        j,
         {
           name: "List",
           fill: "var(--text-primary)"
@@ -1991,34 +2095,34 @@ const li = (r) => {
       )
     }
   );
-}, Ss = "_share_10urc_1", Cs = "_modal_10urc_9", ws = "_header_10urc_21", $s = "_socials_10urc_31", Bs = "_social_10urc_31", Ps = "_copy_10urc_41", Ms = "_title_10urc_48", Ts = "_copyWrapper_10urc_54", qs = "_copyText_10urc_63", As = "_copyTextMobile_10urc_76", Os = "_copyTextMiniMobile_10urc_95", tt = {
-  share: Ss,
-  modal: Cs,
-  header: ws,
-  socials: $s,
-  social: Bs,
-  copy: Ps,
-  title: Ms,
-  copyWrapper: Ts,
-  copyText: qs,
-  copyTextMobile: As,
-  copyTextMiniMobile: Os
-}, ui = ({ title: r = "Copy Product Link" }) => {
-  const { isOpenModal: s, setIsOpenModal: e } = It();
+}, Bs = "_share_10urc_1", Ps = "_modal_10urc_9", Ts = "_header_10urc_21", Ms = "_socials_10urc_31", As = "_social_10urc_31", Os = "_copy_10urc_41", Es = "_title_10urc_48", Ds = "_copyWrapper_10urc_54", Rs = "_copyText_10urc_63", Ls = "_copyTextMobile_10urc_76", zs = "_copyTextMiniMobile_10urc_95", et = {
+  share: Bs,
+  modal: Ps,
+  header: Ts,
+  socials: Ms,
+  social: As,
+  copy: Os,
+  title: Es,
+  copyWrapper: Ds,
+  copyText: Rs,
+  copyTextMobile: Ls,
+  copyTextMiniMobile: zs
+}, Ui = ({ title: o = "Copy Product Link" }) => {
+  const { isOpenModal: s, setIsOpenModal: e } = wt();
   function n() {
     e(!0);
   }
   return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
     /* @__PURE__ */ t.jsx(
-      H,
+      F,
       {
-        className: tt.share,
+        className: et.share,
         onClick: (i) => {
           i.stopPropagation(), n();
         },
         type: "Secondary",
         children: /* @__PURE__ */ t.jsx(
-          f,
+          j,
           {
             name: "Share",
             fill: "#757575",
@@ -2027,45 +2131,45 @@ const li = (r) => {
         )
       }
     ),
-    s && /* @__PURE__ */ t.jsx(yt, { close: e, children: /* @__PURE__ */ t.jsx(Es, { title: r }) })
+    s && /* @__PURE__ */ t.jsx(kt, { close: e, children: /* @__PURE__ */ t.jsx(Fs, { title: o }) })
   ] });
-}, Es = ({ title: r = "Copy Product Link" }) => {
-  const { setIsOpenModal: s } = It(), { notification: e, setNotification: n } = At(), { setIsOpen: i } = Nt(), d = window.location.href;
+}, Fs = ({ title: o = "Copy Product Link" }) => {
+  const { setIsOpenModal: s } = wt(), { notification: e, setNotification: n } = qt(), { setIsOpen: i } = $t(), c = window.location.href;
   function u() {
-    navigator.clipboard.writeText(d), n({
+    navigator.clipboard.writeText(c), n({
       message: "Link copied to clipboard",
       status: "success"
     });
   }
-  function o() {
+  function r() {
     i(!1), setTimeout(() => {
       s(!1), i(!0);
     }, 300);
   }
-  function m(g, C) {
-    return g.length > C ? g.slice(0, C) + "..." : g;
+  function m(p, B) {
+    return p.length > B ? p.slice(0, B) + "..." : p;
   }
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: tt.modal,
-      onClick: (g) => g.stopPropagation(),
+      className: et.modal,
+      onClick: (p) => p.stopPropagation(),
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: tt.header, children: [
-          /* @__PURE__ */ t.jsx("div", { className: tt.title, children: r }),
+        /* @__PURE__ */ t.jsxs("div", { className: et.header, children: [
+          /* @__PURE__ */ t.jsx("div", { className: et.title, children: o }),
           /* @__PURE__ */ t.jsx(
-            f,
+            j,
             {
               name: "X",
               fill: "#757575",
-              onClick: o,
+              onClick: r,
               hoverable: !0
             }
           )
         ] }),
-        /* @__PURE__ */ t.jsxs("div", { className: tt.copyWrapper, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: et.copyWrapper, children: [
           /* @__PURE__ */ t.jsxs(
-            H,
+            F,
             {
               type: "Secondary",
               onClick: u,
@@ -2073,59 +2177,59 @@ const li = (r) => {
                 flex: 1
               },
               children: [
-                /* @__PURE__ */ t.jsx("div", { className: tt.copyText, children: m(d, 100) }),
-                /* @__PURE__ */ t.jsx("div", { className: tt.copyTextMobile, children: m(d, 40) }),
-                /* @__PURE__ */ t.jsx("div", { className: tt.copyTextMiniMobile, children: m(d, 20) })
+                /* @__PURE__ */ t.jsx("div", { className: et.copyText, children: m(c, 100) }),
+                /* @__PURE__ */ t.jsx("div", { className: et.copyTextMobile, children: m(c, 40) }),
+                /* @__PURE__ */ t.jsx("div", { className: et.copyTextMiniMobile, children: m(c, 20) })
               ]
             }
           ),
           /* @__PURE__ */ t.jsx(
-            H,
+            F,
             {
               type: "Secondary",
               onClick: u,
-              children: e ? /* @__PURE__ */ t.jsx(f, { name: "Check" }) : /* @__PURE__ */ t.jsx(f, { name: "Copy" })
+              children: e ? /* @__PURE__ */ t.jsx(j, { name: "Check" }) : /* @__PURE__ */ t.jsx(j, { name: "Copy" })
             }
           )
         ] })
       ]
     }
   );
-}, Ds = "_accordion_1s1lq_1", Rs = "_header_1s1lq_9", Ls = "_icon_1s1lq_18", zs = "_open_1s1lq_21", Us = "_content_1s1lq_25", nt = {
-  accordion: Ds,
-  header: Rs,
-  icon: Ls,
-  open: zs,
-  content: Us
-}, mi = ({ title: r, content: s, defaultOpen: e = !1 }) => {
-  const [n, i] = _.useState(e), [d, u] = _.useState(0), o = _.useRef(null), m = () => {
+}, Vs = "_accordion_1s1lq_1", Us = "_header_1s1lq_9", Hs = "_icon_1s1lq_18", Ys = "_open_1s1lq_21", Ws = "_content_1s1lq_25", it = {
+  accordion: Vs,
+  header: Us,
+  icon: Hs,
+  open: Ys,
+  content: Ws
+}, Hi = ({ title: o, content: s, defaultOpen: e = !1 }) => {
+  const [n, i] = x.useState(e), [c, u] = x.useState(0), r = x.useRef(null), m = () => {
     i(!n);
   };
-  return _.useEffect(() => {
-    o.current && u(n ? o.current.scrollHeight : 0);
-  }, [n]), /* @__PURE__ */ t.jsxs("div", { className: nt.accordion, children: [
+  return x.useEffect(() => {
+    r.current && u(n ? r.current.scrollHeight : 0);
+  }, [n]), /* @__PURE__ */ t.jsxs("div", { className: it.accordion, children: [
     /* @__PURE__ */ t.jsxs(
       "div",
       {
-        className: nt.header,
+        className: it.header,
         onClick: m,
         children: [
-          /* @__PURE__ */ t.jsx("h5", { id: "h5", children: r }),
-          /* @__PURE__ */ t.jsx("div", { className: W(nt.icon, { [nt.open]: n }), children: /* @__PURE__ */ t.jsx(f, { name: "CaretDown" }) })
+          /* @__PURE__ */ t.jsx("h5", { id: "h5", children: o }),
+          /* @__PURE__ */ t.jsx("div", { className: V(it.icon, { [it.open]: n }), children: /* @__PURE__ */ t.jsx(j, { name: "CaretDown" }) })
         ]
       }
     ),
     /* @__PURE__ */ t.jsx(
       "div",
       {
-        ref: o,
-        className: nt.content,
-        style: { height: `${d}px` },
+        ref: r,
+        className: it.content,
+        style: { height: `${c}px` },
         children: /* @__PURE__ */ t.jsx("p", { id: "p", children: s })
       }
     )
   ] });
-}, hi = ({ children: r, path: s, className: e, target: n = "_self", id: i }) => {
+}, Yi = ({ children: o, path: s, className: e, target: n = "_self", id: i }) => {
   if (window.location.pathname.includes("/admin/builder"))
     return /* @__PURE__ */ t.jsx(
       "div",
@@ -2134,47 +2238,78 @@ const li = (r) => {
         role: "link",
         style: { cursor: "pointer" },
         id: i,
-        children: r
+        children: o
       }
     );
-  const d = lt(), u = /^https?:\/\//.test(s), o = (m) => {
-    u || n === "_blank" ? n === "_blank" ? window.open(s, "_blank") : window.history.pushState({}, "", s) : (m.preventDefault(), d(s));
+  const c = vt(), u = /^https?:\/\//.test(s), r = (m) => {
+    u || n === "_blank" ? n === "_blank" ? window.open(s, "_blank") : window.open(s, "_self") : (m.preventDefault(), c(s));
   };
   return /* @__PURE__ */ t.jsx(
     "div",
     {
-      onClick: o,
+      onClick: r,
       className: e,
       role: "link",
       style: { cursor: "pointer" },
       id: i,
-      children: r
+      children: o
     }
   );
-}, Hs = "_buttonsBlock_1b2rb_1", Fs = "_slideUp_1b2rb_1", Vs = {
-  buttonsBlock: Hs,
-  slideUp: Fs
-}, pi = () => /* @__PURE__ */ t.jsxs("div", { className: Vs.buttonsBlock, children: [
-  /* @__PURE__ */ t.jsx(
-    H,
+}, Gs = "_buttonsBlock_1b2rb_1", Qs = "_slideUp_1b2rb_1", Xs = {
+  buttonsBlock: Gs,
+  slideUp: Qs
+}, Wi = (o) => {
+  var p, B;
+  const { setIsOpen: s, setModalType: e, productId: n } = o, { cart: i } = dt(), { pageContext: c } = lt(), u = (p = c == null ? void 0 : c.listings) == null ? void 0 : p.find((l) => l.id === n);
+  if (!u)
+    return null;
+  const r = (B = c == null ? void 0 : c.products) == null ? void 0 : B.find(
+    (l) => l.uniquePath === u.productData.uniquePath
+  );
+  if (!r)
+    return null;
+  const m = i.parts.find((l) => l.productId === r.id);
+  return /* @__PURE__ */ t.jsxs(
+    "div",
     {
-      type: "Primary",
-      style: {
-        width: "100%"
-      },
-      children: "Add to Cart"
+      className: Xs.buttonsBlock,
+      onClick: (l) => l.stopPropagation(),
+      children: [
+        /* @__PURE__ */ t.jsx(
+          F,
+          {
+            type: "Secondary",
+            style: {
+              width: "100%"
+            },
+            onClick: () => {
+              e("Add To Cart"), s(!0);
+            },
+            children: m ? "Add More" : "Add To Cart"
+          }
+        ),
+        /* @__PURE__ */ t.jsx(
+          F,
+          {
+            type: "Primary",
+            onClick: () => {
+              e("Buy Now"), s(!0);
+            },
+            children: "Buy"
+          }
+        )
+      ]
     }
-  ),
-  /* @__PURE__ */ t.jsx(H, { type: "Secondary", children: "Buy" })
-] }), Ys = "_wrapper_27wzz_1", Gs = "_logo_27wzz_8", Ws = "_info_27wzz_12", dt = {
-  wrapper: Ys,
-  logo: Gs,
-  info: Ws
-}, _i = ({ date: r }) => {
-  const { general: s } = Ot();
+  );
+}, Js = "_wrapper_27wzz_1", Ks = "_logo_27wzz_8", Zs = "_info_27wzz_12", bt = {
+  wrapper: Js,
+  logo: Ks,
+  info: Zs
+}, Gi = ({ date: o }) => {
+  const { general: s } = Dt();
   if (!s) return /* @__PURE__ */ t.jsx(t.Fragment, {});
   function e(n) {
-    const i = new Date(n), d = {
+    const i = new Date(n), c = {
       month: "short",
       day: "2-digit",
       year: "numeric",
@@ -2182,10 +2317,10 @@ const li = (r) => {
       minute: "2-digit",
       hour12: !1
     };
-    return i.toLocaleDateString("en-US", d);
+    return i.toLocaleDateString("en-US", c);
   }
-  return /* @__PURE__ */ t.jsxs("div", { className: dt.wrapper, children: [
-    /* @__PURE__ */ t.jsx("div", { className: dt.logo, children: s.info.logo ? /* @__PURE__ */ t.jsx(
+  return /* @__PURE__ */ t.jsxs("div", { className: bt.wrapper, children: [
+    /* @__PURE__ */ t.jsx("div", { className: bt.logo, children: s.info.logo ? /* @__PURE__ */ t.jsx(
       "img",
       {
         src: `https://imagedelivery.net/${s.info.logo.cfId}/w=500,h=500`,
@@ -2193,40 +2328,207 @@ const li = (r) => {
         style: { objectFit: "contain", width: "48px", height: "48px" }
       }
     ) : /* @__PURE__ */ t.jsx(
-      f,
+      j,
       {
         name: "Image",
         width: 48,
         height: 48
       }
     ) }),
-    /* @__PURE__ */ t.jsxs("div", { className: dt.info, children: [
+    /* @__PURE__ */ t.jsxs("div", { className: bt.info, children: [
       /* @__PURE__ */ t.jsx("h3", { id: "h4", children: s.info.name }),
-      /* @__PURE__ */ t.jsx("p", { id: "p", children: e(r) })
+      /* @__PURE__ */ t.jsx("p", { id: "p", children: e(o) })
     ] })
   ] });
-}, Js = "_wrapper_st58d_1", Xs = "_label_st58d_10", Ks = "_textarea_st58d_18", Qs = "_length_st58d_33", ct = {
-  wrapper: Js,
-  label: Xs,
-  textarea: Ks,
-  length: Qs
-}, gi = (r) => {
+}, ti = "_options_mju90_1", ei = "_price_mju90_12", ni = "_oldPrice_mju90_19", si = "_newPrice_mju90_27", ii = "_animate_mju90_34", ai = "_appearAndBounce_mju90_1", oi = "_meta_mju90_52", ci = "_info_mju90_58", ri = "_infoRight_mju90_66", li = "_buttons_mju90_73", di = "_variants_mju90_80", ui = "_variant_mju90_80", mi = "_stock_mju90_98", hi = "_variantInfo_mju90_105", pi = "_quantity_mju90_111", _i = "_count_mju90_118", gi = "_focused_mju90_135", fi = "_button_mju90_73", xi = "_activeVariant_mju90_161", vi = "_chargeTypes_mju90_165", ji = "_charge_mju90_165", bi = "_chargeActive_mju90_190", yi = "_title_mju90_198", Ii = "_modal_mju90_204", Ni = "_header_mju90_218", X = {
+  options: ti,
+  price: ei,
+  oldPrice: ni,
+  newPrice: si,
+  animate: ii,
+  appearAndBounce: ai,
+  meta: oi,
+  info: ci,
+  infoRight: ri,
+  buttons: li,
+  variants: di,
+  variant: ui,
+  stock: mi,
+  variantInfo: hi,
+  quantity: pi,
+  count: _i,
+  focused: gi,
+  button: fi,
+  activeVariant: xi,
+  chargeTypes: vi,
+  charge: ji,
+  chargeActive: bi,
+  title: yi,
+  modal: Ii,
+  header: Ni
+}, Qi = (o) => {
+  var r, m;
+  const { pageContext: s } = lt(), e = (r = s == null ? void 0 : s.listings) == null ? void 0 : r.find((p) => p.id === o.productId);
+  if (!e)
+    return;
+  const n = (m = s == null ? void 0 : s.products) == null ? void 0 : m.find(
+    (p) => p.uniquePath === e.productData.uniquePath
+  );
+  if (!n)
+    return;
+  const i = n.variants[0], [c, u] = x.useState(
+    i.chargeTypes && i.chargeTypes.length > 1 ? i.chargeTypes[0] : "ONE_TIME"
+  );
+  return /* @__PURE__ */ t.jsxs(
+    "div",
+    {
+      className: X.modal,
+      onClick: (p) => p.stopPropagation(),
+      children: [
+        o.type === "Add To Cart" && /* @__PURE__ */ t.jsx(
+          ki,
+          {
+            variants: n.variants,
+            activeVariant: i,
+            activeChargeType: c,
+            setActiveChargeType: u,
+            productId: n.id,
+            setIsOpen: o.setIsOpen
+          }
+        ),
+        o.type === "Buy Now" && /* @__PURE__ */ t.jsx(
+          Ci,
+          {
+            product: n,
+            setIsOpen: o.setIsOpen
+          }
+        )
+      ]
+    }
+  );
+}, ki = (o) => {
+  const { variants: s, activeChargeType: e, setActiveChargeType: n, activeVariant: i, productId: c, setIsOpen: u } = o, { cart: r, addProductToCart: m, addProducts: p, updateQuantityOfProduct: B } = dt(), { setNotification: l } = qt(), { pageContext: a } = lt();
+  async function b(d) {
+    const S = r.parts.find(
+      (g) => g.productId === o.productId && g.productVariantId === d
+    );
+    S ? B({
+      productId: c,
+      productVariantId: d,
+      quantity: S.quantity + 1
+    }) : (a != null && a.products && await p(a.products), await m({
+      productId: c,
+      productVariantId: d,
+      quantity: 1
+    })), l({
+      message: "Product added to cart",
+      status: "success"
+    });
+  }
+  return /* @__PURE__ */ t.jsxs("div", { className: X.modal, children: [
+    /* @__PURE__ */ t.jsxs("div", { className: X.header, children: [
+      /* @__PURE__ */ t.jsx("div", { id: "h3", children: "Choose a variant" }),
+      /* @__PURE__ */ t.jsx(
+        j,
+        {
+          name: "X",
+          width: 24,
+          height: 24,
+          fill: "var(--text-secondary)",
+          hoverable: !0,
+          onClick: () => u(!1)
+        }
+      )
+    ] }),
+    i.chargeTypes && i.chargeTypes.length > 1 && /* @__PURE__ */ t.jsx("div", { className: X.chargeTypes, children: i.chargeTypes.map((d) => /* @__PURE__ */ t.jsx(
+      "div",
+      {
+        className: V(X.charge, {
+          [X.chargeActive]: e === d
+        }),
+        onClick: () => n(d),
+        children: Ct[d]
+      },
+      d
+    )) }),
+    /* @__PURE__ */ t.jsx("div", { className: X.variants, children: s.map((d) => {
+      var S, g;
+      return /* @__PURE__ */ t.jsxs(
+        "div",
+        {
+          className: V(X.variant),
+          onClick: () => {
+            b(d.id), u(!1);
+          },
+          children: [
+            /* @__PURE__ */ t.jsxs("div", { className: X.variantInfo, children: [
+              /* @__PURE__ */ t.jsx("span", { className: X.title, children: d.name }),
+              /* @__PURE__ */ t.jsxs("span", { children: [
+                "$",
+                e === "ONE_TIME" ? d.price.amount : d.subscriptionSettings ? d.subscriptionSettings.price.amount : "Price Not Found"
+              ] })
+            ] }),
+            /* @__PURE__ */ t.jsx("div", { children: e === "ONE_TIME" && /* @__PURE__ */ t.jsxs("span", { className: X.stock, children: [
+              (S = d.quantity.restrictions) != null && S.max || d.quantity.available !== void 0 ? ((g = d.quantity.restrictions) == null ? void 0 : g.max) || d.quantity.available : "∞",
+              " ",
+              "in stock"
+            ] }) })
+          ]
+        },
+        d.id
+      );
+    }) })
+  ] });
+}, Ci = (o) => {
+  const { product: s, setIsOpen: e } = o;
+  return /* @__PURE__ */ t.jsxs("div", { className: X.modal, children: [
+    /* @__PURE__ */ t.jsxs("div", { className: X.header, children: [
+      /* @__PURE__ */ t.jsxs("div", { id: "h3", children: [
+        "Buy ",
+        Nt(s.name)
+      ] }),
+      /* @__PURE__ */ t.jsx(
+        j,
+        {
+          name: "X",
+          width: 24,
+          height: 24,
+          fill: "var(--text-secondary)",
+          hoverable: !0,
+          onClick: () => e(!1),
+          style: {
+            minWidth: 24,
+            minHeight: 24
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t.jsx(Un, { ...s })
+  ] });
+}, Si = "_wrapper_1efqk_1", $i = "_label_1efqk_10", wi = "_contentBorder_1efqk_19", qi = "_contentField_1efqk_23", Bi = "_textarea_1efqk_27", Pi = "_length_1efqk_42", st = {
+  wrapper: Si,
+  label: $i,
+  contentBorder: wi,
+  contentField: qi,
+  textarea: Bi,
+  length: Pi
+}, Xi = (o) => {
   const {
     onChange: s,
     label: e,
     value: n,
     maxLength: i,
-    placeholder: d = "Type something...",
+    placeholder: c = "Type something...",
     type: u = "text"
-  } = r, [o, m] = _.useState(n.length);
-  function g(C) {
-    return u === "number" ? C.replace(/[^\d\n]+/g, "") : C;
+  } = o, [r, m] = x.useState(n.length), { themeSettings: p } = Rt();
+  function B(l) {
+    return u === "number" ? l.replace(/[^\d\n]+/g, "") : l;
   }
-  return /* @__PURE__ */ t.jsxs("div", { className: ct.wrapper, children: [
+  return /* @__PURE__ */ t.jsxs("div", { className: st.wrapper, children: [
     e && /* @__PURE__ */ t.jsx(
       "label",
       {
-        className: ct.label,
+        className: st.label,
         htmlFor: e,
         children: e
       }
@@ -2236,58 +2538,63 @@ const li = (r) => {
       {
         id: e,
         value: n,
-        onChange: (C) => {
-          const c = g(C.target.value);
-          m(c.length), s(c);
+        onChange: (l) => {
+          const a = B(l.target.value);
+          m(a.length), s(a);
         },
-        placeholder: d,
-        className: ct.textarea,
+        placeholder: c,
+        className: V(st.textarea, {
+          [st.contentBorder]: p.inputs.border.active,
+          [st.contentField]: p.inputs.field.active
+        }),
         maxLength: i
       }
     ),
-    i && /* @__PURE__ */ t.jsxs("div", { className: ct.length, children: [
-      o,
+    i && /* @__PURE__ */ t.jsxs("div", { className: st.length, children: [
+      r,
       "/",
       i
     ] })
   ] });
 };
 export {
-  mi as Accordion,
-  Is as BurgerMenuButton,
-  H as Button,
-  _n as ButtonTypeSettings,
-  ai as ButtonsSettings,
-  si as CategorySettings,
-  $t as ChooseImage,
-  bi as ChooseImageModal,
-  ks as EmptyCart,
-  oi as FormSettings,
-  ri as HeaderButtons,
-  f as Icon,
-  ut as InputSettings,
-  Tt as InputUI,
-  ji as ItemsSettings,
-  ni as LayoutSettings,
-  hi as Link,
-  ci as ListingSelector,
-  vi as Loader,
-  _i as MetaInfoPost,
-  yt as Modal,
-  di as PagesMobileMenu,
-  Ns as PagesMobileModal,
-  ii as PagesSettings,
-  pi as ProductCardButtons,
-  li as ProductOptions,
-  kt as RangeSelector,
-  at as Select,
-  ui as ShareLink,
-  vs as ShoppingButton,
-  ys as ShoppingModalCart,
-  it as Switch,
-  yi as TextSettings,
-  ki as TextareaSettings,
-  gi as TextareaUI,
-  Ni as TypesText,
-  Ct as UserInfo
+  Hi as Accordion,
+  qs as BurgerMenuButton,
+  F as Button,
+  vn as ButtonTypeSettings,
+  Li as ButtonsSettings,
+  Ei as CategorySettings,
+  Ct as ChargeTypes,
+  Tt as ChooseImage,
+  Zi as ChooseImageModal,
+  $s as EmptyCart,
+  Ri as FormSettings,
+  Fi as HeaderButtons,
+  j as Icon,
+  yt as InputSettings,
+  Ot as InputUI,
+  ta as ItemsSettings,
+  Oi as LayoutSettings,
+  Yi as Link,
+  zi as ListingSelector,
+  ea as Loader,
+  Gi as MetaInfoPost,
+  kt as Modal,
+  Vi as PagesMobileMenu,
+  ws as PagesMobileModal,
+  Di as PagesSettings,
+  Wi as ProductCardButtons,
+  Qi as ProductCardModal,
+  Un as ProductOptions,
+  St as RangeSelector,
+  rt as Select,
+  Ui as ShareLink,
+  Cs as ShoppingButton,
+  Ss as ShoppingModalCart,
+  ot as Switch,
+  na as TextSettings,
+  sa as TextareaSettings,
+  Xi as TextareaUI,
+  ia as TypesText,
+  Bt as UserInfo
 };