@billgangcom/theme-lib 1.24.1 → 1.26.0

package/dist/ui.es.js

@@ -1,27 +1,27 @@
-import { j as t, c as M, I as x, a as G, S as V, T as lt, C as it, b as Y, D as rt, H as dt, B as X, v as tt, u as ut, d as mt, e as ot, f as at, M as gt } from "./index-BY2jq9jr.js";
-import { k as Xn, l as Qn, h as Wn, E as Jn, L as Kn, P as Zn, R as tc, g as ec, i as sc } from "./index-BY2jq9jr.js";
+import { j as t, c as D, I as p, a as G, S as H, T as dt, C as it, b as W, D as ut, H as _t, B as X, v as et, u as mt, d as pt, e as at, f as lt, M as ht, g as gt } from "./index-CeRgFjoD.js";
+import { l as dc, m as uc, i as _c, E as mc, L as pc, P as hc, R as gc, h as xc, k as fc } from "./index-CeRgFjoD.js";
 import f from "react";
-const xt = "_accordion_9e4oa_1", ft = "_header_9e4oa_9", bt = "_icon_9e4oa_18", jt = "_open_9e4oa_21", vt = "_content_9e4oa_25", J = {
-  accordion: xt,
-  header: ft,
-  icon: bt,
-  open: jt,
-  content: vt
-}, Rn = ({ title: r, content: n }) => {
-  const [e, o] = f.useState(!1), [i, a] = f.useState(0), s = f.useRef(null), c = () => {
+const jt = "_accordion_9e4oa_1", vt = "_header_9e4oa_9", kt = "_icon_9e4oa_18", yt = "_open_9e4oa_21", Nt = "_content_9e4oa_25", K = {
+  accordion: jt,
+  header: vt,
+  icon: kt,
+  open: yt,
+  content: Nt
+}, ec = ({ title: d, content: n }) => {
+  const [e, o] = f.useState(!1), [c, l] = f.useState(0), s = f.useRef(null), i = () => {
     o(!e);
   };
   return f.useEffect(() => {
-    s.current && a(e ? s.current.scrollHeight : 0);
-  }, [e]), /* @__PURE__ */ t.jsxs("div", { className: J.accordion, children: [
+    s.current && l(e ? s.current.scrollHeight : 0);
+  }, [e]), /* @__PURE__ */ t.jsxs("div", { className: K.accordion, children: [
     /* @__PURE__ */ t.jsxs(
       "div",
       {
-        className: J.header,
-        onClick: c,
+        className: K.header,
+        onClick: i,
         children: [
-          /* @__PURE__ */ t.jsx("h3", { children: r }),
-          /* @__PURE__ */ t.jsx("div", { className: M(J.icon, { [J.open]: e }), children: /* @__PURE__ */ t.jsx(x, { name: "CaretDown" }) })
+          /* @__PURE__ */ t.jsx("h3", { children: d }),
+          /* @__PURE__ */ t.jsx("div", { className: D(K.icon, { [K.open]: e }), children: /* @__PURE__ */ t.jsx(p, { name: "CaretDown" }) })
         ]
       }
     ),
@@ -29,25 +29,25 @@ const xt = "_accordion_9e4oa_1", ft = "_header_9e4oa_9", bt = "_icon_9e4oa_18",
       "div",
       {
         ref: s,
-        className: J.content,
-        style: { height: `${i}px` },
+        className: K.content,
+        style: { height: `${c}px` },
         children: /* @__PURE__ */ t.jsx("p", { children: n })
       }
     )
   ] });
-}, kt = "_wrapper_9rr5j_2", yt = "_alignmentBlock_9rr5j_8", $t = "_title_9rr5j_15", Nt = "_subtitle_9rr5j_22", Ct = "_alignmentContent_9rr5j_29", It = "_alignments_9rr5j_37", Pt = "_alignment_9rr5j_8", Bt = "_circle_9rr5j_58", wt = "_paddings_9rr5j_65", Tt = "_padding_9rr5j_65", qt = "_input_9rr5j_84", D = {
-  wrapper: kt,
-  alignmentBlock: yt,
-  title: $t,
-  subtitle: Nt,
-  alignmentContent: Ct,
-  alignments: It,
-  alignment: Pt,
-  circle: Bt,
-  paddings: wt,
-  padding: Tt,
-  input: qt
-}, At = [
+}, $t = "_wrapper_9rr5j_2", Ct = "_alignmentBlock_9rr5j_8", It = "_title_9rr5j_15", Pt = "_subtitle_9rr5j_22", Tt = "_alignmentContent_9rr5j_29", wt = "_alignments_9rr5j_37", Bt = "_alignment_9rr5j_8", St = "_circle_9rr5j_58", qt = "_paddings_9rr5j_65", At = "_padding_9rr5j_65", Ot = "_input_9rr5j_84", O = {
+  wrapper: $t,
+  alignmentBlock: Ct,
+  title: It,
+  subtitle: Pt,
+  alignmentContent: Tt,
+  alignments: wt,
+  alignment: Bt,
+  circle: St,
+  paddings: qt,
+  padding: At,
+  input: Ot
+}, Lt = [
   "topLeft",
   "top",
   "topRight",
@@ -57,9 +57,9 @@ const xt = "_accordion_9e4oa_1", ft = "_header_9e4oa_9", bt = "_icon_9e4oa_18",
   "bottomLeft",
   "bottom",
   "bottomRight"
-], St = ["left", "top", "right", "bottom"], Hn = (r) => {
-  const { alignment: n, padding: e, setPadding: o, setAlignment: i } = r;
-  function a() {
+], Dt = ["left", "top", "right", "bottom"], sc = (d) => {
+  const { alignment: n, padding: e, setPadding: o, setAlignment: c } = d;
+  function l() {
     switch (n) {
       case "left":
       case "topLeft":
@@ -77,8 +77,8 @@ const xt = "_accordion_9e4oa_1", ft = "_header_9e4oa_9", bt = "_icon_9e4oa_18",
         return "TextAlignCenter";
     }
   }
-  function s(c) {
-    switch (c) {
+  function s(i) {
+    switch (i) {
       case "left":
         return "AlignLeft";
       case "right":
@@ -89,24 +89,24 @@ const xt = "_accordion_9e4oa_1", ft = "_header_9e4oa_9", bt = "_icon_9e4oa_18",
         return "AlignBottom";
     }
   }
-  return /* @__PURE__ */ t.jsxs("div", { className: D.layout, children: [
-    /* @__PURE__ */ t.jsx("h3", { className: D.title, children: "Layout" }),
-    /* @__PURE__ */ t.jsxs("div", { className: D.alignmentBlock, children: [
-      /* @__PURE__ */ t.jsx("h5", { className: D.subtitle, children: "Alignment" }),
-      /* @__PURE__ */ t.jsxs("div", { className: D.alignmentContent, children: [
-        /* @__PURE__ */ t.jsx("div", { className: D.alignments, children: At.map((c) => /* @__PURE__ */ t.jsxs(
+  return /* @__PURE__ */ t.jsxs("div", { className: O.layout, children: [
+    /* @__PURE__ */ t.jsx("h3", { className: O.title, children: "Layout" }),
+    /* @__PURE__ */ t.jsxs("div", { className: O.alignmentBlock, children: [
+      /* @__PURE__ */ t.jsx("h5", { className: O.subtitle, children: "Alignment" }),
+      /* @__PURE__ */ t.jsxs("div", { className: O.alignmentContent, children: [
+        /* @__PURE__ */ t.jsx("div", { className: O.alignments, children: Lt.map((i) => /* @__PURE__ */ t.jsxs(
           "div",
           {
             onClick: () => {
-              i(c);
+              c(i);
             },
-            className: D.alignment,
+            className: O.alignment,
             children: [
-              c !== n && /* @__PURE__ */ t.jsx("div", { className: D.circle }),
-              c === n && /* @__PURE__ */ t.jsx(
-                x,
+              i !== n && /* @__PURE__ */ t.jsx("div", { className: O.circle }),
+              i === n && /* @__PURE__ */ t.jsx(
+                p,
                 {
-                  name: a(),
+                  name: l(),
                   fill: "#FF3F19",
                   width: 22,
                   height: 22
@@ -114,17 +114,17 @@ const xt = "_accordion_9e4oa_1", ft = "_header_9e4oa_9", bt = "_icon_9e4oa_18",
               )
             ]
           },
-          c
+          i
         )) }),
-        /* @__PURE__ */ t.jsx("div", { className: D.paddings, children: St.map((c) => /* @__PURE__ */ t.jsxs(
+        /* @__PURE__ */ t.jsx("div", { className: O.paddings, children: Dt.map((i) => /* @__PURE__ */ t.jsxs(
           "label",
           {
-            className: D.padding,
+            className: O.padding,
             children: [
               /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-                x,
+                p,
                 {
-                  name: s(c),
+                  name: s(i),
                   width: 20,
                   height: 20
                 }
@@ -133,10 +133,10 @@ const xt = "_accordion_9e4oa_1", ft = "_header_9e4oa_9", bt = "_icon_9e4oa_18",
                 G,
                 {
                   type: "text",
-                  value: String(e[c]),
+                  value: String(e[i]),
                   onChange: (m) => o({
                     ...e,
-                    [c]: Number(m)
+                    [i]: Number(m)
                   }),
                   paddingless: !0,
                   borderless: !0
@@ -144,25 +144,25 @@ const xt = "_accordion_9e4oa_1", ft = "_header_9e4oa_9", bt = "_icon_9e4oa_18",
               )
             ]
           },
-          c
+          i
         )) })
       ] })
     ] })
   ] });
-}, Ot = "_subtitle_1qrz9_1", Dt = "_header_1qrz9_8", Et = "_text_1qrz9_9", Mt = "_top_1qrz9_17", Lt = "_itemsBlock_1qrz9_26", K = {
-  subtitle: Ot,
-  header: Dt,
-  text: Et,
-  top: Mt,
-  itemsBlock: Lt
-}, Rt = "_typeTexts_rcw8p_1", Ht = "_block_rcw8p_8", Vt = "_active_rcw8p_21", nt = {
-  typeTexts: Rt,
-  block: Ht,
-  active: Vt
-}, Ft = ["bold", "italic", "underline", "strike-through", "code"], _t = (r) => {
-  const { typesText: n, setTypesText: e } = r;
-  function o(i) {
-    switch (i) {
+}, zt = "_subtitle_1qrz9_1", Et = "_header_1qrz9_8", Mt = "_text_1qrz9_9", Rt = "_top_1qrz9_17", Ht = "_itemsBlock_1qrz9_26", Z = {
+  subtitle: zt,
+  header: Et,
+  text: Mt,
+  top: Rt,
+  itemsBlock: Ht
+}, Vt = "_typeTexts_rcw8p_1", Ft = "_block_rcw8p_8", Ut = "_active_rcw8p_21", ct = {
+  typeTexts: Vt,
+  block: Ft,
+  active: Ut
+}, Gt = ["bold", "italic", "underline", "strike-through", "code"], xt = (d) => {
+  const { typesText: n, setTypesText: e } = d;
+  function o(c) {
+    switch (c) {
       case "bold":
         return "TextB";
       case "italic":
@@ -175,66 +175,66 @@ const xt = "_accordion_9e4oa_1", ft = "_header_9e4oa_9", bt = "_icon_9e4oa_18",
         return "TextUnderline";
     }
   }
-  return /* @__PURE__ */ t.jsx("div", { className: nt.typeTexts, children: Ft.map((i) => /* @__PURE__ */ t.jsx(
+  return /* @__PURE__ */ t.jsx("div", { className: ct.typeTexts, children: Gt.map((c) => /* @__PURE__ */ t.jsx(
     "div",
     {
-      className: M(nt.block, {
-        [nt.active]: n.includes(i)
+      className: D(ct.block, {
+        [ct.active]: n.includes(c)
       }),
       onClick: () => {
-        const a = [...n];
-        if (a.includes(i)) {
-          const s = a.filter((c) => c !== i);
+        const l = [...n];
+        if (l.includes(c)) {
+          const s = l.filter((i) => i !== c);
           e(s);
         } else
-          a.push(i), e(a);
+          l.push(c), e(l);
       },
       children: /* @__PURE__ */ t.jsx(
-        x,
+        p,
         {
-          name: o(i),
-          fill: n.includes(i) ? "#252525" : "#757575",
+          name: o(c),
+          fill: n.includes(c) ? "#252525" : "#757575",
           width: 20,
           height: 20
         }
       )
     },
-    String(i)
+    String(c)
   )) });
-}, Ut = (r) => {
+}, Wt = (d) => {
   const {
     typesText: n,
     isActiveText: e,
     setIsActiveText: o,
-    text: i,
-    setText: a,
+    text: c,
+    setText: l,
     setTypesText: s,
-    title: c,
+    title: i,
     subtitle: m = "Items"
-  } = r;
-  return /* @__PURE__ */ t.jsxs("div", { className: K.text, children: [
-    (c || e !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: K.top, children: [
-      c && /* @__PURE__ */ t.jsx("h3", { className: K.title, children: c }),
+  } = d;
+  return /* @__PURE__ */ t.jsxs("div", { className: Z.text, children: [
+    (i || e !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: Z.top, children: [
+      i && /* @__PURE__ */ t.jsx("h3", { className: Z.title, children: i }),
       e !== void 0 && o && /* @__PURE__ */ t.jsx(
-        V,
+        H,
         {
           current: e,
-          onChange: ($) => o($)
+          onChange: (v) => o(v)
         }
       )
     ] }),
-    /* @__PURE__ */ t.jsxs("div", { className: K.itemsBlock, children: [
-      /* @__PURE__ */ t.jsx("h5", { className: K.subtitle, children: m }),
+    /* @__PURE__ */ t.jsxs("div", { className: Z.itemsBlock, children: [
+      /* @__PURE__ */ t.jsx("h5", { className: Z.subtitle, children: m }),
       /* @__PURE__ */ t.jsx(
-        lt,
+        dt,
         {
-          onChange: ($) => a($),
-          value: i,
+          onChange: (v) => l(v),
+          value: c,
           maxLength: 150
         }
       ),
       /* @__PURE__ */ t.jsx(
-        _t,
+        xt,
         {
           typesText: n,
           setTypesText: s
@@ -242,29 +242,29 @@ const xt = "_accordion_9e4oa_1", ft = "_header_9e4oa_9", bt = "_icon_9e4oa_18",
       )
     ] })
   ] });
-}, zt = "_subtitle_cuny2_1", Gt = "_header_cuny2_8", Yt = "_text_cuny2_9", Xt = "_productsBlock_cuny2_10", Qt = "_top_cuny2_22", Wt = "_itemsBlock_cuny2_31", Jt = "_typeTexts_cuny2_37", Kt = "_block_cuny2_44", Zt = "_active_cuny2_57", te = "_products_cuny2_10", ee = "_product_cuny2_10", se = "_button_cuny2_76", ne = "_disabled_cuny2_87", ce = "_image_cuny2_91", ie = "_info_cuny2_98", oe = "_name_cuny2_110", ae = "_buttons_cuny2_114", le = "_modal_cuny2_121", re = "_link_cuny2_141", de = "_modalOptions_cuny2_147", P = {
-  subtitle: zt,
-  header: Gt,
-  text: Yt,
-  productsBlock: Xt,
-  top: Qt,
-  itemsBlock: Wt,
-  typeTexts: Jt,
-  block: Kt,
-  active: Zt,
-  products: te,
-  product: ee,
-  button: se,
-  disabled: ne,
-  image: ce,
-  info: ie,
-  name: oe,
-  buttons: ae,
-  modal: le,
-  link: re,
-  modalOptions: de
-}, ue = (r) => {
-  const { activeItem: n, setActiveItem: e, popupPosition: o, modalOptions: i, setIsOpenModal: a } = r;
+}, Xt = "_subtitle_cuny2_1", Yt = "_header_cuny2_8", Qt = "_text_cuny2_9", Jt = "_productsBlock_cuny2_10", Kt = "_top_cuny2_22", Zt = "_itemsBlock_cuny2_31", te = "_typeTexts_cuny2_37", ee = "_block_cuny2_44", se = "_active_cuny2_57", ne = "_products_cuny2_10", ce = "_product_cuny2_10", oe = "_button_cuny2_76", ie = "_disabled_cuny2_87", ae = "_image_cuny2_91", le = "_info_cuny2_98", re = "_name_cuny2_110", de = "_buttons_cuny2_114", ue = "_modal_cuny2_121", _e = "_link_cuny2_141", me = "_modalOptions_cuny2_147", P = {
+  subtitle: Xt,
+  header: Yt,
+  text: Qt,
+  productsBlock: Jt,
+  top: Kt,
+  itemsBlock: Zt,
+  typeTexts: te,
+  block: ee,
+  active: se,
+  products: ne,
+  product: ce,
+  button: oe,
+  disabled: ie,
+  image: ae,
+  info: le,
+  name: re,
+  buttons: de,
+  modal: ue,
+  link: _e,
+  modalOptions: me
+}, pe = (d) => {
+  const { activeItem: n, setActiveItem: e, popupPosition: o, modalOptions: c, setIsOpenModal: l } = d;
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
@@ -280,28 +280,28 @@ const xt = "_accordion_9e4oa_1", ft = "_header_9e4oa_9", bt = "_icon_9e4oa_18",
         /* @__PURE__ */ t.jsxs("div", { className: P.top, children: [
           /* @__PURE__ */ t.jsx("h3", { children: n.name }),
           /* @__PURE__ */ t.jsx(
-            x,
+            p,
             {
               name: "X",
               height: 20,
               width: 20,
               hoverable: !0,
               onClick: () => {
-                e(null), a(!1);
+                e(null), l(!1);
               }
             }
           )
         ] }),
-        /* @__PURE__ */ t.jsx("div", { className: P.modalOptions, children: i.map((s) => {
+        /* @__PURE__ */ t.jsx("div", { className: P.modalOptions, children: c.map((s) => {
           if (s.type === "image")
             return /* @__PURE__ */ t.jsx(
               it,
               {
                 label: "Put up an attractive image",
-                onChange: (c) => {
+                onChange: (i) => {
                   const m = {
                     ...n,
-                    [s.field]: c
+                    [s.field]: i
                   };
                   e(m);
                 }
@@ -310,21 +310,21 @@ const xt = "_accordion_9e4oa_1", ft = "_header_9e4oa_9", bt = "_icon_9e4oa_18",
             );
           if (s.type === "text")
             return /* @__PURE__ */ t.jsx(
-              Ut,
+              Wt,
               {
                 typesText: n[s.field.type],
-                setTypesText: (c) => {
+                setTypesText: (i) => {
                   const m = {
                     ...n,
-                    [s.field.type]: c
+                    [s.field.type]: i
                   };
                   e(m);
                 },
                 text: n[s.field.text] || "",
-                setText: (c) => {
+                setText: (i) => {
                   const m = {
                     ...n,
-                    [s.field.text]: c
+                    [s.field.text]: i
                   };
                   e(m);
                 },
@@ -335,10 +335,10 @@ const xt = "_accordion_9e4oa_1", ft = "_header_9e4oa_9", bt = "_icon_9e4oa_18",
             return /* @__PURE__ */ t.jsx(
               G,
               {
-                onChange: (c) => {
+                onChange: (i) => {
                   const m = {
                     ...n,
-                    [s.field]: c
+                    [s.field]: i
                   };
                   e(m);
                 },
@@ -352,10 +352,10 @@ const xt = "_accordion_9e4oa_1", ft = "_header_9e4oa_9", bt = "_icon_9e4oa_18",
               /* @__PURE__ */ t.jsx(
                 G,
                 {
-                  onChange: (c) => {
+                  onChange: (i) => {
                     const m = {
                       ...n,
-                      [s.field.text]: c
+                      [s.field.text]: i
                     };
                     e(m);
                   },
@@ -365,14 +365,14 @@ const xt = "_accordion_9e4oa_1", ft = "_header_9e4oa_9", bt = "_icon_9e4oa_18",
                 }
               ),
               /* @__PURE__ */ t.jsx(
-                V,
+                H,
                 {
                   current: !!n[s.field.switch] || !1,
                   label: s.switchLabel,
-                  onChange: (c) => {
+                  onChange: (i) => {
                     const m = {
                       ...n,
-                      [s.field.switch]: c
+                      [s.field.switch]: i
                     };
                     e(m);
                   }
@@ -381,13 +381,13 @@ const xt = "_accordion_9e4oa_1", ft = "_header_9e4oa_9", bt = "_icon_9e4oa_18",
             ] });
           if (s.type === "list")
             return /* @__PURE__ */ t.jsx(
-              ge,
+              be,
               {
                 items: n[s.field] || [],
-                setItems: (c) => {
+                setItems: (i) => {
                   const m = {
                     ...n,
-                    [s.field]: c
+                    [s.field]: i
                   };
                   e(m);
                 },
@@ -401,129 +401,129 @@ const xt = "_accordion_9e4oa_1", ft = "_header_9e4oa_9", bt = "_icon_9e4oa_18",
             );
           if (s.type === "select")
             return /* @__PURE__ */ t.jsx(
-              Y,
+              W,
               {
                 options: s.itemsOptions,
-                onChange: (c) => {
+                onChange: (i) => {
                   const m = {
                     ...n,
-                    [s.field]: c
+                    [s.field]: i
                   };
                   e(m);
                 },
                 label: s.label,
                 value: n[s.field] || "String",
-                leftAddon: s.leftAddon && s.leftAddon === "icon" && /* @__PURE__ */ t.jsx(x, { name: n[s.field] })
+                leftAddon: s.leftAddon && s.leftAddon === "icon" && /* @__PURE__ */ t.jsx(p, { name: n[s.field] })
               }
             );
         }) })
       ]
     }
   );
-}, me = "_other_g74jx_1", _e = "_subtitle_g74jx_7", he = "_items_g74jx_14", ct = {
-  other: me,
-  subtitle: _e,
-  items: he
-}, ht = (r) => {
-  const { items: n, title: e = "Other" } = r;
-  return /* @__PURE__ */ t.jsxs("div", { className: ct.other, children: [
-    /* @__PURE__ */ t.jsx("h5", { className: ct.subtitle, children: e }),
-    /* @__PURE__ */ t.jsx("div", { className: ct.items, children: n.map((o, i) => /* @__PURE__ */ t.jsx(
-      V,
+}, he = "_other_g74jx_1", ge = "_subtitle_g74jx_7", xe = "_items_g74jx_14", ot = {
+  other: he,
+  subtitle: ge,
+  items: xe
+}, ft = (d) => {
+  const { items: n, title: e = "Other" } = d;
+  return /* @__PURE__ */ t.jsxs("div", { className: ot.other, children: [
+    /* @__PURE__ */ t.jsx("h5", { className: ot.subtitle, children: e }),
+    /* @__PURE__ */ t.jsx("div", { className: ot.items, children: n.map((o, c) => /* @__PURE__ */ t.jsx(
+      H,
       {
         current: o.isItem,
-        onChange: (a) => o.setIsItem(a),
+        onChange: (l) => o.setIsItem(l),
         label: o.label,
         hasBackground: !0,
         paddingless: !1
       },
-      i
+      c
     )) })
   ] });
-}, pe = (r) => {
-  const { index: n, moveProduct: e, children: o } = r, [, i] = ut({
+}, fe = (d) => {
+  const { index: n, moveProduct: e, children: o } = d, [, c] = mt({
     accept: "product",
-    hover(c) {
-      c.index !== n && (e(c.index, n), c.index = n);
+    hover(i) {
+      i.index !== n && (e(i.index, n), i.index = n);
     }
-  }), [{ isDragging: a }, s] = mt({
+  }), [{ isDragging: l }, s] = pt({
     type: "product",
     item: { index: n },
-    collect: (c) => ({
-      isDragging: c.isDragging()
+    collect: (i) => ({
+      isDragging: i.isDragging()
     })
   });
   return /* @__PURE__ */ t.jsx(
     "div",
     {
-      ref: (c) => s(i(c)),
-      className: `${P.product} ${a ? P.dragging : ""}`,
+      ref: (i) => s(c(i)),
+      className: `${P.product} ${l ? P.dragging : ""}`,
       children: o
     }
   );
-}, ge = (r) => {
+}, be = (d) => {
   const {
     isActiveItems: n,
     setIsActiveItems: e,
     items: o,
-    setItems: i,
-    other: a,
+    setItems: c,
+    other: l,
     title: s,
-    subtitle: c,
+    subtitle: i,
     editable: m = !0,
-    draggable: $ = !1,
-    withImage: p = !1,
-    deletable: k = !0,
-    addable: j = !0,
-    itemsType: d,
-    itemsPlaceholder: _ = "",
-    itemsOptions: l,
+    draggable: v = !1,
+    withImage: u = !1,
+    deletable: a = !0,
+    addable: h = !0,
+    itemsType: $,
+    itemsPlaceholder: b = "",
+    itemsOptions: r,
     hasRangeSelector: B = !1,
-    rangeSelectorOptions: q,
+    rangeSelectorOptions: Y,
     modalOptions: Q,
-    addableOptions: F = {},
+    addableOptions: V = {},
     limit: y
-  } = r, [L, R] = f.useState(null), [st, et] = f.useState({
+  } = d, [E, M] = f.useState(null), [nt, st] = f.useState({
     top: 0,
     left: 0
-  }), [h, v] = f.useState(!1), A = (u, w) => {
-    const S = [...o], [N] = S.splice(u, 1);
-    S.splice(w, 0, N), i(S);
+  }), [g, k] = f.useState(!1), S = (_, T) => {
+    const q = [...o], [N] = q.splice(_, 1);
+    q.splice(T, 0, N), c(q);
   };
   f.useEffect(() => {
-    const u = () => {
-      R(null), v(!1);
+    const _ = () => {
+      M(null), k(!1);
     };
-    return document.body.addEventListener("click", u), R(null), v(!1), () => {
-      R(null), v(!1), document.body.removeEventListener("click", u);
+    return document.body.addEventListener("click", _), M(null), k(!1), () => {
+      M(null), k(!1), document.body.removeEventListener("click", _);
     };
   }, []), f.useEffect(() => {
-    if (L) {
-      const u = [...o].map((w) => w.id === L.id ? L : w);
-      i(u);
+    if (E) {
+      const _ = [...o].map((T) => T.id === E.id ? E : T);
+      c(_);
     }
-  }, [L]);
-  const C = (u, w) => {
-    u.stopPropagation(), v(!0);
-    const S = u.target.getBoundingClientRect(), N = 500, W = window.innerHeight;
-    let E = S.top + window.scrollY;
-    E + N > W && (E = W - N - 20), et({
-      top: E - 80,
-      left: S.left - 30
-    }), R(w);
+  }, [E]);
+  const C = (_, T) => {
+    _.stopPropagation(), k(!0);
+    const q = _.target.getBoundingClientRect(), N = 500, J = window.innerHeight;
+    let z = q.top + window.scrollY;
+    z + N > J && (z = J - N - 20), st({
+      top: z - 80,
+      left: q.left - 30
+    }), M(T);
   };
-  function U(u) {
-    if (p)
-      return u ? /* @__PURE__ */ t.jsx(
+  function F(_) {
+    if (u)
+      return _ ? /* @__PURE__ */ t.jsx(
         "img",
         {
-          src: `https://imagedelivery.net/${u[0]}/w=1000`,
+          src: `https://imagedelivery.net/${_[0]}/w=1000`,
           alt: "image",
           width: 16,
           height: 16
         }
       ) : /* @__PURE__ */ t.jsx(
-        x,
+        p,
         {
           name: "Image",
           width: 16,
@@ -532,10 +532,10 @@ const xt = "_accordion_9e4oa_1", ft = "_header_9e4oa_9", bt = "_icon_9e4oa_18",
         }
       );
   }
-  const O = (u, w) => {
-    const S = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-      $ && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-        x,
+  const A = (_, T) => {
+    const q = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+      v && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
+        p,
         {
           name: "DotsSixVertical",
           hoverable: !0,
@@ -543,145 +543,145 @@ const xt = "_accordion_9e4oa_1", ft = "_header_9e4oa_9", bt = "_icon_9e4oa_18",
           height: 20
         }
       ) }),
-      d === "select" && /* @__PURE__ */ t.jsx(
-        Y,
+      $ === "select" && /* @__PURE__ */ t.jsx(
+        W,
         {
           onChange: (N) => {
-            const E = [...o].map((H) => H.id === u.id ? {
-              ...u,
+            const z = [...o].map((R) => R.id === _.id ? {
+              ..._,
               name: N
-            } : H);
-            R({
-              ...u,
+            } : R);
+            M({
+              ..._,
               name: N
-            }), i([...E]);
+            }), c([...z]);
           },
-          value: u.name,
-          options: l,
-          leftAddon: U(u.images)
+          value: _.name,
+          options: r,
+          leftAddon: F(_.images)
         }
       ),
-      d === "input" && /* @__PURE__ */ t.jsx(
+      $ === "input" && /* @__PURE__ */ t.jsx(
         G,
         {
           onChange: (N) => {
-            const E = [...o].map((H) => H.id === u.id ? {
-              ...u,
+            const z = [...o].map((R) => R.id === _.id ? {
+              ..._,
               name: N
-            } : H);
-            i([...E]);
+            } : R);
+            c([...z]);
           },
-          value: u.name,
-          placeholder: _
+          value: _.name,
+          placeholder: b
         }
       ),
-      d === "image" && /* @__PURE__ */ t.jsx(
+      $ === "image" && /* @__PURE__ */ t.jsx(
         it,
         {
           onChange: (N) => {
-            const E = [...o].map((H) => H.id === u.id ? {
-              ...u,
+            const z = [...o].map((R) => R.id === _.id ? {
+              ..._,
               images: N
-            } : H);
-            i([...E]);
+            } : R);
+            c([...z]);
           }
         }
       ),
       /* @__PURE__ */ t.jsxs("div", { className: P.buttons, children: [
         m && /* @__PURE__ */ t.jsx(
-          x,
+          p,
           {
             name: "Sliders",
             hoverable: !0,
             width: 20,
             height: 20,
-            onClick: (N) => C(N, u)
+            onClick: (N) => C(N, _)
           }
         ),
-        k && /* @__PURE__ */ t.jsx(
-          x,
+        a && /* @__PURE__ */ t.jsx(
+          p,
           {
             name: "Trash",
             hoverable: !0,
             width: 20,
             height: 20,
             fill: "#C12A2A",
-            onClick: () => i(o.filter((N) => N.id !== u.id))
+            onClick: () => c(o.filter((N) => N.id !== _.id))
           }
         )
       ] })
     ] });
-    return $ ? /* @__PURE__ */ t.jsx(
-      pe,
+    return v ? /* @__PURE__ */ t.jsx(
+      fe,
       {
-        product: u,
-        index: w,
-        moveProduct: A,
-        children: S
+        product: _,
+        index: T,
+        moveProduct: S,
+        children: q
       },
-      u.id
+      _.id
     ) : /* @__PURE__ */ t.jsx(
       "div",
       {
         className: P.product,
-        children: S
+        children: q
       },
-      u.id
+      _.id
     );
   };
   return /* @__PURE__ */ t.jsxs("div", { className: P.productsBlock, children: [
     (s || n !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: P.top, children: [
       s && /* @__PURE__ */ t.jsx("h3", { className: P.title, children: s }),
       n !== void 0 && /* @__PURE__ */ t.jsx(
-        V,
+        H,
         {
           current: n,
-          onChange: (u) => e == null ? void 0 : e(u)
+          onChange: (_) => e == null ? void 0 : e(_)
         }
       )
     ] }),
-    L && m && Q && h && /* @__PURE__ */ t.jsx(
-      ue,
+    E && m && Q && g && /* @__PURE__ */ t.jsx(
+      pe,
       {
-        activeItem: L,
-        setActiveItem: R,
-        popupPosition: st,
+        activeItem: E,
+        setActiveItem: M,
+        popupPosition: nt,
         modalOptions: Q,
-        setIsOpenModal: v
+        setIsOpenModal: k
       }
     ),
-    B && q && /* @__PURE__ */ t.jsx(bs, { ...q }),
+    B && Y && /* @__PURE__ */ t.jsx(ks, { ...Y }),
     /* @__PURE__ */ t.jsxs("div", { className: P.products, children: [
-      c && /* @__PURE__ */ t.jsx("h5", { className: P.subtitle, children: c }),
-      $ ? /* @__PURE__ */ t.jsx(rt, { backend: dt, children: o.map((u, w) => O(u, w)) }) : o.map((u, w) => O(u, w)),
-      j && /* @__PURE__ */ t.jsxs(
+      i && /* @__PURE__ */ t.jsx("h5", { className: P.subtitle, children: i }),
+      v ? /* @__PURE__ */ t.jsx(ut, { backend: _t, children: o.map((_, T) => A(_, T)) }) : o.map((_, T) => A(_, T)),
+      h && /* @__PURE__ */ t.jsxs(
         X,
         {
-          className: M(P.button, {
+          className: D(P.button, {
             [P.disabled]: !!(y && y <= o.length)
           }),
           size: "s",
           disabled: !!(y && y <= o.length),
           onClick: () => {
-            const u = [...o];
-            d === "select" ? u.push({
-              name: l[0] || `Product ${o.length + 1}`,
-              id: tt(),
-              ...F
-            }) : d === "input" ? u.push({
+            const _ = [...o];
+            $ === "select" ? _.push({
+              name: r[0] || `Product ${o.length + 1}`,
+              id: et(),
+              ...V
+            }) : $ === "input" ? _.push({
               name: "",
-              id: tt(),
-              ...F
-            }) : u.push({
+              id: et(),
+              ...V
+            }) : _.push({
               name: `Image ${o.length + 1}`,
-              id: tt(),
-              ...F
-            }), i(u);
+              id: et(),
+              ...V
+            }), c(_);
           },
           children: [
             /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
             /* @__PURE__ */ t.jsx(
-              x,
+              p,
               {
                 name: "Plus",
                 width: 16,
@@ -692,57 +692,57 @@ const xt = "_accordion_9e4oa_1", ft = "_header_9e4oa_9", bt = "_icon_9e4oa_18",
         }
       )
     ] }),
-    a !== void 0 && /* @__PURE__ */ t.jsx(ht, { items: a })
+    l !== void 0 && /* @__PURE__ */ t.jsx(ft, { items: l })
   ] });
-}, xe = "_subtitle_1fb9q_1", fe = "_header_1fb9q_8", be = "_text_1fb9q_9", je = "_productsBlock_1fb9q_10", ve = "_buttonsBlock_1fb9q_11", ke = "_top_1fb9q_22", ye = "_itemsBlock_1fb9q_31", $e = "_typeTexts_1fb9q_37", Ne = "_block_1fb9q_44", Ce = "_active_1fb9q_56", Ie = "_products_1fb9q_10", Pe = "_product_1fb9q_10", Be = "_button_1fb9q_11", we = "_image_1fb9q_86", Te = "_info_1fb9q_93", qe = "_name_1fb9q_105", Ae = "_buttons_1fb9q_11", Se = "_modal_1fb9q_116", Oe = "_other_1fb9q_135", De = "_options_1fb9q_141", z = {
-  subtitle: xe,
-  header: fe,
-  text: be,
-  productsBlock: je,
-  buttonsBlock: ve,
-  top: ke,
-  itemsBlock: ye,
-  typeTexts: $e,
-  block: Ne,
-  active: Ce,
-  products: Ie,
-  product: Pe,
-  button: Be,
-  image: we,
-  info: Te,
-  name: qe,
-  buttons: Ae,
-  modal: Se,
-  other: Oe,
-  options: De
-}, Ee = (r) => {
-  const { activeButton: n, setActiveButton: e, popupPosition: o } = r, [i, a] = f.useState(n.typesText), [s, c] = f.useState(n.destination), [m, $] = f.useState(n.link || ""), [p, k] = f.useState(n.text || "");
+}, je = "_subtitle_1fb9q_1", ve = "_header_1fb9q_8", ke = "_text_1fb9q_9", ye = "_productsBlock_1fb9q_10", Ne = "_buttonsBlock_1fb9q_11", $e = "_top_1fb9q_22", Ce = "_itemsBlock_1fb9q_31", Ie = "_typeTexts_1fb9q_37", Pe = "_block_1fb9q_44", Te = "_active_1fb9q_56", we = "_products_1fb9q_10", Be = "_product_1fb9q_10", Se = "_button_1fb9q_11", qe = "_image_1fb9q_86", Ae = "_info_1fb9q_93", Oe = "_name_1fb9q_105", Le = "_buttons_1fb9q_11", De = "_modal_1fb9q_116", ze = "_other_1fb9q_135", Ee = "_options_1fb9q_141", U = {
+  subtitle: je,
+  header: ve,
+  text: ke,
+  productsBlock: ye,
+  buttonsBlock: Ne,
+  top: $e,
+  itemsBlock: Ce,
+  typeTexts: Ie,
+  block: Pe,
+  active: Te,
+  products: we,
+  product: Be,
+  button: Se,
+  image: qe,
+  info: Ae,
+  name: Oe,
+  buttons: Le,
+  modal: De,
+  other: ze,
+  options: Ee
+}, Me = (d) => {
+  const { activeButton: n, setActiveButton: e, popupPosition: o } = d, [c, l] = f.useState(n.typesText), [s, i] = f.useState(n.destination), [m, v] = f.useState(n.link || ""), [u, a] = f.useState(n.text || "");
   return f.useEffect(() => {
     e({
       ...n,
       ...{
-        text: p,
+        text: u,
         link: m,
         destination: s,
-        typesText: i
+        typesText: c
       }
     });
-  }, [i, s, m, p]), /* @__PURE__ */ t.jsxs(
+  }, [c, s, m, u]), /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: z.modal,
-      onClick: (j) => {
-        j.stopPropagation();
+      className: U.modal,
+      onClick: (h) => {
+        h.stopPropagation();
       },
       style: {
         top: `${o.top}px`,
         left: `${o.left}px`
       },
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: z.top, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: U.top, children: [
           /* @__PURE__ */ t.jsx("h3", { children: n.type }),
           /* @__PURE__ */ t.jsx(
-            x,
+            p,
             {
               name: "X",
               height: 20,
@@ -752,18 +752,18 @@ const xt = "_accordion_9e4oa_1", ft = "_header_9e4oa_9", bt = "_icon_9e4oa_18",
             }
           )
         ] }),
-        /* @__PURE__ */ t.jsxs("div", { className: z.options, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: U.options, children: [
           /* @__PURE__ */ t.jsx(
-            Y,
+            W,
             {
               label: "Destination",
-              onChange: (j) => c(j),
+              onChange: (h) => i(h),
               options: ["Go to Page", "Open Link"],
               value: s
             }
           ),
           s === "Go to Page" ? /* @__PURE__ */ t.jsx(
-            Y,
+            W,
             {
               label: "Go to",
               onChange: () => {
@@ -774,129 +774,129 @@ const xt = "_accordion_9e4oa_1", ft = "_header_9e4oa_9", bt = "_icon_9e4oa_18",
           ) : /* @__PURE__ */ t.jsx(
             G,
             {
-              onChange: (j) => $(j),
+              onChange: (h) => v(h),
               value: m,
               placeholder: "https://",
               label: "Link"
             }
           ),
           /* @__PURE__ */ t.jsx(
-            V,
+            H,
             {
               current: !1,
               label: "Open in new tab"
             }
           ),
           /* @__PURE__ */ t.jsx(
-            lt,
+            dt,
             {
-              onChange: (j) => k(j),
-              value: p,
+              onChange: (h) => a(h),
+              value: u,
               label: "Text",
               maxLength: 150
             }
           ),
           /* @__PURE__ */ t.jsx(
-            _t,
+            xt,
             {
-              typesText: i,
-              setTypesText: a
+              typesText: c,
+              setTypesText: l
             }
           )
         ] })
       ]
     }
   );
-}, Me = "_subtitle_m8qel_1", Le = "_header_m8qel_8", Re = "_text_m8qel_9", He = "_productsBlock_m8qel_10", Ve = "_buttonsBlock_m8qel_11", Fe = "_top_m8qel_23", Ue = "_itemsBlock_m8qel_32", ze = "_typeTexts_m8qel_38", Ge = "_block_m8qel_45", Ye = "_active_m8qel_58", Xe = "_products_m8qel_10", Qe = "_product_m8qel_10", We = "_button_m8qel_11", Je = "_image_m8qel_88", Ke = "_info_m8qel_95", Ze = "_name_m8qel_107", ts = "_buttons_m8qel_11", es = "_modal_m8qel_118", ss = "_other_m8qel_137", ns = "_options_m8qel_143", Z = {
-  subtitle: Me,
-  header: Le,
-  text: Re,
-  productsBlock: He,
-  buttonsBlock: Ve,
-  top: Fe,
-  itemsBlock: Ue,
-  typeTexts: ze,
-  block: Ge,
-  active: Ye,
-  products: Xe,
-  product: Qe,
-  button: We,
-  image: Je,
-  info: Ke,
-  name: Ze,
-  buttons: ts,
-  modal: es,
-  other: ss,
-  options: ns
-}, cs = (r) => {
-  const { buttons: n, setButtons: e, deletable: o = !0, addable: i = !0 } = r, [a, s] = f.useState(null), [c, m] = f.useState({
+}, Re = "_subtitle_m8qel_1", He = "_header_m8qel_8", Ve = "_text_m8qel_9", Fe = "_productsBlock_m8qel_10", Ue = "_buttonsBlock_m8qel_11", Ge = "_top_m8qel_23", We = "_itemsBlock_m8qel_32", Xe = "_typeTexts_m8qel_38", Ye = "_block_m8qel_45", Qe = "_active_m8qel_58", Je = "_products_m8qel_10", Ke = "_product_m8qel_10", Ze = "_button_m8qel_11", ts = "_image_m8qel_88", es = "_info_m8qel_95", ss = "_name_m8qel_107", ns = "_buttons_m8qel_11", cs = "_modal_m8qel_118", os = "_other_m8qel_137", is = "_options_m8qel_143", tt = {
+  subtitle: Re,
+  header: He,
+  text: Ve,
+  productsBlock: Fe,
+  buttonsBlock: Ue,
+  top: Ge,
+  itemsBlock: We,
+  typeTexts: Xe,
+  block: Ye,
+  active: Qe,
+  products: Je,
+  product: Ke,
+  button: Ze,
+  image: ts,
+  info: es,
+  name: ss,
+  buttons: ns,
+  modal: cs,
+  other: os,
+  options: is
+}, as = (d) => {
+  const { buttons: n, setButtons: e, deletable: o = !0, addable: c = !0 } = d, [l, s] = f.useState(null), [i, m] = f.useState({
     top: 0,
     left: 0
   });
   f.useEffect(() => {
-    const p = () => {
+    const u = () => {
       s(null);
     };
-    return document.body.addEventListener("click", p), s(null), () => {
-      s(null), document.body.removeEventListener("click", p);
+    return document.body.addEventListener("click", u), s(null), () => {
+      s(null), document.body.removeEventListener("click", u);
     };
   }, []), f.useEffect(() => {
-    if (a) {
-      const p = [...n].map((k) => k.id === a.id ? a : k);
-      e(p);
+    if (l) {
+      const u = [...n].map((a) => a.id === l.id ? l : a);
+      e(u);
     }
-  }, [a]);
-  const $ = (p, k) => {
-    p.stopPropagation();
-    const j = p.target.getBoundingClientRect(), d = 490, _ = window.innerHeight;
-    let l = j.top + window.scrollY;
-    l + d > _ && (l = _ - d - 20), m({
-      top: l,
-      left: j.left - 30
-    }), s(k);
+  }, [l]);
+  const v = (u, a) => {
+    u.stopPropagation();
+    const h = u.target.getBoundingClientRect(), $ = 490, b = window.innerHeight;
+    let r = h.top + window.scrollY;
+    r + $ > b && (r = b - $ - 20), m({
+      top: r,
+      left: h.left - 30
+    }), s(a);
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: Z.products, children: [
-    /* @__PURE__ */ t.jsx("h5", { className: Z.subtitle, children: "Button Type" }),
-    n.map((p) => /* @__PURE__ */ t.jsxs(
+  return /* @__PURE__ */ t.jsxs("div", { className: tt.products, children: [
+    /* @__PURE__ */ t.jsx("h5", { className: tt.subtitle, children: "Button Type" }),
+    n.map((u) => /* @__PURE__ */ t.jsxs(
       "div",
       {
-        className: Z.product,
+        className: tt.product,
         children: [
           /* @__PURE__ */ t.jsx(
-            Y,
+            W,
             {
-              onChange: (k) => {
-                const d = [...n].map((_) => _.id === p.id ? {
-                  ...p,
-                  type: k
-                } : _);
-                e(d);
+              onChange: (a) => {
+                const $ = [...n].map((b) => b.id === u.id ? {
+                  ...u,
+                  type: a
+                } : b);
+                e($);
               },
-              value: p.type,
+              value: u.type,
               options: ["Primary", "Secondary", "Tertiary"]
             }
           ),
-          /* @__PURE__ */ t.jsxs("div", { className: Z.buttons, children: [
+          /* @__PURE__ */ t.jsxs("div", { className: tt.buttons, children: [
             /* @__PURE__ */ t.jsx(
-              x,
+              p,
               {
                 name: "Sliders",
                 hoverable: !0,
                 width: 20,
                 height: 20,
-                onClick: (k) => {
-                  $(k, p);
+                onClick: (a) => {
+                  v(a, u);
                 }
               }
             ),
             o && /* @__PURE__ */ t.jsx(
-              x,
+              p,
               {
                 name: "Trash",
                 hoverable: !0,
                 onClick: () => {
-                  const k = n.filter((j) => j.id !== p.id);
-                  e(k);
+                  const a = n.filter((h) => h.id !== u.id);
+                  e(a);
                 },
                 width: 20,
                 height: 20,
@@ -906,35 +906,35 @@ const xt = "_accordion_9e4oa_1", ft = "_header_9e4oa_9", bt = "_icon_9e4oa_18",
           ] })
         ]
       },
-      p.id
+      u.id
     )),
-    a && /* @__PURE__ */ t.jsx(
-      Ee,
+    l && /* @__PURE__ */ t.jsx(
+      Me,
       {
-        activeButton: a,
+        activeButton: l,
         setActiveButton: s,
-        popupPosition: c
+        popupPosition: i
       }
     ),
-    i && /* @__PURE__ */ t.jsxs(
+    c && /* @__PURE__ */ t.jsxs(
       X,
       {
-        className: Z.button,
+        className: tt.button,
         size: "s",
         onClick: () => {
-          const p = [...n];
-          p.push({
+          const u = [...n];
+          u.push({
             type: "Primary",
-            id: tt(),
+            id: et(),
             typesText: [],
             destination: "Go to Page",
-            text: ""
-          }), e(p);
+            text: "Button Name"
+          }), e(u);
         },
         children: [
           /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
           /* @__PURE__ */ t.jsx(
-            x,
+            p,
             {
               name: "Plus",
               width: 16,
@@ -945,50 +945,50 @@ const xt = "_accordion_9e4oa_1", ft = "_header_9e4oa_9", bt = "_icon_9e4oa_18",
       }
     )
   ] });
-}, Vn = (r) => {
-  const { isActiveButtons: n, setIsActiveButtons: e, buttons: o, setButtons: i } = r;
-  return /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsxs("div", { className: z.buttonsBlock, children: [
-    /* @__PURE__ */ t.jsxs("div", { className: z.top, children: [
-      /* @__PURE__ */ t.jsx("h3", { className: z.title, children: "Buttons" }),
+}, nc = (d) => {
+  const { isActiveButtons: n, setIsActiveButtons: e, buttons: o, setButtons: c } = d;
+  return /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsxs("div", { className: U.buttonsBlock, children: [
+    /* @__PURE__ */ t.jsxs("div", { className: U.top, children: [
+      /* @__PURE__ */ t.jsx("h3", { className: U.title, children: "Buttons" }),
       /* @__PURE__ */ t.jsx(
-        V,
+        H,
         {
           current: n,
-          onChange: (a) => e(a)
+          onChange: (l) => e(l)
         }
       )
     ] }),
     /* @__PURE__ */ t.jsx(
-      cs,
+      as,
       {
         buttons: o,
-        setButtons: i
+        setButtons: c
       }
     )
   ] }) });
-}, is = "_wrapper_m18qi_1", os = "_subtitle_m18qi_7", as = "_content_m18qi_14", ls = "_range_m18qi_22", rs = "_track_m18qi_27", ds = "_progress_m18qi_36", us = "_dots_m18qi_46", ms = "_dot_m18qi_46", _s = "_active_m18qi_65", hs = "_input_m18qi_77", ps = "_countBlock_m18qi_91", gs = "_count_m18qi_91", xs = "_controls_m18qi_107", fs = "_button_m18qi_113", I = {
-  wrapper: is,
-  subtitle: os,
-  content: as,
-  range: ls,
-  track: rs,
-  progress: ds,
-  dots: us,
-  dot: ms,
-  active: _s,
-  input: hs,
-  countBlock: ps,
-  count: gs,
-  controls: xs,
-  button: fs
-}, bs = (r) => {
-  const { label: n, min: e = 1, max: o = 4, step: i = 1, count: a, setCount: s } = r, [c, m] = f.useState(!1), $ = Array.from({ length: (o - e) / i + 1 }), p = (a - e) / (o - e) * 100, k = () => {
-    a < o && s(a + i);
-  }, j = () => {
-    a > e && s(a - i);
-  }, d = (_) => {
-    const l = e + _ * i;
-    s(l);
+}, ls = "_wrapper_m18qi_1", rs = "_subtitle_m18qi_7", ds = "_content_m18qi_14", us = "_range_m18qi_22", _s = "_track_m18qi_27", ms = "_progress_m18qi_36", ps = "_dots_m18qi_46", hs = "_dot_m18qi_46", gs = "_active_m18qi_65", xs = "_input_m18qi_77", fs = "_countBlock_m18qi_91", bs = "_count_m18qi_91", js = "_controls_m18qi_107", vs = "_button_m18qi_113", I = {
+  wrapper: ls,
+  subtitle: rs,
+  content: ds,
+  range: us,
+  track: _s,
+  progress: ms,
+  dots: ps,
+  dot: hs,
+  active: gs,
+  input: xs,
+  countBlock: fs,
+  count: bs,
+  controls: js,
+  button: vs
+}, ks = (d) => {
+  const { label: n, min: e = 1, max: o = 4, step: c = 1, count: l, setCount: s } = d, [i, m] = f.useState(!1), v = Array.from({ length: (o - e) / c + 1 }), u = (l - e) / (o - e) * 100, a = () => {
+    l < o && s(l + c);
+  }, h = () => {
+    l > e && s(l - c);
+  }, $ = (b) => {
+    const r = e + b * c;
+    s(r);
   };
   return /* @__PURE__ */ t.jsxs("div", { className: I.wrapper, children: [
     n && /* @__PURE__ */ t.jsx("h5", { className: I.subtitle, children: n }),
@@ -999,23 +999,23 @@ const xt = "_accordion_9e4oa_1", ft = "_header_9e4oa_9", bt = "_icon_9e4oa_18",
           "div",
           {
             className: I.progress,
-            style: { width: `${p}%` }
+            style: { width: `${u}%` }
           }
         ),
-        /* @__PURE__ */ t.jsx("div", { className: I.dots, children: $.map((_, l) => {
-          const B = l <= (a - e) / i;
+        /* @__PURE__ */ t.jsx("div", { className: I.dots, children: v.map((b, r) => {
+          const B = r <= (l - e) / c;
           return /* @__PURE__ */ t.jsx(
             "button",
             {
-              onClick: () => d(l),
-              className: M(I.dot, {
+              onClick: () => $(r),
+              className: D(I.dot, {
                 [I.active]: B,
                 [I.inactive]: !B,
-                [I.dragging]: c
+                [I.dragging]: i
               }),
-              "aria-label": `Set value to ${e + l * i}`
+              "aria-label": `Set value to ${e + r * c}`
             },
-            l
+            r
           );
         }) }),
         /* @__PURE__ */ t.jsx(
@@ -1024,9 +1024,9 @@ const xt = "_accordion_9e4oa_1", ft = "_header_9e4oa_9", bt = "_icon_9e4oa_18",
             type: "range",
             min: e,
             max: o,
-            step: i,
-            value: a,
-            onChange: (_) => s(Number(_.target.value)),
+            step: c,
+            value: l,
+            onChange: (b) => s(Number(b.target.value)),
             onMouseDown: () => m(!0),
             onMouseUp: () => m(!1),
             onTouchStart: () => m(!0),
@@ -1043,23 +1043,23 @@ const xt = "_accordion_9e4oa_1", ft = "_header_9e4oa_9", bt = "_icon_9e4oa_18",
             min: e,
             max: o,
             paddingless: !0,
-            onChange: (_) => {
-              const l = Number(_);
-              l > o ? s(o) : l < e ? s(e) : s(l);
+            onChange: (b) => {
+              const r = Number(b);
+              r > o ? s(o) : r < e ? s(e) : s(r);
             },
-            value: String(a)
+            value: String(l)
           }
         ),
         /* @__PURE__ */ t.jsxs("div", { className: I.controls, children: [
           /* @__PURE__ */ t.jsx(
             "button",
             {
-              onClick: k,
-              disabled: a >= o,
+              onClick: a,
+              disabled: l >= o,
               className: I.button,
               "aria-label": "Increment count",
               children: /* @__PURE__ */ t.jsx(
-                x,
+                p,
                 {
                   name: "CaretUp",
                   width: 15,
@@ -1071,12 +1071,12 @@ const xt = "_accordion_9e4oa_1", ft = "_header_9e4oa_9", bt = "_icon_9e4oa_18",
           /* @__PURE__ */ t.jsx(
             "button",
             {
-              onClick: j,
-              disabled: a <= e,
+              onClick: h,
+              disabled: l <= e,
               className: I.button,
               "aria-label": "Decrement count",
               children: /* @__PURE__ */ t.jsx(
-                x,
+                p,
                 {
                   name: "CaretDown",
                   width: 15,
@@ -1089,64 +1089,64 @@ const xt = "_accordion_9e4oa_1", ft = "_header_9e4oa_9", bt = "_icon_9e4oa_18",
       ] })
     ] })
   ] });
-}, js = "_subtitle_16rdk_1", vs = "_header_16rdk_8", ks = "_text_16rdk_9", ys = "_productsBlock_16rdk_10", $s = "_top_16rdk_22", Ns = "_itemsBlock_16rdk_31", Cs = "_typeTexts_16rdk_37", Is = "_block_16rdk_44", Ps = "_active_16rdk_57", Bs = "_products_16rdk_10", ws = "_product_16rdk_10", Ts = "_button_16rdk_76", qs = "_image_16rdk_87", As = "_info_16rdk_94", Ss = "_name_16rdk_106", Os = "_buttons_16rdk_110", Ds = "_modal_16rdk_117", Es = "_link_16rdk_137", Ms = "_modalOptions_16rdk_143", T = {
-  subtitle: js,
-  header: vs,
-  text: ks,
-  productsBlock: ys,
-  top: $s,
-  itemsBlock: Ns,
-  typeTexts: Cs,
-  block: Is,
-  active: Ps,
-  products: Bs,
-  product: ws,
-  button: Ts,
-  image: qs,
-  info: As,
-  name: Ss,
-  buttons: Os,
-  modal: Ds,
-  link: Es,
-  modalOptions: Ms
-}, Ls = (r) => {
-  const { activeItem: n, setActiveItem: e, popupPosition: o, setIsOpenModal: i } = r;
+}, ys = "_subtitle_16rdk_1", Ns = "_header_16rdk_8", $s = "_text_16rdk_9", Cs = "_productsBlock_16rdk_10", Is = "_top_16rdk_22", Ps = "_itemsBlock_16rdk_31", Ts = "_typeTexts_16rdk_37", ws = "_block_16rdk_44", Bs = "_active_16rdk_57", Ss = "_products_16rdk_10", qs = "_product_16rdk_10", As = "_button_16rdk_76", Os = "_image_16rdk_87", Ls = "_info_16rdk_94", Ds = "_name_16rdk_106", zs = "_buttons_16rdk_110", Es = "_modal_16rdk_117", Ms = "_link_16rdk_137", Rs = "_modalOptions_16rdk_143", w = {
+  subtitle: ys,
+  header: Ns,
+  text: $s,
+  productsBlock: Cs,
+  top: Is,
+  itemsBlock: Ps,
+  typeTexts: Ts,
+  block: ws,
+  active: Bs,
+  products: Ss,
+  product: qs,
+  button: As,
+  image: Os,
+  info: Ls,
+  name: Ds,
+  buttons: zs,
+  modal: Es,
+  link: Ms,
+  modalOptions: Rs
+}, Hs = (d) => {
+  const { activeItem: n, setActiveItem: e, popupPosition: o, setIsOpenModal: c } = d;
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: T.modal,
-      onClick: (a) => {
-        a.stopPropagation();
+      className: w.modal,
+      onClick: (l) => {
+        l.stopPropagation();
       },
       style: {
         top: `${o.top}px`,
         left: `${o.left}px`
       },
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: T.top, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: w.top, children: [
           /* @__PURE__ */ t.jsx("h3", { children: n.name }),
           /* @__PURE__ */ t.jsx(
-            x,
+            p,
             {
               name: "X",
               height: 20,
               width: 20,
               hoverable: !0,
               onClick: () => {
-                i(!1), e(null);
+                c(!1), e(null);
               }
             }
           )
         ] }),
-        /* @__PURE__ */ t.jsx("div", { className: T.modalOptions, children: /* @__PURE__ */ t.jsx(
+        /* @__PURE__ */ t.jsx("div", { className: w.modalOptions, children: /* @__PURE__ */ t.jsx(
           it,
           {
             label: "Put up an attractive image",
-            onChange: (a) => {
+            onChange: (l) => {
               const s = {
                 ...n,
-                images: a,
-                imagePath: a[0]
+                images: l,
+                imagePath: l[0]
               };
               e(s);
             }
@@ -1155,84 +1155,84 @@ const xt = "_accordion_9e4oa_1", ft = "_header_9e4oa_9", bt = "_icon_9e4oa_18",
       ]
     }
   );
-}, Rs = (r) => {
-  const { index: n, moveProduct: e, children: o } = r, [, i] = ut({
+}, Vs = (d) => {
+  const { index: n, moveProduct: e, children: o } = d, [, c] = mt({
     accept: "product",
-    hover(c) {
-      c.index !== n && (e(c.index, n), c.index = n);
+    hover(i) {
+      i.index !== n && (e(i.index, n), i.index = n);
     }
-  }), [{ isDragging: a }, s] = mt({
+  }), [{ isDragging: l }, s] = pt({
     type: "product",
     item: { index: n },
-    collect: (c) => ({
-      isDragging: c.isDragging()
+    collect: (i) => ({
+      isDragging: i.isDragging()
     })
   });
   return /* @__PURE__ */ t.jsx(
     "div",
     {
-      ref: (c) => s(i(c)),
-      className: `${T.product} ${a ? T.dragging : ""}`,
+      ref: (i) => s(c(i)),
+      className: `${w.product} ${l ? w.dragging : ""}`,
       children: o
     }
   );
-}, Fn = (r) => {
+}, cc = (d) => {
   const {
     isActiveItems: n,
     setIsActiveItems: e,
     items: o,
-    setItems: i,
-    other: a,
+    setItems: c,
+    other: l,
     title: s,
-    subtitle: c,
+    subtitle: i,
     editable: m = !0,
-    draggable: $ = !1,
-    withImage: p = !1,
-    deletable: k = !0,
-    addable: j = !0,
-    itemsType: d,
-    itemsOptions: _
-  } = r, [l, B] = f.useState(null), [q, Q] = f.useState({
+    draggable: v = !1,
+    withImage: u = !1,
+    deletable: a = !0,
+    addable: h = !0,
+    itemsType: $,
+    itemsOptions: b
+  } = d, [r, B] = f.useState(null), [Y, Q] = f.useState({
     top: 0,
     left: 0
-  }), [F, y] = f.useState(!1), L = (h, v) => {
-    const A = [...o], [C] = A.splice(h, 1);
-    A.splice(v, 0, C), i(A);
+  }), [V, y] = f.useState(!1), E = (g, k) => {
+    const S = [...o], [C] = S.splice(g, 1);
+    S.splice(k, 0, C), c(S);
   };
   f.useEffect(() => {
-    const h = () => {
+    const g = () => {
       B(null), y(!1);
     };
-    return document.body.addEventListener("click", h), B(null), y(!1), () => {
-      B(null), y(!1), document.body.removeEventListener("click", h);
+    return document.body.addEventListener("click", g), B(null), y(!1), () => {
+      B(null), y(!1), document.body.removeEventListener("click", g);
     };
   }, []), f.useEffect(() => {
-    if (l) {
-      const h = [...o].map((v) => v.id === l.id ? l : v);
-      i(h);
+    if (r) {
+      const g = [...o].map((k) => k.id === r.id ? r : k);
+      c(g);
     }
-  }, [l]);
-  const R = (h, v) => {
-    h.stopPropagation();
-    const A = h.target.getBoundingClientRect(), C = 100, U = window.innerHeight;
-    let O = A.top + window.scrollY;
-    O + C > U && (O = U - C - 20), y(!0), Q({
-      top: O - 80,
-      left: A.left - 30
-    }), B(v);
+  }, [r]);
+  const M = (g, k) => {
+    g.stopPropagation();
+    const S = g.target.getBoundingClientRect(), C = 100, F = window.innerHeight;
+    let A = S.top + window.scrollY;
+    A + C > F && (A = F - C - 20), y(!0), Q({
+      top: A - 80,
+      left: S.left - 30
+    }), B(k);
   };
-  function st(h) {
-    if (p)
-      return h ? /* @__PURE__ */ t.jsx(
+  function nt(g) {
+    if (u)
+      return g ? /* @__PURE__ */ t.jsx(
         "img",
         {
-          src: `https://imagedelivery.net/${h}/w=1000`,
+          src: `https://imagedelivery.net/${g}/w=1000`,
           alt: "image",
           width: 16,
           height: 16
         }
       ) : /* @__PURE__ */ t.jsx(
-        x,
+        p,
         {
           name: "Image",
           width: 16,
@@ -1241,134 +1241,134 @@ const xt = "_accordion_9e4oa_1", ft = "_header_9e4oa_9", bt = "_icon_9e4oa_18",
         }
       );
   }
-  const et = (h, v) => {
-    const A = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-      $ && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-        x,
+  const st = (g, k) => {
+    const S = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+      v && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
+        p,
         {
           name: "DotsSixVertical",
           hoverable: !0,
           width: 20,
           height: 20
         }
-      ) }, v),
-      d === "select" && /* @__PURE__ */ t.jsx(
-        Y,
+      ) }, k),
+      $ === "select" && /* @__PURE__ */ t.jsx(
+        W,
         {
           onChange: (C) => {
-            const U = [...o], O = Number(C.split(" ")[1]), u = _.find((N) => N.id === O);
-            if (!u) return;
-            const w = {
-              ...u.productData.stats,
-              newPrice: u.productData.minPrice.amount,
-              oldPrice: u.productData.compareAtPrice.amount
-            }, S = U.map((N) => N.id === h.id ? {
-              ...h,
+            const F = [...o], A = Number(C.split(" ")[1]), _ = b.find((N) => N.id === A);
+            if (!_) return;
+            const T = {
+              ..._.productData.stats,
+              newPrice: _.productData.minPrice.amount,
+              oldPrice: _.productData.compareAtPrice.amount
+            }, q = F.map((N) => N.id === g.id ? {
+              ...g,
               name: C,
-              listingId: O,
-              stats: w
+              listingId: A,
+              stats: T
             } : N);
             B({
-              ...h,
+              ...g,
               name: C,
-              listingId: O
-            }), i([...S]);
+              listingId: A
+            }), c([...q]);
           },
-          value: h.name,
-          options: [..._.map((C) => `Product ${C.id}`)],
-          leftAddon: st(h.images[0])
+          value: g.name,
+          options: [...b.map((C) => `Product ${C.id}`)],
+          leftAddon: nt(g.images[0])
         },
-        v
+        k
       ),
-      /* @__PURE__ */ t.jsxs("div", { className: T.buttons, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: w.buttons, children: [
         m && /* @__PURE__ */ t.jsx(
-          x,
+          p,
           {
             name: "Sliders",
             hoverable: !0,
             width: 20,
             height: 20,
-            onClick: (C) => R(C, h)
+            onClick: (C) => M(C, g)
           }
         ),
-        k && /* @__PURE__ */ t.jsx(
-          x,
+        a && /* @__PURE__ */ t.jsx(
+          p,
           {
             name: "Trash",
             hoverable: !0,
             width: 20,
             height: 20,
             fill: "#C12A2A",
-            onClick: () => i(o.filter((C) => C.id !== h.id))
+            onClick: () => c(o.filter((C) => C.id !== g.id))
           }
         )
       ] })
     ] });
-    return $ ? /* @__PURE__ */ t.jsx(
-      Rs,
+    return v ? /* @__PURE__ */ t.jsx(
+      Vs,
       {
-        product: h,
-        index: v,
-        moveProduct: L,
-        children: A
+        product: g,
+        index: k,
+        moveProduct: E,
+        children: S
       },
-      h.id
+      g.id
     ) : /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: T.product,
-        children: A
+        className: w.product,
+        children: S
       },
-      h.id
+      g.id
     );
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: T.productsBlock, children: [
-    (s || n !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: T.top, children: [
-      s && /* @__PURE__ */ t.jsx("h3", { className: T.title, children: s }),
+  return /* @__PURE__ */ t.jsxs("div", { className: w.productsBlock, children: [
+    (s || n !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: w.top, children: [
+      s && /* @__PURE__ */ t.jsx("h3", { className: w.title, children: s }),
       n !== void 0 && /* @__PURE__ */ t.jsx(
-        V,
+        H,
         {
           current: n,
-          onChange: (h) => e == null ? void 0 : e(h)
+          onChange: (g) => e == null ? void 0 : e(g)
         }
       )
     ] }),
-    F && l && /* @__PURE__ */ t.jsx(
-      Ls,
+    V && r && /* @__PURE__ */ t.jsx(
+      Hs,
       {
-        activeItem: l,
+        activeItem: r,
         setActiveItem: B,
         setIsOpenModal: y,
-        popupPosition: q
+        popupPosition: Y
       }
     ),
-    /* @__PURE__ */ t.jsxs("div", { className: T.products, children: [
-      c && /* @__PURE__ */ t.jsx("h5", { className: T.subtitle, children: c }),
-      $ ? /* @__PURE__ */ t.jsx(rt, { backend: dt, children: o.map((h, v) => et(h, v)) }) : o.map((h, v) => et(h, v)),
-      j && /* @__PURE__ */ t.jsxs(
+    /* @__PURE__ */ t.jsxs("div", { className: w.products, children: [
+      i && /* @__PURE__ */ t.jsx("h5", { className: w.subtitle, children: i }),
+      v ? /* @__PURE__ */ t.jsx(ut, { backend: _t, children: o.map((g, k) => st(g, k)) }) : o.map((g, k) => st(g, k)),
+      h && /* @__PURE__ */ t.jsxs(
         X,
         {
-          className: T.button,
+          className: w.button,
           size: "s",
           onClick: () => {
-            const h = [...o], v = _[0].id;
-            h.push({
-              name: `Product ${v}`,
-              id: tt(),
-              listingId: v,
+            const g = [...o], k = b[0].id;
+            g.push({
+              name: `Product ${k}`,
+              id: et(),
+              listingId: k,
               imagePath: "",
               images: [],
               stats: {
-                ..._[0].productData.stats,
-                newPrice: _[0].productData.minPrice.amount,
-                oldPrice: _[0].productData.compareAtPrice.amount
+                ...b[0].productData.stats,
+                newPrice: b[0].productData.minPrice.amount,
+                oldPrice: b[0].productData.compareAtPrice.amount
               }
-            }), i(h);
+            }), c(g);
           },
           children: [
             /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
             /* @__PURE__ */ t.jsx(
-              x,
+              p,
               {
                 name: "Plus",
                 width: 16,
@@ -1379,122 +1379,122 @@ const xt = "_accordion_9e4oa_1", ft = "_header_9e4oa_9", bt = "_icon_9e4oa_18",
         }
       )
     ] }),
-    a !== void 0 && /* @__PURE__ */ t.jsx(ht, { items: a })
+    l !== void 0 && /* @__PURE__ */ t.jsx(ft, { items: l })
   ] });
-}, Hs = "_options_10tml_1", Vs = "_price_10tml_12", Fs = "_oldPrice_10tml_19", Us = "_newPrice_10tml_27", zs = "_meta_10tml_34", Gs = "_info_10tml_40", Ys = "_infoRight_10tml_48", Xs = "_buttons_10tml_55", Qs = "_variants_10tml_62", Ws = "_variant_10tml_62", Js = "_stock_10tml_79", Ks = "_variantInfo_10tml_86", Zs = "_quantity_10tml_92", tn = "_count_10tml_99", en = "_button_10tml_55", sn = "_activeVariant_10tml_120", nn = "_chargeTypes_10tml_124", cn = "_charge_10tml_124", on = "_chargeActive_10tml_144", an = "_title_10tml_149", b = {
-  options: Hs,
-  price: Vs,
-  oldPrice: Fs,
-  newPrice: Us,
-  meta: zs,
-  info: Gs,
-  infoRight: Ys,
-  buttons: Xs,
-  variants: Qs,
-  variant: Ws,
-  stock: Js,
-  variantInfo: Ks,
-  quantity: Zs,
-  count: tn,
-  button: en,
-  activeVariant: sn,
-  chargeTypes: nn,
-  charge: cn,
-  chargeActive: on,
-  title: an
+}, Fs = "_options_11lki_1", Us = "_price_11lki_12", Gs = "_oldPrice_11lki_19", Ws = "_newPrice_11lki_27", Xs = "_meta_11lki_34", Ys = "_info_11lki_40", Qs = "_infoRight_11lki_48", Js = "_buttons_11lki_55", Ks = "_variants_11lki_62", Zs = "_variant_11lki_62", tn = "_stock_11lki_79", en = "_variantInfo_11lki_86", sn = "_quantity_11lki_92", nn = "_count_11lki_99", cn = "_button_11lki_55", on = "_activeVariant_11lki_120", an = "_chargeTypes_11lki_124", ln = "_charge_11lki_124", rn = "_chargeActive_11lki_145", dn = "_title_11lki_150", j = {
+  options: Fs,
+  price: Us,
+  oldPrice: Gs,
+  newPrice: Ws,
+  meta: Xs,
+  info: Ys,
+  infoRight: Qs,
+  buttons: Js,
+  variants: Ks,
+  variant: Zs,
+  stock: tn,
+  variantInfo: en,
+  quantity: sn,
+  count: nn,
+  button: cn,
+  activeVariant: on,
+  chargeTypes: an,
+  charge: ln,
+  chargeActive: rn,
+  title: dn
 };
-var pt = /* @__PURE__ */ ((r) => (r.ONE_TIME = "One-Time", r.RECURRING = "Subscribe & Save", r))(pt || {});
-const Un = (r) => {
-  const { variants: n } = r, [e, o] = f.useState(n[0]), [i, a] = f.useState(e.chargeTypes[0]), s = ot(), [c, m] = f.useState(1), { reset: $, addProductToCart: p, getProducts: k } = at();
-  async function j() {
-    await k(), await p({
-      productId: r.id,
+var bt = /* @__PURE__ */ ((d) => (d.ONE_TIME = "One-Time", d.RECURRING = "Subscribe & Save", d))(bt || {});
+const oc = (d) => {
+  const { variants: n } = d, [e, o] = f.useState(n[0]), [c, l] = f.useState(e.chargeTypes[0]), s = at(), [i, m] = f.useState(1), { reset: v, addProductToCart: u, getProducts: a } = lt();
+  async function h() {
+    await a(), await u({
+      productId: d.id,
       productVariantId: e.id,
-      quantity: c
+      quantity: i
     });
   }
-  function d() {
-    $(), j(), s("/checkout");
+  function $() {
+    v(), h(), s("/checkout");
   }
-  function _(l) {
-    if (l >= 864e5) {
-      const y = Math.floor(l / 864e5);
+  function b(r) {
+    if (r >= 864e5) {
+      const y = Math.floor(r / 864e5);
       return `${y} ${y === 1 ? "day" : "days"}`;
-    } else if (l >= 36e5) {
-      const y = Math.floor(l / 36e5);
+    } else if (r >= 36e5) {
+      const y = Math.floor(r / 36e5);
       return `${y} ${y === 1 ? "hour" : "hours"}`;
-    } else if (l >= 6e4) {
-      const y = Math.floor(l / 6e4);
+    } else if (r >= 6e4) {
+      const y = Math.floor(r / 6e4);
       return `${y} ${y === 1 ? "minute" : "minutes"}`;
     } else {
-      const y = Math.floor(l / 1e3);
+      const y = Math.floor(r / 1e3);
       return `${y} ${y === 1 ? "second" : "seconds"}`;
     }
   }
-  return /* @__PURE__ */ t.jsxs("div", { className: b.options, children: [
-    /* @__PURE__ */ t.jsx("div", { className: b.chargeTypes, children: e.chargeTypes.map((l) => /* @__PURE__ */ t.jsx(
+  return /* @__PURE__ */ t.jsxs("div", { className: j.options, children: [
+    e.chargeTypes.length > 1 && /* @__PURE__ */ t.jsx("div", { className: j.chargeTypes, children: e.chargeTypes.map((r) => /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: M(b.charge, {
-          [b.chargeActive]: i === l
+        className: D(j.charge, {
+          [j.chargeActive]: c === r
         }),
-        onClick: () => a(l),
-        children: pt[l]
+        onClick: () => l(r),
+        children: bt[r]
       },
-      l
+      r
     )) }),
-    /* @__PURE__ */ t.jsx("div", { className: b.variants, children: n.map((l) => /* @__PURE__ */ t.jsxs(
+    /* @__PURE__ */ t.jsx("div", { className: j.variants, children: n.map((r) => /* @__PURE__ */ t.jsxs(
       "div",
       {
-        className: M(b.variant, {
-          [b.activeVariant]: e.id === l.id
+        className: D(j.variant, {
+          [j.activeVariant]: e.id === r.id
         }),
-        onClick: () => o(l),
+        onClick: () => o(r),
         children: [
-          /* @__PURE__ */ t.jsxs("div", { className: b.variantInfo, children: [
-            /* @__PURE__ */ t.jsx("span", { className: b.title, children: l.name }),
+          /* @__PURE__ */ t.jsxs("div", { className: j.variantInfo, children: [
+            /* @__PURE__ */ t.jsx("span", { className: j.title, children: r.name }),
             /* @__PURE__ */ t.jsxs("span", { children: [
               "$",
-              i === "ONE_TIME" ? l.price.amount : l.subscriptionSettings.price.amount
+              c === "ONE_TIME" ? r.price.amount : r.subscriptionSettings.price.amount
             ] })
           ] }),
-          /* @__PURE__ */ t.jsx("div", { children: i === "ONE_TIME" && /* @__PURE__ */ t.jsxs("span", { className: b.stock, children: [
-            l.quantity.restrictions.max || 0,
+          /* @__PURE__ */ t.jsx("div", { children: c === "ONE_TIME" && /* @__PURE__ */ t.jsxs("span", { className: j.stock, children: [
+            r.quantity.restrictions.max || 0,
             " in stock"
           ] }) })
         ]
       },
-      l.id
+      r.id
     )) }),
-    /* @__PURE__ */ t.jsxs("div", { className: b.quantity, children: [
+    c === "ONE_TIME" && /* @__PURE__ */ t.jsxs("div", { className: j.quantity, children: [
       /* @__PURE__ */ t.jsx(
         "div",
         {
           onClick: () => {
-            i === "ONE_TIME" && (c > 1 ? m((l) => l - 1) : m(1));
+            i > 1 ? m((r) => r - 1) : m(1);
           },
-          className: b.button,
-          children: /* @__PURE__ */ t.jsx(x, { name: "Minus" })
+          className: j.button,
+          children: /* @__PURE__ */ t.jsx(p, { name: "Minus" })
         }
       ),
-      /* @__PURE__ */ t.jsx("div", { className: b.count, children: c }),
+      /* @__PURE__ */ t.jsx("div", { className: j.count, children: i }),
       /* @__PURE__ */ t.jsx(
         "div",
         {
           onClick: () => {
-            i === "ONE_TIME" && m((l) => l + 1);
+            m((r) => r + 1);
           },
-          className: b.button,
-          children: /* @__PURE__ */ t.jsx(x, { name: "Plus" })
+          className: j.button,
+          children: /* @__PURE__ */ t.jsx(p, { name: "Plus" })
         }
       )
     ] }),
-    /* @__PURE__ */ t.jsxs("div", { className: b.meta, children: [
-      /* @__PURE__ */ t.jsxs("div", { className: b.info, children: [
+    /* @__PURE__ */ t.jsxs("div", { className: j.meta, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: j.info, children: [
         /* @__PURE__ */ t.jsx("span", { children: "Delivery" }),
-        /* @__PURE__ */ t.jsxs("div", { className: b.infoRight, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: j.infoRight, children: [
           /* @__PURE__ */ t.jsx(
-            x,
+            p,
             {
               name: "Lightning",
               fill: "#FF3F19",
@@ -1502,231 +1502,245 @@ const Un = (r) => {
               height: 20
             }
           ),
-          /* @__PURE__ */ t.jsx("span", { children: e.deliveryTime === 0 ? "Instant" : _(e.deliveryTime) })
+          /* @__PURE__ */ t.jsx("span", { children: e.deliveryTime === 0 ? "Instant" : b(e.deliveryTime) })
         ] })
       ] }),
-      /* @__PURE__ */ t.jsxs("div", { className: b.info, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: j.info, children: [
         /* @__PURE__ */ t.jsx("span", { children: "Price" }),
-        /* @__PURE__ */ t.jsx("div", { className: b.infoRight, children: i === "ONE_TIME" ? e.compareAtPrice && (e.compareAtPrice.amount || 0) - (e.price.amount || 0) > 0 ? /* @__PURE__ */ t.jsxs("div", { className: b.price, children: [
-          /* @__PURE__ */ t.jsxs("span", { className: b.newPrice, children: [
+        /* @__PURE__ */ t.jsx("div", { className: j.infoRight, children: c === "ONE_TIME" ? e.compareAtPrice && (e.compareAtPrice.amount || 0) - (e.price.amount || 0) > 0 ? /* @__PURE__ */ t.jsxs("div", { className: j.price, children: [
+          /* @__PURE__ */ t.jsxs("span", { className: j.newPrice, children: [
             "$ ",
-            (e.price.amount || 0) * c
+            (e.price.amount || 0) * i
           ] }),
-          /* @__PURE__ */ t.jsxs("span", { className: b.oldPrice, children: [
+          /* @__PURE__ */ t.jsxs("span", { className: j.oldPrice, children: [
             "$ ",
-            (e.compareAtPrice.amount || 0) * c
+            (e.compareAtPrice.amount || 0) * i
           ] })
-        ] }) : /* @__PURE__ */ t.jsxs("span", { className: b.newPrice, children: [
+        ] }) : /* @__PURE__ */ t.jsxs("span", { className: j.newPrice, children: [
           "$ ",
-          (e.price.amount || 0) * c
-        ] }) : e.subscriptionSettings.compareAtPrice && (e.subscriptionSettings.compareAtPrice.amount || 0) - (e.subscriptionSettings.price.amount || 0) > 0 ? /* @__PURE__ */ t.jsxs("div", { className: b.price, children: [
-          /* @__PURE__ */ t.jsxs("span", { className: b.newPrice, children: [
+          (e.price.amount || 0) * i
+        ] }) : e.subscriptionSettings.compareAtPrice && (e.subscriptionSettings.compareAtPrice.amount || 0) - (e.subscriptionSettings.price.amount || 0) > 0 ? /* @__PURE__ */ t.jsxs("div", { className: j.price, children: [
+          /* @__PURE__ */ t.jsxs("span", { className: j.newPrice, children: [
             "$ ",
             e.subscriptionSettings.price.amount || 0
           ] }),
-          /* @__PURE__ */ t.jsxs("span", { className: b.oldPrice, children: [
+          /* @__PURE__ */ t.jsxs("span", { className: j.oldPrice, children: [
             "$ ",
             e.subscriptionSettings.compareAtPrice.amount || 0
           ] })
-        ] }) : /* @__PURE__ */ t.jsxs("span", { className: b.newPrice, children: [
+        ] }) : /* @__PURE__ */ t.jsxs("span", { className: j.newPrice, children: [
           "$ ",
           e.subscriptionSettings.price.amount || 0
         ] }) })
       ] })
     ] }),
-    /* @__PURE__ */ t.jsxs("div", { className: b.buttons, children: [
+    /* @__PURE__ */ t.jsxs("div", { className: j.buttons, children: [
       /* @__PURE__ */ t.jsx(
         X,
         {
           type: "Primary",
-          onClick: () => d(),
-          children: "Buy Now"
+          onClick: () => $(),
+          children: /* @__PURE__ */ t.jsx("span", { children: c === "ONE_TIME" ? "Buy Now" : "Subscribe Now" })
         }
       ),
-      i === "ONE_TIME" && /* @__PURE__ */ t.jsx(
+      c === "ONE_TIME" && /* @__PURE__ */ t.jsx(
         X,
         {
           type: "Secondary",
-          onClick: () => j(),
+          onClick: () => h(),
           children: "Add to Cart"
         }
       )
     ] })
   ] });
-}, ln = "_button_14i4s_1", rn = "_login_14i4s_14", dn = "_signUp_14i4s_18", un = "_buttons_14i4s_23", mn = "_modal_14i4s_32", _n = "_info_14i4s_48", hn = "_top_14i4s_55", pn = "_title_14i4s_66", gn = "_clear_14i4s_72", xn = "_activeClear_14i4s_79", fn = "_count_14i4s_83", bn = "_cart_14i4s_98", jn = "_empty_14i4s_106", vn = "_product_14i4s_132", kn = "_products_14i4s_141", yn = "_image_14i4s_149", $n = "_productInfo_14i4s_155", Nn = "_content_14i4s_162", Cn = "_name_14i4s_168", In = "_price_14i4s_174", Pn = "_productButtons_14i4s_180", Bn = "_productButton_14i4s_180", wn = "_productCount_14i4s_200", Tn = "_bottom_14i4s_216", qn = "_subtotal_14i4s_224", An = "_block_14i4s_232", Sn = "_shoppingCount_14i4s_239", g = {
-  button: ln,
-  login: rn,
-  signUp: dn,
-  buttons: un,
-  modal: mn,
-  info: _n,
-  top: hn,
-  title: pn,
-  clear: gn,
-  activeClear: xn,
-  count: fn,
-  cart: bn,
-  empty: jn,
-  product: vn,
-  products: kn,
-  image: yn,
-  productInfo: $n,
-  content: Nn,
-  name: Cn,
-  price: In,
-  productButtons: Pn,
-  productButton: Bn,
-  productCount: wn,
-  bottom: Tn,
-  subtotal: qn,
-  block: An,
-  shoppingCount: Sn
-}, zn = (r) => {
-  const { shopping: n, signUp: e } = r, o = ot();
-  function i(a) {
-    o(a);
+}, un = "_button_1kcpz_1", _n = "_login_1kcpz_14", mn = "_signUp_1kcpz_18", pn = "_buttons_1kcpz_23", hn = "_modal_1kcpz_32", gn = "_info_1kcpz_48", xn = "_top_1kcpz_55", fn = "_title_1kcpz_66", bn = "_clear_1kcpz_72", jn = "_activeClear_1kcpz_79", vn = "_count_1kcpz_83", kn = "_cart_1kcpz_98", yn = "_empty_1kcpz_106", Nn = "_product_1kcpz_132", $n = "_products_1kcpz_141", Cn = "_image_1kcpz_149", In = "_productInfo_1kcpz_155", Pn = "_content_1kcpz_162", Tn = "_name_1kcpz_168", wn = "_price_1kcpz_174", Bn = "_productButtons_1kcpz_180", Sn = "_productButton_1kcpz_180", qn = "_productCount_1kcpz_200", An = "_bottom_1kcpz_216", On = "_subtotal_1kcpz_224", Ln = "_block_1kcpz_232", Dn = "_shoppingCount_1kcpz_239", zn = "_total_1kcpz_259", En = "_link_1kcpz_265", x = {
+  button: un,
+  login: _n,
+  signUp: mn,
+  buttons: pn,
+  modal: hn,
+  info: gn,
+  top: xn,
+  title: fn,
+  clear: bn,
+  activeClear: jn,
+  count: vn,
+  cart: kn,
+  empty: yn,
+  product: Nn,
+  products: $n,
+  image: Cn,
+  productInfo: In,
+  content: Pn,
+  name: Tn,
+  price: wn,
+  productButtons: Bn,
+  productButton: Sn,
+  productCount: qn,
+  bottom: An,
+  subtotal: On,
+  block: Ln,
+  shoppingCount: Dn,
+  total: zn,
+  link: En
+}, ic = (d) => {
+  const { shopping: n, signUp: e } = d, o = at();
+  function c(l) {
+    o(l);
   }
-  return /* @__PURE__ */ t.jsxs("div", { className: g.buttons, children: [
-    n && /* @__PURE__ */ t.jsx(On, {}),
+  return /* @__PURE__ */ t.jsxs("div", { className: x.buttons, children: [
+    n && /* @__PURE__ */ t.jsx(Mn, {}),
     /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: M(g.button, g.login),
-        onClick: () => i("/customer-dash"),
+        className: D(x.button, x.login),
+        onClick: () => c("/customer-dash"),
         children: "Login"
       }
     ),
     e && /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: M(g.button, g.login, g.signUp),
-        onClick: () => i("/customer-dash"),
+        className: D(x.button, x.login, x.signUp),
+        onClick: () => c("/customer-dash"),
         children: "Sign Up"
       }
     )
   ] });
-}, On = () => {
-  const [r, n] = f.useState(!1), { cart: e } = at();
+}, Mn = () => {
+  const [d, n] = f.useState(!1), [e, o] = f.useState([]), { cart: c, getProducts: l } = lt();
+  function s(u) {
+    for (let a = 0; a < c.parts.length; a++)
+      for (let h = 0; h < u.variants.length; h++)
+        if (c.parts[a].productVariantId === u.variants[a].id)
+          return c.parts[a].productVariantId;
+  }
+  function i(u) {
+    for (let a = 0; a < c.parts.length; a++)
+      for (let h = 0; h < u.variants.length; h++)
+        if (c.parts[a].productVariantId === u.variants[a].id)
+          return c.parts[a].quantity;
+  }
+  f.useEffect(() => {
+    (async () => {
+      const a = c.parts.map((b) => String(b.productId)), $ = (await l([...a])).map((b) => ({
+        ...b,
+        activeVariantId: s(b),
+        quantity: i(b)
+      }));
+      o($);
+    })();
+  }, [c]);
+  function m(u) {
+    var a;
+    return !u || !(u != null && u.variants) ? !1 : (a = u.variants.find((h) => h.id === u.activeVariantId)) == null ? void 0 : a.subscriptionSettings;
+  }
+  const v = c.parts.length > 0 && e.length > 0 && !m(e[0]);
   return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
     /* @__PURE__ */ t.jsxs(
       "div",
       {
-        className: g.button,
-        onClick: (o) => {
-          o.stopPropagation(), n(!0);
+        className: x.button,
+        onClick: (u) => {
+          u.stopPropagation(), n(!0);
         },
         children: [
           /* @__PURE__ */ t.jsx(
-            x,
+            p,
             {
               name: "Handbag",
-              fill: "#252525"
+              fill: "var(--icon-primary)"
             }
           ),
-          e.parts.length > 0 && /* @__PURE__ */ t.jsx("div", { className: g.shoppingCount, children: e.parts.length })
+          v && /* @__PURE__ */ t.jsx("div", { className: x.shoppingCount, children: c.parts.length })
         ]
       }
     ),
-    r && /* @__PURE__ */ t.jsx(gt, { close: n, children: /* @__PURE__ */ t.jsx(Dn, {}) })
+    d && /* @__PURE__ */ t.jsx(ht, { close: n, children: /* @__PURE__ */ t.jsx(
+      Rn,
+      {
+        activeProducts: e,
+        isCartNotEmpty: v
+      }
+    ) })
   ] });
-}, Dn = () => {
-  const { cart: r, reset: n, getProducts: e, getTotalAndDiscount: o, updateQuantityOfProduct: i } = at(), [a, s] = f.useState([]), c = ot();
-  function m(d) {
-    for (let _ = 0; _ < r.parts.length; _++)
-      for (let l = 0; l < d.variants.length; l++)
-        if (r.parts[_].productVariantId === d.variants[_].id)
-          return r.parts[_].productVariantId;
+}, Rn = (d) => {
+  const { activeProducts: n, isCartNotEmpty: e } = d, { cart: o, reset: c, getTotalAndDiscount: l, updateQuantityOfProduct: s } = lt(), i = at();
+  function m(a) {
+    i(a);
   }
-  function $(d) {
-    for (let _ = 0; _ < r.parts.length; _++)
-      for (let l = 0; l < d.variants.length; l++)
-        if (r.parts[_].productVariantId === d.variants[_].id)
-          return r.parts[_].quantity;
-  }
-  function p(d) {
-    c(d);
-  }
-  function k(d) {
-    i({
-      productId: d.id,
-      productVariantId: d.activeVariantId,
-      quantity: d.quantity + 1
+  function v(a) {
+    s({
+      productId: a.id,
+      productVariantId: a.activeVariantId,
+      quantity: a.quantity + 1
     });
   }
-  function j(d) {
-    i({
-      productId: d.id,
-      productVariantId: d.activeVariantId,
-      quantity: d.quantity - 1
+  function u(a) {
+    s({
+      productId: a.id,
+      productVariantId: a.activeVariantId,
+      quantity: a.quantity - 1
     });
   }
-  return f.useEffect(() => {
-    (async () => {
-      const _ = r.parts.map((q) => String(q.productId)), B = (await e([..._])).map((q) => ({
-        ...q,
-        activeVariantId: m(q),
-        quantity: $(q)
-      }));
-      s(B);
-    })();
-  }, [r]), /* @__PURE__ */ t.jsxs(
+  return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: g.modal,
-      onClick: (d) => d.stopPropagation(),
+      className: x.modal,
+      onClick: (a) => a.stopPropagation(),
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: g.top, children: [
-          /* @__PURE__ */ t.jsxs("div", { className: g.info, children: [
-            /* @__PURE__ */ t.jsx("span", { className: g.title, children: "Cart" }),
-            r.parts.length > 0 && /* @__PURE__ */ t.jsx("div", { className: g.count, children: r.parts.length })
+        /* @__PURE__ */ t.jsxs("div", { className: x.top, children: [
+          /* @__PURE__ */ t.jsxs("div", { className: x.info, children: [
+            /* @__PURE__ */ t.jsx("span", { className: x.title, children: "Cart" }),
+            e && /* @__PURE__ */ t.jsx("div", { className: x.count, children: o.parts.length })
           ] }),
           /* @__PURE__ */ t.jsx(
             "button",
             {
-              className: M(g.clear, {
-                [g.activeClear]: r.parts.length > 0
+              className: D(x.clear, {
+                [x.activeClear]: e
               }),
-              disabled: r.parts.length === 0,
-              onClick: () => n(),
+              disabled: !e,
+              onClick: () => c(),
               children: "Clear all"
             }
           )
         ] }),
-        r.parts.length > 0 ? /* @__PURE__ */ t.jsxs("div", { className: g.cart, children: [
-          /* @__PURE__ */ t.jsx("div", { className: g.products, children: a.map((d) => /* @__PURE__ */ t.jsxs(
+        e ? /* @__PURE__ */ t.jsxs("div", { className: x.cart, children: [
+          /* @__PURE__ */ t.jsx("div", { className: x.products, children: n.map((a) => /* @__PURE__ */ t.jsxs(
             "div",
             {
-              className: g.product,
+              className: x.product,
               children: [
-                /* @__PURE__ */ t.jsxs("div", { className: g.productInfo, children: [
+                /* @__PURE__ */ t.jsxs("div", { className: x.productInfo, children: [
                   /* @__PURE__ */ t.jsx(
                     "img",
                     {
-                      src: `https://imagedelivery.net/${d.images[0].cfId}/w=500`,
+                      src: `https://imagedelivery.net/${a.images[0].cfId}/w=500`,
                       alt: "image",
                       width: "100%",
                       height: "100%",
-                      className: g.image
+                      className: x.image
                     }
                   ),
-                  /* @__PURE__ */ t.jsxs("div", { className: g.content, children: [
-                    /* @__PURE__ */ t.jsx("div", { className: g.name, children: d.name }),
-                    /* @__PURE__ */ t.jsxs("div", { className: g.price, children: [
+                  /* @__PURE__ */ t.jsxs("div", { className: x.content, children: [
+                    /* @__PURE__ */ t.jsx("div", { className: x.name, children: a.name }),
+                    /* @__PURE__ */ t.jsxs("div", { className: x.price, children: [
                       "$",
-                      d.variants.find((_) => _.id === d.activeVariantId).price.amount * ((d == null ? void 0 : d.quantity) || 1)
+                      a.variants.find((h) => h.id === a.activeVariantId).price.amount * ((a == null ? void 0 : a.quantity) || 1)
                     ] })
                   ] })
                 ] }),
-                /* @__PURE__ */ t.jsxs("div", { className: g.productButtons, children: [
+                /* @__PURE__ */ t.jsxs("div", { className: x.productButtons, children: [
                   /* @__PURE__ */ t.jsx(
                     "div",
                     {
                       onClick: () => {
-                        d.quantity !== 1 && j(d);
+                        a.quantity !== 1 && u(a);
                       },
-                      className: g.productButton,
+                      className: x.productButton,
                       children: /* @__PURE__ */ t.jsx(
-                        x,
+                        p,
                         {
                           name: "Minus",
                           fill: "#757575",
@@ -1736,14 +1750,14 @@ const Un = (r) => {
                       )
                     }
                   ),
-                  /* @__PURE__ */ t.jsx("div", { className: g.productCount, children: d.quantity }),
+                  /* @__PURE__ */ t.jsx("div", { className: x.productCount, children: a.quantity }),
                   /* @__PURE__ */ t.jsx(
                     "div",
                     {
-                      onClick: () => k(d),
-                      className: g.productButton,
+                      onClick: () => v(a),
+                      className: x.productButton,
                       children: /* @__PURE__ */ t.jsx(
-                        x,
+                        p,
                         {
                           name: "Plus",
                           fill: "#757575",
@@ -1756,14 +1770,14 @@ const Un = (r) => {
                 ] })
               ]
             },
-            d.id
+            a.id
           )) }),
-          /* @__PURE__ */ t.jsxs("div", { className: g.bottom, children: [
-            /* @__PURE__ */ t.jsxs("div", { className: g.subtotal, children: [
-              /* @__PURE__ */ t.jsxs("div", { className: g.block, children: [
+          /* @__PURE__ */ t.jsxs("div", { className: x.bottom, children: [
+            /* @__PURE__ */ t.jsxs("div", { className: x.subtotal, children: [
+              /* @__PURE__ */ t.jsxs("div", { className: x.block, children: [
                 /* @__PURE__ */ t.jsx("span", { children: "Subtotal" }),
                 /* @__PURE__ */ t.jsx(
-                  x,
+                  p,
                   {
                     name: "Info",
                     width: 20,
@@ -1772,52 +1786,149 @@ const Un = (r) => {
                   }
                 )
               ] }),
-              /* @__PURE__ */ t.jsxs("div", { children: [
+              /* @__PURE__ */ t.jsxs("div", { className: x.total, children: [
                 "$",
-                o().total
+                l().total
               ] })
             ] }),
-            /* @__PURE__ */ t.jsx(X, { onClick: () => p("/checkout"), children: "Checkout" })
+            /* @__PURE__ */ t.jsx(X, { onClick: () => m("/checkout"), children: "Checkout" })
           ] })
-        ] }) : /* @__PURE__ */ t.jsx(En, {})
+        ] }) : /* @__PURE__ */ t.jsx(Hn, {})
       ]
     }
   );
-}, En = () => /* @__PURE__ */ t.jsxs("div", { className: g.empty, children: [
-  /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(x, { name: "Handbag" }) }),
+}, Hn = () => /* @__PURE__ */ t.jsxs("div", { className: x.empty, children: [
+  /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(p, { name: "Handbag" }) }),
   /* @__PURE__ */ t.jsx("span", { children: "Your cart is empty" }),
-  /* @__PURE__ */ t.jsx("span", { children: "Check out the store's products and add them here" })
-] });
+  /* @__PURE__ */ t.jsxs("span", { children: [
+    "Check out the store's products and add them",
+    " ",
+    /* @__PURE__ */ t.jsx(
+      "a",
+      {
+        href: "/products",
+        className: x.link,
+        children: "here"
+      }
+    )
+  ] })
+] }), Vn = "_share_9g414_1", Fn = "_modal_9g414_8", Un = "_header_9g414_14", Gn = "_socials_9g414_24", Wn = "_social_9g414_24", Xn = "_copy_9g414_34", Yn = "_title_9g414_41", Qn = "_copyWrapper_9g414_47", Jn = "_copyText_9g414_56", L = {
+  share: Vn,
+  modal: Fn,
+  header: Un,
+  socials: Gn,
+  social: Wn,
+  copy: Xn,
+  title: Yn,
+  copyWrapper: Qn,
+  copyText: Jn
+}, ac = () => {
+  const { isOpenModal: d, setIsOpenModal: n } = gt();
+  function e() {
+    n(!0);
+  }
+  return console.log(d), /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsx(
+      "div",
+      {
+        className: L.share,
+        onClick: (o) => {
+          o.stopPropagation(), e();
+        },
+        children: /* @__PURE__ */ t.jsx(
+          p,
+          {
+            name: "Share",
+            fill: "#757575"
+          }
+        )
+      }
+    ),
+    d && /* @__PURE__ */ t.jsx(ht, { close: n, children: /* @__PURE__ */ t.jsx(Kn, {}) })
+  ] });
+}, rt = {
+  facebook: "FacebookLogo",
+  "x.com": "TwitterLogo",
+  telegram: "TelegramLogo",
+  instagram: "InstagramLogo",
+  discord: "MessengerLogo",
+  tiktok: "TiktokLogo"
+}, Kn = () => {
+  const { setIsOpenModal: d } = gt(), n = window.location.href;
+  function e() {
+    navigator.clipboard.writeText(n);
+  }
+  return /* @__PURE__ */ t.jsxs(
+    "div",
+    {
+      className: L.modal,
+      onClick: (o) => o.stopPropagation(),
+      children: [
+        /* @__PURE__ */ t.jsxs("div", { className: L.header, children: [
+          /* @__PURE__ */ t.jsx("div", { className: L.title, children: "Share this Post" }),
+          /* @__PURE__ */ t.jsx(
+            p,
+            {
+              name: "X",
+              fill: "#757575",
+              onClick: () => d(!1)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ t.jsx("div", { className: L.socials, children: Object.keys(rt).map((o) => /* @__PURE__ */ t.jsx("div", { className: L.social, children: /* @__PURE__ */ t.jsx(p, { name: rt[o] }) })) }),
+        /* @__PURE__ */ t.jsxs("div", { className: L.copyWrapper, children: [
+          /* @__PURE__ */ t.jsx(
+            "div",
+            {
+              className: D(L.copy, L.copyText),
+              onClick: e,
+              children: n
+            }
+          ),
+          /* @__PURE__ */ t.jsx(
+            "div",
+            {
+              onClick: e,
+              className: L.copy,
+              children: /* @__PURE__ */ t.jsx(p, { name: "Copy" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
 export {
-  Rn as Accordion,
+  ec as Accordion,
   X as Button,
-  cs as ButtonTypeSettings,
-  Vn as ButtonsSettings,
-  Xn as Checkbox,
+  as as ButtonTypeSettings,
+  nc as ButtonsSettings,
+  dc as Checkbox,
   it as ChooseImage,
-  Qn as ChooseImageModal,
-  Wn as ColorPicker,
-  En as EmptyCart,
-  Jn as ErrorableBlock,
-  zn as HeaderButtons,
-  x as Icon,
+  uc as ChooseImageModal,
+  _c as ColorPicker,
+  Hn as EmptyCart,
+  mc as ErrorableBlock,
+  ic as HeaderButtons,
+  p as Icon,
   G as Input,
-  ge as ItemsSettings,
-  Hn as LayoutSettings,
-  Fn as ListingSelector,
-  Kn as Loader,
-  gt as Modal,
-  Zn as Picker,
-  Un as ProductOptions,
-  tc as Radio,
-  bs as RangeSelector,
-  Y as Select,
-  On as ShoppingButton,
-  Dn as ShoppingModalCart,
-  ec as Submodal,
-  V as Switch,
-  Ut as TextSettings,
-  lt as Textarea,
-  sc as Tip,
-  _t as TypesText
+  be as ItemsSettings,
+  sc as LayoutSettings,
+  cc as ListingSelector,
+  pc as Loader,
+  ht as Modal,
+  hc as Picker,
+  oc as ProductOptions,
+  gc as Radio,
+  ks as RangeSelector,
+  W as Select,
+  ac as ShareLink,
+  Mn as ShoppingButton,
+  Rn as ShoppingModalCart,
+  xc as Submodal,
+  H as Switch,
+  Wt as TextSettings,
+  dt as Textarea,
+  fc as Tip,
+  xt as TypesText
 };