@useinsider/guido 2.0.0-beta.6e688eb → 2.0.0-beta.7459e2a

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

@@ -1,7 +1,6 @@
-import { ATTR_PRODUCT_BUTTON as o, ATTR_PRODUCT_OMNIBUS_DISCOUNT as a, ATTR_PRODUCT_OMNIBUS_PRICE as s, ATTR_PRODUCT_OLD_PRICE as l, ATTR_PRODUCT_PRICE as c, ATTR_PRODUCT_NAME as r, ATTR_PRODUCT_IMAGE as d } from "../constants.js";
-import { prepareProductRows as i } from "./templateUtils.js";
-import { DEFAULTS as k, getDefaultProducts as f } from "./templateUtils.js";
-const g = `
+import { prepareProductRows as n } from "./templateUtils.js";
+import { DEFAULTS as i, getDefaultProducts as p } from "./templateUtils.js";
+const a = `
     <td
         align="left"
         esd-extension-block-id="recommendation-block"
@@ -55,8 +54,8 @@ const g = `
             </tr>
         </table>
     </td>
-`, p = {
-  [d]: (t) => `
+`, l = {
+  productImage: (t) => `
         <tr>
             <td
                 class="esd-block-image product-image"
@@ -74,7 +73,7 @@ const g = `
             </td>
         </tr>
     `,
-  [r]: (t) => `
+  productName: (t) => `
         <tr>
             <td
                 class="esd-block-text product-name"
@@ -89,7 +88,7 @@ const g = `
             </td>
         </tr>
     `,
-  [c]: () => `
+  productPrice: () => `
         <tr>
             <td
                 class="esd-block-text product-price"
@@ -104,7 +103,7 @@ const g = `
             </td>
         </tr>
     `,
-  [l]: () => `
+  productOldPrice: () => `
         <tr>
             <td
                 class="esd-block-text product-old-price"
@@ -119,43 +118,7 @@ const g = `
             </td>
         </tr>
     `,
-  [s]: () => `
-        <tr>
-            <td
-                class="esd-block-text product-omnibus-price"
-                esd-extension-block-id="recommendation-block-omnibus-price"
-                data-text-before="Lowest 30-day price: "
-                data-text-after=""
-                align="center">
-                <p
-                    path="1"
-                    contenteditable="false"
-                    style="font-size: 14px; color: #666666; text-align: center;"><span
-                    class="omnibus-text-before">Lowest 30-day price: </span><span
-                    class="omnibus-price-value">17,00 TRY</span><span
-                    class="omnibus-text-after"></span></p>
-            </td>
-        </tr>
-    `,
-  [a]: () => `
-        <tr>
-            <td
-                class="esd-block-text product-omnibus-discount"
-                esd-extension-block-id="recommendation-block-omnibus-discount"
-                data-text-before=""
-                data-text-after=""
-                align="center">
-                <p
-                    path="1"
-                    contenteditable="false"
-                    style="font-size: 14px; color: #666666; text-align: center;"><span
-                    class="omnibus-text-before"></span><span
-                    class="omnibus-discount-value">-6%</span><span
-                    class="omnibus-text-after"></span></p>
-            </td>
-        </tr>
-    `,
-  [o]: (t) => `
+  productButton: (t) => `
         <tr>
             <td
                 class="esd-block-button product-button"
@@ -173,17 +136,17 @@ const g = `
         </tr>
     `
 };
-function u(t, e, n) {
-  return i(
+function d(t, e, o) {
+  return n(
     t,
     e,
-    p,
-    n
+    l,
+    o
   );
 }
 export {
-  k as DEFAULTS,
-  g as default,
-  f as getDefaultProducts,
-  u as prepareProductRows
+  i as DEFAULTS,
+  a as default,
+  p as getDefaultProducts,
+  d as prepareProductRows
 };

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

@@ -1,19 +1,18 @@
-import { ATTR_PRODUCT_IMAGE as h, ATTR_PRODUCT_NAME as C, ATTR_PRODUCT_OLD_PRICE as D, ATTR_PRODUCT_PRICE as b, ATTR_PRODUCT_OMNIBUS_PRICE as P, ATTR_PRODUCT_OMNIBUS_DISCOUNT as U, ATTR_PRODUCT_BUTTON as N } from "../constants.js";
-const E = {
+const R = {
   TITLE: "You May Also Like!"
-}, I = `
+}, O = `
     <tr>
-        <td class="spacer" style="height: 10px;"></td>
+        <td class="spacer" style="height: 20px;"></td>
     </tr>
-`, A = `
-    <tr class="recommendation-product-row">
+`, w = `
+    <tr>
         <td>
             <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
                 {-{-PRODUCTS-}-}
             </table>
         </td>
     </tr>
-`, o = `
+`, i = `
     <td width="{-{-COLUMN_WIDTH-}-}" style="padding: 0 5px;" valign="top" height="100%">
         <table
             width="100%"
@@ -35,24 +34,14 @@ const E = {
             </tr>
         </table>
     </td>
-`, Y = [
-  h,
-  C,
-  D,
-  b,
-  P,
-  U,
-  N
-], S = {
-  [h]: !0,
-  [C]: !0,
-  [b]: !0,
-  [D]: !0,
-  [P]: !1,
-  [U]: !1,
-  [N]: !0
-};
-function M() {
+`, b = [
+  "productImage",
+  "productName",
+  "productOldPrice",
+  "productPrice",
+  "productButton"
+];
+function C() {
   return [
     {
       name: "Product Name",
@@ -134,76 +123,58 @@ function M() {
     }
   ];
 }
-function f(a, r, e, l = Y) {
-  const s = (100 / r).toFixed(2), p = [];
-  for (let i = 0; i < a.length; i += r)
-    p.push(a.slice(i, i + r));
+function N(p, r, e, l = b) {
+  const n = (100 / r).toFixed(2), a = [];
+  for (let o = 0; o < p.length; o += r)
+    a.push(p.slice(o, o + r));
   let c = "";
-  return p.forEach((i, w) => {
-    w > 0 && (c += I);
-    let n = "", u = "", d = "", T = "", m = "", _ = "", g = "";
-    i.forEach((t) => {
-      n += o.replace(
+  return a.forEach((o, _) => {
+    _ > 0 && (c += O);
+    let s = "", u = "", d = "", m = "", g = "";
+    o.forEach((t) => {
+      s += i.replace(
         "{-{-PRODUCT_CONTENT-}-}",
         e.productImage(t)
-      ), u += o.replace(
+      ), u += i.replace(
         "{-{-PRODUCT_CONTENT-}-}",
         e.productName(t)
-      ), d += o.replace(
+      ), d += i.replace(
         "{-{-PRODUCT_CONTENT-}-}",
         e.productPrice(t)
-      ), T += o.replace(
+      ), m += i.replace(
         "{-{-PRODUCT_CONTENT-}-}",
         e.productOldPrice(t)
-      ), m += o.replace(
-        "{-{-PRODUCT_CONTENT-}-}",
-        e.productOmnibusPrice(t)
-      ), _ += o.replace(
-        "{-{-PRODUCT_CONTENT-}-}",
-        e.productOmnibusDiscount(t)
-      ), g += o.replace(
+      ), g += i.replace(
         "{-{-PRODUCT_CONTENT-}-}",
         e.productButton(t)
       );
     });
-    const R = {
-      productImage: n,
+    const T = {
+      productImage: s,
       productName: u,
       productPrice: d,
-      productOldPrice: T,
-      productOmnibusPrice: m,
-      productOmnibusDiscount: _,
+      productOldPrice: m,
       productButton: g
-    }, y = l.filter((t) => !!R[t]).map((t) => {
-      const O = S[t] ?? !0;
-      return `
-                <tr class="recommendation-attribute-row"
-                    data-attribute-type="${t}"
-                    data-visibility="${O ? "1" : "0"}"${O ? "" : ' style="display: none;"'}>
-                    ${R[t]}
-                </tr>
-            `;
-    }).join("");
-    c += A.replace("{-{-PRODUCTS-}-}", y);
-  }), c.replaceAll("{-{-COLUMN_WIDTH-}-}", `${s}%`);
+    }, h = l.filter((t) => !!T[t]).map((t) => `<tr>${T[t]}</tr>`).join("");
+    c += w.replace("{-{-PRODUCTS-}-}", h);
+  }), c.replaceAll("{-{-COLUMN_WIDTH-}-}", `${n}%`);
 }
-function j(a, r, e, l, s = E.TITLE, p) {
-  const c = f(
+function P(p, r, e, l, n = R.TITLE, a) {
+  const c = N(
     r,
     e,
     l,
-    p
+    a
   );
-  return a.replace("{-{-TITLE-}-}", s).replace("{-{-PRODUCT_ROWS-}-}", c);
+  return p.replace("{-{-TITLE-}-}", n).replace("{-{-PRODUCT_ROWS-}-}", c);
 }
 export {
-  E as DEFAULTS,
-  Y as DEFAULT_CARD_COMPOSITION,
-  S as DEFAULT_CARD_VISIBILITY,
-  j as generateTemplate,
-  M as getDefaultProducts,
-  f as prepareProductRows,
-  o as productCardWrapper,
-  A as productRow,
-  I as spacer
+  R as DEFAULTS,
+  b as DEFAULT_CARD_COMPOSITION,
+  P as generateTemplate,
+  C as getDefaultProducts,
+  N as prepareProductRows,
+  i as productCardWrapper,
+  w as productRow,
+  O as spacer
 };

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

@@ -1,21 +1,21 @@
 import { ExtensionBuilder as e } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { UnsubscribeBlock as i } from "./block.js";
 import { UnsubscribeControl as t } from "./control.js";
-import { PreviewUIElement as o } from "./elements/preview.js";
-import { UnsubscribeIconsRegistry as r } from "./iconsRegistry.js";
-import { SettingsPanel as s } from "./settingsPanel.js";
+import { PreviewUIElement as s } from "./elements/preview.js";
+import { UnsubscribeIconsRegistry as o } from "./iconsRegistry.js";
+import { SettingsPanel as r } from "./settingsPanel.js";
 import n from "./styles.css.js";
-import { UnsubscribeTagRegistry as l } from "./tagRegistry.js";
-const f = new e().addBlock(i).withSettingsPanelRegistry(s).addControl(t).addUiElement(o).addStyles(n).withLocalization({
+import { UnsubscribeTagRegistry as c } from "./tagRegistry.js";
+const g = new e().addBlock(i).withSettingsPanelRegistry(r).addControl(t).addUiElement(s).addStyles(n).withLocalization({
   en: {
-    "Unsubscribe Block": "Unsubscribe Block",
-    "Unsubscribe Block Description": "Add an unsubscribe link to your email",
+    "Unsubscribe Block": "Unsubscribe",
+    "Unsubscribe Block Description": "Unsubscribe lets you add an Unsubscribe Link to direct users to opt out of receiving your messages.",
     "Select Template": "Select Template",
     "Unsubscribe Template": "Unsubscribe Template",
     Showing: "Showing",
     of: "of"
   }
-}).withUiElementTagRegistry(l).withIconsRegistry(r).build();
+}).withUiElementTagRegistry(c).withIconsRegistry(o).build();
 export {
-  f as default
+  g as default
 };

package/dist/extensions/Blocks/common-control.js

@@ -1,12 +1,12 @@
-var c = Object.defineProperty;
-var I = (a, r, e) => r in a ? c(a, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[r] = e;
-var l = (a, r, e) => I(a, typeof r != "symbol" ? r + "" : r, e);
+var I = Object.defineProperty;
+var c = (T, r, e) => r in T ? I(T, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : T[r] = e;
+var u = (T, r, e) => c(T, typeof r != "symbol" ? r + "" : r, e);
 import { Control as O, UIElementType as t, UEAttr as $ } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 class _ extends O {
   constructor() {
     super(...arguments);
-    l(this, "currentNode");
-    l(this, "lastBlockInstanceId", null);
+    u(this, "currentNode");
+    u(this, "lastBlockInstanceId", null);
   }
   getContainer() {
     var e;
@@ -19,43 +19,41 @@ class _ extends O {
     this.lastBlockInstanceId = null;
   }
   /**
-   * Gets the config block element from the current node.
-   * @returns The config block element or null if not found
+   * Gets the Items block container element from the current node.
+   * @returns The container element or null if not found
    */
-  getConfigBlock() {
-    if (!this.currentNode)
-      return null;
-    const e = this.currentNode.closest(".items-block-v2");
-    return e ? e.querySelector("esd-config-block") : null;
+  getItemsBlockContainer() {
+    return this.currentNode ? this.currentNode.closest(".items-block-v2") : null;
   }
   /**
-   * Gets the current block instance ID from the config block.
-   * @param blockInstanceIdAttribute - The attribute name for block instance ID (default: 'data-block-instance-id')
+   * Gets the current block instance ID from the node config (Stripo V2).
    * @returns The block instance ID or null if not found
    */
-  getBlockInstanceId(e = "data-block-instance-id") {
-    const n = this.getConfigBlock();
-    return n ? n.getAttribute(e) : null;
+  getBlockInstanceId() {
+    const e = this.getItemsBlockContainer();
+    if (!e)
+      return null;
+    const n = e.getNodeConfig();
+    return n && typeof n.blockInstanceId == "string" ? n.blockInstanceId : null;
   }
   /**
    * Handles block instance change detection and syncing.
-   * This is a helper method for controls that need to sync attributes when switching between block instances.
-   * @param syncFunction - Function to call when block instance changes (to sync from attributes)
+   * This is a helper method for controls that need to sync config when switching between block instances.
+   * Uses Stripo V2 nodeConfig API for block instance tracking.
+   * @param syncFunction - Function to call when block instance changes (to sync from node config)
    * @param updateUI - Function to call to update the UI (called both on change and when same block)
-   * @param blockInstanceIdAttribute - The attribute name for block instance ID (default: 'data-block-instance-id')
    * @returns true if block instance changed, false otherwise
    */
-  handleBlockInstanceChange(e, n, E = "data-block-instance-id") {
-    const o = this.getBlockInstanceId(E);
-    if (!o)
+  handleBlockInstanceChange(e, n) {
+    const E = this.getBlockInstanceId();
+    if (!E)
       return !1;
-    const T = o !== this.lastBlockInstanceId;
-    return T ? (this.currentNode && e(this.currentNode), n(), this.lastBlockInstanceId = o) : n(), T;
+    const o = E !== this.lastBlockInstanceId;
+    return o ? (this.currentNode && e(this.currentNode), n(), this.lastBlockInstanceId = E) : n(), o;
   }
-  _GuLabel({ text: e, name: n = "", position: E = "top" }) {
+  _GuLabel({ text: e, name: n = "" }) {
     return `
             <${t.LABEL} 
-                style="${E === "top" ? "margin-bottom: 8px;" : ""}"
                 ${$.LABEL.text}="${e}" 
                 ${$.LABEL.name}="${n || `${e} Label`}">
             </${t.LABEL}>
@@ -81,7 +79,7 @@ class _ extends O {
                 class="${o}"
                 ${$.SELECTPICKER.name}="${e}"
                 ${$.SELECTPICKER.placeholder}="${n}">
-                    ${E.map((T) => this._GuSelectItem(T)).join("")}
+                    ${E.map((a) => this._GuSelectItem(a)).join("")}
             </${t.SELECTPICKER}>
         `;
   }
@@ -169,11 +167,11 @@ class _ extends O {
    */
   _GuOrderable(e, n) {
     let E = "";
-    n.forEach((T) => {
-      const u = $.ORDERABLE_ITEM && "name" in $.ORDERABLE_ITEM ? $.ORDERABLE_ITEM.name : "name";
+    n.forEach((a) => {
+      const l = $.ORDERABLE_ITEM && "name" in $.ORDERABLE_ITEM ? $.ORDERABLE_ITEM.name : "name";
       E += `
-                <${t.ORDERABLE_ITEM} ${u}="${T.key}">
-                    ${T.content}
+                <${t.ORDERABLE_ITEM} ${l}="${a.key}">
+                    ${a.content}
                 </${t.ORDERABLE_ITEM}>
             `;
     });

package/dist/extensions/Blocks/controlFactories.js

@@ -1,14 +1,4 @@
-import { TextAlignBuiltInControl as o, TextColorBuiltInControl as l, TextSizeBuiltInControl as s, TextStyleBuiltInControl as u, TextFontFamilyBuiltInControl as i, ButtonBackgroundColorBuiltInControl as c, TextPaddingsBuiltInControl as d, ImageSizeBuiltInControl as a, ImageMarginsBuiltInControl as g, ButtonAlignBuiltInControl as x, ButtonBorderBuiltInControl as C, ButtonBorderRadiusBuiltInControl as B, ButtonColorBuiltInControl as T, ButtonFontFamilyBuiltInControl as I, ButtonMarginsBuiltInControl as f, ButtonPaddingsBuiltInControl as m, ButtonTextBuiltInControl as y, ButtonTextSizeBuiltInControl as A, ButtonTextStyleAndFontColorBuiltInControl as S, ButtonFitToContainerBuiltInControl as N, TextLineSpacingBuiltInControl as b } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-function $(r, t, n) {
-  return class extends o {
-    getId() {
-      return r;
-    }
-    getTargetNodes(e) {
-      return !t || !n ? [e] : e.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
-    }
-  };
-}
+import { TextAlignBuiltInControl as l, TextColorBuiltInControl as s, TextSizeBuiltInControl as u, TextStyleBuiltInControl as i, TextFontFamilyBuiltInControl as c, ButtonBackgroundColorBuiltInControl as d, TextPaddingsBuiltInControl as a, ImageSizeBuiltInControl as g, ImageMarginsBuiltInControl as x, ButtonAlignBuiltInControl as C, ButtonBorderBuiltInControl as B, ButtonBorderRadiusBuiltInControl as T, ButtonColorBuiltInControl as I, ButtonFontFamilyBuiltInControl as f, ButtonMarginsBuiltInControl as y, ButtonPaddingsBuiltInControl as m, ButtonTextBuiltInControl as A, ButtonTextSizeBuiltInControl as S, ButtonTextStyleAndFontColorBuiltInControl as N, ButtonFitToContainerBuiltInControl as b, TextLineSpacingBuiltInControl as q } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 function k(r, t, n) {
   return class extends l {
     getId() {
@@ -69,28 +59,28 @@ function P(r, t, n) {
     }
   };
 }
-function L(r, t, n) {
-  return class extends b {
+function h(r, t, n) {
+  return class extends a {
     getId() {
       return r;
     }
     getTargetNodes(e) {
-      return [e];
+      return !t || !n ? [e] : e.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
     }
   };
 }
-function R(r, t, n = ".ins-recommendation-product-container") {
-  return class extends x {
+function L(r, t, n) {
+  return class extends q {
     getId() {
       return r;
     }
     getTargetNodes(e) {
-      return e.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+      return [e];
     }
   };
 }
-function h(r, t, n = ".ins-recommendation-product-container") {
-  return class extends T {
+function R(r, t, n = ".ins-recommendation-product-container") {
+  return class extends C {
     getId() {
       return r;
     }
@@ -100,7 +90,7 @@ function h(r, t, n = ".ins-recommendation-product-container") {
   };
 }
 function j(r, t, n = ".ins-recommendation-product-container") {
-  return class extends C {
+  return class extends I {
     getId() {
       return r;
     }
@@ -120,7 +110,7 @@ function v(r, t, n = ".ins-recommendation-product-container") {
   };
 }
 function w(r, t, n = ".ins-recommendation-product-container") {
-  return class extends I {
+  return class extends T {
     getId() {
       return r;
     }
@@ -140,7 +130,7 @@ function D(r, t, n = ".ins-recommendation-product-container") {
   };
 }
 function E(r, t, n = ".ins-recommendation-product-container") {
-  return class extends m {
+  return class extends y {
     getId() {
       return r;
     }
@@ -150,7 +140,7 @@ function E(r, t, n = ".ins-recommendation-product-container") {
   };
 }
 function G(r, t, n = ".ins-recommendation-product-container") {
-  return class extends y {
+  return class extends m {
     getId() {
       return r;
     }
@@ -169,7 +159,7 @@ function H(r, t, n = ".ins-recommendation-product-container") {
     }
   };
 }
-function J(r, t, n) {
+function J(r, t, n = ".ins-recommendation-product-container") {
   return class extends S {
     getId() {
       return r;
@@ -190,7 +180,7 @@ function K(r, t, n) {
   };
 }
 function O(r, t, n) {
-  return class extends a {
+  return class extends b {
     getId() {
       return r;
     }
@@ -205,30 +195,50 @@ function Q(r, t, n) {
       return r;
     }
     getTargetNodes(e) {
-      return e.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+      try {
+        const o = e.closest(n);
+        return o ? o.querySelectorAll(`[esd-extension-block-id="${t}"]`) : [];
+      } catch {
+        return [];
+      }
+    }
+  };
+}
+function U(r, t, n) {
+  return class extends x {
+    getId() {
+      return r;
+    }
+    getTargetNodes(e) {
+      try {
+        const o = e.closest(n);
+        return o ? o.querySelectorAll(`[esd-extension-block-id="${t}"]`) : [];
+      } catch {
+        return [];
+      }
     }
   };
 }
 export {
   R as createButtonAlignControl,
-  j as createButtonBorderControl,
-  v as createButtonBorderRadiusControl,
-  h as createButtonColorControl,
-  K as createButtonFitToContainerControl,
-  w as createButtonFontFamilyControl,
-  D as createButtonMarginsControl,
-  E as createButtonPaddingsControl,
-  G as createButtonTextControl,
-  H as createButtonTextSizeControl,
-  J as createButtonTextStyleAndFontColorControl,
-  Q as createImageMarginsControl,
-  O as createImageSizeControl,
-  P as createPaddingsControl,
-  $ as createTextAlignControl,
-  M as createTextBackgroundColorControl,
-  k as createTextColorControl,
-  z as createTextFontFamilyControl,
+  v as createButtonBorderControl,
+  w as createButtonBorderRadiusControl,
+  j as createButtonColorControl,
+  O as createButtonFitToContainerControl,
+  D as createButtonFontFamilyControl,
+  E as createButtonMarginsControl,
+  G as createButtonPaddingsControl,
+  H as createButtonTextControl,
+  J as createButtonTextSizeControl,
+  K as createButtonTextStyleAndFontColorControl,
+  U as createImageMarginsControl,
+  Q as createImageSizeControl,
+  h as createPaddingsControl,
+  k as createTextAlignControl,
+  P as createTextBackgroundColorControl,
+  p as createTextColorControl,
+  M as createTextFontFamilyControl,
   L as createTextLineSpacingControl,
-  p as createTextSizeControl,
-  F as createTextStyleControl
+  F as createTextSizeControl,
+  z as createTextStyleControl
 };

package/dist/guido.css

@@ -1 +1 @@
-.gap-16[data-v-6562e38c],.gap-16[data-v-1ccb6d4a]{gap:16px}[data-v-06e6f7a7] .in-button-v2__wrapper{line-height:0}[data-v-b5997368] .in-segments-wrapper .in-tooltip-wrapper__box{text-align:left}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history-wrapper[data-v-52a77eec]{gap:8px}.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}.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}.guido-loading__wrapper[data-v-07c4b2d8]{height:100%;top:75px!important;bottom:0!important}.guido-editor__wrapper[data-v-282ca4d1]{position:relative;width:100%;height:calc(100vh - 128px)}.guido-editor__container[data-v-282ca4d1]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-282ca4d1]{height:calc(100vh - 75px)}[data-v-293f1c47] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-a86fc486]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-a86fc486]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-a86fc486]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-a86fc486]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-a86fc486]{object-fit:cover;transform:scale(1)}[data-v-bb3bb07c] .guido__verion-history-view-option-selection-desktop svg,[data-v-bb3bb07c] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-bb3bb07c] .in-segments-wrapper__button_selected,[data-v-bb3bb07c] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-7a09985c]{gap:16px}[data-v-c2adc57d] .in-progress-wrapper__progress p span:last-child{display:none!important}.desktop-preview-container[data-v-2dd60b0c],[data-v-2dd60b0c] .desktop-preview-container .in-container{min-height:720px!important;height:100%}.cropped-text[data-v-4b876c1b]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}[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-6562e38c],.gap-16[data-v-1ccb6d4a]{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-913a3417] .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-17dd4d8b]{gap:4px}.header-wrapper[data-v-5df46e7a]{min-width:1000px}.guido-loading__wrapper[data-v-07c4b2d8]{height:100%;top:75px!important;bottom:0!important}.guido-editor__wrapper[data-v-890b5336]{position:relative;width:100%;height:calc(100vh - 128px)}.guido-editor__container[data-v-890b5336]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-890b5336]{height:calc(100vh - 75px)}[data-v-293f1c47] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-a86fc486]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-a86fc486]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-a86fc486]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-a86fc486]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-a86fc486]{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}