@useinsider/guido 1.0.0-beta.d5d5bac → 1.0.0-beta.d5da5b3

package/dist/components/organisms/header/AmpToggle.vue2.js

@@ -0,0 +1,48 @@
+import { defineComponent as h, ref as M, computed as e, watch as v } from "vue";
+import { usePreviewMode as E } from "../../../composables/usePreviewMode.js";
+import { useToaster as g } from "../../../composables/useToaster.js";
+import { useTranslations as w } from "../../../composables/useTranslations.js";
+import P from "../design-preview/AmpErrorModal.vue.js";
+import { useEditorStore as _ } from "../../../stores/editor.js";
+import { InButtonV2 as A, InSegments as T } from "@useinsider/design-system-vue";
+const S = /* @__PURE__ */ h({
+  __name: "AmpToggle",
+  setup(H) {
+    const o = _(), { compile: m } = E(), { showToaster: s } = g(), l = w(), r = M(!1), a = e(() => !!o.ampHtml), n = e(() => !!(o.ampErrors && o.ampErrors.length > 0)), p = e(() => [
+      { text: "HTML", value: "html" },
+      {
+        text: "AMP HTML",
+        value: "amp",
+        tooltipText: a.value ? "" : l("email.preview-amp-unavailable-tooltip"),
+        position: "bottom",
+        align: "center",
+        disable: !a.value
+      }
+    ]), i = async () => {
+      try {
+        const t = await m();
+        o.ampHtml = t.ampHtml ?? null, o.ampErrors = t.ampErrors ?? null, o.emailFormat = t.ampHtml ? "amp" : "html";
+      } catch {
+        s({
+          type: "error",
+          message: "Failed to load AMP data. Please try again later."
+        });
+      }
+    };
+    v([() => o.editorVisualMode, () => o.isPreviewModeOpen], () => {
+      o.isPreviewModeOpen && i();
+    }, { immediate: !0 });
+    const c = (t) => {
+      o.emailFormat = t;
+    }, u = () => {
+      r.value = !0;
+    }, d = e(() => o.emailFormat === "amp" && n.value);
+    function f() {
+      r.value = !1;
+    }
+    return { __sfc: !0, editorStore: o, compile: m, showToaster: s, trans: l, showErrorModal: r, hasAMP: a, hasAMPErrors: n, segmentList: p, updateAmpData: i, handleFormatChange: c, handleErrorClick: u, showErrorButton: d, closeErrorModal: f, AmpErrorModal: P, InSegments: T, InButtonV2: A };
+  }
+});
+export {
+  S as default
+};

package/dist/components/organisms/header/MiddleSlot.vue.js

@@ -1,17 +1,17 @@
 import s from "./MiddleSlot.vue2.js";
 import i from "../../../_virtual/_plugin-vue2_normalizer.js";
 var n = function() {
-  var e = this, o = e._self._c, t = e._self._setupProxy;
-  return t.editorStore.isVersionHistoryOpen ? o("div", { staticClass: "d-f" }, [o(t.VersionHistory), o(t.VersionHistoryViewOptions)], 1) : o("div", { staticClass: "d-f" }, [o(t.InButtonV2, { attrs: { id: "guido__undo-button", "left-icon": "line-undo", styling: "ghost", type: "secondary", "label-text-status": !1 } }), o(t.InButtonV2, { attrs: { id: "guido__redo-button", "left-icon": "line-redo", styling: "ghost", type: "secondary", "label-text-status": !1 } }), o(t.InButtonV2, { attrs: { id: "guido__code-button", "data-testid": "Code Editor", "left-icon": "line-code", styling: "ghost", "tooltip-text": "Code Editor", type: "secondary", "label-text-status": !1, "selected-status": t.editorStore.isCodeEditorOpen, "tooltip-options": t.getTooltipOptions("guido__code-button") } }), o(t.InButtonV2, { attrs: { id: "guido__preview-button", "left-icon": "line-show-on", styling: "ghost", type: "secondary", "label-text-status": !1, "tooltip-options": t.getTooltipOptions("guido__preview-button"), "tooltip-text": t.trans("newsletter.email-preview") } }), o(t.ViewOptions, { staticClass: "ml-3" })], 1);
-}, l = [], r = /* @__PURE__ */ i(
+  var o = this, e = o._self._c, t = o._self._setupProxy;
+  return t.editorStore.isVersionHistoryOpen ? e("div", { staticClass: "d-f" }, [e(t.VersionHistory), e(t.VersionHistoryViewOptions)], 1) : e("div", { staticClass: "d-f" }, [e(t.InButtonV2, { attrs: { id: "guido__undo-button", "left-icon": "line-undo", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isPreviewModeOpen, "label-text-status": !1 } }), e(t.InButtonV2, { attrs: { id: "guido__redo-button", "left-icon": "line-redo", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isPreviewModeOpen, "label-text-status": !1 } }), e(t.InButtonV2, { attrs: { id: "guido__code-button", "data-testid": "Code Editor", "left-icon": "line-code", styling: "ghost", "tooltip-text": "Code Editor", type: "secondary", "disabled-status": t.editorStore.isPreviewModeOpen, "label-text-status": !1, "selected-status": t.editorStore.isCodeEditorOpen, "tooltip-options": t.getTooltipOptions("guido__code-button") } }), e(t.InButtonV2, { attrs: { id: "guido__preview-button", "left-icon": "line-show-on", styling: "ghost", type: "secondary", "label-text-status": !1, "tooltip-options": t.getTooltipOptions("guido__preview-button"), "tooltip-text": t.editorStore.isPreviewModeOpen ? t.trans("newsletter.close-email-preview") : t.trans("newsletter.email-preview") }, on: { click: t.handlePreviewClick } }), e(t.ViewOptions, { staticClass: "ml-3" }), e(t.AmpToggle)], 1);
+}, r = [], l = /* @__PURE__ */ i(
   s,
   n,
-  l,
+  r,
   !1,
   null,
   null
 );
-const p = r.exports;
+const u = l.exports;
 export {
-  p as default
+  u as default
 };

package/dist/components/organisms/header/MiddleSlot.vue2.js

@@ -1,20 +1,24 @@
-import { defineComponent as r } from "vue";
-import { useTranslations as s } from "../../../composables/useTranslations.js";
-import { useEditorStore as n } from "../../../stores/editor.js";
-import { InButtonV2 as e } from "@useinsider/design-system-vue";
-import m from "./version-history/VersionHistory.vue.js";
-import p from "./version-history/ViewOptions.vue.js";
-import f from "./ViewOptions.vue.js";
-const y = /* @__PURE__ */ r({
+import { defineComponent as s } from "vue";
+import { usePreviewMode as n } from "../../../composables/usePreviewMode.js";
+import { useTranslations as p } from "../../../composables/useTranslations.js";
+import { useEditorStore as m } from "../../../stores/editor.js";
+import { InButtonV2 as l } from "@useinsider/design-system-vue";
+import a from "./AmpToggle.vue.js";
+import f from "./version-history/VersionHistory.vue.js";
+import d from "./version-history/ViewOptions.vue.js";
+import c from "./ViewOptions.vue.js";
+const y = /* @__PURE__ */ s({
   __name: "MiddleSlot",
-  setup(a) {
-    const o = n(), t = s();
-    return { __sfc: !0, editorStore: o, trans: t, getTooltipOptions: (i) => ({
-      id: `${i}-tooltip`,
+  setup(w) {
+    const o = m(), t = p(), { enablePreviewUI: e, disablePreviewUI: i } = n();
+    return { __sfc: !0, editorStore: o, trans: t, enablePreviewUI: e, disablePreviewUI: i, handlePreviewClick: () => {
+      o.isPreviewModeOpen = !o.isPreviewModeOpen, o.isPreviewModeOpen ? e() : i();
+    }, getTooltipOptions: (r) => ({
+      id: `${r}-tooltip`,
       dynamicPosition: !1,
       staticPosition: "bottom center",
       iconStatus: !1
-    }), InButtonV2: e, VersionHistory: m, VersionHistoryViewOptions: p, ViewOptions: f };
+    }), InButtonV2: l, AmpToggle: a, VersionHistory: f, VersionHistoryViewOptions: d, ViewOptions: c };
   }
 });
 export {

package/dist/components/organisms/header/RightSlot.vue.js

@@ -2,7 +2,7 @@ import o from "./RightSlot.vue2.js";
 import i from "../../../_virtual/_plugin-vue2_normalizer.js";
 var n = function() {
   var s = this, e = s._self._c, t = s._self._setupProxy;
-  return e("div", { staticClass: "d-f" }, [e(t.InButtonV2, { attrs: { id: "guido__history-button", "left-icon": "line-architect-version-history", styling: "ghost", type: "secondary", "label-text-status": !1, "selected-status": t.editorStore.isVersionHistoryOpen }, on: { click: t.handleVersionHistory } }), e(t.InButtonV2, { attrs: { id: "guido__export-button", "left-icon": "line-export", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isVersionHistoryOpen, "label-text-status": !1 }, on: { click: t.exportHtml } }), e(t.InButtonV2, { attrs: { id: "guido__save-as-button", "left-icon": "line-newsletter-save-as-template", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isVersionHistoryOpen, "label-text-status": !1 } }), e(t.InButtonV2, { attrs: { id: "guido__test-button", "left-icon": "line-architect-test-journey", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isVersionHistoryOpen, "label-text-status": !1 } }), e(t.InButtonV2, { staticClass: "ml-3", attrs: { id: "guido__save-button", "label-text": "Save", "disabled-status": t.editorStore.isVersionHistoryOpen }, on: { click: t.handleSave } })], 1);
+  return e("div", { staticClass: "d-f" }, [e(t.InButtonV2, { attrs: { id: "guido__history-button", "left-icon": "line-architect-version-history", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isPreviewModeOpen, "label-text-status": !1, "selected-status": t.editorStore.isVersionHistoryOpen }, on: { click: t.handleVersionHistory } }), e(t.InButtonV2, { attrs: { id: "guido__export-button", "left-icon": "line-export", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isVersionHistoryOpen, "label-text-status": !1 }, on: { click: t.exportHtml } }), e(t.InButtonV2, { attrs: { id: "guido__save-as-button", "left-icon": "line-newsletter-save-as-template", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isVersionHistoryOpen, "label-text-status": !1 } }), e(t.InButtonV2, { attrs: { id: "guido__test-button", "left-icon": "line-architect-test-journey", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isVersionHistoryOpen, "label-text-status": !1 } }), e(t.InButtonV2, { staticClass: "ml-3", attrs: { id: "guido__save-button", "label-text": "Save", "disabled-status": t.editorStore.isVersionHistoryOpen || t.editorStore.isPreviewModeOpen }, on: { click: t.handleSave } })], 1);
 }, r = [], a = /* @__PURE__ */ i(
   o,
   n,

package/dist/components/organisms/header/ViewOptions.vue.js

@@ -1,16 +1,16 @@
 import r from "./ViewOptions.vue2.js";
 /* empty css                 */
-import s from "../../../_virtual/_plugin-vue2_normalizer.js";
-var n = function() {
+import i from "../../../_virtual/_plugin-vue2_normalizer.js";
+var s = function() {
   var t = this, o = t._self._c, e = t._self._setupProxy;
-  return o(e.InSegments, { attrs: { id: "guido__view-option-selection", "with-icon": "", "segment-list": e.segmentList, selected: e.editorStore.editorVisualMode } });
-}, i = [], _ = /* @__PURE__ */ s(
+  return o(e.InSegments, { attrs: { id: "guido__view-option-selection", "with-icon": "", disable: e.editorStore.isPreviewModeOpen, "segment-list": e.segmentList, selected: e.editorStore.editorVisualMode } });
+}, n = [], _ = /* @__PURE__ */ i(
   r,
+  s,
   n,
-  i,
   !1,
   null,
-  "0fff376c"
+  "f90d31ea"
 );
 const l = _.exports;
 export {

package/dist/composables/useDebounce.d.ts

@@ -0,0 +1,4 @@
+export declare const useDebounce: () => {
+    debounce: (fn: () => void, ms?: number) => void;
+    clearDebounce: () => void;
+};

package/dist/composables/useDebounce.js

@@ -0,0 +1,12 @@
+import { ref as c } from "vue";
+const r = () => {
+  const e = c(void 0);
+  return { debounce: (o, u = 150) => {
+    e.value && window.clearTimeout(e.value), e.value = window.setTimeout(o, u);
+  }, clearDebounce: () => {
+    e.value && (window.clearTimeout(e.value), e.value = void 0);
+  } };
+};
+export {
+  r as useDebounce
+};

package/dist/composables/useMobileGmailFit.d.ts

@@ -0,0 +1,5 @@
+export declare const useMobileGmailFit: () => {
+    setupMobileGmailFit: (iframe: HTMLIFrameElement) => void;
+    tearDownMobileGmailFit: (iframe: HTMLIFrameElement) => void;
+    hasResponsiveMetaViewport: (doc: Document) => boolean;
+};

package/dist/composables/useMobileGmailFit.js

@@ -0,0 +1,69 @@
+import { useDebounce as p } from "./useDebounce.js";
+import { META_VIEWPORT_REGEX as h, INLINE_WIDTH_REGEX as w, EMAIL_CONTAINER_SELECTORS as f, DEFAULT_EMAIL_WIDTH as b, MIN_SCALE as v, TABLE_WIDTH_REGEX as A, RESIZE_DEBOUNCE_MS as u } from "../enums/gmailMobilePreview.js";
+let a = null, c = null;
+const { debounce: y } = p(), M = (t) => {
+  if (!t)
+    return null;
+  const e = t.match(A);
+  if (!e)
+    return null;
+  const r = Number(e[1]);
+  return Number.isNaN(r) ? null : r;
+}, g = (t) => {
+  const e = Array.from(t.querySelectorAll("table[width]")).reduce(
+    (n, i) => {
+      const o = M(i.getAttribute("width"));
+      return o && o > n ? o : n;
+    },
+    0
+  ), r = Array.from(t.querySelectorAll('[style*="width"]')).reduce(
+    (n, i) => {
+      const l = (i.getAttribute("style") || "").match(w);
+      if (!l)
+        return n;
+      const m = Number(l[1]);
+      return !Number.isNaN(m) && m > n ? m : n;
+    },
+    0
+  ), s = f.reduce((n, i) => {
+    const o = t.querySelector(i);
+    if (!o)
+      return n;
+    const l = Math.max(o.offsetWidth, o.scrollWidth);
+    return l > n ? l : n;
+  }, 0);
+  return Math.max(e, r, s) || b;
+}, N = (t) => {
+  t.documentElement.style.setProperty("overflow-x", "visible", "important"), t.body.style.setProperty("visibility", "visible", "important");
+}, S = (t) => {
+  t.documentElement.style.removeProperty("transform"), t.documentElement.style.removeProperty("transform-origin"), t.documentElement.style.removeProperty("height"), t.body.style.removeProperty("overflow-x");
+}, d = (t) => {
+  const e = t.querySelector('meta[name="viewport"]');
+  if (!e)
+    return !1;
+  const r = e.getAttribute("content") || "";
+  return h.test(r);
+}, W = (t, e) => {
+  const r = g(t), s = e / r, n = Math.min(Math.max(s, v), 1);
+  t.documentElement.style.setProperty("height", "100%", "important"), t.documentElement.style.setProperty("transform", `scale(${n})`, "important"), t.documentElement.style.setProperty("transform-origin", "top left", "important"), t.body.style.setProperty("overflow-x", "hidden", "important");
+}, E = (t) => {
+  const e = t.contentWindow;
+  c && e && e.removeEventListener("resize", c), a && window.removeEventListener("resize", a), c = null, a = null;
+}, P = () => ({ setupMobileGmailFit: (e) => {
+  const r = e.contentDocument, s = e.contentWindow;
+  if (!r || !s)
+    return;
+  N(r);
+  const n = () => {
+    const i = e.clientWidth || e.getBoundingClientRect().width || 375;
+    if (d(r)) {
+      S(r);
+      return;
+    }
+    W(r, i);
+  };
+  n(), E(e), c = () => y(n, u), s.addEventListener("resize", c), a = () => y(n, u), window.addEventListener("resize", a);
+}, tearDownMobileGmailFit: E, hasResponsiveMetaViewport: d });
+export {
+  P as useMobileGmailFit
+};

package/dist/composables/usePreviewMode.d.ts

@@ -0,0 +1,6 @@
+import type { CompiledEmailResult, CompileEmailOptions } from '@@/Types/stripo';
+export declare const usePreviewMode: () => {
+    compile: (options?: CompileEmailOptions) => Promise<CompiledEmailResult>;
+    enablePreviewUI: () => void;
+    disablePreviewUI: () => void;
+};

package/dist/composables/usePreviewMode.js

@@ -0,0 +1,19 @@
+import { useActionsApi as s } from "./useActionsApi.js";
+const a = () => {
+  const { getCompiledEmail: e } = s();
+  return { compile: async (t) => {
+    const i = await e({ minimize: !1, resetDataSavedFlag: !1, ...t });
+    return {
+      html: i.html,
+      ampHtml: i.ampHtml || null,
+      ampErrors: i.ampErrors || null
+    };
+  }, enablePreviewUI: () => {
+    window.StripoEditorApi.uiApi.setSettingsPanelVisible(!1), window.StripoEditorApi.uiApi.setBlocksPanelVisible(!1);
+  }, disablePreviewUI: () => {
+    window.StripoEditorApi.uiApi.setSettingsPanelVisible(!0), window.StripoEditorApi.uiApi.setBlocksPanelVisible(!0);
+  } };
+};
+export {
+  a as usePreviewMode
+};

package/dist/composables/useStripo.js

@@ -1,21 +1,20 @@
 import { useActionsApi as g } from "./useActionsApi.js";
 import { useCustomInterfaceAppearance as f } from "./useCustomInterfaceAppearance.js";
-import { useToaster as y } from "./useToaster.js";
-import { displayConditions as C } from "../enums/displayConditions.js";
-import E from "../extensions/DynamicContent/extension.js";
-import { useStripoApi as S } from "../services/stripoApi.js";
+import { useToaster as E } from "./useToaster.js";
+import { displayConditions as S } from "../enums/displayConditions.js";
+import y from "../extensions/DynamicContent/extension.js";
+import { useStripoApi as C } from "../services/stripoApi.js";
 import { useEditorStore as w } from "../stores/editor.js";
-import { dynamicContentToMergeTags as b } from "../utils/genericUtil.js";
-const M = (d) => {
-  const { handleError: c } = y(), { getToken: a, getCustomFonts: u } = S(), l = (e, r = []) => {
-    const i = w(), { html: t, css: s, forceRecreate: p } = e;
+const A = (a) => {
+  const { handleError: d } = E(), { getToken: c, getCustomFonts: u } = C(), l = (e, r = []) => {
+    const i = w(), { html: t, css: s, forceRecreate: m } = e;
     window.UIEditor.initEditor(
       document.querySelector("#guido-editor"),
       {
-        metadata: d,
+        metadata: a,
         html: t,
         css: s,
-        forceRecreate: p,
+        forceRecreate: m,
         locale: "en",
         undoButtonSelector: "#guido__undo-button",
         redoButtonSelector: "#guido__redo-button",
@@ -31,24 +30,19 @@ const M = (d) => {
                 `,
         conditionsEnabled: !0,
         customConditionsEnabled: !0,
-        conditionCategories: C,
+        conditionCategories: S,
         messageSettingsEnabled: !1,
         editorFonts: {
           showDefaultStandardFonts: !0,
           showDefaultNotStandardFonts: !0,
           customFonts: r
         },
-        mergeTags: [
-          {
-            entries: b(d.preselectedDynamicContentList)
-          }
-        ],
         async onTokenRefreshRequest(o) {
           try {
-            const n = await a();
+            const n = await c();
             o(n);
           } catch (n) {
-            c(n, "Failed to refresh token");
+            d(n, "Failed to refresh token");
           }
         },
         onTemplateLoaded() {
@@ -56,7 +50,7 @@ const M = (d) => {
             const { importCss: o } = f(), { activateCustomViewStyles: n } = g();
             o(), n();
           } catch (o) {
-            c(o, "Failed to load custom interface appearance");
+            d(o, "Failed to load custom interface appearance");
           }
         },
         onCodeEditorVisibilityChanged(o) {
@@ -69,10 +63,10 @@ const M = (d) => {
           i.isVersionHistoryOpen = o;
         },
         ignoreClickOutsideSelectors: ["#guido-dynamic-content-modal"],
-        extensions: [E]
+        extensions: [y]
       }
     );
-  }, m = (e) => new Promise((r, i) => {
+  }, p = (e) => new Promise((r, i) => {
     if (document.getElementById("UiEditorScript")) {
       e(), r();
       return;
@@ -86,12 +80,12 @@ const M = (d) => {
     }, document.body.appendChild(t);
   });
   return { initPlugin: async (e) => {
-    await m(async () => {
+    await p(async () => {
       const r = await u();
       l(e, r);
     });
   } };
 };
 export {
-  M as useStripo
+  A as useStripo
 };

package/dist/enums/emailPreview.d.ts

@@ -0,0 +1,3 @@
+export declare const MAX_EMAIL_WEIGHT = 102;
+export declare const INBOX_PREVIEW_PATH = "/inbox-mockup.svg";
+export declare const PHONE_PREVIEW_PATH = "/phone-mockup.svg";

package/dist/enums/emailPreview.js

@@ -0,0 +1,6 @@
+const o = 102, E = "/inbox-mockup.svg", _ = "/phone-mockup.svg";
+export {
+  E as INBOX_PREVIEW_PATH,
+  o as MAX_EMAIL_WEIGHT,
+  _ as PHONE_PREVIEW_PATH
+};

package/dist/enums/gmailMobilePreview.d.ts

@@ -0,0 +1,7 @@
+export declare const DEFAULT_EMAIL_WIDTH = 600;
+export declare const MIN_SCALE = 0.2;
+export declare const RESIZE_DEBOUNCE_MS = 100;
+export declare const INLINE_WIDTH_REGEX: RegExp;
+export declare const TABLE_WIDTH_REGEX: RegExp;
+export declare const META_VIEWPORT_REGEX: RegExp;
+export declare const EMAIL_CONTAINER_SELECTORS: readonly [".wrapper", ".container", "#wrapper", "#container", "[data-email-container]", "[role=\"presentation\"]"];

package/dist/enums/gmailMobilePreview.js

@@ -0,0 +1,17 @@
+const E = 600, t = 0.2, n = 100, o = /width\s*:\s*(\d+(\.\d+)?)px/i, _ = /^(\d+(\.\d+)?)(px)?$/i, e = /width\s*=\s*device-width/i, i = [
+  ".wrapper",
+  ".container",
+  "#wrapper",
+  "#container",
+  "[data-email-container]",
+  '[role="presentation"]'
+];
+export {
+  E as DEFAULT_EMAIL_WIDTH,
+  i as EMAIL_CONTAINER_SELECTORS,
+  o as INLINE_WIDTH_REGEX,
+  e as META_VIEWPORT_REGEX,
+  t as MIN_SCALE,
+  n as RESIZE_DEBOUNCE_MS,
+  _ as TABLE_WIDTH_REGEX
+};

package/dist/extensions/DynamicContent/dynamic-content.js

@@ -1,16 +1,15 @@
-var o = Object.defineProperty;
-var m = (i, t, e) => t in i ? o(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
-var r = (i, t, e) => m(i, typeof t != "symbol" ? t + "" : t, e);
-import { dynamicContentToMergeTags as l } from "../../utils/genericUtil.js";
+var l = Object.defineProperty;
+var o = (i, t, e) => t in i ? l(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
+var r = (i, t, e) => o(i, typeof t != "symbol" ? t + "" : t, e);
 import { d as n } from "../../_virtual/index.js";
-import { ExternalMergeTagsLibrary as g } from "./dynamic-content-modal.js";
-const a = "external-dynamic-content-ui-element", c = "button-add-dynamic-content";
-class p extends n.UIElementTagRegistry {
+import { ExternalMergeTagsLibrary as c } from "./dynamic-content-modal.js";
+const a = "external-dynamic-content-ui-element", m = "button-add-dynamic-content";
+class d extends n.UIElementTagRegistry {
   registerUiElements(t) {
     t[n.UIElementType.MERGETAGS] = a;
   }
 }
-class u extends n.UIElement {
+class b extends n.UIElement {
   constructor() {
     super(...arguments);
     r(this, "mergeTagsButton", null);
@@ -34,10 +33,13 @@ class u extends n.UIElement {
     this.openMergeTagLibrary();
   }
   openMergeTagLibrary() {
-    this.mergeTagsLibrary || (this.mergeTagsLibrary = new g()), this.mergeTagsLibrary.openMergeTagsLibrary(
+    this.mergeTagsLibrary || (this.mergeTagsLibrary = new c()), this.mergeTagsLibrary.openMergeTagsLibrary(
       this.selectedDynamicContent,
       (e) => {
-        this.api.onValueChanged(l([e])[0]);
+        this.api.onValueChanged({
+          label: e.fallback ? `${e.text} | ${e.fallback}` : e.text,
+          value: e.fallback ? `{{${e.value}|${e.fallback}}}` : `{{${e.value}}}`
+        });
       }
     );
   }
@@ -47,7 +49,7 @@ class u extends n.UIElement {
                 <${n.UIElementType.BUTTON} 
                     id="guido__btn-add-dynamic-content" 
                     class="btn btn-primary"
-                    ${n.UEAttr.BUTTON.name}="${c}">
+                    ${n.UEAttr.BUTTON.name}="${m}">
                         <${n.UIElementType.ICON} src="plus" class="icon icon-button color-primary">
                         </${n.UIElementType.ICON}>
                         ${this.api.translate("Add Dynamic Content")}
@@ -56,6 +58,6 @@ class u extends n.UIElement {
   }
 }
 export {
-  p as DynamicContentTagRegistry,
-  u as DynamicContentUiElementExtension
+  d as DynamicContentTagRegistry,
+  b as DynamicContentUiElementExtension
 };

package/dist/guido.css

@@ -1 +1 @@
-.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history-wrapper[data-v-52a77eec]{gap:8px}[data-v-6a2bde67] .guido__verion-history-view-option-selection-desktop svg,[data-v-6a2bde67] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-6a2bde67] .in-segments-wrapper__button_selected,[data-v-6a2bde67] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-0fff376c] .guido__view-option-selection-desktop svg,[data-v-0fff376c] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-0fff376c] .in-segments-wrapper__button_selected,[data-v-0fff376c] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.guido-editor__wrapper[data-v-f9fbdc93],.guido-editor__container[data-v-f9fbdc93]{width:100%;height:calc(100vh - 75px)}
+[data-v-4b4b203f] .in-progress-wrapper__progress p span:last-child{display:none!important}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history-wrapper[data-v-52a77eec]{gap:8px}[data-v-6a2bde67] .guido__verion-history-view-option-selection-desktop svg,[data-v-6a2bde67] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-6a2bde67] .in-segments-wrapper__button_selected,[data-v-6a2bde67] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-f90d31ea] .guido__view-option-selection-desktop svg,[data-v-f90d31ea] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-f90d31ea] .in-segments-wrapper__button_selected,[data-v-f90d31ea] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.guido-editor__wrapper[data-v-7836f831],.guido-editor__container[data-v-7836f831]{width:100%;height:calc(100vh - 75px)}

package/dist/inbox-mockup.svg

@@ -0,0 +1,39 @@
+<svg width="344" height="713" viewBox="0 0 344 713" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="344" height="712.056" rx="44" fill="white"/>
+<path d="M152.709 71V61.9H153.814V71H152.709ZM155.939 71V64.5H156.914L156.979 65.696V71H155.939ZM160.502 71V67.672H161.542V71H160.502ZM160.502 67.672C160.502 67.0307 160.429 66.541 160.281 66.203C160.134 65.865 159.93 65.6353 159.67 65.514C159.41 65.384 159.116 65.319 158.786 65.319C158.214 65.319 157.768 65.5227 157.447 65.93C157.135 66.3287 156.979 66.8963 156.979 67.633H156.472C156.472 66.9483 156.572 66.359 156.771 65.865C156.971 65.371 157.261 64.994 157.642 64.734C158.024 64.474 158.483 64.344 159.02 64.344C159.532 64.344 159.974 64.448 160.346 64.656C160.728 64.8553 161.022 65.176 161.23 65.618C161.447 66.06 161.551 66.6407 161.542 67.36V67.672H160.502ZM163.188 71V61.9H164.228V69.791L164.176 71H163.188ZM166.425 71.156C165.879 71.156 165.398 71.013 164.982 70.727C164.575 70.441 164.259 70.0423 164.033 69.531C163.808 69.011 163.695 68.4173 163.695 67.75C163.695 67.074 163.808 66.4803 164.033 65.969C164.259 65.4577 164.575 65.059 164.982 64.773C165.398 64.487 165.879 64.344 166.425 64.344C167.006 64.344 167.517 64.487 167.959 64.773C168.401 65.059 168.744 65.4577 168.986 65.969C169.238 66.4803 169.363 67.074 169.363 67.75C169.363 68.4173 169.238 69.011 168.986 69.531C168.744 70.0423 168.401 70.441 167.959 70.727C167.517 71.013 167.006 71.156 166.425 71.156ZM166.191 70.207C166.599 70.207 166.958 70.103 167.27 69.895C167.591 69.687 167.842 69.3967 168.024 69.024C168.215 68.6513 168.31 68.2267 168.31 67.75C168.31 67.2733 168.219 66.8487 168.037 66.476C167.864 66.1033 167.617 65.813 167.296 65.605C166.976 65.397 166.612 65.293 166.204 65.293C165.823 65.293 165.481 65.397 165.177 65.605C164.883 65.813 164.649 66.1033 164.475 66.476C164.311 66.8487 164.228 67.2733 164.228 67.75C164.228 68.2267 164.311 68.6513 164.475 69.024C164.649 69.3967 164.883 69.687 165.177 69.895C165.472 70.103 165.81 70.207 166.191 70.207ZM173.679 71.156C173.046 71.156 172.483 71.013 171.989 70.727C171.503 70.4323 171.122 70.0293 170.845 69.518C170.567 69.0067 170.429 68.4173 170.429 67.75C170.429 67.0827 170.563 66.4933 170.832 65.982C171.109 65.4707 171.49 65.072 171.976 64.786C172.47 64.4913 173.029 64.344 173.653 64.344C174.294 64.344 174.857 64.4913 175.343 64.786C175.837 65.072 176.218 65.4707 176.487 65.982C176.764 66.4933 176.903 67.0827 176.903 67.75C176.903 68.4173 176.764 69.0067 176.487 69.518C176.218 70.0293 175.841 70.4323 175.356 70.727C174.87 71.013 174.311 71.156 173.679 71.156ZM173.679 70.194C174.112 70.194 174.489 70.09 174.81 69.882C175.13 69.674 175.382 69.388 175.564 69.024C175.754 68.66 175.85 68.2353 175.85 67.75C175.85 67.2647 175.754 66.84 175.564 66.476C175.382 66.112 175.126 65.826 174.797 65.618C174.467 65.41 174.086 65.306 173.653 65.306C173.228 65.306 172.851 65.41 172.522 65.618C172.201 65.826 171.945 66.112 171.755 66.476C171.573 66.84 171.482 67.2647 171.482 67.75C171.482 68.2267 171.573 68.6513 171.755 69.024C171.945 69.388 172.205 69.674 172.535 69.882C172.873 70.09 173.254 70.194 173.679 70.194ZM177.503 71L180.155 67.269L182.027 64.5H183.262L180.792 68.01L178.764 71H177.503ZM182.17 71L180.168 68.01L177.672 64.5H178.907L180.792 67.269L183.418 71H182.17Z" fill="#989898"/>
+<line x1="12" y1="86.5" x2="332" y2="86.5" stroke="black" stroke-opacity="0.07"/>
+<line x1="28" y1="150.5" x2="316" y2="150.5" stroke="black" stroke-opacity="0.07"/>
+<line x1="28" y1="214.5" x2="316" y2="214.5" stroke="black" stroke-opacity="0.07"/>
+<line x1="28" y1="278.5" x2="316" y2="278.5" stroke="black" stroke-opacity="0.07"/>
+<line x1="28" y1="342.5" x2="316" y2="342.5" stroke="black" stroke-opacity="0.07"/>
+<line x1="28" y1="406.5" x2="316" y2="406.5" stroke="black" stroke-opacity="0.07"/>
+<line x1="28" y1="470.5" x2="316" y2="470.5" stroke="black" stroke-opacity="0.07"/>
+<line x1="28" y1="534.5" x2="316" y2="534.5" stroke="black" stroke-opacity="0.07"/>
+<line x1="28" y1="598.5" x2="316" y2="598.5" stroke="black" stroke-opacity="0.07"/>
+<rect width="320" height="64" transform="translate(12 626)" fill="white"/>
+<rect x="28" y="644" width="20" height="20" fill="url(#pattern0_24_102)"/>
+<rect x="292" y="642" width="24" height="24" fill="url(#pattern1_24_102)"/>
+<path d="M54.6454 35V29.1943H54.5624L52.8095 30.4346V29.248L54.6503 27.9541H55.9052V35H54.6454ZM60.7072 35V33.6475H57.2599V32.6172C58.173 31.0303 59.174 29.4092 60.131 27.9541H61.9132V32.6074H62.8605V33.6475H61.9132V35H60.7072ZM58.4318 32.6367H60.7267V28.96H60.6535C59.9308 30.0635 59.1154 31.3672 58.4318 32.5635V32.6367ZM64.6742 30.4346C64.2298 30.4346 63.8978 30.0928 63.8978 29.6631C63.8978 29.2285 64.2298 28.8916 64.6742 28.8916C65.1234 28.8916 65.4505 29.2285 65.4505 29.6631C65.4505 30.0928 65.1234 30.4346 64.6742 30.4346ZM64.6742 34.0576C64.2298 34.0576 63.8978 33.7207 63.8978 33.2861C63.8978 32.8516 64.2298 32.5146 64.6742 32.5146C65.1234 32.5146 65.4505 32.8516 65.4505 33.2861C65.4505 33.7207 65.1234 34.0576 64.6742 34.0576ZM66.688 35V34.1504L69.0025 31.7871C69.9595 30.8203 70.2281 30.4639 70.2281 29.9219V29.9072C70.2281 29.2578 69.7837 28.7891 69.0513 28.7891C68.3042 28.7891 67.8013 29.2822 67.8013 30.0098L67.7964 30.0293L66.6246 30.0244L66.6197 30.0098C66.6197 28.6963 67.6451 27.7783 69.1148 27.7783C70.4869 27.7783 71.4732 28.6133 71.4732 29.7998V29.8145C71.4732 30.6152 71.0875 31.25 69.8033 32.4854L68.3921 33.8525V33.9551H71.5806V35H66.688ZM75.1521 35.1758C73.4773 35.1758 72.4714 33.7549 72.4714 31.4795V31.4697C72.4714 29.1943 73.4773 27.7783 75.1521 27.7783C76.8269 27.7783 77.8425 29.1943 77.8425 31.4697V31.4795C77.8425 33.7549 76.8269 35.1758 75.1521 35.1758ZM75.1521 34.1553C76.0505 34.1553 76.573 33.1494 76.573 31.4795V31.4697C76.573 29.7998 76.0505 28.8037 75.1521 28.8037C74.2537 28.8037 73.741 29.7998 73.741 31.4697V31.4795C73.741 33.1494 74.2537 34.1553 75.1521 34.1553Z" fill="black"/>
+<path d="M257.835 28C257.835 27.5398 258.208 27.1667 258.668 27.1667H259.501C259.961 27.1667 260.335 27.5398 260.335 28V34.6667C260.335 35.1269 259.961 35.5 259.501 35.5H258.668C258.208 35.5 257.835 35.1269 257.835 34.6667V28Z" fill="black"/>
+<path d="M262.001 26.3333C262.001 25.8731 262.374 25.5 262.835 25.5H263.668C264.128 25.5 264.501 25.8731 264.501 26.3333V34.6667C264.501 35.1269 264.128 35.5 263.668 35.5H262.835C262.374 35.5 262.001 35.1269 262.001 34.6667V26.3333Z" fill="black"/>
+<path d="M253.668 30.9167C253.668 30.4564 254.041 30.0833 254.501 30.0833H255.335C255.795 30.0833 256.168 30.4564 256.168 30.9167V34.6667C256.168 35.1269 255.795 35.5 255.335 35.5H254.501C254.041 35.5 253.668 35.1269 253.668 34.6667V30.9167Z" fill="black"/>
+<path d="M249.501 33C249.501 32.5398 249.874 32.1667 250.335 32.1667H251.168C251.628 32.1667 252.001 32.5398 252.001 33V34.6667C252.001 35.1269 251.628 35.5 251.168 35.5H250.335C249.874 35.5 249.501 35.1269 249.501 34.6667V33Z" fill="black"/>
+<path d="M277.668 33.0361C278.868 32.0006 280.625 32.0004 281.824 33.0361C281.885 33.0918 281.919 33.1709 281.921 33.2539C281.923 33.3368 281.891 33.4165 281.833 33.4746L279.954 35.4102C279.899 35.4669 279.825 35.499 279.746 35.499C279.668 35.499 279.592 35.467 279.537 35.4102L277.658 33.4746C277.601 33.4165 277.569 33.3367 277.571 33.2539C277.572 33.1709 277.608 33.0918 277.668 33.0361ZM275.128 30.7197C277.713 28.2656 281.716 28.2656 284.301 30.7197C284.359 30.7773 284.392 30.8567 284.393 30.9395C284.394 31.0223 284.362 31.1024 284.305 31.1611L283.219 32.2812C283.107 32.3954 282.926 32.3974 282.812 32.2861C281.963 31.5016 280.858 31.0673 279.713 31.0674C278.569 31.068 277.466 31.5022 276.617 32.2861C276.503 32.3974 276.322 32.3953 276.21 32.2812L275.124 31.1611C275.067 31.1025 275.036 31.0223 275.036 30.9395C275.037 30.8567 275.07 30.7772 275.128 30.7197ZM272.591 28.4082C276.556 24.5301 282.81 24.5301 286.775 28.4082C286.832 28.4658 286.864 28.5448 286.865 28.627C286.865 28.7088 286.834 28.7875 286.778 28.8457L285.69 29.9658C285.578 30.0808 285.396 30.0819 285.282 29.9688C283.772 28.503 281.767 27.6856 279.683 27.6855C277.599 27.6857 275.594 28.503 274.083 29.9688C273.97 30.0821 273.788 30.0809 273.676 29.9658L272.588 28.8457C272.532 28.7874 272.501 28.708 272.501 28.626C272.502 28.5441 272.534 28.4656 272.591 28.4082Z" fill="black"/>
+<path opacity="0.35" d="M298.865 26H309.865C311.245 26 312.365 27.1193 312.365 28.5V31.5C312.365 32.8807 311.245 34 309.865 34H298.865C297.484 34 296.365 32.8807 296.365 31.5V28.5C296.365 27.1193 297.484 26 298.865 26Z" stroke="black"/>
+<path opacity="0.4" d="M313.865 28.5V31.5C314.47 31.2459 314.865 30.6549 314.865 30C314.865 29.3451 314.47 28.7541 313.865 28.5Z" fill="black"/>
+<path d="M297.865 28.5C297.865 27.9477 298.312 27.5 298.865 27.5H309.865C310.417 27.5 310.865 27.9477 310.865 28.5V31.5C310.865 32.0523 310.417 32.5 309.865 32.5H298.865C298.312 32.5 297.865 32.0523 297.865 31.5V28.5Z" fill="black"/>
+<g opacity="0.8">
+<rect x="127" y="690" width="90" height="4" rx="2" fill="#0F1218" style="mix-blend-mode:darken"/>
+</g>
+<rect x="131" y="20" width="83" height="22" rx="11" fill="#24262D"/>
+<defs>
+<pattern id="pattern0_24_102" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_24_102" transform="scale(0.02)"/>
+</pattern>
+<pattern id="pattern1_24_102" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image1_24_102" transform="scale(0.0208333)"/>
+</pattern>
+<image id="image0_24_102" width="50" height="50" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEL0lEQVR4nO1aS48UVRS+xAcajIqKutSl0Sh/wifia+drB9ENMEG3OK7FWRTTfb/vVKfTSS97qSFGEzGIGhBE2MigsFJZKLoTJWjafD3nJpVM10x3Tz9qCF9SSc/cW6fuqXPuOed+p0K4gesUjUbjHjN7ieRBkodJLpH8E8BVXf77nI8dBPBijHFrqAJardZtMcY3SX5G8j+S3WEuAP8C+JTkG1mWbZ66AgsLC7eb2TsALhUW9g+AI2Z2QJap1+uP6I2b2S269Fv/0xiA90h+oXsKSv1Kcr9ezlSUMLMdJC8WFnDSzHaZ2V3Dymq1WncD2E3yVEHeBTN7dqJuxGWkB35nZk+NSz7JZwB8X7BwfezWqdVqD2rhrsBfJPd0Op2bxvqQEIJkAthH8kqydqPReGAswvM8f1jmdsHnYoyPhQmjXq8/DuC8W+YnrWFdApvN5rYkEMC3ZnZfmBJijFtJfuXKXJRXjCRI/llwp2/a7faWMGW02+0tAI4nNxtpz6SNLXdSsgszwuLi4r0FN6uPEmJ7G3sae2KQPUMPAIpuAye7Qp7YEyoCknNp8w/kYgDeTXliEiF2VMzPz99M8owrM7fqZNU7XipIkSdDxQDgOV/bpVWtouItRYhQQXS73U0pkprZa6UTvYrVpF39xgEcG7bCHfUCcKxkDW/5+Cd9lVCIVVmtirSsAJymIiS/LEuUfr651nedAF52AZ+HigPAUV/rzn6DH7pbHQgVB4D33b0+WDHoR9BujPGFUHHAvQfARysGSf6oQZ3iQsWR5/mj7lpLKwYB/KHBWdZVg0JVuFvktxWDHgm6nU7n1lBxZFm2OfEE61ZkEqEYJbljKEVIXtagyuZZKcKS3LGKa/1+/W52evgVAxgqDpKvlIbflBBFnoWNnBBtmbfV4JGwQUqUGOPzZcVYr2gUAxgqisZycdsrGrMsu7PvJCeUZZXdoaIg+bZv9MOlkwC87pNODSp4HGF40PzR7XY3kTzt97y6FpfVO+rGGJ+eliJD5I8drsTPa7YhRO278NMVJB/O+lFj75o3uFUS17svVAT0FyyybuCmkPoTbpUrIsfCjJHn+XYAf7s1hmtliJ5Mb2DQ+msSaDab20TK+VoODS3AXeykCzg+CxK7VqvdQfKEe8eJkfuM/jaWUltBf4fpJr6v/dkX1t3wUZOlYNrzAJ4Y22rLn7k9PVNVOYCHxiJYbyO5mbPicwqHYTIhdn/a2HKnGOP9k2iG9gKAX2fG1X1VxvZkd7aQ7Q9NtPeu/kTB7D3WXjTmKF8xaB947dQrO+iuNM5u8SDWUb/il4JCV728nhfvpFOcwrY4AF36raaRH4o052jiCVLZYWZ7Z/IFhB4qVlyEsh8Bhq2xrqmKVQE4EwX6QYSyuFid2kh+7B/QXC58VCNy4wcdT33OztLzxA2EjY//AVnMqJspfcIsAAAAAElFTkSuQmCC"/>
+<image id="image1_24_102" width="48" height="48" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB9UlEQVR4nO2Zv2oVQRTGBxHsLG1FEdTCXoh/wVpUtFGMD+EDbGW0Ehb2zvd9V7FO6qSztfAJBPMIQhqTaCGinGQXxuXmund3NswN84NTXe7M9zuc2V12nctkTj5lWZ713l92y4j3/iaAHZJ/SL51y4SkawD26vAHNZlMrrploSiK0wDWm/AA9r3351zqALgD4IMJWJHcIPkLwOPei3rvLwJ4A2ALwMeYJelpK3wzNhuNhJ2F3uFJPgLwM5zFWAXgXVEUp2aEb35f7x086Pwo4Um+nxee5G8Aq4MEbGyCbny1OZR0L0LdbcJLuj1K+FpgKxDof4iOQGOGN+yQNQtb51xEJN0gudsOL+lFtE3GEujSeT/kyjOmgHUewPd5nZf00vZOTqBreB6eubQESN6aNfP4d2yuBxeNdAQArPyv84btkZxA1/BJCiwSPjmBo67z825SSkXAHhNIfln0JqVUBAA87HOHVSoCJD8FQb4BeNblf0pBQNKVOsBn7/3zsizPdN1PKQjY/FdVdanPfkpBYAjKAi2ywIIoC7TIAguiLHDMr1XaSHoSPD9tuqEAeB0suG0bRHqxNass/HbQsFeDBabT6QWSP1pPlqMXgP2qqs67GEh6cJwSOPwOcN/FxLpRj9Nm7NfrqMvWJrkWrfOZTCaTOfH8BUJmVJAShmWwAAAAAElFTkSuQmCC"/>
+</defs>
+</svg>

package/dist/phone-mockup.svg

@@ -0,0 +1,31 @@
+<svg width="344" height="713" viewBox="0 0 344 713" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="344" height="712.056" rx="44" fill="white"/>
+<path d="M54.6454 34V28.1943H54.5624L52.8095 29.4346V28.248L54.6503 26.9541H55.9052V34H54.6454ZM60.7072 34V32.6475H57.2599V31.6172C58.173 30.0303 59.174 28.4092 60.131 26.9541H61.9132V31.6074H62.8605V32.6475H61.9132V34H60.7072ZM58.4318 31.6367H60.7267V27.96H60.6534C59.9308 29.0635 59.1154 30.3672 58.4318 31.5635V31.6367ZM64.6742 29.4346C64.2298 29.4346 63.8978 29.0928 63.8978 28.6631C63.8978 28.2285 64.2298 27.8916 64.6742 27.8916C65.1234 27.8916 65.4505 28.2285 65.4505 28.6631C65.4505 29.0928 65.1234 29.4346 64.6742 29.4346ZM64.6742 33.0576C64.2298 33.0576 63.8978 32.7207 63.8978 32.2861C63.8978 31.8516 64.2298 31.5146 64.6742 31.5146C65.1234 31.5146 65.4505 31.8516 65.4505 32.2861C65.4505 32.7207 65.1234 33.0576 64.6742 33.0576ZM66.688 34V33.1504L69.0025 30.7871C69.9595 29.8203 70.2281 29.4639 70.2281 28.9219V28.9072C70.2281 28.2578 69.7837 27.7891 69.0513 27.7891C68.3042 27.7891 67.8013 28.2822 67.8013 29.0098L67.7964 29.0293L66.6245 29.0244L66.6197 29.0098C66.6197 27.6963 67.6451 26.7783 69.1148 26.7783C70.4869 26.7783 71.4732 27.6133 71.4732 28.7998V28.8145C71.4732 29.6152 71.0874 30.25 69.8033 31.4854L68.3921 32.8525V32.9551H71.5806V34H66.688ZM75.1521 34.1758C73.4773 34.1758 72.4714 32.7549 72.4714 30.4795V30.4697C72.4714 28.1943 73.4773 26.7783 75.1521 26.7783C76.8269 26.7783 77.8425 28.1943 77.8425 30.4697V30.4795C77.8425 32.7549 76.8269 34.1758 75.1521 34.1758ZM75.1521 33.1553C76.0505 33.1553 76.573 32.1494 76.573 30.4795V30.4697C76.573 28.7998 76.0505 27.8037 75.1521 27.8037C74.2537 27.8037 73.741 28.7998 73.741 30.4697V30.4795C73.741 32.1494 74.2537 33.1553 75.1521 33.1553Z" fill="black"/>
+<path d="M257.835 27C257.835 26.5398 258.208 26.1667 258.668 26.1667H259.501C259.961 26.1667 260.335 26.5398 260.335 27V33.6667C260.335 34.1269 259.961 34.5 259.501 34.5H258.668C258.208 34.5 257.835 34.1269 257.835 33.6667V27Z" fill="black"/>
+<path d="M262.001 25.3333C262.001 24.8731 262.374 24.5 262.835 24.5H263.668C264.128 24.5 264.501 24.8731 264.501 25.3333V33.6667C264.501 34.1269 264.128 34.5 263.668 34.5H262.835C262.374 34.5 262.001 34.1269 262.001 33.6667V25.3333Z" fill="black"/>
+<path d="M253.668 29.9167C253.668 29.4564 254.041 29.0833 254.501 29.0833H255.335C255.795 29.0833 256.168 29.4564 256.168 29.9167V33.6667C256.168 34.1269 255.795 34.5 255.335 34.5H254.501C254.041 34.5 253.668 34.1269 253.668 33.6667V29.9167Z" fill="black"/>
+<path d="M249.501 32C249.501 31.5398 249.874 31.1667 250.335 31.1667H251.168C251.628 31.1667 252.001 31.5398 252.001 32V33.6667C252.001 34.1269 251.628 34.5 251.168 34.5H250.335C249.874 34.5 249.501 34.1269 249.501 33.6667V32Z" fill="black"/>
+<path d="M277.668 32.0361C278.868 31.0007 280.625 31.0005 281.824 32.0361C281.885 32.0918 281.919 32.1709 281.921 32.2539C281.923 32.3369 281.891 32.4174 281.833 32.4756L279.954 34.4102C279.899 34.4669 279.825 34.4989 279.746 34.499C279.668 34.499 279.592 34.467 279.537 34.4102L277.658 32.4756C277.6 32.4174 277.569 32.3369 277.57 32.2539C277.572 32.1709 277.608 32.0918 277.668 32.0361ZM275.128 29.7207C277.713 27.2665 281.716 27.2665 284.301 29.7207C284.359 29.7782 284.392 29.8569 284.393 29.9395C284.394 30.0223 284.362 30.1024 284.305 30.1611L283.219 31.2812C283.107 31.3954 282.926 31.3974 282.812 31.2861C281.963 30.5016 280.858 30.0673 279.713 30.0674C278.569 30.068 277.466 30.5022 276.617 31.2861C276.503 31.3974 276.322 31.3954 276.21 31.2812L275.124 30.1611C275.067 30.1025 275.036 30.0223 275.036 29.9395C275.037 29.8569 275.07 29.7781 275.128 29.7207ZM272.591 27.4082C276.555 23.5301 282.81 23.5301 286.775 27.4082C286.832 27.4658 286.864 27.5448 286.864 27.627C286.865 27.7088 286.834 27.7875 286.778 27.8457L285.69 28.9658C285.578 29.0807 285.396 29.0826 285.282 28.9697C283.772 27.5039 281.767 26.6866 279.683 26.6865C277.599 26.6866 275.594 27.5039 274.083 28.9697C273.969 29.0827 273.788 29.0808 273.676 28.9658L272.588 27.8457C272.532 27.7875 272.501 27.7088 272.501 27.627C272.502 27.5448 272.534 27.4658 272.591 27.4082Z" fill="black"/>
+<path opacity="0.35" d="M298.864 25H309.864C311.245 25 312.364 26.1193 312.364 27.5V30.5C312.364 31.8807 311.245 33 309.864 33H298.864C297.484 33 296.364 31.8807 296.364 30.5V27.5C296.364 26.1193 297.484 25 298.864 25Z" stroke="black"/>
+<path opacity="0.4" d="M313.864 27.5V30.5C314.47 30.2459 314.864 29.6549 314.864 29C314.864 28.3451 314.47 27.7541 313.864 27.5Z" fill="black"/>
+<path d="M297.864 27.5C297.864 26.9477 298.312 26.5 298.864 26.5H309.864C310.417 26.5 310.864 26.9477 310.864 27.5V30.5C310.864 31.0523 310.417 31.5 309.864 31.5H298.864C298.312 31.5 297.864 31.0523 297.864 30.5V27.5Z" fill="black"/>
+<rect width="320" height="66" transform="translate(12 623)" fill="white"/>
+<path d="M38.5 642.625C37.4661 642.625 36.625 643.466 36.625 644.5V645.625H32.875C32.461 645.625 32.125 645.961 32.125 646.375C32.125 646.789 32.461 647.125 32.875 647.125H33.666L34.2974 658.5C34.3641 659.691 35.3501 660.625 36.5437 660.625H43.4563C44.6495 660.625 45.6359 659.691 45.7026 658.5L46.334 647.125H47.125C47.539 647.125 47.875 646.789 47.875 646.375C47.875 645.961 47.539 645.625 47.125 645.625H43.375V644.5C43.375 643.466 42.5339 642.625 41.5 642.625H38.5ZM38.5 644.125H41.5C41.707 644.125 41.875 644.293 41.875 644.5V645.625H38.125V644.5C38.125 644.293 38.293 644.125 38.5 644.125ZM35.1675 647.125H44.8325L44.2048 658.416C44.1827 658.814 43.8542 659.125 43.4563 659.125H36.5437C36.1462 659.125 35.8173 658.814 35.7952 658.417L35.1675 647.125ZM40 648.719C39.6374 648.719 39.3438 649.013 39.3438 649.375V656.875C39.3438 657.237 39.6374 657.531 40 657.531C40.3626 657.531 40.6562 657.237 40.6562 656.875V649.375C40.6562 649.013 40.3626 648.719 40 648.719ZM37.241 648.719C36.8791 648.732 36.5958 649.035 36.6082 649.398L36.8696 656.93C36.882 657.284 37.1734 657.563 37.5252 657.563C37.533 657.563 37.5407 657.563 37.5486 657.563C37.9105 657.551 38.1938 657.247 38.1814 656.885L37.9199 649.352C37.9072 648.99 37.6025 648.711 37.241 648.719ZM42.7583 648.719C42.3957 648.709 42.0928 648.99 42.0801 649.352L41.8186 656.885C41.8059 657.247 42.0892 657.551 42.4514 657.563C42.4593 657.564 42.467 657.563 42.4749 657.563C42.8266 657.563 43.118 657.284 43.1304 656.93L43.3918 649.398C43.4046 649.035 43.1206 648.732 42.7583 648.719Z" fill="#989898"/>
+<path d="M122 644.875C120.759 644.875 119.75 645.884 119.75 647.125V656.875C119.75 658.116 120.759 659.125 122 659.125H134C135.241 659.125 136.25 658.116 136.25 656.875V648.625C136.25 647.384 135.241 646.375 134 646.375H126.914C126.574 646.375 126.242 646.258 125.978 646.046L125.335 645.533C124.806 645.109 124.14 644.875 123.461 644.875H122ZM122 646.375H123.461C123.801 646.375 124.133 646.492 124.398 646.704L125.04 647.217C125.569 647.641 126.235 647.875 126.914 647.875H134C134.414 647.875 134.75 648.211 134.75 648.625V649H121.25V647.125C121.25 646.711 121.586 646.375 122 646.375ZM121.25 650.5H134.75V656.875C134.75 657.289 134.414 657.625 134 657.625H122C121.586 657.625 121.25 657.289 121.25 656.875V650.5Z" fill="#989898"/>
+<rect x="204" y="640" width="24" height="24" fill="url(#pattern0_2_77)"/>
+<rect x="292" y="640" width="24" height="24" fill="url(#pattern1_2_77)"/>
+<g opacity="0.8">
+<rect x="127" y="690" width="90" height="4" rx="2" fill="#0F1218" style="mix-blend-mode:darken"/>
+</g>
+<rect x="131" y="20" width="83" height="22" rx="11" fill="#24262D"/>
+<defs>
+<pattern id="pattern0_2_77" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_2_77" transform="scale(0.0208333)"/>
+</pattern>
+<pattern id="pattern1_2_77" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image1_2_77" transform="scale(0.0208333)"/>
+</pattern>
+<image id="image0_2_77" width="48" height="48" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAADPElEQVR4nO1YSWgUQRTtKHEJKnpwAUURBMXlIi6HQBS9iCKeREHwIIJeBBFBBHGOLhBktKn3fichHiRgK+Yi0YuIiAdxF7xo9BBwQUVUMMFoMvLJb2gGx2SmM5O09IO+dFf9eu9Xdf3F8zJkyJAhw3iB7/uLSD4j2eGlDSKyjGQPyQLJV16aICKrAXw08ukSQLKJ5DclDuBiqgSIyDaSvUb+fBiGk1IjwDm3G0C/kT+t70SkPhUCSB4kOQBgkOTh6H0qBAA4bl7vB7An/i0SAOCNc25WqUfH1Zx4oVCoA3DWCPaR3F48JrYDwz4APgB4pDYBNOZyuQlVIx+G4USSgS38HcDGUmNJ3iL55V+PHb1iUS9FZKc6arTJ681y2ch/IrkmqU3dKQDz1RG2A92xnbkXBMGCUSEvIg0Abpjx9yKyyqsCCoVCnXo/EmKOakpktL29fSaAu9FP6fv+klFjXHrNKSQvmcN6RWRtRYZaWlrmAnhi5J/7vj/Pq+1l0WwiespeWw2QfGEG7uu159UYuVxuAslr5sDOSjzw3Ca/DYJghTcG8H1/mq5vPBrLmtzW1jab5EPbhc8A1nljABHZbxxulT05n8/PAHAnuvudc5tGuGh9qQhcbrAKw3Ci7gKA3865OWWLaG5ungrgehR9AewYwdl9PYII3AXgqIgsHI4DAOg859w+rxJYetBhBH4B2PuPsQ1GcvAv0bfvL4IGNEgCWF7KpqYsNrbVqxTq2cgTRu7QMAI+ldpR59xKPdsaIAH8tvE/SZ7QI1M8Ry8RG9PlJYHdTqdiR+FkuQKK4ZxbSvJKzGan2igaM8u+P/VGAySPRckYgHPx5KtcARFI7gLww4jejKfbVakxAByw86uG26Otr1SAQkTW621nNi9UvUiKl5QaNfP5/OQkAhQkt8Qqvc1Vr/IAbI2KepK3NYdKIkABIG82us0p1S1TNe0F8NUWeZxUQGtr63QA78zekZrU2cWNrSQCFBq0zNY3LW5q0iiItxaTCsgNxZ1HUQCrWadDm7sAHmiHLqktEdkQi9bju1VTCiSvprLfGiEIgsWxHCp9AhQkz6RaQH6oLrmredhYc8mQIUOG/xB/ACszo0e1cHoDAAAAAElFTkSuQmCC"/>
+<image id="image1_2_77" width="48" height="48" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB9UlEQVR4nO2Zv2oVQRTGBxHsLG1FEdTCXoh/wVpUtFGMD+EDbGW0Ehb2zvd9V7FO6qSztfAJBPMIQhqTaCGinGQXxuXmund3NswN84NTXe7M9zuc2V12nctkTj5lWZ713l92y4j3/iaAHZJ/SL51y4SkawD26vAHNZlMrrploSiK0wDWm/AA9r3351zqALgD4IMJWJHcIPkLwOPei3rvLwJ4A2ALwMeYJelpK3wzNhuNhJ2F3uFJPgLwM5zFWAXgXVEUp2aEb35f7x086Pwo4Um+nxee5G8Aq4MEbGyCbny1OZR0L0LdbcJLuj1K+FpgKxDof4iOQGOGN+yQNQtb51xEJN0gudsOL+lFtE3GEujSeT/kyjOmgHUewPd5nZf00vZOTqBreB6eubQESN6aNfP4d2yuBxeNdAQArPyv84btkZxA1/BJCiwSPjmBo67z825SSkXAHhNIfln0JqVUBAA87HOHVSoCJD8FQb4BeNblf0pBQNKVOsBn7/3zsizPdN1PKQjY/FdVdanPfkpBYAjKAi2ywIIoC7TIAguiLHDMr1XaSHoSPD9tuqEAeB0suG0bRHqxNass/HbQsFeDBabT6QWSP1pPlqMXgP2qqs67GEh6cJwSOPwOcN/FxLpRj9Nm7NfrqMvWJrkWrfOZTCaTOfH8BUJmVJAShmWwAAAAAElFTkSuQmCC"/>
+</defs>
+</svg>

package/dist/stores/editor.d.ts

@@ -1,5 +1,9 @@
 export declare const useEditorStore: import("pinia").StoreDefinition<"editor", {
     isCodeEditorOpen: boolean;
     isVersionHistoryOpen: boolean;
+    isPreviewModeOpen: boolean;
     editorVisualMode: string;
+    emailFormat: "html" | "amp";
+    ampHtml: string | null;
+    ampErrors: string[] | null;
 }, {}, {}>;

package/dist/stores/editor.js

@@ -1,11 +1,15 @@
 import { defineStore as e } from "pinia";
-const t = e("editor", {
+const r = e("editor", {
   state: () => ({
     isCodeEditorOpen: !1,
     isVersionHistoryOpen: !1,
-    editorVisualMode: "desktop"
+    isPreviewModeOpen: !1,
+    editorVisualMode: "desktop",
+    emailFormat: "amp",
+    ampHtml: null,
+    ampErrors: null
   })
 });
 export {
-  t as useEditorStore
+  r as useEditorStore
 };