@useinsider/guido 3.7.2-beta.0ef1511 → 3.7.2-beta.1489585

package/dist/extensions/Blocks/Recommendation/templates/list/elementRenderer.js

@@ -1,10 +1,11 @@
-import { RecommendationBlockId as o } from "../../constants/blockIds.js";
-import { ATTR_PRODUCT_ATTR as u, ATTR_PRODUCT_BUTTON as c, CSS_CLASS_RECO_BUTTON as d, ATTR_PRODUCT_IMAGE as p, ATTR_PRODUCT_OMNIBUS_DISCOUNT as g, ATTR_PRODUCT_OMNIBUS_PRICE as f, ATTR_PRODUCT_OLD_PRICE as T, ATTR_PRODUCT_PRICE as x, ATTR_PRODUCT_NAME as _ } from "../../constants/selectors.js";
-import { useRecommendationExtensionStore as C } from "../../store/recommendation.js";
-import { formatPrice as R } from "../../utils/priceFormatter.js";
-import { CUSTOM_CELL_HTML as O, sanitizeImageUrl as $ } from "../utils.js";
-function b() {
-  const t = C(), { currencySettings: e } = t.recommendationConfigs;
+import { RecommendationBlockId as t } from "../../constants/blockIds.js";
+import { ATTR_PRODUCT_ATTR as R, ATTR_PRODUCT_BUTTON as C, CSS_CLASS_RECO_BUTTON as _, ATTR_PRODUCT_OMNIBUS_DISCOUNT as A, ATTR_PRODUCT_OMNIBUS_PRICE as U, ATTR_PRODUCT_OLD_PRICE as k, ATTR_PRODUCT_PRICE as B, ATTR_PRODUCT_NAME as E, ATTR_PRODUCT_IMAGE as f } from "../../constants/selectors.js";
+import { useRecommendationExtensionStore as P } from "../../store/recommendation.js";
+import { formatPrice as I } from "../../utils/priceFormatter.js";
+import { CUSTOM_CELL_HTML as h, renderStyledParagraph as u, cellBgStyleAttr as d, DEFAULT_BUTTON_BORDER_STYLE as L, renderButtonLabel as N, DEFAULT_BUTTON_ANCHOR_STYLE as D, resolveButtonBorderClass as v, resolvePStyle as y, resolveOmnibusText as S, DEFAULT_IMG_STYLE as M, sanitizeImageUrl as w } from "../utils.js";
+const z = `${D} padding: 5px 30px;`;
+function x() {
+  const r = P(), { currencySettings: e } = r.recommendationConfigs;
   return {
     code: e.value,
     symbol: e.symbol,
@@ -14,120 +15,152 @@ function b() {
     thousandSeparator: e.thousandSeparator
   };
 }
-function r(t, e = "price") {
-  const n = b(), s = t[e], a = (s == null ? void 0 : s[n.code]) ?? Object.values(s ?? {})[0] ?? 0;
-  return R({
-    price: a,
-    currency: n
+function T(r, e = "price") {
+  const l = x(), a = r[e], c = (a == null ? void 0 : a[l.code]) ?? Object.values(a ?? {})[0] ?? 0;
+  return I({
+    price: c,
+    currency: l
   });
 }
-const I = {
+const V = {
   /**
    * Image cell - left column (120px fixed width)
    * Has recommendation-attribute-row class and data attributes for Card Composition control
    */
-  [p]: (t) => `
+  [f]: (r, e) => {
+    var a;
+    const l = ((a = e == null ? void 0 : e.styleTemplate) == null ? void 0 : a.imgStyle) ?? M;
+    return `
         <td
             width="120"
             class="esd-block-image product-image-cell recommendation-attribute-row es-p5"
-            esd-extension-block-id="${o.IMAGE}"
-            data-attribute-type="${p}"
+            esd-extension-block-id="${t.IMAGE}"
+            data-attribute-type="${f}"
             data-visibility="1"
             align="center"
             valign="middle">
-            <a target="_blank" href="${t.url}" class="${d}">
+            <a target="_blank" href="${r.url}" class="${_}">
                 <img
-                    src="${$(t.image_url)}"
-                    alt="${t.name}"
-                    style="display: block; max-width: 100%; height: auto;"
+                    src="${w(r.image_url)}"
+                    alt="${r.name}"
+                    style="${l}"
                     class="adapt-img product-image">
             </a>
         </td>
-    `,
+    `;
+  },
   /**
    * Name element - row for info cell table
    */
-  [_]: (t) => `
+  [E]: (r, e) => {
+    const l = u(
+      r.name,
+      {
+        pStyle: "font-size: 16px; color: #333333; font-weight: 600; margin: 0;",
+        openTags: "<strong>",
+        closeTags: "</strong>"
+      },
+      e == null ? void 0 : e.styleTemplate
+    );
+    return `
         <tr>
             <td
-                class="esd-block-text product-name"
-                esd-extension-block-id="${o.NAME}"
-                align="left">
-                <p contenteditable="false" style="font-size: 16px; color: #333333; font-weight: 600; margin: 0;">
-                    <strong>${t.name}</strong>
-                </p>
+                class="esd-block-text product-name${e != null && e.cellClasses ? ` ${e.cellClasses}` : ""}"
+                esd-extension-block-id="${t.NAME}"${d(e == null ? void 0 : e.cellBackgroundColor)}
+                align="${(e == null ? void 0 : e.cellAlignment) ?? "left"}">
+                ${l}
             </td>
         </tr>
-    `,
+    `;
+  },
   /**
    * Price element - row for info cell table
    */
-  [x]: (t) => `
+  [B]: (r, e) => {
+    const l = u(
+      T(r, "price"),
+      {
+        pStyle: "font-size: 16px; color: #333333; font-weight: bold; margin: 0;",
+        openTags: "<strong>",
+        closeTags: "</strong>"
+      },
+      e == null ? void 0 : e.styleTemplate
+    );
+    return `
         <tr>
             <td
-                class="esd-block-text product-price"
-                esd-extension-block-id="${o.PRICE}"
-                align="left">
-                <p contenteditable="false" style="font-size: 16px; color: #333333; font-weight: bold; margin: 0;">
-                    <strong>${r(t, "price")}</strong>
-                </p>
+                class="esd-block-text product-price${e != null && e.cellClasses ? ` ${e.cellClasses}` : ""}"
+                esd-extension-block-id="${t.PRICE}"${d(e == null ? void 0 : e.cellBackgroundColor)}
+                align="${(e == null ? void 0 : e.cellAlignment) ?? "left"}">
+                ${l}
             </td>
         </tr>
-    `,
+    `;
+  },
   /**
    * Old price element - row for info cell table
    */
-  [T]: (t) => `
+  [k]: (r, e) => {
+    const l = u(
+      T(r, "original_price"),
+      {
+        pStyle: "font-size: 14px; color: #999999; margin: 0;",
+        openTags: "<s><strong>",
+        closeTags: "</strong></s>"
+      },
+      e == null ? void 0 : e.styleTemplate
+    );
+    return `
         <tr>
             <td
-                class="esd-block-text product-old-price"
-                esd-extension-block-id="${o.OLD_PRICE}"
-                align="left">
-                <p
-                    contenteditable="false"
-                    style="font-size: 14px; color: #999999; margin: 0;">
-                    <s><strong>${r(t, "original_price")}</strong></s>
-                </p>
+                class="esd-block-text product-old-price${e != null && e.cellClasses ? ` ${e.cellClasses}` : ""}"
+                esd-extension-block-id="${t.OLD_PRICE}"${d(e == null ? void 0 : e.cellBackgroundColor)}
+                align="${(e == null ? void 0 : e.cellAlignment) ?? "left"}">
+                ${l}
             </td>
         </tr>
-    `,
+    `;
+  },
   /**
    * Omnibus price element - row for info cell table
    */
-  [f]: (t) => `
+  [U]: (r, e) => {
+    const l = y("font-size: 12px; color: #666666; margin: 0;", e == null ? void 0 : e.styleTemplate), { before: a, after: c } = S(e == null ? void 0 : e.omnibusText, "Lowest 30-day price: ");
+    return `
         <tr>
             <td
-                class="esd-block-text product-omnibus-price"
-                data-text-before="Lowest 30-day price: "
-                data-text-after=""
-                esd-extension-block-id="${o.OMNIBUS_PRICE}"
-                align="left">
-                <p contenteditable="false" style="font-size: 12px; color: #666666; margin: 0;">
-                    <span class="omnibus-text-before">Lowest 30-day price: </span>
-                    <span class="omnibus-price-value">${r(t, "original_price")}</span>
-                    <span class="omnibus-text-after"></span>
+                class="esd-block-text product-omnibus-price${e != null && e.cellClasses ? ` ${e.cellClasses}` : ""}"
+                data-text-before="${a}"
+                data-text-after="${c}"
+                esd-extension-block-id="${t.OMNIBUS_PRICE}"${d(e == null ? void 0 : e.cellBackgroundColor)}
+                align="${(e == null ? void 0 : e.cellAlignment) ?? "left"}">
+                <p contenteditable="false" style="${l}">
+                    <span class="omnibus-text-before">${a}</span>
+                    <span class="omnibus-price-value">${T(r, "original_price")}</span>
+                    <span class="omnibus-text-after">${c}</span>
                 </p>
             </td>
         </tr>
-    `,
+    `;
+  },
   /**
    * Omnibus discount element - row for info cell table
    */
-  [g]: (t) => {
-    var i, l;
-    const e = b(), n = ((i = t.original_price) == null ? void 0 : i[e.code]) ?? Object.values(t.original_price ?? {})[0] ?? 0, s = ((l = t.price) == null ? void 0 : l[e.code]) ?? Object.values(t.price ?? {})[0] ?? 0, a = n > 0 ? Math.round((n - s) / n * 100) : 0, m = a > 0 ? `-${a}%` : "0%";
+  [A]: (r, e) => {
+    var b, n;
+    const l = y("font-size: 12px; color: #666666; margin: 0;", e == null ? void 0 : e.styleTemplate), a = x(), c = ((b = r.original_price) == null ? void 0 : b[a.code]) ?? Object.values(r.original_price ?? {})[0] ?? 0, s = ((n = r.price) == null ? void 0 : n[a.code]) ?? Object.values(r.price ?? {})[0] ?? 0, g = c > 0 ? Math.round((c - s) / c * 100) : 0, O = g > 0 ? `-${g}%` : "0%", { before: m, after: $ } = S(e == null ? void 0 : e.omnibusText);
     return `
         <tr>
             <td
-                class="esd-block-text product-omnibus-discount"
-                data-text-before=""
-                data-text-after=""
-                esd-extension-block-id="${o.OMNIBUS_DISCOUNT}"
-                align="left">
-                <p contenteditable="false" style="font-size: 12px; color: #666666; margin: 0;">
-                    <span class="omnibus-text-before"></span>
-                    <span class="omnibus-discount-value">${m}</span>
-                    <span class="omnibus-text-after"></span>
+                class="esd-block-text product-omnibus-discount${e != null && e.cellClasses ? ` ${e.cellClasses}` : ""}"
+                data-text-before="${m}"
+                data-text-after="${$}"
+                esd-extension-block-id="${t.OMNIBUS_DISCOUNT}"${d(e == null ? void 0 : e.cellBackgroundColor)}
+                align="${(e == null ? void 0 : e.cellAlignment) ?? "left"}">
+                <p contenteditable="false" style="${l}">
+                    <span class="omnibus-text-before">${m}</span>
+                    <span class="omnibus-discount-value">${O}</span>
+                    <span class="omnibus-text-after">${$}</span>
                 </p>
             </td>
         </tr>
@@ -137,60 +170,54 @@ const I = {
    * Button cell - right column (100px fixed width)
    * Has recommendation-attribute-row class and data attributes for Card Composition control
    */
-  [c]: (t) => `
+  [C]: (r, e) => {
+    const l = e == null ? void 0 : e.styleTemplate, a = (l == null ? void 0 : l.buttonBorderStyle) ?? L, c = (l == null ? void 0 : l.buttonAnchorStyle) ?? z, s = N((l == null ? void 0 : l.buttonText) ?? "Buy", l);
+    return `
         <td
             width="100"
-            class="esd-block-button button-cell recommendation-attribute-row product-button es-p5l es-p5r"
-            esd-extension-block-id="${o.BUTTON}"
-            data-attribute-type="${c}"
+            class="esd-block-button button-cell recommendation-attribute-row product-button ${(e == null ? void 0 : e.cellClasses) ?? "es-p5l es-p5r"}"
+            esd-extension-block-id="${t.BUTTON}"
+            data-attribute-type="${C}"
             data-visibility="1"
-            align="center"
+            align="${(e == null ? void 0 : e.cellAlignment) ?? "center"}"
             valign="middle">
-            <span
-                class="es-button-border"
-                style="
-                    border-width: 1px;
-                    background: rgb(217, 234, 211);
-                    border-color: rgb(106, 168, 79);
-                ">
+            <span class="${v(l)}" style="${a}">
                 <a
-                    href="${t.url}"
+                    href="${r.url}"
                     target="_blank"
-                    class="es-button ${d}"
-                    style="
-                        color: rgb(56, 118, 29);
-                        background: rgb(217, 234, 211);
-                        font-family: arial, 'helvetica neue', helvetica, sans-serif;
-                        font-size: 16px;
-                        font-weight: normal;
-                        line-height: 120%;
-                        padding: 5px 30px;
-                        mso-border-alt: 10px solid rgb(217, 234, 211);
-                        mso-padding-alt: 0;
-                    ">
-                    Buy
+                    class="es-button ${_}"
+                    style="${c}">
+                    ${s}
                 </a>
             </span>
         </td>
-    `,
+    `;
+  },
   /**
    * Custom attribute row template — same tr-td structure as Name, Price, etc.
    * Used by `buildElementRenderer` for `customAttr:*` composition entries.
    * @param productAttrValue - Resolved product-attr value (e.g., "brand" for default, "product_attribute.rating_star" for custom)
    * @param content - Display content for the cell
    */
-  [O]: (t, e) => `
+  [h]: (r, e, l) => {
+    const a = u(
+      e,
+      { pStyle: "font-size: 12px; color: #666666; margin: 0;", openTags: "", closeTags: "" },
+      l == null ? void 0 : l.styleTemplate
+    );
+    return `
         <tr>
             <td
-                ${u}="${t}"
-                class="esd-block-text product-custom-attribute"
-                esd-extension-block-id="${o.CUSTOM_ATTRIBUTE}"
-                align="left">
-                <p contenteditable="false" style="font-size: 12px; color: #666666; margin: 0;">${e}</p>
+                ${R}="${r}"
+                class="esd-block-text product-custom-attribute${l != null && l.cellClasses ? ` ${l.cellClasses}` : ""}"
+                esd-extension-block-id="${t.CUSTOM_ATTRIBUTE}"${d(l == null ? void 0 : l.cellBackgroundColor)}
+                align="${(l == null ? void 0 : l.cellAlignment) ?? "left"}">
+                ${a}
             </td>
         </tr>
-    `
+    `;
+  }
 };
 export {
-  I as listElementRenderer
+  V as listElementRenderer
 };

package/dist/extensions/Blocks/Recommendation/templates/list/template.js

@@ -1,22 +1,23 @@
-import { ATTR_PRODUCT_IMAGE as a, ATTR_PRODUCT_BUTTON as d } from "../../constants/selectors.js";
-import { DEFAULT_CARD_COMPOSITION as b, spacer as m, buildElementRenderer as C, DEFAULT_CARD_VISIBILITY as T } from "../utils.js";
-import { listElementRenderer as f } from "./elementRenderer.js";
-function R(r, n, l) {
-  const t = l ? "" : ' style="display: none;"', o = r.replace(/<tr>/, "").replace(/<\/tr>/, "");
+import { ATTR_PRODUCT_IMAGE as b, ATTR_PRODUCT_BUTTON as s } from "../../constants/selectors.js";
+import { buildSpacer as I, DEFAULT_CARD_COMPOSITION as O, buildElementRenderer as T, DEFAULT_CARD_VISIBILITY as S } from "../utils.js";
+import { listElementRenderer as N } from "./elementRenderer.js";
+const L = "0 5px";
+function U(n, r, e) {
+  const l = e ? "" : ' style="display: none;"', a = n.replace(/<tr>/, "").replace(/<\/tr>/, "");
   return `<tr
             class="recommendation-attribute-row"
-            data-attribute-type="${n}"
-            data-visibility="${l ? "1" : "0"}"${t}>${o}</tr>`;
+            data-attribute-type="${r}"
+            data-visibility="${e ? "1" : "0"}"${l}>${a}</tr>`;
 }
-const y = `
+const $ = `
     <tr class="recommendation-product-row">
-        <td style="padding: 0 5px;">
+        <td style="padding: {-{-CARD_PADDING-}-};">
             <table
                 width="100%"
                 cellpadding="0"
                 cellspacing="0"
                 border="0"
-                class="product-card-wrapper">
+                class="product-card-wrapper"{-{-WRAPPER_STYLE-}-}>
                 <tbody>
                     <tr>
                         {-{-PRODUCT_CONTENT-}-}
@@ -26,29 +27,49 @@ const y = `
         </td>
     </tr>
 `;
-function O(r, n = b, l = {}) {
-  const t = C(f, n, l), o = t[a](r), c = `
+function x(n, r = O, e = {}, l = {}) {
+  const {
+    cellPadding: a = L,
+    styleTemplates: o,
+    cardBackgroundColor: p,
+    cellBackgroundColors: c,
+    cellAlignments: d,
+    cellClasses: i,
+    omnibusTexts: R,
+    visibility: C
+  } = l, D = p ? ` style="background-color: ${p};"` : "", u = T(N, r, e), _ = { styleTemplate: o == null ? void 0 : o[b] }, P = u[b](n, _), m = `
         <td class="product-info-cell" valign="middle" style="padding: 15px;">
             <table cellpadding="0" cellspacing="0" role="presentation" width="100%" style="table-layout: fixed;">
                 <tbody>
-                    ${n.filter((e) => e !== a && e !== d).filter((e) => t[e]).map((e) => {
-    const u = T[e] ?? !0;
-    return R(t[e](r), e, u);
+                    ${r.filter((t) => t !== b && t !== s).filter((t) => u[t]).map((t) => {
+    const w = (C == null ? void 0 : C[t]) ?? S[t] ?? !0, E = u[t](n, {
+      styleTemplate: o == null ? void 0 : o[t],
+      cellBackgroundColor: c == null ? void 0 : c[t],
+      cellAlignment: d == null ? void 0 : d[t],
+      cellClasses: i == null ? void 0 : i[t],
+      omnibusText: R == null ? void 0 : R[t]
+    });
+    return U(E, t, w);
   }).join(`
                     `)}
                 </tbody>
             </table>
         </td>
-    `, s = t[d](r), p = o + c + s;
-  return y.replace("{-{-PRODUCT_CONTENT-}-}", p);
+    `, A = {
+    styleTemplate: o == null ? void 0 : o[s],
+    cellAlignment: d == null ? void 0 : d[s],
+    cellClasses: i == null ? void 0 : i[s]
+  }, f = u[s](n, A), g = P + m + f;
+  return $.replace("{-{-CARD_PADDING-}-}", a).replace("{-{-WRAPPER_STYLE-}-}", D).replace("{-{-PRODUCT_CONTENT-}-}", g);
 }
-function D(r, n, l = {}) {
-  return r.map((t, o) => {
-    const i = O(t, n, l);
-    return o > 0 ? m + i : i;
+function B(n, r, e = {}, l = {}) {
+  const a = I(l.rowSpacingPx);
+  return n.map((o, p) => {
+    const c = x(o, r, e, l);
+    return p > 0 ? a + c : c;
   }).join("");
 }
 export {
-  O as getListProductCard,
-  D as prepareProductRows
+  x as getListProductCard,
+  B as prepareProductRows
 };

package/dist/extensions/Blocks/Recommendation/templates/utils.js

@@ -1,66 +1,101 @@
-import { ATTR_CUSTOM_PREFIX as d, ATTR_PRODUCT_IMAGE as u, ATTR_PRODUCT_NAME as p, ATTR_PRODUCT_OLD_PRICE as m, ATTR_PRODUCT_PRICE as b, ATTR_PRODUCT_OMNIBUS_PRICE as T, ATTR_PRODUCT_OMNIBUS_DISCOUNT as _, ATTR_PRODUCT_BUTTON as g } from "../constants/selectors.js";
-function y(t) {
-  return t.replace(/_/g, " ").replace(/\b\w/g, (e) => e.toUpperCase());
-}
+import { ATTR_CUSTOM_PREFIX as c, ATTR_PRODUCT_IMAGE as b, ATTR_PRODUCT_NAME as T, ATTR_PRODUCT_OLD_PRICE as g, ATTR_PRODUCT_PRICE as _, ATTR_PRODUCT_OMNIBUS_PRICE as f, ATTR_PRODUCT_OMNIBUS_DISCOUNT as p, ATTR_PRODUCT_BUTTON as m, PRODUCT_ATTRIBUTE_PREFIX as l } from "../constants/selectors.js";
 function U(t) {
-  const e = Array.isArray(t) ? t[t.length - 1] : t;
-  if (typeof e == "string")
-    return e;
-  if (typeof e == "number")
-    return String(e);
+  return t.replace(/_/g, " ").replace(/\b\w/g, (n) => n.toUpperCase());
+}
+function S(t) {
+  const n = Array.isArray(t) ? t[t.length - 1] : t;
+  if (typeof n == "string")
+    return n;
+  if (typeof n == "number")
+    return String(n);
+}
+function C(t, n) {
+  const e = Object.values(n).find((o) => o.attributeName === t);
+  return (e == null ? void 0 : e.type) === "defaultAttribute";
 }
-function C(t, e) {
-  const n = Object.values(e).find((r) => r.attributeName === t);
-  return (n == null ? void 0 : n.type) === "defaultAttribute";
+function E(t, n) {
+  return C(t, n) ? t : `${l}${t}`;
 }
-function h(t, e) {
-  return C(t, e) ? t : `product_attribute.${t}`;
+function M(t) {
+  const n = t.startsWith(l) ? t.substring(l.length) : t;
+  return `${c}${n}`;
 }
 const P = Symbol("customCellHtml");
-function L(t, e, n = {}) {
-  const r = t[P];
-  if (!r)
+function k(t, n, e = {}) {
+  const o = t[P];
+  if (!o)
     return { ...t };
-  const i = { ...t };
-  return e.filter((o) => o.startsWith(d) && !i[o]).forEach((o) => {
-    const s = o.substring(d.length), l = y(s), A = h(s, n), R = C(s, n);
-    i[o] = (c) => {
-      var a;
-      const D = R ? c[s] : (a = c.product_attributes) == null ? void 0 : a[s], O = U(D) ?? l;
-      return r(A, O);
+  const s = { ...t };
+  return n.filter((r) => r.startsWith(c) && !s[r]).forEach((r) => {
+    const i = r.substring(c.length), a = U(i), y = E(i, e), R = C(i, e);
+    s[r] = (d, A) => {
+      var u;
+      const D = R ? d[i] : (u = d.product_attributes) == null ? void 0 : u[i], O = S(D) ?? a;
+      return o(y, O, A);
     };
-  }), i;
+  }), s;
 }
-const M = {
+const x = {
   TITLE: "You May Also Like!"
-}, $ = [
-  u,
-  p,
-  m,
+}, v = [
   b,
   T,
+  g,
   _,
-  g
-], w = {
-  [u]: !0,
-  [p]: !0,
+  f,
+  p,
+  m
+], F = {
   [b]: !0,
-  [m]: !0,
-  [T]: !1,
-  [_]: !1,
-  [g]: !0
-}, I = `
+  [T]: !0,
+  [_]: !0,
+  [g]: !0,
+  [f]: !1,
+  [p]: !1,
+  [m]: !0
+}, I = 10;
+function $(t = I) {
+  return `
     <tr>
-        <td class="spacer" style="height: 10px;"></td>
+        <td class="spacer" style="height: ${t}px;"></td>
     </tr>
-`, f = "https://email-static.useinsider.com/stripo/modules/email-recommendation-v3/assets/images/image-placeholder.png";
-function N(t) {
-  return !t || typeof t != "string" || t.trim() === "" ? f : t.startsWith("http://") ? t.replace("http://", "https://") : t;
+`;
+}
+const L = $();
+function w(t, n) {
+  return n ? n.pStyle ?? "" : t;
+}
+function W(t, n, e) {
+  const o = w(n.pStyle, e), s = e ? e.openTags ?? "" : n.openTags, r = e ? e.closeTags ?? "" : n.closeTags;
+  return `<p contenteditable="false" style="${o}">${s}${t}${r}</p>`;
+}
+function H(t, n) {
+  const e = [];
+  return t && e.push(t), n && e.push(`background-color: ${n};`), e.join(" ");
+}
+function Y(t) {
+  return t ? ` style="background-color: ${t};"` : "";
+}
+function G(t, n = "") {
+  return {
+    before: (t == null ? void 0 : t.before) ?? n,
+    after: (t == null ? void 0 : t.after) ?? ""
+  };
+}
+function z(t, n) {
+  return `${(n == null ? void 0 : n.openTags) ?? ""}${t}${(n == null ? void 0 : n.closeTags) ?? ""}`;
+}
+function X(t) {
+  return t != null && t.buttonFitToContainer ? "es-button-border es-fw" : "es-button-border";
+}
+const j = "display: block; max-width: 100%; height: auto;", V = "border-width: 1px; background: rgb(217, 234, 211); border-color: rgb(106, 168, 79);", K = "color: rgb(56, 118, 29); background: rgb(217, 234, 211); font-family: arial, 'helvetica neue', helvetica, sans-serif; font-size: 16px; font-weight: normal; line-height: 120%; mso-border-alt: 10px solid rgb(217, 234, 211); mso-padding-alt: 0;", h = "https://email-static.useinsider.com/stripo/modules/email-recommendation-v3/assets/images/image-placeholder.png";
+function q(t) {
+  return !t || typeof t != "string" || t.trim() === "" ? h : t.startsWith("http://") ? t.replace("http://", "https://") : t;
 }
-function E(t) {
+function B(t) {
   return {
     name: "Product Name",
-    image_url: f,
+    image_url: h,
     price: { USD: 18 },
     original_price: { USD: 20 },
     discount: { USD: 2 },
@@ -72,19 +107,19 @@ function E(t) {
     category: []
   };
 }
-function k(t = 6) {
+function J(t = 6) {
   return Array.from(
     { length: t },
-    (e, n) => E(String(n + 1))
+    (n, e) => B(String(e + 1))
   );
 }
-function x(t = "grid", e) {
-  const n = t === "list" ? `
-        data-layout="list"` : "", r = e ? ` ${e}` : "";
+function Q(t = "grid", n) {
+  const e = t === "list" ? `
+        data-layout="list"` : "", o = n ? ` ${n}` : "";
   return `
     <td
         align="left"
-        class="${`recommendation-block-v2 esd-block-recommendation-v3-block es-p20${t === "list" ? " es-m-p0 ins-recommendation-list-layout" : ""}${r}`}"${n}>
+        class="${`recommendation-block-v2 esd-block-recommendation-v3-block es-p20${t === "list" ? " es-m-p0 ins-recommendation-list-layout" : ""}${o}`}"${e}>
         <table width="100%" cellpadding="0" cellspacing="0" border="0">
             <tr>
                 <td align="center">
@@ -116,7 +151,7 @@ function x(t = "grid", e) {
                                     </table>
                                 </td>
                             </tr>
-                            ${I}
+                            ${L}
                             <tr>
                                 <td>
                                     <table
@@ -156,17 +191,30 @@ function x(t = "grid", e) {
 }
 export {
   P as CUSTOM_CELL_HTML,
-  M as DEFAULTS,
-  $ as DEFAULT_CARD_COMPOSITION,
-  w as DEFAULT_CARD_VISIBILITY,
-  f as PLACEHOLDER_IMAGE,
-  L as buildElementRenderer,
-  x as createBlockTemplate,
-  k as getDefaultProducts,
+  x as DEFAULTS,
+  K as DEFAULT_BUTTON_ANCHOR_STYLE,
+  V as DEFAULT_BUTTON_BORDER_STYLE,
+  v as DEFAULT_CARD_COMPOSITION,
+  F as DEFAULT_CARD_VISIBILITY,
+  j as DEFAULT_IMG_STYLE,
+  I as DEFAULT_ROW_SPACING_PX,
+  h as PLACEHOLDER_IMAGE,
+  k as buildElementRenderer,
+  $ as buildSpacer,
+  Y as cellBgStyleAttr,
+  Q as createBlockTemplate,
+  J as getDefaultProducts,
   C as isDefaultAttribute,
-  h as resolveProductAttrValue,
-  N as sanitizeImageUrl,
-  I as spacer,
-  y as toDisplayName,
-  U as toDisplayableAttributeValue
+  z as renderButtonLabel,
+  W as renderStyledParagraph,
+  X as resolveButtonBorderClass,
+  G as resolveOmnibusText,
+  w as resolvePStyle,
+  E as resolveProductAttrValue,
+  H as resolveSegmentBgStyle,
+  q as sanitizeImageUrl,
+  L as spacer,
+  M as toCustomCompositionKey,
+  U as toDisplayName,
+  S as toDisplayableAttributeValue
 };