@billgangcom/theme-lib 1.15.0 → 1.16.0

package/dist/ui.es.js

@@ -1,27 +1,27 @@
-import { j as t, c as z, I as h, a as F, S as R, T as ct, C as ot, b as V, D as it, H as at, B as Q, v as K, u as lt, d as rt } from "./index-QsuPYj6C.js";
-import { h as un, i as _n, f as mn, L as hn, M as pn, P as gn, R as xn, e as bn, g as fn } from "./index-QsuPYj6C.js";
+import { j as t, c as H, I as h, a as V, S as z, T as it, C as ct, b as G, D as at, H as lt, B as tt, v as Z, u as rt, d as dt, e as ut, f as ht } from "./root-CW3Zha5t.js";
+import { k as fn, l as jn, h as vn, L as kn, M as yn, P as $n, R as Nn, g as wn, i as Cn } from "./root-CW3Zha5t.js";
 import p from "react";
-const _t = "_accordion_2tiiw_1", mt = "_header_2tiiw_9", ht = "_icon_2tiiw_16", pt = "_open_2tiiw_19", gt = "_content_2tiiw_23", X = {
-  accordion: _t,
-  header: mt,
-  icon: ht,
-  open: pt,
-  content: gt
-}, nn = ({ title: _, content: o }) => {
-  const [n, c] = p.useState(!1), [i, a] = p.useState(0), e = p.useRef(null), s = () => {
-    c(!n);
+const pt = "_accordion_2tiiw_1", gt = "_header_2tiiw_9", xt = "_icon_2tiiw_16", bt = "_open_2tiiw_19", ft = "_content_2tiiw_23", K = {
+  accordion: pt,
+  header: gt,
+  icon: xt,
+  open: bt,
+  content: ft
+}, un = ({ title: u, content: n }) => {
+  const [s, o] = p.useState(!1), [i, a] = p.useState(0), e = p.useRef(null), c = () => {
+    o(!s);
   };
   return p.useEffect(() => {
-    e.current && a(n ? e.current.scrollHeight : 0);
-  }, [n]), /* @__PURE__ */ t.jsxs("div", { className: X.accordion, children: [
+    e.current && a(s ? e.current.scrollHeight : 0);
+  }, [s]), /* @__PURE__ */ t.jsxs("div", { className: K.accordion, children: [
     /* @__PURE__ */ t.jsxs(
       "div",
       {
-        className: X.header,
-        onClick: s,
+        className: K.header,
+        onClick: c,
         children: [
-          /* @__PURE__ */ t.jsx("h3", { children: _ }),
-          /* @__PURE__ */ t.jsx("div", { className: z(X.icon, { [X.open]: n }), children: /* @__PURE__ */ t.jsx(h, { name: "CaretDown" }) })
+          /* @__PURE__ */ t.jsx("h3", { children: u }),
+          /* @__PURE__ */ t.jsx("div", { className: H(K.icon, { [K.open]: s }), children: /* @__PURE__ */ t.jsx(h, { name: "CaretDown" }) })
         ]
       }
     ),
@@ -29,25 +29,25 @@ const _t = "_accordion_2tiiw_1", mt = "_header_2tiiw_9", ht = "_icon_2tiiw_16",
       "div",
       {
         ref: e,
-        className: X.content,
+        className: K.content,
         style: { height: `${i}px` },
-        children: /* @__PURE__ */ t.jsx("p", { children: o })
+        children: /* @__PURE__ */ t.jsx("p", { children: n })
       }
     )
   ] });
-}, xt = "_wrapper_1g82c_2", bt = "_alignmentBlock_1g82c_8", ft = "_title_1g82c_15", jt = "_subtitle_1g82c_22", vt = "_alignmentContent_1g82c_29", kt = "_alignments_1g82c_35", yt = "_alignment_1g82c_8", $t = "_circle_1g82c_54", Nt = "_paddings_1g82c_61", wt = "_padding_1g82c_61", It = "_input_1g82c_79", O = {
-  wrapper: xt,
-  alignmentBlock: bt,
-  title: ft,
-  subtitle: jt,
-  alignmentContent: vt,
-  alignments: kt,
-  alignment: yt,
-  circle: $t,
-  paddings: Nt,
-  padding: wt,
-  input: It
-}, Ct = [
+}, jt = "_wrapper_1g82c_2", vt = "_alignmentBlock_1g82c_8", kt = "_title_1g82c_15", yt = "_subtitle_1g82c_22", $t = "_alignmentContent_1g82c_29", Nt = "_alignments_1g82c_35", wt = "_alignment_1g82c_8", Ct = "_circle_1g82c_54", It = "_paddings_1g82c_61", Pt = "_padding_1g82c_61", Bt = "_input_1g82c_79", D = {
+  wrapper: jt,
+  alignmentBlock: vt,
+  title: kt,
+  subtitle: yt,
+  alignmentContent: $t,
+  alignments: Nt,
+  alignment: wt,
+  circle: Ct,
+  paddings: It,
+  padding: Pt,
+  input: Bt
+}, Tt = [
   "topLeft",
   "top",
   "topRight",
@@ -57,10 +57,10 @@ const _t = "_accordion_2tiiw_1", mt = "_header_2tiiw_9", ht = "_icon_2tiiw_16",
   "bottomLeft",
   "bottom",
   "bottomRight"
-], Pt = ["left", "top", "right", "bottom"], on = (_) => {
-  const { alignment: o, padding: n, setPadding: c, setAlignment: i } = _;
+], At = ["left", "top", "right", "bottom"], _n = (u) => {
+  const { alignment: n, padding: s, setPadding: o, setAlignment: i } = u;
   function a() {
-    switch (o) {
+    switch (n) {
       case "left":
       case "topLeft":
       case "bottomLeft":
@@ -77,8 +77,8 @@ const _t = "_accordion_2tiiw_1", mt = "_header_2tiiw_9", ht = "_icon_2tiiw_16",
         return "TextAlignCenter";
     }
   }
-  function e(s) {
-    switch (s) {
+  function e(c) {
+    switch (c) {
       case "left":
         return "AlignLeft";
       case "right":
@@ -89,21 +89,21 @@ const _t = "_accordion_2tiiw_1", mt = "_header_2tiiw_9", ht = "_icon_2tiiw_16",
         return "AlignBottom";
     }
   }
-  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: Ct.map((s) => /* @__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: Tt.map((c) => /* @__PURE__ */ t.jsxs(
           "div",
           {
             onClick: () => {
-              i(s);
+              i(c);
             },
-            className: O.alignment,
+            className: D.alignment,
             children: [
-              s !== o && /* @__PURE__ */ t.jsx("div", { className: O.circle }),
-              s === o && /* @__PURE__ */ t.jsx(
+              c !== n && /* @__PURE__ */ t.jsx("div", { className: D.circle }),
+              c === n && /* @__PURE__ */ t.jsx(
                 h,
                 {
                   name: a(),
@@ -114,25 +114,25 @@ const _t = "_accordion_2tiiw_1", mt = "_header_2tiiw_9", ht = "_icon_2tiiw_16",
               )
             ]
           },
-          s
+          c
         )) }),
-        /* @__PURE__ */ t.jsx("div", { className: O.paddings, children: Pt.map((s) => /* @__PURE__ */ t.jsxs("label", { className: O.padding, children: [
+        /* @__PURE__ */ t.jsx("div", { className: D.paddings, children: At.map((c) => /* @__PURE__ */ t.jsxs("label", { className: D.padding, children: [
           /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
             h,
             {
-              name: e(s),
+              name: e(c),
               width: 20,
               height: 20
             }
           ) }),
           /* @__PURE__ */ t.jsx(
-            F,
+            V,
             {
               type: "text",
-              value: String(n[s]),
-              onChange: (r) => c({
-                ...n,
-                [s]: Number(r)
+              value: String(s[c]),
+              onChange: (d) => o({
+                ...s,
+                [c]: Number(d)
               }),
               paddingless: !0,
               borderless: !0
@@ -142,19 +142,19 @@ const _t = "_accordion_2tiiw_1", mt = "_header_2tiiw_9", ht = "_icon_2tiiw_16",
       ] })
     ] })
   ] });
-}, Bt = "_subtitle_2zbxx_1", Tt = "_header_2zbxx_8", At = "_text_2zbxx_9", St = "_top_2zbxx_16", Ot = "_itemsBlock_2zbxx_23", Y = {
-  subtitle: Bt,
-  header: Tt,
-  text: At,
-  top: St,
-  itemsBlock: Ot
-}, Dt = "_typeTexts_3zlec_1", Lt = "_block_3zlec_7", qt = "_active_3zlec_18", st = {
-  typeTexts: Dt,
-  block: Lt,
-  active: qt
-}, Mt = ["bold", "italic", "underline", "strike-through", "code"], dt = (_) => {
-  const { typesText: o, setTypesText: n } = _;
-  function c(i) {
+}, St = "_subtitle_2zbxx_1", Ot = "_header_2zbxx_8", Dt = "_text_2zbxx_9", Lt = "_top_2zbxx_16", qt = "_itemsBlock_2zbxx_23", Q = {
+  subtitle: St,
+  header: Ot,
+  text: Dt,
+  top: Lt,
+  itemsBlock: qt
+}, Rt = "_typeTexts_3zlec_1", Mt = "_block_3zlec_7", Ht = "_active_3zlec_18", nt = {
+  typeTexts: Rt,
+  block: Mt,
+  active: Ht
+}, Et = ["bold", "italic", "underline", "strike-through", "code"], _t = (u) => {
+  const { typesText: n, setTypesText: s } = u;
+  function o(i) {
     switch (i) {
       case "bold":
         return "TextB";
@@ -168,25 +168,25 @@ const _t = "_accordion_2tiiw_1", mt = "_header_2tiiw_9", ht = "_icon_2tiiw_16",
         return "TextUnderline";
     }
   }
-  return /* @__PURE__ */ t.jsx("div", { className: st.typeTexts, children: Mt.map((i) => /* @__PURE__ */ t.jsx(
+  return /* @__PURE__ */ t.jsx("div", { className: nt.typeTexts, children: Et.map((i) => /* @__PURE__ */ t.jsx(
     "div",
     {
-      className: z(st.block, {
-        [st.active]: o.includes(i)
+      className: H(nt.block, {
+        [nt.active]: n.includes(i)
       }),
       onClick: () => {
-        const a = [...o];
+        const a = [...n];
         if (a.includes(i)) {
-          const e = a.filter((s) => s !== i);
-          n(e);
+          const e = a.filter((c) => c !== i);
+          s(e);
         } else
-          a.push(i), n(a);
+          a.push(i), s(a);
       },
       children: /* @__PURE__ */ t.jsx(
         h,
         {
-          name: c(i),
-          fill: o.includes(i) ? "#252525" : "#757575",
+          name: o(i),
+          fill: n.includes(i) ? "#252525" : "#757575",
           width: 20,
           height: 20
         }
@@ -194,32 +194,32 @@ const _t = "_accordion_2tiiw_1", mt = "_header_2tiiw_9", ht = "_icon_2tiiw_16",
     },
     String(i)
   )) });
-}, Rt = (_) => {
+}, zt = (u) => {
   const {
-    typesText: o,
-    isActiveText: n,
-    setIsActiveText: c,
+    typesText: n,
+    isActiveText: s,
+    setIsActiveText: o,
     text: i,
     setText: a,
     setTypesText: e,
-    title: s,
-    subtitle: r = "Items"
-  } = _;
-  return /* @__PURE__ */ t.jsxs("div", { className: Y.text, children: [
-    (s || n !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: Y.top, children: [
-      s && /* @__PURE__ */ t.jsx("h3", { className: Y.title, children: s }),
-      n !== void 0 && c && /* @__PURE__ */ t.jsx(
-        R,
+    title: c,
+    subtitle: d = "Items"
+  } = u;
+  return /* @__PURE__ */ t.jsxs("div", { className: Q.text, children: [
+    (c || s !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: Q.top, children: [
+      c && /* @__PURE__ */ t.jsx("h3", { className: Q.title, children: c }),
+      s !== void 0 && o && /* @__PURE__ */ t.jsx(
+        z,
         {
-          current: n,
-          onChange: (k) => c(k)
+          current: s,
+          onChange: (k) => o(k)
         }
       )
     ] }),
-    /* @__PURE__ */ t.jsxs("div", { className: Y.itemsBlock, children: [
-      /* @__PURE__ */ t.jsx("h5", { className: Y.subtitle, children: r }),
+    /* @__PURE__ */ t.jsxs("div", { className: Q.itemsBlock, children: [
+      /* @__PURE__ */ t.jsx("h5", { className: Q.subtitle, children: d }),
       /* @__PURE__ */ t.jsx(
-        ct,
+        it,
         {
           onChange: (k) => a(k),
           value: i,
@@ -227,51 +227,51 @@ const _t = "_accordion_2tiiw_1", mt = "_header_2tiiw_9", ht = "_icon_2tiiw_16",
         }
       ),
       /* @__PURE__ */ t.jsx(
-        dt,
+        _t,
         {
-          typesText: o,
+          typesText: n,
           setTypesText: e
         }
       )
     ] })
   ] });
-}, Ht = "_subtitle_11qr1_1", Et = "_header_11qr1_8", zt = "_text_11qr1_9", Ft = "_productsBlock_11qr1_10", Vt = "_top_11qr1_22", Gt = "_itemsBlock_11qr1_29", Ut = "_typeTexts_11qr1_35", Xt = "_block_11qr1_41", Yt = "_active_11qr1_52", Jt = "_products_11qr1_10", Kt = "_product_11qr1_10", Qt = "_button_11qr1_70", Wt = "_disabled_11qr1_80", Zt = "_image_11qr1_84", te = "_info_11qr1_91", ee = "_name_11qr1_102", se = "_buttons_11qr1_106", ne = "_modal_11qr1_112", oe = "_link_11qr1_130", ce = "_modalOptions_11qr1_136", N = {
-  subtitle: Ht,
-  header: Et,
-  text: zt,
-  productsBlock: Ft,
-  top: Vt,
-  itemsBlock: Gt,
-  typeTexts: Ut,
-  block: Xt,
-  active: Yt,
-  products: Jt,
-  product: Kt,
-  button: Qt,
-  disabled: Wt,
-  image: Zt,
-  info: te,
-  name: ee,
-  buttons: se,
-  modal: ne,
-  link: oe,
-  modalOptions: ce
-}, ie = (_) => {
-  const { activeItem: o, setActiveItem: n, popupPosition: c, modalOptions: i, setIsOpenModal: a } = _;
+}, Ut = "_subtitle_11qr1_1", Ft = "_header_11qr1_8", Vt = "_text_11qr1_9", Gt = "_productsBlock_11qr1_10", Xt = "_top_11qr1_22", Yt = "_itemsBlock_11qr1_29", Jt = "_typeTexts_11qr1_35", Kt = "_block_11qr1_41", Qt = "_active_11qr1_52", Wt = "_products_11qr1_10", Zt = "_product_11qr1_10", te = "_button_11qr1_70", ee = "_disabled_11qr1_80", se = "_image_11qr1_84", ne = "_info_11qr1_91", oe = "_name_11qr1_102", ce = "_buttons_11qr1_106", ie = "_modal_11qr1_112", ae = "_link_11qr1_130", le = "_modalOptions_11qr1_136", C = {
+  subtitle: Ut,
+  header: Ft,
+  text: Vt,
+  productsBlock: Gt,
+  top: Xt,
+  itemsBlock: Yt,
+  typeTexts: Jt,
+  block: Kt,
+  active: Qt,
+  products: Wt,
+  product: Zt,
+  button: te,
+  disabled: ee,
+  image: se,
+  info: ne,
+  name: oe,
+  buttons: ce,
+  modal: ie,
+  link: ae,
+  modalOptions: le
+}, re = (u) => {
+  const { activeItem: n, setActiveItem: s, popupPosition: o, modalOptions: i, setIsOpenModal: a } = u;
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: N.modal,
+      className: C.modal,
       onClick: (e) => {
         e.stopPropagation();
       },
       style: {
-        top: `${c.top}px`,
-        left: `${c.left}px`
+        top: `${o.top}px`,
+        left: `${o.left}px`
       },
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: N.top, children: [
-          /* @__PURE__ */ t.jsx("h3", { children: o.name }),
+        /* @__PURE__ */ t.jsxs("div", { className: C.top, children: [
+          /* @__PURE__ */ t.jsx("h3", { children: n.name }),
           /* @__PURE__ */ t.jsx(
             h,
             {
@@ -280,108 +280,108 @@ const _t = "_accordion_2tiiw_1", mt = "_header_2tiiw_9", ht = "_icon_2tiiw_16",
               width: 20,
               hoverable: !0,
               onClick: () => {
-                n(null), a(!1);
+                s(null), a(!1);
               }
             }
           )
         ] }),
-        /* @__PURE__ */ t.jsx("div", { className: N.modalOptions, children: i.map((e) => {
+        /* @__PURE__ */ t.jsx("div", { className: C.modalOptions, children: i.map((e) => {
           if (e.type === "image")
             return /* @__PURE__ */ t.jsx(
-              ot,
+              ct,
               {
                 label: "Put up an attractive image",
-                onChange: (s) => {
-                  const r = {
-                    ...o,
-                    [e.field]: s
+                onChange: (c) => {
+                  const d = {
+                    ...n,
+                    [e.field]: c
                   };
-                  n(r);
+                  s(d);
                 }
               }
             );
           if (e.type === "text")
             return /* @__PURE__ */ t.jsx(
-              Rt,
+              zt,
               {
-                typesText: o[e.field.type],
-                setTypesText: (s) => {
-                  const r = {
-                    ...o,
-                    [e.field.type]: s
+                typesText: n[e.field.type],
+                setTypesText: (c) => {
+                  const d = {
+                    ...n,
+                    [e.field.type]: c
                   };
-                  n(r);
+                  s(d);
                 },
-                text: o[e.field.text] || "",
-                setText: (s) => {
-                  const r = {
-                    ...o,
-                    [e.field.text]: s
+                text: n[e.field.text] || "",
+                setText: (c) => {
+                  const d = {
+                    ...n,
+                    [e.field.text]: c
                   };
-                  n(r);
+                  s(d);
                 },
                 subtitle: e.label
               }
             );
           if (e.type === "input")
             return /* @__PURE__ */ t.jsx(
-              F,
+              V,
               {
-                onChange: (s) => {
-                  const r = {
-                    ...o,
-                    [e.field]: s
+                onChange: (c) => {
+                  const d = {
+                    ...n,
+                    [e.field]: c
                   };
-                  n(r);
+                  s(d);
                 },
-                value: o[e.field] || "",
+                value: n[e.field] || "",
                 label: e.label,
                 placeholder: e.placeholder
               }
             );
           if (e.type === "inputSwitch")
-            return /* @__PURE__ */ t.jsxs("div", { className: N.link, children: [
+            return /* @__PURE__ */ t.jsxs("div", { className: C.link, children: [
               /* @__PURE__ */ t.jsx(
-                F,
+                V,
                 {
-                  onChange: (s) => {
-                    const r = {
-                      ...o,
-                      [e.field.text]: s
+                  onChange: (c) => {
+                    const d = {
+                      ...n,
+                      [e.field.text]: c
                     };
-                    n(r);
+                    s(d);
                   },
-                  value: o[e.field.text] || "",
+                  value: n[e.field.text] || "",
                   label: e.inputLabel,
                   placeholder: e.placeholder
                 }
               ),
               /* @__PURE__ */ t.jsx(
-                R,
+                z,
                 {
-                  current: !!o[e.field.switch] || !1,
+                  current: !!n[e.field.switch] || !1,
                   label: e.switchLabel,
-                  onChange: (s) => {
-                    const r = {
-                      ...o,
-                      [e.field.switch]: s
+                  onChange: (c) => {
+                    const d = {
+                      ...n,
+                      [e.field.switch]: c
                     };
-                    n(r);
+                    s(d);
                   }
                 }
               )
             ] });
           if (e.type === "list")
             return /* @__PURE__ */ t.jsx(
-              ue,
+              he,
               {
-                items: o[e.field] || [],
-                setItems: (s) => {
-                  const r = {
-                    ...o,
-                    [e.field]: s
+                items: n[e.field] || [],
+                setItems: (c) => {
+                  const d = {
+                    ...n,
+                    [e.field]: c
                   };
-                  n(r);
+                  s(d);
                 },
                 itemsType: "select",
                 draggable: e.draggable || !1,
@@ -393,117 +393,117 @@ const _t = "_accordion_2tiiw_1", mt = "_header_2tiiw_9", ht = "_icon_2tiiw_16",
             );
           if (e.type === "select")
             return /* @__PURE__ */ t.jsx(
-              V,
+              G,
               {
                 options: e.itemsOptions,
-                onChange: (s) => {
-                  const r = {
-                    ...o,
-                    [e.field]: s
+                onChange: (c) => {
+                  const d = {
+                    ...n,
+                    [e.field]: c
                   };
-                  n(r);
+                  s(d);
                 },
                 label: e.label,
-                value: o[e.field] || "String",
-                leftAddon: e.leftAddon && e.leftAddon === "icon" && /* @__PURE__ */ t.jsx(h, { name: o[e.field] })
+                value: n[e.field] || "String",
+                leftAddon: e.leftAddon && e.leftAddon === "icon" && /* @__PURE__ */ t.jsx(h, { name: n[e.field] })
               }
             );
         }) })
       ]
     }
   );
-}, ae = "_other_1wtgi_1", le = "_subtitle_1wtgi_7", re = "_items_1wtgi_14", nt = {
-  other: ae,
-  subtitle: le,
-  items: re
-}, ut = (_) => {
-  const { items: o, title: n = "Other" } = _;
-  return /* @__PURE__ */ t.jsxs("div", { className: nt.other, children: [
-    /* @__PURE__ */ t.jsx("h5", { className: nt.subtitle, children: n }),
-    /* @__PURE__ */ t.jsx("div", { className: nt.items, children: o.map((c) => /* @__PURE__ */ t.jsx(
-      R,
+}, de = "_other_1wtgi_1", ue = "_subtitle_1wtgi_7", _e = "_items_1wtgi_14", ot = {
+  other: de,
+  subtitle: ue,
+  items: _e
+}, mt = (u) => {
+  const { items: n, title: s = "Other" } = u;
+  return /* @__PURE__ */ t.jsxs("div", { className: ot.other, children: [
+    /* @__PURE__ */ t.jsx("h5", { className: ot.subtitle, children: s }),
+    /* @__PURE__ */ t.jsx("div", { className: ot.items, children: n.map((o) => /* @__PURE__ */ t.jsx(
+      z,
       {
-        current: c.isItem,
-        onChange: (i) => c.setIsItem(i),
-        label: c.label,
+        current: o.isItem,
+        onChange: (i) => o.setIsItem(i),
+        label: o.label,
         hasBackground: !0,
         paddingless: !1
       }
     )) })
   ] });
-}, de = (_) => {
-  const { index: o, moveProduct: n, children: c } = _, [, i] = lt({
+}, me = (u) => {
+  const { index: n, moveProduct: s, children: o } = u, [, i] = rt({
     accept: "product",
-    hover(s) {
-      s.index !== o && (n(s.index, o), s.index = o);
+    hover(c) {
+      c.index !== n && (s(c.index, n), c.index = n);
     }
-  }), [{ isDragging: a }, e] = rt({
+  }), [{ isDragging: a }, e] = dt({
     type: "product",
-    item: { index: o },
-    collect: (s) => ({
-      isDragging: s.isDragging()
+    item: { index: n },
+    collect: (c) => ({
+      isDragging: c.isDragging()
     })
   });
   return /* @__PURE__ */ t.jsx(
     "div",
     {
-      ref: (s) => e(i(s)),
-      className: `${N.product} ${a ? N.dragging : ""}`,
-      children: c
+      ref: (c) => e(i(c)),
+      className: `${C.product} ${a ? C.dragging : ""}`,
+      children: o
     }
   );
-}, ue = (_) => {
+}, he = (u) => {
   const {
-    isActiveItems: o,
-    setIsActiveItems: n,
-    items: c,
+    isActiveItems: n,
+    setIsActiveItems: s,
+    items: o,
     setItems: i,
     other: a,
     title: e,
-    subtitle: s,
-    editable: r = !0,
+    subtitle: c,
+    editable: d = !0,
     draggable: k = !1,
     withImage: m = !1,
-    deletable: v = !0,
-    addable: u = !0,
-    itemsType: w,
-    itemsPlaceholder: b = "",
+    deletable: f = !0,
+    addable: b = !0,
+    itemsType: $,
+    itemsPlaceholder: r = "",
     itemsOptions: g,
-    hasRangeSelector: P = !1,
-    rangeSelectorOptions: W,
-    modalOptions: Z,
-    addableOptions: G = {},
-    limit: A
-  } = _, [L, q] = p.useState(null), [et, tt] = p.useState({
+    hasRangeSelector: B = !1,
+    rangeSelectorOptions: X,
+    modalOptions: Y,
+    addableOptions: y = {},
+    limit: S
+  } = u, [q, R] = p.useState(null), [st, et] = p.useState({
     top: 0,
     left: 0
-  }), [d, f] = p.useState(!1), B = (l, I) => {
-    const T = [...c], [j] = T.splice(l, 1);
-    T.splice(I, 0, j), i(T);
+  }), [_, j] = p.useState(!1), T = (l, I) => {
+    const A = [...o], [v] = A.splice(l, 1);
+    A.splice(I, 0, v), i(A);
   };
   p.useEffect(() => {
     const l = () => {
-      q(null), f(!1);
+      R(null), j(!1);
     };
-    return document.body.addEventListener("click", l), q(null), f(!1), () => {
-      q(null), f(!1), document.body.removeEventListener("click", l);
+    return document.body.addEventListener("click", l), R(null), j(!1), () => {
+      R(null), j(!1), document.body.removeEventListener("click", l);
     };
   }, []), p.useEffect(() => {
-    if (L) {
-      const l = [...c].map((I) => I.id === L.id ? L : I);
+    if (q) {
+      const l = [...o].map((I) => I.id === q.id ? q : I);
       i(l);
     }
-  }, [L]);
-  const y = (l, I) => {
-    l.stopPropagation(), f(!0);
-    const T = l.target.getBoundingClientRect(), j = 500, U = window.innerHeight;
-    let D = T.top + window.scrollY;
-    D + j > U && (D = U - j - 20), tt({
-      top: D - 80,
-      left: T.left - 30
-    }), q(I);
+  }, [q]);
+  const N = (l, I) => {
+    l.stopPropagation(), j(!0);
+    const A = l.target.getBoundingClientRect(), v = 500, J = window.innerHeight;
+    let L = A.top + window.scrollY;
+    L + v > J && (L = J - v - 20), et({
+      top: L - 80,
+      left: A.left - 30
+    }), R(I);
   };
-  function H(l) {
+  function U(l) {
     if (m)
       return l ? /* @__PURE__ */ t.jsx(
         "img",
@@ -523,8 +523,8 @@ const _t = "_accordion_2tiiw_1", mt = "_header_2tiiw_9", ht = "_icon_2tiiw_16",
         }
       );
   }
-  const S = (l, I) => {
-    const T = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+  const O = (l, I) => {
+    const A = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       k && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
         h,
         {
@@ -534,62 +534,62 @@ const _t = "_accordion_2tiiw_1", mt = "_header_2tiiw_9", ht = "_icon_2tiiw_16",
           height: 20
         }
       ) }),
-      w === "select" && /* @__PURE__ */ t.jsx(
-        V,
+      $ === "select" && /* @__PURE__ */ t.jsx(
+        G,
         {
-          onChange: (j) => {
-            const D = [...c].map((M) => M.id === l.id ? {
+          onChange: (v) => {
+            const L = [...o].map((M) => M.id === l.id ? {
               ...l,
-              name: j
+              name: v
             } : M);
-            q({
+            R({
               ...l,
-              name: j
-            }), i([...D]);
+              name: v
+            }), i([...L]);
           },
           value: l.name,
           options: g,
-          leftAddon: H(l.images)
+          leftAddon: U(l.images)
         }
       ),
-      w === "input" && /* @__PURE__ */ t.jsx(
-        F,
+      $ === "input" && /* @__PURE__ */ t.jsx(
+        V,
         {
-          onChange: (j) => {
-            const D = [...c].map((M) => M.id === l.id ? {
+          onChange: (v) => {
+            const L = [...o].map((M) => M.id === l.id ? {
               ...l,
-              name: j
+              name: v
             } : M);
-            i([...D]);
+            i([...L]);
           },
           value: l.name,
-          placeholder: b
+          placeholder: r
         }
       ),
-      w === "image" && /* @__PURE__ */ t.jsx(
-        ot,
+      $ === "image" && /* @__PURE__ */ t.jsx(
+        ct,
         {
-          onChange: (j) => {
-            const D = [...c].map((M) => M.id === l.id ? {
+          onChange: (v) => {
+            const L = [...o].map((M) => M.id === l.id ? {
               ...l,
-              images: j
+              images: v
             } : M);
-            i([...D]);
+            i([...L]);
           }
         }
       ),
-      /* @__PURE__ */ t.jsxs("div", { className: N.buttons, children: [
-        r && /* @__PURE__ */ t.jsx(
+      /* @__PURE__ */ t.jsxs("div", { className: C.buttons, children: [
+        d && /* @__PURE__ */ t.jsx(
           h,
           {
             name: "Sliders",
             hoverable: !0,
             width: 20,
             height: 20,
-            onClick: (j) => y(j, l)
+            onClick: (v) => N(v, l)
           }
         ),
-        v && /* @__PURE__ */ t.jsx(
+        f && /* @__PURE__ */ t.jsx(
           h,
           {
             name: "Trash",
@@ -597,76 +597,76 @@ const _t = "_accordion_2tiiw_1", mt = "_header_2tiiw_9", ht = "_icon_2tiiw_16",
             width: 20,
             height: 20,
             fill: "#C12A2A",
-            onClick: () => i(c.filter((j) => j.id !== l.id))
+            onClick: () => i(o.filter((v) => v.id !== l.id))
           }
         )
       ] })
     ] });
     return k ? /* @__PURE__ */ t.jsx(
-      de,
+      me,
       {
         product: l,
         index: I,
-        moveProduct: B,
-        children: T
+        moveProduct: T,
+        children: A
       },
       l.id
     ) : /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: N.product,
-        children: T
+        className: C.product,
+        children: A
       },
       l.id
     );
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: N.productsBlock, children: [
-    (e || o !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: N.top, children: [
-      e && /* @__PURE__ */ t.jsx("h3", { className: N.title, children: e }),
-      o !== void 0 && /* @__PURE__ */ t.jsx(
-        R,
+  return /* @__PURE__ */ t.jsxs("div", { className: C.productsBlock, children: [
+    (e || n !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: C.top, children: [
+      e && /* @__PURE__ */ t.jsx("h3", { className: C.title, children: e }),
+      n !== void 0 && /* @__PURE__ */ t.jsx(
+        z,
         {
-          current: o,
-          onChange: (l) => n == null ? void 0 : n(l)
+          current: n,
+          onChange: (l) => s == null ? void 0 : s(l)
         }
       )
     ] }),
-    L && r && Z && d && /* @__PURE__ */ t.jsx(
-      ie,
+    q && d && Y && _ && /* @__PURE__ */ t.jsx(
+      re,
       {
-        activeItem: L,
-        setActiveItem: q,
-        popupPosition: et,
-        modalOptions: Z,
-        setIsOpenModal: f
+        activeItem: q,
+        setActiveItem: R,
+        popupPosition: st,
+        modalOptions: Y,
+        setIsOpenModal: j
       }
     ),
-    P && W && /* @__PURE__ */ t.jsx(hs, { ...W }),
-    /* @__PURE__ */ t.jsxs("div", { className: N.products, children: [
-      s && /* @__PURE__ */ t.jsx("h5", { className: N.subtitle, children: s }),
-      k ? /* @__PURE__ */ t.jsx(it, { backend: at, children: c.map((l, I) => S(l, I)) }) : c.map((l, I) => S(l, I)),
-      u && /* @__PURE__ */ t.jsxs(
-        Q,
+    B && X && /* @__PURE__ */ t.jsx(xs, { ...X }),
+    /* @__PURE__ */ t.jsxs("div", { className: C.products, children: [
+      c && /* @__PURE__ */ t.jsx("h5", { className: C.subtitle, children: c }),
+      k ? /* @__PURE__ */ t.jsx(at, { backend: lt, children: o.map((l, I) => O(l, I)) }) : o.map((l, I) => O(l, I)),
+      b && /* @__PURE__ */ t.jsxs(
+        tt,
         {
-          className: z(N.button, {
-            [N.disabled]: !!(A && A <= c.length)
+          className: H(C.button, {
+            [C.disabled]: !!(S && S <= o.length)
           }),
           size: "s",
-          disabled: !!(A && A <= c.length),
+          disabled: !!(S && S <= o.length),
           onClick: () => {
-            const l = [...c];
-            w === "select" ? l.push({
-              name: g[0] || `Product ${c.length + 1}`,
-              id: K(),
-              ...G
-            }) : w === "input" ? l.push({
+            const l = [...o];
+            $ === "select" ? l.push({
+              name: g[0] || `Product ${o.length + 1}`,
+              id: Z(),
+              ...y
+            }) : $ === "input" ? l.push({
               name: "",
-              id: K(),
-              ...G
+              id: Z(),
+              ...y
             }) : l.push({
-              name: `Image ${c.length + 1}`,
-              id: K(),
-              ...G
+              name: `Image ${o.length + 1}`,
+              id: Z(),
+              ...y
             }), i(l);
           },
           children: [
@@ -683,55 +683,55 @@ const _t = "_accordion_2tiiw_1", mt = "_header_2tiiw_9", ht = "_icon_2tiiw_16",
         }
       )
     ] }),
-    a !== void 0 && /* @__PURE__ */ t.jsx(ut, { items: a })
+    a !== void 0 && /* @__PURE__ */ t.jsx(mt, { items: a })
   ] });
-}, _e = "_subtitle_41klp_1", me = "_header_41klp_8", he = "_text_41klp_9", pe = "_productsBlock_41klp_10", ge = "_buttonsBlock_41klp_11", xe = "_top_41klp_21", be = "_itemsBlock_41klp_28", fe = "_typeTexts_41klp_34", je = "_block_41klp_40", ve = "_active_41klp_51", ke = "_products_41klp_10", ye = "_product_41klp_10", $e = "_button_41klp_11", Ne = "_image_41klp_79", we = "_info_41klp_86", Ie = "_name_41klp_97", Ce = "_buttons_41klp_11", Pe = "_modal_41klp_107", Be = "_other_41klp_124", Te = "_options_41klp_130", E = {
-  subtitle: _e,
-  header: me,
-  text: he,
-  productsBlock: pe,
-  buttonsBlock: ge,
-  top: xe,
-  itemsBlock: be,
-  typeTexts: fe,
-  block: je,
-  active: ve,
-  products: ke,
-  product: ye,
-  button: $e,
-  image: Ne,
-  info: we,
-  name: Ie,
-  buttons: Ce,
-  modal: Pe,
-  other: Be,
-  options: Te
-}, Ae = (_) => {
-  const { activeButton: o, setActiveButton: n, popupPosition: c } = _, [i, a] = p.useState(o.typesText), [e, s] = p.useState(o.destination), [r, k] = p.useState(o.link || ""), [m, v] = p.useState(o.text || "");
+}, pe = "_subtitle_41klp_1", ge = "_header_41klp_8", xe = "_text_41klp_9", be = "_productsBlock_41klp_10", fe = "_buttonsBlock_41klp_11", je = "_top_41klp_21", ve = "_itemsBlock_41klp_28", ke = "_typeTexts_41klp_34", ye = "_block_41klp_40", $e = "_active_41klp_51", Ne = "_products_41klp_10", we = "_product_41klp_10", Ce = "_button_41klp_11", Ie = "_image_41klp_79", Pe = "_info_41klp_86", Be = "_name_41klp_97", Te = "_buttons_41klp_11", Ae = "_modal_41klp_107", Se = "_other_41klp_124", Oe = "_options_41klp_130", F = {
+  subtitle: pe,
+  header: ge,
+  text: xe,
+  productsBlock: be,
+  buttonsBlock: fe,
+  top: je,
+  itemsBlock: ve,
+  typeTexts: ke,
+  block: ye,
+  active: $e,
+  products: Ne,
+  product: we,
+  button: Ce,
+  image: Ie,
+  info: Pe,
+  name: Be,
+  buttons: Te,
+  modal: Ae,
+  other: Se,
+  options: Oe
+}, De = (u) => {
+  const { activeButton: n, setActiveButton: s, popupPosition: o } = u, [i, a] = p.useState(n.typesText), [e, c] = p.useState(n.destination), [d, k] = p.useState(n.link || ""), [m, f] = p.useState(n.text || "");
   return p.useEffect(() => {
-    n({
-      ...o,
+    s({
+      ...n,
       ...{
         text: m,
-        link: r,
+        link: d,
         destination: e,
         typesText: i
       }
     });
-  }, [i, e, r, m]), /* @__PURE__ */ t.jsxs(
+  }, [i, e, d, m]), /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: E.modal,
-      onClick: (u) => {
-        u.stopPropagation();
+      className: F.modal,
+      onClick: (b) => {
+        b.stopPropagation();
       },
       style: {
-        top: `${c.top}px`,
-        left: `${c.left}px`
+        top: `${o.top}px`,
+        left: `${o.left}px`
       },
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: E.top, children: [
-          /* @__PURE__ */ t.jsx("h3", { children: o.type }),
+        /* @__PURE__ */ t.jsxs("div", { className: F.top, children: [
+          /* @__PURE__ */ t.jsx("h3", { children: n.type }),
           /* @__PURE__ */ t.jsx(
             h,
             {
@@ -739,22 +739,22 @@ const _t = "_accordion_2tiiw_1", mt = "_header_2tiiw_9", ht = "_icon_2tiiw_16",
               height: 20,
               width: 20,
               hoverable: !0,
-              onClick: () => n(null)
+              onClick: () => s(null)
             }
           )
         ] }),
-        /* @__PURE__ */ t.jsxs("div", { className: E.options, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: F.options, children: [
           /* @__PURE__ */ t.jsx(
-            V,
+            G,
             {
               label: "Destination",
-              onChange: (u) => s(u),
+              onChange: (b) => c(b),
               options: ["Go to Page", "Open Link"],
               value: e
             }
           ),
           e === "Go to Page" ? /* @__PURE__ */ t.jsx(
-            V,
+            G,
             {
               label: "Go to",
               onChange: () => {
@@ -763,32 +763,32 @@ const _t = "_accordion_2tiiw_1", mt = "_header_2tiiw_9", ht = "_icon_2tiiw_16",
               value: "Homepage"
             }
           ) : /* @__PURE__ */ t.jsx(
-            F,
+            V,
             {
-              onChange: (u) => k(u),
-              value: r,
+              onChange: (b) => k(b),
+              value: d,
               placeholder: "https://",
               label: "Link"
             }
           ),
           /* @__PURE__ */ t.jsx(
-            R,
+            z,
             {
               current: !1,
               label: "Open in new tab"
             }
           ),
           /* @__PURE__ */ t.jsx(
-            ct,
+            it,
             {
-              onChange: (u) => v(u),
+              onChange: (b) => f(b),
               value: m,
               label: "Text",
               maxLength: 150
             }
           ),
           /* @__PURE__ */ t.jsx(
-            dt,
+            _t,
             {
               typesText: i,
               setTypesText: a
@@ -798,29 +798,29 @@ const _t = "_accordion_2tiiw_1", mt = "_header_2tiiw_9", ht = "_icon_2tiiw_16",
       ]
     }
   );
-}, Se = "_subtitle_1y5sw_1", Oe = "_header_1y5sw_8", De = "_text_1y5sw_9", Le = "_productsBlock_1y5sw_10", qe = "_buttonsBlock_1y5sw_11", Me = "_top_1y5sw_22", Re = "_itemsBlock_1y5sw_29", He = "_typeTexts_1y5sw_35", Ee = "_block_1y5sw_41", ze = "_active_1y5sw_52", Fe = "_products_1y5sw_10", Ve = "_product_1y5sw_10", Ge = "_button_1y5sw_11", Ue = "_image_1y5sw_80", Xe = "_info_1y5sw_87", Ye = "_name_1y5sw_98", Je = "_buttons_1y5sw_11", Ke = "_modal_1y5sw_108", Qe = "_other_1y5sw_125", We = "_options_1y5sw_131", J = {
-  subtitle: Se,
-  header: Oe,
-  text: De,
-  productsBlock: Le,
-  buttonsBlock: qe,
-  top: Me,
-  itemsBlock: Re,
-  typeTexts: He,
-  block: Ee,
-  active: ze,
-  products: Fe,
-  product: Ve,
-  button: Ge,
-  image: Ue,
-  info: Xe,
-  name: Ye,
-  buttons: Je,
-  modal: Ke,
-  other: Qe,
-  options: We
-}, Ze = (_) => {
-  const { buttons: o, setButtons: n, deletable: c = !0, addable: i = !0 } = _, [a, e] = p.useState(null), [s, r] = p.useState({
+}, Le = "_subtitle_1y5sw_1", qe = "_header_1y5sw_8", Re = "_text_1y5sw_9", Me = "_productsBlock_1y5sw_10", He = "_buttonsBlock_1y5sw_11", Ee = "_top_1y5sw_22", ze = "_itemsBlock_1y5sw_29", Ue = "_typeTexts_1y5sw_35", Fe = "_block_1y5sw_41", Ve = "_active_1y5sw_52", Ge = "_products_1y5sw_10", Xe = "_product_1y5sw_10", Ye = "_button_1y5sw_11", Je = "_image_1y5sw_80", Ke = "_info_1y5sw_87", Qe = "_name_1y5sw_98", We = "_buttons_1y5sw_11", Ze = "_modal_1y5sw_108", ts = "_other_1y5sw_125", es = "_options_1y5sw_131", W = {
+  subtitle: Le,
+  header: qe,
+  text: Re,
+  productsBlock: Me,
+  buttonsBlock: He,
+  top: Ee,
+  itemsBlock: ze,
+  typeTexts: Ue,
+  block: Fe,
+  active: Ve,
+  products: Ge,
+  product: Xe,
+  button: Ye,
+  image: Je,
+  info: Ke,
+  name: Qe,
+  buttons: We,
+  modal: Ze,
+  other: ts,
+  options: es
+}, ss = (u) => {
+  const { buttons: n, setButtons: s, deletable: o = !0, addable: i = !0 } = u, [a, e] = p.useState(null), [c, d] = p.useState({
     top: 0,
     left: 0
   });
@@ -833,41 +833,41 @@ const _t = "_accordion_2tiiw_1", mt = "_header_2tiiw_9", ht = "_icon_2tiiw_16",
     };
   }, []), p.useEffect(() => {
     if (a) {
-      const m = [...o].map((v) => v.id === a.id ? a : v);
-      n(m);
+      const m = [...n].map((f) => f.id === a.id ? a : f);
+      s(m);
     }
   }, [a]);
-  const k = (m, v) => {
+  const k = (m, f) => {
     m.stopPropagation();
-    const u = m.target.getBoundingClientRect(), w = 490, b = window.innerHeight;
-    let g = u.top + window.scrollY;
-    g + w > b && (g = b - w - 20), r({
+    const b = m.target.getBoundingClientRect(), $ = 490, r = window.innerHeight;
+    let g = b.top + window.scrollY;
+    g + $ > r && (g = r - $ - 20), d({
       top: g,
-      left: u.left - 30
-    }), e(v);
+      left: b.left - 30
+    }), e(f);
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: J.products, children: [
-    /* @__PURE__ */ t.jsx("h5", { className: J.subtitle, children: "Button Type" }),
-    o.map((m) => /* @__PURE__ */ t.jsxs(
+  return /* @__PURE__ */ t.jsxs("div", { className: W.products, children: [
+    /* @__PURE__ */ t.jsx("h5", { className: W.subtitle, children: "Button Type" }),
+    n.map((m) => /* @__PURE__ */ t.jsxs(
       "div",
       {
-        className: J.product,
+        className: W.product,
         children: [
           /* @__PURE__ */ t.jsx(
-            V,
+            G,
             {
-              onChange: (v) => {
-                const w = [...o].map((b) => b.id === m.id ? {
+              onChange: (f) => {
+                const $ = [...n].map((r) => r.id === m.id ? {
                   ...m,
-                  type: v
-                } : b);
-                n(w);
+                  type: f
+                } : r);
+                s($);
               },
               value: m.type,
               options: ["Primary", "Secondary", "Tertiary"]
             }
           ),
-          /* @__PURE__ */ t.jsxs("div", { className: J.buttons, children: [
+          /* @__PURE__ */ t.jsxs("div", { className: W.buttons, children: [
             /* @__PURE__ */ t.jsx(
               h,
               {
@@ -875,19 +875,19 @@ const _t = "_accordion_2tiiw_1", mt = "_header_2tiiw_9", ht = "_icon_2tiiw_16",
                 hoverable: !0,
                 width: 20,
                 height: 20,
-                onClick: (v) => {
-                  k(v, m);
+                onClick: (f) => {
+                  k(f, m);
                 }
               }
             ),
-            c && /* @__PURE__ */ t.jsx(
+            o && /* @__PURE__ */ t.jsx(
               h,
               {
                 name: "Trash",
                 hoverable: !0,
                 onClick: () => {
-                  const v = o.filter((u) => u.id !== m.id);
-                  n(v);
+                  const f = n.filter((b) => b.id !== m.id);
+                  s(f);
                 },
                 width: 20,
                 height: 20,
@@ -900,27 +900,27 @@ const _t = "_accordion_2tiiw_1", mt = "_header_2tiiw_9", ht = "_icon_2tiiw_16",
       m.id
     )),
     a && /* @__PURE__ */ t.jsx(
-      Ae,
+      De,
       {
         activeButton: a,
         setActiveButton: e,
-        popupPosition: s
+        popupPosition: c
       }
     ),
     i && /* @__PURE__ */ t.jsxs(
-      Q,
+      tt,
       {
-        className: J.button,
+        className: W.button,
         size: "s",
         onClick: () => {
-          const m = [...o];
+          const m = [...n];
           m.push({
             type: "Primary",
-            id: K(),
+            id: Z(),
             typesText: [],
             destination: "Go to Page",
             text: ""
-          }), n(m);
+          }), s(m);
         },
         children: [
           /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
@@ -936,75 +936,75 @@ const _t = "_accordion_2tiiw_1", mt = "_header_2tiiw_9", ht = "_icon_2tiiw_16",
       }
     )
   ] });
-}, cn = (_) => {
-  const { isActiveButtons: o, setIsActiveButtons: n, buttons: c, setButtons: i } = _;
-  return /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsxs("div", { className: E.buttonsBlock, children: [
-    /* @__PURE__ */ t.jsxs("div", { className: E.top, children: [
-      /* @__PURE__ */ t.jsx("h3", { className: E.title, children: "Buttons" }),
+}, mn = (u) => {
+  const { isActiveButtons: n, setIsActiveButtons: s, buttons: o, setButtons: i } = u;
+  return /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsxs("div", { className: F.buttonsBlock, children: [
+    /* @__PURE__ */ t.jsxs("div", { className: F.top, children: [
+      /* @__PURE__ */ t.jsx("h3", { className: F.title, children: "Buttons" }),
       /* @__PURE__ */ t.jsx(
-        R,
+        z,
         {
-          current: o,
-          onChange: (a) => n(a)
+          current: n,
+          onChange: (a) => s(a)
         }
       )
     ] }),
     /* @__PURE__ */ t.jsx(
-      Ze,
+      ss,
       {
-        buttons: c,
+        buttons: o,
         setButtons: i
       }
     )
   ] }) });
-}, ts = "_wrapper_tn7gb_1", es = "_subtitle_tn7gb_7", ss = "_content_tn7gb_14", ns = "_range_tn7gb_21", os = "_track_tn7gb_26", cs = "_progress_tn7gb_35", is = "_dots_tn7gb_45", as = "_dot_tn7gb_45", ls = "_active_tn7gb_62", rs = "_input_tn7gb_74", ds = "_countBlock_tn7gb_88", us = "_count_tn7gb_88", _s = "_controls_tn7gb_103", ms = "_button_tn7gb_108", $ = {
-  wrapper: ts,
-  subtitle: es,
-  content: ss,
-  range: ns,
-  track: os,
-  progress: cs,
-  dots: is,
-  dot: as,
-  active: ls,
-  input: rs,
-  countBlock: ds,
-  count: us,
-  controls: _s,
-  button: ms
-}, hs = (_) => {
-  const { label: o, min: n = 1, max: c = 4, step: i = 1, count: a, setCount: e } = _, [s, r] = p.useState(!1), k = Array.from({ length: (c - n) / i + 1 }), m = (a - n) / (c - n) * 100, v = () => {
-    a < c && e(a + i);
-  }, u = () => {
-    a > n && e(a - i);
-  }, w = (b) => {
-    const g = n + b * i;
+}, ns = "_wrapper_tn7gb_1", os = "_subtitle_tn7gb_7", cs = "_content_tn7gb_14", is = "_range_tn7gb_21", as = "_track_tn7gb_26", ls = "_progress_tn7gb_35", rs = "_dots_tn7gb_45", ds = "_dot_tn7gb_45", us = "_active_tn7gb_62", _s = "_input_tn7gb_74", ms = "_countBlock_tn7gb_88", hs = "_count_tn7gb_88", ps = "_controls_tn7gb_103", gs = "_button_tn7gb_108", w = {
+  wrapper: ns,
+  subtitle: os,
+  content: cs,
+  range: is,
+  track: as,
+  progress: ls,
+  dots: rs,
+  dot: ds,
+  active: us,
+  input: _s,
+  countBlock: ms,
+  count: hs,
+  controls: ps,
+  button: gs
+}, xs = (u) => {
+  const { label: n, min: s = 1, max: o = 4, step: i = 1, count: a, setCount: e } = u, [c, d] = p.useState(!1), k = Array.from({ length: (o - s) / i + 1 }), m = (a - s) / (o - s) * 100, f = () => {
+    a < o && e(a + i);
+  }, b = () => {
+    a > s && e(a - i);
+  }, $ = (r) => {
+    const g = s + r * i;
     e(g);
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: $.wrapper, children: [
-    o && /* @__PURE__ */ t.jsx("h5", { className: $.subtitle, children: o }),
-    /* @__PURE__ */ t.jsxs("div", { className: $.content, children: [
-      /* @__PURE__ */ t.jsxs("div", { className: $.range, children: [
-        /* @__PURE__ */ t.jsx("div", { className: $.track }),
+  return /* @__PURE__ */ t.jsxs("div", { className: w.wrapper, children: [
+    n && /* @__PURE__ */ t.jsx("h5", { className: w.subtitle, children: n }),
+    /* @__PURE__ */ t.jsxs("div", { className: w.content, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: w.range, children: [
+        /* @__PURE__ */ t.jsx("div", { className: w.track }),
         /* @__PURE__ */ t.jsx(
           "div",
           {
-            className: $.progress,
+            className: w.progress,
             style: { width: `${m}%` }
           }
         ),
-        /* @__PURE__ */ t.jsx("div", { className: $.dots, children: k.map((b, g) => {
-          const P = g <= (a - n) / i;
+        /* @__PURE__ */ t.jsx("div", { className: w.dots, children: k.map((r, g) => {
+          const B = g <= (a - s) / i;
           return /* @__PURE__ */ t.jsx(
             "button",
             {
-              onClick: () => w(g),
-              className: z($.dot, {
-                [$.active]: P,
-                [$.inactive]: !P,
-                [$.dragging]: s
+              onClick: () => $(g),
+              className: H(w.dot, {
+                [w.active]: B,
+                [w.inactive]: !B,
+                [w.dragging]: c
               }),
-              "aria-label": `Set value to ${n + g * i}`
+              "aria-label": `Set value to ${s + g * i}`
             },
             g
           );
@@ -1013,41 +1013,41 @@ const _t = "_accordion_2tiiw_1", mt = "_header_2tiiw_9", ht = "_icon_2tiiw_16",
           "input",
           {
             type: "range",
-            min: n,
-            max: c,
+            min: s,
+            max: o,
             step: i,
             value: a,
-            onChange: (b) => e(Number(b.target.value)),
-            onMouseDown: () => r(!0),
-            onMouseUp: () => r(!1),
-            onTouchStart: () => r(!0),
-            onTouchEnd: () => r(!1),
-            className: $.input
+            onChange: (r) => e(Number(r.target.value)),
+            onMouseDown: () => d(!0),
+            onMouseUp: () => d(!1),
+            onTouchStart: () => d(!0),
+            onTouchEnd: () => d(!1),
+            className: w.input
           }
         )
       ] }),
-      /* @__PURE__ */ t.jsxs("div", { className: $.countBlock, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: w.countBlock, children: [
         /* @__PURE__ */ t.jsx(
-          F,
+          V,
           {
             type: "number",
-            min: n,
-            max: c,
+            min: s,
+            max: o,
             paddingless: !0,
-            onChange: (b) => {
-              const g = Number(b);
-              g > c ? e(c) : g < n ? e(n) : e(g);
+            onChange: (r) => {
+              const g = Number(r);
+              g > o ? e(o) : g < s ? e(s) : e(g);
             },
             value: String(a)
           }
         ),
-        /* @__PURE__ */ t.jsxs("div", { className: $.controls, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: w.controls, children: [
           /* @__PURE__ */ t.jsx(
             "button",
             {
-              onClick: v,
-              disabled: a >= c,
-              className: $.button,
+              onClick: f,
+              disabled: a >= o,
+              className: w.button,
               "aria-label": "Increment count",
               children: /* @__PURE__ */ t.jsx(
                 h,
@@ -1062,9 +1062,9 @@ const _t = "_accordion_2tiiw_1", mt = "_header_2tiiw_9", ht = "_icon_2tiiw_16",
           /* @__PURE__ */ t.jsx(
             "button",
             {
-              onClick: u,
-              disabled: a <= n,
-              className: $.button,
+              onClick: b,
+              disabled: a <= s,
+              className: w.button,
               "aria-label": "Decrement count",
               children: /* @__PURE__ */ t.jsx(
                 h,
@@ -1080,42 +1080,42 @@ const _t = "_accordion_2tiiw_1", mt = "_header_2tiiw_9", ht = "_icon_2tiiw_16",
       ] })
     ] })
   ] });
-}, ps = "_subtitle_1nl8x_1", gs = "_header_1nl8x_8", xs = "_text_1nl8x_9", bs = "_productsBlock_1nl8x_10", fs = "_top_1nl8x_22", js = "_itemsBlock_1nl8x_29", vs = "_typeTexts_1nl8x_35", ks = "_block_1nl8x_41", ys = "_active_1nl8x_52", $s = "_products_1nl8x_10", Ns = "_product_1nl8x_10", ws = "_button_1nl8x_70", Is = "_image_1nl8x_80", Cs = "_info_1nl8x_87", Ps = "_name_1nl8x_98", Bs = "_buttons_1nl8x_102", Ts = "_modal_1nl8x_108", As = "_link_1nl8x_126", Ss = "_modalOptions_1nl8x_132", C = {
-  subtitle: ps,
-  header: gs,
-  text: xs,
-  productsBlock: bs,
-  top: fs,
-  itemsBlock: js,
-  typeTexts: vs,
-  block: ks,
-  active: ys,
-  products: $s,
-  product: Ns,
-  button: ws,
-  image: Is,
-  info: Cs,
-  name: Ps,
-  buttons: Bs,
-  modal: Ts,
-  link: As,
-  modalOptions: Ss
-}, Os = (_) => {
-  const { activeItem: o, setActiveItem: n, popupPosition: c, setIsOpenModal: i } = _;
+}, bs = "_subtitle_1nl8x_1", fs = "_header_1nl8x_8", js = "_text_1nl8x_9", vs = "_productsBlock_1nl8x_10", ks = "_top_1nl8x_22", ys = "_itemsBlock_1nl8x_29", $s = "_typeTexts_1nl8x_35", Ns = "_block_1nl8x_41", ws = "_active_1nl8x_52", Cs = "_products_1nl8x_10", Is = "_product_1nl8x_10", Ps = "_button_1nl8x_70", Bs = "_image_1nl8x_80", Ts = "_info_1nl8x_87", As = "_name_1nl8x_98", Ss = "_buttons_1nl8x_102", Os = "_modal_1nl8x_108", Ds = "_link_1nl8x_126", Ls = "_modalOptions_1nl8x_132", P = {
+  subtitle: bs,
+  header: fs,
+  text: js,
+  productsBlock: vs,
+  top: ks,
+  itemsBlock: ys,
+  typeTexts: $s,
+  block: Ns,
+  active: ws,
+  products: Cs,
+  product: Is,
+  button: Ps,
+  image: Bs,
+  info: Ts,
+  name: As,
+  buttons: Ss,
+  modal: Os,
+  link: Ds,
+  modalOptions: Ls
+}, qs = (u) => {
+  const { activeItem: n, setActiveItem: s, popupPosition: o, setIsOpenModal: i } = u;
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: C.modal,
+      className: P.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: C.top, children: [
-          /* @__PURE__ */ t.jsx("h3", { children: o.name }),
+        /* @__PURE__ */ t.jsxs("div", { className: P.top, children: [
+          /* @__PURE__ */ t.jsx("h3", { children: n.name }),
           /* @__PURE__ */ t.jsx(
             h,
             {
@@ -1124,100 +1124,100 @@ const _t = "_accordion_2tiiw_1", mt = "_header_2tiiw_9", ht = "_icon_2tiiw_16",
               width: 20,
               hoverable: !0,
               onClick: () => {
-                i(!1), n(null);
+                i(!1), s(null);
               }
             }
           )
         ] }),
-        /* @__PURE__ */ t.jsx("div", { className: C.modalOptions, children: /* @__PURE__ */ t.jsx(
-          ot,
+        /* @__PURE__ */ t.jsx("div", { className: P.modalOptions, children: /* @__PURE__ */ t.jsx(
+          ct,
           {
             label: "Put up an attractive image",
             onChange: (a) => {
               const e = {
-                ...o,
+                ...n,
                 images: a,
                 imagePath: a[0]
               };
-              n(e);
+              s(e);
             }
           }
         ) })
       ]
     }
   );
-}, Ds = (_) => {
-  const { index: o, moveProduct: n, children: c } = _, [, i] = lt({
+}, Rs = (u) => {
+  const { index: n, moveProduct: s, children: o } = u, [, i] = rt({
     accept: "product",
-    hover(s) {
-      s.index !== o && (n(s.index, o), s.index = o);
+    hover(c) {
+      c.index !== n && (s(c.index, n), c.index = n);
     }
-  }), [{ isDragging: a }, e] = rt({
+  }), [{ isDragging: a }, e] = dt({
     type: "product",
-    item: { index: o },
-    collect: (s) => ({
-      isDragging: s.isDragging()
+    item: { index: n },
+    collect: (c) => ({
+      isDragging: c.isDragging()
     })
   });
   return /* @__PURE__ */ t.jsx(
     "div",
     {
-      ref: (s) => e(i(s)),
-      className: `${C.product} ${a ? C.dragging : ""}`,
-      children: c
+      ref: (c) => e(i(c)),
+      className: `${P.product} ${a ? P.dragging : ""}`,
+      children: o
     }
   );
-}, an = (_) => {
+}, hn = (u) => {
   const {
-    isActiveItems: o,
-    setIsActiveItems: n,
-    items: c,
+    isActiveItems: n,
+    setIsActiveItems: s,
+    items: o,
     setItems: i,
     other: a,
     title: e,
-    subtitle: s,
-    editable: r = !0,
+    subtitle: c,
+    editable: d = !0,
     draggable: k = !1,
     withImage: m = !1,
-    deletable: v = !0,
-    addable: u = !0,
-    itemsType: w,
-    itemsOptions: b
-  } = _, [g, P] = p.useState(null), [W, Z] = p.useState({
+    deletable: f = !0,
+    addable: b = !0,
+    itemsType: $,
+    itemsOptions: r
+  } = u, [g, B] = p.useState(null), [X, Y] = p.useState({
     top: 0,
     left: 0
-  }), [G, A] = p.useState(!1), L = (d, f) => {
-    const B = [...c], [y] = B.splice(d, 1);
-    B.splice(f, 0, y), i(B);
+  }), [y, S] = p.useState(!1), q = (_, j) => {
+    const T = [...o], [N] = T.splice(_, 1);
+    T.splice(j, 0, N), i(T);
   };
   p.useEffect(() => {
-    const d = () => {
-      P(null), A(!1);
+    const _ = () => {
+      B(null), S(!1);
     };
-    return document.body.addEventListener("click", d), P(null), A(!1), () => {
-      P(null), A(!1), document.body.removeEventListener("click", d);
+    return document.body.addEventListener("click", _), B(null), S(!1), () => {
+      B(null), S(!1), document.body.removeEventListener("click", _);
     };
   }, []), p.useEffect(() => {
     if (g) {
-      const d = [...c].map((f) => f.id === g.id ? g : f);
-      i(d);
+      const _ = [...o].map((j) => j.id === g.id ? g : j);
+      i(_);
     }
   }, [g]);
-  const q = (d, f) => {
-    d.stopPropagation();
-    const B = d.target.getBoundingClientRect(), y = 100, H = window.innerHeight;
-    let S = B.top + window.scrollY;
-    S + y > H && (S = H - y - 20), A(!0), Z({
-      top: S - 80,
-      left: B.left - 30
-    }), P(f);
+  const R = (_, j) => {
+    _.stopPropagation();
+    const T = _.target.getBoundingClientRect(), N = 100, U = window.innerHeight;
+    let O = T.top + window.scrollY;
+    O + N > U && (O = U - N - 20), S(!0), Y({
+      top: O - 80,
+      left: T.left - 30
+    }), B(j);
   };
-  function et(d) {
+  function st(_) {
     if (m)
-      return d ? /* @__PURE__ */ t.jsx(
+      return _ ? /* @__PURE__ */ t.jsx(
         "img",
         {
-          src: `https://imagedelivery.net/${d}/w=1000`,
+          src: `https://imagedelivery.net/${_}/w=1000`,
           alt: "image",
           width: 16,
           height: 16
@@ -1232,8 +1232,8 @@ const _t = "_accordion_2tiiw_1", mt = "_header_2tiiw_9", ht = "_icon_2tiiw_16",
         }
       );
   }
-  const tt = (d, f) => {
-    const B = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+  const et = (_, j) => {
+    const T = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       k && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
         h,
         {
@@ -1243,45 +1243,45 @@ const _t = "_accordion_2tiiw_1", mt = "_header_2tiiw_9", ht = "_icon_2tiiw_16",
           height: 20
         }
       ) }),
-      w === "select" && /* @__PURE__ */ t.jsx(
-        V,
+      $ === "select" && /* @__PURE__ */ t.jsx(
+        G,
         {
-          onChange: (y) => {
-            const H = [...c], S = Number(y.split(" ")[1]), l = b.find((j) => j.id === S);
+          onChange: (N) => {
+            const U = [...o], O = Number(N.split(" ")[1]), l = r.find((v) => v.id === O);
             if (!l) return;
             const I = {
               ...l.productData.stats,
               newPrice: l.productData.minPrice.amount,
               oldPrice: l.productData.compareAtPrice.amount
-            }, T = H.map((j) => j.id === d.id ? {
-              ...d,
-              name: y,
-              listingId: S,
+            }, A = U.map((v) => v.id === _.id ? {
+              ..._,
+              name: N,
+              listingId: O,
               stats: I
-            } : j);
-            P({
-              ...d,
-              name: y,
-              listingId: S
-            }), i([...T]);
+            } : v);
+            B({
+              ..._,
+              name: N,
+              listingId: O
+            }), i([...A]);
           },
-          value: d.name,
-          options: [...b.map((y) => `Product ${y.id}`)],
-          leftAddon: et(d.images[0])
+          value: _.name,
+          options: [...r.map((N) => `Product ${N.id}`)],
+          leftAddon: st(_.images[0])
         }
       ),
-      /* @__PURE__ */ t.jsxs("div", { className: C.buttons, children: [
-        r && /* @__PURE__ */ t.jsx(
+      /* @__PURE__ */ t.jsxs("div", { className: P.buttons, children: [
+        d && /* @__PURE__ */ t.jsx(
           h,
           {
             name: "Sliders",
             hoverable: !0,
             width: 20,
             height: 20,
-            onClick: (y) => q(y, d)
+            onClick: (N) => R(N, _)
           }
         ),
-        v && /* @__PURE__ */ t.jsx(
+        f && /* @__PURE__ */ t.jsx(
           h,
           {
             name: "Trash",
@@ -1289,71 +1289,71 @@ const _t = "_accordion_2tiiw_1", mt = "_header_2tiiw_9", ht = "_icon_2tiiw_16",
             width: 20,
             height: 20,
             fill: "#C12A2A",
-            onClick: () => i(c.filter((y) => y.id !== d.id))
+            onClick: () => i(o.filter((N) => N.id !== _.id))
           }
         )
       ] })
     ] });
     return k ? /* @__PURE__ */ t.jsx(
-      Ds,
+      Rs,
       {
-        product: d,
-        index: f,
-        moveProduct: L,
-        children: B
+        product: _,
+        index: j,
+        moveProduct: q,
+        children: T
       },
-      d.id
+      _.id
     ) : /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: C.product,
-        children: B
+        className: P.product,
+        children: T
       },
-      d.id
+      _.id
     );
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: C.productsBlock, children: [
-    (e || o !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: C.top, children: [
-      e && /* @__PURE__ */ t.jsx("h3", { className: C.title, children: e }),
-      o !== void 0 && /* @__PURE__ */ t.jsx(
-        R,
+  return /* @__PURE__ */ t.jsxs("div", { className: P.productsBlock, children: [
+    (e || n !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: P.top, children: [
+      e && /* @__PURE__ */ t.jsx("h3", { className: P.title, children: e }),
+      n !== void 0 && /* @__PURE__ */ t.jsx(
+        z,
         {
-          current: o,
-          onChange: (d) => n == null ? void 0 : n(d)
+          current: n,
+          onChange: (_) => s == null ? void 0 : s(_)
         }
       )
     ] }),
-    G && g && /* @__PURE__ */ t.jsx(
-      Os,
+    y && g && /* @__PURE__ */ t.jsx(
+      qs,
       {
         activeItem: g,
-        setActiveItem: P,
-        setIsOpenModal: A,
-        popupPosition: W
+        setActiveItem: B,
+        setIsOpenModal: S,
+        popupPosition: X
       }
     ),
-    /* @__PURE__ */ t.jsxs("div", { className: C.products, children: [
-      s && /* @__PURE__ */ t.jsx("h5", { className: C.subtitle, children: s }),
-      k ? /* @__PURE__ */ t.jsx(it, { backend: at, children: c.map((d, f) => tt(d, f)) }) : c.map((d, f) => tt(d, f)),
-      u && /* @__PURE__ */ t.jsxs(
-        Q,
+    /* @__PURE__ */ t.jsxs("div", { className: P.products, children: [
+      c && /* @__PURE__ */ t.jsx("h5", { className: P.subtitle, children: c }),
+      k ? /* @__PURE__ */ t.jsx(at, { backend: lt, children: o.map((_, j) => et(_, j)) }) : o.map((_, j) => et(_, j)),
+      b && /* @__PURE__ */ t.jsxs(
+        tt,
         {
-          className: C.button,
+          className: P.button,
           size: "s",
           onClick: () => {
-            const d = [...c], f = b[0].id;
-            d.push({
-              name: `Product ${f}`,
-              id: K(),
-              listingId: f,
+            const _ = [...o], j = r[0].id;
+            _.push({
+              name: `Product ${j}`,
+              id: Z(),
+              listingId: j,
               imagePath: "",
               images: [],
               stats: {
-                ...b[0].productData.stats,
-                newPrice: b[0].productData.minPrice.amount,
-                oldPrice: b[0].productData.compareAtPrice.amount
+                ...r[0].productData.stats,
+                newPrice: r[0].productData.minPrice.amount,
+                oldPrice: r[0].productData.compareAtPrice.amount
               }
-            }), i(d);
+            }), i(_);
           },
           children: [
             /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
@@ -1369,64 +1369,79 @@ const _t = "_accordion_2tiiw_1", mt = "_header_2tiiw_9", ht = "_icon_2tiiw_16",
         }
       )
     ] }),
-    a !== void 0 && /* @__PURE__ */ t.jsx(ut, { items: a })
+    a !== void 0 && /* @__PURE__ */ t.jsx(mt, { items: a })
   ] });
-}, Ls = "_options_163bj_1", qs = "_price_163bj_12", Ms = "_oldPrice_163bj_18", Rs = "_newPrice_163bj_26", Hs = "_meta_163bj_33", Es = "_info_163bj_39", zs = "_infoRight_163bj_46", Fs = "_buttons_163bj_52", Vs = "_variants_163bj_59", Gs = "_variant_163bj_59", Us = "_stock_163bj_74", Xs = "_variantInfo_163bj_81", Ys = "_quantity_163bj_87", Js = "_count_163bj_93", Ks = "_button_163bj_52", Qs = "_activeVariant_163bj_110", Ws = "_chargeTypes_163bj_114", Zs = "_charge_163bj_114", tn = "_chargeActive_163bj_131", x = {
-  options: Ls,
-  price: qs,
-  oldPrice: Ms,
-  newPrice: Rs,
-  meta: Hs,
-  info: Es,
-  infoRight: zs,
-  buttons: Fs,
-  variants: Vs,
-  variant: Gs,
-  stock: Us,
-  variantInfo: Xs,
-  quantity: Ys,
-  count: Js,
-  button: Ks,
-  activeVariant: Qs,
-  chargeTypes: Ws,
-  charge: Zs,
-  chargeActive: tn
-}, ln = (_) => {
-  const { variants: o } = _, [n, c] = p.useState(o[0]), [i, a] = p.useState(1);
-  function e(s) {
-    if (s >= 864e5) {
-      const u = Math.floor(s / 864e5);
-      return `${u} ${u === 1 ? "day" : "days"}`;
-    } else if (s >= 36e5) {
-      const u = Math.floor(s / 36e5);
-      return `${u} ${u === 1 ? "hour" : "hours"}`;
-    } else if (s >= 6e4) {
-      const u = Math.floor(s / 6e4);
-      return `${u} ${u === 1 ? "minute" : "minutes"}`;
+}, Ms = "_options_163bj_1", Hs = "_price_163bj_12", Es = "_oldPrice_163bj_18", zs = "_newPrice_163bj_26", Us = "_meta_163bj_33", Fs = "_info_163bj_39", Vs = "_infoRight_163bj_46", Gs = "_buttons_163bj_52", Xs = "_variants_163bj_59", Ys = "_variant_163bj_59", Js = "_stock_163bj_74", Ks = "_variantInfo_163bj_81", Qs = "_quantity_163bj_87", Ws = "_count_163bj_93", Zs = "_button_163bj_52", tn = "_activeVariant_163bj_110", en = "_chargeTypes_163bj_114", sn = "_charge_163bj_114", nn = "_chargeActive_163bj_131", x = {
+  options: Ms,
+  price: Hs,
+  oldPrice: Es,
+  newPrice: zs,
+  meta: Us,
+  info: Fs,
+  infoRight: Vs,
+  buttons: Gs,
+  variants: Xs,
+  variant: Ys,
+  stock: Js,
+  variantInfo: Ks,
+  quantity: Qs,
+  count: Ws,
+  button: Zs,
+  activeVariant: tn,
+  chargeTypes: en,
+  charge: sn,
+  chargeActive: nn
+}, pn = (u) => {
+  const { variants: n } = u, [s, o] = p.useState(n[0]), i = ut(), [a, e] = p.useState(1), { reset: c, addProductToCart: d, cart: k, getPages: m } = ht();
+  function f() {
+    if (k.parts.length === 0) {
+      const r = encodeURIComponent("product/subscription-test");
+      m(r).then(() => {
+        console.log(u.id, s.id, a), d({
+          productId: u.id,
+          productVariantId: s.id,
+          quantity: a
+        });
+      });
+    }
+  }
+  function b() {
+    c(), f(), i("/checkout");
+  }
+  function $(r) {
+    if (r >= 864e5) {
+      const y = Math.floor(r / 864e5);
+      return `${y} ${y === 1 ? "day" : "days"}`;
+    } else if (r >= 36e5) {
+      const y = Math.floor(r / 36e5);
+      return `${y} ${y === 1 ? "hour" : "hours"}`;
+    } else if (r >= 6e4) {
+      const y = Math.floor(r / 6e4);
+      return `${y} ${y === 1 ? "minute" : "minutes"}`;
     } else {
-      const u = Math.floor(s / 1e3);
-      return `${u} ${u === 1 ? "second" : "seconds"}`;
+      const y = Math.floor(r / 1e3);
+      return `${y} ${y === 1 ? "second" : "seconds"}`;
     }
   }
   return /* @__PURE__ */ t.jsxs("div", { className: x.options, children: [
-    /* @__PURE__ */ t.jsx("div", { className: x.chargeTypes, children: n.chargeTypes ? n.chargeTypes.map((s) => /* @__PURE__ */ t.jsx("div", { children: s })) : /* @__PURE__ */ t.jsx("div", { className: z(x.charge, x.chargeActive), children: "One-Time" }) }),
-    /* @__PURE__ */ t.jsx("div", { className: x.variants, children: o.map((s) => /* @__PURE__ */ t.jsxs(
+    /* @__PURE__ */ t.jsx("div", { className: x.chargeTypes, children: s.chargeTypes ? s.chargeTypes.map((r) => /* @__PURE__ */ t.jsx("div", { children: r })) : /* @__PURE__ */ t.jsx("div", { className: H(x.charge, x.chargeActive), children: "One-Time" }) }),
+    /* @__PURE__ */ t.jsx("div", { className: x.variants, children: n.map((r) => /* @__PURE__ */ t.jsxs(
       "div",
       {
-        className: z(x.variant, {
-          [x.activeVariant]: n.id === s.id
+        className: H(x.variant, {
+          [x.activeVariant]: s.id === r.id
         }),
-        onClick: () => c(s),
+        onClick: () => o(r),
         children: [
           /* @__PURE__ */ t.jsxs("div", { className: x.variantInfo, children: [
-            /* @__PURE__ */ t.jsx("span", { className: x.title, children: s.name }),
+            /* @__PURE__ */ t.jsx("span", { className: x.title, children: r.name }),
             /* @__PURE__ */ t.jsxs("span", { children: [
               "$",
-              s.price.amount
+              r.price.amount
             ] })
           ] }),
           /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsxs("span", { className: x.stock, children: [
-            s.quantity.restrictions.max || 0,
+            r.quantity.restrictions.max || 0,
             " in stock"
           ] }) })
         ]
@@ -1437,17 +1452,17 @@ const _t = "_accordion_2tiiw_1", mt = "_header_2tiiw_9", ht = "_icon_2tiiw_16",
         "div",
         {
           onClick: () => {
-            i > 0 ? a((s) => s - 1) : a(0);
+            a > 1 ? e((r) => r - 1) : e(1);
           },
           className: x.button,
           children: /* @__PURE__ */ t.jsx(h, { name: "Minus" })
         }
       ),
-      /* @__PURE__ */ t.jsx("div", { className: x.count, children: i }),
+      /* @__PURE__ */ t.jsx("div", { className: x.count, children: a }),
       /* @__PURE__ */ t.jsx(
         "div",
         {
-          onClick: () => a((s) => s + 1),
+          onClick: () => e((r) => r + 1),
           className: x.button,
           children: /* @__PURE__ */ t.jsx(h, { name: "Plus" })
         }
@@ -1466,57 +1481,107 @@ const _t = "_accordion_2tiiw_1", mt = "_header_2tiiw_9", ht = "_icon_2tiiw_16",
               height: 20
             }
           ),
-          /* @__PURE__ */ t.jsx("span", { children: n.deliveryTime === 0 ? "Instant" : e(n.deliveryTime) })
+          /* @__PURE__ */ t.jsx("span", { children: s.deliveryTime === 0 ? "Instant" : $(s.deliveryTime) })
         ] })
       ] }),
       /* @__PURE__ */ t.jsxs("div", { className: x.info, children: [
         /* @__PURE__ */ t.jsx("span", { children: "Price" }),
-        /* @__PURE__ */ t.jsx("div", { className: x.infoRight, children: n.compareAtPrice && (n.compareAtPrice.amount || 0) - (n.price.amount || 0) > 0 ? /* @__PURE__ */ t.jsxs("div", { className: x.price, children: [
+        /* @__PURE__ */ t.jsx("div", { className: x.infoRight, children: s.compareAtPrice && (s.compareAtPrice.amount || 0) - (s.price.amount || 0) > 0 ? /* @__PURE__ */ t.jsxs("div", { className: x.price, children: [
           /* @__PURE__ */ t.jsxs("span", { className: x.newPrice, children: [
             "$ ",
-            (n.price.amount || 0) * i
+            (s.price.amount || 0) * a
           ] }),
           /* @__PURE__ */ t.jsxs("span", { className: x.oldPrice, children: [
             "$ ",
-            (n.compareAtPrice.amount || 0) * i
+            (s.compareAtPrice.amount || 0) * a
           ] })
         ] }) : /* @__PURE__ */ t.jsxs("span", { className: x.newPrice, children: [
           "$ ",
-          (n.price.amount || 0) * i
+          (s.price.amount || 0) * a
         ] }) })
       ] })
     ] }),
     /* @__PURE__ */ t.jsxs("div", { className: x.buttons, children: [
-      /* @__PURE__ */ t.jsx(Q, { type: "Primary", children: "Buy Now" }),
-      /* @__PURE__ */ t.jsx(Q, { type: "Secondary", children: "Add to Cart" })
+      /* @__PURE__ */ t.jsx(
+        tt,
+        {
+          type: "Primary",
+          onClick: () => b(),
+          children: "Buy Now"
+        }
+      ),
+      /* @__PURE__ */ t.jsx(
+        tt,
+        {
+          type: "Secondary",
+          onClick: () => f(),
+          children: "Add to Cart"
+        }
+      )
     ] })
   ] });
+}, on = "_button_pstfl_1", cn = "_login_pstfl_11", an = "_signUp_pstfl_15", ln = "_buttons_pstfl_20", E = {
+  button: on,
+  login: cn,
+  signUp: an,
+  buttons: ln
+}, gn = (u) => {
+  const { shopping: n, signUp: s } = u, o = ut();
+  function i(a) {
+    o(a);
+  }
+  return /* @__PURE__ */ t.jsxs("div", { className: E.buttons, children: [
+    n && /* @__PURE__ */ t.jsx("div", { className: E.button, children: /* @__PURE__ */ t.jsx(
+      h,
+      {
+        name: "Handbag",
+        fill: "#252525"
+      }
+    ) }),
+    /* @__PURE__ */ t.jsx(
+      "div",
+      {
+        className: H(E.button, E.login),
+        onClick: () => i("/customer-dash"),
+        children: "Login"
+      }
+    ),
+    s && /* @__PURE__ */ t.jsx(
+      "div",
+      {
+        className: H(E.button, E.login, E.signUp),
+        onClick: () => i("/customer-dash"),
+        children: "Sign Up"
+      }
+    )
+  ] });
 };
 export {
-  nn as Accordion,
-  Q as Button,
-  Ze as ButtonTypeSettings,
-  cn as ButtonsSettings,
-  un as Checkbox,
-  ot as ChooseImage,
-  _n as ChooseImageModal,
-  mn as ColorPicker,
+  un as Accordion,
+  tt as Button,
+  ss as ButtonTypeSettings,
+  mn as ButtonsSettings,
+  fn as Checkbox,
+  ct as ChooseImage,
+  jn as ChooseImageModal,
+  vn as ColorPicker,
+  gn as HeaderButtons,
   h as Icon,
-  F as Input,
-  ue as ItemsSettings,
-  on as LayoutSettings,
-  an as ListingSelector,
-  hn as Loader,
-  pn as Modal,
-  gn as Picker,
-  ln as ProductOptions,
-  xn as Radio,
-  hs as RangeSelector,
-  V as Select,
-  bn as Submodal,
-  R as Switch,
-  Rt as TextSettings,
-  ct as Textarea,
-  fn as Tip,
-  dt as TypesText
+  V as Input,
+  he as ItemsSettings,
+  _n as LayoutSettings,
+  hn as ListingSelector,
+  kn as Loader,
+  yn as Modal,
+  $n as Picker,
+  pn as ProductOptions,
+  Nn as Radio,
+  xs as RangeSelector,
+  G as Select,
+  wn as Submodal,
+  z as Switch,
+  zt as TextSettings,
+  it as Textarea,
+  Cn as Tip,
+  _t as TypesText
 };