@billgangcom/theme-lib 1.6.0 → 1.8.0

package/dist/ui.es.js

@@ -1,19 +1,19 @@
-import { j as t, I as p, a as S, c as D, S as C, T as O, b as I, C as Y, B as R, v as P } from "./index-2iAZ7WmX.js";
-import { g as Ne, h as Te, e as Pe, M as Ie, P as Ae, R as Se, d as Le, f as ze } from "./index-2iAZ7WmX.js";
-import y from "react";
-const q = "_wrapper_o1bnv_2", J = "_alignmentBlock_o1bnv_8", K = "_title_o1bnv_16", Q = "_subtitle_o1bnv_23", U = "_alignmentContent_o1bnv_30", V = "_alignments_o1bnv_37", W = "_alignment_o1bnv_8", X = "_circle_o1bnv_56", Z = "_paddings_o1bnv_63", tt = "_padding_o1bnv_63", et = "_input_o1bnv_81", x = {
-  wrapper: q,
-  alignmentBlock: J,
-  title: K,
-  subtitle: Q,
-  alignmentContent: U,
-  alignments: V,
-  alignment: W,
-  circle: X,
-  paddings: Z,
-  padding: tt,
-  input: et
-}, st = [
+import { j as t, I as m, a as T, c as F, S as I, T as G, C as Y, b as O, B as U, v as R } from "./index-D2fsOZUo.js";
+import { g as ts, h as es, e as ss, M as ns, P as os, R as cs, d as ls, f as is } from "./index-D2fsOZUo.js";
+import j from "react";
+const W = "_wrapper_1g82c_2", X = "_alignmentBlock_1g82c_8", Z = "_title_1g82c_15", tt = "_subtitle_1g82c_22", et = "_alignmentContent_1g82c_29", st = "_alignments_1g82c_35", nt = "_alignment_1g82c_8", ot = "_circle_1g82c_54", ct = "_paddings_1g82c_61", lt = "_padding_1g82c_61", it = "_input_1g82c_79", v = {
+  wrapper: W,
+  alignmentBlock: X,
+  title: Z,
+  subtitle: tt,
+  alignmentContent: et,
+  alignments: st,
+  alignment: nt,
+  circle: ot,
+  paddings: ct,
+  padding: lt,
+  input: it
+}, at = [
   "topLeft",
   "top",
   "topRight",
@@ -23,36 +23,56 @@ const q = "_wrapper_o1bnv_2", J = "_alignmentBlock_o1bnv_8", K = "_title_o1bnv_1
   "bottomLeft",
   "bottom",
   "bottomRight"
-], nt = ["left", "top", "right", "bottom"], ke = (_) => {
-  const { alignment: i, padding: a, setPadding: s, setAlignment: n } = _;
-  return /* @__PURE__ */ t.jsxs("div", { className: x.layout, children: [
-    /* @__PURE__ */ t.jsx("h3", { className: x.title, children: "Layout" }),
-    /* @__PURE__ */ t.jsxs("div", { className: x.alignmentBlock, children: [
-      /* @__PURE__ */ t.jsx("h5", { className: x.subtitle, children: "Alignment" }),
-      /* @__PURE__ */ t.jsxs("div", { className: x.alignmentContent, children: [
-        /* @__PURE__ */ t.jsx("div", { className: x.alignments, children: st.map((c) => /* @__PURE__ */ t.jsxs(
+], rt = ["left", "top", "right", "bottom"], Ve = (d) => {
+  const { alignment: s, padding: o, setPadding: n, setAlignment: l } = d;
+  function e() {
+    switch (s) {
+      case "left":
+      case "topLeft":
+      case "bottomLeft":
+        return "left";
+      case "right":
+      case "topRight":
+      case "bottomRight":
+        return "right";
+      case "center":
+      case "top":
+      case "bottom":
+        return "center";
+      default:
+        return "center";
+    }
+  }
+  return /* @__PURE__ */ t.jsxs("div", { className: v.layout, children: [
+    /* @__PURE__ */ t.jsx("h3", { className: v.title, children: "Layout" }),
+    /* @__PURE__ */ t.jsxs("div", { className: v.alignmentBlock, children: [
+      /* @__PURE__ */ t.jsx("h5", { className: v.subtitle, children: "Alignment" }),
+      /* @__PURE__ */ t.jsxs("div", { className: v.alignmentContent, children: [
+        /* @__PURE__ */ t.jsx("div", { className: v.alignments, children: at.map((c) => /* @__PURE__ */ t.jsxs(
           "div",
           {
             onClick: () => {
-              n((u) => c);
+              l(c);
             },
-            className: x.alignment,
+            className: v.alignment,
             children: [
-              c !== i && /* @__PURE__ */ t.jsx("div", { className: x.circle }),
-              c === i && /* @__PURE__ */ t.jsx(
-                p,
+              c !== s && /* @__PURE__ */ t.jsx("div", { className: v.circle }),
+              c === s && /* @__PURE__ */ t.jsx(
+                m,
                 {
-                  name: "text-align-left",
-                  fill: "#FF3F19"
+                  name: `text-align-${e()}`,
+                  fill: "#FF3F19",
+                  width: 22,
+                  height: 22
                 }
               )
             ]
           },
           c
         )) }),
-        /* @__PURE__ */ t.jsx("div", { className: x.paddings, children: nt.map((c) => /* @__PURE__ */ t.jsxs("label", { className: x.padding, children: [
+        /* @__PURE__ */ t.jsx("div", { className: v.paddings, children: rt.map((c) => /* @__PURE__ */ t.jsxs("label", { className: v.padding, children: [
           /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-            p,
+            m,
             {
               name: `align-${c}`,
               width: 20,
@@ -60,187 +80,337 @@ const q = "_wrapper_o1bnv_2", J = "_alignmentBlock_o1bnv_8", K = "_title_o1bnv_1
             }
           ) }),
           /* @__PURE__ */ t.jsx(
-            S,
+            T,
             {
               type: "text",
-              value: String(a[c]),
-              onChange: (u) => s((h) => ({
-                ...h,
-                [c]: Number(u)
-              })),
-              paddingless: !0
+              value: String(o[c]),
+              onChange: (a) => n({
+                ...o,
+                [c]: Number(a)
+              }),
+              paddingless: !0,
+              borderless: !0
             }
           )
         ] })) })
       ] })
     ] })
   ] });
-}, ot = "_subtitle_2zbxx_1", it = "_header_2zbxx_8", ct = "_text_2zbxx_9", lt = "_top_2zbxx_16", at = "_itemsBlock_2zbxx_23", $ = {
-  subtitle: ot,
-  header: it,
-  text: ct,
-  top: lt,
-  itemsBlock: at
-}, rt = "_typeTexts_3zlec_1", dt = "_block_3zlec_7", _t = "_active_3zlec_18", A = {
-  typeTexts: rt,
-  block: dt,
-  active: _t
-}, ut = ["bold", "italic", "underline", "strike-through", "code"], E = (_) => {
-  const { typeText: i, setTypeText: a } = _;
-  return /* @__PURE__ */ t.jsx("div", { className: A.typeTexts, children: ut.map((s) => /* @__PURE__ */ t.jsx(
+}, dt = "_subtitle_2zbxx_1", ut = "_header_2zbxx_8", _t = "_text_2zbxx_9", pt = "_top_2zbxx_16", mt = "_itemsBlock_2zbxx_23", S = {
+  subtitle: dt,
+  header: ut,
+  text: _t,
+  top: pt,
+  itemsBlock: mt
+}, ht = "_typeTexts_3zlec_1", gt = "_block_3zlec_7", bt = "_active_3zlec_18", E = {
+  typeTexts: ht,
+  block: gt,
+  active: bt
+}, xt = ["bold", "italic", "underline", "strike-through", "code"], q = (d) => {
+  const { typeText: s, setTypeText: o } = d;
+  return /* @__PURE__ */ t.jsx("div", { className: E.typeTexts, children: xt.map((n) => /* @__PURE__ */ t.jsx(
     "div",
     {
-      className: D(A.block, {
-        [A.active]: i === s
+      className: F(E.block, {
+        [E.active]: s === n
       }),
-      onClick: () => a((n) => s),
+      onClick: () => o(n),
       children: /* @__PURE__ */ t.jsx(
-        p,
+        m,
         {
-          name: `text-${s}`,
-          fill: i === s ? "#252525" : "#757575",
+          name: `text-${n}`,
+          fill: s === n ? "#252525" : "#757575",
           width: 20,
           height: 20
         }
       )
     },
-    String(s)
+    String(n)
   )) });
-}, fe = (_) => {
+}, ft = (d) => {
   const {
-    typeText: i,
-    isActiveText: a,
-    setIsActiveText: s,
-    text: n,
-    setText: c,
-    setTypeText: u,
-    title: h,
-    subtitle: o = "Items"
-  } = _;
-  return /* @__PURE__ */ t.jsxs("div", { className: $.text, children: [
-    /* @__PURE__ */ t.jsxs("div", { className: $.top, children: [
-      /* @__PURE__ */ t.jsx("h3", { className: $.title, children: h }),
-      /* @__PURE__ */ t.jsx(
-        C,
+    typeText: s,
+    isActiveText: o,
+    setIsActiveText: n,
+    text: l,
+    setText: e,
+    setTypeText: c,
+    title: a,
+    subtitle: r = "Items"
+  } = d;
+  return /* @__PURE__ */ t.jsxs("div", { className: S.text, children: [
+    (a || o) && /* @__PURE__ */ t.jsxs("div", { className: S.top, children: [
+      a && /* @__PURE__ */ t.jsx("h3", { className: S.title, children: a }),
+      o && n && /* @__PURE__ */ t.jsx(
+        I,
         {
-          current: a,
-          onChange: (l) => s((r) => l)
+          current: o,
+          onChange: (u) => n(u)
         }
       )
     ] }),
-    /* @__PURE__ */ t.jsxs("div", { className: $.itemsBlock, children: [
-      /* @__PURE__ */ t.jsx("h5", { className: $.subtitle, children: o }),
+    /* @__PURE__ */ t.jsxs("div", { className: S.itemsBlock, children: [
+      /* @__PURE__ */ t.jsx("h5", { className: S.subtitle, children: r }),
       /* @__PURE__ */ t.jsx(
-        O,
+        G,
         {
-          onChange: (l) => c((r) => l),
-          value: n,
+          onChange: (u) => e(u),
+          value: l,
           maxLength: 150
         }
       ),
       /* @__PURE__ */ t.jsx(
-        E,
+        q,
         {
-          typeText: i,
-          setTypeText: u
+          typeText: s,
+          setTypeText: c
         }
       )
     ] })
   ] });
-}, pt = "_subtitle_2l7ty_1", mt = "_header_2l7ty_8", ht = "_text_2l7ty_9", xt = "_productsBlock_2l7ty_10", bt = "_top_2l7ty_22", gt = "_itemsBlock_2l7ty_29", yt = "_typeTexts_2l7ty_35", vt = "_block_2l7ty_41", jt = "_active_2l7ty_52", kt = "_products_2l7ty_10", ft = "_product_2l7ty_10", wt = "_button_2l7ty_70", $t = "_image_2l7ty_80", Bt = "_info_2l7ty_87", Ct = "_name_2l7ty_98", Nt = "_buttons_2l7ty_102", Tt = "_modal_2l7ty_108", Pt = "_other_2l7ty_125", m = {
-  subtitle: pt,
-  header: mt,
-  text: ht,
-  productsBlock: xt,
-  top: bt,
-  itemsBlock: gt,
-  typeTexts: yt,
-  block: vt,
-  active: jt,
-  products: kt,
-  product: ft,
-  button: wt,
-  image: $t,
-  info: Bt,
-  name: Ct,
-  buttons: Nt,
-  modal: Tt,
-  other: Pt
-}, It = (_) => {
-  const { activeItem: i, setActiveItem: a, popupPosition: s } = _;
-  return /* @__PURE__ */ t.jsxs(
+}, jt = "_subtitle_14b87_1", vt = "_header_14b87_8", kt = "_text_14b87_9", yt = "_productsBlock_14b87_10", $t = "_top_14b87_22", wt = "_itemsBlock_14b87_29", Nt = "_typeTexts_14b87_35", Bt = "_block_14b87_41", Ct = "_active_14b87_52", Tt = "_products_14b87_10", It = "_product_14b87_10", Pt = "_button_14b87_70", St = "_image_14b87_80", At = "_info_14b87_87", Ot = "_name_14b87_98", Lt = "_buttons_14b87_102", Rt = "_modal_14b87_108", zt = "_link_14b87_125", Et = "_modalOptions_14b87_131", b = {
+  subtitle: jt,
+  header: vt,
+  text: kt,
+  productsBlock: yt,
+  top: $t,
+  itemsBlock: wt,
+  typeTexts: Nt,
+  block: Bt,
+  active: Ct,
+  products: Tt,
+  product: It,
+  button: Pt,
+  image: St,
+  info: At,
+  name: Ot,
+  buttons: Lt,
+  modal: Rt,
+  link: zt,
+  modalOptions: Et
+}, Dt = (d) => {
+  const { activeItem: s, setActiveItem: o, popupPosition: n, modalOptions: l } = d;
+  return console.log(s, l), /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: m.modal,
-      onClick: (n) => {
-        n.stopPropagation();
+      className: b.modal,
+      onClick: (e) => {
+        e.stopPropagation();
       },
       style: {
-        top: `${s.top}px`,
-        left: `${s.left}px`
+        top: `${n.top}px`,
+        left: `${n.left}px`
       },
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: m.top, children: [
-          /* @__PURE__ */ t.jsx("h3", { children: i.name }),
+        /* @__PURE__ */ t.jsxs("div", { className: b.top, children: [
+          /* @__PURE__ */ t.jsx("h3", { children: s.name }),
           /* @__PURE__ */ t.jsx(
-            p,
+            m,
             {
               name: "x",
               height: 20,
               width: 20,
               hoverable: !0,
-              onClick: () => a(null)
+              onClick: () => o(null)
             }
           )
         ] }),
-        /* @__PURE__ */ t.jsxs("div", { children: [
-          /* @__PURE__ */ t.jsx("span", { children: "Put up an attractive image" }),
-          /* @__PURE__ */ t.jsx("div", { children: "Choose Image" })
-        ] })
+        /* @__PURE__ */ t.jsx("div", { className: b.modalOptions, children: l.map((e) => {
+          if (e.type === "image")
+            return /* @__PURE__ */ t.jsx(
+              Y,
+              {
+                label: "Put up an attractive image",
+                onChange: (c) => {
+                  const a = {
+                    ...s,
+                    [e.field]: c[0]
+                  };
+                  o(a);
+                }
+              }
+            );
+          if (e.type === "text")
+            return /* @__PURE__ */ t.jsx(
+              ft,
+              {
+                typeText: s[e.field.type] || "bold",
+                setTypeText: (c) => {
+                  const a = {
+                    ...s,
+                    [e.field.type]: c
+                  };
+                  o(a);
+                },
+                text: s[e.field.text] || "",
+                setText: (c) => {
+                  const a = {
+                    ...s,
+                    [e.field.text]: c
+                  };
+                  o(a);
+                },
+                subtitle: e.label
+              }
+            );
+          if (e.type === "input")
+            return /* @__PURE__ */ t.jsx(
+              T,
+              {
+                onChange: (c) => {
+                  const a = {
+                    ...s,
+                    [e.field]: c
+                  };
+                  o(a);
+                },
+                value: s[e.field] || "",
+                label: e.label,
+                placeholder: e.placeholder
+              }
+            );
+          if (e.type === "inputSwitch")
+            return /* @__PURE__ */ t.jsxs("div", { className: b.link, children: [
+              /* @__PURE__ */ t.jsx(
+                T,
+                {
+                  onChange: (c) => {
+                    const a = {
+                      ...s,
+                      [e.field.text]: c
+                    };
+                    o(a);
+                  },
+                  value: s[e.field.text] || "",
+                  label: e.inputLabel,
+                  placeholder: e.placeholder
+                }
+              ),
+              /* @__PURE__ */ t.jsx(
+                I,
+                {
+                  current: !!s[e.field.switch] || !1,
+                  label: e.switchLabel
+                }
+              )
+            ] });
+          if (e.type === "list")
+            return /* @__PURE__ */ t.jsx(
+              Yt,
+              {
+                items: s[e.field] || [],
+                setItems: (c) => {
+                  const a = {
+                    ...s,
+                    [e.field]: c
+                  };
+                  o(a);
+                },
+                itemsType: "select",
+                draggable: e.draggable || !1,
+                itemsOptions: e.itemsOptions,
+                deletable: e.deletable || !1,
+                editable: !1,
+                subtitle: e.label
+              }
+            );
+          if (e.type === "select")
+            return /* @__PURE__ */ t.jsx(
+              O,
+              {
+                options: e.itemsOptions,
+                onChange: (c) => {
+                  const a = {
+                    ...s,
+                    [e.field]: c
+                  };
+                  o(a);
+                },
+                label: e.label,
+                value: s[e.field] || "String"
+              }
+            );
+        }) })
       ]
     }
   );
-}, we = (_) => {
+}, Ht = "_other_1wtgi_1", Mt = "_subtitle_1wtgi_7", Ft = "_items_1wtgi_14", D = {
+  other: Ht,
+  subtitle: Mt,
+  items: Ft
+}, Gt = (d) => {
+  const { items: s, title: o = "Other" } = d;
+  return /* @__PURE__ */ t.jsxs("div", { className: D.other, children: [
+    /* @__PURE__ */ t.jsx("h5", { className: D.subtitle, children: o }),
+    /* @__PURE__ */ t.jsx("div", { className: D.items, children: s.map((n) => /* @__PURE__ */ t.jsx(
+      I,
+      {
+        current: n.isItem,
+        onChange: (l) => n.setIsItem(l),
+        label: n.label,
+        hasBackground: !0,
+        paddingless: !1
+      }
+    )) })
+  ] });
+}, Yt = (d) => {
   const {
-    isActiveItems: i,
-    setIsActiveItems: a,
-    items: s,
-    setItems: n,
-    isProductStats: c,
-    setIsProductStats: u,
-    title: h,
-    subtitle: o,
-    editable: l = !0,
-    draggable: r = !1,
-    withImage: f = !0,
-    itemsType: b,
-    itemsPlaceholder: v = "",
-    itemsOptions: L
-  } = _, [z, w] = y.useState(null), [H, F] = y.useState({
+    isActiveItems: s,
+    setIsActiveItems: o,
+    items: n,
+    setItems: l,
+    other: e,
+    title: c,
+    subtitle: a,
+    editable: r = !0,
+    draggable: u = !1,
+    withImage: p = !1,
+    deletable: y = !0,
+    addable: k = !0,
+    itemsType: x,
+    itemsPlaceholder: $ = "",
+    itemsOptions: g,
+    hasRangeSelector: L = !1,
+    rangeSelectorOptions: H,
+    modalOptions: M
+  } = d, [B, P] = j.useState(null), [J, K] = j.useState({
     top: 0,
     left: 0
   });
-  y.useEffect(() => {
-    const e = () => {
-      w(null);
+  j.useEffect(() => {
+    const i = () => {
+      P(null);
     };
-    return document.body.addEventListener("click", e), w(null), () => {
-      w(null), document.body.removeEventListener("click", e);
+    return document.body.addEventListener("click", i), P(null), () => {
+      P(null), document.body.removeEventListener("click", i);
     };
-  }, []);
-  const G = (e, d) => {
-    e.stopPropagation();
-    const j = e.target.getBoundingClientRect(), N = 100, T = window.innerHeight;
-    let g = j.top + window.scrollY;
-    g + N > T && (g = T - N - 20), F({
-      top: g - 80,
-      left: j.left - 30
-    }), w(d);
+  }, []), j.useEffect(() => {
+    if (B) {
+      const i = [...n].map((h) => h.id === B.id ? B : h);
+      l(i);
+    }
+  }, [B]), console.log(n);
+  const Q = (i, h) => {
+    i.stopPropagation();
+    const N = i.target.getBoundingClientRect(), w = 100, f = window.innerHeight;
+    let z = N.top + window.scrollY;
+    z + w > f && (z = f - w - 20), K({
+      top: z - 80,
+      left: N.left - 30
+    }), P(h);
   };
-  function M(e) {
-    if (f && !e)
-      return /* @__PURE__ */ t.jsx(
-        p,
+  function V(i) {
+    if (p)
+      return i ? /* @__PURE__ */ t.jsx(
+        "img",
+        {
+          src: `https://imagedelivery.net/${i}/w=1000`,
+          alt: "image",
+          width: 16,
+          height: 16
+        }
+      ) : /* @__PURE__ */ t.jsx(
+        m,
         {
           name: "image",
           width: 16,
@@ -249,34 +419,36 @@ const q = "_wrapper_o1bnv_2", J = "_alignmentBlock_o1bnv_8", K = "_title_o1bnv_1
         }
       );
   }
-  return /* @__PURE__ */ t.jsxs("div", { className: m.productsBlock, children: [
-    /* @__PURE__ */ t.jsxs("div", { className: m.top, children: [
-      h && /* @__PURE__ */ t.jsx("h3", { className: m.title, children: h }),
-      /* @__PURE__ */ t.jsx(
-        C,
+  return /* @__PURE__ */ t.jsxs("div", { className: b.productsBlock, children: [
+    (c || s) && /* @__PURE__ */ t.jsxs("div", { className: b.top, children: [
+      c && /* @__PURE__ */ t.jsx("h3", { className: b.title, children: c }),
+      s && /* @__PURE__ */ t.jsx(
+        I,
         {
-          current: i,
-          onChange: (e) => a((d) => e)
+          current: s,
+          onChange: (i) => o == null ? void 0 : o(i)
         }
       )
     ] }),
-    z && l && /* @__PURE__ */ t.jsx(
-      It,
+    B && r && M && /* @__PURE__ */ t.jsx(
+      Dt,
       {
-        activeItem: z,
-        setActiveItem: w,
-        popupPosition: H
+        activeItem: B,
+        setActiveItem: P,
+        popupPosition: J,
+        modalOptions: M
       }
     ),
-    /* @__PURE__ */ t.jsxs("div", { className: m.products, children: [
-      o && /* @__PURE__ */ t.jsx("h5", { className: m.subtitle, children: o }),
-      s.map((e) => /* @__PURE__ */ t.jsxs(
+    L && H && /* @__PURE__ */ t.jsx(Je, { ...H }),
+    /* @__PURE__ */ t.jsxs("div", { className: b.products, children: [
+      a && /* @__PURE__ */ t.jsx("h5", { className: b.subtitle, children: a }),
+      n.map((i) => /* @__PURE__ */ t.jsxs(
         "div",
         {
-          className: m.product,
+          className: b.product,
           children: [
-            r && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-              p,
+            u && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
+              m,
               {
                 name: "drag",
                 hoverable: !0,
@@ -284,53 +456,69 @@ const q = "_wrapper_o1bnv_2", J = "_alignmentBlock_o1bnv_8", K = "_title_o1bnv_1
                 height: 20
               }
             ) }),
-            b === "select" && /* @__PURE__ */ t.jsx(
-              I,
+            x === "select" && /* @__PURE__ */ t.jsx(
+              O,
               {
-                onChange: (d) => {
-                  n((j) => [...j].map((g) => g.id === e.id ? {
-                    ...e,
-                    name: d
-                  } : g));
+                onChange: (h) => {
+                  const w = [...n].map((f) => f.id === i.id ? {
+                    ...i,
+                    name: h
+                  } : f);
+                  l(w);
                 },
-                value: e.name,
-                options: L,
-                leftAddon: M(e.image)
+                value: i.name,
+                options: g,
+                leftAddon: V(i.image)
               }
             ),
-            b === "input" && /* @__PURE__ */ t.jsx(
-              S,
+            x === "input" && /* @__PURE__ */ t.jsx(
+              T,
               {
-                onChange: (d) => {
-                  n((j) => [...j].map((g) => g.id === e.id ? {
-                    ...e,
-                    name: d
-                  } : g));
+                onChange: (h) => {
+                  const w = [...n].map((f) => f.id === i.id ? {
+                    ...i,
+                    name: h
+                  } : f);
+                  l(w);
                 },
-                value: e.name,
-                placeholder: v
+                value: i.name,
+                placeholder: $
               }
             ),
-            b === "image" && /* @__PURE__ */ t.jsx(Y, {}),
-            /* @__PURE__ */ t.jsxs("div", { className: m.buttons, children: [
-              l && /* @__PURE__ */ t.jsx(
-                p,
+            x === "image" && /* @__PURE__ */ t.jsx(
+              Y,
+              {
+                onChange: (h) => {
+                  const w = [...n].map((f) => f.id === i.id ? {
+                    ...i,
+                    image: h[0]
+                  } : f);
+                  l(w);
+                }
+              }
+            ),
+            /* @__PURE__ */ t.jsxs("div", { className: b.buttons, children: [
+              r && /* @__PURE__ */ t.jsx(
+                m,
                 {
                   name: "sliders",
                   hoverable: !0,
                   width: 20,
                   height: 20,
-                  onClick: (d) => {
-                    G(d, e);
+                  onClick: (h) => {
+                    Q(h, i);
                   }
                 }
               ),
-              /* @__PURE__ */ t.jsx(
-                p,
+              y && /* @__PURE__ */ t.jsx(
+                m,
                 {
                   name: "trash",
                   hoverable: !0,
-                  onClick: () => n((d) => d.filter((j) => j.id !== e.id)),
+                  onClick: () => {
+                    const h = n.filter((N) => N.id !== i.id);
+                    l(h);
+                  },
                   width: 20,
                   height: 20,
                   fill: "#C12A2A"
@@ -339,29 +527,30 @@ const q = "_wrapper_o1bnv_2", J = "_alignmentBlock_o1bnv_8", K = "_title_o1bnv_1
             ] })
           ]
         },
-        e.id
+        i.id
       )),
-      /* @__PURE__ */ t.jsxs(
-        R,
+      k && /* @__PURE__ */ t.jsxs(
+        U,
         {
-          className: m.button,
+          className: b.button,
           size: "s",
-          onClick: () => n((e) => {
-            const d = [...e];
-            return b === "select" ? d.push({
-              name: L[0] || "",
-              id: P()
-            }) : b === "input" ? d.push({
+          onClick: () => {
+            const i = [...n];
+            x === "select" ? i.push({
+              name: g[0] || `Product ${n.length + 1}`,
+              id: R()
+            }) : x === "input" ? i.push({
               name: "",
-              id: P()
-            }) : d.push({
-              id: P()
-            }), d;
-          }),
+              id: R()
+            }) : i.push({
+              name: `Image ${n.length + 1}`,
+              id: R()
+            }), l(i);
+          },
           children: [
             /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
             /* @__PURE__ */ t.jsx(
-              p,
+              m,
               {
                 name: "plus",
                 width: 16,
@@ -372,80 +561,68 @@ const q = "_wrapper_o1bnv_2", J = "_alignmentBlock_o1bnv_8", K = "_title_o1bnv_1
         }
       )
     ] }),
-    c !== void 0 && /* @__PURE__ */ t.jsxs("div", { className: m.other, children: [
-      /* @__PURE__ */ t.jsx("h5", { className: m.subtitle, children: "Other" }),
-      /* @__PURE__ */ t.jsx(
-        C,
-        {
-          current: c,
-          onChange: (e) => u == null ? void 0 : u((d) => e),
-          label: "Product Stats",
-          hasBackground: !0,
-          paddingless: !1
-        }
-      )
-    ] })
+    e !== void 0 && /* @__PURE__ */ t.jsx(Gt, { items: e })
   ] });
-}, At = "_subtitle_1y5sw_1", St = "_header_1y5sw_8", Lt = "_text_1y5sw_9", zt = "_productsBlock_1y5sw_10", Ot = "_buttonsBlock_1y5sw_11", Rt = "_top_1y5sw_22", Et = "_itemsBlock_1y5sw_29", Ht = "_typeTexts_1y5sw_35", Ft = "_block_1y5sw_41", Gt = "_active_1y5sw_52", Mt = "_products_1y5sw_10", Dt = "_product_1y5sw_10", Yt = "_button_1y5sw_11", qt = "_image_1y5sw_80", Jt = "_info_1y5sw_87", Kt = "_name_1y5sw_98", Qt = "_buttons_1y5sw_11", Ut = "_modal_1y5sw_108", Vt = "_other_1y5sw_125", Wt = "_options_1y5sw_131", k = {
-  subtitle: At,
-  header: St,
-  text: Lt,
-  productsBlock: zt,
-  buttonsBlock: Ot,
-  top: Rt,
-  itemsBlock: Et,
-  typeTexts: Ht,
-  block: Ft,
-  active: Gt,
-  products: Mt,
-  product: Dt,
-  button: Yt,
-  image: qt,
-  info: Jt,
-  name: Kt,
-  buttons: Qt,
-  modal: Ut,
-  other: Vt,
-  options: Wt
-}, Xt = (_) => {
-  const { activeButton: i, setActiveButton: a, popupPosition: s } = _, [n, c] = y.useState(i.typeText), [u, h] = y.useState(i.destination), [o, l] = y.useState(i.link || "");
+}, Ut = "_subtitle_41klp_1", qt = "_header_41klp_8", Jt = "_text_41klp_9", Kt = "_productsBlock_41klp_10", Qt = "_buttonsBlock_41klp_11", Vt = "_top_41klp_21", Wt = "_itemsBlock_41klp_28", Xt = "_typeTexts_41klp_34", Zt = "_block_41klp_40", te = "_active_41klp_51", ee = "_products_41klp_10", se = "_product_41klp_10", ne = "_button_41klp_11", oe = "_image_41klp_79", ce = "_info_41klp_86", le = "_name_41klp_97", ie = "_buttons_41klp_11", ae = "_modal_41klp_107", re = "_other_41klp_124", de = "_options_41klp_130", C = {
+  subtitle: Ut,
+  header: qt,
+  text: Jt,
+  productsBlock: Kt,
+  buttonsBlock: Qt,
+  top: Vt,
+  itemsBlock: Wt,
+  typeTexts: Xt,
+  block: Zt,
+  active: te,
+  products: ee,
+  product: se,
+  button: ne,
+  image: oe,
+  info: ce,
+  name: le,
+  buttons: ie,
+  modal: ae,
+  other: re,
+  options: de
+}, ue = (d) => {
+  const { activeButton: s, setActiveButton: o, popupPosition: n } = d, [l, e] = j.useState(s.typeText), [c, a] = j.useState(s.destination), [r, u] = j.useState(s.link || "");
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: k.modal,
-      onClick: (r) => {
-        r.stopPropagation();
+      className: C.modal,
+      onClick: (p) => {
+        p.stopPropagation();
       },
       style: {
-        top: `${s.top}px`,
-        left: `${s.left}px`
+        top: `${n.top}px`,
+        left: `${n.left}px`
       },
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: k.top, children: [
-          /* @__PURE__ */ t.jsx("h3", { children: i.type }),
+        /* @__PURE__ */ t.jsxs("div", { className: C.top, children: [
+          /* @__PURE__ */ t.jsx("h3", { children: s.type }),
           /* @__PURE__ */ t.jsx(
-            p,
+            m,
             {
               name: "x",
               height: 20,
               width: 20,
               hoverable: !0,
-              onClick: () => a(null)
+              onClick: () => o(null)
             }
           )
         ] }),
-        /* @__PURE__ */ t.jsxs("div", { className: k.options, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: C.options, children: [
           /* @__PURE__ */ t.jsx(
-            I,
+            O,
             {
               label: "Destination",
-              onChange: (r) => h(r),
+              onChange: (p) => a(p),
               options: ["Go to Page", "Open Link"],
-              value: u
+              value: c
             }
           ),
-          u === "Go to Page" ? /* @__PURE__ */ t.jsx(
-            I,
+          c === "Go to Page" ? /* @__PURE__ */ t.jsx(
+            O,
             {
               label: "Go to",
               onChange: () => {
@@ -454,23 +631,23 @@ const q = "_wrapper_o1bnv_2", J = "_alignmentBlock_o1bnv_8", K = "_title_o1bnv_1
               value: "Homepage"
             }
           ) : /* @__PURE__ */ t.jsx(
-            S,
+            T,
             {
-              onChange: (r) => l(r),
-              value: o,
+              onChange: (p) => u(p),
+              value: r,
               placeholder: "https://",
               label: "Link"
             }
           ),
           /* @__PURE__ */ t.jsx(
-            C,
+            I,
             {
               current: !1,
               label: "Open in new tab"
             }
           ),
           /* @__PURE__ */ t.jsx(
-            O,
+            G,
             {
               onChange: () => {
               },
@@ -480,98 +657,102 @@ const q = "_wrapper_o1bnv_2", J = "_alignmentBlock_o1bnv_8", K = "_title_o1bnv_1
             }
           ),
           /* @__PURE__ */ t.jsx(
-            E,
+            q,
             {
-              typeText: n,
-              setTypeText: c
+              typeText: l,
+              setTypeText: e
             }
           )
         ] })
       ]
     }
   );
-}, Zt = "_subtitle_1y5sw_1", te = "_header_1y5sw_8", ee = "_text_1y5sw_9", se = "_productsBlock_1y5sw_10", ne = "_buttonsBlock_1y5sw_11", oe = "_top_1y5sw_22", ie = "_itemsBlock_1y5sw_29", ce = "_typeTexts_1y5sw_35", le = "_block_1y5sw_41", ae = "_active_1y5sw_52", re = "_products_1y5sw_10", de = "_product_1y5sw_10", _e = "_button_1y5sw_11", ue = "_image_1y5sw_80", pe = "_info_1y5sw_87", me = "_name_1y5sw_98", he = "_buttons_1y5sw_11", xe = "_modal_1y5sw_108", be = "_other_1y5sw_125", ge = "_options_1y5sw_131", B = {
-  subtitle: Zt,
-  header: te,
-  text: ee,
-  productsBlock: se,
-  buttonsBlock: ne,
-  top: oe,
-  itemsBlock: ie,
-  typeTexts: ce,
-  block: le,
-  active: ae,
-  products: re,
-  product: de,
-  button: _e,
-  image: ue,
-  info: pe,
-  name: me,
-  buttons: he,
-  modal: xe,
-  other: be,
-  options: ge
-}, ye = (_) => {
-  const { buttons: i, setButtons: a } = _, [s, n] = y.useState(null), [c, u] = y.useState({
+}, _e = "_subtitle_1y5sw_1", pe = "_header_1y5sw_8", me = "_text_1y5sw_9", he = "_productsBlock_1y5sw_10", ge = "_buttonsBlock_1y5sw_11", be = "_top_1y5sw_22", xe = "_itemsBlock_1y5sw_29", fe = "_typeTexts_1y5sw_35", je = "_block_1y5sw_41", ve = "_active_1y5sw_52", ke = "_products_1y5sw_10", ye = "_product_1y5sw_10", $e = "_button_1y5sw_11", we = "_image_1y5sw_80", Ne = "_info_1y5sw_87", Be = "_name_1y5sw_98", Ce = "_buttons_1y5sw_11", Te = "_modal_1y5sw_108", Ie = "_other_1y5sw_125", Pe = "_options_1y5sw_131", A = {
+  subtitle: _e,
+  header: pe,
+  text: me,
+  productsBlock: he,
+  buttonsBlock: ge,
+  top: be,
+  itemsBlock: xe,
+  typeTexts: fe,
+  block: je,
+  active: ve,
+  products: ke,
+  product: ye,
+  button: $e,
+  image: we,
+  info: Ne,
+  name: Be,
+  buttons: Ce,
+  modal: Te,
+  other: Ie,
+  options: Pe
+}, Se = (d) => {
+  const { buttons: s, setButtons: o } = d, [n, l] = j.useState(null), [e, c] = j.useState({
     top: 0,
     left: 0
   });
-  y.useEffect(() => {
-    const o = () => {
-      n(null);
+  j.useEffect(() => {
+    const r = () => {
+      l(null);
     };
-    return document.body.addEventListener("click", o), n(null), () => {
-      n(null), document.body.removeEventListener("click", o);
+    return document.body.addEventListener("click", r), l(null), () => {
+      l(null), document.body.removeEventListener("click", r);
     };
   }, []);
-  const h = (o, l) => {
-    o.stopPropagation();
-    const r = o.target.getBoundingClientRect(), f = 490, b = window.innerHeight;
-    let v = r.top + window.scrollY;
-    v + f > b && (v = b - f - 20), u({
-      top: v,
-      left: r.left - 30
-    }), n(l);
+  const a = (r, u) => {
+    r.stopPropagation();
+    const p = r.target.getBoundingClientRect(), y = 490, k = window.innerHeight;
+    let x = p.top + window.scrollY;
+    x + y > k && (x = k - y - 20), c({
+      top: x,
+      left: p.left - 30
+    }), l(u);
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: B.products, children: [
-    /* @__PURE__ */ t.jsx("h5", { className: B.subtitle, children: "Button Type" }),
-    i.map((o) => /* @__PURE__ */ t.jsxs(
+  return /* @__PURE__ */ t.jsxs("div", { className: A.products, children: [
+    /* @__PURE__ */ t.jsx("h5", { className: A.subtitle, children: "Button Type" }),
+    s.map((r) => /* @__PURE__ */ t.jsxs(
       "div",
       {
-        className: B.product,
+        className: A.product,
         children: [
           /* @__PURE__ */ t.jsx(
-            I,
+            O,
             {
-              onChange: (l) => {
-                a((r) => [...r].map((v) => v.id === o.id ? {
-                  ...o,
-                  type: l
-                } : v));
+              onChange: (u) => {
+                const y = [...s].map((k) => k.id === r.id ? {
+                  ...r,
+                  type: u
+                } : k);
+                o(y);
               },
-              value: o.type,
-              options: ["Primary", "Secondary"]
+              value: r.type,
+              options: ["Primary", "Secondary", "Tertiary"]
             }
           ),
-          /* @__PURE__ */ t.jsxs("div", { className: B.buttons, children: [
+          /* @__PURE__ */ t.jsxs("div", { className: A.buttons, children: [
             /* @__PURE__ */ t.jsx(
-              p,
+              m,
               {
                 name: "sliders",
                 hoverable: !0,
                 width: 20,
                 height: 20,
-                onClick: (l) => {
-                  h(l, o);
+                onClick: (u) => {
+                  a(u, r);
                 }
               }
             ),
             /* @__PURE__ */ t.jsx(
-              p,
+              m,
               {
                 name: "trash",
                 hoverable: !0,
-                onClick: () => a((l) => l.filter((r) => r.id !== o.id)),
+                onClick: () => {
+                  const u = s.filter((p) => p.id !== r.id);
+                  o(u);
+                },
                 width: 20,
                 height: 20,
                 fill: "#C12A2A"
@@ -580,34 +761,34 @@ const q = "_wrapper_o1bnv_2", J = "_alignmentBlock_o1bnv_8", K = "_title_o1bnv_1
           ] })
         ]
       },
-      o.id
+      r.id
     )),
-    s && /* @__PURE__ */ t.jsx(
-      Xt,
+    n && /* @__PURE__ */ t.jsx(
+      ue,
       {
-        activeButton: s,
-        setActiveButton: n,
-        popupPosition: c
+        activeButton: n,
+        setActiveButton: l,
+        popupPosition: e
       }
     ),
     /* @__PURE__ */ t.jsxs(
-      R,
+      U,
       {
-        className: B.button,
+        className: A.button,
         size: "s",
-        onClick: () => a((o) => {
-          const l = [...o];
-          return l.push({
+        onClick: () => {
+          const r = [...s];
+          r.push({
             type: "Primary",
-            id: P(),
+            id: R(),
             typeText: "bold",
             destination: "Go to Page"
-          }), l;
-        }),
+          }), o(r);
+        },
         children: [
           /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
           /* @__PURE__ */ t.jsx(
-            p,
+            m,
             {
               name: "plus",
               width: 16,
@@ -618,48 +799,173 @@ const q = "_wrapper_o1bnv_2", J = "_alignmentBlock_o1bnv_8", K = "_title_o1bnv_1
       }
     )
   ] });
-}, $e = (_) => {
-  const { isActiveButtons: i, setIsActiveButtons: a, buttons: s, setButtons: n } = _;
-  return /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsxs("div", { className: k.buttonsBlock, children: [
-    /* @__PURE__ */ t.jsxs("div", { className: k.top, children: [
-      /* @__PURE__ */ t.jsx("h3", { className: k.title, children: "Buttons" }),
+}, We = (d) => {
+  const { isActiveButtons: s, setIsActiveButtons: o, buttons: n, setButtons: l } = d;
+  return /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsxs("div", { className: C.buttonsBlock, children: [
+    /* @__PURE__ */ t.jsxs("div", { className: C.top, children: [
+      /* @__PURE__ */ t.jsx("h3", { className: C.title, children: "Buttons" }),
       /* @__PURE__ */ t.jsx(
-        C,
+        I,
         {
-          current: i,
-          onChange: (c) => a((u) => c)
+          current: s,
+          onChange: (e) => o(e)
         }
       )
     ] }),
     /* @__PURE__ */ t.jsx(
-      ye,
+      Se,
       {
-        buttons: s,
-        setButtons: n
+        buttons: n,
+        setButtons: l
       }
     )
   ] }) });
+}, Ae = "_wrapper_tn7gb_1", Oe = "_subtitle_tn7gb_7", Le = "_content_tn7gb_14", Re = "_range_tn7gb_21", ze = "_track_tn7gb_26", Ee = "_progress_tn7gb_35", De = "_dots_tn7gb_45", He = "_dot_tn7gb_45", Me = "_active_tn7gb_62", Fe = "_input_tn7gb_74", Ge = "_countBlock_tn7gb_88", Ye = "_count_tn7gb_88", Ue = "_controls_tn7gb_103", qe = "_button_tn7gb_108", _ = {
+  wrapper: Ae,
+  subtitle: Oe,
+  content: Le,
+  range: Re,
+  track: ze,
+  progress: Ee,
+  dots: De,
+  dot: He,
+  active: Me,
+  input: Fe,
+  countBlock: Ge,
+  count: Ye,
+  controls: Ue,
+  button: qe
+}, Je = (d) => {
+  const { label: s, min: o = 1, max: n = 4, step: l = 1, count: e, setCount: c } = d, [a, r] = j.useState(!1), u = Array.from({ length: (n - o) / l + 1 }), p = (e - o) / (n - o) * 100, y = () => {
+    e < n && c(e + l);
+  }, k = () => {
+    e > o && c(e - l);
+  }, x = ($) => {
+    const g = o + $ * l;
+    c(g);
+  };
+  return /* @__PURE__ */ t.jsxs("div", { className: _.wrapper, children: [
+    s && /* @__PURE__ */ t.jsx("h5", { className: _.subtitle, children: s }),
+    /* @__PURE__ */ t.jsxs("div", { className: _.content, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: _.range, children: [
+        /* @__PURE__ */ t.jsx("div", { className: _.track }),
+        /* @__PURE__ */ t.jsx(
+          "div",
+          {
+            className: _.progress,
+            style: { width: `${p}%` }
+          }
+        ),
+        /* @__PURE__ */ t.jsx("div", { className: _.dots, children: u.map(($, g) => {
+          const L = g <= (e - o) / l;
+          return /* @__PURE__ */ t.jsx(
+            "button",
+            {
+              onClick: () => x(g),
+              className: F(_.dot, {
+                [_.active]: L,
+                [_.inactive]: !L,
+                [_.dragging]: a
+              }),
+              "aria-label": `Set value to ${o + g * l}`
+            },
+            g
+          );
+        }) }),
+        /* @__PURE__ */ t.jsx(
+          "input",
+          {
+            type: "range",
+            min: o,
+            max: n,
+            step: l,
+            value: e,
+            onChange: ($) => c(Number($.target.value)),
+            onMouseDown: () => r(!0),
+            onMouseUp: () => r(!1),
+            onTouchStart: () => r(!0),
+            onTouchEnd: () => r(!1),
+            className: _.input
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t.jsxs("div", { className: _.countBlock, children: [
+        /* @__PURE__ */ t.jsx(
+          T,
+          {
+            type: "number",
+            min: o,
+            max: n,
+            paddingless: !0,
+            onChange: ($) => {
+              const g = Number($);
+              g > n ? c(n) : g < o ? c(o) : c(g);
+            },
+            value: String(e)
+          }
+        ),
+        /* @__PURE__ */ t.jsxs("div", { className: _.controls, children: [
+          /* @__PURE__ */ t.jsx(
+            "button",
+            {
+              onClick: y,
+              disabled: e >= n,
+              className: _.button,
+              "aria-label": "Increment count",
+              children: /* @__PURE__ */ t.jsx(
+                m,
+                {
+                  name: "arrow-down",
+                  width: 15,
+                  height: 15,
+                  rotated: !0
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ t.jsx(
+            "button",
+            {
+              onClick: k,
+              disabled: e <= o,
+              className: _.button,
+              "aria-label": "Decrement count",
+              children: /* @__PURE__ */ t.jsx(
+                m,
+                {
+                  name: "arrow-down",
+                  width: 15,
+                  height: 15
+                }
+              )
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
 };
 export {
-  R as Button,
-  ye as ButtonTypeSettings,
-  $e as ButtonsSettings,
-  Ne as Checkbox,
+  U as Button,
+  Se as ButtonTypeSettings,
+  We as ButtonsSettings,
+  ts as Checkbox,
   Y as ChooseImage,
-  Te as ChooseImageModal,
-  Pe as ColorPicker,
-  p as Icon,
-  S as Input,
-  we as ItemsSettings,
-  ke as LayoutSettings,
-  Ie as Modal,
-  Ae as Picker,
-  Se as Radio,
-  I as Select,
-  Le as Submodal,
-  C as Switch,
-  fe as TextSettings,
-  O as Textarea,
-  ze as Tip,
-  E as TypeTexts
+  es as ChooseImageModal,
+  ss as ColorPicker,
+  m as Icon,
+  T as Input,
+  Yt as ItemsSettings,
+  Ve as LayoutSettings,
+  ns as Modal,
+  os as Picker,
+  cs as Radio,
+  Je as RangeSelector,
+  O as Select,
+  ls as Submodal,
+  I as Switch,
+  ft as TextSettings,
+  G as Textarea,
+  is as Tip,
+  q as TypeTexts
 };