@grapesjs/studio-sdk-plugins 1.0.35 → 1.0.36

package/dist/flexComponent/index.es.js

@@ -1,8 +1,8 @@
-const pt = "app.grapesjs.com", dt = "app-stage.grapesjs.com", St = "app2.grapesjs.com", yt = "app-stage2.grapesjs.com", st = [
-  pt,
-  St,
-  dt,
-  yt,
+const ue = "app.grapesjs.com", de = "app-stage.grapesjs.com", Pe = "app2.grapesjs.com", me = "app-stage2.grapesjs.com", ae = [
+  ue,
+  Pe,
+  de,
+  me,
   "localhost",
   "127.0.0.1",
   ".local-credentialless.webcontainer.io",
@@ -11,343 +11,356 @@ const pt = "app.grapesjs.com", dt = "app-stage.grapesjs.com", St = "app2.grapesj
   // For stackblitz.com demos
   "-sandpack.codesandbox.io"
   // For Sandpack demos
-], 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)));
+], ze = "license:check:end", Se = () => typeof window < "u", xe = ({
+  isDev: t,
+  isStage: e,
+  isPlatform: s
+}) => `${t ? "" : `https://${e ? de : ue}`}/${s ? "platform-api" : "api"}`, ve = () => {
+  const t = Se() && window.location.hostname;
+  return !!t && (ae.includes(t) || ae.some((e) => t.endsWith(e)));
 };
-function wt(n) {
-  return typeof n == "function";
+function Re(t) {
+  return typeof t == "function";
 }
-async function It({
-  path: n,
-  baseApiUrl: t,
-  method: e = "GET",
-  headers: s = {},
-  params: i,
-  body: a
+async function we({
+  path: t,
+  baseApiUrl: e,
+  method: s = "GET",
+  headers: n = {},
+  params: a,
+  body: i
 }) {
-  const c = `${t || Ct({ isDev: !1, isStage: !1 })}${n}`, p = {
-    method: e,
+  const l = `${e || xe({ isDev: !1, isStage: !1 })}${t}`, p = {
+    method: s,
     headers: {
       "Content-Type": "application/json",
-      ...s
+      ...n
     }
   };
-  a && (p.body = JSON.stringify(a));
-  const u = i ? new URLSearchParams(i).toString() : "", f = u ? `?${u}` : "", r = await fetch(`${c}${f}`, p);
+  i && (p.body = JSON.stringify(i));
+  const g = a ? new URLSearchParams(a).toString() : "", f = g ? `?${g}` : "", r = await fetch(`${l}${f}`, p);
   if (!r.ok)
     throw new Error(`HTTP error! status: ${r.status}`);
   return r.json();
 }
-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
+var L = /* @__PURE__ */ ((t) => (t.free = "free", t.startup = "startup", t.business = "business", t.enterprise = "enterprise", t))(L || {}), W = /* @__PURE__ */ ((t) => (t.toastAdd = "studio:toastAdd", t.toastRemove = "studio:toastRemove", t.dialogOpen = "studio:dialogOpen", t.dialogClose = "studio:dialogClose", t.dialogExportCode = "studio:dialogExportCode", t.dialogImportCode = "studio:dialogImportCode", t.sidebarLeftSet = "studio:sidebarLeft:set", t.sidebarLeftGet = "studio:sidebarLeft:get", t.sidebarLeftToggle = "studio:sidebarLeft:toggle", t.sidebarRightSet = "studio:sidebarRight:set", t.sidebarRightGet = "studio:sidebarRight:get", t.sidebarRightToggle = "studio:sidebarRight:toggle", t.sidebarTopSet = "studio:sidebarTop:set", t.sidebarTopGet = "studio:sidebarTop:get", t.sidebarTopToggle = "studio:sidebarTop:toggle", t.sidebarBottomSet = "studio:sidebarBottom:set", t.sidebarBottomGet = "studio:sidebarBottom:get", t.sidebarBottomToggle = "studio:sidebarBottom:toggle", t.symbolAdd = "studio:symbolAdd", t.symbolDetach = "studio:symbolDetach", t.symbolOverride = "studio:symbolOverride", t.symbolPropagateStyles = "studio:propagateStyles", t.getPagesConfig = "studio:getPagesConfig", t.setPagesConfig = "studio:setPagesConfig", t.getPageSettings = "studio:getPageSettings", t.setPageSettings = "studio:setPageSettings", t.clearPage = "studio:clearPage", t.projectFiles = "studio:projectFiles", t.validateCode = "studio:validateCode", t.canvasReload = "studio:canvasReload", t.getBlocksPanel = "studio:getBlocksPanel", t.setBlocksPanel = "studio:setBlocksPanel", t.getStateContextMenu = "studio:getStateContextMenu", t.setStateContextMenu = "studio:setStateContextMenu", t.contextMenuComponent = "studio:contextMenuComponent", t.layoutAdd = "studio:layoutAdd", t.layoutRemove = "studio:layoutRemove", t.layoutToggle = "studio:layoutToggle", t.layoutUpdate = "studio:layoutUpdate", t.layoutGet = "studio:layoutGet", t.layoutConfigGet = "studio:layoutConfigGet", t.layoutConfigSet = "studio:layoutConfigSet", t.layoutComponentAdd = "studio:layoutComponentAdd", t.layoutComponentGet = "studio:layoutComponentGet", t.layoutComponentRemove = "studio:layoutComponentRemove", t.layoutComponentRender = "studio:layoutComponentRender", t.getStateTheme = "studio:getStateTheme", t.setStateTheme = "studio:setStateTheme", t.settings = "studio:settings", t.assetProviderGet = "studio:assetProviderGet", t.assetProviderAdd = "studio:assetProviderAdd", t.assetProviderRemove = "studio:assetProviderRemove", t.fontGet = "studio:fontGet", t.fontAdd = "studio:fontAdd", t.fontRemove = "studio:fontRemove", t.fontManagerOpen = "studio:fontManagerOpen", t.menuFontLoad = "studio:menuFontLoad", t.toggleStateDataSource = "studio:toggleStateDataSource", t.getStateDataSource = "studio:getStateDataSource", t.dataSourceSetGlobalData = "studio:dataSourceSetGlobalData", t.dataSourceSetImporter = "studio:dataSourceSetImporter", t.dataSourceSetExporter = "studio:dataSourceSetExporter", t.setDragAbsolute = "studio:setDragAbsolute", t))(W || {}), ge = /* @__PURE__ */ ((t) => (t.web = "web", t.email = "email", t.document = "document", t.react = "react", t))(ge || {});
+const ie = {
+  [L.free]: 0,
+  [L.startup]: 10,
+  [L.business]: 20,
+  [L.enterprise]: 30
 };
-function vt(n) {
-  const t = n;
-  return t.init = (e) => (s) => n(s, e), t;
+function Ge(t) {
+  const e = t;
+  return e.init = (s) => (n) => t(n, s), e;
 }
-const Gt = (n) => /* @__PURE__ */ vt(n);
-async function Et({
-  editor: n,
-  plan: t,
-  pluginName: e,
-  licenseKey: s,
-  onLicenseCheckResponse: i,
-  cleanup: a
+const Ce = (t) => /* @__PURE__ */ Ge(t);
+async function Ie({
+  editor: t,
+  plan: e,
+  pluginName: s,
+  licenseKey: n,
+  onLicenseCheckResponse: a,
+  cleanup: 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 });
+  let o = "", l;
+  const p = (r) => {
+    console.warn("Cleanup plugin:", s, "Reason:", r), i();
+  }, g = (r = {}) => {
+    var v;
+    const { error: h, sdkLicense: I } = r, b = (v = r.plan) == null ? void 0 : v.category;
+    if (!(I || r.license) || h)
+      p(h || "Invalid license");
+    else if (b) {
+      const G = ie[e], m = ie[b];
+      G > m && p({ pluginRequiredPlan: e, licensePlan: b });
     }
   };
-  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 (!c) {
-      if (p) return;
-      if (s) {
-        const r = await Rt({ licenseKey: s, pluginName: e, baseApiUrl: o });
-        i == null || i(r), r && f(r);
-      } else
-        u("The `licenseKey` option not provided");
-    }
-  }, 2e3);
+  t.Commands.has(W.settings) && (l = t.runCommand(W.settings), o = (l == null ? void 0 : l.baseUrl) || "");
+  const f = (r) => {
+    a == null || a(r), r && g(r);
+  };
+  if (!l) {
+    t.onReady(async () => {
+      if (!ve())
+        if (n) {
+          const r = await Ee({ licenseKey: n, pluginName: s, baseApiUrl: o });
+          f(r);
+        } else
+          p("The `licenseKey` option not provided");
+    });
+    return;
+  }
+  if (l.licensePlan || l.licenseError) {
+    const r = Te(l);
+    f(r);
+    return;
+  }
+  t.on(ze, (r) => f(r));
 }
-async function Rt(n) {
-  const { licenseKey: t, pluginName: e, baseApiUrl: s } = n;
+const Te = (t) => ({
+  sdkLicense: t.license,
+  license: t.license,
+  error: t.licenseError,
+  plan: t.licensePlan
+});
+async function Ee(t) {
+  const { licenseKey: e, pluginName: s, baseApiUrl: n } = t;
   try {
-    return (await It({
-      baseApiUrl: s,
-      path: `/sdk/${t || "na"}`,
+    return (await we({
+      baseApiUrl: n,
+      path: `/sdk/${e || "na"}`,
       method: "POST",
       params: {
         d: window.location.hostname,
-        pn: e
+        pn: s
       }
     })).result || {};
-  } catch (i) {
-    return console.error("Error during SDK license check:", i), !1;
+  } catch (a) {
+    return console.error("Error during SDK license check:", a), !1;
   }
 }
-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);
+const he = (t) => (e) => {
+  var s;
+  return ((s = e.getAttribute) == null ? void 0 : s.call(e, se)) === t;
+}, Ae = (...t) => (e) => t.some((s) => e.is(s)), Le = (...t) => (e, s) => t.some((n) => s.is(n)), fe = "gjs-plg-", se = "data-type-role", D = class D {
+  constructor(e) {
+    this.config = e;
+  }
+  getSize(e) {
+    var s;
+    return (s = this.config) != null && s.getSize ? this.config.getSize(e) : ne(e.componentColumn, D.CSS_FLEX_BASIS);
+  }
+  setSize(e) {
+    var s;
+    if ((s = this.config) != null && s.setSize)
+      this.config.setSize(e);
     else {
-      const { componentColumn: s, sizeValue: i, partial: a } = t;
-      s.addStyle({ [N.CSS_FLEX_BASIS]: i }, { partial: a });
+      const { componentColumn: n, sizeValue: a, partial: i } = e;
+      n.addStyle({ [D.CSS_FLEX_BASIS]: a }, { partial: i });
     }
   }
 };
-N.CSS_FLEX_BASIS = "flex-basis";
-let W = N;
+D.CSS_FLEX_BASIS = "flex-basis";
+let K = D;
 const j = class j {
-  constructor(t) {
-    this.config = t;
+  constructor(e) {
+    this.config = e;
   }
   isGapSupported() {
     return !0;
   }
-  getGap(t) {
-    var e;
-    return (e = this.config) != null && e.getGap ? this.config.getGap(t) : nt(t.componentRow, j.CSS_GAP);
+  getGap(e) {
+    var s;
+    return (s = this.config) != null && s.getGap ? this.config.getGap(e) : ne(e.componentRow, j.CSS_GAP);
   }
-  setGap(t) {
-    var e;
-    if ((e = this.config) != null && e.setGap)
-      this.config.setGap(t);
+  setGap(e) {
+    var s;
+    if ((s = this.config) != null && s.setGap)
+      this.config.setGap(e);
     else {
-      const { componentRow: s, gapValue: i, partial: a } = t;
-      s.addStyle({ [j.CSS_GAP]: i }, { partial: a });
+      const { componentRow: n, gapValue: a, partial: i } = e;
+      n.addStyle({ [j.CSS_GAP]: a }, { partial: i });
     }
   }
 };
 j.CSS_GAP = "gap";
-let K = j;
-const Y = class Y {
-  constructor(t) {
-    this.config = t;
-  }
-  getParentSize(t) {
-    var a;
-    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(t) {
-    var s;
-    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";
+let J = j;
+const U = class U {
+  constructor(e) {
+    this.config = e;
   }
-};
-Y.CSS_FLEX_DIRECTION = "flex-direction";
-let J = Y;
-const _ = class _ {
-  constructor(t) {
-    this.config = t;
+  getParentSize(e) {
+    var i;
+    if ((i = this.config) != null && i.getParentSize) return this.config.getParentSize(e);
+    const { componentRow: s, isVertical: n } = e, a = s.getEl();
+    return a ? n ? a.clientHeight : a.clientWidth : 0;
   }
-  getSize(t) {
-    var s;
-    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 = e.parent();
+  isLayoutVertical(e) {
+    var n;
+    if ((n = this.config) != null && n.isParentVertical) return this.config.isParentVertical(e);
+    const s = ne(e.componentRow, U.CSS_FLEX_DIRECTION, !0);
+    return s === "column" || s === "column-reverse";
+  }
+};
+U.CSS_FLEX_DIRECTION = "flex-direction";
+let q = U;
+const N = class N {
+  constructor(e) {
+    this.config = e;
+  }
+  getSize(e) {
+    var n;
+    if ((n = this.config) != null && n.getSize) return this.config.getSize(e);
+    const s = e.componentColumn;
+    if (s.is(N.MJML_COLUMN_TYPE)) {
+      const i = s.getAttributes().width;
+      if (i && (i.includes("%") || !isNaN(parseFloat(i))))
+        return parseFloat(i);
+      const o = s.parent();
       return 100 / (o ? o.components().length : 1);
     }
     return 0;
   }
-  setSize(t) {
-    var e;
-    if ((e = this.config) != null && e.setSize)
-      this.config.setSize(t);
+  setSize(e) {
+    var s;
+    if ((s = this.config) != null && s.setSize)
+      this.config.setSize(e);
     else {
-      const { componentColumn: s, sizeValue: i, partial: a } = t;
-      s.is(_.MJML_COLUMN_TYPE) && s.addAttributes({ width: `${parseFloat(i)}%` }, { partial: a });
+      const { componentColumn: n, sizeValue: a, partial: i } = e;
+      n.is(N.MJML_COLUMN_TYPE) && n.addAttributes({ width: `${parseFloat(a)}%` }, { partial: i });
     }
   }
 };
-_.MJML_COLUMN_TYPE = "mj-column";
-let q = _;
-const U = class U {
-  constructor(t) {
-    this.config = t;
+N.MJML_COLUMN_TYPE = "mj-column";
+let Z = N;
+const X = class X {
+  constructor(e) {
+    this.config = e;
   }
   isGapSupported() {
     return !1;
   }
-  getGap(t) {
-    var s;
-    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;
+  getGap(e) {
+    var n;
+    if ((n = this.config) != null && n.getGap) return this.config.getGap(e);
+    const { componentRow: s } = e;
+    if (s.is(X.MJML_SECTION_TYPE)) {
+      const a = s.getAttributes();
+      if (a && a.padding)
+        return parseInt(a.padding, 10) || 0;
     }
     return 0;
   }
-  setGap(t) {
-    var e, s;
-    (s = (e = this.config) == null ? void 0 : e.setGap) == null || s.call(e, t);
+  setGap(e) {
+    var s, n;
+    (n = (s = this.config) == null ? void 0 : s.setGap) == null || n.call(s, e);
   }
 };
-U.MJML_SECTION_TYPE = "mj-section";
-let Z = U;
-class At {
-  constructor(t) {
-    this.config = t;
+X.MJML_SECTION_TYPE = "mj-section";
+let Q = X;
+class Me {
+  constructor(e) {
+    this.config = e;
   }
-  getParentSize(t) {
+  getParentSize(e) {
     var o;
-    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 c = i.querySelectorAll("table");
-      c.length && (a = c[0]);
+    if ((o = this.config) != null && o.getParentSize) return this.config.getParentSize(e);
+    const { componentRow: s, isVertical: n } = e, a = s.getEl();
+    if (!a) return 0;
+    let i = a;
+    if (a.tagName !== "TABLE") {
+      const l = a.querySelectorAll("table");
+      l.length && (i = l[0]);
     }
-    return s ? a.clientHeight : a.clientWidth;
+    return n ? i.clientHeight : i.clientWidth;
   }
-  isLayoutVertical(t) {
-    var e;
-    return (e = this.config) != null && e.isParentVertical ? this.config.isParentVertical(t) : !1;
+  isLayoutVertical(e) {
+    var s;
+    return (s = this.config) != null && s.isParentVertical ? this.config.isParentVertical(e) : !1;
   }
 }
-class H {
+class M {
   constructor() {
     this.handlerCache = /* @__PURE__ */ new Map();
   }
   static getInstance() {
-    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);
+    return M.instance || (M.instance = new M()), M.instance;
+  }
+  getHandlers(e) {
+    const s = `${e.projectType}-${e.disableGapHandler ? "nogap" : "gap"}`;
+    return this.handlerCache.has(s) || ($(e) ? this.handlerCache.set(s, {
+      sizeHandler: new Z(e),
+      gapHandler: new Q(e),
+      parentSizeHandler: new Me(e)
+    }) : this.handlerCache.set(s, {
+      sizeHandler: new K(e),
+      gapHandler: new J(e),
+      parentSizeHandler: new q(e)
+    })), this.handlerCache.get(s);
   }
 }
-function R(n) {
-  return H.getInstance().getHandlers(n);
+function T(t) {
+  return M.getInstance().getHandlers(t);
 }
-const at = (n) => {
-  n.style.display = "none";
-}, ot = (n) => {
-  n.style.display = "block";
-}, 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;
-}, 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)[t] || "";
-  if (s) {
-    let c;
-    return typeof o == "string" ? (c = parseFloat(o.replace(/[^-\d.]/g, "")), isNaN(c) && (c = 0)) : c = Number(o) || 0, c;
+const oe = (t) => {
+  t.style.display = "none";
+}, re = (t) => {
+  t.style.display = "block";
+}, H = (t) => +parseFloat(`${t}`).toFixed(2), $ = (t) => t.projectType === ge.email, $e = (t) => t ? ["top", "bottom"] : ["left", "right"], He = (t) => {
+  const e = t.parent();
+  return e ? e.components().models.indexOf(t) === 0 : !1;
+}, Ve = (t) => {
+  const e = t.parent();
+  if (!e) return !1;
+  const s = e.components().models;
+  return s.indexOf(t) === s.length - 1;
+}, De = (t) => {
+  const e = t.parent();
+  if (!e) return !1;
+  const s = e.components().models;
+  return s.length > 1 && t.index() === s.length - 1;
+}, je = (t, e, s, n) => {
+  const i = t + (s ? e === "top" ? -1 : e === "bottom" ? 1 : 0 : e === "left" ? -1 : e === "right" ? 1 : 0);
+  return i >= 0 && i < n ? i : -1;
+}, O = (t) => t === "top" || t === "bottom", Ne = (t, e) => !!(He(t) && (e === "left" || e === "top") || Ve(t) && (e === "right" || e === "bottom")), Be = (t) => {
+  const e = t.parent();
+  return e ? e.components().models.length > 1 : !1;
+}, le = (t, e) => t === "right" || t === "bottom" ? e > 0 : e < 0, ne = (t, e, s = !1) => {
+  const n = !s, a = t.getEl();
+  if (!a)
+    return n ? 0 : "";
+  const o = window.getComputedStyle(a)[e] || "";
+  if (n) {
+    let l;
+    return typeof o == "string" ? (l = parseFloat(o.replace(/[^-\d.]/g, "")), isNaN(l) && (l = 0)) : l = Number(o) || 0, l;
   }
   return o;
-}, lt = (n, t, e) => {
-  const s = Q({ componentRow: n, isVertical: t }, e), i = n.components().models;
-  return s * (i.length - 1);
-}, 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;
-}, 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);
+}, ce = (t, e, s) => {
+  const n = ee({ componentRow: t, isVertical: e }, s), a = t.components().models;
+  return n * (a.length - 1);
+}, B = (t, e) => T(e).parentSizeHandler.isLayoutVertical({ componentRow: t }), F = (t, e) => T(e).sizeHandler.getSize(t), ee = (t, e) => {
+  if (e != null && e.disableGapHandler) return 0;
+  const { gapHandler: s, parentSizeHandler: n } = T(e);
+  if (!s.isGapSupported()) return 0;
+  const a = s.getGap(t), i = n.getParentSize(t);
+  return a / 100 * i;
+}, te = (t, e) => T(e).parentSizeHandler.getParentSize(t), V = (t, e) => {
+  T(e).sizeHandler.setSize(t);
+}, ye = (t, e) => {
+  const s = F(t, e);
+  V({ ...t, sizeValue: `${s}%`, partial: !1 }, e);
+}, be = (t, e) => {
+  if (e != null && e.disableGapHandler) return;
+  const { gapHandler: s } = T(e);
+  s.isGapSupported() && s.setGap(t);
+}, Fe = (t, e) => {
+  const s = t.getStyle().gap;
+  if (!s) return;
+  const n = t.components().models, a = { componentRow: t, isVertical: B(t, e) };
+  n.map((i) => ye({ ...a, componentColumn: i }, e)), be({ ...a, gapValue: String(s), partial: !1 }, e);
 };
-function Bt(n, t) {
-  const { Blocks: e } = n, { typeColumn: s, typeRow: i, blocks: a } = t;
-  if (a === !1 || M(t)) return;
+function _e(t, e) {
+  const { Blocks: s } = t, { typeColumn: n, typeRow: a, blocks: i } = e;
+  if (i === !1 || $(e)) return;
   const o = (r) => ({
-    type: i,
-    components: r.map((g) => ({
-      type: s,
-      style: { "flex-basis": `${g}%` }
+    type: a,
+    components: r.map((h) => ({
+      type: n,
+      style: { "flex-basis": `${h}%` }
     }))
-  }), 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("-")}`,
+  }), l = (r) => `<div class="gs-block-item__flex-row" style="display: flex; height: 1.75rem; width: 100%; flex-wrap: nowrap; gap: 0.5rem;">
+      ${r.map((h) => `<div style="flex-basis: ${h}%; border-color: currentColor; border-width: 2px; border-radius: 0.12rem;"></div>`).join("")}
+    </div>`, p = (r, h) => ({
+    id: `flex-row-${h.join("-")}`,
     label: r,
     category: "Layout",
     select: !0,
     full: !0,
     attributes: { class: "gs-block-item__flex gs-utl-w-full" },
-    media: c(g),
-    content: o(g)
-  }), u = [
+    media: l(h),
+    content: o(h)
+  }), g = [
     p("1 Column", [100]),
     p("2 Columns 50/50", [50, 50]),
     p("2 Columns 25/75", [25, 75]),
@@ -358,16 +371,16 @@ function Bt(n, t) {
     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));
+  ], f = Re(i) ? i({ blocks: g }) : g;
+  return f.forEach((r) => s.add(r.id, r)), () => {
+    f.forEach((r) => s.remove(r.id));
   };
 }
-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),
+const Oe = (t, e) => {
+  const { Components: s } = t, { typeRow: n, typeColumn: a, extendTypeColumn: i } = e, o = `${fe}${a}`, p = !!a && !!s.getType(a) && !i;
+  if (!(!a || p || $(e)))
+    return s.addType(a, {
+      isComponent: he(a),
       model: {
         defaults: {
           name: "Column",
@@ -375,8 +388,8 @@ const Ft = (n, t) => {
           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: $t(s),
-          attributes: { [et]: i },
+          draggable: Le(n),
+          attributes: { [se]: a },
           styles: `
           .${o} {
             flex-grow: 1;
@@ -385,21 +398,21 @@ const Ft = (n, t) => {
         }
       }
     }), () => {
-      e.removeType(i);
+      s.removeType(a);
     };
-}, 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),
+}, ke = (t, e) => {
+  const { Components: s } = t, { typeRow: n, typeColumn: a, extendTypeRow: i } = e, o = `${fe}${n}`, p = !!n && !!s.getType(n) && !i;
+  if (!(!n || p || $(e)))
+    return s.addType(n, {
+      isComponent: he(n),
       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: { [et]: s },
-          droppable: Tt(i),
+          attributes: { [se]: n },
+          droppable: Ae(a),
           traits: [
             // {
             //   type: 'number',
@@ -423,7 +436,7 @@ const Ft = (n, t) => {
               type: "checkbox",
               name: "snap",
               label: "Enable Snap",
-              default: t.snapEnabled,
+              default: e.snapEnabled,
               changeProp: !0
             },
             {
@@ -433,7 +446,7 @@ const Ft = (n, t) => {
               min: 1,
               max: 12,
               step: 1,
-              default: t.snapDivisions,
+              default: e.snapDivisions,
               changeProp: !0
             }
           ],
@@ -455,163 +468,163 @@ const Ft = (n, t) => {
         }
       }
     }), () => {
-      e.removeType(s);
+      s.removeType(n);
     };
-}, Xt = "flexComponent", Yt = A.startup;
-class Ut {
+}, Ue = "flexComponent", Xe = L.startup;
+class Ye {
   constructor() {
     this.resizableChildTypes = /* @__PURE__ */ new Set(), this.gapAdjustableParentTypes = /* @__PURE__ */ new Set(), this.typeRelationships = /* @__PURE__ */ new Map();
   }
-  registerResizableChild(t) {
-    this.resizableChildTypes.add(t);
+  registerResizableChild(e) {
+    this.resizableChildTypes.add(e);
   }
-  registerGapAdjustableParent(t) {
-    this.gapAdjustableParentTypes.add(t);
+  registerGapAdjustableParent(e) {
+    this.gapAdjustableParentTypes.add(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);
+  registerTypeRelationship(e, s) {
+    this.typeRelationships.has(e) || this.typeRelationships.set(e, /* @__PURE__ */ new Set()), this.typeRelationships.get(e).add(s), this.registerResizableChild(s), this.registerGapAdjustableParent(e);
   }
-  isResizableChild(t) {
-    return this.resizableChildTypes.has(t.get("type"));
+  isResizableChild(e) {
+    return this.resizableChildTypes.has(e.get("type"));
   }
-  isGapAdjustableParent(t) {
-    return this.gapAdjustableParentTypes.has(t.get("type"));
+  isGapAdjustableParent(e) {
+    return this.gapAdjustableParentTypes.has(e.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;
+  isValidRelationship(e, s) {
+    const n = e.get("type"), a = s.get("type");
+    return this.typeRelationships.has(n) ? this.typeRelationships.get(n).has(a) : !1;
   }
 }
-class kt {
-  constructor(t, e, s) {
-    this.editor = t, this.registry = e, this.opts = s, this.resizeState = /* @__PURE__ */ new WeakMap();
-  }
-  getState(t) {
-    return this.resizeState.has(t) || this.resizeState.set(t, {}), this.resizeState.get(t);
-  }
-  clearState(t) {
-    return this.resizeState.delete(t);
-  }
-  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 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);
+class We {
+  constructor(e, s, n) {
+    this.editor = e, this.registry = s, this.opts = n, this.resizeState = /* @__PURE__ */ new WeakMap();
+  }
+  getState(e) {
+    return this.resizeState.has(e) || this.resizeState.set(e, {}), this.resizeState.get(e);
+  }
+  clearState(e) {
+    return this.resizeState.delete(e);
+  }
+  startResize(e, s, n) {
+    const { opts: a } = this, i = this.getState(e);
+    i.direction = s, i.startX = n.clientX, i.startY = n.clientY, i.resizing = !0, i.lastSnappedPercent = void 0;
+    const o = e.parent();
+    if (!o || !this.registry.isValidRelationship(o, e)) return;
+    i.snapEnabled = o.get("snap") ?? a.snapEnabled, i.snapDivisions = o.get("snap-divisions") ?? a.snapDivisions ?? 12;
+    const l = o.components().models, p = l.findIndex((h) => h.cid === e.cid), g = B(o, a), f = je(p, s, g, l.length);
+    f !== -1 && (i.adjacentIdx = f);
+    const r = { componentColumn: e, componentRow: o, isVertical: g };
+    if (i.startPercent = F(r, a), typeof i.adjacentIdx < "u") {
+      const h = l[i.adjacentIdx];
+      i.neighborStartPercent = F({ ...r, componentColumn: h }, a);
     }
   }
-  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(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(t, e, s) {
-    const i = this.getState(t), a = t.parent(), { opts: o } = this;
-    if (!a) return;
-    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 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)}%` },
+  updateResizeByDelta(e, s, n) {
+    const a = this.getState(e), i = e.parent();
+    !a.resizing || !i || (a.snapEnabled ? this.updateSnapResize(e, s, n) : this.updateContinuesResize(e, s, n));
+  }
+  finishResize(e) {
+    const s = e.parent(), n = s == null ? void 0 : s.components().models, a = { componentRow: s, isVertical: !!s && B(s, this.opts) };
+    n == null || n.forEach((i) => ye({ ...a, componentColumn: i }, this.opts)), this.clearState(e);
+  }
+  updateContinuesResize(e, s, n) {
+    const a = this.getState(e), i = e.parent(), { opts: o } = this;
+    if (!i) return;
+    const l = o.minItemPercent ?? 0, p = O(s), g = te({ componentRow: i, isVertical: p }, o), f = ce(i, p, this.opts), h = 100 - f / g * 100, I = n / (g - f) * h, { startPercent: b = 0, neighborStartPercent: x = 0 } = a, v = { componentRow: i, isVertical: p, componentColumn: e, partial: !0 }, G = le(s, n) ? b + Math.abs(I) : b - Math.abs(I);
+    if (typeof a.adjacentIdx < "u") {
+      const m = i.components().models[a.adjacentIdx], R = b + x, z = R - l, c = Math.min(z, Math.max(l, G)), u = R - c;
+      V({ ...v, sizeValue: `${H(c)}%` }, o), V(
+        { ...v, componentColumn: m, sizeValue: `${H(u)}%` },
         o
       );
     } else {
-      const b = Math.max(c, Math.min(g, v));
-      V({ ...x, sizeValue: `${L(b)}%` }, o);
+      const m = Math.max(l, Math.min(h, G));
+      V({ ...v, sizeValue: `${H(m)}%` }, o);
     }
   }
-  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);
+  updateSnapResize(e, s, n) {
+    const a = this.getState(e), i = e.parent(), o = O(s), l = te({ componentRow: i, isVertical: o }, this.opts), p = ce(i, o, this.opts), g = l - p, f = n / g * 100, r = le(s, n), { startPercent: h = 0, snapDivisions: I = 12 } = a, b = r ? h + Math.abs(f) : h - Math.abs(f), x = 100 / I, v = Math.floor(b / x) * x, G = Math.ceil(b / x) * x, m = Math.abs(G - b), R = Math.abs(b - v), z = x * 0.2, S = m < R ? G : v;
+    if (S > 0 && S < 100 && (m < z || R < z) && a.lastSnappedPercent !== S) {
+      a.lastSnappedPercent = S;
+      let y = Math.abs(S - h) / 100 * g;
+      (r && (s === "left" || s === "top") || !r && (s === "right" || s === "bottom")) && (y = -y), this.updateContinuesResize(e, s, y);
+    } else m >= z && R >= z && (a.lastSnappedPercent = void 0);
   }
 }
-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),
+class Ke {
+  constructor(e, s, n) {
+    this.editor = e, this.registry = s, this.opts = n;
+  }
+  updateGapByDelta(e, s, n, a) {
+    if (!this.registry.isGapAdjustableParent(e)) return;
+    const { opts: i } = this, o = Math.max(0, n + s), l = te({ componentRow: e, isVertical: a }, i), p = o / l * 100, g = e.components().models, f = g.length - 1, r = { componentRow: e, isVertical: a }, h = g.reduce(
+      (z, S) => z + F({ ...r, componentColumn: S }, i),
       0
-    ), S = 100 - p * f, C = a.minItemPercent || 5;
-    if (S < C * u.length)
+    ), b = 100 - p * f, x = i.minItemPercent || 5;
+    if (b < x * g.length)
       return;
-    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);
+    const G = 100 - f * p, m = h - G, R = { componentRow: e, isVertical: a, partial: !0 };
+    g.map((z) => {
+      const S = F({ ...r, componentColumn: z }, i), c = S - S / h * m;
+      V({ ...R, componentColumn: z, sizeValue: `${H(c)}%` }, i);
+    }), be({ ...R, gapValue: `${H(p)}%` }, i);
   }
-  finishGapAdjust(t) {
-    Dt(t, this.opts);
+  finishGapAdjust(e) {
+    Fe(e, this.opts);
   }
 }
-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);
+class Je {
+  constructor(e, s, n) {
+    this.editor = e, this.registry = s, this.opts = n, this.resizeHandler = new We(e, s, n), this.gapHandler = new Ke(e, s, n);
   }
-  startResize(t, e, s) {
-    this.resizeHandler.startResize(t, e, s);
+  startResize(e, s, n) {
+    this.resizeHandler.startResize(e, s, n);
   }
-  updateResizeByDelta(t, e, s) {
-    this.resizeHandler.updateResizeByDelta(t, e, s);
+  updateResizeByDelta(e, s, n) {
+    this.resizeHandler.updateResizeByDelta(e, s, n);
   }
-  finishResize(t) {
-    this.resizeHandler.finishResize(t);
+  finishResize(e) {
+    this.resizeHandler.finishResize(e);
   }
-  updateGapByDelta(t, e, s, i) {
-    this.gapHandler.updateGapByDelta(t, e, s, i);
+  updateGapByDelta(e, s, n, a) {
+    this.gapHandler.updateGapByDelta(e, s, n, a);
   }
-  finishGapAdjust(t) {
-    this.gapHandler.finishGapAdjust(t);
+  finishGapAdjust(e) {
+    this.gapHandler.finishGapAdjust(e);
   }
-  canResize(t) {
-    const e = t.parent();
-    return e ? this.registry.isValidRelationship(e, t) : !1;
+  canResize(e) {
+    const s = e.parent();
+    return s ? this.registry.isValidRelationship(s, e) : !1;
   }
-  canAdjustGap(t) {
-    return this.registry.isGapAdjustableParent(t);
+  canAdjustGap(e) {
+    return this.registry.isGapAdjustableParent(e);
   }
 }
-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 = {
+const k = "gs-flex-spots", pe = `${k}__handle-size`, qe = `${k}__handle-gap`;
+function Ze(t, e) {
+  const { Canvas: s } = t, n = "flex-resize-spot";
+  let a, i, o, l, p = null, g = null;
+  const f = new Ye(), r = new Je(t, f, e), h = () => {
+    var c;
+    a = document.createElement("div"), a.className = k, a.style.display = "none", i = document.createElement("div"), i.className = `${k}__handles`, i.style.position = "absolute", i.style.pointerEvents = "none", i.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 y = d, h = O(y);
-      m.className = `${ct} ${ct}-${y} gjs-resizer-h gjs-cv-unscale`, m.style.cssText = `
+    }, Object.entries(o).forEach(([u, y]) => {
+      const P = u, d = O(P);
+      y.className = `${pe} ${pe}-${P} gjs-resizer-h gjs-cv-unscale`, y.style.cssText = `
         pointer-events: all;
         position: absolute;
         z-index: 1;
-        cursor: ${h ? "ns-resize" : "ew-resize"};
-        ${h ? "left: 50%;" : "top: 50%;"}
-        ${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 = `
+        cursor: ${d ? "ns-resize" : "ew-resize"};
+        ${d ? "left: 50%;" : "top: 50%;"}
+        ${P === "left" ? "left: 0px;" : ""}
+        ${P === "right" ? "right: 0px;" : ""}
+        ${P === "top" ? "top: 0px;" : ""}
+        ${P === "bottom" ? "bottom: 0px;" : ""}
+      `, y.addEventListener("pointerdown", I(P)), i.appendChild(y);
+    }), !e.disableGapHandler && !$(e) && (l = document.createElement("div"), l.className = qe, l.style.cssText = `
         position: absolute;
         background-color: var(--gs-theme-cl-cmp-bg1, #3b97e3);
         border-width: 2px;
@@ -621,98 +634,98 @@ function qt(n, t) {
         pointer-events: all;
         max-width: 3rem;
         max-height: 3rem;
-      `, c.addEventListener("pointerdown", S()), a.appendChild(c)), i.append(a), (l = e.getSpotsEl()) == null || l.appendChild(i);
-  }, E = (l) => (d) => {
+      `, l.addEventListener("pointerdown", b()), i.appendChild(l)), a.append(i), (c = s.getSpotsEl()) == null || c.appendChild(a);
+  }, I = (c) => (u) => {
     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(), $ = (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);
+    u.stopPropagation(), u.preventDefault(), r.startResize(p, c, u);
+    const y = u.clientX, P = u.clientY;
+    u.target.setPointerCapture(u.pointerId);
+    const d = (E) => {
+      const C = t.Canvas.getZoomMultiplier(), A = (E.clientX - y) * C, _ = (E.clientY - P) * C, Y = O(c) ? _ : A;
+      r.updateResizeByDelta(p, c, Y);
+    }, w = () => {
+      r.finishResize(p), u.target.releasePointerCapture(u.pointerId), document.removeEventListener("pointermove", d), document.removeEventListener("pointerup", w);
     };
-    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 = () => {
-      r.finishGapAdjust(d), l.target.releasePointerCapture(l.pointerId), document.removeEventListener("pointermove", T), document.removeEventListener("pointerup", G);
+    document.addEventListener("pointermove", d), document.addEventListener("pointerup", w);
+  }, b = () => (c) => {
+    if (!g) return;
+    const u = g;
+    c.stopPropagation(), c.preventDefault();
+    const y = B(u, e), P = ee({ componentRow: u, isVertical: y }, e), d = c.clientX, w = c.clientY;
+    c.target.setPointerCapture(c.pointerId);
+    const E = (A) => {
+      const _ = t.Canvas.getZoomMultiplier(), Y = y ? (A.clientY - w) * _ : (A.clientX - d) * _;
+      r.updateGapByDelta(u, Y, P, y);
+    }, C = () => {
+      r.finishGapAdjust(u), c.target.releasePointerCapture(c.pointerId), document.removeEventListener("pointermove", E), document.removeEventListener("pointerup", C);
     };
-    document.addEventListener("pointermove", T), document.addEventListener("pointerup", G);
-  }, 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));
+    document.addEventListener("pointermove", E), document.addEventListener("pointerup", C);
+  }, x = (c) => {
+    const u = c.component;
+    if (!u || !a || (p = u, g = u.parent(), !g)) return;
+    const y = g;
+    re(a);
+    const P = c.getStyle();
+    i && Object.assign(i.style, P);
+    const d = B(y, e), w = $e(d);
+    if (Object.values(o).forEach(oe), w.forEach((C) => {
+      if (Ne(u, C)) return;
+      const A = o[C];
+      re(A);
+    }), T(e).gapHandler.isGapSupported() && l && Be(u)) {
+      const C = ee({ componentRow: y, isVertical: d }, e);
+      v(C, d, De(u));
     }
-  }, x = (l, d, m = !1) => {
-    const y = t.gapHandleSize, h = c.style;
-    if (d) {
-      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";
+  }, v = (c, u, y = !1) => {
+    const P = e.gapHandleSize, d = l.style;
+    if (u) {
+      d.height = `${P}px`;
+      const w = l.offsetHeight;
+      y ? (d.top = `-${(c + w) / 2}px`, d.bottom = "") : (d.bottom = `-${(c + w) / 2}px`, d.top = ""), d.width = "50%", d.left = "50%", d.transform = "translateX(-50%)", d.cursor = "row-resize";
     } else {
-      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";
+      d.width = `${P}px`;
+      const w = l.offsetWidth;
+      y ? (d.left = `-${(c + w) / 2}px`, d.right = "") : (d.right = `-${(c + w) / 2}px`, d.left = ""), d.height = "50%", d.top = "50%", d.transform = "translateY(-50%)", d.cursor = "col-resize";
     }
-  }, 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);
+  }, G = () => {
+    a && (oe(a), p = null, g = null);
+  }, m = () => {
+    s.removeSpots({ type: n });
+    const c = t.getSelected(), u = c == null ? void 0 : c.parent();
+    c && u && f.isValidRelationship(u, c) ? s.addSpot({ type: n, component: c }) : G();
+  }, R = () => {
+    const c = s.getSpots().filter((u) => u.type === n)[0];
+    c && x(c);
+  }, z = (c, u) => {
+    f.registerTypeRelationship(c, u);
   };
-  n.onReady(() => {
-    g(), M(t) ? P("mj-section", "mj-column") : P(t.typeRow, t.typeColumn);
+  t.onReady(() => {
+    h(), $(e) ? z("mj-section", "mj-column") : z(e.typeRow, e.typeColumn);
   });
-  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 S = "component:toggled";
+  return t.on(s.events.spot, R), t.on(S, m), () => {
+    t.off(s.events.spot, R), t.off(S, m);
   };
 }
-const Zt = function(n, t = {}) {
-  const e = {
+const Qe = function(t, e = {}) {
+  const s = {
     typeRow: "flex-row",
     typeColumn: "flex-column",
     gapHandleSize: 3,
     snapDivisions: 12,
     minItemPercent: 5,
-    ...t
-  }, s = [Ot(n, e), Ft(n, e)], i = qt(n, e), a = Bt(n, e);
-  Et({
-    editor: n,
-    licenseKey: e.licenseKey,
-    plan: Yt,
-    pluginName: Xt,
+    ...e
+  }, n = [ke(t, s), Oe(t, s)], a = Ze(t, s), i = _e(t, s);
+  Ie({
+    editor: t,
+    licenseKey: s.licenseKey,
+    plan: Xe,
+    pluginName: Ue,
     cleanup: () => {
-      s.forEach((o) => o == null ? void 0 : o()), i(), a == null || a();
+      n.forEach((o) => o == null ? void 0 : o()), a(), i == null || i();
     }
   });
-}, Qt = Gt(Zt);
+}, et = Ce(Qe);
 export {
-  Qt as default
+  et as default
 };