@billgangcom/theme-lib 1.5.0 → 1.6.0

package/dist/ui.es.js

@@ -1,19 +1,19 @@
-import { j as t, I as a, a as A, c as H, S as f, T as S, B as L, v as z, b as I } from "./index-O501BDCu.js";
-import { f as ee, g as se, h as ne, C as oe, M as ie, P as le, R as ce, d as ae, e as de } from "./index-O501BDCu.js";
-import b from "react";
-const O = "_wrapper_o1bnv_2", F = "_alignmentBlock_o1bnv_8", G = "_title_o1bnv_16", M = "_subtitle_o1bnv_23", D = "_alignmentContent_o1bnv_30", Y = "_alignments_o1bnv_37", q = "_alignment_o1bnv_8", J = "_circle_o1bnv_56", K = "_paddings_o1bnv_63", Q = "_padding_o1bnv_63", U = "_input_o1bnv_81", g = {
-  wrapper: O,
-  alignmentBlock: F,
-  title: G,
-  subtitle: M,
-  alignmentContent: D,
-  alignments: Y,
-  alignment: q,
-  circle: J,
-  paddings: K,
-  padding: Q,
-  input: U
-}, V = [
+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 = [
   "topLeft",
   "top",
   "topRight",
@@ -23,24 +23,24 @@ const O = "_wrapper_o1bnv_2", F = "_alignmentBlock_o1bnv_8", G = "_title_o1bnv_1
   "bottomLeft",
   "bottom",
   "bottomRight"
-], W = ["left", "top", "right", "bottom"], Ut = (r) => {
-  const { alignment: n, padding: _, setPadding: s, setAlignment: d } = r;
-  return /* @__PURE__ */ t.jsxs("div", { className: g.layout, children: [
-    /* @__PURE__ */ t.jsx("h3", { className: g.title, children: "Layout" }),
-    /* @__PURE__ */ t.jsxs("div", { className: g.alignmentBlock, children: [
-      /* @__PURE__ */ t.jsx("h5", { className: g.subtitle, children: "Alignment" }),
-      /* @__PURE__ */ t.jsxs("div", { className: g.alignmentContent, children: [
-        /* @__PURE__ */ t.jsx("div", { className: g.alignments, children: V.map((o) => /* @__PURE__ */ t.jsxs(
+], 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(
           "div",
           {
             onClick: () => {
-              d((l) => o);
+              n((u) => c);
             },
-            className: g.alignment,
+            className: x.alignment,
             children: [
-              o !== n && /* @__PURE__ */ t.jsx("div", { className: g.circle }),
-              o === n && /* @__PURE__ */ t.jsx(
-                a,
+              c !== i && /* @__PURE__ */ t.jsx("div", { className: x.circle }),
+              c === i && /* @__PURE__ */ t.jsx(
+                p,
                 {
                   name: "text-align-left",
                   fill: "#FF3F19"
@@ -48,25 +48,25 @@ const O = "_wrapper_o1bnv_2", F = "_alignmentBlock_o1bnv_8", G = "_title_o1bnv_1
               )
             ]
           },
-          o
+          c
         )) }),
-        /* @__PURE__ */ t.jsx("div", { className: g.paddings, children: W.map((o) => /* @__PURE__ */ t.jsxs("label", { className: g.padding, children: [
+        /* @__PURE__ */ t.jsx("div", { className: x.paddings, children: nt.map((c) => /* @__PURE__ */ t.jsxs("label", { className: x.padding, children: [
           /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-            a,
+            p,
             {
-              name: `align-${o}`,
+              name: `align-${c}`,
               width: 20,
               height: 20
             }
           ) }),
           /* @__PURE__ */ t.jsx(
-            A,
+            S,
             {
               type: "text",
-              value: String(_[o]),
-              onChange: (l) => s((p) => ({
-                ...p,
-                [o]: Number(l)
+              value: String(a[c]),
+              onChange: (u) => s((h) => ({
+                ...h,
+                [c]: Number(u)
               })),
               paddingless: !0
             }
@@ -75,30 +75,30 @@ const O = "_wrapper_o1bnv_2", F = "_alignmentBlock_o1bnv_8", G = "_title_o1bnv_1
       ] })
     ] })
   ] });
-}, X = "_subtitle_2zbxx_1", Z = "_header_2zbxx_8", tt = "_text_2zbxx_9", et = "_top_2zbxx_16", st = "_itemsBlock_2zbxx_23", w = {
-  subtitle: X,
-  header: Z,
-  text: tt,
-  top: et,
-  itemsBlock: st
-}, nt = "_typeTexts_3zlec_1", ot = "_block_3zlec_7", it = "_active_3zlec_18", C = {
-  typeTexts: nt,
-  block: ot,
-  active: it
-}, lt = ["bold", "italic", "underline", "strike-through", "code"], R = (r) => {
-  const { typeText: n, setTypeText: _ } = r;
-  return /* @__PURE__ */ t.jsx("div", { className: C.typeTexts, children: lt.map((s) => /* @__PURE__ */ t.jsx(
+}, 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(
     "div",
     {
-      className: H(C.block, {
-        [C.active]: n === s
+      className: D(A.block, {
+        [A.active]: i === s
       }),
-      onClick: () => _((d) => s),
+      onClick: () => a((n) => s),
       children: /* @__PURE__ */ t.jsx(
-        a,
+        p,
         {
           name: `text-${s}`,
-          fill: n === s ? "#252525" : "#757575",
+          fill: i === s ? "#252525" : "#757575",
           width: 20,
           height: 20
         }
@@ -106,90 +106,90 @@ const O = "_wrapper_o1bnv_2", F = "_alignmentBlock_o1bnv_8", G = "_title_o1bnv_1
     },
     String(s)
   )) });
-}, Vt = (r) => {
+}, fe = (_) => {
   const {
-    typeText: n,
-    isActiveText: _,
+    typeText: i,
+    isActiveText: a,
     setIsActiveText: s,
-    text: d,
-    setText: o,
-    setTypeText: l,
-    title: p,
-    subtitle: v = "Items"
-  } = r;
-  return /* @__PURE__ */ t.jsxs("div", { className: w.text, children: [
-    /* @__PURE__ */ t.jsxs("div", { className: w.top, children: [
-      /* @__PURE__ */ t.jsx("h3", { className: w.title, children: p }),
+    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(
-        f,
+        C,
         {
-          current: _,
-          onChange: (u) => s((e) => u)
+          current: a,
+          onChange: (l) => s((r) => l)
         }
       )
     ] }),
-    /* @__PURE__ */ t.jsxs("div", { className: w.itemsBlock, children: [
-      /* @__PURE__ */ t.jsx("h5", { className: w.subtitle, children: v }),
+    /* @__PURE__ */ t.jsxs("div", { className: $.itemsBlock, children: [
+      /* @__PURE__ */ t.jsx("h5", { className: $.subtitle, children: o }),
       /* @__PURE__ */ t.jsx(
-        S,
+        O,
         {
-          onChange: (u) => o((e) => u),
-          value: d,
+          onChange: (l) => c((r) => l),
+          value: n,
           maxLength: 150
         }
       ),
       /* @__PURE__ */ t.jsx(
-        R,
+        E,
         {
-          typeText: n,
-          setTypeText: l
+          typeText: i,
+          setTypeText: u
         }
       )
     ] })
   ] });
-}, ct = "_subtitle_2l7ty_1", at = "_header_2l7ty_8", dt = "_text_2l7ty_9", rt = "_productsBlock_2l7ty_10", _t = "_top_2l7ty_22", ht = "_itemsBlock_2l7ty_29", mt = "_typeTexts_2l7ty_35", pt = "_block_2l7ty_41", ut = "_active_2l7ty_52", xt = "_products_2l7ty_10", gt = "_product_2l7ty_10", bt = "_button_2l7ty_70", vt = "_image_2l7ty_80", jt = "_info_2l7ty_87", yt = "_name_2l7ty_98", kt = "_buttons_2l7ty_102", wt = "_modal_2l7ty_108", ft = "_other_2l7ty_125", c = {
-  subtitle: ct,
-  header: at,
-  text: dt,
-  productsBlock: rt,
-  top: _t,
-  itemsBlock: ht,
-  typeTexts: mt,
-  block: pt,
-  active: ut,
-  products: xt,
-  product: gt,
-  button: bt,
-  image: vt,
-  info: jt,
-  name: yt,
-  buttons: kt,
-  modal: wt,
-  other: ft
-}, Nt = (r) => {
-  const { activeItem: n, setActiveItem: _, popupPosition: s } = r;
+}, 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(
     "div",
     {
-      className: c.modal,
-      onClick: (d) => {
-        d.stopPropagation();
+      className: m.modal,
+      onClick: (n) => {
+        n.stopPropagation();
       },
       style: {
         top: `${s.top}px`,
         left: `${s.left}px`
       },
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: c.top, children: [
-          /* @__PURE__ */ t.jsx("h3", { children: n.name }),
+        /* @__PURE__ */ t.jsxs("div", { className: m.top, children: [
+          /* @__PURE__ */ t.jsx("h3", { children: i.name }),
           /* @__PURE__ */ t.jsx(
-            a,
+            p,
             {
               name: "x",
               height: 20,
               width: 20,
               hoverable: !0,
-              onClick: () => _(null)
+              onClick: () => a(null)
             }
           )
         ] }),
@@ -200,107 +200,137 @@ const O = "_wrapper_o1bnv_2", F = "_alignmentBlock_o1bnv_8", G = "_title_o1bnv_1
       ]
     }
   );
-}, Wt = (r) => {
+}, we = (_) => {
   const {
-    isActiveItems: n,
-    setIsActiveItems: _,
+    isActiveItems: i,
+    setIsActiveItems: a,
     items: s,
-    setItems: d,
-    isProductStats: o,
-    setIsProductStats: l,
-    title: p,
-    subtitle: v,
-    editable: u = !0,
-    draggable: e = !1,
-    withImage: m = !0
-  } = r, [y, j] = b.useState(null), [N, k] = b.useState({
+    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({
     top: 0,
     left: 0
   });
-  b.useEffect(() => {
-    const i = () => {
-      j(null);
+  y.useEffect(() => {
+    const e = () => {
+      w(null);
     };
-    return document.body.addEventListener("click", i), j(null), () => {
-      j(null), document.body.removeEventListener("click", i);
+    return document.body.addEventListener("click", e), w(null), () => {
+      w(null), document.body.removeEventListener("click", e);
     };
   }, []);
-  const E = (i, x) => {
-    i.stopPropagation();
-    const B = i.target.getBoundingClientRect(), T = 100, P = window.innerHeight;
-    let $ = B.top + window.scrollY;
-    $ + T > P && ($ = P - T - 20), k({
-      top: $ - 80,
-      left: B.left - 30
-    }), j(x);
+  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);
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: c.productsBlock, children: [
-    /* @__PURE__ */ t.jsxs("div", { className: c.top, children: [
-      p && /* @__PURE__ */ t.jsx("h3", { className: c.title, children: p }),
+  function M(e) {
+    if (f && !e)
+      return /* @__PURE__ */ t.jsx(
+        p,
+        {
+          name: "image",
+          width: 16,
+          height: 16,
+          fill: "#757575"
+        }
+      );
+  }
+  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(
-        f,
+        C,
         {
-          current: n,
-          onChange: (i) => _((x) => i)
+          current: i,
+          onChange: (e) => a((d) => e)
         }
       )
     ] }),
-    y && u && /* @__PURE__ */ t.jsx(
-      Nt,
+    z && l && /* @__PURE__ */ t.jsx(
+      It,
       {
-        activeItem: y,
-        setActiveItem: j,
-        popupPosition: N
+        activeItem: z,
+        setActiveItem: w,
+        popupPosition: H
       }
     ),
-    /* @__PURE__ */ t.jsxs("div", { className: c.products, children: [
-      v && /* @__PURE__ */ t.jsx("h5", { className: c.subtitle, children: v }),
-      s.map((i) => /* @__PURE__ */ t.jsxs(
+    /* @__PURE__ */ t.jsxs("div", { className: m.products, children: [
+      o && /* @__PURE__ */ t.jsx("h5", { className: m.subtitle, children: o }),
+      s.map((e) => /* @__PURE__ */ t.jsxs(
         "div",
         {
-          className: c.product,
+          className: m.product,
           children: [
-            e && /* @__PURE__ */ t.jsx(
-              a,
+            r && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
+              p,
               {
                 name: "drag",
                 hoverable: !0,
                 width: 20,
                 height: 20
               }
+            ) }),
+            b === "select" && /* @__PURE__ */ t.jsx(
+              I,
+              {
+                onChange: (d) => {
+                  n((j) => [...j].map((g) => g.id === e.id ? {
+                    ...e,
+                    name: d
+                  } : g));
+                },
+                value: e.name,
+                options: L,
+                leftAddon: M(e.image)
+              }
             ),
-            /* @__PURE__ */ t.jsxs("div", { className: c.info, children: [
-              m && /* @__PURE__ */ t.jsx("div", { className: c.image, children: i.image ? /* @__PURE__ */ t.jsx("img", { src: i.image }) : /* @__PURE__ */ t.jsx(
-                a,
-                {
-                  name: "image",
-                  width: 16,
-                  height: 16,
-                  fill: "#757575"
-                }
-              ) }),
-              /* @__PURE__ */ t.jsx("span", { className: c.name, children: i.name }),
-              /* @__PURE__ */ t.jsx(a, { name: "arrow-down" })
-            ] }),
-            /* @__PURE__ */ t.jsxs("div", { className: c.buttons, children: [
-              u && /* @__PURE__ */ t.jsx(
-                a,
+            b === "input" && /* @__PURE__ */ t.jsx(
+              S,
+              {
+                onChange: (d) => {
+                  n((j) => [...j].map((g) => g.id === e.id ? {
+                    ...e,
+                    name: d
+                  } : g));
+                },
+                value: e.name,
+                placeholder: v
+              }
+            ),
+            b === "image" && /* @__PURE__ */ t.jsx(Y, {}),
+            /* @__PURE__ */ t.jsxs("div", { className: m.buttons, children: [
+              l && /* @__PURE__ */ t.jsx(
+                p,
                 {
                   name: "sliders",
                   hoverable: !0,
                   width: 20,
                   height: 20,
-                  onClick: (x) => {
-                    E(x, i);
+                  onClick: (d) => {
+                    G(d, e);
                   }
                 }
               ),
               /* @__PURE__ */ t.jsx(
-                a,
+                p,
                 {
                   name: "trash",
                   hoverable: !0,
-                  onClick: () => d((x) => x.filter((B) => B.id !== i.id)),
+                  onClick: () => n((d) => d.filter((j) => j.id !== e.id)),
                   width: 20,
                   height: 20,
                   fill: "#C12A2A"
@@ -309,24 +339,29 @@ const O = "_wrapper_o1bnv_2", F = "_alignmentBlock_o1bnv_8", G = "_title_o1bnv_1
             ] })
           ]
         },
-        i.id
+        e.id
       )),
       /* @__PURE__ */ t.jsxs(
-        L,
+        R,
         {
-          className: c.button,
+          className: m.button,
           size: "s",
-          onClick: () => d((i) => {
-            const x = [...i];
-            return x.push({
-              name: "Product 1",
-              id: z()
-            }), x;
+          onClick: () => n((e) => {
+            const d = [...e];
+            return b === "select" ? d.push({
+              name: L[0] || "",
+              id: P()
+            }) : b === "input" ? d.push({
+              name: "",
+              id: P()
+            }) : d.push({
+              id: P()
+            }), d;
           }),
           children: [
             /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
             /* @__PURE__ */ t.jsx(
-              a,
+              p,
               {
                 name: "plus",
                 width: 16,
@@ -337,13 +372,13 @@ const O = "_wrapper_o1bnv_2", F = "_alignmentBlock_o1bnv_8", G = "_title_o1bnv_1
         }
       )
     ] }),
-    o !== void 0 && /* @__PURE__ */ t.jsxs("div", { className: c.other, children: [
-      /* @__PURE__ */ t.jsx("h5", { className: c.subtitle, children: "Other" }),
+    c !== void 0 && /* @__PURE__ */ t.jsxs("div", { className: m.other, children: [
+      /* @__PURE__ */ t.jsx("h5", { className: m.subtitle, children: "Other" }),
       /* @__PURE__ */ t.jsx(
-        f,
+        C,
         {
-          current: o,
-          onChange: (i) => l == null ? void 0 : l((x) => i),
+          current: c,
+          onChange: (e) => u == null ? void 0 : u((d) => e),
           label: "Product Stats",
           hasBackground: !0,
           paddingless: !1
@@ -351,65 +386,65 @@ const O = "_wrapper_o1bnv_2", F = "_alignmentBlock_o1bnv_8", G = "_title_o1bnv_1
       )
     ] })
   ] });
-}, Bt = "_subtitle_1y5sw_1", $t = "_header_1y5sw_8", Ct = "_text_1y5sw_9", Tt = "_productsBlock_1y5sw_10", Pt = "_buttonsBlock_1y5sw_11", It = "_top_1y5sw_22", At = "_itemsBlock_1y5sw_29", St = "_typeTexts_1y5sw_35", Lt = "_block_1y5sw_41", zt = "_active_1y5sw_52", Rt = "_products_1y5sw_10", Et = "_product_1y5sw_10", Ht = "_button_1y5sw_11", Ot = "_image_1y5sw_80", Ft = "_info_1y5sw_87", Gt = "_name_1y5sw_98", Mt = "_buttons_1y5sw_11", Dt = "_modal_1y5sw_108", Yt = "_other_1y5sw_125", qt = "_options_1y5sw_131", h = {
-  subtitle: Bt,
-  header: $t,
-  text: Ct,
-  productsBlock: Tt,
-  buttonsBlock: Pt,
-  top: It,
-  itemsBlock: At,
-  typeTexts: St,
-  block: Lt,
-  active: zt,
-  products: Rt,
-  product: Et,
-  button: Ht,
-  image: Ot,
-  info: Ft,
-  name: Gt,
-  buttons: Mt,
-  modal: Dt,
-  other: Yt,
-  options: qt
-}, Jt = (r) => {
-  const { activeButton: n, setActiveButton: _, popupPosition: s } = r, [d, o] = b.useState(n.typeText), [l, p] = b.useState(n.destination), [v, u] = b.useState(n.link || "");
+}, 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 || "");
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: h.modal,
-      onClick: (e) => {
-        e.stopPropagation();
+      className: k.modal,
+      onClick: (r) => {
+        r.stopPropagation();
       },
       style: {
         top: `${s.top}px`,
         left: `${s.left}px`
       },
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: h.top, children: [
-          /* @__PURE__ */ t.jsx("h3", { children: n.type }),
+        /* @__PURE__ */ t.jsxs("div", { className: k.top, children: [
+          /* @__PURE__ */ t.jsx("h3", { children: i.type }),
           /* @__PURE__ */ t.jsx(
-            a,
+            p,
             {
               name: "x",
               height: 20,
               width: 20,
               hoverable: !0,
-              onClick: () => _(null)
+              onClick: () => a(null)
             }
           )
         ] }),
-        /* @__PURE__ */ t.jsxs("div", { className: h.options, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: k.options, children: [
           /* @__PURE__ */ t.jsx(
             I,
             {
               label: "Destination",
-              onChange: (e) => p(e),
+              onChange: (r) => h(r),
               options: ["Go to Page", "Open Link"],
-              value: l
+              value: u
             }
           ),
-          l === "Go to Page" ? /* @__PURE__ */ t.jsx(
+          u === "Go to Page" ? /* @__PURE__ */ t.jsx(
             I,
             {
               label: "Go to",
@@ -419,23 +454,23 @@ const O = "_wrapper_o1bnv_2", F = "_alignmentBlock_o1bnv_8", G = "_title_o1bnv_1
               value: "Homepage"
             }
           ) : /* @__PURE__ */ t.jsx(
-            A,
+            S,
             {
-              onChange: (e) => u(e),
-              value: v,
+              onChange: (r) => l(r),
+              value: o,
               placeholder: "https://",
               label: "Link"
             }
           ),
           /* @__PURE__ */ t.jsx(
-            f,
+            C,
             {
               current: !1,
               label: "Open in new tab"
             }
           ),
           /* @__PURE__ */ t.jsx(
-            S,
+            O,
             {
               onChange: () => {
               },
@@ -445,146 +480,186 @@ const O = "_wrapper_o1bnv_2", F = "_alignmentBlock_o1bnv_8", G = "_title_o1bnv_1
             }
           ),
           /* @__PURE__ */ t.jsx(
-            R,
+            E,
             {
-              typeText: d,
-              setTypeText: o
+              typeText: n,
+              setTypeText: c
             }
           )
         ] })
       ]
     }
   );
-}, Xt = (r) => {
-  const { isActiveButtons: n, setIsActiveButtons: _, buttons: s, setButtons: d } = r, [o, l] = b.useState(null), [p, v] = b.useState({
+}, 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({
     top: 0,
     left: 0
   });
-  b.useEffect(() => {
-    const e = () => {
-      l(null);
+  y.useEffect(() => {
+    const o = () => {
+      n(null);
     };
-    return document.body.addEventListener("click", e), l(null), () => {
-      l(null), document.body.removeEventListener("click", e);
+    return document.body.addEventListener("click", o), n(null), () => {
+      n(null), document.body.removeEventListener("click", o);
     };
   }, []);
-  const u = (e, m) => {
-    e.stopPropagation();
-    const y = e.target.getBoundingClientRect(), j = 490, N = window.innerHeight;
-    let k = y.top + window.scrollY;
-    k + j > N && (k = N - j - 20), v({
-      top: k,
-      left: y.left - 30
-    }), l(m);
+  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);
   };
-  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" }),
-      /* @__PURE__ */ t.jsx(
-        f,
-        {
-          current: n,
-          onChange: (e) => _((m) => e)
-        }
-      )
-    ] }),
-    /* @__PURE__ */ t.jsxs("div", { className: h.products, children: [
-      /* @__PURE__ */ t.jsx("h5", { className: h.subtitle, children: "Button Type" }),
-      s.map((e) => /* @__PURE__ */ t.jsxs(
-        "div",
-        {
-          className: h.product,
-          children: [
-            /* @__PURE__ */ t.jsxs("div", { className: h.info, children: [
-              /* @__PURE__ */ t.jsx("span", { className: h.name, children: e.type }),
-              /* @__PURE__ */ t.jsx(a, { name: "arrow-down" })
-            ] }),
-            /* @__PURE__ */ t.jsxs("div", { className: h.buttons, children: [
-              /* @__PURE__ */ t.jsx(
-                a,
-                {
-                  name: "sliders",
-                  hoverable: !0,
-                  width: 20,
-                  height: 20,
-                  onClick: (m) => {
-                    u(m, e);
-                  }
-                }
-              ),
-              /* @__PURE__ */ t.jsx(
-                a,
-                {
-                  name: "trash",
-                  hoverable: !0,
-                  onClick: () => d((m) => m.filter((y) => y.id !== e.id)),
-                  width: 20,
-                  height: 20,
-                  fill: "#C12A2A"
+  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(
+      "div",
+      {
+        className: B.product,
+        children: [
+          /* @__PURE__ */ t.jsx(
+            I,
+            {
+              onChange: (l) => {
+                a((r) => [...r].map((v) => v.id === o.id ? {
+                  ...o,
+                  type: l
+                } : v));
+              },
+              value: o.type,
+              options: ["Primary", "Secondary"]
+            }
+          ),
+          /* @__PURE__ */ t.jsxs("div", { className: B.buttons, children: [
+            /* @__PURE__ */ t.jsx(
+              p,
+              {
+                name: "sliders",
+                hoverable: !0,
+                width: 20,
+                height: 20,
+                onClick: (l) => {
+                  h(l, o);
                 }
-              )
-            ] })
-          ]
-        },
-        e.id
-      )),
-      o && /* @__PURE__ */ t.jsx(
-        Jt,
-        {
-          activeButton: o,
-          setActiveButton: l,
-          popupPosition: p
-        }
-      ),
-      /* @__PURE__ */ t.jsxs(
-        L,
-        {
-          className: h.button,
-          size: "s",
-          onClick: () => d((e) => {
-            const m = [...e];
-            return m.push({
-              type: "Primary",
-              id: z(),
-              typeText: "bold",
-              destination: "Go to Page"
-            }), m;
-          }),
-          children: [
-            /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
+              }
+            ),
             /* @__PURE__ */ t.jsx(
-              a,
+              p,
               {
-                name: "plus",
-                width: 16,
-                height: 16
+                name: "trash",
+                hoverable: !0,
+                onClick: () => a((l) => l.filter((r) => r.id !== o.id)),
+                width: 20,
+                height: 20,
+                fill: "#C12A2A"
               }
             )
-          ]
+          ] })
+        ]
+      },
+      o.id
+    )),
+    s && /* @__PURE__ */ t.jsx(
+      Xt,
+      {
+        activeButton: s,
+        setActiveButton: n,
+        popupPosition: c
+      }
+    ),
+    /* @__PURE__ */ t.jsxs(
+      R,
+      {
+        className: B.button,
+        size: "s",
+        onClick: () => a((o) => {
+          const l = [...o];
+          return l.push({
+            type: "Primary",
+            id: P(),
+            typeText: "bold",
+            destination: "Go to Page"
+          }), l;
+        }),
+        children: [
+          /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
+          /* @__PURE__ */ t.jsx(
+            p,
+            {
+              name: "plus",
+              width: 16,
+              height: 16
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}, $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" }),
+      /* @__PURE__ */ t.jsx(
+        C,
+        {
+          current: i,
+          onChange: (c) => a((u) => c)
         }
       )
-    ] })
+    ] }),
+    /* @__PURE__ */ t.jsx(
+      ye,
+      {
+        buttons: s,
+        setButtons: n
+      }
+    )
   ] }) });
 };
 export {
-  L as Button,
-  Xt as ButtonsSettings,
-  ee as Checkbox,
-  se as ChooseImage,
-  ne as ChooseImageModal,
-  oe as ColorPicker,
-  a as Icon,
-  A as Input,
-  Wt as ItemsSettings,
-  Ut as LayoutSettings,
-  ie as Modal,
-  le as Picker,
-  ce as Radio,
+  R as Button,
+  ye as ButtonTypeSettings,
+  $e as ButtonsSettings,
+  Ne 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,
-  ae as Submodal,
-  f as Switch,
-  Vt as TextSettings,
-  S as Textarea,
-  de as Tip,
-  R as TypeTexts
+  Le as Submodal,
+  C as Switch,
+  fe as TextSettings,
+  O as Textarea,
+  ze as Tip,
+  E as TypeTexts
 };