@billgangcom/theme-lib 1.6.0 → 1.7.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 p, a as A, c as Y, S as N, T as O, b as I, C as J, B as E, v as P } from "./index-DxdTFgwx.js";
+import { g as Se, h as Ae, e as Le, M as ze, P as Re, R as Oe, d as Ee, f as He } from "./index-DxdTFgwx.js";
+import k from "react";
+const K = "_wrapper_1g82c_2", Q = "_alignmentBlock_1g82c_8", U = "_title_1g82c_15", V = "_subtitle_1g82c_22", W = "_alignmentContent_1g82c_29", X = "_alignments_1g82c_35", Z = "_alignment_1g82c_8", tt = "_circle_1g82c_54", et = "_paddings_1g82c_61", st = "_padding_1g82c_61", nt = "_input_1g82c_79", x = {
+  wrapper: K,
+  alignmentBlock: Q,
+  title: U,
+  subtitle: V,
+  alignmentContent: W,
+  alignments: X,
+  alignment: Z,
+  circle: tt,
+  paddings: et,
+  padding: st,
+  input: nt
+}, ot = [
   "topLeft",
   "top",
   "topRight",
@@ -23,82 +23,103 @@ 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 } = _;
+], ct = ["left", "top", "right", "bottom"], Be = (r) => {
+  const { alignment: e, padding: i, setPadding: s, setAlignment: n } = r;
+  function u() {
+    switch (e) {
+      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: 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(
+        /* @__PURE__ */ t.jsx("div", { className: x.alignments, children: ot.map((l) => /* @__PURE__ */ t.jsxs(
           "div",
           {
             onClick: () => {
-              n((u) => c);
+              n((m) => l);
             },
             className: x.alignment,
             children: [
-              c !== i && /* @__PURE__ */ t.jsx("div", { className: x.circle }),
-              c === i && /* @__PURE__ */ t.jsx(
+              l !== e && /* @__PURE__ */ t.jsx("div", { className: x.circle }),
+              l === e && /* @__PURE__ */ t.jsx(
                 p,
                 {
-                  name: "text-align-left",
-                  fill: "#FF3F19"
+                  name: `text-align-${u()}`,
+                  fill: "#FF3F19",
+                  width: 22,
+                  height: 22
                 }
               )
             ]
           },
-          c
+          l
         )) }),
-        /* @__PURE__ */ t.jsx("div", { className: x.paddings, children: nt.map((c) => /* @__PURE__ */ t.jsxs("label", { className: x.padding, children: [
+        /* @__PURE__ */ t.jsx("div", { className: x.paddings, children: ct.map((l) => /* @__PURE__ */ t.jsxs("label", { className: x.padding, children: [
           /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
             p,
             {
-              name: `align-${c}`,
+              name: `align-${l}`,
               width: 20,
               height: 20
             }
           ) }),
           /* @__PURE__ */ t.jsx(
-            S,
+            A,
             {
               type: "text",
-              value: String(a[c]),
-              onChange: (u) => s((h) => ({
-                ...h,
-                [c]: Number(u)
+              value: String(i[l]),
+              onChange: (m) => s((o) => ({
+                ...o,
+                [l]: Number(m)
               })),
-              paddingless: !0
+              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(
+}, it = "_subtitle_2zbxx_1", lt = "_header_2zbxx_8", at = "_text_2zbxx_9", rt = "_top_2zbxx_16", dt = "_itemsBlock_2zbxx_23", w = {
+  subtitle: it,
+  header: lt,
+  text: at,
+  top: rt,
+  itemsBlock: dt
+}, _t = "_typeTexts_3zlec_1", ut = "_block_3zlec_7", pt = "_active_3zlec_18", S = {
+  typeTexts: _t,
+  block: ut,
+  active: pt
+}, ht = ["bold", "italic", "underline", "strike-through", "code"], H = (r) => {
+  const { typeText: e, setTypeText: i } = r;
+  return /* @__PURE__ */ t.jsx("div", { className: S.typeTexts, children: ht.map((s) => /* @__PURE__ */ t.jsx(
     "div",
     {
-      className: D(A.block, {
-        [A.active]: i === s
+      className: Y(S.block, {
+        [S.active]: e === s
       }),
-      onClick: () => a((n) => s),
+      onClick: () => i((n) => s),
       children: /* @__PURE__ */ t.jsx(
         p,
         {
           name: `text-${s}`,
-          fill: i === s ? "#252525" : "#757575",
+          fill: e === s ? "#252525" : "#757575",
           width: 20,
           height: 20
         }
@@ -106,72 +127,71 @@ const q = "_wrapper_o1bnv_2", J = "_alignmentBlock_o1bnv_8", K = "_title_o1bnv_1
     },
     String(s)
   )) });
-}, fe = (_) => {
+}, Ne = (r) => {
   const {
-    typeText: i,
-    isActiveText: a,
+    typeText: e,
+    isActiveText: i,
     setIsActiveText: s,
     text: n,
-    setText: c,
-    setTypeText: u,
-    title: h,
+    setText: u,
+    setTypeText: l,
+    title: m,
     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 }),
+  } = 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: m }),
       /* @__PURE__ */ t.jsx(
-        C,
+        N,
         {
-          current: a,
-          onChange: (l) => s((r) => l)
+          current: i,
+          onChange: (a) => s((d) => a)
         }
       )
     ] }),
-    /* @__PURE__ */ t.jsxs("div", { className: $.itemsBlock, children: [
-      /* @__PURE__ */ t.jsx("h5", { className: $.subtitle, children: o }),
+    /* @__PURE__ */ t.jsxs("div", { className: w.itemsBlock, children: [
+      /* @__PURE__ */ t.jsx("h5", { className: w.subtitle, children: o }),
       /* @__PURE__ */ t.jsx(
         O,
         {
-          onChange: (l) => c((r) => l),
+          onChange: (a) => u((d) => a),
           value: n,
           maxLength: 150
         }
       ),
       /* @__PURE__ */ t.jsx(
-        E,
+        H,
         {
-          typeText: i,
-          setTypeText: u
+          typeText: e,
+          setTypeText: l
         }
       )
     ] })
   ] });
-}, 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,
+}, mt = "_subtitle_fsotk_1", xt = "_header_fsotk_8", gt = "_text_fsotk_9", bt = "_productsBlock_fsotk_10", kt = "_top_fsotk_22", ft = "_itemsBlock_fsotk_29", jt = "_typeTexts_fsotk_35", vt = "_block_fsotk_41", yt = "_active_fsotk_52", $t = "_products_fsotk_10", wt = "_product_fsotk_10", Bt = "_button_fsotk_70", Nt = "_image_fsotk_80", Ct = "_info_fsotk_87", Tt = "_name_fsotk_98", Pt = "_buttons_fsotk_102", It = "_modal_fsotk_108", g = {
+  subtitle: mt,
+  header: xt,
+  text: gt,
+  productsBlock: bt,
+  top: kt,
+  itemsBlock: ft,
+  typeTexts: jt,
   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 } = _;
+  active: yt,
+  products: $t,
+  product: wt,
+  button: Bt,
+  image: Nt,
+  info: Ct,
+  name: Tt,
+  buttons: Pt,
+  modal: It
+}, St = (r) => {
+  const { activeItem: e, setActiveItem: i, popupPosition: s } = r;
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: m.modal,
+      className: g.modal,
       onClick: (n) => {
         n.stopPropagation();
       },
@@ -180,8 +200,8 @@ const q = "_wrapper_o1bnv_2", J = "_alignmentBlock_o1bnv_8", K = "_title_o1bnv_1
         left: `${s.left}px`
       },
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: m.top, children: [
-          /* @__PURE__ */ t.jsx("h3", { children: i.name }),
+        /* @__PURE__ */ t.jsxs("div", { className: g.top, children: [
+          /* @__PURE__ */ t.jsx("h3", { children: e.name }),
           /* @__PURE__ */ t.jsx(
             p,
             {
@@ -189,7 +209,7 @@ const q = "_wrapper_o1bnv_2", J = "_alignmentBlock_o1bnv_8", K = "_title_o1bnv_1
               height: 20,
               width: 20,
               hoverable: !0,
-              onClick: () => a(null)
+              onClick: () => i(null)
             }
           )
         ] }),
@@ -200,45 +220,64 @@ const q = "_wrapper_o1bnv_2", J = "_alignmentBlock_o1bnv_8", K = "_title_o1bnv_1
       ]
     }
   );
-}, we = (_) => {
+}, At = "_other_jqtww_1", Lt = "_subtitle_jqtww_7", R = {
+  other: At,
+  subtitle: Lt
+}, zt = (r) => {
+  const { isItem: e, setIsItem: i, title: s = "Other", label: n } = r;
+  return /* @__PURE__ */ t.jsxs("div", { className: R.other, children: [
+    /* @__PURE__ */ t.jsx("h5", { className: R.subtitle, children: s }),
+    /* @__PURE__ */ t.jsx(
+      N,
+      {
+        current: e,
+        onChange: (u) => i((l) => u),
+        label: n,
+        hasBackground: !0,
+        paddingless: !1
+      }
+    )
+  ] });
+}, Ce = (r) => {
   const {
-    isActiveItems: i,
-    setIsActiveItems: a,
+    isActiveItems: e,
+    setIsActiveItems: i,
     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 = "",
+    other: u,
+    title: l,
+    subtitle: m,
+    editable: o = !0,
+    draggable: a = !1,
+    withImage: d = !1,
+    deletable: v = !0,
+    addable: y = !0,
+    itemsType: h,
+    itemsPlaceholder: F = "",
     itemsOptions: L
-  } = _, [z, w] = y.useState(null), [H, F] = y.useState({
+  } = r, [z, $] = k.useState(null), [G, M] = k.useState({
     top: 0,
     left: 0
   });
-  y.useEffect(() => {
-    const e = () => {
-      w(null);
+  k.useEffect(() => {
+    const c = () => {
+      $(null);
     };
-    return document.body.addEventListener("click", e), w(null), () => {
-      w(null), document.body.removeEventListener("click", e);
+    return document.body.addEventListener("click", c), $(null), () => {
+      $(null), document.body.removeEventListener("click", c);
     };
   }, []);
-  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);
+  const q = (c, _) => {
+    c.stopPropagation();
+    const f = c.target.getBoundingClientRect(), C = 100, T = window.innerHeight;
+    let b = f.top + window.scrollY;
+    b + C > T && (b = T - C - 20), M({
+      top: b - 80,
+      left: f.left - 30
+    }), $(_);
   };
-  function M(e) {
-    if (f && !e)
+  function D(c) {
+    if (d && !c)
       return /* @__PURE__ */ t.jsx(
         p,
         {
@@ -249,33 +288,33 @@ 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: g.productsBlock, children: [
+    /* @__PURE__ */ t.jsxs("div", { className: g.top, children: [
+      l && /* @__PURE__ */ t.jsx("h3", { className: g.title, children: l }),
+      e && /* @__PURE__ */ t.jsx(
+        N,
         {
-          current: i,
-          onChange: (e) => a((d) => e)
+          current: e,
+          onChange: (c) => i == null ? void 0 : i((_) => c)
         }
       )
     ] }),
-    z && l && /* @__PURE__ */ t.jsx(
-      It,
+    z && o && /* @__PURE__ */ t.jsx(
+      St,
       {
         activeItem: z,
-        setActiveItem: w,
-        popupPosition: H
+        setActiveItem: $,
+        popupPosition: G
       }
     ),
-    /* @__PURE__ */ t.jsxs("div", { className: m.products, children: [
-      o && /* @__PURE__ */ t.jsx("h5", { className: m.subtitle, children: o }),
-      s.map((e) => /* @__PURE__ */ t.jsxs(
+    /* @__PURE__ */ t.jsxs("div", { className: g.products, children: [
+      m && /* @__PURE__ */ t.jsx("h5", { className: g.subtitle, children: m }),
+      s.map((c) => /* @__PURE__ */ t.jsxs(
         "div",
         {
-          className: m.product,
+          className: g.product,
           children: [
-            r && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
+            a && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
               p,
               {
                 name: "drag",
@@ -284,53 +323,53 @@ const q = "_wrapper_o1bnv_2", J = "_alignmentBlock_o1bnv_8", K = "_title_o1bnv_1
                 height: 20
               }
             ) }),
-            b === "select" && /* @__PURE__ */ t.jsx(
+            h === "select" && /* @__PURE__ */ t.jsx(
               I,
               {
-                onChange: (d) => {
-                  n((j) => [...j].map((g) => g.id === e.id ? {
-                    ...e,
-                    name: d
-                  } : g));
+                onChange: (_) => {
+                  n((f) => [...f].map((b) => b.id === c.id ? {
+                    ...c,
+                    name: _
+                  } : b));
                 },
-                value: e.name,
+                value: c.name,
                 options: L,
-                leftAddon: M(e.image)
+                leftAddon: D(c.image)
               }
             ),
-            b === "input" && /* @__PURE__ */ t.jsx(
-              S,
+            h === "input" && /* @__PURE__ */ t.jsx(
+              A,
               {
-                onChange: (d) => {
-                  n((j) => [...j].map((g) => g.id === e.id ? {
-                    ...e,
-                    name: d
-                  } : g));
+                onChange: (_) => {
+                  n((f) => [...f].map((b) => b.id === c.id ? {
+                    ...c,
+                    name: _
+                  } : b));
                 },
-                value: e.name,
-                placeholder: v
+                value: c.name,
+                placeholder: F
               }
             ),
-            b === "image" && /* @__PURE__ */ t.jsx(Y, {}),
-            /* @__PURE__ */ t.jsxs("div", { className: m.buttons, children: [
-              l && /* @__PURE__ */ t.jsx(
+            h === "image" && /* @__PURE__ */ t.jsx(J, {}),
+            /* @__PURE__ */ t.jsxs("div", { className: g.buttons, children: [
+              o && /* @__PURE__ */ t.jsx(
                 p,
                 {
                   name: "sliders",
                   hoverable: !0,
                   width: 20,
                   height: 20,
-                  onClick: (d) => {
-                    G(d, e);
+                  onClick: (_) => {
+                    q(_, c);
                   }
                 }
               ),
-              /* @__PURE__ */ t.jsx(
+              v && /* @__PURE__ */ t.jsx(
                 p,
                 {
                   name: "trash",
                   hoverable: !0,
-                  onClick: () => n((d) => d.filter((j) => j.id !== e.id)),
+                  onClick: () => n((_) => _.filter((f) => f.id !== c.id)),
                   width: 20,
                   height: 20,
                   fill: "#C12A2A"
@@ -339,24 +378,24 @@ const q = "_wrapper_o1bnv_2", J = "_alignmentBlock_o1bnv_8", K = "_title_o1bnv_1
             ] })
           ]
         },
-        e.id
+        c.id
       )),
-      /* @__PURE__ */ t.jsxs(
-        R,
+      y && /* @__PURE__ */ t.jsxs(
+        E,
         {
-          className: m.button,
+          className: g.button,
           size: "s",
-          onClick: () => n((e) => {
-            const d = [...e];
-            return b === "select" ? d.push({
+          onClick: () => n((c) => {
+            const _ = [...c];
+            return h === "select" ? _.push({
               name: L[0] || "",
               id: P()
-            }) : b === "input" ? d.push({
+            }) : h === "input" ? _.push({
               name: "",
               id: P()
-            }) : d.push({
+            }) : _.push({
               id: P()
-            }), d;
+            }), _;
           }),
           children: [
             /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
@@ -372,57 +411,45 @@ 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
-        }
-      )
-    ] })
+    u !== void 0 && /* @__PURE__ */ t.jsx(zt, { ...u })
   ] });
-}, 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 || "");
+}, Rt = "_subtitle_41klp_1", Ot = "_header_41klp_8", Et = "_text_41klp_9", Ht = "_productsBlock_41klp_10", Ft = "_buttonsBlock_41klp_11", Gt = "_top_41klp_21", Mt = "_itemsBlock_41klp_28", qt = "_typeTexts_41klp_34", Dt = "_block_41klp_40", Yt = "_active_41klp_51", Jt = "_products_41klp_10", Kt = "_product_41klp_10", Qt = "_button_41klp_11", Ut = "_image_41klp_79", Vt = "_info_41klp_86", Wt = "_name_41klp_97", Xt = "_buttons_41klp_11", Zt = "_modal_41klp_107", te = "_other_41klp_124", ee = "_options_41klp_130", j = {
+  subtitle: Rt,
+  header: Ot,
+  text: Et,
+  productsBlock: Ht,
+  buttonsBlock: Ft,
+  top: Gt,
+  itemsBlock: Mt,
+  typeTexts: qt,
+  block: Dt,
+  active: Yt,
+  products: Jt,
+  product: Kt,
+  button: Qt,
+  image: Ut,
+  info: Vt,
+  name: Wt,
+  buttons: Xt,
+  modal: Zt,
+  other: te,
+  options: ee
+}, se = (r) => {
+  const { activeButton: e, setActiveButton: i, popupPosition: s } = r, [n, u] = k.useState(e.typeText), [l, m] = k.useState(e.destination), [o, a] = k.useState(e.link || "");
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: k.modal,
-      onClick: (r) => {
-        r.stopPropagation();
+      className: j.modal,
+      onClick: (d) => {
+        d.stopPropagation();
       },
       style: {
         top: `${s.top}px`,
         left: `${s.left}px`
       },
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: k.top, children: [
-          /* @__PURE__ */ t.jsx("h3", { children: i.type }),
+        /* @__PURE__ */ t.jsxs("div", { className: j.top, children: [
+          /* @__PURE__ */ t.jsx("h3", { children: e.type }),
           /* @__PURE__ */ t.jsx(
             p,
             {
@@ -430,21 +457,21 @@ const q = "_wrapper_o1bnv_2", J = "_alignmentBlock_o1bnv_8", K = "_title_o1bnv_1
               height: 20,
               width: 20,
               hoverable: !0,
-              onClick: () => a(null)
+              onClick: () => i(null)
             }
           )
         ] }),
-        /* @__PURE__ */ t.jsxs("div", { className: k.options, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: j.options, children: [
           /* @__PURE__ */ t.jsx(
             I,
             {
               label: "Destination",
-              onChange: (r) => h(r),
+              onChange: (d) => m(d),
               options: ["Go to Page", "Open Link"],
-              value: u
+              value: l
             }
           ),
-          u === "Go to Page" ? /* @__PURE__ */ t.jsx(
+          l === "Go to Page" ? /* @__PURE__ */ t.jsx(
             I,
             {
               label: "Go to",
@@ -454,16 +481,16 @@ const q = "_wrapper_o1bnv_2", J = "_alignmentBlock_o1bnv_8", K = "_title_o1bnv_1
               value: "Homepage"
             }
           ) : /* @__PURE__ */ t.jsx(
-            S,
+            A,
             {
-              onChange: (r) => l(r),
+              onChange: (d) => a(d),
               value: o,
               placeholder: "https://",
               label: "Link"
             }
           ),
           /* @__PURE__ */ t.jsx(
-            C,
+            N,
             {
               current: !1,
               label: "Open in new tab"
@@ -480,43 +507,43 @@ const q = "_wrapper_o1bnv_2", J = "_alignmentBlock_o1bnv_8", K = "_title_o1bnv_1
             }
           ),
           /* @__PURE__ */ t.jsx(
-            E,
+            H,
             {
               typeText: n,
-              setTypeText: c
+              setTypeText: u
             }
           )
         ] })
       ]
     }
   );
-}, 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({
+}, ne = "_subtitle_1y5sw_1", oe = "_header_1y5sw_8", ce = "_text_1y5sw_9", ie = "_productsBlock_1y5sw_10", le = "_buttonsBlock_1y5sw_11", ae = "_top_1y5sw_22", re = "_itemsBlock_1y5sw_29", de = "_typeTexts_1y5sw_35", _e = "_block_1y5sw_41", ue = "_active_1y5sw_52", pe = "_products_1y5sw_10", he = "_product_1y5sw_10", me = "_button_1y5sw_11", xe = "_image_1y5sw_80", ge = "_info_1y5sw_87", be = "_name_1y5sw_98", ke = "_buttons_1y5sw_11", fe = "_modal_1y5sw_108", je = "_other_1y5sw_125", ve = "_options_1y5sw_131", B = {
+  subtitle: ne,
+  header: oe,
+  text: ce,
+  productsBlock: ie,
+  buttonsBlock: le,
+  top: ae,
+  itemsBlock: re,
+  typeTexts: de,
+  block: _e,
+  active: ue,
+  products: pe,
+  product: he,
+  button: me,
+  image: xe,
+  info: ge,
+  name: be,
+  buttons: ke,
+  modal: fe,
+  other: je,
+  options: ve
+}, ye = (r) => {
+  const { buttons: e, setButtons: i } = r, [s, n] = k.useState(null), [u, l] = k.useState({
     top: 0,
     left: 0
   });
-  y.useEffect(() => {
+  k.useEffect(() => {
     const o = () => {
       n(null);
     };
@@ -524,18 +551,18 @@ const q = "_wrapper_o1bnv_2", J = "_alignmentBlock_o1bnv_8", K = "_title_o1bnv_1
       n(null), document.body.removeEventListener("click", o);
     };
   }, []);
-  const h = (o, l) => {
+  const m = (o, a) => {
     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 d = o.target.getBoundingClientRect(), v = 490, y = window.innerHeight;
+    let h = d.top + window.scrollY;
+    h + v > y && (h = y - v - 20), l({
+      top: h,
+      left: d.left - 30
+    }), n(a);
   };
   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(
+    e.map((o) => /* @__PURE__ */ t.jsxs(
       "div",
       {
         className: B.product,
@@ -543,14 +570,14 @@ const q = "_wrapper_o1bnv_2", J = "_alignmentBlock_o1bnv_8", K = "_title_o1bnv_1
           /* @__PURE__ */ t.jsx(
             I,
             {
-              onChange: (l) => {
-                a((r) => [...r].map((v) => v.id === o.id ? {
+              onChange: (a) => {
+                i((d) => [...d].map((h) => h.id === o.id ? {
                   ...o,
-                  type: l
-                } : v));
+                  type: a
+                } : h));
               },
               value: o.type,
-              options: ["Primary", "Secondary"]
+              options: ["Primary", "Secondary", "Tertiary"]
             }
           ),
           /* @__PURE__ */ t.jsxs("div", { className: B.buttons, children: [
@@ -561,8 +588,8 @@ const q = "_wrapper_o1bnv_2", J = "_alignmentBlock_o1bnv_8", K = "_title_o1bnv_1
                 hoverable: !0,
                 width: 20,
                 height: 20,
-                onClick: (l) => {
-                  h(l, o);
+                onClick: (a) => {
+                  m(a, o);
                 }
               }
             ),
@@ -571,7 +598,7 @@ const q = "_wrapper_o1bnv_2", J = "_alignmentBlock_o1bnv_8", K = "_title_o1bnv_1
               {
                 name: "trash",
                 hoverable: !0,
-                onClick: () => a((l) => l.filter((r) => r.id !== o.id)),
+                onClick: () => i((a) => a.filter((d) => d.id !== o.id)),
                 width: 20,
                 height: 20,
                 fill: "#C12A2A"
@@ -583,26 +610,26 @@ const q = "_wrapper_o1bnv_2", J = "_alignmentBlock_o1bnv_8", K = "_title_o1bnv_1
       o.id
     )),
     s && /* @__PURE__ */ t.jsx(
-      Xt,
+      se,
       {
         activeButton: s,
         setActiveButton: n,
-        popupPosition: c
+        popupPosition: u
       }
     ),
     /* @__PURE__ */ t.jsxs(
-      R,
+      E,
       {
         className: B.button,
         size: "s",
-        onClick: () => a((o) => {
-          const l = [...o];
-          return l.push({
+        onClick: () => i((o) => {
+          const a = [...o];
+          return a.push({
             type: "Primary",
             id: P(),
             typeText: "bold",
             destination: "Go to Page"
-          }), l;
+          }), a;
         }),
         children: [
           /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
@@ -618,16 +645,16 @@ 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" }),
+}, Te = (r) => {
+  const { isActiveButtons: e, setIsActiveButtons: i, buttons: s, setButtons: n } = r;
+  return /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsxs("div", { className: j.buttonsBlock, children: [
+    /* @__PURE__ */ t.jsxs("div", { className: j.top, children: [
+      /* @__PURE__ */ t.jsx("h3", { className: j.title, children: "Buttons" }),
       /* @__PURE__ */ t.jsx(
-        C,
+        N,
         {
-          current: i,
-          onChange: (c) => a((u) => c)
+          current: e,
+          onChange: (u) => i((l) => u)
         }
       )
     ] }),
@@ -641,25 +668,25 @@ const q = "_wrapper_o1bnv_2", J = "_alignmentBlock_o1bnv_8", K = "_title_o1bnv_1
   ] }) });
 };
 export {
-  R as Button,
+  E as Button,
   ye as ButtonTypeSettings,
-  $e as ButtonsSettings,
-  Ne as Checkbox,
-  Y as ChooseImage,
-  Te as ChooseImageModal,
-  Pe as ColorPicker,
+  Te as ButtonsSettings,
+  Se as Checkbox,
+  J as ChooseImage,
+  Ae as ChooseImageModal,
+  Le as ColorPicker,
   p as Icon,
-  S as Input,
-  we as ItemsSettings,
-  ke as LayoutSettings,
-  Ie as Modal,
-  Ae as Picker,
-  Se as Radio,
+  A as Input,
+  Ce as ItemsSettings,
+  Be as LayoutSettings,
+  ze as Modal,
+  Re as Picker,
+  Oe as Radio,
   I as Select,
-  Le as Submodal,
-  C as Switch,
-  fe as TextSettings,
+  Ee as Submodal,
+  N as Switch,
+  Ne as TextSettings,
   O as Textarea,
-  ze as Tip,
-  E as TypeTexts
+  He as Tip,
+  H as TypeTexts
 };