@billgangcom/theme-lib 1.21.2 → 1.23.0

package/dist/ui.es.js

@@ -1,53 +1,53 @@
-import { j as t, c as H, I as x, a as G, S as F, T as lt, C as ot, b as Y, D as rt, H as dt, B as X, v as tt, u as ut, d as _t, e as it, f as at, M as pt } from "./root-bb64CWCq.js";
-import { k as Gn, l as Yn, h as Xn, E as Qn, L as Wn, P as Jn, R as Kn, g as Zn, i as tc } from "./root-bb64CWCq.js";
+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-satprvMg.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-satprvMg.js";
 import f from "react";
-const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18", jt = "_open_9e4oa_21", bt = "_content_9e4oa_25", J = {
-  accordion: gt,
-  header: xt,
-  icon: ft,
+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: bt
-}, Mn = ({ title: r, content: n }) => {
-  const [s, c] = f.useState(!1), [a, l] = f.useState(0), e = f.useRef(null), i = () => {
-    c(!s);
+  content: vt
+}, Rn = ({ title: r, content: n }) => {
+  const [e, o] = f.useState(!1), [i, a] = f.useState(0), s = f.useRef(null), c = () => {
+    o(!e);
   };
   return f.useEffect(() => {
-    e.current && l(s ? e.current.scrollHeight : 0);
-  }, [s]), /* @__PURE__ */ t.jsxs("div", { className: J.accordion, children: [
+    s.current && a(e ? s.current.scrollHeight : 0);
+  }, [e]), /* @__PURE__ */ t.jsxs("div", { className: J.accordion, children: [
     /* @__PURE__ */ t.jsxs(
       "div",
       {
         className: J.header,
-        onClick: i,
+        onClick: c,
         children: [
           /* @__PURE__ */ t.jsx("h3", { children: r }),
-          /* @__PURE__ */ t.jsx("div", { className: H(J.icon, { [J.open]: s }), children: /* @__PURE__ */ t.jsx(x, { name: "CaretDown" }) })
+          /* @__PURE__ */ t.jsx("div", { className: M(J.icon, { [J.open]: e }), children: /* @__PURE__ */ t.jsx(x, { name: "CaretDown" }) })
         ]
       }
     ),
     /* @__PURE__ */ t.jsx(
       "div",
       {
-        ref: e,
+        ref: s,
         className: J.content,
-        style: { height: `${a}px` },
+        style: { height: `${i}px` },
         children: /* @__PURE__ */ t.jsx("p", { children: n })
       }
     )
   ] });
-}, vt = "_wrapper_9rr5j_2", kt = "_alignmentBlock_9rr5j_8", yt = "_title_9rr5j_15", $t = "_subtitle_9rr5j_22", Nt = "_alignmentContent_9rr5j_29", Ct = "_alignments_9rr5j_37", It = "_alignment_9rr5j_8", qt = "_circle_9rr5j_58", Pt = "_paddings_9rr5j_65", Bt = "_padding_9rr5j_65", wt = "_input_9rr5j_84", L = {
-  wrapper: vt,
-  alignmentBlock: kt,
-  title: yt,
-  subtitle: $t,
-  alignmentContent: Nt,
-  alignments: Ct,
-  alignment: It,
-  circle: qt,
-  paddings: Pt,
-  padding: Bt,
-  input: wt
-}, Tt = [
+}, 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 = [
   "topLeft",
   "top",
   "topRight",
@@ -57,9 +57,9 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
   "bottomLeft",
   "bottom",
   "bottomRight"
-], At = ["left", "top", "right", "bottom"], Hn = (r) => {
-  const { alignment: n, padding: s, setPadding: c, setAlignment: a } = r;
-  function l() {
+], St = ["left", "top", "right", "bottom"], Hn = (r) => {
+  const { alignment: n, padding: e, setPadding: o, setAlignment: i } = r;
+  function a() {
     switch (n) {
       case "left":
       case "topLeft":
@@ -77,8 +77,8 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
         return "TextAlignCenter";
     }
   }
-  function e(i) {
-    switch (i) {
+  function s(c) {
+    switch (c) {
       case "left":
         return "AlignLeft";
       case "right":
@@ -89,24 +89,24 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
         return "AlignBottom";
     }
   }
-  return /* @__PURE__ */ t.jsxs("div", { className: L.layout, children: [
-    /* @__PURE__ */ t.jsx("h3", { className: L.title, children: "Layout" }),
-    /* @__PURE__ */ t.jsxs("div", { className: L.alignmentBlock, children: [
-      /* @__PURE__ */ t.jsx("h5", { className: L.subtitle, children: "Alignment" }),
-      /* @__PURE__ */ t.jsxs("div", { className: L.alignmentContent, children: [
-        /* @__PURE__ */ t.jsx("div", { className: L.alignments, children: Tt.map((i) => /* @__PURE__ */ t.jsxs(
+  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(
           "div",
           {
             onClick: () => {
-              a(i);
+              i(c);
             },
-            className: L.alignment,
+            className: D.alignment,
             children: [
-              i !== n && /* @__PURE__ */ t.jsx("div", { className: L.circle }),
-              i === n && /* @__PURE__ */ t.jsx(
+              c !== n && /* @__PURE__ */ t.jsx("div", { className: D.circle }),
+              c === n && /* @__PURE__ */ t.jsx(
                 x,
                 {
-                  name: l(),
+                  name: a(),
                   fill: "#FF3F19",
                   width: 22,
                   height: 22
@@ -114,17 +114,17 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
               )
             ]
           },
-          i
+          c
         )) }),
-        /* @__PURE__ */ t.jsx("div", { className: L.paddings, children: At.map((i) => /* @__PURE__ */ t.jsxs(
+        /* @__PURE__ */ t.jsx("div", { className: D.paddings, children: St.map((c) => /* @__PURE__ */ t.jsxs(
           "label",
           {
-            className: L.padding,
+            className: D.padding,
             children: [
               /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
                 x,
                 {
-                  name: e(i),
+                  name: s(c),
                   width: 20,
                   height: 20
                 }
@@ -133,10 +133,10 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
                 G,
                 {
                   type: "text",
-                  value: String(s[i]),
-                  onChange: (u) => c({
-                    ...s,
-                    [i]: Number(u)
+                  value: String(e[c]),
+                  onChange: (m) => o({
+                    ...e,
+                    [c]: Number(m)
                   }),
                   paddingless: !0,
                   borderless: !0
@@ -144,25 +144,25 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
               )
             ]
           },
-          i
+          c
         )) })
       ] })
     ] })
   ] });
-}, St = "_subtitle_1qrz9_1", Ot = "_header_1qrz9_8", Dt = "_text_1qrz9_9", Lt = "_top_1qrz9_17", Mt = "_itemsBlock_1qrz9_26", K = {
-  subtitle: St,
-  header: Ot,
-  text: Dt,
-  top: Lt,
-  itemsBlock: Mt
-}, Ht = "_typeTexts_rcw8p_1", Rt = "_block_rcw8p_8", Et = "_active_rcw8p_21", nt = {
-  typeTexts: Ht,
-  block: Rt,
-  active: Et
-}, Vt = ["bold", "italic", "underline", "strike-through", "code"], mt = (r) => {
-  const { typesText: n, setTypesText: s } = r;
-  function c(a) {
-    switch (a) {
+}, 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) {
       case "bold":
         return "TextB";
       case "italic":
@@ -175,109 +175,109 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
         return "TextUnderline";
     }
   }
-  return /* @__PURE__ */ t.jsx("div", { className: nt.typeTexts, children: Vt.map((a) => /* @__PURE__ */ t.jsx(
+  return /* @__PURE__ */ t.jsx("div", { className: nt.typeTexts, children: Ft.map((i) => /* @__PURE__ */ t.jsx(
     "div",
     {
-      className: H(nt.block, {
-        [nt.active]: n.includes(a)
+      className: M(nt.block, {
+        [nt.active]: n.includes(i)
       }),
       onClick: () => {
-        const l = [...n];
-        if (l.includes(a)) {
-          const e = l.filter((i) => i !== a);
-          s(e);
+        const a = [...n];
+        if (a.includes(i)) {
+          const s = a.filter((c) => c !== i);
+          e(s);
         } else
-          l.push(a), s(l);
+          a.push(i), e(a);
       },
       children: /* @__PURE__ */ t.jsx(
         x,
         {
-          name: c(a),
-          fill: n.includes(a) ? "#252525" : "#757575",
+          name: o(i),
+          fill: n.includes(i) ? "#252525" : "#757575",
           width: 20,
           height: 20
         }
       )
     },
-    String(a)
+    String(i)
   )) });
-}, Ft = (r) => {
+}, Ut = (r) => {
   const {
     typesText: n,
-    isActiveText: s,
-    setIsActiveText: c,
-    text: a,
-    setText: l,
-    setTypesText: e,
-    title: i,
-    subtitle: u = "Items"
+    isActiveText: e,
+    setIsActiveText: o,
+    text: i,
+    setText: a,
+    setTypesText: s,
+    title: c,
+    subtitle: m = "Items"
   } = r;
   return /* @__PURE__ */ t.jsxs("div", { className: K.text, children: [
-    (i || s !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: K.top, children: [
-      i && /* @__PURE__ */ t.jsx("h3", { className: K.title, children: i }),
-      s !== void 0 && c && /* @__PURE__ */ t.jsx(
-        F,
+    (c || e !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: K.top, children: [
+      c && /* @__PURE__ */ t.jsx("h3", { className: K.title, children: c }),
+      e !== void 0 && o && /* @__PURE__ */ t.jsx(
+        V,
         {
-          current: s,
-          onChange: (y) => c(y)
+          current: e,
+          onChange: ($) => o($)
         }
       )
     ] }),
     /* @__PURE__ */ t.jsxs("div", { className: K.itemsBlock, children: [
-      /* @__PURE__ */ t.jsx("h5", { className: K.subtitle, children: u }),
+      /* @__PURE__ */ t.jsx("h5", { className: K.subtitle, children: m }),
       /* @__PURE__ */ t.jsx(
         lt,
         {
-          onChange: (y) => l(y),
-          value: a,
+          onChange: ($) => a($),
+          value: i,
           maxLength: 150
         }
       ),
       /* @__PURE__ */ t.jsx(
-        mt,
+        _t,
         {
           typesText: n,
-          setTypesText: e
+          setTypesText: s
         }
       )
     ] })
   ] });
-}, Ut = "_subtitle_cuny2_1", zt = "_header_cuny2_8", Gt = "_text_cuny2_9", Yt = "_productsBlock_cuny2_10", Xt = "_top_cuny2_22", Qt = "_itemsBlock_cuny2_31", Wt = "_typeTexts_cuny2_37", Jt = "_block_cuny2_44", Kt = "_active_cuny2_57", Zt = "_products_cuny2_10", te = "_product_cuny2_10", ee = "_button_cuny2_76", se = "_disabled_cuny2_87", ne = "_image_cuny2_91", ce = "_info_cuny2_98", oe = "_name_cuny2_110", ie = "_buttons_cuny2_114", ae = "_modal_cuny2_121", le = "_link_cuny2_141", re = "_modalOptions_cuny2_147", q = {
-  subtitle: Ut,
-  header: zt,
-  text: Gt,
-  productsBlock: Yt,
-  top: Xt,
-  itemsBlock: Qt,
-  typeTexts: Wt,
-  block: Jt,
-  active: Kt,
-  products: Zt,
-  product: te,
-  button: ee,
-  disabled: se,
-  image: ne,
-  info: ce,
+}, 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: ie,
-  modal: ae,
-  link: le,
-  modalOptions: re
-}, de = (r) => {
-  const { activeItem: n, setActiveItem: s, popupPosition: c, modalOptions: a, setIsOpenModal: l } = r;
+  buttons: ae,
+  modal: le,
+  link: re,
+  modalOptions: de
+}, ue = (r) => {
+  const { activeItem: n, setActiveItem: e, popupPosition: o, modalOptions: i, setIsOpenModal: a } = r;
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: q.modal,
-      onClick: (e) => {
-        e.stopPropagation();
+      className: P.modal,
+      onClick: (s) => {
+        s.stopPropagation();
       },
       style: {
-        top: `${c.top}px`,
-        left: `${c.left}px`
+        top: `${o.top}px`,
+        left: `${o.left}px`
       },
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: q.top, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: P.top, children: [
           /* @__PURE__ */ t.jsx("h3", { children: n.name }),
           /* @__PURE__ */ t.jsx(
             x,
@@ -287,237 +287,237 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
               width: 20,
               hoverable: !0,
               onClick: () => {
-                s(null), l(!1);
+                e(null), a(!1);
               }
             }
           )
         ] }),
-        /* @__PURE__ */ t.jsx("div", { className: q.modalOptions, children: a.map((e) => {
-          if (e.type === "image")
+        /* @__PURE__ */ t.jsx("div", { className: P.modalOptions, children: i.map((s) => {
+          if (s.type === "image")
             return /* @__PURE__ */ t.jsx(
-              ot,
+              it,
               {
                 label: "Put up an attractive image",
-                onChange: (i) => {
-                  const u = {
+                onChange: (c) => {
+                  const m = {
                     ...n,
-                    [e.field]: i
+                    [s.field]: c
                   };
-                  s(u);
+                  e(m);
                 }
               },
-              String(e.field)
+              String(s.field)
             );
-          if (e.type === "text")
+          if (s.type === "text")
             return /* @__PURE__ */ t.jsx(
-              Ft,
+              Ut,
               {
-                typesText: n[e.field.type],
-                setTypesText: (i) => {
-                  const u = {
+                typesText: n[s.field.type],
+                setTypesText: (c) => {
+                  const m = {
                     ...n,
-                    [e.field.type]: i
+                    [s.field.type]: c
                   };
-                  s(u);
+                  e(m);
                 },
-                text: n[e.field.text] || "",
-                setText: (i) => {
-                  const u = {
+                text: n[s.field.text] || "",
+                setText: (c) => {
+                  const m = {
                     ...n,
-                    [e.field.text]: i
+                    [s.field.text]: c
                   };
-                  s(u);
+                  e(m);
                 },
-                subtitle: e.label
+                subtitle: s.label
               }
             );
-          if (e.type === "input")
+          if (s.type === "input")
             return /* @__PURE__ */ t.jsx(
               G,
               {
-                onChange: (i) => {
-                  const u = {
+                onChange: (c) => {
+                  const m = {
                     ...n,
-                    [e.field]: i
+                    [s.field]: c
                   };
-                  s(u);
+                  e(m);
                 },
-                value: n[e.field] || "",
-                label: e.label,
-                placeholder: e.placeholder
+                value: n[s.field] || "",
+                label: s.label,
+                placeholder: s.placeholder
               }
             );
-          if (e.type === "inputSwitch")
-            return /* @__PURE__ */ t.jsxs("div", { className: q.link, children: [
+          if (s.type === "inputSwitch")
+            return /* @__PURE__ */ t.jsxs("div", { className: P.link, children: [
               /* @__PURE__ */ t.jsx(
                 G,
                 {
-                  onChange: (i) => {
-                    const u = {
+                  onChange: (c) => {
+                    const m = {
                       ...n,
-                      [e.field.text]: i
+                      [s.field.text]: c
                     };
-                    s(u);
+                    e(m);
                   },
-                  value: n[e.field.text] || "",
-                  label: e.inputLabel,
-                  placeholder: e.placeholder
+                  value: n[s.field.text] || "",
+                  label: s.inputLabel,
+                  placeholder: s.placeholder
                 }
               ),
               /* @__PURE__ */ t.jsx(
-                F,
+                V,
                 {
-                  current: !!n[e.field.switch] || !1,
-                  label: e.switchLabel,
-                  onChange: (i) => {
-                    const u = {
+                  current: !!n[s.field.switch] || !1,
+                  label: s.switchLabel,
+                  onChange: (c) => {
+                    const m = {
                       ...n,
-                      [e.field.switch]: i
+                      [s.field.switch]: c
                     };
-                    s(u);
+                    e(m);
                   }
                 }
               )
             ] });
-          if (e.type === "list")
+          if (s.type === "list")
             return /* @__PURE__ */ t.jsx(
-              pe,
+              ge,
               {
-                items: n[e.field] || [],
-                setItems: (i) => {
-                  const u = {
+                items: n[s.field] || [],
+                setItems: (c) => {
+                  const m = {
                     ...n,
-                    [e.field]: i
+                    [s.field]: c
                   };
-                  s(u);
+                  e(m);
                 },
                 itemsType: "select",
-                draggable: e.draggable || !1,
-                itemsOptions: e.itemsOptions,
-                deletable: e.deletable || !1,
+                draggable: s.draggable || !1,
+                itemsOptions: s.itemsOptions,
+                deletable: s.deletable || !1,
                 editable: !1,
-                subtitle: e.label
+                subtitle: s.label
               }
             );
-          if (e.type === "select")
+          if (s.type === "select")
             return /* @__PURE__ */ t.jsx(
               Y,
               {
-                options: e.itemsOptions,
-                onChange: (i) => {
-                  const u = {
+                options: s.itemsOptions,
+                onChange: (c) => {
+                  const m = {
                     ...n,
-                    [e.field]: i
+                    [s.field]: c
                   };
-                  s(u);
+                  e(m);
                 },
-                label: e.label,
-                value: n[e.field] || "String",
-                leftAddon: e.leftAddon && e.leftAddon === "icon" && /* @__PURE__ */ t.jsx(x, { name: n[e.field] })
+                label: s.label,
+                value: n[s.field] || "String",
+                leftAddon: s.leftAddon && s.leftAddon === "icon" && /* @__PURE__ */ t.jsx(x, { name: n[s.field] })
               }
             );
         }) })
       ]
     }
   );
-}, ue = "_other_g74jx_1", _e = "_subtitle_g74jx_7", me = "_items_g74jx_14", ct = {
-  other: ue,
+}, me = "_other_g74jx_1", _e = "_subtitle_g74jx_7", he = "_items_g74jx_14", ct = {
+  other: me,
   subtitle: _e,
-  items: me
+  items: he
 }, ht = (r) => {
-  const { items: n, title: s = "Other" } = 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: s }),
-    /* @__PURE__ */ t.jsx("div", { className: ct.items, children: n.map((c, a) => /* @__PURE__ */ t.jsx(
-      F,
+    /* @__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,
       {
-        current: c.isItem,
-        onChange: (l) => c.setIsItem(l),
-        label: c.label,
+        current: o.isItem,
+        onChange: (a) => o.setIsItem(a),
+        label: o.label,
         hasBackground: !0,
         paddingless: !1
       },
-      a
+      i
     )) })
   ] });
-}, he = (r) => {
-  const { index: n, moveProduct: s, children: c } = r, [, a] = ut({
+}, pe = (r) => {
+  const { index: n, moveProduct: e, children: o } = r, [, i] = ut({
     accept: "product",
-    hover(i) {
-      i.index !== n && (s(i.index, n), i.index = n);
+    hover(c) {
+      c.index !== n && (e(c.index, n), c.index = n);
     }
-  }), [{ isDragging: l }, e] = _t({
+  }), [{ isDragging: a }, s] = mt({
     type: "product",
     item: { index: n },
-    collect: (i) => ({
-      isDragging: i.isDragging()
+    collect: (c) => ({
+      isDragging: c.isDragging()
     })
   });
   return /* @__PURE__ */ t.jsx(
     "div",
     {
-      ref: (i) => e(a(i)),
-      className: `${q.product} ${l ? q.dragging : ""}`,
-      children: c
+      ref: (c) => s(i(c)),
+      className: `${P.product} ${a ? P.dragging : ""}`,
+      children: o
     }
   );
-}, pe = (r) => {
+}, ge = (r) => {
   const {
     isActiveItems: n,
-    setIsActiveItems: s,
-    items: c,
-    setItems: a,
-    other: l,
-    title: e,
-    subtitle: i,
-    editable: u = !0,
-    draggable: y = !1,
-    withImage: h = !1,
+    setIsActiveItems: e,
+    items: o,
+    setItems: i,
+    other: a,
+    title: s,
+    subtitle: c,
+    editable: m = !0,
+    draggable: $ = !1,
+    withImage: p = !1,
     deletable: k = !0,
     addable: j = !0,
-    itemsType: o,
+    itemsType: d,
     itemsPlaceholder: _ = "",
-    itemsOptions: p,
-    hasRangeSelector: P = !1,
-    rangeSelectorOptions: T,
-    modalOptions: N,
-    addableOptions: Q = {},
-    limit: O
-  } = r, [R, E] = f.useState(null), [st, et] = f.useState({
+    itemsOptions: l,
+    hasRangeSelector: B = !1,
+    rangeSelectorOptions: q,
+    modalOptions: Q,
+    addableOptions: F = {},
+    limit: y
+  } = r, [L, R] = f.useState(null), [st, et] = f.useState({
     top: 0,
     left: 0
-  }), [m, v] = f.useState(!1), A = (d, B) => {
-    const S = [...c], [$] = S.splice(d, 1);
-    S.splice(B, 0, $), a(S);
+  }), [h, v] = f.useState(!1), A = (u, w) => {
+    const S = [...o], [N] = S.splice(u, 1);
+    S.splice(w, 0, N), i(S);
   };
   f.useEffect(() => {
-    const d = () => {
-      E(null), v(!1);
+    const u = () => {
+      R(null), v(!1);
     };
-    return document.body.addEventListener("click", d), E(null), v(!1), () => {
-      E(null), v(!1), document.body.removeEventListener("click", d);
+    return document.body.addEventListener("click", u), R(null), v(!1), () => {
+      R(null), v(!1), document.body.removeEventListener("click", u);
     };
   }, []), f.useEffect(() => {
-    if (R) {
-      const d = [...c].map((B) => B.id === R.id ? R : B);
-      a(d);
+    if (L) {
+      const u = [...o].map((w) => w.id === L.id ? L : w);
+      i(u);
     }
-  }, [R]);
-  const C = (d, B) => {
-    d.stopPropagation(), v(!0);
-    const S = d.target.getBoundingClientRect(), $ = 500, W = window.innerHeight;
-    let M = S.top + window.scrollY;
-    M + $ > W && (M = W - $ - 20), et({
-      top: M - 80,
+  }, [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
-    }), E(B);
+    }), R(w);
   };
-  function U(d) {
-    if (h)
-      return d ? /* @__PURE__ */ t.jsx(
+  function U(u) {
+    if (p)
+      return u ? /* @__PURE__ */ t.jsx(
         "img",
         {
-          src: `https://imagedelivery.net/${d[0]}/w=1000`,
+          src: `https://imagedelivery.net/${u[0]}/w=1000`,
           alt: "image",
           width: 16,
           height: 16
@@ -532,9 +532,9 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
         }
       );
   }
-  const D = (d, B) => {
+  const O = (u, w) => {
     const S = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-      y && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
+      $ && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
         x,
         {
           name: "DotsSixVertical",
@@ -543,59 +543,59 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
           height: 20
         }
       ) }),
-      o === "select" && /* @__PURE__ */ t.jsx(
+      d === "select" && /* @__PURE__ */ t.jsx(
         Y,
         {
-          onChange: ($) => {
-            const M = [...c].map((V) => V.id === d.id ? {
-              ...d,
-              name: $
-            } : V);
-            E({
-              ...d,
-              name: $
-            }), a([...M]);
+          onChange: (N) => {
+            const E = [...o].map((H) => H.id === u.id ? {
+              ...u,
+              name: N
+            } : H);
+            R({
+              ...u,
+              name: N
+            }), i([...E]);
           },
-          value: d.name,
-          options: p,
-          leftAddon: U(d.images)
+          value: u.name,
+          options: l,
+          leftAddon: U(u.images)
         }
       ),
-      o === "input" && /* @__PURE__ */ t.jsx(
+      d === "input" && /* @__PURE__ */ t.jsx(
         G,
         {
-          onChange: ($) => {
-            const M = [...c].map((V) => V.id === d.id ? {
-              ...d,
-              name: $
-            } : V);
-            a([...M]);
+          onChange: (N) => {
+            const E = [...o].map((H) => H.id === u.id ? {
+              ...u,
+              name: N
+            } : H);
+            i([...E]);
           },
-          value: d.name,
+          value: u.name,
           placeholder: _
         }
       ),
-      o === "image" && /* @__PURE__ */ t.jsx(
-        ot,
+      d === "image" && /* @__PURE__ */ t.jsx(
+        it,
         {
-          onChange: ($) => {
-            const M = [...c].map((V) => V.id === d.id ? {
-              ...d,
-              images: $
-            } : V);
-            a([...M]);
+          onChange: (N) => {
+            const E = [...o].map((H) => H.id === u.id ? {
+              ...u,
+              images: N
+            } : H);
+            i([...E]);
           }
         }
       ),
-      /* @__PURE__ */ t.jsxs("div", { className: q.buttons, children: [
-        u && /* @__PURE__ */ t.jsx(
+      /* @__PURE__ */ t.jsxs("div", { className: P.buttons, children: [
+        m && /* @__PURE__ */ t.jsx(
           x,
           {
             name: "Sliders",
             hoverable: !0,
             width: 20,
             height: 20,
-            onClick: ($) => C($, d)
+            onClick: (N) => C(N, u)
           }
         ),
         k && /* @__PURE__ */ t.jsx(
@@ -606,77 +606,77 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
             width: 20,
             height: 20,
             fill: "#C12A2A",
-            onClick: () => a(c.filter(($) => $.id !== d.id))
+            onClick: () => i(o.filter((N) => N.id !== u.id))
           }
         )
       ] })
     ] });
-    return y ? /* @__PURE__ */ t.jsx(
-      he,
+    return $ ? /* @__PURE__ */ t.jsx(
+      pe,
       {
-        product: d,
-        index: B,
+        product: u,
+        index: w,
         moveProduct: A,
         children: S
       },
-      d.id
+      u.id
     ) : /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: q.product,
+        className: P.product,
         children: S
       },
-      d.id
+      u.id
     );
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: q.productsBlock, children: [
-    (e || n !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: q.top, children: [
-      e && /* @__PURE__ */ t.jsx("h3", { className: q.title, children: e }),
+  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(
-        F,
+        V,
         {
           current: n,
-          onChange: (d) => s == null ? void 0 : s(d)
+          onChange: (u) => e == null ? void 0 : e(u)
         }
       )
     ] }),
-    R && u && N && m && /* @__PURE__ */ t.jsx(
-      de,
+    L && m && Q && h && /* @__PURE__ */ t.jsx(
+      ue,
       {
-        activeItem: R,
-        setActiveItem: E,
+        activeItem: L,
+        setActiveItem: R,
         popupPosition: st,
-        modalOptions: N,
+        modalOptions: Q,
         setIsOpenModal: v
       }
     ),
-    P && T && /* @__PURE__ */ t.jsx(fs, { ...T }),
-    /* @__PURE__ */ t.jsxs("div", { className: q.products, children: [
-      i && /* @__PURE__ */ t.jsx("h5", { className: q.subtitle, children: i }),
-      y ? /* @__PURE__ */ t.jsx(rt, { backend: dt, children: c.map((d, B) => D(d, B)) }) : c.map((d, B) => D(d, B)),
+    B && q && /* @__PURE__ */ t.jsx(bs, { ...q }),
+    /* @__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(
         X,
         {
-          className: H(q.button, {
-            [q.disabled]: !!(O && O <= c.length)
+          className: M(P.button, {
+            [P.disabled]: !!(y && y <= o.length)
           }),
           size: "s",
-          disabled: !!(O && O <= c.length),
+          disabled: !!(y && y <= o.length),
           onClick: () => {
-            const d = [...c];
-            o === "select" ? d.push({
-              name: p[0] || `Product ${c.length + 1}`,
+            const u = [...o];
+            d === "select" ? u.push({
+              name: l[0] || `Product ${o.length + 1}`,
               id: tt(),
-              ...Q
-            }) : o === "input" ? d.push({
+              ...F
+            }) : d === "input" ? u.push({
               name: "",
               id: tt(),
-              ...Q
-            }) : d.push({
-              name: `Image ${c.length + 1}`,
+              ...F
+            }) : u.push({
+              name: `Image ${o.length + 1}`,
               id: tt(),
-              ...Q
-            }), a(d);
+              ...F
+            }), i(u);
           },
           children: [
             /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
@@ -692,42 +692,42 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
         }
       )
     ] }),
-    l !== void 0 && /* @__PURE__ */ t.jsx(ht, { items: l })
+    a !== void 0 && /* @__PURE__ */ t.jsx(ht, { items: a })
   ] });
-}, ge = "_subtitle_1fb9q_1", xe = "_header_1fb9q_8", fe = "_text_1fb9q_9", je = "_productsBlock_1fb9q_10", be = "_buttonsBlock_1fb9q_11", ve = "_top_1fb9q_22", ke = "_itemsBlock_1fb9q_31", ye = "_typeTexts_1fb9q_37", $e = "_block_1fb9q_44", Ne = "_active_1fb9q_56", Ce = "_products_1fb9q_10", Ie = "_product_1fb9q_10", qe = "_button_1fb9q_11", Pe = "_image_1fb9q_86", Be = "_info_1fb9q_93", we = "_name_1fb9q_105", Te = "_buttons_1fb9q_11", Ae = "_modal_1fb9q_116", Se = "_other_1fb9q_135", Oe = "_options_1fb9q_141", z = {
-  subtitle: ge,
-  header: xe,
-  text: fe,
+}, 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: be,
-  top: ve,
-  itemsBlock: ke,
-  typeTexts: ye,
-  block: $e,
-  active: Ne,
-  products: Ce,
-  product: Ie,
-  button: qe,
-  image: Pe,
-  info: Be,
-  name: we,
-  buttons: Te,
-  modal: Ae,
-  other: Se,
-  options: Oe
-}, De = (r) => {
-  const { activeButton: n, setActiveButton: s, popupPosition: c } = r, [a, l] = f.useState(n.typesText), [e, i] = f.useState(n.destination), [u, y] = f.useState(n.link || ""), [h, k] = f.useState(n.text || "");
+  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 || "");
   return f.useEffect(() => {
-    s({
+    e({
       ...n,
       ...{
-        text: h,
-        link: u,
-        destination: e,
-        typesText: a
+        text: p,
+        link: m,
+        destination: s,
+        typesText: i
       }
     });
-  }, [a, e, u, h]), /* @__PURE__ */ t.jsxs(
+  }, [i, s, m, p]), /* @__PURE__ */ t.jsxs(
     "div",
     {
       className: z.modal,
@@ -735,8 +735,8 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
         j.stopPropagation();
       },
       style: {
-        top: `${c.top}px`,
-        left: `${c.left}px`
+        top: `${o.top}px`,
+        left: `${o.left}px`
       },
       children: [
         /* @__PURE__ */ t.jsxs("div", { className: z.top, children: [
@@ -748,7 +748,7 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
               height: 20,
               width: 20,
               hoverable: !0,
-              onClick: () => s(null)
+              onClick: () => e(null)
             }
           )
         ] }),
@@ -757,12 +757,12 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
             Y,
             {
               label: "Destination",
-              onChange: (j) => i(j),
+              onChange: (j) => c(j),
               options: ["Go to Page", "Open Link"],
-              value: e
+              value: s
             }
           ),
-          e === "Go to Page" ? /* @__PURE__ */ t.jsx(
+          s === "Go to Page" ? /* @__PURE__ */ t.jsx(
             Y,
             {
               label: "Go to",
@@ -774,14 +774,14 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
           ) : /* @__PURE__ */ t.jsx(
             G,
             {
-              onChange: (j) => y(j),
-              value: u,
+              onChange: (j) => $(j),
+              value: m,
               placeholder: "https://",
               label: "Link"
             }
           ),
           /* @__PURE__ */ t.jsx(
-            F,
+            V,
             {
               current: !1,
               label: "Open in new tab"
@@ -791,73 +791,73 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
             lt,
             {
               onChange: (j) => k(j),
-              value: h,
+              value: p,
               label: "Text",
               maxLength: 150
             }
           ),
           /* @__PURE__ */ t.jsx(
-            mt,
+            _t,
             {
-              typesText: a,
-              setTypesText: l
+              typesText: i,
+              setTypesText: a
             }
           )
         ] })
       ]
     }
   );
-}, Le = "_subtitle_m8qel_1", Me = "_header_m8qel_8", He = "_text_m8qel_9", Re = "_productsBlock_m8qel_10", Ee = "_buttonsBlock_m8qel_11", Ve = "_top_m8qel_23", Fe = "_itemsBlock_m8qel_32", Ue = "_typeTexts_m8qel_38", ze = "_block_m8qel_45", Ge = "_active_m8qel_58", Ye = "_products_m8qel_10", Xe = "_product_m8qel_10", Qe = "_button_m8qel_11", We = "_image_m8qel_88", Je = "_info_m8qel_95", Ke = "_name_m8qel_107", Ze = "_buttons_m8qel_11", ts = "_modal_m8qel_118", es = "_other_m8qel_137", ss = "_options_m8qel_143", Z = {
-  subtitle: Le,
-  header: Me,
-  text: He,
-  productsBlock: Re,
-  buttonsBlock: Ee,
-  top: Ve,
-  itemsBlock: Fe,
-  typeTexts: Ue,
-  block: ze,
-  active: Ge,
-  products: Ye,
-  product: Xe,
-  button: Qe,
-  image: We,
-  info: Je,
-  name: Ke,
-  buttons: Ze,
-  modal: ts,
-  other: es,
-  options: ss
-}, ns = (r) => {
-  const { buttons: n, setButtons: s, deletable: c = !0, addable: a = !0 } = r, [l, e] = f.useState(null), [i, u] = f.useState({
+}, 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({
     top: 0,
     left: 0
   });
   f.useEffect(() => {
-    const h = () => {
-      e(null);
+    const p = () => {
+      s(null);
     };
-    return document.body.addEventListener("click", h), e(null), () => {
-      e(null), document.body.removeEventListener("click", h);
+    return document.body.addEventListener("click", p), s(null), () => {
+      s(null), document.body.removeEventListener("click", p);
     };
   }, []), f.useEffect(() => {
-    if (l) {
-      const h = [...n].map((k) => k.id === l.id ? l : k);
-      s(h);
+    if (a) {
+      const p = [...n].map((k) => k.id === a.id ? a : k);
+      e(p);
     }
-  }, [l]);
-  const y = (h, k) => {
-    h.stopPropagation();
-    const j = h.target.getBoundingClientRect(), o = 490, _ = window.innerHeight;
-    let p = j.top + window.scrollY;
-    p + o > _ && (p = _ - o - 20), u({
-      top: p,
+  }, [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
-    }), e(k);
+    }), s(k);
   };
   return /* @__PURE__ */ t.jsxs("div", { className: Z.products, children: [
     /* @__PURE__ */ t.jsx("h5", { className: Z.subtitle, children: "Button Type" }),
-    n.map((h) => /* @__PURE__ */ t.jsxs(
+    n.map((p) => /* @__PURE__ */ t.jsxs(
       "div",
       {
         className: Z.product,
@@ -866,13 +866,13 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
             Y,
             {
               onChange: (k) => {
-                const o = [...n].map((_) => _.id === h.id ? {
-                  ...h,
+                const d = [...n].map((_) => _.id === p.id ? {
+                  ...p,
                   type: k
                 } : _);
-                s(o);
+                e(d);
               },
-              value: h.type,
+              value: p.type,
               options: ["Primary", "Secondary", "Tertiary"]
             }
           ),
@@ -885,18 +885,18 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
                 width: 20,
                 height: 20,
                 onClick: (k) => {
-                  y(k, h);
+                  $(k, p);
                 }
               }
             ),
-            c && /* @__PURE__ */ t.jsx(
+            o && /* @__PURE__ */ t.jsx(
               x,
               {
                 name: "Trash",
                 hoverable: !0,
                 onClick: () => {
-                  const k = n.filter((j) => j.id !== h.id);
-                  s(k);
+                  const k = n.filter((j) => j.id !== p.id);
+                  e(k);
                 },
                 width: 20,
                 height: 20,
@@ -906,30 +906,30 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
           ] })
         ]
       },
-      h.id
+      p.id
     )),
-    l && /* @__PURE__ */ t.jsx(
-      De,
+    a && /* @__PURE__ */ t.jsx(
+      Ee,
       {
-        activeButton: l,
-        setActiveButton: e,
-        popupPosition: i
+        activeButton: a,
+        setActiveButton: s,
+        popupPosition: c
       }
     ),
-    a && /* @__PURE__ */ t.jsxs(
+    i && /* @__PURE__ */ t.jsxs(
       X,
       {
         className: Z.button,
         size: "s",
         onClick: () => {
-          const h = [...n];
-          h.push({
+          const p = [...n];
+          p.push({
             type: "Primary",
             id: tt(),
             typesText: [],
             destination: "Go to Page",
             text: ""
-          }), s(h);
+          }), e(p);
         },
         children: [
           /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
@@ -945,50 +945,50 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
       }
     )
   ] });
-}, Rn = (r) => {
-  const { isActiveButtons: n, setIsActiveButtons: s, buttons: c, setButtons: a } = r;
+}, 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" }),
       /* @__PURE__ */ t.jsx(
-        F,
+        V,
         {
           current: n,
-          onChange: (l) => s(l)
+          onChange: (a) => e(a)
         }
       )
     ] }),
     /* @__PURE__ */ t.jsx(
-      ns,
+      cs,
       {
-        buttons: c,
-        setButtons: a
+        buttons: o,
+        setButtons: i
       }
     )
   ] }) });
-}, cs = "_wrapper_m18qi_1", os = "_subtitle_m18qi_7", is = "_content_m18qi_14", as = "_range_m18qi_22", ls = "_track_m18qi_27", rs = "_progress_m18qi_36", ds = "_dots_m18qi_46", us = "_dot_m18qi_46", _s = "_active_m18qi_65", ms = "_input_m18qi_77", hs = "_countBlock_m18qi_91", ps = "_count_m18qi_91", gs = "_controls_m18qi_107", xs = "_button_m18qi_113", I = {
-  wrapper: cs,
+}, 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: is,
-  range: as,
-  track: ls,
-  progress: rs,
-  dots: ds,
-  dot: us,
+  content: as,
+  range: ls,
+  track: rs,
+  progress: ds,
+  dots: us,
+  dot: ms,
   active: _s,
-  input: ms,
-  countBlock: hs,
-  count: ps,
-  controls: gs,
-  button: xs
-}, fs = (r) => {
-  const { label: n, min: s = 1, max: c = 4, step: a = 1, count: l, setCount: e } = r, [i, u] = f.useState(!1), y = Array.from({ length: (c - s) / a + 1 }), h = (l - s) / (c - s) * 100, k = () => {
-    l < c && e(l + a);
+  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 = () => {
-    l > s && e(l - a);
-  }, o = (_) => {
-    const p = s + _ * a;
-    e(p);
+    a > e && s(a - i);
+  }, d = (_) => {
+    const l = e + _ * i;
+    s(l);
   };
   return /* @__PURE__ */ t.jsxs("div", { className: I.wrapper, children: [
     n && /* @__PURE__ */ t.jsx("h5", { className: I.subtitle, children: n }),
@@ -999,38 +999,38 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
           "div",
           {
             className: I.progress,
-            style: { width: `${h}%` }
+            style: { width: `${p}%` }
           }
         ),
-        /* @__PURE__ */ t.jsx("div", { className: I.dots, children: y.map((_, p) => {
-          const P = p <= (l - s) / a;
+        /* @__PURE__ */ t.jsx("div", { className: I.dots, children: $.map((_, l) => {
+          const B = l <= (a - e) / i;
           return /* @__PURE__ */ t.jsx(
             "button",
             {
-              onClick: () => o(p),
-              className: H(I.dot, {
-                [I.active]: P,
-                [I.inactive]: !P,
-                [I.dragging]: i
+              onClick: () => d(l),
+              className: M(I.dot, {
+                [I.active]: B,
+                [I.inactive]: !B,
+                [I.dragging]: c
               }),
-              "aria-label": `Set value to ${s + p * a}`
+              "aria-label": `Set value to ${e + l * i}`
             },
-            p
+            l
           );
         }) }),
         /* @__PURE__ */ t.jsx(
           "input",
           {
             type: "range",
-            min: s,
-            max: c,
-            step: a,
-            value: l,
-            onChange: (_) => e(Number(_.target.value)),
-            onMouseDown: () => u(!0),
-            onMouseUp: () => u(!1),
-            onTouchStart: () => u(!0),
-            onTouchEnd: () => u(!1),
+            min: e,
+            max: o,
+            step: i,
+            value: a,
+            onChange: (_) => s(Number(_.target.value)),
+            onMouseDown: () => m(!0),
+            onMouseUp: () => m(!1),
+            onTouchStart: () => m(!0),
+            onTouchEnd: () => m(!1),
             className: I.input
           }
         )
@@ -1040,14 +1040,14 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
           G,
           {
             type: "number",
-            min: s,
-            max: c,
+            min: e,
+            max: o,
             paddingless: !0,
             onChange: (_) => {
-              const p = Number(_);
-              p > c ? e(c) : p < s ? e(s) : e(p);
+              const l = Number(_);
+              l > o ? s(o) : l < e ? s(e) : s(l);
             },
-            value: String(l)
+            value: String(a)
           }
         ),
         /* @__PURE__ */ t.jsxs("div", { className: I.controls, children: [
@@ -1055,7 +1055,7 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
             "button",
             {
               onClick: k,
-              disabled: l >= c,
+              disabled: a >= o,
               className: I.button,
               "aria-label": "Increment count",
               children: /* @__PURE__ */ t.jsx(
@@ -1072,7 +1072,7 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
             "button",
             {
               onClick: j,
-              disabled: l <= s,
+              disabled: a <= e,
               className: I.button,
               "aria-label": "Decrement count",
               children: /* @__PURE__ */ t.jsx(
@@ -1089,41 +1089,41 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
       ] })
     ] })
   ] });
-}, js = "_subtitle_16rdk_1", bs = "_header_16rdk_8", vs = "_text_16rdk_9", ks = "_productsBlock_16rdk_10", ys = "_top_16rdk_22", $s = "_itemsBlock_16rdk_31", Ns = "_typeTexts_16rdk_37", Cs = "_block_16rdk_44", Is = "_active_16rdk_57", qs = "_products_16rdk_10", Ps = "_product_16rdk_10", Bs = "_button_16rdk_76", ws = "_image_16rdk_87", Ts = "_info_16rdk_94", As = "_name_16rdk_106", Ss = "_buttons_16rdk_110", Os = "_modal_16rdk_117", Ds = "_link_16rdk_137", Ls = "_modalOptions_16rdk_143", w = {
+}, 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: bs,
-  text: vs,
-  productsBlock: ks,
-  top: ys,
-  itemsBlock: $s,
-  typeTexts: Ns,
-  block: Cs,
-  active: Is,
-  products: qs,
-  product: Ps,
-  button: Bs,
-  image: ws,
-  info: Ts,
-  name: As,
-  buttons: Ss,
-  modal: Os,
-  link: Ds,
-  modalOptions: Ls
-}, Ms = (r) => {
-  const { activeItem: n, setActiveItem: s, popupPosition: c, setIsOpenModal: a } = r;
+  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;
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: w.modal,
-      onClick: (l) => {
-        l.stopPropagation();
+      className: T.modal,
+      onClick: (a) => {
+        a.stopPropagation();
       },
       style: {
-        top: `${c.top}px`,
-        left: `${c.left}px`
+        top: `${o.top}px`,
+        left: `${o.left}px`
       },
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: w.top, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: T.top, children: [
           /* @__PURE__ */ t.jsx("h3", { children: n.name }),
           /* @__PURE__ */ t.jsx(
             x,
@@ -1133,100 +1133,100 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
               width: 20,
               hoverable: !0,
               onClick: () => {
-                a(!1), s(null);
+                i(!1), e(null);
               }
             }
           )
         ] }),
-        /* @__PURE__ */ t.jsx("div", { className: w.modalOptions, children: /* @__PURE__ */ t.jsx(
-          ot,
+        /* @__PURE__ */ t.jsx("div", { className: T.modalOptions, children: /* @__PURE__ */ t.jsx(
+          it,
           {
             label: "Put up an attractive image",
-            onChange: (l) => {
-              const e = {
+            onChange: (a) => {
+              const s = {
                 ...n,
-                images: l,
-                imagePath: l[0]
+                images: a,
+                imagePath: a[0]
               };
-              s(e);
+              e(s);
             }
           }
         ) })
       ]
     }
   );
-}, Hs = (r) => {
-  const { index: n, moveProduct: s, children: c } = r, [, a] = ut({
+}, Rs = (r) => {
+  const { index: n, moveProduct: e, children: o } = r, [, i] = ut({
     accept: "product",
-    hover(i) {
-      i.index !== n && (s(i.index, n), i.index = n);
+    hover(c) {
+      c.index !== n && (e(c.index, n), c.index = n);
     }
-  }), [{ isDragging: l }, e] = _t({
+  }), [{ isDragging: a }, s] = mt({
     type: "product",
     item: { index: n },
-    collect: (i) => ({
-      isDragging: i.isDragging()
+    collect: (c) => ({
+      isDragging: c.isDragging()
     })
   });
   return /* @__PURE__ */ t.jsx(
     "div",
     {
-      ref: (i) => e(a(i)),
-      className: `${w.product} ${l ? w.dragging : ""}`,
-      children: c
+      ref: (c) => s(i(c)),
+      className: `${T.product} ${a ? T.dragging : ""}`,
+      children: o
     }
   );
-}, En = (r) => {
+}, Fn = (r) => {
   const {
     isActiveItems: n,
-    setIsActiveItems: s,
-    items: c,
-    setItems: a,
-    other: l,
-    title: e,
-    subtitle: i,
-    editable: u = !0,
-    draggable: y = !1,
-    withImage: h = !1,
+    setIsActiveItems: e,
+    items: o,
+    setItems: i,
+    other: a,
+    title: s,
+    subtitle: c,
+    editable: m = !0,
+    draggable: $ = !1,
+    withImage: p = !1,
     deletable: k = !0,
     addable: j = !0,
-    itemsType: o,
+    itemsType: d,
     itemsOptions: _
-  } = r, [p, P] = f.useState(null), [T, N] = f.useState({
+  } = r, [l, B] = f.useState(null), [q, Q] = f.useState({
     top: 0,
     left: 0
-  }), [Q, O] = f.useState(!1), R = (m, v) => {
-    const A = [...c], [C] = A.splice(m, 1);
-    A.splice(v, 0, C), a(A);
+  }), [F, y] = f.useState(!1), L = (h, v) => {
+    const A = [...o], [C] = A.splice(h, 1);
+    A.splice(v, 0, C), i(A);
   };
   f.useEffect(() => {
-    const m = () => {
-      P(null), O(!1);
+    const h = () => {
+      B(null), y(!1);
     };
-    return document.body.addEventListener("click", m), P(null), O(!1), () => {
-      P(null), O(!1), document.body.removeEventListener("click", m);
+    return document.body.addEventListener("click", h), B(null), y(!1), () => {
+      B(null), y(!1), document.body.removeEventListener("click", h);
     };
   }, []), f.useEffect(() => {
-    if (p) {
-      const m = [...c].map((v) => v.id === p.id ? p : v);
-      a(m);
+    if (l) {
+      const h = [...o].map((v) => v.id === l.id ? l : v);
+      i(h);
     }
-  }, [p]);
-  const E = (m, v) => {
-    m.stopPropagation();
-    const A = m.target.getBoundingClientRect(), C = 100, U = window.innerHeight;
-    let D = A.top + window.scrollY;
-    D + C > U && (D = U - C - 20), O(!0), N({
-      top: D - 80,
+  }, [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
-    }), P(v);
+    }), B(v);
   };
-  function st(m) {
-    if (h)
-      return m ? /* @__PURE__ */ t.jsx(
+  function st(h) {
+    if (p)
+      return h ? /* @__PURE__ */ t.jsx(
         "img",
         {
-          src: `https://imagedelivery.net/${m}/w=1000`,
+          src: `https://imagedelivery.net/${h}/w=1000`,
           alt: "image",
           width: 16,
           height: 16
@@ -1241,9 +1241,9 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
         }
       );
   }
-  const et = (m, v) => {
+  const et = (h, v) => {
     const A = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-      y && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
+      $ && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
         x,
         {
           name: "DotsSixVertical",
@@ -1252,43 +1252,43 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
           height: 20
         }
       ) }, v),
-      o === "select" && /* @__PURE__ */ t.jsx(
+      d === "select" && /* @__PURE__ */ t.jsx(
         Y,
         {
           onChange: (C) => {
-            const U = [...c], D = Number(C.split(" ")[1]), d = _.find(($) => $.id === D);
-            if (!d) return;
-            const B = {
-              ...d.productData.stats,
-              newPrice: d.productData.minPrice.amount,
-              oldPrice: d.productData.compareAtPrice.amount
-            }, S = U.map(($) => $.id === m.id ? {
-              ...m,
+            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,
               name: C,
-              listingId: D,
-              stats: B
-            } : $);
-            P({
-              ...m,
+              listingId: O,
+              stats: w
+            } : N);
+            B({
+              ...h,
               name: C,
-              listingId: D
-            }), a([...S]);
+              listingId: O
+            }), i([...S]);
           },
-          value: m.name,
+          value: h.name,
           options: [..._.map((C) => `Product ${C.id}`)],
-          leftAddon: st(m.images[0])
+          leftAddon: st(h.images[0])
         },
         v
       ),
-      /* @__PURE__ */ t.jsxs("div", { className: w.buttons, children: [
-        u && /* @__PURE__ */ t.jsx(
+      /* @__PURE__ */ t.jsxs("div", { className: T.buttons, children: [
+        m && /* @__PURE__ */ t.jsx(
           x,
           {
             name: "Sliders",
             hoverable: !0,
             width: 20,
             height: 20,
-            onClick: (C) => E(C, m)
+            onClick: (C) => R(C, h)
           }
         ),
         k && /* @__PURE__ */ t.jsx(
@@ -1299,60 +1299,60 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
             width: 20,
             height: 20,
             fill: "#C12A2A",
-            onClick: () => a(c.filter((C) => C.id !== m.id))
+            onClick: () => i(o.filter((C) => C.id !== h.id))
           }
         )
       ] })
     ] });
-    return y ? /* @__PURE__ */ t.jsx(
-      Hs,
+    return $ ? /* @__PURE__ */ t.jsx(
+      Rs,
       {
-        product: m,
+        product: h,
         index: v,
-        moveProduct: R,
+        moveProduct: L,
         children: A
       },
-      m.id
+      h.id
     ) : /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: w.product,
+        className: T.product,
         children: A
       },
-      m.id
+      h.id
     );
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: w.productsBlock, children: [
-    (e || n !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: w.top, children: [
-      e && /* @__PURE__ */ t.jsx("h3", { className: w.title, children: e }),
+  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 }),
       n !== void 0 && /* @__PURE__ */ t.jsx(
-        F,
+        V,
         {
           current: n,
-          onChange: (m) => s == null ? void 0 : s(m)
+          onChange: (h) => e == null ? void 0 : e(h)
         }
       )
     ] }),
-    Q && p && /* @__PURE__ */ t.jsx(
-      Ms,
+    F && l && /* @__PURE__ */ t.jsx(
+      Ls,
       {
-        activeItem: p,
-        setActiveItem: P,
-        setIsOpenModal: O,
-        popupPosition: T
+        activeItem: l,
+        setActiveItem: B,
+        setIsOpenModal: y,
+        popupPosition: q
       }
     ),
-    /* @__PURE__ */ t.jsxs("div", { className: w.products, children: [
-      i && /* @__PURE__ */ t.jsx("h5", { className: w.subtitle, children: i }),
-      y ? /* @__PURE__ */ t.jsx(rt, { backend: dt, children: c.map((m, v) => et(m, v)) }) : c.map((m, v) => et(m, v)),
+    /* @__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(
         X,
         {
-          className: w.button,
+          className: T.button,
           size: "s",
           onClick: () => {
-            const m = [...c], v = _[0].id;
-            m.push({
+            const h = [...o], v = _[0].id;
+            h.push({
               name: `Product ${v}`,
               id: tt(),
               listingId: v,
@@ -1363,7 +1363,7 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
                 newPrice: _[0].productData.minPrice.amount,
                 oldPrice: _[0].productData.compareAtPrice.amount
               }
-            }), a(m);
+            }), i(h);
           },
           children: [
             /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
@@ -1379,96 +1379,111 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
         }
       )
     ] }),
-    l !== void 0 && /* @__PURE__ */ t.jsx(ht, { items: l })
+    a !== void 0 && /* @__PURE__ */ t.jsx(ht, { items: a })
   ] });
-}, Rs = "_options_q6sjs_1", Es = "_price_q6sjs_12", Vs = "_oldPrice_q6sjs_19", Fs = "_newPrice_q6sjs_27", Us = "_meta_q6sjs_34", zs = "_info_q6sjs_40", Gs = "_infoRight_q6sjs_48", Ys = "_buttons_q6sjs_55", Xs = "_variants_q6sjs_62", Qs = "_variant_q6sjs_62", Ws = "_stock_q6sjs_79", Js = "_variantInfo_q6sjs_86", Ks = "_quantity_q6sjs_92", Zs = "_count_q6sjs_99", tn = "_button_q6sjs_55", en = "_activeVariant_q6sjs_120", sn = "_chargeTypes_q6sjs_124", nn = "_charge_q6sjs_124", cn = "_chargeActive_q6sjs_144", b = {
-  options: Rs,
-  price: Es,
-  oldPrice: Vs,
-  newPrice: Fs,
-  meta: Us,
-  info: zs,
-  infoRight: Gs,
-  buttons: Ys,
-  variants: Xs,
-  variant: Qs,
-  stock: Ws,
-  variantInfo: Js,
-  quantity: Ks,
-  count: Zs,
-  button: tn,
-  activeVariant: en,
-  chargeTypes: sn,
-  charge: nn,
-  chargeActive: cn
-}, Vn = (r) => {
-  const { variants: n } = r, [s, c] = f.useState(n[0]), a = it(), [l, e] = f.useState(1), { reset: i, addProductToCart: u, getProducts: y } = at();
-  async function h() {
-    await y(), await u({
+}, 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
+};
+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,
-      productVariantId: s.id,
-      quantity: l
+      productVariantId: e.id,
+      quantity: c
     });
   }
-  function k() {
-    i(), h(), a("/checkout");
+  function d() {
+    $(), j(), s("/checkout");
   }
-  function j(o) {
-    if (o >= 864e5) {
-      const N = Math.floor(o / 864e5);
-      return `${N} ${N === 1 ? "day" : "days"}`;
-    } else if (o >= 36e5) {
-      const N = Math.floor(o / 36e5);
-      return `${N} ${N === 1 ? "hour" : "hours"}`;
-    } else if (o >= 6e4) {
-      const N = Math.floor(o / 6e4);
-      return `${N} ${N === 1 ? "minute" : "minutes"}`;
+  function _(l) {
+    if (l >= 864e5) {
+      const y = Math.floor(l / 864e5);
+      return `${y} ${y === 1 ? "day" : "days"}`;
+    } else if (l >= 36e5) {
+      const y = Math.floor(l / 36e5);
+      return `${y} ${y === 1 ? "hour" : "hours"}`;
+    } else if (l >= 6e4) {
+      const y = Math.floor(l / 6e4);
+      return `${y} ${y === 1 ? "minute" : "minutes"}`;
     } else {
-      const N = Math.floor(o / 1e3);
-      return `${N} ${N === 1 ? "second" : "seconds"}`;
+      const y = Math.floor(l / 1e3);
+      return `${y} ${y === 1 ? "second" : "seconds"}`;
     }
   }
   return /* @__PURE__ */ t.jsxs("div", { className: b.options, children: [
-    /* @__PURE__ */ t.jsx("div", { className: b.chargeTypes, children: s.chargeTypes ? s.chargeTypes.map((o) => /* @__PURE__ */ t.jsx("div", { children: o }, o)) : /* @__PURE__ */ t.jsx("div", { className: H(b.charge, b.chargeActive), children: "One-Time" }) }),
-    /* @__PURE__ */ t.jsx("div", { className: b.variants, children: n.map((o) => /* @__PURE__ */ t.jsxs(
+    /* @__PURE__ */ t.jsx("div", { className: b.chargeTypes, children: e.chargeTypes.map((l) => /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: H(b.variant, {
-          [b.activeVariant]: s.id === o.id
+        className: M(b.charge, {
+          [b.chargeActive]: i === l
         }),
-        onClick: () => c(o),
+        onClick: () => a(l),
+        children: pt[l]
+      },
+      l
+    )) }),
+    /* @__PURE__ */ t.jsx("div", { className: b.variants, children: n.map((l) => /* @__PURE__ */ t.jsxs(
+      "div",
+      {
+        className: M(b.variant, {
+          [b.activeVariant]: e.id === l.id
+        }),
+        onClick: () => o(l),
         children: [
           /* @__PURE__ */ t.jsxs("div", { className: b.variantInfo, children: [
-            /* @__PURE__ */ t.jsx("span", { className: b.title, children: o.name }),
+            /* @__PURE__ */ t.jsx("span", { className: b.title, children: l.name }),
             /* @__PURE__ */ t.jsxs("span", { children: [
               "$",
-              o.price.amount
+              i === "ONE_TIME" ? l.price.amount : l.subscriptionSettings.price.amount
             ] })
           ] }),
-          /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsxs("span", { className: b.stock, children: [
-            o.quantity.restrictions.max || 0,
+          /* @__PURE__ */ t.jsx("div", { children: i === "ONE_TIME" && /* @__PURE__ */ t.jsxs("span", { className: b.stock, children: [
+            l.quantity.restrictions.max || 0,
             " in stock"
           ] }) })
         ]
       },
-      o.id
+      l.id
     )) }),
     /* @__PURE__ */ t.jsxs("div", { className: b.quantity, children: [
       /* @__PURE__ */ t.jsx(
         "div",
         {
           onClick: () => {
-            l > 1 ? e((o) => o - 1) : e(1);
+            i === "ONE_TIME" && (c > 1 ? m((l) => l - 1) : m(1));
           },
           className: b.button,
           children: /* @__PURE__ */ t.jsx(x, { name: "Minus" })
         }
       ),
-      /* @__PURE__ */ t.jsx("div", { className: b.count, children: l }),
+      /* @__PURE__ */ t.jsx("div", { className: b.count, children: c }),
       /* @__PURE__ */ t.jsx(
         "div",
         {
-          onClick: () => e((o) => o + 1),
+          onClick: () => {
+            i === "ONE_TIME" && m((l) => l + 1);
+          },
           className: b.button,
           children: /* @__PURE__ */ t.jsx(x, { name: "Plus" })
         }
@@ -1487,23 +1502,35 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
               height: 20
             }
           ),
-          /* @__PURE__ */ t.jsx("span", { children: s.deliveryTime === 0 ? "Instant" : j(s.deliveryTime) })
+          /* @__PURE__ */ t.jsx("span", { children: e.deliveryTime === 0 ? "Instant" : _(e.deliveryTime) })
         ] })
       ] }),
       /* @__PURE__ */ t.jsxs("div", { className: b.info, children: [
         /* @__PURE__ */ t.jsx("span", { children: "Price" }),
-        /* @__PURE__ */ t.jsx("div", { className: b.infoRight, children: s.compareAtPrice && (s.compareAtPrice.amount || 0) - (s.price.amount || 0) > 0 ? /* @__PURE__ */ t.jsxs("div", { className: b.price, children: [
+        /* @__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: [
+            "$ ",
+            (e.price.amount || 0) * c
+          ] }),
+          /* @__PURE__ */ t.jsxs("span", { className: b.oldPrice, children: [
+            "$ ",
+            (e.compareAtPrice.amount || 0) * c
+          ] })
+        ] }) : /* @__PURE__ */ t.jsxs("span", { className: b.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: [
             "$ ",
-            (s.price.amount || 0) * l
+            e.subscriptionSettings.price.amount || 0
           ] }),
           /* @__PURE__ */ t.jsxs("span", { className: b.oldPrice, children: [
             "$ ",
-            (s.compareAtPrice.amount || 0) * l
+            e.subscriptionSettings.compareAtPrice.amount || 0
           ] })
         ] }) : /* @__PURE__ */ t.jsxs("span", { className: b.newPrice, children: [
           "$ ",
-          (s.price.amount || 0) * l
+          e.subscriptionSettings.price.amount || 0
         ] }) })
       ] })
     ] }),
@@ -1512,81 +1539,81 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
         X,
         {
           type: "Primary",
-          onClick: () => k(),
+          onClick: () => d(),
           children: "Buy Now"
         }
       ),
-      /* @__PURE__ */ t.jsx(
+      i === "ONE_TIME" && /* @__PURE__ */ t.jsx(
         X,
         {
           type: "Secondary",
-          onClick: () => h(),
+          onClick: () => j(),
           children: "Add to Cart"
         }
       )
     ] })
   ] });
-}, on = "_button_14i4s_1", an = "_login_14i4s_14", ln = "_signUp_14i4s_18", rn = "_buttons_14i4s_23", dn = "_modal_14i4s_32", un = "_info_14i4s_48", _n = "_top_14i4s_55", mn = "_title_14i4s_66", hn = "_clear_14i4s_72", pn = "_activeClear_14i4s_79", gn = "_count_14i4s_83", xn = "_cart_14i4s_98", fn = "_empty_14i4s_106", jn = "_product_14i4s_132", bn = "_products_14i4s_141", vn = "_image_14i4s_149", kn = "_productInfo_14i4s_155", yn = "_content_14i4s_162", $n = "_name_14i4s_168", Nn = "_price_14i4s_174", Cn = "_productButtons_14i4s_180", In = "_productButton_14i4s_180", qn = "_productCount_14i4s_200", Pn = "_bottom_14i4s_216", Bn = "_subtotal_14i4s_224", wn = "_block_14i4s_232", Tn = "_shoppingCount_14i4s_239", g = {
-  button: on,
-  login: an,
-  signUp: ln,
-  buttons: rn,
-  modal: dn,
-  info: un,
-  top: _n,
-  title: mn,
-  clear: hn,
-  activeClear: pn,
-  count: gn,
-  cart: xn,
-  empty: fn,
-  product: jn,
-  products: bn,
-  image: vn,
-  productInfo: kn,
-  content: yn,
-  name: $n,
-  price: Nn,
-  productButtons: Cn,
-  productButton: In,
-  productCount: qn,
-  bottom: Pn,
-  subtotal: Bn,
-  block: wn,
-  shoppingCount: Tn
-}, Fn = (r) => {
-  const { shopping: n, signUp: s } = r, c = it();
-  function a(l) {
-    c(l);
+}, 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);
   }
   return /* @__PURE__ */ t.jsxs("div", { className: g.buttons, children: [
-    n && /* @__PURE__ */ t.jsx(An, {}),
+    n && /* @__PURE__ */ t.jsx(On, {}),
     /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: H(g.button, g.login),
-        onClick: () => a("/customer-dash"),
+        className: M(g.button, g.login),
+        onClick: () => i("/customer-dash"),
         children: "Login"
       }
     ),
-    s && /* @__PURE__ */ t.jsx(
+    e && /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: H(g.button, g.login, g.signUp),
-        onClick: () => a("/customer-dash"),
+        className: M(g.button, g.login, g.signUp),
+        onClick: () => i("/customer-dash"),
         children: "Sign Up"
       }
     )
   ] });
-}, An = () => {
-  const [r, n] = f.useState(!1), { cart: s } = at();
-  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+}, On = () => {
+  const [r, n] = f.useState(!1), { cart: e } = at();
+  return console.log(e), /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
     /* @__PURE__ */ t.jsxs(
       "div",
       {
         className: g.button,
-        onClick: (c) => {
-          c.stopPropagation(), n(!0);
+        onClick: (o) => {
+          o.stopPropagation(), n(!0);
         },
         children: [
           /* @__PURE__ */ t.jsx(
@@ -1596,57 +1623,57 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
               fill: "#252525"
             }
           ),
-          s.parts.length > 0 && /* @__PURE__ */ t.jsx("div", { className: g.shoppingCount, children: s.parts.length })
+          e.parts.length > 0 && /* @__PURE__ */ t.jsx("div", { className: g.shoppingCount, children: e.parts.length })
         ]
       }
     ),
-    r && /* @__PURE__ */ t.jsx(pt, { close: n, children: /* @__PURE__ */ t.jsx(Sn, {}) })
+    r && /* @__PURE__ */ t.jsx(gt, { close: n, children: /* @__PURE__ */ t.jsx(Dn, {}) })
   ] });
-}, Sn = () => {
-  const { cart: r, reset: n, getProducts: s, getTotalAndDiscount: c, updateQuantityOfProduct: a } = at(), [l, e] = f.useState([]), i = it();
-  function u(o) {
+}, 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 p = 0; p < o.variants.length; p++)
-        if (r.parts[_].productVariantId === o.variants[_].id)
+      for (let l = 0; l < d.variants.length; l++)
+        if (r.parts[_].productVariantId === d.variants[_].id)
           return r.parts[_].productVariantId;
   }
-  function y(o) {
+  function $(d) {
     for (let _ = 0; _ < r.parts.length; _++)
-      for (let p = 0; p < o.variants.length; p++)
-        if (r.parts[_].productVariantId === o.variants[_].id)
+      for (let l = 0; l < d.variants.length; l++)
+        if (r.parts[_].productVariantId === d.variants[_].id)
           return r.parts[_].quantity;
   }
-  function h(o) {
-    i(o);
+  function p(d) {
+    c(d);
   }
-  function k(o) {
-    a({
-      productId: o.id,
-      productVariantId: o.activeVariantId,
-      quantity: o.quantity + 1
+  function k(d) {
+    i({
+      productId: d.id,
+      productVariantId: d.activeVariantId,
+      quantity: d.quantity + 1
     });
   }
-  function j(o) {
-    a({
-      productId: o.id,
-      productVariantId: o.activeVariantId,
-      quantity: o.quantity - 1
+  function j(d) {
+    i({
+      productId: d.id,
+      productVariantId: d.activeVariantId,
+      quantity: d.quantity - 1
     });
   }
   return f.useEffect(() => {
     (async () => {
-      const _ = r.parts.map((T) => String(T.productId)), P = (await s([..._])).map((T) => ({
-        ...T,
-        activeVariantId: u(T),
-        quantity: y(T)
+      const _ = r.parts.map((q) => String(q.productId)), B = (await e([..._])).map((q) => ({
+        ...q,
+        activeVariantId: m(q),
+        quantity: $(q)
       }));
-      e(P);
+      s(B);
     })();
   }, [r]), /* @__PURE__ */ t.jsxs(
     "div",
     {
       className: g.modal,
-      onClick: (o) => o.stopPropagation(),
+      onClick: (d) => d.stopPropagation(),
       children: [
         /* @__PURE__ */ t.jsxs("div", { className: g.top, children: [
           /* @__PURE__ */ t.jsxs("div", { className: g.info, children: [
@@ -1656,7 +1683,7 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
           /* @__PURE__ */ t.jsx(
             "button",
             {
-              className: H(g.clear, {
+              className: M(g.clear, {
                 [g.activeClear]: r.parts.length > 0
               }),
               disabled: r.parts.length === 0,
@@ -1666,7 +1693,7 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
           )
         ] }),
         r.parts.length > 0 ? /* @__PURE__ */ t.jsxs("div", { className: g.cart, children: [
-          /* @__PURE__ */ t.jsx("div", { className: g.products, children: l.map((o) => /* @__PURE__ */ t.jsxs(
+          /* @__PURE__ */ t.jsx("div", { className: g.products, children: a.map((d) => /* @__PURE__ */ t.jsxs(
             "div",
             {
               className: g.product,
@@ -1675,7 +1702,7 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
                   /* @__PURE__ */ t.jsx(
                     "img",
                     {
-                      src: `https://imagedelivery.net/${o.images[0].cfId}/w=500`,
+                      src: `https://imagedelivery.net/${d.images[0].cfId}/w=500`,
                       alt: "image",
                       width: "100%",
                       height: "100%",
@@ -1683,10 +1710,10 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
                     }
                   ),
                   /* @__PURE__ */ t.jsxs("div", { className: g.content, children: [
-                    /* @__PURE__ */ t.jsx("div", { className: g.name, children: o.name }),
+                    /* @__PURE__ */ t.jsx("div", { className: g.name, children: d.name }),
                     /* @__PURE__ */ t.jsxs("div", { className: g.price, children: [
                       "$",
-                      o.variants.find((_) => _.id === o.activeVariantId).price.amount * ((o == null ? void 0 : o.quantity) || 1)
+                      d.variants.find((_) => _.id === d.activeVariantId).price.amount * ((d == null ? void 0 : d.quantity) || 1)
                     ] })
                   ] })
                 ] }),
@@ -1695,7 +1722,7 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
                     "div",
                     {
                       onClick: () => {
-                        o.quantity !== 1 && j(o);
+                        d.quantity !== 1 && j(d);
                       },
                       className: g.productButton,
                       children: /* @__PURE__ */ t.jsx(
@@ -1709,11 +1736,11 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
                       )
                     }
                   ),
-                  /* @__PURE__ */ t.jsx("div", { className: g.productCount, children: o.quantity }),
+                  /* @__PURE__ */ t.jsx("div", { className: g.productCount, children: d.quantity }),
                   /* @__PURE__ */ t.jsx(
                     "div",
                     {
-                      onClick: () => k(o),
+                      onClick: () => k(d),
                       className: g.productButton,
                       children: /* @__PURE__ */ t.jsx(
                         x,
@@ -1729,7 +1756,7 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
                 ] })
               ]
             },
-            o.id
+            d.id
           )) }),
           /* @__PURE__ */ t.jsxs("div", { className: g.bottom, children: [
             /* @__PURE__ */ t.jsxs("div", { className: g.subtotal, children: [
@@ -1747,50 +1774,50 @@ const gt = "_accordion_9e4oa_1", xt = "_header_9e4oa_9", ft = "_icon_9e4oa_18",
               ] }),
               /* @__PURE__ */ t.jsxs("div", { children: [
                 "$",
-                c().total
+                o().total
               ] })
             ] }),
-            /* @__PURE__ */ t.jsx(X, { onClick: () => h("/checkout"), children: "Checkout" })
+            /* @__PURE__ */ t.jsx(X, { onClick: () => p("/checkout"), children: "Checkout" })
           ] })
-        ] }) : /* @__PURE__ */ t.jsx(On, {})
+        ] }) : /* @__PURE__ */ t.jsx(En, {})
       ]
     }
   );
-}, On = () => /* @__PURE__ */ t.jsxs("div", { className: g.empty, children: [
+}, En = () => /* @__PURE__ */ t.jsxs("div", { className: g.empty, children: [
   /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(x, { 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" })
 ] });
 export {
-  Mn as Accordion,
+  Rn as Accordion,
   X as Button,
-  ns as ButtonTypeSettings,
-  Rn as ButtonsSettings,
-  Gn as Checkbox,
-  ot as ChooseImage,
-  Yn as ChooseImageModal,
-  Xn as ColorPicker,
-  On as EmptyCart,
-  Qn as ErrorableBlock,
-  Fn as HeaderButtons,
+  cs as ButtonTypeSettings,
+  Vn as ButtonsSettings,
+  Xn as Checkbox,
+  it as ChooseImage,
+  Qn as ChooseImageModal,
+  Wn as ColorPicker,
+  En as EmptyCart,
+  Jn as ErrorableBlock,
+  zn as HeaderButtons,
   x as Icon,
   G as Input,
-  pe as ItemsSettings,
+  ge as ItemsSettings,
   Hn as LayoutSettings,
-  En as ListingSelector,
-  Wn as Loader,
-  pt as Modal,
-  Jn as Picker,
-  Vn as ProductOptions,
-  Kn as Radio,
-  fs as RangeSelector,
+  Fn as ListingSelector,
+  Kn as Loader,
+  gt as Modal,
+  Zn as Picker,
+  Un as ProductOptions,
+  tc as Radio,
+  bs as RangeSelector,
   Y as Select,
-  An as ShoppingButton,
-  Sn as ShoppingModalCart,
-  Zn as Submodal,
-  F as Switch,
-  Ft as TextSettings,
+  On as ShoppingButton,
+  Dn as ShoppingModalCart,
+  ec as Submodal,
+  V as Switch,
+  Ut as TextSettings,
   lt as Textarea,
-  tc as Tip,
-  mt as TypesText
+  sc as Tip,
+  _t as TypesText
 };