@kgalexander/mcreate 0.0.8 → 0.0.9

package/dist/index.mjs

@@ -50,6 +50,10 @@ import {
   TooltipTrigger,
   cn,
   formatBorder,
+  formatNumber,
+  formatOpenHouseDate,
+  formatOpenHouseTime,
+  formatPrice,
   getElementDisplayName,
   getParentByIdx,
   getParentIdx,
@@ -61,7 +65,7 @@ import {
   useEditorStore,
   useSidebarContext,
   useUser
-} from "./chunk-JD4V766D.mjs";
+} from "./chunk-Y52MW7DH.mjs";
 
 // src/core/editor/components/email-template-v2/header.tsx
 import { ArrowLeftIcon, CopyIcon, MegaphoneIcon, MoreHorizontalIcon, PencilIcon, TrashIcon } from "lucide-react";
@@ -7810,7 +7814,7 @@ function useAutoSave() {
 // src/core/editor/components/email-template-v2/template-page.tsx
 import "react-json-view-lite/dist/index.css";
 import { jsx as jsx67, jsxs as jsxs52 } from "react/jsx-runtime";
-var Editor2 = lazy(() => import("./core-B2RPCQDU.mjs").then((module) => ({
+var Editor2 = lazy(() => import("./core-C5QQJGQ7.mjs").then((module) => ({
   default: module.Editor
 })));
 function TemplatePage({
@@ -7881,8 +7885,760 @@ function TemplatePage({
     }
   ) });
 }
+
+// src/mjml-components/property-better/index.ts
+import { BodyComponent } from "mjml-core";
+var MjColproperty = class extends 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
+import { BodyComponent as BodyComponent2 } from "mjml-core";
+var MjPropertysingletwo = class extends BodyComponent2 {
+  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
+import { BodyComponent as BodyComponent3 } from "mjml-core";
+var MjPropertytriplebetter = class extends BodyComponent3 {
+  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
+var index_default = MjColproperty;
 export {
   Editor,
+  MjColproperty,
+  MjPropertysingletwo,
+  MjPropertytriplebetter,
   TemplatePage,
+  index_default as default,
   json2mjml
 };