@grapesjs/studio-sdk-plugins 1.0.33-rc.1 → 1.0.33

package/dist/flexComponent/index.es.js

@@ -1,8 +1,8 @@
-const pe = "app.grapesjs.com", de = "app-stage.grapesjs.com", Se = "app2.grapesjs.com", ye = "app-stage2.grapesjs.com", se = [
-  pe,
-  Se,
-  de,
-  ye,
+const pt = "app.grapesjs.com", dt = "app-stage.grapesjs.com", St = "app2.grapesjs.com", yt = "app-stage2.grapesjs.com", st = [
+  pt,
+  St,
+  dt,
+  yt,
   "localhost",
   "127.0.0.1",
   ".local-credentialless.webcontainer.io",
@@ -11,114 +11,119 @@ const pe = "app.grapesjs.com", de = "app-stage.grapesjs.com", Se = "app2.grapesj
   // For stackblitz.com demos
   "-sandpack.codesandbox.io"
   // For Sandpack demos
-], be = "license:check:start", Ce = "license:check:end", Pe = () => typeof window < "u", ze = ({ isDev: n, isStage: e }) => `${n ? "" : `https://${e ? de : pe}`}/api`, xe = () => {
-  const n = Pe() && window.location.hostname;
-  return !!n && (se.includes(n) || se.some((e) => n.endsWith(e)));
+], bt = "license:check:start", Pt = "license:check:end", zt = () => typeof window < "u", Ct = ({
+  isDev: n,
+  isStage: t,
+  isPlatform: e
+}) => `${n ? "" : `https://${t ? dt : pt}`}/${e ? "platform-api" : "api"}`, xt = () => {
+  const n = zt() && window.location.hostname;
+  return !!n && (st.includes(n) || st.some((t) => n.endsWith(t)));
 };
-function we(n) {
+function wt(n) {
   return typeof n == "function";
 }
-async function Ie({
+async function It({
   path: n,
-  baseApiUrl: e,
-  method: t = "GET",
+  baseApiUrl: t,
+  method: e = "GET",
   headers: s = {},
   params: i,
   body: a
 }) {
-  const l = `${e || ze({ isDev: !1, isStage: !1 })}${n}`, c = {
-    method: t,
+  const c = `${t || Ct({ isDev: !1, isStage: !1 })}${n}`, p = {
+    method: e,
     headers: {
       "Content-Type": "application/json",
       ...s
     }
   };
-  a && (c.body = JSON.stringify(a));
-  const g = i ? new URLSearchParams(i).toString() : "", p = g ? `?${g}` : "", u = await fetch(`${l}${p}`, c);
-  if (!u.ok)
-    throw new Error(`HTTP error! status: ${u.status}`);
-  return u.json();
+  a && (p.body = JSON.stringify(a));
+  const u = i ? new URLSearchParams(i).toString() : "", f = u ? `?${u}` : "", r = await fetch(`${c}${f}`, p);
+  if (!r.ok)
+    throw new Error(`HTTP error! status: ${r.status}`);
+  return r.json();
 }
-var $ = /* @__PURE__ */ ((n) => (n.free = "free", n.startup = "startup", n.business = "business", n.enterprise = "enterprise", n))($ || {}), ue = /* @__PURE__ */ ((n) => (n.web = "web", n.email = "email", n.document = "document", n.react = "react", n))(ue || {});
-const ie = {
-  [$.free]: 0,
-  [$.startup]: 10,
-  [$.business]: 20,
-  [$.enterprise]: 30
+var A = /* @__PURE__ */ ((n) => (n.free = "free", n.startup = "startup", n.business = "business", n.enterprise = "enterprise", n))(A || {}), ut = /* @__PURE__ */ ((n) => (n.web = "web", n.email = "email", n.document = "document", n.react = "react", n))(ut || {});
+const it = {
+  [A.free]: 0,
+  [A.startup]: 10,
+  [A.business]: 20,
+  [A.enterprise]: 30
 };
-function ve(n) {
-  const e = n;
-  return e.init = (t) => (s) => n(s, t), e;
+function vt(n) {
+  const t = n;
+  return t.init = (e) => (s) => n(s, e), t;
 }
-const Re = (n) => /* @__PURE__ */ ve(n);
-async function Ge({
+const Gt = (n) => /* @__PURE__ */ vt(n);
+async function Et({
   editor: n,
-  plan: e,
-  pluginName: t,
+  plan: t,
+  pluginName: e,
   licenseKey: s,
-  cleanup: i
+  onLicenseCheckResponse: i,
+  cleanup: a
 }) {
-  let a = "", o = !1;
-  const l = xe(), c = (p) => {
-    console.warn("Cleanup plugin:", t, "Reason:", p), i();
-  }, g = (p = {}) => {
-    var y;
-    const { error: u, sdkLicense: f } = p, I = (y = p.plan) == null ? void 0 : y.category;
-    if (!(f || p.license) || u)
-      c(u || "Invalid license");
-    else if (I) {
-      const v = ie[e], R = ie[I];
-      v > R && c({ pluginRequiredPlan: e, licensePlan: I });
+  let o = "", c = !1;
+  const p = xt(), u = (r) => {
+    console.warn("Cleanup plugin:", e, "Reason:", r), a();
+  }, f = (r = {}) => {
+    var x;
+    const { error: g, sdkLicense: E } = r, S = (x = r.plan) == null ? void 0 : x.category;
+    if (!(E || r.license) || g)
+      u(g || "Invalid license");
+    else if (S) {
+      const v = it[t], b = it[S];
+      v > b && u({ pluginRequiredPlan: t, licensePlan: S });
     }
   };
-  n.on(be, (p) => {
-    a = p == null ? void 0 : p.baseApiUrl, o = !0;
-  }), n.on(Ce, (p) => {
-    g(p);
+  n.on(bt, (r) => {
+    o = r == null ? void 0 : r.baseApiUrl, c = !0;
+  }), n.on(Pt, (r) => {
+    i == null || i(r), f(r);
   }), setTimeout(async () => {
-    if (!o) {
-      if (l) return;
+    if (!c) {
+      if (p) return;
       if (s) {
-        const p = await Ee({ licenseKey: s, pluginName: t, baseApiUrl: a });
-        p && g(p);
+        const r = await Rt({ licenseKey: s, pluginName: e, baseApiUrl: o });
+        i == null || i(r), r && f(r);
       } else
-        c("The `licenseKey` option not provided");
+        u("The `licenseKey` option not provided");
     }
   }, 2e3);
 }
-async function Ee(n) {
-  const { licenseKey: e, pluginName: t, baseApiUrl: s } = n;
+async function Rt(n) {
+  const { licenseKey: t, pluginName: e, baseApiUrl: s } = n;
   try {
-    return (await Ie({
+    return (await It({
       baseApiUrl: s,
-      path: `/sdk/${e || "na"}`,
+      path: `/sdk/${t || "na"}`,
       method: "POST",
       params: {
         d: window.location.hostname,
-        pn: t
+        pn: e
       }
     })).result || {};
   } catch (i) {
     return console.error("Error during SDK license check:", i), !1;
   }
 }
-const he = (n) => (e) => {
-  var t;
-  return ((t = e.getAttribute) == null ? void 0 : t.call(e, te)) === n;
-}, Te = (...n) => (e) => n.some((t) => e.is(t)), Le = (...n) => (e, t) => n.some((s) => t.is(s)), ge = "gjs-plg-", te = "data-type-role", N = class N {
-  constructor(e) {
-    this.config = e;
-  }
-  getSize(e) {
-    var t;
-    return (t = this.config) != null && t.getSize ? this.config.getSize(e) : ne(e.componentColumn, N.CSS_FLEX_BASIS);
-  }
-  setSize(e) {
-    var t;
-    if ((t = this.config) != null && t.setSize)
-      this.config.setSize(e);
+const ht = (n) => (t) => {
+  var e;
+  return ((e = t.getAttribute) == null ? void 0 : e.call(t, et)) === n;
+}, Tt = (...n) => (t) => n.some((e) => t.is(e)), $t = (...n) => (t, e) => n.some((s) => e.is(s)), gt = "gjs-plg-", et = "data-type-role", N = class N {
+  constructor(t) {
+    this.config = t;
+  }
+  getSize(t) {
+    var e;
+    return (e = this.config) != null && e.getSize ? this.config.getSize(t) : nt(t.componentColumn, N.CSS_FLEX_BASIS);
+  }
+  setSize(t) {
+    var e;
+    if ((e = this.config) != null && e.setSize)
+      this.config.setSize(t);
     else {
-      const { componentColumn: s, sizeValue: i, partial: a } = e;
+      const { componentColumn: s, sizeValue: i, partial: a } = t;
       s.addStyle({ [N.CSS_FLEX_BASIS]: i }, { partial: a });
     }
   }
@@ -126,243 +131,243 @@ const he = (n) => (e) => {
 N.CSS_FLEX_BASIS = "flex-basis";
 let W = N;
 const j = class j {
-  constructor(e) {
-    this.config = e;
+  constructor(t) {
+    this.config = t;
   }
   isGapSupported() {
     return !0;
   }
-  getGap(e) {
-    var t;
-    return (t = this.config) != null && t.getGap ? this.config.getGap(e) : ne(e.componentRow, j.CSS_GAP);
+  getGap(t) {
+    var e;
+    return (e = this.config) != null && e.getGap ? this.config.getGap(t) : nt(t.componentRow, j.CSS_GAP);
   }
-  setGap(e) {
-    var t;
-    if ((t = this.config) != null && t.setGap)
-      this.config.setGap(e);
+  setGap(t) {
+    var e;
+    if ((e = this.config) != null && e.setGap)
+      this.config.setGap(t);
     else {
-      const { componentRow: s, gapValue: i, partial: a } = e;
+      const { componentRow: s, gapValue: i, partial: a } = t;
       s.addStyle({ [j.CSS_GAP]: i }, { partial: a });
     }
   }
 };
 j.CSS_GAP = "gap";
 let K = j;
-const X = class X {
-  constructor(e) {
-    this.config = e;
+const Y = class Y {
+  constructor(t) {
+    this.config = t;
   }
-  getParentSize(e) {
+  getParentSize(t) {
     var a;
-    if ((a = this.config) != null && a.getParentSize) return this.config.getParentSize(e);
-    const { componentRow: t, isVertical: s } = e, i = t.getEl();
+    if ((a = this.config) != null && a.getParentSize) return this.config.getParentSize(t);
+    const { componentRow: e, isVertical: s } = t, i = e.getEl();
     return i ? s ? i.clientHeight : i.clientWidth : 0;
   }
-  isLayoutVertical(e) {
+  isLayoutVertical(t) {
     var s;
-    if ((s = this.config) != null && s.isParentVertical) return this.config.isParentVertical(e);
-    const t = ne(e.componentRow, X.CSS_FLEX_DIRECTION, !0);
-    return t === "column" || t === "column-reverse";
+    if ((s = this.config) != null && s.isParentVertical) return this.config.isParentVertical(t);
+    const e = nt(t.componentRow, Y.CSS_FLEX_DIRECTION, !0);
+    return e === "column" || e === "column-reverse";
   }
 };
-X.CSS_FLEX_DIRECTION = "flex-direction";
-let J = X;
+Y.CSS_FLEX_DIRECTION = "flex-direction";
+let J = Y;
 const _ = class _ {
-  constructor(e) {
-    this.config = e;
+  constructor(t) {
+    this.config = t;
   }
-  getSize(e) {
+  getSize(t) {
     var s;
-    if ((s = this.config) != null && s.getSize) return this.config.getSize(e);
-    const t = e.componentColumn;
-    if (t.is(_.MJML_COLUMN_TYPE)) {
-      const a = t.getAttributes().width;
+    if ((s = this.config) != null && s.getSize) return this.config.getSize(t);
+    const e = t.componentColumn;
+    if (e.is(_.MJML_COLUMN_TYPE)) {
+      const a = e.getAttributes().width;
       if (a && (a.includes("%") || !isNaN(parseFloat(a))))
         return parseFloat(a);
-      const o = t.parent();
+      const o = e.parent();
       return 100 / (o ? o.components().length : 1);
     }
     return 0;
   }
-  setSize(e) {
-    var t;
-    if ((t = this.config) != null && t.setSize)
-      this.config.setSize(e);
+  setSize(t) {
+    var e;
+    if ((e = this.config) != null && e.setSize)
+      this.config.setSize(t);
     else {
-      const { componentColumn: s, sizeValue: i, partial: a } = e;
+      const { componentColumn: s, sizeValue: i, partial: a } = t;
       s.is(_.MJML_COLUMN_TYPE) && s.addAttributes({ width: `${parseFloat(i)}%` }, { partial: a });
     }
   }
 };
 _.MJML_COLUMN_TYPE = "mj-column";
 let q = _;
-const Y = class Y {
-  constructor(e) {
-    this.config = e;
+const U = class U {
+  constructor(t) {
+    this.config = t;
   }
   isGapSupported() {
     return !1;
   }
-  getGap(e) {
+  getGap(t) {
     var s;
-    if ((s = this.config) != null && s.getGap) return this.config.getGap(e);
-    const { componentRow: t } = e;
-    if (t.is(Y.MJML_SECTION_TYPE)) {
-      const i = t.getAttributes();
+    if ((s = this.config) != null && s.getGap) return this.config.getGap(t);
+    const { componentRow: e } = t;
+    if (e.is(U.MJML_SECTION_TYPE)) {
+      const i = e.getAttributes();
       if (i && i.padding)
         return parseInt(i.padding, 10) || 0;
     }
     return 0;
   }
-  setGap(e) {
-    var t, s;
-    (s = (t = this.config) == null ? void 0 : t.setGap) == null || s.call(t, e);
+  setGap(t) {
+    var e, s;
+    (s = (e = this.config) == null ? void 0 : e.setGap) == null || s.call(e, t);
   }
 };
-Y.MJML_SECTION_TYPE = "mj-section";
-let Z = Y;
-class $e {
-  constructor(e) {
-    this.config = e;
+U.MJML_SECTION_TYPE = "mj-section";
+let Z = U;
+class At {
+  constructor(t) {
+    this.config = t;
   }
-  getParentSize(e) {
+  getParentSize(t) {
     var o;
-    if ((o = this.config) != null && o.getParentSize) return this.config.getParentSize(e);
-    const { componentRow: t, isVertical: s } = e, i = t.getEl();
+    if ((o = this.config) != null && o.getParentSize) return this.config.getParentSize(t);
+    const { componentRow: e, isVertical: s } = t, i = e.getEl();
     if (!i) return 0;
     let a = i;
     if (i.tagName !== "TABLE") {
-      const l = i.querySelectorAll("table");
-      l.length && (a = l[0]);
+      const c = i.querySelectorAll("table");
+      c.length && (a = c[0]);
     }
     return s ? a.clientHeight : a.clientWidth;
   }
-  isLayoutVertical(e) {
-    var t;
-    return (t = this.config) != null && t.isParentVertical ? this.config.isParentVertical(e) : !1;
+  isLayoutVertical(t) {
+    var e;
+    return (e = this.config) != null && e.isParentVertical ? this.config.isParentVertical(t) : !1;
   }
 }
-class A {
+class H {
   constructor() {
     this.handlerCache = /* @__PURE__ */ new Map();
   }
   static getInstance() {
-    return A.instance || (A.instance = new A()), A.instance;
-  }
-  getHandlers(e) {
-    const t = `${e.projectType}-${e.disableGapHandler ? "nogap" : "gap"}`;
-    return this.handlerCache.has(t) || (H(e) ? this.handlerCache.set(t, {
-      sizeHandler: new q(e),
-      gapHandler: new Z(e),
-      parentSizeHandler: new $e(e)
-    }) : this.handlerCache.set(t, {
-      sizeHandler: new W(e),
-      gapHandler: new K(e),
-      parentSizeHandler: new J(e)
-    })), this.handlerCache.get(t);
+    return H.instance || (H.instance = new H()), H.instance;
+  }
+  getHandlers(t) {
+    const e = `${t.projectType}-${t.disableGapHandler ? "nogap" : "gap"}`;
+    return this.handlerCache.has(e) || (M(t) ? this.handlerCache.set(e, {
+      sizeHandler: new q(t),
+      gapHandler: new Z(t),
+      parentSizeHandler: new At(t)
+    }) : this.handlerCache.set(e, {
+      sizeHandler: new W(t),
+      gapHandler: new K(t),
+      parentSizeHandler: new J(t)
+    })), this.handlerCache.get(e);
   }
 }
-function E(n) {
-  return A.getInstance().getHandlers(n);
+function R(n) {
+  return H.getInstance().getHandlers(n);
 }
-const ae = (n) => {
+const at = (n) => {
   n.style.display = "none";
-}, oe = (n) => {
+}, ot = (n) => {
   n.style.display = "block";
-}, M = (n) => +parseFloat(`${n}`).toFixed(2), H = (n) => n.projectType === ue.email, Ae = (n) => n ? ["top", "bottom"] : ["left", "right"], He = (n) => {
-  const e = n.parent();
-  return e ? e.components().models.indexOf(n) === 0 : !1;
-}, Me = (n) => {
-  const e = n.parent();
-  if (!e) return !1;
-  const t = e.components().models;
-  return t.indexOf(n) === t.length - 1;
-}, Ve = (n) => {
-  const e = n.parent();
-  if (!e) return !1;
-  const t = e.components().models;
-  return t.length > 1 && n.index() === t.length - 1;
-}, Ne = (n, e, t, s) => {
-  const a = n + (t ? e === "top" ? -1 : e === "bottom" ? 1 : 0 : e === "left" ? -1 : e === "right" ? 1 : 0);
+}, L = (n) => +parseFloat(`${n}`).toFixed(2), M = (n) => n.projectType === ut.email, Ht = (n) => n ? ["top", "bottom"] : ["left", "right"], Mt = (n) => {
+  const t = n.parent();
+  return t ? t.components().models.indexOf(n) === 0 : !1;
+}, Lt = (n) => {
+  const t = n.parent();
+  if (!t) return !1;
+  const e = t.components().models;
+  return e.indexOf(n) === e.length - 1;
+}, Vt = (n) => {
+  const t = n.parent();
+  if (!t) return !1;
+  const e = t.components().models;
+  return e.length > 1 && n.index() === e.length - 1;
+}, Nt = (n, t, e, s) => {
+  const a = n + (e ? t === "top" ? -1 : t === "bottom" ? 1 : 0 : t === "left" ? -1 : t === "right" ? 1 : 0);
   return a >= 0 && a < s ? a : -1;
-}, k = (n) => n === "top" || n === "bottom", je = (n, e) => !!(He(n) && (e === "left" || e === "top") || Me(n) && (e === "right" || e === "bottom")), _e = (n) => {
-  const e = n.parent();
-  return e ? e.components().models.length > 1 : !1;
-}, re = (n, e) => n === "right" || n === "bottom" ? e > 0 : e < 0, ne = (n, e, t = !1) => {
-  const s = !t, i = n.getEl();
+}, O = (n) => n === "top" || n === "bottom", jt = (n, t) => !!(Mt(n) && (t === "left" || t === "top") || Lt(n) && (t === "right" || t === "bottom")), _t = (n) => {
+  const t = n.parent();
+  return t ? t.components().models.length > 1 : !1;
+}, rt = (n, t) => n === "right" || n === "bottom" ? t > 0 : t < 0, nt = (n, t, e = !1) => {
+  const s = !e, i = n.getEl();
   if (!i)
     return s ? 0 : "";
-  const o = window.getComputedStyle(i)[e] || "";
+  const o = window.getComputedStyle(i)[t] || "";
   if (s) {
-    let l;
-    return typeof o == "string" ? (l = parseFloat(o.replace(/[^-\d.]/g, "")), isNaN(l) && (l = 0)) : l = Number(o) || 0, l;
+    let c;
+    return typeof o == "string" ? (c = parseFloat(o.replace(/[^-\d.]/g, "")), isNaN(c) && (c = 0)) : c = Number(o) || 0, c;
   }
   return o;
-}, ce = (n, e, t) => {
-  const s = Q({ componentRow: n, isVertical: e }, t), i = n.components().models;
+}, lt = (n, t, e) => {
+  const s = Q({ componentRow: n, isVertical: t }, e), i = n.components().models;
   return s * (i.length - 1);
-}, D = (n, e) => E(e).parentSizeHandler.isLayoutVertical({ componentRow: n }), B = (n, e) => E(e).sizeHandler.getSize(n), Q = (n, e) => {
-  if (e != null && e.disableGapHandler) return 0;
-  const { gapHandler: t, parentSizeHandler: s } = E(e);
-  if (!t.isGapSupported()) return 0;
-  const i = t.getGap(n), a = s.getParentSize(n);
+}, D = (n, t) => R(t).parentSizeHandler.isLayoutVertical({ componentRow: n }), B = (n, t) => R(t).sizeHandler.getSize(n), Q = (n, t) => {
+  if (t != null && t.disableGapHandler) return 0;
+  const { gapHandler: e, parentSizeHandler: s } = R(t);
+  if (!e.isGapSupported()) return 0;
+  const i = e.getGap(n), a = s.getParentSize(n);
   return i / 100 * a;
-}, ee = (n, e) => E(e).parentSizeHandler.getParentSize(n), V = (n, e) => {
-  E(e).sizeHandler.setSize(n);
-}, fe = (n, e) => {
-  const t = B(n, e);
-  V({ ...n, sizeValue: `${t}%`, partial: !1 }, e);
-}, me = (n, e) => {
-  if (e != null && e.disableGapHandler) return;
-  const { gapHandler: t } = E(e);
-  t.isGapSupported() && t.setGap(n);
-}, De = (n, e) => {
-  const t = n.getStyle().gap;
-  if (!t) return;
-  const s = n.components().models, i = { componentRow: n, isVertical: D(n, e) };
-  s.map((a) => fe({ ...i, componentColumn: a }, e)), me({ ...i, gapValue: String(t), partial: !1 }, e);
+}, tt = (n, t) => R(t).parentSizeHandler.getParentSize(n), V = (n, t) => {
+  R(t).sizeHandler.setSize(n);
+}, ft = (n, t) => {
+  const e = B(n, t);
+  V({ ...n, sizeValue: `${e}%`, partial: !1 }, t);
+}, mt = (n, t) => {
+  if (t != null && t.disableGapHandler) return;
+  const { gapHandler: e } = R(t);
+  e.isGapSupported() && e.setGap(n);
+}, Dt = (n, t) => {
+  const e = n.getStyle().gap;
+  if (!e) return;
+  const s = n.components().models, i = { componentRow: n, isVertical: D(n, t) };
+  s.map((a) => ft({ ...i, componentColumn: a }, t)), mt({ ...i, gapValue: String(e), partial: !1 }, t);
 };
-function Be(n, e) {
-  const { Blocks: t } = n, { typeColumn: s, typeRow: i, blocks: a } = e;
-  if (a === !1 || H(e)) return;
-  const o = (u) => ({
+function Bt(n, t) {
+  const { Blocks: e } = n, { typeColumn: s, typeRow: i, blocks: a } = t;
+  if (a === !1 || M(t)) return;
+  const o = (r) => ({
     type: i,
-    components: u.map((f) => ({
+    components: r.map((g) => ({
       type: s,
-      style: { "flex-basis": `${f}%` }
+      style: { "flex-basis": `${g}%` }
     }))
-  }), l = (u) => `<div class="gs-block-item__flex-row" style="display: flex; height: 1.75rem; width: 100%; flex-wrap: nowrap; gap: 0.5rem;">
-      ${u.map((f) => `<div style="flex-basis: ${f}%; border-color: currentColor; border-width: 2px; border-radius: 0.12rem;"></div>`).join("")}
-    </div>`, c = (u, f) => ({
-    id: `flex-row-${f.join("-")}`,
-    label: u,
+  }), c = (r) => `<div class="gs-block-item__flex-row" style="display: flex; height: 1.75rem; width: 100%; flex-wrap: nowrap; gap: 0.5rem;">
+      ${r.map((g) => `<div style="flex-basis: ${g}%; border-color: currentColor; border-width: 2px; border-radius: 0.12rem;"></div>`).join("")}
+    </div>`, p = (r, g) => ({
+    id: `flex-row-${g.join("-")}`,
+    label: r,
     category: "Layout",
     select: !0,
     full: !0,
     attributes: { class: "gs-block-item__flex gs-utl-w-full" },
-    media: l(f),
-    content: o(f)
-  }), g = [
-    c("1 Column", [100]),
-    c("2 Columns 50/50", [50, 50]),
-    c("2 Columns 25/75", [25, 75]),
-    c("2 Columns 75/25", [75, 25]),
-    c("3 Columns", [33.33, 33.33, 33.33]),
-    c("3 Columns 50/25/25", [50, 25, 25]),
-    c("3 Columns 25/50/25", [25, 50, 25]),
-    c("3 Columns 25/25/50", [25, 25, 50]),
-    c("4 Columns", [25, 25, 25, 25]),
-    c("5 Columns", [20, 20, 20, 20, 20])
-  ], p = we(a) ? a({ blocks: g }) : g;
-  return p.forEach((u) => t.add(u.id, u)), () => {
-    p.forEach((u) => t.remove(u.id));
+    media: c(g),
+    content: o(g)
+  }), u = [
+    p("1 Column", [100]),
+    p("2 Columns 50/50", [50, 50]),
+    p("2 Columns 25/75", [25, 75]),
+    p("2 Columns 75/25", [75, 25]),
+    p("3 Columns", [33.33, 33.33, 33.33]),
+    p("3 Columns 50/25/25", [50, 25, 25]),
+    p("3 Columns 25/50/25", [25, 50, 25]),
+    p("3 Columns 25/25/50", [25, 25, 50]),
+    p("4 Columns", [25, 25, 25, 25]),
+    p("5 Columns", [20, 20, 20, 20, 20])
+  ], f = wt(a) ? a({ blocks: u }) : u;
+  return f.forEach((r) => e.add(r.id, r)), () => {
+    f.forEach((r) => e.remove(r.id));
   };
 }
-const Fe = (n, e) => {
-  const { Components: t } = n, { typeRow: s, typeColumn: i, extendTypeColumn: a } = e, o = `${ge}${i}`, c = !!i && !!t.getType(i) && !a;
-  if (!(!i || c || H(e)))
-    return t.addType(i, {
-      isComponent: he(i),
+const Ft = (n, t) => {
+  const { Components: e } = n, { typeRow: s, typeColumn: i, extendTypeColumn: a } = t, o = `${gt}${i}`, p = !!i && !!e.getType(i) && !a;
+  if (!(!i || p || M(t)))
+    return e.addType(i, {
+      isComponent: ht(i),
       model: {
         defaults: {
           name: "Column",
@@ -370,8 +375,8 @@ const Fe = (n, e) => {
           emptyState: !0,
           classes: o,
           icon: '<svg viewBox="0 0 24 24"><path d="M14.5 2.3A1.8 1.8 0 0 0 12.7 4v16c0 1 .8 1.8 1.8 1.8h3a1.8 1.8 0 0 0 1.8-1.8V4a1.8 1.8 0 0 0-1.8-1.8zm-8 0A1.8 1.8 0 0 0 4.7 4v16c0 1 .8 1.8 1.8 1.8h3a1.8 1.8 0 0 0 1.8-1.8V4a1.8 1.8 0 0 0-1.8-1.8z"/></svg>',
-          draggable: Le(s),
-          attributes: { [te]: i },
+          draggable: $t(s),
+          attributes: { [et]: i },
           styles: `
           .${o} {
             flex-grow: 1;
@@ -380,21 +385,21 @@ const Fe = (n, e) => {
         }
       }
     }), () => {
-      t.removeType(i);
+      e.removeType(i);
     };
-}, ke = (n, e) => {
-  const { Components: t } = n, { typeRow: s, typeColumn: i, extendTypeRow: a } = e, o = `${ge}${s}`, c = !!s && !!t.getType(s) && !a;
-  if (!(!s || c || H(e)))
-    return t.addType(s, {
-      isComponent: he(s),
+}, Ot = (n, t) => {
+  const { Components: e } = n, { typeRow: s, typeColumn: i, extendTypeRow: a } = t, o = `${gt}${s}`, p = !!s && !!e.getType(s) && !a;
+  if (!(!s || p || M(t)))
+    return e.addType(s, {
+      isComponent: ht(s),
       model: {
         defaults: {
           name: "Row",
           classes: o,
           icon: '<svg viewBox="0 0 24 24"><path d="M4 4.8a1.8 1.8 0 0 0-1.8 1.7v3c0 1 .8 1.8 1.8 1.8h16a1.8 1.8 0 0 0 1.8-1.8v-3A1.8 1.8 0 0 0 20 4.7zm0 8a1.8 1.8 0 0 0-1.8 1.7v3c0 1 .8 1.8 1.8 1.8h16a1.8 1.8 0 0 0 1.8-1.8v-3a1.8 1.8 0 0 0-1.8-1.8z"/></svg>',
           emptyState: { styleIn: "width: 100%" },
-          attributes: { [te]: s },
-          droppable: Te(i),
+          attributes: { [et]: s },
+          droppable: Tt(i),
           traits: [
             // {
             //   type: 'number',
@@ -418,7 +423,7 @@ const Fe = (n, e) => {
               type: "checkbox",
               name: "snap",
               label: "Enable Snap",
-              default: e.snapEnabled,
+              default: t.snapEnabled,
               changeProp: !0
             },
             {
@@ -428,7 +433,7 @@ const Fe = (n, e) => {
               min: 1,
               max: 12,
               step: 1,
-              default: e.snapDivisions,
+              default: t.snapDivisions,
               changeProp: !0
             }
           ],
@@ -450,163 +455,163 @@ const Fe = (n, e) => {
         }
       }
     }), () => {
-      t.removeType(s);
+      e.removeType(s);
     };
-}, Oe = "flexComponent", Xe = $.startup;
-class Ye {
+}, Xt = "flexComponent", Yt = A.startup;
+class Ut {
   constructor() {
     this.resizableChildTypes = /* @__PURE__ */ new Set(), this.gapAdjustableParentTypes = /* @__PURE__ */ new Set(), this.typeRelationships = /* @__PURE__ */ new Map();
   }
-  registerResizableChild(e) {
-    this.resizableChildTypes.add(e);
+  registerResizableChild(t) {
+    this.resizableChildTypes.add(t);
   }
-  registerGapAdjustableParent(e) {
-    this.gapAdjustableParentTypes.add(e);
+  registerGapAdjustableParent(t) {
+    this.gapAdjustableParentTypes.add(t);
   }
-  registerTypeRelationship(e, t) {
-    this.typeRelationships.has(e) || this.typeRelationships.set(e, /* @__PURE__ */ new Set()), this.typeRelationships.get(e).add(t), this.registerResizableChild(t), this.registerGapAdjustableParent(e);
+  registerTypeRelationship(t, e) {
+    this.typeRelationships.has(t) || this.typeRelationships.set(t, /* @__PURE__ */ new Set()), this.typeRelationships.get(t).add(e), this.registerResizableChild(e), this.registerGapAdjustableParent(t);
   }
-  isResizableChild(e) {
-    return this.resizableChildTypes.has(e.get("type"));
+  isResizableChild(t) {
+    return this.resizableChildTypes.has(t.get("type"));
   }
-  isGapAdjustableParent(e) {
-    return this.gapAdjustableParentTypes.has(e.get("type"));
+  isGapAdjustableParent(t) {
+    return this.gapAdjustableParentTypes.has(t.get("type"));
   }
-  isValidRelationship(e, t) {
-    const s = e.get("type"), i = t.get("type");
+  isValidRelationship(t, e) {
+    const s = t.get("type"), i = e.get("type");
     return this.typeRelationships.has(s) ? this.typeRelationships.get(s).has(i) : !1;
   }
 }
-class Ue {
-  constructor(e, t, s) {
-    this.editor = e, this.registry = t, this.opts = s, this.resizeState = /* @__PURE__ */ new WeakMap();
+class kt {
+  constructor(t, e, s) {
+    this.editor = t, this.registry = e, this.opts = s, this.resizeState = /* @__PURE__ */ new WeakMap();
   }
-  getState(e) {
-    return this.resizeState.has(e) || this.resizeState.set(e, {}), this.resizeState.get(e);
+  getState(t) {
+    return this.resizeState.has(t) || this.resizeState.set(t, {}), this.resizeState.get(t);
   }
-  clearState(e) {
-    return this.resizeState.delete(e);
+  clearState(t) {
+    return this.resizeState.delete(t);
   }
-  startResize(e, t, s) {
-    const { opts: i } = this, a = this.getState(e);
-    a.direction = t, a.startX = s.clientX, a.startY = s.clientY, a.resizing = !0, a.lastSnappedPercent = void 0;
-    const o = e.parent();
-    if (!o || !this.registry.isValidRelationship(o, e)) return;
+  startResize(t, e, s) {
+    const { opts: i } = this, a = this.getState(t);
+    a.direction = e, a.startX = s.clientX, a.startY = s.clientY, a.resizing = !0, a.lastSnappedPercent = void 0;
+    const o = t.parent();
+    if (!o || !this.registry.isValidRelationship(o, t)) return;
     a.snapEnabled = o.get("snap") ?? i.snapEnabled, a.snapDivisions = o.get("snap-divisions") ?? i.snapDivisions ?? 12;
-    const l = o.components().models, c = l.findIndex((f) => f.cid === e.cid), g = D(o, i), p = Ne(c, t, g, l.length);
-    p !== -1 && (a.adjacentIdx = p);
-    const u = { componentColumn: e, componentRow: o, isVertical: g };
-    if (a.startPercent = B(u, i), typeof a.adjacentIdx < "u") {
-      const f = l[a.adjacentIdx];
-      a.neighborStartPercent = B({ ...u, componentColumn: f }, i);
+    const c = o.components().models, p = c.findIndex((g) => g.cid === t.cid), u = D(o, i), f = Nt(p, e, u, c.length);
+    f !== -1 && (a.adjacentIdx = f);
+    const r = { componentColumn: t, componentRow: o, isVertical: u };
+    if (a.startPercent = B(r, i), typeof a.adjacentIdx < "u") {
+      const g = c[a.adjacentIdx];
+      a.neighborStartPercent = B({ ...r, componentColumn: g }, i);
     }
   }
-  updateResizeByDelta(e, t, s) {
-    const i = this.getState(e), a = e.parent();
-    !i.resizing || !a || (i.snapEnabled ? this.updateSnapResize(e, t, s) : this.updateContinuesResize(e, t, s));
+  updateResizeByDelta(t, e, s) {
+    const i = this.getState(t), a = t.parent();
+    !i.resizing || !a || (i.snapEnabled ? this.updateSnapResize(t, e, s) : this.updateContinuesResize(t, e, s));
   }
-  finishResize(e) {
-    const t = e.parent(), s = t == null ? void 0 : t.components().models, i = { componentRow: t, isVertical: !!t && D(t, this.opts) };
-    s == null || s.forEach((a) => fe({ ...i, componentColumn: a }, this.opts)), this.clearState(e);
+  finishResize(t) {
+    const e = t.parent(), s = e == null ? void 0 : e.components().models, i = { componentRow: e, isVertical: !!e && D(e, this.opts) };
+    s == null || s.forEach((a) => ft({ ...i, componentColumn: a }, this.opts)), this.clearState(t);
   }
-  updateContinuesResize(e, t, s) {
-    const i = this.getState(e), a = e.parent(), { opts: o } = this;
+  updateContinuesResize(t, e, s) {
+    const i = this.getState(t), a = t.parent(), { opts: o } = this;
     if (!a) return;
-    const l = o.minItemPercent ?? 0, c = k(t), g = ee({ componentRow: a, isVertical: c }, o), p = ce(a, c, this.opts), f = 100 - p / g * 100, I = s / (g - p) * f, { startPercent: P = 0, neighborStartPercent: y = 0 } = i, v = { componentRow: a, isVertical: c, componentColumn: e, partial: !0 }, R = re(t, s) ? P + Math.abs(I) : P - Math.abs(I);
+    const c = o.minItemPercent ?? 0, p = O(e), u = tt({ componentRow: a, isVertical: p }, o), f = lt(a, p, this.opts), g = 100 - f / u * 100, E = s / (u - f) * g, { startPercent: S = 0, neighborStartPercent: C = 0 } = i, x = { componentRow: a, isVertical: p, componentColumn: t, partial: !0 }, v = rt(e, s) ? S + Math.abs(E) : S - Math.abs(E);
     if (typeof i.adjacentIdx < "u") {
-      const z = a.components().models[i.adjacentIdx], x = P + y, b = x - l, r = Math.min(b, Math.max(l, R)), d = x - r;
-      V({ ...v, sizeValue: `${M(r)}%` }, o), V(
-        { ...v, componentColumn: z, sizeValue: `${M(d)}%` },
+      const b = a.components().models[i.adjacentIdx], w = S + C, P = w - c, l = Math.min(P, Math.max(c, v)), d = w - l;
+      V({ ...x, sizeValue: `${L(l)}%` }, o), V(
+        { ...x, componentColumn: b, sizeValue: `${L(d)}%` },
         o
       );
     } else {
-      const z = Math.max(l, Math.min(f, R));
-      V({ ...v, sizeValue: `${M(z)}%` }, o);
+      const b = Math.max(c, Math.min(g, v));
+      V({ ...x, sizeValue: `${L(b)}%` }, o);
     }
   }
-  updateSnapResize(e, t, s) {
-    const i = this.getState(e), a = e.parent(), o = k(t), l = ee({ componentRow: a, isVertical: o }, this.opts), c = ce(a, o, this.opts), g = l - c, p = s / g * 100, u = re(t, s), { startPercent: f = 0, snapDivisions: I = 12 } = i, P = u ? f + Math.abs(p) : f - Math.abs(p), y = 100 / I, v = Math.floor(P / y) * y, R = Math.ceil(P / y) * y, z = Math.abs(R - P), x = Math.abs(P - v), b = y * 0.2, C = z < x ? R : v;
-    if (C > 0 && C < 100 && (z < b || x < b) && i.lastSnappedPercent !== C) {
-      i.lastSnappedPercent = C;
-      let m = Math.abs(C - f) / 100 * g;
-      (u && (t === "left" || t === "top") || !u && (t === "right" || t === "bottom")) && (m = -m), this.updateContinuesResize(e, t, m);
-    } else z >= b && x >= b && (i.lastSnappedPercent = void 0);
+  updateSnapResize(t, e, s) {
+    const i = this.getState(t), a = t.parent(), o = O(e), c = tt({ componentRow: a, isVertical: o }, this.opts), p = lt(a, o, this.opts), u = c - p, f = s / u * 100, r = rt(e, s), { startPercent: g = 0, snapDivisions: E = 12 } = i, S = r ? g + Math.abs(f) : g - Math.abs(f), C = 100 / E, x = Math.floor(S / C) * C, v = Math.ceil(S / C) * C, b = Math.abs(v - S), w = Math.abs(S - x), P = C * 0.2, z = b < w ? v : x;
+    if (z > 0 && z < 100 && (b < P || w < P) && i.lastSnappedPercent !== z) {
+      i.lastSnappedPercent = z;
+      let m = Math.abs(z - g) / 100 * u;
+      (r && (e === "left" || e === "top") || !r && (e === "right" || e === "bottom")) && (m = -m), this.updateContinuesResize(t, e, m);
+    } else b >= P && w >= P && (i.lastSnappedPercent = void 0);
   }
 }
-class We {
-  constructor(e, t, s) {
-    this.editor = e, this.registry = t, this.opts = s;
-  }
-  updateGapByDelta(e, t, s, i) {
-    if (!this.registry.isGapAdjustableParent(e)) return;
-    const { opts: a } = this, o = Math.max(0, s + t), l = ee({ componentRow: e, isVertical: i }, a), c = o / l * 100, g = e.components().models, p = g.length - 1, u = { componentRow: e, isVertical: i }, f = g.reduce(
-      (b, C) => b + B({ ...u, componentColumn: C }, a),
+class Wt {
+  constructor(t, e, s) {
+    this.editor = t, this.registry = e, this.opts = s;
+  }
+  updateGapByDelta(t, e, s, i) {
+    if (!this.registry.isGapAdjustableParent(t)) return;
+    const { opts: a } = this, o = Math.max(0, s + e), c = tt({ componentRow: t, isVertical: i }, a), p = o / c * 100, u = t.components().models, f = u.length - 1, r = { componentRow: t, isVertical: i }, g = u.reduce(
+      (P, z) => P + B({ ...r, componentColumn: z }, a),
       0
-    ), P = 100 - c * p, y = a.minItemPercent || 5;
-    if (P < y * g.length)
+    ), S = 100 - p * f, C = a.minItemPercent || 5;
+    if (S < C * u.length)
       return;
-    const R = 100 - p * c, z = f - R, x = { componentRow: e, isVertical: i, partial: !0 };
-    g.map((b) => {
-      const C = B({ ...u, componentColumn: b }, a), r = C - C / f * z;
-      V({ ...x, componentColumn: b, sizeValue: `${M(r)}%` }, a);
-    }), me({ ...x, gapValue: `${M(c)}%` }, a);
+    const v = 100 - f * p, b = g - v, w = { componentRow: t, isVertical: i, partial: !0 };
+    u.map((P) => {
+      const z = B({ ...r, componentColumn: P }, a), l = z - z / g * b;
+      V({ ...w, componentColumn: P, sizeValue: `${L(l)}%` }, a);
+    }), mt({ ...w, gapValue: `${L(p)}%` }, a);
   }
-  finishGapAdjust(e) {
-    De(e, this.opts);
+  finishGapAdjust(t) {
+    Dt(t, this.opts);
   }
 }
-class Ke {
-  constructor(e, t, s) {
-    this.editor = e, this.registry = t, this.opts = s, this.resizeHandler = new Ue(e, t, s), this.gapHandler = new We(e, t, s);
+class Kt {
+  constructor(t, e, s) {
+    this.editor = t, this.registry = e, this.opts = s, this.resizeHandler = new kt(t, e, s), this.gapHandler = new Wt(t, e, s);
   }
-  startResize(e, t, s) {
-    this.resizeHandler.startResize(e, t, s);
+  startResize(t, e, s) {
+    this.resizeHandler.startResize(t, e, s);
   }
-  updateResizeByDelta(e, t, s) {
-    this.resizeHandler.updateResizeByDelta(e, t, s);
+  updateResizeByDelta(t, e, s) {
+    this.resizeHandler.updateResizeByDelta(t, e, s);
   }
-  finishResize(e) {
-    this.resizeHandler.finishResize(e);
+  finishResize(t) {
+    this.resizeHandler.finishResize(t);
   }
-  updateGapByDelta(e, t, s, i) {
-    this.gapHandler.updateGapByDelta(e, t, s, i);
+  updateGapByDelta(t, e, s, i) {
+    this.gapHandler.updateGapByDelta(t, e, s, i);
   }
-  finishGapAdjust(e) {
-    this.gapHandler.finishGapAdjust(e);
+  finishGapAdjust(t) {
+    this.gapHandler.finishGapAdjust(t);
   }
-  canResize(e) {
-    const t = e.parent();
-    return t ? this.registry.isValidRelationship(t, e) : !1;
+  canResize(t) {
+    const e = t.parent();
+    return e ? this.registry.isValidRelationship(e, t) : !1;
   }
-  canAdjustGap(e) {
-    return this.registry.isGapAdjustableParent(e);
+  canAdjustGap(t) {
+    return this.registry.isGapAdjustableParent(t);
   }
 }
-const O = "gs-flex-spots", le = `${O}__handle-size`, Je = `${O}__handle-gap`;
-function qe(n, e) {
-  const { Canvas: t } = n, s = "flex-resize-spot";
-  let i, a, o, l, c = null, g = null;
-  const p = new Ye(), u = new Ke(n, p, e), f = () => {
-    var r;
-    i = document.createElement("div"), i.className = O, i.style.display = "none", a = document.createElement("div"), a.className = `${O}__handles`, a.style.position = "absolute", a.style.pointerEvents = "none", a.style.zIndex = "21", o = {
+const X = "gs-flex-spots", ct = `${X}__handle-size`, Jt = `${X}__handle-gap`;
+function qt(n, t) {
+  const { Canvas: e } = n, s = "flex-resize-spot";
+  let i, a, o, c, p = null, u = null;
+  const f = new Ut(), r = new Kt(n, f, t), g = () => {
+    var l;
+    i = document.createElement("div"), i.className = X, i.style.display = "none", a = document.createElement("div"), a.className = `${X}__handles`, a.style.position = "absolute", a.style.pointerEvents = "none", a.style.zIndex = "21", o = {
       left: document.createElement("div"),
       right: document.createElement("div"),
       top: document.createElement("div"),
       bottom: document.createElement("div")
     }, Object.entries(o).forEach(([d, m]) => {
-      const S = d, h = k(S);
-      m.className = `${le} ${le}-${S} gjs-resizer-h gjs-cv-unscale`, m.style.cssText = `
+      const y = d, h = O(y);
+      m.className = `${ct} ${ct}-${y} gjs-resizer-h gjs-cv-unscale`, m.style.cssText = `
         pointer-events: all;
         position: absolute;
         z-index: 1;
         cursor: ${h ? "ns-resize" : "ew-resize"};
         ${h ? "left: 50%;" : "top: 50%;"}
-        ${S === "left" ? "left: 0px;" : ""}
-        ${S === "right" ? "right: 0px;" : ""}
-        ${S === "top" ? "top: 0px;" : ""}
-        ${S === "bottom" ? "bottom: 0px;" : ""}
-      `, m.addEventListener("pointerdown", I(S)), a.appendChild(m);
-    }), !e.disableGapHandler && !H(e) && (l = document.createElement("div"), l.className = Je, l.style.cssText = `
+        ${y === "left" ? "left: 0px;" : ""}
+        ${y === "right" ? "right: 0px;" : ""}
+        ${y === "top" ? "top: 0px;" : ""}
+        ${y === "bottom" ? "bottom: 0px;" : ""}
+      `, m.addEventListener("pointerdown", E(y)), a.appendChild(m);
+    }), !t.disableGapHandler && !M(t) && (c = document.createElement("div"), c.className = Jt, c.style.cssText = `
         position: absolute;
         background-color: var(--gs-theme-cl-cmp-bg1, #3b97e3);
         border-width: 2px;
@@ -616,98 +621,98 @@ function qe(n, e) {
         pointer-events: all;
         max-width: 3rem;
         max-height: 3rem;
-      `, l.addEventListener("pointerdown", P()), a.appendChild(l)), i.append(a), (r = t.getSpotsEl()) == null || r.appendChild(i);
-  }, I = (r) => (d) => {
-    if (!c) return;
-    d.stopPropagation(), d.preventDefault(), u.startResize(c, r, d);
-    const m = d.clientX, S = d.clientY;
+      `, c.addEventListener("pointerdown", S()), a.appendChild(c)), i.append(a), (l = e.getSpotsEl()) == null || l.appendChild(i);
+  }, E = (l) => (d) => {
+    if (!p) return;
+    d.stopPropagation(), d.preventDefault(), r.startResize(p, l, d);
+    const m = d.clientX, y = d.clientY;
     d.target.setPointerCapture(d.pointerId);
     const h = (T) => {
-      const G = n.Canvas.getZoomMultiplier(), L = (T.clientX - m) * G, F = (T.clientY - S) * G, U = k(r) ? F : L;
-      u.updateResizeByDelta(c, r, U);
-    }, w = () => {
-      u.finishResize(c), d.target.releasePointerCapture(d.pointerId), document.removeEventListener("pointermove", h), document.removeEventListener("pointerup", w);
+      const G = n.Canvas.getZoomMultiplier(), $ = (T.clientX - m) * G, F = (T.clientY - y) * G, k = O(l) ? F : $;
+      r.updateResizeByDelta(p, l, k);
+    }, I = () => {
+      r.finishResize(p), d.target.releasePointerCapture(d.pointerId), document.removeEventListener("pointermove", h), document.removeEventListener("pointerup", I);
     };
-    document.addEventListener("pointermove", h), document.addEventListener("pointerup", w);
-  }, P = () => (r) => {
-    if (!g) return;
-    const d = g;
-    r.stopPropagation(), r.preventDefault();
-    const m = D(d, e), S = Q({ componentRow: d, isVertical: m }, e), h = r.clientX, w = r.clientY;
-    r.target.setPointerCapture(r.pointerId);
-    const T = (L) => {
-      const F = n.Canvas.getZoomMultiplier(), U = m ? (L.clientY - w) * F : (L.clientX - h) * F;
-      u.updateGapByDelta(d, U, S, m);
+    document.addEventListener("pointermove", h), document.addEventListener("pointerup", I);
+  }, S = () => (l) => {
+    if (!u) return;
+    const d = u;
+    l.stopPropagation(), l.preventDefault();
+    const m = D(d, t), y = Q({ componentRow: d, isVertical: m }, t), h = l.clientX, I = l.clientY;
+    l.target.setPointerCapture(l.pointerId);
+    const T = ($) => {
+      const F = n.Canvas.getZoomMultiplier(), k = m ? ($.clientY - I) * F : ($.clientX - h) * F;
+      r.updateGapByDelta(d, k, y, m);
     }, G = () => {
-      u.finishGapAdjust(d), r.target.releasePointerCapture(r.pointerId), document.removeEventListener("pointermove", T), document.removeEventListener("pointerup", G);
+      r.finishGapAdjust(d), l.target.releasePointerCapture(l.pointerId), document.removeEventListener("pointermove", T), document.removeEventListener("pointerup", G);
     };
     document.addEventListener("pointermove", T), document.addEventListener("pointerup", G);
-  }, y = (r) => {
-    const d = r.component;
-    if (!d || !i || (c = d, g = d.parent(), !g)) return;
-    const m = g;
-    oe(i);
-    const S = r.getStyle();
-    a && Object.assign(a.style, S);
-    const h = D(m, e), w = Ae(h);
-    if (Object.values(o).forEach(ae), w.forEach((G) => {
-      if (je(d, G)) return;
-      const L = o[G];
-      oe(L);
-    }), E(e).gapHandler.isGapSupported() && l && _e(d)) {
-      const G = Q({ componentRow: m, isVertical: h }, e);
-      v(G, h, Ve(d));
+  }, C = (l) => {
+    const d = l.component;
+    if (!d || !i || (p = d, u = d.parent(), !u)) return;
+    const m = u;
+    ot(i);
+    const y = l.getStyle();
+    a && Object.assign(a.style, y);
+    const h = D(m, t), I = Ht(h);
+    if (Object.values(o).forEach(at), I.forEach((G) => {
+      if (jt(d, G)) return;
+      const $ = o[G];
+      ot($);
+    }), R(t).gapHandler.isGapSupported() && c && _t(d)) {
+      const G = Q({ componentRow: m, isVertical: h }, t);
+      x(G, h, Vt(d));
     }
-  }, v = (r, d, m = !1) => {
-    const S = e.gapHandleSize, h = l.style;
+  }, x = (l, d, m = !1) => {
+    const y = t.gapHandleSize, h = c.style;
     if (d) {
-      h.height = `${S}px`;
-      const w = l.offsetHeight;
-      m ? (h.top = `-${(r + w) / 2}px`, h.bottom = "") : (h.bottom = `-${(r + w) / 2}px`, h.top = ""), h.width = "50%", h.left = "50%", h.transform = "translateX(-50%)", h.cursor = "row-resize";
+      h.height = `${y}px`;
+      const I = c.offsetHeight;
+      m ? (h.top = `-${(l + I) / 2}px`, h.bottom = "") : (h.bottom = `-${(l + I) / 2}px`, h.top = ""), h.width = "50%", h.left = "50%", h.transform = "translateX(-50%)", h.cursor = "row-resize";
     } else {
-      h.width = `${S}px`;
-      const w = l.offsetWidth;
-      m ? (h.left = `-${(r + w) / 2}px`, h.right = "") : (h.right = `-${(r + w) / 2}px`, h.left = ""), h.height = "50%", h.top = "50%", h.transform = "translateY(-50%)", h.cursor = "col-resize";
+      h.width = `${y}px`;
+      const I = c.offsetWidth;
+      m ? (h.left = `-${(l + I) / 2}px`, h.right = "") : (h.right = `-${(l + I) / 2}px`, h.left = ""), h.height = "50%", h.top = "50%", h.transform = "translateY(-50%)", h.cursor = "col-resize";
     }
-  }, R = () => {
-    i && (ae(i), c = null, g = null);
-  }, z = () => {
-    t.removeSpots({ type: s });
-    const r = n.getSelected(), d = r == null ? void 0 : r.parent();
-    r && d && p.isValidRelationship(d, r) ? t.addSpot({ type: s, component: r }) : R();
-  }, x = () => {
-    const r = t.getSpots().filter((d) => d.type === s)[0];
-    r && y(r);
-  }, b = (r, d) => {
-    p.registerTypeRelationship(r, d);
+  }, v = () => {
+    i && (at(i), p = null, u = null);
+  }, b = () => {
+    e.removeSpots({ type: s });
+    const l = n.getSelected(), d = l == null ? void 0 : l.parent();
+    l && d && f.isValidRelationship(d, l) ? e.addSpot({ type: s, component: l }) : v();
+  }, w = () => {
+    const l = e.getSpots().filter((d) => d.type === s)[0];
+    l && C(l);
+  }, P = (l, d) => {
+    f.registerTypeRelationship(l, d);
   };
   n.onReady(() => {
-    f(), H(e) ? b("mj-section", "mj-column") : b(e.typeRow, e.typeColumn);
+    g(), M(t) ? P("mj-section", "mj-column") : P(t.typeRow, t.typeColumn);
   });
-  const C = "component:toggled";
-  return n.on(t.events.spot, x), n.on(C, z), () => {
-    n.off(t.events.spot, x), n.off(C, z);
+  const z = "component:toggled";
+  return n.on(e.events.spot, w), n.on(z, b), () => {
+    n.off(e.events.spot, w), n.off(z, b);
   };
 }
-const Ze = function(n, e = {}) {
-  const t = {
+const Zt = function(n, t = {}) {
+  const e = {
     typeRow: "flex-row",
     typeColumn: "flex-column",
     gapHandleSize: 3,
     snapDivisions: 12,
     minItemPercent: 5,
-    ...e
-  }, s = [ke(n, t), Fe(n, t)], i = qe(n, t), a = Be(n, t);
-  Ge({
+    ...t
+  }, s = [Ot(n, e), Ft(n, e)], i = qt(n, e), a = Bt(n, e);
+  Et({
     editor: n,
-    licenseKey: t.licenseKey,
-    plan: Xe,
-    pluginName: Oe,
+    licenseKey: e.licenseKey,
+    plan: Yt,
+    pluginName: Xt,
     cleanup: () => {
       s.forEach((o) => o == null ? void 0 : o()), i(), a == null || a();
     }
   });
-}, Qe = Re(Ze);
+}, Qt = Gt(Zt);
 export {
-  Qe as default
+  Qt as default
 };