@grapesjs/studio-sdk-plugins 1.0.38-rc.0 → 1.0.39-rc.0

package/dist/presetBlockLibrary/index.es.js

@@ -0,0 +1,1408 @@
+var L = /* @__PURE__ */ ((e) => (e.globalStyles = "globalStyles", e.globalData = "globalData", e))(L || {});
+const R = "app.grapesjs.com", O = "app-stage.grapesjs.com", Y = "app2.grapesjs.com", U = "app-stage2.grapesjs.com", T = [
+  R,
+  Y,
+  O,
+  U,
+  "localhost",
+  "127.0.0.1",
+  ".local-credentialless.webcontainer.io",
+  // For stackblitz.com demos
+  ".local.webcontainer.io",
+  // For stackblitz.com demos
+  "-sandpack.codesandbox.io",
+  // For Sandpack demos
+  ".claudemcpcontent.com",
+  // For Claude mcp app
+  ".web-sandbox.oaiusercontent.com"
+  // For OpenAI mcp app
+], _ = "license:check:end", J = () => typeof window < "u", K = ({
+  isDev: e,
+  isStage: i,
+  isPlatform: o
+}) => `${e ? "" : `https://${i ? O : R}`}/${o ? "platform-api" : "api"}`, X = (e = {}) => {
+  const { width: i = 300, height: o, text: r = "IMAGE", bg: a = "777", fg: s = "white" } = e, d = o ? `x${o}` : "";
+  return `https://placehold.co/${i}${d}/${a}/${s}.png?text=${r}`;
+}, Z = () => {
+  if (!J()) return "";
+  const { hostname: e } = window.location;
+  if (e) return e;
+  try {
+    return window.parent.location.hostname || "";
+  } catch {
+    return "";
+  }
+}, Q = () => {
+  const e = Z();
+  return !!e && (T.includes(e) || T.some((i) => e.endsWith(i)));
+};
+function w(e) {
+  return typeof e == "function";
+}
+const W = (e) => !!e.Components.getType("mjml");
+async function tt({
+  path: e,
+  baseApiUrl: i,
+  method: o = "GET",
+  headers: r = {},
+  params: a,
+  body: s
+}) {
+  const l = `${i || K({ isDev: !1, isStage: !1 })}${e}`, c = {
+    method: o,
+    headers: {
+      "Content-Type": "application/json",
+      ...r
+    }
+  };
+  s && (c.body = JSON.stringify(s));
+  const m = a ? new URLSearchParams(a).toString() : "", g = m ? `?${m}` : "", p = await fetch(`${l}${g}`, c);
+  if (!p.ok)
+    throw new Error(`HTTP error! status: ${p.status}`);
+  return p.json();
+}
+var f = /* @__PURE__ */ ((e) => (e.free = "free", e.startup = "startup", e.business = "business", e.enterprise = "enterprise", e))(f || {}), h = /* @__PURE__ */ ((e) => (e.toastAdd = "studio:toastAdd", e.toastRemove = "studio:toastRemove", e.dialogOpen = "studio:dialogOpen", e.dialogClose = "studio:dialogClose", e.dialogExportCode = "studio:dialogExportCode", e.dialogImportCode = "studio:dialogImportCode", e.openEditCode = "studio:openEditCode", e.openBlocks = "studio:openBlocks", e.appendComponent = "studio:appendComponent", e.sidebarLeftSet = "studio:sidebarLeft:set", e.sidebarLeftGet = "studio:sidebarLeft:get", e.sidebarLeftToggle = "studio:sidebarLeft:toggle", e.sidebarRightSet = "studio:sidebarRight:set", e.sidebarRightGet = "studio:sidebarRight:get", e.sidebarRightToggle = "studio:sidebarRight:toggle", e.sidebarTopSet = "studio:sidebarTop:set", e.sidebarTopGet = "studio:sidebarTop:get", e.sidebarTopToggle = "studio:sidebarTop:toggle", e.sidebarBottomSet = "studio:sidebarBottom:set", e.sidebarBottomGet = "studio:sidebarBottom:get", e.sidebarBottomToggle = "studio:sidebarBottom:toggle", e.symbolAdd = "studio:symbolAdd", e.symbolDetach = "studio:symbolDetach", e.symbolOverride = "studio:symbolOverride", e.symbolPropagateStyles = "studio:propagateStyles", e.getPagesConfig = "studio:getPagesConfig", e.setPagesConfig = "studio:setPagesConfig", e.getPageSettings = "studio:getPageSettings", e.setPageSettings = "studio:setPageSettings", e.clearPage = "studio:clearPage", e.projectFiles = "studio:projectFiles", e.validateCode = "studio:validateCode", e.canvasReload = "studio:canvasReload", e.getBlocksPanel = "studio:getBlocksPanel", e.setBlocksPanel = "studio:setBlocksPanel", e.getStateContextMenu = "studio:getStateContextMenu", e.setStateContextMenu = "studio:setStateContextMenu", e.contextMenuComponent = "studio:contextMenuComponent", e.layoutAdd = "studio:layoutAdd", e.layoutRemove = "studio:layoutRemove", e.layoutToggle = "studio:layoutToggle", e.layoutUpdate = "studio:layoutUpdate", e.layoutGet = "studio:layoutGet", e.layoutConfigGet = "studio:layoutConfigGet", e.layoutConfigSet = "studio:layoutConfigSet", e.layoutComponentAdd = "studio:layoutComponentAdd", e.layoutComponentGet = "studio:layoutComponentGet", e.layoutComponentRemove = "studio:layoutComponentRemove", e.layoutComponentRender = "studio:layoutComponentRender", e.getStateTheme = "studio:getStateTheme", e.setStateTheme = "studio:setStateTheme", e.settings = "studio:settings", e.assetProviderGet = "studio:assetProviderGet", e.assetProviderAdd = "studio:assetProviderAdd", e.assetProviderRemove = "studio:assetProviderRemove", e.fontGet = "studio:fontGet", e.fontAdd = "studio:fontAdd", e.fontRemove = "studio:fontRemove", e.fontManagerOpen = "studio:fontManagerOpen", e.menuFontLoad = "studio:menuFontLoad", e.toggleStateDataSource = "studio:toggleStateDataSource", e.getStateDataSource = "studio:getStateDataSource", e.dataSourceSetGlobalData = "studio:dataSourceSetGlobalData", e.dataSourceSetImporter = "studio:dataSourceSetImporter", e.dataSourceSetExporter = "studio:dataSourceSetExporter", e.setDragAbsolute = "studio:setDragAbsolute", e))(h || {});
+const A = {
+  [f.free]: 0,
+  [f.startup]: 10,
+  [f.business]: 20,
+  [f.enterprise]: 30
+};
+function et(e, i) {
+  const o = e;
+  return o.init = (r) => {
+    const a = (s) => e(s, r);
+    return a.__gjsPluginId = i, a;
+  }, o;
+}
+const ot = (e, i) => /* @__PURE__ */ et(e, i);
+async function it({
+  editor: e,
+  plan: i,
+  pluginName: o,
+  licenseKey: r,
+  onLicenseCheckResponse: a,
+  cleanup: s
+}) {
+  let d = "", l;
+  const c = (p) => {
+    console.warn("Cleanup plugin:", o, "Reason:", p), s(e, o);
+  }, m = (p = {}) => {
+    var k;
+    const { error: j, sdkLicense: V } = p, b = (k = p.plan) == null ? void 0 : k.category;
+    if (!(V || p.license) || j)
+      c(j || "Invalid license");
+    else if (b) {
+      const F = A[i], N = A[b];
+      F > N && c({ pluginRequiredPlan: i, licensePlan: b });
+    }
+  };
+  e.Commands.has(h.settings) && (l = e.runCommand(h.settings), d = (l == null ? void 0 : l.baseUrl) || "");
+  const g = (p) => {
+    a == null || a(p), p && m(p);
+  };
+  if (!l) {
+    e.onReady(async () => {
+      if (!Q())
+        if (r) {
+          const p = await at({ licenseKey: r, pluginName: o, baseApiUrl: d });
+          g(p);
+        } else
+          c("The `licenseKey` option not provided");
+    });
+    return;
+  }
+  if (l.licensePlan || l.licenseError) {
+    const p = nt(l);
+    g(p);
+    return;
+  }
+  e.on(_, (p) => g(p));
+}
+const nt = (e) => ({
+  sdkLicense: e.license,
+  license: e.license,
+  error: e.licenseError,
+  plan: e.licensePlan
+});
+async function at(e) {
+  const { licenseKey: i, pluginName: o, baseApiUrl: r } = e;
+  try {
+    return (await tt({
+      baseApiUrl: r,
+      path: `/sdk/${i || "na"}`,
+      method: "POST",
+      params: {
+        d: window.location.hostname,
+        pn: o
+      }
+    })).result || {};
+  } catch (a) {
+    return console.error("Error during SDK license check:", a), !1;
+  }
+}
+const rt = (e, i) => (
+  // deffered cleanup in case it's called immediatly
+  e.onReady(() => e.Plugins.remove(i))
+), I = "presetBlockLibrary", lt = f.startup, st = (e) => {
+  var i;
+  return e.is(
+    "mj-body"
+    /* body */
+  ) && !!((i = e.parent()) != null && i.is("mjml"));
+}, n = {
+  header: {
+    id: "preset-block-library-header",
+    open: !1,
+    label: "Header",
+    icon: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M21 3a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm-1 2H4v14h16zm-2 2v2H6V7z"/></svg>'
+  },
+  hero: {
+    id: "preset-block-library-hero",
+    open: !1,
+    label: "Hero",
+    icon: '<svg viewBox="0 0 24 24"><path d="M4 20h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2m0-9h16v7H4z"/></svg>'
+  },
+  content: {
+    id: "preset-block-library-content",
+    open: !1,
+    label: "Content",
+    icon: '<svg viewBox="0 0 24 24"><path d="M21 3H3c-.6 0-1 .4-1 1v6c0 .6.4 1 1 1h18c.6 0 1-.4 1-1V4c0-.6-.4-1-1-1m0 10H3c-.6 0-1 .4-1 1v6c0 .6.4 1 1 1h18c.6 0 1-.4 1-1v-6c0-.6-.4-1-1-1"/></svg>'
+  },
+  cta: {
+    id: "preset-block-library-cta",
+    open: !1,
+    label: "Call to Action",
+    icon: '<svg viewBox="0 0 24 24"><path d="M13 5a4 4 0 0 1 2 7.46v-1.22A3.01 3.01 0 0 0 13 6a3 3 0 0 0-2 5.24v1.22A4 4 0 0 1 13 5m7 15.5a1.55 1.55 0 0 1-1.5 1.5H13q-.59 0-1-.43l-4-4.2.74-.77a1 1 0 0 1 .76-.32h.2L12 18V9c0-.55.45-1 1-1s1 .45 1 1v4.47l1.21.13 3.94 2.19c.53.24.85.77.85 1.35zM20 2H4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h4v-2H4V4h16v8h-2v2h2v-.04l.04.04c1.09 0 1.96-.91 1.96-2V4a2 2 0 0 0-2-2"/></svg>'
+  },
+  gallery: {
+    id: "preset-block-library-gallery",
+    open: !1,
+    label: "Gallery",
+    icon: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M4 5h7v14H4V5m9 0h7v6h-7V5m0 8h7v6h-7v-6Z"/></svg>'
+  },
+  people: {
+    id: "preset-block-library-people",
+    open: !1,
+    label: "People",
+    icon: '<svg viewBox="0 0 24 24"><path d="M16 17v2H2v-2s0-4 7-4 7 4 7 4m-3.5-9.5A3.5 3.5 0 1 0 9 11a3.5 3.5 0 0 0 3.5-3.5m3.44 5.5A5.3 5.3 0 0 1 18 17v2h4v-2s0-3.63-6.06-4M15 4a3.4 3.4 0 0 0-1.93.59 5 5 0 0 1 0 5.82A3.4 3.4 0 0 0 15 11a3.5 3.5 0 0 0 0-7"/></svg>'
+  },
+  footer: {
+    id: "preset-block-library-footer",
+    open: !1,
+    label: "Footer",
+    icon: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M21 3a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm-1 2H4v14h16zm-2 10v2H6v-2z"/></svg>'
+  }
+}, q = ({ editor: e, content: i }, o) => {
+  var c;
+  if (typeof i != "string" || !W(e))
+    return;
+  const r = e.getWrapper(), a = r == null ? void 0 : r.findFirstType("mj-head"), s = r == null ? void 0 : r.findFirstType(st), d = !!(o != null && o.withGlobalStyles), l = d ? ` ${((c = s == null ? void 0 : s.__attrToString) == null ? void 0 : c.call(s)) || ""}` : ' background-color="#E7E7E7"';
+  return {
+    mjml: `<mjml>${d && (a == null ? void 0 : a.toHTML()) || ""}<mj-body${l}>${i}</mj-body></mjml>`,
+    width: 700
+  };
+}, M = {
+  id: "preset-block-library",
+  label: "Preset Blocks",
+  icon: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M13,3V9H21V3M13,21H21V11H13M3,21H11V15H3M3,13H11V3H3V13Z" /></svg>',
+  preview: (e) => q(e)
+}, pt = (e) => e.withGlobalStyles ? {
+  ...M,
+  preview: (i) => q(i, e)
+} : M, x = X({
+  width: 320,
+  height: 96,
+  text: "Logo",
+  bg: "e2e8f0",
+  fg: "334155"
+}), ct = ({
+  id: e,
+  label: i,
+  category: o,
+  library: r
+}) => ({
+  id: e,
+  label: i,
+  category: o,
+  library: r,
+  select: !0,
+  full: !0,
+  media: o.icon
+}), t = {
+  spacing: {
+    section: "10px 0px 10px 0px"
+  },
+  colors: {
+    primary: "#cf549e",
+    secondary: "#7c3aed",
+    white: "#ffffff",
+    text: {
+      heading: "#0f172a",
+      body: "#475569"
+    },
+    bg: {
+      section: "#ffffff",
+      transparent: "#00000000"
+    }
+  },
+  radii: {
+    s: "8px",
+    m: "16px",
+    l: "32px",
+    card: "10px",
+    pill: "999px"
+  },
+  buttons: {
+    primary: 'background-color="#cf549e" color="#ffffff"',
+    secondary: 'background-color="#7c3aed" color="#ffffff"'
+  },
+  attrs: {
+    bgTransparent: 'background-color="#00000000"',
+    bgSection: 'background-color="#ffffff"'
+  }
+}, dt = "https://images.unsplash.com/photo-1713171158509-f2a6582581a0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3NzE5NjR8MHwxfHNlYXJjaHw0MXx8YWJzdHJhY3QlMjBwdXJwbGUlMjB3YXZlc3xlbnwwfHx8fDE3ODAxNjIzNTd8MA&ixlib=rb-4.1.0&q=80&w=1080", mt = "https://images.unsplash.com/photo-1637611331620-51149c7ceb94?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3NzE5NjR8MHwxfHNlYXJjaHw3M3x8YWJzdHJhY3QlMjBwdXJwbGV8ZW58MHx8fHwxNzgwMjk5NDUxfDA&ixlib=rb-4.1.0&q=80&w=1080", u = "https://images.unsplash.com/photo-1670189577367-2c6ef31a4b8c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3NzE5NjR8MHwxfHNlYXJjaHwxNXx8YWJzdHJhY3QlMjBwdXJwbGV8ZW58MHx8fHwxNzgwMjk5NDMyfDA&ixlib=rb-4.1.0&q=80&w=1080", gt = "https://images.unsplash.com/photo-1607371059636-720f2c169e82?q=80&w=928&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", D = "https://images.unsplash.com/photo-1674247489394-524fef63c0ff?q=80&w=928&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", $ = "https://images.unsplash.com/photo-1729119578980-91838d6014d9?q=80&w=1160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", H = "https://images.unsplash.com/photo-1729119579013-decd9c61c395?q=80&w=1160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", xt = "https://images.unsplash.com/photo-1729119578960-45095ebc3b8a?q=80&w=1160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", ft = "https://images.unsplash.com/photo-1729119578920-240c46516e91?q=80&w=1160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", E = "https://images.unsplash.com/photo-1659468525744-314c75acdd38?q=80&w=2064&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", jt = "https://images.unsplash.com/photo-1739978291558-6dbdd5b9f9f8?q=80&w=2064&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", ut = "https://images.unsplash.com/photo-1698429894924-ee93fc16279a?q=80&w=2200&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", ht = "https://images.unsplash.com/photo-1698430484227-006b70bc83cb?q=80&w=2000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", bt = "https://images.unsplash.com/photo-1698429894931-fa699270a2fa?q=80&w=2200&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", y = "https://images.unsplash.com/photo-1638248308805-d488b66ea854?q=80&w=1160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", B = "https://images.unsplash.com/photo-1706720097169-b4120bb97a30?q=80&w=1160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", S = "https://images.unsplash.com/photo-1706720093772-be76963b01a3?q=80&w=1160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", v = "https://images.unsplash.com/photo-1716032936139-33cb6cd84dc0?q=80&w=1160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", z = "https://images.unsplash.com/photo-1566319743996-123ad0f44a68?q=80&w=1160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", P = "https://images.unsplash.com/photo-1706466615511-18622e5ef756?q=80&w=1160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", C = "https://images.unsplash.com/photo-1527980965255-d3b416303d12?q=80&w=1160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", G = "https://images.unsplash.com/photo-1485893086445-ed75865251e0?q=80&w=1160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", wt = "https://images.unsplash.com/photo-1586299485759-f62264d6b63f?q=80&w=1160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", $t = "https://images.unsplash.com/photo-1595897950118-1037962bc920?q=80&w=1160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", yt = "https://images.unsplash.com/photo-1642060603505-e716140d45d2?q=80&w=1160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", vt = (e) => {
+  const i = (o) => e.withGlobalStyles ? "" : ` ${o}`;
+  return {
+    presetEmailHeaderLogo: {
+      label: "Centered Logo",
+      category: n.header,
+      getContent: ({
+        getImageUrl: o
+      }) => `<mj-section background-color="${t.colors.bg.section}" padding="${t.spacing.section}">
+      <mj-column>
+        <mj-image src="${o(x)}" alt="Brand logo" width="160px"/>
+      </mj-column>
+    </mj-section>`
+    },
+    presetEmailHeaderLogoNav: {
+      label: "Logo + Menu",
+      category: n.header,
+      getContent: ({
+        getImageUrl: o
+      }) => `<mj-section background-color="${t.colors.bg.section}" padding="${t.spacing.section}">
+      <mj-column width="35%" vertical-align="middle">
+        <mj-image src="${o(x)}" alt="Brand logo" width="107px" align="left" />
+      </mj-column>
+      <mj-column width="65%" vertical-align="middle">
+        <mj-navbar align="right" base-url="https://example.com">
+          <mj-navbar-link color="#475569" font-size="13px" href="/shop">Shop</mj-navbar-link>
+          <mj-navbar-link color="#475569" font-size="13px" href="/stories">Stories</mj-navbar-link>
+          <mj-navbar-link color="#475569" font-size="13px" href="/support">Support</mj-navbar-link>
+        </mj-navbar>
+      </mj-column>
+    </mj-section>`
+    },
+    presetEmailHeaderLogoCta: {
+      label: "Logo + Button",
+      category: n.header,
+      getContent: ({
+        getImageUrl: o
+      }) => `<mj-section background-color="${t.colors.bg.section}" padding="${t.spacing.section}">
+      <mj-column vertical-align="middle">
+        <mj-image src="${o(x)}" alt="Brand logo" width="120px" align="left" />
+      </mj-column>
+      <mj-column vertical-align="middle">
+        <mj-button align="right" ${t.buttons.secondary}>
+          Get started
+        </mj-button>
+      </mj-column>
+    </mj-section>`
+    },
+    presetEmailHeaderSocialLogo: {
+      label: "Logo + Socials",
+      category: n.header,
+      getContent: ({
+        getImageUrl: o
+      }) => `<mj-section background-color="${t.colors.bg.section}" padding="${t.spacing.section}">
+      <mj-column vertical-align="middle">
+        <mj-social align="left" mode="horizontal">
+          <mj-social-element name="facebook" background-color="${t.colors.secondary}"></mj-social-element>
+          <mj-social-element name="linkedin" background-color="${t.colors.secondary}"></mj-social-element>
+          <mj-social-element name="youtube" background-color="${t.colors.secondary}"></mj-social-element>
+        </mj-social>
+      </mj-column>
+      <mj-column vertical-align="middle">
+        <mj-image src="${o(x)}" alt="Brand logo" width="95px" align="right"/>
+      </mj-column>
+    </mj-section>`
+    },
+    presetEmailHeaderStackedMenu: {
+      label: "Stacked Logo + Menu",
+      category: n.header,
+      getContent: ({ getImageUrl: o }) => `<mj-wrapper>
+      <mj-section background-color="#ffffff" padding="0px">
+        <mj-column>
+          <mj-image src="${o(x)}" alt="Brand logo" width="160px" align="center" />
+          <mj-divider border-width="1px" border-color="#e7e7e7"></mj-divider>
+        </mj-column>
+      </mj-section>
+      <mj-section background-color="#ffffff" padding="0px">
+        <mj-column>
+          <mj-navbar align="center" base-url="https://example.com">
+            <mj-navbar-link color="#475569" font-size="13px" href="/shop">Shop</mj-navbar-link>
+            <mj-navbar-link color="#475569" font-size="13px" href="/stories">Stories</mj-navbar-link>
+            <mj-navbar-link color="#475569" font-size="13px" href="/support">Support</mj-navbar-link>
+          </mj-navbar>
+        </mj-column>
+      </mj-section>
+    </mj-wrapper>`
+    },
+    presetEmailHeroCenteredCta: {
+      label: "Centered Hero + CTA",
+      category: n.hero,
+      getContent: () => `<mj-section padding="${t.spacing.section}">
+      <mj-column padding="40px 20px" border-radius="20px"${i('background-color="#ffffff"')}>
+        <mj-text padding="5px 0" align="center" font-size="12px" font-weight="700" text-transform="uppercase" letter-spacing="1px"${i('color="#1e293b"')}>
+          Fresh release
+        </mj-text>
+        <mj-text align="center" font-size="32px" font-weight="700" line-height="40px"${i('color="#0f172a"')}>
+          Launch polished campaigns
+        </mj-text>
+        <mj-text align="center" font-size="16px" line-height="24px"${i('color="#334155"')}>
+          Start with ready-made sections, swap in your content, and ship a clean newsletter without building every block from scratch.
+        </mj-text>
+        <mj-spacer height="30px"></mj-spacer>
+        <mj-button align="center" font-weight="700" padding="0" inner-padding="14px 28px" ${i('background-color="#8b5cf6" color="#ffffff" border-radius="999px"')}>
+          Explore the collection
+        </mj-button>
+      </mj-column>
+    </mj-section>`
+    },
+    presetEmailHeroBackground: {
+      label: "Background Hero",
+      category: n.hero,
+      getContent: ({ getImageUrl: o }) => `<mj-wrapper>
+        <mj-section
+          background-url="${o(dt)}"
+          background-size="cover"
+          background-repeat="no-repeat"
+          background-color="#c7a5c9"
+          padding="110px 24px 96px 24px"
+          border-radius="${t.radii.card}"
+        >
+          <mj-column background-color="#00000000">
+            <mj-text color="#ffffff" align="center" font-weight="700" font-size="12px" line-height="30px" letter-spacing="2px" padding="0">
+              SEASONAL LAUNCH
+            </mj-text>
+            <mj-text align="center" color="#9767c4" font-size="50px" font-weight="700" line-height="52px" letter-spacing="1px" padding="10px 0">
+              UP TO 70% OFF
+            </mj-text>
+            <mj-text color="#ffffff" align="center" font-size="24px" line-height="32px" padding="0">
+              Limited-time collection
+            </mj-text>
+            <mj-button font-size="16px" border-radius="999px" padding="30px 0 0 0" inner-padding="20px 40px" font-weight="700" letter-spacing="1px" background-color="#9767c4" color="#ffffff">
+              SHOP NOW
+            </mj-button>
+          </mj-column>
+        </mj-section>
+      </mj-wrapper>`
+    },
+    presetEmailHeroSplitBackground: {
+      label: "Split Background Hero",
+      category: n.hero,
+      getContent: ({ getImageUrl: o }) => `<mj-wrapper>
+      <mj-section
+        padding="48px 24px"
+        background-url="${o(mt)}"
+        background-color="#c7a5c9"
+        background-size="cover"
+        background-repeat="no-repeat"
+        background-color="#1e293b"
+        border-radius="${t.radii.card}"
+      >
+        <mj-column ${t.attrs.bgTransparent}></mj-column>
+        <mj-column ${t.attrs.bgTransparent}>
+          <mj-text font-size="40px" line-height="48px" color="#ffffff" font-weight="700" padding="0">
+            Spend & Save
+          </mj-text>
+          <mj-text padding="20px 0" color="#ffffff" line-height="24px">
+            Spotlight a campaign with image-led energy while keeping the key message and CTA anchored in a readable column.
+          </mj-text>
+          <mj-button background-color="#ffffff" color="#cf549e" width="100%" border-radius="999px" padding="30px 0 0 0" font-weight="700" letter-spacing="1px">
+            SHOP NOW
+          </mj-button>
+        </mj-column>
+      </mj-section>
+    </mj-wrapper>`
+    },
+    presetEmailHeroImageCopy: {
+      label: "Image + Copy Hero",
+      category: n.hero,
+      getContent: ({ getImageUrl: o }) => `<mj-wrapper>
+      <mj-section background-color="#ffffff" padding="5px" border-radius="20px">
+        <mj-column vertical-align="middle">
+          <mj-image src="${o(u)}" alt="Campaign preview" padding="0" border-radius="18px" />
+        </mj-column>
+        <mj-column vertical-align="middle" padding="0 20px">
+          <mj-text color="#0f172a" font-size="28px" font-weight="700" line-height="36px" padding="12px 0">
+            Put your next story front
+          </mj-text>
+          <mj-text color="#475569" line-height="23px" padding="10px 0 20px 0">
+            Combine imagery, concise copy, and a single call to action to guide subscribers toward your most important announcement.
+          </mj-text>
+          <mj-button align="left" background-color="#0f172a" color="#ffffff" border-radius="999px" inner-padding="14px 26px" padding="20px 0 0 0">
+            Read the update
+          </mj-button>
+        </mj-column>
+      </mj-section>
+    </mj-wrapper>`
+    },
+    presetEmailHeroMenuBottom: {
+      label: "Hero + Menu Bottom",
+      category: n.hero,
+      getContent: ({ getImageUrl: o }) => `<mj-wrapper>
+      <mj-section padding="0" background-color="#8b5cf6" border-radius="10px 10px 0px 0px">
+        <mj-column ${t.attrs.bgTransparent} vertical-align="middle" padding="40px 30px">
+          <mj-image align="left" src="${o(x)}" alt="Brand logo" width="100px" padding="0"></mj-image>
+          <mj-text padding="25px 0 0 0" align="left" font-size="52px" font-weight="700" line-height="60px" color="#ffffff">
+            50% OFF
+          </mj-text>
+          <mj-text padding="0" align="left" font-size="32px" line-height="42px" font-weight="700" color="#ffffff">
+            selected products this week
+          </mj-text>
+        </mj-column>
+        <mj-column ${t.attrs.bgTransparent}>
+          <mj-image src="${o(gt)}" alt="Promotional image" padding="0"></mj-image>
+        </mj-column>
+      </mj-section>
+      <mj-section padding="0">
+        <mj-column border-radius="0px 0px 10px 10px" background-color="#7c3aed">
+          <mj-navbar base-url="https://example.com" align="center">
+            <mj-navbar-link font-weight="700" text-transform="uppercase" padding="20px 15px" color="#ffffff" href="/home">Home</mj-navbar-link>
+            <mj-navbar-link font-weight="700" text-transform="uppercase" padding="20px 15px" color="#ffffff" href="/blog">Blog</mj-navbar-link>
+            <mj-navbar-link font-weight="700" text-transform="uppercase" padding="20px 15px" color="#ffffff" href="/contact">Contact</mj-navbar-link>
+          </mj-navbar>
+        </mj-column>
+      </mj-section>
+    </mj-wrapper>`
+    },
+    presetEmailHeroMenuTop: {
+      label: "Hero + Menu Top",
+      category: n.hero,
+      getContent: ({ getImageUrl: o }) => `<mj-wrapper>
+      <mj-section padding="20px 24px" background-color="#ffffff" border-radius="10px 10px 0px 0px">
+        <mj-column vertical-align="middle" width="22%">
+          <mj-image src="${o(x)}" alt="Brand logo" padding="0"></mj-image>
+        </mj-column>
+        <mj-column ${t.attrs.bgTransparent} vertical-align="middle" width="50%">
+          <mj-navbar align="center">
+            <mj-navbar-link color="#101828" font-size="14px" font-weight="700" href="/home">Home</mj-navbar-link>
+            <mj-navbar-link color="#101828" font-size="14px" font-weight="700" href="/about">About</mj-navbar-link>
+            <mj-navbar-link color="#101828" font-size="14px" font-weight="700" href="/services">Services</mj-navbar-link>
+          </mj-navbar>
+        </mj-column>
+        <mj-column vertical-align="middle" width="28%">
+          <mj-text padding="10px 15px" align="center" font-size="14px" font-weight="700" color="#ffffff" container-background-color="#414141">
+            UPDATES
+          </mj-text>
+        </mj-column>
+      </mj-section>
+      <mj-section padding="0" background-color="#f4f2f8" border-radius="0px 0px 10px 10px">
+        <mj-column ${t.attrs.bgTransparent}>
+          <mj-image src="${o(u)}" alt="Campaign image" padding="0"></mj-image>
+        </mj-column>
+        <mj-column ${t.attrs.bgTransparent} vertical-align="middle" padding="40px 30px">
+          <mj-text padding="0" align="left" font-size="44px" line-height="48px" color="#d0549e" font-weight="700">
+            Digital
+          </mj-text>
+          <mj-text padding="0" align="left" font-size="38px" line-height="42px" font-weight="700">
+            Marketing
+          </mj-text>
+          <mj-text padding="20px 0" align="left" font-size="14px" line-height="24px">
+            Pair a navigational masthead with a crisp two-column hero for agency intros, event emails, or editorial launches.
+          </mj-text>
+          <mj-button font-size="16px" font-weight="700" padding="10px 0" align="left" inner-padding="15px 30px" background-color="#d0549e" color="#ffffff">
+            Get started
+          </mj-button>
+        </mj-column>
+      </mj-section>
+    </mj-wrapper>`
+    },
+    presetEmailHeroFullWidthBg: {
+      label: "Full Width Background Hero",
+      category: n.hero,
+      getContent: ({ getImageUrl: o }) => `<mj-section
+      padding="48px 12px"
+      background-url="${o(u)}"
+      background-size="cover"
+      background-repeat="no-repeat"
+      background-color="#cfaac4"
+      full-width="full-width"
+    >
+      <mj-column background-color="#ffffffab" padding="40px 30px" border-radius="10px" border="2px solid #f4d9eb" width="90%">
+        <mj-text padding="0px 0px 20px 0px" align="left" font-size="38px" line-height="50px" font-weight="700">
+          Your <span style="color: #d0549e;">Conference</span>
+        </mj-text>
+        <mj-text padding="10px 0" align="left" font-size="30px" line-height="36px" font-weight="700">
+          22-23 September
+        </mj-text>
+        <mj-text padding="0 0 20px 0" align="left" font-size="16px" line-height="24px">
+          Don't miss out on these limited-time events happening across the city!<br/>
+          Grand Horizon Hotel, 123 Innovation Boulevard, Tech City.
+        </mj-text>
+        <mj-button ${t.buttons.primary} align="left" font-size="16px" padding="10px 0" border-radius="999px" inner-padding="15px 30px">
+          Purchase ticket
+        </mj-button>
+      </mj-column>
+    </mj-section>`
+    },
+    presetEmailContentIntro: {
+      label: "Content Intro",
+      category: n.content,
+      getContent: () => `<mj-section background-color="#ffffff" padding="24px">
+      <mj-column ${t.attrs.bgTransparent}>
+        <mj-text color="${t.colors.primary}" font-size="26px" font-weight="700" line-height="32px" padding="0">
+          A simple intro section
+        </mj-text>
+        <mj-text color="${t.colors.text.body}" line-height="30px" padding="0 0 12px 0">
+          Use this section to set the tone, explain what changed, or frame the key message before readers move into product details and supporting content.
+        </mj-text>
+        <mj-divider border-color="#dbe4f0" border-width="1px" padding="12px 0 0 0" />
+      </mj-column>
+    </mj-section>`
+    },
+    presetEmailContentTwoColumn: {
+      label: "Content Two Column",
+      category: n.content,
+      getContent: () => `<mj-section background-color="#ffffff" padding="24px">
+      <mj-column ${t.attrs.bgTransparent} padding="0 12px 12px 0">
+        <mj-text color="${t.colors.primary}" font-size="14px" font-weight="700" line-height="28px" padding="0">Label 1</mj-text>
+        <mj-text color="${t.colors.text.heading}" font-size="20px" font-weight="700" line-height="28px" padding="0 0 10px 0">
+          Editorial note
+        </mj-text>
+        <mj-text color="${t.colors.text.body}" font-size="15px" line-height="24px" padding="0">
+          Share context, a product update, or a short story that helps readers understand why this message matters right now.
+        </mj-text>
+      </mj-column>
+      <mj-column ${t.attrs.bgTransparent} padding="0">
+      <mj-text color="${t.colors.primary}" font-size="14px" font-weight="700" line-height="28px" padding="0">Label 2</mj-text>
+        <mj-text color="${t.colors.text.heading}" font-size="20px" font-weight="700" line-height="28px" padding="0 0 10px 0">
+          Key takeaway
+        </mj-text>
+        <mj-text color="${t.colors.text.body}" font-size="15px" line-height="24px" padding="0">
+          Pair it with supporting details, release notes, customer-facing benefits, or a concise summary that encourages the next click.
+        </mj-text>
+      </mj-column>
+    </mj-section>`
+    },
+    presetEmailContentCenterImageColumns: {
+      label: "Center Image Columns",
+      category: n.content,
+      getContent: ({ getImageUrl: o }) => `<mj-section padding="50px 24px 24px" background-color="#ffffff">
+      <mj-column width="33%">
+        <mj-text color="${t.colors.text.heading}" padding="0 15px 5px" align="right" font-size="16px" font-weight="600">
+          24/7 support
+        </mj-text>
+        <mj-text color="${t.colors.text.body}" padding="0 15px 30px" align="right" font-size="13px" line-height="22px">
+          Explain one service or capability on the left to frame the main visual.
+        </mj-text>
+        <mj-text color="${t.colors.text.heading}" padding="0 15px 5px" align="right" font-size="16px" font-weight="600">
+          Cloud sync
+        </mj-text>
+        <mj-text color="${t.colors.text.body}" padding="0 15px 30px" align="right" font-size="13px" line-height="22px">
+          A second supporting point balances the composition.
+        </mj-text>
+      </mj-column>
+      <mj-column width="34%">
+        <mj-image src="${o(u)}" alt="Feature" padding="0 0 30px" border-radius="${t.radii.s}"></mj-image>
+      </mj-column>
+      <mj-column width="33%">
+        <mj-text color="${t.colors.text.heading}" padding="0 15px 5px" align="left" font-size="16px" font-weight="600">
+          Free updates
+        </mj-text>
+        <mj-text color="${t.colors.text.body}" padding="0 15px 30px" align="left" font-size="13px" line-height="22px">
+          The right column works well for platform highlights and benefits.
+        </mj-text>
+        <mj-text color="${t.colors.text.heading}" padding="0 15px 5px" align="left" font-size="16px" font-weight="600">
+          Multi-platform
+        </mj-text>
+        <mj-text color="${t.colors.text.body}" padding="0 15px" align="left" font-size="13px" line-height="22px">
+          Keep each paragraph short so the layout stays clean and easy to scan.
+        </mj-text>
+      </mj-column>
+    </mj-section>`
+    },
+    presetEmailContentRowImageArticle: {
+      label: "Row Image Article",
+      category: n.content,
+      getContent: ({ getImageUrl: o }) => `<mj-wrapper>
+      <mj-section ${t.attrs.bgSection} padding="0" border-radius="${t.radii.m}">
+        <mj-column ${t.attrs.bgTransparent} width="40%">
+          <mj-image src="${o($)}" alt="Article" padding="0"></mj-image>
+        </mj-column>
+        <mj-column ${t.attrs.bgTransparent} vertical-align="top" width="60%" padding="20px">
+          <mj-text color="${t.colors.secondary}" font-size="12px" font-weight="700" letter-spacing="1px" padding="0">
+            LABEL
+          </mj-text>
+          <mj-text color="${t.colors.text.heading}" padding="10px 0" align="left" font-size="24px" line-height="34px" font-weight="600">
+            Article heading
+          </mj-text>
+          <mj-text color="${t.colors.text.body}" align="left" font-size="14px" line-height="26px" padding="0">
+            Use the article row for updates, editorial roundups, or product explainers.
+          </mj-text>
+          <mj-button ${t.attrs.bgTransparent} color="${t.colors.text.heading}" font-weight="700" font-size="12px" align="left"
+            border="2px solid ${t.colors.text.heading}" padding="40px 0px 0px 0px">VIEW DETAILS →</mj-button>
+        </mj-column>
+      </mj-section>
+    </mj-wrapper>`
+    },
+    presetEmailContentAlternatingRowImageArticles: {
+      label: "Alternating Row Image Articles",
+      category: n.content,
+      getContent: ({ getImageUrl: o }) => `<mj-wrapper gap="12px">
+      <mj-section padding="16px 0" border-radius="${t.radii.m}" ${t.attrs.bgSection}>
+        <mj-column ${t.attrs.bgTransparent} width="40%" vertical-align="top" padding="10px 20px">
+          <mj-image src="${o(H)}" border-radius="${t.radii.m}" padding="0" alt="Article visual"></mj-image>
+        </mj-column>
+        <mj-column ${t.attrs.bgTransparent} width="60%" vertical-align="top" padding="10px 20px">
+          <mj-text color="${t.colors.secondary}" font-size="12px" font-weight="700" letter-spacing="1px" padding="0">
+            FEATURE STORY
+          </mj-text>
+          <mj-text color="${t.colors.text.heading}" padding="10px 0" align="left" font-size="24px" line-height="34px" font-weight="600">
+            First Article
+          </mj-text>
+          <mj-text color="${t.colors.text.body}" align="left" font-size="14px" line-height="26px" padding="0">
+            Use alternating article rows for updates, editorial roundups, or product explainers that need more room than a standard card.
+          </mj-text>
+          <mj-button ${t.attrs.bgTransparent} color="${t.colors.text.heading}" font-weight="700" font-size="12px" align="left" padding="40px 0px 0px 0px" inner-padding="0">
+            READ MORE →
+          </mj-button>
+        </mj-column>
+      </mj-section>
+      <mj-section padding="16px 0" border-radius="${t.radii.m}" ${t.attrs.bgSection}>
+        <mj-column ${t.attrs.bgTransparent} width="60%" vertical-align="top" padding="10px 20px">
+          <mj-text color="${t.colors.secondary}" font-size="12px" font-weight="700" letter-spacing="1px" padding="0">
+            UPDATE
+          </mj-text>
+          <mj-text color="${t.colors.text.heading}" padding="10px 0" align="left" font-size="24px" line-height="34px" font-weight="600">
+            Second Article
+          </mj-text>
+          <mj-text color="${t.colors.text.body}" align="left" font-size="14px" line-height="26px" padding="0">
+            The mirrored second row keeps longer campaign emails from feeling repetitive while preserving a consistent structure.
+          </mj-text>
+          <mj-button ${t.attrs.bgTransparent} color="${t.colors.text.heading}" font-weight="700" font-size="12px" align="left" padding="40px 0px 0px 0px" inner-padding="0">
+            READ MORE →
+          </mj-button>
+        </mj-column>
+        <mj-column ${t.attrs.bgTransparent} width="40%" vertical-align="top" padding="10px 20px">
+          <mj-image src="${o($)}" border-radius="${t.radii.m}" padding="0" alt="Article visual"></mj-image>
+        </mj-column>
+      </mj-section>
+    </mj-wrapper>`
+    },
+    presetEmailContentGridArticles: {
+      label: "Grid Articles",
+      category: n.content,
+      getContent: ({ getImageUrl: o }) => `<mj-wrapper>
+      <mj-section padding="0" border-radius="${t.radii.m} ${t.radii.m} 0 0" ${t.attrs.bgSection}>
+        <mj-column vertical-align="middle">
+          <mj-image src="${o(xt)}" alt="Destination one" padding="0"></mj-image>
+        </mj-column>
+        <mj-column ${t.attrs.bgTransparent} vertical-align="middle" padding="34px 24px">
+          <mj-text color="${t.colors.secondary}" font-size="12px" font-weight="700" letter-spacing="1px" padding="0 0 10px">
+            LABEL ONE
+          </mj-text>
+          <mj-text align="left" font-size="22px" line-height="28px" letter-spacing="1px" padding="0">
+            First Article
+          </mj-text>
+          <mj-text padding="8px 0 10px" align="left" font-size="14px" line-height="24px">
+            Pair each image with a short destination, story, or offer summary inside a balanced half-and-half layout.
+          </mj-text>
+          <mj-button border-radius="${t.radii.m}" background-color="${t.colors.secondary}" font-size="12px" font-weight="700" letter-spacing="1px" align="left" padding="30px 0 0 0" width="100%">
+            Book now
+          </mj-button>
+        </mj-column>
+      </mj-section>
+      <mj-section padding="0" border-radius="0 0 ${t.radii.m} ${t.radii.m}" ${t.attrs.bgSection}>
+        <mj-column ${t.attrs.bgTransparent} vertical-align="middle" padding="34px 24px">
+          <mj-text color="${t.colors.secondary}" font-size="12px" font-weight="700" letter-spacing="1px" padding="0 0 10px">
+            LABEL TWO
+          </mj-text>
+          <mj-text align="left" font-size="22px" line-height="28px" letter-spacing="1px" padding="0">
+            Second Article
+          </mj-text>
+          <mj-text padding="8px 0 10px" align="left" font-size="14px" line-height="24px">
+            The second row can invert the order to create a tidy editorial grid without needing a dedicated card component.
+          </mj-text>
+          <mj-button border-radius="${t.radii.m}" background-color="${t.colors.secondary}" font-size="12px" font-weight="700" letter-spacing="1px" align="left" padding="30px 0 0 0" width="100%">
+            Explore the offer
+          </mj-button>
+        </mj-column>
+        <mj-column vertical-align="middle">
+          <mj-image src="${o(ft)}" alt="Destination two" padding="0"></mj-image>
+        </mj-column>
+      </mj-section>
+    </mj-wrapper>`
+    },
+    presetEmailContentSplitArticles: {
+      label: "Split Articles",
+      category: n.content,
+      getContent: ({ getImageUrl: o }) => `<mj-wrapper>
+      <mj-section padding="0" ${t.attrs.bgSection}>
+        <mj-column ${t.attrs.bgTransparent}>
+          <mj-image src="${o(u)}" alt="Feature image" padding="0 0 30px"></mj-image>
+          <mj-text padding="0px 10px 10px 10px" color="${t.colors.primary}" font-size="12px" font-weight="700" letter-spacing="1px">
+            LABEL TWO
+          </mj-text>
+          <mj-text padding="0 10px" align="left" font-size="30px" line-height="36px" font-weight="700">
+            Your studio
+          </mj-text>
+          <mj-text padding="15px 10px" align="left" font-size="14px" line-height="24px">
+            Combine image-led storytelling and a short CTA inside a split layout that still feels more editorial than a standard promo row.
+          </mj-text>
+          <mj-button border-radius="${t.radii.m}" background-color="${t.colors.primary}" font-size="14px" font-weight="700" align="left" padding="10px">
+            Read more
+          </mj-button>
+        </mj-column>
+        <mj-column ${t.attrs.bgTransparent} padding="30px 0 0">
+          <mj-text padding="0px 10px 10px 10px" color="${t.colors.primary}" font-size="12px" font-weight="700" letter-spacing="1px">
+            LABEL ONE
+          </mj-text>
+          <mj-text padding="0 10px" align="left" font-size="30px" line-height="36px" font-weight="700">
+            Creative team
+          </mj-text>
+          <mj-text padding="15px 10px" align="left" font-size="14px" line-height="24px">
+            The mirrored second half lets you highlight another department, service, or offer while keeping the section cohesive.
+          </mj-text>
+          <mj-button border-radius="${t.radii.m}" background-color="${t.colors.primary}" font-size="14px" font-weight="700" align="left" padding="10px">
+            Explore more
+          </mj-button>
+          <mj-image src="${o(D)}" alt="Image" padding="30px 0 0"></mj-image>
+        </mj-column>
+      </mj-section>
+    </mj-wrapper>`
+    },
+    presetEmailContentColumnImageArticle: {
+      label: "Column Image Article",
+      category: n.content,
+      getContent: ({ getImageUrl: o }) => `<mj-wrapper>
+      <mj-section padding="5px" border-radius="${t.radii.m}" ${t.attrs.bgSection}>
+        <mj-column ${t.attrs.bgTransparent}>
+          <mj-image src="${o(E)}" border-radius="${t.radii.m}" padding="0" alt="Article"/>
+          <mj-text padding="24px 12px 12px" font-size="12px" font-weight="700" letter-spacing="1px" color="${t.colors.primary}">
+            LABEL ONE
+          </mj-text>
+          <mj-text color="${t.colors.text.heading}" padding="0px 12px" font-size="28px" font-weight="700" line-height="36px">
+            Put your next story front
+          </mj-text>
+          <mj-text padding="12px 12px 24px" color="${t.colors.text.body}" line-height="26px">
+            Combine imagery, concise copy, and a single call to action to guide subscribers toward your most important announcement.
+          </mj-text>
+          <mj-button align="left" border-radius="999px" padding="12px 12px 24px" inner-padding="12px 32px" ${t.buttons.primary}>
+            READ THE UPDATE
+          </mj-button>
+        </mj-column>
+      </mj-section>
+    </mj-wrapper>`
+    },
+    presetEmailContentTwoColumnImageArticles: {
+      label: "Two Column Image Articles",
+      category: n.content,
+      getContent: ({ getImageUrl: o }) => `<mj-section padding="16px 0">
+      <mj-column border-radius="${t.radii.s}" padding="${t.radii.s}" width="49%" ${t.attrs.bgSection}>
+        <mj-image src="${o(E)}" border-radius="${t.radii.s}" padding="0" alt="Article"/>
+        <mj-text color="${t.colors.primary}" padding="24px 12px 12px" font-size="12px" font-weight="700" letter-spacing="1px">
+          LABEL ONE
+        </mj-text>
+        <mj-text color="${t.colors.text.heading}" padding="0px 12px" font-size="18px" font-weight="700" line-height="36px">
+          First Article
+        </mj-text>
+        <mj-text color="${t.colors.text.body}" padding="12px 12px 24px 12px" line-height="26px">
+          Combine imagery, concise copy, and a single call to action to guide subscribers.
+        </mj-text>
+        <mj-button border-radius="${t.radii.s}" align="center" inner-padding="12px 32px" padding="12px" ${t.buttons.primary}>
+          Read the update
+        </mj-button>
+      </mj-column>
+      <mj-column border-radius="${t.radii.s}" padding="${t.radii.s}" width="2%" ${t.attrs.bgTransparent}></mj-column>
+      <mj-column border-radius="${t.radii.s}" padding="${t.radii.s}" width="49%" ${t.attrs.bgSection}>
+        <mj-image src="${o(jt)}" border-radius="${t.radii.s}" padding="0" alt="Article"/>
+        <mj-text color="${t.colors.primary}" padding="24px 12px 12px" font-size="12px" font-weight="700" letter-spacing="1px">
+          LABEL TWO
+        </mj-text>
+        <mj-text color="${t.colors.text.heading}" padding="0px 12px" font-size="18px" font-weight="700" line-height="36px">
+          Second Article
+        </mj-text>
+        <mj-text color="${t.colors.text.body}" padding="12px 12px 24px 12px" line-height="26px">
+          Product update, or a short story that helps readers understand why this message.
+        </mj-text>
+        <mj-button border-radius="${t.radii.s}" align="center" inner-padding="12px 32px" padding="12px" ${t.buttons.primary}>
+          Read the update
+        </mj-button>
+      </mj-column>
+    </mj-section>`
+    },
+    presetEmailContentThreeColumnImageArticles: {
+      label: "Three Column Image Articles",
+      category: n.content,
+      getContent: ({ getImageUrl: o }) => `<mj-section padding="16px 0">
+      <mj-column border-radius="${t.radii.s}" padding="${t.radii.s}" width="32%" ${t.attrs.bgSection}>
+        <mj-image src="${o(ut)}" border-radius="${t.radii.s}" padding="0" alt="Article"/>
+        <mj-text color="${t.colors.secondary}" padding="12px 12px 8px" font-size="10px" font-weight="700" letter-spacing="1px">
+          LABEL ONE
+        </mj-text>
+        <mj-text color="${t.colors.text.heading}" padding="0px 12px" font-size="16px" font-weight="700" line-height="24px">
+          First Article
+        </mj-text>
+        <mj-text color="${t.colors.text.body}" padding="12px" line-height="24px" font-size="14px">
+          Combine imagery, concise copy, and a single call to action.
+        </mj-text>
+        <mj-button border-radius="${t.radii.l}" align="center" inner-padding="${t.radii.s}" padding="${t.radii.s}" width="100%" ${t.buttons.secondary}>
+          OPEN
+        </mj-button>
+      </mj-column>
+      <mj-column border-radius="${t.radii.s}" padding="${t.radii.s}" width="2%" ${t.attrs.bgTransparent}></mj-column>
+      <mj-column border-radius="${t.radii.s}" padding="${t.radii.s}" width="32%" ${t.attrs.bgSection}>
+        <mj-image src="${o(ht)}" border-radius="${t.radii.s}" padding="0" alt="Article"/>
+        <mj-text color="${t.colors.secondary}" padding="12px 12px 8px" font-size="10px" font-weight="700" letter-spacing="1px">
+          LABEL TWO
+        </mj-text>
+        <mj-text color="${t.colors.text.heading}" padding="0px 12px" font-size="16px" font-weight="700" line-height="24px">
+          Second Article
+        </mj-text>
+        <mj-text color="${t.colors.text.body}" padding="12px" line-height="24px" font-size="14px">
+          Short story that helps understand the message.
+        </mj-text>
+        <mj-button border-radius="${t.radii.l}" align="center" inner-padding="${t.radii.s}" padding="${t.radii.s}" width="100%" ${t.buttons.secondary}>
+          READ
+        </mj-button>
+      </mj-column>
+      <mj-column border-radius="${t.radii.s}" padding="${t.radii.s}" width="2%" ${t.attrs.bgTransparent}></mj-column>
+      <mj-column border-radius="${t.radii.s}" padding="${t.radii.s}" width="32%" ${t.attrs.bgSection}>
+        <mj-image src="${o(bt)}" border-radius="${t.radii.s}" padding="0" alt="Article"/>
+        <mj-text color="${t.colors.secondary}" padding="12px 12px 8px" font-size="10px" font-weight="700" letter-spacing="1px">
+          LABEL THREE
+        </mj-text>
+        <mj-text color="${t.colors.text.heading}" padding="0px 12px" font-size="16px" font-weight="700" line-height="24px">
+          Third Article
+        </mj-text>
+        <mj-text color="${t.colors.text.body}" padding="12px" line-height="24px" font-size="14px">
+          Round out the trio with the last supporting point.
+        </mj-text>
+        <mj-button border-radius="${t.radii.l}" align="center" inner-padding="${t.radii.s}" padding="${t.radii.s}" width="100%" ${t.buttons.secondary}>
+          MORE
+        </mj-button>
+      </mj-column>
+    </mj-section>`
+    },
+    presetEmailTwoColumnProducts: {
+      label: "Two Column Products",
+      category: n.content,
+      getContent: ({ getImageUrl: o }) => `<mj-section padding="12px" ${t.attrs.bgSection}>
+      <mj-column padding="15px" ${t.attrs.bgTransparent}>
+        <mj-image src="${o($)}" alt="Product" border-radius="${t.radii.s}" padding="${t.radii.s}"></mj-image>
+        <mj-text padding="15px 10px 5px" align="left" line-height="24px" letter-spacing="1px">
+          <b style="background-color:${t.colors.secondary};border-radius:${t.radii.l};color:white;padding:6px 12px;font-size:10px;">Category</b>
+        </mj-text>
+        <mj-text padding="0 10px" align="left" font-size="26px" line-height="34px" color="${t.colors.text.heading}" font-weight="900">
+          Product one
+        </mj-text>
+        <mj-text padding="10px" align="left" font-size="14px" line-height="24px" color="${t.colors.text.body}">
+          Use this format for featured products, bundles, or collections.
+        </mj-text>
+        <mj-text padding="0 10px 5px" align="left" font-size="14px" color="${t.colors.text.body}">FROM</mj-text>
+        <mj-text padding="0 10px 20px" align="left" font-size="28px" line-height="32px" color="${t.colors.secondary}" font-weight="700">
+          $129 <s style="font-size:16px;font-weight:300;color:${t.colors.text.body}">$289</s>
+        </mj-text>
+        <mj-button background-color="${t.colors.text.heading}" color="#ffffff" font-size="14px" font-weight="700" letter-spacing="1px" padding="0 10px" width="100%" border-radius="${t.radii.s}">
+          Buy now
+        </mj-button>
+      </mj-column>
+      <mj-column padding="15px" ${t.attrs.bgTransparent}>
+        <mj-image src="${o(H)}" alt="Product" border-radius="${t.radii.s}" padding="${t.radii.s}"></mj-image>
+        <mj-text padding="15px 10px 5px" align="left" line-height="24px" letter-spacing="1px">
+          <b style="background-color:${t.colors.secondary};border-radius:${t.radii.l};color:white;padding:6px 12px;font-size:10px;">Category</b>
+        </mj-text>
+        <mj-text padding="0 10px" align="left" font-size="26px" line-height="34px" color="${t.colors.text.heading}" font-weight="900">
+          Product two
+        </mj-text>
+        <mj-text padding="10px" align="left" font-size="14px" line-height="24px" color="${t.colors.text.body}">
+          The second card mirrors the first so you can build compact sections.
+        </mj-text>
+        <mj-text padding="0 10px 5px" align="left" font-size="14px" color="${t.colors.text.body}">FROM</mj-text>
+        <mj-text padding="0 10px 20px" align="left" font-size="28px" line-height="32px" color="${t.colors.secondary}" font-weight="700">
+          $89 <s style="font-size:16px;font-weight:300;color:${t.colors.text.body}">$189</s>
+        </mj-text>
+        <mj-button background-color="${t.colors.text.heading}" color="#ffffff" font-size="14px" font-weight="700" letter-spacing="1px" padding="0 10px" width="100%" border-radius="${t.radii.s}">
+          Buy now
+        </mj-button>
+      </mj-column>
+    </mj-section>`
+    },
+    presetEmailThreePricingCards: {
+      label: "Three Pricing Cards",
+      category: n.content,
+      getContent: () => `<mj-section padding="24px 0" ${t.attrs.bgTransparent}>
+      <mj-column width="32%" border-radius="4px" padding="10px" ${t.attrs.bgSection}>
+        <mj-text padding="20px 0 10px 0" align="center" color="${t.colors.secondary}" font-size="16px">Starter pass</mj-text>
+        <mj-text padding="10px 0 20px 0" align="center" font-size="36px" font-weight="700">$49</mj-text>
+        <mj-divider border-style="dashed" border-width="4px" border-color="#47556955"></mj-divider>
+        <mj-text padding="15px 0" align="center" line-height="24px" font-size="12px">
+          Workshops<br/>
+          Keynotes<br/>
+          Community access
+        </mj-text>
+        <mj-button width="100%" font-size="12px" padding="10px 0" border-radius="${t.radii.s}" ${t.buttons.secondary}>Purchase</mj-button>
+      </mj-column>
+      <mj-column padding="${t.radii.s}" width="2%" ${t.attrs.bgTransparent}></mj-column>
+      <mj-column width="32%" border-radius="4px" padding="10px" ${t.attrs.bgSection}>
+        <mj-text padding="20px 0 10px 0" align="center" color="${t.colors.secondary}" font-size="16px">Full pass</mj-text>
+        <mj-text padding="10px 0 20px 0" align="center" font-size="36px" font-weight="700">$149</mj-text>
+        <mj-divider border-style="dashed" border-width="4px" border-color="#47556955"></mj-divider>
+        <mj-text padding="15px 0" align="center" line-height="24px" font-size="12px">
+          All sessions<br/>
+          Workshops<br/>
+          Networking events
+        </mj-text>
+        <mj-button width="100%" font-size="12px" padding="10px 0" border-radius="${t.radii.s}" ${t.buttons.secondary}>Purchase</mj-button>
+      </mj-column>
+      <mj-column padding="${t.radii.s}" width="2%" ${t.attrs.bgTransparent}></mj-column>
+      <mj-column width="32%" border-radius="4px" padding="10px" ${t.attrs.bgSection}>
+        <mj-text padding="20px 0 10px 0" align="center" color="${t.colors.secondary}" font-size="16px">VIP pass</mj-text>
+        <mj-text padding="10px 0 20px 0" align="center" font-size="36px" font-weight="700">$249</mj-text>
+        <mj-divider border-style="dashed" border-width="4px" border-color="#47556955"></mj-divider>
+        <mj-text padding="15px 0" align="center" line-height="24px" font-size="12px">
+          Priority seating<br/>
+          Private sessions<br/>
+          Speaker lounge
+        </mj-text>
+        <mj-button width="100%" font-size="12px" padding="10px 0" border-radius="${t.radii.s}" ${t.buttons.secondary}>Purchase</mj-button>
+      </mj-column>
+    </mj-section>`
+    },
+    presetEmailGridGallery: {
+      label: "Grid Gallery",
+      category: n.gallery,
+      getContent: ({ getImageUrl: o }) => `<mj-wrapper>
+      <mj-section padding="16px 24px" border-radius="${t.radii.s} ${t.radii.s} 0 0" ${t.attrs.bgSection}>
+        <mj-column>
+          <mj-text color="${t.colors.text.heading}" align="center" font-size="24px" line-height="35px" letter-spacing="1px">
+            Grid Gallery
+          </mj-text>
+        </mj-column>
+      </mj-section>
+      <mj-section padding="0 24px" ${t.attrs.bgSection}>
+        <mj-column width="33.33%" ${t.attrs.bgTransparent}><mj-image src="${o(y)}" alt="Image" padding="5px" border-radius="${t.radii.s}"></mj-image></mj-column>
+        <mj-column width="33.33%" ${t.attrs.bgTransparent}><mj-image src="${o(B)}" alt="Image" padding="5px" border-radius="${t.radii.s}"></mj-image></mj-column>
+        <mj-column width="33.33%" ${t.attrs.bgTransparent}><mj-image src="${o(S)}" alt="Image" padding="5px" border-radius="${t.radii.s}"></mj-image></mj-column>
+      </mj-section>
+      <mj-section padding="0 24px" ${t.attrs.bgSection}>
+        <mj-column width="33.33%" ${t.attrs.bgTransparent}><mj-image src="${o(v)}" alt="Image" padding="5px" border-radius="${t.radii.s}"></mj-image></mj-column>
+        <mj-column width="33.33%" ${t.attrs.bgTransparent}><mj-image src="${o(z)}" alt="Image" padding="5px" border-radius="${t.radii.s}"></mj-image></mj-column>
+        <mj-column width="33.33%" ${t.attrs.bgTransparent}><mj-image src="${o(P)}" alt="Image" padding="5px" border-radius="${t.radii.s}"></mj-image></mj-column>
+      </mj-section>
+      <mj-section padding="0px 24px 8px 24px" border-radius="0 0 ${t.radii.s} ${t.radii.s}" ${t.attrs.bgSection}>
+        <mj-column>
+          <mj-spacer/>
+        </mj-column>
+      </mj-section>
+    </mj-wrapper>`
+    },
+    presetEmailSplitImageGallery: {
+      label: "Split Image Gallery",
+      category: n.gallery,
+      getContent: ({ getImageUrl: o }) => `<mj-wrapper>
+      <mj-section padding="24px" border-radius="${t.radii.s} ${t.radii.s} 0 0" ${t.attrs.bgSection}>
+        <mj-column width="66.66%" ${t.attrs.bgTransparent}>
+          <mj-image src="${o(y)}" alt="Image" padding="5px" border-radius="${t.radii.s}"></mj-image>
+        </mj-column>
+        <mj-column width="33.33%" ${t.attrs.bgTransparent}>
+          <mj-image src="${o(v)}" alt="Image" padding="5px" border-radius="${t.radii.s}"></mj-image>
+          <mj-image src="${o(z)}" alt="Image" padding="5px" border-radius="${t.radii.s}"></mj-image>
+        </mj-column>
+      </mj-section>
+      <mj-section padding="0 24px 8px 24px" border-radius="0 0 ${t.radii.s} ${t.radii.s}" ${t.attrs.bgSection}>
+        <mj-column ${t.attrs.bgTransparent}>
+          <mj-text padding="0 0 12px 0" line-height="30px" align="center" font-size="16px" color="${t.colors.text.body}">
+            Use this section to set the tone, explain what changed, or frame the key message into product details and supporting content.
+          </mj-text>
+          <mj-button  padding="12px 12px 24px" inner-padding="12px 48px" border-radius="${t.radii.l}" ${t.buttons.primary}>
+            VIEW MORE
+          </mj-button>
+        </mj-column>
+      </mj-section>
+    </mj-wrapper>`
+    },
+    presetEmailMasonryGallery: {
+      label: "Masonry Gallery",
+      category: n.gallery,
+      getContent: ({ getImageUrl: o }) => `<mj-wrapper>
+      <mj-section padding="16px 24px" border-radius="${t.radii.s} ${t.radii.s} 0 0" ${t.attrs.bgSection}>
+        <mj-column>
+          <mj-text color="${t.colors.primary}" align="center" font-size="24px" line-height="35px" letter-spacing="1px">
+            Masonry Gallery
+          </mj-text>
+          <mj-text padding="0 0 12px 0" line-height="30px" align="center" font-size="16px" color="${t.colors.text.body}">
+            Use this section to set the tone, explain what changed, or frame the key message into product details and supporting content.
+          </mj-text>
+        </mj-column>
+      </mj-section>
+      <mj-section padding="0" ${t.attrs.bgSection}>
+        <mj-column width="33.33%" ${t.attrs.bgTransparent}>
+          <mj-image src="${o(y)}" alt="Image" padding="0"></mj-image>
+          <mj-image src="${o(B)}" alt="Image" padding="0"></mj-image>
+        </mj-column>
+        <mj-column width="66.66%" ${t.attrs.bgTransparent}>
+          <mj-image src="${o(S)}" alt="Image" padding="0"></mj-image>
+        </mj-column>
+      </mj-section>
+      <mj-section padding="0" ${t.attrs.bgSection}>
+        <mj-column width="33.33%" ${t.attrs.bgTransparent}><mj-image src="${o(v)}" alt="Image" padding="0"></mj-image></mj-column>
+        <mj-column width="33.33%" ${t.attrs.bgTransparent}><mj-image src="${o(z)}" alt="Image" padding="0"></mj-image></mj-column>
+        <mj-column width="33.33%" ${t.attrs.bgTransparent}><mj-image src="${o(P)}" alt="Image" padding="0"></mj-image></mj-column>
+      </mj-section>
+      <mj-section padding="0 24px 8px" border-radius="0 0 ${t.radii.s} ${t.radii.s}" ${t.attrs.bgSection}>
+        <mj-column ${t.attrs.bgTransparent}>
+          <mj-button  padding="36px 24px 12px" inner-padding="12px 48px" border-radius="${t.radii.l}" ${t.buttons.primary}>
+            VIEW MORE
+          </mj-button>
+        </mj-column>
+      </mj-section>
+    </mj-wrapper>`
+    },
+    presetEmailCtaPromoBanner: {
+      label: "Promo Banner",
+      category: n.cta,
+      getContent: () => `<mj-wrapper>
+      <mj-section padding="32px 24px" background-color="${t.colors.secondary}" border-radius="${t.radii.m}">
+        <mj-column vertical-align="middle" width="65%" ${t.attrs.bgTransparent}>
+          <mj-text padding="0 0 8px 0" color="#ffffff" font-size="26px" font-weight="700" line-height="34px">
+            Save your strongest CTA
+          </mj-text>
+          <mj-text padding="0px 0px 12px 0px" color="#ffffffde" font-size="15px" line-height="23px">
+            Great for a launch push, limited-time campaign, or any section.
+          </mj-text>
+        </mj-column>
+        <mj-column vertical-align="middle" width="35%" ${t.attrs.bgTransparent}>
+          <mj-button align="right" background-color="#ffffff" color="${t.colors.secondary}" border-radius="${t.radii.l}" font-weight="700" inner-padding="14px 38px" padding="0px">
+            CLAIM OFFER
+          </mj-button>
+        </mj-column>
+      </mj-section>
+      </mj-wrapper>`
+    },
+    presetEmailCtaOfferBanner: {
+      label: "Offer Banner",
+      category: n.cta,
+      getContent: ({ getImageUrl: o }) => `<mj-wrapper>
+      <mj-section padding="64px 32px" background-color="${t.colors.primary}" border-radius="${t.radii.m}"
+        background-url="${o(D)}" background-size="cover" background-repeat="no-repeat" border="2px solid #e59fc9"
+        >
+        <mj-column ${t.attrs.bgTransparent}>
+          <mj-text padding="0px 0px 8px 0px" font-weight="700" letter-spacing="1px" align="center">
+            <b style="background-color:${t.colors.primary};color:white;padding:6px 12px;border-radius:${t.radii.m};font-size:8px;">
+              LIMITED-TIME CODE
+            </b>
+          </mj-text>
+          <mj-text padding="12px 0" color="#8c3469" font-size="20px" line-height="26px" align="center">
+            Use <span style="font-weight:700;">WELCOME20</span> to unlock a launch offer before Friday.
+          </mj-text>
+          <mj-button background-color="#ffffff" color="${t.colors.primary}" border-radius="${t.radii.l}" inner-padding="12px 38px" padding="20px 0 0 0" font-weight="700" font-size="18px">
+            REDEEM NOW
+          </mj-button>
+        </mj-column>
+      </mj-section>
+    </mj-wrapper>`
+    },
+    presetEmailThreeTeamProfiles: {
+      label: "Three Team Profiles",
+      category: n.people,
+      getContent: ({ getImageUrl: o }) => `<mj-wrapper>
+      <mj-section padding="24px 32px 12px" border-radius="${t.radii.m} ${t.radii.m} 0 0" ${t.attrs.bgSection}>
+        <mj-column ${t.attrs.bgTransparent}>
+          <mj-text padding="12px 0 0 " color="#0f172977" font-size="22px">Event speakers</mj-text>
+          <mj-text padding="12px 0 10px 0" font-size="42px" line-height="50px" font-weight="700" color="${t.colors.text.heading}">
+            Meet our speakers
+          </mj-text>
+          <mj-divider border-width="1px" border-color="#0f172933" padding="12px 0"></mj-divider>
+        </mj-column>
+      </mj-section>
+      <mj-section padding="20px 12px 40px" border-radius="0 0 ${t.radii.m} ${t.radii.m}" ${t.attrs.bgSection}>
+        <mj-column width="33.33%" ${t.attrs.bgTransparent}>
+          <mj-image src="${o(C)}" border-radius="50%" alt="Speaker"></mj-image>
+          <mj-text align="center" font-weight="700" font-size="16px" padding-top="10px" color="${t.colors.text.heading}">James Doe</mj-text>
+          <mj-text align="center" font-size="12px" color="${t.colors.text.body}">Advertiser</mj-text>
+        </mj-column>
+        <mj-column width="33.33%" ${t.attrs.bgTransparent}>
+          <mj-image src="${o(G)}" border-radius="50%" alt="Speaker"></mj-image>
+          <mj-text align="center" font-weight="700" font-size="16px" padding-top="10px" color="${t.colors.text.heading}">Mia Dolce</mj-text>
+          <mj-text align="center" font-size="12px" color="${t.colors.text.body}">UX Designer</mj-text>
+        </mj-column>
+        <mj-column width="33.33%" ${t.attrs.bgTransparent}>
+          <mj-image src="${o(wt)}" border-radius="50%" alt="Speaker"></mj-image>
+          <mj-text align="center" font-weight="700" font-size="16px" padding-top="10px" color="${t.colors.text.heading}">Sophia Evans</mj-text>
+          <mj-text align="center" font-size="12px" color="${t.colors.text.body}">Designer</mj-text>
+        </mj-column>
+      </mj-section>
+    </mj-wrapper>`
+    },
+    presetEmailTeamAlternatingTeamCards: {
+      label: "Alternating Team Cards",
+      category: n.people,
+      getContent: ({ getImageUrl: o }) => `<mj-wrapper gap="20px" padding="20px 20px 40px" ${t.attrs.bgSection}>
+      <mj-section padding="0" ${t.attrs.bgTransparent}>
+        <mj-column ${t.attrs.bgTransparent}>
+          <mj-text align="center" font-size="26px" line-height="36px" font-weight="600" letter-spacing="1px">
+            Our experts
+          </mj-text>
+        </mj-column>
+      </mj-section>
+      <mj-section padding="0" background-color="${t.colors.text.heading}">
+        <mj-column width="40%" padding="0">
+          <mj-image src="${o(C)}" alt="Expert" padding="0"></mj-image>
+        </mj-column>
+        <mj-column vertical-align="middle" width="60%" padding="20px" ${t.attrs.bgTransparent}>
+          <mj-text padding="0 0 5px 0" align="left" font-size="18px" line-height="28px" font-weight="600" letter-spacing="1px" color="#ffffff">
+            James Mitchell
+          </mj-text>
+          <mj-text padding="0 0 5px 0" align="left" font-size="12px" line-height="22px" font-weight="600" letter-spacing="1px" color="#ffffff">
+            Founder &amp; Lead Designer
+          </mj-text>
+          <mj-text padding="0 0 5px 0" align="left" font-size="14px" line-height="24px" color="#ffffffad">
+            Pair portrait photography with a short bio and social row for studio intros, speaker features, or team highlights.
+          </mj-text>
+          <mj-social align="left" icon-size="25px" mode="horizontal" padding="10px 0 0 0">
+            <mj-social-element name="facebook" ${t.attrs.bgTransparent}></mj-social-element>
+            <mj-social-element name="linkedin" ${t.attrs.bgTransparent}></mj-social-element>
+            <mj-social-element name="instagram" ${t.attrs.bgTransparent}></mj-social-element>
+          </mj-social>
+        </mj-column>
+      </mj-section>
+      <mj-section padding="0" background-color="${t.colors.text.heading}">
+        <mj-column width="60%" padding="20px" ${t.attrs.bgTransparent}>
+          <mj-text padding="0 0 5px 0" align="left" font-size="18px" line-height="28px" font-weight="600" letter-spacing="1px" color="#ffffff">
+            Sophia White
+          </mj-text>
+          <mj-text padding="0 0 5px 0" align="left" font-size="12px" line-height="22px" font-weight="600" letter-spacing="1px" color="#ffffff">
+            Senior Interior Architect
+          </mj-text>
+          <mj-text padding="0 0 5px 0" align="left" font-size="14px" line-height="24px" color="#ffffffad">
+            The alternating second row keeps the layout dynamic while still using the same reusable content pattern.
+          </mj-text>
+          <mj-social align="left" icon-size="25px" mode="horizontal" padding="10px 0 0 0">
+            <mj-social-element name="facebook" ${t.attrs.bgTransparent}></mj-social-element>
+            <mj-social-element name="linkedin" ${t.attrs.bgTransparent}></mj-social-element>
+            <mj-social-element name="instagram" ${t.attrs.bgTransparent}></mj-social-element>
+          </mj-social>
+        </mj-column>
+        <mj-column width="40%" padding="0">
+          <mj-image src="${o(G)}" alt="Expert" padding="0"></mj-image>
+        </mj-column>
+      </mj-section>
+    </mj-wrapper>`
+    },
+    presetEmailTestimonialsTwoRows: {
+      label: "Testimonials Two Rows",
+      category: n.people,
+      getContent: ({ getImageUrl: o }) => `<mj-wrapper>
+      <mj-section padding="20px 0" ${t.attrs.bgSection}>
+        <mj-column ${t.attrs.bgTransparent}>
+          <mj-text align="center" font-size="26px" line-height="36px" font-weight="600" letter-spacing="1px">
+            Client testimonials
+          </mj-text>
+        </mj-column>
+      </mj-section>
+      <mj-section padding="20px 24px 0px 24px" ${t.attrs.bgSection}>
+        <mj-column background-color="#4755690f" border-radius="${t.radii.s}">
+          <mj-text padding="25px" font-size="16px" line-height="24px" font-style="italic" letter-spacing="1px" color="${t.colors.text.body}" align="left">
+            “This layout is perfect for highlighting short testimonials without taking over the whole campaign.”
+          </mj-text>
+        </mj-column>
+      </mj-section>
+      <mj-section padding="0" ${t.attrs.bgSection}>
+        <mj-column vertical-align="middle" width="20%" ${t.attrs.bgTransparent}>
+          <mj-image src="${o(yt)}" alt="Customer" border-radius="50%"></mj-image>
+        </mj-column>
+        <mj-column vertical-align="middle" ${t.attrs.bgTransparent} width="80%" padding="10px 10px 10px 15px">
+          <mj-text padding="0" align="left" font-size="16px" line-height="26px" font-weight="600" letter-spacing="1px" color="${t.colors.text.heading}">Marcus Rivera</mj-text>
+          <mj-text padding="0" align="left" font-size="12px" line-height="22px" font-weight="600" letter-spacing="1px" color="${t.colors.text.body}">Architect</mj-text>
+        </mj-column>
+      </mj-section>
+      <mj-section padding="0" ${t.attrs.bgSection}>
+        <mj-column ${t.attrs.bgTransparent}>
+          <mj-divider border-width="1px" border-style="solid" border-color="#4755692e"></mj-divider>
+        </mj-column>
+      </mj-section>
+      <mj-section padding="20px 24px 0px 24px" ${t.attrs.bgSection}>
+        <mj-column background-color="#4755690f" border-radius="${t.radii.s}">
+          <mj-text padding="25px" font-size="16px" line-height="24px" font-style="italic" letter-spacing="1px" color="${t.colors.text.body}" align="right">
+          “Use it for customer proof, partner quotes, or event feedback where symmetry matters.”
+        </mj-text>
+        </mj-column>
+      </mj-section>
+      <mj-section padding="0 0 30px" ${t.attrs.bgSection}>
+        <mj-column vertical-align="middle" ${t.attrs.bgTransparent} width="80%" padding="10px 15px 10px 10px">
+          <mj-text padding="0" align="right" font-size="16px" line-height="26px" font-weight="600" letter-spacing="1px" color="${t.colors.text.heading}">Elena Kowalski</mj-text>
+          <mj-text padding="0" align="right" font-size="12px" line-height="22px" font-weight="600" letter-spacing="1px" color="${t.colors.text.body}">Project Manager</mj-text>
+        </mj-column>
+        <mj-column vertical-align="middle" width="20%" ${t.attrs.bgTransparent}>
+          <mj-image src="${o($t)}" alt="Customer" border-radius="50%"></mj-image>
+        </mj-column>
+      </mj-section>
+    </mj-wrapper>`
+    },
+    presetEmailFooterSocial: {
+      label: "Social Footer",
+      category: n.footer,
+      getContent: () => `<mj-section background-color="${t.colors.text.heading}" padding="40px 24px">
+      <mj-column ${t.attrs.bgTransparent}>
+        <mj-text align="center" color="#ffffff" font-size="18px" font-weight="700" padding="0 0 12px">Stay in the loop</mj-text>
+        <mj-social font-size="12px" icon-size="20px" mode="horizontal" padding="0" inner-padding="7px">
+          <mj-social-element name="facebook" ${t.attrs.bgTransparent}></mj-social-element>
+          <mj-social-element name="linkedin" ${t.attrs.bgTransparent}></mj-social-element>
+          <mj-social-element name="instagram" ${t.attrs.bgTransparent}></mj-social-element>
+        </mj-social>
+        <mj-text padding="12px 0 0 0" align="center" color="#ffffff88" font-size="12px" line-height="18px">
+          123 Example Street, Suite 400, <br/>
+          San Francisco, CA
+        </mj-text>
+        <mj-text padding="12px 0 0" align="center" color="#47556994" font-size="12px" line-height="20px">
+          <a href="#" style="color:${t.colors.secondary};text-decoration:none;font-weight:700;">Unsubscribe</a>
+        </mj-text>
+      </mj-column>
+    </mj-section>`
+    },
+    presetEmailTwoColumnFooter: {
+      label: "Two Column Footer",
+      category: n.footer,
+      getContent: () => `<mj-wrapper padding="0">
+      <mj-section padding="32px 24px 0px 24px" ${t.attrs.bgSection}>
+        <mj-column>
+          <mj-text align="left" font-size="18px" font-weight="700" color="${t.colors.text.heading}" padding="10px 0px 10px 0px">Follow Us
+          </mj-text>
+          <mj-text padding="0 0 20px" font-size="12px" line-height="22px" color="${t.colors.text.body}">Follow us on social for more updates</mj-text>
+          <mj-social align="left" font-size="12px" icon-size="18px" mode="horizontal" padding="0" inner-padding="5px">
+            <mj-social-element name="facebook" background-color="${t.colors.text.heading}"></mj-social-element>
+            <mj-social-element name="linkedin" background-color="${t.colors.text.heading}"></mj-social-element>
+            <mj-social-element name="instagram" background-color="${t.colors.text.heading}"></mj-social-element>
+          </mj-social>
+        </mj-column>
+        <mj-column>
+          <mj-text padding="10px 0px" align="left" font-size="18px" font-weight="700" color="${t.colors.text.heading}">Contact Us</mj-text>
+          <mj-text padding="0 0 20px" font-size="12px" line-height="22px" color="${t.colors.text.body}">
+            245 Design Avenue, Suite 100<br/>
+            San Francisco, CA 94102<br/><a href="tel:+1-555-321-9870"
+              style="color:${t.colors.secondary};font-weight:700;">+1-555-321-9870</a></mj-text>
+        </mj-column>
+      </mj-section>
+      <mj-section ${t.attrs.bgSection} padding="12px 24px 24px">
+        <mj-column width="100%">
+          <mj-divider border-color="#e2e8f0" border-width="1px" padding="0 0 16px 0"></mj-divider>
+          <mj-text padding="0" align="center" color="#47556994" font-size="12px" line-height="20px">You are receiving this
+            email because you subscribed from our site. <a href="#" style="color:${t.colors.secondary};font-weight:700;text-decoration:none;">Unsubscribe</a></mj-text>
+        </mj-column>
+      </mj-section>
+    </mj-wrapper>`
+    },
+    presetEmailThreeColumnFooter: {
+      label: "Three Column Footer",
+      category: n.footer,
+      getContent: () => `<mj-section padding="30px 24px" background-color="${t.colors.text.heading}" full-width="full-width">
+      <mj-column width="30%" padding="0 0 20px" ${t.attrs.bgTransparent}>
+        <mj-text padding="0 0 15px" font-size="14px" font-weight="700" line-height="24px" color="#ffffff">About us</mj-text>
+        <mj-text padding="0" font-size="12px" color="#ffffff99" line-height="22px">
+          <a style="color:#ffffff99;">About us</a><br/>
+          <a style="color:#ffffff99;">Contact us</a><br/>
+          <a style="color:#ffffff99;">Team</a><br/>
+          <a style="color:#ffffff99;">Blog</a>
+        </mj-text>
+      </mj-column>
+      <mj-column width="30%" padding="0 0 20px" ${t.attrs.bgTransparent}>
+        <mj-text padding="0 0 15px" font-size="14px" font-weight="700" line-height="24px" color="#ffffff">Links
+        </mj-text>
+        <mj-text padding="0" font-size="12px" color="#ffffff99" line-height="22px">
+          <a style="color:#ffffff99;">Shop</a><br/>
+          <a style="color:#ffffff99;">Terms</a><br/>
+          <a style="color:#ffffff99;">Privacy</a><br/>
+          <a style="color:#ffffff99;">Reviews</a>
+        </mj-text>
+      </mj-column>
+      <mj-column width="40%" ${t.attrs.bgTransparent}>
+        <mj-text padding="0 0 15px" font-size="14px" font-weight="700" line-height="24px" color="#ffffff">Our location</mj-text>
+        <mj-text padding="0 0 20px" font-size="12px" line-height="22px" color="#ffffff">
+          245 Design Avenue, Suite 100<br/>
+          San Francisco, CA 94102<br/>
+          <a href="tel:+1-555-321-9870" style="color:#ffffff99;">+1-555-321-9870</a>
+        </mj-text>
+        <mj-text padding="0" font-size="14px" font-weight="700" line-height="24px" color="#ffffff">Socials</mj-text>
+        <mj-social font-size="12px" icon-size="24px" mode="horizontal" padding="0" align="left">
+          <mj-social-element name="facebook" ${t.attrs.bgTransparent}></mj-social-element>
+          <mj-social-element name="linkedin" ${t.attrs.bgTransparent}></mj-social-element>
+          <mj-social-element name="instagram" ${t.attrs.bgTransparent}></mj-social-element>
+          <mj-social-element name="youtube" ${t.attrs.bgTransparent}></mj-social-element>
+        </mj-social>
+      </mj-column>
+    </mj-section>`
+    }
+  };
+}, zt = ({
+  library: e,
+  options: i
+}) => Object.entries(vt(i)).map(([o, r]) => {
+  const a = ct({
+    id: o,
+    label: r.label,
+    category: r.category,
+    library: e
+  }), s = r.getContent({
+    getImageUrl: (d) => {
+      var l;
+      return ((l = i.getImageUrl) == null ? void 0 : l.call(i, { block: a })) || d;
+    }
+  });
+  return { ...a, content: s };
+}), kt = (e = {}) => {
+  const i = pt(e), o = w(e.defaultLibrary) ? e.defaultLibrary({ ...i }) || void 0 : i, r = zt({
+    library: o,
+    options: e
+  }), a = e.categories ? new Set(e.categories) : null, s = /* @__PURE__ */ new Map();
+  return r.flatMap((d) => {
+    const l = typeof d.category == "string" ? void 0 : d.category;
+    if (a && l && !a.has(l.id))
+      return [];
+    let c = l;
+    if (l && w(e.category)) {
+      if (!s.has(l.id)) {
+        const j = e.category({ ...l });
+        s.set(l.id, j === !1 ? !1 : j || l);
+      }
+      const p = s.get(l.id);
+      if (p === !1) return [];
+      c = p || l;
+    }
+    const m = c !== d.category ? { ...d, category: c } : d;
+    if (!w(e.block))
+      return [m];
+    const g = e.block({ ...m });
+    return g ? [g || m] : [];
+  });
+};
+function Tt(e, i) {
+  const { Blocks: o } = e, r = kt(i);
+  return r.forEach((a) => a.id && o.add(a.id, a)), { blocks: r };
+}
+const At = function(e, i = {}) {
+  var d, l;
+  const o = { ...i };
+  if (!W(e))
+    return;
+  const { blocks: r } = Tt(e, o), a = o.selectLibrary ? (l = (d = r.find((c) => c.library)) == null ? void 0 : d.library) == null ? void 0 : l.id : void 0, s = [];
+  return a && e.runCommand(h.setBlocksPanel, { selectedLibrary: a }), o.withGlobalStyles && s.push(
+    (() => {
+      const c = `${e.DataSources.events.pathSource}:${L.globalStyles}`, m = () => e.runCommand(h.setBlocksPanel, { previewCache: /* @__PURE__ */ new Map() });
+      return e.on(c, m), () => e.off(c, m);
+    })()
+  ), it({
+    editor: e,
+    licenseKey: o.licenseKey,
+    plan: lt,
+    pluginName: I,
+    cleanup: rt
+  }), ({ cleanup: c }) => {
+    c(), s.forEach((m) => m());
+  };
+}, Dt = ot(At, I);
+export {
+  Dt as default
+};