@useinsider/guido 3.8.3-beta.96b5eeb → 3.9.0-beta.ba394b1

package/dist/extensions/Blocks/Recommendation/controls/main/utils.js

@@ -1,204 +1,206 @@
 import { ModificationDescription as g } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { RecommendationBlockId as m } from "../../constants/blockIds.js";
-import { CURRENCY_ATTR as y, CSS_CLASS_SKIP_COMPILE as F, MOBILE_CONTAINER_SELECTOR as O, DESKTOP_CONTAINER_SELECTOR as w, CONTAINER_SELECTOR as G, MOBILE_ROW_SELECTOR as N, ATTR_PRODUCT_ATTR as K, PRODUCT_ATTRIBUTE_PREFIX as R } from "../../constants/selectors.js";
+import { CURRENCY_ATTR as y, CSS_CLASS_SKIP_COMPILE as F, MOBILE_CONTAINER_SELECTOR as O, DESKTOP_CONTAINER_SELECTOR as N, CONTAINER_SELECTOR as G, MOBILE_ROW_SELECTOR as w, ATTR_PRODUCT_ATTR as K, PRODUCT_ATTRIBUTE_PREFIX as T } from "../../constants/selectors.js";
 import { RecommendationConfigService as S } from "../../services/configService.js";
 import { useRecommendationExtensionStore as P } from "../../store/recommendation.js";
-import { prepareProductRows as _ } from "../../templates/index.js";
-import { captureStyles as k } from "../../utils/captureStyleTemplates.js";
+import { prepareProductRows as L } from "../../templates/index.js";
+import { captureStyles as _ } from "../../utils/captureStyleTemplates.js";
 import { formatPrice as V } from "../../utils/priceFormatter.js";
-import { getDefaultProducts as L, DEFAULT_CARD_COMPOSITION as T, sanitizeImageUrl as W, toDisplayableAttributeValue as Y } from "../../templates/utils.js";
+import { getDefaultProducts as k, DEFAULT_CARD_COMPOSITION as R, sanitizeImageUrl as W, isSamePrice as Y, toDisplayableAttributeValue as X } from "../../templates/utils.js";
 const M = "recommendation-block-v2";
-function A(e) {
-  if (!e)
+function A(t) {
+  if (!t)
     return null;
-  if ("getAttribute" in e) {
-    const t = e.getAttribute("class");
-    if (t && t.includes(M))
-      return e;
+  if ("getAttribute" in t) {
+    const e = t.getAttribute("class");
+    if (e && e.includes(M))
+      return t;
   }
-  return "querySelector" in e ? e.querySelector(`.${M}`) ?? null : null;
+  return "querySelector" in t ? t.querySelector(`.${M}`) ?? null : null;
 }
-function X(e) {
-  const t = A(e);
-  return !t || !("getAttribute" in t) ? !1 : (t.getAttribute("class") ?? "").split(/\s+/).includes(F);
+function z(t) {
+  const e = A(t);
+  return !e || !("getAttribute" in e) ? !1 : (e.getAttribute("class") ?? "").split(/\s+/).includes(F);
 }
-function C(e) {
-  const t = A(e);
-  if (!t || !("getAttribute" in t))
+function C(t) {
+  const e = A(t);
+  if (!e || !("getAttribute" in e))
     return "grid";
-  const n = t.getAttribute("data-layout");
+  const n = e.getAttribute("data-layout");
   return n === "list" || n === "horizontal" ? "list" : "grid";
 }
-function x(e) {
-  const t = A(e);
-  if (!t || !("getAttribute" in t))
-    return T;
-  const n = t.getAttribute("data-card-composition");
-  return n ? n.split(",").filter(Boolean) : T;
+function x(t) {
+  const e = A(t);
+  if (!e || !("getAttribute" in e))
+    return R;
+  const n = e.getAttribute("data-card-composition");
+  return n ? n.split(",").filter(Boolean) : R;
 }
-function D(e) {
-  if (!e || !("childNodes" in e))
+function D(t) {
+  if (!t || !("childNodes" in t))
     return null;
-  const t = e.childNodes(), n = t.find(
+  const e = t.childNodes(), n = e.find(
     (o) => "getType" in o && o.getType() === "text"
   );
-  return n || t.reduce((o, r) => o || !("getType" in r) || r.getType() === "text" ? o : D(r), null);
+  return n || e.reduce((o, r) => o || !("getType" in r) || r.getType() === "text" ? o : D(r), null);
 }
-function b(e, t, n) {
-  const o = D(t);
-  return o ? (e.modifyHtml(o).setText(n), !0) : !1;
+function b(t, e, n) {
+  const o = D(e);
+  return o ? (t.modifyHtml(o).setText(n), !0) : !1;
 }
-function H(e, t) {
-  return e && e.length > 0 ? e : t.length > 0 ? t : L();
+function H(t, e) {
+  return t && t.length > 0 ? t : e.length > 0 ? e : k();
 }
-function U(e) {
-  if (typeof e == "number")
-    return `0 ${e / 2}px`;
+function U(t) {
+  if (typeof t == "number")
+    return `0 ${t / 2}px`;
 }
-function z(e) {
-  const { currentNode: t, documentModifier: n } = e;
-  if (!t || !("querySelector" in t))
+function J(t) {
+  const { currentNode: e, documentModifier: n } = t;
+  if (!e || !("querySelector" in e))
     return !1;
-  const o = t.querySelector(N);
+  const o = e.querySelector(w);
   return o ? (n.modifyHtml(o).setInnerHtml(""), !0) : !1;
 }
-function J(e) {
-  return "getOuterHTML" in e && typeof e.getOuterHTML == "function" ? e.getOuterHTML() : "";
+function Q(t) {
+  return "getOuterHTML" in t && typeof t.getOuterHTML == "function" ? t.getOuterHTML() : "";
 }
-function Q(e) {
-  const t = e.querySelector(".container");
-  return !t || !("childNodes" in t) ? null : t.childNodes().find((o) => "getTagName" in o && o.getTagName() === "tbody") ?? t.querySelector("tbody") ?? null;
+function Z(t) {
+  const e = t.querySelector(".container");
+  return !e || !("childNodes" in e) ? null : e.childNodes().find((o) => "getTagName" in o && o.getTagName() === "tbody") ?? e.querySelector("tbody") ?? null;
 }
-function Z(e, t, n) {
-  const o = Q(e);
+function ee(t, e, n) {
+  const o = Z(t);
   if (!o || !("childNodes" in o))
     return;
-  const r = o.childNodes().map(J).join(""), s = `<tr class="ins-recommendation-mobile-row">${n}</tr>`;
-  t.modifyHtml(o).setInnerHtml(r + s), t.apply(new g("Added mobile product row"));
+  const r = o.childNodes().map(Q).join(""), s = `<tr class="ins-recommendation-mobile-row">${n}</tr>`;
+  e.modifyHtml(o).setInnerHtml(r + s), e.apply(new g("Added mobile product row"));
 }
-function $(e, t = {}) {
+function $(t, e = {}) {
   const {
     currentNode: n,
     documentModifier: o,
     products: r,
     layout: s,
     composition: i
-  } = e;
+  } = t;
   if (!n || !("querySelector" in n))
     return !1;
   const u = s ?? C(n), c = S.getConfig(n);
   if (u === "list" || !c.mobileLayoutEnabled)
-    return z({ currentNode: n, documentModifier: o });
-  const l = P(), a = H(r, l.recommendationProducts), d = i ?? x(n), p = `<td><table class="ins-recommendation-product-container ins-recommendation-mobile-container" width="100%" cellpadding="0" cellspacing="0" border="0">${_(a, u, {
+    return J({ currentNode: n, documentModifier: o });
+  const l = P(), a = H(r, l.recommendationProducts), d = i ?? x(n), p = `<td><table class="ins-recommendation-product-container ins-recommendation-mobile-container" width="100%" cellpadding="0" cellspacing="0" border="0">${L(a, u, {
     productsPerRow: c.mobileCardsInRow,
     composition: d,
     filterList: l.filterList,
-    // Match the initial render's gutter so a regeneration never changes block height (SD-143023).
+    priceInline: !c.priceMovedToNextLine,
+    // Match the initial render's gutter so a regeneration never changes block height (SD-143023, #386).
     cellPadding: U(c.mobileColumnSpacing),
     rowSpacingPx: c.mobileRowSpacing,
-    ...t
-  })}</table></td>`, E = n.querySelector(N);
-  return E ? (o.modifyHtml(E).setInnerHtml(p), !0) : (Z(n, o, p), !1);
+    ...e
+  })}</table></td>`, E = n.querySelector(w);
+  return E ? (o.modifyHtml(E).setInnerHtml(p), !0) : (ee(n, o, p), !1);
 }
-function pe(e) {
-  $(e, k(e.currentNode)) && e.documentModifier.apply(new g("Updated mobile product rows"));
+function ye(t) {
+  $(t, _(t.currentNode)) && t.documentModifier.apply(new g("Updated mobile product rows"));
 }
-function ee(e, t = {}) {
+function te(t, e = {}) {
   const {
     currentNode: n,
     documentModifier: o,
     products: r,
     layout: s,
     composition: i
-  } = e;
+  } = t;
   if (!n || !("querySelector" in n))
     return !1;
-  const u = n.querySelector(w) ?? n.querySelector(G);
+  const u = n.querySelector(N) ?? n.querySelector(G);
   if (!u)
     return !1;
-  const c = P(), l = H(r, c.recommendationProducts), { cardsInRow: a } = S.getConfig(n), d = i ?? x(n), f = s ?? C(n), p = S.getConfig(n), E = _(l, f, {
+  const c = P(), l = H(r, c.recommendationProducts), { cardsInRow: a } = S.getConfig(n), d = i ?? x(n), f = s ?? C(n), p = S.getConfig(n), E = L(l, f, {
     productsPerRow: a,
     composition: d,
     filterList: c.filterList,
-    // Match the initial render's gutter so a regeneration never changes block height (SD-143023).
+    priceInline: !p.priceMovedToNextLine,
+    // Match the initial render's gutter so a regeneration never changes block height (SD-143023, #386).
     cellPadding: U(p.columnSpacing),
     rowSpacingPx: p.rowSpacing,
-    ...t
+    ...e
   });
   return o.modifyHtml(u).setInnerHtml(E), !0;
 }
-function ye(e) {
+function be(t) {
   const {
-    currentNode: t,
+    currentNode: e,
     documentModifier: n,
     afterRegenerate: o,
     products: r,
     layout: s,
     composition: i,
     skipStylePreservation: u
-  } = e;
-  if (!t)
+  } = t;
+  if (!e)
     return;
-  const c = u ? {} : k(t), l = {
-    currentNode: t,
+  const c = u ? {} : _(e), l = {
+    currentNode: e,
     documentModifier: n,
     products: r,
     layout: s,
     composition: i
   };
-  let a = ee(l, c);
+  let a = te(l, c);
   a = $(l, c) || a, a && n.apply(new g("Regenerate products with styles")), o == null || o();
 }
-function be(e, t) {
-  return e.length === t ? e : e.length > t ? e.slice(0, t) : [...e, ...L(t - e.length)];
+function ge(t, e) {
+  return t.length === e ? t : t.length > e ? t.slice(0, e) : [...t, ...k(e - t.length)];
 }
 function B() {
-  const e = P(), { currencySettings: t } = e.recommendationConfigs, n = parseInt(t.decimalCount);
+  const t = P(), { currencySettings: e } = t.recommendationConfigs, n = parseInt(e.decimalCount);
   return {
-    code: t.value,
-    symbol: t.symbol,
-    alignment: t.alignment === "0" ? "before" : "after",
+    code: e.value,
+    symbol: e.symbol,
+    alignment: e.alignment === "0" ? "before" : "after",
     decimalCount: Number.isNaN(n) ? 2 : n,
-    decimalSeparator: t.decimalSeparator,
-    thousandSeparator: t.thousandSeparator
+    decimalSeparator: e.decimalSeparator,
+    thousandSeparator: e.thousandSeparator
   };
 }
-function q(e, t = "price") {
-  const n = B(), o = e[t], r = (o == null ? void 0 : o[n.code]) ?? Object.values(o ?? {})[0] ?? 0;
+function q(t, e = "price") {
+  const n = B(), o = t[e], r = (o == null ? void 0 : o[n.code]) ?? Object.values(o ?? {})[0] ?? 0;
   return V({
     price: r,
     currency: n
   });
 }
-function te(e) {
+function ne(t) {
   var s, i;
-  const t = B(), n = ((s = e.original_price) == null ? void 0 : s[t.code]) ?? Object.values(e.original_price ?? {})[0] ?? 0, o = ((i = e.price) == null ? void 0 : i[t.code]) ?? Object.values(e.price ?? {})[0] ?? 0, r = n > 0 ? Math.round((n - o) / n * 100) : 0;
+  const e = B(), n = ((s = t.original_price) == null ? void 0 : s[e.code]) ?? Object.values(t.original_price ?? {})[0] ?? 0, o = ((i = t.price) == null ? void 0 : i[e.code]) ?? Object.values(t.price ?? {})[0] ?? 0, r = n > 0 ? Math.round((n - o) / n * 100) : 0;
   return r > 0 ? `-${r}%` : "0%";
 }
-function v(e) {
-  const { documentModifier: t, product: n, priceEl: o, oldPriceEl: r, omnibusPriceEl: s, omnibusDiscountEl: i } = e;
+function v(t) {
+  const { documentModifier: e, product: n, priceEl: o, oldPriceEl: r, omnibusPriceEl: s, omnibusDiscountEl: i } = t;
   let u = !1;
   if (o && "querySelector" in o) {
     const c = o.querySelector("strong") ?? o.querySelector("p"), l = q(n, "price");
-    b(t, c ?? null, l) && (u = !0);
+    b(e, c ?? null, l) && (u = !0);
   }
   if (r && "querySelector" in r) {
     const c = r.querySelector("strong") ?? r.querySelector("p"), l = q(n, "original_price");
-    b(t, c ?? null, l) && (u = !0);
+    b(e, c ?? null, l) && (u = !0), e.modifyHtml(r).setAttribute("data-same-price", String(Y(n))), u = !0;
   }
   if (s && "querySelector" in s) {
     const c = s.querySelector(".omnibus-price-value") ?? null, l = q(n, "original_price");
-    b(t, c, l) && (u = !0);
+    b(e, c, l) && (u = !0);
   }
   if (i && "querySelector" in i) {
-    const c = i.querySelector(".omnibus-discount-value") ?? null, l = te(n);
-    b(t, c, l) && (u = !0);
+    const c = i.querySelector(".omnibus-discount-value") ?? null, l = ne(n);
+    b(e, c, l) && (u = !0);
   }
   return u;
 }
-function ne(e) {
+function oe(t) {
   const {
-    documentModifier: t,
+    documentModifier: e,
     product: n,
     imageEl: o,
     nameEl: r,
@@ -207,20 +209,20 @@ function ne(e) {
     omnibusPriceEl: u,
     omnibusDiscountEl: c,
     buttonEl: l
-  } = e;
+  } = t;
   let a = !1;
   if (o && "querySelector" in o) {
     const d = o.querySelector("img");
-    d && (t.modifyHtml(d).setAttribute("src", W(n.image_url)).setAttribute("alt", n.name), a = !0);
+    d && (e.modifyHtml(d).setAttribute("src", W(n.image_url)).setAttribute("alt", n.name), a = !0);
     const f = o.querySelector("a");
-    f && (t.modifyHtml(f).setAttribute("href", n.url), a = !0);
+    f && (e.modifyHtml(f).setAttribute("href", n.url), a = !0);
   }
   if (r && "querySelector" in r) {
     const d = r.querySelector("strong") ?? r.querySelector("p");
-    b(t, d ?? null, n.name) && (a = !0);
+    b(e, d ?? null, n.name) && (a = !0);
   }
   if (v({
-    documentModifier: t,
+    documentModifier: e,
     product: n,
     priceEl: s,
     oldPriceEl: i,
@@ -228,27 +230,27 @@ function ne(e) {
     omnibusDiscountEl: c
   }) && (a = !0), l && "querySelector" in l) {
     const d = l.querySelector("a.es-button") || l.querySelector("a");
-    d && (t.modifyHtml(d).setAttribute("href", n.url), a = !0);
+    d && (e.modifyHtml(d).setAttribute("href", n.url), a = !0);
   }
   return a;
 }
-function j(e) {
-  return "querySelector" in e ? e.querySelector(w) ?? e : e;
+function j(t) {
+  return "querySelector" in t ? t.querySelector(N) ?? t : t;
 }
-function oe(e, t) {
+function re(t, e) {
   var o;
   let n;
-  if (e.startsWith(R)) {
-    const r = e.slice(R.length);
-    n = (o = t.product_attributes) == null ? void 0 : o[r];
+  if (t.startsWith(T)) {
+    const r = t.slice(T.length);
+    n = (o = e.product_attributes) == null ? void 0 : o[r];
   } else
-    n = t[e];
-  return Y(n) || null;
+    n = e[t];
+  return X(n) || null;
 }
-function re(e, t, n) {
-  if (!("querySelectorAll" in e))
+function ie(t, e, n) {
+  if (!("querySelectorAll" in t))
     return !1;
-  const o = e.querySelectorAll(
+  const o = t.querySelectorAll(
     `[esd-extension-block-id="${m.CUSTOM_ATTRIBUTE}"]`
   );
   if (o.length === 0)
@@ -269,36 +271,36 @@ function re(e, t, n) {
     i.slice(0, c).forEach((l, a) => {
       if (!("querySelector" in l))
         return;
-      const d = oe(u, n[a]);
+      const d = re(u, n[a]);
       if (d === null)
         return;
       const f = l.querySelector("p") ?? null;
-      b(t, f, d) && (s = !0);
+      b(e, f, d) && (s = !0);
     });
   }), s;
 }
-function h(e, t, n) {
-  if (!("querySelectorAll" in e))
+function I(t, e, n) {
+  if (!("querySelectorAll" in t))
     return !1;
-  const o = e.querySelectorAll(
+  const o = t.querySelectorAll(
     `[esd-extension-block-id="${m.IMAGE}"]`
-  ), r = e.querySelectorAll(
+  ), r = t.querySelectorAll(
     `[esd-extension-block-id="${m.NAME}"]`
-  ), s = e.querySelectorAll(
+  ), s = t.querySelectorAll(
     `[esd-extension-block-id="${m.PRICE}"]`
-  ), i = e.querySelectorAll(
+  ), i = t.querySelectorAll(
     `[esd-extension-block-id="${m.OLD_PRICE}"]`
-  ), u = e.querySelectorAll(
+  ), u = t.querySelectorAll(
     `[esd-extension-block-id="${m.OMNIBUS_PRICE}"]`
-  ), c = e.querySelectorAll(
+  ), c = t.querySelectorAll(
     `[esd-extension-block-id="${m.OMNIBUS_DISCOUNT}"]`
-  ), l = e.querySelectorAll(
+  ), l = t.querySelectorAll(
     `[esd-extension-block-id="${m.BUTTON}"]`
   ), a = Math.min(o.length, n.length);
   let d = !1;
   for (let f = 0; f < a; f++) {
-    const p = ne({
-      documentModifier: t,
+    const p = oe({
+      documentModifier: e,
       product: n[f],
       imageEl: o[f] ?? null,
       nameEl: r[f] ?? null,
@@ -310,23 +312,23 @@ function h(e, t, n) {
     });
     d = d || p;
   }
-  return re(e, t, n) && (d = !0), d;
+  return ie(t, e, n) && (d = !0), d;
 }
-function ge(e) {
-  const { currentNode: t, documentModifier: n, products: o } = e;
-  if (!t || !("querySelectorAll" in t))
+function Se(t) {
+  const { currentNode: e, documentModifier: n, products: o } = t;
+  if (!e || !("querySelectorAll" in e))
     return !1;
-  const r = j(t);
+  const r = j(e);
   if (!("querySelectorAll" in r) || r.querySelectorAll(
     `[esd-extension-block-id="${m.IMAGE}"]`
   ).length !== o.length)
     return !1;
-  let i = h(r, n, o);
-  const u = C(t), c = S.getConfig(t);
-  if (u !== "list" && c.mobileLayoutEnabled && "querySelector" in t) {
-    const l = t.querySelector(O);
+  let i = I(r, n, o);
+  const u = C(e), c = S.getConfig(e);
+  if (u !== "list" && c.mobileLayoutEnabled && "querySelector" in e) {
+    const l = e.querySelector(O);
     if (l) {
-      const a = h(
+      const a = I(
         l,
         n,
         o
@@ -336,22 +338,22 @@ function ge(e) {
   }
   return i && n.apply(new g("Updated product content in-place")), !0;
 }
-function I(e, t, n) {
-  if (!("querySelectorAll" in e))
+function h(t, e, n) {
+  if (!("querySelectorAll" in t))
     return !1;
-  const o = e.querySelectorAll(
+  const o = t.querySelectorAll(
     `[esd-extension-block-id="${m.PRICE}"]`
-  ), r = e.querySelectorAll(
+  ), r = t.querySelectorAll(
     `[esd-extension-block-id="${m.OLD_PRICE}"]`
-  ), s = e.querySelectorAll(
+  ), s = t.querySelectorAll(
     `[esd-extension-block-id="${m.OMNIBUS_PRICE}"]`
-  ), i = e.querySelectorAll(
+  ), i = t.querySelectorAll(
     `[esd-extension-block-id="${m.OMNIBUS_DISCOUNT}"]`
   ), u = Math.min(o.length, n.length);
   let c = !1;
   for (let l = 0; l < u; l++)
     v({
-      documentModifier: t,
+      documentModifier: e,
       product: n[l],
       priceEl: o[l] ?? null,
       oldPriceEl: r[l] ?? null,
@@ -360,29 +362,29 @@ function I(e, t, n) {
     }) && (c = !0);
   return c;
 }
-function Se(e) {
-  const { currentNode: t, documentModifier: n } = e;
-  if (!t || !("querySelectorAll" in t))
+function Ee(t) {
+  const { currentNode: e, documentModifier: n } = t;
+  if (!e || !("querySelectorAll" in e))
     return !1;
-  if (X(t))
+  if (z(e))
     return !0;
   const r = P().recommendationProducts;
   if (r.length === 0)
     return !1;
-  const s = j(t);
-  let i = I(s, n, r);
-  const u = C(t), c = S.getConfig(t);
-  if (u !== "list" && c.mobileLayoutEnabled && "querySelector" in t) {
-    const l = t.querySelector(O);
+  const s = j(e);
+  let i = h(s, n, r);
+  const u = C(e), c = S.getConfig(e);
+  if (u !== "list" && c.mobileLayoutEnabled && "querySelector" in e) {
+    const l = e.querySelector(O);
     if (l) {
-      const a = I(l, n, r);
+      const a = h(l, n, r);
       i = i || a;
     }
   }
   return i && n.apply(new g("Updated price formatting in-place")), i;
 }
-function Ee(e) {
-  const { currentNode: t, documentModifier: n, currency: o } = e, r = A(t);
+function Pe(t) {
+  const { currentNode: e, documentModifier: n, currency: o } = t, r = A(e);
   if (!r)
     return;
   const s = o.alignment === "before" ? "0" : "1", i = (u, c) => {
@@ -391,16 +393,16 @@ function Ee(e) {
   i(y.CURRENCY, o.code), i(y.SYMBOL, o.symbol), i(y.ALIGNMENT, s), i(y.THOUSAND_SEPARATOR, o.thousandSeparator), i(y.DECIMAL_SEPARATOR, o.decimalSeparator), i(y.DECIMAL_COUNT, o.decimalCount.toString()), n.apply(new g("Update currency attributes"));
 }
 export {
-  be as adjustProductsToSize,
+  ge as adjustProductsToSize,
   q as formatProductPrice,
   A as getBlockElement,
   x as getCardComposition,
   C as getCurrentLayout,
-  X as isPartnerManagedBlock,
-  pe as regenerateMobileProductRows,
-  ye as regenerateProductRowsWithStyles,
-  Ee as setCurrencyAttributes,
-  Se as updatePricesInPlace,
-  ge as updateProductContentInPlace,
-  ne as updateSingleProductContent
+  z as isPartnerManagedBlock,
+  ye as regenerateMobileProductRows,
+  be as regenerateProductRowsWithStyles,
+  Pe as setCurrencyAttributes,
+  Ee as updatePricesInPlace,
+  Se as updateProductContentInPlace,
+  oe as updateSingleProductContent
 };

package/dist/extensions/Blocks/Recommendation/extension.js

@@ -1,46 +1,47 @@
 import { ExtensionBuilder as r } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { RecommendationBlock as m } from "./block.js";
-import { RecommendationBlockControl as n } from "./controls/main/index.js";
+import n from "./canvasPreview.css.js";
+import { RecommendationBlockControl as i } from "./controls/main/index.js";
 import "./constants/selectors.js";
 import "./store/recommendation.js";
 import "./utils/captureStyleTemplates.js";
-import { NameControls as i } from "./controls/name/index.js";
-import { PriceControls as e } from "./controls/price/index.js";
-import { OldPriceControls as s } from "./controls/oldPrice/index.js";
-import { OmnibusPriceControls as l } from "./controls/omnibusPrice/index.js";
-import { OmnibusDiscountControls as p } from "./controls/omnibusDiscount/index.js";
-import { ButtonControls as a } from "./controls/button/index.js";
-import { ImageControls as c } from "./controls/image/index.js";
+import { NameControls as e } from "./controls/name/index.js";
+import { PriceControls as s } from "./controls/price/index.js";
+import { OldPriceControls as l } from "./controls/oldPrice/index.js";
+import { OmnibusPriceControls as p } from "./controls/omnibusPrice/index.js";
+import { OmnibusDiscountControls as a } from "./controls/omnibusDiscount/index.js";
+import { ButtonControls as c } from "./controls/button/index.js";
+import { ImageControls as f } from "./controls/image/index.js";
 import { CustomAttributeControls as C } from "./controls/customAttribute/index.js";
-import { SpacingControl as f } from "./controls/spacing/index.js";
-import { CardBackgroundColorControl as d } from "./controls/cardBackground/index.js";
-import { RecommendationCardCompositionControl as u } from "./controls/cardComposition/index.js";
-import { SyncInfoMessageControl as g } from "./controls/syncInfoMessage.js";
-import { RecommendationIconsRegistry as R } from "./iconsRegistry.js";
-import y from "./recommendation.css.js";
-import { SettingsPanel as B } from "./settingsPanel.js";
-const b = [
-  i,
+import { SpacingControl as d } from "./controls/spacing/index.js";
+import { CardBackgroundColorControl as u } from "./controls/cardBackground/index.js";
+import { RecommendationCardCompositionControl as g } from "./controls/cardComposition/index.js";
+import { SyncInfoMessageControl as y } from "./controls/syncInfoMessage.js";
+import { RecommendationIconsRegistry as P } from "./iconsRegistry.js";
+import R from "./recommendation.css.js";
+import { SettingsPanel as S } from "./settingsPanel.js";
+const w = [
   e,
   s,
   l,
   p,
   a,
   c,
-  C
-], P = [
-  n,
-  d,
   f,
+  C
+], B = [
+  i,
   u,
-  g
-], S = [
-  ...P,
-  ...b.flatMap((o) => Object.values(o))
-], Q = S.reduce(
+  d,
+  g,
+  y
+], b = [
+  ...B,
+  ...w.flatMap((o) => Object.values(o))
+], U = b.reduce(
   (o, t) => o.addControl(t),
-  new r().addBlock(m).withSettingsPanelRegistry(B)
-).addStyles(y).withIconsRegistry(R).build();
+  new r().addBlock(m).withSettingsPanelRegistry(S)
+).addStyles(R).withPreviewStyles(n).withIconsRegistry(P).build();
 export {
-  Q as default
+  U as default
 };