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

package/dist/presetBlockLibrary/index.umd.js

@@ -0,0 +1,889 @@
+(function(f,j){typeof exports=="object"&&typeof module<"u"?module.exports=j():typeof define=="function"&&define.amd?define(j):(f=typeof globalThis<"u"?globalThis:f||self,f.StudioSdkPlugins_presetBlockLibrary=j())})(this,function(){"use strict";var f=(e=>(e.globalStyles="globalStyles",e.globalData="globalData",e))(f||{});const j="app.grapesjs.com",A="app-stage.grapesjs.com",M=[j,"app2.grapesjs.com",A,"app-stage2.grapesjs.com","localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io",".claudemcpcontent.com",".web-sandbox.oaiusercontent.com"],V="license:check:end",F=()=>typeof window<"u",N=({isDev:e,isStage:i,isPlatform:o})=>`${e?"":`https://${i?A:j}`}/${o?"platform-api":"api"}`,Y=(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}`},U=()=>{if(!F())return"";const{hostname:e}=window.location;if(e)return e;try{return window.parent.location.hostname||""}catch{return""}},_=()=>{const e=U();return!!e&&(M.includes(e)||M.some(i=>e.endsWith(i)))};function $(e){return typeof e=="function"}const D=e=>!!e.Components.getType("mjml");async function J({path:e,baseApiUrl:i,method:o="GET",headers:r={},params:a,body:s}){const l=`${i||N({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 u=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(u||{}),h=(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 H={[u.free]:0,[u.startup]:10,[u.business]:20,[u.enterprise]:30};function K(e,i){const o=e;return o.init=r=>{const a=s=>e(s,r);return a.__gjsPluginId=i,a},o}const X=(e,i)=>K(e,i);async function Z({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 q;const{error:w,sdkLicense:yt}=p,T=(q=p.plan)==null?void 0:q.category;if(!(yt||p.license)||w)c(w||"Invalid license");else if(T){const vt=H[i],zt=H[T];vt>zt&&c({pluginRequiredPlan:i,licensePlan:T})}};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(!_())if(r){const p=await tt({licenseKey:r,pluginName:o,baseApiUrl:d});g(p)}else c("The `licenseKey` option not provided")});return}if(l.licensePlan||l.licenseError){const p=Q(l);g(p);return}e.on(V,p=>g(p))}const Q=e=>({sdkLicense:e.license,license:e.license,error:e.licenseError,plan:e.licensePlan});async function tt(e){const{licenseKey:i,pluginName:o,baseApiUrl:r}=e;try{return(await J({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 et=(e,i)=>e.onReady(()=>e.Plugins.remove(i)),E="presetBlockLibrary",ot=u.startup,it=e=>{var i;return e.is("mj-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>'}},B=({editor:e,content:i},o)=>{var c;if(typeof i!="string"||!D(e))return;const r=e.getWrapper(),a=r==null?void 0:r.findFirstType("mj-head"),s=r==null?void 0:r.findFirstType(it),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}},S={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=>B(e)},nt=e=>e.withGlobalStyles?{...S,preview:i=>B(i,e)}:S,x=Y({width:320,height:96,text:"Logo",bg:"e2e8f0",fg:"334155"}),at=({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"'}},rt="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",lt="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",b="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",st="https://images.unsplash.com/photo-1607371059636-720f2c169e82?q=80&w=928&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",P="https://images.unsplash.com/photo-1674247489394-524fef63c0ff?q=80&w=928&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",y="https://images.unsplash.com/photo-1729119578980-91838d6014d9?q=80&w=1160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",C="https://images.unsplash.com/photo-1729119579013-decd9c61c395?q=80&w=1160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",pt="https://images.unsplash.com/photo-1729119578960-45095ebc3b8a?q=80&w=1160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",ct="https://images.unsplash.com/photo-1729119578920-240c46516e91?q=80&w=1160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",G="https://images.unsplash.com/photo-1659468525744-314c75acdd38?q=80&w=2064&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",dt="https://images.unsplash.com/photo-1739978291558-6dbdd5b9f9f8?q=80&w=2064&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",mt="https://images.unsplash.com/photo-1698429894924-ee93fc16279a?q=80&w=2200&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",gt="https://images.unsplash.com/photo-1698430484227-006b70bc83cb?q=80&w=2000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",xt="https://images.unsplash.com/photo-1698429894931-fa699270a2fa?q=80&w=2200&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",v="https://images.unsplash.com/photo-1638248308805-d488b66ea854?q=80&w=1160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",L="https://images.unsplash.com/photo-1706720097169-b4120bb97a30?q=80&w=1160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",R="https://images.unsplash.com/photo-1706720093772-be76963b01a3?q=80&w=1160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",z="https://images.unsplash.com/photo-1716032936139-33cb6cd84dc0?q=80&w=1160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",k="https://images.unsplash.com/photo-1566319743996-123ad0f44a68?q=80&w=1160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",O="https://images.unsplash.com/photo-1706466615511-18622e5ef756?q=80&w=1160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",W="https://images.unsplash.com/photo-1527980965255-d3b416303d12?q=80&w=1160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",I="https://images.unsplash.com/photo-1485893086445-ed75865251e0?q=80&w=1160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",ft="https://images.unsplash.com/photo-1586299485759-f62264d6b63f?q=80&w=1160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",jt="https://images.unsplash.com/photo-1595897950118-1037962bc920?q=80&w=1160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",ut="https://images.unsplash.com/photo-1642060603505-e716140d45d2?q=80&w=1160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",ht=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(rt)}"
+          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(lt)}"
+        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(b)}" 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(st)}" 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(b)}" 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(b)}"
+      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(b)}" 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(y)}" 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(C)}" 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(y)}" 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(pt)}" 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(ct)}" 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(b)}" 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(P)}" 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(G)}" 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(G)}" 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(dt)}" 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(mt)}" 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(gt)}" 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(xt)}" 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(y)}" 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(C)}" 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(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(L)}" 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(R)}" 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(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(k)}" 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(O)}" 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(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-image src="${o(k)}" 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(v)}" alt="Image" padding="0"></mj-image>
+          <mj-image src="${o(L)}" alt="Image" padding="0"></mj-image>
+        </mj-column>
+        <mj-column width="66.66%" ${t.attrs.bgTransparent}>
+          <mj-image src="${o(R)}" 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(z)}" alt="Image" padding="0"></mj-image></mj-column>
+        <mj-column width="33.33%" ${t.attrs.bgTransparent}><mj-image src="${o(k)}" alt="Image" padding="0"></mj-image></mj-column>
+        <mj-column width="33.33%" ${t.attrs.bgTransparent}><mj-image src="${o(O)}" 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(P)}" 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(W)}" 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(I)}" 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(ft)}" 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(W)}" 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(I)}" 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(ut)}" 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(jt)}" 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>`}}},bt=({library:e,options:i})=>Object.entries(ht(i)).map(([o,r])=>{const a=at({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}}),wt=(e={})=>{const i=nt(e),o=$(e.defaultLibrary)?e.defaultLibrary({...i})||void 0:i,r=bt({library:o,options:e}),a=e.categories?new Set(e.categories):null,s=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&&$(e.category)){if(!s.has(l.id)){const w=e.category({...l});s.set(l.id,w===!1?!1:w||l)}const p=s.get(l.id);if(p===!1)return[];c=p||l}const m=c!==d.category?{...d,category:c}:d;if(!$(e.block))return[m];const g=e.block({...m});return g?[g||m]:[]})};function $t(e,i){const{Blocks:o}=e,r=wt(i);return r.forEach(a=>a.id&&o.add(a.id,a)),{blocks:r}}return X(function(e,i={}){var d,l;const o={...i};if(!D(e))return;const{blocks:r}=$t(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}:${f.globalStyles}`,m=()=>e.runCommand(h.setBlocksPanel,{previewCache:new Map});return e.on(c,m),()=>e.off(c,m)})()),Z({editor:e,licenseKey:o.licenseKey,plan:ot,pluginName:E,cleanup:et}),({cleanup:c})=>{c(),s.forEach(m=>m())}},E)});