@useinsider/guido 3.15.0 → 3.16.0-beta.0faee0c

package/dist/extensions/Blocks/Recommendation/controls/spacing/index.js

@@ -1,16 +1,16 @@
-var G = Object.defineProperty;
-var P = (u, s, t) => s in u ? G(u, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : u[s] = t;
-var C = (u, s, t) => P(u, typeof s != "symbol" ? s + "" : s, t);
-import { ModificationDescription as m } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as R } from "../../../common-control.js";
-import { DESKTOP_CONTAINER_SELECTOR as S, MOBILE_CONTAINER_SELECTOR as M } from "../../constants/selectors.js";
-import { SPACING_STEP as _, MAX_SPACING as N, MIN_SPACING as b, DEFAULT_COLUMN_SPACING as g, DEFAULT_ROW_SPACING as E } from "../../constants/layout.js";
+var y = Object.defineProperty;
+var M = (u, s, t) => s in u ? y(u, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : u[s] = t;
+var g = (u, s, t) => M(u, typeof s != "symbol" ? s + "" : s, t);
+import { ModificationDescription as S } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as E } from "../../../common-control.js";
+import { DESKTOP_CONTAINER_SELECTOR as m, MOBILE_CONTAINER_SELECTOR as L } from "../../constants/selectors.js";
+import { SPACING_STEP as P, MAX_SPACING as G, MIN_SPACING as R, DEFAULT_COLUMN_SPACING as C, DEFAULT_ROW_SPACING as I } from "../../constants/layout.js";
 import { RecommendationConfigService as p } from "../../services/configService.js";
 import { useRecommendationExtensionStore as w } from "../../store/recommendation.js";
-import { safeGetStyle as L, safeGetParent as V } from "../../utils/tagName.js";
-import { getCurrentLayout as f, getBlockElement as B } from "../main/utils.js";
-import { useDebounceFn as O } from "../../../../../node_modules/@vueuse/shared/index.js";
-const U = "recommendation-spacing-control", n = {
+import { safeGetStyle as f, safeGetParent as B } from "../../utils/tagName.js";
+import { getCurrentLayout as _, getBlockElement as U } from "../main/utils.js";
+import { useDebounceFn as N } from "../../../../../node_modules/@vueuse/shared/index.js";
+const V = "recommendation-spacing-control", o = {
   COLUMN_SPACING: "columnSpacing",
   COLUMN_SPACING_LABEL: "columnSpacingLabel",
   ROW_SPACING: "rowSpacing",
@@ -19,97 +19,67 @@ const U = "recommendation-spacing-control", n = {
   MOBILE_COLUMN_SPACING_LABEL: "mobileColumnSpacingLabel",
   MOBILE_ROW_SPACING: "mobileRowSpacing",
   MOBILE_ROW_SPACING_LABEL: "mobileRowSpacingLabel"
-}, A = {
+}, b = {
   COLUMN_SPACING: "data-column-spacing",
   ROW_SPACING: "data-row-spacing",
   MOBILE_COLUMN_SPACING: "data-mobile-column-spacing",
   MOBILE_ROW_SPACING: "data-mobile-row-spacing"
 };
-function I(u, s) {
+function O(u, s) {
   if (!u)
     return s;
   const t = parseFloat(u);
   return Number.isNaN(t) ? s : t;
 }
-class j extends R {
+class j extends E {
   constructor() {
     super(...arguments);
-    C(this, "store", w());
-    C(this, "unsubscribeOrientation", null);
+    g(this, "store", w());
+    g(this, "unsubscribeOrientation", null);
     /**
      * Debounced version of _onColumnSpacingChange
      * Prevents excessive DOM updates when user rapidly adjusts the counter
      */
-    C(this, "_debouncedOnColumnSpacingChange", O((t) => {
+    g(this, "_debouncedOnColumnSpacingChange", N((t) => {
       this._onColumnSpacingChange(t);
     }, 300));
     /**
      * Debounced version of _onRowSpacingChange
      */
-    C(this, "_debouncedOnRowSpacingChange", O((t) => {
+    g(this, "_debouncedOnRowSpacingChange", N((t) => {
       this._onRowSpacingChange(t);
     }, 300));
     /**
      * Debounced version of _onMobileColumnSpacingChange
      */
-    C(this, "_debouncedOnMobileColumnSpacingChange", O((t) => {
+    g(this, "_debouncedOnMobileColumnSpacingChange", N((t) => {
       this._onMobileColumnSpacingChange(t);
     }, 300));
     /**
      * Debounced version of _onMobileRowSpacingChange
      */
-    C(this, "_debouncedOnMobileRowSpacingChange", O((t) => {
+    g(this, "_debouncedOnMobileRowSpacingChange", N((t) => {
       this._onMobileRowSpacingChange(t);
     }, 300));
   }
   getId() {
-    return U;
+    return V;
   }
   getTemplate() {
     return `
             <div class="spacing-control-container">
-                ${this._GuTwoColumns([
-      this._GuLabel({
-        text: this.api.translate("Column Spacing (px)"),
-        name: n.COLUMN_SPACING_LABEL
-      }),
-      this._GuCounter({
-        name: n.COLUMN_SPACING,
-        minValue: b,
-        maxValue: N,
-        step: _
-      }),
-      this._GuLabel({
-        text: this.api.translate("Row Spacing (px)"),
-        name: n.ROW_SPACING_LABEL
-      }),
-      this._GuCounter({
-        name: n.ROW_SPACING,
-        minValue: b,
-        maxValue: N,
-        step: _
-      }),
-      this._GuLabel({
-        text: this.api.translate("Column Spacing on Mobile (px)"),
-        name: n.MOBILE_COLUMN_SPACING_LABEL
-      }),
-      this._GuCounter({
-        name: n.MOBILE_COLUMN_SPACING,
-        minValue: b,
-        maxValue: N,
-        step: _
-      }),
-      this._GuLabel({
-        text: this.api.translate("Row Spacing on Mobile (px)"),
-        name: n.MOBILE_ROW_SPACING_LABEL
-      }),
-      this._GuCounter({
-        name: n.MOBILE_ROW_SPACING,
-        minValue: b,
-        maxValue: N,
-        step: _
-      })
-    ])}
+                ${this._spacingRow("Column Spacing (px)", o.COLUMN_SPACING_LABEL, o.COLUMN_SPACING)}
+                ${this._spacingRow("Row Spacing (px)", o.ROW_SPACING_LABEL, o.ROW_SPACING)}
+                ${this._spacingRow(
+      "Column Spacing on Mobile (px)",
+      o.MOBILE_COLUMN_SPACING_LABEL,
+      o.MOBILE_COLUMN_SPACING
+    )}
+                ${this._spacingRow(
+      "Row Spacing on Mobile (px)",
+      o.MOBILE_ROW_SPACING_LABEL,
+      o.MOBILE_ROW_SPACING
+    )}
             </div>
         `;
   }
@@ -122,6 +92,21 @@ class j extends R {
   onDestroy() {
     this.unsubscribeOrientation && (this.unsubscribeOrientation(), this.unsubscribeOrientation = null);
   }
+  /**
+   * One label + counter per two-column row, so every spacing field gets the same
+   * 16px-padded row the color controls already render instead of sharing one grid.
+   */
+  _spacingRow(t, e, n) {
+    return this._GuTwoColumns([
+      this._GuLabel({ text: this.api.translate(t), name: e }),
+      this._GuCounter({
+        name: n,
+        minValue: R,
+        maxValue: G,
+        step: P
+      })
+    ]);
+  }
   /**
    * Updates spacing control visibility based on layout orientation and mobileLayoutEnabled.
    * - List layout: hide column spacing (products are full-width), hide ALL mobile
@@ -132,14 +117,14 @@ class j extends R {
   _updateSpacingVisibility() {
     if (!this.api)
       return;
-    const t = p.getConfig(this.currentNode), e = this.store.recommendationConfigs.orientation, i = (t.layout || e || f(this.currentNode)) === "grid", { mobileLayoutEnabled: a } = t, r = t.cardsInRow > 1, c = t.mobileCardsInRow > 1;
-    this.api.setVisibility(n.COLUMN_SPACING, i && r), this.api.setVisibility(n.COLUMN_SPACING_LABEL, i && r), this.api.setVisibility(n.ROW_SPACING, !0), this.api.setVisibility(n.ROW_SPACING_LABEL, !0), this.api.setVisibility(
-      n.MOBILE_COLUMN_SPACING,
+    const t = p.getConfig(this.currentNode), e = this.store.recommendationConfigs.orientation, i = (t.layout || e || _(this.currentNode)) === "grid", { mobileLayoutEnabled: a } = t, r = t.cardsInRow > 1, c = t.mobileCardsInRow > 1;
+    this.api.setVisibility(o.COLUMN_SPACING, i && r), this.api.setVisibility(o.COLUMN_SPACING_LABEL, i && r), this.api.setVisibility(o.ROW_SPACING, !0), this.api.setVisibility(o.ROW_SPACING_LABEL, !0), this.api.setVisibility(
+      o.MOBILE_COLUMN_SPACING,
       i && a && c
     ), this.api.setVisibility(
-      n.MOBILE_COLUMN_SPACING_LABEL,
+      o.MOBILE_COLUMN_SPACING_LABEL,
       i && a && c
-    ), this.api.setVisibility(n.MOBILE_ROW_SPACING, i && a), this.api.setVisibility(n.MOBILE_ROW_SPACING_LABEL, i && a);
+    ), this.api.setVisibility(o.MOBILE_ROW_SPACING, i && a), this.api.setVisibility(o.MOBILE_ROW_SPACING_LABEL, i && a);
   }
   /**
    * Reads spacing values from node config first, falls back to DOM styles.
@@ -148,12 +133,12 @@ class j extends R {
   _setFormValues() {
     if (!this.api)
       return;
-    const t = p.hasConfig(this.currentNode), e = p.getConfig(this.currentNode), o = t ? e.columnSpacing : this._getStoredColumnSpacing(), i = t ? e.rowSpacing : this._getStoredRowSpacing();
+    const t = p.hasConfig(this.currentNode), e = p.getConfig(this.currentNode), n = t ? e.columnSpacing : this._getStoredColumnSpacing(), i = t ? e.rowSpacing : this._getStoredRowSpacing();
     this.api.updateValues({
-      [n.COLUMN_SPACING]: o,
-      [n.ROW_SPACING]: i,
-      [n.MOBILE_COLUMN_SPACING]: e.mobileColumnSpacing,
-      [n.MOBILE_ROW_SPACING]: e.mobileRowSpacing
+      [o.COLUMN_SPACING]: n,
+      [o.ROW_SPACING]: i,
+      [o.MOBILE_COLUMN_SPACING]: e.mobileColumnSpacing,
+      [o.MOBILE_ROW_SPACING]: e.mobileRowSpacing
     });
   }
   /**
@@ -165,20 +150,20 @@ class j extends R {
    */
   _getStoredColumnSpacing() {
     if (!this.currentNode)
-      return g;
-    const t = this.currentNode.querySelector(S) ?? this.currentNode;
-    if (f(this.currentNode) === "grid") {
-      const h = t.querySelector(".recommendation-attribute-row"), l = (h == null ? void 0 : h.querySelector("td")) ?? null, d = L(l, "padding");
+      return C;
+    const t = this.currentNode.querySelector(m) ?? this.currentNode;
+    if (_(this.currentNode) === "grid") {
+      const h = t.querySelector(".recommendation-attribute-row"), l = (h == null ? void 0 : h.querySelector("td")) ?? null, d = f(l, "padding");
       if (!d)
-        return g;
-      const y = d.trim().split(/\s+/);
-      return y.length < 2 ? g : I(y[1], g / 2) * 2;
+        return C;
+      const A = d.trim().split(/\s+/);
+      return A.length < 2 ? C : O(A[1], C / 2) * 2;
     }
-    const o = t.querySelector(".product-card-wrapper") ?? null, i = V(o), a = L(i, "padding");
+    const n = t.querySelector(".product-card-wrapper") ?? null, i = B(n), a = f(i, "padding");
     if (!a)
-      return g;
+      return C;
     const r = a.trim().split(/\s+/);
-    return r.length < 2 ? g : I(r[1], g / 2) * 2;
+    return r.length < 2 ? C : O(r[1], C / 2) * 2;
   }
   /**
    * Gets stored row spacing from the first spacer element's height style
@@ -186,9 +171,9 @@ class j extends R {
    */
   _getStoredRowSpacing() {
     if (!this.currentNode)
-      return E;
-    const e = (this.currentNode.querySelector(S) ?? this.currentNode).querySelector(".spacer") ?? null, o = L(e, "height");
-    return I(o, E);
+      return I;
+    const e = (this.currentNode.querySelector(m) ?? this.currentNode).querySelector(".spacer") ?? null, n = f(e, "height");
+    return O(n, I);
   }
   // ========================================================================
   // Desktop Spacing Handlers
@@ -205,9 +190,9 @@ class j extends R {
       this.currentNode,
       { columnSpacing: t },
       `Changed column spacing to ${t}px`
-    ), this._storeDataAttribute(A.COLUMN_SPACING, t);
-    const o = p.getConfig(this.currentNode).layout || f(this.currentNode), i = this.api.getDocumentModifier(), r = `0 ${t / 2}px`, c = this.currentNode.querySelector(S);
-    c && (o === "grid" ? Array.from(
+    ), this._storeDataAttribute(b.COLUMN_SPACING, t);
+    const n = p.getConfig(this.currentNode).layout || _(this.currentNode), i = this.api.getDocumentModifier(), r = `0 ${t / 2}px`, c = this.currentNode.querySelector(m);
+    c && (n === "grid" ? Array.from(
       c.querySelectorAll(".attribute-cell")
     ).forEach((l) => {
       i.modifyHtml(l).setStyle("padding", r);
@@ -216,7 +201,7 @@ class j extends R {
     ).forEach((l) => {
       const d = "parent" in l ? l.parent() : void 0;
       d && i.modifyHtml(d).setStyle("padding", r);
-    }), i.apply(new m(`Update column spacing to ${t}px`)));
+    }), i.apply(new S(`Update column spacing to ${t}px`)));
   }
   /**
    * Handles row spacing changes for desktop.
@@ -230,19 +215,19 @@ class j extends R {
       this.currentNode,
       { rowSpacing: t },
       `Changed row spacing to ${t}px`
-    ), this._storeDataAttribute(A.ROW_SPACING, t);
-    const e = this.currentNode.querySelector(S);
+    ), this._storeDataAttribute(b.ROW_SPACING, t);
+    const e = this.currentNode.querySelector(m);
     if (!e)
       return;
-    const o = Array.from(
+    const n = Array.from(
       e.querySelectorAll(".spacer")
     );
-    if (!o.length)
+    if (!n.length)
       return;
     const i = this.api.getDocumentModifier(), a = `${t}px`;
-    o.forEach((r) => {
+    n.forEach((r) => {
       i.modifyHtml(r).setStyle("height", a);
-    }), i.apply(new m(`Update row spacing to ${t}px`));
+    }), i.apply(new S(`Update row spacing to ${t}px`));
   }
   // ========================================================================
   // Mobile Spacing Handlers
@@ -259,9 +244,9 @@ class j extends R {
       this.currentNode,
       { mobileColumnSpacing: t },
       `Changed mobile column spacing to ${t}px`
-    ), this._storeDataAttribute(A.MOBILE_COLUMN_SPACING, t);
-    const o = p.getConfig(this.currentNode).layout || f(this.currentNode), i = this.api.getDocumentModifier(), r = `0 ${t / 2}px`, c = this.currentNode.querySelector(M);
-    c && (o === "grid" ? Array.from(
+    ), this._storeDataAttribute(b.MOBILE_COLUMN_SPACING, t);
+    const n = p.getConfig(this.currentNode).layout || _(this.currentNode), i = this.api.getDocumentModifier(), r = `0 ${t / 2}px`, c = this.currentNode.querySelector(L);
+    c && (n === "grid" ? Array.from(
       c.querySelectorAll(".attribute-cell")
     ).forEach((l) => {
       i.modifyHtml(l).setStyle("padding", r);
@@ -270,7 +255,7 @@ class j extends R {
     ).forEach((l) => {
       const d = "parent" in l ? l.parent() : void 0;
       d && i.modifyHtml(d).setStyle("padding", r);
-    }), i.apply(new m(`Update mobile column spacing to ${t}px`)));
+    }), i.apply(new S(`Update mobile column spacing to ${t}px`)));
   }
   /**
    * Handles row spacing changes for mobile.
@@ -284,19 +269,19 @@ class j extends R {
       this.currentNode,
       { mobileRowSpacing: t },
       `Changed mobile row spacing to ${t}px`
-    ), this._storeDataAttribute(A.MOBILE_ROW_SPACING, t);
-    const e = this.currentNode.querySelector(M);
+    ), this._storeDataAttribute(b.MOBILE_ROW_SPACING, t);
+    const e = this.currentNode.querySelector(L);
     if (!e)
       return;
-    const o = Array.from(
+    const n = Array.from(
       e.querySelectorAll(".spacer")
     );
-    if (!o.length)
+    if (!n.length)
       return;
     const i = this.api.getDocumentModifier(), a = `${t}px`;
-    o.forEach((r) => {
+    n.forEach((r) => {
       i.modifyHtml(r).setStyle("height", a);
-    }), i.apply(new m(`Update mobile row spacing to ${t}px`));
+    }), i.apply(new S(`Update mobile row spacing to ${t}px`));
   }
   // ========================================================================
   // Data Attribute Storage
@@ -305,23 +290,23 @@ class j extends R {
    * Stores a spacing value as a data attribute on the block root element
    */
   _storeDataAttribute(t, e) {
-    const o = B(this.currentNode);
-    o && this.api.getDocumentModifier().modifyHtml(o).setAttribute(t, e.toString()).apply(new m(`Store ${t}`));
+    const n = U(this.currentNode);
+    n && this.api.getDocumentModifier().modifyHtml(n).setAttribute(t, e.toString()).apply(new S(`Store ${t}`));
   }
   // ========================================================================
   // Event Listeners
   // ========================================================================
   _listenToFormUpdates() {
-    this.api.onValueChanged(n.COLUMN_SPACING, (t) => {
+    this.api.onValueChanged(o.COLUMN_SPACING, (t) => {
       const e = parseInt(t);
       Number.isNaN(e) || this._debouncedOnColumnSpacingChange(e);
-    }), this.api.onValueChanged(n.ROW_SPACING, (t) => {
+    }), this.api.onValueChanged(o.ROW_SPACING, (t) => {
       const e = parseInt(t);
       Number.isNaN(e) || this._debouncedOnRowSpacingChange(e);
-    }), this.api.onValueChanged(n.MOBILE_COLUMN_SPACING, (t) => {
+    }), this.api.onValueChanged(o.MOBILE_COLUMN_SPACING, (t) => {
       const e = parseInt(t);
       Number.isNaN(e) || this._debouncedOnMobileColumnSpacingChange(e);
-    }), this.api.onValueChanged(n.MOBILE_ROW_SPACING, (t) => {
+    }), this.api.onValueChanged(o.MOBILE_ROW_SPACING, (t) => {
       const e = parseInt(t);
       Number.isNaN(e) || this._debouncedOnMobileRowSpacingChange(e);
     });
@@ -337,6 +322,6 @@ class j extends R {
   }
 }
 export {
-  U as SPACING_CONTROL_ID,
+  V as SPACING_CONTROL_ID,
   j as SpacingControl
 };

package/dist/extensions/Blocks/Recommendation/recommendation.css.js

@@ -25,6 +25,27 @@ const n = `/* Utils */
     border-top: none;
 }
 
+/* The editor's row-separator rule only reaches \`.container\`s that are direct
+   children of \`.container-wrapper\`; the spacing rows sit one level deeper, so the
+   first one loses its line. Restore it with the editor's own border token. */
+.spacing-control-container > .container {
+    border-top: var(--ue-border-width-1, 1px) solid var(--ue-panels-border-color, rgba(0, 0, 0, 0.07));
+}
+
+/* A spacing field that doesn't apply (mobile rows, column spacing in list layout) is
+   removed from its row and leaves the wrapper behind — collapse it so it can't
+   render as an empty separator-topped strip. */
+.spacing-control-container > .container:not(:has(ue-counter)) {
+    display: none;
+}
+
+/* The block background row stacks the editor's "inherits background color" banner
+   above its field, separated by the editor's default 10px gap — match the tab's 16px.
+   Scoped via the spacing control so other blocks keep the default. */
+.ue-scrollable-content:has(.spacing-control-container) .e2e-block-bg-color {
+    row-gap: 16px;
+}
+
 /* Right-align the mobile layout toggle within the two-column grid */
 .product-layout-control-container ue-switcher {
     justify-self: end;

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

@@ -28,10 +28,10 @@ const G = `
         {-{-CELLS-}-}
     </tr>
 `;
-function j(e, t, n, r = Y, c = {}, i = {}) {
-  const { cellPadding: s = k, cardBackgroundColor: u, visibility: a, priceInline: o = !1 } = i, d = (100 / t).toFixed(2), p = t - e.length, T = p > 0 ? x(d, s).repeat(p) : "", m = B(n, r, c), R = F(r), L = o ? r.filter((l) => l !== R.skip) : r, C = I(f, i), P = I(O, i);
+function j(t, r, o, e = Y, c = {}, i = {}) {
+  const { cellPadding: s = k, cardBackgroundColor: u, visibility: a, priceInline: n = !1 } = i, d = (100 / r).toFixed(2), p = r - t.length, T = p > 0 ? x(d, s).repeat(p) : "", m = B(o, e, c), R = F(e), L = n ? e.filter((l) => l !== R.skip) : e, C = I(f, i), P = I(O, i);
   return L.filter((l) => m[l]).map((l) => {
-    const _ = (a == null ? void 0 : a[l]) ?? W[l] ?? !0, b = _ ? "" : 'style="display: none;"', S = I(l, i), D = e.map((E) => (o && l === R.anchor ? H(
+    const _ = (a == null ? void 0 : a[l]) ?? W[l] ?? !0, b = _ ? "" : 'style="display: none;"', S = I(l, i, e), D = t.map((E) => (n && l === R.anchor ? H(
       E,
       R.originalFirst,
       C,
@@ -41,36 +41,36 @@ function j(e, t, n, r = Y, c = {}, i = {}) {
     return V.replace("{-{-ATTR_TYPE-}-}", l).replace("{-{-VISIBILITY-}-}", _ ? "1" : "0").replace("{-{-DISPLAY_STYLE-}-}", b).replace("{-{-CELLS-}-}", D + T);
   }).join("");
 }
-function v(e, t, n, r, c = {}, i = {}) {
+function v(t, r, o, e, c = {}, i = {}) {
   const s = [];
-  for (let o = 0; o < e.length; o += t)
-    s.push(e.slice(o, o + t));
+  for (let n = 0; n < t.length; n += r)
+    s.push(t.slice(n, n + r));
   const u = h(i.rowSpacingPx);
-  return s.map((o, d) => {
+  return s.map((n, d) => {
     const p = j(
-      o,
-      t,
       n,
       r,
+      o,
+      e,
       c,
       i
     ), T = G.replace("{-{-ATTRIBUTE_ROWS-}-}", p);
     return d > 0 ? u + T : T;
   }).join("");
 }
-function M(e, t, n, r = {}, c = {}) {
+function M(t, r, o, e = {}, c = {}) {
   return v(
-    e,
     t,
-    y,
-    n,
     r,
+    y,
+    o,
+    e,
     c
   );
 }
-function Q(e) {
-  const t = e ? `ins-recommendation-v3-block-${e}` : void 0, n = U("grid", t), r = A(), c = M(r, w);
-  return n.replace("{-{-TITLE-}-}", g.TITLE).replace("{-{-PRODUCT_ROWS-}-}", c).replace("{-{-MOBILE_PRODUCT_ROWS-}-}", "");
+function Q(t) {
+  const r = t ? `ins-recommendation-v3-block-${t}` : void 0, o = U("grid", r), e = A(), c = M(e, w);
+  return o.replace("{-{-TITLE-}-}", g.TITLE).replace("{-{-PRODUCT_ROWS-}-}", c).replace("{-{-MOBILE_PRODUCT_ROWS-}-}", "");
 }
 export {
   Q as getDefaultTemplate,

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

@@ -1,13 +1,13 @@
-import { ATTR_PRODUCT_IMAGE as p, ATTR_PRODUCT_BUTTON as C, ATTR_PRODUCT_OLD_PRICE as A, ATTR_PRODUCT_PRICE as m } from "../../constants/selectors.js";
-import { buildSpacer as I, DEFAULT_CARD_COMPOSITION as g, buildElementRenderer as E, buildCellOptions as i, resolveInlinePriceOrder as w, DEFAULT_CARD_VISIBILITY as y } from "../utils.js";
+import { ATTR_PRODUCT_IMAGE as p, ATTR_PRODUCT_BUTTON as C, ATTR_PRODUCT_OLD_PRICE as A, ATTR_PRODUCT_PRICE as I } from "../../constants/selectors.js";
+import { buildSpacer as m, DEFAULT_CARD_COMPOSITION as g, buildElementRenderer as E, buildCellOptions as i, resolveInlinePriceOrder as w, DEFAULT_CARD_VISIBILITY as y } from "../utils.js";
 import { listElementRenderer as L, renderInlineListPriceRow as O } from "./elementRenderer.js";
 const S = "0 5px";
 function U(l, r, n) {
-  const e = n ? "" : ' style="display: none;"', o = l.replace(/<tr>/, "").replace(/<\/tr>/, "");
+  const t = n ? "" : ' style="display: none;"', o = l.replace(/<tr>/, "").replace(/<\/tr>/, "");
   return `<tr
             class="recommendation-attribute-row"
             data-attribute-type="${r}"
-            data-visibility="${n ? "1" : "0"}"${e}>${o}</tr>`;
+            data-visibility="${n ? "1" : "0"}"${t}>${o}</tr>`;
 }
 const N = `
     <tr class="recommendation-product-row">
@@ -27,36 +27,36 @@ const N = `
         </td>
     </tr>
 `;
-function x(l, r = g, n = {}, e = {}) {
+function x(l, r = g, n = {}, t = {}) {
   const {
     cellPadding: o = S,
     cardBackgroundColor: d,
     visibility: c,
     priceInline: a = !1
-  } = e, u = d ? ` style="table-layout: fixed; background-color: ${d};"` : ' style="table-layout: fixed;"', s = E(L, r, n), P = s[p](l, i(p, e)), R = w(r), T = `
+  } = t, u = d ? ` style="table-layout: fixed; background-color: ${d};"` : ' style="table-layout: fixed;"', s = E(L, r, n), P = s[p](l, i(p, t)), R = w(r), T = `
         <td class="product-info-cell" valign="middle" style="padding: 15px;">
             <table cellpadding="0" cellspacing="0" role="presentation" width="100%" style="table-layout: fixed;">
                 <tbody>
-                    ${r.filter((t) => t !== p && t !== C).filter((t) => !(a && t === R.skip)).filter((t) => s[t]).map((t) => {
-    const b = (c == null ? void 0 : c[t]) ?? y[t] ?? !0, f = a && t === R.anchor ? O(
+                    ${r.filter((e) => e !== p && e !== C).filter((e) => !(a && e === R.skip)).filter((e) => s[e]).map((e) => {
+    const b = (c == null ? void 0 : c[e]) ?? y[e] ?? !0, f = a && e === R.anchor ? O(
       l,
       R.originalFirst,
-      i(m, e),
-      i(A, e)
-    ) : s[t](l, i(t, e));
-    return U(f, t, b);
+      i(I, t),
+      i(A, t)
+    ) : s[e](l, i(e, t, r));
+    return U(f, e, b);
   }).join(`
                     `)}
                 </tbody>
             </table>
         </td>
-    `, _ = s[C](l, i(C, e)), D = P + T + _;
+    `, _ = s[C](l, i(C, t)), D = P + T + _;
   return N.replace("{-{-CARD_PADDING-}-}", o).replace("{-{-WRAPPER_STYLE-}-}", u).replace("{-{-PRODUCT_CONTENT-}-}", D);
 }
-function W(l, r, n = {}, e = {}) {
-  const o = I(e.rowSpacingPx);
+function W(l, r, n = {}, t = {}) {
+  const o = m(t.rowSpacingPx);
   return l.map((d, c) => {
-    const a = x(d, r, n, e);
+    const a = x(d, r, n, t);
     return c > 0 ? o + a : a;
   }).join("");
 }