@useinsider/guido 3.0.0-beta.7a5aecd → 3.0.0-beta.7d3a300

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

@@ -1,10 +1,10 @@
 import { RecommendationBlockId as o } from "../../constants/blockIds.js";
-import { ATTR_PRODUCT_BUTTON as l, ATTR_PRODUCT_IMAGE as d, ATTR_PRODUCT_OMNIBUS_DISCOUNT as u, ATTR_PRODUCT_OMNIBUS_PRICE as m, ATTR_PRODUCT_OLD_PRICE as g, ATTR_PRODUCT_PRICE as f, ATTR_PRODUCT_NAME as x } from "../../constants/selectors.js";
-import { useRecommendationExtensionStore as T } from "../../store/recommendation.js";
-import { formatPrice as _ } from "../../utils/priceFormatter.js";
-import { sanitizeImageUrl as y } from "../utils.js";
+import { ATTR_PRODUCT_ATTR as u, ATTR_PRODUCT_BUTTON as l, ATTR_PRODUCT_IMAGE as d, ATTR_PRODUCT_OMNIBUS_DISCOUNT as m, ATTR_PRODUCT_OMNIBUS_PRICE as g, ATTR_PRODUCT_OLD_PRICE as f, ATTR_PRODUCT_PRICE as T, ATTR_PRODUCT_NAME as x } from "../../constants/selectors.js";
+import { useRecommendationExtensionStore as _ } from "../../store/recommendation.js";
+import { formatPrice as R } from "../../utils/priceFormatter.js";
+import { sanitizeImageUrl as C, CUSTOM_CELL_HTML as y } from "../utils.js";
 function p() {
-  const t = T(), { currencySettings: e } = t.recommendationConfigs;
+  const t = _(), { currencySettings: e } = t.recommendationConfigs;
   return {
     code: e.value,
     symbol: e.symbol,
@@ -16,12 +16,12 @@ function p() {
 }
 function s(t, e = "price") {
   const n = p(), r = t[e], a = (r == null ? void 0 : r[n.code]) ?? Object.values(r ?? {})[0] ?? 0;
-  return _({
+  return R({
     price: a,
     currency: n
   });
 }
-const $ = {
+const I = {
   /**
    * Image cell - left column (120px fixed width)
    * Has recommendation-attribute-row class and data attributes for Card Composition control
@@ -37,7 +37,7 @@ const $ = {
             valign="middle">
             <a target="_blank" href="${t.url}">
                 <img
-                    src="${y(t.image_url)}"
+                    src="${C(t.image_url)}"
                     alt="${t.name}"
                     style="display: block; max-width: 100%; height: auto;"
                     class="adapt-img product-image">
@@ -62,7 +62,7 @@ const $ = {
   /**
    * Price element - row for info cell table
    */
-  [f]: (t) => `
+  [T]: (t) => `
         <tr>
             <td
                 class="esd-block-text product-price"
@@ -77,7 +77,7 @@ const $ = {
   /**
    * Old price element - row for info cell table
    */
-  [g]: (t) => `
+  [f]: (t) => `
         <tr>
             <td
                 class="esd-block-text product-old-price"
@@ -94,7 +94,7 @@ const $ = {
   /**
    * Omnibus price element - row for info cell table
    */
-  [m]: (t) => `
+  [g]: (t) => `
         <tr>
             <td
                 class="esd-block-text product-omnibus-price"
@@ -113,7 +113,7 @@ const $ = {
   /**
    * Omnibus discount element - row for info cell table
    */
-  [u]: (t) => {
+  [m]: (t) => {
     var i, c;
     const e = p(), n = ((i = t.original_price) == null ? void 0 : i[e.code]) ?? Object.values(t.original_price ?? {})[0] ?? 0, r = ((c = t.price) == null ? void 0 : c[e.code]) ?? Object.values(t.price ?? {})[0] ?? 0, a = n > 0 ? Math.round((n - r) / n * 100) : 0, b = a > 0 ? `-${a}%` : "0%";
     return `
@@ -162,8 +162,23 @@ const $ = {
                 </a>
             </span>
         </td>
+    `,
+  /**
+   * Custom attribute row template — same tr-td structure as Name, Price, etc.
+   * Used by `buildElementRenderer` for `customAttr:*` composition entries.
+   */
+  [y]: (t, e) => `
+        <tr>
+            <td
+                ${u}="product_attribute.${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>
+            </td>
+        </tr>
     `
 };
 export {
-  $ as listElementRenderer
+  I as listElementRenderer
 };

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

@@ -1,6 +1,13 @@
-import { ATTR_PRODUCT_IMAGE as E, ATTR_PRODUCT_NAME as l, ATTR_PRODUCT_OLD_PRICE as c, ATTR_PRODUCT_PRICE as a, ATTR_PRODUCT_OMNIBUS_PRICE as d, ATTR_PRODUCT_OMNIBUS_DISCOUNT as T, ATTR_PRODUCT_BUTTON as N } from "../../constants/selectors.js";
-import { spacer as $, DEFAULT_CARD_VISIBILITY as o } from "../utils.js";
-import { listElementRenderer as e } from "./elementRenderer.js";
+import { ATTR_PRODUCT_IMAGE as i, ATTR_PRODUCT_BUTTON as d } from "../../constants/selectors.js";
+import { DEFAULT_CARD_COMPOSITION as u, spacer as m, buildElementRenderer as C, DEFAULT_CARD_VISIBILITY as b } from "../utils.js";
+import { listElementRenderer as T } from "./elementRenderer.js";
+function R(r, n, t) {
+  const l = t ? "" : ' style="display: none;"', o = r.replace(/<tr>/, "").replace(/<\/tr>/, "");
+  return `<tr
+            class="recommendation-attribute-row"
+            data-attribute-type="${n}"
+            data-visibility="${t ? "1" : "0"}"${l}>${o}</tr>`;
+}
 const f = `
     <tr class="recommendation-product-row">
         <td style="padding: 0 5px;">
@@ -19,55 +26,29 @@ const f = `
         </td>
     </tr>
 `;
-function V(t) {
-  const r = e[E](t), s = o[l], i = o[c], R = o[a], C = o[d], b = o[T], n = (w, A, p) => {
-    const I = p ? "" : ' style="display: none;"', g = w.replace(/<tr>/, "").replace(/<\/tr>/, "");
-    return `<tr
-            class="recommendation-attribute-row"
-            data-attribute-type="${A}"
-            data-visibility="${p ? "1" : "0"}"${I}>${g}</tr>`;
-  }, m = n(
-    e[l](t),
-    l,
-    s
-  ), _ = n(
-    e[c](t),
-    c,
-    i
-  ), O = n(
-    e[a](t),
-    a,
-    R
-  ), P = n(
-    e[d](t),
-    d,
-    C
-  ), u = n(
-    e[T](t),
-    T,
-    b
-  ), D = `
+function y(r, n = u) {
+  const t = C(T, n), l = t[i](r), a = `
         <td class="product-info-cell" valign="middle" style="padding: 15px;">
             <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
                 <tbody>
-                    ${m}
-                    ${_}
-                    ${O}
-                    ${P}
-                    ${u}
+                    ${n.filter((e) => e !== i && e !== d).filter((e) => t[e]).map((e) => {
+    const p = b[e] ?? !0;
+    return R(t[e](r), e, p);
+  }).join(`
+                    `)}
                 </tbody>
             </table>
         </td>
-    `, U = e[N](t), y = r + D + U;
-  return f.replace("{-{-PRODUCT_CONTENT-}-}", y);
+    `, c = t[d](r), s = l + a + c;
+  return f.replace("{-{-PRODUCT_CONTENT-}-}", s);
 }
-function M(t) {
-  return t.map((r, s) => {
-    const i = V(r);
-    return s > 0 ? $ + i : i;
+function w(r, n) {
+  return r.map((t, l) => {
+    const o = y(t, n);
+    return l > 0 ? m + o : o;
   }).join("");
 }
 export {
-  V as getListProductCard,
-  M as prepareProductRows
+  y as getListProductCard,
+  w as prepareProductRows
 };

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

@@ -1,34 +1,55 @@
-import { ATTR_PRODUCT_IMAGE as o, ATTR_PRODUCT_NAME as s, ATTR_PRODUCT_OLD_PRICE as r, ATTR_PRODUCT_PRICE as l, ATTR_PRODUCT_OMNIBUS_PRICE as i, ATTR_PRODUCT_OMNIBUS_DISCOUNT as a, ATTR_PRODUCT_BUTTON as c } from "../constants/selectors.js";
-const C = {
+import { ATTR_PRODUCT_IMAGE as m, ATTR_PRODUCT_NAME as p, ATTR_PRODUCT_OLD_PRICE as T, ATTR_PRODUCT_PRICE as u, ATTR_PRODUCT_OMNIBUS_PRICE as _, ATTR_PRODUCT_OMNIBUS_DISCOUNT as b, ATTR_PRODUCT_BUTTON as g, ATTR_CUSTOM_PREFIX as d } from "../constants/selectors.js";
+function R(t) {
+  return t.replace(/_/g, " ").replace(/\b\w/g, (e) => e.toUpperCase());
+}
+const O = Symbol("customCellHtml");
+function f(t, e) {
+  const n = t[O];
+  if (!n)
+    return { ...t };
+  const r = { ...t };
+  return e.filter((o) => o.startsWith(d) && !r[o]).forEach((o) => {
+    const s = o.substring(d.length), l = R(s);
+    r[o] = (i) => {
+      var a;
+      const c = (a = i.product_attributes) == null ? void 0 : a[s];
+      return n(
+        s,
+        c != null ? String(c) : l
+      );
+    };
+  }), r;
+}
+const h = {
   TITLE: "You May Also Like!"
-}, D = [
-  o,
-  s,
-  r,
-  l,
-  i,
-  a,
-  c
-], O = {
-  [o]: !0,
-  [s]: !0,
-  [l]: !0,
-  [r]: !0,
-  [i]: !1,
-  [a]: !1,
-  [c]: !0
-}, m = `
+}, I = [
+  m,
+  p,
+  T,
+  u,
+  _,
+  b,
+  g
+], P = {
+  [m]: !0,
+  [p]: !0,
+  [u]: !0,
+  [T]: !0,
+  [_]: !1,
+  [b]: !1,
+  [g]: !0
+}, U = `
     <tr>
         <td class="spacer" style="height: 10px;"></td>
     </tr>
-`, d = "https://email-static.useinsider.com/stripo/modules/email-recommendation-v3/assets/images/image-placeholder.png";
-function U(t) {
-  return !t || typeof t != "string" || t.trim() === "" ? d : t.startsWith("http://") ? t.replace("http://", "https://") : t;
+`, C = "https://email-static.useinsider.com/stripo/modules/email-recommendation-v3/assets/images/image-placeholder.png";
+function E(t) {
+  return !t || typeof t != "string" || t.trim() === "" ? C : t.startsWith("http://") ? t.replace("http://", "https://") : t;
 }
-function T(t) {
+function D(t) {
   return {
     name: "Product Name",
-    image_url: d,
+    image_url: C,
     price: { USD: 18 },
     original_price: { USD: 20 },
     discount: { USD: 2 },
@@ -40,19 +61,19 @@ function T(t) {
     category: []
   };
 }
-function A(t = 6) {
+function S(t = 6) {
   return Array.from(
     { length: t },
-    (e, n) => T(String(n + 1))
+    (e, n) => D(String(n + 1))
   );
 }
-function I(t = "grid", e) {
+function y(t = "grid", e) {
   const n = t === "list" ? `
-        data-layout="list"` : "", p = e ? ` ${e}` : "";
+        data-layout="list"` : "", r = e ? ` ${e}` : "";
   return `
     <td
         align="left"
-        class="${`recommendation-block-v2 esd-block-recommendation-v3-block es-p20${t === "list" ? " es-m-p0 ins-recommendation-list-layout" : ""}${p}`}"${n}>
+        class="${`recommendation-block-v2 esd-block-recommendation-v3-block es-p20${t === "list" ? " es-m-p0 ins-recommendation-list-layout" : ""}${r}`}"${n}>
         <table width="100%" cellpadding="0" cellspacing="0" border="0">
             <tr>
                 <td align="center">
@@ -84,7 +105,7 @@ function I(t = "grid", e) {
                                     </table>
                                 </td>
                             </tr>
-                            ${m}
+                            ${U}
                             <tr>
                                 <td>
                                     <table
@@ -123,12 +144,15 @@ function I(t = "grid", e) {
 `;
 }
 export {
-  C as DEFAULTS,
-  D as DEFAULT_CARD_COMPOSITION,
-  O as DEFAULT_CARD_VISIBILITY,
-  d as PLACEHOLDER_IMAGE,
-  I as createBlockTemplate,
-  A as getDefaultProducts,
-  U as sanitizeImageUrl,
-  m as spacer
+  O as CUSTOM_CELL_HTML,
+  h as DEFAULTS,
+  I as DEFAULT_CARD_COMPOSITION,
+  P as DEFAULT_CARD_VISIBILITY,
+  C as PLACEHOLDER_IMAGE,
+  f as buildElementRenderer,
+  y as createBlockTemplate,
+  S as getDefaultProducts,
+  E as sanitizeImageUrl,
+  U as spacer,
+  R as toDisplayName
 };

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

@@ -1,10 +1,10 @@
 function a(t) {
   return typeof t == "object" && t !== null && "tagName" in t && typeof t.tagName == "string";
 }
-function r(t) {
+function n(t) {
   return typeof t == "object" && t !== null && "getTagName" in t && typeof t.getTagName == "function";
 }
-function n(t) {
+function r(t) {
   return typeof t == "object" && t !== null && "getStyle" in t && typeof t.getStyle == "function";
 }
 function u(t) {
@@ -14,13 +14,13 @@ function g(t) {
   return typeof t == "object" && t !== null && "tagName" in t && t.tagName === "TD";
 }
 function p(t, e) {
-  return !t || !n(t) ? null : t.getStyle(e);
+  return !t || !r(t) ? null : t.getStyle(e);
 }
 function N(t) {
-  return !t || !u(t) ? null : t.parent();
+  return !t || !u(t) ? null : t.parent() ?? null;
 }
 function l(t, e = "UNKNOWN") {
-  return t ? a(t) ? t.tagName.toUpperCase() : r(t) ? t.getTagName().toUpperCase() : e : e;
+  return t ? a(t) ? t.tagName.toUpperCase() : n(t) ? t.getTagName().toUpperCase() : e : e;
 }
 const f = /* @__PURE__ */ new Set(["TD", "BLOCK_IMAGE", "BLOCK_BUTTON"]);
 function i(t) {
@@ -36,7 +36,7 @@ function s(t) {
 export {
   s as getTableDisplayValue,
   l as getTagName,
-  n as hasGetStyle,
+  r as hasGetStyle,
   u as hasParent,
   c as isTableCellNode,
   i as isTableCellTag,

package/dist/extensions/Blocks/Unsubscribe/settingsPanel.js

@@ -1,35 +1,34 @@
-import { SettingsPanelRegistry as e, SettingsPanelTab as N, SettingsTab as t, TextControls as O } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { SettingsPanelRegistry as e, SettingsPanelTab as O, SettingsTab as t, TextControls as N } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { UNSUBSCRIBE_BLOCK_ID as I } from "./block.js";
 import { UNSUBSCRIBE_CONTROL_ID as _ } from "./control.js";
-class R extends e {
+class o extends e {
   registerBlockControls(T) {
     T[I] = [
-      new N(
+      new O(
         t.SETTINGS,
         [
           _,
-          O.FORMAT,
-          O.ALIGN,
-          O.LINE_HEIGHT,
-          O.DIRECTION,
-          O.INTERNAL_INDENTS,
-          O.HIDDEN_NODE
+          N.FORMAT,
+          N.ALIGN,
+          N.LINE_HEIGHT,
+          N.DIRECTION,
+          N.INTERNAL_INDENTS,
+          N.HIDDEN_NODE
         ]
       ),
-      new N(
+      new O(
         t.STYLES,
         [
-          O.TEXT_BLOCK_BACKGROUND_COLOR,
-          O.FONT_FAMILY,
-          O.FONT_SIZE,
-          O.FONT_COLOR,
-          O.FONT_BACKGROUND_COLOR,
-          O.LINKS_COLOR
+          N.TEXT_BLOCK_BACKGROUND_COLOR,
+          N.FONT_FAMILY,
+          N.FONT_SIZE,
+          N.FONT_COLOR,
+          N.FONT_BACKGROUND_COLOR
         ]
       )
     ];
   }
 }
 export {
-  R as SettingsPanel
+  o as SettingsPanel
 };

package/dist/guido.css

@@ -1 +1 @@
-.gap-16[data-v-3b53a736],.gap-16[data-v-0e1b0c54]{gap:16px}[data-v-cd76c125] .in-button-v2__wrapper{line-height:0}[data-v-22226124] .in-segments-wrapper__button_selected,[data-v-22226124] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb;color:#0010ac;border-color:#0010ac}[data-v-079d2bf7] .in-progress-wrapper__progress p span:last-child{display:none!important}.view-options-wrapper[data-v-195ab6d4]{position:relative;display:inline-block}.new-tag[data-v-195ab6d4]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-195ab6d4] .guido__view-option-selection-desktop svg,[data-v-195ab6d4] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-195ab6d4] .in-segments-wrapper__button_selected,[data-v-195ab6d4] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-195ab6d4] .in-tooltip-wrapper__icon{cursor:pointer}.editor-toolbar[data-v-173c3a40]{gap:4px}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history[data-v-64c52560]{gap:8px}.version-history__toolbar[data-v-64c52560]{gap:4px}.view-options-wrapper[data-v-d405ca59]{position:relative;display:inline-block}.new-tag[data-v-d405ca59]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-d405ca59] .guido__verion-history-view-option-selection-desktop svg,[data-v-d405ca59] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-d405ca59] .in-segments-wrapper__button_selected,[data-v-d405ca59] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-d405ca59] .in-tooltip-wrapper__icon{cursor:pointer}.editor-actions[data-v-acff76a8]{gap:4px}.header-wrapper[data-v-5c02dcc7]{min-width:1000px}.guido-loading__wrapper[data-v-07c4b2d8]{height:100%;top:75px!important;bottom:0!important}.guido-editor__wrapper[data-v-a26d7792]{position:relative;width:100%;height:calc(100vh - 128px)}.guido-editor__container[data-v-a26d7792]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-a26d7792]{height:calc(100vh - 75px)}[data-v-293f1c47] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-df672485]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-df672485]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-df672485]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-df672485]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-df672485]{object-fit:cover;transform:scale(1)}[data-v-43c617a7] .guido__verion-history-view-option-selection-desktop svg,[data-v-43c617a7] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-43c617a7] .in-segments-wrapper__button_selected,[data-v-43c617a7] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-c3fd5d4b]{gap:16px}.desktop-browser-header[data-v-d86c5af5]{height:79px;min-height:79px}.desktop-browser-header__left[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:378px}.desktop-browser-header__center[data-v-d86c5af5]{height:79px;background-repeat:repeat-x;background-size:auto 100%;background-position:left top}.desktop-browser-header__right[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:112px}.desktop-preview[data-v-988f8da6]{min-width:602px;height:70vh;min-height:583px;border-radius:10px}.desktop-preview iframe[data-v-988f8da6]{min-height:504px}.iframe-wrapper[data-v-e0424e99]{width:258px}.iframe-scaled[data-v-e0424e99]{width:320px;height:124.0310077519%;transform:scale(.80625);transform-origin:top left}.cropped-text[data-v-eb3d05d7]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-preview-wrapper__phone[data-v-3f472f96]{width:282px}.mobile-preview-wrapper__phone img[data-v-3f472f96]{object-fit:cover;border-radius:44px}.mobile-preview-wrapper__content[data-v-3f472f96]{width:258px;height:450px;left:12px}[data-v-d3c52b44] .vueperslides__bullets,[data-v-dd1a237a] .vueperslides__bullets{pointer-events:none!important}[data-v-dd1a237a] .vueperslides__parallax-wrapper{height:110px!important}[data-v-a408dcea] .vueperslides__bullets{pointer-events:none!important}[data-v-a408dcea] .vueperslides__parallax-wrapper{height:110px!important}
+.gap-16[data-v-3b53a736],.gap-16[data-v-0e1b0c54]{gap:16px}[data-v-cd76c125] .in-button-v2__wrapper{line-height:0}[data-v-22226124] .in-segments-wrapper__button_selected,[data-v-22226124] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb;color:#0010ac;border-color:#0010ac}[data-v-079d2bf7] .in-progress-wrapper__progress p span:last-child{display:none!important}.view-options-wrapper[data-v-195ab6d4]{position:relative;display:inline-block}.new-tag[data-v-195ab6d4]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-195ab6d4] .guido__view-option-selection-desktop svg,[data-v-195ab6d4] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-195ab6d4] .in-segments-wrapper__button_selected,[data-v-195ab6d4] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-195ab6d4] .in-tooltip-wrapper__icon{cursor:pointer}.editor-toolbar[data-v-173c3a40]{gap:4px}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history[data-v-64c52560]{gap:8px}.version-history__toolbar[data-v-64c52560]{gap:4px}.view-options-wrapper[data-v-d405ca59]{position:relative;display:inline-block}.new-tag[data-v-d405ca59]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-d405ca59] .guido__verion-history-view-option-selection-desktop svg,[data-v-d405ca59] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-d405ca59] .in-segments-wrapper__button_selected,[data-v-d405ca59] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-d405ca59] .in-tooltip-wrapper__icon{cursor:pointer}.editor-actions[data-v-acff76a8]{gap:4px}.header-wrapper[data-v-5c02dcc7]{min-width:1000px}.guido-loading__wrapper[data-v-07c4b2d8]{height:100%;top:75px!important;bottom:0!important}.guido-editor__wrapper[data-v-a26d7792]{position:relative;width:100%;height:calc(100vh - 128px)}.guido-editor__container[data-v-a26d7792]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-a26d7792]{height:calc(100vh - 75px)}[data-v-293f1c47] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-df672485]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-df672485]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-df672485]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-df672485]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-df672485]{object-fit:cover;transform:scale(1)}[data-v-43c617a7] .guido__verion-history-view-option-selection-desktop svg,[data-v-43c617a7] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-43c617a7] .in-segments-wrapper__button_selected,[data-v-43c617a7] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-c3fd5d4b]{gap:16px}.desktop-browser-header[data-v-d86c5af5]{height:79px;min-height:79px}.desktop-browser-header__left[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:378px}.desktop-browser-header__center[data-v-d86c5af5]{height:79px;background-repeat:repeat-x;background-size:auto 100%;background-position:left top}.desktop-browser-header__right[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:112px}.desktop-preview[data-v-988f8da6]{min-width:602px;height:70vh;min-height:583px;border-radius:10px}.desktop-preview iframe[data-v-988f8da6]{min-height:504px}.iframe-wrapper[data-v-e0424e99]{width:258px}.iframe-scaled[data-v-e0424e99]{width:320px;height:124.0310077519%;transform:scale(.80625);transform-origin:top left}.cropped-text[data-v-eb3d05d7]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-preview-wrapper__phone[data-v-3f472f96]{width:282px}.mobile-preview-wrapper__phone img[data-v-3f472f96]{object-fit:cover;border-radius:44px}.mobile-preview-wrapper__content[data-v-3f472f96]{width:258px;height:450px;left:12px}[data-v-29b9af29] .vueperslides__bullets,[data-v-dd1a237a] .vueperslides__bullets{pointer-events:none!important}[data-v-dd1a237a] .vueperslides__parallax-wrapper{height:110px!important}[data-v-d073b1dc] .vueperslides__bullets{pointer-events:none!important}[data-v-d073b1dc] .vueperslides__parallax-wrapper{height:110px!important}