@useinsider/guido 1.0.3-beta.294f9bc → 1.0.3-beta.2cf8046

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

@@ -1,78 +1,135 @@
-var u = Object.defineProperty;
-var C = (o, n, E) => n in o ? u(o, n, { enumerable: !0, configurable: !0, writable: !0, value: E }) : o[n] = E;
-var a = (o, n, E) => C(o, typeof n != "symbol" ? n + "" : n, E);
-import { Control as R, UIElementType as $, UEAttr as e } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-class N extends R {
+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);
+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);
-    a(this, "currentNode");
+    l(this, "currentNode");
+    l(this, "lastBlockInstanceId", null);
   }
   getContainer() {
-    var E;
-    return (E = document.querySelector("ui-editor")) == null ? void 0 : E.shadowRoot;
+    var e;
+    return (e = document.querySelector("ui-editor")) == null ? void 0 : e.shadowRoot;
   }
-  onTemplateNodeUpdated(E) {
-    this.currentNode = E;
+  onTemplateNodeUpdated(e) {
+    this.currentNode = e;
   }
-  _GuLabel({ text: E, name: t = "", position: T = "top" }) {
+  onDestroy() {
+    this.lastBlockInstanceId = null;
+  }
+  /**
+   * Gets the config block element from the current node.
+   * @returns The config block 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;
+  }
+  /**
+   * Gets the current block instance ID from the config block.
+   * @param blockInstanceIdAttribute - The attribute name for block instance ID (default: 'data-block-instance-id')
+   * @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;
+  }
+  /**
+   * 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)
+   * @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)
+      return !1;
+    const T = o !== this.lastBlockInstanceId;
+    return T ? (this.currentNode && e(this.currentNode), n(), this.lastBlockInstanceId = o) : n(), T;
+  }
+  _GuLabel({ text: e, name: n = "", position: E = "top" }) {
+    return `
+            <${t.LABEL} 
+                style="${E === "top" ? "margin-bottom: 8px;" : ""}"
+                ${$.LABEL.text}="${e}" 
+                ${$.LABEL.name}="${n || `${e} Label`}">
+            </${t.LABEL}>
+        `;
+  }
+  _GuToggle(e) {
     return `
-            <${$.LABEL} 
-                style="${T === "top" ? "margin-bottom: 8px;" : ""}"
-                ${e.LABEL.text}="${E}" 
-                ${e.LABEL.name}="${t || `${E} Label`}">
-            </${$.LABEL}>
+            <${t.SWITCHER}
+                ${$.SWITCHER.name}="${e}">
+            </${t.SWITCHER}>
         `;
   }
-  _GuToggle(E) {
+  _GuSelectItem({ text: e, value: n }) {
     return `
-            <${$.SWITCHER}
-                ${e.SWITCHER.name}="${E}">
-            </${$.SWITCHER}>
+            <${t.SELECT_ITEM} 
+                ${$.SELECT_ITEM.text}="${e}" 
+                ${$.SELECT_ITEM.value}="${n}">
+            </${t.SELECT_ITEM}>`;
+  }
+  _GuSelect({ name: e, placeholder: n, options: E, className: o = "es-180w" }) {
+    return `
+            <${t.SELECTPICKER}
+                class="${o}"
+                ${$.SELECTPICKER.name}="${e}"
+                ${$.SELECTPICKER.placeholder}="${n}">
+                    ${E.map((T) => this._GuSelectItem(T)).join("")}
+            </${t.SELECTPICKER}>
         `;
   }
-  _GuSelectItem({ text: E, value: t }) {
+  _GuTextInput({ name: e, placeholder: n, className: E = "", disabled: o = !1 }) {
     return `
-            <${$.SELECT_ITEM} 
-                ${e.SELECT_ITEM.text}="${E}" 
-                ${e.SELECT_ITEM.value}="${t}">
-            </${$.SELECT_ITEM}>`;
+            <${t.TEXT}
+                class=${E}
+                ${$.TEXT.name}="${e}"
+                placeholder="${n || e}"
+                ${o ? `${$.TEXT.disabled}="true"` : ""}>
+            </${t.TEXT}>
+        `;
   }
-  _GuSelect({ name: E, placeholder: t, options: T, className: r = "es-180w" }) {
+  _GuCounter({ name: e, maxValue: n, minValue: E = 1, step: o = 1 }) {
     return `
-            <${$.SELECTPICKER}
-                class="${r}"
-                ${e.SELECTPICKER.name}="${E}"
-                ${e.SELECTPICKER.placeholder}="${t}">
-                    ${T.map((O) => this._GuSelectItem(O)).join("")}
-            </${$.SELECTPICKER}>
+            <${t.COUNTER}
+                ${$.COUNTER.name}="${e}"
+                ${$.COUNTER.minValue}="${E}"
+                ${$.COUNTER.maxValue}="${n}"
+                ${$.COUNTER.step}="${o}">
+            </${t.COUNTER}>
         `;
   }
-  _GuTextInput({ name: E, placeholder: t, className: T = "" }) {
+  _GuRadioButtonItem({ text: e, value: n, icon: E }) {
     return `
-            <${$.TEXT}
-                class=${T}
-                ${e.TEXT.name}="${E}"
-                placeholder="${t || E}">
-            </${$.TEXT}>
+            <${t.RADIO_ITEM}
+                ${$.RADIO_ITEM.value}="${n}"
+                ${e ? `${$.RADIO_ITEM.text}="${e}"` : ""}
+                ${E ? `${$.RADIO_ITEM.icon}="${E}"` : ""}>
+            </${t.RADIO_ITEM}>
         `;
   }
-  _GuCounter({ name: E, maxValue: t, minValue: T = 1, step: r = 1 }) {
+  _GuRadioButton({ name: e, buttons: n, id: E = "" }) {
     return `
-            <${$.COUNTER}
-                ${e.COUNTER.name}="${E}"
-                ${e.COUNTER.minValue}="${T}"
-                ${e.COUNTER.maxValue}="${t}"
-                ${e.COUNTER.step}="${r}">
-            </${$.COUNTER}>
+            <${t.RADIO_BUTTONS}
+                ${E ? `id="${E}"` : ""}
+                ${$.RADIO_BUTTONS.name}="${e}">
+                ${n.map((o) => this._GuRadioButtonItem(o)).join("")}
+            </${t.RADIO_BUTTONS}>
         `;
   }
-  _GuButton({ name: E, label: t, id: T = "" }) {
+  _GuButton({ name: e, label: n, id: E = "" }) {
     return `
-            <${$.BUTTON}
-                ${e.BUTTON.name}="${E}"
-                ${T ? `id="${T}"` : ""}
-                ${e.BUTTON.caption}="${t}"}>
-            </${$.BUTTON}>
+            <${t.BUTTON}
+                ${$.BUTTON.name}="${e}"
+                ${E ? `id="${E}"` : ""}
+                ${$.BUTTON.caption}="${n}"}>
+            </${t.BUTTON}>
         `;
   }
   /**
@@ -80,19 +137,26 @@ class N extends R {
    * @param param0
    * @returns It returns a button with an icon.
    */
-  _GuIconButton({ name: E, icon: t, className: T = "" }) {
+  _GuIconButton({ name: e, icon: n, className: E = "" }) {
     return `
-            <${$.BUTTON}
-                class="${T}"
-                ${e.BUTTON.name}="${E}"
-                ${e.BUTTON.icon}="${t}">
-            </${$.BUTTON}>
+            <${t.BUTTON}
+                class="${E}"
+                ${$.BUTTON.name}="${e}"
+                ${$.BUTTON.icon}="${n}">
+            </${t.BUTTON}>
+        `;
+  }
+  _GuOneColumn(e, n = "") {
+    return `
+            <div class="container one-column ${n}">
+                ${e.join("")}
+            </div>
         `;
   }
-  _GuTwoColumns(E) {
+  _GuTwoColumns(e, n = "") {
     return `
-            <div class="checkbox-select-container container two-columns">
-                ${E.join("")}
+            <div class="container two-columns ${n}">
+                ${e.join("")}
             </div>
         `;
   }
@@ -103,82 +167,82 @@ class N extends R {
    * @param itemLabels - Optional array of objects with key and label properties for display
    * @returns HTML string for the orderable control
    */
-  _GuOrderable(E, t) {
-    let T = "";
-    t.forEach((O) => {
-      const L = e.ORDERABLE_ITEM && "name" in e.ORDERABLE_ITEM ? e.ORDERABLE_ITEM.name : "name";
-      T += `
-                <${$.ORDERABLE_ITEM} ${L}="${O.key}">
-                    ${O.content}
-                </${$.ORDERABLE_ITEM}>
+  _GuOrderable(e, n) {
+    let E = "";
+    n.forEach((T) => {
+      const u = $.ORDERABLE_ITEM && "name" in $.ORDERABLE_ITEM ? $.ORDERABLE_ITEM.name : "name";
+      E += `
+                <${t.ORDERABLE_ITEM} ${u}="${T.key}">
+                    ${T.content}
+                </${t.ORDERABLE_ITEM}>
             `;
     });
-    const r = e.ORDERABLE && "name" in e.ORDERABLE ? e.ORDERABLE.name : "name";
+    const o = $.ORDERABLE && "name" in $.ORDERABLE ? $.ORDERABLE.name : "name";
     return `
-            <${$.ORDERABLE} ${r}="${E}">
-                ${T}
-            </${$.ORDERABLE}>
+            <${t.ORDERABLE} ${o}="${e}">
+                ${E}
+            </${t.ORDERABLE}>
         `;
   }
-  _GuNestedControl(E, t) {
+  _GuNestedControl(e, n) {
     return `
-            <${$.NESTED_CONTROL} ${e.NESTED_CONTROL.controlId}="${E}">
-                ${t}
-            </${$.NESTED_CONTROL}>
+            <${t.NESTED_CONTROL} ${$.NESTED_CONTROL.controlId}="${e}">
+                ${n}
+            </${t.NESTED_CONTROL}>
         `;
   }
-  _GuExpandable(E, t) {
+  _GuExpandable(e, n) {
     return `
-            <${$.EXPANDABLE}>
-                <${$.EXPANDABLE_HEADER}>
-                    <${$.LABEL} ${e.LABEL.text}="${E}"></${$.LABEL}>
-                </${$.EXPANDABLE_HEADER}>
-                <${$.EXPANDABLE_CONTENT}>
+            <${t.EXPANDABLE}>
+                <${t.EXPANDABLE_HEADER}>
+                    <${t.LABEL} ${$.LABEL.text}="${e}"></${t.LABEL}>
+                </${t.EXPANDABLE_HEADER}>
+                <${t.EXPANDABLE_CONTENT}>
 
-                    ${t}
+                    ${n}
 
-                </${$.EXPANDABLE_CONTENT}>
-            </${$.EXPANDABLE}>
+                </${t.EXPANDABLE_CONTENT}>
+            </${t.EXPANDABLE}>
         `;
   }
-  _GuColorPicker(E) {
+  _GuColorPicker(e) {
     return `
-            <${$.COLOR}
-                ${e.COLOR.name}="${E}">
-            </${$.COLOR}>
+            <${t.COLOR}
+                ${$.COLOR.name}="${e}">
+            </${t.COLOR}>
         `;
   }
-  _GuFontFamily(E, t = "Select Font") {
+  _GuFontFamily(e, n = "Select Font") {
     return `
-            <${$.FONT_FAMILY_SELECT}
-                ${e.FONT_FAMILY_SELECT.name}="${E}"
-                ${e.FONT_FAMILY_SELECT.placeholder}="${t}">
-            </${$.FONT_FAMILY_SELECT}>
+            <${t.FONT_FAMILY_SELECT}
+                ${$.FONT_FAMILY_SELECT.name}="${e}"
+                ${$.FONT_FAMILY_SELECT.placeholder}="${n}">
+            </${t.FONT_FAMILY_SELECT}>
         `;
   }
-  _GuRadioButtons(E, t) {
-    const T = t.map((r) => `
-                <${$.RADIO_ITEM}
-                    ${e.RADIO_ITEM.text}="${r.text}"
-                    ${e.RADIO_ITEM.value}="${r.value}">
-                </${$.RADIO_ITEM}>
+  _GuRadioButtons(e, n) {
+    const E = n.map((o) => `
+                <${t.RADIO_ITEM}
+                    ${$.RADIO_ITEM.text}="${o.text}"
+                    ${$.RADIO_ITEM.value}="${o.value}">
+                </${t.RADIO_ITEM}>
             `).join("");
     return `
-            <${$.RADIO_BUTTONS}
-                ${e.RADIO_BUTTONS.name}="${E}">
-                ${T}
-            </${$.RADIO_BUTTONS}>
+            <${t.RADIO_BUTTONS}
+                ${$.RADIO_BUTTONS.name}="${e}">
+                ${E}
+            </${t.RADIO_BUTTONS}>
         `;
   }
-  _GuCheckbox(E, t) {
+  _GuCheckbox(e, n) {
     return `
-            <${$.CHECKBOX}
-                ${e.CHECKBOX.name}="${E}"
-                ${e.CHECKBOX.caption}="${t}">
-            </${$.CHECKBOX}>
+            <${t.CHECKBOX}
+                ${$.CHECKBOX.name}="${e}"
+                ${$.CHECKBOX.caption}="${n}">
+            </${t.CHECKBOX}>
         `;
   }
 }
 export {
-  N as CommonControl
+  _ as CommonControl
 };

package/dist/extensions/Blocks/controlFactories.js

@@ -0,0 +1,223 @@
+import { TextAlignBuiltInControl as r, TextColorBuiltInControl as l, TextSizeBuiltInControl as s, TextStyleBuiltInControl as c, TextFontFamilyBuiltInControl as u, ButtonBackgroundColorBuiltInControl as i, TextPaddingsBuiltInControl as d, ImageSizeBuiltInControl as a, ImageMarginsBuiltInControl as g, ButtonAlignBuiltInControl as x, ButtonBorderBuiltInControl as C, ButtonBorderRadiusBuiltInControl as B, ButtonColorBuiltInControl as I, ButtonFontFamilyBuiltInControl as m, ButtonMarginsBuiltInControl as T, ButtonPaddingsBuiltInControl as S, ButtonTextBuiltInControl as y, ButtonTextSizeBuiltInControl as A, ButtonTextStyleAndFontColorBuiltInControl as k, ButtonFitToContainerBuiltInControl as f } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+function q(e, t, n) {
+  return class extends r {
+    getId() {
+      return e;
+    }
+    getTargetNodes(o) {
+      return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+    }
+  };
+}
+function N(e, t, n = ".ins-recommendation-product-container") {
+  return class extends l {
+    getId() {
+      return e;
+    }
+    getTargetNodes(o) {
+      return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+    }
+  };
+}
+function $(e, t, n = ".ins-recommendation-product-container") {
+  return class extends s {
+    getId() {
+      return e;
+    }
+    getTargetNodes(o) {
+      return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+    }
+  };
+}
+function p(e, t, n = ".ins-recommendation-product-container") {
+  return class extends c {
+    getId() {
+      return e;
+    }
+    getTargetNodes(o) {
+      return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+    }
+  };
+}
+function F(e, t, n = ".ins-recommendation-product-container") {
+  return class extends u {
+    getId() {
+      return e;
+    }
+    getTargetNodes(o) {
+      return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+    }
+  };
+}
+function z(e, t, n = ".ins-recommendation-product-container") {
+  return class extends i {
+    getId() {
+      return e;
+    }
+    getTargetNodes(o) {
+      return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+    }
+  };
+}
+function M(e, t, n = ".ins-recommendation-product-container") {
+  return class extends d {
+    getId() {
+      return e;
+    }
+    getTargetNodes(o) {
+      return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+    }
+  };
+}
+function P(e, t, n = ".ins-recommendation-product-container") {
+  return class extends x {
+    getId() {
+      return e;
+    }
+    getTargetNodes(o) {
+      return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+    }
+  };
+}
+function R(e, t, n = ".ins-recommendation-product-container") {
+  return class extends I {
+    getId() {
+      return e;
+    }
+    getTargetNodes(o) {
+      return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+    }
+  };
+}
+function h(e, t, n = ".ins-recommendation-product-container") {
+  return class extends C {
+    getId() {
+      return e;
+    }
+    getTargetNodes(o) {
+      return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+    }
+  };
+}
+function j(e, t, n = ".ins-recommendation-product-container") {
+  return class extends B {
+    getId() {
+      return e;
+    }
+    getTargetNodes(o) {
+      return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+    }
+  };
+}
+function v(e, t, n = ".ins-recommendation-product-container") {
+  return class extends m {
+    getId() {
+      return e;
+    }
+    getTargetNodes(o) {
+      return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+    }
+  };
+}
+function w(e, t, n = ".ins-recommendation-product-container") {
+  return class extends T {
+    getId() {
+      return e;
+    }
+    getTargetNodes(o) {
+      return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+    }
+  };
+}
+function D(e, t, n = ".ins-recommendation-product-container") {
+  return class extends S {
+    getId() {
+      return e;
+    }
+    getTargetNodes(o) {
+      return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+    }
+  };
+}
+function E(e, t, n = ".ins-recommendation-product-container") {
+  return class extends y {
+    getId() {
+      return e;
+    }
+    getTargetNodes(o) {
+      return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+    }
+  };
+}
+function G(e, t, n = ".ins-recommendation-product-container") {
+  return class extends A {
+    getId() {
+      return e;
+    }
+    getTargetNodes(o) {
+      return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+    }
+  };
+}
+function H(e, t, n) {
+  return class extends k {
+    getId() {
+      return e;
+    }
+    getTargetNodes(o) {
+      return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+    }
+  };
+}
+function J(e, t, n) {
+  return class extends f {
+    getId() {
+      return e;
+    }
+    getTargetNodes(o) {
+      return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+    }
+  };
+}
+function K(e, t, n) {
+  return class extends a {
+    getId() {
+      return e;
+    }
+    getTargetNodes(o) {
+      return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+    }
+  };
+}
+function L(e, t, n) {
+  return class extends g {
+    getId() {
+      return e;
+    }
+    getTargetNodes(o) {
+      return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+    }
+  };
+}
+export {
+  P as createButtonAlignControl,
+  h as createButtonBorderControl,
+  j as createButtonBorderRadiusControl,
+  R as createButtonColorControl,
+  J as createButtonFitToContainerControl,
+  v as createButtonFontFamilyControl,
+  w as createButtonMarginsControl,
+  D as createButtonPaddingsControl,
+  E as createButtonTextControl,
+  G as createButtonTextSizeControl,
+  H as createButtonTextStyleAndFontColorControl,
+  L as createImageMarginsControl,
+  K as createImageSizeControl,
+  M as createPaddingsControl,
+  q as createTextAlignControl,
+  z as createTextBackgroundColorControl,
+  N as createTextColorControl,
+  F as createTextFontFamilyControl,
+  $ as createTextSizeControl,
+  p as createTextStyleControl
+};

package/dist/guido.css

@@ -1 +1 @@
-.gap-16[data-v-6562e38c],.gap-16[data-v-1ccb6d4a]{gap:16px}[data-v-0502bceb] .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-dced5582]{height:100%;top:75px}.guido-editor__wrapper[data-v-23c413c9],.guido-editor__container[data-v-23c413c9]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-23c413c9]{height:calc(100vh - 75px)}[data-v-70835920] .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-dd57102d] .guido__verion-history-view-option-selection-desktop svg,[data-v-dd57102d] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-dd57102d] .in-segments-wrapper__button_selected,[data-v-dd57102d] .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-f20b3a9b]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}[data-v-d3c52b44] .vueperslides__bullets,[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-0502bceb] .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-dced5582]{height:100%;top:75px}.guido-editor__wrapper[data-v-23c413c9],.guido-editor__container[data-v-23c413c9]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-23c413c9]{height:calc(100vh - 75px)}[data-v-70835920] .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-dd57102d] .guido__verion-history-view-option-selection-desktop svg,[data-v-dd57102d] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-dd57102d] .in-segments-wrapper__button_selected,[data-v-dd57102d] .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-f20b3a9b]{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}