@useinsider/guido 3.4.1-beta.00eb92e → 3.4.1-beta.2120861

package/dist/composables/useCustomInterfaceAppearance.js

@@ -4,21 +4,20 @@ import e from "../static/styles/components/amp-block.css.js";
 import i from "../static/styles/components/base-input.css.js";
 import p from "../static/styles/components/button-group.css.js";
 import n from "../static/styles/components/button.css.js";
-import C from "../static/styles/components/combobox.css.js";
-import s from "../static/styles/components/counter.css.js";
+import s from "../static/styles/components/combobox.css.js";
+import C from "../static/styles/components/counter.css.js";
 import f from "../static/styles/components/dropdown-menu.css.js";
 import a from "../static/styles/components/loader.css.js";
 import u from "../static/styles/components/narrow-panel.css.js";
-import c from "../static/styles/components/notification.css.js";
-import d from "../static/styles/components/popup.css.js";
-import l from "../static/styles/components/switcher.css.js";
-import h from "../static/styles/components/tabs.css.js";
-import w from "../static/styles/components/tools.css.js";
-import y from "../static/styles/components/version-history.css.js";
-import B from "../static/styles/components/wide-panel.css.js";
-import b from "../static/styles/variables.css.js";
-const A = [
-  b,
+import c from "../static/styles/components/popup.css.js";
+import d from "../static/styles/components/switcher.css.js";
+import l from "../static/styles/components/tabs.css.js";
+import h from "../static/styles/components/tools.css.js";
+import w from "../static/styles/components/version-history.css.js";
+import y from "../static/styles/components/wide-panel.css.js";
+import B from "../static/styles/variables.css.js";
+const b = [
+  B,
   // Must be on top
   S,
   // Must be on top
@@ -27,8 +26,8 @@ const A = [
   i,
   p,
   n,
-  C,
   s,
+  C,
   f,
   a,
   u,
@@ -37,13 +36,12 @@ const A = [
   l,
   h,
   w,
-  y,
-  B
+  y
 ].join(`
 
-`), F = () => ({ importCss: () => {
+`), v = () => ({ importCss: () => {
   const o = new CSSStyleSheet();
-  o.replaceSync(A);
+  o.replaceSync(b);
   const r = document.querySelector("ui-editor");
   if (!r)
     return;
@@ -51,5 +49,5 @@ const A = [
   t && (t.adoptedStyleSheets = [o]);
 } });
 export {
-  F as useCustomInterfaceAppearance
+  v as useCustomInterfaceAppearance
 };

package/dist/composables/useStripo.js

@@ -1,27 +1,28 @@
-import { useActionsApi as D } from "./useActionsApi.js";
-import { useBlocksConfig as I } from "./useBlocksConfig.js";
-import { useConfig as P } from "./useConfig.js";
-import { useCustomInterfaceAppearance as U } from "./useCustomInterfaceAppearance.js";
-import { useFullStoryBridge as R } from "./useFullStoryBridge.js";
-import { useStripoEventHandler as q } from "./useStripoEventHandler.js";
-import { useToaster as x } from "./useToaster.js";
-import { localePatch as H } from "../config/i18n/index.js";
-import { useStripoApi as O } from "../services/stripoApi.js";
-import j from "../static/styles/customEditorStyle.css.js";
+import { useActionsApi as U } from "./useActionsApi.js";
+import { useBlocksConfig as R } from "./useBlocksConfig.js";
+import { useConfig as q } from "./useConfig.js";
+import { useCustomInterfaceAppearance as x } from "./useCustomInterfaceAppearance.js";
+import { useFullStoryBridge as H } from "./useFullStoryBridge.js";
+import { useStripoEventHandler as N } from "./useStripoEventHandler.js";
+import { useStripoNotifications as O } from "./useStripoNotifications.js";
+import { useToaster as j } from "./useToaster.js";
+import { localePatch as L } from "../config/i18n/index.js";
+import { useStripoApi as $ } from "../services/stripoApi.js";
+import z from "../static/styles/customEditorStyle.css.js";
 import { useEditorStore as E } from "../stores/editor.js";
-import { dynamicContentToMergeTags as L } from "../utils/genericUtil.js";
-import $ from "../package.json.js";
-const se = (C, l) => {
-  const { features: c, template: h, isFeatureEnabled: u } = P(), { handleError: m } = x(), { getToken: w, getCustomFonts: b, getSyncModulesStatus: k } = O(), { handleEvent: B } = q(), { getStripoBlocksConfig: T } = I(), V = async (i, r = [], s = !1) => {
+import { dynamicContentToMergeTags as G } from "../utils/genericUtil.js";
+import J from "../package.json.js";
+const ct = (C, c) => {
+  const { features: l, template: h, isFeatureEnabled: u } = q(), { handleError: m } = j(), { getToken: w, getCustomFonts: b, getSyncModulesStatus: k } = $(), { handleEvent: B } = N(), { getStripoNotifications: T } = O(), { getStripoBlocksConfig: V } = R(), _ = async (i, s = [], r = !1) => {
     var g, S, y;
-    const e = E(), { html: p, css: a } = i, { baseBlocks: o, extensions: d } = await T(), f = ((g = c.value) == null ? void 0 : g.displayConditions) ?? !0, F = ((S = c.value) == null ? void 0 : S.modulesDisabled) ?? !1, v = ((y = h.value) == null ? void 0 : y.forceRecreate) ?? !1;
+    const t = E(), { html: p, css: a } = i, { baseBlocks: o, extensions: d } = await V(), f = ((g = l.value) == null ? void 0 : g.displayConditions) ?? !0, v = ((S = l.value) == null ? void 0 : S.modulesDisabled) ?? !1, M = ((y = h.value) == null ? void 0 : y.forceRecreate) ?? !1, A = "https://email-static.useinsider.com https://edge.fullstory.com https://rs.fullstory.com", D = T();
     window.UIEditor.initEditor(
       document.querySelector("#guido-editor"),
       {
         metadata: C,
         html: p,
         css: a,
-        forceRecreate: v,
+        forceRecreate: M,
         locale: "en",
         undoButtonSelector: "#guido__undo-button",
         redoButtonSelector: "#guido__redo-button",
@@ -31,96 +32,97 @@ const se = (C, l) => {
         customAppearanceMergetags: !u("liquidSyntax"),
         customAppearanceMergetagsBorderColor: "#f1f3fe",
         customAppearanceMergetagsBackgroundColor: "#f1f3fe",
-        customViewStyles: j,
+        customViewStyles: z,
         conditionsEnabled: f,
         customConditionsEnabled: f,
         enableXSSSecurity: !0,
-        modulesDisabled: F,
-        syncModulesEnabled: s,
+        modulesDisabled: v,
+        syncModulesEnabled: r,
         messageSettingsEnabled: !0,
         displayGmailAnnotations: !0,
         displayHiddenPreheader: !1,
         displayTitle: !1,
         displayUTM: !1,
         selectElementAfterDrop: !0,
-        allowedScriptSourceDomains: "https://email-static.useinsider.com https://edge.fullstory.com https://rs.fullstory.com",
+        allowedScriptSourceDomains: A,
         ...o ? { baseBlocks: o } : {},
         editorFonts: {
           showDefaultStandardFonts: !0,
           showDefaultNotStandardFonts: !0,
-          customFonts: r
+          customFonts: s
         },
         mergeTags: [
           {
-            entries: L(
-              l.preselectedDynamicContentList,
+            entries: G(
+              c.preselectedDynamicContentList,
               u("liquidSyntax")
             )
           }
         ],
-        async onTokenRefreshRequest(t) {
+        async onTokenRefreshRequest(e) {
           try {
             const n = await w();
-            t(n);
+            e(n);
           } catch (n) {
             m(n, "Failed to refresh token");
           }
         },
         onTemplateLoaded() {
           try {
-            const { importCss: t } = U(), { activateCustomViewStyles: n, updateTimerInClonedTemplate: M } = D(), { injectFullStory: A } = R();
-            t(), n(), A(), M(), l.onReady(), e.isStripoInitialized = !0, e.loadingStatus = !1, setTimeout(() => {
-              e.hasChanges = !1;
+            const { importCss: e } = x(), { activateCustomViewStyles: n, updateTimerInClonedTemplate: I } = U(), { injectFullStory: P } = H();
+            e(), n(), P(), I(), c.onReady(), t.isStripoInitialized = !0, t.loadingStatus = !1, setTimeout(() => {
+              t.hasChanges = !1;
             }, 1e3);
-          } catch (t) {
-            m(t, "Failed to load custom interface appearance");
+          } catch (e) {
+            m(e, "Failed to load custom interface appearance");
           }
         },
-        onCodeEditorVisibilityChanged(t) {
-          e.isCodeEditorOpen = t;
+        onCodeEditorVisibilityChanged(e) {
+          t.isCodeEditorOpen = e;
         },
-        onEditorVisualModeChanged(t) {
-          e.editorVisualMode = t.toLowerCase();
+        onEditorVisualModeChanged(e) {
+          t.editorVisualMode = e.toLowerCase();
         },
-        onVersionHistoryVisibilityChanged(t) {
-          e.isVersionHistoryOpen = t;
+        onVersionHistoryVisibilityChanged(e) {
+          t.isVersionHistoryOpen = e;
         },
         onDataChanged() {
-          e.hasChanges = !0;
+          t.hasChanges = !0;
         },
         onEvent: B,
+        notifications: D,
         ignoreClickOutsideSelectors: [
           "#guido-dynamic-content-modal",
           ".in-on-board-wrapper",
           ".in-drawer__container"
         ],
         extensions: d,
-        localePatch: H
+        localePatch: L
       }
     );
-  }, _ = (i) => new Promise((r, s) => {
+  }, F = (i) => new Promise((s, r) => {
     var d;
     if (document.getElementById("UiEditorScript")) {
-      i(), r();
+      i(), s();
       return;
     }
-    const e = $.guido, a = `https://email-static.useinsider.com/guido/${(d = e == null ? void 0 : e.stripo) == null ? void 0 : d.version}/UIEditor.js`, o = document.createElement("script");
+    const t = J.guido, a = `https://email-static.useinsider.com/guido/${(d = t == null ? void 0 : t.stripo) == null ? void 0 : d.version}/UIEditor.js`, o = document.createElement("script");
     o.id = "UiEditorScript", o.type = "module", o.src = a, o.onload = () => {
-      i(), r();
+      i(), s();
     }, o.onerror = () => {
-      s(new Error(`Failed to load Stripo UIEditor script from S3: ${a}`));
+      r(new Error(`Failed to load Stripo UIEditor script from S3: ${a}`));
     }, document.body.appendChild(o);
   });
   return { initPlugin: async (i) => {
-    await _(async () => {
-      const r = E(), [s, e] = await Promise.all([
+    await F(async () => {
+      const s = E(), [r, t] = await Promise.all([
         b(),
         k()
       ]);
-      r.syncModulesEnabled = e, await V(i, s, e);
+      s.syncModulesEnabled = t, await _(i, r, t);
     });
   } };
 };
 export {
-  se as useStripo
+  ct as useStripo
 };

package/dist/composables/useStripoNotifications.js

@@ -0,0 +1,28 @@
+import { useToaster as d } from "./useToaster.js";
+import { ToasterTypeOptions as c } from "../enums/toaster.js";
+const p = () => {
+  const { showToaster: s, hideToaster: u } = d();
+  let r = null, l = null;
+  const n = (t, o, i, e, f = {}) => {
+    if (r === i && l === o)
+      return;
+    r = i, l = o;
+    const a = e != null && e.action ? { text: e.action.label, onClick: e.action.func } : void 0;
+    s({ type: t, message: o, actionButton: a, autoHide: f.autoHide });
+  };
+  return { getStripoNotifications: () => ({
+    info: (t, o, i) => n(c.Info, t, o, i),
+    success: (t, o, i) => n(c.Success, t, o, i),
+    warn: (t, o, i) => n(c.Warning, t, o, i),
+    error: (t, o, i) => n(c.Alert, t, o, i),
+    // Loader represents an in-progress operation; Stripo dismisses it via hide(id)
+    // when the operation finishes, so we disable auto-hide for this variant.
+    loader: (t, o, i) => n(c.Info, t, o, i, { autoHide: !1 }),
+    hide: (t) => {
+      r === t && (u(), r = null, l = null);
+    }
+  }) };
+};
+export {
+  p as useStripoNotifications
+};

package/dist/config/migrator/checkboxMigrator.js

@@ -1,36 +1,85 @@
-var h = Object.defineProperty;
-var g = (r, t, e) => t in r ? h(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
-var l = (r, t, e) => g(r, typeof t != "symbol" ? t + "" : t, e);
-import f from "../../extensions/Blocks/Checkbox/template.js";
-import { extractTextFromElement as m, buildTextBlock as p } from "./textBlockMigration.js";
-class C {
+var x = Object.defineProperty;
+var y = (s, t, e) => t in s ? x(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
+var m = (s, t, e) => y(s, typeof t != "symbol" ? t + "" : t, e);
+import b from "../../extensions/Blocks/Checkbox/template.js";
+class f {
   constructor() {
-    l(this, "parser");
+    m(this, "parser");
     this.parser = new DOMParser();
   }
   migrate(t) {
     try {
-      const e = this.parser.parseFromString(t, "text/html"), n = e.querySelectorAll("td.checkbox-block");
-      if (n.length === 0)
-        return t;
-      let i = !1;
-      return n.forEach((o) => {
-        if (o.classList.contains("checkbox-block-v2"))
+      const e = this.parser.parseFromString(t, "text/html"), i = e.querySelectorAll("td.checkbox-block");
+      return i.length === 0 ? t : (i.forEach((r) => {
+        if (r.classList.contains("checkbox-block-v2"))
           return;
-        const b = o.getAttribute("id"), s = m(o, "ins-title"), a = m(o, "ins-description"), u = p(s, s.containerClass), x = p(a, a.containerClass), d = f.replace("{-{-TITLE-}-}", u).replace("{-{-DESCRIPTION-}-}", x), c = this.parser.parseFromString(
-          `<table id="tempDoc"><tbody><tr>${d}</tr></tbody></table>`,
+        const n = r.getAttribute("id"), l = this.extractTextFromElement(r, "ins-title"), c = this.extractTextFromElement(r, "ins-description"), a = this.buildTextBlock(l), p = this.buildTextBlock(c), g = b.replace("{-{-TITLE-}-}", a).replace("{-{-DESCRIPTION-}-}", p), o = this.parser.parseFromString(
+          `<table id="tempDoc"><tbody><tr>${g}</tr></tbody></table>`,
           "text/html"
         ).querySelector(".checkbox-block-v2");
-        c && o.parentNode && (c.setAttribute("id", b || ""), o.parentNode.replaceChild(c, o), i = !0);
-      }), i ? e.documentElement.outerHTML : t;
+        o && r.parentNode && (o.setAttribute("id", n || ""), r.parentNode.replaceChild(o, r));
+      }), e.documentElement.outerHTML);
     } catch (e) {
       return console.error("CheckboxMigrator failed:", e), t;
     }
   }
+  extractTextFromElement(t, e) {
+    var o, d;
+    const i = t.querySelector(`.${e}`);
+    if (!i)
+      return {
+        text: e === "ins-title" ? "Title" : "Description",
+        isBold: !1,
+        isItalic: !1,
+        align: "left",
+        styles: ""
+      };
+    const r = i.querySelector("p");
+    if (!r)
+      return {
+        text: ((o = i.textContent) == null ? void 0 : o.trim()) || (e === "ins-title" ? "Title" : "Description"),
+        isBold: !1,
+        isItalic: !1,
+        align: i.getAttribute("align") || "left",
+        styles: ""
+      };
+    const n = ((d = r.textContent) == null ? void 0 : d.trim()) || (e === "ins-title" ? "Title" : "Description"), l = r.getAttribute("style") || "", c = i.getAttribute("align") || r.getAttribute("align") || "left", a = /font-weight\s*:\s*bold/i.test(l) || !!r.querySelector("b, strong"), p = /font-style\s*:\s*italic/i.test(l) || !!r.querySelector("i, em"), g = this.removeStyleProperties(l, ["font-weight", "font-style"]), u = this.convertInlineToBlock(g);
+    return {
+      text: n,
+      isBold: a,
+      isItalic: p,
+      align: c,
+      styles: u
+    };
+  }
+  buildTextBlock(t) {
+    let e = t.text;
+    t.isBold && t.isItalic ? e = `<strong path="1,0"><em path="1,0,0">${e}</em></strong>` : t.isBold ? e = `<strong path="1,0">${e}</strong>` : t.isItalic && (e = `<em path="1,0">${e}</em>`);
+    const i = t.align ? ` align="${t.align}"` : "", r = t.styles ? ` style="${t.styles}"` : "";
+    return `
+            <td class="esd-block-text" ${i}>
+                <p path="1" ${r}>
+                    ${e}
+                </p>
+            </td>
+        `;
+  }
+  removeStyleProperties(t, e) {
+    return t ? e.reduce((r, n) => {
+      const l = new RegExp(`${n}\\s*:\\s*[^;]*;?`, "gi");
+      return r.replace(l, "");
+    }, t).replace(/;\s*;/g, ";").replace(/^;|;$/g, "").trim() : "";
+  }
+  convertInlineToBlock(t) {
+    if (!t)
+      return "";
+    let e = t.replace(/display\s*:\s*inline/gi, "display: block");
+    return /display\s*:/i.test(e) || (e = e ? `${e}; display: block` : "display: block"), e.replace(/;\s*;/g, ";").replace(/^;|;$/g, "").trim();
+  }
 }
-function E(r) {
-  return new C().migrate(r);
+function k(s) {
+  return new f().migrate(s);
 }
 export {
-  E as migrateCheckbox
+  k as migrateCheckbox
 };

package/dist/config/migrator/radioButtonMigrator.js

@@ -1,54 +1,109 @@
-var q = Object.defineProperty;
-var C = (o, t, e) => t in o ? q(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
-var g = (o, t, e) => C(o, typeof t != "symbol" ? t + "" : t, e);
-import N from "../../extensions/Blocks/RadioButton/template.js";
-import { extractTextFromElement as b, buildTextBlock as f } from "./textBlockMigration.js";
-class R {
+var x = Object.defineProperty;
+var T = (l, e, t) => e in l ? x(l, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[e] = t;
+var b = (l, e, t) => T(l, typeof e != "symbol" ? e + "" : e, t);
+import S from "../../extensions/Blocks/RadioButton/template.js";
+class B {
   constructor() {
-    g(this, "parser");
+    b(this, "parser");
     this.parser = new DOMParser();
   }
-  migrate(t) {
+  migrate(e) {
     try {
-      const e = this.parser.parseFromString(t, "text/html"), n = e.querySelectorAll("td.radio-button-block"), a = e.querySelectorAll("td.radio-button-v2");
-      if (n.length === 0 && a.length === 0)
-        return t;
-      let i = !1;
-      return n.forEach((r) => {
+      const t = this.parser.parseFromString(e, "text/html"), s = t.querySelectorAll("td.radio-button-block"), i = t.querySelectorAll("td.radio-button-v2");
+      if (s.length === 0 && i.length === 0)
+        return e;
+      let o = !1;
+      return s.forEach((r) => {
         if (r.classList.contains("radio-button-v2"))
           return;
-        const s = r.getAttribute("id"), c = b(r, "ins-title"), d = b(r, "ins-description"), u = b(r, "ins-subscribe"), l = b(r, "ins-unsubscribe"), p = f(c, c.containerClass), m = f(d, d.containerClass), h = f(u), S = f(l), T = N.replace("{-{-TITLE-}-}", p).replace("{-{-DESCRIPTION-}-}", m).replace("{-{-YES-}-}", h).replace("{-{-NO-}-}", S), y = this.parser.parseFromString(
-          `<table id="tempDoc"><tbody><tr>${T}</tr></tbody></table>`,
+        const n = r.getAttribute("id"), a = this.extractTextFromElement(r, "ins-title"), g = this.extractTextFromElement(r, "ins-description"), c = this.extractTextFromElement(r, "ins-subscribe"), u = this.extractTextFromElement(r, "ins-unsubscribe"), p = this.buildTextBlock(a), d = this.buildTextBlock(g), y = this.buildTextBlock({ ...c, classList: "" }), f = this.buildTextBlock({ ...u, classList: "" }), h = S.replace("{-{-TITLE-}-}", p).replace("{-{-DESCRIPTION-}-}", d).replace("{-{-YES-}-}", y).replace("{-{-NO-}-}", f), m = this.parser.parseFromString(
+          `<table id="tempDoc"><tbody><tr>${h}</tr></tbody></table>`,
           "text/html"
         ).querySelector(".radio-button-v2");
-        y && r.parentNode && (y.setAttribute("id", s || ""), r.parentNode.replaceChild(y, r), i = !0);
-      }), i = this.healRadioButtonV2(e) || i, i ? e.documentElement.outerHTML : t;
-    } catch (e) {
-      return console.error("RadioButtonMigrator failed:", e), t;
+        m && r.parentNode && (m.setAttribute("id", n || ""), r.parentNode.replaceChild(m, r), o = !0);
+      }), o = this.healRadioButtonV2(t) || o, o ? t.documentElement.outerHTML : e;
+    } catch (t) {
+      return console.error("RadioButtonMigrator failed:", t), e;
     }
   }
-  healRadioButtonV2(t) {
-    let e = !1;
-    return t.querySelectorAll("td.radio-button-v2").forEach((n) => {
-      var m;
-      n.classList.contains("radio-button-block") || (n.classList.add("radio-button-block"), e = !0);
-      const a = n.querySelector("input#radioYes"), i = n.querySelector("input#radioNo");
-      if (!a || !i)
+  healRadioButtonV2(e) {
+    let t = !1;
+    return e.querySelectorAll("td.radio-button-v2").forEach((s) => {
+      var d;
+      s.classList.contains("radio-button-block") || (s.classList.add("radio-button-block"), t = !0);
+      const i = s.querySelector("input#radioYes"), o = s.querySelector("input#radioNo");
+      if (!i || !o)
         return;
-      const r = ((m = a.parentElement) == null ? void 0 : m.querySelector(":scope > p")) || null;
-      if (!r && !a.hasAttribute("align"))
+      const r = ((d = i.parentElement) == null ? void 0 : d.querySelector(":scope > p")) || null;
+      if (!r && !i.hasAttribute("align"))
         return;
-      const s = a.closest("tr"), c = i.closest("tr");
-      if (!s || !c || s === c || !s.parentNode)
+      const n = i.closest("tr"), a = o.closest("tr");
+      if (!n || !a || n === a || !n.parentNode)
         return;
-      const d = (r == null ? void 0 : r.innerHTML.trim()) || "Yes", u = c.cloneNode(!0), l = u.querySelector("input#radioNo"), p = u.querySelector("p");
-      l && (l.setAttribute("id", "radioYes"), l.removeAttribute("align")), p && (p.innerHTML = d), s.parentNode.replaceChild(u, s), e = !0;
-    }), e;
+      const g = (r == null ? void 0 : r.innerHTML.trim()) || "Yes", c = a.cloneNode(!0), u = c.querySelector("input#radioNo"), p = c.querySelector("p");
+      u && (u.setAttribute("id", "radioYes"), u.removeAttribute("align")), p && (p.innerHTML = g), n.parentNode.replaceChild(c, n), t = !0;
+    }), t;
+  }
+  extractTextFromElement(e, t) {
+    var d, y;
+    const s = e.querySelector(`.${t}`);
+    if (!s)
+      return {
+        text: t === "ins-title" ? "Title" : "Description",
+        isBold: !1,
+        isItalic: !1,
+        align: "left",
+        styles: "",
+        classList: ""
+      };
+    const i = s.querySelector("p");
+    if (!i)
+      return {
+        text: ((d = s.textContent) == null ? void 0 : d.trim()) || (t === "ins-title" ? "Title" : "Description"),
+        isBold: !1,
+        isItalic: !1,
+        align: s.getAttribute("align") || "left",
+        styles: "",
+        classList: ""
+      };
+    const o = ((y = i.textContent) == null ? void 0 : y.trim()) || (t === "ins-title" ? "Title" : "Description"), r = i.getAttribute("style") || "", n = s.getAttribute("align") || i.getAttribute("align") || "left", a = /font-weight\s*:\s*bold/i.test(r) || !!i.querySelector("b, strong"), g = /font-style\s*:\s*italic/i.test(r) || !!i.querySelector("i, em"), c = this.removeStyleProperties(r, ["font-weight", "font-style"]), u = this.convertInlineToBlock(c), p = s.getAttribute("class") || "";
+    return {
+      text: o,
+      isBold: a,
+      isItalic: g,
+      align: n,
+      styles: u,
+      classList: p
+    };
+  }
+  buildTextBlock(e) {
+    let t = e.text;
+    e.isBold && e.isItalic ? t = `<strong path="1,0"><em path="1,0,0">${t}</em></strong>` : e.isBold ? t = `<strong path="1,0">${t}</strong>` : e.isItalic && (t = `<em path="1,0">${t}</em>`);
+    const s = e.align ? ` align="${e.align}"` : "", i = e.styles ? ` style="${e.styles.replaceAll('"', "'")}"` : "";
+    return `
+            <td class="esd-block-text ${e.classList}" ${s}>
+                <p path="1" ${i}>
+                    ${t}
+                </p>
+            </td>
+        `;
+  }
+  removeStyleProperties(e, t) {
+    return e ? t.reduce((i, o) => {
+      const r = new RegExp(`${o}\\s*:\\s*[^;]*;?`, "gi");
+      return i.replace(r, "");
+    }, e).replace(/;\s*;/g, ";").replace(/^;|;$/g, "").trim() : "";
+  }
+  convertInlineToBlock(e) {
+    if (!e)
+      return "";
+    let t = e.replace(/display\s*:\s*inline/gi, "display: block");
+    return /display\s*:/i.test(t) || (t = t ? `${t}; display: block` : "display: block"), t.replace(/;\s*;/g, ";").replace(/^;|;$/g, "").trim();
   }
 }
-function w(o) {
-  return new R().migrate(o);
+function L(l) {
+  return new B().migrate(l);
 }
 export {
-  w as migrateRadioButton
+  L as migrateRadioButton
 };

package/dist/enums/toaster.js

@@ -1,4 +1,4 @@
-var c = /* @__PURE__ */ ((r) => (r.Success = "success", r.Warning = "warning", r.Alert = "alert", r))(c || {});
+var n = /* @__PURE__ */ ((r) => (r.Success = "success", r.Warning = "warning", r.Alert = "error", r.Info = "information", r))(n || {});
 export {
-  c as ToasterTypeOptions
+  n as ToasterTypeOptions
 };

package/dist/services/templateLibraryApi.js

@@ -1,15 +1,16 @@
-import { useConfig as w } from "../composables/useConfig.js";
-import { useHttp as b } from "../composables/useHttp.js";
-import { useToaster as C } from "../composables/useToaster.js";
+import { useConfig as b } from "../composables/useConfig.js";
+import { useHttp as C } from "../composables/useHttp.js";
+import { useToaster as S } from "../composables/useToaster.js";
 import { useTranslations as h } from "../composables/useTranslations.js";
-import { useLiquidValidator as S } from "../composables/validators/useLiquidValidator.js";
-import { EditorType as v } from "../enums/defaults.js";
-import { useRecommendationExtensionStore as N } from "../extensions/Blocks/Recommendation/store/recommendation.js";
-import { useSaveAsTemplateStore as x } from "../stores/save-as-template.js";
+import { useLiquidValidator as v } from "../composables/validators/useLiquidValidator.js";
+import { EditorType as N } from "../enums/defaults.js";
+import { ToasterTypeOptions as g } from "../enums/toaster.js";
+import { useRecommendationExtensionStore as x } from "../extensions/Blocks/Recommendation/store/recommendation.js";
+import { useSaveAsTemplateStore as A } from "../stores/save-as-template.js";
 import { base64EncodeWithSpecialChars as r } from "../utils/base64.js";
-import { useTemplatePreparation as A } from "../utils/templatePreparation.js";
-const $ = () => {
-  const { get: n, post: m } = b(), { handleError: o, showToaster: l } = C(), { config: c, isFeatureEnabled: p } = w(), { validateLiquidSyntax: g } = S(), u = h();
+import { useTemplatePreparation as E } from "../utils/templatePreparation.js";
+const j = () => {
+  const { get: n, post: m } = C(), { handleError: o, showToaster: l } = S(), { config: c, isFeatureEnabled: p } = b(), { validateLiquidSyntax: f } = v(), u = h();
   return {
     getCategories: async () => {
       try {
@@ -39,21 +40,21 @@ const $ = () => {
     createTemplate: async () => {
       var e, t, d, y;
       try {
-        const { prepareTemplateDetails: i } = A(), s = x(), a = await i();
-        if (p("liquidSyntax") && !await g(a.compiledHtml))
+        const { prepareTemplateDetails: i } = E(), s = A(), a = await i();
+        if (p("liquidSyntax") && !await f(a.compiledHtml))
           return !1;
-        const f = {
+        const T = {
           name: s.getTemplateName,
           categories: s.getSelectedCategoryIds,
           productId: ((t = (e = c.value) == null ? void 0 : e.partner) == null ? void 0 : t.productType) || 0,
-          editorType: v,
+          editorType: N,
           messageType: ((y = (d = c.value) == null ? void 0 : d.partner) == null ? void 0 : y.messageType) || 0,
           content: r(a.compiledHtml),
           css: r(a.css),
           unsubscriptionPreferencePageStatus: !1,
           unsubscriptionPreferencePages: [],
           recommendationCampaignUrls: r(
-            N().recommendationCampaignUrls
+            x().recommendationCampaignUrls
           ),
           recommendationConfigs: r({}),
           isGuido: !0,
@@ -65,22 +66,22 @@ const $ = () => {
             css: a.css,
             dynamicContentList: a.dynamicContentList
           })
-        }, { data: { type: T } } = await m(
+        }, { data: { type: w } } = await m(
           "/newsletter/template-library/create-template",
-          f
+          T
         );
-        return T === "alert" ? (l({
+        return w === "alert" ? (l({
           message: u(
             "newsletter.template-library-save-alert",
             { templateName: s.getTemplateName }
           ),
-          type: "alert"
+          type: g.Alert
         }), !1) : (l({
           message: u(
             "newsletter.template-library-save-success",
             { templateName: s.getTemplateName }
           ),
-          type: "success"
+          type: g.Success
         }), !0);
       } catch (i) {
         return o(i, "Failed to create template"), !1;
@@ -89,5 +90,5 @@ const $ = () => {
   };
 };
 export {
-  $ as useTemplateLibraryApi
+  j as useTemplateLibraryApi
 };

package/dist/src/composables/useStripoNotifications.d.ts

@@ -0,0 +1,4 @@
+import type { StripoNotifications } from '@@/Types/stripo';
+export declare const useStripoNotifications: () => {
+    getStripoNotifications: () => StripoNotifications;
+};

package/dist/src/enums/toaster.d.ts

@@ -1,5 +1,6 @@
 export declare enum ToasterTypeOptions {
     Success = "success",
     Warning = "warning",
-    Alert = "alert"
+    Alert = "error",
+    Info = "information"
 }

package/dist/src/stores/toaster.d.ts

@@ -11,8 +11,9 @@ export declare const useToasterStore: import("pinia").StoreDefinition<"guidoToas
             text: string;
             onClick: () => void;
         } | undefined;
+        autoHide: boolean;
     } & import("pinia").PiniaCustomStateProperties<ToasterState>) => boolean;
 }, {
-    showToaster(this: ToasterState, { type, message, actionButton }: ToasterOptions): void;
+    showToaster(this: ToasterState, { type, message, actionButton, autoHide }: ToasterOptions): void;
     hideToaster(this: ToasterState): void;
 }>;

package/dist/static/styles/components/wide-panel.css.js

@@ -11,11 +11,6 @@ ue-description a {
     display: none;
 }
 
-/* Override the rule above for the Gmail Promotions switcher docs link — remove with DT-28355. */
-ue-lock-container.e2e-promotions-switcher ue-description a {
-    display: unset;
-}
-
 .label {
     font-size: 13px;
     color: var(--guido-color-gray-800);

package/dist/stores/toaster.js

@@ -1,21 +1,22 @@
 import { ToasterTypeOptions as e } from "../enums/toaster.js";
-import { defineStore as i } from "pinia";
-const a = () => ({
+import { defineStore as a } from "pinia";
+const u = () => ({
   status: !1,
   type: e.Success,
   text: "",
   icon: "",
   withIcon: !0,
   withoutLeftMargin: !1,
-  actionButton: void 0
-}), n = i("guidoToaster", {
-  state: () => a(),
+  actionButton: void 0,
+  autoHide: !0
+}), c = a("guidoToaster", {
+  state: () => u(),
   getters: {
-    shouldAutoHide: (t) => t.status && !!t.text
+    shouldAutoHide: (t) => t.status && !!t.text && t.autoHide
   },
   actions: {
-    showToaster({ type: t = e.Success, message: s, actionButton: o }) {
-      this.status = !0, this.text = s, this.type = t, this.actionButton = o;
+    showToaster({ type: t = e.Success, message: o, actionButton: s, autoHide: i = !0 }) {
+      this.status = !0, this.text = o, this.type = t, this.actionButton = s, this.autoHide = i;
     },
     hideToaster() {
       this.status = !1;
@@ -23,5 +24,5 @@ const a = () => ({
   }
 });
 export {
-  n as useToasterStore
+  c as useToasterStore
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.4.1-beta.00eb92e",
+  "version": "3.4.1-beta.2120861",
   "description": "Guido is a Vue + TypeScript wrapper for Email Plugin. Easily embed the email editor in your Vue applications.",
   "main": "./dist/guido.umd.cjs",
   "module": "./dist/library.js",
@@ -35,7 +35,7 @@
   "license": "ISC",
   "dependencies": {
     "@stripoinc/ui-editor-extensions": "3.8.0",
-    "@useinsider/design-system-vue": "1.1.0-beta.73ec2fa",
+    "@useinsider/design-system-vue": "1.2.0",
     "@vueuse/core": "11.3.0",
     "lodash-es": "4.17.21",
     "pinia": "2.3.1",

package/dist/config/migrator/textBlockMigration.js

@@ -1,65 +0,0 @@
-const I = {
-  "ins-title": "Title",
-  "ins-description": "Description",
-  "ins-subscribe": "Yes",
-  "ins-unsubscribe": "No"
-}, y = /font-weight\s*:\s*[^;]*;?/gi, S = /font-style\s*:\s*[^;]*;?/gi, u = /;\s*;/g, T = /^;|;$/g, d = /display\s*:\s*inline/gi, m = /display\s*:/i, b = /font-weight\s*:\s*bold/i, A = /font-style\s*:\s*italic/i, R = /^<(?:strong|b)\b/i, $ = /^<(?:em|i)\b/i;
-function L(t) {
-  return t ? t.replace(y, "").replace(S, "").replace(u, ";").replace(T, "").trim() : "";
-}
-function O(t) {
-  if (!t)
-    return "";
-  let e = t.replace(d, "display: block");
-  return m.test(e) || (e = e ? `${e}; display: block` : "display: block"), e.replace(u, ";").replace(T, "").trim();
-}
-function B(t, e) {
-  var c, a;
-  const o = I[e], l = t.querySelector(`.${e}`);
-  if (!l)
-    return {
-      paragraphs: [{ innerHtml: o, isBold: !1, isItalic: !1, styles: "" }],
-      align: "left",
-      containerClass: ""
-    };
-  const n = Array.from(l.querySelectorAll("p")), p = l.getAttribute("align") || ((c = n[0]) == null ? void 0 : c.getAttribute("align")) || "left", i = l.getAttribute("class") || "";
-  return n.length === 0 ? {
-    paragraphs: [{
-      innerHtml: ((a = l.textContent) == null ? void 0 : a.trim()) || o,
-      isBold: !1,
-      isItalic: !1,
-      styles: ""
-    }],
-    align: p,
-    containerClass: ""
-  } : { paragraphs: n.map((r) => {
-    const _ = r.getAttribute("style") || "", f = b.test(_) || !!r.querySelector("b, strong"), g = A.test(_) || !!r.querySelector("i, em"), E = L(_);
-    return {
-      // Legacy parity: empty <p> → fallback placeholder; <p><br></p> is not empty.
-      innerHtml: r.innerHTML.trim() || o,
-      isBold: f,
-      isItalic: g,
-      styles: O(E)
-    };
-  }), align: p, containerClass: i };
-}
-function C(t, e = "") {
-  const o = t.align ? ` align="${t.align}"` : "", l = t.paragraphs.map((n, p) => {
-    const i = p + 1;
-    let s = n.innerHtml;
-    const c = n.isBold && !R.test(s), a = n.isItalic && !$.test(s);
-    c && a ? s = `<strong path="${i},0"><em path="${i},0,0">${s}</em></strong>` : c ? s = `<strong path="${i},0">${s}</strong>` : a && (s = `<em path="${i},0">${s}</em>`);
-    const r = n.styles ? ` style="${n.styles.replaceAll('"', "'")}"` : "";
-    return `<p path="${i}"${r}>${s}</p>`;
-  }).join(`
-                    `);
-  return `
-            <td class="esd-block-text ${e}" ${o}>
-                    ${l}
-            </td>
-        `;
-}
-export {
-  C as buildTextBlock,
-  B as extractTextFromElement
-};

package/dist/src/config/migrator/textBlockMigration.d.ts

@@ -1,24 +0,0 @@
-/**
- * Shared text-block migration helpers used by both `radioButtonMigrator` and
- * `checkboxMigrator`. Extracts a legacy v1 `.ins-title` / `.ins-description`
- * cell into a paragraph descriptor and rebuilds it as a v2 `esd-block-text`
- * cell — preserving every <p>, every inline tag (<u>, <a>, <br>, <strong>,
- * <em>) and re-encoding bold/italic detection as canonical tags.
- */
-export type InsCellClass = 'ins-title' | 'ins-description' | 'ins-subscribe' | 'ins-unsubscribe';
-type ParagraphContent = {
-    innerHtml: string;
-    isBold: boolean;
-    isItalic: boolean;
-    styles: string;
-};
-export type TextContent = {
-    paragraphs: ParagraphContent[];
-    align: string;
-};
-export type ExtractedTextContent = TextContent & {
-    containerClass: string;
-};
-export declare function extractTextFromElement(parent: Element, className: InsCellClass): ExtractedTextContent;
-export declare function buildTextBlock(content: TextContent, extraClass?: string): string;
-export {};

package/dist/static/styles/components/notification.css.js

@@ -1,74 +0,0 @@
-const n = `ue-notifications-container {
-    left: 96px;
-    margin: 0;
-    bottom: 32px;
-    top: unset;
-    width: unset;
-    position: fixed;
-}
-
-ue-notifications-container ue-message + ue-message {
-    margin-bottom: 24px;
-}
-
-ue-notifications-container .alert-message-wrapper {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07);
-    border: none;
-    padding: 16px 24px;
-}
-
-ue-notifications-container .alert-message-wrapper.info,
-ue-notifications-container .alert-message-wrapper.loader {
-    background-color: var(--guido-color-background-toaster-info) !important;
-    color: inherit;
-}
-
-.alert-message-wrapper .alert-message-main {
-    align-items: center;
-}
-
-ue-notifications-container ue-caption .caption {
-    color: var(--guido-color-white) !important;
-}
-
-ue-block-thumb-hint {
-    text-align: left;
-}
-
-ue-notifications-container .alert-message-wrapper .alert-message-main .alert-message-content {
-    width: calc(100% - 64px);
-}
-
-ue-notifications-container .alert-message-wrapper .alert-message-main .alert-message-text {
-    font-size: 15px;
-    font-weight: 600;
-}
-
-ue-notifications-container .alert-message-text,
-ue-notifications-container .alert-message-wrapper ue-icon-component.icon,
-ue-notifications-container .alert-message-wrapper ue-icon-component.icon-button {
-    color: var(--guido-color-white);
-}
-
-ue-notifications-container ue-message ue-button.close {
-    margin: 0 0 0 16px;
-}
-
-ue-notifications-container .alert-message-wrapper.success {
-    background: var(--guido-color-background-toaster-success);
-    color: inherit;
-}
-
-ue-notifications-container .alert-message-wrapper.error {
-    background: var(--guido-color-background-toaster-error);
-    color: inherit;
-}
-
-ue-notifications-container .alert-message-wrapper.warn {
-    background: var(--guido-color-background-toaster-warn);
-    color: inherit;
-}
-`;
-export {
-  n as default
-};