@billgangcom/theme-lib 1.13.0 → 1.15.0

package/dist/ui.es.js

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