@billgangcom/theme-lib 1.44.1 → 1.44.3

package/dist/ui.es.js

@@ -1,21 +1,21 @@
-import { j as t, I as v, c as U, a as K, S as st, T as qt, b as et, C as ft, u as $t, d as Nt, D as wt, e as Ct, v as Bt, B as lt, f as _t, P as St, g as Tt, h as Pt, i as Vt, k as Et, l as jt, m as At, M as Mt, n as Dt, o as Lt, p as Ut } from "./index-Dg3e7rFo.js";
-import { q as Aa, L as Ma } from "./index-Dg3e7rFo.js";
+import { j as t, I as b, c as Y, a as tt, S as st, T as Et, b as et, C as bt, u as yt, d as kt, D as $t, e as It, v as Nt, B as ot, f as ht, P as wt, g as Ct, h as St, i as Vt, s as Yt, k as Dt, l as Bt, m as Ot, M as Mt, n as Ut, o as Ht, p as Gt } from "./index-FNbiNtjB.js";
+import { q as uc, L as _c } from "./index-FNbiNtjB.js";
 import f from "react";
 import "@phosphor-icons/react";
-const Yt = "_wrapper_1ibay_2", Gt = "_alignmentBlock_1ibay_8", Xt = "_title_1ibay_15", Wt = "_subtitle_1ibay_22", Jt = "_alignmentContent_1ibay_29", Qt = "_alignments_1ibay_37", Kt = "_alignment_1ibay_8", Zt = "_circle_1ibay_60", te = "_paddings_1ibay_67", ee = "_padding_1ibay_67", se = "_active_1ibay_91", ne = "_input_1ibay_98", J = {
-  wrapper: Yt,
-  alignmentBlock: Gt,
-  title: Xt,
-  subtitle: Wt,
-  alignmentContent: Jt,
-  alignments: Qt,
-  alignment: Kt,
-  circle: Zt,
-  paddings: te,
-  padding: ee,
-  active: se,
-  input: ne
-}, ie = [
+const Xt = "_wrapper_1ibay_2", Wt = "_alignmentBlock_1ibay_8", Jt = "_title_1ibay_15", Qt = "_subtitle_1ibay_22", Kt = "_alignmentContent_1ibay_29", Zt = "_alignments_1ibay_37", te = "_alignment_1ibay_8", ee = "_circle_1ibay_60", se = "_paddings_1ibay_67", ne = "_padding_1ibay_67", ie = "_active_1ibay_91", oe = "_input_1ibay_98", K = {
+  wrapper: Xt,
+  alignmentBlock: Wt,
+  title: Jt,
+  subtitle: Qt,
+  alignmentContent: Kt,
+  alignments: Zt,
+  alignment: te,
+  circle: ee,
+  paddings: se,
+  padding: ne,
+  active: ie,
+  input: oe
+}, ae = [
   "topLeft",
   "top",
   "topRight",
@@ -25,10 +25,10 @@ const Yt = "_wrapper_1ibay_2", Gt = "_alignmentBlock_1ibay_8", Xt = "_title_1iba
   "bottomLeft",
   "bottom",
   "bottomRight"
-], oe = ["left", "top", "right", "bottom"], ba = (d) => {
-  const { alignment: o, padding: e, setPadding: s, setAlignment: i } = d;
-  function a(h) {
-    switch (h) {
+], ce = ["left", "top", "right", "bottom"], Wa = (u) => {
+  const { alignment: a, padding: e, setPadding: s, setAlignment: i } = u;
+  function c(p) {
+    switch (p) {
       case "left":
       case "topLeft":
       case "bottomLeft":
@@ -45,8 +45,8 @@ const Yt = "_wrapper_1ibay_2", Gt = "_alignmentBlock_1ibay_8", Xt = "_title_1iba
         return "TextAlignCenter";
     }
   }
-  function l(h) {
-    switch (h) {
+  function l(p) {
+    switch (p) {
       case "left":
         return "AlignLeft";
       case "right":
@@ -57,40 +57,40 @@ const Yt = "_wrapper_1ibay_2", Gt = "_alignmentBlock_1ibay_8", Xt = "_title_1iba
         return "AlignBottom";
     }
   }
-  const [r, n] = f.useState(null), [c, x] = f.useState(null);
-  return /* @__PURE__ */ t.jsxs("div", { className: J.layout, children: [
-    /* @__PURE__ */ t.jsx("h3", { className: J.title, children: "Layout" }),
-    /* @__PURE__ */ t.jsxs("div", { className: J.alignmentBlock, children: [
-      /* @__PURE__ */ t.jsx("h5", { className: J.subtitle, children: "Alignment" }),
-      /* @__PURE__ */ t.jsxs("div", { className: J.alignmentContent, children: [
-        /* @__PURE__ */ t.jsx("div", { className: J.alignments, children: ie.map((h) => /* @__PURE__ */ t.jsxs(
+  const [o, n] = f.useState(null), [d, j] = f.useState(null);
+  return /* @__PURE__ */ t.jsxs("div", { className: K.layout, children: [
+    /* @__PURE__ */ t.jsx("h3", { className: K.title, children: "Layout" }),
+    /* @__PURE__ */ t.jsxs("div", { className: K.alignmentBlock, children: [
+      /* @__PURE__ */ t.jsx("h5", { className: K.subtitle, children: "Alignment" }),
+      /* @__PURE__ */ t.jsxs("div", { className: K.alignmentContent, children: [
+        /* @__PURE__ */ t.jsx("div", { className: K.alignments, children: ae.map((p) => /* @__PURE__ */ t.jsxs(
           "div",
           {
             onClick: () => {
-              i(h);
+              i(p);
             },
-            className: J.alignment,
+            className: K.alignment,
             onMouseEnter: () => {
-              n(h);
+              n(p);
             },
             onMouseLeave: () => {
               n(null);
             },
             children: [
-              h !== o && r !== h && /* @__PURE__ */ t.jsx("div", { className: J.circle }),
-              h !== o && r === h && /* @__PURE__ */ t.jsx(
-                v,
+              p !== a && o !== p && /* @__PURE__ */ t.jsx("div", { className: K.circle }),
+              p !== a && o === p && /* @__PURE__ */ t.jsx(
+                b,
                 {
-                  name: a(r),
+                  name: c(o),
                   fill: "#c2c2c2",
                   width: 22,
                   height: 22
                 }
               ),
-              h === o && /* @__PURE__ */ t.jsx(
-                v,
+              p === a && /* @__PURE__ */ t.jsx(
+                b,
                 {
-                  name: a(o),
+                  name: c(a),
                   fill: "#FF3F19",
                   width: 22,
                   height: 22
@@ -98,37 +98,37 @@ const Yt = "_wrapper_1ibay_2", Gt = "_alignmentBlock_1ibay_8", Xt = "_title_1iba
               )
             ]
           },
-          h
+          p
         )) }),
-        /* @__PURE__ */ t.jsx("div", { className: J.paddings, children: oe.map((h) => /* @__PURE__ */ t.jsxs(
+        /* @__PURE__ */ t.jsx("div", { className: K.paddings, children: ce.map((p) => /* @__PURE__ */ t.jsxs(
           "label",
           {
-            className: U(J.padding, {
-              [J.active]: c === h
+            className: Y(K.padding, {
+              [K.active]: d === p
             }),
             onFocus: () => {
-              x(h);
+              j(p);
             },
             onBlur: () => {
-              x(null);
+              j(null);
             },
             children: [
               /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-                v,
+                b,
                 {
-                  name: l(h),
+                  name: l(p),
                   width: 20,
                   height: 20
                 }
               ) }),
               /* @__PURE__ */ t.jsx(
-                K,
+                tt,
                 {
                   type: "number",
-                  value: String(e[h]),
-                  onChange: (p) => s({
+                  value: String(e[p]),
+                  onChange: (r) => s({
                     ...e,
-                    [h]: Number(p)
+                    [p]: Number(r)
                   }),
                   paddingless: !0,
                   borderless: !0
@@ -136,24 +136,24 @@ const Yt = "_wrapper_1ibay_2", Gt = "_alignmentBlock_1ibay_8", Xt = "_title_1iba
               )
             ]
           },
-          h
+          p
         )) })
       ] })
     ] })
   ] });
-}, ae = "_title_1jkiw_1", ce = "_subtitle_1jkiw_5", le = "_header_1jkiw_12", re = "_text_1jkiw_13", de = "_top_1jkiw_20", ue = "_itemsBlock_1jkiw_29", ht = {
-  title: ae,
-  subtitle: ce,
-  header: le,
-  text: re,
-  top: de,
-  itemsBlock: ue
-}, me = "_typeTexts_167ez_1", _e = "_block_167ez_8", he = "_active_167ez_25", kt = {
-  typeTexts: me,
-  block: _e,
-  active: he
-}, pe = ["bold", "italic", "underline", "strike-through", "code"], Ht = (d) => {
-  const { typesText: o, setTypesText: e } = d;
+}, le = "_title_1jkiw_1", re = "_subtitle_1jkiw_5", de = "_header_1jkiw_12", ue = "_text_1jkiw_13", _e = "_top_1jkiw_20", me = "_itemsBlock_1jkiw_29", pt = {
+  title: le,
+  subtitle: re,
+  header: de,
+  text: ue,
+  top: _e,
+  itemsBlock: me
+}, he = "_typeTexts_167ez_1", pe = "_block_167ez_8", fe = "_active_167ez_25", Pt = {
+  typeTexts: he,
+  block: pe,
+  active: fe
+}, ge = ["bold", "italic", "underline", "strike-through", "code"], Rt = (u) => {
+  const { typesText: a, setTypesText: e } = u;
   function s(i) {
     switch (i) {
       case "bold":
@@ -168,25 +168,25 @@ const Yt = "_wrapper_1ibay_2", Gt = "_alignmentBlock_1ibay_8", Xt = "_title_1iba
         return "TextUnderline";
     }
   }
-  return /* @__PURE__ */ t.jsx("div", { className: kt.typeTexts, children: pe.map((i) => /* @__PURE__ */ t.jsx(
+  return /* @__PURE__ */ t.jsx("div", { className: Pt.typeTexts, children: ge.map((i) => /* @__PURE__ */ t.jsx(
     "div",
     {
-      className: U(kt.block, {
-        [kt.active]: o.includes(i)
+      className: Y(Pt.block, {
+        [Pt.active]: a.includes(i)
       }),
       onClick: () => {
-        const a = [...o];
-        if (a.includes(i)) {
-          const l = a.filter((r) => r !== i);
+        const c = [...a];
+        if (c.includes(i)) {
+          const l = c.filter((o) => o !== i);
           e(l);
         } else
-          a.push(i), e(a);
+          c.push(i), e(c);
       },
       children: /* @__PURE__ */ t.jsx(
-        v,
+        b,
         {
           name: s(i),
-          fill: o.includes(i) ? "#252525" : "#757575",
+          fill: a.includes(i) ? "#252525" : "#757575",
           width: 20,
           height: 20
         }
@@ -194,7 +194,7 @@ const Yt = "_wrapper_1ibay_2", Gt = "_alignmentBlock_1ibay_8", Xt = "_title_1iba
     },
     String(i)
   )) });
-}, pt = {
+}, ft = {
   h1: "Heading 1",
   h2: "Heading 2",
   h3: "Heading 3",
@@ -202,44 +202,44 @@ const Yt = "_wrapper_1ibay_2", Gt = "_alignmentBlock_1ibay_8", Xt = "_title_1iba
   h5: "Heading 5",
   h6: "Heading 6",
   p: "Paragraph"
-}, zt = (d) => {
+}, Lt = (u) => {
   const {
-    typesText: o,
+    typesText: a,
     isActiveText: e,
     setIsActiveText: s,
     text: i,
-    setText: a,
+    setText: c,
     setTypesText: l,
-    title: r,
+    title: o,
     subtitle: n = "Items",
-    typeFont: c,
-    setTypeFont: x
-  } = d;
-  return /* @__PURE__ */ t.jsxs("div", { className: ht.text, children: [
-    (r || e !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: ht.top, children: [
-      r && /* @__PURE__ */ t.jsx("h3", { className: ht.title, children: r }),
+    typeFont: d,
+    setTypeFont: j
+  } = u;
+  return /* @__PURE__ */ t.jsxs("div", { className: pt.text, children: [
+    (o || e !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: pt.top, children: [
+      o && /* @__PURE__ */ t.jsx("h3", { className: pt.title, children: o }),
       e !== void 0 && s && /* @__PURE__ */ t.jsx(
         st,
         {
           current: e,
-          onChange: (h) => s(h)
+          onChange: (p) => s(p)
         }
       )
     ] }),
-    /* @__PURE__ */ t.jsxs("div", { className: ht.itemsBlock, children: [
-      /* @__PURE__ */ t.jsx("h5", { className: ht.subtitle, children: n }),
+    /* @__PURE__ */ t.jsxs("div", { className: pt.itemsBlock, children: [
+      /* @__PURE__ */ t.jsx("h5", { className: pt.subtitle, children: n }),
       /* @__PURE__ */ t.jsx(
-        qt,
+        Et,
         {
-          onChange: (h) => a(h),
+          onChange: (p) => c(p),
           value: i,
           maxLength: 150
         }
       ),
       /* @__PURE__ */ t.jsx(
-        Ht,
+        Rt,
         {
-          typesText: o,
+          typesText: a,
           setTypesText: l
         }
       ),
@@ -247,55 +247,55 @@ const Yt = "_wrapper_1ibay_2", Gt = "_alignmentBlock_1ibay_8", Xt = "_title_1iba
         et,
         {
           label: "Type Text",
-          options: Object.values(pt).filter(
-            (h) => h !== pt[c]
+          options: Object.values(ft).filter(
+            (p) => p !== ft[d]
           ),
-          onChange: (h) => x(
-            Object.keys(pt).find(
-              (p) => pt[p] === h
+          onChange: (p) => j(
+            Object.keys(ft).find(
+              (r) => ft[r] === p
             )
           ),
-          value: pt[c]
+          value: ft[d]
         }
       )
     ] })
   ] });
-}, xe = "_title_xma5o_1", ge = "_subtitle_xma5o_5", fe = "_header_xma5o_12", be = "_text_xma5o_13", ve = "_productsBlock_xma5o_14", je = "_top_xma5o_26", ye = "_itemsBlock_xma5o_35", ke = "_typeTexts_xma5o_41", Ie = "_block_xma5o_48", $e = "_active_xma5o_61", Ne = "_products_xma5o_14", we = "_product_xma5o_14", Ce = "_button_xma5o_80", Be = "_disabled_xma5o_91", Se = "_image_xma5o_95", Te = "_info_xma5o_102", Pe = "_name_xma5o_114", Ae = "_buttons_xma5o_118", Me = "_modal_xma5o_125", Oe = "_link_xma5o_145", qe = "_modalOptions_xma5o_151", Ee = "_addButton_xma5o_165", De = "_deleteButton_xma5o_180", Le = "_closeIcon_xma5o_192", L = {
+}, xe = "_title_pef24_1", be = "_subtitle_pef24_5", ve = "_header_pef24_12", je = "_text_pef24_13", ye = "_productsBlock_pef24_14", ke = "_top_pef24_26", $e = "_itemsBlock_pef24_35", Ie = "_typeTexts_pef24_41", Ne = "_block_pef24_48", we = "_active_pef24_61", Ce = "_products_pef24_14", Se = "_product_pef24_14", Be = "_button_pef24_80", Te = "_disabled_pef24_91", Pe = "_image_pef24_95", Ae = "_info_pef24_102", Oe = "_name_pef24_114", Me = "_buttons_pef24_118", qe = "_modal_pef24_125", Ee = "_link_pef24_145", De = "_modalOptions_pef24_151", Ue = "_addButton_pef24_164", He = "_deleteButton_pef24_179", Re = "_closeIcon_pef24_191", z = {
   title: xe,
-  subtitle: ge,
-  header: fe,
-  text: be,
-  productsBlock: ve,
-  top: je,
-  itemsBlock: ye,
-  typeTexts: ke,
-  block: Ie,
-  active: $e,
-  products: Ne,
-  product: we,
-  button: Ce,
-  disabled: Be,
-  image: Se,
-  info: Te,
-  name: Pe,
-  buttons: Ae,
-  modal: Me,
-  link: Oe,
-  modalOptions: qe,
-  addButton: Ee,
-  deleteButton: De,
-  closeIcon: Le
-}, He = f.forwardRef(
-  (d, o) => {
-    const { activeItem: e, setActiveItem: s, popupPosition: i, modalOptions: a, setIsOpenModal: l } = d;
-    function r(n, c) {
-      return n.length > c ? `${n.slice(0, c)}...` : n;
+  subtitle: be,
+  header: ve,
+  text: je,
+  productsBlock: ye,
+  top: ke,
+  itemsBlock: $e,
+  typeTexts: Ie,
+  block: Ne,
+  active: we,
+  products: Ce,
+  product: Se,
+  button: Be,
+  disabled: Te,
+  image: Pe,
+  info: Ae,
+  name: Oe,
+  buttons: Me,
+  modal: qe,
+  link: Ee,
+  modalOptions: De,
+  addButton: Ue,
+  deleteButton: He,
+  closeIcon: Re
+}, Le = f.forwardRef(
+  (u, a) => {
+    const { activeItem: e, setActiveItem: s, popupPosition: i, modalOptions: c, setIsOpenModal: l } = u;
+    function o(n, d) {
+      return n.length > d ? `${n.slice(0, d)}...` : n;
     }
     return /* @__PURE__ */ t.jsxs(
       "div",
       {
-        ref: o,
-        className: L.modal,
+        ref: a,
+        className: z.modal,
         onClick: (n) => {
           n.stopPropagation();
         },
@@ -304,10 +304,10 @@ const Yt = "_wrapper_1ibay_2", Gt = "_alignmentBlock_1ibay_8", Xt = "_title_1iba
           left: `${i.left}px`
         },
         children: [
-          /* @__PURE__ */ t.jsxs("div", { className: L.top, children: [
-            /* @__PURE__ */ t.jsx("h3", { className: L.title, children: r(e.name, 20) }),
-            /* @__PURE__ */ t.jsx("div", { className: L.closeIcon, children: /* @__PURE__ */ t.jsx(
-              v,
+          /* @__PURE__ */ t.jsxs("div", { className: z.top, children: [
+            /* @__PURE__ */ t.jsx("h3", { className: z.title, children: o(e.name["en-US"], 20) }),
+            /* @__PURE__ */ t.jsx("div", { className: z.closeIcon, children: /* @__PURE__ */ t.jsx(
+              b,
               {
                 name: "X",
                 height: 20,
@@ -318,64 +318,66 @@ const Yt = "_wrapper_1ibay_2", Gt = "_alignmentBlock_1ibay_8", Xt = "_title_1iba
               }
             ) })
           ] }),
-          /* @__PURE__ */ t.jsx("div", { className: L.modalOptions, children: a.map((n) => {
+          /* @__PURE__ */ t.jsx("div", { className: z.modalOptions, children: c.map((n) => {
             if (n.type === "image")
               return /* @__PURE__ */ t.jsx(
-                ft,
+                bt,
                 {
                   label: "Put up an attractive image",
                   activeImage: e[n.field],
-                  onChange: (c) => {
-                    const x = {
+                  onChange: (d) => {
+                    const j = {
                       ...e,
-                      [n.field]: c
+                      [n.field]: d
                     };
-                    s(x);
+                    s(j);
                   }
                 },
                 String(n.field)
               );
             if (n.type === "text")
               return /* @__PURE__ */ t.jsx(
-                zt,
+                Lt,
                 {
                   typesText: e[n.field.type],
-                  setTypesText: (c) => {
-                    const x = {
+                  setTypesText: (d) => {
+                    const j = {
                       ...e,
-                      [n.field.type]: c
+                      [n.field.type]: d
                     };
-                    s(x);
+                    s(j);
                   },
-                  text: e[n.field.text] || "",
-                  setText: (c) => {
-                    const x = {
+                  text: e[n.field.text]["en-US"] || "",
+                  setText: (d) => {
+                    const j = {
                       ...e,
-                      [n.field.text]: c
+                      [n.field.text]: {
+                        "en-US": d
+                      }
                     };
-                    s(x);
+                    s(j);
                   },
-                  typeFont: e[n.field.type],
-                  setTypeFont: (c) => {
-                    const x = {
+                  typeFont: e[n.field.typeFont],
+                  setTypeFont: (d) => {
+                    const j = {
                       ...e,
-                      [n.field.type]: c
+                      [n.field.typeFont]: d
                     };
-                    s(x);
+                    s(j);
                   },
                   subtitle: n.label
                 }
               );
             if (n.type === "input")
               return /* @__PURE__ */ t.jsx(
-                K,
+                tt,
                 {
-                  onChange: (c) => {
-                    const x = {
+                  onChange: (d) => {
+                    const j = {
                       ...e,
-                      [n.field]: c
+                      [n.field]: d
                     };
-                    s(x);
+                    s(j);
                   },
                   value: e[n.field] || "",
                   label: n.label,
@@ -383,16 +385,16 @@ const Yt = "_wrapper_1ibay_2", Gt = "_alignmentBlock_1ibay_8", Xt = "_title_1iba
                 }
               );
             if (n.type === "inputSwitch")
-              return /* @__PURE__ */ t.jsxs("div", { className: L.link, children: [
+              return /* @__PURE__ */ t.jsxs("div", { className: z.link, children: [
                 /* @__PURE__ */ t.jsx(
-                  K,
+                  tt,
                   {
-                    onChange: (c) => {
-                      const x = {
+                    onChange: (d) => {
+                      const j = {
                         ...e,
-                        [n.field.text]: c
+                        [n.field.text]: d
                       };
-                      s(x);
+                      s(j);
                     },
                     value: e[n.field.text] || "",
                     label: n.inputLabel,
@@ -404,35 +406,36 @@ const Yt = "_wrapper_1ibay_2", Gt = "_alignmentBlock_1ibay_8", Xt = "_title_1iba
                   {
                     current: !!e[n.field.switch] || !1,
                     label: n.switchLabel,
-                    onChange: (c) => {
-                      const x = {
+                    onChange: (d) => {
+                      const j = {
                         ...e,
-                        [n.field.switch]: c
+                        [n.field.switch]: d
                       };
-                      s(x);
+                      s(j);
                     }
                   }
                 )
               ] });
             if (n.type === "list")
               return /* @__PURE__ */ t.jsx(
-                Ue,
+                Ge,
                 {
                   items: e[n.field] || [],
-                  setItems: (c) => {
-                    const x = {
+                  setItems: (d) => {
+                    const j = {
                       ...e,
-                      [n.field]: c
+                      [n.field]: d
                     };
-                    s(x);
+                    s(j);
                   },
                   itemsType: "select",
                   draggable: n.draggable || !1,
                   itemsOptions: n.itemsOptions,
                   deletable: n.deletable || !1,
-                  editable: !1,
+                  editable: n.editable || !1,
                   subtitle: n.label,
-                  addableOptions: n.addableOptions
+                  addableOptions: n.addableOptions,
+                  modalOptions: n.modalOptions
                 }
               );
             if (n.type === "select")
@@ -440,16 +443,28 @@ const Yt = "_wrapper_1ibay_2", Gt = "_alignmentBlock_1ibay_8", Xt = "_title_1iba
                 et,
                 {
                   options: n.itemsOptions,
-                  onChange: (c) => {
-                    const x = {
+                  onChange: (d) => {
+                    const j = {
                       ...e,
-                      [n.field]: c
+                      [n.field]: d
                     };
-                    s(x);
+                    s(j);
                   },
                   label: n.label,
                   value: e[n.field] || "String",
-                  leftAddon: n.leftAddon && n.leftAddon === "icon" && /* @__PURE__ */ t.jsx(v, { name: e[n.field] })
+                  leftAddon: n.leftAddon && n.leftAddon === "icon" && /* @__PURE__ */ t.jsx(b, { name: e[n.field] }),
+                  switcher: n.switcher ? {
+                    value: !!e[n.switcher],
+                    onChange: (d) => {
+                      if (n.switcher === "isActive") {
+                        const j = {
+                          ...e,
+                          [n.switcher]: d
+                        };
+                        s(j);
+                      }
+                    }
+                  } : void 0
                 }
               );
           }) })
@@ -457,19 +472,19 @@ const Yt = "_wrapper_1ibay_2", Gt = "_alignmentBlock_1ibay_8", Xt = "_title_1iba
       }
     );
   }
-), ze = "_other_g74jx_1", Re = "_subtitle_g74jx_7", Fe = "_items_g74jx_14", It = {
+), ze = "_other_g74jx_1", Fe = "_subtitle_g74jx_7", Ve = "_items_g74jx_14", At = {
   other: ze,
-  subtitle: Re,
-  items: Fe
-}, yt = (d) => {
-  const { items: o, title: e = "Other" } = d;
-  return /* @__PURE__ */ t.jsxs("div", { className: It.other, children: [
-    /* @__PURE__ */ t.jsx("h5", { className: It.subtitle, children: e }),
-    /* @__PURE__ */ t.jsx("div", { className: It.items, children: o.map((s, i) => /* @__PURE__ */ t.jsx(
+  subtitle: Fe,
+  items: Ve
+}, Tt = (u) => {
+  const { items: a, title: e = "Other" } = u;
+  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: a.map((s, i) => /* @__PURE__ */ t.jsx(
       st,
       {
         current: s.isItem,
-        onChange: (a) => s.setIsItem(a),
+        onChange: (c) => s.setIsItem(c),
         label: s.label,
         hasBackground: !0,
         paddingless: !1
@@ -478,18 +493,18 @@ const Yt = "_wrapper_1ibay_2", Gt = "_alignmentBlock_1ibay_8", Xt = "_title_1iba
     )) })
   ] });
 };
-function Ve({ product: d, children: o }) {
+function Ye({ product: u, children: a }) {
   const {
     attributes: e,
     listeners: s,
     setNodeRef: i,
-    transform: a,
+    transform: c,
     transition: l,
-    isDragging: r
-  } = Tt({
-    id: d.id
+    isDragging: o
+  } = Ct({
+    id: u.id
   }), n = {
-    transform: Pt.Transform.toString(a),
+    transform: St.Transform.toString(c),
     transition: l
   };
   return /* @__PURE__ */ t.jsx(
@@ -497,41 +512,41 @@ function Ve({ product: d, children: o }) {
     {
       ref: i,
       style: n,
-      className: `${L.product} ${r ? L.dragging : ""}`,
+      className: `${z.product} ${o ? z.dragging : ""}`,
       ...e,
       ...s,
-      children: o
+      children: a
     }
   );
 }
-const Ue = (d) => {
+const Ge = (u) => {
   const {
-    isActiveItems: o,
+    isActiveItems: a,
     setIsActiveItems: e,
     items: s,
     setItems: i,
-    other: a,
+    other: c,
     title: l,
-    subtitle: r,
+    subtitle: o,
     editable: n = !0,
-    draggable: c = !1,
-    withImage: x = !1,
-    deletable: h = !0,
-    addable: p = !0,
-    itemsType: _,
-    itemsPlaceholder: b = "",
-    itemsOptions: u,
-    hasRangeSelector: B = !1,
+    draggable: d = !1,
+    withImage: j = !1,
+    deletable: p = !0,
+    addable: r = !0,
+    itemsType: y,
+    itemsPlaceholder: h = "",
+    itemsOptions: _,
+    hasRangeSelector: w = !1,
     rangeSelectorOptions: H,
-    modalOptions: I,
-    addableOptions: N = {},
-    limit: g,
-    autoScrollInterval: C
-  } = d, [F, S] = f.useState(null), [Y, E] = f.useState({
+    modalOptions: $,
+    addableOptions: g = {},
+    limit: B,
+    autoInterval: E
+  } = u, [F, T] = f.useState(null), [v, A] = f.useState({
     top: 0,
     left: 0
-  }), [y, M] = f.useState(null), T = f.useRef(null), [W, O] = f.useState(!1), z = $t(
-    Nt(St, {
+  }), [x, I] = f.useState(null), C = f.useRef(null), [R, O] = f.useState(!1), U = yt(
+    kt(wt, {
       activationConstraint: {
         distance: 5
       }
@@ -539,36 +554,36 @@ const Ue = (d) => {
   );
   f.useEffect(() => {
     const m = () => {
-      S(null), O(!1);
+      T(null), O(!1);
     };
-    return document.body.addEventListener("click", m), S(null), O(!1), () => {
-      S(null), O(!1), document.body.removeEventListener("click", m);
+    return document.body.addEventListener("click", m), T(null), O(!1), () => {
+      T(null), O(!1), document.body.removeEventListener("click", m);
     };
   }, []), f.useEffect(() => {
     if (F) {
-      const m = [...s].map((k) => k.id === F.id ? F : k);
+      const m = [...s].map((N) => N.id === F.id ? F : N);
       i(m);
     }
   }, [F]), f.useEffect(() => {
-    if (T.current && y) {
-      const m = T.current.getBoundingClientRect().height, k = window.innerHeight;
-      let P = y.top;
-      P + m > k + window.scrollY - 200 && (P = k + window.scrollY - m - 200), P < 0 && (P = 10), E({
-        top: P,
-        left: y.left
+    if (C.current && x) {
+      const m = C.current.getBoundingClientRect().height, N = window.innerHeight;
+      let M = x.top;
+      M + m > N + window.scrollY - 200 && (M = N + window.scrollY - m - 200), M < 0 && (M = 10), A({
+        top: M,
+        left: x.left
       });
     }
-  }, [T.current, y]);
-  const Z = (m, k) => {
+  }, [C.current, x]);
+  const nt = (m, N) => {
     m.stopPropagation();
-    const P = m.target.getBoundingClientRect();
-    M({
-      top: P.top + window.scrollY,
-      left: P.left - 30
-    }), S(k), O(!0);
+    const M = m.target.getBoundingClientRect();
+    I({
+      top: M.top + window.scrollY - 70,
+      left: M.left - (r ? 30 : 65)
+    }), T(N), O(!0);
   };
-  function rt(m) {
-    if (x)
+  function dt(m) {
+    if (j)
       return m ? /* @__PURE__ */ t.jsx(
         "img",
         {
@@ -578,7 +593,7 @@ const Ue = (d) => {
           height: 16
         }
       ) : /* @__PURE__ */ t.jsx(
-        v,
+        b,
         {
           name: "Image",
           width: 16,
@@ -587,20 +602,20 @@ const Ue = (d) => {
         }
       );
   }
-  const j = (m) => {
-    const { active: k, over: P } = m;
-    if (P && k.id !== P.id) {
-      const D = s.findIndex((A) => A.id === k.id), G = s.findIndex((A) => A.id === P.id);
-      if (D !== -1 && G !== -1) {
-        const A = [...s], [dt] = A.splice(D, 1);
-        A.splice(G, 0, dt), i(A);
+  const k = (m) => {
+    const { active: N, over: M } = m;
+    if (M && N.id !== M.id) {
+      const L = s.findIndex((q) => q.id === N.id), X = s.findIndex((q) => q.id === M.id);
+      if (L !== -1 && X !== -1) {
+        const q = [...s], [ut] = q.splice(L, 1);
+        q.splice(X, 0, ut), i(q);
       }
     }
-  }, q = (m, k) => {
-    var D, G;
-    const P = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-      c && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-        v,
+  }, D = (m, N) => {
+    var L, X;
+    const M = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+      d && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
+        b,
         {
           name: "DotsSixVertical",
           hoverable: !0,
@@ -608,135 +623,143 @@ const Ue = (d) => {
           height: 20
         }
       ) }),
-      _ === "select" && u && /* @__PURE__ */ t.jsx(
+      y === "select" && _ && /* @__PURE__ */ t.jsx(
         et,
         {
-          onChange: (A) => {
-            const dt = [...s], mt = u.find((bt) => bt.name === A);
+          onChange: (q) => {
+            const ut = [...s], mt = _.find((vt) => vt.name["en-US"] === q);
             if (!mt) return;
-            const ut = dt.map((bt) => bt.id === m.id ? {
+            const _t = ut.map((vt) => vt.id === m.id ? {
               ...mt,
-              name: A
-            } : bt);
-            S({
+              name: {
+                "en-US": q
+              }
+            } : vt);
+            T({
               ...m,
-              name: A
-            }), i([...ut]);
+              name: {
+                "en-US": q
+              }
+            }), i([..._t]);
           },
-          value: m.name,
-          options: u.filter((A) => !s.find((dt) => dt.name === A.name)).map((A) => A.name),
-          leftAddon: rt(m.images)
+          value: m.name["en-US"],
+          options: _.filter((q) => !s.find((ut) => ut.name["en-US"] === q.name["en-US"])).map((q) => q.name["en-US"]),
+          leftAddon: dt(m.images)
         }
       ),
-      _ === "input" && /* @__PURE__ */ t.jsx(
-        K,
+      y === "input" && /* @__PURE__ */ t.jsx(
+        tt,
         {
-          onChange: (A) => {
-            const mt = [...s].map((ut) => ut.id === m.id ? {
+          onChange: (q) => {
+            const mt = [...s].map((_t) => _t.id === m.id ? {
               ...m,
-              name: A
-            } : ut);
+              name: {
+                "en-US": q
+              }
+            } : _t);
             i([...mt]);
           },
-          value: m.name,
-          placeholder: b
+          value: m.name["en-US"],
+          placeholder: h
         }
       ),
-      _ === "image" && /* @__PURE__ */ t.jsx(
-        ft,
+      y === "image" && /* @__PURE__ */ t.jsx(
+        bt,
         {
-          onChange: (A) => {
-            const mt = [...s].map((ut) => ut.id === m.id ? {
+          onChange: (q) => {
+            const mt = [...s].map((_t) => _t.id === m.id ? {
               ...m,
-              images: A
-            } : ut);
+              images: q
+            } : _t);
             i([...mt]);
           },
-          activeImage: (D = s.find((A) => A.id === m.id)) != null && D.images ? (G = s.find((A) => A.id === m.id)) == null ? void 0 : G.images[0] : void 0
+          activeImage: (L = s.find((q) => q.id === m.id)) != null && L.images ? (X = s.find((q) => q.id === m.id)) == null ? void 0 : X.images[0] : void 0
         }
       ),
-      /* @__PURE__ */ t.jsxs("div", { className: L.buttons, children: [
-        n && /* @__PURE__ */ t.jsx("div", { className: L.deleteButton, children: /* @__PURE__ */ t.jsx(
-          v,
+      /* @__PURE__ */ t.jsxs("div", { className: z.buttons, children: [
+        n && /* @__PURE__ */ t.jsx("div", { className: z.deleteButton, children: /* @__PURE__ */ t.jsx(
+          b,
           {
             name: "Sliders",
             hoverable: !0,
             width: 20,
             height: 20,
-            onClick: (A) => Z(A, m)
+            onClick: (q) => {
+              console.log(q, m), nt(q, m);
+            }
           }
         ) }),
-        h && /* @__PURE__ */ t.jsx("div", { className: L.deleteButton, children: /* @__PURE__ */ t.jsx(
-          v,
+        p && /* @__PURE__ */ t.jsx("div", { className: z.deleteButton, children: /* @__PURE__ */ t.jsx(
+          b,
           {
             name: "Trash",
             hoverable: !0,
             width: 20,
             height: 20,
             fill: "#C12A2A",
-            onClick: () => i(s.filter((A) => A.id !== m.id))
+            onClick: () => i(s.filter((q) => q.id !== m.id))
           }
         ) })
       ] })
     ] });
-    return c ? /* @__PURE__ */ t.jsx(
-      Ve,
+    return d ? /* @__PURE__ */ t.jsx(
+      Ye,
       {
         product: m,
-        index: k,
-        children: P
+        index: N,
+        children: M
       },
       m.id
     ) : /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: L.product,
-        children: P
+        className: z.product,
+        children: M
       },
       m.id
     );
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: L.productsBlock, children: [
-    (l || o !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: L.top, children: [
-      l && /* @__PURE__ */ t.jsx("h3", { className: L.title, children: l }),
-      o !== void 0 && /* @__PURE__ */ t.jsx(
+  return /* @__PURE__ */ t.jsxs("div", { className: z.productsBlock, children: [
+    (l || a !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: z.top, children: [
+      l && /* @__PURE__ */ t.jsx("h3", { className: z.title, children: l }),
+      a !== void 0 && /* @__PURE__ */ t.jsx(
         st,
         {
-          current: o,
+          current: a,
           onChange: (m) => e == null ? void 0 : e(m)
         }
       )
     ] }),
-    F && n && I && W && /* @__PURE__ */ t.jsx(
-      He,
+    F && n && $ && R && /* @__PURE__ */ t.jsx(
+      Le,
       {
-        ref: T,
+        ref: C,
         activeItem: F,
-        setActiveItem: S,
-        popupPosition: Y,
-        modalOptions: I,
+        setActiveItem: T,
+        popupPosition: v,
+        modalOptions: $,
         setIsOpenModal: O
       }
     ),
-    B && H && /* @__PURE__ */ t.jsx(Ot, { ...H }),
-    /* @__PURE__ */ t.jsxs("div", { className: L.products, children: [
-      r && /* @__PURE__ */ t.jsx("h5", { className: L.subtitle, children: r }),
-      c ? /* @__PURE__ */ t.jsx(
-        wt,
+    w && H && /* @__PURE__ */ t.jsx(qt, { ...H }),
+    /* @__PURE__ */ t.jsxs("div", { className: z.products, children: [
+      o && /* @__PURE__ */ t.jsx("h5", { className: z.subtitle, children: o }),
+      d ? /* @__PURE__ */ t.jsx(
+        $t,
         {
-          sensors: z,
-          onDragEnd: j,
+          sensors: U,
+          onDragEnd: k,
           children: /* @__PURE__ */ t.jsx(
-            Ct,
+            It,
             {
               items: s.map((m) => m.id),
-              strategy: Bt,
-              children: s.map((m, k) => q(m, k))
+              strategy: Nt,
+              children: s.map((m, N) => D(m, N))
             }
           )
         }
-      ) : s.map((m, k) => q(m, k)),
-      p && /* @__PURE__ */ t.jsx(
+      ) : s.map((m, N) => D(m, N)),
+      r && /* @__PURE__ */ t.jsx(
         "div",
         {
           style: {
@@ -745,45 +768,49 @@ const Ue = (d) => {
             justifyContent: "center"
           },
           children: /* @__PURE__ */ t.jsx(
-            lt,
+            ot,
             {
               withoutHover: !0,
-              className: U(L.button, {
-                [L.disabled]: !!(g && g <= s.length || s.length === (u == null ? void 0 : u.length))
+              className: Y(z.button, {
+                [z.disabled]: !!(B && B <= s.length || s.length === (_ == null ? void 0 : _.length))
               }),
               size: "s",
-              disabled: !!(g && g <= s.length || s.length === (u == null ? void 0 : u.length)),
+              disabled: !!(B && B <= s.length || s.length === (_ == null ? void 0 : _.length)),
               onClick: () => {
                 const m = [...s];
-                let k = null;
-                if (u) {
-                  for (let P = 0; P < u.length; P++)
-                    if (!s.find((D) => D.id === u[P].id)) {
-                      k = u[P];
+                let N = null;
+                if (_) {
+                  for (let M = 0; M < _.length; M++)
+                    if (!s.find((L) => L.id === _[M].id)) {
+                      N = _[M];
                       break;
                     }
                 }
-                _ === "select" && u ? m.push({
-                  name: k ? k.name : u[0].name,
-                  id: (k == null ? void 0 : k.id) || u[0].id,
-                  ...N
-                }) : _ === "input" ? m.push({
-                  name: "",
-                  id: _t(),
-                  ...N
+                y === "select" && _ ? m.push({
+                  name: N ? N.name : _[0].name,
+                  id: (N == null ? void 0 : N.id) || _[0].id,
+                  ...g
+                }) : y === "input" ? m.push({
+                  name: {
+                    "en-US": ""
+                  },
+                  id: ht(),
+                  ...g
                 }) : m.push({
-                  name: `Image ${s.length + 1}`,
-                  id: _t(),
-                  ...N
+                  name: {
+                    "en-US": `Image ${s.length + 1}`
+                  },
+                  id: ht(),
+                  ...g
                 }), i(m);
               },
               style: {
                 width: "fit-content"
               },
-              children: /* @__PURE__ */ t.jsxs("div", { className: L.addButton, children: [
+              children: /* @__PURE__ */ t.jsxs("div", { className: z.addButton, children: [
                 /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
                 /* @__PURE__ */ t.jsx(
-                  v,
+                  b,
                   {
                     name: "Plus",
                     width: 16,
@@ -796,14 +823,14 @@ const Ue = (d) => {
         }
       )
     ] }),
-    a !== void 0 && /* @__PURE__ */ t.jsx(yt, { items: a }),
-    C !== void 0 && /* @__PURE__ */ t.jsx(
-      K,
+    c !== void 0 && /* @__PURE__ */ t.jsx(Tt, { items: c }),
+    E !== void 0 && /* @__PURE__ */ t.jsx(
+      tt,
       {
-        label: "Auto scroll interval",
+        label: E.title || "Auto scroll interval",
         type: "number",
-        value: String(C.scrollInterval),
-        onChange: (m) => C.setScrollInterval(Number(m)),
+        value: String(E.autoInterval),
+        onChange: (m) => E.setAutoInterval(Number(m)),
         min: 0.1,
         max: 100,
         style: {
@@ -813,61 +840,61 @@ const Ue = (d) => {
       }
     )
   ] });
-}, Ye = "_title_82zux_1", Ge = "_subtitle_82zux_5", Xe = "_header_82zux_12", We = "_text_82zux_13", Je = "_productsBlock_82zux_14", Qe = "_top_82zux_26", Ke = "_itemsBlock_82zux_35", Ze = "_typeTexts_82zux_41", ts = "_block_82zux_48", es = "_active_82zux_61", ss = "_products_82zux_14", ns = "_product_82zux_14", is = "_button_82zux_80", os = "_disabled_82zux_91", as = "_image_82zux_95", cs = "_info_82zux_102", ls = "_name_82zux_114", rs = "_buttons_82zux_118", ds = "_modal_82zux_125", us = "_link_82zux_145", ms = "_modalOptions_82zux_151", _s = "_addButton_82zux_157", hs = "_deleteButton_82zux_179", Q = {
-  title: Ye,
-  subtitle: Ge,
-  header: Xe,
-  text: We,
-  productsBlock: Je,
-  top: Qe,
-  itemsBlock: Ke,
-  typeTexts: Ze,
-  block: ts,
-  active: es,
-  products: ss,
-  product: ns,
-  button: is,
-  disabled: os,
-  image: as,
-  info: cs,
-  name: ls,
-  buttons: rs,
-  modal: ds,
-  link: us,
-  modalOptions: ms,
-  addButton: _s,
-  deleteButton: hs
-}, va = (d) => {
+}, Xe = "_title_82zux_1", We = "_subtitle_82zux_5", Je = "_header_82zux_12", Qe = "_text_82zux_13", Ke = "_productsBlock_82zux_14", Ze = "_top_82zux_26", ts = "_itemsBlock_82zux_35", es = "_typeTexts_82zux_41", ss = "_block_82zux_48", ns = "_active_82zux_61", is = "_products_82zux_14", os = "_product_82zux_14", as = "_button_82zux_80", cs = "_disabled_82zux_91", ls = "_image_82zux_95", rs = "_info_82zux_102", ds = "_name_82zux_114", us = "_buttons_82zux_118", _s = "_modal_82zux_125", ms = "_link_82zux_145", hs = "_modalOptions_82zux_151", ps = "_addButton_82zux_157", fs = "_deleteButton_82zux_179", Z = {
+  title: Xe,
+  subtitle: We,
+  header: Je,
+  text: Qe,
+  productsBlock: Ke,
+  top: Ze,
+  itemsBlock: ts,
+  typeTexts: es,
+  block: ss,
+  active: ns,
+  products: is,
+  product: os,
+  button: as,
+  disabled: cs,
+  image: ls,
+  info: rs,
+  name: ds,
+  buttons: us,
+  modal: _s,
+  link: ms,
+  modalOptions: hs,
+  addButton: ps,
+  deleteButton: fs
+}, Ja = (u) => {
   const {
-    isActiveItems: o,
+    isActiveItems: a,
     setIsActiveItems: e,
     items: s,
     setItems: i,
-    other: a,
+    other: c,
     title: l,
-    subtitle: r,
+    subtitle: o,
     draggable: n = !1,
-    withImage: c = !1,
-    addable: x = !0,
-    itemsOptions: h,
-    hasRangeSelector: p = !1,
-    rangeSelectorOptions: _,
-    limit: b,
-    autoScrollInterval: u,
-    deletable: B
-  } = d;
-  function H(N) {
-    if (c)
-      return N ? /* @__PURE__ */ t.jsx(
+    withImage: d = !1,
+    addable: j = !0,
+    itemsOptions: p,
+    hasRangeSelector: r = !1,
+    rangeSelectorOptions: y,
+    limit: h,
+    autoScrollInterval: _,
+    deletable: w
+  } = u;
+  function H(g) {
+    if (d)
+      return g ? /* @__PURE__ */ t.jsx(
         "img",
         {
-          src: `https://imagedelivery.net/${N[0]}/w=1000`,
+          src: `https://imagedelivery.net/${g[0]}/w=1000`,
           alt: "image",
           width: 16,
           height: 16
         }
       ) : /* @__PURE__ */ t.jsx(
-        v,
+        b,
         {
           name: "Image",
           width: 16,
@@ -876,12 +903,12 @@ const Ue = (d) => {
         }
       );
   }
-  const I = (N, g = !1) => {
-    const C = h.find((S) => S.id === N);
-    if (!C) return;
+  const $ = (g, B = !1) => {
+    const E = p.find((T) => T.id === g);
+    if (!E) return;
     const F = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       n && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-        v,
+        b,
         {
           name: "DotsSixVertical",
           hoverable: !0,
@@ -892,54 +919,54 @@ const Ue = (d) => {
       /* @__PURE__ */ t.jsx(
         et,
         {
-          onChange: (S) => {
-            const Y = [...s], E = h.find((T) => T.name === S);
-            if (!E) return;
-            const y = E.id, M = Y.map((T) => T === N ? y : T);
-            i([...M]);
+          onChange: (T) => {
+            const v = [...s], A = p.find((C) => C.name === T);
+            if (!A) return;
+            const x = A.id, I = v.map((C) => C === g ? x : C);
+            i([...I]);
           },
-          value: C.name,
-          options: h.filter((S) => !s.find((Y) => Y === S.id)).map((S) => S.name),
-          leftAddon: H(C.images)
+          value: E.name,
+          options: p.filter((T) => !s.find((v) => v === T.id)).map((T) => T.name),
+          leftAddon: H(E.images)
         }
       ),
-      g && /* @__PURE__ */ t.jsx("div", { className: Q.buttons, children: /* @__PURE__ */ t.jsx("div", { className: Q.deleteButton, children: /* @__PURE__ */ t.jsx(
-        v,
+      B && /* @__PURE__ */ t.jsx("div", { className: Z.buttons, children: /* @__PURE__ */ t.jsx("div", { className: Z.deleteButton, children: /* @__PURE__ */ t.jsx(
+        b,
         {
           name: "Trash",
           hoverable: !0,
           width: 20,
           height: 20,
           fill: "#C12A2A",
-          onClick: () => i(s.filter((S) => S !== N))
+          onClick: () => i(s.filter((T) => T !== g))
         }
       ) }) })
     ] });
     return /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: Q.product,
+        className: Z.product,
         children: F
       },
-      N
+      g
     );
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: Q.productsBlock, children: [
-    (l || o !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: Q.top, children: [
-      l && /* @__PURE__ */ t.jsx("h3", { className: Q.title, children: l }),
-      o !== void 0 && /* @__PURE__ */ t.jsx(
+  return /* @__PURE__ */ t.jsxs("div", { className: Z.productsBlock, children: [
+    (l || a !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: Z.top, children: [
+      l && /* @__PURE__ */ t.jsx("h3", { className: Z.title, children: l }),
+      a !== void 0 && /* @__PURE__ */ t.jsx(
         st,
         {
-          current: o,
-          onChange: (N) => e == null ? void 0 : e(N)
+          current: a,
+          onChange: (g) => e == null ? void 0 : e(g)
         }
       )
     ] }),
-    p && _ && /* @__PURE__ */ t.jsx(Ot, { ..._ }),
-    /* @__PURE__ */ t.jsxs("div", { className: Q.products, children: [
-      r && /* @__PURE__ */ t.jsx("h5", { className: Q.subtitle, children: r }),
-      s.map((N) => I(N, B)),
-      x && /* @__PURE__ */ t.jsx(
+    r && y && /* @__PURE__ */ t.jsx(qt, { ...y }),
+    /* @__PURE__ */ t.jsxs("div", { className: Z.products, children: [
+      o && /* @__PURE__ */ t.jsx("h5", { className: Z.subtitle, children: o }),
+      s.map((g) => $(g, w)),
+      j && /* @__PURE__ */ t.jsx(
         "div",
         {
           style: {
@@ -949,33 +976,33 @@ const Ue = (d) => {
             gap: 5
           },
           children: /* @__PURE__ */ t.jsx(
-            lt,
+            ot,
             {
               withoutHover: !0,
-              className: U(Q.button, {
-                [Q.disabled]: !!(b && b <= s.length || s.length === h.length)
+              className: Y(Z.button, {
+                [Z.disabled]: !!(h && h <= s.length || s.length === p.length)
               }),
               size: "s",
-              disabled: !!(b && b <= s.length || s.length === h.length),
+              disabled: !!(h && h <= s.length || s.length === p.length),
               onClick: () => {
-                const N = [...s];
-                let g = null;
-                if (h) {
-                  for (let C = 0; C < h.length; C++)
-                    if (!s.find((F) => F === h[C].id)) {
-                      g = h[C];
+                const g = [...s];
+                let B = null;
+                if (p) {
+                  for (let E = 0; E < p.length; E++)
+                    if (!s.find((F) => F === p[E].id)) {
+                      B = p[E];
                       break;
                     }
                 }
-                N.push((g == null ? void 0 : g.id) || h[0].id), i(N);
+                g.push((B == null ? void 0 : B.id) || p[0].id), i(g);
               },
               style: {
                 width: "fit-content"
               },
-              children: /* @__PURE__ */ t.jsxs("div", { className: Q.addButton, children: [
+              children: /* @__PURE__ */ t.jsxs("div", { className: Z.addButton, children: [
                 /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
                 /* @__PURE__ */ t.jsx(
-                  v,
+                  b,
                   {
                     name: "Plus",
                     width: 16,
@@ -988,14 +1015,14 @@ const Ue = (d) => {
         }
       )
     ] }),
-    a !== void 0 && /* @__PURE__ */ t.jsx(yt, { items: a }),
-    u !== void 0 && /* @__PURE__ */ t.jsx(
-      K,
+    c !== void 0 && /* @__PURE__ */ t.jsx(Tt, { items: c }),
+    _ !== void 0 && /* @__PURE__ */ t.jsx(
+      tt,
       {
         label: "Auto scroll interval",
         type: "number",
-        value: String(u.scrollInterval),
-        onChange: (N) => u.setScrollInterval(Number(N)),
+        value: String(_.scrollInterval),
+        onChange: (g) => _.setScrollInterval(Number(g)),
         min: 0.1,
         max: 100,
         style: {
@@ -1005,54 +1032,306 @@ const Ue = (d) => {
       }
     )
   ] });
-}, ps = "_title_1vfw9_1", xs = "_subtitle_1vfw9_5", gs = "_header_1vfw9_12", fs = "_text_1vfw9_13", bs = "_productsBlock_1vfw9_14", vs = "_top_1vfw9_26", js = "_itemsBlock_1vfw9_35", ys = "_typeTexts_1vfw9_41", ks = "_block_1vfw9_48", Is = "_active_1vfw9_61", $s = "_products_1vfw9_14", Ns = "_product_1vfw9_14", ws = "_button_1vfw9_80", Cs = "_disabled_1vfw9_91", Bs = "_image_1vfw9_95", Ss = "_info_1vfw9_102", Ts = "_name_1vfw9_114", Ps = "_buttons_1vfw9_118", As = "_modal_1vfw9_125", Ms = "_link_1vfw9_145", Os = "_modalOptions_1vfw9_151", qs = "_addButton_1vfw9_164", Es = "_deleteButton_1vfw9_179", Ds = "_closeIcon_1vfw9_191", R = {
-  title: ps,
+}, gs = "_title_roi3a_1", xs = "_subtitle_roi3a_5", bs = "_header_roi3a_12", vs = "_text_roi3a_13", js = "_productsBlock_roi3a_14", ys = "_top_roi3a_26", ks = "_itemsBlock_roi3a_35", $s = "_typeTexts_roi3a_41", Is = "_block_roi3a_48", Ns = "_active_roi3a_61", ws = "_products_roi3a_14", Cs = "_product_roi3a_14", Ss = "_button_roi3a_80", Bs = "_disabled_roi3a_91", Ts = "_image_roi3a_95", Ps = "_info_roi3a_102", As = "_name_roi3a_114", Os = "_buttons_roi3a_118", Ms = "_modal_roi3a_125", qs = "_link_roi3a_145", Es = "_modalOptions_roi3a_151", Ds = "_addButton_roi3a_164", Us = "_deleteButton_roi3a_179", Hs = "_closeIcon_roi3a_191", J = {
+  title: gs,
   subtitle: xs,
-  header: gs,
-  text: fs,
-  productsBlock: bs,
-  top: vs,
-  itemsBlock: js,
-  typeTexts: ys,
-  block: ks,
-  active: Is,
-  products: $s,
-  product: Ns,
-  button: ws,
-  disabled: Cs,
-  image: Bs,
-  info: Ss,
-  name: Ts,
-  buttons: Ps,
-  modal: As,
-  link: Ms,
-  modalOptions: Os,
-  addButton: qs,
-  deleteButton: Es,
-  closeIcon: Ds
-}, Ls = f.forwardRef(
-  (d, o) => {
-    const { activeItem: e, setActiveItem: s, popupPosition: i, modalOptions: a, setIsOpenModal: l } = d;
-    function r(n, c) {
-      return n.length > c ? `${n.slice(0, c)}...` : n;
+  header: bs,
+  text: vs,
+  productsBlock: js,
+  top: ys,
+  itemsBlock: ks,
+  typeTexts: $s,
+  block: Is,
+  active: Ns,
+  products: ws,
+  product: Cs,
+  button: Ss,
+  disabled: Bs,
+  image: Ts,
+  info: Ps,
+  name: As,
+  buttons: Os,
+  modal: Ms,
+  link: qs,
+  modalOptions: Es,
+  addButton: Ds,
+  deleteButton: Us,
+  closeIcon: Hs
+};
+function Rs({ product: u, children: a }) {
+  const {
+    attributes: e,
+    listeners: s,
+    setNodeRef: i,
+    transform: c,
+    transition: l,
+    isDragging: o
+  } = Ct({
+    id: u.id
+  }), n = {
+    transform: St.Transform.toString(c),
+    transition: l
+  };
+  return /* @__PURE__ */ t.jsx(
+    "div",
+    {
+      ref: i,
+      style: n,
+      className: `${J.product} ${o ? J.dragging : ""}`,
+      ...e,
+      ...s,
+      children: a
+    }
+  );
+}
+const Qa = (u) => {
+  const {
+    isActiveItems: a,
+    setIsActiveItems: e,
+    items: s,
+    setItems: i,
+    title: c,
+    subtitle: l,
+    editable: o = !0,
+    draggable: n = !1,
+    deletable: d = !0,
+    addable: j = !0,
+    itemsType: p,
+    itemsOptions: r,
+    addableOptions: y = {},
+    limit: h
+  } = u, [_, w] = f.useState(null), [H, $] = f.useState(null), g = f.useRef(null), B = yt(
+    kt(wt, {
+      activationConstraint: {
+        distance: 5
+      }
+    })
+  );
+  f.useEffect(() => {
+    if (_) {
+      const v = [...s].map((A) => A.id === _.id ? _ : A);
+      i(v);
     }
+  }, [_]), f.useEffect(() => {
+    g.current && H && (g.current.getBoundingClientRect().height, H.top);
+  }, [g.current, H]);
+  const E = (v, A) => {
+    v.stopPropagation();
+    const x = v.target.getBoundingClientRect();
+    $({
+      top: x.top + window.scrollY,
+      left: x.left - 30
+    }), w(A);
+  }, F = (v) => {
+    const { active: A, over: x } = v;
+    if (x && A.id !== x.id) {
+      const I = s.findIndex((R) => R.id === A.id), C = s.findIndex((R) => R.id === x.id);
+      if (I !== -1 && C !== -1) {
+        const R = [...s], [O] = R.splice(I, 1);
+        R.splice(C, 0, O), i(R);
+      }
+    }
+  }, T = (v, A) => {
+    const x = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+      n && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
+        b,
+        {
+          name: "DotsSixVertical",
+          hoverable: !0,
+          width: 20,
+          height: 20
+        }
+      ) }),
+      p === "select" && r && /* @__PURE__ */ t.jsx(
+        et,
+        {
+          onChange: (I) => {
+            const C = [...s], R = r.find((U) => U.name === I);
+            if (!R) return;
+            const O = C.map((U) => U.id === v.id ? {
+              ...R,
+              name: {
+                "en-US": I
+              }
+            } : U);
+            w({
+              ...v,
+              name: {
+                "en-US": I
+              }
+            }), i([...O]);
+          },
+          value: v.name,
+          options: r.filter((I) => !s.find((C) => C.name === I.name)).map((I) => I.name)
+        }
+      ),
+      /* @__PURE__ */ t.jsxs("div", { className: J.buttons, children: [
+        o && /* @__PURE__ */ t.jsx("div", { className: J.deleteButton, children: /* @__PURE__ */ t.jsx(
+          b,
+          {
+            name: "Sliders",
+            hoverable: !0,
+            width: 20,
+            height: 20,
+            onClick: (I) => E(I, v)
+          }
+        ) }),
+        d && /* @__PURE__ */ t.jsx("div", { className: J.deleteButton, children: /* @__PURE__ */ t.jsx(
+          b,
+          {
+            name: "Trash",
+            hoverable: !0,
+            width: 20,
+            height: 20,
+            fill: "#C12A2A",
+            onClick: () => i(s.filter((I) => I.id !== v.id))
+          }
+        ) })
+      ] })
+    ] });
+    return n ? /* @__PURE__ */ t.jsx(
+      Rs,
+      {
+        product: v,
+        index: A,
+        children: x
+      },
+      v.id
+    ) : /* @__PURE__ */ t.jsx(
+      "div",
+      {
+        className: J.product,
+        children: x
+      },
+      v.id
+    );
+  };
+  return /* @__PURE__ */ t.jsxs("div", { className: J.productsBlock, children: [
+    (c || a !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: J.top, children: [
+      c && /* @__PURE__ */ t.jsx("h3", { className: J.title, children: c }),
+      a !== void 0 && /* @__PURE__ */ t.jsx(
+        st,
+        {
+          current: a,
+          onChange: (v) => e == null ? void 0 : e(v)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t.jsxs("div", { className: J.products, children: [
+      l && /* @__PURE__ */ t.jsx("h5", { className: J.subtitle, children: l }),
+      n ? /* @__PURE__ */ t.jsx(
+        $t,
+        {
+          sensors: B,
+          onDragEnd: F,
+          children: /* @__PURE__ */ t.jsx(
+            It,
+            {
+              items: s.map((v) => v.id),
+              strategy: Nt,
+              children: s.map((v, A) => T(v, A))
+            }
+          )
+        }
+      ) : s.map((v, A) => T(v, A)),
+      j && /* @__PURE__ */ t.jsx(
+        "div",
+        {
+          style: {
+            width: "100%",
+            display: "flex",
+            justifyContent: "center"
+          },
+          children: /* @__PURE__ */ t.jsx(
+            ot,
+            {
+              withoutHover: !0,
+              className: Y(J.button, {
+                [J.disabled]: !!(h && h <= s.length || s.length === (r == null ? void 0 : r.length))
+              }),
+              size: "s",
+              disabled: !!(h && h <= s.length || s.length === (r == null ? void 0 : r.length)),
+              onClick: () => {
+                const v = [...s];
+                let A = null;
+                if (r) {
+                  for (let x = 0; x < r.length; x++)
+                    if (!s.find((I) => I.id === r[x].id)) {
+                      A = r[x];
+                      break;
+                    }
+                }
+                p === "select" && r && v.push({
+                  name: A ? A.name : r[0].name,
+                  id: (A == null ? void 0 : A.id) || r[0].id,
+                  ...y
+                }), i(v);
+              },
+              style: {
+                width: "fit-content"
+              },
+              children: /* @__PURE__ */ t.jsxs("div", { className: J.addButton, children: [
+                /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
+                /* @__PURE__ */ t.jsx(
+                  b,
+                  {
+                    name: "Plus",
+                    width: 16,
+                    height: 16
+                  }
+                )
+              ] })
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+}, Ls = "_title_1vfw9_1", zs = "_subtitle_1vfw9_5", Fs = "_header_1vfw9_12", Vs = "_text_1vfw9_13", Ys = "_productsBlock_1vfw9_14", Gs = "_top_1vfw9_26", Xs = "_itemsBlock_1vfw9_35", Ws = "_typeTexts_1vfw9_41", Js = "_block_1vfw9_48", Qs = "_active_1vfw9_61", Ks = "_products_1vfw9_14", Zs = "_product_1vfw9_14", tn = "_button_1vfw9_80", en = "_disabled_1vfw9_91", sn = "_image_1vfw9_95", nn = "_info_1vfw9_102", on = "_name_1vfw9_114", an = "_buttons_1vfw9_118", cn = "_modal_1vfw9_125", ln = "_link_1vfw9_145", rn = "_modalOptions_1vfw9_151", dn = "_addButton_1vfw9_164", un = "_deleteButton_1vfw9_179", _n = "_closeIcon_1vfw9_191", V = {
+  title: Ls,
+  subtitle: zs,
+  header: Fs,
+  text: Vs,
+  productsBlock: Ys,
+  top: Gs,
+  itemsBlock: Xs,
+  typeTexts: Ws,
+  block: Js,
+  active: Qs,
+  products: Ks,
+  product: Zs,
+  button: tn,
+  disabled: en,
+  image: sn,
+  info: nn,
+  name: on,
+  buttons: an,
+  modal: cn,
+  link: ln,
+  modalOptions: rn,
+  addButton: dn,
+  deleteButton: un,
+  closeIcon: _n
+}, mn = f.forwardRef(
+  (u, a) => {
+    const { activeItem: e, setActiveItem: s, popupPosition: i, modalOptions: c, setIsOpenModal: l } = u;
     return /* @__PURE__ */ t.jsxs(
       "div",
       {
-        ref: o,
-        className: R.modal,
-        onClick: (n) => {
-          n.stopPropagation();
+        ref: a,
+        className: V.modal,
+        onClick: (o) => {
+          o.stopPropagation();
         },
         style: {
           top: `${i.top}px`,
           left: `${i.left}px`
         },
         children: [
-          /* @__PURE__ */ t.jsxs("div", { className: R.top, children: [
-            /* @__PURE__ */ t.jsx("h3", { className: R.title, children: r(e.name, 20) }),
-            /* @__PURE__ */ t.jsx("div", { className: R.closeIcon, children: /* @__PURE__ */ t.jsx(
-              v,
+          /* @__PURE__ */ t.jsxs("div", { className: V.top, children: [
+            /* @__PURE__ */ t.jsx("h3", { className: V.title, children: e.name["en-US"] }),
+            /* @__PURE__ */ t.jsx("div", { className: V.closeIcon, children: /* @__PURE__ */ t.jsx(
+              b,
               {
                 name: "X",
                 height: 20,
@@ -1064,117 +1343,119 @@ const Ue = (d) => {
               }
             ) })
           ] }),
-          /* @__PURE__ */ t.jsx("div", { className: R.modalOptions, children: a.map((n) => {
-            if (n.type === "image")
+          /* @__PURE__ */ t.jsx("div", { className: V.modalOptions, children: c.map((o) => {
+            if (o.type === "image")
               return /* @__PURE__ */ t.jsx(
-                ft,
+                bt,
                 {
                   label: "Put up an attractive image",
-                  activeImage: e[n.field],
-                  onChange: (c) => {
-                    const x = {
+                  activeImage: e[o.field],
+                  onChange: (n) => {
+                    const d = {
                       ...e,
-                      [n.field]: c
+                      [o.field]: n
                     };
-                    s(x);
+                    s(d);
                   }
                 },
-                String(n.field)
+                String(o.field)
               );
-            if (n.type === "text")
+            if (o.type === "text")
               return /* @__PURE__ */ t.jsx(
-                zt,
+                Lt,
                 {
-                  typesText: e[n.field.type],
-                  setTypesText: (c) => {
-                    const x = {
+                  typesText: e[o.field.type],
+                  setTypesText: (n) => {
+                    const d = {
                       ...e,
-                      [n.field.type]: c
+                      [o.field.type]: n
                     };
-                    s(x);
+                    s(d);
                   },
-                  text: e[n.field.text] || "",
-                  setText: (c) => {
-                    const x = {
+                  text: e[o.field.text]["en-US"] || "",
+                  setText: (n) => {
+                    const d = {
                       ...e,
-                      [n.field.text]: c
+                      [o.field.text]: {
+                        "en-US": n
+                      }
                     };
-                    s(x);
+                    s(d);
                   },
-                  typeFont: e[n.field.type],
-                  setTypeFont: (c) => {
-                    const x = {
+                  typeFont: e[o.field.type],
+                  setTypeFont: (n) => {
+                    const d = {
                       ...e,
-                      [n.field.type]: c
+                      [o.field.type]: n
                     };
-                    s(x);
+                    s(d);
                   },
-                  subtitle: n.label
+                  subtitle: o.label
                 }
               );
-            if (n.type === "input")
+            if (o.type === "input")
               return /* @__PURE__ */ t.jsx(
-                K,
+                tt,
                 {
-                  onChange: (c) => {
-                    const x = {
+                  onChange: (n) => {
+                    const d = {
                       ...e,
-                      [n.field]: c
+                      [o.field]: n
                     };
-                    s(x);
+                    s(d);
                   },
-                  value: e[n.field] || "",
-                  label: n.label,
-                  placeholder: n.placeholder
+                  value: e[o.field] || "",
+                  label: o.label,
+                  placeholder: o.placeholder
                 }
               );
-            if (n.type === "inputSwitch")
-              return /* @__PURE__ */ t.jsxs("div", { className: R.link, children: [
+            if (o.type === "inputSwitch")
+              return /* @__PURE__ */ t.jsxs("div", { className: V.link, children: [
                 /* @__PURE__ */ t.jsx(
-                  K,
+                  tt,
                   {
-                    onChange: (c) => {
-                      const x = {
+                    onChange: (n) => {
+                      const d = {
                         ...e,
-                        [n.field.text]: c
+                        [o.field.text]: n
                       };
-                      s(x);
+                      s(d);
                     },
-                    value: e[n.field.text] || "",
-                    label: n.inputLabel,
-                    placeholder: n.placeholder
+                    value: e[o.field.text] || "",
+                    label: o.inputLabel,
+                    placeholder: o.placeholder
                   }
                 ),
                 /* @__PURE__ */ t.jsx(
                   st,
                   {
-                    current: !!e[n.field.switch] || !1,
-                    label: n.switchLabel,
-                    onChange: (c) => {
-                      const x = {
+                    current: !!e[o.field.switch] || !1,
+                    label: o.switchLabel,
+                    onChange: (n) => {
+                      const d = {
                         ...e,
-                        [n.field.switch]: c
+                        [o.field.switch]: n
                       };
-                      s(x);
+                      s(d);
                     }
                   }
                 )
               ] });
-            if (n.type === "select")
+            if (o.type === "select")
               return /* @__PURE__ */ t.jsx(
                 et,
                 {
-                  options: n.itemsOptions,
-                  onChange: (c) => {
-                    const x = {
+                  options: o.itemsOptions,
+                  onChange: (n) => {
+                    const d = {
                       ...e,
-                      [n.field]: c
+                      [o.field]: n
                     };
-                    s(x);
+                    s(d);
                   },
-                  label: n.label,
-                  value: e[n.field] || "String",
-                  leftAddon: n.leftAddon && n.leftAddon === "icon" && /* @__PURE__ */ t.jsx(v, { name: e[n.field] })
+                  label: o.label,
+                  value: e[o.field] || "String",
+                  leftAddon: o.leftAddon && o.leftAddon === "icon" && /* @__PURE__ */ t.jsx(b, { name: e[o.field] })
                 }
               );
           }) })
@@ -1183,98 +1464,98 @@ const Ue = (d) => {
     );
   }
 );
-function Hs(d) {
-  const { product: o, children: e } = d, { attributes: s, listeners: i, setNodeRef: a, transform: l, transition: r, isDragging: n } = Tt({
-    id: o.id
-  }), c = {
-    transform: Pt.Transform.toString(l),
-    transition: r
+function hn(u) {
+  const { product: a, children: e } = u, { attributes: s, listeners: i, setNodeRef: c, transform: l, transition: o, isDragging: n } = Ct({
+    id: a.id
+  }), d = {
+    transform: St.Transform.toString(l),
+    transition: o
   };
   return /* @__PURE__ */ t.jsx(
     "div",
     {
-      ref: a,
-      style: c,
-      className: `${R.product} ${n ? R.dragging : ""}`,
+      ref: c,
+      style: d,
+      className: `${V.product} ${n ? V.dragging : ""}`,
       ...s,
       ...i,
       children: e
     }
   );
 }
-const ja = (d) => {
+const Ka = (u) => {
   const {
-    isActiveItems: o,
+    isActiveItems: a,
     setIsActiveItems: e,
     items: s,
     setItems: i,
-    other: a,
+    other: c,
     title: l,
-    subtitle: r,
+    subtitle: o,
     editable: n = !0,
-    draggable: c = !1,
-    withImage: x = !1,
-    deletable: h = !0,
-    addable: p = !0,
-    itemsType: _,
-    itemsPlaceholder: b = "",
-    itemsOptions: u,
-    hasRangeSelector: B = !1,
+    draggable: d = !1,
+    withImage: j = !1,
+    deletable: p = !0,
+    addable: r = !0,
+    itemsType: y,
+    itemsPlaceholder: h = "",
+    itemsOptions: _,
+    hasRangeSelector: w = !1,
     rangeSelectorOptions: H,
-    modalOptions: I,
-    addableOptions: N = {}
-  } = d, [g, C] = f.useState(null), [F, S] = f.useState({
+    modalOptions: $,
+    addableOptions: g = {}
+  } = u, [B, E] = f.useState(null), [F, T] = f.useState({
     top: 0,
     left: 0
-  }), [Y, E] = f.useState(null), y = f.useRef(null), [M, T] = f.useState(!1), W = $t(
-    Nt(St, {
+  }), [v, A] = f.useState(null), x = f.useRef(null), [I, C] = f.useState(!1), R = yt(
+    kt(wt, {
       activationConstraint: {
         distance: 5
       }
     })
   );
   f.useEffect(() => {
-    const j = () => {
-      C(null), T(!1);
+    const k = () => {
+      E(null), C(!1);
     };
-    return document.body.addEventListener("click", j), C(null), T(!1), () => {
-      C(null), T(!1), document.body.removeEventListener("click", j);
+    return document.body.addEventListener("click", k), E(null), C(!1), () => {
+      E(null), C(!1), document.body.removeEventListener("click", k);
     };
   }, []), f.useEffect(() => {
-    if (g) {
-      const j = [...s].map((q) => q.id === g.id ? g : q);
-      i(j);
+    if (B) {
+      const k = [...s].map((D) => D.id === B.id ? B : D);
+      i(k);
     }
-  }, [g]), f.useEffect(() => {
-    if (y.current && Y) {
-      const j = y.current.getBoundingClientRect().height, q = window.innerHeight;
-      let m = Y.top;
-      m + j > q + window.scrollY - 200 && (m = q + window.scrollY - j - 200), m < 0 && (m = 10), S({
+  }, [B]), f.useEffect(() => {
+    if (x.current && v) {
+      const k = x.current.getBoundingClientRect().height, D = window.innerHeight;
+      let m = v.top;
+      m + k > D + window.scrollY - 200 && (m = D + window.scrollY - k - 200), m < 0 && (m = 10), T({
         top: m,
-        left: Y.left
+        left: v.left
       });
     }
-  }, [y.current, Y]);
-  const O = (j, q) => {
-    j.stopPropagation();
-    const m = j.target.getBoundingClientRect();
-    E({
+  }, [x.current, v]);
+  const O = (k, D) => {
+    k.stopPropagation();
+    const m = k.target.getBoundingClientRect();
+    A({
       top: m.top + window.scrollY,
       left: m.left - 30
-    }), C(q), T(!0);
+    }), E(D), C(!0);
   };
-  function z(j) {
-    if (x)
-      return j ? /* @__PURE__ */ t.jsx(
+  function U(k) {
+    if (j)
+      return k ? /* @__PURE__ */ t.jsx(
         "img",
         {
-          src: `https://imagedelivery.net/${j[0]}/w=1000`,
+          src: `https://imagedelivery.net/${k[0]}/w=1000`,
           alt: "image",
           width: 16,
           height: 16
         }
       ) : /* @__PURE__ */ t.jsx(
-        v,
+        b,
         {
           name: "Image",
           width: 16,
@@ -1283,20 +1564,20 @@ const ja = (d) => {
         }
       );
   }
-  const Z = (j) => {
-    const { active: q, over: m } = j;
-    if (m && q.id !== m.id) {
-      const k = s.findIndex((D) => D.id === q.id), P = s.findIndex((D) => D.id === m.id);
-      if (k !== -1 && P !== -1) {
-        const D = [...s], [G] = D.splice(k, 1);
-        D.splice(P, 0, G), i(D);
+  const nt = (k) => {
+    const { active: D, over: m } = k;
+    if (m && D.id !== m.id) {
+      const N = s.findIndex((L) => L.id === D.id), M = s.findIndex((L) => L.id === m.id);
+      if (N !== -1 && M !== -1) {
+        const L = [...s], [X] = L.splice(N, 1);
+        L.splice(M, 0, X), i(L);
       }
     }
-  }, rt = (j) => {
+  }, dt = (k) => {
     var m;
-    const q = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-      c && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-        v,
+    const D = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+      d && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
+        b,
         {
           name: "DotsSixVertical",
           hoverable: !0,
@@ -1304,132 +1585,140 @@ const ja = (d) => {
           height: 20
         }
       ) }),
-      _ === "select" && u && /* @__PURE__ */ t.jsx(
+      y === "select" && _ && /* @__PURE__ */ t.jsx(
         et,
         {
-          onChange: (k) => {
-            const D = [...s].map((G) => G.id === j.id ? {
-              ...j,
-              name: k
-            } : G);
-            C({
-              ...j,
-              name: k
-            }), i([...D]);
+          onChange: (N) => {
+            const L = [...s].map((X) => X.id === k.id ? {
+              ...k,
+              name: {
+                "en-US": N
+              }
+            } : X);
+            E({
+              ...k,
+              name: {
+                "en-US": N
+              }
+            }), i([...L]);
           },
-          value: j.name,
-          options: u.filter((k) => !s.find((P) => P.name === k)),
-          leftAddon: z(j.images)
+          value: k.name["en-US"],
+          options: _.filter(
+            (N) => !s.find((M) => M.name["en-US"] === N)
+          ),
+          leftAddon: U(k.images)
         }
       ),
-      _ === "input" && /* @__PURE__ */ t.jsx(
-        K,
+      y === "input" && /* @__PURE__ */ t.jsx(
+        tt,
         {
-          onChange: (k) => {
-            const D = [...s].map((G) => G.id === j.id ? {
-              ...j,
-              name: k
-            } : G);
-            i([...D]);
+          onChange: (N) => {
+            const L = [...s].map((X) => X.id === k.id ? {
+              ...k,
+              name: {
+                "en-US": N
+              }
+            } : X);
+            i([...L]);
           },
-          value: j.name,
-          placeholder: b
+          value: k.name["en-US"],
+          placeholder: h
         }
       ),
-      _ === "image" && /* @__PURE__ */ t.jsx(
-        ft,
+      y === "image" && /* @__PURE__ */ t.jsx(
+        bt,
         {
-          onChange: (k) => {
-            const D = [...s].map((G) => G.id === j.id ? {
-              ...j,
-              images: k
-            } : G);
-            i([...D]);
+          onChange: (N) => {
+            const L = [...s].map((X) => X.id === k.id ? {
+              ...k,
+              images: N
+            } : X);
+            i([...L]);
           },
-          activeImage: (m = s.find((k) => k.id === j.id)) == null ? void 0 : m.images[0]
+          activeImage: (m = s.find((N) => N.id === k.id)) == null ? void 0 : m.images[0]
         }
       ),
-      /* @__PURE__ */ t.jsxs("div", { className: R.buttons, children: [
-        n && /* @__PURE__ */ t.jsx("div", { className: R.deleteButton, children: /* @__PURE__ */ t.jsx(
-          v,
+      /* @__PURE__ */ t.jsxs("div", { className: V.buttons, children: [
+        n && /* @__PURE__ */ t.jsx("div", { className: V.deleteButton, children: /* @__PURE__ */ t.jsx(
+          b,
           {
             name: "Sliders",
             hoverable: !0,
             width: 20,
             height: 20,
-            onClick: (k) => O(k, j)
+            onClick: (N) => O(N, k)
           }
         ) }),
-        h && /* @__PURE__ */ t.jsx("div", { className: R.deleteButton, children: /* @__PURE__ */ t.jsx(
-          v,
+        p && /* @__PURE__ */ t.jsx("div", { className: V.deleteButton, children: /* @__PURE__ */ t.jsx(
+          b,
           {
             name: "Trash",
             hoverable: !0,
             width: 20,
             height: 20,
             fill: "#C12A2A",
-            onClick: () => i(s.filter((k) => k.id !== j.id))
+            onClick: () => i(s.filter((N) => N.id !== k.id))
           }
         ) })
       ] })
     ] });
-    return c ? /* @__PURE__ */ t.jsx(
-      Hs,
+    return d ? /* @__PURE__ */ t.jsx(
+      hn,
       {
-        product: j,
-        children: q
+        product: k,
+        children: D
       },
-      j.id
+      k.id
     ) : /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: R.product,
-        children: q
+        className: V.product,
+        children: D
       },
-      j.id
+      k.id
     );
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: R.productsBlock, children: [
-    (l || o !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: R.top, children: [
-      l && /* @__PURE__ */ t.jsx("h3", { className: R.title, children: l }),
-      o !== void 0 && /* @__PURE__ */ t.jsx(
+  return /* @__PURE__ */ t.jsxs("div", { className: V.productsBlock, children: [
+    (l || a !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: V.top, children: [
+      l && /* @__PURE__ */ t.jsx("h3", { className: V.title, children: l }),
+      a !== void 0 && /* @__PURE__ */ t.jsx(
         st,
         {
-          current: o,
-          onChange: (j) => e == null ? void 0 : e(j)
+          current: a,
+          onChange: (k) => e == null ? void 0 : e(k)
         }
       )
     ] }),
-    g && n && I && M && /* @__PURE__ */ t.jsx(
-      Ls,
+    B && n && $ && I && /* @__PURE__ */ t.jsx(
+      mn,
       {
-        ref: y,
-        activeItem: g,
-        setActiveItem: C,
+        ref: x,
+        activeItem: B,
+        setActiveItem: E,
         popupPosition: F,
-        modalOptions: I,
-        setIsOpenModal: T
+        modalOptions: $,
+        setIsOpenModal: C
       }
     ),
-    B && H && /* @__PURE__ */ t.jsx(Ot, { ...H }),
-    /* @__PURE__ */ t.jsxs("div", { className: R.products, children: [
-      r && /* @__PURE__ */ t.jsx("h5", { className: R.subtitle, children: r }),
-      c ? /* @__PURE__ */ t.jsx(
-        wt,
+    w && H && /* @__PURE__ */ t.jsx(qt, { ...H }),
+    /* @__PURE__ */ t.jsxs("div", { className: V.products, children: [
+      o && /* @__PURE__ */ t.jsx("h5", { className: V.subtitle, children: o }),
+      d ? /* @__PURE__ */ t.jsx(
+        $t,
         {
-          sensors: W,
-          onDragEnd: Z,
+          sensors: R,
+          onDragEnd: nt,
           children: /* @__PURE__ */ t.jsx(
-            Ct,
+            It,
             {
-              items: s.map((j) => j.id),
-              strategy: Bt,
-              children: s.map((j) => rt(j))
+              items: s.map((k) => k.id),
+              strategy: Nt,
+              children: s.map((k) => dt(k))
             }
           )
         }
-      ) : s.map((j) => rt(j)),
-      p && /* @__PURE__ */ t.jsx(
+      ) : s.map((k) => dt(k)),
+      r && /* @__PURE__ */ t.jsx(
         "div",
         {
           style: {
@@ -1438,46 +1727,52 @@ const ja = (d) => {
             justifyContent: "center"
           },
           children: /* @__PURE__ */ t.jsx(
-            lt,
+            ot,
             {
               withoutHover: !0,
-              className: R.button,
+              className: V.button,
               size: "s",
               onClick: () => {
-                const j = [...s];
-                let q = null;
-                if (u) {
-                  for (let m = 0; m < u.length; m++)
-                    if (!s.find((k) => k.name === u[m])) {
-                      q = u[m];
+                const k = [...s];
+                let D = null;
+                if (_) {
+                  for (let m = 0; m < _.length; m++)
+                    if (!s.find((N) => N.name["en-US"] === _[m])) {
+                      D = _[m];
                       break;
                     }
                 }
-                _ === "select" && u ? j.push({
-                  name: q || u[0],
-                  id: _t(),
-                  ...N,
+                y === "select" && _ ? k.push({
+                  name: {
+                    "en-US": D || _[0]
+                  },
+                  id: ht(),
+                  ...g,
                   maxSymbols: 100
                   // пример значения
-                }) : _ === "input" ? j.push({
-                  name: "",
-                  id: _t(),
-                  ...N,
+                }) : y === "input" ? k.push({
+                  name: {
+                    "en-US": ""
+                  },
+                  id: ht(),
+                  ...g,
                   maxSymbols: 100
-                }) : j.push({
-                  name: `Image ${s.length + 1}`,
-                  id: _t(),
-                  ...N,
+                }) : k.push({
+                  name: {
+                    "en-US": `Image ${s.length + 1}`
+                  },
+                  id: ht(),
+                  ...g,
                   maxSymbols: 100
-                }), i(j);
+                }), i(k);
               },
               style: {
                 width: "fit-content"
               },
-              children: /* @__PURE__ */ t.jsxs("div", { className: R.addButton, children: [
+              children: /* @__PURE__ */ t.jsxs("div", { className: V.addButton, children: [
                 /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
                 /* @__PURE__ */ t.jsx(
-                  v,
+                  b,
                   {
                     name: "Plus",
                     width: 16,
@@ -1490,62 +1785,62 @@ const ja = (d) => {
         }
       )
     ] }),
-    a !== void 0 && /* @__PURE__ */ t.jsx(yt, { items: a })
+    c !== void 0 && /* @__PURE__ */ t.jsx(Tt, { items: c })
   ] });
-}, zs = "_title_bn7sv_1", Rs = "_subtitle_bn7sv_5", Fs = "_header_bn7sv_12", Vs = "_text_bn7sv_13", Us = "_productsBlock_bn7sv_14", Ys = "_buttonsBlock_bn7sv_15", Gs = "_top_bn7sv_26", Xs = "_itemsBlock_bn7sv_35", Ws = "_typeTexts_bn7sv_41", Js = "_block_bn7sv_48", Qs = "_active_bn7sv_60", Ks = "_products_bn7sv_14", Zs = "_product_bn7sv_14", tn = "_button_bn7sv_15", en = "_image_bn7sv_90", sn = "_info_bn7sv_97", nn = "_name_bn7sv_109", on = "_buttons_bn7sv_15", an = "_modal_bn7sv_120", cn = "_other_bn7sv_139", ln = "_options_bn7sv_145", rn = "_closeIcon_bn7sv_153", ct = {
-  title: zs,
-  subtitle: Rs,
-  header: Fs,
-  text: Vs,
-  productsBlock: Us,
-  buttonsBlock: Ys,
-  top: Gs,
-  itemsBlock: Xs,
-  typeTexts: Ws,
-  block: Js,
-  active: Qs,
-  products: Ks,
-  product: Zs,
-  button: tn,
-  image: en,
-  info: sn,
-  name: nn,
-  buttons: on,
-  modal: an,
-  other: cn,
-  options: ln,
-  closeIcon: rn
-}, dn = f.forwardRef((d, o) => {
-  const { activeButton: e, setActiveButton: s, popupPosition: i } = d, [a, l] = f.useState(e.typesText), [r, n] = f.useState(e.destination), [c, x] = f.useState(e.page), [h, p] = f.useState(e.link || ""), [_, b] = f.useState(e.text || ""), [u, B] = f.useState(e.openInNewTab), { pages: H } = Vt();
+}, pn = "_title_bn7sv_1", fn = "_subtitle_bn7sv_5", gn = "_header_bn7sv_12", xn = "_text_bn7sv_13", bn = "_productsBlock_bn7sv_14", vn = "_buttonsBlock_bn7sv_15", jn = "_top_bn7sv_26", yn = "_itemsBlock_bn7sv_35", kn = "_typeTexts_bn7sv_41", $n = "_block_bn7sv_48", In = "_active_bn7sv_60", Nn = "_products_bn7sv_14", wn = "_product_bn7sv_14", Cn = "_button_bn7sv_15", Sn = "_image_bn7sv_90", Bn = "_info_bn7sv_97", Tn = "_name_bn7sv_109", Pn = "_buttons_bn7sv_15", An = "_modal_bn7sv_120", On = "_other_bn7sv_139", Mn = "_options_bn7sv_145", qn = "_closeIcon_bn7sv_153", rt = {
+  title: pn,
+  subtitle: fn,
+  header: gn,
+  text: xn,
+  productsBlock: bn,
+  buttonsBlock: vn,
+  top: jn,
+  itemsBlock: yn,
+  typeTexts: kn,
+  block: $n,
+  active: In,
+  products: Nn,
+  product: wn,
+  button: Cn,
+  image: Sn,
+  info: Bn,
+  name: Tn,
+  buttons: Pn,
+  modal: An,
+  other: On,
+  options: Mn,
+  closeIcon: qn
+}, En = f.forwardRef((u, a) => {
+  const { activeButton: e, setActiveButton: s, popupPosition: i } = u, [c, l] = f.useState(e.typesText), [o, n] = f.useState(e.destination), [d, j] = f.useState(e.page), [p, r] = f.useState(e.link || ""), [y, h] = f.useState(e.text || { "en-US": "" }), [_, w] = f.useState(e.openInNewTab), { pages: H } = Vt();
   return f.useEffect(() => {
     s({
       ...e,
       ...{
-        text: _,
-        link: h,
-        destination: r,
-        typesText: a,
-        page: c,
-        openInNewTab: u
+        text: y,
+        link: p,
+        destination: o,
+        typesText: c,
+        page: d,
+        openInNewTab: _
       }
     });
-  }, [a, r, h, _, c, u]), /* @__PURE__ */ t.jsxs(
+  }, [c, o, p, y, d, _]), console.log(y), /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: ct.modal,
-      onClick: (I) => {
-        I.stopPropagation();
+      className: rt.modal,
+      onClick: ($) => {
+        $.stopPropagation();
       },
       style: {
         top: `${i.top}px`,
         left: `${i.left}px`
       },
-      ref: o,
+      ref: a,
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: ct.top, children: [
-          /* @__PURE__ */ t.jsx("h3", { className: ct.title, children: e.type }),
-          /* @__PURE__ */ t.jsx("div", { className: ct.closeIcon, children: /* @__PURE__ */ t.jsx(
-            v,
+        /* @__PURE__ */ t.jsxs("div", { className: rt.top, children: [
+          /* @__PURE__ */ t.jsx("h3", { className: rt.title, children: e.type }),
+          /* @__PURE__ */ t.jsx("div", { className: rt.closeIcon, children: /* @__PURE__ */ t.jsx(
+            b,
             {
               name: "X",
               height: 20,
@@ -1555,29 +1850,29 @@ const ja = (d) => {
             }
           ) })
         ] }),
-        /* @__PURE__ */ t.jsxs("div", { className: ct.options, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: rt.options, children: [
           /* @__PURE__ */ t.jsx(
             et,
             {
               label: "Destination",
-              onChange: (I) => n(I),
-              options: ["Go to Page", "Open Link"].filter((I) => I !== r),
-              value: r
+              onChange: ($) => n($),
+              options: ["Go to Page", "Open Link"].filter(($) => $ !== o),
+              value: o
             }
           ),
-          r === "Go to Page" ? /* @__PURE__ */ t.jsx(
+          o === "Go to Page" ? /* @__PURE__ */ t.jsx(
             et,
             {
               label: "Go to",
-              onChange: (I) => x(I),
-              options: H ? Object.values(H).filter((I) => I.name !== c).map((I) => I.name) : [],
-              value: c
+              onChange: ($) => j($),
+              options: H ? Object.values(H).filter(($) => $.name !== d).map(($) => $.name) : [],
+              value: d
             }
           ) : /* @__PURE__ */ t.jsx(
-            K,
+            tt,
             {
-              onChange: (I) => p(I),
-              value: h,
+              onChange: ($) => r($),
+              value: p,
               placeholder: "https://",
               label: "Link"
             }
@@ -1587,22 +1882,22 @@ const ja = (d) => {
             {
               current: e.openInNewTab,
               label: "Open in new tab",
-              onChange: (I) => B(I)
+              onChange: ($) => w($)
             }
           ),
           /* @__PURE__ */ t.jsx(
-            qt,
+            Et,
             {
-              onChange: (I) => b(I),
-              value: _,
+              onChange: ($) => h({ "en-US": $ }),
+              value: y["en-US"],
               label: "Text",
               maxLength: 150
             }
           ),
           /* @__PURE__ */ t.jsx(
-            Ht,
+            Rt,
             {
-              typesText: a,
+              typesText: c,
               setTypesText: l
             }
           )
@@ -1610,106 +1905,106 @@ const ja = (d) => {
       ]
     }
   );
-}), un = "_subtitle_jql1y_1", mn = "_header_jql1y_8", _n = "_text_jql1y_9", hn = "_productsBlock_jql1y_10", pn = "_buttonsBlock_jql1y_11", xn = "_top_jql1y_23", gn = "_itemsBlock_jql1y_32", fn = "_typeTexts_jql1y_38", bn = "_block_jql1y_45", vn = "_active_jql1y_58", jn = "_products_jql1y_10", yn = "_product_jql1y_10", kn = "_button_jql1y_11", In = "_image_jql1y_88", $n = "_info_jql1y_95", Nn = "_name_jql1y_107", wn = "_buttons_jql1y_11", Cn = "_modal_jql1y_118", Bn = "_other_jql1y_138", Sn = "_options_jql1y_144", Tn = "_addButton_jql1y_150", Pn = "_deleteButton_jql1y_165", it = {
-  subtitle: un,
-  header: mn,
-  text: _n,
-  productsBlock: hn,
-  buttonsBlock: pn,
-  top: xn,
-  itemsBlock: gn,
-  typeTexts: fn,
-  block: bn,
-  active: vn,
-  products: jn,
-  product: yn,
-  button: kn,
-  image: In,
-  info: $n,
-  name: Nn,
-  buttons: wn,
-  modal: Cn,
-  other: Bn,
-  options: Sn,
-  addButton: Tn,
-  deleteButton: Pn
-}, An = (d) => {
-  const { buttons: o, setButtons: e, deletable: s = !0, addable: i = !0 } = d, [a, l] = f.useState(null), [r, n] = f.useState({
+}), Dn = "_subtitle_jql1y_1", Un = "_header_jql1y_8", Hn = "_text_jql1y_9", Rn = "_productsBlock_jql1y_10", Ln = "_buttonsBlock_jql1y_11", zn = "_top_jql1y_23", Fn = "_itemsBlock_jql1y_32", Vn = "_typeTexts_jql1y_38", Yn = "_block_jql1y_45", Gn = "_active_jql1y_58", Xn = "_products_jql1y_10", Wn = "_product_jql1y_10", Jn = "_button_jql1y_11", Qn = "_image_jql1y_88", Kn = "_info_jql1y_95", Zn = "_name_jql1y_107", ti = "_buttons_jql1y_11", ei = "_modal_jql1y_118", si = "_other_jql1y_138", ni = "_options_jql1y_144", ii = "_addButton_jql1y_150", oi = "_deleteButton_jql1y_165", at = {
+  subtitle: Dn,
+  header: Un,
+  text: Hn,
+  productsBlock: Rn,
+  buttonsBlock: Ln,
+  top: zn,
+  itemsBlock: Fn,
+  typeTexts: Vn,
+  block: Yn,
+  active: Gn,
+  products: Xn,
+  product: Wn,
+  button: Jn,
+  image: Qn,
+  info: Kn,
+  name: Zn,
+  buttons: ti,
+  modal: ei,
+  other: si,
+  options: ni,
+  addButton: ii,
+  deleteButton: oi
+}, ai = (u) => {
+  const { buttons: a, setButtons: e, deletable: s = !0, addable: i = !0, editable: c = !0 } = u, [l, o] = f.useState(null), [n, d] = f.useState({
     top: 0,
     left: 0
-  }), [c, x] = f.useState(null), h = f.useRef(null);
+  }), [j, p] = f.useState(null), r = f.useRef(null);
   f.useEffect(() => {
-    const _ = () => {
-      l(null);
+    const h = () => {
+      o(null);
     };
-    return document.body.addEventListener("click", _), l(null), () => {
-      l(null), document.body.removeEventListener("click", _);
+    return document.body.addEventListener("click", h), o(null), () => {
+      o(null), document.body.removeEventListener("click", h);
     };
   }, []), f.useEffect(() => {
-    if (a) {
-      const _ = [...o].map((b) => b.id === a.id ? a : b);
-      e(_);
+    if (l) {
+      const h = [...a].map((_) => _.id === l.id ? l : _);
+      e(h);
     }
-  }, [a]), f.useEffect(() => {
-    if (h.current && c) {
-      const _ = h.current.getBoundingClientRect().height, b = window.innerHeight;
-      let u = c.top;
-      u + _ > b + window.scrollY - 200 && (u = b + window.scrollY - _ - 200), u < 0 && (u = 10), n({
-        top: u,
-        left: c.left
+  }, [l]), f.useEffect(() => {
+    if (r.current && j) {
+      const h = r.current.getBoundingClientRect().height, _ = window.innerHeight;
+      let w = j.top;
+      w + h > _ + window.scrollY - 200 && (w = _ + window.scrollY - h - 200), w < 0 && (w = 10), d({
+        top: w,
+        left: j.left
       });
     }
-  }, [h.current, c]);
-  const p = (_, b) => {
-    _.stopPropagation();
-    const u = _.target.getBoundingClientRect();
-    x({
-      top: u.top + window.scrollY,
-      left: u.left - 30
-    }), l(b);
+  }, [r.current, j]);
+  const y = (h, _) => {
+    h.stopPropagation();
+    const w = h.target.getBoundingClientRect();
+    p({
+      top: w.top + window.scrollY - 70,
+      left: w.left - (i ? 30 : 65)
+    }), o(_);
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: it.products, children: [
-    /* @__PURE__ */ t.jsx("h5", { className: it.subtitle, children: "Button Type" }),
-    o.map((_) => /* @__PURE__ */ t.jsxs(
+  return /* @__PURE__ */ t.jsxs("div", { className: at.products, children: [
+    /* @__PURE__ */ t.jsx("h5", { className: at.subtitle, children: "Button Type" }),
+    a.map((h) => /* @__PURE__ */ t.jsxs(
       "div",
       {
-        className: it.product,
+        className: at.product,
         children: [
           /* @__PURE__ */ t.jsx(
             et,
             {
-              onChange: (b) => {
-                const B = [...o].map((H) => H.id === _.id ? {
-                  ..._,
-                  type: b
-                } : H);
-                e(B);
+              onChange: (_) => {
+                const H = [...a].map(($) => $.id === h.id ? {
+                  ...h,
+                  type: _
+                } : $);
+                e(H);
               },
-              value: _.type,
+              value: h.type,
               options: ["Primary", "Secondary", "Tertiary"]
             }
           ),
-          /* @__PURE__ */ t.jsxs("div", { className: it.buttons, children: [
-            /* @__PURE__ */ t.jsx("div", { className: it.deleteButton, children: /* @__PURE__ */ t.jsx(
-              v,
+          /* @__PURE__ */ t.jsxs("div", { className: at.buttons, children: [
+            c && /* @__PURE__ */ t.jsx("div", { className: at.deleteButton, children: /* @__PURE__ */ t.jsx(
+              b,
               {
                 name: "Sliders",
                 hoverable: !0,
                 width: 20,
                 height: 20,
-                onClick: (b) => {
-                  p(b, _);
+                onClick: (_) => {
+                  y(_, h);
                 }
               }
             ) }),
-            s && /* @__PURE__ */ t.jsx("div", { className: it.deleteButton, children: /* @__PURE__ */ t.jsx(
-              v,
+            s && /* @__PURE__ */ t.jsx("div", { className: at.deleteButton, children: /* @__PURE__ */ t.jsx(
+              b,
               {
                 name: "Trash",
                 hoverable: !0,
                 onClick: () => {
-                  const b = o.filter((u) => u.id !== _.id);
-                  e(b);
+                  const _ = a.filter((w) => w.id !== h.id);
+                  e(_);
                 },
                 width: 20,
                 height: 20,
@@ -1719,15 +2014,15 @@ const ja = (d) => {
           ] })
         ]
       },
-      _.id
+      h.id
     )),
-    a && /* @__PURE__ */ t.jsx(
-      dn,
+    l && /* @__PURE__ */ t.jsx(
+      En,
       {
-        ref: h,
-        activeButton: a,
-        setActiveButton: l,
-        popupPosition: r
+        ref: r,
+        activeButton: l,
+        setActiveButton: o,
+        popupPosition: n
       }
     ),
     i && /* @__PURE__ */ t.jsx(
@@ -1739,30 +2034,32 @@ const ja = (d) => {
           justifyContent: "center"
         },
         children: /* @__PURE__ */ t.jsx(
-          lt,
+          ot,
           {
             withoutHover: !0,
-            className: it.button,
+            className: at.button,
             size: "s",
             onClick: () => {
-              const _ = [...o];
-              _.push({
+              const h = [...a];
+              h.push({
                 type: "Primary",
-                id: _t(),
+                id: ht(),
                 typesText: [],
                 destination: "Go to Page",
-                text: "Button Name",
+                text: {
+                  "en-US": "Button Name"
+                },
                 page: "home",
                 openInNewTab: !0
-              }), e(_);
+              }), e(h);
             },
             style: {
               width: "fit-content"
             },
-            children: /* @__PURE__ */ t.jsxs("div", { className: it.addButton, children: [
+            children: /* @__PURE__ */ t.jsxs("div", { className: at.addButton, children: [
               /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
               /* @__PURE__ */ t.jsx(
-                v,
+                b,
                 {
                   name: "Plus",
                   width: 16,
@@ -1775,77 +2072,78 @@ const ja = (d) => {
       }
     )
   ] });
-}, ya = (d) => {
-  const { isActiveButtons: o, setIsActiveButtons: e, buttons: s, setButtons: i } = d;
-  return /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsxs("div", { className: ct.buttonsBlock, children: [
-    /* @__PURE__ */ t.jsxs("div", { className: ct.top, children: [
-      /* @__PURE__ */ t.jsx("h3", { className: ct.title, children: "Buttons" }),
+}, Za = (u) => {
+  const { isActiveButtons: a, setIsActiveButtons: e, buttons: s, setButtons: i, editable: c = !0 } = u;
+  return /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsxs("div", { className: rt.buttonsBlock, children: [
+    /* @__PURE__ */ t.jsxs("div", { className: rt.top, children: [
+      /* @__PURE__ */ t.jsx("h3", { className: rt.title, children: "Buttons" }),
       /* @__PURE__ */ t.jsx(
         st,
         {
-          current: o,
-          onChange: (a) => e(a)
+          current: a,
+          onChange: (l) => e(l)
         }
       )
     ] }),
     /* @__PURE__ */ t.jsx(
-      An,
+      ai,
       {
         buttons: s,
-        setButtons: i
+        setButtons: i,
+        editable: c
       }
     )
   ] }) });
-}, Mn = "_wrapper_m18qi_1", On = "_subtitle_m18qi_7", qn = "_content_m18qi_14", En = "_range_m18qi_22", Dn = "_track_m18qi_27", Ln = "_progress_m18qi_36", Hn = "_dots_m18qi_46", zn = "_dot_m18qi_46", Rn = "_active_m18qi_65", Fn = "_input_m18qi_77", Vn = "_countBlock_m18qi_91", Un = "_count_m18qi_91", Yn = "_controls_m18qi_107", Gn = "_button_m18qi_113", X = {
-  wrapper: Mn,
-  subtitle: On,
-  content: qn,
-  range: En,
-  track: Dn,
-  progress: Ln,
-  dots: Hn,
-  dot: zn,
-  active: Rn,
-  input: Fn,
-  countBlock: Vn,
-  count: Un,
-  controls: Yn,
-  button: Gn
-}, Ot = (d) => {
-  const { label: o, min: e = 1, max: s = 4, step: i = 1, count: a, setCount: l } = d, [r, n] = f.useState(!1), c = Array.from({ length: (s - e) / i + 1 }), x = (a - e) / (s - e) * 100, h = () => {
-    a < s && l(a + i);
-  }, p = () => {
-    a > e && l(a - i);
-  }, _ = (b) => {
-    const u = e + b * i;
-    l(u);
+}, ci = "_wrapper_m18qi_1", li = "_subtitle_m18qi_7", ri = "_content_m18qi_14", di = "_range_m18qi_22", ui = "_track_m18qi_27", _i = "_progress_m18qi_36", mi = "_dots_m18qi_46", hi = "_dot_m18qi_46", pi = "_active_m18qi_65", fi = "_input_m18qi_77", gi = "_countBlock_m18qi_91", xi = "_count_m18qi_91", bi = "_controls_m18qi_107", vi = "_button_m18qi_113", W = {
+  wrapper: ci,
+  subtitle: li,
+  content: ri,
+  range: di,
+  track: ui,
+  progress: _i,
+  dots: mi,
+  dot: hi,
+  active: pi,
+  input: fi,
+  countBlock: gi,
+  count: xi,
+  controls: bi,
+  button: vi
+}, qt = (u) => {
+  const { label: a, min: e = 1, max: s = 4, step: i = 1, count: c, setCount: l } = u, [o, n] = f.useState(!1), d = Array.from({ length: (s - e) / i + 1 }), j = (c - e) / (s - e) * 100, p = () => {
+    c < s && l(c + i);
+  }, r = () => {
+    c > e && l(c - i);
+  }, y = (h) => {
+    const _ = e + h * i;
+    l(_);
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: X.wrapper, children: [
-    o && /* @__PURE__ */ t.jsx("h5", { className: X.subtitle, children: o }),
-    /* @__PURE__ */ t.jsxs("div", { className: X.content, children: [
-      /* @__PURE__ */ t.jsxs("div", { className: X.range, children: [
-        /* @__PURE__ */ t.jsx("div", { className: X.track }),
+  return /* @__PURE__ */ t.jsxs("div", { className: W.wrapper, children: [
+    a && /* @__PURE__ */ t.jsx("h5", { className: W.subtitle, children: a }),
+    /* @__PURE__ */ t.jsxs("div", { className: W.content, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: W.range, children: [
+        /* @__PURE__ */ t.jsx("div", { className: W.track }),
         /* @__PURE__ */ t.jsx(
           "div",
           {
-            className: X.progress,
-            style: { width: `${x}%` }
+            className: W.progress,
+            style: { width: `${j}%` }
           }
         ),
-        /* @__PURE__ */ t.jsx("div", { className: X.dots, children: c.map((b, u) => {
-          const B = u <= (a - e) / i;
+        /* @__PURE__ */ t.jsx("div", { className: W.dots, children: d.map((h, _) => {
+          const w = _ <= (c - e) / i;
           return /* @__PURE__ */ t.jsx(
             "button",
             {
-              onClick: () => _(u),
-              className: U(X.dot, {
-                [X.active]: B,
-                [X.inactive]: !B,
-                [X.dragging]: r
+              onClick: () => y(_),
+              className: Y(W.dot, {
+                [W.active]: w,
+                [W.inactive]: !w,
+                [W.dragging]: o
               }),
-              "aria-label": `Set value to ${e + u * i}`
+              "aria-label": `Set value to ${e + _ * i}`
             },
-            u
+            _
           );
         }) }),
         /* @__PURE__ */ t.jsx(
@@ -1855,41 +2153,41 @@ const ja = (d) => {
             min: e,
             max: s,
             step: i,
-            value: a,
-            onChange: (b) => l(Number(b.target.value)),
+            value: c,
+            onChange: (h) => l(Number(h.target.value)),
             onMouseDown: () => n(!0),
             onMouseUp: () => n(!1),
             onTouchStart: () => n(!0),
             onTouchEnd: () => n(!1),
-            className: X.input
+            className: W.input
           }
         )
       ] }),
-      /* @__PURE__ */ t.jsxs("div", { className: X.countBlock, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: W.countBlock, children: [
         /* @__PURE__ */ t.jsx(
-          K,
+          tt,
           {
             type: "number",
             min: e,
             max: s,
             paddingless: !0,
-            onChange: (b) => {
-              const u = Number(b);
-              u > s ? l(s) : u < e ? l(e) : l(u);
+            onChange: (h) => {
+              const _ = Number(h);
+              _ > s ? l(s) : _ < e ? l(e) : l(_);
             },
-            value: String(a)
+            value: String(c)
           }
         ),
-        /* @__PURE__ */ t.jsxs("div", { className: X.controls, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: W.controls, children: [
           /* @__PURE__ */ t.jsx(
             "button",
             {
-              onClick: h,
-              disabled: a >= s,
-              className: X.button,
+              onClick: p,
+              disabled: c >= s,
+              className: W.button,
               "aria-label": "Increment count",
               children: /* @__PURE__ */ t.jsx(
-                v,
+                b,
                 {
                   name: "CaretUp",
                   width: 15,
@@ -1901,12 +2199,12 @@ const ja = (d) => {
           /* @__PURE__ */ t.jsx(
             "button",
             {
-              onClick: p,
-              disabled: a <= e,
-              className: X.button,
+              onClick: r,
+              disabled: c <= e,
+              className: W.button,
               "aria-label": "Decrement count",
               children: /* @__PURE__ */ t.jsx(
-                v,
+                b,
                 {
                   name: "CaretDown",
                   width: 15,
@@ -1919,52 +2217,48 @@ const ja = (d) => {
       ] })
     ] })
   ] });
-}, Xn = "_title_ix5ax_1", Wn = "_subtitle_ix5ax_5", Jn = "_header_ix5ax_12", Qn = "_text_ix5ax_13", Kn = "_productsBlock_ix5ax_14", Zn = "_top_ix5ax_26", ti = "_itemsBlock_ix5ax_35", ei = "_typeTexts_ix5ax_41", si = "_block_ix5ax_48", ni = "_active_ix5ax_61", ii = "_products_ix5ax_14", oi = "_product_ix5ax_14", ai = "_button_ix5ax_80", ci = "_image_ix5ax_91", li = "_info_ix5ax_98", ri = "_name_ix5ax_110", di = "_buttons_ix5ax_114", ui = "_modal_ix5ax_121", mi = "_link_ix5ax_141", _i = "_modalOptions_ix5ax_147", hi = "_addButton_ix5ax_160", pi = "_deleteButton_ix5ax_175", xi = "_closeIcon_ix5ax_187", V = {
-  title: Xn,
-  subtitle: Wn,
-  header: Jn,
-  text: Qn,
-  productsBlock: Kn,
-  top: Zn,
-  itemsBlock: ti,
-  typeTexts: ei,
-  block: si,
-  active: ni,
-  products: ii,
-  product: oi,
-  button: ai,
-  image: ci,
-  info: li,
-  name: ri,
-  buttons: di,
-  modal: ui,
-  link: mi,
-  modalOptions: _i,
-  addButton: hi,
-  deleteButton: pi,
-  closeIcon: xi
-}, gi = (d) => {
-  const { activeItem: o, setActiveItem: e, popupPosition: s, setIsOpenModal: i, itemsOptions: a } = d, l = a.find((n) => n.id === o.listingId);
-  if (!l) return null;
-  function r(n, c) {
-    return n.length > c ? `${n.slice(0, c)}...` : n;
-  }
-  return /* @__PURE__ */ t.jsxs(
+}, ji = "_title_ix5ax_1", yi = "_subtitle_ix5ax_5", ki = "_header_ix5ax_12", $i = "_text_ix5ax_13", Ii = "_productsBlock_ix5ax_14", Ni = "_top_ix5ax_26", wi = "_itemsBlock_ix5ax_35", Ci = "_typeTexts_ix5ax_41", Si = "_block_ix5ax_48", Bi = "_active_ix5ax_61", Ti = "_products_ix5ax_14", Pi = "_product_ix5ax_14", Ai = "_button_ix5ax_80", Oi = "_image_ix5ax_91", Mi = "_info_ix5ax_98", qi = "_name_ix5ax_110", Ei = "_buttons_ix5ax_114", Di = "_modal_ix5ax_121", Ui = "_link_ix5ax_141", Hi = "_modalOptions_ix5ax_147", Ri = "_addButton_ix5ax_160", Li = "_deleteButton_ix5ax_175", zi = "_closeIcon_ix5ax_187", G = {
+  title: ji,
+  subtitle: yi,
+  header: ki,
+  text: $i,
+  productsBlock: Ii,
+  top: Ni,
+  itemsBlock: wi,
+  typeTexts: Ci,
+  block: Si,
+  active: Bi,
+  products: Ti,
+  product: Pi,
+  button: Ai,
+  image: Oi,
+  info: Mi,
+  name: qi,
+  buttons: Ei,
+  modal: Di,
+  link: Ui,
+  modalOptions: Hi,
+  addButton: Ri,
+  deleteButton: Li,
+  closeIcon: zi
+}, Fi = (u) => {
+  const { activeItem: a, setActiveItem: e, popupPosition: s, setIsOpenModal: i, itemsOptions: c } = u, l = c.find((o) => o.id === a.listingId);
+  return l ? /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: V.modal,
-      onClick: (n) => {
-        n.stopPropagation();
+      className: G.modal,
+      onClick: (o) => {
+        o.stopPropagation();
       },
       style: {
         top: `${s.top}px`,
         left: `${s.left}px`
       },
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: V.top, children: [
-          /* @__PURE__ */ t.jsx("h3", { children: r(l.productData.name, 20) }),
-          /* @__PURE__ */ t.jsx("div", { className: V.closeIcon, children: /* @__PURE__ */ t.jsx(
-            v,
+        /* @__PURE__ */ t.jsxs("div", { className: G.top, children: [
+          /* @__PURE__ */ t.jsx("h3", { children: Yt(l.productData.name) }),
+          /* @__PURE__ */ t.jsx("div", { className: G.closeIcon, children: /* @__PURE__ */ t.jsx(
+            b,
             {
               name: "X",
               height: 20,
@@ -1975,105 +2269,105 @@ const ja = (d) => {
             }
           ) })
         ] }),
-        /* @__PURE__ */ t.jsx("div", { className: V.modalOptions, children: /* @__PURE__ */ t.jsx(
-          ft,
+        /* @__PURE__ */ t.jsx("div", { className: G.modalOptions, children: /* @__PURE__ */ t.jsx(
+          bt,
           {
             label: "Put up an attractive image",
             activeImage: l.productData.images.length > 0 ? l.productData.images[0].cfId : void 0,
-            onChange: (n) => {
-              const c = {
-                ...o,
-                image: n[0]
+            onChange: (o) => {
+              const n = {
+                ...a,
+                image: o[0]
               };
-              e(c);
+              e(n);
             }
           }
         ) })
       ]
     }
-  );
+  ) : null;
 };
-function fi(d) {
-  const { product: o, children: e } = d, { attributes: s, listeners: i, setNodeRef: a, transform: l, transition: r, isDragging: n } = Tt({
-    id: String(o.listingId)
-  }), c = {
-    transform: Pt.Transform.toString(l),
-    transition: r
+function Vi(u) {
+  const { product: a, children: e } = u, { attributes: s, listeners: i, setNodeRef: c, transform: l, transition: o, isDragging: n } = Ct({
+    id: String(a.listingId)
+  }), d = {
+    transform: St.Transform.toString(l),
+    transition: o
   };
   return /* @__PURE__ */ t.jsx(
     "div",
     {
-      ref: a,
-      style: c,
-      className: `${V.product} ${n ? V.dragging : ""}`,
+      ref: c,
+      style: d,
+      className: `${G.product} ${n ? G.dragging : ""}`,
       ...s,
       ...i,
       children: e
     }
   );
 }
-const ka = (d) => {
+const tc = (u) => {
   const {
-    isActiveItems: o,
+    isActiveItems: a,
     setIsActiveItems: e,
     items: s,
     setItems: i,
-    other: a,
+    other: c,
     title: l,
-    subtitle: r,
+    subtitle: o,
     editable: n = !0,
-    draggable: c = !1,
-    withImage: x = !1,
-    deletable: h = !0,
-    addable: p = !0,
-    itemsType: _,
-    itemsOptions: b
-  } = d, [u, B] = f.useState(
+    draggable: d = !1,
+    withImage: j = !1,
+    deletable: p = !0,
+    addable: r = !0,
+    itemsType: y,
+    itemsOptions: h
+  } = u, [_, w] = f.useState(
     null
-  ), [H, I] = f.useState({
+  ), [H, $] = f.useState({
     top: 0,
     left: 0
-  }), [N, g] = f.useState(!1), C = $t(
-    Nt(St, {
+  }), [g, B] = f.useState(!1), E = yt(
+    kt(wt, {
       activationConstraint: {
         distance: 5
       }
     })
   );
   f.useEffect(() => {
-    const y = () => {
-      B(null), g(!1);
+    const x = () => {
+      w(null), B(!1);
     };
-    return document.body.addEventListener("click", y), B(null), g(!1), () => {
-      B(null), g(!1), document.body.removeEventListener("click", y);
+    return document.body.addEventListener("click", x), w(null), B(!1), () => {
+      w(null), B(!1), document.body.removeEventListener("click", x);
     };
   }, []), f.useEffect(() => {
-    if (u) {
-      const y = [...s].map((M) => M.listingId === u.listingId ? u : M);
-      i(y);
+    if (_) {
+      const x = [...s].map((I) => I.listingId === _.listingId ? _ : I);
+      i(x);
     }
-  }, [u]);
-  const F = (y, M) => {
-    y.stopPropagation();
-    const T = y.target.getBoundingClientRect(), W = 100, O = window.innerHeight;
-    let z = T.top + window.scrollY;
-    z + W > O && (z = O - W - 20), g(!0), I({
-      top: z - 80,
-      left: T.left - 30
-    }), B(M);
+  }, [_]);
+  const F = (x, I) => {
+    x.stopPropagation();
+    const C = x.target.getBoundingClientRect(), R = 100, O = window.innerHeight;
+    let U = C.top + window.scrollY;
+    U + R > O && (U = O - R - 20), B(!0), $({
+      top: U - 80,
+      left: C.left - 30
+    }), w(I);
   };
-  function S(y) {
-    if (x)
-      return y ? /* @__PURE__ */ t.jsx(
+  function T(x) {
+    if (j)
+      return x ? /* @__PURE__ */ t.jsx(
         "img",
         {
-          src: `https://imagedelivery.net/${y}/w=1000`,
+          src: `https://imagedelivery.net/${x}/w=1000`,
           alt: "image",
           width: 16,
           height: 16
         }
       ) : /* @__PURE__ */ t.jsx(
-        v,
+        b,
         {
           name: "Image",
           width: 16,
@@ -2082,21 +2376,21 @@ const ka = (d) => {
         }
       );
   }
-  const Y = (y) => {
-    const { active: M, over: T } = y;
-    if (T && M.id !== T.id) {
-      const W = s.findIndex((z) => String(z.listingId) === M.id), O = s.findIndex((z) => String(z.listingId) === T.id);
-      if (W !== -1 && O !== -1) {
-        const z = [...s], [Z] = z.splice(W, 1);
-        z.splice(O, 0, Z), i(z);
+  const v = (x) => {
+    const { active: I, over: C } = x;
+    if (C && I.id !== C.id) {
+      const R = s.findIndex((U) => String(U.listingId) === I.id), O = s.findIndex((U) => String(U.listingId) === C.id);
+      if (R !== -1 && O !== -1) {
+        const U = [...s], [nt] = U.splice(R, 1);
+        U.splice(O, 0, nt), i(U);
       }
     }
-  }, E = (y, M) => {
-    const T = b.find((O) => y.listingId === O.id);
-    if (!T) return null;
-    const W = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-      c && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-        v,
+  }, A = (x, I) => {
+    const C = h.find((O) => x.listingId === O.id);
+    if (!C) return null;
+    const R = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+      d && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
+        b,
         {
           name: "DotsSixVertical",
           hoverable: !0,
@@ -2104,107 +2398,107 @@ const ka = (d) => {
           height: 20
         }
       ) }),
-      _ === "select" && /* @__PURE__ */ t.jsx(
+      y === "select" && /* @__PURE__ */ t.jsx(
         et,
         {
           onChange: (O) => {
-            const z = [...s], Z = b.find((q) => q.productData.name === O);
-            if (!Z) return;
-            const rt = {
-              listingId: Z.id,
-              image: Z.productData.images.length > 0 ? Z.productData.images[0].cfId : ""
-            }, j = z.map((q) => q.listingId === y.listingId ? rt : q);
-            B(rt), i([...j]);
+            const U = [...s], nt = h.find((D) => D.productData.name === O);
+            if (!nt) return;
+            const dt = {
+              listingId: nt.id,
+              image: nt.productData.images.length > 0 ? nt.productData.images[0].cfId : ""
+            }, k = U.map((D) => D.listingId === x.listingId ? dt : D);
+            w(dt), i([...k]);
           },
-          value: T.productData.name,
+          value: C.productData.name,
           options: [
-            ...b.filter((O) => !s.find((z) => z.listingId === O.id)).map((O) => O.productData.name)
+            ...h.filter((O) => !s.find((U) => U.listingId === O.id)).map((O) => O.productData.name)
           ],
-          leftAddon: S(
-            y.image || T.productData.images.length > 0 && T.productData.images[0].cfId || ""
+          leftAddon: T(
+            x.image || C.productData.images.length > 0 && C.productData.images[0].cfId || ""
           )
         },
-        M
+        I
       ),
-      /* @__PURE__ */ t.jsxs("div", { className: V.buttons, children: [
-        n && /* @__PURE__ */ t.jsx("div", { className: V.deleteButton, children: /* @__PURE__ */ t.jsx(
-          v,
+      /* @__PURE__ */ t.jsxs("div", { className: G.buttons, children: [
+        n && /* @__PURE__ */ t.jsx("div", { className: G.deleteButton, children: /* @__PURE__ */ t.jsx(
+          b,
           {
             name: "Sliders",
             hoverable: !0,
             width: 20,
             height: 20,
-            onClick: (O) => F(O, y)
+            onClick: (O) => F(O, x)
           }
         ) }),
-        h && /* @__PURE__ */ t.jsx("div", { className: V.deleteButton, children: /* @__PURE__ */ t.jsx(
-          v,
+        p && /* @__PURE__ */ t.jsx("div", { className: G.deleteButton, children: /* @__PURE__ */ t.jsx(
+          b,
           {
             name: "Trash",
             hoverable: !0,
             width: 20,
             height: 20,
             fill: "#C12A2A",
-            onClick: () => i(s.filter((O) => O !== y))
+            onClick: () => i(s.filter((O) => O !== x))
           }
         ) })
       ] })
     ] });
-    return c ? /* @__PURE__ */ t.jsx(
-      fi,
+    return d ? /* @__PURE__ */ t.jsx(
+      Vi,
       {
-        product: y,
-        children: W
+        product: x,
+        children: R
       },
-      y.listingId
+      x.listingId
     ) : /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: V.product,
-        children: W
+        className: G.product,
+        children: R
       },
-      y.listingId
+      x.listingId
     );
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: V.productsBlock, children: [
-    (l || o !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: V.top, children: [
-      l && /* @__PURE__ */ t.jsx("h3", { className: V.title, children: l }),
-      o !== void 0 && /* @__PURE__ */ t.jsx(
+  return /* @__PURE__ */ t.jsxs("div", { className: G.productsBlock, children: [
+    (l || a !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: G.top, children: [
+      l && /* @__PURE__ */ t.jsx("h3", { className: G.title, children: l }),
+      a !== void 0 && /* @__PURE__ */ t.jsx(
         st,
         {
-          current: o,
-          onChange: (y) => e == null ? void 0 : e(y)
+          current: a,
+          onChange: (x) => e == null ? void 0 : e(x)
         }
       )
     ] }),
-    N && u && /* @__PURE__ */ t.jsx(
-      gi,
+    g && _ && /* @__PURE__ */ t.jsx(
+      Fi,
       {
-        activeItem: u,
-        setActiveItem: B,
-        setIsOpenModal: g,
+        activeItem: _,
+        setActiveItem: w,
+        setIsOpenModal: B,
         popupPosition: H,
-        itemsOptions: b
+        itemsOptions: h
       }
     ),
-    /* @__PURE__ */ t.jsxs("div", { className: V.products, children: [
-      r && /* @__PURE__ */ t.jsx("h5", { className: V.subtitle, children: r }),
-      c ? /* @__PURE__ */ t.jsx(
-        wt,
+    /* @__PURE__ */ t.jsxs("div", { className: G.products, children: [
+      o && /* @__PURE__ */ t.jsx("h5", { className: G.subtitle, children: o }),
+      d ? /* @__PURE__ */ t.jsx(
+        $t,
         {
-          sensors: C,
-          onDragEnd: Y,
+          sensors: E,
+          onDragEnd: v,
           children: /* @__PURE__ */ t.jsx(
-            Ct,
+            It,
             {
-              items: s.map((y) => String(y.listingId)),
-              strategy: Bt,
-              children: s.map((y, M) => E(y, M))
+              items: s.map((x) => String(x.listingId)),
+              strategy: Nt,
+              children: s.map((x, I) => A(x, I))
             }
           )
         }
-      ) : s.map((y, M) => E(y, M)),
-      p && /* @__PURE__ */ t.jsx(
+      ) : s.map((x, I) => A(x, I)),
+      r && /* @__PURE__ */ t.jsx(
         "div",
         {
           style: {
@@ -2213,31 +2507,31 @@ const ka = (d) => {
             justifyContent: "center"
           },
           children: /* @__PURE__ */ t.jsx(
-            lt,
+            ot,
             {
               withoutHover: !0,
-              className: V.button,
+              className: G.button,
               size: "s",
               onClick: () => {
-                const y = [...s];
-                for (let M = 0; M < b.length; M++)
-                  if (!s.find((T) => T.listingId === b[M].id)) {
-                    y.push({
-                      listingId: b[M].id,
-                      image: b[M].productData.images.length > 0 ? b[M].productData.images[0].cfId : ""
+                const x = [...s];
+                for (let I = 0; I < h.length; I++)
+                  if (!s.find((C) => C.listingId === h[I].id)) {
+                    x.push({
+                      listingId: h[I].id,
+                      image: h[I].productData.images.length > 0 ? h[I].productData.images[0].cfId : ""
                     });
                     break;
                   }
-                i(y);
+                i(x);
               },
-              disabled: s.length === b.length,
+              disabled: s.length === h.length,
               style: {
                 width: "fit-content"
               },
-              children: /* @__PURE__ */ t.jsxs("div", { className: V.addButton, children: [
+              children: /* @__PURE__ */ t.jsxs("div", { className: G.addButton, children: [
                 /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
                 /* @__PURE__ */ t.jsx(
-                  v,
+                  b,
                   {
                     name: "Plus",
                     width: 16,
@@ -2250,71 +2544,71 @@ const ka = (d) => {
         }
       )
     ] }),
-    a !== void 0 && /* @__PURE__ */ t.jsx(yt, { items: a })
+    c !== void 0 && /* @__PURE__ */ t.jsx(Tt, { items: c })
   ] });
-}, bi = "_options_6cemk_1", vi = "_price_6cemk_12", ji = "_oldPrice_6cemk_19", yi = "_newPrice_6cemk_27", ki = "_animate_6cemk_34", Ii = "_appearAndBounce_6cemk_1", $i = "_meta_6cemk_52", Ni = "_info_6cemk_58", wi = "_infoRight_6cemk_66", Ci = "_buttons_6cemk_73", Bi = "_variants_6cemk_80", Si = "_variant_6cemk_80", Ti = "_stock_6cemk_98", Pi = "_variantInfo_6cemk_105", Ai = "_quantity_6cemk_111", Mi = "_count_6cemk_118", Oi = "_focused_6cemk_135", qi = "_button_6cemk_73", Ei = "_activeVariant_6cemk_161", Di = "_chargeTypes_6cemk_165", Li = "_charge_6cemk_165", Hi = "_chargeActive_6cemk_190", zi = "_title_6cemk_198", w = {
-  options: bi,
-  price: vi,
-  oldPrice: ji,
-  newPrice: yi,
-  animate: ki,
-  appearAndBounce: Ii,
-  meta: $i,
-  info: Ni,
-  infoRight: wi,
-  buttons: Ci,
-  variants: Bi,
-  variant: Si,
-  stock: Ti,
-  variantInfo: Pi,
-  quantity: Ai,
-  count: Mi,
-  focused: Oi,
-  button: qi,
-  activeVariant: Ei,
-  chargeTypes: Di,
-  charge: Li,
-  chargeActive: Hi,
-  title: zi
-}, Ri = "_wrapper_c1dht_1", Fi = "_label_c1dht_9", Vi = "_input_c1dht_18", Ui = "_paddingless_c1dht_31", Yi = "_content_c1dht_35", Gi = "_contentBorder_c1dht_47", Xi = "_borderless_c1dht_52", Wi = "_rightIcon_c1dht_57", nt = {
-  wrapper: Ri,
-  label: Fi,
-  input: Vi,
-  paddingless: Ui,
-  content: Yi,
-  contentBorder: Gi,
-  borderless: Xi,
-  rightIcon: Wi
-}, Ji = (d) => {
+}, Yi = "_options_6cemk_1", Gi = "_price_6cemk_12", Xi = "_oldPrice_6cemk_19", Wi = "_newPrice_6cemk_27", Ji = "_animate_6cemk_34", Qi = "_appearAndBounce_6cemk_1", Ki = "_meta_6cemk_52", Zi = "_info_6cemk_58", to = "_infoRight_6cemk_66", eo = "_buttons_6cemk_73", so = "_variants_6cemk_80", no = "_variant_6cemk_80", io = "_stock_6cemk_98", oo = "_variantInfo_6cemk_105", ao = "_quantity_6cemk_111", co = "_count_6cemk_118", lo = "_focused_6cemk_135", ro = "_button_6cemk_73", uo = "_activeVariant_6cemk_161", _o = "_chargeTypes_6cemk_165", mo = "_charge_6cemk_165", ho = "_chargeActive_6cemk_190", po = "_title_6cemk_198", P = {
+  options: Yi,
+  price: Gi,
+  oldPrice: Xi,
+  newPrice: Wi,
+  animate: Ji,
+  appearAndBounce: Qi,
+  meta: Ki,
+  info: Zi,
+  infoRight: to,
+  buttons: eo,
+  variants: so,
+  variant: no,
+  stock: io,
+  variantInfo: oo,
+  quantity: ao,
+  count: co,
+  focused: lo,
+  button: ro,
+  activeVariant: uo,
+  chargeTypes: _o,
+  charge: mo,
+  chargeActive: ho,
+  title: po
+}, fo = "_wrapper_c1dht_1", go = "_label_c1dht_9", xo = "_input_c1dht_18", bo = "_paddingless_c1dht_31", vo = "_content_c1dht_35", jo = "_contentBorder_c1dht_47", yo = "_borderless_c1dht_52", ko = "_rightIcon_c1dht_57", it = {
+  wrapper: fo,
+  label: go,
+  input: xo,
+  paddingless: bo,
+  content: vo,
+  contentBorder: jo,
+  borderless: yo,
+  rightIcon: ko
+}, $o = (u) => {
   const {
-    onChange: o,
+    onChange: a,
     style: e,
     label: s,
     value: i,
-    type: a,
+    type: c,
     min: l,
-    max: r,
+    max: o,
     placeholder: n,
-    disabled: c = !1,
-    required: x = !1,
-    regex: h,
-    paddingless: p = !1,
-    borderless: _ = !1,
-    editable: b = !1,
-    isSearch: u = !1,
-    centered: B = !1
-  } = d, { themeSettings: H } = Et(), { inputs: I } = H, [N, g] = f.useState(!1);
-  function C(S) {
-    return Number(S) < 0 ? String(l) : S;
+    disabled: d = !1,
+    required: j = !1,
+    regex: p,
+    paddingless: r = !1,
+    borderless: y = !1,
+    editable: h = !1,
+    isSearch: _ = !1,
+    centered: w = !1
+  } = u, { themeSettings: H } = Dt(), { inputs: $ } = H, [g, B] = f.useState(!1);
+  function E(T) {
+    return Number(T) < 0 ? String(l) : T;
   }
-  function F(S) {
-    return !x || !h ? !0 : new RegExp(h).test(S);
+  function F(T) {
+    return !j || !p ? !0 : new RegExp(p).test(T);
   }
-  return /* @__PURE__ */ t.jsxs("div", { className: nt.wrapper, children: [
+  return /* @__PURE__ */ t.jsxs("div", { className: it.wrapper, children: [
     s && /* @__PURE__ */ t.jsx(
       "label",
       {
-        className: nt.label,
+        className: it.label,
         htmlFor: s,
         children: s
       }
@@ -2322,55 +2616,55 @@ const ka = (d) => {
     /* @__PURE__ */ t.jsxs(
       "div",
       {
-        className: U(nt.content, {
-          [nt.contentBorder]: I.border.active
+        className: Y(it.content, {
+          [it.contentBorder]: $.border.active
         }),
         style: {
           ...e,
-          background: I.field.active ? I.field.color : "transparent",
-          padding: u ? `7px ${Number(I.general.size) + 20}px 7px 11px` : "7px 11px"
+          background: $.field.active ? $.field.color : "transparent",
+          padding: _ ? `7px ${Number($.general.size) + 20}px 7px 11px` : "7px 11px"
         },
         children: [
           /* @__PURE__ */ t.jsx(
             "input",
             {
               id: s,
-              type: a || "text",
-              onChange: (S) => {
-                if (a === "text") o(S.target.value);
+              type: c || "text",
+              onChange: (T) => {
+                if (c === "text") a(T.target.value);
                 else {
-                  const Y = C(S.target.value);
-                  o(Y);
+                  const v = E(T.target.value);
+                  a(v);
                 }
               },
               value: i,
               autoComplete: "off",
               placeholder: n || "Type something...",
-              className: U(nt.input, {
-                [nt.required]: N && x && !F(i),
-                [nt.paddingless]: p,
-                [nt.borderless]: _
+              className: Y(it.input, {
+                [it.required]: g && j && !F(i),
+                [it.paddingless]: r,
+                [it.borderless]: y
               }),
-              min: a === "number" ? l : void 0,
-              max: a === "number" ? r : void 0,
-              disabled: c,
-              onFocus: () => g(!0),
+              min: c === "number" ? l : void 0,
+              max: c === "number" ? o : void 0,
+              disabled: d,
+              onFocus: () => B(!0),
               style: {
-                textAlign: B ? "center" : "left"
+                textAlign: w ? "center" : "left"
               }
             }
           ),
-          u && /* @__PURE__ */ t.jsx("div", { className: nt.rightIcon, children: /* @__PURE__ */ t.jsx(
-            v,
+          _ && /* @__PURE__ */ t.jsx("div", { className: it.rightIcon, children: /* @__PURE__ */ t.jsx(
+            b,
             {
               name: "MagnifyingGlass",
               fill: "var(--icon-secondary)",
-              width: I.general.size,
-              height: I.general.size
+              width: $.general.size,
+              height: $.general.size
             }
           ) }),
-          b && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-            v,
+          h && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
+            b,
             {
               name: "Sliders",
               width: 20,
@@ -2382,37 +2676,37 @@ const ka = (d) => {
       }
     )
   ] });
-}, Qi = "_button_85085_1", Ki = "_primary_85085_20", Zi = "_primaryHovered_85085_30", to = "_secondary_85085_34", eo = "_secondaryHovered_85085_44", so = "_tertiary_85085_48", no = "_tertiaryHovered_85085_58", io = "_content_85085_62", ot = {
-  button: Qi,
-  primary: Ki,
-  primaryHovered: Zi,
-  secondary: to,
-  secondaryHovered: eo,
-  tertiary: so,
-  tertiaryHovered: no,
-  content: io
-}, tt = (d) => {
-  const { children: o, onClick: e, style: s, className: i, disabled: a = !1, type: l = "Primary" } = d, { themeSettings: r } = Et();
+}, Io = "_button_85085_1", No = "_primary_85085_20", wo = "_primaryHovered_85085_30", Co = "_secondary_85085_34", So = "_secondaryHovered_85085_44", Bo = "_tertiary_85085_48", To = "_tertiaryHovered_85085_58", Po = "_content_85085_62", ct = {
+  button: Io,
+  primary: No,
+  primaryHovered: wo,
+  secondary: Co,
+  secondaryHovered: So,
+  tertiary: Bo,
+  tertiaryHovered: To,
+  content: Po
+}, Q = (u) => {
+  const { children: a, onClick: e, style: s, className: i, disabled: c = !1, type: l = "Primary" } = u, { themeSettings: o } = Dt();
   return /* @__PURE__ */ t.jsx(
     "button",
     {
-      className: U(ot.button, i, {
-        [ot.primary]: l === "Primary",
-        [ot.secondary]: l === "Secondary",
-        [ot.tertiary]: l === "Tertiary",
-        [ot.primaryHovered]: l === "Primary" && !a && r.buttons.primary.hover,
-        [ot.secondaryHovered]: l === "Secondary" && !a && r.buttons.secondary.hover,
-        [ot.tertiaryHovered]: l === "Tertiary" && !a && r.buttons.tertiary.hover
+      className: Y(ct.button, i, {
+        [ct.primary]: l === "Primary",
+        [ct.secondary]: l === "Secondary",
+        [ct.tertiary]: l === "Tertiary",
+        [ct.primaryHovered]: l === "Primary" && !c && o.buttons.primary.hover,
+        [ct.secondaryHovered]: l === "Secondary" && !c && o.buttons.secondary.hover,
+        [ct.tertiaryHovered]: l === "Tertiary" && !c && o.buttons.tertiary.hover
       }),
       onClick: e,
       style: {
         ...s
       },
-      disabled: a,
-      children: l === "Tertiary" ? /* @__PURE__ */ t.jsxs("div", { className: ot.content, children: [
-        o,
+      disabled: c,
+      children: l === "Tertiary" ? /* @__PURE__ */ t.jsxs("div", { className: ct.content, children: [
+        a,
         /* @__PURE__ */ t.jsx(
-          v,
+          b,
           {
             name: "ArrowRight",
             fill: "var(--icon-tertiary)",
@@ -2420,78 +2714,77 @@ const ka = (d) => {
             height: 20
           }
         )
-      ] }) : /* @__PURE__ */ t.jsx(t.Fragment, { children: o })
+      ] }) : /* @__PURE__ */ t.jsx(t.Fragment, { children: a })
     }
   );
 };
-var Rt = /* @__PURE__ */ ((d) => (d.ONE_TIME = "One-Time", d.RECURRING = "Subscribe & Save", d))(Rt || {});
-const Ia = (d) => {
-  var I, N;
-  const { variants: o } = d, [e, s] = f.useState(o[0]), [i, a] = f.useState(e.chargeTypes[0]), l = jt(), [r, n] = f.useState(1), { reset: c, addProductToCart: x, getProducts: h } = At(), [p, _] = f.useState(!1);
+var zt = /* @__PURE__ */ ((u) => (u.ONE_TIME = "One-Time", u.RECURRING = "Subscribe & Save", u))(zt || {});
+const ec = (u) => {
+  var H, $;
+  const { variants: a } = u, [e, s] = f.useState(a[0]), [i, c] = f.useState(e.chargeTypes[0]), l = Bt(), [o, n] = f.useState(1), { reset: d, addProductToCart: j, getProducts: p } = Ot(), [r, y] = f.useState(!1);
   f.useEffect(() => {
-    _(!0);
-    const g = setTimeout(() => _(!1), 600);
+    y(!0);
+    const g = setTimeout(() => y(!1), 600);
     return () => clearTimeout(g);
-  }, [r]);
-  async function b() {
-    await h(), await x({
-      productId: d.id,
+  }, [o]);
+  async function h() {
+    await p(), await j({
+      productId: u.id,
       productVariantId: e.id,
-      quantity: r
+      quantity: o
     });
   }
-  function u() {
-    c(), b(), l("/checkout");
+  function _() {
+    d(), h(), l("/checkout");
   }
-  function B(g) {
+  function w(g) {
     if (g >= 864e5) {
-      const E = Math.floor(g / 864e5);
-      return `${E} ${E === 1 ? "day" : "days"}`;
+      const v = Math.floor(g / 864e5);
+      return `${v} ${v === 1 ? "day" : "days"}`;
     } else if (g >= 36e5) {
-      const E = Math.floor(g / 36e5);
-      return `${E} ${E === 1 ? "hour" : "hours"}`;
+      const v = Math.floor(g / 36e5);
+      return `${v} ${v === 1 ? "hour" : "hours"}`;
     } else if (g >= 6e4) {
-      const E = Math.floor(g / 6e4);
-      return `${E} ${E === 1 ? "minute" : "minutes"}`;
+      const v = Math.floor(g / 6e4);
+      return `${v} ${v === 1 ? "minute" : "minutes"}`;
     } else {
-      const E = Math.floor(g / 1e3);
-      return `${E} ${E === 1 ? "second" : "seconds"}`;
+      const v = Math.floor(g / 1e3);
+      return `${v} ${v === 1 ? "second" : "seconds"}`;
     }
   }
-  function H(g, C) {
-    return g.length > C ? g.slice(0, C) + "..." : g;
-  }
-  return /* @__PURE__ */ t.jsxs("div", { className: w.options, children: [
-    e.chargeTypes.length > 1 && /* @__PURE__ */ t.jsx("div", { className: w.chargeTypes, children: e.chargeTypes.map((g) => /* @__PURE__ */ t.jsx(
+  return f.useEffect(() => {
+    (e.quantity.available === 0 || !e.quantity.available) && n(0);
+  }, [e.quantity.available]), console.log(e.quantity), /* @__PURE__ */ t.jsxs("div", { className: P.options, children: [
+    e.chargeTypes.length > 1 && /* @__PURE__ */ t.jsx("div", { className: P.chargeTypes, children: e.chargeTypes.map((g) => /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: U(w.charge, {
-          [w.chargeActive]: i === g
+        className: Y(P.charge, {
+          [P.chargeActive]: i === g
         }),
-        onClick: () => a(g),
-        children: Rt[g]
+        onClick: () => c(g),
+        children: zt[g]
       },
       g
     )) }),
-    /* @__PURE__ */ t.jsx("div", { className: w.variants, children: o.map((g) => {
-      var C;
+    /* @__PURE__ */ t.jsx("div", { className: P.variants, children: a.map((g) => {
+      var B;
       return /* @__PURE__ */ t.jsxs(
         "div",
         {
-          className: U(w.variant, {
-            [w.activeVariant]: e.id === g.id
+          className: Y(P.variant, {
+            [P.activeVariant]: e.id === g.id
           }),
           onClick: () => s(g),
           children: [
-            /* @__PURE__ */ t.jsxs("div", { className: w.variantInfo, children: [
-              /* @__PURE__ */ t.jsx("span", { className: w.title, children: H(g.name, 15) }),
+            /* @__PURE__ */ t.jsxs("div", { className: P.variantInfo, children: [
+              /* @__PURE__ */ t.jsx("span", { className: P.title, children: g.name }),
               /* @__PURE__ */ t.jsxs("span", { children: [
                 "$",
                 i === "ONE_TIME" ? g.price.amount : g.subscriptionSettings ? g.subscriptionSettings.price.amount : "Price Not Found"
               ] })
             ] }),
-            /* @__PURE__ */ t.jsx("div", { children: i === "ONE_TIME" && /* @__PURE__ */ t.jsxs("span", { className: w.stock, children: [
-              ((C = g.quantity.restrictions) == null ? void 0 : C.max) || g.quantity.available || 0,
+            /* @__PURE__ */ t.jsx("div", { children: i === "ONE_TIME" && /* @__PURE__ */ t.jsxs("span", { className: P.stock, children: [
+              ((B = g.quantity.restrictions) == null ? void 0 : B.max) || g.quantity.available || 0,
               " in stock"
             ] }) })
           ]
@@ -2499,49 +2792,50 @@ const Ia = (d) => {
         g.id
       );
     }) }),
-    i === "ONE_TIME" && /* @__PURE__ */ t.jsxs("div", { className: w.quantity, children: [
+    i === "ONE_TIME" && /* @__PURE__ */ t.jsxs("div", { className: P.quantity, children: [
       /* @__PURE__ */ t.jsx(
-        tt,
+        Q,
         {
           type: "Secondary",
           onClick: () => {
-            r > 1 ? n((g) => g - 1) : n(1);
+            o > 1 ? n((g) => g - 1) : n(1);
           },
-          className: w.button,
-          disabled: e.quantity.restrictions && r <= e.quantity.restrictions.min,
-          children: /* @__PURE__ */ t.jsx(v, { name: "Minus" })
+          className: P.button,
+          disabled: e.quantity.available === 0 || e.quantity.restrictions && o <= e.quantity.restrictions.min || Object.keys(e.quantity.restrictions || {}).length === 0 && !e.quantity.available,
+          children: /* @__PURE__ */ t.jsx(b, { name: "Minus" })
         }
       ),
       /* @__PURE__ */ t.jsx(
-        Ji,
+        $o,
         {
           type: "number",
-          value: String(r),
+          value: String(o),
           onChange: (g) => n(Number(g)),
-          max: ((I = e.quantity.restrictions) == null ? void 0 : I.max) || e.quantity.available || 1 / 0,
-          min: ((N = e.quantity.restrictions) == null ? void 0 : N.min) || 0,
-          centered: !0
+          max: ((H = e.quantity.restrictions) == null ? void 0 : H.max) || e.quantity.available || 1 / 0,
+          min: (($ = e.quantity.restrictions) == null ? void 0 : $.min) || 0,
+          centered: !0,
+          disabled: e.quantity.available === 0 || !e.quantity.available || Object.keys(e.quantity.restrictions || {}).length === 0 && !e.quantity.available
         }
       ),
       /* @__PURE__ */ t.jsx(
-        tt,
+        Q,
         {
           type: "Secondary",
           onClick: () => {
             n((g) => g + 1);
           },
-          className: w.button,
-          disabled: !!(e.quantity.restrictions && r >= e.quantity.restrictions.max || e.quantity.available && r >= e.quantity.available),
-          children: /* @__PURE__ */ t.jsx(v, { name: "Plus" })
+          className: P.button,
+          disabled: !!(e.quantity.restrictions && o >= e.quantity.restrictions.max || e.quantity.available !== void 0 && o >= e.quantity.available || Object.keys(e.quantity.restrictions || {}).length === 0 && !e.quantity.available),
+          children: /* @__PURE__ */ t.jsx(b, { name: "Plus" })
         }
       )
     ] }),
-    /* @__PURE__ */ t.jsxs("div", { className: w.meta, children: [
-      /* @__PURE__ */ t.jsxs("div", { className: w.info, children: [
+    /* @__PURE__ */ t.jsxs("div", { className: P.meta, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: P.info, children: [
         /* @__PURE__ */ t.jsx("span", { children: "Delivery" }),
-        /* @__PURE__ */ t.jsxs("div", { className: w.infoRight, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: P.infoRight, children: [
           /* @__PURE__ */ t.jsx(
-            v,
+            b,
             {
               name: "Lightning",
               fill: "#FF3F19",
@@ -2549,303 +2843,305 @@ const Ia = (d) => {
               height: 20
             }
           ),
-          /* @__PURE__ */ t.jsx("span", { children: !e.deliveryTime || e.deliveryTime === 0 ? "Instant" : B(e.deliveryTime) })
+          /* @__PURE__ */ t.jsx("span", { children: !e.deliveryTime || e.deliveryTime === 0 ? "Instant" : w(e.deliveryTime) })
         ] })
       ] }),
-      /* @__PURE__ */ t.jsxs("div", { className: w.info, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: P.info, children: [
         /* @__PURE__ */ t.jsx("span", { children: "Price" }),
-        /* @__PURE__ */ t.jsx("div", { className: w.infoRight, children: i === "ONE_TIME" ? e.compareAtPrice && (e.compareAtPrice.amount || 0) - (e.price.amount || 0) > 0 ? /* @__PURE__ */ t.jsxs("div", { className: w.price, children: [
-          /* @__PURE__ */ t.jsxs("span", { className: U(w.newPrice, { [w.animate]: p }), children: [
+        /* @__PURE__ */ t.jsx("div", { className: P.infoRight, children: i === "ONE_TIME" ? e.compareAtPrice && (e.compareAtPrice.amount || 0) - (e.price.amount || 0) > 0 ? /* @__PURE__ */ t.jsxs("div", { className: P.price, children: [
+          /* @__PURE__ */ t.jsxs("span", { className: Y(P.newPrice, { [P.animate]: r }), children: [
             "$ ",
-            (e.price.amount || 0) * r
+            (e.price.amount || 0) * o
           ] }),
-          /* @__PURE__ */ t.jsxs("span", { className: w.oldPrice, children: [
+          /* @__PURE__ */ t.jsxs("span", { className: P.oldPrice, children: [
             "$ ",
-            (e.compareAtPrice.amount || 0) * r
+            (e.compareAtPrice.amount || 0) * o
           ] })
-        ] }) : /* @__PURE__ */ t.jsxs("span", { className: U(w.newPrice, { [w.animate]: p }), children: [
+        ] }) : /* @__PURE__ */ t.jsxs("span", { className: Y(P.newPrice, { [P.animate]: r }), children: [
           "$ ",
-          (e.price.amount || 0) * r
-        ] }) : e.subscriptionSettings && e.subscriptionSettings.compareAtPrice && (e.subscriptionSettings.compareAtPrice.amount || 0) - (e.subscriptionSettings.price.amount || 0) > 0 ? /* @__PURE__ */ t.jsxs("div", { className: w.price, children: [
-          /* @__PURE__ */ t.jsxs("span", { className: U(w.newPrice, { [w.animate]: p }), children: [
+          (e.price.amount || 0) * o
+        ] }) : e.subscriptionSettings && e.subscriptionSettings.compareAtPrice && (e.subscriptionSettings.compareAtPrice.amount || 0) - (e.subscriptionSettings.price.amount || 0) > 0 ? /* @__PURE__ */ t.jsxs("div", { className: P.price, children: [
+          /* @__PURE__ */ t.jsxs("span", { className: Y(P.newPrice, { [P.animate]: r }), children: [
             "$ ",
             e.subscriptionSettings.price.amount || 0
           ] }),
-          /* @__PURE__ */ t.jsxs("span", { className: w.oldPrice, children: [
+          /* @__PURE__ */ t.jsxs("span", { className: P.oldPrice, children: [
             "$ ",
             e.subscriptionSettings.compareAtPrice.amount || 0
           ] })
-        ] }) : e.subscriptionSettings && /* @__PURE__ */ t.jsxs("span", { className: U(w.newPrice, { [w.animate]: p }), children: [
+        ] }) : e.subscriptionSettings && /* @__PURE__ */ t.jsxs("span", { className: Y(P.newPrice, { [P.animate]: r }), children: [
           "$ ",
           e.subscriptionSettings.price.amount || 0
         ] }) })
       ] })
     ] }),
-    /* @__PURE__ */ t.jsxs("div", { className: w.buttons, children: [
+    /* @__PURE__ */ t.jsxs("div", { className: P.buttons, children: [
       /* @__PURE__ */ t.jsx(
-        tt,
+        Q,
         {
           type: "Primary",
-          onClick: () => u(),
+          onClick: () => _(),
+          disabled: e.quantity.available === 0 || !e.quantity.available || Object.keys(e.quantity.restrictions || {}).length === 0 && !e.quantity.available,
           children: i === "ONE_TIME" ? "Buy Now" : "Subscribe Now"
         }
       ),
       i === "ONE_TIME" && /* @__PURE__ */ t.jsx(
-        tt,
+        Q,
         {
           type: "Secondary",
-          onClick: () => b(),
+          onClick: () => h(),
+          disabled: e.quantity.available === 0 || !e.quantity.available || Object.keys(e.quantity.restrictions || {}).length === 0 && !e.quantity.available,
           children: "Add to Cart"
         }
       )
     ] })
   ] });
-}, oo = "_button_1tdo3_1", ao = "_login_1tdo3_14", co = "_signUp_1tdo3_18", lo = "_buttons_1tdo3_23", ro = "_modal_1tdo3_32", uo = "_closing_1tdo3_64", mo = "_info_1tdo3_113", _o = "_top_1tdo3_120", ho = "_title_1tdo3_131", po = "_clear_1tdo3_138", xo = "_activeClear_1tdo3_145", go = "_count_1tdo3_149", fo = "_cart_1tdo3_164", bo = "_empty_1tdo3_172", vo = "_product_1tdo3_198", jo = "_products_1tdo3_207", yo = "_image_1tdo3_215", ko = "_productInfo_1tdo3_221", Io = "_content_1tdo3_228", $o = "_name_1tdo3_234", No = "_price_1tdo3_240", wo = "_productButtons_1tdo3_246", Co = "_productButton_1tdo3_246", Bo = "_productCount_1tdo3_266", So = "_bottom_1tdo3_282", To = "_subtotal_1tdo3_290", Po = "_block_1tdo3_298", Ao = "_shoppingCount_1tdo3_305", Mo = "_total_1tdo3_325", Oo = "_link_1tdo3_331", qo = "_userInfo_1tdo3_338", Eo = "_pagesMobileModal_1tdo3_349", Do = "_pagesMobileModalContent_1tdo3_363", Lo = "_pagesMobileModalHeader_1tdo3_369", Ho = "_pagesMobileModalFooter_1tdo3_379", $ = {
-  button: oo,
-  login: ao,
-  signUp: co,
-  buttons: lo,
-  modal: ro,
+}, Ao = "_button_1tdo3_1", Oo = "_login_1tdo3_14", Mo = "_signUp_1tdo3_18", qo = "_buttons_1tdo3_23", Eo = "_modal_1tdo3_32", Do = "_closing_1tdo3_64", Uo = "_info_1tdo3_113", Ho = "_top_1tdo3_120", Ro = "_title_1tdo3_131", Lo = "_clear_1tdo3_138", zo = "_activeClear_1tdo3_145", Fo = "_count_1tdo3_149", Vo = "_cart_1tdo3_164", Yo = "_empty_1tdo3_172", Go = "_product_1tdo3_198", Xo = "_products_1tdo3_207", Wo = "_image_1tdo3_215", Jo = "_productInfo_1tdo3_221", Qo = "_content_1tdo3_228", Ko = "_name_1tdo3_234", Zo = "_price_1tdo3_240", ta = "_productButtons_1tdo3_246", ea = "_productButton_1tdo3_246", sa = "_productCount_1tdo3_266", na = "_bottom_1tdo3_282", ia = "_subtotal_1tdo3_290", oa = "_block_1tdo3_298", aa = "_shoppingCount_1tdo3_305", ca = "_total_1tdo3_325", la = "_link_1tdo3_331", ra = "_userInfo_1tdo3_338", da = "_pagesMobileModal_1tdo3_349", ua = "_pagesMobileModalContent_1tdo3_363", _a = "_pagesMobileModalHeader_1tdo3_369", ma = "_pagesMobileModalFooter_1tdo3_379", S = {
+  button: Ao,
+  login: Oo,
+  signUp: Mo,
+  buttons: qo,
+  modal: Eo,
   "slide-in-fade": "_slide-in-fade_1tdo3_1",
   "mobile-slide-in-fade": "_mobile-slide-in-fade_1tdo3_1",
-  closing: uo,
+  closing: Do,
   "mobile-slide-out-fade": "_mobile-slide-out-fade_1tdo3_1",
   "slide-out-fade": "_slide-out-fade_1tdo3_1",
-  info: mo,
-  top: _o,
-  title: ho,
-  clear: po,
-  activeClear: xo,
-  count: go,
-  cart: fo,
-  empty: bo,
-  product: vo,
-  products: jo,
-  image: yo,
-  productInfo: ko,
-  content: Io,
-  name: $o,
-  price: No,
-  productButtons: wo,
-  productButton: Co,
-  productCount: Bo,
-  bottom: So,
-  subtotal: To,
-  block: Po,
-  shoppingCount: Ao,
-  total: Mo,
-  link: Oo,
-  userInfo: qo,
-  pagesMobileModal: Eo,
-  pagesMobileModalContent: Do,
-  pagesMobileModalHeader: Lo,
-  pagesMobileModalFooter: Ho
+  info: Uo,
+  top: Ho,
+  title: Ro,
+  clear: Lo,
+  activeClear: zo,
+  count: Fo,
+  cart: Vo,
+  empty: Yo,
+  product: Go,
+  products: Xo,
+  image: Wo,
+  productInfo: Jo,
+  content: Qo,
+  name: Ko,
+  price: Zo,
+  productButtons: ta,
+  productButton: ea,
+  productCount: sa,
+  bottom: na,
+  subtotal: ia,
+  block: oa,
+  shoppingCount: aa,
+  total: ca,
+  link: la,
+  userInfo: ra,
+  pagesMobileModal: da,
+  pagesMobileModalContent: ua,
+  pagesMobileModalHeader: _a,
+  pagesMobileModalFooter: ma
 };
-class gt extends Error {
+class xt extends Error {
 }
-gt.prototype.name = "InvalidTokenError";
-function zo(d) {
-  return decodeURIComponent(atob(d).replace(/(.)/g, (o, e) => {
+xt.prototype.name = "InvalidTokenError";
+function ha(u) {
+  return decodeURIComponent(atob(u).replace(/(.)/g, (a, e) => {
     let s = e.charCodeAt(0).toString(16).toUpperCase();
     return s.length < 2 && (s = "0" + s), "%" + s;
   }));
 }
-function Ro(d) {
-  let o = d.replace(/-/g, "+").replace(/_/g, "/");
-  switch (o.length % 4) {
+function pa(u) {
+  let a = u.replace(/-/g, "+").replace(/_/g, "/");
+  switch (a.length % 4) {
     case 0:
       break;
     case 2:
-      o += "==";
+      a += "==";
       break;
     case 3:
-      o += "=";
+      a += "=";
       break;
     default:
       throw new Error("base64 string is not of the correct length");
   }
   try {
-    return zo(o);
+    return ha(a);
   } catch {
-    return atob(o);
+    return atob(a);
   }
 }
-function Fo(d, o) {
-  if (typeof d != "string")
-    throw new gt("Invalid token specified: must be a string");
-  o || (o = {});
-  const e = o.header === !0 ? 0 : 1, s = d.split(".")[e];
+function fa(u, a) {
+  if (typeof u != "string")
+    throw new xt("Invalid token specified: must be a string");
+  a || (a = {});
+  const e = a.header === !0 ? 0 : 1, s = u.split(".")[e];
   if (typeof s != "string")
-    throw new gt(`Invalid token specified: missing part #${e + 1}`);
+    throw new xt(`Invalid token specified: missing part #${e + 1}`);
   let i;
   try {
-    i = Ro(s);
-  } catch (a) {
-    throw new gt(`Invalid token specified: invalid base64 for part #${e + 1} (${a.message})`);
+    i = pa(s);
+  } catch (c) {
+    throw new xt(`Invalid token specified: invalid base64 for part #${e + 1} (${c.message})`);
   }
   try {
     return JSON.parse(i);
-  } catch (a) {
-    throw new gt(`Invalid token specified: invalid json for part #${e + 1} (${a.message})`);
+  } catch (c) {
+    throw new xt(`Invalid token specified: invalid json for part #${e + 1} (${c.message})`);
   }
 }
-const $a = (d) => {
-  const { shopping: o, signUp: e, isShowUserInfo: s = !0 } = d;
-  return /* @__PURE__ */ t.jsxs("div", { className: $.buttons, children: [
-    o && /* @__PURE__ */ t.jsx(Vo, {}),
+const sc = (u) => {
+  const { shopping: a, signUp: e, isShowUserInfo: s = !0 } = u;
+  return /* @__PURE__ */ t.jsxs("div", { className: S.buttons, children: [
+    a && /* @__PURE__ */ t.jsx(ga, {}),
     s && /* @__PURE__ */ t.jsx(Ft, { signUp: e })
   ] });
-}, Vo = () => {
-  const [d, o] = f.useState(!1), [e, s] = f.useState([]), { cart: i, getProducts: a } = At();
-  function l(p) {
-    for (let _ = 0; _ < i.parts.length; _++)
-      for (let b = 0; b < p.variants.length; b++)
-        if (i.parts[_].productVariantId === p.variants[_].id)
-          return i.parts[_].productVariantId;
+}, ga = () => {
+  const [u, a] = f.useState(!1), [e, s] = f.useState([]), { cart: i, getProducts: c } = Ot();
+  function l(r) {
+    for (let y = 0; y < i.parts.length; y++)
+      for (let h = 0; h < r.variants.length; h++)
+        if (i.parts[y].productVariantId === r.variants[y].id)
+          return i.parts[y].productVariantId;
   }
-  function r(p) {
-    for (let _ = 0; _ < i.parts.length; _++)
-      for (let b = 0; b < p.variants.length; b++)
-        if (i.parts[_].productVariantId === p.variants[_].id)
-          return i.parts[_].quantity;
+  function o(r) {
+    for (let y = 0; y < i.parts.length; y++)
+      for (let h = 0; h < r.variants.length; h++)
+        if (i.parts[y].productVariantId === r.variants[y].id)
+          return i.parts[y].quantity;
   }
   f.useEffect(() => {
     (async () => {
-      const _ = i.parts.map((B) => String(B.productId)), u = (await a([..._])).map((B) => ({
-        ...B,
-        activeVariantId: l(B),
-        quantity: r(B)
+      const y = i.parts.map((w) => String(w.productId)), _ = (await c([...y])).map((w) => ({
+        ...w,
+        activeVariantId: l(w),
+        quantity: o(w)
       }));
-      s(u);
+      s(_);
     })();
   }, [i.parts.length]);
-  function n(p) {
-    var _;
-    return !p || !(p != null && p.variants) ? !1 : (_ = p.variants.find((b) => b.id === p.activeVariantId)) == null ? void 0 : _.subscriptionSettings;
+  function n(r) {
+    var y;
+    return !r || !(r != null && r.variants) ? !1 : (y = r.variants.find((h) => h.id === r.activeVariantId)) == null ? void 0 : y.subscriptionSettings;
   }
-  const c = i.parts.length > 0 && e.length > 0 && !n(e[0]), [x, h] = f.useState(!1);
+  const d = i.parts.length > 0 && e.length > 0 && !n(e[0]), [j, p] = f.useState(!1);
   return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
     /* @__PURE__ */ t.jsxs(
-      tt,
+      Q,
       {
         type: "Secondary",
         style: {
           padding: 10
         },
-        onClick: (p) => {
-          p.stopPropagation(), window.location.pathname !== "/admin/builder" && (o(!0), h(!0));
+        onClick: (r) => {
+          r.stopPropagation(), window.location.pathname !== "/admin/builder" && (a(!0), p(!0));
         },
         children: [
           /* @__PURE__ */ t.jsx(
-            v,
+            b,
             {
               name: "Handbag",
               fill: "var(--icon-primary)"
             }
           ),
-          c && /* @__PURE__ */ t.jsx("div", { className: $.shoppingCount, children: i.parts.length })
+          d && /* @__PURE__ */ t.jsx("div", { className: S.shoppingCount, children: i.parts.length })
         ]
       }
     ),
-    d && /* @__PURE__ */ t.jsx(
+    u && /* @__PURE__ */ t.jsx(
       Mt,
       {
         close: () => {
-          h(!1), setTimeout(() => {
-            o(!1);
+          p(!1), setTimeout(() => {
+            a(!1);
           }, 300);
         },
         withAnimation: !1,
         children: /* @__PURE__ */ t.jsx(
-          Uo,
+          xa,
           {
             activeProducts: e,
-            isCartNotEmpty: c,
-            isOpen: x
+            isCartNotEmpty: d,
+            isOpen: j
           }
         )
       }
     )
   ] });
-}, Uo = (d) => {
-  const { activeProducts: o, isCartNotEmpty: e, isOpen: s } = d, { cart: i, reset: a, getTotalAndDiscount: l, updateQuantityOfProduct: r } = At(), n = jt();
-  function c(p) {
-    n(p);
+}, xa = (u) => {
+  const { activeProducts: a, isCartNotEmpty: e, isOpen: s } = u, { cart: i, reset: c, getTotalAndDiscount: l, updateQuantityOfProduct: o } = Ot(), n = Bt();
+  function d(r) {
+    n(r);
   }
-  function x(p) {
-    r({
-      productId: p.id,
-      productVariantId: p.activeVariantId,
-      quantity: p.quantity + 1
+  function j(r) {
+    o({
+      productId: r.id,
+      productVariantId: r.activeVariantId,
+      quantity: r.quantity + 1
     });
   }
-  function h(p) {
-    r({
-      productId: p.id,
-      productVariantId: p.activeVariantId,
-      quantity: p.quantity - 1
+  function p(r) {
+    o({
+      productId: r.id,
+      productVariantId: r.activeVariantId,
+      quantity: r.quantity - 1
     });
   }
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: U($.modal, {
-        [$.closing]: !s
+      className: Y(S.modal, {
+        [S.closing]: !s
       }),
-      onClick: (p) => p.stopPropagation(),
+      onClick: (r) => r.stopPropagation(),
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: $.top, children: [
-          /* @__PURE__ */ t.jsxs("div", { className: $.info, children: [
-            /* @__PURE__ */ t.jsx("span", { className: $.title, children: "Cart" }),
-            e && /* @__PURE__ */ t.jsx("div", { className: $.count, children: i.parts.length })
+        /* @__PURE__ */ t.jsxs("div", { className: S.top, children: [
+          /* @__PURE__ */ t.jsxs("div", { className: S.info, children: [
+            /* @__PURE__ */ t.jsx("span", { className: S.title, children: "Cart" }),
+            e && /* @__PURE__ */ t.jsx("div", { className: S.count, children: i.parts.length })
           ] }),
           /* @__PURE__ */ t.jsx(
             "button",
             {
-              className: U($.clear, {
-                [$.activeClear]: e
+              className: Y(S.clear, {
+                [S.activeClear]: e
               }),
               disabled: !e,
-              onClick: a,
+              onClick: c,
               children: "Clear all"
             }
           )
         ] }),
-        e ? /* @__PURE__ */ t.jsxs("div", { className: $.cart, children: [
-          /* @__PURE__ */ t.jsx("div", { className: $.products, children: o.map((p) => /* @__PURE__ */ t.jsxs(
+        e ? /* @__PURE__ */ t.jsxs("div", { className: S.cart, children: [
+          /* @__PURE__ */ t.jsx("div", { className: S.products, children: a.map((r) => /* @__PURE__ */ t.jsxs(
             "div",
             {
-              className: $.product,
+              className: S.product,
               children: [
-                /* @__PURE__ */ t.jsxs("div", { className: $.productInfo, children: [
+                /* @__PURE__ */ t.jsxs("div", { className: S.productInfo, children: [
                   /* @__PURE__ */ t.jsx(
                     "img",
                     {
-                      src: `https://imagedelivery.net/${p.images[0].cfId}/w=500`,
+                      src: `https://imagedelivery.net/${r.images[0].cfId}/w=500`,
                       alt: "image",
                       width: "100%",
                       height: "100%",
-                      className: $.image
+                      className: S.image
                     }
                   ),
-                  /* @__PURE__ */ t.jsxs("div", { className: $.content, children: [
-                    /* @__PURE__ */ t.jsx("div", { className: $.name, children: p.name }),
-                    /* @__PURE__ */ t.jsxs("div", { className: $.price, children: [
+                  /* @__PURE__ */ t.jsxs("div", { className: S.content, children: [
+                    /* @__PURE__ */ t.jsx("div", { className: S.name, children: r.name }),
+                    /* @__PURE__ */ t.jsxs("div", { className: S.price, children: [
                       "$",
-                      p.variants.find((_) => _.id === p.activeVariantId).price.amount * ((p == null ? void 0 : p.quantity) || 1)
+                      r.variants.find((y) => y.id === r.activeVariantId).price.amount * ((r == null ? void 0 : r.quantity) || 1)
                     ] })
                   ] })
                 ] }),
-                /* @__PURE__ */ t.jsxs("div", { className: $.productButtons, children: [
+                /* @__PURE__ */ t.jsxs("div", { className: S.productButtons, children: [
                   /* @__PURE__ */ t.jsx(
                     "div",
                     {
                       onClick: () => {
-                        p.quantity !== 1 && h(p);
+                        r.quantity !== 1 && p(r);
                       },
-                      className: $.productButton,
+                      className: S.productButton,
                       children: /* @__PURE__ */ t.jsx(
-                        v,
+                        b,
                         {
                           name: "Minus",
                           fill: "#757575",
@@ -2855,14 +3151,14 @@ const $a = (d) => {
                       )
                     }
                   ),
-                  /* @__PURE__ */ t.jsx("div", { className: $.productCount, children: p.quantity }),
+                  /* @__PURE__ */ t.jsx("div", { className: S.productCount, children: r.quantity }),
                   /* @__PURE__ */ t.jsx(
                     "div",
                     {
-                      onClick: () => x(p),
-                      className: $.productButton,
+                      onClick: () => j(r),
+                      className: S.productButton,
                       children: /* @__PURE__ */ t.jsx(
-                        v,
+                        b,
                         {
                           name: "Plus",
                           fill: "#757575",
@@ -2875,14 +3171,14 @@ const $a = (d) => {
                 ] })
               ]
             },
-            p.id
+            r.id
           )) }),
-          /* @__PURE__ */ t.jsxs("div", { className: $.bottom, children: [
-            /* @__PURE__ */ t.jsxs("div", { className: $.subtotal, children: [
-              /* @__PURE__ */ t.jsxs("div", { className: $.block, children: [
+          /* @__PURE__ */ t.jsxs("div", { className: S.bottom, children: [
+            /* @__PURE__ */ t.jsxs("div", { className: S.subtotal, children: [
+              /* @__PURE__ */ t.jsxs("div", { className: S.block, children: [
                 /* @__PURE__ */ t.jsx("span", { children: "Subtotal" }),
                 /* @__PURE__ */ t.jsx(
-                  v,
+                  b,
                   {
                     name: "Info",
                     width: 20,
@@ -2891,20 +3187,20 @@ const $a = (d) => {
                   }
                 )
               ] }),
-              /* @__PURE__ */ t.jsxs("div", { className: $.total, children: [
+              /* @__PURE__ */ t.jsxs("div", { className: S.total, children: [
                 "$",
                 l().total
               ] })
             ] }),
-            /* @__PURE__ */ t.jsx(tt, { onClick: () => c("/checkout"), children: "Checkout" })
+            /* @__PURE__ */ t.jsx(Q, { onClick: () => d("/checkout"), children: "Checkout" })
           ] })
-        ] }) : /* @__PURE__ */ t.jsx(Yo, {})
+        ] }) : /* @__PURE__ */ t.jsx(ba, {})
       ]
     }
   );
-}, Yo = () => /* @__PURE__ */ t.jsxs("div", { className: $.empty, children: [
+}, ba = () => /* @__PURE__ */ t.jsxs("div", { className: S.empty, children: [
   /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-    v,
+    b,
     {
       name: "Handbag",
       fill: "var(--icon-secondary)"
@@ -2918,20 +3214,20 @@ const $a = (d) => {
       "a",
       {
         href: "/products",
-        className: $.link,
+        className: S.link,
         children: "view products"
       }
     )
   ] })
-] }), Ft = ({ signUp: d }) => {
-  const o = JSON.parse(localStorage.getItem("token") || "{}"), { data: e } = o, s = jt();
-  function i(r) {
-    s(r);
+] }), Ft = ({ signUp: u }) => {
+  const a = JSON.parse(localStorage.getItem("token") || "{}"), { data: e } = a, s = Bt();
+  function i(o) {
+    s(o);
   }
   if (!e)
     return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       /* @__PURE__ */ t.jsx(
-        tt,
+        Q,
         {
           onClick: () => i("/customer-dash"),
           type: "Secondary",
@@ -2941,8 +3237,8 @@ const $a = (d) => {
           children: "Login"
         }
       ),
-      d && /* @__PURE__ */ t.jsx(
-        tt,
+      u && /* @__PURE__ */ t.jsx(
+        Q,
         {
           onClick: () => i("/customer-dash"),
           type: "Primary",
@@ -2953,27 +3249,27 @@ const $a = (d) => {
         }
       )
     ] });
-  const [a, l] = f.useState("test-email@gmail.com");
+  const [c, l] = f.useState("test-email@gmail.com");
   return f.useEffect(() => {
     (async () => {
-      const n = Fo(e);
+      const n = fa(e);
       l(n.email);
     })();
   }, [e]), /* @__PURE__ */ t.jsx(
     "div",
     {
-      className: $.userInfo,
+      className: S.userInfo,
       onClick: () => i("/customer-dash"),
-      children: /* @__PURE__ */ t.jsx("div", { children: a || "test-email@gmail.com" })
+      children: /* @__PURE__ */ t.jsx("div", { children: c || "test-email@gmail.com" })
     }
   );
-}, Go = ({
-  children: d,
-  logo: o,
+}, va = ({
+  children: u,
+  logo: a,
   setIsOpen: e,
   signUp: s
 }) => {
-  const { setIsOpen: i } = Dt(), a = () => {
+  const { setIsOpen: i } = Ut(), c = () => {
     i(!1), setTimeout(() => {
       e(!1), i(!0);
     }, 300);
@@ -2981,18 +3277,18 @@ const $a = (d) => {
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: $.pagesMobileModal,
+      className: S.pagesMobileModal,
       onClick: (l) => l.stopPropagation(),
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: $.pagesMobileModalHeader, children: [
-          /* @__PURE__ */ t.jsx("div", { children: o }),
+        /* @__PURE__ */ t.jsxs("div", { className: S.pagesMobileModalHeader, children: [
+          /* @__PURE__ */ t.jsx("div", { children: a }),
           /* @__PURE__ */ t.jsx(
-            tt,
+            Q,
             {
               type: "Secondary",
-              onClick: a,
+              onClick: c,
               children: /* @__PURE__ */ t.jsx(
-                v,
+                b,
                 {
                   name: "X",
                   fill: "var(--icon-primary)"
@@ -3001,43 +3297,43 @@ const $a = (d) => {
             }
           )
         ] }),
-        /* @__PURE__ */ t.jsx("div", { className: $.pagesMobileModalContent, children: d }),
-        /* @__PURE__ */ t.jsx("div", { className: $.pagesMobileModalFooter, children: /* @__PURE__ */ t.jsx(Ft, { signUp: s }) })
+        /* @__PURE__ */ t.jsx("div", { className: S.pagesMobileModalContent, children: u }),
+        /* @__PURE__ */ t.jsx("div", { className: S.pagesMobileModalFooter, children: /* @__PURE__ */ t.jsx(Ft, { signUp: s }) })
       ]
     }
   );
-}, Na = ({
-  children: d,
-  logo: o,
+}, nc = ({
+  children: u,
+  logo: a,
   signUp: e
 }) => {
   const [s, i] = f.useState(!1);
   return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-    /* @__PURE__ */ t.jsx(Xo, { setIsOpenModal: i }),
+    /* @__PURE__ */ t.jsx(ja, { setIsOpenModal: i }),
     s && /* @__PURE__ */ t.jsx(Mt, { close: () => i(!1), children: /* @__PURE__ */ t.jsx(
-      Go,
+      va,
       {
-        logo: o,
+        logo: a,
         setIsOpen: i,
         signUp: e,
-        children: d
+        children: u
       }
     ) })
   ] });
-}, Xo = (d) => {
-  const { setIsOpenModal: o } = d;
+}, ja = (u) => {
+  const { setIsOpenModal: a } = u;
   return /* @__PURE__ */ t.jsx(
-    tt,
+    Q,
     {
       type: "Secondary",
       style: {
         padding: 10
       },
       onClick: (e) => {
-        e.stopPropagation(), o(!0);
+        e.stopPropagation(), a(!0);
       },
       children: /* @__PURE__ */ t.jsx(
-        v,
+        b,
         {
           name: "List",
           fill: "var(--icon-primary)"
@@ -3045,34 +3341,34 @@ const $a = (d) => {
       )
     }
   );
-}, Wo = "_share_xddz7_1", Jo = "_modal_xddz7_8", Qo = "_header_xddz7_20", Ko = "_socials_xddz7_30", Zo = "_social_xddz7_30", ta = "_copy_xddz7_40", ea = "_title_xddz7_47", sa = "_copyWrapper_xddz7_53", na = "_copyText_xddz7_62", ia = "_copyTextMobile_xddz7_75", oa = "_copyTextMiniMobile_xddz7_94", at = {
-  share: Wo,
-  modal: Jo,
-  header: Qo,
-  socials: Ko,
-  social: Zo,
-  copy: ta,
-  title: ea,
-  copyWrapper: sa,
-  copyText: na,
-  copyTextMobile: ia,
-  copyTextMiniMobile: oa
-}, wa = () => {
-  const { isOpenModal: d, setIsOpenModal: o } = Lt();
+}, ya = "_share_xddz7_1", ka = "_modal_xddz7_8", $a = "_header_xddz7_20", Ia = "_socials_xddz7_30", Na = "_social_xddz7_30", wa = "_copy_xddz7_40", Ca = "_title_xddz7_47", Sa = "_copyWrapper_xddz7_53", Ba = "_copyText_xddz7_62", Ta = "_copyTextMobile_xddz7_75", Pa = "_copyTextMiniMobile_xddz7_94", lt = {
+  share: ya,
+  modal: ka,
+  header: $a,
+  socials: Ia,
+  social: Na,
+  copy: wa,
+  title: Ca,
+  copyWrapper: Sa,
+  copyText: Ba,
+  copyTextMobile: Ta,
+  copyTextMiniMobile: Pa
+}, ic = () => {
+  const { isOpenModal: u, setIsOpenModal: a } = Ht();
   function e() {
-    o(!0);
+    a(!0);
   }
   return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
     /* @__PURE__ */ t.jsx(
-      lt,
+      ot,
       {
-        className: at.share,
+        className: lt.share,
         onClick: (s) => {
           s.stopPropagation(), e();
         },
         type: "Secondary",
         children: /* @__PURE__ */ t.jsx(
-          v,
+          b,
           {
             name: "Share",
             fill: "#757575",
@@ -3081,11 +3377,11 @@ const $a = (d) => {
         )
       }
     ),
-    d && /* @__PURE__ */ t.jsx(Mt, { close: o, children: /* @__PURE__ */ t.jsx(aa, {}) })
+    u && /* @__PURE__ */ t.jsx(Mt, { close: a, children: /* @__PURE__ */ t.jsx(Aa, {}) })
   ] });
-}, aa = () => {
-  const { setIsOpenModal: d } = Lt(), { notification: o, setNotification: e } = Ut(), { setIsOpen: s } = Dt(), i = window.location.href;
-  function a() {
+}, Aa = () => {
+  const { setIsOpenModal: u } = Ht(), { notification: a, setNotification: e } = Gt(), { setIsOpen: s } = Ut(), i = window.location.href;
+  function c() {
     navigator.clipboard.writeText(i), e({
       message: "Link copied to clipboard",
       status: "success"
@@ -3093,22 +3389,22 @@ const $a = (d) => {
   }
   function l() {
     s(!1), setTimeout(() => {
-      d(!1), s(!0);
+      u(!1), s(!0);
     }, 300);
   }
-  function r(n, c) {
-    return n.length > c ? n.slice(0, c) + "..." : n;
+  function o(n, d) {
+    return n.length > d ? n.slice(0, d) + "..." : n;
   }
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: at.modal,
+      className: lt.modal,
       onClick: (n) => n.stopPropagation(),
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: at.header, children: [
-          /* @__PURE__ */ t.jsx("div", { className: at.title, children: "Copy Product Link" }),
+        /* @__PURE__ */ t.jsxs("div", { className: lt.header, children: [
+          /* @__PURE__ */ t.jsx("div", { className: lt.title, children: "Copy Product Link" }),
           /* @__PURE__ */ t.jsx(
-            v,
+            b,
             {
               name: "X",
               fill: "#757575",
@@ -3117,95 +3413,113 @@ const $a = (d) => {
             }
           )
         ] }),
-        /* @__PURE__ */ t.jsxs("div", { className: at.copyWrapper, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: lt.copyWrapper, children: [
           /* @__PURE__ */ t.jsxs(
-            lt,
+            ot,
             {
               type: "Secondary",
-              onClick: a,
+              onClick: c,
               style: {
                 flex: 1
               },
               children: [
-                /* @__PURE__ */ t.jsx("div", { className: at.copyText, children: r(i, 100) }),
-                /* @__PURE__ */ t.jsx("div", { className: at.copyTextMobile, children: r(i, 40) }),
-                /* @__PURE__ */ t.jsx("div", { className: at.copyTextMiniMobile, children: r(i, 20) })
+                /* @__PURE__ */ t.jsx("div", { className: lt.copyText, children: o(i, 100) }),
+                /* @__PURE__ */ t.jsx("div", { className: lt.copyTextMobile, children: o(i, 40) }),
+                /* @__PURE__ */ t.jsx("div", { className: lt.copyTextMiniMobile, children: o(i, 20) })
               ]
             }
           ),
           /* @__PURE__ */ t.jsx(
-            lt,
+            ot,
             {
               type: "Secondary",
-              onClick: a,
-              children: o ? /* @__PURE__ */ t.jsx(v, { name: "Check" }) : /* @__PURE__ */ t.jsx(v, { name: "Copy" })
+              onClick: c,
+              children: a ? /* @__PURE__ */ t.jsx(b, { name: "Check" }) : /* @__PURE__ */ t.jsx(b, { name: "Copy" })
             }
           )
         ] })
       ]
     }
   );
-}, ca = "_accordion_1s1lq_1", la = "_header_1s1lq_9", ra = "_icon_1s1lq_18", da = "_open_1s1lq_21", ua = "_content_1s1lq_25", xt = {
-  accordion: ca,
-  header: la,
-  icon: ra,
-  open: da,
-  content: ua
-}, Ca = ({ title: d, content: o, defaultOpen: e = !1 }) => {
-  const [s, i] = f.useState(e), [a, l] = f.useState(0), r = f.useRef(null), n = () => {
+}, Oa = "_accordion_1s1lq_1", Ma = "_header_1s1lq_9", qa = "_icon_1s1lq_18", Ea = "_open_1s1lq_21", Da = "_content_1s1lq_25", gt = {
+  accordion: Oa,
+  header: Ma,
+  icon: qa,
+  open: Ea,
+  content: Da
+}, oc = ({ title: u, content: a, defaultOpen: e = !1 }) => {
+  const [s, i] = f.useState(e), [c, l] = f.useState(0), o = f.useRef(null), n = () => {
     i(!s);
   };
   return f.useEffect(() => {
-    r.current && l(s ? r.current.scrollHeight : 0);
-  }, [s]), /* @__PURE__ */ t.jsxs("div", { className: xt.accordion, children: [
+    o.current && l(s ? o.current.scrollHeight : 0);
+  }, [s]), /* @__PURE__ */ t.jsxs("div", { className: gt.accordion, children: [
     /* @__PURE__ */ t.jsxs(
       "div",
       {
-        className: xt.header,
+        className: gt.header,
         onClick: n,
         children: [
-          /* @__PURE__ */ t.jsx("h5", { id: "h5", children: d }),
-          /* @__PURE__ */ t.jsx("div", { className: U(xt.icon, { [xt.open]: s }), children: /* @__PURE__ */ t.jsx(v, { name: "CaretDown" }) })
+          /* @__PURE__ */ t.jsx("h5", { id: "h5", children: u }),
+          /* @__PURE__ */ t.jsx("div", { className: Y(gt.icon, { [gt.open]: s }), children: /* @__PURE__ */ t.jsx(b, { name: "CaretDown" }) })
         ]
       }
     ),
     /* @__PURE__ */ t.jsx(
       "div",
       {
-        ref: r,
-        className: xt.content,
-        style: { height: `${a}px` },
-        children: /* @__PURE__ */ t.jsx("p", { id: "p", children: o })
+        ref: o,
+        className: gt.content,
+        style: { height: `${c}px` },
+        children: /* @__PURE__ */ t.jsx("p", { id: "p", children: a })
       }
     )
   ] });
-}, Ba = ({ children: d, path: o, className: e, target: s = "_self", id: i }) => {
-  const a = jt(), l = /^https?:\/\//.test(o), r = (n) => {
-    l || s === "_blank" ? s === "_blank" ? window.open(o, "_blank") : window.location.href = o : (n.preventDefault(), a(o, { replace: !0 }));
+}, ac = ({ children: u, path: a, className: e, target: s = "_self", id: i }) => {
+  const c = Bt(), l = /^https?:\/\//.test(a), o = (n) => {
+    l || s === "_blank" ? s === "_blank" ? window.open(a, "_blank") : window.location.href = a : (n.preventDefault(), c(a, { replace: !0 }));
   };
   return /* @__PURE__ */ t.jsx(
     "div",
     {
-      onClick: r,
+      onClick: o,
       className: e,
       role: "link",
       style: { cursor: "pointer" },
       id: i,
-      children: d
+      children: u
     }
   );
-}, ma = "_wrapper_st58d_1", _a = "_label_st58d_10", ha = "_textarea_st58d_18", pa = "_length_st58d_33", vt = {
-  wrapper: ma,
-  label: _a,
-  textarea: ha,
-  length: pa
-}, Sa = (d) => {
-  const { onChange: o, label: e, value: s, maxLength: i, placeholder: a = "Type something..." } = d, [l, r] = f.useState(s.length);
-  return /* @__PURE__ */ t.jsxs("div", { className: vt.wrapper, children: [
+}, Ua = "_buttonsBlock_1b2rb_1", Ha = "_slideUp_1b2rb_1", Ra = {
+  buttonsBlock: Ua,
+  slideUp: Ha
+}, cc = () => /* @__PURE__ */ t.jsxs("div", { className: Ra.buttonsBlock, children: [
+  /* @__PURE__ */ t.jsx(
+    Q,
+    {
+      type: "Primary",
+      style: {
+        width: "100%"
+      },
+      onClick: () => {
+        console.log("add to cart");
+      },
+      children: "Add to Cart"
+    }
+  ),
+  /* @__PURE__ */ t.jsx(Q, { type: "Secondary", children: "Buy" })
+] }), La = "_wrapper_st58d_1", za = "_label_st58d_10", Fa = "_textarea_st58d_18", Va = "_length_st58d_33", jt = {
+  wrapper: La,
+  label: za,
+  textarea: Fa,
+  length: Va
+}, lc = (u) => {
+  const { onChange: a, label: e, value: s, maxLength: i, placeholder: c = "Type something..." } = u, [l, o] = f.useState(s.length);
+  return /* @__PURE__ */ t.jsxs("div", { className: jt.wrapper, children: [
     e && /* @__PURE__ */ t.jsx(
       "label",
       {
-        className: vt.label,
+        className: jt.label,
         htmlFor: e,
         children: e
       }
@@ -3216,14 +3530,14 @@ const $a = (d) => {
         id: e,
         defaultValue: s,
         onChange: (n) => {
-          r(n.target.value.length), o(n.target.value);
+          o(n.target.value.length), a(n.target.value);
         },
-        placeholder: a,
-        className: vt.textarea,
+        placeholder: c,
+        className: jt.textarea,
         maxLength: i
       }
     ),
-    i && /* @__PURE__ */ t.jsxs("div", { className: vt.length, children: [
+    i && /* @__PURE__ */ t.jsxs("div", { className: jt.length, children: [
       l,
       "/",
       i
@@ -3231,38 +3545,40 @@ const $a = (d) => {
   ] });
 };
 export {
-  Ca as Accordion,
-  Xo as BurgerMenuButton,
-  tt as Button,
-  An as ButtonTypeSettings,
-  ya as ButtonsSettings,
-  va as CategorySettings,
-  ft as ChooseImage,
-  Aa as ChooseImageModal,
-  Yo as EmptyCart,
-  ja as FormSettings,
-  $a as HeaderButtons,
-  v as Icon,
-  K as InputSettings,
-  Ji as InputUI,
-  Ue as ItemsSettings,
-  ba as LayoutSettings,
-  Ba as Link,
-  ka as ListingSelector,
-  Ma as Loader,
+  oc as Accordion,
+  ja as BurgerMenuButton,
+  Q as Button,
+  ai as ButtonTypeSettings,
+  Za as ButtonsSettings,
+  Ja as CategorySettings,
+  bt as ChooseImage,
+  uc as ChooseImageModal,
+  ba as EmptyCart,
+  Ka as FormSettings,
+  sc as HeaderButtons,
+  b as Icon,
+  tt as InputSettings,
+  $o as InputUI,
+  Ge as ItemsSettings,
+  Wa as LayoutSettings,
+  ac as Link,
+  tc as ListingSelector,
+  _c as Loader,
   Mt as Modal,
-  Na as PagesMobileMenu,
-  Go as PagesMobileModal,
-  Ia as ProductOptions,
-  Ot as RangeSelector,
+  nc as PagesMobileMenu,
+  va as PagesMobileModal,
+  Qa as PagesSettings,
+  cc as ProductCardButtons,
+  ec as ProductOptions,
+  qt as RangeSelector,
   et as Select,
-  wa as ShareLink,
-  Vo as ShoppingButton,
-  Uo as ShoppingModalCart,
+  ic as ShareLink,
+  ga as ShoppingButton,
+  xa as ShoppingModalCart,
   st as Switch,
-  zt as TextSettings,
-  qt as TextareaSettings,
-  Sa as TextareaUI,
-  Ht as TypesText,
+  Lt as TextSettings,
+  Et as TextareaSettings,
+  lc as TextareaUI,
+  Rt as TypesText,
   Ft as UserInfo
 };