@kgalexander/mcreate 0.0.9 → 0.0.11

package/dist/index.js

@@ -267,7 +267,7 @@ var init_format = __esm({
 function propertyCardMockMjml(block, context) {
   const a = block.attributes;
   const trackingClasses = context.mode === "editing" ? getTrackingClasses(context.idx, "property-card") : "";
-  const href = a["href"] || a["link"] || "#";
+  const href = a["href"] || "#";
   const price = formatPrice(a["price"] || "$0");
   const address = a["address"] || "123 Main Street";
   const city = a["city"] || "City, ST 00000";
@@ -644,7 +644,7 @@ var init_mock_property_singletwo = __esm({
 // src/render/Mockup/mock-property-triple-better.ts
 function renderCard(child, childIdx, context, uniqueId, borderRadius, imageHeight, border, fontFamily, textColor, backgroundColor, innerBorderRadius) {
   const attrs = child.attributes;
-  const href = attrs["href"] || attrs["link"] || "#";
+  const href = attrs["href"] || "#";
   const price = formatPrice(attrs["price"] || "$0");
   const beds = formatNumber(attrs["beds"] || "--");
   const baths = formatNumber(attrs["baths"] || "--");
@@ -948,7 +948,7 @@ function propertyCardTripleToMjml(block, context) {
     const cardNum = index + 1;
     const childAttrs = child.attributes || {};
     productionAttrs[`image-src-${cardNum}`] = childAttrs["image-src"] || "";
-    productionAttrs[`href-${cardNum}`] = childAttrs["href"] || childAttrs["link"] || "#";
+    productionAttrs[`href-${cardNum}`] = childAttrs["href"] || "#";
     productionAttrs[`price-${cardNum}`] = childAttrs["price"] || "$0";
     productionAttrs[`beds-${cardNum}`] = childAttrs["beds"] || "--";
     productionAttrs[`baths-${cardNum}`] = childAttrs["baths"] || "--";
@@ -1492,7 +1492,7 @@ function createPropertyCardElement(payload) {
       "beds": "--",
       "baths": "--",
       "sqft": "--",
-      "link": "#",
+      "href": "#",
       "status": "Empty",
       "is-status": "show",
       "status-color": "#B8B8B8",
@@ -1521,7 +1521,7 @@ function createPropertyCardSingleTwoElement(payload) {
       "beds": "--",
       "baths": "--",
       "sqft": "--",
-      "link": "#",
+      "href": "#",
       "status": "Empty",
       "is-status": "show",
       "status-color": "#B8B8B8",
@@ -1608,7 +1608,7 @@ function createPropertyCardTripleItemElement(payload) {
     data: { value: {} },
     attributes: {
       "image-src": payload?.attributes?.["image-src"] || "https://cornerstonepropertymgmt.com/wp-content/themes/cornerstone/assets/img/nofeaturedimage.jpg",
-      "link": payload?.attributes?.["link"] || "#",
+      "href": payload?.attributes?.["href"] || "#",
       "price": payload?.attributes?.["price"] || "$0",
       "beds": payload?.attributes?.["beds"] || "--",
       "baths": payload?.attributes?.["baths"] || "--",
@@ -14611,20 +14611,8 @@ var init_spinner = __esm({
 });
 
 // src/render/useMjmlCompiler.ts
-function hashMjml(mjml) {
-  let hash = 0;
-  for (let i = 0; i < mjml.length; i++) {
-    hash = (hash << 5) - hash + mjml.charCodeAt(i);
-    hash |= 0;
-  }
-  return hash.toString(36);
-}
 async function compileMjml(mjml) {
-  const key = hashMjml(mjml);
-  const cached = htmlCache.get(key);
-  if (cached) {
-    return cached;
-  }
+  console.log("Compiling MJML", mjml);
   const response = await fetch("/api/mrender", {
     method: "POST",
     headers: { "Content-Type": "application/json" },
@@ -14635,20 +14623,13 @@ async function compileMjml(mjml) {
     throw new Error(errorData.message || "Failed to compile MJML");
   }
   const result = await response.json();
-  if (htmlCache.size >= MAX_CACHE) {
-    const firstKey = htmlCache.keys().next().value;
-    if (firstKey) htmlCache.delete(firstKey);
-  }
-  htmlCache.set(key, result);
   return result;
 }
-var import_react32, htmlCache, MAX_CACHE;
+var import_react32;
 var init_useMjmlCompiler = __esm({
   "src/render/useMjmlCompiler.ts"() {
     "use strict";
     import_react32 = require("react");
-    htmlCache = /* @__PURE__ */ new Map();
-    MAX_CACHE = 50;
   }
 });
 
@@ -14689,6 +14670,7 @@ function Preview() {
     const convertMjml = async () => {
       try {
         const mjmlString = json2mjml(template, "production", { isPaid });
+        console.log("MJML string:", mjmlString);
         const result = await compileMjml(mjmlString);
         if (result.errors?.length > 0) {
           console.warn("MJML warnings:", result.errors);
@@ -15798,11 +15780,7 @@ var init_core = __esm({
 var index_exports = {};
 __export(index_exports, {
   Editor: () => Editor,
-  MjColproperty: () => MjColproperty,
-  MjPropertysingletwo: () => MjPropertysingletwo,
-  MjPropertytriplebetter: () => MjPropertytriplebetter,
   TemplatePage: () => TemplatePage,
-  default: () => index_default2,
   json2mjml: () => json2mjml
 });
 module.exports = __toCommonJS(index_exports);
@@ -23852,766 +23830,11 @@ function TemplatePage({
   ) });
 }
 
-// src/mjml-components/property-better/index.ts
-var import_mjml_core = require("mjml-core");
-init_border();
-init_format();
-var MjColproperty = class extends import_mjml_core.BodyComponent {
-  constructor() {
-    super(...arguments);
-    this.componentHeadStyle = (breakpoint) => `
-      @media only screen and (max-width:${breakpoint}) {
-        .property-better-image-row,
-        .property-better-content-row {
-          width: 100% !important;
-        }
-      }
-    `;
-  }
-  render() {
-    const href = this.getAttribute("href");
-    const price = formatPrice(this.getAttribute("price"));
-    const address = this.getAttribute("address");
-    const city = this.getAttribute("city");
-    const beds = formatNumber(this.getAttribute("beds"));
-    const baths = formatNumber(this.getAttribute("baths"));
-    const sqft = formatNumber(this.getAttribute("sqft"));
-    const description = this.getAttribute("description");
-    const imageSrc = this.getAttribute("image-src");
-    const imageAlt = this.getAttribute("image-alt");
-    const status = this.getAttribute("status");
-    const statusColor = this.getAttribute("status-color");
-    const isNew = this.getAttribute("is-new");
-    const brokerage = this.getAttribute("brokerage");
-    const mlsLogo = this.getAttribute("mls-logo");
-    const width = this.getAttribute("width");
-    const borderRadius = this.getAttribute("border-radius");
-    const isOpenHouse = this.getAttribute("is-open-house");
-    const rawDate = this.getAttribute("open-house-date");
-    const rawTime = this.getAttribute("open-house-time");
-    const openHouseDate = formatOpenHouseDate(rawDate);
-    const [startTime, endTime] = rawTime ? rawTime.split("-") : ["", ""];
-    const openHouseTime = startTime && endTime ? `${formatOpenHouseTime(startTime)}-${formatOpenHouseTime(endTime)}` : "";
-    const fontFamily = this.getAttribute("font-family");
-    const textColor = this.getAttribute("text-color");
-    const isDescription = this.getAttribute("is-description");
-    const isBrokerage = this.getAttribute("is-brokerage");
-    const isStatus = this.getAttribute("is-status");
-    const border = parseBorder(this.getAttribute("border"));
-    const strokeWeight = border.width;
-    const borderRadiusNum = parseInt(borderRadius, 10) || 0;
-    const innerBorderRadius = `${Math.max(0, borderRadiusNum - strokeWeight)}px`;
-    const imageWidth = "100%";
-    const mlsLogoWidth = "32px";
-    const mlsLogoHtml = mlsLogo ? `
-        <tr>
-          <td colspan="2" align="right" valign="bottom" style="height:${mlsLogoWidth};padding:0 4px 4px 0">
-            <img src="${mlsLogo}" border="0" alt="MLS Logo" style="display:block;font-weight:700;font-size:14px;color:#0041d9;height:${mlsLogoWidth};width:${mlsLogoWidth};border-radius:4px" class="CToWUd" data-bit="iit" width="100%">
-          </td>
-        </tr>
-      ` : "";
-    const statusBadge = `
-        <table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin-left:8px">
-          <tbody>
-            <tr>
-              ${isStatus ? `
-              <td valign="top">
-                <span class="property-status-badge" style="display:table;background-color:#fffffe;border-radius:${borderRadius};font-weight:700;font-size:12px;line-height:1.5em;letter-spacing:0.0012em;margin:0;padding:1px 0;"><i style="letter-spacing:3px">&nbsp;</i><span style="color:${statusColor};font-size:18px;line-height:1;vertical-align:-1px;">\u25CF</span>&nbsp;<span style="color:#111116;">${status}</span><i style="letter-spacing:5px">&nbsp;</i></span>
-              </td>
-              ` : ""}
-              ${isNew ? `
-                  ${isStatus ? `<td width="4" style="font-size:0px;line-height:0px">&nbsp;</td>` : ""}
-                  <td valign="top">
-                    <span class="property-new-badge" style="display:table;background-color:#d03c0b;border-radius:${borderRadius};font-weight:700;font-size:12px;line-height:1.5em;letter-spacing:0.0012em;margin:0;padding:2px 0 1px 0"><i style="letter-spacing:5px">&nbsp;</i><span style="color:#ffffff">New</span><i style="letter-spacing:5px">&nbsp;</i></span>
-                  </td>
-                ` : ""}
-            </tr>
-          </tbody>
-        </table>
-      `;
-    const openHouseHtml = isOpenHouse ? `
-        <tr>
-          <td>
-            <table>
-              <tbody>
-                <tr>
-                  <td valign="top" align="right" style="padding:3px 4px 8px 0px;font-size:0">
-                    <img src="https://www.clipartmax.com/png/small/2-21103_home-house-silhouette-icon-building-transparent-background-home-icon.png" border="0" alt="House Icon" width="16" style="display:block;font-weight:700;font-size:14px;color:#2a2a33" class="CToWUd" data-bit="iit">
-                  </td>
-                  <td valign="top" align="left" style="font-size:0; padding:0px 0px 0px 0px;">
-                    <strong style="font-size:14px;line-height:24px;color:${textColor};margin:0;padding:0">
-                      <abbr title="open house" style="text-decoration:none">Open:</abbr>
-                      &nbsp;
-                    </strong>
-                  </td>
-                  <td valign="top" align="left" style="font-size:0; padding:0px 0px 0px 0px;">
-                    <span  style="white-space:nowrap; font-size:14px;line-height:24px;color:${textColor};margin:0;padding:0;display:inline-block; font-weight:500; text-decoration:none">
-                      ${openHouseDate} ${openHouseTime}
-                    </span>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </td>
-        </tr>
-      ` : "";
-    const brokerageHtml = brokerage ? `
-        <tr>
-          <td class="property-brokerage" style="padding: 0px 0px 8px 0px;  font-size: 10px; font-weight: 300; line-height: 1; text-align: left; color:${textColor};">
-            ${brokerage}
-          </td>
-        </tr>
-      ` : "";
-    const descriptionHtml = description ? `
-        <tr>
-          <td style="padding: 0px 0px 0px 0px; font-weight: 400; font-size: 14px; line-height: 1.5; text-align: left; color: ${textColor};">
-            ${description}
-          </td>
-        </tr>
-      ` : "";
-    return this.renderMJML(`
-      <mj-table width="${width}" font-family="${fontFamily}">
-        <tr class="property-better-image-row">
-          <td align="center" valign="top" background="${imageSrc}" style="background-repeat:no-repeat;background-position:center;background-size:cover;background-color:#eeeef0; border-radius:${innerBorderRadius} ${innerBorderRadius} 0 0;">
-            <a href="${href}" style="text-decoration:none;display:block;border-radius:12px 12px 0 0" target="_blank">
-              <table role="presentation" align="center" cellpadding="0" cellspacing="0" border="0" style="width:${imageWidth}">
-                <tbody>
-                  <tr>
-                    <td align="left" valign="top" height="40" style="height:40px;padding-top:8px;">
-                      ${isStatus || isNew ? statusBadge : ""}
-                    </td>
-                    <td align="right" valign="top" height="40" style="height:40px;padding:6px 2px 0 0"></td>
-                  </tr>
-                  <tr>
-                    <td class="property-image-spacer" colspan="2" role="img" aria-label="${imageAlt}"></td>
-                  </tr>
-                  ${false ? mlsLogoHtml : ""}
-                </tbody>
-              </table>
-            </a>
-          </td>
-        </tr>
-
-        <tr class="property-better-content-row">
-          <td align="left">
-            <a href="${href}" style="text-decoration:none;display:block; padding:12px 8px 12px 8px;" target="_blank">
-              <table>
-                <tbody>
-
-                  <tr>
-                    <td class="property-price" style="padding: 0px 0px 8px 0px; font-size: 20px; font-weight: 600; line-height: 1; text-align: left; color: ${textColor};">
-                      ${price}
-                    </td>
-                  </tr>
-
-                  <tr>
-                    <td class="property-details" style="padding: 0px 0px 8px 0px; font-size: 14px; line-height: 1; text-align: left; color: ${textColor};">
-                      <b>${beds}</b>&nbsp;<abbr title="bedrooms" style="text-decoration:none">bd</abbr>
-
-                      <span class="property-details-separator" >|</span>
-
-                      <b>${baths}</b>&nbsp;<abbr title="bathrooms" style="text-decoration:none">ba</abbr>
-
-                      <span class="property-details-separator" >|</span>
-
-                      <b>${sqft}</b>&nbsp;<abbr title="square feet" style="text-decoration:none">sqft</abbr>
-                    </td>
-                  </tr>
-
-                  <tr>
-                    <td class="property-address" style="padding: 0px 0px 8px 0px; font-size: 14px; line-height: 1; text-align: left; color: ${textColor};">
-                      ${address}, ${city}
-                    </td>
-                  </tr>
-
-                  ${openHouseHtml}
-
-                  <tr>
-                    <td>
-                      <table>
-                        <tbody>
-                          ${isBrokerage ? brokerageHtml : ""}
-                          ${isDescription ? descriptionHtml : ""}
-                        </tbody>
-                      </table>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </a>
-          </td>
-        </tr>
-      </mj-table>
-    `);
-  }
-};
-MjColproperty.componentName = "mj-colproperty";
-MjColproperty.endingTag = false;
-MjColproperty.dependencies = {
-  "mj-column": ["mj-colproperty"],
-  "mj-colproperty": []
-};
-MjColproperty.allowedAttributes = {
-  "image-src": "string",
-  "image-alt": "string",
-  "price": "string",
-  "address": "string",
-  "city": "string",
-  "country": "string",
-  "beds": "string",
-  "baths": "string",
-  "sqft": "string",
-  "href": "string",
-  "status": "string",
-  "status-color": "color",
-  "is-new": "string",
-  "brokerage": "string",
-  "mls-logo": "string",
-  "width": "string",
-  "border-radius": "string",
-  "description": "string",
-  "is-open-house": "string",
-  "open-house-date": "string",
-  "open-house-time": "string",
-  "border": "string",
-  "font-family": "string",
-  "text-color": "color",
-  "is-description": "string",
-  "is-brokerage": "string",
-  "is-status": "string"
-};
-MjColproperty.defaultAttributes = {
-  "image-src": "https://cornerstonepropertymgmt.com/wp-content/themes/cornerstone/assets/img/nofeaturedimage.jpg",
-  "image-alt": "Photo of a Property",
-  "price": "$0",
-  "address": "123 Main Street",
-  "city": "City, ST 00000",
-  "country": "USA",
-  "beds": "--",
-  "baths": "--",
-  "sqft": "--",
-  "href": "#",
-  "status": "Empty",
-  "status-color": "#B8B8B8",
-  "is-new": "",
-  "brokerage": "",
-  "mls-logo": "https://t4.ftcdn.net/jpg/06/71/92/37/360_F_671923740_x0zOL3OIuUAnSF6sr7PuznCI5bQFKhI0.jpg",
-  "border-radius": "0px",
-  "width": "100%",
-  "description": "",
-  "is-open-house": "",
-  "open-house-date": "",
-  "open-house-time": "",
-  "border": "string",
-  "font-family": "Arial, sans-serif",
-  "text-color": "#111116",
-  "is-description": "",
-  "is-brokerage": "",
-  "is-status": ""
-};
-
-// src/mjml-components/property-singletwo/index.ts
-var import_mjml_core2 = require("mjml-core");
-init_border();
-init_format();
-var MjPropertysingletwo = class extends import_mjml_core2.BodyComponent {
-  constructor(initialDatas = {}) {
-    super(initialDatas);
-    this.componentHeadStyle = (breakpoint) => `
-      @media only screen and (max-width:${breakpoint}) {
-        .property-image-section-${this.uniqueId} {
-          border-radius: ${this.innerBorderRadius} ${this.innerBorderRadius} 0 0 !important;
-        }
-
-        .property-content-section-${this.uniqueId} {
-          border-radius: 0 0 ${this.borderRadius} ${this.borderRadius} !important;
-        }
-      }
-    `;
-    const border = parseBorder(this.getAttribute("border"));
-    const borderRadius = this.getAttribute("border-radius");
-    const strokeWeight = border.width;
-    const borderRadiusNum = parseInt(borderRadius, 10) || 0;
-    const innerBorderRadius = `${Math.max(0, borderRadiusNum - strokeWeight)}px`;
-    this.borderRadius = this.getAttribute("border-radius");
-    this.innerBorderRadius = innerBorderRadius;
-    this.uniqueId = Math.random().toString(36).slice(2, 8);
-  }
-  render() {
-    const href = this.getAttribute("href");
-    const price = formatPrice(this.getAttribute("price"));
-    const address = this.getAttribute("address");
-    const city = this.getAttribute("city");
-    const beds = formatNumber(this.getAttribute("beds"));
-    const baths = formatNumber(this.getAttribute("baths"));
-    const sqft = formatNumber(this.getAttribute("sqft"));
-    const description = this.getAttribute("description");
-    const imageSrc = this.getAttribute("image-src");
-    const imageAlt = this.getAttribute("image-alt");
-    const status = this.getAttribute("status");
-    const statusColor = this.getAttribute("status-color");
-    const isNew = this.getAttribute("is-new");
-    const brokerage = this.getAttribute("brokerage");
-    const mlsLogo = this.getAttribute("mls-logo");
-    const width = this.getAttribute("width");
-    const borderRadius = this.getAttribute("border-radius");
-    const isOpenHouse = this.getAttribute("is-open-house");
-    const rawDate = this.getAttribute("open-house-date");
-    const rawTime = this.getAttribute("open-house-time");
-    const openHouseDate = formatOpenHouseDate(rawDate);
-    const [startTime, endTime] = rawTime ? rawTime.split("-") : ["", ""];
-    const openHouseTime = startTime && endTime ? `${formatOpenHouseTime(startTime)}-${formatOpenHouseTime(endTime)}` : "";
-    const fontFamily = this.getAttribute("font-family");
-    const textColor = this.getAttribute("text-color");
-    const isDescription = this.getAttribute("is-description");
-    const isBrokerage = this.getAttribute("is-brokerage");
-    const isStatus = this.getAttribute("is-status");
-    const border = parseBorder(this.getAttribute("border"));
-    const strokeWeight = border.width;
-    const borderRadiusNum = parseInt(borderRadius, 10) || 0;
-    const innerBorderRadius = `${Math.max(0, borderRadiusNum - strokeWeight)}px`;
-    const imageWidth = "243px";
-    const mlsLogoHeight = "32px";
-    const mlsLogoHtml = mlsLogo ? `
-        <tr>
-          <td colspan="2" align="right" valign="bottom" style="height:${mlsLogoHeight};padding:0 4px 4px 0">
-            <img src="${mlsLogo}" border="0" alt="MLS"  style="display:block;font-weight:700;font-size:14px;color:#0041d9;height:${mlsLogoHeight};width:${mlsLogoHeight};border-radius:4px">
-          </td>
-        </tr>
-      ` : "";
-    const statusBadge = `
-        <table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin-left:8px">
-          <tbody>
-            <tr>
-              ${isStatus ? `
-                <td valign="top">
-                  <span class="property-status-badge" style=" display:table;background-color:#fffffe;border-radius:${borderRadius};font-weight:700;font-size:12px;line-height:1.5em;letter-spacing:0.0012em;margin:0;padding:1px 0;"><i style="letter-spacing:3px">&nbsp;</i><span style="color:${statusColor};font-size:18px;line-height:1;vertical-align:-1px;">\u25CF</span>&nbsp;<span style="color:#111116;">${status}</span><i style="letter-spacing:5px">&nbsp;</i></span>
-                </td>
-                ` : ""}
-              ${isNew ? `
-                  ${isStatus ? `<td width="4" style="font-size:0px;line-height:0px">&nbsp;</td>` : ""}
-                  <td valign="top">
-                    <span class="property-new-badge" style="display:table;background-color:#d03c0b;border-radius:${borderRadius};font-weight:700;font-size:12px;line-height:1.5em;letter-spacing:0.0012em;margin:0;padding:2px 0 1px 0"><i style="letter-spacing:5px">&nbsp;</i><span style="color:#ffffff">New</span><i style="letter-spacing:5px">&nbsp;</i></span>
-                  </td>
-                ` : ""}
-            </tr>
-          </tbody>
-        </table>
-      `;
-    const openHouseHtml = isOpenHouse ? `
-        <tr>
-          <td>
-            <table>
-              <tbody>
-                <tr>
-                  <td valign="top" align="right" style="padding:3px 4px 8px 0px;font-size:0">
-                    <img src="https://www.clipartmax.com/png/small/2-21103_home-house-silhouette-icon-building-transparent-background-home-icon.png" border="0" alt="House Icon" width="16" style="display:block;font-weight:700;font-size:14px;color:#2a2a33">
-                  </td>
-                  <td valign="top" align="left" style="font-size:0; padding:0px 0px 0px 0px;">
-                    <strong style="font-size:14px;line-height:24px;color:#2a2a33;margin:0;padding:0">
-                      <abbr title="open house" style="text-decoration:none">Open:</abbr>
-                      &nbsp;
-                    </strong>
-                  </td>
-                  <td valign="top" align="left" style="font-size:0; padding:0px 0px 0px 0px;">
-                    <span style="white-space:nowrap;font-family:'Open Sans',Helvetica,Arial,sans-serif;font-size:14px;line-height:24px;color:#2a2a33;margin:0;padding:0;display:inline-block; font-weight:500; text-decoration:none">
-                      ${openHouseDate} ${openHouseTime}
-                    </span>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </td>
-        </tr>
-      ` : "";
-    const brokerageHtml = brokerage ? `
-        <tr>
-          <td style="padding: 0px 0px 8px 0px; font-size: 10px; font-weight: 300; line-height: 1.5em; text-align: left; color:${textColor};">
-            ${brokerage}
-          </td>
-        </tr>
-      ` : "";
-    const descriptionHtml = description ? `
-        <tr>
-          <td style="padding: 0px 0px 0px 0px; font-weight: 400; font-size: 14px; line-height: 1.5; text-align: left; color: ${textColor};">
-            ${description}
-          </td>
-        </tr>
-      ` : "";
-    return this.renderMJML(`
-      <mj-table width="${width}" font-family="${fontFamily}">
-        <tr>
-          <th class="property-image-section-single-two property-image-section-${this.uniqueId}" align="center" valign="top" background="${imageSrc}" style="background-repeat:no-repeat;background-position:center;background-size:cover;background-color:#eeeef0;border-radius:${innerBorderRadius} 0 0 ${innerBorderRadius};width:${imageWidth}">
-            <a class="property-image-link" href="${href}" style="text-decoration:none;display:block;border-radius:${borderRadius} 0 0 ${borderRadius}" target="_blank">
-              <table role="presentation" class="property-image-overlay-single-two" align="center" cellpadding="0" cellspacing="0" border="0" style="width:${imageWidth}">
-                <tbody>
-                  <tr>
-                    <td align="left" valign="top" height="40" style="height:40px;padding-top:8px">
-                      ${isStatus || isNew ? statusBadge : ""}
-                    </td>
-                    <td align="right" valign="top" height="40" style="height:40px;padding:6px 2px 0 0"></td>
-                  </tr>
-                  <tr>
-                    <td class="property-image-spacer-single-two" colspan="2" style="padding-bottom:121px" role="img" aria-label="${imageAlt}"></td>
-                  </tr>
-                  ${false ? mlsLogoHtml : ""}
-                </tbody>
-              </table>
-            </a>
-          </th>
-          <th class="property-content-section-single-two property-content-section-${this.uniqueId}" valign="top" align="center" >
-            <a class="property-content-link" href="${href}" style="text-decoration:none;display:block;border-radius:0 ${borderRadius} ${borderRadius} 0" target="_blank">
-              <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
-                <tbody>
-                  <tr>
-                    <td class="property-content-inner" valign="top" align="left" style="padding:12px">
-                      <table role="presentation" cellpadding="0" cellspacing="0" border="0">
-                        <tbody>
-
-                          <tr>
-                            <td class="property-price" style="padding: 0px 0px 8px 0px; font-size: 20px; font-weight: 600; line-height: 1.2em; text-align: left; color: ${textColor};">
-                              ${price}
-                            </td>
-                          </tr>
-
-                          <tr>
-                            <td class="property-details" style="padding: 0px 0px 8px 0px; font-size: 14px; line-height: 1.5em; text-align: left; color: ${textColor}; font-weight: 400;">
-                              <b>${beds}</b>&nbsp;<abbr title="bedrooms" style="text-decoration:none">bd</abbr>
-                              <span style="font-family:Arial,sans-serif;color:#7e7f8e;padding:0 4px 0 2px">|</span>
-                              <b>${baths}</b>&nbsp;<abbr title="bathrooms" style="text-decoration:none">ba</abbr>
-                              <span style="font-family:Arial,sans-serif;color:#7e7f8e;padding:0 4px 0 2px">|</span>
-                              <b>${sqft}</b>&nbsp;<abbr title="square feet" style="text-decoration:none">sqft</abbr>
-                            </td>
-                          </tr>
-                          <tr>
-                            <td class="property-address" style="padding: 0px 0px 8px 0px; font-size: 14px; line-height: 1.5em; text-align: left; color: ${textColor}; font-weight: 400;">
-                              ${address}, ${city}
-                            </td>
-                          </tr>
-                          ${openHouseHtml}
-                          
-                          <tr>
-                            <td>
-                              <table>
-                                <tbody>
-                                  ${isBrokerage ? brokerageHtml : ""}
-                                  ${isDescription ? descriptionHtml : ""}
-                                </tbody>
-                              </table>
-                            </td>
-                          </tr>
-                        </tbody>
-                      </table>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </a>
-          </th>
-        </tr>
-      </mj-table>
-    `);
-  }
-};
-MjPropertysingletwo.componentName = "mj-propertysingletwo";
-MjPropertysingletwo.endingTag = false;
-MjPropertysingletwo.dependencies = {
-  "mj-column": ["mj-propertysingletwo"],
-  "mj-propertysingletwo": []
-};
-MjPropertysingletwo.allowedAttributes = {
-  "image-src": "string",
-  "image-alt": "string",
-  "price": "string",
-  "address": "string",
-  "city": "string",
-  "country": "string",
-  "beds": "string",
-  "baths": "string",
-  "sqft": "string",
-  "href": "string",
-  "status": "string",
-  "status-color": "color",
-  "is-new": "string",
-  "brokerage": "string",
-  "mls-logo": "string",
-  "width": "string",
-  "border-radius": "string",
-  "description": "string",
-  "is-open-house": "string",
-  "open-house-date": "string",
-  "open-house-time": "string",
-  "border": "string",
-  "font-family": "string",
-  "text-color": "color",
-  "is-description": "string",
-  "is-brokerage": "string",
-  "is-status": "string"
-};
-MjPropertysingletwo.defaultAttributes = {
-  "image-src": "https://cornerstonepropertymgmt.com/wp-content/themes/cornerstone/assets/img/nofeaturedimage.jpg",
-  "image-alt": "Photo of a Property",
-  "price": "$0",
-  "address": "123 Main Street",
-  "city": "City, ST 00000",
-  "country": "USA",
-  "beds": "--",
-  "baths": "--",
-  "sqft": "--",
-  "href": "#",
-  "status": "Empty",
-  "status-color": "#B8B8B8",
-  "is-new": "",
-  "brokerage": "",
-  "mls-logo": "https://t4.ftcdn.net/jpg/06/71/92/37/360_F_671923740_x0zOL3OIuUAnSF6sr7PuznCI5bQFKhI0.jpg",
-  "border-radius": "0px",
-  "width": "100%",
-  "description": "",
-  "is-open-house": "",
-  "open-house-date": "",
-  "open-house-time": "",
-  "border": "none",
-  "font-family": "Arial, sans-serif",
-  "text-color": "#111116",
-  "is-description": "",
-  "is-brokerage": "",
-  "is-status": ""
-};
-
-// src/mjml-components/property-triple-better/index.ts
-var import_mjml_core3 = require("mjml-core");
-init_border();
-init_format();
-var MjPropertytriplebetter = class extends import_mjml_core3.BodyComponent {
-  constructor(initialDatas = {}) {
-    super(initialDatas);
-    this.componentHeadStyle = (breakpoint) => `
-    @media only screen and (max-width:${breakpoint}) {
-      .property-triple-row-${this.uniqueId} {
-        display: block !important;
-        padding: 0 !important;
-      }
-      .property-triple-card-wrapper-${this.uniqueId} {
-        display: block !important;
-        width: 100% !important;
-      }
-      .property-triple-card-${this.uniqueId} {
-        width: 100% !important;
-        border-radius: ${this.borderRadius} !important;
-      }
-      .property-triple-spacer-${this.uniqueId} {
-        
-      }
-      .property-triple-image-spacer-${this.uniqueId} {
-        
-      }
-      .property-triple-spacer-top,
-      .property-triple-spacer-bottom {
-        display: none !important;
-      }
-      .property-triple-card-row-${this.uniqueId},
-      .property-triple-content-row-${this.uniqueId} {
-        display: table-cell !important;
-        vertical-align: top !important;
-        
-      }
-      .property-triple-image-${this.uniqueId} {
-        width: 600px !important;
-        border-radius: ${this.innerBorderRadius} 0 0 ${this.innerBorderRadius} !important;
-      }
-
-      .property-triple-content-${this.uniqueId} {
-        width: 600px!important;
-        height: 100% !important;
-        border-radius: 0 ${this.innerBorderRadius} ${this.innerBorderRadius} 0 !important;
-      }
-      .property-triple-section-column {
-        width: 100% !important;
-      }
-    }
-  `;
-    this.borderRadius = this.getAttribute("border-radius");
-    this.uniqueId = Math.random().toString(36).slice(2, 8);
-    const border = parseBorder(this.getAttribute("border"));
-    const strokeWeight = border.width;
-    const borderRadiusNum = parseInt(this.borderRadius, 10) || 0;
-    this.innerBorderRadius = `${Math.max(0, borderRadiusNum - strokeWeight)}px`;
-  }
-  renderCard(index) {
-    const href = this.getAttribute(`href-${index}`);
-    const price = formatPrice(this.getAttribute(`price-${index}`));
-    const beds = formatNumber(this.getAttribute(`beds-${index}`));
-    const baths = formatNumber(this.getAttribute(`baths-${index}`));
-    const sqft = formatNumber(this.getAttribute(`sqft-${index}`));
-    const city = this.getAttribute(`city-${index}`);
-    const imageSrc = this.getAttribute(`image-src-${index}`);
-    const borderRadius = this.getAttribute("border-radius");
-    const imageHeight = this.getAttribute("image-height");
-    const border = this.getAttribute("border");
-    const fontFamily = this.getAttribute("font-family");
-    const textColor = this.getAttribute("text-color");
-    const backgroundColor = this.getAttribute("background-color");
-    const parsedBorder = parseBorder(border);
-    const strokeWeight = parsedBorder.width;
-    const borderRadiusNum = parseInt(borderRadius, 10) || 0;
-    const innerBorderRadius = `${Math.max(0, borderRadiusNum - strokeWeight)}px`;
-    return `
-      <table class="property-triple-card-${this.uniqueId} property-triple-table" role="presentation" align="center" cellpadding="0" cellspacing="0" border="0" style="width:100%; border:${border}; border-radius:${borderRadius}; border-collapse:separate;${backgroundColor !== "transparent" ? ` background-color:${backgroundColor};` : ""}">
-        <tbody>
-          <tr class="property-triple-card-row-${this.uniqueId}">
-            <td class="property-triple-image-${this.uniqueId}" align="center" background="${imageSrc}" style="background-repeat:no-repeat;background-position:center;background-size:cover;border-radius:${innerBorderRadius} ${innerBorderRadius} 0px 0px;background-color:#f1f1f4 ">
-              <a style="text-decoration:none" href="${href}" target="_blank">
-                <table role="presentation" align="center" cellpadding="0" cellspacing="0" border="0" style="width:100% height:100%">
-                  <tbody>
-                    <tr>
-                      <td class="property-triple-image-spacer-${this.uniqueId}" style="height:${imageHeight};width:100%" role="img" aria-label="Photo of a Property"></td>
-                    </tr>
-                  </tbody>
-                </table>
-              </a>
-            </td>
-          </tr>
-          <tr class="property-triple-content-row-${this.uniqueId}">
-            <td class="property-triple-content-${this.uniqueId}">
-              <a href="${href}" style="text-decoration:none" target="_blank">
-                <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
-                  <tbody>
-                    <tr>
-                      <td align="left" valign="top" style="padding:4px 6px 8px 8px">
-                        <strong style="display:block;font-family:${fontFamily};font-size:14px;line-height:24px;color:${textColor};font-weight:700">${price}</strong>
-                        <p style="font-family:${fontFamily};font-size:12px;line-height:16px;font-weight:400;color:${textColor};font-style:normal;margin:0;padding:0 0 4px 0">
-                          <b>${beds}</b>&nbsp;<abbr title="bedrooms" style="text-decoration:none">bd</abbr>
-                          <span style="color:#d1d1d5">|</span>
-                          <b>${baths}</b>&nbsp;<abbr title="bathrooms" style="text-decoration:none">ba</abbr>
-                          <span style="color:#d1d1d5">|</span>
-                          <b>${sqft}</b>&nbsp;<abbr title="square feet" style="text-decoration:none">sqft</abbr>
-                        </p>
-                        <p style="font-family:${fontFamily};font-size:12px;line-height:16px;font-weight:400;color:${textColor};font-style:normal;margin:0;padding:0">${city}</p>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </a>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    `;
-  }
-  render() {
-    const width = this.getAttribute("width");
-    const gap = this.getAttribute("gap");
-    const backgroundColor = this.getAttribute("background-color");
-    const card1 = this.renderCard(1);
-    const card2 = this.renderCard(2);
-    const card3 = this.renderCard(3);
-    return this.renderMJML(`
-      <mj-table  align="center" width="${width}" padding="0">
-        <tr class="property-triple-row-${this.uniqueId}">
-          <th class="property-triple-card-wrapper-${this.uniqueId}" valign="top" align="center" width="100px" ">  
-            ${card1}
-          </th>
-          <th class="property-triple-spacer-${this.uniqueId}" style="font-size:0px;line-height:16px;font-weight:normal;width:4px; height:4px">&nbsp;</th>
-          <th class="property-triple-card-wrapper-${this.uniqueId}" valign="top" align="center" width="100px" ">
-              ${card2}
-          </th>
-          <th class="property-triple-spacer-${this.uniqueId}" style="font-size:0px;line-height:16px;font-weight:normal;width:4px; height:4px">&nbsp;</th>
-          <th class="property-triple-card-wrapper-${this.uniqueId}" valign="top" align="center" width="100px" ">
-              ${card3}
-          </th>
-        </tr>
-      </mj-table>
-    `);
-  }
-};
-MjPropertytriplebetter.componentName = "mj-propertytriple";
-MjPropertytriplebetter.endingTag = false;
-MjPropertytriplebetter.dependencies = {
-  "mj-column": ["mj-propertytriple"],
-  "mj-propertytriple": []
-};
-MjPropertytriplebetter.allowedAttributes = {
-  // Global
-  "width": "string",
-  "card-width": "string",
-  "gap": "string",
-  "border-radius": "string",
-  "border": "string",
-  "image-height": "string",
-  "font-family": "string",
-  "text-color": "string",
-  "background-color": "string",
-  // Card 1
-  "image-src-1": "string",
-  "href-1": "string",
-  "price-1": "string",
-  "beds-1": "string",
-  "baths-1": "string",
-  "sqft-1": "string",
-  "city-1": "string",
-  // Card 2
-  "image-src-2": "string",
-  "href-2": "string",
-  "price-2": "string",
-  "beds-2": "string",
-  "baths-2": "string",
-  "sqft-2": "string",
-  "city-2": "string",
-  // Card 3
-  "image-src-3": "string",
-  "href-3": "string",
-  "price-3": "string",
-  "beds-3": "string",
-  "baths-3": "string",
-  "sqft-3": "string",
-  "city-3": "string"
-};
-MjPropertytriplebetter.defaultAttributes = {
-  // Global
-  "width": "100%",
-  "card-width": "160px",
-  "gap": "12px",
-  "border-radius": "0px",
-  "border": "1px solid #d1d1d5",
-  "image-height": "102px",
-  "font-family": "'Open Sans',Helvetica,Arial,sans-serif",
-  "text-color": "#2a2a33",
-  "background-color": "transparent",
-  // Card 1
-  "image-src-1": "https://cornerstonepropertymgmt.com/wp-content/themes/cornerstone/assets/img/nofeaturedimage.jpg",
-  "href-1": "#",
-  "price-1": "$0",
-  "beds-1": "--",
-  "baths-1": "--",
-  "sqft-1": "--",
-  "city-1": "City",
-  // Card 2
-  "image-src-2": "https://cornerstonepropertymgmt.com/wp-content/themes/cornerstone/assets/img/nofeaturedimage.jpg",
-  "href-2": "#",
-  "price-2": "$0",
-  "beds-2": "--",
-  "baths-2": "--",
-  "sqft-2": "--",
-  "city-2": "City",
-  // Card 3
-  "image-src-3": "https://cornerstonepropertymgmt.com/wp-content/themes/cornerstone/assets/img/nofeaturedimage.jpg",
-  "href-3": "#",
-  "price-3": "$0",
-  "beds-3": "--",
-  "baths-3": "--",
-  "sqft-3": "--",
-  "city-3": "City"
-};
-
 // src/index.tsx
 init_json2mjml();
-var index_default2 = MjColproperty;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Editor,
-  MjColproperty,
-  MjPropertysingletwo,
-  MjPropertytriplebetter,
   TemplatePage,
   json2mjml
 });