@billgangcom/theme-lib 1.4.0 → 1.5.0

package/dist/ui.es.js

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