@billgangcom/theme-lib 1.25.0 → 1.27.0

package/dist/ui.es.js

@@ -1,53 +1,19 @@
-import { j as t, c as D, I as p, a as G, S as V, T as dt, C as ot, b as W, D as ut, H as _t, B as X, v as et, u as mt, d as pt, e as at, f as lt, M as ht, g as gt } from "./index-BI8lyvsO.js";
-import { l as di, m as ui, i as _i, E as mi, L as pi, P as hi, R as gi, h as xi, k as fi } from "./index-BI8lyvsO.js";
-import f from "react";
-const jt = "_accordion_9e4oa_1", vt = "_header_9e4oa_9", kt = "_icon_9e4oa_18", yt = "_open_9e4oa_21", Nt = "_content_9e4oa_25", K = {
-  accordion: jt,
-  header: vt,
-  icon: kt,
-  open: yt,
-  content: Nt
-}, ei = ({ title: d, content: n }) => {
-  const [e, c] = f.useState(!1), [i, l] = f.useState(0), s = f.useRef(null), o = () => {
-    c(!e);
-  };
-  return f.useEffect(() => {
-    s.current && l(e ? s.current.scrollHeight : 0);
-  }, [e]), /* @__PURE__ */ t.jsxs("div", { className: K.accordion, children: [
-    /* @__PURE__ */ t.jsxs(
-      "div",
-      {
-        className: K.header,
-        onClick: o,
-        children: [
-          /* @__PURE__ */ t.jsx("h3", { children: d }),
-          /* @__PURE__ */ t.jsx("div", { className: D(K.icon, { [K.open]: e }), children: /* @__PURE__ */ t.jsx(p, { name: "CaretDown" }) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ t.jsx(
-      "div",
-      {
-        ref: s,
-        className: K.content,
-        style: { height: `${i}px` },
-        children: /* @__PURE__ */ t.jsx("p", { children: n })
-      }
-    )
-  ] });
-}, $t = "_wrapper_9rr5j_2", Ct = "_alignmentBlock_9rr5j_8", It = "_title_9rr5j_15", Pt = "_subtitle_9rr5j_22", Tt = "_alignmentContent_9rr5j_29", Bt = "_alignments_9rr5j_37", wt = "_alignment_9rr5j_8", St = "_circle_9rr5j_58", qt = "_paddings_9rr5j_65", At = "_padding_9rr5j_65", Ot = "_input_9rr5j_84", O = {
-  wrapper: $t,
-  alignmentBlock: Ct,
+import { j as t, I as p, a as Y, c as q, S as W, T as pt, C as rt, b as Q, D as ht, H as gt, B as dt, v as ct, u as xt, d as ft, e as ut, f as _t, M as bt, g as jt } from "./index-BJq5RiR5.js";
+import { h as qc, L as Ac } from "./index-BJq5RiR5.js";
+import b from "react";
+const Nt = "_wrapper_9rr5j_2", $t = "_alignmentBlock_9rr5j_8", It = "_title_9rr5j_15", Ct = "_subtitle_9rr5j_22", wt = "_alignmentContent_9rr5j_29", Tt = "_alignments_9rr5j_37", Bt = "_alignment_9rr5j_8", Pt = "_circle_9rr5j_58", St = "_paddings_9rr5j_65", qt = "_padding_9rr5j_65", At = "_input_9rr5j_84", D = {
+  wrapper: Nt,
+  alignmentBlock: $t,
   title: It,
-  subtitle: Pt,
-  alignmentContent: Tt,
-  alignments: Bt,
-  alignment: wt,
-  circle: St,
-  paddings: qt,
-  padding: At,
-  input: Ot
-}, Lt = [
+  subtitle: Ct,
+  alignmentContent: wt,
+  alignments: Tt,
+  alignment: Bt,
+  circle: Pt,
+  paddings: St,
+  padding: qt,
+  input: At
+}, Ot = [
   "topLeft",
   "top",
   "topRight",
@@ -57,9 +23,9 @@ const jt = "_accordion_9e4oa_1", vt = "_header_9e4oa_9", kt = "_icon_9e4oa_18",
   "bottomLeft",
   "bottom",
   "bottomRight"
-], Dt = ["left", "top", "right", "bottom"], si = (d) => {
-  const { alignment: n, padding: e, setPadding: c, setAlignment: i } = d;
-  function l() {
+], Lt = ["left", "top", "right", "bottom"], kc = (r) => {
+  const { alignment: n, padding: e, setPadding: o, setAlignment: i } = r;
+  function a() {
     switch (n) {
       case "left":
       case "topLeft":
@@ -77,8 +43,8 @@ const jt = "_accordion_9e4oa_1", vt = "_header_9e4oa_9", kt = "_icon_9e4oa_18",
         return "TextAlignCenter";
     }
   }
-  function s(o) {
-    switch (o) {
+  function s(c) {
+    switch (c) {
       case "left":
         return "AlignLeft";
       case "right":
@@ -89,24 +55,24 @@ const jt = "_accordion_9e4oa_1", vt = "_header_9e4oa_9", kt = "_icon_9e4oa_18",
         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: Lt.map((o) => /* @__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: Ot.map((c) => /* @__PURE__ */ t.jsxs(
           "div",
           {
             onClick: () => {
-              i(o);
+              i(c);
             },
-            className: O.alignment,
+            className: D.alignment,
             children: [
-              o !== n && /* @__PURE__ */ t.jsx("div", { className: O.circle }),
-              o === n && /* @__PURE__ */ t.jsx(
+              c !== n && /* @__PURE__ */ t.jsx("div", { className: D.circle }),
+              c === n && /* @__PURE__ */ t.jsx(
                 p,
                 {
-                  name: l(),
+                  name: a(),
                   fill: "#FF3F19",
                   width: 22,
                   height: 22
@@ -114,29 +80,29 @@ const jt = "_accordion_9e4oa_1", vt = "_header_9e4oa_9", kt = "_icon_9e4oa_18",
               )
             ]
           },
-          o
+          c
         )) }),
-        /* @__PURE__ */ t.jsx("div", { className: O.paddings, children: Dt.map((o) => /* @__PURE__ */ t.jsxs(
+        /* @__PURE__ */ t.jsx("div", { className: D.paddings, children: Lt.map((c) => /* @__PURE__ */ t.jsxs(
           "label",
           {
-            className: O.padding,
+            className: D.padding,
             children: [
               /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
                 p,
                 {
-                  name: s(o),
+                  name: s(c),
                   width: 20,
                   height: 20
                 }
               ) }),
               /* @__PURE__ */ t.jsx(
-                G,
+                Y,
                 {
                   type: "text",
-                  value: String(e[o]),
-                  onChange: (m) => c({
+                  value: String(e[c]),
+                  onChange: (u) => o({
                     ...e,
-                    [o]: Number(m)
+                    [c]: Number(u)
                   }),
                   paddingless: !0,
                   borderless: !0
@@ -144,24 +110,24 @@ const jt = "_accordion_9e4oa_1", vt = "_header_9e4oa_9", kt = "_icon_9e4oa_18",
               )
             ]
           },
-          o
+          c
         )) })
       ] })
     ] })
   ] });
-}, Et = "_subtitle_1qrz9_1", Mt = "_header_1qrz9_8", Rt = "_text_1qrz9_9", Ht = "_top_1qrz9_17", Vt = "_itemsBlock_1qrz9_26", Z = {
-  subtitle: Et,
-  header: Mt,
-  text: Rt,
-  top: Ht,
-  itemsBlock: Vt
-}, Ft = "_typeTexts_rcw8p_1", Ut = "_block_rcw8p_8", zt = "_active_rcw8p_21", it = {
-  typeTexts: Ft,
-  block: Ut,
-  active: zt
-}, Gt = ["bold", "italic", "underline", "strike-through", "code"], xt = (d) => {
-  const { typesText: n, setTypesText: e } = d;
-  function c(i) {
+}, Dt = "_subtitle_1qrz9_1", zt = "_header_1qrz9_8", Mt = "_text_1qrz9_9", Et = "_top_1qrz9_17", Rt = "_itemsBlock_1qrz9_26", K = {
+  subtitle: Dt,
+  header: zt,
+  text: Mt,
+  top: Et,
+  itemsBlock: Rt
+}, Vt = "_typeTexts_rcw8p_1", Ht = "_block_rcw8p_8", Ft = "_active_rcw8p_21", ot = {
+  typeTexts: Vt,
+  block: Ht,
+  active: Ft
+}, Ut = ["bold", "italic", "underline", "strike-through", "code"], vt = (r) => {
+  const { typesText: n, setTypesText: e } = r;
+  function o(i) {
     switch (i) {
       case "bold":
         return "TextB";
@@ -175,24 +141,24 @@ const jt = "_accordion_9e4oa_1", vt = "_header_9e4oa_9", kt = "_icon_9e4oa_18",
         return "TextUnderline";
     }
   }
-  return /* @__PURE__ */ t.jsx("div", { className: it.typeTexts, children: Gt.map((i) => /* @__PURE__ */ t.jsx(
+  return /* @__PURE__ */ t.jsx("div", { className: ot.typeTexts, children: Ut.map((i) => /* @__PURE__ */ t.jsx(
     "div",
     {
-      className: D(it.block, {
-        [it.active]: n.includes(i)
+      className: q(ot.block, {
+        [ot.active]: n.includes(i)
       }),
       onClick: () => {
-        const l = [...n];
-        if (l.includes(i)) {
-          const s = l.filter((o) => o !== i);
+        const a = [...n];
+        if (a.includes(i)) {
+          const s = a.filter((c) => c !== i);
           e(s);
         } else
-          l.push(i), e(l);
+          a.push(i), e(a);
       },
       children: /* @__PURE__ */ t.jsx(
         p,
         {
-          name: c(i),
+          name: o(i),
           fill: n.includes(i) ? "#252525" : "#757575",
           width: 20,
           height: 20
@@ -201,40 +167,40 @@ const jt = "_accordion_9e4oa_1", vt = "_header_9e4oa_9", kt = "_icon_9e4oa_18",
     },
     String(i)
   )) });
-}, Wt = (d) => {
+}, Gt = (r) => {
   const {
     typesText: n,
     isActiveText: e,
-    setIsActiveText: c,
+    setIsActiveText: o,
     text: i,
-    setText: l,
+    setText: a,
     setTypesText: s,
-    title: o,
-    subtitle: m = "Items"
-  } = d;
-  return /* @__PURE__ */ t.jsxs("div", { className: Z.text, children: [
-    (o || e !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: Z.top, children: [
-      o && /* @__PURE__ */ t.jsx("h3", { className: Z.title, children: o }),
-      e !== void 0 && c && /* @__PURE__ */ t.jsx(
-        V,
+    title: c,
+    subtitle: u = "Items"
+  } = r;
+  return /* @__PURE__ */ t.jsxs("div", { className: K.text, children: [
+    (c || e !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: K.top, children: [
+      c && /* @__PURE__ */ t.jsx("h3", { className: K.title, children: c }),
+      e !== void 0 && o && /* @__PURE__ */ t.jsx(
+        W,
         {
           current: e,
-          onChange: (v) => c(v)
+          onChange: (y) => o(y)
         }
       )
     ] }),
-    /* @__PURE__ */ t.jsxs("div", { className: Z.itemsBlock, children: [
-      /* @__PURE__ */ t.jsx("h5", { className: Z.subtitle, children: m }),
+    /* @__PURE__ */ t.jsxs("div", { className: K.itemsBlock, children: [
+      /* @__PURE__ */ t.jsx("h5", { className: K.subtitle, children: u }),
       /* @__PURE__ */ t.jsx(
-        dt,
+        pt,
         {
-          onChange: (v) => l(v),
+          onChange: (y) => a(y),
           value: i,
           maxLength: 150
         }
       ),
       /* @__PURE__ */ t.jsx(
-        xt,
+        vt,
         {
           typesText: n,
           setTypesText: s
@@ -242,42 +208,42 @@ const jt = "_accordion_9e4oa_1", vt = "_header_9e4oa_9", kt = "_icon_9e4oa_18",
       )
     ] })
   ] });
-}, Xt = "_subtitle_cuny2_1", Yt = "_header_cuny2_8", Qt = "_text_cuny2_9", Jt = "_productsBlock_cuny2_10", Kt = "_top_cuny2_22", Zt = "_itemsBlock_cuny2_31", te = "_typeTexts_cuny2_37", ee = "_block_cuny2_44", se = "_active_cuny2_57", ne = "_products_cuny2_10", ie = "_product_cuny2_10", ce = "_button_cuny2_76", oe = "_disabled_cuny2_87", ae = "_image_cuny2_91", le = "_info_cuny2_98", re = "_name_cuny2_110", de = "_buttons_cuny2_114", ue = "_modal_cuny2_121", _e = "_link_cuny2_141", me = "_modalOptions_cuny2_147", P = {
-  subtitle: Xt,
-  header: Yt,
-  text: Qt,
-  productsBlock: Jt,
-  top: Kt,
-  itemsBlock: Zt,
-  typeTexts: te,
-  block: ee,
-  active: se,
-  products: ne,
-  product: ie,
+}, Wt = "_subtitle_cuny2_1", Xt = "_header_cuny2_8", Yt = "_text_cuny2_9", Qt = "_productsBlock_cuny2_10", Jt = "_top_cuny2_22", Kt = "_itemsBlock_cuny2_31", Zt = "_typeTexts_cuny2_37", te = "_block_cuny2_44", ee = "_active_cuny2_57", se = "_products_cuny2_10", ne = "_product_cuny2_10", ce = "_button_cuny2_76", ie = "_disabled_cuny2_87", oe = "_image_cuny2_91", ae = "_info_cuny2_98", le = "_name_cuny2_110", re = "_buttons_cuny2_114", de = "_modal_cuny2_121", ue = "_link_cuny2_141", _e = "_modalOptions_cuny2_147", B = {
+  subtitle: Wt,
+  header: Xt,
+  text: Yt,
+  productsBlock: Qt,
+  top: Jt,
+  itemsBlock: Kt,
+  typeTexts: Zt,
+  block: te,
+  active: ee,
+  products: se,
+  product: ne,
   button: ce,
-  disabled: oe,
-  image: ae,
-  info: le,
-  name: re,
-  buttons: de,
-  modal: ue,
-  link: _e,
-  modalOptions: me
-}, pe = (d) => {
-  const { activeItem: n, setActiveItem: e, popupPosition: c, modalOptions: i, setIsOpenModal: l } = d;
+  disabled: ie,
+  image: oe,
+  info: ae,
+  name: le,
+  buttons: re,
+  modal: de,
+  link: ue,
+  modalOptions: _e
+}, me = (r) => {
+  const { activeItem: n, setActiveItem: e, popupPosition: o, modalOptions: i, setIsOpenModal: a } = r;
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: P.modal,
+      className: B.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: P.top, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: B.top, children: [
           /* @__PURE__ */ t.jsx("h3", { children: n.name }),
           /* @__PURE__ */ t.jsx(
             p,
@@ -287,60 +253,60 @@ const jt = "_accordion_9e4oa_1", vt = "_header_9e4oa_9", kt = "_icon_9e4oa_18",
               width: 20,
               hoverable: !0,
               onClick: () => {
-                e(null), l(!1);
+                e(null), a(!1);
               }
             }
           )
         ] }),
-        /* @__PURE__ */ t.jsx("div", { className: P.modalOptions, children: i.map((s) => {
+        /* @__PURE__ */ t.jsx("div", { className: B.modalOptions, children: i.map((s) => {
           if (s.type === "image")
             return /* @__PURE__ */ t.jsx(
-              ot,
+              rt,
               {
                 label: "Put up an attractive image",
-                onChange: (o) => {
-                  const m = {
+                onChange: (c) => {
+                  const u = {
                     ...n,
-                    [s.field]: o
+                    [s.field]: c
                   };
-                  e(m);
+                  e(u);
                 }
               },
               String(s.field)
             );
           if (s.type === "text")
             return /* @__PURE__ */ t.jsx(
-              Wt,
+              Gt,
               {
                 typesText: n[s.field.type],
-                setTypesText: (o) => {
-                  const m = {
+                setTypesText: (c) => {
+                  const u = {
                     ...n,
-                    [s.field.type]: o
+                    [s.field.type]: c
                   };
-                  e(m);
+                  e(u);
                 },
                 text: n[s.field.text] || "",
-                setText: (o) => {
-                  const m = {
+                setText: (c) => {
+                  const u = {
                     ...n,
-                    [s.field.text]: o
+                    [s.field.text]: c
                   };
-                  e(m);
+                  e(u);
                 },
                 subtitle: s.label
               }
             );
           if (s.type === "input")
             return /* @__PURE__ */ t.jsx(
-              G,
+              Y,
               {
-                onChange: (o) => {
-                  const m = {
+                onChange: (c) => {
+                  const u = {
                     ...n,
-                    [s.field]: o
+                    [s.field]: c
                   };
-                  e(m);
+                  e(u);
                 },
                 value: n[s.field] || "",
                 label: s.label,
@@ -348,16 +314,16 @@ const jt = "_accordion_9e4oa_1", vt = "_header_9e4oa_9", kt = "_icon_9e4oa_18",
               }
             );
           if (s.type === "inputSwitch")
-            return /* @__PURE__ */ t.jsxs("div", { className: P.link, children: [
+            return /* @__PURE__ */ t.jsxs("div", { className: B.link, children: [
               /* @__PURE__ */ t.jsx(
-                G,
+                Y,
                 {
-                  onChange: (o) => {
-                    const m = {
+                  onChange: (c) => {
+                    const u = {
                       ...n,
-                      [s.field.text]: o
+                      [s.field.text]: c
                     };
-                    e(m);
+                    e(u);
                   },
                   value: n[s.field.text] || "",
                   label: s.inputLabel,
@@ -365,31 +331,31 @@ const jt = "_accordion_9e4oa_1", vt = "_header_9e4oa_9", kt = "_icon_9e4oa_18",
                 }
               ),
               /* @__PURE__ */ t.jsx(
-                V,
+                W,
                 {
                   current: !!n[s.field.switch] || !1,
                   label: s.switchLabel,
-                  onChange: (o) => {
-                    const m = {
+                  onChange: (c) => {
+                    const u = {
                       ...n,
-                      [s.field.switch]: o
+                      [s.field.switch]: c
                     };
-                    e(m);
+                    e(u);
                   }
                 }
               )
             ] });
           if (s.type === "list")
             return /* @__PURE__ */ t.jsx(
-              be,
+              fe,
               {
                 items: n[s.field] || [],
-                setItems: (o) => {
-                  const m = {
+                setItems: (c) => {
+                  const u = {
                     ...n,
-                    [s.field]: o
+                    [s.field]: c
                   };
-                  e(m);
+                  e(u);
                 },
                 itemsType: "select",
                 draggable: s.draggable || !1,
@@ -401,15 +367,15 @@ const jt = "_accordion_9e4oa_1", vt = "_header_9e4oa_9", kt = "_icon_9e4oa_18",
             );
           if (s.type === "select")
             return /* @__PURE__ */ t.jsx(
-              W,
+              Q,
               {
                 options: s.itemsOptions,
-                onChange: (o) => {
-                  const m = {
+                onChange: (c) => {
+                  const u = {
                     ...n,
-                    [s.field]: o
+                    [s.field]: c
                   };
-                  e(m);
+                  e(u);
                 },
                 label: s.label,
                 value: n[s.field] || "String",
@@ -420,104 +386,104 @@ const jt = "_accordion_9e4oa_1", vt = "_header_9e4oa_9", kt = "_icon_9e4oa_18",
       ]
     }
   );
-}, he = "_other_g74jx_1", ge = "_subtitle_g74jx_7", xe = "_items_g74jx_14", ct = {
-  other: he,
-  subtitle: ge,
-  items: xe
-}, ft = (d) => {
-  const { items: n, title: e = "Other" } = d;
-  return /* @__PURE__ */ t.jsxs("div", { className: ct.other, children: [
-    /* @__PURE__ */ t.jsx("h5", { className: ct.subtitle, children: e }),
-    /* @__PURE__ */ t.jsx("div", { className: ct.items, children: n.map((c, i) => /* @__PURE__ */ t.jsx(
-      V,
+}, pe = "_other_g74jx_1", he = "_subtitle_g74jx_7", ge = "_items_g74jx_14", at = {
+  other: pe,
+  subtitle: he,
+  items: ge
+}, kt = (r) => {
+  const { items: n, title: e = "Other" } = r;
+  return /* @__PURE__ */ t.jsxs("div", { className: at.other, children: [
+    /* @__PURE__ */ t.jsx("h5", { className: at.subtitle, children: e }),
+    /* @__PURE__ */ t.jsx("div", { className: at.items, children: n.map((o, i) => /* @__PURE__ */ t.jsx(
+      W,
       {
-        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
       },
       i
     )) })
   ] });
-}, fe = (d) => {
-  const { index: n, moveProduct: e, children: c } = d, [, i] = mt({
+}, xe = (r) => {
+  const { index: n, moveProduct: e, children: o } = r, [, i] = xt({
     accept: "product",
-    hover(o) {
-      o.index !== n && (e(o.index, n), o.index = n);
+    hover(c) {
+      c.index !== n && (e(c.index, n), c.index = n);
     }
-  }), [{ isDragging: l }, s] = pt({
+  }), [{ isDragging: a }, s] = ft({
     type: "product",
     item: { index: n },
-    collect: (o) => ({
-      isDragging: o.isDragging()
+    collect: (c) => ({
+      isDragging: c.isDragging()
     })
   });
   return /* @__PURE__ */ t.jsx(
     "div",
     {
-      ref: (o) => s(i(o)),
-      className: `${P.product} ${l ? P.dragging : ""}`,
-      children: c
+      ref: (c) => s(i(c)),
+      className: `${B.product} ${a ? B.dragging : ""}`,
+      children: o
     }
   );
-}, be = (d) => {
+}, fe = (r) => {
   const {
     isActiveItems: n,
     setIsActiveItems: e,
-    items: c,
+    items: o,
     setItems: i,
-    other: l,
+    other: a,
     title: s,
-    subtitle: o,
-    editable: m = !0,
-    draggable: v = !1,
-    withImage: u = !1,
-    deletable: a = !0,
+    subtitle: c,
+    editable: u = !0,
+    draggable: y = !1,
+    withImage: _ = !1,
+    deletable: l = !0,
     addable: h = !0,
-    itemsType: $,
-    itemsPlaceholder: b = "",
-    itemsOptions: r,
-    hasRangeSelector: w = !1,
-    rangeSelectorOptions: Y,
-    modalOptions: Q,
-    addableOptions: F = {},
-    limit: y
-  } = d, [M, R] = f.useState(null), [nt, st] = f.useState({
+    itemsType: N,
+    itemsPlaceholder: g = "",
+    itemsOptions: d,
+    hasRangeSelector: P = !1,
+    rangeSelectorOptions: U,
+    modalOptions: G,
+    addableOptions: R = {},
+    limit: j
+  } = r, [A, V] = b.useState(null), [it, st] = b.useState({
     top: 0,
     left: 0
-  }), [g, k] = f.useState(!1), S = (_, T) => {
-    const q = [...c], [N] = q.splice(_, 1);
-    q.splice(T, 0, N), i(q);
+  }), [f, k] = b.useState(!1), w = (m, T) => {
+    const O = [...o], [$] = O.splice(m, 1);
+    O.splice(T, 0, $), i(O);
   };
-  f.useEffect(() => {
-    const _ = () => {
-      R(null), k(!1);
+  b.useEffect(() => {
+    const m = () => {
+      V(null), k(!1);
     };
-    return document.body.addEventListener("click", _), R(null), k(!1), () => {
-      R(null), k(!1), document.body.removeEventListener("click", _);
+    return document.body.addEventListener("click", m), V(null), k(!1), () => {
+      V(null), k(!1), document.body.removeEventListener("click", m);
     };
-  }, []), f.useEffect(() => {
-    if (M) {
-      const _ = [...c].map((T) => T.id === M.id ? M : T);
-      i(_);
+  }, []), b.useEffect(() => {
+    if (A) {
+      const m = [...o].map((T) => T.id === A.id ? A : T);
+      i(m);
     }
-  }, [M]);
-  const C = (_, T) => {
-    _.stopPropagation(), k(!0);
-    const q = _.target.getBoundingClientRect(), N = 500, J = window.innerHeight;
-    let E = q.top + window.scrollY;
-    E + N > J && (E = J - N - 20), st({
+  }, [A]);
+  const M = (m, T) => {
+    m.stopPropagation(), k(!0);
+    const O = m.target.getBoundingClientRect(), $ = 500, J = window.innerHeight;
+    let E = O.top + window.scrollY;
+    E + $ > J && (E = J - $ - 20), st({
       top: E - 80,
-      left: q.left - 30
-    }), R(T);
+      left: O.left - 30
+    }), V(T);
   };
-  function U(_) {
-    if (u)
-      return _ ? /* @__PURE__ */ t.jsx(
+  function I(m) {
+    if (_)
+      return m ? /* @__PURE__ */ t.jsx(
         "img",
         {
-          src: `https://imagedelivery.net/${_[0]}/w=1000`,
+          src: `https://imagedelivery.net/${m[0]}/w=1000`,
           alt: "image",
           width: 16,
           height: 16
@@ -532,9 +498,9 @@ const jt = "_accordion_9e4oa_1", vt = "_header_9e4oa_9", kt = "_icon_9e4oa_18",
         }
       );
   }
-  const A = (_, T) => {
-    const q = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-      v && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
+  const L = (m, T) => {
+    const O = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+      y && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
         p,
         {
           name: "DotsSixVertical",
@@ -543,62 +509,62 @@ const jt = "_accordion_9e4oa_1", vt = "_header_9e4oa_9", kt = "_icon_9e4oa_18",
           height: 20
         }
       ) }),
-      $ === "select" && /* @__PURE__ */ t.jsx(
-        W,
+      N === "select" && /* @__PURE__ */ t.jsx(
+        Q,
         {
-          onChange: (N) => {
-            const E = [...c].map((H) => H.id === _.id ? {
-              ..._,
-              name: N
+          onChange: ($) => {
+            const E = [...o].map((H) => H.id === m.id ? {
+              ...m,
+              name: $
             } : H);
-            R({
-              ..._,
-              name: N
+            V({
+              ...m,
+              name: $
             }), i([...E]);
           },
-          value: _.name,
-          options: r,
-          leftAddon: U(_.images)
+          value: m.name,
+          options: d,
+          leftAddon: I(m.images)
         }
       ),
-      $ === "input" && /* @__PURE__ */ t.jsx(
-        G,
+      N === "input" && /* @__PURE__ */ t.jsx(
+        Y,
         {
-          onChange: (N) => {
-            const E = [...c].map((H) => H.id === _.id ? {
-              ..._,
-              name: N
+          onChange: ($) => {
+            const E = [...o].map((H) => H.id === m.id ? {
+              ...m,
+              name: $
             } : H);
             i([...E]);
           },
-          value: _.name,
-          placeholder: b
+          value: m.name,
+          placeholder: g
         }
       ),
-      $ === "image" && /* @__PURE__ */ t.jsx(
-        ot,
+      N === "image" && /* @__PURE__ */ t.jsx(
+        rt,
         {
-          onChange: (N) => {
-            const E = [...c].map((H) => H.id === _.id ? {
-              ..._,
-              images: N
+          onChange: ($) => {
+            const E = [...o].map((H) => H.id === m.id ? {
+              ...m,
+              images: $
             } : H);
             i([...E]);
           }
         }
       ),
-      /* @__PURE__ */ t.jsxs("div", { className: P.buttons, children: [
-        m && /* @__PURE__ */ t.jsx(
+      /* @__PURE__ */ t.jsxs("div", { className: B.buttons, children: [
+        u && /* @__PURE__ */ t.jsx(
           p,
           {
             name: "Sliders",
             hoverable: !0,
             width: 20,
             height: 20,
-            onClick: (N) => C(N, _)
+            onClick: ($) => M($, m)
           }
         ),
-        a && /* @__PURE__ */ t.jsx(
+        l && /* @__PURE__ */ t.jsx(
           p,
           {
             name: "Trash",
@@ -606,77 +572,77 @@ const jt = "_accordion_9e4oa_1", vt = "_header_9e4oa_9", kt = "_icon_9e4oa_18",
             width: 20,
             height: 20,
             fill: "#C12A2A",
-            onClick: () => i(c.filter((N) => N.id !== _.id))
+            onClick: () => i(o.filter(($) => $.id !== m.id))
           }
         )
       ] })
     ] });
-    return v ? /* @__PURE__ */ t.jsx(
-      fe,
+    return y ? /* @__PURE__ */ t.jsx(
+      xe,
       {
-        product: _,
+        product: m,
         index: T,
-        moveProduct: S,
-        children: q
+        moveProduct: w,
+        children: O
       },
-      _.id
+      m.id
     ) : /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: P.product,
-        children: q
+        className: B.product,
+        children: O
       },
-      _.id
+      m.id
     );
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: P.productsBlock, children: [
-    (s || n !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: P.top, children: [
-      s && /* @__PURE__ */ t.jsx("h3", { className: P.title, children: s }),
+  return /* @__PURE__ */ t.jsxs("div", { className: B.productsBlock, children: [
+    (s || n !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: B.top, children: [
+      s && /* @__PURE__ */ t.jsx("h3", { className: B.title, children: s }),
       n !== void 0 && /* @__PURE__ */ t.jsx(
-        V,
+        W,
         {
           current: n,
-          onChange: (_) => e == null ? void 0 : e(_)
+          onChange: (m) => e == null ? void 0 : e(m)
         }
       )
     ] }),
-    M && m && Q && g && /* @__PURE__ */ t.jsx(
-      pe,
+    A && u && G && f && /* @__PURE__ */ t.jsx(
+      me,
       {
-        activeItem: M,
-        setActiveItem: R,
-        popupPosition: nt,
-        modalOptions: Q,
+        activeItem: A,
+        setActiveItem: V,
+        popupPosition: it,
+        modalOptions: G,
         setIsOpenModal: k
       }
     ),
-    w && Y && /* @__PURE__ */ t.jsx(ks, { ...Y }),
-    /* @__PURE__ */ t.jsxs("div", { className: P.products, children: [
-      o && /* @__PURE__ */ t.jsx("h5", { className: P.subtitle, children: o }),
-      v ? /* @__PURE__ */ t.jsx(ut, { backend: _t, children: c.map((_, T) => A(_, T)) }) : c.map((_, T) => A(_, T)),
+    P && U && /* @__PURE__ */ t.jsx(vs, { ...U }),
+    /* @__PURE__ */ t.jsxs("div", { className: B.products, children: [
+      c && /* @__PURE__ */ t.jsx("h5", { className: B.subtitle, children: c }),
+      y ? /* @__PURE__ */ t.jsx(ht, { backend: gt, children: o.map((m, T) => L(m, T)) }) : o.map((m, T) => L(m, T)),
       h && /* @__PURE__ */ t.jsxs(
-        X,
+        dt,
         {
-          className: D(P.button, {
-            [P.disabled]: !!(y && y <= c.length)
+          className: q(B.button, {
+            [B.disabled]: !!(j && j <= o.length)
           }),
           size: "s",
-          disabled: !!(y && y <= c.length),
+          disabled: !!(j && j <= o.length),
           onClick: () => {
-            const _ = [...c];
-            $ === "select" ? _.push({
-              name: r[0] || `Product ${c.length + 1}`,
-              id: et(),
-              ...F
-            }) : $ === "input" ? _.push({
+            const m = [...o];
+            N === "select" ? m.push({
+              name: d[0] || `Product ${o.length + 1}`,
+              id: ct(),
+              ...R
+            }) : N === "input" ? m.push({
               name: "",
-              id: et(),
-              ...F
-            }) : _.push({
-              name: `Image ${c.length + 1}`,
-              id: et(),
-              ...F
-            }), i(_);
+              id: ct(),
+              ...R
+            }) : m.push({
+              name: `Image ${o.length + 1}`,
+              id: ct(),
+              ...R
+            }), i(m);
           },
           children: [
             /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
@@ -692,54 +658,54 @@ const jt = "_accordion_9e4oa_1", vt = "_header_9e4oa_9", kt = "_icon_9e4oa_18",
         }
       )
     ] }),
-    l !== void 0 && /* @__PURE__ */ t.jsx(ft, { items: l })
+    a !== void 0 && /* @__PURE__ */ t.jsx(kt, { items: a })
   ] });
-}, je = "_subtitle_1fb9q_1", ve = "_header_1fb9q_8", ke = "_text_1fb9q_9", ye = "_productsBlock_1fb9q_10", Ne = "_buttonsBlock_1fb9q_11", $e = "_top_1fb9q_22", Ce = "_itemsBlock_1fb9q_31", Ie = "_typeTexts_1fb9q_37", Pe = "_block_1fb9q_44", Te = "_active_1fb9q_56", Be = "_products_1fb9q_10", we = "_product_1fb9q_10", Se = "_button_1fb9q_11", qe = "_image_1fb9q_86", Ae = "_info_1fb9q_93", Oe = "_name_1fb9q_105", Le = "_buttons_1fb9q_11", De = "_modal_1fb9q_116", Ee = "_other_1fb9q_135", Me = "_options_1fb9q_141", z = {
-  subtitle: je,
-  header: ve,
-  text: ke,
-  productsBlock: ye,
-  buttonsBlock: Ne,
-  top: $e,
-  itemsBlock: Ce,
+}, be = "_subtitle_1fb9q_1", je = "_header_1fb9q_8", ve = "_text_1fb9q_9", ke = "_productsBlock_1fb9q_10", ye = "_buttonsBlock_1fb9q_11", Ne = "_top_1fb9q_22", $e = "_itemsBlock_1fb9q_31", Ie = "_typeTexts_1fb9q_37", Ce = "_block_1fb9q_44", we = "_active_1fb9q_56", Te = "_products_1fb9q_10", Be = "_product_1fb9q_10", Pe = "_button_1fb9q_11", Se = "_image_1fb9q_86", qe = "_info_1fb9q_93", Ae = "_name_1fb9q_105", Oe = "_buttons_1fb9q_11", Le = "_modal_1fb9q_116", De = "_other_1fb9q_135", ze = "_options_1fb9q_141", X = {
+  subtitle: be,
+  header: je,
+  text: ve,
+  productsBlock: ke,
+  buttonsBlock: ye,
+  top: Ne,
+  itemsBlock: $e,
   typeTexts: Ie,
-  block: Pe,
-  active: Te,
-  products: Be,
-  product: we,
-  button: Se,
-  image: qe,
-  info: Ae,
-  name: Oe,
-  buttons: Le,
-  modal: De,
-  other: Ee,
-  options: Me
-}, Re = (d) => {
-  const { activeButton: n, setActiveButton: e, popupPosition: c } = d, [i, l] = f.useState(n.typesText), [s, o] = f.useState(n.destination), [m, v] = f.useState(n.link || ""), [u, a] = f.useState(n.text || "");
-  return f.useEffect(() => {
+  block: Ce,
+  active: we,
+  products: Te,
+  product: Be,
+  button: Pe,
+  image: Se,
+  info: qe,
+  name: Ae,
+  buttons: Oe,
+  modal: Le,
+  other: De,
+  options: ze
+}, Me = (r) => {
+  const { activeButton: n, setActiveButton: e, popupPosition: o } = r, [i, a] = b.useState(n.typesText), [s, c] = b.useState(n.destination), [u, y] = b.useState(n.link || ""), [_, l] = b.useState(n.text || "");
+  return b.useEffect(() => {
     e({
       ...n,
       ...{
-        text: u,
-        link: m,
+        text: _,
+        link: u,
         destination: s,
         typesText: i
       }
     });
-  }, [i, s, m, u]), /* @__PURE__ */ t.jsxs(
+  }, [i, s, u, _]), /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: z.modal,
+      className: X.modal,
       onClick: (h) => {
         h.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: [
+        /* @__PURE__ */ t.jsxs("div", { className: X.top, children: [
           /* @__PURE__ */ t.jsx("h3", { children: n.type }),
           /* @__PURE__ */ t.jsx(
             p,
@@ -752,18 +718,18 @@ const jt = "_accordion_9e4oa_1", vt = "_header_9e4oa_9", kt = "_icon_9e4oa_18",
             }
           )
         ] }),
-        /* @__PURE__ */ t.jsxs("div", { className: z.options, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: X.options, children: [
           /* @__PURE__ */ t.jsx(
-            W,
+            Q,
             {
               label: "Destination",
-              onChange: (h) => o(h),
+              onChange: (h) => c(h),
               options: ["Go to Page", "Open Link"],
               value: s
             }
           ),
           s === "Go to Page" ? /* @__PURE__ */ t.jsx(
-            W,
+            Q,
             {
               label: "Go to",
               onChange: () => {
@@ -772,111 +738,111 @@ const jt = "_accordion_9e4oa_1", vt = "_header_9e4oa_9", kt = "_icon_9e4oa_18",
               value: "Homepage"
             }
           ) : /* @__PURE__ */ t.jsx(
-            G,
+            Y,
             {
-              onChange: (h) => v(h),
-              value: m,
+              onChange: (h) => y(h),
+              value: u,
               placeholder: "https://",
               label: "Link"
             }
           ),
           /* @__PURE__ */ t.jsx(
-            V,
+            W,
             {
               current: !1,
               label: "Open in new tab"
             }
           ),
           /* @__PURE__ */ t.jsx(
-            dt,
+            pt,
             {
-              onChange: (h) => a(h),
-              value: u,
+              onChange: (h) => l(h),
+              value: _,
               label: "Text",
               maxLength: 150
             }
           ),
           /* @__PURE__ */ t.jsx(
-            xt,
+            vt,
             {
               typesText: i,
-              setTypesText: l
+              setTypesText: a
             }
           )
         ] })
       ]
     }
   );
-}, He = "_subtitle_m8qel_1", Ve = "_header_m8qel_8", Fe = "_text_m8qel_9", Ue = "_productsBlock_m8qel_10", ze = "_buttonsBlock_m8qel_11", Ge = "_top_m8qel_23", We = "_itemsBlock_m8qel_32", Xe = "_typeTexts_m8qel_38", Ye = "_block_m8qel_45", Qe = "_active_m8qel_58", Je = "_products_m8qel_10", Ke = "_product_m8qel_10", Ze = "_button_m8qel_11", ts = "_image_m8qel_88", es = "_info_m8qel_95", ss = "_name_m8qel_107", ns = "_buttons_m8qel_11", is = "_modal_m8qel_118", cs = "_other_m8qel_137", os = "_options_m8qel_143", tt = {
-  subtitle: He,
-  header: Ve,
-  text: Fe,
-  productsBlock: Ue,
-  buttonsBlock: ze,
-  top: Ge,
-  itemsBlock: We,
-  typeTexts: Xe,
-  block: Ye,
-  active: Qe,
-  products: Je,
-  product: Ke,
-  button: Ze,
-  image: ts,
-  info: es,
-  name: ss,
-  buttons: ns,
-  modal: is,
+}, Ee = "_subtitle_m8qel_1", Re = "_header_m8qel_8", Ve = "_text_m8qel_9", He = "_productsBlock_m8qel_10", Fe = "_buttonsBlock_m8qel_11", Ue = "_top_m8qel_23", Ge = "_itemsBlock_m8qel_32", We = "_typeTexts_m8qel_38", Xe = "_block_m8qel_45", Ye = "_active_m8qel_58", Qe = "_products_m8qel_10", Je = "_product_m8qel_10", Ke = "_button_m8qel_11", Ze = "_image_m8qel_88", ts = "_info_m8qel_95", es = "_name_m8qel_107", ss = "_buttons_m8qel_11", ns = "_modal_m8qel_118", cs = "_other_m8qel_137", is = "_options_m8qel_143", Z = {
+  subtitle: Ee,
+  header: Re,
+  text: Ve,
+  productsBlock: He,
+  buttonsBlock: Fe,
+  top: Ue,
+  itemsBlock: Ge,
+  typeTexts: We,
+  block: Xe,
+  active: Ye,
+  products: Qe,
+  product: Je,
+  button: Ke,
+  image: Ze,
+  info: ts,
+  name: es,
+  buttons: ss,
+  modal: ns,
   other: cs,
-  options: os
-}, as = (d) => {
-  const { buttons: n, setButtons: e, deletable: c = !0, addable: i = !0 } = d, [l, s] = f.useState(null), [o, m] = f.useState({
+  options: is
+}, os = (r) => {
+  const { buttons: n, setButtons: e, deletable: o = !0, addable: i = !0 } = r, [a, s] = b.useState(null), [c, u] = b.useState({
     top: 0,
     left: 0
   });
-  f.useEffect(() => {
-    const u = () => {
+  b.useEffect(() => {
+    const _ = () => {
       s(null);
     };
-    return document.body.addEventListener("click", u), s(null), () => {
-      s(null), document.body.removeEventListener("click", u);
+    return document.body.addEventListener("click", _), s(null), () => {
+      s(null), document.body.removeEventListener("click", _);
     };
-  }, []), f.useEffect(() => {
-    if (l) {
-      const u = [...n].map((a) => a.id === l.id ? l : a);
-      e(u);
+  }, []), b.useEffect(() => {
+    if (a) {
+      const _ = [...n].map((l) => l.id === a.id ? a : l);
+      e(_);
     }
-  }, [l]);
-  const v = (u, a) => {
-    u.stopPropagation();
-    const h = u.target.getBoundingClientRect(), $ = 490, b = window.innerHeight;
-    let r = h.top + window.scrollY;
-    r + $ > b && (r = b - $ - 20), m({
-      top: r,
+  }, [a]);
+  const y = (_, l) => {
+    _.stopPropagation();
+    const h = _.target.getBoundingClientRect(), N = 490, g = window.innerHeight;
+    let d = h.top + window.scrollY;
+    d + N > g && (d = g - N - 20), u({
+      top: d,
       left: h.left - 30
-    }), s(a);
+    }), s(l);
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: tt.products, children: [
-    /* @__PURE__ */ t.jsx("h5", { className: tt.subtitle, children: "Button Type" }),
-    n.map((u) => /* @__PURE__ */ t.jsxs(
+  return /* @__PURE__ */ t.jsxs("div", { className: Z.products, children: [
+    /* @__PURE__ */ t.jsx("h5", { className: Z.subtitle, children: "Button Type" }),
+    n.map((_) => /* @__PURE__ */ t.jsxs(
       "div",
       {
-        className: tt.product,
+        className: Z.product,
         children: [
           /* @__PURE__ */ t.jsx(
-            W,
+            Q,
             {
-              onChange: (a) => {
-                const $ = [...n].map((b) => b.id === u.id ? {
-                  ...u,
-                  type: a
-                } : b);
-                e($);
+              onChange: (l) => {
+                const N = [...n].map((g) => g.id === _.id ? {
+                  ..._,
+                  type: l
+                } : g);
+                e(N);
               },
-              value: u.type,
+              value: _.type,
               options: ["Primary", "Secondary", "Tertiary"]
             }
           ),
-          /* @__PURE__ */ t.jsxs("div", { className: tt.buttons, children: [
+          /* @__PURE__ */ t.jsxs("div", { className: Z.buttons, children: [
             /* @__PURE__ */ t.jsx(
               p,
               {
@@ -884,19 +850,19 @@ const jt = "_accordion_9e4oa_1", vt = "_header_9e4oa_9", kt = "_icon_9e4oa_18",
                 hoverable: !0,
                 width: 20,
                 height: 20,
-                onClick: (a) => {
-                  v(a, u);
+                onClick: (l) => {
+                  y(l, _);
                 }
               }
             ),
-            c && /* @__PURE__ */ t.jsx(
+            o && /* @__PURE__ */ t.jsx(
               p,
               {
                 name: "Trash",
                 hoverable: !0,
                 onClick: () => {
-                  const a = n.filter((h) => h.id !== u.id);
-                  e(a);
+                  const l = n.filter((h) => h.id !== _.id);
+                  e(l);
                 },
                 width: 20,
                 height: 20,
@@ -906,30 +872,30 @@ const jt = "_accordion_9e4oa_1", vt = "_header_9e4oa_9", kt = "_icon_9e4oa_18",
           ] })
         ]
       },
-      u.id
+      _.id
     )),
-    l && /* @__PURE__ */ t.jsx(
-      Re,
+    a && /* @__PURE__ */ t.jsx(
+      Me,
       {
-        activeButton: l,
+        activeButton: a,
         setActiveButton: s,
-        popupPosition: o
+        popupPosition: c
       }
     ),
     i && /* @__PURE__ */ t.jsxs(
-      X,
+      dt,
       {
-        className: tt.button,
+        className: Z.button,
         size: "s",
         onClick: () => {
-          const u = [...n];
-          u.push({
+          const _ = [...n];
+          _.push({
             type: "Primary",
-            id: et(),
+            id: ct(),
             typesText: [],
             destination: "Go to Page",
             text: "Button Name"
-          }), e(u);
+          }), e(_);
         },
         children: [
           /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
@@ -945,77 +911,77 @@ const jt = "_accordion_9e4oa_1", vt = "_header_9e4oa_9", kt = "_icon_9e4oa_18",
       }
     )
   ] });
-}, ni = (d) => {
-  const { isActiveButtons: n, setIsActiveButtons: e, buttons: c, setButtons: i } = d;
-  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" }),
+}, yc = (r) => {
+  const { isActiveButtons: n, setIsActiveButtons: e, buttons: o, setButtons: i } = r;
+  return /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsxs("div", { className: X.buttonsBlock, children: [
+    /* @__PURE__ */ t.jsxs("div", { className: X.top, children: [
+      /* @__PURE__ */ t.jsx("h3", { className: X.title, children: "Buttons" }),
       /* @__PURE__ */ t.jsx(
-        V,
+        W,
         {
           current: n,
-          onChange: (l) => e(l)
+          onChange: (a) => e(a)
         }
       )
     ] }),
     /* @__PURE__ */ t.jsx(
-      as,
+      os,
       {
-        buttons: c,
+        buttons: o,
         setButtons: i
       }
     )
   ] }) });
-}, ls = "_wrapper_m18qi_1", rs = "_subtitle_m18qi_7", ds = "_content_m18qi_14", us = "_range_m18qi_22", _s = "_track_m18qi_27", ms = "_progress_m18qi_36", ps = "_dots_m18qi_46", hs = "_dot_m18qi_46", gs = "_active_m18qi_65", xs = "_input_m18qi_77", fs = "_countBlock_m18qi_91", bs = "_count_m18qi_91", js = "_controls_m18qi_107", vs = "_button_m18qi_113", I = {
-  wrapper: ls,
-  subtitle: rs,
-  content: ds,
-  range: us,
-  track: _s,
-  progress: ms,
-  dots: ps,
-  dot: hs,
-  active: gs,
-  input: xs,
-  countBlock: fs,
-  count: bs,
-  controls: js,
-  button: vs
-}, ks = (d) => {
-  const { label: n, min: e = 1, max: c = 4, step: i = 1, count: l, setCount: s } = d, [o, m] = f.useState(!1), v = Array.from({ length: (c - e) / i + 1 }), u = (l - e) / (c - e) * 100, a = () => {
-    l < c && s(l + i);
+}, as = "_wrapper_m18qi_1", ls = "_subtitle_m18qi_7", rs = "_content_m18qi_14", ds = "_range_m18qi_22", us = "_track_m18qi_27", _s = "_progress_m18qi_36", ms = "_dots_m18qi_46", ps = "_dot_m18qi_46", hs = "_active_m18qi_65", gs = "_input_m18qi_77", xs = "_countBlock_m18qi_91", fs = "_count_m18qi_91", bs = "_controls_m18qi_107", js = "_button_m18qi_113", C = {
+  wrapper: as,
+  subtitle: ls,
+  content: rs,
+  range: ds,
+  track: us,
+  progress: _s,
+  dots: ms,
+  dot: ps,
+  active: hs,
+  input: gs,
+  countBlock: xs,
+  count: fs,
+  controls: bs,
+  button: js
+}, vs = (r) => {
+  const { label: n, min: e = 1, max: o = 4, step: i = 1, count: a, setCount: s } = r, [c, u] = b.useState(!1), y = Array.from({ length: (o - e) / i + 1 }), _ = (a - e) / (o - e) * 100, l = () => {
+    a < o && s(a + i);
   }, h = () => {
-    l > e && s(l - i);
-  }, $ = (b) => {
-    const r = e + b * i;
-    s(r);
+    a > e && s(a - i);
+  }, N = (g) => {
+    const d = e + g * i;
+    s(d);
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: I.wrapper, children: [
-    n && /* @__PURE__ */ t.jsx("h5", { className: I.subtitle, children: n }),
-    /* @__PURE__ */ t.jsxs("div", { className: I.content, children: [
-      /* @__PURE__ */ t.jsxs("div", { className: I.range, children: [
-        /* @__PURE__ */ t.jsx("div", { className: I.track }),
+  return /* @__PURE__ */ t.jsxs("div", { className: C.wrapper, children: [
+    n && /* @__PURE__ */ t.jsx("h5", { className: C.subtitle, children: n }),
+    /* @__PURE__ */ t.jsxs("div", { className: C.content, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: C.range, children: [
+        /* @__PURE__ */ t.jsx("div", { className: C.track }),
         /* @__PURE__ */ t.jsx(
           "div",
           {
-            className: I.progress,
-            style: { width: `${u}%` }
+            className: C.progress,
+            style: { width: `${_}%` }
           }
         ),
-        /* @__PURE__ */ t.jsx("div", { className: I.dots, children: v.map((b, r) => {
-          const w = r <= (l - e) / i;
+        /* @__PURE__ */ t.jsx("div", { className: C.dots, children: y.map((g, d) => {
+          const P = d <= (a - e) / i;
           return /* @__PURE__ */ t.jsx(
             "button",
             {
-              onClick: () => $(r),
-              className: D(I.dot, {
-                [I.active]: w,
-                [I.inactive]: !w,
-                [I.dragging]: o
+              onClick: () => N(d),
+              className: q(C.dot, {
+                [C.active]: P,
+                [C.inactive]: !P,
+                [C.dragging]: c
               }),
-              "aria-label": `Set value to ${e + r * i}`
+              "aria-label": `Set value to ${e + d * i}`
             },
-            r
+            d
           );
         }) }),
         /* @__PURE__ */ t.jsx(
@@ -1023,40 +989,40 @@ const jt = "_accordion_9e4oa_1", vt = "_header_9e4oa_9", kt = "_icon_9e4oa_18",
           {
             type: "range",
             min: e,
-            max: c,
+            max: o,
             step: i,
-            value: l,
-            onChange: (b) => s(Number(b.target.value)),
-            onMouseDown: () => m(!0),
-            onMouseUp: () => m(!1),
-            onTouchStart: () => m(!0),
-            onTouchEnd: () => m(!1),
-            className: I.input
+            value: a,
+            onChange: (g) => s(Number(g.target.value)),
+            onMouseDown: () => u(!0),
+            onMouseUp: () => u(!1),
+            onTouchStart: () => u(!0),
+            onTouchEnd: () => u(!1),
+            className: C.input
           }
         )
       ] }),
-      /* @__PURE__ */ t.jsxs("div", { className: I.countBlock, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: C.countBlock, children: [
         /* @__PURE__ */ t.jsx(
-          G,
+          Y,
           {
             type: "number",
             min: e,
-            max: c,
+            max: o,
             paddingless: !0,
-            onChange: (b) => {
-              const r = Number(b);
-              r > c ? s(c) : r < e ? s(e) : s(r);
+            onChange: (g) => {
+              const d = Number(g);
+              d > o ? s(o) : d < e ? s(e) : s(d);
             },
-            value: String(l)
+            value: String(a)
           }
         ),
-        /* @__PURE__ */ t.jsxs("div", { className: I.controls, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: C.controls, children: [
           /* @__PURE__ */ t.jsx(
             "button",
             {
-              onClick: a,
-              disabled: l >= c,
-              className: I.button,
+              onClick: l,
+              disabled: a >= o,
+              className: C.button,
               "aria-label": "Increment count",
               children: /* @__PURE__ */ t.jsx(
                 p,
@@ -1072,8 +1038,8 @@ const jt = "_accordion_9e4oa_1", vt = "_header_9e4oa_9", kt = "_icon_9e4oa_18",
             "button",
             {
               onClick: h,
-              disabled: l <= e,
-              className: I.button,
+              disabled: a <= e,
+              className: C.button,
               "aria-label": "Decrement count",
               children: /* @__PURE__ */ t.jsx(
                 p,
@@ -1089,42 +1055,42 @@ const jt = "_accordion_9e4oa_1", vt = "_header_9e4oa_9", kt = "_icon_9e4oa_18",
       ] })
     ] })
   ] });
-}, ys = "_subtitle_16rdk_1", Ns = "_header_16rdk_8", $s = "_text_16rdk_9", Cs = "_productsBlock_16rdk_10", Is = "_top_16rdk_22", Ps = "_itemsBlock_16rdk_31", Ts = "_typeTexts_16rdk_37", Bs = "_block_16rdk_44", ws = "_active_16rdk_57", Ss = "_products_16rdk_10", qs = "_product_16rdk_10", As = "_button_16rdk_76", Os = "_image_16rdk_87", Ls = "_info_16rdk_94", Ds = "_name_16rdk_106", Es = "_buttons_16rdk_110", Ms = "_modal_16rdk_117", Rs = "_link_16rdk_137", Hs = "_modalOptions_16rdk_143", B = {
-  subtitle: ys,
-  header: Ns,
-  text: $s,
-  productsBlock: Cs,
+}, ks = "_subtitle_16rdk_1", ys = "_header_16rdk_8", Ns = "_text_16rdk_9", $s = "_productsBlock_16rdk_10", Is = "_top_16rdk_22", Cs = "_itemsBlock_16rdk_31", ws = "_typeTexts_16rdk_37", Ts = "_block_16rdk_44", Bs = "_active_16rdk_57", Ps = "_products_16rdk_10", Ss = "_product_16rdk_10", qs = "_button_16rdk_76", As = "_image_16rdk_87", Os = "_info_16rdk_94", Ls = "_name_16rdk_106", Ds = "_buttons_16rdk_110", zs = "_modal_16rdk_117", Ms = "_link_16rdk_137", Es = "_modalOptions_16rdk_143", S = {
+  subtitle: ks,
+  header: ys,
+  text: Ns,
+  productsBlock: $s,
   top: Is,
-  itemsBlock: Ps,
-  typeTexts: Ts,
-  block: Bs,
-  active: ws,
-  products: Ss,
-  product: qs,
-  button: As,
-  image: Os,
-  info: Ls,
-  name: Ds,
-  buttons: Es,
-  modal: Ms,
-  link: Rs,
-  modalOptions: Hs
-}, Vs = (d) => {
-  const { activeItem: n, setActiveItem: e, popupPosition: c, setIsOpenModal: i } = d;
-  return /* @__PURE__ */ t.jsxs(
+  itemsBlock: Cs,
+  typeTexts: ws,
+  block: Ts,
+  active: Bs,
+  products: Ps,
+  product: Ss,
+  button: qs,
+  image: As,
+  info: Os,
+  name: Ls,
+  buttons: Ds,
+  modal: zs,
+  link: Ms,
+  modalOptions: Es
+}, Rs = (r) => {
+  const { activeItem: n, setActiveItem: e, popupPosition: o, setIsOpenModal: i, itemsOptions: a } = r, s = a.find((c) => c.id === n.listingId);
+  return s ? /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: B.modal,
-      onClick: (l) => {
-        l.stopPropagation();
+      className: S.modal,
+      onClick: (c) => {
+        c.stopPropagation();
       },
       style: {
-        top: `${c.top}px`,
-        left: `${c.left}px`
+        top: `${o.top}px`,
+        left: `${o.left}px`
       },
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: B.top, children: [
-          /* @__PURE__ */ t.jsx("h3", { children: n.name }),
+        /* @__PURE__ */ t.jsxs("div", { className: S.top, children: [
+          /* @__PURE__ */ t.jsx("h3", { children: s.productData.name }),
           /* @__PURE__ */ t.jsx(
             p,
             {
@@ -1138,95 +1104,94 @@ const jt = "_accordion_9e4oa_1", vt = "_header_9e4oa_9", kt = "_icon_9e4oa_18",
             }
           )
         ] }),
-        /* @__PURE__ */ t.jsx("div", { className: B.modalOptions, children: /* @__PURE__ */ t.jsx(
-          ot,
+        /* @__PURE__ */ t.jsx("div", { className: S.modalOptions, children: /* @__PURE__ */ t.jsx(
+          rt,
           {
             label: "Put up an attractive image",
-            onChange: (l) => {
-              const s = {
+            onChange: (c) => {
+              const u = {
                 ...n,
-                images: l,
-                imagePath: l[0]
+                image: c[0]
               };
-              e(s);
+              e(u);
             }
           }
         ) })
       ]
     }
-  );
-}, Fs = (d) => {
-  const { index: n, moveProduct: e, children: c } = d, [, i] = mt({
+  ) : null;
+}, Vs = (r) => {
+  const { index: n, moveProduct: e, children: o } = r, [, i] = xt({
     accept: "product",
-    hover(o) {
-      o.index !== n && (e(o.index, n), o.index = n);
+    hover(c) {
+      c.index !== n && (e(c.index, n), c.index = n);
     }
-  }), [{ isDragging: l }, s] = pt({
+  }), [{ isDragging: a }, s] = ft({
     type: "product",
     item: { index: n },
-    collect: (o) => ({
-      isDragging: o.isDragging()
+    collect: (c) => ({
+      isDragging: c.isDragging()
     })
   });
   return /* @__PURE__ */ t.jsx(
     "div",
     {
-      ref: (o) => s(i(o)),
-      className: `${B.product} ${l ? B.dragging : ""}`,
-      children: c
+      ref: (c) => s(i(c)),
+      className: `${S.product} ${a ? S.dragging : ""}`,
+      children: o
     }
   );
-}, ii = (d) => {
+}, Nc = (r) => {
   const {
     isActiveItems: n,
     setIsActiveItems: e,
-    items: c,
+    items: o,
     setItems: i,
-    other: l,
+    other: a,
     title: s,
-    subtitle: o,
-    editable: m = !0,
-    draggable: v = !1,
-    withImage: u = !1,
-    deletable: a = !0,
+    subtitle: c,
+    editable: u = !0,
+    draggable: y = !1,
+    withImage: _ = !1,
+    deletable: l = !0,
     addable: h = !0,
-    itemsType: $,
-    itemsOptions: b
-  } = d, [r, w] = f.useState(null), [Y, Q] = f.useState({
+    itemsType: N,
+    itemsOptions: g
+  } = r, [d, P] = b.useState(null), [U, G] = b.useState({
     top: 0,
     left: 0
-  }), [F, y] = f.useState(!1), M = (g, k) => {
-    const S = [...c], [C] = S.splice(g, 1);
-    S.splice(k, 0, C), i(S);
+  }), [R, j] = b.useState(!1), A = (f, k) => {
+    const w = [...o], [M] = w.splice(f, 1);
+    w.splice(k, 0, M), i(w);
   };
-  f.useEffect(() => {
-    const g = () => {
-      w(null), y(!1);
+  b.useEffect(() => {
+    const f = () => {
+      P(null), j(!1);
     };
-    return document.body.addEventListener("click", g), w(null), y(!1), () => {
-      w(null), y(!1), document.body.removeEventListener("click", g);
+    return document.body.addEventListener("click", f), P(null), j(!1), () => {
+      P(null), j(!1), document.body.removeEventListener("click", f);
     };
-  }, []), f.useEffect(() => {
-    if (r) {
-      const g = [...c].map((k) => k.id === r.id ? r : k);
-      i(g);
+  }, []), b.useEffect(() => {
+    if (d) {
+      const f = [...o].map((k) => k.listingId === d.listingId ? d : k);
+      i(f);
     }
-  }, [r]);
-  const R = (g, k) => {
-    g.stopPropagation();
-    const S = g.target.getBoundingClientRect(), C = 100, U = window.innerHeight;
-    let A = S.top + window.scrollY;
-    A + C > U && (A = U - C - 20), y(!0), Q({
-      top: A - 80,
-      left: S.left - 30
-    }), w(k);
+  }, [d]);
+  const V = (f, k) => {
+    f.stopPropagation();
+    const w = f.target.getBoundingClientRect(), M = 100, I = window.innerHeight;
+    let L = w.top + window.scrollY;
+    L + M > I && (L = I - M - 20), j(!0), G({
+      top: L - 80,
+      left: w.left - 30
+    }), P(k);
   };
-  function nt(g) {
-    if (u)
-      return g ? /* @__PURE__ */ t.jsx(
+  function it(f) {
+    if (_)
+      return f ? /* @__PURE__ */ t.jsx(
         "img",
         {
-          src: `https://imagedelivery.net/${g}/w=1000`,
+          src: `https://imagedelivery.net/${f}/w=1000`,
           alt: "image",
           width: 16,
           height: 16
@@ -1241,9 +1206,11 @@ const jt = "_accordion_9e4oa_1", vt = "_header_9e4oa_9", kt = "_icon_9e4oa_18",
         }
       );
   }
-  const st = (g, k) => {
-    const S = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-      v && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
+  const st = (f, k) => {
+    const w = g.find((I) => f.listingId === I.id);
+    if (!w) return null;
+    const M = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+      y && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
         p,
         {
           name: "DotsSixVertical",
@@ -1252,46 +1219,40 @@ const jt = "_accordion_9e4oa_1", vt = "_header_9e4oa_9", kt = "_icon_9e4oa_18",
           height: 20
         }
       ) }, k),
-      $ === "select" && /* @__PURE__ */ t.jsx(
-        W,
+      N === "select" && /* @__PURE__ */ t.jsx(
+        Q,
         {
-          onChange: (C) => {
-            const U = [...c], A = Number(C.split(" ")[1]), _ = b.find((N) => N.id === A);
-            if (!_) return;
+          onChange: (I) => {
+            const L = [...o], m = g.find(($) => $.productData.name === I);
+            if (!m) return;
             const T = {
-              ..._.productData.stats,
-              newPrice: _.productData.minPrice.amount,
-              oldPrice: _.productData.compareAtPrice.amount
-            }, q = U.map((N) => N.id === g.id ? {
-              ...g,
-              name: C,
-              listingId: A,
-              stats: T
-            } : N);
-            w({
-              ...g,
-              name: C,
-              listingId: A
-            }), i([...q]);
+              listingId: m.id,
+              image: m.productData.images.length > 0 ? m.productData.images[0].cfId : ""
+            }, O = L.map(($) => $.listingId === f.listingId ? T : $);
+            P(T), i([...O]);
           },
-          value: g.name,
-          options: [...b.map((C) => `Product ${C.id}`)],
-          leftAddon: nt(g.images[0])
+          value: w.productData.name,
+          options: [
+            ...g.filter((I) => !o.find((L) => L.listingId === I.id)).map((I) => I.productData.name)
+          ],
+          leftAddon: it(
+            f.image || w.productData.images.length > 0 && w.productData.images[0].cfId || ""
+          )
         },
         k
       ),
-      /* @__PURE__ */ t.jsxs("div", { className: B.buttons, children: [
-        m && /* @__PURE__ */ t.jsx(
+      /* @__PURE__ */ t.jsxs("div", { className: S.buttons, children: [
+        u && /* @__PURE__ */ t.jsx(
           p,
           {
             name: "Sliders",
             hoverable: !0,
             width: 20,
             height: 20,
-            onClick: (C) => R(C, g)
+            onClick: (I) => V(I, f)
           }
         ),
-        a && /* @__PURE__ */ t.jsx(
+        l && /* @__PURE__ */ t.jsx(
           p,
           {
             name: "Trash",
@@ -1299,72 +1260,71 @@ const jt = "_accordion_9e4oa_1", vt = "_header_9e4oa_9", kt = "_icon_9e4oa_18",
             width: 20,
             height: 20,
             fill: "#C12A2A",
-            onClick: () => i(c.filter((C) => C.id !== g.id))
+            onClick: () => i(o.filter((I) => I !== f))
           }
         )
       ] })
     ] });
-    return v ? /* @__PURE__ */ t.jsx(
-      Fs,
+    return y ? /* @__PURE__ */ t.jsx(
+      Vs,
       {
-        product: g,
+        product: f,
         index: k,
-        moveProduct: M,
-        children: S
+        moveProduct: A,
+        children: M
       },
-      g.id
+      f.listingId
     ) : /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: B.product,
-        children: S
+        className: S.product,
+        children: M
       },
-      g.id
+      f.listingId
     );
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: B.productsBlock, children: [
-    (s || n !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: B.top, children: [
-      s && /* @__PURE__ */ t.jsx("h3", { className: B.title, children: s }),
+  return /* @__PURE__ */ t.jsxs("div", { className: S.productsBlock, children: [
+    (s || n !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: S.top, children: [
+      s && /* @__PURE__ */ t.jsx("h3", { className: S.title, children: s }),
       n !== void 0 && /* @__PURE__ */ t.jsx(
-        V,
+        W,
         {
           current: n,
-          onChange: (g) => e == null ? void 0 : e(g)
+          onChange: (f) => e == null ? void 0 : e(f)
         }
       )
     ] }),
-    F && r && /* @__PURE__ */ t.jsx(
-      Vs,
+    R && d && /* @__PURE__ */ t.jsx(
+      Rs,
       {
-        activeItem: r,
-        setActiveItem: w,
-        setIsOpenModal: y,
-        popupPosition: Y
+        activeItem: d,
+        setActiveItem: P,
+        setIsOpenModal: j,
+        popupPosition: U,
+        itemsOptions: g
       }
     ),
-    /* @__PURE__ */ t.jsxs("div", { className: B.products, children: [
-      o && /* @__PURE__ */ t.jsx("h5", { className: B.subtitle, children: o }),
-      v ? /* @__PURE__ */ t.jsx(ut, { backend: _t, children: c.map((g, k) => st(g, k)) }) : c.map((g, k) => st(g, k)),
+    /* @__PURE__ */ t.jsxs("div", { className: S.products, children: [
+      c && /* @__PURE__ */ t.jsx("h5", { className: S.subtitle, children: c }),
+      y ? /* @__PURE__ */ t.jsx(ht, { backend: gt, children: o.map((f, k) => st(f, k)) }) : o.map((f, k) => st(f, k)),
       h && /* @__PURE__ */ t.jsxs(
-        X,
+        dt,
         {
-          className: B.button,
+          className: S.button,
           size: "s",
           onClick: () => {
-            const g = [...c], k = b[0].id;
-            g.push({
-              name: `Product ${k}`,
-              id: et(),
-              listingId: k,
-              imagePath: "",
-              images: [],
-              stats: {
-                ...b[0].productData.stats,
-                newPrice: b[0].productData.minPrice.amount,
-                oldPrice: b[0].productData.compareAtPrice.amount
+            const f = [...o];
+            for (let k = 0; k < g.length; k++)
+              if (!o.find((w) => w.listingId === g[k].id)) {
+                f.push({
+                  listingId: g[k].id,
+                  image: g[k].productData.images.length > 0 ? g[k].productData.images[0].cfId : ""
+                });
+                break;
               }
-            }), i(g);
+            i(f);
           },
+          disabled: o.length === g.length,
           children: [
             /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
             /* @__PURE__ */ t.jsx(
@@ -1379,120 +1339,164 @@ const jt = "_accordion_9e4oa_1", vt = "_header_9e4oa_9", kt = "_icon_9e4oa_18",
         }
       )
     ] }),
-    l !== void 0 && /* @__PURE__ */ t.jsx(ft, { items: l })
+    a !== void 0 && /* @__PURE__ */ t.jsx(kt, { items: a })
   ] });
-}, Us = "_options_11lki_1", zs = "_price_11lki_12", Gs = "_oldPrice_11lki_19", Ws = "_newPrice_11lki_27", Xs = "_meta_11lki_34", Ys = "_info_11lki_40", Qs = "_infoRight_11lki_48", Js = "_buttons_11lki_55", Ks = "_variants_11lki_62", Zs = "_variant_11lki_62", tn = "_stock_11lki_79", en = "_variantInfo_11lki_86", sn = "_quantity_11lki_92", nn = "_count_11lki_99", cn = "_button_11lki_55", on = "_activeVariant_11lki_120", an = "_chargeTypes_11lki_124", ln = "_charge_11lki_124", rn = "_chargeActive_11lki_145", dn = "_title_11lki_150", j = {
-  options: Us,
-  price: zs,
-  oldPrice: Gs,
-  newPrice: Ws,
-  meta: Xs,
-  info: Ys,
-  infoRight: Qs,
-  buttons: Js,
-  variants: Ks,
-  variant: Zs,
-  stock: tn,
-  variantInfo: en,
-  quantity: sn,
-  count: nn,
-  button: cn,
-  activeVariant: on,
-  chargeTypes: an,
-  charge: ln,
-  chargeActive: rn,
-  title: dn
+}, Hs = "_options_11lki_1", Fs = "_price_11lki_12", Us = "_oldPrice_11lki_19", Gs = "_newPrice_11lki_27", Ws = "_meta_11lki_34", Xs = "_info_11lki_40", Ys = "_infoRight_11lki_48", Qs = "_buttons_11lki_55", Js = "_variants_11lki_62", Ks = "_variant_11lki_62", Zs = "_stock_11lki_79", tn = "_variantInfo_11lki_86", en = "_quantity_11lki_92", sn = "_count_11lki_99", nn = "_button_11lki_55", cn = "_activeVariant_11lki_120", on = "_chargeTypes_11lki_124", an = "_charge_11lki_124", ln = "_chargeActive_11lki_145", rn = "_title_11lki_150", v = {
+  options: Hs,
+  price: Fs,
+  oldPrice: Us,
+  newPrice: Gs,
+  meta: Ws,
+  info: Xs,
+  infoRight: Ys,
+  buttons: Qs,
+  variants: Js,
+  variant: Ks,
+  stock: Zs,
+  variantInfo: tn,
+  quantity: en,
+  count: sn,
+  button: nn,
+  activeVariant: cn,
+  chargeTypes: on,
+  charge: an,
+  chargeActive: ln,
+  title: rn
+}, dn = "_button_143au_1", un = "_primary_143au_13", _n = "_secondary_143au_18", mn = "_tertiary_143au_23", pn = "_content_143au_28", tt = {
+  button: dn,
+  primary: un,
+  secondary: _n,
+  tertiary: mn,
+  content: pn
+}, lt = (r) => {
+  const {
+    children: n,
+    onClick: e,
+    style: o,
+    className: i,
+    disabled: a = !1,
+    size: s = "m",
+    type: c = "Primary"
+  } = r;
+  return /* @__PURE__ */ t.jsx(
+    "button",
+    {
+      className: q(tt.button, i, {
+        [tt.primary]: c === "Primary",
+        [tt.secondary]: c === "Secondary",
+        [tt.tertiary]: c === "Tertiary"
+      }),
+      onClick: e,
+      style: {
+        ...o,
+        fontSize: s === "m" ? 14 : s === "s" ? 12 : 16
+      },
+      disabled: a,
+      children: c === "Tertiary" ? /* @__PURE__ */ t.jsxs("div", { className: tt.content, children: [
+        /* @__PURE__ */ t.jsx(
+          p,
+          {
+            name: "ArrowRight",
+            fill: "#757575",
+            width: 20,
+            height: 20
+          }
+        ),
+        n
+      ] }) : /* @__PURE__ */ t.jsx(t.Fragment, { children: n })
+    }
+  );
 };
-var bt = /* @__PURE__ */ ((d) => (d.ONE_TIME = "One-Time", d.RECURRING = "Subscribe & Save", d))(bt || {});
-const ci = (d) => {
-  const { variants: n } = d, [e, c] = f.useState(n[0]), [i, l] = f.useState(e.chargeTypes[0]), s = at(), [o, m] = f.useState(1), { reset: v, addProductToCart: u, getProducts: a } = lt();
+var yt = /* @__PURE__ */ ((r) => (r.ONE_TIME = "One-Time", r.RECURRING = "Subscribe & Save", r))(yt || {});
+const $c = (r) => {
+  const { variants: n } = r, [e, o] = b.useState(n[0]), [i, a] = b.useState(e.chargeTypes[0]), s = ut(), [c, u] = b.useState(1), { reset: y, addProductToCart: _, getProducts: l } = _t();
   async function h() {
-    await a(), await u({
-      productId: d.id,
+    await l(), await _({
+      productId: r.id,
       productVariantId: e.id,
-      quantity: o
+      quantity: c
     });
   }
-  function $() {
-    v(), h(), s("/checkout");
+  function N() {
+    y(), h(), s("/checkout");
   }
-  function b(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"}`;
+  function g(d) {
+    if (d >= 864e5) {
+      const j = Math.floor(d / 864e5);
+      return `${j} ${j === 1 ? "day" : "days"}`;
+    } else if (d >= 36e5) {
+      const j = Math.floor(d / 36e5);
+      return `${j} ${j === 1 ? "hour" : "hours"}`;
+    } else if (d >= 6e4) {
+      const j = Math.floor(d / 6e4);
+      return `${j} ${j === 1 ? "minute" : "minutes"}`;
     } else {
-      const y = Math.floor(r / 1e3);
-      return `${y} ${y === 1 ? "second" : "seconds"}`;
+      const j = Math.floor(d / 1e3);
+      return `${j} ${j === 1 ? "second" : "seconds"}`;
     }
   }
-  return /* @__PURE__ */ t.jsxs("div", { className: j.options, children: [
-    e.chargeTypes.length > 1 && /* @__PURE__ */ t.jsx("div", { className: j.chargeTypes, children: e.chargeTypes.map((r) => /* @__PURE__ */ t.jsx(
+  return /* @__PURE__ */ t.jsxs("div", { className: v.options, children: [
+    e.chargeTypes.length > 1 && /* @__PURE__ */ t.jsx("div", { className: v.chargeTypes, children: e.chargeTypes.map((d) => /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: D(j.charge, {
-          [j.chargeActive]: i === r
+        className: q(v.charge, {
+          [v.chargeActive]: i === d
         }),
-        onClick: () => l(r),
-        children: bt[r]
+        onClick: () => a(d),
+        children: yt[d]
       },
-      r
+      d
     )) }),
-    /* @__PURE__ */ t.jsx("div", { className: j.variants, children: n.map((r) => /* @__PURE__ */ t.jsxs(
+    /* @__PURE__ */ t.jsx("div", { className: v.variants, children: n.map((d) => /* @__PURE__ */ t.jsxs(
       "div",
       {
-        className: D(j.variant, {
-          [j.activeVariant]: e.id === r.id
+        className: q(v.variant, {
+          [v.activeVariant]: e.id === d.id
         }),
-        onClick: () => c(r),
+        onClick: () => o(d),
         children: [
-          /* @__PURE__ */ t.jsxs("div", { className: j.variantInfo, children: [
-            /* @__PURE__ */ t.jsx("span", { className: j.title, children: r.name }),
+          /* @__PURE__ */ t.jsxs("div", { className: v.variantInfo, children: [
+            /* @__PURE__ */ t.jsx("span", { className: v.title, children: d.name }),
             /* @__PURE__ */ t.jsxs("span", { children: [
               "$",
-              i === "ONE_TIME" ? r.price.amount : r.subscriptionSettings.price.amount
+              i === "ONE_TIME" ? d.price.amount : d.subscriptionSettings.price.amount
             ] })
           ] }),
-          /* @__PURE__ */ t.jsx("div", { children: i === "ONE_TIME" && /* @__PURE__ */ t.jsxs("span", { className: j.stock, children: [
-            r.quantity.restrictions.max || 0,
+          /* @__PURE__ */ t.jsx("div", { children: i === "ONE_TIME" && /* @__PURE__ */ t.jsxs("span", { className: v.stock, children: [
+            d.quantity.restrictions.max || 0,
             " in stock"
           ] }) })
         ]
       },
-      r.id
+      d.id
     )) }),
-    i === "ONE_TIME" && /* @__PURE__ */ t.jsxs("div", { className: j.quantity, children: [
+    i === "ONE_TIME" && /* @__PURE__ */ t.jsxs("div", { className: v.quantity, children: [
       /* @__PURE__ */ t.jsx(
         "div",
         {
           onClick: () => {
-            o > 1 ? m((r) => r - 1) : m(1);
+            c > 1 ? u((d) => d - 1) : u(1);
           },
-          className: j.button,
+          className: v.button,
           children: /* @__PURE__ */ t.jsx(p, { name: "Minus" })
         }
       ),
-      /* @__PURE__ */ t.jsx("div", { className: j.count, children: o }),
+      /* @__PURE__ */ t.jsx("div", { className: v.count, children: c }),
       /* @__PURE__ */ t.jsx(
         "div",
         {
           onClick: () => {
-            m((r) => r + 1);
+            u((d) => d + 1);
           },
-          className: j.button,
+          className: v.button,
           children: /* @__PURE__ */ t.jsx(p, { name: "Plus" })
         }
       )
     ] }),
-    /* @__PURE__ */ t.jsxs("div", { className: j.meta, children: [
-      /* @__PURE__ */ t.jsxs("div", { className: j.info, children: [
+    /* @__PURE__ */ t.jsxs("div", { className: v.meta, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: v.info, children: [
         /* @__PURE__ */ t.jsx("span", { children: "Delivery" }),
-        /* @__PURE__ */ t.jsxs("div", { className: j.infoRight, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: v.infoRight, children: [
           /* @__PURE__ */ t.jsx(
             p,
             {
@@ -1502,49 +1506,49 @@ const ci = (d) => {
               height: 20
             }
           ),
-          /* @__PURE__ */ t.jsx("span", { children: e.deliveryTime === 0 ? "Instant" : b(e.deliveryTime) })
+          /* @__PURE__ */ t.jsx("span", { children: e.deliveryTime === 0 ? "Instant" : g(e.deliveryTime) })
         ] })
       ] }),
-      /* @__PURE__ */ t.jsxs("div", { className: j.info, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: v.info, children: [
         /* @__PURE__ */ t.jsx("span", { children: "Price" }),
-        /* @__PURE__ */ t.jsx("div", { className: j.infoRight, children: i === "ONE_TIME" ? e.compareAtPrice && (e.compareAtPrice.amount || 0) - (e.price.amount || 0) > 0 ? /* @__PURE__ */ t.jsxs("div", { className: j.price, children: [
-          /* @__PURE__ */ t.jsxs("span", { className: j.newPrice, children: [
+        /* @__PURE__ */ t.jsx("div", { className: v.infoRight, children: i === "ONE_TIME" ? e.compareAtPrice && (e.compareAtPrice.amount || 0) - (e.price.amount || 0) > 0 ? /* @__PURE__ */ t.jsxs("div", { className: v.price, children: [
+          /* @__PURE__ */ t.jsxs("span", { className: v.newPrice, children: [
             "$ ",
-            (e.price.amount || 0) * o
+            (e.price.amount || 0) * c
           ] }),
-          /* @__PURE__ */ t.jsxs("span", { className: j.oldPrice, children: [
+          /* @__PURE__ */ t.jsxs("span", { className: v.oldPrice, children: [
             "$ ",
-            (e.compareAtPrice.amount || 0) * o
+            (e.compareAtPrice.amount || 0) * c
           ] })
-        ] }) : /* @__PURE__ */ t.jsxs("span", { className: j.newPrice, children: [
+        ] }) : /* @__PURE__ */ t.jsxs("span", { className: v.newPrice, children: [
           "$ ",
-          (e.price.amount || 0) * o
-        ] }) : e.subscriptionSettings.compareAtPrice && (e.subscriptionSettings.compareAtPrice.amount || 0) - (e.subscriptionSettings.price.amount || 0) > 0 ? /* @__PURE__ */ t.jsxs("div", { className: j.price, children: [
-          /* @__PURE__ */ t.jsxs("span", { className: j.newPrice, children: [
+          (e.price.amount || 0) * c
+        ] }) : e.subscriptionSettings.compareAtPrice && (e.subscriptionSettings.compareAtPrice.amount || 0) - (e.subscriptionSettings.price.amount || 0) > 0 ? /* @__PURE__ */ t.jsxs("div", { className: v.price, children: [
+          /* @__PURE__ */ t.jsxs("span", { className: v.newPrice, children: [
             "$ ",
             e.subscriptionSettings.price.amount || 0
           ] }),
-          /* @__PURE__ */ t.jsxs("span", { className: j.oldPrice, children: [
+          /* @__PURE__ */ t.jsxs("span", { className: v.oldPrice, children: [
             "$ ",
             e.subscriptionSettings.compareAtPrice.amount || 0
           ] })
-        ] }) : /* @__PURE__ */ t.jsxs("span", { className: j.newPrice, children: [
+        ] }) : /* @__PURE__ */ t.jsxs("span", { className: v.newPrice, children: [
           "$ ",
           e.subscriptionSettings.price.amount || 0
         ] }) })
       ] })
     ] }),
-    /* @__PURE__ */ t.jsxs("div", { className: j.buttons, children: [
+    /* @__PURE__ */ t.jsxs("div", { className: v.buttons, children: [
       /* @__PURE__ */ t.jsx(
-        X,
+        lt,
         {
           type: "Primary",
-          onClick: () => $(),
-          children: "Buy Now"
+          onClick: () => N(),
+          children: /* @__PURE__ */ t.jsx("span", { children: i === "ONE_TIME" ? "Buy Now" : "Subscribe Now" })
         }
       ),
       i === "ONE_TIME" && /* @__PURE__ */ t.jsx(
-        X,
+        lt,
         {
           type: "Secondary",
           onClick: () => h(),
@@ -1553,47 +1557,47 @@ const ci = (d) => {
       )
     ] })
   ] });
-}, un = "_button_iklta_1", _n = "_login_iklta_14", mn = "_signUp_iklta_18", pn = "_buttons_iklta_23", hn = "_modal_iklta_32", gn = "_info_iklta_48", xn = "_top_iklta_55", fn = "_title_iklta_66", bn = "_clear_iklta_72", jn = "_activeClear_iklta_79", vn = "_count_iklta_83", kn = "_cart_iklta_98", yn = "_empty_iklta_106", Nn = "_product_iklta_132", $n = "_products_iklta_141", Cn = "_image_iklta_149", In = "_productInfo_iklta_155", Pn = "_content_iklta_162", Tn = "_name_iklta_168", Bn = "_price_iklta_174", wn = "_productButtons_iklta_180", Sn = "_productButton_iklta_180", qn = "_productCount_iklta_200", An = "_bottom_iklta_216", On = "_subtotal_iklta_224", Ln = "_block_iklta_232", Dn = "_shoppingCount_iklta_239", En = "_total_iklta_259", Mn = "_link_iklta_265", x = {
-  button: un,
-  login: _n,
-  signUp: mn,
-  buttons: pn,
-  modal: hn,
-  info: gn,
-  top: xn,
-  title: fn,
-  clear: bn,
-  activeClear: jn,
-  count: vn,
-  cart: kn,
-  empty: yn,
-  product: Nn,
-  products: $n,
-  image: Cn,
-  productInfo: In,
-  content: Pn,
-  name: Tn,
-  price: Bn,
-  productButtons: wn,
-  productButton: Sn,
-  productCount: qn,
-  bottom: An,
-  subtotal: On,
-  block: Ln,
-  shoppingCount: Dn,
-  total: En,
-  link: Mn
-}, oi = (d) => {
-  const { shopping: n, signUp: e } = d, c = at();
-  function i(l) {
-    c(l);
+}, hn = "_button_1kcpz_1", gn = "_login_1kcpz_14", xn = "_signUp_1kcpz_18", fn = "_buttons_1kcpz_23", bn = "_modal_1kcpz_32", jn = "_info_1kcpz_48", vn = "_top_1kcpz_55", kn = "_title_1kcpz_66", yn = "_clear_1kcpz_72", Nn = "_activeClear_1kcpz_79", $n = "_count_1kcpz_83", In = "_cart_1kcpz_98", Cn = "_empty_1kcpz_106", wn = "_product_1kcpz_132", Tn = "_products_1kcpz_141", Bn = "_image_1kcpz_149", Pn = "_productInfo_1kcpz_155", Sn = "_content_1kcpz_162", qn = "_name_1kcpz_168", An = "_price_1kcpz_174", On = "_productButtons_1kcpz_180", Ln = "_productButton_1kcpz_180", Dn = "_productCount_1kcpz_200", zn = "_bottom_1kcpz_216", Mn = "_subtotal_1kcpz_224", En = "_block_1kcpz_232", Rn = "_shoppingCount_1kcpz_239", Vn = "_total_1kcpz_259", Hn = "_link_1kcpz_265", x = {
+  button: hn,
+  login: gn,
+  signUp: xn,
+  buttons: fn,
+  modal: bn,
+  info: jn,
+  top: vn,
+  title: kn,
+  clear: yn,
+  activeClear: Nn,
+  count: $n,
+  cart: In,
+  empty: Cn,
+  product: wn,
+  products: Tn,
+  image: Bn,
+  productInfo: Pn,
+  content: Sn,
+  name: qn,
+  price: An,
+  productButtons: On,
+  productButton: Ln,
+  productCount: Dn,
+  bottom: zn,
+  subtotal: Mn,
+  block: En,
+  shoppingCount: Rn,
+  total: Vn,
+  link: Hn
+}, Ic = (r) => {
+  const { shopping: n, signUp: e } = r, o = ut();
+  function i(a) {
+    o(a);
   }
   return /* @__PURE__ */ t.jsxs("div", { className: x.buttons, children: [
-    n && /* @__PURE__ */ t.jsx(Rn, {}),
+    n && /* @__PURE__ */ t.jsx(Fn, {}),
     /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: D(x.button, x.login),
+        className: q(x.button, x.login),
         onClick: () => i("/customer-dash"),
         children: "Login"
       }
@@ -1601,103 +1605,103 @@ const ci = (d) => {
     e && /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: D(x.button, x.login, x.signUp),
+        className: q(x.button, x.login, x.signUp),
         onClick: () => i("/customer-dash"),
         children: "Sign Up"
       }
     )
   ] });
-}, Rn = () => {
-  const [d, n] = f.useState(!1), [e, c] = f.useState([]), { cart: i, getProducts: l } = lt();
-  function s(u) {
-    for (let a = 0; a < i.parts.length; a++)
-      for (let h = 0; h < u.variants.length; h++)
-        if (i.parts[a].productVariantId === u.variants[a].id)
-          return i.parts[a].productVariantId;
+}, Fn = () => {
+  const [r, n] = b.useState(!1), [e, o] = b.useState([]), { cart: i, getProducts: a } = _t();
+  function s(_) {
+    for (let l = 0; l < i.parts.length; l++)
+      for (let h = 0; h < _.variants.length; h++)
+        if (i.parts[l].productVariantId === _.variants[l].id)
+          return i.parts[l].productVariantId;
   }
-  function o(u) {
-    for (let a = 0; a < i.parts.length; a++)
-      for (let h = 0; h < u.variants.length; h++)
-        if (i.parts[a].productVariantId === u.variants[a].id)
-          return i.parts[a].quantity;
+  function c(_) {
+    for (let l = 0; l < i.parts.length; l++)
+      for (let h = 0; h < _.variants.length; h++)
+        if (i.parts[l].productVariantId === _.variants[l].id)
+          return i.parts[l].quantity;
   }
-  f.useEffect(() => {
+  b.useEffect(() => {
     (async () => {
-      const a = i.parts.map((b) => String(b.productId)), $ = (await l([...a])).map((b) => ({
-        ...b,
-        activeVariantId: s(b),
-        quantity: o(b)
+      const l = i.parts.map((g) => String(g.productId)), N = (await a([...l])).map((g) => ({
+        ...g,
+        activeVariantId: s(g),
+        quantity: c(g)
       }));
-      c($);
+      o(N);
     })();
   }, [i]);
-  function m(u) {
-    var a;
-    return !u || !(u != null && u.variants) ? !1 : (a = u.variants.find((h) => h.id === u.activeVariantId)) == null ? void 0 : a.subscriptionSettings;
+  function u(_) {
+    var l;
+    return !_ || !(_ != null && _.variants) ? !1 : (l = _.variants.find((h) => h.id === _.activeVariantId)) == null ? void 0 : l.subscriptionSettings;
   }
-  const v = i.parts.length > 0 && e.length > 0 && !m(e[0]);
+  const y = i.parts.length > 0 && e.length > 0 && !u(e[0]);
   return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
     /* @__PURE__ */ t.jsxs(
       "div",
       {
         className: x.button,
-        onClick: (u) => {
-          u.stopPropagation(), n(!0);
+        onClick: (_) => {
+          _.stopPropagation(), n(!0);
         },
         children: [
           /* @__PURE__ */ t.jsx(
             p,
             {
               name: "Handbag",
-              fill: "#252525"
+              fill: "var(--icon-primary)"
             }
           ),
-          v && /* @__PURE__ */ t.jsx("div", { className: x.shoppingCount, children: i.parts.length })
+          y && /* @__PURE__ */ t.jsx("div", { className: x.shoppingCount, children: i.parts.length })
         ]
       }
     ),
-    d && /* @__PURE__ */ t.jsx(ht, { close: n, children: /* @__PURE__ */ t.jsx(
-      Hn,
+    r && /* @__PURE__ */ t.jsx(bt, { close: n, children: /* @__PURE__ */ t.jsx(
+      Un,
       {
         activeProducts: e,
-        isCartNotEmpty: v
+        isCartNotEmpty: y
       }
     ) })
   ] });
-}, Hn = (d) => {
-  const { activeProducts: n, isCartNotEmpty: e } = d, { cart: c, reset: i, getTotalAndDiscount: l, updateQuantityOfProduct: s } = lt(), o = at();
-  function m(a) {
-    o(a);
+}, Un = (r) => {
+  const { activeProducts: n, isCartNotEmpty: e } = r, { cart: o, reset: i, getTotalAndDiscount: a, updateQuantityOfProduct: s } = _t(), c = ut();
+  function u(l) {
+    c(l);
   }
-  function v(a) {
+  function y(l) {
     s({
-      productId: a.id,
-      productVariantId: a.activeVariantId,
-      quantity: a.quantity + 1
+      productId: l.id,
+      productVariantId: l.activeVariantId,
+      quantity: l.quantity + 1
     });
   }
-  function u(a) {
+  function _(l) {
     s({
-      productId: a.id,
-      productVariantId: a.activeVariantId,
-      quantity: a.quantity - 1
+      productId: l.id,
+      productVariantId: l.activeVariantId,
+      quantity: l.quantity - 1
     });
   }
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
       className: x.modal,
-      onClick: (a) => a.stopPropagation(),
+      onClick: (l) => l.stopPropagation(),
       children: [
         /* @__PURE__ */ t.jsxs("div", { className: x.top, children: [
           /* @__PURE__ */ t.jsxs("div", { className: x.info, children: [
             /* @__PURE__ */ t.jsx("span", { className: x.title, children: "Cart" }),
-            e && /* @__PURE__ */ t.jsx("div", { className: x.count, children: c.parts.length })
+            e && /* @__PURE__ */ t.jsx("div", { className: x.count, children: o.parts.length })
           ] }),
           /* @__PURE__ */ t.jsx(
             "button",
             {
-              className: D(x.clear, {
+              className: q(x.clear, {
                 [x.activeClear]: e
               }),
               disabled: !e,
@@ -1707,7 +1711,7 @@ const ci = (d) => {
           )
         ] }),
         e ? /* @__PURE__ */ t.jsxs("div", { className: x.cart, children: [
-          /* @__PURE__ */ t.jsx("div", { className: x.products, children: n.map((a) => /* @__PURE__ */ t.jsxs(
+          /* @__PURE__ */ t.jsx("div", { className: x.products, children: n.map((l) => /* @__PURE__ */ t.jsxs(
             "div",
             {
               className: x.product,
@@ -1716,7 +1720,7 @@ const ci = (d) => {
                   /* @__PURE__ */ t.jsx(
                     "img",
                     {
-                      src: `https://imagedelivery.net/${a.images[0].cfId}/w=500`,
+                      src: `https://imagedelivery.net/${l.images[0].cfId}/w=500`,
                       alt: "image",
                       width: "100%",
                       height: "100%",
@@ -1724,10 +1728,10 @@ const ci = (d) => {
                     }
                   ),
                   /* @__PURE__ */ t.jsxs("div", { className: x.content, children: [
-                    /* @__PURE__ */ t.jsx("div", { className: x.name, children: a.name }),
+                    /* @__PURE__ */ t.jsx("div", { className: x.name, children: l.name }),
                     /* @__PURE__ */ t.jsxs("div", { className: x.price, children: [
                       "$",
-                      a.variants.find((h) => h.id === a.activeVariantId).price.amount * ((a == null ? void 0 : a.quantity) || 1)
+                      l.variants.find((h) => h.id === l.activeVariantId).price.amount * ((l == null ? void 0 : l.quantity) || 1)
                     ] })
                   ] })
                 ] }),
@@ -1736,7 +1740,7 @@ const ci = (d) => {
                     "div",
                     {
                       onClick: () => {
-                        a.quantity !== 1 && u(a);
+                        l.quantity !== 1 && _(l);
                       },
                       className: x.productButton,
                       children: /* @__PURE__ */ t.jsx(
@@ -1750,11 +1754,11 @@ const ci = (d) => {
                       )
                     }
                   ),
-                  /* @__PURE__ */ t.jsx("div", { className: x.productCount, children: a.quantity }),
+                  /* @__PURE__ */ t.jsx("div", { className: x.productCount, children: l.quantity }),
                   /* @__PURE__ */ t.jsx(
                     "div",
                     {
-                      onClick: () => v(a),
+                      onClick: () => y(l),
                       className: x.productButton,
                       children: /* @__PURE__ */ t.jsx(
                         p,
@@ -1770,7 +1774,7 @@ const ci = (d) => {
                 ] })
               ]
             },
-            a.id
+            l.id
           )) }),
           /* @__PURE__ */ t.jsxs("div", { className: x.bottom, children: [
             /* @__PURE__ */ t.jsxs("div", { className: x.subtotal, children: [
@@ -1788,16 +1792,16 @@ const ci = (d) => {
               ] }),
               /* @__PURE__ */ t.jsxs("div", { className: x.total, children: [
                 "$",
-                l().total
+                a().total
               ] })
             ] }),
-            /* @__PURE__ */ t.jsx(X, { onClick: () => m("/checkout"), children: "Checkout" })
+            /* @__PURE__ */ t.jsx(lt, { onClick: () => u("/checkout"), children: "Checkout" })
           ] })
-        ] }) : /* @__PURE__ */ t.jsx(Vn, {})
+        ] }) : /* @__PURE__ */ t.jsx(Gn, {})
       ]
     }
   );
-}, Vn = () => /* @__PURE__ */ t.jsxs("div", { className: x.empty, children: [
+}, Gn = () => /* @__PURE__ */ t.jsxs("div", { className: x.empty, children: [
   /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(p, { name: "Handbag" }) }),
   /* @__PURE__ */ t.jsx("span", { children: "Your cart is empty" }),
   /* @__PURE__ */ t.jsxs("span", { children: [
@@ -1812,28 +1816,28 @@ const ci = (d) => {
       }
     )
   ] })
-] }), Fn = "_share_9g414_1", Un = "_modal_9g414_8", zn = "_header_9g414_14", Gn = "_socials_9g414_24", Wn = "_social_9g414_24", Xn = "_copy_9g414_34", Yn = "_title_9g414_41", Qn = "_copyWrapper_9g414_47", Jn = "_copyText_9g414_56", L = {
-  share: Fn,
-  modal: Un,
-  header: zn,
-  socials: Gn,
-  social: Wn,
-  copy: Xn,
-  title: Yn,
-  copyWrapper: Qn,
-  copyText: Jn
-}, ai = () => {
-  const { isOpenModal: d, setIsOpenModal: n } = gt();
+] }), Wn = "_share_9g414_1", Xn = "_modal_9g414_8", Yn = "_header_9g414_14", Qn = "_socials_9g414_24", Jn = "_social_9g414_24", Kn = "_copy_9g414_34", Zn = "_title_9g414_41", tc = "_copyWrapper_9g414_47", ec = "_copyText_9g414_56", z = {
+  share: Wn,
+  modal: Xn,
+  header: Yn,
+  socials: Qn,
+  social: Jn,
+  copy: Kn,
+  title: Zn,
+  copyWrapper: tc,
+  copyText: ec
+}, Cc = () => {
+  const { isOpenModal: r, setIsOpenModal: n } = jt();
   function e() {
     n(!0);
   }
-  return console.log(d), /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
     /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: L.share,
-        onClick: (c) => {
-          c.stopPropagation(), e();
+        className: z.share,
+        onClick: (o) => {
+          o.stopPropagation(), e();
         },
         children: /* @__PURE__ */ t.jsx(
           p,
@@ -1844,43 +1848,43 @@ const ci = (d) => {
         )
       }
     ),
-    d && /* @__PURE__ */ t.jsx(ht, { close: n, children: /* @__PURE__ */ t.jsx(Kn, {}) })
+    r && /* @__PURE__ */ t.jsx(bt, { close: n, children: /* @__PURE__ */ t.jsx(sc, {}) })
   ] });
-}, rt = {
+}, mt = {
   facebook: "FacebookLogo",
   "x.com": "TwitterLogo",
   telegram: "TelegramLogo",
   instagram: "InstagramLogo",
   discord: "MessengerLogo",
   tiktok: "TiktokLogo"
-}, Kn = () => {
-  const { setIsOpenModal: d } = gt(), n = window.location.href;
+}, sc = () => {
+  const { setIsOpenModal: r } = jt(), n = window.location.href;
   function e() {
     navigator.clipboard.writeText(n);
   }
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: L.modal,
-      onClick: (c) => c.stopPropagation(),
+      className: z.modal,
+      onClick: (o) => o.stopPropagation(),
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: L.header, children: [
-          /* @__PURE__ */ t.jsx("div", { className: L.title, children: "Share this Post" }),
+        /* @__PURE__ */ t.jsxs("div", { className: z.header, children: [
+          /* @__PURE__ */ t.jsx("div", { className: z.title, children: "Share this Post" }),
           /* @__PURE__ */ t.jsx(
             p,
             {
               name: "X",
               fill: "#757575",
-              onClick: () => d(!1)
+              onClick: () => r(!1)
             }
           )
         ] }),
-        /* @__PURE__ */ t.jsx("div", { className: L.socials, children: Object.keys(rt).map((c) => /* @__PURE__ */ t.jsx("div", { className: L.social, children: /* @__PURE__ */ t.jsx(p, { name: rt[c] }) })) }),
-        /* @__PURE__ */ t.jsxs("div", { className: L.copyWrapper, children: [
+        /* @__PURE__ */ t.jsx("div", { className: z.socials, children: Object.keys(mt).map((o) => /* @__PURE__ */ t.jsx("div", { className: z.social, children: /* @__PURE__ */ t.jsx(p, { name: mt[o] }) })) }),
+        /* @__PURE__ */ t.jsxs("div", { className: z.copyWrapper, children: [
           /* @__PURE__ */ t.jsx(
             "div",
             {
-              className: D(L.copy, L.copyText),
+              className: q(z.copy, z.copyText),
               onClick: e,
               children: n
             }
@@ -1889,7 +1893,7 @@ const ci = (d) => {
             "div",
             {
               onClick: e,
-              className: L.copy,
+              className: z.copy,
               children: /* @__PURE__ */ t.jsx(p, { name: "Copy" })
             }
           )
@@ -1897,38 +1901,192 @@ const ci = (d) => {
       ]
     }
   );
+}, nc = "_accordion_9e4oa_1", cc = "_header_9e4oa_9", ic = "_icon_9e4oa_18", oc = "_open_9e4oa_21", ac = "_content_9e4oa_25", et = {
+  accordion: nc,
+  header: cc,
+  icon: ic,
+  open: oc,
+  content: ac
+}, wc = ({ title: r, content: n }) => {
+  const [e, o] = b.useState(!1), [i, a] = b.useState(0), s = b.useRef(null), c = () => {
+    o(!e);
+  };
+  return b.useEffect(() => {
+    s.current && a(e ? s.current.scrollHeight : 0);
+  }, [e]), /* @__PURE__ */ t.jsxs("div", { className: et.accordion, children: [
+    /* @__PURE__ */ t.jsxs(
+      "div",
+      {
+        className: et.header,
+        onClick: c,
+        children: [
+          /* @__PURE__ */ t.jsx("h3", { children: r }),
+          /* @__PURE__ */ t.jsx("div", { className: q(et.icon, { [et.open]: e }), children: /* @__PURE__ */ t.jsx(p, { name: "CaretDown" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ t.jsx(
+      "div",
+      {
+        ref: s,
+        className: et.content,
+        style: { height: `${i}px` },
+        children: /* @__PURE__ */ t.jsx("p", { children: n })
+      }
+    )
+  ] });
+}, lc = "_wrapper_1mken_1", rc = "_label_1mken_9", dc = "_input_1mken_17", uc = "_required_1mken_36", _c = "_paddingless_1mken_40", mc = "_content_1mken_44", pc = "_borderless_1mken_52", hc = "_rightIcon_1mken_57", F = {
+  wrapper: lc,
+  label: rc,
+  input: dc,
+  required: uc,
+  paddingless: _c,
+  content: mc,
+  borderless: pc,
+  rightIcon: hc
+}, Tc = (r) => {
+  const {
+    onChange: n,
+    style: e,
+    label: o,
+    value: i,
+    type: a,
+    min: s,
+    max: c,
+    placeholder: u,
+    disabled: y = !1,
+    required: _ = !1,
+    regex: l,
+    paddingless: h = !1,
+    borderless: N = !1,
+    editable: g = !1,
+    isSearch: d = !1
+  } = r, [P, U] = b.useState(!1);
+  function G(j) {
+    return Number(j) < 0 ? String(s) : j;
+  }
+  function R(j) {
+    return !_ || !l ? !0 : new RegExp(l).test(j);
+  }
+  return /* @__PURE__ */ t.jsxs("div", { className: F.wrapper, children: [
+    o && /* @__PURE__ */ t.jsx(
+      "label",
+      {
+        className: F.label,
+        htmlFor: o,
+        children: o
+      }
+    ),
+    /* @__PURE__ */ t.jsxs("div", { className: F.content, children: [
+      /* @__PURE__ */ t.jsx(
+        "input",
+        {
+          id: o,
+          type: a || "text",
+          onChange: (j) => {
+            if (a === "text") n(j.target.value);
+            else {
+              const A = G(j.target.value);
+              n(A);
+            }
+          },
+          value: i,
+          autoComplete: "off",
+          placeholder: u || "Type something...",
+          className: q(F.input, {
+            [F.required]: P && _ && !R(i),
+            [F.paddingless]: h,
+            [F.borderless]: N
+          }),
+          min: a === "number" ? s : void 0,
+          max: a === "number" ? c : void 0,
+          disabled: y,
+          onFocus: () => U(!0),
+          style: e
+        }
+      ),
+      d && /* @__PURE__ */ t.jsx("div", { className: F.rightIcon, children: /* @__PURE__ */ t.jsx(
+        p,
+        {
+          name: "MagnifyingGlass",
+          fill: "var(--icon-secondary)",
+          width: 20,
+          height: 20
+        }
+      ) }),
+      g && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
+        p,
+        {
+          name: "Sliders",
+          width: 20,
+          height: 20,
+          hoverable: !0
+        }
+      ) })
+    ] })
+  ] });
+}, gc = "_wrapper_st58d_1", xc = "_label_st58d_10", fc = "_textarea_st58d_18", bc = "_length_st58d_33", nt = {
+  wrapper: gc,
+  label: xc,
+  textarea: fc,
+  length: bc
+}, Bc = (r) => {
+  const { onChange: n, label: e, value: o, maxLength: i, placeholder: a = "Type something..." } = r, [s, c] = b.useState(o.length);
+  return /* @__PURE__ */ t.jsxs("div", { className: nt.wrapper, children: [
+    e && /* @__PURE__ */ t.jsx(
+      "label",
+      {
+        className: nt.label,
+        htmlFor: e,
+        children: e
+      }
+    ),
+    /* @__PURE__ */ t.jsx(
+      "textarea",
+      {
+        id: e,
+        defaultValue: o,
+        onChange: (u) => {
+          c(u.target.value.length), n(u.target.value);
+        },
+        placeholder: a,
+        className: nt.textarea,
+        maxLength: i
+      }
+    ),
+    i && /* @__PURE__ */ t.jsxs("div", { className: nt.length, children: [
+      s,
+      "/",
+      i
+    ] })
+  ] });
 };
 export {
-  ei as Accordion,
-  X as Button,
-  as as ButtonTypeSettings,
-  ni as ButtonsSettings,
-  di as Checkbox,
-  ot as ChooseImage,
-  ui as ChooseImageModal,
-  _i as ColorPicker,
-  Vn as EmptyCart,
-  mi as ErrorableBlock,
-  oi as HeaderButtons,
+  wc as Accordion,
+  lt as Button,
+  os as ButtonTypeSettings,
+  yc as ButtonsSettings,
+  rt as ChooseImage,
+  qc as ChooseImageModal,
+  Gn as EmptyCart,
+  Ic as HeaderButtons,
   p as Icon,
-  G as Input,
-  be as ItemsSettings,
-  si as LayoutSettings,
-  ii as ListingSelector,
-  pi as Loader,
-  ht as Modal,
-  hi as Picker,
-  ci as ProductOptions,
-  gi as Radio,
-  ks as RangeSelector,
-  W as Select,
-  ai as ShareLink,
-  Rn as ShoppingButton,
-  Hn as ShoppingModalCart,
-  xi as Submodal,
-  V as Switch,
-  Wt as TextSettings,
-  dt as Textarea,
-  fi as Tip,
-  xt as TypesText
+  Y as InputSettings,
+  Tc as InputUI,
+  fe as ItemsSettings,
+  kc as LayoutSettings,
+  Nc as ListingSelector,
+  Ac as Loader,
+  bt as Modal,
+  $c as ProductOptions,
+  vs as RangeSelector,
+  Q as Select,
+  Cc as ShareLink,
+  Fn as ShoppingButton,
+  Un as ShoppingModalCart,
+  W as Switch,
+  Gt as TextSettings,
+  pt as TextareaSettings,
+  Bc as TextareaUI,
+  vt as TypesText
 };